Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les interpolations de forme

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, le 04 octobre 2010

Bienvenue ici :)

Ce tuto s'inscrit dans la trilogie des fondamentaux de l'animation avec Flash.
Il considère que les points vus dans les deux précédents vous sont familiers, à savoir :

Les principes de base de l'animation dans Flash : scénario, images clés, manipulation des images.
Les interpolations de mouvement (dites classiques depuis CS4) qui concernent exclusivement les instances de symbole.


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



Vous le savez, il y a deux approches différentes 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, et c'est le sujet de cette page.

Le principe

Attaquons donc sans plus attendre.
Tout comme pour les interpolations classiques (ou de mouvement avant CS4), on les réalise le plus souvent dans des clips.
Pour les essais on peut s'entrainer sur la scène, libre à vous de faire comme bon vous semblera mais n'oubliez pas, si vous optez pour des symboles, d'en poser une instance sur la scène au moment de tester ;) (j'dis ça… j'dis rien…).

D'une forme à une autre

Puisqu'on parle d'interpolation de forme, imaginons un cas bien parlant : j'ai une étoile je veux la transformer en un carré.
Pas question de passer par un symbole contenant une étoile et un autre contenant un carré, les interpolations se font de l'état d'un symbole vers un autre état du même symbole (position, teinte, échelle…).

Dessinez donc directement une étoile sur la scène, image 1.
• Nous voulons transformer cette étoile en un carré. Du point de vue du scenario ça veut dire que sur la dernière image (35 chez moi) il y a, non plus une étoile, mais un carré.
Sélectionnez donc l'image en question dans le scenario puis [F7] pour insérer une image clé vide - si vous avez inséré une image clé “tout court” ([F6]), et bien supprimez donc l'étoile dont vous n'avez pas besoin ;)
Dessinez un carré.
• Pour que Flash calcule la nouvelle forme d'image en image, on procède comme pour une interpolation classique (de mouvement avant CS4) : on sélectionne une image entre les deux images clé, mais cette fois dans le menu contextuel on choisit Créer une interpolation de formes.



Voilà. Plus simple on ne fait pas :)

Avec du texte

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

Voici qui est désormais tout bête à faire. Il s'agit de quoi ? de passer d'une forme (rectangle) à une autre qui dessine le mot Bonjour.
La forme de départ : dessinez un rectangle (ça va ? vous vous en sortez ? :D)
La forme d'arrivée, il suffit d'écrire dans un champ texte (statique) et de le “séparer” deux fois [Cmd-B][Cmd-B].
Pas plus, une interpolation de forme et c'est fait.

Les embûches

Un calque par interpolation

Quelque soit le type d'interpolation que vous utilisiez, conservez à l'esprit qu'il faut lui dédier un calque.
Une interpolation/un calque, et rien d'autre sur ce calque.

Quelquefois l'erreur de construction se lit sur le scenario : ici par exemple un clip pour faire un fond a été ajouté sur le même calque que celui portant l'interpolation de forme :


Pas de groupes

Mais souvent rien ne se lit sur le scenario, il se trouve juste que ça ne donne pas ce qu'on souhaite.
Par exemple, vous voulez ça :
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Vous obtenez ça :
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
?! Ça peut énerver…

D'autant que la construction est bonne : le fond est sur un calque dédié. Sur un autre calque 5 pastilles dessinées sur la scène image 1 et une seule pastille image de fin. Mais à les sélectionner une à une on constate :



Hé oui, ici la pastille est un groupe [cmd-G] (inadvertance quand tu nous tiens !)

Retenez le : on peut dessiner plusieurs formes sur un même calque, l'interpolation les prendra toutes en considération, mais pas de groupe.

"Il" me fabrique des clips

Quelquefois dans l'enthousiasme on peut confondre interpolation de forme et de mouvement (classique sous gnagnagna…), dans ce cas non seulement ça ne marche pas, ce qui est moindre mal, mais surtout ça vous fabrique d'office une instance de graphique image de départ et une autre image de fin, et vous voilà avec deux symboles dans la bibliothèque nommés interpolation1 et interpolation2 (ou 3 ou 4, ça incrémente).
Il faut le savoir, et être vigilant voilà tout…

Couleurs et dégradés

Vous l'avez sans doute constaté, on peut modifier la couleur de la forme qui fait l'objet de l'interpolation et obtenir un dessin qui passe d'une couleur à l'autre progressivement.
On peut aussi jouer des dégradés.
On peut remplir la forme de l'image de départ d'un dégradé et la forme de l'image de fin d'un autre. Le mieux c'est de s'y essayer.
Sachez seulement que ça ne fonctionne que d'un type de dégradé (linéaire ou radial) sur le même type.

Ici, la forme (un cercle) est déplacée et le dégradé de remplissage aussi.

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


Et là on combine modification de la forme de la flamme et du dégradé

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

Pour peaufiner le clip “flamme” est équipé de filtres rayonnement et flou.

Maitriser la transformation : les repères de forme

