FLASH MX est un produit enregistr et distribu par la compagnie MACROMEDIA inc. Tous droits rservs.

Centre Le Goland 2003

Commission scolaire de la Rgion-de-Sherbrooke Andranne Reid, stagiaire en informatique

I. LES SYMBOLES
A) LES SYMBOLES ET LES OCCURRENCES 1) Crer un symbole 2) Modifier un symbole 3) Supprimer un symbole 4 4 6 7

II. LES INTERPOLATIONS

A) INTERPOLATION DE FORME B) INTERPOLATION DE MOUVEMENT C) INTERPOLATION DE MOUVEMENT AVEC GUIDE DE DPLACEMENT 7 10 11

III. LE TEXTE
A) TYPE DE CHAMP DE TEXTE B) CRER UN CHAMP DE TEXTE ET SPCIFIER SON TYPE 1) Crer un champ de texte statique 2) Crer un champ de texte dynamique 13 13 13 14 14 14 16

a) Crer la zone de texte dans Flash b) Crer un fichier texte c) Charger le texte dans Flash partir du fichier texte

IV. LES MASQUES

A) MASQUE FIXE B) MASQUE ANIM 18 19

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

V. LES BOUTONS
A) CRER UN BOUTON FIXE B) COMPORTEMENTS DU BOUTON C) CRER UN BOUTON CHANGEANT 21 23 23

VI. ACTIONSCRIPT
A) AJOUTER UNE ACTION UN CADRE ET UN BOUTON 1) Ajouter les actions Play et Stop. 2) Ajouter laction getURL pour ouvrir une page Web 24 24 27

VII. LES SONS

A) PRPARATION B) AJOUTER UNE MUSIQUE DAMBIANCE C) AJOUTER UN SON SPCIFIQUE 29 29 29

VIII. LES SPCIAUX

A) CRER UN MENU DROULANT B) CRER UN EFFET CLIGNOTANT DANS UN TEXTE C) ANIMER UN TEXTE 1) Ajouter des repres de transformation 31 35 36 37

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

A) Les symboles et les occurrences

Les occurrences sont des reprsentations sur la scne Les symboles sont des dun symbole et peuvent y apparatre plusieurs fois. reprsentations qui napparaissent quune seule fois dans la bibliothque.

Les occurrences sont indpendantes lune de lautre et peuvent tre modifies individuellement. Par contre, si le symbole est modifi, toutes les occurrences lies ce symbole le seront aussi.

1) Crer un symbole Il existe deux faons de crer des symboles : 1) Aprs avoir plac un lment sur 2) Avant avoir plac un lment sur la la scne scne

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

5 a) Dessinez un ovale sur la scne a) Choisissez le menu Insert, puis loption New symbol. laide de loutil .

b) Slectionnez loutil , puis double- b) Nommez votre symbole Rectangle et cliquez sur lovale que vous venez choisissez loption Graphic. Cliquez sur de dessiner de faon ce que OK. lintrieur et le contour soient slectionns.

Vous vous trouvez maintenant dans une deuxime fentre. c) Choisissez le menu Insert, puis c) Slectionnez loutil rectangle. loption Convert to symbol. et dessinez un

d) Nommez votre symbole Ovale et d) Cliquez ensuite sur Scene 1 pour revenir choisissez loption Graphic. Cliquez la scne principale. sur OK.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

6 e) Votre symbole apparat maintenant e) Votre symbole apparat maintenant dans la bibliothque. dans la bibliothque.

N .B Pour faire apparatre le panneau Bibliothque, choisissez le menu Window, puis loption Library ou appuyez sur Ctrl+L.

2) Modifier un symbole Il existe trois faons de modifier des symboles : 1) Placez le curseur de la souris sur le symbole modifier et cliquez sur le bouton droit de la souris. Choisissez ensuite loption Edit. 2) Vous pouvez aussi double-cliquer sur le symbole que vous dsirez modifier pour que la fentre de modification de symbole souvre. 3) Cliquez sur licne Edit symbol et choisissez le symbole modifier.

Pour revenir lanimation principale, cliquez sur Scene 1.

N .B Noubliez pas que la modification dun symbole entrane celle de toutes ses occurrences.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

7 3) Supprimer un symbole Pour supprimer un symbole, vous navez qu le slectionner dans la liste de symboles de la bibliothque, puis appuyer sur la touche Suppr.

