Flash CS4 - Cinématique inversée

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.

Introduction

Objectifs d'apprentissage

Insérer des armatures dans les formes

Lier les symboles aux armatures

L'interpolation de mouvement avec les armatures

Lier les contours des formes aux armatures

Prérequis

• Flash CS4 - Créer des dessins avec les outils de dessin
• Flash CS4 - Arranger des dessins
• Flash CS4 - Animation image par image
• Flash CS4 - Interpolation de mouvement
• Flash CS4 - Morphing

Matériaux

Aucun, jouer simplement avec vos propres objets:)

Ce tutoriel est une traduction de la section Using inverse kinematics de la version anglaise de l'aide Adobe Flash CS4 disponible en ligne sous une license Attribution-Noncommercial-Share Alike et de la version anglaise de l'article Flash CS4 inverse kinematics tutorial en Edutechwiki.

A propos de la cinématique inversée

La cinématique inverse (inverse kinematics ou IK) est une méthode pour animer un objet ou un ensemble d'objets reliés utilisant une structure de segments articulés appelée une armature. Les segments ou os permettent le déplacement de symboles et de formes de manière complexe et naturels avec un minimum d'effort de conception. Par exemple, la cinématique inverse vous laisse créer les effets d'animation de personnages, telle que le mouvement naturel des bras, des jambes, et des expressions faciales beaucoup plus facilement.

L'outil bone ou os est un outil de la cinématique inverse (IK) qui permet de créer des armatures pour des formes ou des occurrences (instances) de symboles reliés. Ces armatures relient des objets ou des parties de formes dans un arbre hiérarchique. Lorsque les segments ou os au bout (ou enfant) sont déplacés ils déplacent les os à la racine (ou parents). Prenant un avatar humain comme exemple, si on tire un doigt, la main se déplacera aussi et la main à son tour déplacera le bras inférieur, etc. Quand un os se déplace, les autres os reliés se déplacent par rapport à l'os qui a lancé le mouvement. Ainsi contrairement à l'animation cinématique directe, où chaque mouvement pour chaque composant doit être prévu, il ne faut que spécifier les positions de départ et d'arrêt des objets.

Vous pouvez ajouter des armatures aux occurrences de symboles individuels ou à l'intérieur d'une forme. Utilisant la cinématique inverse La cinématique inverse vous laisse créer le mouvement naturel beaucoup plus facilement.

Une forme avec une armature de segments d'IK supplémentaire.

Un groupe de plusieurs symboles avec une armature IK jointe.

Une chaîne d'os s'appelle une armature. Les os dans une armature sont reliés entre eux dans une hiérarchie de parent-enfant. Une armature peut être linéaire ou embranchée. Des branches d'une armature qui commencent au même os s'appellent des siblings. Le point où un os se relie un autre s'appelle une articulation (joint).

On peut utiliser IK en Flash CS4 de deux manières. La première est d'articuler une série d'occurrences de symboles en ajoutant des os pour relier chaque occurrence à un autre. Les os permettent à la chaîne d'occurrences de symboles de bouger ensemble comme dans l'exemple ci-dessus.

La deuxième manière d'employer IK est d'ajouter une armature à l'intérieur d'une forme. La forme peut être créée comme dessin de forme (merge drawing mode) ou dessin d'objet (object drawing mode). Les os permettent de déplacer et d'animer des parties d'une forme sans la nécessité de dessiner différentes versions de la forme ou de créer une interpolation de mouvement de forme (motion tween). Par exemple, on peut ajouter des os à un dessin simple d'un serpent pour permettre au serpent de se déplacer de manière réaliste.

Lorsque vous ajoutez des os aux occurrences de symboles ou aux formes, Flash met l'occurrence ou la forme et leur armature correspondantes sur un nouveau calque dans le scénario (timeline). Ce calque s'appelle un calque de pose (pose layer')'. Chaque couche de pose peut contenir seulement une armature et ses occurrences ou formes associés.

Flash inclut deux outils pour travailler avec IK. Vous pouvez ajouter des os aux occurrences de symbole et aux formes avec l'outil os. Vous pouvez utiliser l'outil de grippage (Bind tool) pour modifier les rapports entre différents os et points de control des formes.

Démo simple

L'exemple suivant montre que la différence entre une structure d'IK (armature) faite avec des symboles vs une structure faite avec une forme.

Une structure d'IK (armature) faite avec des symboles vs une structure faite avec une forme

Chargez l'application symbol-vs-shape-armature.html et tirez les bouts (ou d'autres parties des formes). Assurez-vous que vous avez Flash Player 10 installé autrement, cela ne fonctionnera pas. Notification : Les armatures ont été définies comme type Runtime qui permet à l'utilisateur manipuler la structure IK.

