La programmation de squelettes

Introduction

Un squelette est une structure hiérarchique qui relie, avec un lien de parenté, différents symboles de la scène ou différentes parties d’une même forme graphique continue. En déployant l’ossature du squelette, les symboles ou les parties de la forme graphique suivent la progression du mouvement de la structure qui le compose. Pour en programmer l’animation, nous utilisons la classe ik (inverse kinematic en anglais, pour cinématique inverse). Cette classe, à ce jour, ne permet pas de réaliser directement un squelette en programmation, mais uniquement, de l’animer. Les exemples proposés possèdent donc déjà un squelette, mais nous aborderons également la manière de construire cet objet manuellement pour la programmation. Une structure articulée autour d’un squelette permet, entre autre, de reconstituer l’ossature d’un personnage et de l’animer. Elle permet aussi de distribuer les contenus d’un site sous la forme de dispositifs hiérarchisés, comme un menu ou une arborescence. Mais, si cette armature est associée à une forme graphique, cela nous donne aussi accès à des interpolations de forme accessibles en programmation. Dans ce chapitre, nous réalisons dans un premier temps une animation mécanique d’un droïde dont les mouvements réagissent à la position du pointeur. Nous abordons ensuite l’animation de squelettes de formes organiques avec des formes graphiques vectorielles, pour animer, par exemple, le mouvement d’un végétal selon la position d’un objet animé (une abeille). Nous présentons ensuite comment gérer une animation programmée en mode interactif, afin que l’utilisateur puisse lui-même modifier le positionnement du squelette en déplaçant chaque segment de la structure manuellement. Les squelettes, lorsqu’ils sont déployés dans des SWF imbriqués, ne s’exécutent plus. Nous présentons donc aussi une solution pour l’importation de squelettes en mode Exécution, à l’intérieur de documents Flash imbriqués.

Programmer un mouvement mécanique

L’animation de squelettes à partir de symboles permet de mettre en mouvement des structures mécaniques qui font s’articuler des objets entre eux, et où aucun objet ne se mélange jamais aux autres. Ce type de structure à base de symboles convient à l’animation de robots, de cycles de marche mécaniques, de grues ou de systèmes de navigation, entre autres. Dans cet exemple, un squelette est déjà en place dans le scénario. Il représente le corps d’un droïde et se compose de 15 symboles chacun relié à l’autre par un segment, IKBone (voir Figure 4.1). Chaque segment possède deux extrémités de jointure ou liaisons (IKJoint) placées respectivement en tête (headJoint) et en queue (tailJoint). C’est à partir de ces axes de rotation et de placement que nous déterminons les mouvements à travers des interpolations cinématiques (IKMover). La spécificité de ces interpolations est de répercuter sur chaque symbole faisant partie de la hiérarchie, de nouvelles valeurs de positionnement, selon les contraintes de mouvement définies dans l’ossature lors de sa construction. L’ensemble du squelette est, quant à lui, inclus dans une armature générale (IKArmature) dont on peut déterminer le mode d’affichage avec une méthode (IKManager) et l’afficher, soit pour l’animation, soit pour l’exécution. Heure de création et exécution. La terminologie des modes d’affichage des squelettes peut surprendre. Nous observons en effet, dans l’Inspecteur de propriétés, les deux options Heure de création et Exécution littéralement traduites des termes anglais AuthorTime et RunTime. Comprenez, en ces termes, Gestion de l’animation dans l’interface auteur (AuthorTime, ou Heure de création) d’une part et Gestion de l’animation à la publication (RunTime, ou Exécution) d’autre part. Nous devrions ainsi plutôt parler de l’option « Animation » pour le premier et d’ »Exécution » pour le second. Exemples > ch4_ProgrammationDeSquelettes_1.fla Le document que nous utilisons présente la structure suivante : dans la scène, au-dessus du calque fond_mc, apparaît un calque nommé squelette_Droide (voir Figure 4.2). Chaque symbole possède un nom d’occurrence qui définit clairement la partie du corps à laquelle il se rattache et le désigne en tant qu’objet structurel d’un squelette (ikNode_bassin, ikNode_torax, ikNode_cou, ikNode_brasD, ikNode_avantBrasD, ikNode_mainD, etc.). De même, chaque segment qui relie ces symboles entre eux possède son propre nom d’occurrence qui identifie la partie de l’ossature à laquelle il est rattaché et le désigne en tant qu’objet structurel de liaison (ikBone_colonneBas, ikBone_colonneHaut, ikBone_epauleD,  ikBone_humerusD, ikBone_cubitusD, etc.). À travers ces identifiants, nous distinguons bien les symboles (Nodes) de leurs jonctions (Bones). Le squelette, lui, possède également son propre nom d’occurrence Squelette_Droide. Dans le calque nommé actions, nous pouvons lire le code suivant : //————————— initialisation import fl.ik.*; //————————— actions // définition du squelette IKManager.setStage(stage); var squelette:IKArmature=IKManager.getArmatureByName(« Squelette_Droide »); ➥ squelette.registerElements(stage); var segment_colonneBas:IKJoint=squelette.rootJoint.getChildAt(0); var segment_colonneHaut:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0); var segment_epauleD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0). ➥ getChildAt(0); var segment_humerusD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0). ➥ getChildAt(0).getChildAt(0); var segment_cubitusD:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0). ➥ getChildAt(0).getChildAt(0).getChildAt(0); var segment_epauleG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0). ➥ getChildAt(1); var segment_humerusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0). ➥ getChildAt(1).getChildAt(0); var segment_cubitusG:IKJoint=squelette.rootJoint.getChildAt(0).getChildAt(0). ➥ getChildAt(1).getChildAt(0).getChildAt(0); var segment_illiaqueG:IKJoint=squelette.rootJoint.getChildAt(1); var segment_femurG:IKJoint=squelette.rootJoint.getChildAt(1).getChildAt(0); var segment_tibiaG:IKJoint=squelette.rootJoint.getChildAt(1).getChildAt(0). ➥ getChildAt(0); var segment_illiaqueD:IKJoint=squelette.rootJoint.getChildAt(2); var segment_femurD:IKJoint=squelette.rootJoint.getChildAt(2).getChildAt(0); var segment_tibiaD:IKJoint=squelette.rootJoint.getChildAt(2).getChildAt(0). ➥ getChildAt(0); trace(squelette.rootJoint.getChildAt(0).getChildAt(0).name) // animation du squelette var mouvement1:IKMover= new ➥ IKMover(segment_humerusD,segment_humerusD.position); Figure 4.2 Aperçu du scénario de la scène principale. LivreActionScript.book Page 79 Vendredi, 15. janvier 2010 12:34 12 80 ACTIONSCRIPT 3 ET MOTION DESIGN stage.addEventListener(Event.ENTER_FRAME, activerMouvement1); function activerMouvement1(evt:Event) { var arrivee:Point=new Point(mouseX,mouseY); mouvement1.moveTo(arrivee); } Le langage

