Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Animations : principes et techniques de base

Compatible Flash MX. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS4. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash Professionnel. Priorité aux techniques d'animation, de dessin et recours minimum à ActionScript.. Cliquer pour en savoir plus sur les compatibilités.Par nataly (Nataly), le 30 juillet 2010

Ce n'est pas un scoop : Flash permet de créer des animations dynamiques et interactives à destination du web (le plus souvent).
Ce n'est pas un scoop non plus : j'ai une furieuse tendance à préférer attaquer les choses par leur début, je me propose donc quelques tutos traitant des principes et techniques de base quand on parle animation. Il y en a peu, une fois ces quelques points assimilés il n'est plus question que de raisonnement et de ruse.

En gros ce seront les prérequis à tout tuto traitant d'animation ;)

Ces points sont (et seront) développés sur quatre chapitres :

• Scenario et manipulation des images (ici)
Interpolations de mouvement (dites classiques sous CS4)
Interpolation de forme
• Interpolations de mouvement spécifiques à CS4 (à venir)


Prérequis :
Pour suivre ce tuto vous devez avoir les notions de bases en terme de techniques de dessin, connaître les outils et leur utilisation et savoir créer des symboles de bibliothèque.


Conventions de rédaction :
Entre crochets : les raccourcis clavier
cmd = ctrl sous PC
alt = option sous PC



De la première version de Flash jusqu'à CS3 (incluse) ces techniques sont les mêmes. Depuis CS4 elles semblent avoir changé, mais ce n'est qu'une impression, les fondements restant les mêmes. Disons que CS4 met les mêmes techniques à notre disposition, enrichies de quelques sophistications.
Puisque que “qui peut le plus peut le moins”, vous pouvez suivre ce tuto quelque soit la version que vous utilisiez. Je préciserai les nuances en cours de route.

Eléments fondamentaux

Qu'est-ce qu'une animation ?

Tout le monde le sait : une animation c'est une triche. C'est en fait une succession d'images fixes. La lecture (l'affichage) rapide d'une succession d'images fixes légèrement différentes les unes des autres donne l'impression de mouvement.
C'est le principe de la pellicule de film.
En conséquence si nous voulons obtenir une animation il va nous suffire de créer une série d'images légèrement différentes les unes des autres, de les disposer sur une “pellicule” et de lire ladite pellicule.

Le scenario

La pellicule, chez Flash, c'est le scénario.

Si ce n'est déjà fait, lancez Flash, et créez un nouveau document.

Quelque soit la version avec laquelle vous travaillez, vous avez à l'écran, une zone blanche qu'on appellera la scène et au dessus une fenêtre nommée scénario (Timeline pour les anglophiles).

Chaque case du scenario représente une image, elles sont numérotées pour qu'on s'y retrouve plus facilement. La zone grise avec les numéros d'image, je l'appelle la règle.

Représentation des images dans le scénario

Regardons de plus près :

Image 1 nous voyons un rectangle blanc avec un petit cercle blanc à sa base. Pour l'instant cette image est vide (on n'a encore rien dessiné sur la scène) c'est pourquoi elle est blanche, et le cercle vide.

Dessinons quelque chose sur la scène… N'importe quoi… Tiens un rectangle par exemple, hop ! La case devient grise et le cercle noir.

Voici une première chose à savoir lire sur le scenario :

• Case blanche : image vide.
• Case colorée : il y a quelque chose.

Les cases identifiées d'un cercle sont appelée images clés, ce sont des images dont nous avons, nous utilisateurs, décidé du contenu, on va y revenir très vite. Mais en attendant on peut déjà dire :

• Cercle vide : image clé vide.
• Cercle noir : image clé pas vide.

La tête de lecture

La tête de lecture est figurée par un rectangle rouge dans la règle prolongé d'une ligne rouge.
En cliquant dans la règle on peut déplacer la tête de lecture et afficher sur la scène le contenu de l'image considérée. Certes, en l'état on ne peut pas bouger la tête de lecture, pour cause : il y a une seule image.

Ajouter des images

Oui, j'ai dit à l'instant que chacune des cases du scénario représentait une image… C'était pour aller vite. Les cases représentent des images potentielles.
Si on veut le même rectangle sur les 25 premières images il va falloir ajouter autant d'images que nécessaire et y poser ce rectangle. Ne paniquez pas : ça ne signifie pas 25 manipulations.
Flash va nous simplifier considérablement les choses :

Pour ajouter les images en question il suffit de cliquer sur la case numérotée 25 afin de la sélectionner, puis d'un clic droit sur la case (image) appeler le menu contextuel et de choisir insérer une image (“tout court ” : pas une image clé) ou, encore mieux, [F5].

Vous pouvez aussi passer par le menu Insertion :