Les interpolations sont des animations pour lesquelles on identifie les paramtres de dpart et de fin. Flash produit ensuite lanimation transitionnelle.

A) Interpolation de forme
Pour les interpolations de forme, il nest pas ncessaire de transformer les lments de lanimation en symbole. 1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom forme. 2) Cliquez sur le cadre 1 dans lchelle temporelle pour dterminer les paramtres de dpart de lanimation.

3) Choisissez loutil

, puis dessinez un cercle sur la scne, gauche.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

4) Choisissez loutil ainsi quune couleur dans le panneau des couleurs si vous dsirez modifier celle lintrieur de votre cercle. 5) Cliquez ensuite sur le cadre 25 de lchelle temporelle et insrez une image cl en appuyant sur la touche F6. Nous allons maintenant dterminer les paramtres de fin de lanimation. 6) Assurez-vous que le cadre 25 est toujours slectionn, puis appuyez sur la touche Suppr pour effacer votre cercle. 7) Avec loutil , dessinez un rectangle, droite, et remplissez-le dune couleur .

diffrente de votre cercle laide du pot de peinture

8) Cliquez sur nimporte quel cadre entre 1 et 20. Ouvrez le panneau des proprits en choisissant le menu Window, puis loption Properties. Dans le panneau des proprits, choisissez loption Shape du menu Tween.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

9 9) Choisissez maintenant le menu Control et loption Test Movie ou appuyez sur Ctrl+Enter pour visionner votre animation. Pour revenir en mode .fla, cliquez sur le x dans la barre GRISE en haut droite.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

10

B) Interpolation de mouvement
Pour les interpolations de mouvement, les lments de lanimation doivent tre des symboles. 1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom mouvement. 2) Cliquez sur le cadre 1 dans lchelle temporelle pour dterminer les paramtres de dpart de lanimation.

3) Dessinez un cercle laide de loutil et convertissez-le en symbole. Nommez-le Cercle, choisissez loption Graphic et cliquez sur OK. 4) Insrez ensuite une image cl au cadre 10 (en appuyant sur F6) et dplacez le cercle vers la droite. 5) Rptez lopration pour le cadre 20 mais cette fois, dplacez le cercle vers la gauche. 6) Rptez aussi pour le cadre 30 et dplacez le cercle beaucoup plus loin vers la droite. 7) Cliquez sur nimporte quel cadre entre 1 et 10. Dans le panneau des proprits, choisissez loption Motion du menu Tween.

8) Cliquez sur nimporte quel cadre entre 10 et 20 et rptez lopration. 9) Cliquez finalement sur un cadre entre 20 et 30 et rptez. 10) Choisissez ensuite le menu Control, puis loption Test Movie ou appuyez sur Ctrl+Enter.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

11

C) Interpolation de mouvement avec guide de dplacement

1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom guide. 2) Dessinez un cercle et convertissez-le en symbole. Nommez-le Cercle, choisissez loption Graphic et cliquez sur OK. 3) Nous allons dlimiter la longueur de lanimation. Dans lchelle temporelle, cliquez sur le cadre 25 et insrez-y une image vide (F5). 4) Nommez la premire couche Cercle en double-cliquant sur Layer 1. 5) Insrez maintenant une couche guide en choisissant le menu Insert, puis loption Motion Guide. 6) Slectionnez le premier cadre de la couche Guide :Cercle. 7) Slectionnez loutil crayon , puis loption dplacement qui sera suivie par votre cercle. et tracez une courbe de

8) Cliquez sur le + lintrieur du cercle et dplacez-le vers le dbut de votre ligne de dplacement laide de loutil guider. . Un petit cercle noir apparatra pour vous
Petit cercle guide Fiches dapprentissage Macromedia Flash MX Andranne Reid Centre Le Goland 2003

12 9) Slectionnez la couche Cercle et insrez une image cl au cadre 25. 10) Dplacez le cercle lextrme droite de votre ligne de dplacement en prenant daligner la fin de la ligne et le petit rond noir. 11) Cliquez sur un cadre entre 1 et 25 dans la couche Cercle. Dans le panneau des proprits, choisissez loption Motion du menu Tween. 12) Choisissez maintenant le menu Control, puis loption Test Movie ou appuyez sur Ctrl+Enter.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