Imaginez maintenant que vous souhaitiez une bête chose de ce type là :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Vous procédez normalement et vous obtenez, ça (ou n'importe quoi de pas plus convaincant):
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Flash calcule les différentes positions de chaque point comme ça l'arrange et sur ce coup là, c'est nous que ça n'arrange pas. Il va falloir lui préciser les choses. Lui dire qu'il s'agit que le bas de la tige reste en place en cours d'interpolation.
On va donc avoir recours aux repères de forme.

D'abord en demander l'affichage (sans quoi on les ajoute, on voit rien, on recommence, on voit toujours rien… !¡#@#%!)



Puis, image de départ, ajouter un repère [cmd-Maj-H] :


Une petite pastille rouge apparait :


Ce repère nous permet de marquer un point dont on veut préciser la trajectoire. Puisqu'il faut “immobiliser” la base de la tige, glissez le repère en bas de la ligne.

Il faut ensuite sélectionner l'image clé de fin d'interpolation. On y retrouve la même pastille qu'on glisse à son tour à la base de la tige. Notez que le repère devient vert.


Une fois une paire de repères positionnée, le repère de l'image de départ devient jaune, celui de fin devient vert.

A noter :
Si vous dessinez en mode “dessin d'objet” les repères resteront rouges, correctement placés ou non, mais ça “fonctionnera” tout de même

Dans l'exemple illustré ici, l'interpolation fait un aller-retour, la tige est déformée (images clé 1 et 2) puis revient à son état d'origine (image clé 3).


Les repères fonctionnant en couple - un pour l'image clé de début d'interpolation, un autre pour l'image clé de fin d'interpolation - il faut ici ajouter une autre paire de repères images clé 2 et 3.

Image clé 2 (cf illustration), procédez comme précédemment [cmd-Maj-H]



Et glissez le repère à la base de la tige (par dessus l'autre, ce n'est pas un souci).

Plusieurs repères sur une même image clé

L'exemple précédent s'applique à une ligne, c'est le même principe pour les formes, vous pouvez contraindre les positions de départ et d'arrivée de n'importe quel point de leur circonférence, même sans bordure (qui n'est jamais qu'une ligne).

Par ailleurs vous n'êtes pas restreint à une seul repère, vous pouvez en ajouter autant que nécessaire. A titre d'exemple sur un cercle :

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

Cet exemple permet d'observer le principe : les repères (de départ et de fin) identifient un point dont la trajectoire (rectiligne) est contrainte. Regardez les points a et b, ils se déplacent en ligne droite, les autres s'organisent autours ;)

Synthèse

• On affiche les repères via le menu Affichage, on les ajoute via Modification/Forme.
• On ajoute les repères de forme par paire.
• On peut les poser sur des lignes ou à la circonférence des formes (avec ou sans bordure).
• On peut en poser autant qu'on souhaite sur une même image clé.
• Les couples de repères sont identifiés par une lettre (a,b,c…).

Imbrication des clips

L'imbrication des clips n'a rien de spécifique aux interpolations de forme, c'est une technique de construction. Si vous venez des tutos précédents vous l'avez vue mise en œuvre dans le cadre des interpolations de mouvement, on va y avoir de nouveau recours pour fabriquer de la fumée qui jaillit de façon pseudo aléatoire (c'est à dire pas aléatoire du tout, mais qui trompe son monde ;))

Voilà ce qu'on veut obtenir :

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

Que constate-t-on ? Les ronds de fumée se succèdent un peu n'importe comment, pas toujours au même rythme, quelque fois ils sont crachés l'un derrière l'autre quelque fois quasi simultanément.
C'est le seul point que j'ai à développer. Je ne vous fais pas l'offense de vous raconter comment obtenir un rond de fumée qui se déforme, rien de plus que ce qui a été vu jusqu'à maintenant.

Ce qui nous intéresse, donc, c'est la construction.
Si on met tout dans un même clip, un calque par rond de fumée, à chaque boucle les fumées vont se succéder dans le même ordre au même rythme et auront toutes disparues avant de réaparaitre.
C'est justement ce qu'on ne veut pas.

Solution : construire un clip par rond de fumée en prenant soin que la “longueur” de l'interpolation soit différente pour chacun. Je parle du nombre d'images, donc du temps.
Il suffira ensuite de les réunir dans un même clip (ou de les superposer sur la scène), chaque rond de fumée apparaitra, grandira, disparaitra et réapparaitra, mais comme le 'temps de vie' de chacun sera différent des autres, leur succession aussi, d'où l'effet aléatoire (effet seulement on est bien d'accord). Si vous voulez que ce soit le plus efficace possible choisissez les nombres d'images non multiples les uns des autres…

Si vous vous demandez comment éviter que les ronds de fumée partent tous ensemble (se superposant la première fois) pensez seulement que rien n'oblige à ce qu'une interpolation commence image 1, je veux dire rien n'oblige à ce que l'image 1 (et les quelques suivantes) contiennent quelque-chose. Si vous laissez dix images vides (à une cadence de 20 ips), le départ de la fumée sera différé de 1/2 seconde.

Et pour vous entrainer, je vous propose une bougie ;)

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

Les sources

Les sources CS3
Le fichier contient les exemples, chacun dans un clip : demo 1, demo 2, etc.

Pour aller plus loin

Vous voilà outillés pour donner libre cours à votre grande créativité. Tout ce que vous construirez reviendra immanquablement à utiliser une des techniques décrites jusqu'ici. Si vous êtes dans une démarche d'apprentissage, sans objectif précis, sachez que vous pouvez indifféremment continuer la découverte du côté du mouvement perpétuel ou de guirlandes de Noël : ayé, vous disposez des prérequis ;)