Une armature simple utilisant des occurrences de symbole

Créer une animation IK simple avec Creation of a simple IK animation tilisant des occurrences de symbole

Voir l'exemple symbols-ik-armature-intro d'abord.

Une animation IK simple avec une occurrence de symbole

Une exemple de boules connéctées

Étape 1 - créer les symboles

• Créez un nouveau calque
• Créez un symbole de clip : dessinez une boule rouge et cliquez droite puis sélectionnez convertir en symbole. Sélectionnez "clip".
• Modifiez l'occurrence sur la scène (p. ex. changez sa couleur, sa taille ou appliquez un filtre)
• Créez plusieurs copies de cette occurrence (appuyez CTRL-ALT et tirez le symbole).
• Répétez avec un rectangle arrondi. Dans la bibiothèque vous devez maintenant avoir deux symboles de clip : une boule rouge et un rectangle rouge.

Étape 2 - mettez les symboles dans une position de départ.

• P.ex : essayez de reproduire l'exemple. Verifiez que vous avez tous les symboles qu'il vous faut sur la scène avant de commencer à construire l'armature. Vous ne pourriez plus ajouter d'autres symboles plus tard.

Étape 3 - créer la chaîne

Création des os pour les armatures IK type symbole avec Flash CS4

La chaîne doit aller du parent vers les enfants, des enfants aux petits enfants, etc. Dans notre cas, ceci veut dire qu'il faut commencer avec le rectangle lié au sol.

• Sélectionnez l'outil os et cliquez sur la première forme pour la designer la forme parent. Le point où vous cliquez en premier sera celui qui fixera l'armature à la scène. Dans notre cas nous avons choisi un point près du sol.

• Puis, du point au bout du premier point, i.e. l'articulation (joint), tirez l'outil os au prochaine forme et lâchez la souris là où vous voulez que l'os termine. Si vous lâchez la souris hors du symbole (forme) rien ne se passera.

• Répétez cet étape jusque tous les symboles soient liés. Commencez toujours par une articulation. Dans notre cas, toujours l'articulation extérieure, car nous voulons créer une chaîne.

Vous verrez que Flash vient de créer un calque d'armature (Armature_1, vous ne pouvez plus modifier vos objets). Ils ont été copiés au calque d'armature et sont devenus des ikNodes. Vous pouvez changer le nom du calque.

Un mot à propos de la terminologie : chaque os recevra un nom comme ikBoneName1 (que vous pouvez changer) et chaque symbole recevra un nom comme ikNode1 (que vous pouvez aussi changer). Donc, dans une armature nous avons des os (bones) et des noeuds (nodes).

Jouez avec l'armature, p. ex. tirez le dernier enfants de l'armature IK pour voir si les articulations sont au bon endroit. Si non, modifiez-les (voir ci-dessous).

Modifications

Modification des points centraux

• Si le début d'un os est au mauvais endroit, vous pouvez déplacer le point de rotation avec l'outil de transformation libre (Free transform tool). Vous pouvez egalement tourner la forme, la bouger ou modifier sa taille pour qu'il s'adapte à la nouvelle rotation et longueur de l'os, mais ceci est compliqué. Nous verrons la manipulation des os et des noeuds plus en détail plus tard. Le mouvement des os du haut vers le bas suffira pour le moment.