Construire un squelette pour la programmation

Avant de programmer l’animation d’un squelette, il convient de s’assurer qu’il est préalablement bien structuré. Tout d’abord, nous utilisons la classe ik qui permet de déplacer les têtes de chaque segment. Il faut donc bien comprendre où se positionnent ces têtes et comment les placer judicieusement pour garantir la cohérence de l’animation. Pour construire une armature pour la programmation, procédez comme suit : 1. Placez un certain nombre de symboles de type MovieClip sur un même calque. 2. Repositionnez éventuellement les centres de transformation de chaque symbole (grâce au petit rond blanc que l’on peut déplacer avec l’outil de transformation libre). C’est en effet sur ces centres que les segments seront magnétisés et c’est leur emplacement qui détermine la cohérence de l’animation. Pour visualiser et déplacer un centre de transformation, utilisez l’outil de transformation ou activez le raccourci Q, puis glisser-déposez le petit cercle blanc à l’emplacement souhaité. Puis, réactivez l’outil de sélection en appuyant sur la touche V. Pour faciliter le positionnement des centres, pensez à désactiver au besoin les options d’accrochage du menu Affichage. 3. Si les symboles qui composent votre sujet à animer reposent sur des images bitmap (PSD, PNG, JPEG, Gif), activez le lissage des bitmaps pour éviter l’apparition du crénelage lorsque les symboles pivoteront (voir Chapitre 11). 4. Placez les segments sur les symboles. Dans la barre d’outils, utilisez l’outil Segment, en forme d’os, ou le raccourci X. Puis, cliquez sur le centre de transformation du symbole père, glissez et relâchez le bouton de la souris sur le centre de transformation du symbole enfant. 5. Reproduisez la manipulation autant de fois que vous possédez de symboles à relier entre eux, en partant toujours de l’extrémité située en queue d’un segment, puis poursuivez la hiérarchie vers les autres symboles. 6. Ajoutez un nom d’occurrence pour chaque objet créé. Pour cela, cliquez sur les segments un à un, sur les têtes de segments une à une, et sur le calque du squelette lui-même, pour leur attribuer à tous des noms d’occurrence distinctifs. Flash en propose par défaut (IkNode_1 pour les têtes de segment, IkBoneName1 pour les segments et Squelette_1 pour le calque du squelette). Vous pouvez conserver ces noms ou les adapter à votre perception. 7. Activez ou non les contraintes de mouvement et de rotation. Pour ce faire, sélectionnez chaque segment avec l’outil de sélection (flèche noire ou raccourci V), et depuis l’Inspecteur de propriétés, activez les différentes options de liaison (rotation, translationX et translationY). Attention, les valeurs indiquent une rotation relative. Pour faciliter les manipulations, orientez chaque symbole sur l’axe médian de l’espace de rotation que vous souhaitez lui réserver. En activant l’option de rotation, Flash distribue automatiquement une zone de 45˚ (paramétrable) de part et d’autre de la position courante de l’objet. 8. Le squelette doit être activé pour le mode Exécution. Pour cela, cliquez sur le calque du squelette. Puis, dans l’Inspecteur de propriétés, dans le menu Type de la catégorie Options, sélectionnez Exécution