Flash CS4 - Principes de l'animation

De EduTech Wiki
Aller à : navigation, rechercher

1 Introduction

Objectifs d'apprentissage

  • Apprendre les principes de l'animation dans Flash

Prérequis

Matériel (fichiers *.fla à manipuler)

  • rien

Qualité et niveau

Ce tutoriel aidera les adeptes de la technique à démarrer. Le niveau de ce tutoriel est un peu haut pour les novices, mais peut servir comme des fiches pratiques dans un atelier.

Prochaines étapes

Autres versions

  • aucune

1.1 types d'animation de CS4/5/6 / Flash 10/11/12

D'après le manuel Utilisation de Flash de Adobe, Flash CS4 prend en charge les types d'animation suivants (texte légèrement modifié):

Animation image par image (frame-by-frame animation)
Cette technique d'animation vous permet de spécifier différents effets artistiques pour chaque image du scénario. Utilisez cette technique pour créer un effet similaire aux images d'un film défilant en accéléré. Cette technique est très utile pour les animations complexes dans lesquelles les éléments graphiques de chaque image doivent être différents. On l'utilise souvent pour animer des objets qui sont ensuite déplacés par une animation de mouvement.
Interpolations de mouvement (motion tweening)
Utilisez des interpolations de mouvement pour définir les propriétés d'un objet, telles que la position et la transparence alpha d'une image, et ainsi de suite pour chaque image. Lors d'une animation, Flash interpole les valeurs des propriétés des images intermédiaires. [...]
Interpolations classiques (classic motion tweening)
Les interpolations classiques sont comme des interpolations de mouvement, mais leur création est plus complexe, notamment les animations guidées. Les interpolations classiques autorisent certains effets spéciaux animés qui sont impossibles dans les interpolations à base de plage.
Poses de cinématiques inverses (inverse kinematics)
Les poses de cinématiques inverses permettent d'étirer et d'incurver des objets forme et de relier des groupes d'occurrences de symbole pour les faire bouger ensemble de manière naturelle. Vous pouvez positionner l'objet forme ou les occurrences liées de différentes manières dans des images séparées, et Flash interpole les positions dans les images intermédiaires.
Interpolations de forme (shape tweening)
Avec l'interpolation de forme aussi appelée "morphing", vous dessinez une forme dans une image spécifique du scénario, puis vous modifiez cette forme ou dessinez une autre forme dans une autre image. Flash interpole les formes intermédiaires pour les images intermédiaires, créant ainsi l'animation en transformant progressivement une forme en une autre.
Animation via ActionScript
Toute forme d'animation peut être programmée. Il existe des bibliothèques open source très faciles à utiliser comme GreenSock.
Sprite-sheets (CS6 / Flash 12 uniquement)
Permettent de créer des objets animés sous forme de séquences d'images. Utile pour créer des objets comme des anges volants pour les jeux, car le rendu est très rapide.

1.2 Deux façons pour organiser un clip d'animation

Le mot clip désigne soit un fichier Flash, soit un élément de type clip à l'intérieur d'un fichier. Les deux possèdent une timeline, c-a-d la possibilité d'ajouter une animation.

(1) A l'ancienne

  • Nos ancêtres travaillaient uniquement avec la timeline (scenario) principale. Toutes les animations se faisaient dans de multiples calques (des dizaines) et de scènes (des suites de scénarios).
  • Autrement dit, on n'utilise pas la possibilité d'insérer des clips dans des clips.

(2) Avec des clips embarqués

  • Cette technique consiste plutôt à placer des clips qui contiennent des animations sur la scène. Dans ce cas on n'utilise la timeline principale que pour naviguer entre différent "tableaux", par exemple pour implémenter 4-5 différents niveaux de jeu.
  • Les clips qui se trouvent sur la scène peuvent ensuite être lancés/arrêtés par qqs. instructions actionscript.

Lire: Flash CS4 - Symboles et clips.

2 Eléments de l’interface pour l'animation

2.1 La cadence

La cadence (en Anglais frame rate), la vitesse à laquelle l'animation est lue, est exprimée en nombre d'images par seconde (ips) (frames/second ou FPS). Une cadence trop faible donne l'impression d'une animation qui s'arrête et redémarre, alors qu'une cadence trop rapide risque d'entraîner un affichage flou des détails de l'animation. 24 ips est la cadence par défaut dans CS4. Celle de CS3 était réglée à 16.

