Morphing de formes avec Flash

"Et le carré devint rond"

L'interpolation de mouvement (ou interpolation classique dans les versions CS4 ou plus), c'est génial. Mais parfois, elle montre ses limites. En effet, une interpolation de mouvement ne fera jamais d'un carré un rond. C'est là qu'intervient l'interpolation de forme mais attention, c'est casse-gueule !

L'interpolation de forme est la seule qui ne demande pas que ses acteurs soient convertis en movieClips. Ils doivent rester malléables, en "pâte à modeler", pour que Flash puisse agir dessus.

Créer une interpolation de forme, en soi, n'est pas difficile. Il suffit de mettre la forme initiale sur la timeline, de placer la forme finale un peu plus tard dans le temps, faire un clic droit entre les deux et choisir Interpolation de forme. L'interpolation apparaît sous la forme d'une flèche sur fond vert.

L'interpolation de forme est nécessaire pour certaines animations (transformation d'une forme en une autre) : une écharpe qui vole au vent, un serpent ou la queue d'un chat qui ondule, du feu, une porte qui s'ouvre et dont la lumière au sol se déforme complètement...

L'interpolation de forme est aussi le seul moyen de modifier la couleur à l'intérieur d'une forme. On peut certes changer la teinte par-dessus, comme on l'a vu à la lecon précédente. Mais pour transformer un dégradé en un autre, l'interpolation de forme est le seul moyen.

On peut aussi utiliser l'interpolation de forme pour alléger la bibliothèque (puisqu'elle ne nécessite pas de conversion en movieClip). Par exemple, quand je dois faire un rectangle qui s'agrandit, sans effets spéciaux, je peux utiliser une interpolation de forme plutôt que de mouvement.

Les limitations de l'interpolation de forme

Alors, pourquoi n'utilise-t-on pas l'interpolation de forme à gogo ! Ce serait beaucoup plus simple !

Eh bien, parce que transformer une forme en une autre est un calcul extrêmement compliqué et Flash n'est pas très doué pour ça... Et bien souvent, quand vous demandez une interpolation de forme, vous vous retrouvez avec des rotations indésirables, une transformation ignoble et inutilisable, voire un grand blanc !

Pour maximiser les chances de réussite de Flash, il vaut mieux respecter quelques règles simples :

• avoir des formes simples ;
• avoir des états initiaux et finaux qui se ressemblent (une pomme et un coeur, par exemple) ;
• avoir des formes plutôt convexes et non-sinueuses ;
• avoir le moins de plages de couleurs possibles (ou alors, animer chaque plage de couleur sur un calque séparé)
• éviter de dessiner au pinceau (formes irrégulières)

Les repères de formes

Il existe un moyen technique de résoudre les bugs de morphing : les repères de forme.

Ma porte dans la nuit a de petits problèmes de consistance. En effet, les formes initiale et finale n'ont pas le même nombre de points. Flash se mélange donc les pinceaux quand il s'agit de faire correspondre un point de la forme de départ avec un autre de la forme d'arrivée.

Placez vous au début de l'interpolation sur le calque qui contient la forme à morpher. Cliquez sur le menu Modifier > Forme > Repère de forme et un premier repère de forme apparaît dans votre zone de travail. Il comporte une lettre qui l'identifie. Sa couleur est rouge parce qu'il n'est fixé sur aucun point de la forme. Déplacez-le jusqu'à l'un des points-clé de la forme (les angles, généralement). Le repère devient jaune lorsqu'il est correctement placé.

Déplacez-vous ensuite dans le temps pour atteindre le moment de la fin du mouvement. Vous y découvrirez que le même repère rouge vous y attend. Déplacez-le jusqu'au point qui correspond à celui de la forme initiale. Une fois validé, le repère prend une couleur verte (signe qu'il est en fin d'interpolation).

Répétez l'opération autant de fois que nécessaire pour que le morphing soit opérationnel. Inutile de mettre des repères superflus : c'est une perte de mémoire et ça peut faire bugger le résultat final. Il peut arriver que la forme ne fonctionne pas malgré tous vos efforts : il faut alors tenter de partir avec une forme de base et d'arrivée plus similaires.

Le travail doit évidemment être répété pour chaque interpolation qui compose votre animation. Il vaut mieux affecter les repères dans l'ordre chronologique car les points de repères jaunes (initiaux) se superposent aux points de repères verts (finaux).

Notez aussi que, si vous zoomez ou cliquez à côté, les repères de forme disparaissent très facilement. C'est particulièrement embêtant, mais il suffit de faire Affichage > Afficher les repères de forme pour les récupérer.

Le morphing reste une technique peu au point sous Flash, à n'utiliser que lorsqu'il n'y a pas moyen de faire autrement !

Tricher avec l'interpolation de mouvement

Parfois, la transformation est trop complexe pour l'interpolation de forme. Il faut alors voir si, en combinant interpolation de mouvement et différents effets de masques, il n'est pas possible de s'en sortir.

Dans cette animation d'Igloo, réalisée pour le projet collectif Lubien, l'aventure, le corps de l'ours est une forme d'un seul tenant qui doit se déformer. Il est impossible de faire autrement à cause du contour. Mais la silhouette est bien trop complexe pour être gérée par une interpolation de forme !

L'astuce est de découper le corps de l'ours en plusieurs éléments rigides de la même couleur et de les animer avec des interpolations de mouvement. Ensuite, on convertit l'ensemble en un seul movieClip. Il est donc possible de lui appliquer un filtre général, celui du halo réglé sur une puissance de 1000% et une épaisseur très fine, qui ressemble donc à un contour net !

De même, on peut utiliser l'effet de masque pour afficher une zone en mouvement de couleur unie (ou à motif).

Techniquement, tout Flash est à vos pieds désormais ! Vous allez pouvoir aborder certains points plus artistiques que techniques, en commençant par celui qui fait toujours tellement plaisir : monter et animer un personnage, de A à Z.