Flash CS4 - Principes de l'animation

Cet article est incomplet.

Il est jugé trop incomplet dans son développement ou dans l'expression des concepts et des idées. Son contenu est donc à considérer avec précaution.

<pageby nominor="false" comments="false"/>

Introduction

Objectifs d'apprentissage

• Apprendre les principes de l'animation dans Flash

Prérequis

• Univers Flash CS4
• Flash CS3 - Créer et modifier les calques et les images
• Flash CS4 - Créer des dessins avec les outils de dessin‎‎
• Flash CS4 - Transformer des dessins (une partie)
• Flash CS4 - Arranger des dessins

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

• Flash CS4 - Symboles et clips
• Flash CS4 - Animation image par image (frame-by-frame animation)
• Flash CS4 - Interpolation de mouvement (motion tweening)
• Flash CS4 - Interpolation de mouvement classique (motion tweening de CS3)
• Flash CS4 - Morphing (Interpolation de forme, shape tweening)
• Flash CS4 - Cinématique inversée

Autres versions

• aucune

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 bougé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ématique inverse 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.

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

Le mot clip designe 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 des multiples calques (des dizaines) et des scènes (des suites de scenarios).
• Autrement dit, on n'utilise pas la possible 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'utiliser 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êtes par qqs. instructions actionscript.

Lire: Flash CS4 - Symboles et clips.

Eléments de l’interface pour l'animation

La cadence

La cadence (Angl. 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.

Vour pouvez changer la cadence de la timeline des 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.

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érentes types d'animations 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 du 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 lozanges) de la plage contiennent les valeurs des propriétés interpolées de l'objet cible.

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é.

Une plage d'images sur fond vert indique une 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:

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:

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.

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.

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 peit rectangle vide qui suit:

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

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

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

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

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 une 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.

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é:

• Le keyframe "normal" représenté par un circle noir: Contient un dessin
• Le keyframe "vide" représenté par un circle vide: Ne contient rien
• Le frame sans image clé. S'il est représenté par du gris, il va afficher le dessin du permier 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.

Supprimer un frame

Pour supprimer un frame, n'ayez pas le reflex d'utiliser le 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 clique droit avec votre souris et sélectionnez "Remove frames". Voilà le tour est joué !

Supprimer un frame

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 transparent 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):
• 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:
• Changer les repères avec le bouton Modify onion markers:

Modifier plusieurs images

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

Voici la procédure:

• Cliquez sur le bouton Onion skin (Pelure d'oignon): 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"
• 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".

Exemples

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

Animations combinées:

• répertoire animation summary (CS3)

Image par image:

• ex/frame-by-frame-intro

Motion tweening:

• ex4/motion-tweening-intro (CS4, motion tween "moderne")

Shape tweening:

• ex/shape-tweening-intro/

Cinématique inversée:

• ex4/inverse-kinematics/

Interpolations avec une bibliothèque (library)

• Exemple Tweenmax (Greensock tweening platform)
• Exemple Flint particle system