13

A) Type de champ de texte

Dans Flash MX, il est possible de crer diffrents types de champ de texte. Le champ de texte statique (Static text field) contient du texte qui ne sera pas modifi. Le champ de texte dynamique (Dynamic text field) contient du texte qui peut tre mis jour, par exemple, la temprature et les rsultats sportifs. Le champ dentre de texte (Input text field) permet lutilisateur dentrer du texte et est utilis dans les formulaires ou les sondages, par exemple.

B) Crer un champ de texte et spcifier son type

1) Crer un champ de texte statique a) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom texte. b) Choisissez loutil texte . Pour spcifier le type de champ de texte, ouvrez le panneau des proprits (Ctrl+F3). Choisissez maintenant le type de champ de texte statique.

c) Cliquez maintenant sur la scne et tapez votre texte.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

14 2) Crer un champ de texte dynamique a) Crer la zone de texte dans Flash 1) Choisissez loutil texte . Dans le panneau des proprits, spcifiez le type de champ de texte dynamique.

2) Dessinez maintenant une zone de texte sur la scne. 3) Comme nous allons importer un texte dun fichier texte, nous allons dfinir une variable correspondant la zone. Dans le panneau des proprits (Ctrl+F3), crivez nom dans le champ var.

4) Rptez les tapes a) c) pour crer une autre zone de texte dynamique que vous placerez dessous la premire. Cette fois, crivez profession dans le champ var. b) Crer un fichier texte Nous allons maintenant crer deux fichiers texte, un correspondant la variable nom et lautre correspondant la variable profession.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

15 1) Cliquez sur Dmarrer, Utilitaires, Accessoires Windows puis Bloc-Notes.

2) crivez : nom=Je mappelle Justin Par 3) Enregistrez votre fichier texte au mme endroit que votre fichier Flash et nommez-le nom. 4) Choisissez ensuite le menu Fichier, puis loption Nouveau et crivez : profession=et je suis mdecin. 5) Enregistrez votre fichier au mme emplacement que lautre et nommez-le profession. 6) Retournez dans votre fichier Flash.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

16

c) Charger le texte dans Flash partir du fichier texte 1) Slectionnez le premier cadre de la premire couche, puis ouvrez le panneau des actions (F9). 2) Dans le panneau des actions, cliquez sur Actions, puis sur Browser/Network et double-cliquez sur loadVariables. Dans le champ URL, tapez nom.txt.

3) Rptez lopration mais cette fois, dans le champ URL, tapez profession.txt. 4) Nous allons maintenant ajouter un code permettant Flash de reconnatre les caractres accentus. Dans le panneau des actions, cliquez sur le triangle blanc en haut droite et choisissez loption Expert mode. la ligne 3, tapez : system.useCodepage=True; 5) Testez maintenant votre animation en appuyant sur Ctrl+Enter.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

17

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

A) Masque fixe
1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom masque. 2) Importez une image sur la scne en choisissant le menu File, puis loption Import. N.B. : Flash supporte les formats dimage suivants : .bmp, .emf, .gif, .jpg, .png, .wmf, .swf. Nommez ensuite cette couche Fond aprs avoir double-cliqu sur Layer 1.

3) Insrez ensuite une nouvelle couche en choisissant le menu Insert, puis loption Layer ou en appuyant sur licne Insert Layer.

4) Nommez cette couche Cercle en double-cliquant sur Layer 2. Dessinez ensuite un petit cercle sur limage laide de loutil .

5) Positionnez la souris sur la couche Cercle et cliquez sur le bouton droit. Choisissez alors loption Mask. Ainsi, seulement la partie de limage se trouvant sous le cercle est VISIBLE. 6) Vous pouvez tester votre animation en appuyant sur Ctrl+Enter, puis enregistrez.

19

B) Masque anim
1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom masqueanime. 2) Dans le panneau des proprits, choisissez le noir comme couleur darrire-plan (background). 3) Choisissez ensuite loutil texte et crivez un texte en blanc sur la scne. (Pour crire en blanc, modifiez la couleur du texte dans le panneau des proprits aprs avoir slectionn loutil texte). 4) Positionnez ensuite votre texte au centre en rduisant le zoom si ncessaire. Assurez-vous quil est slectionn et sparez-le en choisissant le menu Modify, puis loption Break Apart ou en appuyant sur Ctrl+B. 5) Nommez la couche Texte, puis insrez une image cl au cadre 40 en le slectionnant, puis en appuyant sur F6. Vous pouvez aussi choisir le menu Insert, puis loption Keyframe.

