Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les interpolations de Mouvement (appelées "Classiques" dans CS4)

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

On a vu précédemment les principes de base de l'animation dans Flash, à savoir le scénario et les images clés. On en arrive maintenant à la réalisation du mouvement proprement dit (déplacement, modification).

Il y a deux techniques différentes (si peu mais quand même) quand on parle animation : soit on anime une instance de symbole de bibliothèque, soit on anime une forme (dessinée directement sur la scène, ni un clip, ni un graphique, ni un bouton…).

Quand on anime une forme on met en œuvre l'interpolation de forme.
Quand on anime une instance de symbole on met en œuvre l'interpolation de mouvement (dite classique sous CS4).

Ce chapitre concerne exclusivement les interpolations de mouvement (classique CS4).

On est d'accord que les objets de bibliothèque sont des symboles et que ce sont des instances de ces symboles qu'on manipule. On dit aussi occurrence.
Afin d'alléger le discours je me permettrai dorénavant l'abus de langage suivant : quand j'écrirai animer un graphique ou animer un clip ou même animer un symbole, à chaque fois il faudra comprendre animer une instance du symbole de type graphique ou animer une instance du symbole de type clip. Je parlerai aussi d'objets pour signifier ces instances.


Afin de simplifier les calculs les exemples proposés ici considèrent une cadence de 20 ips.

Principe


A titre de démo, on va faire se déplacer un visuel quelconque, une étoile par exemple.
Puisque on est dans le thème interpolation de mouvement, créons un symbole de type graphique avec un visuel. J'y trace vite fait une étoile, dessinez bien ce que vous voulez, un lapin, une voiture…



On souhaite que l'étoile se déplace vers la droite en 4 secondes (4×20 =80 images).
Ce qu'on sait, c'est où se trouvera l'étoile au départ et où elle se trouvera à la fin (image 80). Les positions intermédiaires on va laisser Flash s'en charger, à lui de calculer chaque position entre les deux bornes. On pourrait penser entre les deux pôles…

Image 1, il y a le graphique étoile.
Image 80, on veut ce même graphique mais ailleurs sur la scène. On va donc insérer une image clé [F6], pour prendre la main sans modifier les autres images, et déplacer l'étoile à sa position d'arrivée.


Entre les deux on va charger flash de calculer les positions intermédiaires, c'est une interpolation (inter–>entre les pôles).
Sélectionnez une image quelconque entre les deux images clé.
Une, ça suffit, flash calculera d'une image clé à l'autre. Ne sélectionnez pas tout le calque, pour l'instant ça donnerait l'impression de ne rien changer mais dans d'autres contextes ça vous jouera des tours.

CS3

Choisissez Créer une interpolation de mouvement dans le menu contextuel.


CS4

Attention : juste histoire de nous compliquer, la version CS4 propose trois types d'interpolation : Mouvement, Forme, Classique. C'est classique qu'il convient de choisir. Mouvement correspond à une toute autre technique qui devra faire l'objet d'un tuto spécifique.





Voilà le travail est fait, flash a calculé toutes les positions intermédiaires et positionné le graphique.

On a choisi interpolation, parce que c'est ce dont il s'agit, de mouvement (classique pour CS4) parce que ça s'applique à une instance de symbole.

Sur le scénario on lit : de image 1 à image 80 (les point noirs) il y a une interpolation (la longue flèche) de mouvement (c'est bleu). On sait donc que ça concerne un symbole.

Si on teste [cmd-Entrée], l'étoile traverse l'écran, en boucle.

Parfait.
On a modifié la caractéristique position, en fait les valeurs x et y dans le panneau propriétés, on aurait pu aussi modifier n'importe quelle autre propriété.

L'échelle, la teinte, l'alpha…

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Contrainte

Gardez à l'esprit que vous devez dédier un calque par objet animé.
Si vous posez un deuxième clip sur le calque d'une image portant déjà un clip animé, le ruban bleu, signifiant l'interpolation, présente une ligne pointillée (cassée en quelque sorte) c'est que l'interpolation est mauvaise.


Pour ajouter un fond, par exemple, il suffit d'ajouter un calque :

Résumé en cinq points

Pour appliquer une interpolation de mouvement à une instance de symbole :

1• Disposer l'instance à sa position de départ, dans son état initial sur l'image départ.
2• Insérer une image clé [F6] sur l'image d'arrivée.
3• Disposer l'instance à sa position d'arrivée, dans son état final sur l'image d'arrivée.
4• Sélectionner une image entre les images clé.
5• Choisir Interpolation de mouvement.

Propriétés des interpolations

On peut ajouter quelques sophistications aux interpolations : rotation et/ou effet d'accélération. Qu'il s'agisse de CS3 ou CS4, le principe est le même : sélectionner une image entre les images clé (le ruban bleu) et intervenir dans le panneau propriétés.

CS3


CS4



Accélération

Régler une valeur d'accélération permet d'obtenir un déplacement dont la vitesse n'est pas constante. Notez que, bizarrement, une accélération positive produit un ralentissement, pour accélérer le déplacement il faut une valeur négative… Bon… Une fois qu'on le sait…

On peut aussi obtenir une accélération non linéaire, l'accélération n'étant pas constante. Le plus facile pour comprendre c'est de se livrer à des tests. Cliquez sur le bouton 'modifier' à côté de accélération sous CS3 ou sur le crayon sous CS4, ce panneau s'affiche :



En cliquant sur la ligne qui figure l'accélération vous déterminez des points d'inflexion que vous pouvez manipuler comme vous en avez l'habitude quand il s'agit de courbes de Bezier (trafiquez les petites poignées blanches ;))


