Afin de recentrer le propos de ce tutorial sur l'animation avec flash, il est important de redéfinir la mise en place d'une animation au sein de flash. Pour créer une illusion de mouvement il est possible soit comme pour le dessin animé classique d'avoir recour à une animation en image par image, c'est à dire de dessiner chacune des images... soit d'utiliser l'une des possibilités d'interpolation de mouvement qu'offre Flash.
Il faut prendre note que bien souvent et en fonction de la complexité des animations, des mouvements caméras, ou du type de changement de focale... il est quand même préférable de s'entourer d'un logiciel tel que Toon Boom ou After Effects qui sont mieux adaptés à la mise en place de dessins animés ou de films d'animations complexes.
L'animation en image par image
Le principe d'une animation est de créer un mouvement en faisant se succéder des images différentes d'un même objet et en utilisant une cadence suffisament soutenue. Par exemple pour simuler un personnage qui marche, il suffit d'utiliser diverses images représentant la position de ce personnage durant les différentes phases de ses pas et de les visualiser l'une après après l'autre à une cadence de 12 à 18 images/secondes minimum. Vous pouvez consulter d'autres rought d'animation sur le site de flickr. Cette technique est très facile à mettre en place dans flash en jouant simplement avec des images clés espacées sur la timeline.
| Signification | Add | Del | Description | |
|---|---|---|---|---|
 |
Image clé vide | F7 | Shift F6 | Image clé ne contenant aucune information visuelle |
 |
Image clé | F6 | Shift F6 | Image clé contenant des informations visuelles |
 |
Image | F5 | Shift F5 | Image reflétant le contenu de l'image clé précédente |
Il n'est pas nécessaire de devoir tout dessiner dans l'image ni de devoir tout animer pour croire à l'animation. De plus, grace à l'utilisation des calques, il est possible de placer des décors d'arrière plan ou d'avant plans en rapport à l'objet animé. Cela permet de mettre rapidement en place un contexte, un environnement et une séquence complète d'animation. Dès ces premiers pas réalisés on va pouvoir rapidement prendre en main cette technique et aller plus loin dans la complexité.
La pelure d'oignon
La pelure d'oignon permet d'afficher simultanément diverses images de l'animation et de pouvoir, ou pas, intervenir dessus afin de les recaler. Cette fonctionalité est très intuitive et fonctionne aussi bien avec le mode en image par image qu'avec les divers types d'interpolations que propose flash. Les images précédentes et les images suivantes s'affichent avec un certain degré d'opcaité qui va en s'emenuisant en fonction de l'éloignement de l'image en cours de sélection.
Seules les images clés sont modifiables, les images intermediaires résultant du calcul d'une interpolation ne sont affichées sous forme de contour qu'à titre d'information et elles ne sont pas modifiables, cependant elles se recalculent en temps réels en fonction du déplacement ou des modifications des images clés englobantes.
| Signification | Description | |
|---|---|---|
 |
Activation | Activation / Désactivation du mode de pelure d'oignon |
 |
Affichage des contours | Afficher que les contours des objets pour permettre une meilleure visibilité des avants et arrière plans |
 |
Modification de plusieurs images | Activation de la possibilité de pouvoir intervenir sur diverses images clés simultanément |
 |
Sélection de la plage | Permet de définir le mode de couverture de la pelure d'oignon |
 |
