« Flash CS4 - Cinématique inversée » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
(49 versions intermédiaires par 12 utilisateurs non affichées)
Ligne 21 : Ligne 21 :
</div>
</div>


Ce tutoriel est une traduction de la section [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS2756549E-1394-424a-B00E-357A1EAED5D8.html Using inverse kinematics] de la version anglaise de l'aide Adobe Flash CS4 disponible en ligne sous une license [http://creativecommons.org/licenses/by-nc-sa/3.0/ Attribution-Noncommercial-Share Alike]  
Ce tutoriel est une traduction de la section [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS2756549E-1394-424a-B00E-357A1EAED5D8.html Using inverse kinematics] de la version anglaise de l'aide Adobe Flash CS4 disponible en ligne sous une licence [http://creativecommons.org/licenses/by-nc-sa/3.0/ Attribution-Noncommercial-Share Alike]  
et de la version anglaise de l'article [http://edutechwiki.unige.ch/en/Flash_CS4_inverse_kinematics_tutorial Flash CS4 inverse kinematics tutorial] en [http://edutechwiki.unige.ch/en/Main_Page Edutechwiki].
et de la version anglaise de l'article [http://edutechwiki.unige.ch/en/Flash_CS4_inverse_kinematics_tutorial Flash CS4 inverse kinematics tutorial] en [http://edutechwiki.unige.ch/en/Main_Page Edutechwiki].
CS5 ajoute des fonctionalités supplémentaires pas documentées ici (comme les ressorts).