Rotation

Quant à la rotation, il suffit sous CS3 de choisir un sens dans liste rotation : vers la droite ou vers la gauche, et le nombre de “tours” qu'on souhaite.

Sous CS4, c'est le même principe, Si ce n'est que la liste s'intitule “Faire pivoter”.
Ne vous laissez pas abuser par ce 90° qui pourrait vous laisser croire que ce sont des quarts de tours qui sont effectués… Pour un tour complet on pourrait être tentés de choisir 90° vers la droite (ou vers la gauche) 4 fois. On obtiendrait 4 tours complets… Pareil : une fois qu'on le sait…

Attention au point de pivot


Vous constatez que la rotation s'effectue autours du centre du clip considéré. Je parle du petit cercle blanc qui apparait lorsqu'on utilise l'outil de transformation [Q]


On s'y penchera de plus près au chapitre Pivot.

Quelques techniques

Voilà on sait tout. A partir de maintenant il ne s'agira plus que de pratique. Ce sont ces toujours mêmes principes de base que nous mettrons on œuvre.

Enchaîner les interpolations

Il est courant qu'un graphique (ou un clip, ou un bouton) fasse l'objet de plusieurs modifications les unes à la suite des autres. Quand je dis modifications j'entends modifications animées, soit interpolation.
Pour enchaîner les interpolations. Il suffit d'ajouter autant d'images clés que nécessaire [F6], et modifier le clip à chaque fois (position et/ou caractéristiques).
Par exemple l'étoile peut continuer son trajet une fois arrivée au coin bas droit, revenir à gauche par exemple, puis remonter à sa position d'origine.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Là où vous en êtes, vous avez :
image 1, une étoile (graphique) en haut à gauche de la scène
image clé 80, l'étoile en bas à droite

Si ce n'est déjà fait, image clé 80, modifiez aussi l'échelle et la teinte de l'étoile pour en obtenir une plus petite (outil transformation [Q]) et verte (teinte).



Une fois arrivée en bas, on souhaite que l'étoile reparte vers la gauche et arrive dans l'autre coin dans le même état (verte et petite). Si on oublie l'idée de la faire tourner, on sait faire, c'est une interpolation en cinq points toute bête :

1• Disposer l'instance à sa position de départ, dans son état initial sur l'image départ.
C'est fait, l'image de départ c'est l'image clé 80

2• Insérer une image clé [F6] sur l'image d'arrivée.
Je choisis l'image 140…

3• Disposer l'instance à sa position d'arrivée, dans son état final sur l'image d'arrivée. Pas grand chose à modifier si ce n'est sa position, on la met à gauche.

4• Sélectionner une image entre les images clés.

5• Choisir Interpolation de mouvement.


Rotation automatique

Pour la faire tourner, on sait faire aussi : sélectionner une image dans la partie du scénario qui correspond au trajet gauche droite et intervenir dans le panneau des propriétés :





Boucler proprement

Occupons nous de terminer le trajet en la faisant remonter à sa position initiale avec ses caractéristiques initiales (grosse et pas verte).
Si on veut qu'il n'y ait pas d'à-coups quand ça boucle, il faut que l'étoile sur la dernière image soit exactement à la même position que l'étoile image 1.
Vous pouvez copier le graphique image 1 (Cmd-C] et le coller en place dernière image [Cmd-Maj-V], après avoir inséré une image clé vide [F7], bien sûr.

