Cours Flash Chapitre 4 : Guide de Mouvement et Masque Rappel : les fichiers fla et swf sont dans le fichier «4_Guide de mouvement et masque.zip». SOMMAIRE 1 OBJECTIFS DU CHAPITRE... 1 2 INTRODUCTION... 2 3 LES GUIDES DE MOUVEMENT... 3 3.1 INTERET DES GUIDES DE MOUVEMENT... 3 3.2 CREER ET UTILISER UN GUIDE DE MOUVEMENT... 3 3.3 EXERCICE : AMELIORATION DU MINI SYSTEME SOLAIRE... 5 4 LES MASQUES... 6 4.1 CREATION DE MASQUE... 6 4.2 EXERCICE : MASQUE DYNAMIQUE EN CROIX... 7 4.3 EXERCICE : AMELIORER ENCORE LE SYSTEME SOLAIRE... 7 1 Objectifs du chapitre Dans ce chapitre, vous apprendrez : ce qu est un guide de mouvement créer une interpolation de mouvement basée sur un guide de mouvement ce qu est un masque créer des animations avec des masques simples et animés
2 Introduction Dans ce chapitre, nous allons aborder la notion de guide de mouvement et de masque. Ces deux notions sont totalement indépendantes. Vous pouvez donc commencer par l une ou par l autre. Ces deux notions abordent des subtilités graphiques non primordiales à Flash, mais qui, bien maîtrisées, donnent des résultats plus proches de la réalité en ce qui concerne les mouvements. Ce réalisme peut parfois peser lourd dans la décision du client quand vous lui présentez une maquette pensez y pour convaincre vos clients plus tard Flash : Guide de mouvement et Masque Page 2 sur 7
3 Les guides de mouvement 3.1 Intérêt des guides de mouvement Commençons par regarder ce que donne une interpolation de mouvement sans guide de mouvement. Pour cela, ouvrez «guide de mouvement absent.fla» et jouez l animation Vous constaterez que, malgré beaucoup d images clés présentant la voiture dans la bonne direction par rapport à son déplacement supposé, le réalisme de la trajectoire de la voiture est loin d être correct. Ceci est dû au fait que les interpolations de mouvement sont toujours linéaires entre deux images clés. Nous allons voir comment faire beaucoup plus réaliste avec seulement deux images clés! Ouvrez «guide de mouvement final.fla» et jouez l animation. L animation est beaucoup réaliste que la précédente, non? Pour voir où est la solution, rendez visible le calque «Guide» en cliquant sur la croix rouge (cf. Figure 1). Vous voyez alors apparaître le chemin que suit la voiture le long de son interpolation de mouvement. Si vous regardez les propriétés de l interpolation, vous remarquerez que la case «orienter vers la trajectoire» est cochée. Faites rejouer l animation après avoir décoché la case ; vous comprendrez immédiatement l intérêt de la laisser cochée dans ce cas présent! un calque guide de mouvement Figure 1 : un calque «guide de mouvement» 3.2 Créer et utiliser un guide de mouvement Nous allons voir maintenant comment créer et utiliser un guide de mouvement. Pour cela : supprimez le calque «guide» en cliquant dessus puis sur l icône «poubelle» sous les calques (cf. Figure 2). Vous obtenez alors une interpolation linéaire simple qui conduit la voiture en ligne droite de sa position initiale à droite à sa position finale à gauche en faisant un peu tourner la voiture sur elle même si vous avez coché la case «orienter vers la trajectoire». Note : le fait qu il y ait ou non une interpolation n a aucune importance pour la création du guide. Si l interpolation n existe pas, on peut tout à fait la créer après avoir créé le guide de mouvement. après avoir sélectionné le calque «voiture», créez un guide de mouvement en cliquant sur l icône associée (cf. Figure 2). Vous obtenez alors un scénario similaire à celui de la Figure 1, mis à part que le calque «Guide» est vide. Notes : 1. par défaut, le calque sélectionné est automatiquement associé au guide créé. Cela est visible par l indentation du calque. Vous pouvez associer d autres calques à ce guide par drag&drop, ou bien encore par un clic droit sur le calque qui vous intéresse puis propriétés>guidé. 2. vous pouvez créer plusieurs guides de mouvement par scénario. Flash : Guide de mouvement et Masque Page 3 sur 7
3. vous ne pouvez pas avoir un calque qui soit à la fois «guidé» et «masqué» (cf. plus loin pour les masques). Cliquez ici pour créer un guide de mouvement Figure 2 : le scénario après la suppression du calque «guide» Une bonne habitude à prendre à cet instant est de verrouiller tous les calques sauf le guide ; ceci vous permet de tracer le guide sans risque de modifier un calque existant. Astuce : Le moyen le plus rapide de faire ceci est de faire un clic droit sur le nom du calque, puis de choisir verrouiller les autres. Tracez un chemin qui suit la route (cf. Figure 4), avec l outil crayon ou pinceau. La couleur n a aucune importance ; il faut simplement qu il n y ait pas d interruption dans le chemin tracé sinon la voiture ne saura pas le suivre. Vérifiez que l icône «accrocher aux objets» (icône en fer à cheval) en bas dans le panneau des outils est enfoncée. «Outil de sélection» activé «Accrocher aux objets» activé (bouton enfoncé) Figure 3 : icône Accrocher aux objets Placez vous sur la première image clé (voiture en haut à droite), et déplacez la voiture sur le début du chemin du guide en attrapant la voiture par son point d accroche 1 (cf. Figure 5). Quand vous approchez du guide, la voiture doit être «magnétisée» automatiquement. Orientez la voiture avec l outil transformation libre (en mode rotation) pour que la voiture soit dans le bon sens par rapport à la trajectoire voulue. Procédez de même avec la seconde image clé de la voiture et positionnez la voiture à la fin du chemin du guide, et dans le sens de sa trajectoire. Testez le résultat après avoir éventuellement fait/refait l interpolation de mouvement et coché la case «orienter vers la trajectoire». Le résultat devrait être celui que vous avez vu 1 Ceci, avec l activation de l accroche aux objets, est primordial pour que l interpolation fonctionne correctement. Par ailleurs, les points d accroche n existent que pour les symboles ; vous ne pouvez donc pas créer des animations à base de guide de mouvement avec de simples formes. En résumé, interpolation de forme avec les formes, et interpolation de mouvement avec les symboles. Flash : Guide de mouvement et Masque Page 4 sur 7
au début de ce cours, c'est à dire que la voiture suit correctement la route. Si la voiture ne suit pas la route, il y a de fortes chances que votre chemin ne soit pas continu. Dans ce cas, refaites le chemin, ou essayez de le lisser avec l outil «lisser» qui est sous le «fer à cheval» vu précédemment. Pour cela, faites au préalable un double clic sur votre chemin pour le sélectionner complètement. Figure 4 : le scénario et la scène après avoir tracé le guide point d accroche Figure 5 : point d accroche d un symbole pour les guides de mouvement 3.3 Exercice : amélioration du mini système solaire Reprenez le système solaire du chapitre précédent et essayez de faire déplacer le couple Terre Lune en suivant une belle orbite ovale autour du Soleil, ainsi que la Lune autour de la Terre. Vous trouverez une correction dans «système solaire avec guide de mouvement.fla». Il y a plusieurs astuces possibles pour faire suivre l orbite dans le bon sens. En avez vous trouvée une? Flash : Guide de mouvement et Masque Page 5 sur 7
4 Les Masques Un masque est en fait un calque «masque» ; c est donc une propriété que l on donne à un calque, de façon semblable aux calques «guide de mouvement». Un masque est utilisé pour créer un «trou» qui laisse apparaître le contenu d'un ou plusieurs calques situés en dessous. Un élément de masque peut être une forme remplie, un texte, une occurrence de symbole graphique ou un clip. Vous pouvez grouper plusieurs calques sous un calque de masque unique pour créer des effets élaborés. Attention : le concept de masque en Flash est faux ami. En effet, dans un masque Flash, on dessine la zone qui servira de zone d affichage et non de masquage pour les calques en dessous. Cette dénomination de masque a une origine informatique car derrière ce concept de masque on trouve des opérations binaires (sur des octets), ces opérations étant appelées «masquage» en informatique. Pour simplifier ce concept de masque, pensez au pochoir en peinture. Un pochoir contient des trous et la peinture appliquée sur le pochoir ne sera appliquée qu à travers ces trous. Avec les masques Flash, vous «dessinez les trous d un pochoir» dans le masque, et tout ce qui est associé au masque sera vu uniquement à travers ces trous. Remarque : un calque de masque ne peut contenir qu'un élément de masque. Il est impossible de placer un calque de masque dans un bouton, d'appliquer un masque à un autre masque, ou d appliquer un masque à un guide de mouvement. 4.1 Création de masque Pour créer un masque, il suffit d associer la propriété «masque» à un calque. Ceci se fait avec un clic droit sur le nom du masque, puis : cochez «masque», ou demandez «propriétés», cochez «masque» et validez. Comme pour les guides de mouvement, les masques ont une icône spécifique et les calques «masqués» sont indentés en dessous du masque. Vous pouvez également masquer plusieurs calques (avec des drag&drop) et créer plusieurs masques par scénario. Remarque : vous pouvez jouer l animation «ScriptableMask.swf» pour voir des exemples de masques dynamiques. Cette animation (et le fichier source associé) était livrée avec Flash MX. L intérêt de ce fichier est uniquement de vous montrer des animations avec des masques dynamiques. Si vous voulez vous «amuser» avec ActionScript plus tard, vous pourrez comparer cette version avec la version livrée avec Flash 8, mais sachez que nous ne regarderons pas du tout ce code dans le cours Flash. Voici deux exemples simples d utilisation de masques : Jouez l animation «masque avec texte final.swf». Regardez ensuite le fichier FLA «masque avec texte final.fla». Jouez l animation dans Flash (avec la touche ENTREE), et non pas en mode Shockwave (avec CTRL+ENTREE). Déverrouillez les deux masques pour voir ce qui se passe concrètement. Flash : Guide de mouvement et Masque Page 6 sur 7
Si vous demandez le menu contextuel du calque «masque» (cf. Figure 6), vous verrez que sa propriété «masque» est cochée. Ici, le masque est statique, et le texte est animé. Figure 6 : un calque Masque Procédez de même avec le fichier «masque dynamique final.swf» puis «masque dynamique final.fla» pour voir comment a été créé le masque. Vous remarquerez que cette fois ci, c est le masque qui bouge et le reste qui ne bouge pas (notez que les deux pourraient aussi bouger en même temps!) 4.2 Exercice : masque dynamique en croix Réalisez une animation similaire à celle présentée dans «masque final.swf». La solution est dans «masque final.fla», et fait appel au masque, mais aussi aux clips et aux interpolations de mouvement. Sur le côté gauche, vous voyez le résultat avec le masque activé, et sur le côté droit une simulation de masque inactivé (croix bleues qui tournent). 4.3 Exercice : améliorer encore le système solaire En utilisant les guides de mouvement et les masques, essayez de faire le système solaire encore plus «propre». Solution dans «système solaire avec masque.fla». Flash : Guide de mouvement et Masque Page 7 sur 7