6) Insrez ensuite une nouvelle couche en cliquant sur licne temporelle. Nommez-la Masque.

au bas de lchelle

7) Assurez-vous que la nouvelle couche est toujours slectionne ainsi que son premier cadre et dessinez un cercle avec loutil par-dessus votre texte, au dbut.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

20

8) Slectionnez le cercle en double-cliquant dessus avec loutil le en choisissant le menu Modify, puis loption Group.

. Ensuite, groupez-

9) Insrez une image cl (F6) au cadre 40 de la couche Masque, et dplacez votre cercle la fin de votre texte laide de loutil .

10) Cliquez sur un des cadres entre 1 et 40 dans la couche Masque et, dans le panneau des proprits, choisissez loption Motion du menu Tween. 11) Placez la souris sur la couche Masque, cliquez sur le bouton droit de la souris et choisissez loption Mask. 12) Appuyez sur Ctrl+Enter pour visionner votre animation et enregistrez.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

21

A) Crer un bouton fixe

1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom bouton. 2) Vous allez crer un bouton de cet aspect : Il existe deux faons de crer des boutons : 1) Aprs avoir plac un lment sur la 2) Avant davoir plac un lment sur la scne scne a) Dessinez votre bouton laide des a) Choisissez le menu Insert, puis loption outils de dessin et du panneau des New Symbol. couleurs. b) Slectionnez-le laide de loutil dessinant un cadre autour. en

c) Choisissez maintenant le menu Insert, puis loption Convert to symbol.

d) Nommez le symbole bouton et b) Nommez le symbole choisissez loption Button. Cliquez sur choisissez loption Button. OK. OK.

bouton et Cliquez sur

e) Double-cliquez sur votre bouton pour entrer en mode dition de symbole.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

22 Vous vous trouvez maintenant dans la fentre ddition de symbole et lchelle temporelle ressemble ceci :

Si vous avez cr votre symbole avant davoir dessin votre bouton, dessinez-le maintenant en vous rfrant au modle la page prcdente. Pour retourner la scne principale, cliquez sur Scene 1.

Si vous avez cr votre symbole avant davoir plac un lment sur la scne, votre bouton se trouve maintenant dans la bibliothque (Ctrl+L). Vous pouvez maintenant glisser votre bouton sur la scne. Nous verrons comment lui ajouter une action plus loin. 3) Enregistrez votre travail.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

23

B) Comportements du bouton
Comme vous avez pu le remarquer, lchelle temporelle en mode dition de bouton est diffrente.

Voici la signification de chacun des cadres de lchelle temporelle : Up : Aspect du bouton lorsque quil nest pas cliqu et que le curseur de la souris ne le touche pas. Over : Aspect du bouton lorsque le curseur de la souris se trouve dessus. Down : Aspect du bouton lorsque le curseur de la souris se trouve dessus et que le bouton gauche est enfonc. Hit : Aspect du bouton lorsquil est cliqu ce qui nest pas facilement visible .

C) Crer un bouton changeant

1) Ouvrez votre fichier nomm bouton. Ouvrez la bibliothque (Ctrl+L), choisissez le symbole bouton et glissez-le sur la scne. 2) Entrez en mode dition de symbole en double-cliquant sur votre bouton. 3) Slectionnez le cadre Up et assurez-vous quil y a une image cl (F6). Laissez le bouton tel quel. 4) Slectionnez le cadre Over et insrez-y une image cl (F6). Choisissez ensuite loutil et cliquez sur la scne ct de votre bouton pour enlever la slection. Cliquez lintrieur de la petite ovale et changez sa couleur laide du pot de peinture .

5) Rptez lopration pour le cadre Down mais laissez le cadre Hit tel quel. 6) Visionnez lanimation en appuyant sur Ctrl+Enter, puis enregistrez.
Fiches dapprentissage Macromedia Flash MX Andranne Reid Centre Le Goland 2003

24