Vous pouvez changer la cadence de la timeline des 2 manières suivantes:

  • Clic dans un espace vide de la scène: Ensuite changer dans le properties panel
  • Menu Modify->Document

La complexité de l'animation et la puissance de l'ordinateur sur lequel elle est exécutée affectent aussi la fluidité de la lecture. Pour déterminer les cadences optimales, testez vos animations sur différents ordinateurs.

2.2 Représentation d'animations dans le scénario

Note: Nous présentons ce tableau avec l'idée que vous pouvez revenir plus tard pour le consulter. Il vous permet par exemple d'analyser des timelines faites par d'autres...

Adobe visualise les différents types d'animation dans la timeline (scénario) de la façon suivante. Cette information n'est pas nécessaire pour le moment, mais peut s'avérer utile plus tard.

Une plage d'images sur fond bleu indique une interpolation de mouvement. Un point noir dans la première image de la plage indique qu'un objet cible est affecté à la plage d'interpolation. Des losanges noirs indiquent les keyframes (images-clé) donc aussi la dernière image-clé.

Les images-clés redéfinissent des propriétés du symbole. Vous pouvez choisir quels types d'images-clés de propriété afficher en cliquant sur le bouton droit (Windows) ou en appuyant sur la touche Commande (Macintosh) tout en cliquant sur la plage d'interpolations de mouvement et en choisissant Afficher les images-clés > type dans le menu contextuel. Par défaut, Flash affiche tous les types. Toutes les autres images (sans losanges) de la plage contiennent les valeurs des propriétés interpolées de l'objet cible.

An motion tween span.png

Un point vide dans la première image indique que l'objet cible de l'interpolation de mouvement a été supprimé. La plage d'interpolation contient toujours ses images-clés de propriété et un nouvel objet cible peut lui être appliqué.

An motion tween span no target.png

Une plage d'images sur fond vert indique un calque de pose d'une cinématique inverse (IK). Les calques de pose contiennent des squelettes IK et des poses. Chaque pose apparaît dans le scénario sous forme de losange noir. Flash interpole les positions du squelette dans les images des poses intermédiaires:

An pose layer span.png

Un point noir au niveau de la première image-clé, avec une flèche noire et un arrière-plan bleu, signale une interpolation classique:

Motion tween-classic.png

Une ligne pointillée indique que l'interpolation classique est rompue ou incomplète, par exemple parce que l'image-clé finale est absente; ou parce que les images utilisées ne sont pas en format numérique. Exemple avec une ligne pointillée pour signaler que l'interpolation est rompue ou incomplète.

Classic-motion timeline broken.png

Un point noir au niveau de la première image-clé, avec une flèche noire et un arrière-plan vert clair, indique une interpolation de formes. Exemple montrant la première image-clé avec une flèche noire sur un fond vert clair pour signaler des images intermédiaires.

Shape timeline.png

Une image-clé (en dehors des images clefs pour les interpolations nouvelles de CS4) sont toujours signalées par un point noir. Les images gris clair qui suivent une image-clé contiennent le même contenu sans changement jusqu'au petit rectangle vide qui suit:

Keyframe timeline.png

Un petit a indique qu'un script a été défini dans ce frame:

Frame script.png

Un drapeau rouge signale que l'image contient une étiquette (label) Cela permet par exemple avec ActionScript de dire GotoAndPlay("etiquette");

Frame label.png

Un double trait oblique vert indique que l'image contient un commentaire:

Frame-commented.png

Une ancre dorée indique que l'image est une ancre nommée:

Anchor tween.png

2.3 Calques et animation

En règle générale, chaque objet animé doit se trouver dans un calque séparé (layer, couche) différent. Cette exigence permet ensuite d'organiser les calques en fonction de la manière dont on souhaite qu'ils apparaissent dans l'animation. Par exemple, si notre animation comporte un calque avec un soleil qui disparaît derrière la montagne alors que la nuit tombe, le calque "montagne" sera placé dans le timeline avant celui du soleil. En conséquence, créer des calques de dessin séparés permet d'organiser ensuite les différents objets de l'animation.