Ne vous y trompez pas : ça n'insère pas une image, ça crée autant d'images que nécessaire jusqu'à celle sélectionnée, et en plus ça recopie dans chacune le contenu de celle “de départ” (l'image clé avec son point noir).

On voit maintenant un ruban gris avec un point noir image 1 et un rectangle image 25.
Ce qui signifie que toutes les images qui suivent l'image clé de départ contiennent la même chose, et que ce n'est pas nous qui nous en en chargeons, c'est flash qui, tout seul comme un grand, reproduit d'image en image le contenu de la précédente.

On peut déplacer la tête de lecture en cliquant dans la règle, la scène affiche toujours le même rectangle au même endroit.

Si nous prend l'idée de déplacer ledit rectangle, il faut le sélectionner dans la scène, et… Regardez ce qui se passe dans le scénario, c'est tout le ruban qui est sélectionné (il devient bleuâtre sous CS4 et noir sous CS3). Si nous déplaçons le rectangle, quelque soit la position de la tête de lecture, ce sont toutes les images qui font l'objet de la modification.

Voilà qui est bien pratique parce que, franchement, s'il s'était agit de modifier la position du rectangle sur chacune des 25 images, c'eût été un coup à rendre son tablier avant même de l'avoir enfilé !
Evidemment c'est le même principe si vous modifiez le rectangle, sa couleur par exemple, voire même si vous le supprimez carrément pour dessiner autre chose.

Insérer des images clé

Oui mais alors, comment est-ce que fait-on si on veut vraiment, image 12 par exemple, changer la place de ce fichu rectangle. On le veut à une certaine position les 11 premières images et à une autre les suivantes.
Et bien on va insérer une image sur laquelle on peut prendre la main, soit une image clé.

Sélectionnez l'image 12 (la case, cliquer sur la règle déplace la tête de lecture mais ne sélectionne rien du tout).

Choisissez Insérer une image clé depuis un clic droit ou depuis le menu Insertion /Scenario ou [F6].


Nous voilà avec deux bandeaux d'images semblables à celle de l'image clé. On peut déplacer le rectangle rouge à partir de l'image 12 (prenez soin de poser la tête de lecture image 12 ou postérieure).

On peut vérifier, en déplaçant la tête de lecture sur la règle, la position du rectangle selon l'image lue.



Notez :
Pour déplacer la tête de lecture on peut cliquer sur la règle mais aussi utiliser les raccourcis clavier :
[,] (virgule) pour reculer
[;] pour avancer
[Entrée] pour tout lire
[Echappe] pour arrêter la lecture

Tester l'animation

On peut d'ores et déjà tester cette première animation minimaliste [cmd - Entrée] ou menu Contrôle.

Voilà, on a un rectangle qui tressaute. Rassurez vous, on va très vite faire plus convaincant. Je veux dans un premier temps faire un tour d'horizon des principes fondamentaux avant de nous lancer dans les grandes manipulations.

Supprimer des images

Quand on sait faire, il faut savoir défaire.

Images clé

Vous avez inséré une image clé avec [F6], pour la supprimer c'est [Maj-F6]. Notez que ça ne supprime pas le contenu de l'image considérée mais seulement sa caractéristique d'image clé qui veut que vous puissiez en modifier le contenu sans pour autant modifier celui des images précédentes.

Images quelconques

Si nous voulons supprimer les images de 12 à 25, sélectionner le rectangle dessiné et le supprimer n'est pas suffisant. En fin de compte ça le supprime de toutes les images, mais ça ne supprime pas pour autant les images elles mêmes.


Maintenant qu'on sait lire le scénario, c'est écrit dessus : image 12, une image clé vide (cercle vide) répétée jusqu'à image 25 (rectangle).

Puisque ce sont les images (du scénario) qu'on veut supprimer, il faut commencer par les sélectionner, d'ailleurs on peut souhaiter n'en supprimer que quelques unes, les cinq dernières par exemple (de 20 à 25).



On insère par [F5]… On supprime par [Maj-F5].
Vous pouvez aussi choisir Supprimer les images du menu contextuel (clic droit).

Sélectionner plusieurs images du scenario

Attention, la sélection multiple dans le scenario demande du doigté… A défaut, de la vigilance.

Pour sélectionner un ensemble d'images à la souris il faut :
1• emmener le pointeur sur l'image considérée dans le scenario (la case)
2• enfoncer le bouton de la souris
3• maintenir enfoncé et glisser jusqu'à la dernière image

Ne procédez surtout pas en deux fois : d'abord sélectionner l'image (clic) puis enfoncer le bouton de la souris sur cette même image et glisser conduit à déplacer l'image en question, et du coup on fabrique une image clé !

Exemple de la mauvaise manipulation:

Clic sur l'image 25, puis reprise pour glisser :
:principestechniques:attentionselection.jpg?302×70|Clic sur l'image 19}}

