MASTER 

IPM EAD 2007­2009 

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  OBJ ECTIFS 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
 MASTER IPM EAD 2007­2009  J.C. Tarby 

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 
 MASTER IPM EAD 2007­2009  J.C. Tarby 

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 
 MASTER IPM EAD 2007­2009  J.C. Tarby 

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 
 MASTER IPM EAD 2007­2009  J.C. Tarby 

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 
 MASTER IPM EAD 2007­2009  J.C. Tarby 

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 
 MASTER IPM EAD 2007­2009  J.C. Tarby 

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