Si vous ne faites pas attention à ce principe, CS4 va s'en charger (et pas forcément comme vous l'aimeriez). Donc commencez par créer un calque, déplacez l'objet à animer dans ce calque avant de créer une animation.

Pour distribuer un ensemble d'objets sur des calques, vous pouvez utiliser: Modify->Timeline->Distribute to Layers.

2.4 Insertion de Keyframes

Il existe 3 types de keyframes (images-clé) en dehors des keyframes qui sont propres à l'interpolation de mouvement et à la cinématique inversée:

  • Le keyframe "normal" représenté par un cercle noir: Contient un dessin
  • Le keyframe "vide" représenté par un cercle vide: Ne contient rien
  • Le frame sans image clé. S'il est représenté par du gris, il va afficher le dessin du premier keyframe trouvé à gauche, sinon Flash va interpoler (pour le bleu, vert, etc.)

Voici quelques commandes timeline importantes:

  • Insérer un nouveau keyframe en copiant le contenu du keyframe précédant: F6 (ou clic-droit dans un frame et Insert Keyframe)
  • Insérer un nouveau keyframe vide: F7 (ou clic-droit dans un frame et Insert Blank Keyframe)
  • Insérer un frame statique (sans contenu, mais qui étend la portée d'un keyframe): F5 (ou clic-droit dans un frame et Insert Frame)

Note: Le menu Insert->Timeline vous permet aussi d'insérer ces 3 types de keyframes.

2.5 Supprimer un frame

Pour supprimer un frame, n'ayez pas le réflexe d'utiliser la touche clavier "supprimer" pour enlever les frames dont vous n'avez plus besoin. Pour ce faire, il suffit de placer le curseur sur le ou les frame(s) que vous désirez supprimer. Ensuite, faites un clic droit avec votre souris et sélectionnez "Remove frames". Voilà, le tour est joué !

Supprimer un frame

2.6 Les pelures d'oignons

En général, une seule image de la séquence d'animation est affichée sur la scène à la fois. Cependant, vous pouvez afficher deux ou plusieurs images à la fois sur la scène pour vous aider à positionner et modifier une animation image par image. L'image qui se trouve sous la tête de lecture apparaît en couleur alors que les images environnantes sont estompées, ce qui donne l'impression que chaque image a été dessinée sur une feuille de pelure d'oignon transparente et que ces feuilles ont été empilées les unes sur les autres.

Voici la procédure:

  • Cliquez sur le bouton Onion skin (Pelure d'oignon): Onion skin.png
  • Réglez les repères Début Pelure d'oignon et Fin Pelure d'oignon (dans l'en-tête du scénario)

Ensuite vous pouvez ajuster l'affichage, par exemple

  • Afficher juste les contours avec Onion Skin Outlines: Onion skin outlines.png
  • Changer les repères avec le bouton Modify onion markers: Modify onion markers.png

2.7 Modifier plusieurs images

Dans certains cas, vous pouvez avoir besoin de modifier le contenu de plusieurs images-clés à la fois. Pour éviter de devoir déplacer le contenu sur chaque image-clés, vous pouvez utiliser le bouton "Modifier plusieurs images".

Voici la procédure:

  • Cliquez sur le bouton Onion skin (Pelure d'oignon): Onion skin.png pour afficher plusieurs images à la fois
  • Réglez les repères Début Pelure d'oignon et Fin Pelure d'oignon (dans l'en-tête du scénario) afin de déterminer quelles images clefs seront modifiées
  • Cliquez sur le bouton "Modifier plusieurs images" Edit multiple frame.png
  • Sélectionnez les images et déplacez-les

Astuce: Pour simplifier la tâche et éviter de déplacer d'autres images que celles désirées, vous pouvez masquer ou verrouiller les autres calques puis cliquer sur "Sélectionner tout" dans le menu "Modifier".

3 Exemples

Ci-dessous quelques répertoires avec des exemples discutés dans d'autres articles

Animations combinées:

Image par image:

Motion tweening:

Shape tweening:

Cinématique inversée:

Interpolations avec une bibliothèque (library)

4 Remerciement et modification du copyright