Le glissé vers la gauche depuis l'image 25, déjà sélectionnée, crée une nouvelle image clé :
Le Le glissé vers la gauche depuis l'image 25, déjà sélectionnée, crée une nouvelle image clé

Vous pouvez aussi procéder très classiquement à l'aide de [Maj] :
1• Sélection (clic) de la première image
2• [Maj]
3• Sélection (clic) de la dernière image

Vous pouvez aussi sélectionner des images consécutives sur plusieurs calques :



Et par la même déplacer l'ensemble des images sélectionnées :

Si vous maintenez [alt] enfoncée, vous opérerez une duplication.
Et enfin, constatez que si vous sélectionnez plusieurs images, et que vous utilisez [F5] vous insérerez, d'un coup, autant d'images que sélectionnées. Même principes pour la suppression [Maj-F5].
C'est surtout pratique quand il s'agit de régler la vitesse (puisque c'est le rapport mouvement/nombre d'images).

La cadence

L'autre chose d'importance quand on parle d'animation c'est la cadence à laquelle les images défilent. La cadence exprime le nombre d'images lues en une seconde (image par seconde : ips). On peut la modifier depuis la fenêtre scénario .



?73×386

Ces copies d'écran concernent CS3.
Pour CS4 on modifie directement dans la case qui est éditable.


Notez que vous lisez non seulement le numéro de l'image sélectionnée, mais aussi le temps écoulé en fonction de la cadence (identifié en bleu : Temps).

Histoire de me simplifier du calcul mental, je choisis ici 20 images seconde.

J'en entends qui grommèlent : ils ont réglé la cadence à 20 ips, sélectionné l'image 20… On devrait lire '1s' (une seconde)…
20 images à 20 images secondes, ça fait une seconde non ? C'est quoi ce 0.9 ?!
:) C'est parce que le temps exprimé c'est le temps écoulé à l'entrée dans l'image concernée.
20 images/seconde, ça fait 50 milliseconde par image. Arrivé image 20, seules les 19 premières ont été lues : 19 x 50 = 950… 0.95 seconde… c'est ce qu'on lit (à la décimale près)

Résumé

Manipulation des images au clavier

Insérer une image : [F5]
Supprimer une image [Maj -F5]
Insérer une image clé [F6]
Supprimer une image clé [Maj-F6]
Insérer une image clé vide [F7]
Supprimer une image clé vide [Maj-F7]

Déplacer la tête de lecture au clavier

[,] (virgule) pour reculer
[;] pour avancer
[Entrée] pour tout lire
[Echappe] pour arrêter la lecture

Exercice Clignoter

Juste histoire de nous faire la main et de nous récapituler, un petit exercice vite fait : faire clignoter une boule, au rythme d'une fois la seconde. Dit autrement : on la voit ½ sec, on ne la voit plus ½ sec, on la voit ½ sec, on ne la voit plus ½ sec…
Pour s'entraîner depuis zéro, on supprime tout.
Vous savez faire : sélectionner toutes les images du scenario et supprimer [Maj-F5].

Il faut donc dessiner une boule image 1.
Pour ceux qui auraient trop scrupuleusement respecté les instructions pour tout supprimer, ça crie quand on essaie de dessiner :


L'important ici, c'est le début de la phrase : Aucune image n'est disponible
Hé oui, si vous avez vraiment sélectionné toutes les images, image 1 comprise, sur le scenario et que vous les avez toutes supprimées, il n'y a plus que des images potentielles.

Il faut pour le moins une image sur laquelle, moi utilisateur j'ai la main, soit une image clé (forcément vide) : [F7]

Sur ce coup là, en fait, vous pouvez utiliser n'importe quelle commande : [F6] [F7] [F5].

Maintenant que je vous ai rusés (mauvais fond, je sais :mrgreen: n'empêche que ça m'étonnerait bien que ça ne vous arrive jamais, autant être prévenus), on peut s'attaquer à dessiner une boule (ou ce que vous voulez) et la faire clignoter.

Il y a de multiples façons de s'y prendre, l'important c'est le résultat.
On peut se dire après avoir dessiné la boule image 1 qu'il nous faut une animation d'une seconde qui bouclera.
1 seconde à 20 ips, ça fait 20 images (pff… le calcul) donc on sélectionne l'image 20 (la case) et on ajoute des images [F5]. A mi parcours il faut que la boule disparaisse, on sélectionne l'image (11) et on insère une image clé vide [F7].



Voilà ça clignote. :)


La suite...

Tout ceci étant posé, on en arrive à la réalisation du mouvement proprement dit (déplacement, modification). Ce qui fait l'objet de la page suivante : Les interpolations de Mouvement (appelées "Classiques" dans CS4).