ActionScript est le langage de programmation de Flash. Il permet dajouter de linteractivit nos animations. Il est possible dajouter des actions diffrents lments dans Flash tels que les boutons, les animations (Movie Clip) et les cadres de lchelle temporelle.

A) Ajouter une action un cadre et un bouton

1) Ajouter les actions Play et Stop. a) Ouvrez un nouveau fichier et enregistrez-le en format .fla sous le nom jouerarreter. b) Crez un bouton rectangulaire qui affiche Jouer et un autre qui affiche Arrter. Pour ajouter du texte au bouton, choisissez loutil , cliquez sur la scne et crivez. Positionnez ensuite le texte au centre de votre bouton. laide de loutil , tracez un cadre autour dun bouton la fois pour les slectionner, puis les transformer en symbole.

c) Crez une animation de type interpolation de forme (cercle rectangle) du cadre 1 au cadre 100 et nommez la couche Animation. Rfrez-vous la fiche dapprentissage Interpolations, si ncessaire. d) Insrez une autre couche laide de licne et nommez-la Boutons. Insrez une image cl au premier cadre (F6) et glissez vos boutons de la bibliothque (Ctrl+L) au bas de la scne.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

25 e) Insrez maintenant des cadres remplis dans la couche Boutons laide de la touche F5, et ce, jusqu la fin de votre animation (cadre 100). f) Visionnez votre animation en appuyant sur Ctrl+Enter. Nous allons ajouter une action au cadre 1 qui empchera lanimation de jouer toute seule. g) Slectionnez le cadre 1 de la couche Animation. Ouvrez le panneau des actions en choisissant le menu Window, puis loption Actions. Dans le panneau, cliquez sur Actions, puis sur Movie Control. Double-cliquez sur Stop.

h) Visionnez votre animation en appuyant sur Ctrl+Enter. Rien ne se passe. Retournez en mode .fla en cliquant sur le x dans la barre GRISE en haut, droite. Nous allons maintenant ajouter une action au bouton Jouer qui fera dmarrer lanimation.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

26 i) Cliquez une fois sur le bouton Jouer pour le slectionner. Ouvrez le panneau des actions (F9) et vrifier que Actions-Button apparat dans la barre grise. Cliquez sur Actions, puis Movie Control et double-cliquez sur Play.

Ceci signifie quen relchant le bouton (release), lanimation jouera. N .B En cliquant sur la ligne daction 1 : on (release), il est possible de slectionner le moment o lanimation commencera. Release Outside : Lorsquon relche le bouton de la souris lextrieur du bouton lcran. Key Press :Lorsquon appuie sur la touche spcifie. Roll Over :Lorsque le curseur de la souris passe sur le bouton. Roll Out : Lorsque le curseur de la souris passe du bouton lextrieur. Press : Lorsquon appuie sur le bouton Drag Over : Lorsquun objet est amen augauche de la souris. dessus du bouton. Release : Lorsquon relche le bouton Drag Out : Lorsquun objet est amen du gauche de la souris. bouton lextrieur. j) Visionnez maintenant votre animation (Ctrl+Enter) et cliquez sur le bouton Jouer.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

27 k) Nous allons maintenant ajouter laction Stop au bouton Arrter. Cliquez sur le bouton Arrter pour le slectionner. Dans le panneau des proprits, cliquez sur Actions, puis Movie Control et double-cliquez sur Stop.

l) Visionnez votre animation et appuyez successivement sur vos deux boutons. Enregistrez votre travail. 2) Ajouter laction getURL pour ouvrir une page Web a) Ouvrez un nouveau fichier, nommez-le boutonweb et enregistrez-le en format .fla. b) Crez un bouton en vous rfrant la fiche dapprentissage Les boutons. c) Cliquez une fois sur votre bouton pour le slectionner et ouvrez le panneau des actions (F9). d) Cliquez sur Actions, puis Movie Control. Double-cliquez ensuite sur On.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

28 e) Cliquez sur Browser/Network, puis double-cliquez sur getURL.

f) Copiez ladresse suivante dans le http://www.csrs.qc.ca/goeland/proj/envolee/accueil.html

champ

URL :

g) Visionnez lanimation en appuyant sur Ctrl+Enter, puis enregistrez.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

29