== A propos de la cinématique inversée==
== 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.
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 naturelles avec un minimum d'effort de conception. Par exemple, la cinématique inverse vous laisse créer les effets d'animation de personnages, tels 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.  
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.  
Ligne 34 : Ligne 36 :
[[image:an_ik_symbols.png|right|thumb|150px|Un groupe de plusieurs symboles avec une armature IK jointe.]]
[[image:an_ik_symbols.png|right|thumb|150px|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'').
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 est relié à 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.
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 à une 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.
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.
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ées.


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.
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 contrôle des formes.


===Démo simple===
===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.
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.
[[image:513px-Symbol-vs-shape-armature.png|frame|none|Une structure d'IK (armature) faite avec des symboles vs une structure faite avec une forme]]  
[[image:513px-Symbol-vs-shape-armature.png|frame|none|Une structure d'IK (armature) faite avec des symboles vs une structure faite avec une forme]]  
Chargez l'application [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbol-vs-shape-armature.html 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.
Chargez l'application [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbol-vs-shape-armature.html 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 de manipuler la structure IK.


== Une armature simple utilisant des occurrences de symbole ==
== 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 ===
=== Créer une animation IK simple avec Creation of a simple IK animation utilisant des occurrences de symbole ===


Voir l'exemple [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbols-ik-armature-intro.html symbols-ik-armature-intro] d'abord.
Voir l'exemple [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbols-ik-armature-intro.html symbols-ik-armature-intro] d'abord.
[[image:symbols-ik-intro.png|thumb|right|150px|Une animation IK simple avec une occurrence de symbole]]
[[image:symbols-ik-intro.png|thumb|right|150px|Une animation IK simple avec une occurrence de symbole]]


====Une exemple de boules connéctées====
==== Un exemple de boules connectées ====
; Étape 1 - créer les symboles
; Étape 1 - créer les symboles
* Créez un nouveau calque
* 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".
* Créez un symbole de clip : dessinez une boule rouge et ''clic-droit->convertir en symbole''. Sélectionnez "clip".
* Modifiez l'occurrence sur la scène (p. ex. changez sa couleur, sa taille ou appliquez un filtre)
* 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).
* 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.
* Répétez avec un rectangle arrondi. Dans la bibliothè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.  
; É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.
* P.ex : essayez de reproduire l'exemple. Vérifiez que vous avez tous les symboles qu'il vous faut sur la scène avant de commencer à construire l'armature. Vous ne pourrez plus ajouter d'autres symboles plus tard.


; Étape 3 - créer la chaîne
; Étape 3 - créer la chaîne
Ligne 72 : Ligne 74 :
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.
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.
* Sélectionnez l'''outil os'' et cliquez sur la première forme pour désigner 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.
* Puis, du point au bout du premier point, c-a-d l'articulation (''joint''), tirez l'outil os vers l'objet suivant et lâchez la souris là où vous voulez que l'os termine. Si vous lâchez la souris hors du symbole, aucun joint ne sera créé.


* 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.
* Répétez cette étape jusqu'à ce que '''tous les symboles soient liés'''. Il faut réfléchir préalablement à l'ordre. Il faut commencer par le parent, puis lier les éléments enfants depuis le parent. Il est tout à fait possible de lier plusieurs enfants à un seul parent. Par exemple, dans un avatar, on lie les 2 humérus au torse.
Parfois, il est nécessaire de créer des morceaux d'objets supplémentaires, car c'est le seul moyen de contraindre la dernière articulation à un angle de rotation spécifique (en effet, l'articulation d'un os sur laquelle on peut définir des paramètres est toujours celle qui est en amont de l'os). Dans ce cas, on créera un symbole dédié à cela que l'on rendra finalement invisible en lui ôtant couleur et pourtour. Mais il faut bien veiller à anticiper le problème, car on ne peut pas rajouter d'objet sur une armature déjà construite.


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.
Vous pouvez ensuite jouer avec l'armature, p. ex. tirez le dernier enfant de l'armature IK pour voir si les articulations sont au bon endroit. Sinon, modifiez-les (voir ci-dessous).
 
''Options non liées à l'exemple''
; Étape 4 - supprimer les calques inutiles
Une fois que vous avez connecté chacun de vos objets (mis en relation les os), Flash créera automatiquement un nouveau calque dans le timeline qui sera directement nommé ''Armature'' (ex. ''Armature_1''). Si le nom donné par défaut ne vous convient pas, vous pouvez sans risque changer le nom du calque (remarquez également que le dessin d'un bonhomme est présent dans le calque). Ce nouveau calque comporte à la fois les objets (symboles ou formes) que vous avez préalablement créés - ils auront été copiés au calque d'armature et seront devenus des '''ikNodes'''. Par conséquent, vous pouvez d'ores et déjà supprimer le(s) calque(s) qui vous aura(ont) permis de dessiner ou d'importer vos objets, et conserver uniquement le calque ''Armature''.
 
; Étape 5 - pour modifier vos objets
Une fois ce calque apparu dans le timeline, vous ne pourrez plus modifier vos objets directement sur la scène. Si vous tentez de le faire un message vous informera que l'opération n'est pas possible. Pour contourner cette situation et avoir la possibilité de modifier vos objets, cliquez dans le timeline sur le calque ''Armature'', faites clic droit et sélectionnez ''Remove Armature''. Le dessin du ''bonhomme'' (dans le calque) disparaîtra pour se changer en ''feuille''. De ce fait, vous aurez désélectionné la cinématique mais aurez conservé vos objets que vous pourrez dorénavant modifier à votre guise. Une fois vos modifications terminées, réitérez l'opération de connection des éléments avec l'outil '''os'''. Un nouveau calque (ex. ''Armature_2'') apparaîtra alors dans le timeline. Supprimez l'ancien calque et conservez uniquement le nouveau.
 
''N.B.:''


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'').
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 ===
 
=== Repositionner une instance de symbole ===


=== Modifications ===
Une fois l'armature créée, vous pouvez déplacer un objet avec CTRL-ALT et en tirant avec la souris


====Modification des points centraux====
====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.
* 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 également tourner la forme, la bouger ou modifier sa taille pour qu'elle 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...)
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...)
Ligne 95 : Ligne 109 :
=== Animation ===
=== 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 :
Créons 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'')
* Dans le layer de l'armature, appuyez sur F5 quelque part plus loin dans le scénario (''timeline''). Cela créera une interpolation de mouvement pour cette armature.
* Utilisez l'outil de sélection (''selection tool'')
* Ensuite avec l'outil de sélection (''selection tool'') vous pouvez déplacer/tourner toutes les articulations où vous voulez dans les images de votre choix. Chaque fois que vous faites ceci, Flash créera une nouvelle image clé avec une '''pose'''. Les images clés se distinguent par un point noir dans l'image, exactement comme pour un "motion tween" ordinaire.  
* 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).
* Vous pouvez copier/coller les poses : ''clic-droit'' directement dans une image clé dans le scénario, ensuite sélectionner "Copy Pose", puis dans un autre frame vous pouvez coller. Le calque doit être vert olive (déselectionné), autrement cela ne fonctionnera pas (ne cliquez pas d'abord dans la timeline).
 
* Le dernier élément lié à votre armature a tendance à tourner dans tous les sens sans contrôle, ce qui peut être très gênant. Pour éviter cela, créez un nouveau symbole (un carré par exemple) puis rendez-le transparent (alpha=0). Insérez-le dans un calque (autre que "armature" puisque vous ne pouvez rien y ajouter) près du dernier élément de l'armature. Visualisez à peu près où il se trouve. Reprenez l'armature et tirez un nouvel os jusqu'au symbole que vous venez d'insérer. Maintenant, en cliquant sur ce symbole, vous pourrez manipuler le dernier élément à votre guise


Et si rien ne fonctionne ?
Et si rien ne fonctionne ?


* Sélectionnez le calque d'armature en cliquant dessus. Ca selectionne toute l'armature IK.  
* Sélectionnez le calque d'armature en cliquant dessus. Cela sélectionne toute l'armature IK.  


* Supprimez l'os parent (en bas dans notre exemple)
* Supprimez le ou les os parent(s) (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, 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.
* Puis supprimez le calque d'armature et recommencez.
Ligne 117 : Ligne 132 :
; Résultat et source :
; Résultat et source :
* [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbols-ik-armature-intro.html symbols-ik-armature-intro.html]
* [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbols-ik-armature-intro.html symbols-ik-armature-intro.html]
* Source: [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbols-ik-armature-intro.fla 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...)
* Source: [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbols-ik-armature-intro.fla symbols-ik-armature-intro.fla] (Notification : La sélection des éléments fonctionne bizarement, peut-être parce que les traits ont été changés ou à cause de l'angle oblique. Agrandir à 400% si vous voulez jouer avec...)
* Dossier : http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/
* Dossier : http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/


== Ajouter des armature aux formes ==
== Ajouter des armatures aux formes ==


Vous pouvez également ajouter une armature à l'intérieur d'une forme comme le démo vu au départ [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbol-vs-shape-armature.html demo]. Suivez les étapes suivantes :
Vous pouvez également ajouter une armature à l'intérieur d'une forme comme la démo vue au départ [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbol-vs-shape-armature.html demo]. Suivez les étapes suivantes :


; Étape 1 - Créer un nouveau calque avec une seule forme
; É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.  
* 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.  
* Vérifiez 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 :
Suivez les étapes ci-dessous :
* Dessinez toutes les parties en ''mode objet''.  
* 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''.
* Lorsque le dessin vous plaît, sauvegardez une copie de votre œuvre pour y revenir si vous en avez besoin. CTRL-A puis ''clique-droit > 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'''.
* Puis cassez l'occurrence du symbole sur la scène et ''unifiez'' tous les graphiques :  CTRL-A, puis dans le menu '''Modify''>''Combine objects''>''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)
; Étape 2 - Ajouter l'armature IK (les os)
* Sélectionnez l'outil os dans le panneau d'outils
* 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.
* 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
* Puis appuyez la souris au même endroit et tirer un os
* Cliquez le point au bout de ce nouvel os et tirer encore
* Cliquez le point au bout de ce nouvel os et tirez encore
* etc.
* 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.
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.
Ligne 143 : Ligne 158 :
* Si vous voulez créer une autre armature IK (forme ou objet) créez un nouveau calque et recommencez les étapes 1 et 2.
* 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é.
; Étape 4 - Créer l'animation et modifier 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.  
* 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.
* Pour modifier la forme à l'intérieur 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
; 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.  
Cet exemple est très moche. Il faudra le refaire à un moment. Il faut dire que le crayon ne permet pas de dessiner des lignes en gras. Il vaut mieux utiliser l'outil rectangle ou le pinceau et modifier l'enveloppe de suite.  
* [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/bones-in-shape-intro.html bones-in-shape-intro.html]
* [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/bones-in-shape-intro.html bones-in-shape-intro.html]
* Source : [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/bones-in-shape-intro.fla bones-in-shape-intro.fla]
* Source : [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/bones-in-shape-intro.fla bones-in-shape-intro.fla]
Ligne 159 : Ligne 174 :
* Le bonhomme-allumettes a beaucoup d'articulations
* Le bonhomme-allumettes a beaucoup d'articulations
* L'os parent commence à la hanche
* L'os parent commence à la hanche
* Nous n'avons pas seulement animé les poses, avons aussi déplacé le bonhomme à des differents endroits dans une sélection d'images clés.
* Nous n'avons pas seulement animé les poses, avons aussi déplacé le bonhomme à des différents endroits dans une sélection d'images clés.


* [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/shape-ik-stickman-animation.html shape-ik-stickman-animation.html]
* [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/shape-ik-stickman-animation.html shape-ik-stickman-animation.html]
Ligne 171 : Ligne 186 :
Parfois il est évident que la forme ne suit pas les os (des bords pointus apparaissent). On peut les corriger :
Parfois il est évident que la forme ne suit pas les os (des bords pointus apparaissent). On peut les corriger :


* Utiliser l'outil de sous-sélection pour déplacer le contrôle d'une forme à un autre endroit. Élargir la scène (au moins 400%). Puis vous pouvez déplacer ou supprimer les ''points de contrôle blues'' ou les modifier utilisant les ''manches de contrôle rouge'' pour modifier la courbe.
* Utiliser l'outil de sous-sélection pour déplacer le contrôle d'une forme à un autre endroit. Élargir la scène (au moins 400%). Puis vous pouvez déplacer ou supprimer les ''points de contrôle bleus'' ou les modifier en utilisant les ''manches de contrôle rouge'' pour modifier la courbe.
Ce type de manipulation prend du temps car Flash doit calculer toute l'interpolation. De plus, les os peuvent apparaître déplacés. Cliquez dans une autre image clé et revenir.
Ce type de manipulation prend du temps car Flash doit calculer toute l'interpolation. De plus, les os peuvent apparaître déplacés. Cliquez dans une autre image clé et revenir.
* Utiliser l'outil de fixation (''bind tool'') pour relier les controle de forme aux os.
* Utiliser l'outil de fixation (''bind tool'') pour relier les contrôles de forme aux os.
[[image:flash-cs4-fixing-curves-ik.png|frame|none|Modifier la courbe d'une forme dans une pose IK avec l'outil sous-sélection]]
[[image:flash-cs4-fixing-curves-ik.png|frame|none|Modifier la courbe d'une forme dans une pose IK avec l'outil sous-sélection]]
Sauf si vous souhaitez reproduire la motion d'un serpent, il vaut mieux utiliser une armature de symbole comme dans le prochain chapitre.
Sauf si vous souhaitez reproduire la motion d'un serpent, il vaut mieux utiliser une armature de symbole comme dans le prochain chapitre.
Ligne 184 : Ligne 199 :


* La taille du corps doit être environ 6 à 8 fois la taille de la tête.  
* La taille du corps doit être environ 6 à 8 fois la taille de la tête.  
* La taille de la tête au entrejambes et la même taille de l'entrejambe aux pieds
* La taille de la tête aux entrejambes est la même taille de l'entrejambe aux pieds
* Les épaules et les hanches sont environ la même largeur
* Les épaules et les hanches ont environ la même largeur
* La taille (si vous en avez une est mi-chemin entre les épaules et l'entrejambe
* La taille (si vous en avez une est à mi-chemin entre les épaules et l'entrejambe
* La longueur des bras : de l'épaule à mi-cuisse maximum
* La longueur des bras : de l'épaule à mi-cuisse maximum
* La longueur des pieds : à peu près la même que les avant-bras
* La longueur des pieds : à peu près la même que les avant-bras
Ligne 193 : Ligne 208 :
; Modifier les propriétés
; Modifier les propriétés


Sélectionnez un os et changez quelques option dans le panneau des propriétés.
Sélectionnez un os et changez quelques options dans le panneau des propriétés.


* La vitesse fait référence à la vitesse du pivotement par rapport au reste (le défaut est 100%)
* La vitesse fait référence à la vitesse du pivotement par rapport au reste (le défaut est 100%)
* Les contraintes de rotation sont des contraints sur la rotation des articulations d'un système d'os artificiel
* Les contraintes de rotation sont des contraintes sur la rotation des articulations d'un système d'os artificiel
 
; Petite astuce
 
* Pour donner un effet réaliste du mouvement de la main, insérez une forme pleine colorée près de celle-ci. Faites-en un symbole. Reliez l'articulation à cette forme. Donnez une rotation du "nouvel os de la main" convenable et réalisez (la main ne peut pas rentrer dans le poignet par exemple). Ensuite, animez comme vous le souhaitez votre personnage, mains comprises si vous en aviez envie. Ensuite, donnez une valeur 0 pour l'alpha de la couleur de cette forme. Vous savez qu'il y a une forme mais l'utilisateur de le saura pas.


== Animation par l'utilisateur ==
== Animation par l'utilisateur ==


Vous pouvez produire une armature de cinématique inverse qu'un utilisateur peut manipuler :  
Vous pouvez produire une armature de cinématique inverse qu'un utilisateur peut manipuler :  
* Utilisez que l'image 1 du calque d'armature, sans autre animation (supprimez toutes les autre images dans le calque d'armature)  
* N'utilisez que l'image 1 du calque d'armature. Autrement dit, il faut une armature sans autre animation (supprimez toutes les autres images dans le calque d'armature)  
* Ensuite désélectionnez tout sur la scène, puis cliquez sur le calque "armature".
* Dans le panneau de propriétés, sélectionnez ''Type''> ''Runtime''.  
* Dans le panneau de propriétés, sélectionnez ''Type''> ''Runtime''.  
* Publiez le clip et jouez comme dans le démo au début de ce tutoriel.
* Publiez le clip et jouez comme dans la démo au début de ce tutoriel.


* Démo: [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbol-vs-shape-armature.html symbol-vs-shape-armature.html]
* Démo: [http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/symbol-vs-shape-armature.html symbol-vs-shape-armature.html]
Ligne 209 : Ligne 229 :
* Dossier : http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/
* Dossier : http://tecfa.unige.ch/guides/flash/ex4/inverse-kinematics/


== Tools and objects overview ==
=== Méthode hitTestObject() pour produire un petit jeu===
 
Il est possible une fois notre armature créée d'associer des méthodes aux noeuds.
 
Nous pouvons par exemple, créer un bonhomme et lui faire attraper des objets. Pour se faire, il faut attribuer la méthode hitTestObject() au noeud désiré.
 
Cette méthode va tester si le noeud en question touche un objet que nous définirons à l'avance.
 
exemple : attraper les multiples de 9
 
Nous avons créé un bonhomme tenant une pince. La pince et le bras du bonhomme comporte une armature. Le noeud final est sur le bout de la pince. C'est la position de ce dernier que nous allons tester. Ce noeud se nomme : "ikNode_21".
Le but du jeu est d'attraper les multiples de 9, voici le code qui teste les bonnes réponses:
 
 
<source lang="actionscript">
ikNode_21.addEventListener(MouseEvent.MOUSE_UP, toucher);
    function toucher(evt:MouseEvent
                //si le noeud 21(la pince) touche la réponse 81, elle se déplace + "Bravo"
if (ikNode_21.hitTestObject(rep81))
{
rep81.x= 500;
rep81.y=90;
textField.text= "Bravo!";
hits= hits+1;
}
 
if (ikNode_21.hitTestObject(rep27))
{
rep27.x= 500;
rep27.y=155;
textField.text= "Bravo!";
hits= hits+1;
}
if (ikNode_21.hitTestObject(rep63))
{
rep63.x= 500;
rep63.y= 212;
textField.text= "Bravo!";
hits= hits+1;
}
if (ikNode_21.hitTestObject(rep108))
{
rep108.x= 500;
rep108.y=270;
textField.text= "Bravo!";
hits= hits+1;
}
if (ikNode_21.hitTestObject(rep54))
{
rep54.x= 500;
rep54.y=331;
textField.text="Bravo!"
hits= hits+1;
}
if (ikNode_21.hitTestObject(rep45))
{
rep45.x= 500;
rep45.y=393;
textField.text= "Bravo!";
hits= hits+1;
}
               
 
 
</source>
 
Il y a ensuite le code qui détermine quand la pince touche une mauvaise réponse :
 
<source lang="actionscript">
    //pour chaque mauvaise réponse, il y a la même action qui se déclenche et affiche un message d'erreur
    function bad_move(evt:MouseEvent){
if (ikNode_21.hitTestObject(rep16)||ikNode_21.hitTestObject(rep17)
                    ||ikNode_21.hitTestObject(rep21)|| ikNode_21.hitTestObject(rep37)
                    || ikNode_21.hitTestObject(rep58) || ikNode_21.hitTestObject(rep97) )
{
textField.text= "Vous avez commis une erreur!";
}
</source>
 
Enfin, nous testons si le joueur a gagné en ajoutant cette ligne :
<source lang="actionscript">
            if (hits==6) {textField.text="Vous avez gagné!!Bravo";}
</source>
 
[http://tecfaetu.unige.ch/perso/maltt/folloni8/perso/exempleHitTestObject.swf exemple_swf]
 
[http://tecfaetu.unige.ch/perso/maltt/folloni8/perso/exempleHitTestObject.fla exemple_fla]


This is a sort of short manual for the IK tools an objects
== Contrôler l'accélération ==


=== Tools overview ===
L'accélération permet de faire bouger l'animation avec un sens de gravité dû à l'accélération ou au ralentissement de son mouvement.
* Sélectionnez le calque contenant le squelette de la forme à animer
* Dans l'inspecteur de propriétés, sélectionnez l'option de type "Authortime"
* Sélectionnez l'image 40 par exemple sur tous les calques, puis choisissez Insertion / Timeline / Frame
* Placez la tête de lecture à l'image 40
* Attrapez l'extrémité de la forme à animer avec l'outil Sélection, pliez-la puis déplacez-la
* Sélectionnez la première pose à l'image 1 du calque Armature
* Dans l'inspecteur de propriétés, sélectionnez Simple (Medium) dans le menu Type de la section "Ease"
* Passez l'intensité à 100
* Prévisualisez avec Control / Test movie / in Flash Professionnal


Below is a list of tools you may use and their function. See further down for "how to".
== Survol des outils et des objets ==


; The Bones tool
Un petit manuel des outils et objets IK
* Define bones


; The Bind tool
=== Survol des outils ===
* Associate envelope points with a given bone. (more later)


; The Select tool
Voici une liste des outils et leur fonctions.
* Select bones or associated ikNodes (shapes) for further manipulation, either by dragging, ALT-dragging or via the properties or transform panel.


; The Subselection tool
; L'outil os - ''Bones tool''
* Allows you to move joints of bones (i.e. make them longer or shorter and rotate) of bones '''within a shape''' armature. I.e. this won't work with IK structures that use symbols. To move bones for symbol armatures, use the Free Transform tool.
* Définir les os
* Allows to adjust shapes


; The pen tool
; L'outil de fixation? - ''Bind tool''
* As alternative tool to add/remove control points to a shape.
* Associer les point d'une enveloppe à un os.


; The Free Transform tool
; L'outil de sélection - ''Select tool''
* Allows to move joints (starting points of bones) of an '''symbol-based''' armature.
* Sélectionner les os ou ikNodes associés (formes) à manipuler, soit en les tirant, ALT-drag ou par le panneau de propriétés ou de transformation.


; The Transform panel
; L'outil de sous-sélection - ''Subselection tool''
* Change size and rotation of both bones and associated ikNodes (shapes).
* Permet le déplacement des articulations des os (i.e. les allonger ou raccourcir et pivoter) à l'intérieur d'une armature forme. A noter : ceci ne fonctionnera pas avec les structures qui utilisent des symboles. Pour déplacer les os des armatures type ''symbole'', utilisez l'outil transformation libre (''Free transform'')
* Permet la modification des formes


=== Dealing with the armature layer ===
; L'outil stylo - ''pen tool''
An armature is defined in a special '''Armature''' layer. By clicking on the layer, you then can change some of its properties in the properties panel:
* Une option pour ajouter ou supprimer les points de contrôle d'une forme
* '''Ease''': You can define ease-in and ease-out parameters as in other tweening animations
 
; L'outil de transformation libre - ''Free Transform tool''
* Permet de déplacer les articulations (points de départ des os) d'une armature type ''symbole''.
 
; Le panneau transformation - ''Transform panel''
* Modifier la taille et la rotation des os et les ikNodes associés (formes).
 
=== Le calque d'armature ===
Une armature est définie dans un calque particulier, le ''calque d'armature''. En cliquant sur le calque, vous pouvez modifier ses propriétés dans le panneau de propriétés :
 
* '''Accélération''': vous pouvez définir les paramètres d'accélération et de décélération des animations comme dans les autres animations d'interpolation.
* '''Options''':
* '''Options''':
** '''Change type''': ''Authortime'' to animate yourself in the armature layer, ''runtime'' to allow the user move the IK structure. In the latter case, you can't have your own animations. I.e. you only can define frame 1.
** '''Changer type''': ''Authortime'' pour préciser l'animation dans le calque d'armature, ''runtime'' pour permettre à l'utilisateur de déplacer la structure IK. Dans ce dernier cas, vous ne pouvez pas contrôler l'animation. Vous ne pouvez définir que l'image 1.
** '''Style''': This will display the bone structure in various ways. Use ''solid'' for simple stuff and ''wire'' to be able to work on finer details.
** '''Style''': Permet de choisir la façon dont la structure d'os s'affiche. Affichez-la comme ''solide'' pour des objets simples et ''file'' pour les objets plus détaillés.
[[image:flash-cs4-armature-properties.png|thumb|600px|none|Flash CS4 armature properties]]
[[image:flash-cs4-armature-properties.png|thumb|600px|none|Les propriétés d'une armature Flash CS4]]
Flash automatically moves all the object from the drawing layer to the armature layer as soon as you create an IK. Therefore if you want to break the armature, make sure to copy first all your stuff from the armature layer to another layer or ''much'' better, before you start adding an armature, simply save your drawings as a symbol in the library (break apart the instance on stage again after you saved).
 
Flash déplace automatiquement tous les objets du calque de dessin au calque d'armature dès qu'un IK est créé. Alors, si vous voulez casser une armature, faites une copie sur un autre calque, ou encore mieux, sauvegardez vos dessins comme un symbole dans la bibliothèque (et cassez l'occurrence sur la scène).
 
De plus, les armatures doivent être créées avant d'être modifiables, i.e. vous pouvez modifier la '''pose initiale'''. Si vous avez plus qu'une pose, i.e. plus qu'une image, vous ne pouvez pas. Dans les autres images, vous ne pouvez changer et copier/coller que les poses. Ceci est normal, car une armature doit rester pareille pendant la durée de l'animation.
 
Il faut également savoir que lorsque vous voulez réutiliser une animation Flash dans laquelle il y a une armature, il faut trouver un autre subterfuge que le simple "''copy frames - paste frames''" car '''on ne peut pas copier une armature'''.
 
=== Manipuler l'ensemble d'une structure IK ===
* Pour sélectionner toute une structure IK ou une forme, cliquez dessus.
* Vous pouvez de suite modifier sa position dans le panneau de propriétés, déplaçant l'articulation parent à un nouveau point d'origine.
* Autrement, vous pouvez sélectionner l'outil de transformation pour le déplacer.
* Vous ne pouvez pas changer sa taille, alors pensez à la taille au départ.
 
=== Modifier les os ===
Il y a plusieurs manières de modifier les os créés. Vous pouvez les repositionner ainsi que leurs objets associés, déplacer un os à l'intérieur d'un objet, modifier la longueur d'un os, supprimer des os, et modifier les objets qui contiennent les os.
 
Modifiez les os '''avant''' d'ajouter les poses !
* Pour sélectionner un os, utilisez l'outil de sélection. '''shift-sélection''' permet de sélectionner plusieurs os et '''double-click''' sélectionnera tous les os.
* Pour supprimer un os, sélectionnez-le et ''supprimer''. Ceci va supprimer ses enfants aussi.
* Pour modifier les propriétés d'un ou plusieurs os, utilisez le panneau de paramètres.
 
Vous pouvez définir 3 types de paramètres pour chaque os ou série d'os.
* La transposition des articulations est désactivée par défaut, i.e. la taille des membres reste pareille. Pour permettre d'allonger les os, modifiez les paramètres de l'articulation de '''l'enfant''' '''Joint: X translation''' et '''Joint: Y translation'''. De suite, vous pouvez définir jusqu'où l'on peut tirer l'articulation (direction x/y), donc le début de l'os. Lorsqu'on bouge l'articulation dans une direction x/y (normalement pas possible) l'os parent changera sa taille et son angle.
* Pour limiter la rotation (360 degrés par défaut) modifiez les paramètres '''Joint: rotation'''. Les chiffres positifs indiquent une rotation dans le sens des aiguilles d'une montre.
 
Pour tourner un os, utiliser l'outil de sélection pour glisser l'os (ou la forme). Tous les os dans la même branche bougeront aussi. Mais si un point '''plus proche de l'articulation''' est sélectionné, les os bougeront moins.
 
Pour tourner un os '''sans bouger ses parents''', ''glisser'' en appuyant sur le bouton '''shift''' en même temps.


Also, '''armatures''' can only be edited after you created it, i.e. you may edit the structure of the '''initial pose'''. If you have more than one '''pose''', i.e. more than one frame, you can't. In the other frames you only can change and copy/paste poses. That makes sense, since the armature must be the same throughout the animation.
Pour déplacer un os, sélectionnez l'articulation avec l'outil '''transformation libre''' (free transform). Autrement dit, il suffit de déplacer le point de rotation, le petit cercle blanc de l'ancien style d'animation de rotation. Vous pouvez aussi manipuler les objets avec le panneau de transformation. Si vous voulez tirer l'os du parent A, sélectionnez l'enfant B, etc.


=== Dealing with the whole IK structure ===
Nous n'avons pas réussi à déplacer le bout des os avec l'outil de sous-sélection pour les '''armatures ''symbole''''', que les armatures à l'intérieur des structures IK
* To select the whole IK structure or shape, click on it.
* You then can change its position in the parameters panel. I.e. it will move the parent joint to a new origin.
* Alternatively you can select the free transform tool and then move it.
* You can't change its size, so think before, i.e. when you draw it.


=== Editing Bones ===
=== Les nœuds IK dans les armatures symbole ===
After creating bones, there are many ways of editing them. You can reposition the bones and their associated objects, move a bone within an object, change the length of a bone, delete bones, and edit the objects containing the bones.


Remember that you should edit the bones '''before''' you start adding poses !
Les instances de symbole connecté aux os deviennent automatiquement des '''ikNodes'''. Lorsque vous cliquez sur une forme avec l'outil de sélection, vous verrez une appelation type ''ikNode_3'' dans le panneau de propriétés.
* To select a bone, use the select tool. '''shift-select''' will select several and '''double-click''' will select all bones.
* To '''kill a bone''', select it and hit '''delete'''. This will also kill its children.
* To edit properties of a selected (or several selected bones) use the parameters panel.


You can define 3 sets of parameters for each bone (or set of bones)
* Dans le panneau de transformaton vous pouvez changer la taille (x et y) et la rotaton d'une forme, ainsi vous pouvez re-aligner une forme avec un os suite à des manipulations imprévues.
* Joint translation is disabled by default, i.e. the size of limbs remains the same. To allow stretching of bones edit the '''child's''' '''Joint: X translation''' and '''Joint: Y translation''' parameters. You then may define how far in x/y direction you can stretch the joint, i.e. the start of the bone. Basically, when you move a joint in x/y direction (which normally you can't) the parent bone will grow/or shrink and change its angle.
* Vous pouvez également appuyez sur '''ALT et glisser''' le ikNode (forme).  
* To limit rotation (by default you can rotate in 360 degrees) edit the '''Joint: rotation''' parameters. Positive numbers mean "clockwise".
Dans les deux cas les dimensions de l'os seront modifiées.


To rotate a bone (turn it), use the selection tool to drag the bone (or the shape). All bones that are in the same branch also will move. But if '''you select a spot closer to the joint''', they will move less.
=== Manipulation des structures IK forme ===


To rotate a bone '''without moving the parents''', '''shift-drag''' (hold down the shift key).
* Modifier une '''structure IK ''forme''''' avec l'outil de sous-sélection,  
* Cliquez sur le trait et modifiez la forme avec les ''contrôles de contour'' qui apparaîtront.
* Pour ajouter un point de contrôle, cliquez sur le trait de contour
* Pour supprimer un point, sélectionnez-le et appuyez sur ''delete'' (supprimer).
* Pour agrandir un os, il faut simplement sélectionner l'os et ensuite tirer sur un des 2 bouts.


To move a joint, select the joint with the '''free transform tool'''. In other words, you simple move the rotation point, i.e. little white circle you should know from old style CW motion animation. You also can play with the '''transform panel'''. If you want to stretch the bone of parent A, select child B.
Conseil : La manipulation des contours (ajouter un point, modifier un contour) est parfois difficile et CS4 peut réagir de manière erratique. CS5 a l'air plus stable. L'outil '''stylo''' et ses sous-outils permettent un contrôle plus raffiné.


I did not manage to move bone ends with the Subselection tool for symbol-based armatures, only within a shape-based IK.
=== Relier les os au points d'une forme ===


=== IK nodes in symbol-based armatures ===
Par défaut, les points de contrôle d'une forme sont reliés à l'os le plus proche. Vous pouvez modifier les associations avec le '''bind tool''' (l'outil de fixation) sous l''''outil os''' dans  le panneau d'outils).


Symbol instances connected with bones become '''ikNodes'''. I.e. when you click on a shape with the select tool, you will see something like ''ikNode_3'' in the properties panel.
Si vous cliquez sur un os ('''rouge''' quand il est sélectionné), tous ses points associés à un seul os seront visibles comme  carrés '''jaunes'''. Les '''triangles jaunes''' indiquent les points reliés à plusieurs os.
* Pour supprimer une association à un os faites '''CTRL-click''' sur le point de contrôle jaune.
* Pour associer un point à un os, '''SHIFT-click''' sur un point de contrôle rouge ''non-associé''.
* Pour ajouter un point de contrôle, utilisez l'''outil de sous-sélection''.


* In the '''transform panel''' you now can change its size (x and y) and also it's rotation. E.g. if you did some wild bone manipulation stuff you can realign a shape with the bone.
Alternativement, si vous cliquez sur un point de contrôle ('''bleu''' si aucun os n'est sélectionné), il devient '''rouge''' et les os associés sont '''jaunes'''.
* Alternatively, you also can drag the ikNode (shape) with '''ALT-drag'''.
'''
In both cases the bones will adapt, i.e. stretch and rotate.
A noter :''' la couleur '''rouge''' indique l''''objet d'origine''', la couleur '''jaune''' indique l''''objet associé'''


=== Dealing shape-based IK shapes ===


* To edit a shape in a shape-based IK structure, use the Subselection tool
== Liens ==
* If you click on the stroke (the border of the shape) you will see control points. You then can '''drag control points''' or click on one and adjust the shape with the '''curve controls''' that will appear.
* To add a new control point click somewhere on the stroke.
* To delete a control point, select it and hit '''delete'''
Tip: Magnify a lot (e.g. 400%), it's really hard to get the right point. Also CS4 behaves a bit erratically, i.e. I sometimes have trouble inserting a new control point vs. moving a curve control. Therefore you also can use the '''pen tool''' and its sub-tools to add/remove controls.


=== Bind bones to shape points ===
(vérification des liens le 28 janvier 2012: tout ok!)
; Définitions
* [http://fr.wikipedia.org/wiki/Cin%C3%A9matique_inverse Cinématique inverse] (Wikipédia, L'encyclopédie en ligne)


When you move the bone structure to a different pose, you may not be happy with the result, but you can fix that. By default, the control points of a shape are connected to the bone that is nearest to them, but you can change that with the '''bind tool''' (that sits underneath the bone tool in the tools panel).
; Manuels fr
* [http://help.adobe.com/fr_FR/Flash/10.0_UsingFlash/WS58BD3A02-DA25-488f-B534-AE5463A24833.html Utilisation de la cinématique inverse] (Adobe, Utilisation de Flash)
* [http://help.adobe.com/fr_FR/flash/cs/using/WS58BD3A02-DA25-488f-B534-AE5463A24833.html Utilisation de la cinématique inverse] (Adobe, Utilisation de Flash CS5)


If you click on a bone it will show all associated control points (i.e. parts of the shape that go with a bone). The bone will be '''red''' and the associated control points '''yellow'''. Points that are associate with just one bone are '''yellow squares'''. The ones that connect to more than one bone are '''yellow triangles'''.
; Manuel en
* To remove a control point association with a bone, '''CTRL-click''' on the yellow.
* [http://help.adobe.com/en_US/flash/cs/using/WS58BD3A02-DA25-488f-B534-AE5463A24833.html Using inverse kinmatics] (Adobe, Using Flash, CS5).
* To associate a control point with a bone, '''SHIFT-click''' on a red (not associated) control point.
* To add a control point, use the Subselection tool.


The other way round. If you click on a control point ('''blue''' if no bone is selected) it will become '''red''' and show the associated bones in '''yellow'''.
; Vidéos
* [http://tv.adobe.com/fr/watch/apprendre-flash-professional-cs4/la-cinmatique-inverse/ La cinématique inverse, CS4] (Adobe)
* [http://www.adobe.com/go/lrvid4058_fl Using inverse kinematics (7:30)]
* [http://tv.adobe.com/#vi+f1552v1001 Flash Downunder – The Bone tool and the Deco Tool (22:00)]
* [http://www.video2brain.com/fr/videos-3080.htm Animation par cinématique inverse - Vidéo2brain (6:54)]
* [http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/flash-professional-cs55-pinning-support-for-ik/ Animation d'un coureur (2:35)]
* [http://tv.adobe.com/watch/digital-design-cs5/spring-for-bones/ Animation d'un squelette (4:29)]

Dernière version du 27 janvier 2014 à 23:19

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
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 licence Attribution-Noncommercial-Share Alike et de la version anglaise de l'article Flash CS4 inverse kinematics tutorial en Edutechwiki.

CS5 ajoute des fonctionalités supplémentaires pas documentées ici (comme les ressorts).

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 naturelles avec un minimum d'effort de conception. Par exemple, la cinématique inverse vous laisse créer les effets d'animation de personnages, tels 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 est relié à 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 à une 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ées.

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 contrôle 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 de 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 utilisant des occurrences de symbole

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

Une animation IK simple avec une occurrence de symbole

Un exemple de boules connectées

Étape 1 - créer les symboles
  • Créez un nouveau calque
  • Créez un symbole de clip : dessinez une boule rouge et clic-droit->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 bibliothè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. Vérifiez que vous avez tous les symboles qu'il vous faut sur la scène avant de commencer à construire l'armature. Vous ne pourrez 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 désigner 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, c-a-d l'articulation (joint), tirez l'outil os vers l'objet suivant et lâchez la souris là où vous voulez que l'os termine. Si vous lâchez la souris hors du symbole, aucun joint ne sera créé.
  • Répétez cette étape jusqu'à ce que tous les symboles soient liés. Il faut réfléchir préalablement à l'ordre. Il faut commencer par le parent, puis lier les éléments enfants depuis le parent. Il est tout à fait possible de lier plusieurs enfants à un seul parent. Par exemple, dans un avatar, on lie les 2 humérus au torse.

Parfois, il est nécessaire de créer des morceaux d'objets supplémentaires, car c'est le seul moyen de contraindre la dernière articulation à un angle de rotation spécifique (en effet, l'articulation d'un os sur laquelle on peut définir des paramètres est toujours celle qui est en amont de l'os). Dans ce cas, on créera un symbole dédié à cela que l'on rendra finalement invisible en lui ôtant couleur et pourtour. Mais il faut bien veiller à anticiper le problème, car on ne peut pas rajouter d'objet sur une armature déjà construite.

Vous pouvez ensuite jouer avec l'armature, p. ex. tirez le dernier enfant de l'armature IK pour voir si les articulations sont au bon endroit. Sinon, modifiez-les (voir ci-dessous).

Options non liées à l'exemple

Étape 4 - supprimer les calques inutiles

Une fois que vous avez connecté chacun de vos objets (mis en relation les os), Flash créera automatiquement un nouveau calque dans le timeline qui sera directement nommé Armature (ex. Armature_1). Si le nom donné par défaut ne vous convient pas, vous pouvez sans risque changer le nom du calque (remarquez également que le dessin d'un bonhomme est présent dans le calque). Ce nouveau calque comporte à la fois les objets (symboles ou formes) que vous avez préalablement créés - ils auront été copiés au calque d'armature et seront devenus des ikNodes. Par conséquent, vous pouvez d'ores et déjà supprimer le(s) calque(s) qui vous aura(ont) permis de dessiner ou d'importer vos objets, et conserver uniquement le calque Armature.

Étape 5 - pour modifier vos objets

Une fois ce calque apparu dans le timeline, vous ne pourrez plus modifier vos objets directement sur la scène. Si vous tentez de le faire un message vous informera que l'opération n'est pas possible. Pour contourner cette situation et avoir la possibilité de modifier vos objets, cliquez dans le timeline sur le calque Armature, faites clic droit et sélectionnez Remove Armature. Le dessin du bonhomme (dans le calque) disparaîtra pour se changer en feuille. De ce fait, vous aurez désélectionné la cinématique mais aurez conservé vos objets que vous pourrez dorénavant modifier à votre guise. Une fois vos modifications terminées, réitérez l'opération de connection des éléments avec l'outil os. Un nouveau calque (ex. Armature_2) apparaîtra alors dans le timeline. Supprimez l'ancien calque et conservez uniquement le nouveau.

N.B.:

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

Modifications

Repositionner une instance de symbole

Une fois l'armature créée, vous pouvez déplacer un objet avec CTRL-ALT et en tirant avec la souris

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 également tourner la forme, la bouger ou modifier sa taille pour qu'elle 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 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 :

  • Dans le layer de l'armature, appuyez sur F5 quelque part plus loin dans le scénario (timeline). Cela créera une interpolation de mouvement pour cette armature.
  • Ensuite avec l'outil de sélection (selection tool) vous pouvez déplacer/tourner toutes les articulations où vous voulez dans les images de votre choix. Chaque fois que vous faites ceci, Flash créera une nouvelle image clé avec une pose. Les images clés se distinguent par un point noir dans l'image, exactement comme pour un "motion tween" ordinaire.
  • Vous pouvez copier/coller les poses : clic-droit directement dans une image clé dans le scénario, ensuite sélectionner "Copy Pose", puis dans un autre frame vous pouvez coller. Le calque doit être vert olive (déselectionné), autrement cela ne fonctionnera pas (ne cliquez pas d'abord dans la timeline).
  • Le dernier élément lié à votre armature a tendance à tourner dans tous les sens sans contrôle, ce qui peut être très gênant. Pour éviter cela, créez un nouveau symbole (un carré par exemple) puis rendez-le transparent (alpha=0). Insérez-le dans un calque (autre que "armature" puisque vous ne pouvez rien y ajouter) près du dernier élément de l'armature. Visualisez à peu près où il se trouve. Reprenez l'armature et tirez un nouvel os jusqu'au symbole que vous venez d'insérer. Maintenant, en cliquant sur ce symbole, vous pourrez manipuler le dernier élément à votre guise

Et si rien ne fonctionne ?

  • Sélectionnez le calque d'armature en cliquant dessus. Cela sélectionne toute l'armature IK.
  • Supprimez le ou les os parent(s) (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

Ajouter des armatures aux formes

Vous pouvez également ajouter une armature à l'intérieur d'une forme comme la démo vue 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érifiez 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, sauvegardez une copie de votre œuvre pour y revenir si vous en avez besoin. CTRL-A puis clique-droit > Create Symbol.
  • Puis cassez l'occurrence du symbole sur la scène et unifiez tous les graphiques : CTRL-A, puis dans le menu Modify>Combine objects>Union. Ceci est nécessaire parce qu'il faut avoir un seul dessin de forme ou d'objet'.
Étape 2 - Ajouter 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 tirez 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 modifier 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érieur 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 crayon ne permet pas de dessiner des lignes en gras. Il vaut mieux utiliser l'outil rectangle ou le pinceau et modifier l'enveloppe de suite.

Exemple avec un homme-allumettes Shape stickman example
Structure IK type forme d'un homme-allumettes

Cette forme a été dessinée avec l'outil pinceau en mode objet. Lorsque le dessin était fait, nous avons uni toutes ses parties (Modifier > Combiner objets > Union) et puis optimisé (Modifier > Optimiser forme) à 100%.

  • Le bonhomme-allumettes a beaucoup d'articulations
  • L'os parent commence à la hanche
  • Nous n'avons pas seulement animé les poses, avons aussi déplacé le bonhomme à des différents endroits dans une sélection d'images clés.

Le résultat n'est pas magnifique, mais vu le peu de temps que ça nous a pris, ça va.

Modifier la forme dans une pose

Parfois il est évident que la forme ne suit pas les os (des bords pointus apparaissent). On peut les corriger :

  • Utiliser l'outil de sous-sélection pour déplacer le contrôle d'une forme à un autre endroit. Élargir la scène (au moins 400%). Puis vous pouvez déplacer ou supprimer les points de contrôle bleus ou les modifier en utilisant les manches de contrôle rouge pour modifier la courbe.

Ce type de manipulation prend du temps car Flash doit calculer toute l'interpolation. De plus, les os peuvent apparaître déplacés. Cliquez dans une autre image clé et revenir.

  • Utiliser l'outil de fixation (bind tool) pour relier les contrôles de forme aux os.
Modifier la courbe d'une forme dans une pose IK avec l'outil sous-sélection

Sauf si vous souhaitez reproduire la motion d'un serpent, il vaut mieux utiliser une armature de symbole comme dans le prochain chapitre.

Un avatar bonhomme-allumette

(pas encore fait !)

Maintenant nous allons créer un bonhomme-allumette qui a plus ou moins les mêmes proportions qu'une personne. Nous avons besoin de plusieurs objets pour construire le corps. Voici quelques règles concernant la taille des parties du corps.

  • La taille du corps doit être environ 6 à 8 fois la taille de la tête.
  • La taille de la tête aux entrejambes est la même taille de l'entrejambe aux pieds
  • Les épaules et les hanches ont environ la même largeur
  • La taille (si vous en avez une est à mi-chemin entre les épaules et l'entrejambe
  • La longueur des bras : de l'épaule à mi-cuisse maximum
  • La longueur des pieds : à peu près la même que les avant-bras
  • Le visage est un ovale, environ 1/6 ou 1/8 de la taille du corps entier. Les yeux sont à peu près au centre.
Modifier les propriétés

Sélectionnez un os et changez quelques options dans le panneau des propriétés.

  • La vitesse fait référence à la vitesse du pivotement par rapport au reste (le défaut est 100%)
  • Les contraintes de rotation sont des contraintes sur la rotation des articulations d'un système d'os artificiel
Petite astuce
  • Pour donner un effet réaliste du mouvement de la main, insérez une forme pleine colorée près de celle-ci. Faites-en un symbole. Reliez l'articulation à cette forme. Donnez une rotation du "nouvel os de la main" convenable et réalisez (la main ne peut pas rentrer dans le poignet par exemple). Ensuite, animez comme vous le souhaitez votre personnage, mains comprises si vous en aviez envie. Ensuite, donnez une valeur 0 pour l'alpha de la couleur de cette forme. Vous savez qu'il y a une forme mais l'utilisateur de le saura pas.

Animation par l'utilisateur

Vous pouvez produire une armature de cinématique inverse qu'un utilisateur peut manipuler :

  • N'utilisez que l'image 1 du calque d'armature. Autrement dit, il faut une armature sans autre animation (supprimez toutes les autres images dans le calque d'armature)
  • Ensuite désélectionnez tout sur la scène, puis cliquez sur le calque "armature".
  • Dans le panneau de propriétés, sélectionnez Type> Runtime.
  • Publiez le clip et jouez comme dans la démo au début de ce tutoriel.

Méthode hitTestObject() pour produire un petit jeu

Il est possible une fois notre armature créée d'associer des méthodes aux noeuds.

Nous pouvons par exemple, créer un bonhomme et lui faire attraper des objets. Pour se faire, il faut attribuer la méthode hitTestObject() au noeud désiré.

Cette méthode va tester si le noeud en question touche un objet que nous définirons à l'avance.

exemple : attraper les multiples de 9

Nous avons créé un bonhomme tenant une pince. La pince et le bras du bonhomme comporte une armature. Le noeud final est sur le bout de la pince. C'est la position de ce dernier que nous allons tester. Ce noeud se nomme : "ikNode_21". Le but du jeu est d'attraper les multiples de 9, voici le code qui teste les bonnes réponses:


ikNode_21.addEventListener(MouseEvent.MOUSE_UP, toucher);
    function toucher(evt:MouseEvent
                //si le noeud 21(la pince) touche la réponse 81, elle se déplace + "Bravo"
		if (ikNode_21.hitTestObject(rep81)) 
		{
			rep81.x= 500;
			rep81.y=90;
			textField.text= "Bravo!";
			hits= hits+1;
			
		}

		if (ikNode_21.hitTestObject(rep27))
		{
			rep27.x= 500;
			rep27.y=155;
			textField.text= "Bravo!";
			hits= hits+1;
			
		}
		
		if (ikNode_21.hitTestObject(rep63))
		{
			rep63.x= 500;
			rep63.y= 212;
			textField.text= "Bravo!";
			hits= hits+1;
			
		}
		
		if (ikNode_21.hitTestObject(rep108))
		{
			rep108.x= 500;
			rep108.y=270;
			textField.text= "Bravo!";
			hits= hits+1;
			
		}
		
		if (ikNode_21.hitTestObject(rep54))
		{
			rep54.x= 500;
			rep54.y=331;
			textField.text="Bravo!"
			hits= hits+1;
			
		}
		
		if (ikNode_21.hitTestObject(rep45))
		{
			rep45.x= 500;
			rep45.y=393;
			textField.text= "Bravo!";
			hits= hits+1;
			
		}

Il y a ensuite le code qui détermine quand la pince touche une mauvaise réponse :

     //pour chaque mauvaise réponse, il y a la même action qui se déclenche et affiche un message d'erreur
    function bad_move(evt:MouseEvent){
		if (ikNode_21.hitTestObject(rep16)||ikNode_21.hitTestObject(rep17)
                    ||ikNode_21.hitTestObject(rep21)|| ikNode_21.hitTestObject(rep37)
                     || ikNode_21.hitTestObject(rep58) || ikNode_21.hitTestObject(rep97) )
		{
			
			
			textField.text= "Vous avez commis une erreur!";
			
			
		}

Enfin, nous testons si le joueur a gagné en ajoutant cette ligne :

            if (hits==6) {textField.text="Vous avez gagné!!Bravo";}

exemple_swf

exemple_fla

Contrôler l'accélération

L'accélération permet de faire bouger l'animation avec un sens de gravité dû à l'accélération ou au ralentissement de son mouvement.

  • Sélectionnez le calque contenant le squelette de la forme à animer
  • Dans l'inspecteur de propriétés, sélectionnez l'option de type "Authortime"
  • Sélectionnez l'image 40 par exemple sur tous les calques, puis choisissez Insertion / Timeline / Frame
  • Placez la tête de lecture à l'image 40
  • Attrapez l'extrémité de la forme à animer avec l'outil Sélection, pliez-la puis déplacez-la
  • Sélectionnez la première pose à l'image 1 du calque Armature
  • Dans l'inspecteur de propriétés, sélectionnez Simple (Medium) dans le menu Type de la section "Ease"
  • Passez l'intensité à 100
  • Prévisualisez avec Control / Test movie / in Flash Professionnal

Survol des outils et des objets

Un petit manuel des outils et objets IK

Survol des outils

Voici une liste des outils et leur fonctions.

L'outil os - Bones tool
  • Définir les os
L'outil de fixation? - Bind tool
  • Associer les point d'une enveloppe à un os.
L'outil de sélection - Select tool
  • Sélectionner les os ou ikNodes associés (formes) à manipuler, soit en les tirant, ALT-drag ou par le panneau de propriétés ou de transformation.
L'outil de sous-sélection - Subselection tool
  • Permet le déplacement des articulations des os (i.e. les allonger ou raccourcir et pivoter) à l'intérieur d'une armature forme. A noter : ceci ne fonctionnera pas avec les structures qui utilisent des symboles. Pour déplacer les os des armatures type symbole, utilisez l'outil transformation libre (Free transform)
  • Permet la modification des formes
L'outil stylo - pen tool
  • Une option pour ajouter ou supprimer les points de contrôle d'une forme
L'outil de transformation libre - Free Transform tool
  • Permet de déplacer les articulations (points de départ des os) d'une armature type symbole.
Le panneau transformation - Transform panel
  • Modifier la taille et la rotation des os et les ikNodes associés (formes).

Le calque d'armature

Une armature est définie dans un calque particulier, le calque d'armature. En cliquant sur le calque, vous pouvez modifier ses propriétés dans le panneau de propriétés :

  • Accélération: vous pouvez définir les paramètres d'accélération et de décélération des animations comme dans les autres animations d'interpolation.
  • Options:
    • Changer type: Authortime pour préciser l'animation dans le calque d'armature, runtime pour permettre à l'utilisateur de déplacer la structure IK. Dans ce dernier cas, vous ne pouvez pas contrôler l'animation. Vous ne pouvez définir que l'image 1.
    • Style: Permet de choisir la façon dont la structure d'os s'affiche. Affichez-la comme solide pour des objets simples et file pour les objets plus détaillés.
Les propriétés d'une armature Flash CS4

Flash déplace automatiquement tous les objets du calque de dessin au calque d'armature dès qu'un IK est créé. Alors, si vous voulez casser une armature, faites une copie sur un autre calque, ou encore mieux, sauvegardez vos dessins comme un symbole dans la bibliothèque (et cassez l'occurrence sur la scène).

De plus, les armatures doivent être créées avant d'être modifiables, i.e. vous pouvez modifier la pose initiale. Si vous avez plus qu'une pose, i.e. plus qu'une image, vous ne pouvez pas. Dans les autres images, vous ne pouvez changer et copier/coller que les poses. Ceci est normal, car une armature doit rester pareille pendant la durée de l'animation.

Il faut également savoir que lorsque vous voulez réutiliser une animation Flash dans laquelle il y a une armature, il faut trouver un autre subterfuge que le simple "copy frames - paste frames" car on ne peut pas copier une armature.

Manipuler l'ensemble d'une structure IK

  • Pour sélectionner toute une structure IK ou une forme, cliquez dessus.
  • Vous pouvez de suite modifier sa position dans le panneau de propriétés, déplaçant l'articulation parent à un nouveau point d'origine.
  • Autrement, vous pouvez sélectionner l'outil de transformation pour le déplacer.
  • Vous ne pouvez pas changer sa taille, alors pensez à la taille au départ.

Modifier les os

Il y a plusieurs manières de modifier les os créés. Vous pouvez les repositionner ainsi que leurs objets associés, déplacer un os à l'intérieur d'un objet, modifier la longueur d'un os, supprimer des os, et modifier les objets qui contiennent les os.

Modifiez les os avant d'ajouter les poses !

  • Pour sélectionner un os, utilisez l'outil de sélection. shift-sélection permet de sélectionner plusieurs os et double-click sélectionnera tous les os.
  • Pour supprimer un os, sélectionnez-le et supprimer. Ceci va supprimer ses enfants aussi.
  • Pour modifier les propriétés d'un ou plusieurs os, utilisez le panneau de paramètres.

Vous pouvez définir 3 types de paramètres pour chaque os ou série d'os.

  • La transposition des articulations est désactivée par défaut, i.e. la taille des membres reste pareille. Pour permettre d'allonger les os, modifiez les paramètres de l'articulation de l'enfant Joint: X translation et Joint: Y translation. De suite, vous pouvez définir jusqu'où l'on peut tirer l'articulation (direction x/y), donc le début de l'os. Lorsqu'on bouge l'articulation dans une direction x/y (normalement pas possible) l'os parent changera sa taille et son angle.
  • Pour limiter la rotation (360 degrés par défaut) modifiez les paramètres Joint: rotation. Les chiffres positifs indiquent une rotation dans le sens des aiguilles d'une montre.

Pour tourner un os, utiliser l'outil de sélection pour glisser l'os (ou la forme). Tous les os dans la même branche bougeront aussi. Mais si un point plus proche de l'articulation est sélectionné, les os bougeront moins.

Pour tourner un os sans bouger ses parents, glisser en appuyant sur le bouton shift en même temps.

Pour déplacer un os, sélectionnez l'articulation avec l'outil transformation libre (free transform). Autrement dit, il suffit de déplacer le point de rotation, le petit cercle blanc de l'ancien style d'animation de rotation. Vous pouvez aussi manipuler les objets avec le panneau de transformation. Si vous voulez tirer l'os du parent A, sélectionnez l'enfant B, etc.

Nous n'avons pas réussi à déplacer le bout des os avec l'outil de sous-sélection pour les armatures symbole, que les armatures à l'intérieur des structures IK

Les nœuds IK dans les armatures symbole

Les instances de symbole connecté aux os deviennent automatiquement des ikNodes. Lorsque vous cliquez sur une forme avec l'outil de sélection, vous verrez une appelation type ikNode_3 dans le panneau de propriétés.

  • Dans le panneau de transformaton vous pouvez changer la taille (x et y) et la rotaton d'une forme, ainsi vous pouvez re-aligner une forme avec un os suite à des manipulations imprévues.
  • Vous pouvez également appuyez sur ALT et glisser le ikNode (forme).

Dans les deux cas les dimensions de l'os seront modifiées.

Manipulation des structures IK forme

  • Modifier une structure IK forme avec l'outil de sous-sélection,
  • Cliquez sur le trait et modifiez la forme avec les contrôles de contour qui apparaîtront.
  • Pour ajouter un point de contrôle, cliquez sur le trait de contour
  • Pour supprimer un point, sélectionnez-le et appuyez sur delete (supprimer).
  • Pour agrandir un os, il faut simplement sélectionner l'os et ensuite tirer sur un des 2 bouts.

Conseil : La manipulation des contours (ajouter un point, modifier un contour) est parfois difficile et CS4 peut réagir de manière erratique. CS5 a l'air plus stable. L'outil stylo et ses sous-outils permettent un contrôle plus raffiné.

Relier les os au points d'une forme

Par défaut, les points de contrôle d'une forme sont reliés à l'os le plus proche. Vous pouvez modifier les associations avec le bind tool (l'outil de fixation) sous l'outil os dans le panneau d'outils).

Si vous cliquez sur un os (rouge quand il est sélectionné), tous ses points associés à un seul os seront visibles comme carrés jaunes. Les triangles jaunes indiquent les points reliés à plusieurs os.

  • Pour supprimer une association à un os faites CTRL-click sur le point de contrôle jaune.
  • Pour associer un point à un os, SHIFT-click sur un point de contrôle rouge non-associé.
  • Pour ajouter un point de contrôle, utilisez l'outil de sous-sélection.

Alternativement, si vous cliquez sur un point de contrôle (bleu si aucun os n'est sélectionné), il devient rouge et les os associés sont jaunes. A noter : la couleur rouge indique l'objet d'origine, la couleur jaune indique l'objet associé


Liens

(vérification des liens le 28 janvier 2012: tout ok!)

Définitions
Manuels fr
Manuel en
Vidéos