Vous pouvez aussi sans avoir inséré d'image clé :

Sélectionner l'image 1 dans le scénario et choisir Copier les images (clic droit).



Sélectionner l'image de fin, et choisir Coller les images (clic droit).


Monsieur Propre

Si vous avez procédé selon cette dernière technique (copier/coller les images du scénario) vous avez aussi collé l'interpolation. Si vous regardez de près, la dernière image clé est bleue. D'ailleurs sélectionnez là et regardez le panneau propriétés : à côté d'interpolation c'est Mouvement qui est sélectionné.

Ça n'a aucun sens une interpolation entre une seule image… Ça n'empêchera pas l'animation de fonctionner, n'empêche que c'est louche. D'ailleurs le panneau danger est affiché.
Sélectionnez aucune dans la liste. Vous pouvez aussi sélectionner l'image du scénario et choisir Annuler l'interpolation (clic droit).



Le fla CS3
sourcesetoile.fla

Pivoter

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Obtenir un mouvement de pivot ne fait appel à rien de nouveau, sur la technique de base. Il faut le rectangle en position de départ image 1, et image de fin [F6] on lui fait subir une rotation partielle.
Il y a cependant une petite chose à savoir, si on ne veut pas virer chèvre à la première occasion. Pour illustrer l'éventuel souci je vous propose de fabriquer un graphique avec un rectangle en prenant soin de centrer le rectangle (ça m'arrange pour la suite).





1• Image 1 de la scène on pose une instance du graphique, normal.
2• Image de fin, insérer une image clé [F6].
3• Et il s'agit d'appliquer une rotation partielle. On le fait à la souris en utilisant l'outil modification [Q]. Et on constate que le rectangle pivote autour de son centre, figuré par cercle blanc.



Ce n'est pas ce qu'on veut. On veut qu'il pivote depuis le coin. La technique simple c'est d'enfoncer [alt] et de saisir le coin opposé.



4• On sélectionne une image du scénario entre les images clés.
5• On applique l'interpolation de mouvement et tout va bien.



Notez la vision en pelure d'oignon qui permet de voir plusieurs images.

Le danger

A l'étape 3 peut-être aviez vous pris de l'avance et déplacé cercle blanc qui fait office de point de rotation pour obtenir la même chose…





Et bien non… ce n'est pas la même chose et ça ne donne pas le même résultat. L'affichage en pelure d'oignon illustre parfaitement ce qui se passe : c'est le cercle blanc qui sert au calcul des images interpolées. Image 1 et les suivantes ce point de rotation est au centre, image de fin il est dans l'angle… Flash fait ce qu'il peut, mais ne s'y retrouve pas !
A nous de lui fournir des informations cohérentes et de bien vérifier que ce point de rotation est au même endroit d'une image clé sur l'autre.


Aller-Retour

Une animation très fréquente c'est l'aller-retour. Vous savez tout ce qu'il faut savoir pour le faire, je me propose seulement de vous fournir une technique rapide.

Prenons l'exemple basique d'une pastille qui se baladerait de droite et de gauche, en boucle.