A) Prparation
1) Nous pouvons intgrer des sons dans Flash partir de fichiers son que nous possdons. Si vous navez pas de fichiers son, vous pouvez en tlcharger sur Internet en vrifiant que les sons sont exempts de droits dauteurs. N.B. : Flash peut lire les types de fichier son suivant : .wav, .mp3, .aiff et .mid.

B) Ajouter une musique dambiance

1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom son. 2) Choisissez le menu File, puis loption Import. Retracez un fichier son que vous possdez, slectionnez-le et cliquez sur Ouvrir. 3) Ouvrez la bibliothque (Ctrl+L). Slectionnez votre son et glissez-le sur la scne. 4) Slectionnez le cadre 1 de la premire couche. Dans le panneau des proprits, crivez 999 dans le champ Loop.

Ceci signifie que le son pourra rejouer 999 fois. 5) Testez votre animation en appuyant sur (Ctrl+Enter).

C) Ajouter un son spcifique

Nous allons maintenant ajouter un son un bouton. a) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom sonbouton. b) Crez un bouton en vous rfrant la fiche dapprentissage Les boutons.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

30 c) Choisissez le menu File, puis loption Import. Slectionnez un fichier son que vous possdez et cliquez sur Ouvrir. d) Double-cliquez sur votre bouton pour entrer en mode dition de symbole. Slectionnez ensuite le cadre Over et insrez une image cl (F6). e) Cliquez une fois sur la scne lextrieur du bouton. Slectionnez ensuite loutil et changez la couleur de votre bouton. f) Dans le panneau des proprits, choisissez le son import du menu Sound. Vrifiez que loption Event est slectionne dans le menu Sync.

g) Testez votre animation (Ctrl+Enter). N.B. : Notez quil est possible dintgrer une musique dambiance ainsi quun son spcifique dans le mme fichier .fla.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

31

A) Crer un menu droulant

1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom menu. 2) Choisissez le menu Insert, puis loption New Symbol. choisissez loption Button. 3) Choisissez loutil et dessinez un rectangle sur la scne. Nommez-le Bouton et

4) Insrez une image cl (F6) au cadre Over et changez la couleur de votre rectangle laide de loutil .

5) Revenez sur la scne en cliquant sur Scene 1.

6) Ouvrez la bibliothque (Ctrl+L), cliquez sur le symbole menu et glissez le bouton sur la scne.

. Choisissez le menu Insert, puis 7) Slectionnez le bouton laide de loutil loption Convert to symbol. Nommez le symbole Menu et choisissez loption Movie Clip. 8) Double-cliquez sur le bouton pour entrer en mode dition de symbole. Vous allez maintenant diter le symbole Menu et non Bouton.
Fiches dapprentissage Macromedia Flash MX Andranne Reid Centre Le Goland 2003

32 9) Slectionnez le cadre 1. Dans le panneau des actions (F9), vrifiez que Actions Frame apparat dans la barre grise. Cliquez ensuite sur Actions, puis Movie Control et doucle-cliquez sur Stop.

10) Cliquez sur le bouton et, dans le panneau des actions, vrifiez que Actions Button apparat dans la barre grise. Double-cliquez sur On, puis choisissez loption Press et vrifiez que seulement celle-ci est slectionne.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

33 11) Double-cliquez ensuite sur goto. Slectionnez loption Go to and Stop et inscrivez 2 dans le champ Frame.

Les deux lignes de ActionScript signifient que lorsque lon clique sur le bouton, lanimation avance au cadre 2 et sarrte. 12) Slectionnez loutil texte , crivez Ordinateur sur le bouton et centrez le mot.

13) Insrez une image cl (F6) au cadre 2. Copiez le bouton trois fois en appuyant sur Ctrl+D. Placez les boutons de cette faon et crivez-y le mme texte :

14) Vrifiez que le cadre 2 est bien slectionn. Cliquez une fois sur la scne, puis sur le bouton Ordinateur. Dans le panneau des actions, rptez les tapes 9 et 10 mais inscrivez 1 dans le champ Frame. Ceci signifie que si lon clique sur le bouton, lanimation retourne au cadre 1 et sarrte donc, le menu se ferme.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

34 15) Insrez une image cl (F6) au cadre 3. Copiez deux autres boutons (Ctrl-D), rtrcissez-les et crivez le texte comme ceci (modifiez les paramtres du texte dans le panneau des proprits):