L'image ci-dessous montre ce qui se passe si vous déplacez une forme et modifiez son point de rotation. Le résultat n'est pas entièrement réaliste (comparez-la avec l'image précédente...)

Modification des articulations (points d'entrée) avec l'outil de transformation en Flash CS4

Animation

Créons nous une armature IK. Avant de commencer, vérifiez que l'armature IK est celle que vous voulez. Elle doit être complète. Vous ne pourrez pas modifier l'armature plus tard. Vous ne pourrez que modifier les poses, appliquer des transformations et autres modifications avancées. La procédure est la suivante :

• Appuyez F5 quelque part dans le scénario (timeline)
• Utilisez l'outil de sélection (selection tool)
• Déplacez toutes les articulations où vous voulez dans une image de votre choix du scénario. Chaque fois que vous faites ceci, ce créera une nouvelle image clé avec une pose. Les images clés se distinguent par un point noir dans l'image.

• Vous pouvez copier/coller les poses : cliquez-droite directement dans une image clé dans le scénario, autrement il ne fonctionnera pas (ne cliquer pas d'abord).

Et si rien ne fonctionne ?

• Sélectionnez le calque d'armature en cliquant là dessus. Ca selectionne toute l'armature IK.

• Supprimez l'os parent (en bas dans notre exemple)
• Puis, sélectionnez tous les symboles et copiez-les vers le calque initial ("plaything" dans l'exemple). Vous pouvez utiliser CTRL-shift-v pour coller un symbole "en place" (même position que l'original).
• Puis supprimez le calque d'armature et recommencez.

Modification du scénario

• Simplement tirez la dernière image dans une direction ou une autre. Verifiez que vous voyez une flèche double, i.e. ne cliquez pas dans la dernière image. Dans ce dernier cas, vous bougeriez la chaîne entière.

Résultat et source

• symbols-ik-armature-intro.html
• Source: symbols-ik-armature-intro.fla (Notification : La sélection des élements fonctionne bizarement, peut-être parce que les traits ont été changés ou à cause de l'angle oblique. Aggrandir à 400% si vous voulez jouer avec...)
• Dossier : http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/

Ajouter des armature aux formes

Vous pouvez également ajouter une armature à l'intérieur d'une forme comme le démo vu au départ demo. Suivez les étapes suivantes :

Étape 1 - Créer un nouveau calque avec une seule forme

• Dessinez une forme ou un dessin simple en mode objet. Finissez le dessin. Vous ne pourrez modifier que sa forme plus tard.
• Vérifier que vous n'avez qu'une seule forme, autrement CS4 peut se bloquer ou agir de manière bizarre, e.g. créer plusieurs calques d'armatures.

Suivez les étapes ci-dessous :

• Dessinez toutes les parties en mode objet.
• Lorsque le dessin vous plaît, sauvegarder une copie de votre œuvre pour y revenir si vous en avez besoin. CTRL-A puis clique-droite > Create Symbol.
• Puis cassez l'occurrence du symbole sur la scène et unifier tous les graphismes : CTRL-A, puis dans le menu Modifier>Combiner les objets>Union. Ceci est nécessaire parce qu'il faut avoir un seul dessin de forme ou d'objet'.

Étape 2 - Ajoutez l'armature IK (les os)

• Sélectionnez l'outil os dans le panneau d'outils
• Cliquez à l'intérieure de la forme à l'endroit où vous souhaitez attacher l'armature à la scène. Cet os devient le parent qui ne bougera pas.
• Puis appuyez la souris au même endroit et tirer un os
• Cliquez le point au bout de ce nouvel os et tirer encore
• etc.

Vous verrez maintenant un calque d'armature et vous ne pourrez plus modifier vos objets. Ils ont été tous déménagés au calque d'armature.

Étape 3 - Ajouter une autre forme

• Si vous voulez créer une autre armature IK (forme ou objet) créez un nouveau calque et recommencez les étapes 1 et 2.

Étape 4 - Créer l'animation et modifiez des poses dans les images clé.

• Tournez les os comme expliqué ci-dessus. Si vous tournez le cercle près d'une articulation vous allez bouger l'articulation sans tourner les parents.
• Pour modifier la forme à l;intérieure d'une pose, voir ci-dessous. Consultez également Univers_Flash_CS4#En_avant pour une vue globale des outils et objets.

Exemple avec deux fleurs

Cet exemple est très moche. Il faudra le refaire à un moment. Il faut dire que le choix d'utiliser le crayon ne rend pas la tache de dessiner des lignes gras. Il vaut mieux utiliser l'outil rectangle ou le pinceau et modifier l'enveloppe de suite.

• bones-in-shape-intro.html
• Source : bones-in-shape-intro.fla
• Dossier : http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/

Shape stickman example

Shape-based IK structure of a stickman

This shape has been drawn with the Paint tool in object mode. Once the drawing was done, we made a union of all its parts (Modify->Combine Objects->Union) and then optimized (Modify->Shape-Optimize) at 100%.

• The stickman has many joints as you can see in the picture.
• The parent bone starts in the hip area.
• We not only animated the poses but also move the stickman in different positions in various keyframes.

• shape-ik-stickman-animation.html
• Source: shape-ik-stickman-animation.fla
• Directory: http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/

The result isn't great, but given the time we spent on it (little) it's ok.

Fixing the shape in poses

You sometimes can see that the shape doesn't really follow the bones (I mean these sharp edges that can appear). Such behavior can be fixed:

• Use the Subselection tool to move shape control to a different place. Firstly, magnify the scene (at least 400%). Then you can move or kill the blue control points or adjust them with the red curve control handlers. Take it slowly and wait to see the result of a manipulation since Flash recomputes the whole interpolations ! Even my DELL M1740 high-end laptop needs to think about it, before it let's me see a deletion, a move or a curve change happen. Also bones may be shown displaced. Click in another keyframe and come back ...
• Use the bind tool to associate shape controls with bones.

Fixing a curve of the shape in a IK pose with the subselect tool

Unless you are looking for a "snake-like" behavior, it is probably better to use a symbol-based armature as in the next chapter.