Ce qu'on veut, dit en français, c'est que la bille ait une position, définie par nous, image de départ (tout à gauche par exemple), la même position image finale, et soit tout à droite au milieu du trajet (en terme de temps).
Si je fais un aller retour Paris-Rome, je pars de Paris pour y revenir à la fin. Au milieu (de l'aller-retour) je serai à Rome.

Concrètement il nous faut un graphique Pastille.
Ce graphique pastille on le pose image 1 à gauche.



Disons qu'on veut un aller retour sur 3 secondes (soit 60 images). Image 60 la pastille sera de nouveau à gauche. Très bien : on sélectionne l'image 60 et on insère une image clé [F6].



Au milieu de l'aller-retour, la pastille sera à droite. On sélectionne l'image 30 et on insère une image clé [F6]. Là il faut déplacer la pastille tout à droite. On le fait.



Ne reste plus qu'à appliquer les interpolations de mouvement de 1 à 30 et de 30 à 60. On peut procéder en une seule fois en sélectionnant, dans le scénario, plusieurs images consécutives.



Attention : interpolation Classique pour CS4

C'est fait.


Résumé :

1• Disposer l'objet image de départ
2• [F6] image de fin.
3• [F6] image intermédiaire.
4• Modifier l'objet image intermédiaire.
5• Appliquer l'interpolation de mouvement.

La voiture

Avec la pastille l'aller retour ne pose aucun problème. Imaginons maintenant qu'on souhaite la même chose mais avec un visuel plus élaboré, une voiture par exemple.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

La petite nuance c'est que la voiture se retourne arrivée à droite de la scène sans quoi elle reviendrait à reculons comme ci-dessous.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

On ne peut pas se contenter de retourner le graphique (renverser horizontalement) sur l'image clé du milieu, sans quoi on obtient un résultat… discutable :D


Le trajet aller doit se faire avec la voiture “normale”, puis elle doit être retournée - nouvelle image clé - quant à l'image de fin ce n'est pas la même que celle du début : la voiture est aussi retournée.

Fin de l'aller



Début du retour



Dernière image


Imbrication

Jusqu'alors on a procédé à nos essais directement sur la scène du fla.
Vous l'avez remarqué les symboles clip possèdent aussi un scenario. En fait le fla n'est rien d'autre qu'un gros clip.
Tout ce que nous avons fait directement sur le scenario du document, nous aurions pu le faire tout pareil dans un clip.

C'est d'ailleurs comme ça qu'on procède le plus souvent.
Prenons un exemple parlant : imaginons que vous souhaitiez cette animation.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Vous n'allez pas sur la scène fabriquer 30 calques et animer 30 pastilles avec chacune une direction et un trajet différent !
J'en vois qui reprennent des couleurs ;)

A bien y regarder chacune des pastille se déplace selon un trajet linéaire et en fin de déplacement disparaît progressivement.
Ce sera donc l'animation de base fabriquée non pas “directement sur la scène” mais dans un clip.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Animation de base


Créez un nouveau clip (Mv_PastilleBouge).
La pastille, ce sera un graphique (Gr_Pastille). Le reste vous savez faire : deux interpolations de mouvement successives, la première pour le déplacement, la seconde qui jouera sur la propriété alpha (liste Couleur dans le panneau propriétés).

Amusez vous à disposer plusieurs instances de ce clip sur la scène en leur faisant subir des modifications de taille, de rotation, ou de teinte…

3 instances de Mv_PastilleBouge sur la scène: une sans modification, une pivotée vers le bas, et une plus petite et teintée:

Ce qui donne le résultat suivant:
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


Combiner plusieurs instances dans un nouveau clip

Du coup, vous avez deviné le principe : il suffit de disposer plusieurs instances les unes sur les autres avec rotation pour obtenir “l'effet fleur”.
Attention, toujours pas sur la scène, mais dans un clip (Mv_Corolle). C'est à partir de ce clip que nous obtiendrons chacune des trois corolles (noire, verte, rose). Ce seront des instances de Mv_Corolle un peu modifiées.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour faire facilement utilisez le panneau transformation comme expliqué ici.

Et ainsi de suite…

Et puisqu'on est dans le chapitre imbrication, ne nous privons pas d'un clip supplémentaire qui va contenir les trois corolles (Mv_3Corolles).
Quand je dis les trois corolles, il s'agira donc de trois instances de Mv_Corolle superposées. La première sera “normale” (sans modifications), la deuxième un peu plus petite avec une teinte vert, la dernière encore plus petite et teintée en rose :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce qui permettra, si le cœur vous en dit d'en disposer plusieurs instances sur la scène, et même de modifier les dites instances :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


Le .fla CS3 :
sourcegeomimbric.fla

Conclusion

Quitte à me répéter - on ne se refait pas ;) - les techniques d'animation par interpolation présentées ici ne concernent que les symboles (instances). Il s'agit des interpolations dites Classiques pour CS4 et de Mouvement pour CS3.

On peut appliquer des interpolation à des formes, directement dessinées sur la scène, il s'agit alors d'interpolations de forme (CS3 et CS4), ça fera l'objet d'un tuto spécifique.

Vous voici en tout cas armés pour les cas de figure les plus fréquents, toutes les techniques que vous rencontrerez à partir de maintenant ne seront que des applications de ces quelques principes de base. Alors…
…Amusez vous bien et à bientôt peut-être :)

Pour aller plus loin

Un jolie illustration du principe d'imbrication est mise en œuvre par Dldler dans le tuto Animation simple d'une arabesque - de A à Z c'est un petit bijou de ruse, allez y faire un tour, même si vous n'avez pas lu ce tuto : il prend tout depuis zéro ;)

La suite...

La dernière étape concerne les interpolations de forme, je vous y attends ;)