16) Slectionnez le cadre 2. Cliquez sur le bouton Tour. Dans le panneau des actions, choisissez Actions, puis Movie Control. Si des actions sont dj inscrites, effacezles en cliquant sur le -.

17) Dans le panneau des actions, rptez les tapes 9 et 10 mais inscrivez 3 dans le champ Frame. 18) Vous avez cr un menu! Appuyez sur Ctrl+Enter pour le visionner.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

35

B) Crer un effet clignotant dans un texte

1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom textecligno. 2) Choisissez loutil texte Police : ARIAL Grosseur : 48 Couleur : noir 3) Cliquez une fois sur la scne et crivez votre prnom. 4) Choisissez loutil . Nommez-le Prenom et choisissez . Dans le panneau des proprits (Ctrl+F3), choisissez :

5) Convertissez votre prnom en symbole (F8). loption Graphic.

6) Insrez une image cl (F6) au cadre 20 et une autre au cadre 10. 7) Cliquez maintenant sur votre prnom et dans le panneau des proprits, choisissez loption Tint du menu Color. crivez 255 dans le premier champ de RGB et vrifiez que le pourcentage est 100%.

8) Slectionnez nimporte quel cadre entre 1 et 10. Dans le panneau des proprits, choisissez loption Motion du menu Tween. 9) Rptez lopration pour un des cadres entre 10 et 20. 10) Appuyez sur Ctrl+Enter pour visionner lanimation, puis enregistrez.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

36

C) Animer un texte
1) Ouvrez un nouveau fichier et enregistrez-le en format .fla, sous le nom texteanime. 2) Choisissez loutil texte Police : ARIAL Grosseur : 48 Couleur : noir 3) Cliquez une fois sur la scne et crivez ABC. 4) Choisissez loutil . . Dans le panneau des proprits (Ctrl+F3), choisissez :

5) Choisissez le menu Modify, puis loption Break Apart pour sparer les lettres. 6) Choisissez le menu Modify, puis loption Distribute to layers pour crer une couche pour chaque lettre. 7) Cliquez sur le A pour quun cadre bleu apparaisse autour. Choisissez le menu Modify, puis loption Break Apart. 8) Rptez lopration pour chaque lettre. 9) Insrez une image cl (F6) aux cadres 5, 20 et 25 de chacune des couches. 10) Slectionnez le cadre 5 de la couche A. Cliquez sur le A sur la scne et vrifiez les coordonnes de X et de Y dans le panneau des proprits et notez-les. 11) Slectionnez le cadre 20 et supprimez le A en appuyant sur la touche Suppr. 12) Choisissez loutil texte , cliquez une fois sur la scne et crivez la lettre D.

13) Choisissez le menu Modify, puis loption Break Apart. 14) Dans le panneau des proprits, inscrivez les coordonnes du A dans les cases appropries en appuyant sur Enter aprs chaque entre. 15) Slectionnez nimporte quel cadre entre 5 et 20 de la couche A. Dans le panneau des proprits, choisissez loption Shape du menu Tween.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

37 Nous allons rpter les oprations 10 15 pour les deux autres lettres. Remplacez dabord tous les A par des B dans les 5 tapes et le D par un E. Ensuite, remplacez les A par des C et le D par un F. 16) Lorsque vous avez termin, appuyez sur Ctrl+Enter pour visionner lanimation. 1) Ajouter des repres de transformation a) Slectionnez le cadre 5 de la couche A. Choisissez le menu Modify, loption Shape, puis Add Shape Hint. Placez le cercle rouge comme sur limage : N.B. Assurez-vous de voir un + apparatre lorsque vous tes au-dessus du repre avant de le dplacer. Sinon vous dplacerez la lettre alors que lon a pris soin de bien la positionner.

b) Vrifiez que le cadre 5 est toujours slectionn et rpter lopration. Cette fois, placez le petit cercle comme ceci :

c) Slectionnez maintenant le cadre 20 de la couche A et placez les petits cercles aux mmes endroits que sur le A.

d) Rptez les tapes ci-dessus pour les autres lettres, puis visionnez lanimation (Ctrl+Enter). Dplacez les repres si ncessaire et enregistrez.

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003

38

Fiches dapprentissage Macromedia Flash MX

Andranne Reid Centre Le Goland 2003