Position de la tête de lecture | Définit la position de la tête de lecture |
Quelques animations de type dessin animé réalisées sous flash
L'objectif de ce tutorial n'est pas d'approcher plus en détails les techniques propre au dessin animé, et encore moins les procédés utilisés lors de la réalisation de film d'animation, il existe d'ailleurs à ce sujet divers ouvrages qui en proposent l'étude :
- Jeux et dessins animés avec Flash 5 de Bill Turner, James Robertson, Richard Bazley
- Animating With Flash 8: Creative Animation Techniques de Alex Michael
- 3d For The Web: Interactive 3d Animation Using 3ds Max, Flash And Director de Carol Macgillivray et Anthony Head
- Flash 3d: Animation, Interactivity, And Games de Jim Ver Hague et Chris Jackson
Les interpolations de mouvement, de forme et classique
Il existe deux principes pour appliquer pour une interpolation, tout ceci dépend de la version de Flash que l'on utilise antérieure ou pas à la version CS4... Avant CS4 les interpolations s'appliquent au calque donc à l'image et depuis CS4 les interpolations s'appliquent directement sur l'objet à interpoler. Nous allons explorer plus en détails chacun de ces principes.
Avant CS4
De manière générale, flash propose deux types d'interpolations, les interpolations de mouvement et les interpolations de forme. Souvent confondues ou mal interprétées, ces types d'interpolations ne se basent pas comment nous pourrions le penser sur la nature de l'interpolation, qui serait soit de créer un mouvement, soit d'animer une forme... mais simplement et uniquement sur la nature de l'objet présent sur le calque qui reçoit l'interpolation.
En effet, flash utilise sur la scène un grand nombre d'objets différents. Des objets de type bitmap, ou encore graphique, bouton, movieclip, élément vidéo, des groupes, du texte statique ou dynamique, des éléments mixtes, etc... et un objet de base, un objet élémentaire... l'objet de type 'forme'.... En fait, il s'agit là de l'objet de base utilisé par flash pour les représentations vectorielles. Pour connaitre la nature d'un élément, il suffit de le sélectionner et de vérifier dans l'inspecteur de propriétés à quoi il correspond. Attention, du fait que l'interpolation est une propriété d'image, il faut prendre soin de sélectionner l'intégralité du contenu du calque pour contrôler la nature de cet élément.
C'est donc là que réside la clé pour le choix du type d'interpolation à appliquer. En gros, s'il s'agit d'interpoler ce type d'objet et ce type d'objet uniquement, il faut alors appliquer une interpolation de forme. Dès lors que l'objet a interpoler est de tout autre nature, donc autre que forme, il faudra alors appliquer une interpolation de mouvement.
| Interpolation de mouvement | Interpolation de forme |
|---|---|
| La couleur utilisé par la time line est mauve #CCCCFF | La couleur utilisé par la time line est verte #CCFFCC |
| L'objet présent sur le calque ne doit pas être un objet de type forme | L'ensemble des objets contenus sur le calque interpolé doit être de type forme |
| L'interpolation de mouvement impose un seul objet par calque interpolé | Il peut cohabiter un nombre indéfinis d'objet sur le calque interpolé |
| L'objet de départ doit être identique à l'objet d'arrivée (hors propriétés d'objet) | L'ensemble d'objet de départ peut différer de l'ensemble d'objet d'arrivée |
| Il est possible d'appliquer un calque guide de mouvement à l'objet | On ne peut pas utiliser de calque de guide de mouvement |
| Il est possible de redefinir l'accélération du mouvement | On ne peut pas gérer l'accélération de l'animation |
| Il est possible d'utiliser des points de repère pour guider le mouvement | |
| * Si, en fonction du type d'interpolation, l'un de ces critères n'est pas respecté, la ligne de jonction entre les deux images clés est représenté par un trait en pointillé. | |
Pour appliquer une interpolation, il suffit de créer deux images clés puis de sélectionner l'espace de la time line situé entre ces deux images clés et depuis l'inspecteur de propriété d'appliquer le mode d'interpolation adapté. Soit Forme, soit Mouvement, comme nous en avons vu la description précédement.
Attention à ne pas utiliser le click droit sur la time line pour appliquer une interpolation entre deux objets qui ne sont pas des MovieClip car de cette manière flash créé automatiquement deux symboles graphiques, Interpolation 1 et Interpolation 2, un pour le départ et un pour l'arrivée, sur lesquels nous n'avons aucun contrôle ou dumoins sur lesquels il ensuite compliqué d'intervenir. De plus, même les touches d'annulation ne savent pas supprimer ces éléments 'interpolations' de la bibliothèque.
Depuis CS4
Avec la version CS4 de flash, un troisième type d'interpolation a fait son apparition, l'interpolation de mouvement. Et oui, pour faire simple il porte le même nom qu'un des deux précédents types d'interpolation à ceci près que l'interpolation concerne cette fois ci directement l'objet et non plus la time line, il ne s'agit donc plus d'une propriété d'image.
Alors, qu'est devenu l'ancienne interpolation de mouvement ? Et bien elle a tout simplement été renommée Interpolation classique et reste accessible depuis le menu contextuel du click droit sur la timeline. L'interpolation de forme elle aussi est accessible depuis ce même click droit mais autant depuis la time line que depuis l'objet à interpoler lui même.
La nouvelle interpolation de mouvement est quant à elle également acesssible par clic droit autant depuis la time line que depuis l'objet à interpoler et cette fois ci pas de crainte, le clic droit sur la time line, ou sur l'objet, peut être utilisé en toute sécurité. Une boite de dialogue nous informera, si besoin est, qu'un seul et unique véritable Movieclip sera alors mis en place pour recevoir l'interpolation.
Pour appliquer une interpolation, il suffit alors de sélectionner un objet sur la scène, et sans avoir à créer de seconde image clé, de lui appliquer directement une interpolation de mouvement. Une séquence animée contenant le nombre d'images de cadence sera alors mis en place et matérialisée sur le scénario par un bandeau bleu ciel. La tête de lecture se potionne automatiquement sur la dernière image de cette séquence et il ne reste plus alors qu'à intervenir sur les propriétés d'arrivée de l'objet.
Personnage animé en image par image
En couplant une animation image par image (le personnage qui marche) avec diverses interpolations de mouvement (immeubles, belvédères), on peut rapidement simuler un mouvement plus large. Le personnage est déssiné soit sous forme de gif animé soit sur une série de bitmaps importés directement dans Flash en tant que tel. Si vous le souhaitez il est possible de séparer le bitmap (Modification > Séparer) et obtenir ainsi une image vectorielle du personnage. Il faut ensuite créer un Movie clip et développer cette série d'image en espacant chaque image clé par deux ou trois images en fonction de la cadence souhaitée. Accéder aux fichiers sources.
Interpolation de forme ou interpolation de mouvement ?
S'il est vrai qu'une interpolation de forme permet souvent la modification d'une forme vers une autre, un peu à la manière du morphing, il faut avant tout entendre par interpolation de forme, une interpolation d'un objet de type forme. Les deux exemples ci-contre démontrent bien qu'il peut effectvement s'agir d'une modifications d'une séries de petits cercles représentée par une forme peut se transformer en un seul gros carré toujours représenté par une forme, mais on peut également simplement déplacer un rond de type forme un peu comme le ferait une interpolation de mouvement. Accéder aux fichiers sources.
Boules de billard ou interpolation sur timeline unique
Dans ce simple exercice l'idée est de représenter une action de billard, en partant du mouvement de la queue jusqu'à l'interaction avec les boules. Afin depouvoir mieux gérer l'ensemble des collisions et des déplacemnst, il est préférable de tout développer sur une time line unique et de séparer chaque éléments sur un calque différent afin de les animer indépendament. Au départ, il est possible de tout mettre en place sur un seul et unique calque puis ensuite de séparer chaque élément Modification > Scénario > Répartir vers des calques. Enfin pour la mise en place du mouvement de queue, il est possible d'avoir recours à une accélération / décélération personalisée. Accéder aux fichiers sources.
Lièvre et tortue ou interpolation sur timeline différente
Dès lors que deux animations partageant la même scène doivent pouvoir proposer des vitesses différentes et autonomes, il faut avoir recours à des animations placées sur des timeline différentes. En effet, si les deux animations se trouvent sur la même time line, comme pour l'exemple du billard, dès l'instant ou on ajoutera des images à une animation, pour la ralentir, systématiquement la seconde subira la même modification. Donc si comme dans cet exemple nous souhaitons accéler ou ralentir l'un ou l'autre des personnages, il faut pouvoir agir de manière indépendante sur l'un ou l'autre. Pour cela, il suffit de placer chaque personnage et chaque animation dans un movieclip distinct. Accéder aux fichiers sources.
