Vous êtes sur la page 1sur 122

Apprendre utiliser Flash

Marques
Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware,
Authorware Star, Backstage, Bright Tiger, Clustercats, ColdFusion, Contribute, Design In Motion, Director, Dream Templates,
Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, Generator, HomeSite,
JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live
Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Flash, Macromedia M Logo and
Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with
Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, Roundtrip, Roundtrip
HTML, Shockwave, Sitespring, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be et Xtra sont des
marques dposes ou des marques commerciales de Macromedia, Inc. et peuvent tre dposes aux Etats-Unis et dans certains
pays, tats ou provinces. Les autres noms de produits, logos, graphiques, titres, mots ou phrases mentionns dans cette
publication peuvent tre des marques, des marques de service ou des noms de marque appartenant Macromedia, Inc. ou
dautres entits et peuvent tre dposs dans certains pays, tats ou provinces.
Autres marques mentionnes
Ce guide contient des liens conduisant des sites web qui ne sont pas sous le contrle de Macromedia, qui nest aucunement
responsable de leur contenu. Laccs ces sites se fait sous votre seule responsabilit. Macromedia mentionne ces liens pour
rfrence, ce qui nimplique pas son soutien, accord ou responsabilit quant au contenu des sites.
Technologie de compression et dcompression audio discours utilise sous licence de Nellymoser, Inc. (www.nellymoser.com).
Technologie de compression et dcompression vido Sorenson Spark utilise sous licence de
Sorenson Media, Inc.
Navigateur Opera Copyright 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits rservs.
Limite de garantie et de responsabilit Apple
APPLE COMPUTER, INC. NOFFRE AUCUNE GARANTIE, EXPRES OU IMPLICITE, CONCERNANT CE
LOGICIEL, SA CAPACITE A ETRE COMMERCIALISE OU A REPONDRE A UN BESOIN PARTICULIER.
LEXCLUSION DES GARANTIES IMPLICITES EST INTERDITE PAR CERTAINS PAYS, ETATS OU PROVINCES.
LEXCLUSION ENONCEE CI-DESSUS PEUT NE PAS SAPPLIQUER A VOTRE CAS PARTICULIER. CETTE
GARANTIE VOUS ASSURE DES DROITS SPECIFIQUES. DAUTRES DROITS VARIANT DUN PAYS A LAUTRE
PEUVENT EGALEMENT VOUS ETRE ACCORDES.
Copyright 2003 Macromedia, Inc. Tous droits rservs. La copie, photocopie, reproduction, traduction ou conversion
de ce manuel, sous quelque forme que ce soit, mcanique ou lectronique, est interdite sans une autorisation pralable
obtenue par crit auprs de Macromedia, Inc. Rfrence ZFL70M600F
Remerciements
Directeur : Erick Vera
Gestion de projet : Stephanie Gowin, Barbara Nelson
Rdaction : Jody Bleyle, Mary Burger, Kim Diezel, Stephanie Gowin, Dan Harris, Barbara Herbert, Barbara Nelson, Shirley
Ong, Tim Statler
Rdactrice en chef : Rosana Francescato
Rvision : Mary Ferguson, Mary Kraemer, Noreen Maher, Antonio Padial, Lisa Stanziano, Anne Szabla
Gestion de la production : Patrice ONeill
Conception du support et production : Adam Barnett, Christopher Basmajian, Aaron Begley, John Francis, Jeff Harmon
Localisation: Tim Hussey, Seungmin Lee, Masayo Noda, Simone Pux, Yuko Yagi, Florian de Joanns
Premire dition : Aot 2003
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
3
TABLE DES MATIERES
INTRODUCTION: Apprendre utiliser Macromedia Flash MX 2004 . . . . . . . . . . 9
Ressources supplmentaires pour apprendre utiliser Flash . . . . . . . . . . . . . . . . . . 11
CHAPITRE 1: Crer un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Parcourir linterface utilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Modifier larrire-plan et la taille de la scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Modifier laffichage de la scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Afficher le panneau Bibliothque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Ajouter des graphiques la scne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Ajouter de la vido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Afficher les proprits des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Ajouter des comportements de contrle de la vido. . . . . . . . . . . . . . . . . . . . . . . . 18
Utiliser lexplorateur danimations pour afficher la structure du document . . . . . . 19
Tester le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Consulter laide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
CHAPITRE 2: Crer du contenu Flash accessible . . . . . . . . . . . . . . . . . . . . . . . . 23
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Spcifier que le document doit tre accessible aux lecteurs dcran. . . . . . . . . . . . . 24
Fournir un titre de document et une description . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Attribuer un titre et une description aux occurrences. . . . . . . . . . . . . . . . . . . . . . . 25
Spcifier que les lecteurs dcran doivent ignorer des lments dans le document. . 25
Changer le texte statique en texte dynamique pour le rendre accessible . . . . . . . . . 26
Contrler lordre de tabulation et lordre de lecture . . . . . . . . . . . . . . . . . . . . . . . . 26
A propos du test de votre document avec les lecteurs dcran. . . . . . . . . . . . . . . . . 28
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4 Table des matires
CHAPITRE 3: Rdiger des scripts avec ActionScript . . . . . . . . . . . . . . . . . . . . . . 29
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Crer loccurrence dun symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Initialiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
A propos de la syntaxe ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Trouver la documentation de rfrence dActionScript. . . . . . . . . . . . . . . . . . . . . . 33
Ajouter des commentaires ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Rdiger une fonction pour un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Copier et modifier la fonction dun bouton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Vrifier la syntaxe et tester votre application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
CHAPITRE 4: Crer une application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Configurer l'espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Copier les entres et les champs de texte dynamiques . . . . . . . . . . . . . . . . . . . . . . 38
Nommer les champs de texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Ajouter et nommer un composant Button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Dclarer les variables et les valeurs pour les prix. . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Prciser les valeurs des champs de saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Rdiger une fonction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Rdiger un gestionnaire dvnement pour le composant. . . . . . . . . . . . . . . . . . . . 41
Tester votre application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
CHAPITRE 5: Utiliser les calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Slectionner un calque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Masquer et afficher des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Verrouiller un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Ajouter et nommer un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Modifier lordre des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Organiser les calques dans un dossier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ajouter un calque de masque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ajouter un calque de guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Supprimer un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
CHAPITRE 6: Crer une interface utilisateur avec les outils de mise en forme. . . 49
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Utiliser les guides pour aligner des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Modifier la taille de la scne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Redimensionner les objets en fonction de la taille de la scne. . . . . . . . . . . . . . . . . 51
Spcifier des paramtres d'alignement par accrochage . . . . . . . . . . . . . . . . . . . . . . 51
Aligner un objet laide des guides dalignement . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Aligner un objet laide du panneau Aligner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Accrocher des objets les uns aux autres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Table des matires 5
Aligner des objets laide de linspecteur des proprits . . . . . . . . . . . . . . . . . . . . . 53
Aligner des objets l'aide de la grille et des touches flches . . . . . . . . . . . . . . . . . 54
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
CHAPITRE 7: Dessiner dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Slectionner un outil Forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Slectionner les options de cration dun polygone . . . . . . . . . . . . . . . . . . . . . . . . 58
Dessiner un polygone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Faire pivoter la forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Utiliser la fonction de dcoupe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Transformer la forme du dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Copier des traits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Utiliser loutil Ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Slectionner et ajouter une autre couleur de remplissage . . . . . . . . . . . . . . . . . . . . 61
Grouper la forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Crer un logo laide de loutil Plume. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
CHAPITRE 8: Crer des symboles et des occurrences. . . . . . . . . . . . . . . . . . . . . 63
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
A propos de la cration de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Crer un symbole graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Dupliquer et modifier une occurrence de symbole. . . . . . . . . . . . . . . . . . . . . . . . . 65
Modifier un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Crer un symbole de clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Nommer loccurrence de clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Ajouter un effet au clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
CHAPITRE 9: Ajouter de lanimation et des lments de navigation
aux boutons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Crer un bouton partir dobjets groups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Attribuer un nom une occurrence de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Afficher la zone active d'un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Modifier la zone active dun bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Aligner des boutons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Crer une animation pour un tat de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Ajouter une action un bouton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Ajouter un lment de navigation un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Tester le fichier SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
6 Table des matires
CHAPITRE 10: Ajouter du texte statique, de saisie ou dynamique . . . . . . . . . . . . 77
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Crer un bloc de texte de taille variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Crer un bloc de texte de taille fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Modifier du texte et des attributs de police . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Slectionner des polices de priphrique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Ajouter un champ de saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Copier un champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Attribuer des noms doccurrence aux champs de texte . . . . . . . . . . . . . . . . . . . . . . 81
Crer un champ de texte dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Spcifier des options de format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Afficher le code ActionScript pour le champ de texte dynamique . . . . . . . . . . . . . 83
Tester le fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Vrifier lorthographe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
CHAPITRE 11: Crer une animation dans un scnario. . . . . . . . . . . . . . . . . . . . . . 85
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Crer une interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Crer une interpolation de forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Copier des images-cls dans une animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Modifier la vitesse de lanimation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Tester le fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
CHAPITRE 12: Crer une prsentation avec des crans
(Flash Professionnel uniquement) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Afficher la hirarchie des crans et leurs scnarios . . . . . . . . . . . . . . . . . . . . . . . . . 92
Afficher les proprits de lcran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Ajouter du contenu une diapositive de prsentation . . . . . . . . . . . . . . . . . . . . . . 93
Ajouter des comportements de navigation dcran aux boutons . . . . . . . . . . . . . . . 93
Ajouter et nommer une diapositive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Slectionner et dplacer des diapositives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Ajouter du contenu une nouvelle diapositive. . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Ajouter des comportements de transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Tester votre prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
CHAPITRE 13: Ajouter de linteractivit avec ActionScript. . . . . . . . . . . . . . . . . . 97
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Ajouter une scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Se dplacer entre les squences. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Contrler le document laide dune action stop() . . . . . . . . . . . . . . . . . . . . . . . . 99
Lier un bouton une scne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Ajouter des lments de navigation pour revenir la Squence 1 . . . . . . . . . . . . . 100
Table des matires 7
Lire un clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Utiliser un comportement pour lire un fichier MP3 . . . . . . . . . . . . . . . . . . . . . . 102
Tester votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
CHAPITRE 14: Crer un formulaire contenant une logique conditionnelle et
envoyer des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Ajouter un champ de saisie de texte pour collecter les donnes de formulaire . . . 106
Ajouter un bouton Envoyer au formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Ajouter un message derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Ajouter un message de confirmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Ajouter une action stop(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Ajouter des tiquettes dimages pour la navigation. . . . . . . . . . . . . . . . . . . . . . . . 109
Ajouter une logique conditionnelle pour le bouton Envoyer . . . . . . . . . . . . . . . . 109
Transmettre des donnes hors dun fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . 110
Rdiger une fonction pour le bouton Ressayer . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Tester votre fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
CHAPITRE 15: Travailler avec des objets et des classes laide
dActionScript 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Configurer lespace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
A propos des classes et des types dobjet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Crer un objet partir d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Crer une classe personnalise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Crer deux objets de la classe Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
A propos du redimensionnement des classes existantes . . . . . . . . . . . . . . . . . . . . 119
Etendre la classe MovieClip pour crer une nouvelle classe . . . . . . . . . . . . . . . . . 119
Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
8 Table des matires
9
INTRODUCTION
Apprendre utiliser Macromedia Flash MX 2004
Apprendre utiliser Flash
Macromedia Flash MX 2004 et Flash MX 2004 Professionnel vous offrent tous les outils
ncessaires pour crer et partager un contenu web riche et de puissantes applications. Que vous
souhaitiez crer des animations ou concevoir des applications de donnes, Flash a les outils
ncessaires pour vous permettre de produire les meilleurs rsultats et d'offrir la meilleure
exprience possible aux utilisateurs sur de multiples plate-formes et priphriques.
Les leons de ce manuel ont t conues pour vous prsenter Flash. Au cours des leons, vous
apprendrez la plupart des tches de base permettant de crer des applications Flash.
Remarque : Ce manuel n'explique pas en dtail toutes les fonctions de Macromedia Flash MX 2004.
Pour obtenir des informations dtailles sur l'utilisation de Flash, slectionnez l'aide de Flash (Aide >
Aide).
A propos des leons
Ce manuel comprend plusieurs leons dtailles conues pour vous enseigner les bases de Flash.
Nous vous recommandons d'tudier ces leons l'aide des fichiers d'exemple fournis. Le chemin
des fichiers d'exemple est indiqu dans chaque leon.
En effectuant ces leons pratiques, vous apprendrez utiliser Flash afin d'ajouter du texte, des
graphiques et des animations vos applications Flash. En outre, vous apprendrez personnaliser
votre application Flash au moyen des comportements et d'ActionScript.
Les leons sont destines aux concepteurs et dveloppeurs Flash dbutants et de niveau
intermdiaire qui souhaitent s'amliorer rapidement.
Chaque leon cible une fonction ou un sujet spcifique de Flash et dure entre 10 et 20 minutes,
selon votre exprience. Vous pouvez suivre les leons de ce manuel dans l'ordre ou commencer par
la leon ou la tche qui vous intresse.
Les leons Dmarrage rapide vous offrent la possibilit d'explorer l'espace de travail de Flash.
Dans ces leons, vous apprendrez crer un document Flash, crire du code ActionScript, utiliser
des comportements vido et de contrle de la vido ou ajouter un composant Flash.
10 Introduction : Apprendre utiliser Macromedia Flash MX 2004
Pour dmarrer
Si vous dcouvrez Flash, commencez par le chapitre Bien dmarrer avec Flash de l'aide (Aide >
Aide >Utilisation de Flash > Bien dmarrer avec Flash) pour vous familiariser avec Flash avant de
passer aux leons Flash.
Pour tudier, vous pouvez suivre les leons de ce manuel ou ouvrir les leons dans le panneau
Comment de l'aide de Flash (Aide > Comment). Bien que vous puissiez tudier les leons en
fonction de vos prfrences, il est conseill de les apprhender dans l'ordre dans lequel elles
apparaissent dans le panneau Comment.
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
Les lments des menus apparaissent au format : nom de menu > nom de l'lment de menu.
Les lments de sous-menu apparaissent au format : nom de menu > nom de sous-menu >
nom de l'lment de menu.
La police de code identifie la balise HTML et les attributs de nom ainsi que le texte littral
utilis dans les exemples.
La police de code en italique identifie les lments remplaables (parfois appels
mtasymboles) du code.
Le texte roman en gras identifie le texte que vous devez saisir.
Ressources supplmentaires pour apprendre utiliser Flash 11
Ressources supplmentaires pour apprendre utiliser Flash
Flash contient plusieurs supports qui vous aideront vous familiariser avec le programme et
crer rapidement vos propres applications Flash.
A propos des manuels lectroniques et des leons
Les manuels lectroniques suivants sont disponibles dans le panneau Aide (Aide > Aide) :
Bien dmarrer avec Flash offre une introduction pratique Flash.
Utilisation de Flash contient des informations compltes sur la manire de travailler avec loutil
de programmation Flash et dcrit les commandes, les fonctions et les lments de l'interface
utilisateur.
Utilisation des composants contient des informations sur l'ajout et la configuration des
composants dans un document Flash, ainsi que des informations sur la cration des
composants.
Le Guide de rfrence ActionScript offre une introduction conceptuelle aux langages et aux
documents ActionScript, toutes les actions, les mthodes et les proprits de l'API
ActionScript.
Les leons de ce manuel sont galement disponibles partir de l'onglet Comment du panneau
Aide, dans la section Manuel de prise en main rapide (Aide > Comment > Manuel de prise en
main rapide).
Utilisation du panneau Aide
Le panneau Aide peut tre actualis et vous permet d'accder des informations sur l'utilisation
de Flash.
Accs l'aide
Les onglets du panneau Aide (Aide et Comment) contiennent l'intgralit des informations
d'assistance aux utilisateurs fournies par l'application Flash.
Vous pouvez slectionner l'onglet Aide pour afficher des informations d'ordre gnral sur
l'aide.
Slectionnez l'onglet Comment pour afficher la liste des leons disponibles : d'une dure de 10
20 minutes, ces leons vous guident dans les nombreuses fonctions de Flash.
Pour accder l'aide et au sommaire :
1 Slectionnez Aide > Aide pour ouvrir le panneau Aide.
2 Si le sommaire n'est pas visible, cliquez sur le bouton Sommaire pour l'afficher.
La liste des guides disponibles s'affiche. L'onglet Aide est slectionn par dfaut.
3 Cliquez sur un livre pour l'ouvrir et afficher ses rubriques.
4 Cliquez sur une rubrique pour la slectionner.
L'onglet Comment contient des leons interactives rapides qui prsentent les fonctions
principales de Flash, en vous permettant de vous exercer sur des exemples concrets. Si vous
dcouvrez Flash ou si vous n'en avez utilis que quelques fonctions, commencez par l'onglet
Comment.
12 Introduction : Apprendre utiliser Macromedia Flash MX 2004
Pour dmarrer les leons :
1 Slectionnez Aide > Comment pour afficher l'onglet du panneau Aide.
Vous trouverez la liste des leons dans le sommaire.
2 Cliquez sur une rubrique de leon pour l'ouvrir.
Pour rechercher un mot ou une expression dans le panneau Aide :
1 Cliquez sur l'icne Rechercher dans la barre d'outils du panneau Aide.
2 Tapez un mot ou une phrase dans la zone de texte, puis cliquez sur Rechercher.
La liste des rubriques contenant le mot ou la phrase s'affiche.
Pour fermer le sommaire de l'aide :
Cliquez sur le X situ au-dessus du sommaire.
Remarque : Vous pouvez accder de nouveau au sommaire en cliquant sur le bouton Sommaire.
Pour imprimer une page de l'aide :
1 Cliquez sur le bouton Imprimer dans la barre d'outils du panneau Aide.
2 Dans la bote de dialogue Imprimer, slectionnez l'imprimante et les autres options
d'impression, puis cliquez sur Imprimer.
Mise jour du panneau Aide
La fonction Mettre jour vous permet d'actualiser votre systme d'aide en y ajoutant de nouveaux
documents ou les dernires modifications en date, y compris des procdures et des leons. Pour
savoir si de nouvelles informations sont disponibles, cliquez sur le bouton Mettre jour. Si l'une
des rubriques de l'aide est accompagne de la mention For the latest information about this
topic, click the Update button at the top of the Help tab , vous pouvez cliquer sur le bouton
Sommaire pour actualiser l'aide de Flash.
Pour mettre jour l'aide de Flash :
1 Vrifiez que vous tes connect Internet.
2 Cliquez sur le bouton Mettre jour dans la barre d'outils du panneau Aide et suivez les
instructions pour tlcharger le systme d'aide.
13
CHAPITRE 1
Crer un document
Vous allez maintenant dcouvrir toute la puissance de Macromedia Flash MX 2004 et de
Macromedia Flash MX Professionnel 2004. Dans quelques minutes, vous dcouvrirez comment
crer une exprience web irrsistible combinant vido, texte, graphiques et comportements de
contrle du contenu. Dans ce chapitre, vous allez dcouvrir lenvironnement auteur de Flash et
apprendre raliser les oprations suivantes :
Parcourir linterface utilisateur
Ancrer et dtacher des panneaux
Modifier larrire-plan et la taille de la scne
Modifier laffichage de la scne
Afficher votre bibliothque de documents
Ajouter des graphiques la scne
Ajouter de la vido
Afficher les proprits des objets
Ajouter des comportements de contrle de la vido
Utiliser lexplorateur danimations pour afficher la structure du document.
Tester le document
Consulter laide
Avant de commencer cette leon, nous vous recommandons de lire le guide Bien dmarrer avec
Flash afin de vous familiariser avec lespace de travail Flash. Pour accder au guide Bien dmarrer
avec Flash, choisissez Aide > Aide, puis cliquez sur le guide Bien dmarrer avec Flash dans le
sommaire de laide.
14 Chapitre 1 : Crer un document
Parcourir linterface utilisateur
Commencez par ouvrir le fichier FLA de dmarrage, que vous allez utiliser au cours de cette
leon. Chaque leon inclut un fichier de dmarrage et un fichier complt montrant laspect du
fichier FLA une fois les leons termines.
1 Pour ouvrir votre fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\QuickTasks\start_files et double-
cliquez sur document_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\
QuickTasks\start_files et double-cliquez sur document_start.fla.
Sur Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash
MX 2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur
document_start.fla.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers
de leon FLA, pour votre rfrence.
Le document souvre dans lenvironnement auteur de Flash. Le scnario du document
comprend dj deux calques. To learn more about layers, select Help > How Do I > Basic Flash
> Work with Layers.
Lun des calques est un calque de guide qui vous aide placer les objets sur la scne. Lautre
calque est un calque de contenu sur lequel vous placerez les objets composant votre document.
Remarque : Les calques de guide ne saffichent pas dans le contenu Flash que vous testez
ou publiez.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez enregistrez le document sous un nouveau
nom, dans le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Tout au long de cette leon, pensez enregistrer frquemment votre travail.
Parcourir linterface utilisateur 15
Slectionner des jeux de panneaux et organiser les panneaux
Le panneau Disposition dentranement organise votre espace de travail de faon faciliter le
droulement des leons. Vous utiliserez cette disposition au cours de toutes les leons que vous
allez suivre dans Flash.
Choisissez Fentre > Jeux de panneaux > Disposition dentranement.
Vous pouvez dplacer les panneaux et les redimensionner de la manire suivante :
Vous pouvez dtacher un panneau en cliquant sur le coin suprieur gauche de sa barre de
titre et en le dplaant sur lespace de travail.
Si le panneau saccroche une bordure, il est alors ancr ce nouvel emplacement (ou il
retrouve son emplacement dorigine si vous ly avez fait glisser). Sinon, le panneau est
dsancr.
Vous pouvez redimensionner un panneau dtach en faisant glisser son ct infrieur droit
afin de llargir.
Utiliser les outils pour crer du contenu Flash
Le rectangle blanc de la scne reprsente lendroit o vous pouvez disposer les objets tels vous
souhaitez les voir safficher dans votre fichier publi.
Remarque : Sous Windows, vous pouvez ouvrir plusieurs documents la fois et utiliser les onglets
des documents, situs au-dessus de la scne, pour naviguer dun fichier lautre.
La barre doutils, prs de la scne, offre toute une palette de commandes qui vous permettent de
crer du texte et des illustrations vectorielles. To learn more about toolbar tools, select Help >
How Do I > Basic Flash > Draw in Flash and Help > How Do I > Basic Flash > Add Static, Input,
and Dynamic Text.
1 Cliquez sur loutil Crayon dans la barre doutils. Cliquez sur la puce de couleur de trait dans la
zone Couleurs de la barre doutils, puis choisissez une couleur, lexception du blanc.
2 Cliquez sur la scne et dplacez-vous sans relcher le bouton de la souris, afin de dessiner
une ligne.
Vous venez de crer du contenu Flash. Une fois termin, votre document sera bien plus
impressionnant.
Annuler les actions
Flash vous permet dannuler toute une srie de modifications apportes votre document.
Vous allez annuler le contenu que vous venez de crer.
1 Pour voir comment procde la fonction Annuler, commencez par ouvrir le panneau Historique
(Fentre > Autres panneaux > Historique).
Loutil Crayon saffiche dans le panneau, lutilisation de cet outil tant la dernire action que
vous avez accomplie.
2 Effectuez lune des oprations suivantes :
Slectionnez Edition > Annuler Crayon Outil.
Appuyez sur Ctrl+Z (Windows) ou Commande+Z (Macintosh).
Votre dessin est effac de la scne. Le panneau Historique affiche loutil Crayon en gris,
indiquant ainsi que lannulation a t excute.
16 Chapitre 1 : Crer un document
Flash est dfini par dfaut de faon annuler 100 modifications en ordre dexcution inverse.
Vous pouvez modifier ce paramtre par dfaut dans les prfrences. Pour modifier vos
prfrences, consultez la section Dfinition des prfrences de Flash, dans le chapitre
Familiarisation avec lespace de travail du guide Bien dmarrer avec Flash de laide.
3 Pour fermer le panneau Historique, cliquez sur le menu doptions, dans le coin suprieur droit
du panneau, et choisissez Fermer le panneau.
Afficher le scnario.
Vous trouverez le scnario et les calques au-dessus de la scne. Vous pouvez crer et nommer des
calques, puis ajouter du contenu aux images afin dorganiser la manire dont votre contenu Flash
est lu, au fur et mesure que la tte de lecture parcourt les images.
Dplacez le pointeur de la souris sur la zone sparant la scne du scnario. Lorsque la poigne
de redimensionnement apparat, faites-la glisser lgrement vers le haut ou vers le bas pour
redimensionner le scnario.
La tte de lecture (ligne rouge) est sur limage 1 dans le scnario. Les images-cls sont signales
par de petits cercles dans les images, qui sont remplis, indiquant que les images renferment du
contenu. Vous pouvez ajouter une image-cl au document si vous voulez apporter une
modification au contenu Flash de limage.
Modifier larrire-plan et la taille de la scne
La scne permet dafficher un aperu du contenu Flash une fois que votre fichier sera publi.
Vous allez modifier la taille de la scne afin quelle puisse accueillir une illustration conue pour
une scne plus grande et vous allez ensuite modifier la couleur darrire-plan de la scne.
1 Dans la barre doutils, cliquez sur loutil de slection.
2 Cliquez nimporte o dans lespace de travail gris entourant la scne, ou dans larrire-plan de
la scne afin quaucun objet ne soit slectionn.
Linspecteur des proprits, situ sous la scne, affiche les proprits de lanimation lorsque
aucun objet nest slectionn.
3 Pour modifier la couleur darrire-plan de la scne, cliquez sur la puce de couleur darrire-plan
et slectionnez une nuance claire de gris, par exemple le gris avec la valeur hexadcimale
CCCCCC.
4 Pour modifier la taille de la scne, cliquez sur le bouton Taille dans linspecteur des proprits.
Dans la bote de dialogue Proprits du document, entrez la valeur 750 pour la largeur de la
scne puis cliquez sur OK.
La scne prend ainsi une largeur de 750 pixels.
Poigne de
redimensionnement
Tte de lecture
Image-cl
Ajouter des graphiques la scne 17
Modifier laffichage de la scne
Vous pouvez modifier laffichage de la scne sans toucher la taille relle de votre document.
1 Dans la zone Affichage de la scne, au-dessus du ct droit de la scne, saisissez 500 %. Appuyez
ensuite sur Entre ou sur Retour.
Laffichage de la scne passe 500 %.
2 Dans le menu contextuel Affichage de la scne auquel vous pouvez accder en cliquant sur le
contrle droite du champ de texte, choisissez 100 % pour afficher la scne dans des dimensions
correspondant la taille du contenu Flash publi.
Afficher le panneau Bibliothque
Le contenu Flash que vous importez ou qui reprsente un symbole est stock dans le panneau
Bibliothque. To learn more about symbols and instances, select Help > How Do I > Basic Flash
> Create Symbols and Instances.
Afin dafficher le panneau Bibliothque, slectionnez Fentre > Bibliothque.
Vous avez dj import des lments de la bibliothque et cr des symboles pour les objets que
vous allez utiliser dans cette leon.
Remarque : Flash contient aussi des bibliothques de boutons et de sons que vous pouvez utiliser
dans votre document. Pour afficher ces bibliothques, une fois cette leon termine, slectionnez
Fentre > Autres panneaux > Bibliothques communes et slectionnez la bibliothque Boutons ou
Sons.
Ajouter des graphiques la scne
Pour ajouter des lments de la bibliothque votre document, vrifiez que vous tes en train
dajouter lobjet au bon calque, puis faites glisser llment depuis la bibliothque jusqu la scne.
1 Dans le scnario, cliquez sur le nom du calque de contenu pour le slectionner. Slectionnez
loutil de slection, faites glisser le clip Titre contenant une image bitmap et un graphique
vectoriel partir du panneau de la bibliothque vers la scne puis alignez-le par rapport au repre
du titre.
Dans Flash, vous pouvez travailler la fois avec des images bitmap (graphiques en pixels) et
avec des illustrations vectorielles (reprsentations mathmatiques). Pour en savoir plus,
consultez A propos des graphiques vectoriels et bitmap dans le guide Utilisation de Flash de
laide.
2 Slectionnez le calque de contenu, faites glisser le symbole de texte partir du panneau de la
bibliothque vers la scne, puis alignez-le avec le texte Trio ZX2004 dj en place. Utilisez les
touches flches de votre clavier pour ajuster le texte.
Le texte de titre est en fait un graphique cr partir de texte.
18 Chapitre 1 : Crer un document
Ajouter de la vido
Le panneau de la bibliothque comprend un fichier vido Flash import (FLV). Ajoutez la vido
votre document et Flash ajoutera les images ncessaires pour la lire.
Pour en savoir plus sur lutilisation de la vido dans Flash, consultez Utilisation de la vido
dans le manuel Utilisation de Flash de laide.
1 Vrifiez que le calque de contenu est toujours slectionn dans le scnario. A partir du panneau
de la bibliothque, faites glisser la vido ggb_move_for_trio_new vers le repre vido gris fonc
de la scne.
2 Une bote de dialogue saffiche et indique que Flash va ajouter 138 images au scnario pour la
vido. Cliquez sur Oui.
3 Faites glisser la tte de lecture sur le scnario afin dafficher la vido.
Afficher les proprits des objets
Lorsque vous ajoutez un objet la scne, vous pouvez le slectionner, puis afficher et modifier ses
proprits dans linspecteur des proprits. Le type dobjet slectionn dtermine les proprits
qui saffichent. Par exemple, si vous slectionnez un objet de texte (et non un graphique de texte,
utilis dans cette leon), linspecteur des proprits affiche des paramtres tels que la police, la
taille des caractres et le format du paragraphe que vous pouvez soit afficher, soit modifier. Si
aucun objet nest slectionn, linspecteur des proprits affiche les proprits de lensemble du
document.
1 Sur la scne, slectionnez loutil de slection et cliquez sur le graphique Titre.
Linspecteur des proprits (Fentre > Proprits) affiche des paramtres tels que la hauteur, la
largeur et les coordonnes de la scne pour lobjet group.
2 Sur la scne, cliquez sur le cadre de dlimitation du clip que vous avez fait glisser jusqu la scne
et affichez ses attributs dans linspecteur des proprits.
3 Dans la zone de texte Nom de loccurrence de linspecteur des proprits, saisissez video comme
nom doccurrence.
Remarque : Etant donn quActionScript, le langage de programmation de Flash, fait souvent
rfrence aux noms des occurrences, prenez lhabitude de leur attribuer un nom. To learn more
about naming instances, select Help > How Do I > Quick Tasks > Write Scripts with ActionScript.
Ajouter des comportements de contrle de la vido 19
Ajouter des comportements de contrle de la vido
Les comportements vous permettent dajouter facilement des fonctionnalits complexes votre
document, sans quil ne vous soit ncessaire de connatre ActionScript, le langage de script de
Flash. Vous allez prsent ajouter des comportements de contrle de la vido.
1 Dans le scnario, cliquez sur limage 1 du calque de contenu pour la slectionner, si cela na pas
t fait.
2 Sur la scne, cliquez sur le bouton Lire afin de le slectionner. Dans le panneau Comportements
(Fentre > Panneaux de dveloppement > Comportements), cliquez sur le bouton Ajouter (+)
et slectionnez Vido intgre > Lire.
3 Dans la bote de dialogue Lire une vido, vrifiez que Relatif est bien slectionn. Slectionnez
la vido correspondant au nom que vous avez donn au clip, puis cliquez sur OK.
4 Dans la scne, cliquez sur le bouton Pause (bouton du milieu) pour le slectionner. Dans le
panneau Comportements, cliquez sur Ajouter (+) et slectionnez Vido intgre > Mettre
en pause.
5 Dans la bote de dialogue Mettre une vido en pause, slectionnez nouveau le clip, puis cliquez
sur OK.
6 Sur la scne, cliquez sur le bouton Rembobiner afin de le slectionner. Dans le panneau
Comportements, cliquez sur Ajouter (+) et slectionnez Vido intgre > Rembobiner.
7 Dans la bote de dialogue Rembobiner une vido, choisissez la vido.
8 Dans le champ de texte du nombre dimages rembobiner, entrez 20.
Ce champ de texte indique le nombre dimages ramenes en arrire par la tte de lecture
lorsque lutilisateur clique sur le bouton Rembobiner.
Remarque : Dautres comportements de contrle de la vido vous permettent de faire avancer,
de masquer, de suspendre et de visualiser une vido.
20 Chapitre 1 : Crer un document
Utiliser lexplorateur danimations pour afficher la structure
du document
Lexplorateur danimations est loutil qui vous permet de rorganiser, rechercher et modifier les
animations. Grce son arborescence, lexplorateur danimations fournit des informations
concernant lorganisation et le flux dun document.
1 Slectionnez Fentre > Autres panneaux > Explorateur danimations.
Si ncessaire, vous pouvez agrandir lexplorateur danimations pour afficher son arborescence
complte.
Les boutons de filtre de lexplorateur danimations permettent dafficher ou de masquer des
informations.
2 Cliquez sur le menu contextuel dans la barre de titre de lexplorateur danimations et
slectionnez Afficher les lments danimation et Afficher les dfinitions de symbole, si ce nest
pas dj fait.
3 Le long de la partie suprieure de lexplorateur danimations, configurez les boutons de filtre afin
que seuls les boutons suivants soient slectionns : Affiche les boutons, les clips et les graphiques,
Affiche le code ActionScript et Affiche les vidos, les sons et les bitmaps.
Si vous placez le pointeur de la souris sur un bouton, une info-bulle affiche le nom du bouton.
Examinez la liste pour afficher une partie des lments inclus dans le document et identifier
leurs relations avec dautres lments.
4 Dans le panneau Explorateur danimations, dveloppez Actions lire pour afficher
lActionScript cr par Flash lorsque vous avez ajout le comportement de commande Lire
une vido.
5 Pour fermer lexplorateur danimations, cliquez sur la croix.
Tester le document
Tout au long de la cration dun document, enregistrez-le et testez-le frquemment afin de vous
assurer que le contenu Flash est lu comme prvu. Lors du test du fichier SWF, cliquez sur les
boutons de contrle de la vido afin de voir si la vido sarrte, est lue et se rembobine comme
prvu.
1 Sauvegardez le document (Fichier > Enregistrer) et slectionnez Contrle > Tester lanimation.
Le contenu Flash est lu dans une fentre de fichier SWF. FLA reprsente lextension des
documents dans lenvironnement auteur, tandis que SWF reprsente lextension du contenu
Flash test, export et publi.
2 Une fois que vous aurez fini de visualiser le contenu SWF, fermez la fentre du fichier SWF et
revenez lenvironnement auteur.
Consulter laide
Les leons fournissent une introduction Flash et vous prsentent la manire dutiliser les
diffrentes fonctions afin de crer exactement le type de document requis. Pour obtenir des
informations exhaustives sur une fonctionnalit, une procdure ou un processus dcrit dans ces
leons, veuillez consulter longlet Aide du panneau Aide (Aide > Aide).
Rsum 21
Rsum
Flicitations, vous avez cr un document Flash qui comprend des graphiques, une vido et des
comportements de contrle de la vido. En quelques minutes vous avez appris accomplir les
tches suivantes :
Parcourir linterface utilisateur
Ancrer et dtacher des panneaux
Modifier larrire-plan et la taille de la scne
Modifier laffichage de la scne
Afficher votre bibliothque de documents
Ajouter des graphiques la scne
Ajouter de la vido
Afficher les proprits des objets
Ajouter des comportements de contrle de la vido
Utiliser lexplorateur danimations pour afficher la structure du document.
Tester le document
Consulter laide
Pour en savoir plus sur Flash, choisissez une autre leon.
22 Chapitre 1 : Crer un document
23
CHAPITRE 2
Crer du contenu Flash accessible
La connaissance de quelques techniques de conception et fonctions daccessibilit dans
Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004 vous permet de crer
du contenu Flash accessible par tous les utilisateurs, mme par les personnes souffrant de
handicaps. Cette leon explique comment crer un document accessible, conu pour une
utilisation avec des lecteurs dcrans (qui noncent le contenu web pour les utilisateurs
malvoyants) et dautres technologies dassistance, en accomplissant les tches suivantes :
Spcifier que le document doit tre accessible aux lecteurs dcran.
Fournir un titre de document et une description.
Attribuer un titre et une description aux occurrences de document.
Spcifier que les lecteurs dcran doivent ignorer des lments dans le document.
Changer le texte statique en texte dynamique pour le rendre accessible.
Contrler lordre de navigation des utilisateurs laide de la touche Tab
Contrler lordre de lecture laide dActionScript
La leon propose une introduction aux techniques de base permettant de rendre votre contenu
Flash accessible. Pour obtenir des informations compltes et dtailles sur lincorporation de
fonctions daccessibilit dans votre contenu Flash, consultez Cration de contenu accessible
dans le guide Utilisation de Flash de laide.
Configurer lespace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\ Documents and
Settings \<nom dutilisateur>\Local Setting \Application Data \ Macromedia \ Flash MX
2004 \<langue>\Configuration\HelpPanel\ HowDoI\ QuickTasks\start_files et double-
cliquez sur accessibility_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
24 Chapitre 2 : Crer du contenu Flash accessible
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application Data
\Macromedia \Flash MX2004 \<langue>\Configuration\HelpPanel\HowDoI\QuickTasks\
start_files et double-cliquez sur accessibility_start.fla.
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur
accessibility_start.fla.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers
de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Remarque : Tout au long de cette leon, pensez enregistrer frquemment votre travail.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
Spcifier que le document doit tre accessible aux lecteurs
dcran
Vous allez maintenant spcifier que le document doit tre accessible aux lecteurs dcran et fournir
un nom de document et une description pouvant tre noncs par un lecteur dcran.
1 Vrifiez que vous navez rien slectionn sur la scne et choisissez Fentre > Autres panneaux >
Accessibilit.
2 Dans le panneau Accessibilit, vrifiez que les options suivantes sont slectionnes :
Rendre lanimation accessible est slectionn par dfaut et permet Flash Player de
transmettre les informations daccessibilit un lecteur dcran.
Rendre les objets enfants accessibles permet Flash Player de transmettre les informations
daccessibilit imbriques dans un clip un lecteur dcran. Si cette option est slectionne
pour le document entier, vous pouvez tout de mme masquer les objets enfants pour les clips
individuels.
Etiquetage auto associe le texte situ ct dun autre objet Stage, tel quun champ de saisie
de texte, comme ltiquette ou le titre de cet lment.
Fournir un titre de document et une description
Dans le panneau Accessibilit du document, vous pouvez attribuer un nom et une description au
document, destins aux lecteurs dcran.
Dans le champ Nom, entrez Trio ZX2004. Dans le champ Description, entrez Site consacr
au Trio ZX2004. Inclus : 6 boutons de navigation, un texte de prsentation et une voiture
anime.
Spcifier que les lecteurs dcran doivent ignorer des lments dans le document 25
Attribuer un titre et une description aux occurrences
Maintenant que vous avez fourni des informations sur le document entier, vous pouvez fournir
des informations sur les objets Stage inclus dans le document.
1 Slectionnez le logo de la socit Trio Motor en haut de la scne. Dans le panneau Accessibilit,
entrez Socit Trio Motor dans le champ Nom. Nentrez rien dans le champ Description.
Toutes les occurrences ne ncessitent pas de description (la description est lue avec le titre).
Si le titre fournit une description suffisante de la fonction de lobjet, il nest pas ncessaire
dinclure une description.
2 Le panneau Accessibilit tant toujours ouvert, slectionnez le bouton Dealers sur la scne.
Les informations du panneau Accessibilit refltent les options daccessibilit de lobjet
slectionn.
Dans le panneau Accessibilit du bouton Dealers, il est inutile de fournir un nom dans le
champ Titre, car le bouton comprend une tiquette de texte qui sera lue par le lecteur dcran.
Si vous ne souhaitez pas que le lecteur dcran lise le texte du bouton, vous pouvez
dslectionner Etiquetage auto lorsque vous dfinissez laccessibilit du document.
3 Dans le champ Description, entrez Renvoie vers un site web rpertoriant les distributeurs dans
le pays.
Les autres boutons incluent du texte qui sera nonc par les lecteurs dcran ; il est par consquent
inutile de fournir un titre. Etant donn que le titre des boutons est relativement explicite, il nest
pas ncessaire dinclure des descriptions.
Spcifier que les lecteurs dcran doivent ignorer des lments
dans le document
Les lecteurs dcran suivent un ordre spcifique lors de la lecture de contenu web. Cependant,
lorsque le contenu dune page web est modifi, la plupart des lecteurs dcran recommencent lire
le contenu web ds le dbut. Cette particularit des lecteurs dcran peut tre problmatique
lorsque le contenu Flash comprend, par exemple, une animation, pouvant pousser le lecteur
dcran recommencer la lecture chaque modification de lanimation.
Vous pouvez heureusement utiliser le panneau Accessibilit pour dslectionner Rendre lobjet
accessible, afin que le lecteur dcran ne reoive pas les informations daccessibilit de lobjet, ou
bien dslectionner Rendre les objets enfants accessibles, afin que le lecteur dcran ne reoive pas
les informations daccessibilit imbriques dans un clip. Effectuez maintenant la deuxime
opration afin que les utilisateurs sachent que la page web contient une animation, et que cette
dernire ne provoquera pas la ractualisation constante du lecteur dcran.
1 Sur la scne, cliquez sur la voiture, qui est loccurrence du clip safety_mc.
2 Dans le panneau Accessibilit, dslectionnez Rendre les objets enfants accessibles. Dans le
champ Nom, entrez Trio ZX2004 animation. Dans le champ Description, entrez Animation
comprenant 3 vues du Trio ZX2004.
26 Chapitre 2 : Crer du contenu Flash accessible
Changer le texte statique en texte dynamique pour le rendre
accessible
Le texte statique est accessible aux lecteurs dcran. Cependant, vous ne pouvez pas attribuer un
nom doccurrence au texte statique ; or, le nom doccurrence est requis pour contrler lordre de
tabulation et de lecture. Modifiez le paragraphe de texte de prsentation en texte dynamique et
spcifiez ses options daccessibilit.
1 Sur la scne, slectionnez le texte commenant par The TRIO ZX2004 provides the ultimate
in efficiency ...
Le panneau Accessibilit change afin dindiquer que vous ne pouvez pas appliquer les fonctions
daccessibilit cette slection.
2 Dans linspecteur des proprits, choisissez Texte dynamique dans le menu droulant Type de
texte.
Les paramtres daccessibilit apparaissent dans le panneau Accessibilit.
3 Dans le champ Nom de loccurrence, entrez le nom doccurrence text9_txt.
Remarque : Pour spcifier un ordre de tabulation et un ordre de lecture (cest ltape suivante),
vous devez attribuer un nom doccurrence toutes les occurrences. Le nom doccurrence doit
tre unique dans votre document.
Contrler lordre de tabulation et lordre de lecture
Vous pouvez crer un ordre de tabulation qui dtermine lordre dans lequel les objets reoivent le
focus lorsque lutilisateur appuie sur la touche Tab. Vous pouvez galement contrler lordre dans
lequel un lecteur dcran lit les informations concernant lobjet (lordre de tabulation). Vous
pouvez crer lordre de tabulation et de lecture laide de la proprit tabIndex dans
ActionScript (dans ActionScript, la proprit tabIndex est synonyme de lordre de lecture). Si
vous possdez Flash MX Professionnel 2004, vous pouvez utiliser le panneau Accessibilit pour
spcifier lordre de tabulation, mais lindex de tabulation que vous affectez ne contrle pas
ncessairement lordre de lecture.
Pour crer un ordre de lecture, vous devez affecter un ordre de tabulation chaque occurrence
dans ActionScript.
Si vous disposez de Macromedia Flash MX Professionnel 2004, la cration dun ordre de
tabulation se rsume lentre dun nombre dans le champ Index de tabulation. Vous pouvez
ensuite afficher lordre de tabulation directement sur la scne.
Pour crer un ordre de tabulation dans cette leon, utilisez lune des procdures suivantes. Pour
crer un ordre de lecture ainsi quun ordre de tabulation, suivez la procdure de contrle de lordre
de tabulation et de lordre de lecture laide dActionScript.
Si vous disposez de Flash MX Professionnel 2004, vous pouvez suivre cette procdure permettant
de crer un ordre de tabulation en utilisant le panneau Accessibilit :
1 Le panneau Accessibilit tant ouvert, slectionnez loccurrence logo_mc en haut de la scne.
Dans le panneau Accessibilit, entrez 1 dans le champ Index de tabulation.
Contrler lordre de tabulation et lordre de lecture 27
2 Continuez slectionner chaque occurrence sur la scne et entrez un ordre de tabulation dans
le champ Index de tabulation, laide des informations contenues dans le tableau suivant :
Si vous disposez de Flash MX Professionnel 2004, suivez cette procdure pour afficher un ordre
de tabulation :
Choisissez Affichage > Afficher lordre de tabulation.
Le numro dindex de tabulation que vous avez entr apparat ct de loccurrence sur
la scne.
Remarque : Un ordre de tabulation cr avec ActionScript, et non avec le panneau Accessibilit,
napparat pas lorsque Afficher lordre de tabulation est activ.
Suivez cette procdure pour contrler lordre de tabulation et lordre de lecture laide
dActionScript :
1 Dans le scnario, slectionnez lImage 1 dans le calque Actions.
2 Dans le panneau Actions (Fentre > Panneaux de dveloppement > Actions), affichez le code
ActionScript qui cre lindex de tabulation pour chaque occurrence dans le document.
Nom doccurrence Entrez le nombre suivant dans le champ Index de tabulation
logo_mc 1
dealers_btn 2
orders_btn 3
research_btn 4
text4_txt 5
overview_btn 6
powerplant_btn 7
news_btn 8
safety_mc 9
text8_txt 10
text9_txt 11
bevel_mc 12
28 Chapitre 2 : Crer du contenu Flash accessible
3 Si vous utilisez Flash MX 2004, ou si vous utilisez Flash MX Professionnel 2004 et que vous
navez pas cr lindex de tabulation laide du panneau Accessibilit, supprimez /* et */ dans le
script pour enlever les commentaires du script :
_root.logo_mc.tabIndex = 1;
_root.dealers_btn.tabIndex = 2;
_root.orders_btn.tabIndex = 3;
_root.research_btn.tabIndex = 4;
_root.text4_txt.tabIndex = 5;
_root.overview_btn.tabIndex = 6;
_root.powerplant_btn.tabIndex = 7;
_root.news_btn.tabIndex = 8;
_root.safety_mc.tabIndex = 9;
_root.text8_txt.tabIndex = 10;
_root.text9_txt.tabIndex = 11;
_root.bevel_mc.tabIndex = 12;
A propos du test de votre document avec les lecteurs dcran
Vous savez dj quil est important de tester rgulirement votre document Flash lors de sa
cration, afin de vrifier quil se comporte comme prvu. Il est encore plus important deffectuer
des tests frquents lorsque vous concevez un document devant tre utilis avec des technologies
dassistance, telles que les lecteurs dcran. Pour plus dinformations sur les ressources permettant
de tester votre document avec un lecteur dcran, consultez Test du contenu accessible dans le
guide Utilisation de Flash de laide.
Rsum
Flicitations, vous avez cr du contenu Flash accessible. En quelques minutes vous avez appris
accomplir les tches suivantes :
Spcifier que le document doit tre accessible aux lecteurs dcran
Fournir un titre de document et une description
Attribuer un titre et une description aux occurrences de document.
Spcifier que les lecteurs dcran doivent ignorer des lments dans le document
Changez le texte statique en texte dynamique pour le rendre accessible
Contrler lordre de navigation des utilisateurs laide de la touche Tab
Contrler lordre de lecture laide dActionScript
Macromedia dispose dun site web exhaustif sur laccessibilit. Pour plus dinformations sur
laccessibilit avec les produits Macromedia, consultez le site web Accessibilit de Macromedia
ladresse www.macromedia.com/macromedia/accessibility.
29
CHAPITRE 3
Rdiger des scripts avec ActionScript
Le langage ActionScript fait partie de Macromedia Flash MX 2004 et de Macromedia Flash MX
Professionnel 2004 et offre aux concepteurs et dveloppeurs de nombreux avantages. Grce
ActionScript, vous pouvez contrler la lecture danimations en raction des vnements, tels que
le temps coul et le chargement des donnes ; vous pouvez rendre une animation interactive en
raction aux actions de lutilisateur, telles quun clic ; vous pouvez utiliser des objets intgrs, tels
quun objet bouton, avec des mthodes, proprits et vnements intgrs associs ; vous pouvez
galement crer des classes et des objets personnaliss, ainsi que des animations plus compactes et
efficaces que vous pouvez concevoir laide des outils de linterface utilisateur, le tout laide dun
code rutilisable.
ActionScript est un langage de script ax sur lobjet offrant un contrle sur la lecture de votre
contenu Flash. Au cours des leons suivantes, vous verrez la manire dont ActionScript a volu
vers ActionScript 2.0 pour englober une srie dlments de langage facilitant le dveloppement
de programmes orients objet.
Vous allez prsent utiliser ActionScript pour accomplir les tches suivantes :
Nommer les occurrences en appliquant les recommandations
Initialiser un document
Appliquer la syntaxe ActionScript
Trouver la documentation de rfrence dActionScript
Ajouter des commentaires ActionScript
Rdiger une fonction
Copier et modifier une fonction
Vrifier la syntaxe et tester votre application
30 Chapitre 3 : Rdiger des scripts avec ActionScript
Configurer lespace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\ Documents and
Settings \<nom dutilisateur>\Local Setting \Application Data \ Macromedia \ Flash MX
2004\<langue>\Configuration\HelpPanel\ HowDoI\ QuickTasks\start_files et double-
cliquez sur scripts_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\ Configuration\ HelpPanel\ HowDoI\
QuickTasks\start_files et double-cliquez sur scripts_start.fla.
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur
scripts_start.fla.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers
de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
Crer loccurrence dun symbole
Vous allez faire glisser loccurrence dune animation depuis la bibliothque jusqu lcran GPS sur
la scne. Puis, vous allez appliquer la recommandation selon laquelle il faut toujours nommer les
occurrences, la fois pour obtenir les indicateurs de code et parce que dans vos scripts vous faites
gnralement rfrence aux noms doccurrences plutt quaux noms de symboles. Les conseils de
code sont des info-bulles qui suggrent la syntaxe ActionScript correcte.
1 Dans la barre doutils, cliquez sur loutil de slection. Slectionnez le calque de carte dans le
scnario puis cliquez sur licne de verrouillage situe prs du calque afin de le dverrouiller.
2 Pour placer le clip correctement, slectionnez Affichage > Accrochage. Choisissez Aligner par
accrochage et Accrocher aux objets si ces commandes ne sont pas slectionnes.
3 A partir du panneau Bibliothque (Fentre > Bibliothque), faites glisser le clip map_skewed
vers la partie noire de larrire-plan de la scne.
Les repres napparaissent pas lorsque vous faites glisser un objet pour la premire fois partir
du panneau de la bibliothque : relchez lobjet et faites-le glisser nouveau.
Nommer les occurrences de boutons 31
4 Faites de nouveau glisser le clip map_skewed sur la scne afin de faire apparatre les repres
dalignement. Servez-vous de ces repres pour aligner le clip sur les bords suprieurs gauche de
lcran du GPS.
Remarque : Si vous faites une erreur de placement, faites glisser le clip nouveau ou appuyez sur
Ctrl+Z (Windows) ou sur Commande+Z (Macintosh) pour annuler les modifications.
5 Slectionnez loccurrence de map_skewed sur la scne et saisissez screen_mc dans la zone de
texte Nom de loccurrence de linspecteur des proprits (Fentre > Proprits).
Flash est conu pour afficher des conseils de code lorsque vous nommez vos occurrences avec le
bon suffixe :
Lorsque vous nommez loccurrence dun clip, veillez lui attribuer toujours le suffixe _mc,
comme dans screen_mc.
Lorsque vous nommez un bouton, utilisez le suffixe _btn.
Lorsque vous nommez un champ de texte, utilisez le suffixe _txt.
Remarque : Pour en savoir plus sur dautres suffixes de noms doccurrence dclenchant les
conseils de code, consultez le chapitre Rdaction de code dclenchant les conseils de code
dans le Guide de rfrence ActionScript de laide.
Nommer les occurrences de boutons
En utilisant le bon suffixe pour dclencher les conseils de code, vous allez fournir des noms
doccurrence deux occurrences de boutons se trouvant dj sur la scne.
1 Dans le scnario, dverrouillez le calque Buttons.
2 Sur la scne, slectionnez loccurrence de play_button (gros bouton vert).
3 Dans la zone de texte Nom de loccurrence de linspecteur des proprits, saisissez
onButton_btn afin de nommer loccurrence.
4 Sur la scne, slectionnez loccurrence de button_stop (petit bouton rouge).
5 Dans la zone de texte Nom de loccurrence de linspecteur des proprits, saisissez
offButton_btn afin de nommer loccurrence.
32 Chapitre 3 : Rdiger des scripts avec ActionScript
Initialiser le document
Ltat initial des applications dfinit comment le contenu apparat la premire fois aux utilisateurs.
Les proprits et les variables sont initialises dans la premire image dun document. Vous allez
prciser que le clip map nest pas visible lorsque le fichier SWF est lu pour la premire fois.
1 Slectionnez limage 1 dans le calque Actions. Si le panneau Actions nest pas ouvert,
slectionnez Fentre > Panneaux de dveloppement > Actions.
Actions - Image apparat en haut du panneau, indiquant que vous avez slectionn une image
laquelle appliquer ActionScript. Il est recommand de vrifier si vous tes bien en train
dassocier ActionScript limage voulue.
Le panneau Actions contient une fentre de script (zone de texte vide) dans laquelle vous
pouvez saisir directement du texte, une bote outils Actions, qui vous permet de slectionner
ActionScript afin de lajouter votre script, et un navigateur de scripts qui fonctionne comme
lexplorateur danimations.
2 Le long de la partie suprieure du panneau Actions, cliquez sur Insrer un chemin cible.
3 Dans la bote de dialogue Insrer un chemin cible, vrifiez que Relatif, soit chemin relatif, est
slectionn. A partir de larborescence de la bote de dialogue, slectionnez screen_mc. Cliquez
sur OK.
Un chemin cible indique ActionScript lemplacement dun objet dans lensemble de la
structure dun document.
4 Cliquez sur la fentre de script et, la fin du texte screen_mc, insrez un point (.).
5 Lorsque vous saisissez le point, des indicateurs de code pour le clip saffichent parce que vous
avez utilis le suffixe _mc quand vous avez nomm loccurrence. Double-cliquez sur _visible
dans la liste des conseils de code, puis entrez :
= false;
Cette ligne de code rend le clip screen_mc invisible sur la scne.
Remarque : Si les indicateurs de code napparaissent pas, cela signifie que loption indicateurs de
code nest pas slectionne dans les prfrences du panneau Actions. Vous pouvez saisir
_visible directement dans la fentre de script. Vous pouvez galement modifier les prfrences
en cliquant sur le menu doptions dans le coin suprieur droit du panneau Actions. A partir du menu
doptions, choisissez Prfrences puis Indicateurs de code dans longlet ActionScript.
Tout au long de la programmation, veillez enregistrer souvent votre animation.
A propos de la syntaxe ActionScript
Tous les langages, quil sagisse de langages informatiques ou du langage humain, sous quelque
forme que ce soit, suivent des rgles prcises qui favorisent la comprhension. Ces rgles
reprsentent la syntaxe.
Flash utilise la syntaxe par points, ce qui veut dire que le point (.) sert relier les parties dun
script. Les autres lments syntaxiques dActionScript incluent :
Le point virgule (;) dans les instructions ActionScript indique, tout comme le point dans une
phrase normale, la fin dune instruction.
Les parenthses () regroupent les arguments qui sappliquent une instruction ActionScript.
Les accolades {} regroupent les instructions ActionScript associes. Vous pouvez utiliser les
crochets pour hirarchiser les instructions.
Plus loin dans cette leon, vous allez utiliser les fonctionnalits de Flash vous permettant de tester
votre syntaxe.
Rdiger une fonction pour un bouton 33
Trouver la documentation de rfrence dActionScript
Si, au cours de la programmation, vous souhaitez en savoir plus sur le code ActionScript que vous
tes en train de saisir, vous pouvez slectionner laction dans la bote outils Actions ou dans la
fentre de script et cliquer sur le bouton Rfrence. Le panneau Aide affiche des informations
concernant laction slectionne.
1 Dans la fentre de script du panneau Actions, double-cliquez sur visible afin de slectionner
ce terme.
Remarque : Aprs ltape suivante, vous allez changer de sujet, donc sortir de cette leon, dans le
panneau Aide. Cliquez sur longlet Comment pour revenir ce sujet.
2 Le long de la partie suprieure du panneau Actions, cliquez sur licne Rfrence.
La valeur visible apparat dans le panneau Aide.
Ajouter des commentaires ActionScript
Dans ActionScript, le texte situ aprs la double barre oblique (//) reprsente des commentaires
dont Macromedia Flash Player ne tient pas compte. Les commentaires dcrivent la fonctionnalit
du script afin que dautres dveloppeurs puissent le comprendre, mais vous pouvez aussi vous
servir des commentaires pour dsactiver des sections de votre script au cours du dbogage. Il est
recommand de toujours ajouter des commentaires explicatifs vos scripts.
Dans la fentre de script du panneau Actions, placez le point dinsertion au dbut de la ligne de
code, puis tapez //Initialise le document pour masquer lcran du clip. Appuyez
sur Entre ou sur Retour.
Dans la fentre de script, le texte se prsente comme suit :
//Initialise le document pour masquer lcran du clip.
this.screen_mc._visible = false;
Remarque : Si vos commentaires tiennent sur plusieurs lignes, utilisez /* la place de la double barre
oblique au dbut du commentaire et */ la fin.
Rdiger une fonction pour un bouton
Dans ActionScript, une commande est appele fonction. Une fonction est un script que vous
pouvez rdiger une seule fois et rutiliser dans un document afin daccomplir une tche donne.
Vous allez rdiger une fonction qui fait apparatre (visible = true) le clip screen_mc lorsque
lutilisateur relche le bouton de la souris.
1 Dans la fentre de script du panneau Actions, cliquez aprs la dernire ligne de code, appuyez
deux fois sur Entre ou sur Retour puis tapez //fonction pour afficher lanimation.
2 Appuyez sur Entre ou sur Retour et cliquez sur Insrer un chemin cible, le long de la partie
suprieure du panneau Actions. Slectionnez onButton_btn partir de larborescence et cliquez
sur OK.
3 Dans la fentre de script, saisissez un point (.) et double-cliquez sur onRelease dans la liste des
conseils de code qui saffiche.
4 Dans la fentre de script, appuyez sur la barre despace et saisissez :
= function(){
La ligne de code que vous venez de complter se prsente ainsi :
this.onButton_btn.onRelease = function(){
34 Chapitre 3 : Rdiger des scripts avec ActionScript
Vous savez dj slectionner les objets dans la bote de dialogue Insrer chemin cible et vous
allez prsent saisir les noms doccurrence directement dans la fentre de script.
5 Appuyez sur Entre ou sur Retour et saisissez :
screen_mc._visible = true;
6 Appuyez sur Entre ou sur Retour et saisissez }; pour prciser la fin de linstruction.
La fonction se prsente ainsi :
//fonction pour afficher lanimation
this.onButton_btn.onRelease = function(){
screen_mc._visible = true;
};
Copier et modifier la fonction dun bouton
Vous venez de crer une fonction dfinissant la proprit visible dun clip sur true lorsque
lutilisateur relche le bouton de la souris aprs un clic. Vous avez certainement devin comment
crer une autre fonction masquant le clip screen_mc : rglez la proprit _visible du clip sur
false lorsque lutilisateur clique sur un bouton darrt. Vous allez prsent crer cette fonction.
1 Dans la fentre de script, choisissez la fonction que vous venez dentrer (y compris le
commentaire, les accolades et le point-virgule). Copiez le texte selon la procdure habituelle,
grce au raccourci Ctrl+C (Windows) ou Commande+C (Macintosh).
2 Dans la fentre de script, placez le point dinsertion aprs la dernire ligne de code. Appuyez
ensuite deux fois sur Entre ou Retour et collez le texte selon la procdure habituelle, avec le
raccourci Ctrl + V (Windows) ou Commande + V (Macintosh)
3 Dans la fonction que vous venez de copier, remplacez onButton_btn par offButton_btn.
Noubliez pas que prcdemment vous avez attribu un nom doccurrence de offButton_btn
une occurrence.
4 Dans la fonction que vous venez de copier, modifiez la proprit visible du clip screen_mc de
true false.
5 Dans la fonction que vous venez de copier, modifiez le commentaire situ aprs la double barre
oblique en saisissant fonction pour masquer lanimation.
Lensemble du script se prsente ainsi :
//Initialise le document pour masquer lcran du clip.
this.screen_mc._visible = false;
//fonction pour afficher lanimation
this.onButton_btn.onRelease = function(){
screen_mc._visible = true;
};
//fonction pour masquer lanimation
this.offButton_btn.onRelease = function(){
screen_mc._visible = false;
};
Rsum 35
Vrifier la syntaxe et tester votre application
Comme vous lavez appris prcdemment au cours de cette leon, pour bien fonctionner,
ActionScript requiert une syntaxe correcte. Flash offre plusieurs faons de tester votre syntaxe.
1 Pour vrifier la syntaxe, effectuez lune des oprations suivantes :
Cliquez sur le menu doptions, dans le coin suprieur droit de la barre de titre du panneau
Actions et choisissez Vrifier la syntaxe.
Cliquez sur le bouton Vrifier la syntaxe en haut du panneau Actions.
Si elle est correcte, un message saffiche et vous informe que le script ne contient pas derreurs.
Si la syntaxe est incorrecte, un message vous en avertit : le panneau de sortie saffiche et fournit
des informations relatives lerreur.
2 Cliquez sur OK pour fermer le message de syntaxe.
3 Aprs avoir vrifi que votre code ActionScript ne contient pas derreurs syntaxiques, enregistrez
le document et slectionnez Contrle > Tester lanimation.
Lorsque le fichier SWF saffiche, lanimation ne devrait pas apparatre dans lcran GPS parce
que sa valeur visible initiale est false. Lorsque vous cliquez sur le bouton vert et relchez,
vous appelez la fonction qui dfinit la proprit visible du clip sur true. Lanimation est-elle
lue ? Enfin, cliquez sur le bouton rouge darrt pour voir si la proprit visible de lanimation
est de nouveau dfinie sur false.
Vous pouvez tester votre contenu SWF tout au long de la programmation afin de confirmer
que lanimation est lue correctement.
Rsum
Flicitations, vous savez dsormais rdiger des scripts avec ActionScript. En trs peu de temps,
vous avez appris accomplir les tches suivantes :
Nommer les occurrences en appliquant les recommandations
Initialiser un document
Appliquer la syntaxe ActionScript
Trouver la documentation de rfrence dActionScript
Ajouter des commentaires ActionScript
Rdiger une fonction
Copier et modifier une fonction
Vrifier la syntaxe et tester votre application
To learn more about ActionScript, select Help > How Do I > Quick Tasks > Create an
Application.
36 Chapitre 3 : Rdiger des scripts avec ActionScript
37
CHAPITRE 4
Crer une application
Lapplication que vous allez crer au cours de cette leon permet aux utilisateurs de visualiser le
prix des produits quils slectionnent. Un bouton Calculer additionne les prix pour obtenir le
total. Dans cette section, vous allez apprendre raliser les oprations suivantes :
Copier les entres et les champs de texte dynamiques
Attribuer des noms doccurrence aux champs de texte
Ajouter un composant Button
Dclarer les variables et les valeurs
Prciser les valeurs des champs de texte
Rdiger une fonction
Rdiger un gestionnaire dvnement pour le composant
Configurer l'espace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\QuickTasks\start_files et double-
cliquez sur calculator_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\
HowDoI\QuickTasks\start_files et double-cliquez sur calculator_start.fla.fla.
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur
calculator_start.fla.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers
de leon FLA, pour votre rfrence.
38 Chapitre 4 : Crer une application
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
dans le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Remarque : Tout au long de cette leon, pensez enregistrer frquemment votre travail.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
Le formulaire inclut dj un champ de saisie dans la colonne QTY et un champ de texte
dynamique dans la colonne Price. Vous allez copier les champs de texte des lignes Shockers
(Amortisseurs) et Cover (Housse).
Copier les entres et les champs de texte dynamiques
Utilisez des champs de saisie de texte pour crer un formulaire.
1 Cliquez sur le champ de saisie o les utilisateurs saisissent la quantit de lecteurs CD (CD
Player). Maintenez la touche Alt enfonce et faites glisser la copie du champ vers le bas, jusqu
la zone QTY Shockers.
2 Appuyez sur Alt et cliquez sur le champ de saisie que vous venez de faire glisser, puis faites glisser
la nouvelle copie du champ jusqu la zone QTY Cover (Quantit Housses).
3 Appuyez sur Alt et cliquez sur le champ de texte dynamique du prix des lecteurs CD, puis faites
glisser la copie du champ jusqu la zone Price Shockers (Prix amortisseurs).
4 Appuyez sur Alt et cliquez sur le champ que vous venez de faire glisser, puis faites glisser la copie
jusqu la zone Price Cover (Prix Housses).
Nommer les champs de texte
Avant de pouvoir dfinir les valeurs des champs de texte dans ActionScript, vous devez attribuer
chaque champ de texte un nom doccurrence dans linspecteur des proprits. En ajoutant au
nom de loccurrence lextension TXT, vous identifiez lobjet comme tant un objet texte.
1 Cliquez sur le champ de saisie du haut dans la colonne QTE. Dans le champ de texte Nom de
loccurrence de linspecteur des proprits (Fentre > Proprits), tapez qty1_txt.
2 Rptez la procdure prcdente pour nommer les champs de texte du milieu et du bas
respectivement qty2_txt et qty3_txt.
3 Cliquez sur le champ de texte dynamique du haut dans la colonne Prix. Dans la bote de
dialogue Nom de loccurrence de linspecteur des proprits, saisissez price1_txt.
4 Rptez la procdure prcdente pour nommer les champs de texte du milieu et du bas de la
colonne respectivement price2_txt et price3_txt.
Dclarer les variables et les valeurs pour les prix 39
Ajouter et nommer un composant Button
Les composants sont des clips vido offrant un moyen facile dajouter des fonctionnalits avances
votre document sans avoir connatre le langage ActionScript, plus pointu. Utilisez le
composant Button pour crer un bouton Calculer qui fournit le prix total. Ce composant tant
bas sur ActionScript 2.0, vous devez tout dabord configurer votre bote de dialogue Paramtres
de publication pour vous assurer que votre contenu Flash est lu comme prvu.
1 Choisissez Fichier > Paramtres de publication.
2 Dans longlet Flash de la bote de dialogue Paramtres de publication, choisissez
ActionScript 2.0 dans le menu droulant Version dActionScript, si ce nest pas dj fait.
3 Dans le scnario, cliquez sur le calque Composants afin de le slectionner.
4 A partir du panneau Composants (Fentre > Panneaux de dveloppement > Composants), faites
glisser le composant Button vers la scne et placez-le sur le repre Calculate.
5 Dans longlet Paramtres de linspecteur des proprits, slectionnez le composant Button,
cliquez sur le texte Button dans la ligne Etiquette, saisissez Calculate. Appuyez ensuite sur
Entre ou sur Retour.
Le texte que vous entrez dans le champ Etiquette est le texte qui apparat sur le composant.
6 Dans le champ de texte Nom de loccurrence, tapez calculate pour donner un nom doccurrence
au bouton.
Dclarer les variables et les valeurs pour les prix
Pour que votre application multiplie la quantit de pices slectionnes par le prix, vous devez
dfinir une variable pour chaque pice dans ActionScript. La valeur de la variable correspond au
prix de la pice.
1 Dans le scnario, cliquez sur lImage 1 dans le calque Actions et ouvrez le panneau Actions
(Fentre > Panneaux de dveloppement > Actions).
2 Dans la fentre de script, tapez //dclare les variables et valeurs pour les prix des
pices dtaches.
La double barre oblique (//) indique que le texte qui la suit est un commentaire. Il est
recommand de toujours ajouter des commentaires explicatifs vos codes ActionScript.
Remarque : Au fur et mesure que vous avancez dans cette leon, il est possible que vous vous
rendiez compte que vous navez plus besoin des indicateurs de code (les infos-bulles vous
donnant la syntaxe ActionScript correcte). Si tel est le cas, vous pouvez les dsactiver en cliquant
sur le menu doptions, dans le coin suprieur droit du panneau Actions. Choisissez Prfrences,
puis dslectionnez Indicateurs de code dans longlet ActionScript.
3 Appuyez sur Entre ou sur Retour et saisissez ce qui suit afin dindiquer le prix de chaque pice :
var priceCD =320;
var priceShocks =150;
var priceCover =125;
40 Chapitre 4 : Crer une application
Prciser les valeurs des champs de saisie de texte
Vous allez prciser les valeurs des champs de saisie de texte. Vous allez utiliser les valeurs pour
rdiger un code ActionScript qui multiplie la quantit par le prix.
1 Dans la fentre de script, placez le point dinsertion aprs 125, appuyez sur Entre ou sur Retour
deux reprises et saisissez le commentaire //dfinit les valeurs initiales pour les
champs de texte de la quantit.
2 Appuyez sur Entre ou sur Retour et saisissez :
qty1_txt.text = 0;
qty1_txt reprsente le nom de loccurrence que vous avez attribu au premier champ de saisie
sous la colonne QTY. .text est une proprit qui dfinit la valeur initiale dans le champ de
texte. Dfinissez cette valeur sur 0.
3 Appuyez sur Entre ou sur Retour et saisissez les deux lignes suivantes afin de dfinir la valeur
0 pour les deux autres champs QTY :
qty2_txt.text= 0;
qty3_txt.text = 0;
Lorsque vous avez fini, le code ActionScript se prsente ainsi :
//dfinit les valeurs initiales pour les champs de texte de la quantit.
qty1_txt.text = 0;
qty2_txt.text= 0;
qty3_txt.text = 0;
Rdiger une fonction
Une fonction est un script que vous pouvez utiliser plusieurs fois afin deffectuer une tche
spcifique. Vous pouvez transmettre des paramtres une fonction qui peut retourner une valeur.
Dans cette leon, chaque fois que lutilisateur clique sur le bouton Calculer, une fonction
multipliera les donnes des champs de saisie de texte et affichera les valeurs dans les champs de
texte dynamiques. Rdigez cette fonction ds prsent.
1 Dans la fentre de script, placez le point dinsertion aprs le code ActionScript qty3_txt.text
= 0;, appuyez sur Entre ou sur Retour deux reprises, puis saisissez le commentaire suivant :
//calcule la quantit fois le prix
2 Appuyez sur Entre ou Retour et saisissez le commentaire suivant pour crer une fonction
sexcutant lorsque la tte de lecture entre dans limage 1, lorsque vous attachez le script :
this.onEnterFrame = function (){
3 Saisissez le code ActionScript suivant afin de prciser comment la fonction doit multiplier les
valeurs dans les champs de saisie de texte pour lavion :
price1_txt.text = Number (qty1_txt.text)*Number (priceCD);
price1_txt est le nom doccurrence que vous avez attribu au champ de saisie du haut sur
la scne.
.text dfinit le texte qui doit apparatre dans le champ de texte, autrement dit le nombre de
pices multipli par le prix : les 320 dollars que vous avez dfinis comme valeur de la variable
priceCD.
Rdiger un gestionnaire dvnement pour le composant 41
4 Appuyez sur Entre ou sur Retour et saisissez les deux lignes suivantes :
price2_txt.text = Number (qty2_txt.text)*Number (priceShocks);
price3_txt.text = Number (qty3_txt.text)*Number (priceCover);
};
Votre fonction se prsente ainsi :
//calcule la quantit fois le prix
this.onEnterFrame = function (){
price1_txt.text = Number (qty1_txt.text)*Number (priceCD);
price2_txt.text = Number (qty2_txt.text)*Number (priceShocks);
price3_txt.text = Number (qty3_txt.text)*Number (priceCover);
};
Rdiger un gestionnaire dvnement pour le composant
Pour que votre fichier SWF ragisse un vnement (ex. : un clic de souris), vous pouvez utiliser
des gestionnaires dvnement : un code ActionScript associ un objet ou un vnement
particulier. Utilisez un gestionnaire dvnement on() pour le composant Button qui calcule le
prix total lorsque lutilisateur clique sur ce bouton.
Pour plus dinformations sur les gestionnaires dvnement, consultez le chapitre Gestion
dvnements , dans le Guide de rfrence ActionScript de laide.
1 Dans la scne, cliquez sur le composant Button et accdez au panneau Actions.
Longlet Calculate, situ en bas du panneau Actions, indique que vous attachez le script
directement lobjet slectionn plutt qu une image.
2 Dans la fentre de script, tapez le commentaire suivant :
//Calcule le prix total
3 Une fois le commentaire saisi, appuyez sur Retour ou sur Entre et saisissez ce qui suit afin de
crer un gestionnaire pour le composant PushButton que vous avez plac sur la scne :
on(click){
Vous venez dentrer le dbut du gestionnaire dvnement on(). Llment (clic) indique que
lvnement doit intervenir lorsque lutilisateur clique sur le bouton Calculer.
Un composant Button dispose de son propre scnario. Dans la hirarchie du scnario, le
composant Scnario dpend du scnario principal. Dans ce script, pour dsigner des lments
partir du scnario du composant Button vers le scnario principal, utilisez le code with
(_parent).
4 Placez le point dinsertion la fin de la ligne que vous venez de saisir, appuyez sur Entre ou sur
Retour et saisissez ce qui suit :
with(_parent){
5 Appuyez sur Entre ou Retour et terminez la dfinition de votre gestionnaire en tapant le
commentaire suivant :
priceTotal_txt.text = Number (price1_txt.text) + Number (price2_txt.text) +
Number (price3_txt.text);
}
};
42 Chapitre 4 : Crer une application
Lorsque vous avez termin, votre script doit apparatre comme suit :
on(click){
with(_parent){
priceTotal_txt.text = Number (price1_txt.text) + Number (price2_txt.text)
+ Number (price3_txt.text);
}
};
Le gestionnaire dvnement que vous venez de saisir prcise que le texte du champ PriceTotal_txt
doit tre la somme des valeurs qui se trouvent dans les champs Price1_txt, Price2_txt et
Price3_txt.
Tester votre application
Vous allez tester votre application afin de vous assurer quelle sexcute comme prvu.
1 Sauvegardez votre document et slectionnez Contrle > Tester lanimation.
2 Dans la version test de votre animation qui saffiche dans lapplication Flash Player, saisissez des
chiffres dans les champs QTE afin de voir ce qui saffiche dans les champs Price.
3 Cliquez sur le bouton Calculate afin de connatre le cot total de toutes les pices.
Rsum
Flicitations, prsent vous matrisez la cration dune application. En quelques minutes vous
avez appris accomplir les tches suivantes :
Copier les entres et les champs de texte dynamiques
Attribuer des noms doccurrence aux champs de texte
Ajouter un composant Button
Dclarer les variables et les valeurs
Prciser les valeurs des champs de texte
Rdiger une fonction
Rdiger un gestionnaire dvnement pour le composant
Pour en savoir plus sur ActionScript, slectionnez une leon de la srie Bases d'Actionscript dans
longlet Comment du panneau Aide.
43
CHAPITRE 5
Utiliser les calques
Dans Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004, les calques sont
similaires des feuilles transparentes en actate empiles les unes sur les autres. Les zones vides
dun calque laissent transparatre le contenu des calques sous-jacents. Grce ces calques, vous
pouvez organiser le contenu de votre document. Par exemple, vous pouvez placer votre
illustration darrire-plan sur un calque et les boutons de navigation sur un autre. Vous pouvez
galement crer et modifier des objets sur un calque sans affecter les objets dun autre calque.
Dans cette leon, vous allez vous familiariser avec les calques, par le biais des oprations suivantes :
Slectionner un calque
Masquer et afficher des calques
Verrouiller un calque
Ajouter et nommer un calque
Modifier lordre des calques
Organiser les calques dans un dossier
Ajouter un calque de masque
Ajouter un calque de guide
Supprimer un calque
Configurer lespace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis utilisez lun
des chemins suivants :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation\>\Program
Files\Macromedia\Flash MX 2004\<langue>\First Run\HelpPanel\HowDoI\
BasicFlash\start_files et double-cliquez sur layers_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation\>\Program
Files\Macromedia\Flash MX 2004\<langue>\First Run\HelpPanel\HowDoI\
BasicFlash\start_files et double-cliquez sur layers_start.fla.
44 Chapitre 5 : Utiliser les calques
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur
layers_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
dans le mme dossier, afin de conserver le fichier de dmarrage dorigine.
3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre
espace de travail afin daborder les leons.
4 Dans le menu daffichage de la scne, dans langle suprieur droit du scnario, slectionnez
Afficher une image pour afficher la scne et lespace de travail.
5 Si ncessaire, faites glisser le bord infrieur du scnario (Fentre > Scnario) vers le bas pour
agrandir la vue du scnario.
Vous pouvez galement utiliser la barre de dfilement pour passer dun calque lautre.
Slectionner un calque
Vous placez des objets, ajoutez ou modifiez du texte et des graphiques sur le calque qui est actif.
Pour rendre un calque actif, slectionnez le calque dans le scnario ou slectionnez un objet Stage
dans le calque. Le calque actif est mis en surbrillance dans le scnario ; licne dun crayon indique
quil est modifiable.
1 Dans la barre doutils, cliquez sur loutil de slection.
2 Sur la scne, slectionnez la voiture rouge.
Une icne de crayon dans le scnario indique que le calque de la voiture rouge est actif.
3 Slectionnez le calque Text dans le scnario.
Les blocs de texte entourant la voiture sont tous deux slectionns sur la scne, puisquils sont
sur le calque Text.
Ajouter et nommer un calque 45
Masquer et afficher des calques
Vous pouvez masquer des calques pour afficher le contenu dautres calques. Vous pouvez soit
masquer tous les calques de votre document simultanment ou masquer les calques
individuellement.
1 Cliquez sur licne daffichage situe au-dessus des calques, de sorte quune croix (X) rouge
saffiche dans la colonne daffichage.
Tout le contenu disparat de la scne.
2 Cliquez sur les croix rouges une par une pour voir le contenu des calques rapparatre sur
la scne.
Les commandes situes droite du nom dun calque permettent de masquer ou dafficher son
contenu.
Remarque : Utilisez au besoin la barre de dfilement pour afficher tous les calques.
Verrouiller un calque
Lorsque vous avez plac votre contenu sur un calque, vous pouvez verrouiller ce dernier pour
viter que dautres utilisateurs le modifient par inadvertance.
1 Dans le scnario, cliquez sur le point noir situ sous la colonne de verrouillage, en regard du
calque Logo.
Une icne reprsentant un verrou saffiche, indiquant que le calque est verrouill.
2 Avec loutil de slection, essayez de faire glisser le logo qui saffiche sur le haut de la scne.
Ce nest pas possible, parce que le calque est verrouill.
Remarque : Si vous dplacez par inadvertance un lment sur un calque non verrouill, appuyez
sur les touches Ctrl+Z (Windows) ou Commande+Z (Macintosh) pour annuler lopration.
Ajouter et nommer un calque
Vous allez prsent ajouter un calque, le nommer, puis y ajouter un symbole graphique.
1 Dans le scnario, cliquez sur le calque de la voiture.
2 Cliquez sur le bouton Insrer un calque sous le scnario.
Le nouveau calque saffiche par dessus le calque de la voiture et devient actif.
3 Double-cliquez sur le nom du calque, entrez Arrire-plan et appuyez sur la touche Entre
(Windows) ou Retour (Macintosh).
Il est recommand dattribuer chaque calque un nom explicite refltant son contenu.
4 Dans le panneau Bibliothque (Fentre > Bibliothque), slectionnez le symbole graphique
darrire-plan et faites-le glisser sur la scne.
Le calque darrire-plan est pos par-dessus tous les autres calques, except le calque de masque.
Son contenu saffiche par consquent par-dessus les objets des calques sous-jacents.
46 Chapitre 5 : Utiliser les calques
Modifier lordre des calques
Il est bien sr prfrable que le calque darrire-plan ne recouvre pas les autres objets de la scne.
Ce calque doit normalement tre plac sous les autres dans le scnario. Vous allez donc dplacer le
calque darrire-plan que vous avez cr.
1 Dans le scnario, faites glisser le calque darrire-plan de la premire la dernire place.
Tous les objets de la scne saffichent maintenant par-dessus larrire-plan.
2 Le calque darrire-plan toujours slectionn, dans linspecteur des proprits, entrez 0 dans le
champ X et 72 dans le champ Y. Appuyez sur la touche Entre ou Retour pour placer le calque
darrire-plan sur la scne avec prcision.
Organiser les calques dans un dossier
Vous pouvez crer des dossiers pour organiser vos calques et ordonner le scnario. Le scnario
contient deux calques qui comportent les objets de navigation : lun contient les boutons de
navigation, lautre les illustrations de navigation. Vous allez crer un dossier appel Navigation
pour ces deux calques.
1 Dans le scnario, slectionnez le calque Buttons.
2 Cliquez sur le bouton Insrer un dossier de calques situ sous les noms de calque.
Remarque : Si linspecteur des proprits affiche les proprits de limage et non du clip, cliquez
sur le clip Arrire-plan sur la scne.
3 Double-cliquez sur le nom du dossier de calque et renommez-le Navigation.
4 Faites glisser les calques Navbar et Buttons vers le dossier Navigation.
Les calques saffichent en retrait, indiquant quils font partie du dossier.
Vous pouvez cliquer sur la flche prvue cet effet pour agrandir et rduire le dossier et les calques
quil contient.
Ajouter un calque de masque
Lutilisation dun calque de masque permet de choisir les parties des calques sous-jacents
afficher. Pour cela, vous devez choisir votre calque de masque, les autres devenant par dfaut les
calques masqus.
Vous allez utiliser la forme rectangulaire sur la scne pour maquer une partie du graphique et de
lanimation de la route, de sorte que lanimation soit mieux ajuste la scne.
1 Sur la scne, activez loutil de slection et cliquez sur la forme rectangulaire sous la route.
2 Faites glisser la forme verticalement et alignez le bord gauche de la forme sur le bord gauche de
la route.
3 Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrle
(Macintosh) sur le calque de masque dans le scnario, puis slectionnez Masque dans le menu
contextuel.
Le calque est converti en calque de masque, indiqu par une icne en forme de losange bleu.
Le calque situ immdiatement dessous est li au calque de masque. Le nom du calque masqu
saffiche en retrait et son icne devient un calque bleu.
4 Dans le scnario, faites glisser le calque de la route sur le calque de masque et placez-le sous le
calque de la voiture.
Le calque de masque et les calques masqus sont automatiquement verrouills.
Rsum 47
5 Pour afficher leffet de masque, slectionnez Contrle > Tester lanimation.
6 Lorsque vous avez termin, fermez la fentre du fichier SWF pour revenir au document.
Ajouter un calque de guide
Vous tes maintenant familier avec les calques de base et les calques de masque. Le troisime type
de calque est le calque de guide. Les calques de guide permettent de conserver du contenu que
vous ne voulez pas afficher dans le fichier publi ou export. Par exemple, vous pouvez y placer
des instructions destines aux autres utilisateurs de votre document. Lorsque vous commencez
une leon dans Flash, vous verrez que de nombreux fichiers de leon FLA contiennent des espaces
rservs qui indiquent o placer un objet Stage sur les calques de guide. Vous allez prsent crer
un calque de guide.
1 Dans le scnario, slectionnez le calque Background, puis cliquez sur le bouton Insrer un
calque pour crer un calque.
2 Nommez ce calque Notes et appuyez sur la touche Entre ou Retour.
3 Cliquez avec le bouton droit de la souris (Windows) ou tout en appuyant sur la touche Contrle
(Macintosh) sur le calque Notes et slectionnez Guide dans le menu contextuel.
Une icne en regard du nom du calque indique quil sagit dun calque de guide.
4 Le calque Notes toujours slectionn, cliquez sur loutil Texte dans la barre doutils. Puis, dans
la partie de la scne situe au-dessus de la voiture et de la route, entrez le texte suivant :
Production Note : Animation with no stop (); actions loop by default.
5 Sauvegardez votre document et slectionnez Contrle > Tester lanimation.
Aucun contenu ajout au calque de guide ne saffiche dans la fentre du fichier SWF.
6 Une fois que vous en avez termin avec laffichage du fichier SWF, fermez sa fentre pour
retourner au document.
Supprimer un calque
Le calque de guide de votre document tant superflu, vous allez le supprimer.
Dans le scnario, le calque Notes slectionn, cliquez sur le bouton Supprimer le calque.
Rsum
Flicitations, vous savez dsormais utiliser les calques dans Flash. En quelques minutes vous avez
appris accomplir les tches suivantes :
Slectionner un calque
Masquer et afficher des calques
Verrouiller un calque
Ajouter et nommer un calque
Modifier lordre des calques
Organiser les calques dans un dossier
Ajouter un calque de masque
Ajouter un calque de guide
Supprimer un calque
Pour en savoir plus sur Flash, choisissez une autre leon.
48 Chapitre 5 : Utiliser les calques
49
CHAPITRE 6
Crer une interface utilisateur avec les outils de
mise en forme
Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004 offrent plusieurs
faons de placer des objets avec prcision sur la scne. Vous pouvez ainsi choisir celle qui vous
convient le mieux. Dans cette leon, vous allez utiliser les outils de mise en forme pour crer une
interface utilisateur. Pour cela, vous allez effectuer les oprations suivantes :
Afficher les rgles de lespace de travail
Utiliser les guides pour aligner des objets
Modifier la taille de la scne
Redimensionner les objets en fonction de la taille de la scne
Aligner un objet laide des guides dalignement
Aligner un objet laide du panneau Aligner
Accrocher des objets les uns aux autres
Aligner des objets laide de linspecteur des proprits
Utiliser la grille et les touches flches pour aligner des objets
Cette leon utilise des outils spcifiques pour les diffrents types dobjets (guides dalignement
pour aligner du texte, par exemple), mais les objets peuvent tout aussi bien tre aligns laide
dautres outils. Utilisez les outils de votre choix pour crer votre projet.
Configurer lespace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur layout_tools_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
50 Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\Basic
Flash\start_files et double-cliquez sur layout_tools_start.fla.
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files et double-cliquez sur
layout_tools_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
4 Dans le menu droulant Affichage de la scne, dans langle suprieur droit du scnario,
slectionnez Afficher une image pour afficher la scne et lespace de travail.
5 Cliquez sur lespace de travail, ailleurs que sur un objet de la scne.
Utiliser les guides pour aligner des objets
Vous pouvez utiliser les rgles et les guides pour placer ou aligner un objet avec prcision dans
votre document. Vous allez ajouter des guides pour faciliter le centrage du bloc de texte.
1 Choisissez Affichage > Rgles.
Une rgle horizontale et une rgle verticale saffichent en haut et gauche de la scne.
2 Cliquez sur la rgle horizontale et faites glisser la souris vers le bas jusqu atteindre une position
horizontale de 250 pixels.
3 Cliquez sur la rgle verticale et faites glisser la souris vers la gauche jusqu atteindre une position
verticale de 375 pixels.
4 Dans la barre doutils, cliquez sur loutil de slection.
5 Sur la scne, cliquez dans langle suprieur gauche du bloc de texte et faites-le glisser jusquau
point dintersection des deux guides.
Un petit cercle saffiche lorsque la slection saccroche aux guides.
6 Pour supprimer les guides, slectionnez Affichage > Guides > Effacer les guides.
Spcifier des paramtres d'alignement par accrochage 51
Modifier la taille de la scne
La taille de la scne de votre document est de 750 pixels x 500 pixels. Vous allez dfinir la taille de
la scne sur 640 x 480, une taille standard adapte la plupart des crans et des rsolutions.
1 Cliquez sur une zone vide de la zone de travail et dslectionnez le bloc de texte.
2 Linspecteur des proprits affiche les proprits du document entier. Cliquez sur le bouton
Taille.
3 Dans la bote de dialogue Proprits du document, entrez 640 pour la largeur et 480 pour la
hauteur, puis cliquez sur OK.
La taille du document est modifie mais les objets sur la scne conservent leur taille.
Redimensionner les objets en fonction de la taille de la scne
Maintenant que vous avez modifi la taille de la scne, les illustrations dbordent sur lespace de
travail. Cela peut tre corrig facilement.
1 Sur la scne, cliquez sur les montagnes grises pour les slectionner. Tout en maintenant la
touche Maj enfonce, cliquez sur le bandeau bleu en haut de la scne pour lajouter la slection.
2 Ouvrez le panneau Aligner (Fentre > Panneaux de conception > Aligner).
Les info-bulles saffichent dans le panneau Aligner, indiquant les noms des options
dalignement.
3 Dans le panneau Aligner, slectionnez Vers la scne, puis, sous Ajuster la taille, slectionnez
Mme largeur. La taille de lillustration slectionne sadapte la largeur de la scne.
4 Toujours dans ce panneau, cliquez maintenant sur Aligner les bords gauches.
Lillustration saligne sur le bord gauche de la scne.
5 Dans le scnario, cliquez sur le calque Bevel afin de le slectionner.
6 Dans le panneau Bibliothque (Fentre > Bibliothque), faites glisser le biseau sur la partie
infrieure de la scne.
7 Dans le panneau Aligner, vrifiez que loption Vers la scne est toujours slectionne, puis
cliquez sur Mme largeur.
8 Cliquez sur Aligner les bords gauches et Aligner les bords infrieurs.
Le biseau saligne sur le bord infrieur de la scne.
9 Fermez les panneaux Bibliothque et Aligner.
Spcifier des paramtres d'alignement par accrochage
Laccrochage permet de placer un objet sur une scne avec prcision en laccrochant dautres
objets ou des outils dalignement. Vous allez spcifier laffichage des guides horizontaux et
verticaux dans les paramtres dalignement par accrochage, ce qui vous aidera placer les
illustrations sur la scne.
1 Slectionnez Affichage > Accrochage > Aligner par accrochage si cette option nest pas dj
slectionne.
2 Slectionnez Affichage > Accrochage > Modifier lalignement par accrochage.
3 Dans la zone de texte Bordure de lanimation de la bote de dialogue Aligner par accrochage,
entrez 30 px (pixels) pour accrocher les objets sur une bordure situe 30 pixels de la scne.
52 Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
4 Vrifiez que 10 pixels saffiche dans les zones de texte Tolrance de laccrochage horizontal
et vertical.
La tolrance de laccrochage dtermine la distance laquelle un objet doit sapprocher dun
autre objet ou dun outil dalignement avant de saccrocher.
5 Cliquez sur OK.
Aligner un objet laide des guides dalignement
Vous allez maintenant utiliser ces paramtres pour faciliter le placement dun objet sur la scne.
1 Dans la barre doutils, cliquez sur loutil de slection.
2 Dans le scnario, slectionnez le calque Auto.
3 Dans le panneau Bibliothque (Fentre > Bibliothque), faites glisser la voiture et placez-la sur
une zone grise de la scne, en regard du corps du texte.
4 Faites de nouveau glisser loccurrence afin dafficher les guides dalignement par accrochage.
Approchez la voiture du texte, dplacez-la verticalement jusqu ce que le guide dalignement au
centre saffiche, indiquant que le graphique est centr par rapport au texte.
5 Tout en conservant la voiture centre sur le texte (le guide dalignement au centre doit rester
affich), faites glisser le graphique horizontalement vers la gauche de la scne, jusqu ce que le
guide saccroche la bordure de 30 pixels cre prcdemment.
Vous venez daligner la voiture sur le texte ainsi que sur la bordure daccrochage.
Aligner un objet laide du panneau Aligner
Dans une section prcdente, vous avez utilis le panneau Aligner pour adapter les objets la taille
de la scne. Vous allez prsent utiliser le panneau Aligner pour centrer des objets les uns par
rapport aux autres et par rapport la scne.
1 Avec loutil de slection, cliquez sur le texte de la scne intitul Introducing the Worlds First
Hybrid 4WD .
2 Appuyez sur la touche Maj et cliquez sur la deuxime ligne du titre 2004 Trio QZ pour
lajouter la slection.
Aligner des objets laide de linspecteur des proprits 53
3 Dans le panneau Aligner (Fentre > Panneaux de conception > Aligner), dslectionnez Vers la
scne et slectionnez Aligner les centres horizontalement.
Vous avez centr les deux lignes par rapport leur axe horizontal. Vous allez prsent grouper
le titre et centrer les deux lignes par rapport la scne.
4 Les deux lignes de texte toujours slectionnes, slectionnez Modification > Grouper.
5 Dans le panneau Aligner, slectionnez Vers la scne, puis Aligner les centres horizontalement.
Les objets salignent dsormais par rapport au centre horizontal de la scne.
6 Fermez le panneau Aligner.
Accrocher des objets les uns aux autres
Vous pouvez accrocher des objets de la scne dautres objets. Pour cela, vous devez dfinir
lalignement des objets les uns par rapport aux autres. Utilisez la fonction Accrocher aux objets
pour aligner une barre de navigation sur le bandeau suprieur de la scne.
1 Slectionnez Affichage > Accrochage. Dans le sous-menu, slectionnez Accrocher aux objets,
si cette option nest pas dj slectionne.
2 Dans le scnario, slectionnez le calque Nav.
3 Dans le panneau Bibliothque, faites glisser le graphique de navigation sous le bandeau bleu de
la scne et relchez le bouton de la souris.
4 Cliquez sur langle suprieur gauche du graphique, puis faites-le glisser jusqu ce quun
indicateur daccrochage circulaire saffiche.
5 Maintenant, faites glisser langle suprieur gauche de la barre de navigation et accrochez-la sur
langle infrieur gauche du bandeau bleu.
Aligner des objets laide de linspecteur des proprits
Linspecteur des proprits permet daligner avec prcision des objets sur les axes x et y de la scne,
partir du point dalignement de lobjet de la scne. Le point dalignement est le point sur lequel
un symbole saligne ou pivote. Vous allez utiliser linspecteur des proprits pour aligner le logo.
1 Dans le scnario, slectionnez le calque Top.
54 Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
2 Dans le panneau Bibliothque (Fentre > Bibliothque), faites glisser le logo sur un espace vide
de la scne.
3 Dans linspecteur des proprits, le logo toujours slectionn, entrez 20 dans le champ X et 8
dans le champ Y. Appuyez sur Entre ou sur Retour.
Le logo est dplac sur les valeurs x et y que vous avez spcifies.
Remarque : Vous pouvez afficher et modifier le point dalignement dun objet dans le panneau
Info (Fentre > Panneaux de conception > Info). Le carr noir de la grille reprsente le point
dalignement. Pour le modifier, cliquez sur un autre carr de la grille.
Aligner des objets l'aide de la grille et des touches flches
Vous pouvez utiliser la grille pour faciliter le placement dobjets sur la scne.
1 Choisissez Affichage > Grille > Afficher la grille.
La grille ne saffiche pas lorsque vous testez ou publiez le document.
Remarque : Pour accrocher des objets aux lignes des grilles horizontale et verticale, vous devez
galement slectionner loption Accrocher la grille (Affichage > Accrochage > Accrocher la
grille). La leon prsente nutilise pas cette option.
2 Sur la scne, slectionnez le titre group prcdemment.
3 Utilisez la touche Flche vers le haut du clavier pour venir placer la premire ligne du titre sur
une ligne de grille horizontale. Veillez laisser un espace entre le texte du titre et la barre de
navigation.
Remarque : Vous pouvez galement utiliser les touches Flche vers la gauche, Flche vers le bas
et Flche vers la droite pour ajuster les objets sur la scne.
Rsum
Flicitations, vous venez de crer une interface utilisateur laide des outils de mise en forme.
En quelques minutes vous avez appris accomplir les tches suivantes :
Afficher les rgles de lespace de travail
Utiliser les guides pour aligner des objets
Modifier la taille de la scne
Rsum 55
Redimensionner les objets en fonction de la taille de la scne
Aligner un objet laide des guides dalignement
Accrocher des objets les uns aux autres
Aligner des objets laide de linspecteur des proprits
Utiliser la grille et les touches flches pour aligner des objets
Pour plus dinformations sur les options de conception de Flash, lancez une autre leon de la srie
Bases de Flash.
56 Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
57
CHAPITRE 7
Dessiner dans Flash
Les objets que vous crez laide des outils de dessin de Flash sont des dessins vectoriels, cest--
dire une reprsentation mathmatique des lignes, des courbes, des couleurs et de la position
dlments. Les illustrations vectorielles ne dpendent pas de la rsolution utilise, ce qui vous
permet de les redimensionner et de les afficher nimporte quelle rsolution sans pour autant
dgrader leur qualit. En outre, les graphiques vectoriels sont plus rapides tlcharger que des
images bitmap quivalentes. Dans cette leon, vous allez crer lillustration vectorielle dun
boulon et dun logo en ralisant les tches suivantes :
Crer un polygone
Faire pivoter une forme
Dcouper une forme dans une autre forme
Transformer une illustration
Copier des traits
Utiliser loutil Ligne
Slectionner et ajouter une couleur de remplissage
Grouper une forme
Crer un logo avec loutil Plume
Configurer votre espace de travail
Dans un premier temps, vous devez ouvrir le fichier de dmarrage de cette leon et configurer
votre espace de travail afin de suivre vos leons dans un cadre optimal.
1 Pour ouvrir votre fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes:
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur drawing_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur d'initialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\
BasicFlash\start_files et double-cliquez sur drawing_start.fla.
58 Chapitre 7 : Dessiner dans Flash
Sous Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash
MX 2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur
drawing_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
Flash souvre dans lenvironnement auteur.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Tout au long de cette leon, pensez enregistrer frquemment votre travail.
3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer lespace
de travail.
Slectionner un outil Forme
Les outils Forme permettent de crer facilement des figures telles que des ovales, des rectangles,
des polygones et des toiles. Pour crer un polygone, utilisez loutil Polygone.
1 Dans le scnario, slectionnez le calque Content.
2 Dans la bote outils, slectionnez loutil Polygone. Vous devrez peut-tre cliquer dans le coin
infrieur droit de loutil Rectangle pour afficher un menu contenant loutil Polygone.
3 Cliquez nimporte o dans lespace de travail gris ct de la scne pour afficher les proprits
de la forme que vous allez crer. Dans linspecteur des proprits (Fentre > Proprits), assurez-
vous que la couleur de trait slectionne est le noir, que la hauteur de trait est de 1 pixel et que
le style de trait est Continu.
Le trait est la ligne qui entoure les formes.
4 Cliquez sur le contrle de couleur de remplissage et slectionnez le bleu correspondant la
valeur hexadcimale #0000FF.
La forme prend cette couleur, lintrieur du trait.
Slectionner les options de cration dun polygone
Loutil Polygone permet de dfinir le nombre de cts du polygone ; vous pouvez galement
lutiliser pour crer une toile. Spcifiez un polygone six cts.
1 Dans linspecteur des proprits, loutil Polygone tant toujours slectionn, cliquez sur
Options.
2 Dans la bote de dialogue Paramtres des outils, assurez-vous que loption Polygone est
slectionne dans le menu droulant Style et entrez 6 dans la zone de texte Nombre de cts.
Cliquez sur OK.
Dessiner un polygone
Appuyez sur la touche Maj pour contraindre la forme suivre une ligne verticale ou horizontale.
Utiliser la fonction de dcoupe 59
Appuyez sur la touche Maj et faites glisser la souris sur le ct gauche de la scne (en vous
loignant des chiffres du calque Guides) pour dessiner un hexagone, comme dans lillustration
suivante :
Faire pivoter la forme
Une fois la forme cre, vous pouvez la faire pivoter dun nombre de degrs prcis en utilisant le
panneau Transformer.
1 Dans la barre doutils, cliquez sur loutil Slection. Sur la scne, double-cliquez dans lhexagone
pour slectionner la fois le trait et le remplissage.
Si vous cliquez une seule fois dans la forme, vous ne slectionnez que le remplissage.
2 Slectionnez Fentre > Panneaux de conception graphique > Transformer. Dans la bote de
dialogue Transformer, vrifiez que loption Pivoter est slectionne et entrez -15 dans la zone
de texte Pivoter pour faire tourner la forme de 15 vers la droite. Appuyez sur Entre ou sur
Retour.
Utiliser la fonction de dcoupe
Lorsque vous dessinez une forme sur une forme existante et que les deux formes sont dgroupes,
la forme situe au-dessus dcoupe la forme situe en dessous. Crez un cercle dans lhexagone,
puis dcoupez-le.
1 Choisissez Affichage > Accrochage et slectionnez Accrocher aux objets si ce nest pas dj fait.
2 Dans la barre doutils, cliquez sur loutil Ovale. Tout en appuyant sur la touche Maj pour
contraindre la forme, dessinez un cercle dans lhexagone (imaginez que lhexagone est une
horloge : commencez 10h et faites glisser la souris jusqu 4h), comme dans lillustration
suivante.
Remarque : Si vous navez pas trac le cercle correctement, appuyez sur Ctrl+Z (Windows) ou
Commande+Z (Macintosh) pour leffacer.
3 Dans la barre doutils, cliquez sur loutil Slection. Sur la scne, cliquez dans le cercle et appuyez
sur Retour arrire ou Suppr.
60 Chapitre 7 : Dessiner dans Flash
Transformer la forme du dessin
Loutil Transformation libre permet de redimensionner, faire pivoter, compresser, tirer ou
incliner les lignes et les formes. Utilisez loutil Transformation libre pour compresser le dessin.
1 Dans la barre doutils, slectionnez loutil Transformation libre. Double-cliquez sur lhexagone
dans la scne pour slectionner la fois le trait et le remplissage.
2 Faites glisser la poigne situe au milieu de la bordure suprieure du cadre de loutil
Transformation libre pour donner lhexagone la forme suivante :
Copier des traits
Vous pouvez slectionner des traits et les copier. Entranez-vous crer la face infrieure du boulon.
1 A laide de loutil Slection, cliquez nimporte o dans la scne ou lespace de travail pour
dslectionner la forme.
2 Maintenez la touche Maj enfonce et cliquez sur les trois lignes infrieures de lhexagone sur la
scne afin de les slectionner, comme illustr ci-dessous :
3 Appuyez sur Maj + Alt et dplacez lgrement la souris vers le bas pour faire glisser une copie
des trois lignes, comme illustr ci-dessous :
Utiliser loutil Ligne
Loutil Ligne permet de tracer des lignes dans nimporte quelle direction.
Dans la barre doutils, slectionnez loutil Ligne. Sur la scne, dessinez quatre lignes verticales
reliant lhexagone aux lignes que vous avez copies plus bas, comme illustr ci-dessous :
Crer un logo laide de loutil Plume 61
Slectionner et ajouter une autre couleur de remplissage
Vous pouvez utiliser loutil Pot de peinture pour modifier une couleur existante et colorer les
zones vides dlimites par des lignes. Utilisez loutil Pot de peinture pour ajouter une couleur de
remplissage aux zones vides de votre dessin.
1 Dans la barre doutils, slectionnez loutil Pot de peinture. Dans la zone Couleurs, cliquez sur
Couleur de remplissage et slectionnez le bleu correspondant la valeur hexadcimale #3366FF.
2 Sur la scne, cliquez lintrieur des lignes pour ajouter la couleur slectionne aux zones vides :
Grouper la forme
Vous pouvez manipuler sparment le trait et le remplissage dune forme, comme vous lavez fait
jusquici, ou les grouper pour manipuler la forme comme une image part entire. Cest ce que
vous allez faire maintenant.
1 A laide de loutil Slection, entourez la forme pour slectionner la fois le trait et le remplissage.
Slectionnez Modification > Grouper.
2 Cliquez sur la zone de remplissage et dplacez la forme sur le ct gauche de la scne pour la
placer o vous voulez.
Crer un logo laide de loutil Plume
Loutil Plume permet de dessiner avec prcision des segments de lignes droites et courbes. Vous
devez cliquer pour crer les points des segments de lignes droites ou cliquer et faire glisser la souris
pour crer les points des segments de lignes courbes. Pour ajuster les segments, dplacez les points
de la ligne. Vous allez utiliser loutil Plume pour crer le logo.
1 Dans la barre doutils, slectionnez loutil Plume.
2 Cliquez sur le point situ ct du chiffre 1, puis sur le point situ ct du chiffre 2 pour crer
un segment de ligne droite.
3 Cliquez sur le point situ ct du chiffre 3, puis sur le point situ ct du chiffre 4 (comme
si vous faisiez un dessin par numros) pour crer les segments de ligne droite du logo.
4 Pour terminer le trac, placez loutil Plume sur le premier point dancrage (le point numro 1).
Un petit cercle apparat en regard de la plume lorsquelle est correctement positionne. Cliquez
pour fermer le trac. Une fois le trac ferm, la couleur de remplissage slectionne
prcdemment apparat.
Par dfaut, les points de courbe slectionns sont reprsents par des cercles vides, alors que les
points dangle slectionns sont reprsents par des carrs vides.
62 Chapitre 7 : Dessiner dans Flash
5 A laide de loutil Slection, dplacez le pointeur sur le logo que vous venez de crer.
Lorsque vous passez le pointeur sur un angle qui peut tre modifi, le pointeur prend la forme
suivante :
Lorsque vous passez le pointeur sur un segment de ligne courbe qui peut tre modifi (mais
votre logo ne comporte pas de points de courbe), le pointeur prend la forme suivante :
Rsum
Flicitations, vous savez dsormais utiliser plusieurs outils de dessin de Flash. En quelques
minutes vous avez appris accomplir les tches suivantes :
Crer un polygone
Faire pivoter une forme
Dcouper une forme dans une autre forme
Transformer une illustration
Copier des traits
Utiliser loutil Ligne
Slectionner et ajouter une couleur de remplissage
Grouper une forme
Crer un logo laide de loutil Plume
Pour en savoir plus sur la cration dillustrations dans Flash, consultez Dessin dans le guide
Utilisation de Flash de laide.
63
CHAPITRE 8
Crer des symboles et des occurrences
Un symbole est un objet rutilisable. Chaque utilisation dun symbole sur la scne sappelle une
occurrence. La multiplication du nombre doccurrences sur la scne naugmente pas la taille du
fichier et constitue donc un moyen efficace de limiter la taille de fichier dun document. Les
symboles facilitent galement la modification des documents ; lorsque vous modifiez un symbole,
toutes ses occurrences sont mises jour. Enfin, ils permettent de crer une interactivit complexe.
Dans cette leon, vous allez utiliser des symboles et des occurrences pour raliser les tches
suivantes :
Crer un symbole graphique
Dupliquer et modifier une occurrence
Crer un symbole de clip
Modifier un symbole par lajout dun effet
Configurer votre espace de travail
Dans un premier temps, vous devez ouvrir le fichier de dmarrage de cette leon et configurer
votre espace de travail afin de suivre vos leons dans un cadre optimal.
1 Pour ouvrir votre fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur symbols_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\
BasicFlash\start_files et double-cliquez sur symbols_start.fla.
Sur Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur
symbols_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
64 Chapitre 8 : Crer des symboles et des occurrences
Le document souvre dans lenvironnement auteur de Flash.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Tout au long de cette leon, pensez enregistrer frquemment votre travail.
3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer lespace
de travail.
A propos de la cration de symboles
Lorsque vous crez un symbole, vous devez spcifier lun des comportements de symbole
suivants :
Graphique
Clip
Bouton
Dans cette leon, vous allez manipuler des symboles de clip et des symboles graphiques. Pour
suivre une leon sur les symboles de bouton, choisissez Aide > Comment > Bases de Flash >
Ajouter de lanimation et des lments de navigation aux boutons.
Crer un symbole graphique
Un symbole graphique convient tout particulirement lutilisation rpte dimages statiques ou
la cration danimations associes au scnario principal. Vous ne pouvez pas attribuer de noms
doccurrence aux symboles graphiques, ni y faire rfrence dans ActionScript, contrairement aux
symboles de clip et de bouton.
Vous allez convertir en symbole graphique une illustration vectorielle prsente sur la scne.
1 Dans la barre doutils, cliquez sur loutil Slection.
2 Sur la scne, slectionnez la voiture en traant un cadre de slection autour delle.
3 Choisissez Modification > Convertir en symbole.
4 Dans la bote de dialogue Convertir en symbole, entrez le nom ImageVoiture et slectionnez le
comportement Image.
5 La grille dalignement affiche un petit carr noir pour indiquer lemplacement du point
dalignement dans le cadre de dlimitation. Le point dalignement reprsente laxe autour
duquel le symbole tourne et le point sur lequel il saligne. Cliquez sur la case suprieure gauche
dans la grille pour slectionner lemplacement du point dalignement et cliquez sur OK.
6 Sur la scne, la voiture est maintenant une occurrence du symbole ImageVoiture. Linspecteur
des proprits affiche les proprits de loccurrence du symbole graphique.
7 Ouvrez le panneau Bibliothque (Fentre > Bibliothque) pour afficher le symbole.
Modifier un symbole 65
Le panneau Bibliothque contient maintenant le symbole ImageVoiture. Flash rassemble les
symboles dans la bibliothque. Chaque document possde sa propre bibliothque ; vous
pouvez partager les bibliothques entre plusieurs fichiers FLA.
Dupliquer et modifier une occurrence de symbole
Une fois que vous avez cr un symbole, vous pouvez en multiplier les occurrences dans le
document. Vous pouvez modifier les proprits suivantes dune occurrence sans affecter les autres
occurrences du symbole : couleur, chelle, rotation, transparence alpha, luminosit, teinte,
hauteur, largeur et emplacement.
Si vous modifiez le symbole ultrieurement, loccurrence conserve les proprits qui lui sont
propres tout en refltant la nouvelle dfinition du symbole.
Vous allez maintenant dupliquer loccurrence de la voiture, puis modifier la teinte de la copie.
1 Sur la scne, slectionnez la voiture. Maintenez la touche Alt enfonce et faites glisser la voiture
vers le haut pour crer une autre occurrence.
2 Aprs avoir slectionn la copie, choisissez Teinte dans le menu droulant Couleur de
linspecteur des proprits.
3 Dans la zone RVB, entrez 0 pour le rouge, 0 pour le vert et 255 pour le bleu. Appuyez ensuite
sur Entre ou sur Retour.
Loccurrence copie devient bleue ; loccurrence dorigine reste inchange.
Modifier un symbole
Vous pouvez passer en mode ddition de symbole en double-cliquant sur nimporte quelle
occurrence dun symbole. Les modifications apportes dans ce mode sont rpercutes dans toutes
les occurrences du symbole.
1 Effectuez lune des oprations suivantes pour passer en mode ddition de symbole :
Sur la scne, double-cliquez sur lune des occurrences de la voiture.
Dans le panneau Bibliothque, double-cliquez sur le symbole ImageVoiture.
Le nom du symbole saffiche prs de la squence 1, en haut de lespace de travail. Cela vous
indique que vous tes en mode ddition du symbole concern.
2 Dans la barre doutils, slectionnez loutil Transformation libre et faites-le glisser autour de la
voiture du haut pour la slectionner entirement.
66 Chapitre 8 : Crer des symboles et des occurrences
En mode ddition de symbole, la voiture est une image que vous pouvez manipuler comme
nimporte quelle autre illustration vectorielle.
3 Faites glisser lgrement droite la poigne de redimensionnement de loutil Transformation
libre pour tirer le symbole.
4 Cliquez sur Squence 1 au-dessus du scnario pour quitter le mode ddition de symbole.
La transformation est applique aux deux occurrences du symbole.
Crer un symbole de clip
Un symbole de clip est trs similaire un sous-document dans un document. Ce type de symbole
possde son propre scnario indpendant du scnario principal. Vous pouvez ajouter des clips
lintrieur dautres clips et de boutons afin de crer des clips imbriqus. Vous pouvez galement
utiliser linspecteur des proprits pour affecter un nom doccurrence un clip et le rfrencer
dans ActionScript.
Vous allez convertir en clip le pneu prsent sur la scne.
1 A laide de loutil Slection, cliquez sur le pneu pour le slectionner et choisissez Modification >
Convertir en symbole.
2 Dans la bote de dialogue Convertir en symbole, entrez le nom ClipRoue et slectionnez le
comportement Clip.
3 Dans la grille dalignement, slectionnez cette fois le carr central en tant que point
dalignement, pour que laxe de rotation du symbole soit au centre du clip. Cliquez sur OK.
Sur la scne, limage est maintenant une occurrence du symbole ClipRoue.
Nommer loccurrence de clip
Pour faire rfrence une occurrence de symbole de bouton ou de clip dans ActionScript, vous
devez la nommer. Il est recommand de toujours effectuer cette opration. Vous ne pouvez pas
affecter de nom doccurrence aux symboles graphiques.
Dans linspecteur des proprits, aprs avoir slectionn loccurrence de ClipRoue sur la scne,
entrez roue_mc dans la zone de texte Nom de loccurrence.
Ajouter un effet au clip
En mode ddition de symbole, vous pouvez crer une animation indpendante du scnario
principal dans un scnario de clip. Vous allez ajouter un effet au symbole ClipRoue pour faire
tourner toutes les occurrences du symbole.
1 A laide de loutil Slection, double-cliquez sur loccurrence roue_mc pour passer en mode
ddition de symbole.
2 Cliquez sur le symbole avec le bouton droit de la souris (Windows) ou en appuyant sur la touche
Contrle (Macintosh), puis slectionnez Effets de scnario > Transformation/Transition >
Transformer.
Rsum 67
3 Dans la bote de dialogue Transformer, entrez 60 dans la zone de texte Dure pour indiquer que
leffet stale sur 60 images du scnario.
4 Dans la zone de texte Rotation, entrez 1 et vrifiez que la zone de texte Faire pivoter contient le
chiffre 360.
5 Cliquez sur Mettre jour laperu pour visualiser leffet, puis cliquez sur OK.
Leffet stend sur 60 images du scnario du clip.
6 Cliquez sur Squence 1 au-dessus du scnario pour quitter le mode ddition de symbole.
7 Choisissez Contrle > Tester lanimation pour visualiser lanimation.
Rsum
Flicitations, vous connaissez dsormais lutilit des symboles et des occurrences. En quelques
minutes, vous avez accompli les tches suivantes :
Crer un symbole graphique
Dupliquer et modifier une occurrence
Crer un symbole de clip
Modifier un symbole par lajout dun effet
Pour en savoir plus sur Flash, choisissez une autre leon de la srie Bases de Flash.
68 Chapitre 8 : Crer des symboles et des occurrences
69
CHAPITRE 9
Ajouter de lanimation et des lments de
navigation aux boutons
Un bouton est un symbole contenant des images spcifiques diffrents tats du bouton, comme
lorsque le pointeur de la souris de lutilisateur survole le bouton ou lorsque lutilisateur clique sur
le bouton. Lorsque vous slectionnez le comportement de bouton pour un symbole, Macromedia
Flash MX 2004 et Macromedia Flash MX Professionnel 2004 crent le scnario des tats du
bouton. Vous pouvez ajouter des lments de navigation aux boutons en utilisant des
comportements ou en rdigeant des instructions ActionScript.
Cette leon vous permettra dapprendre crer et modifier les boutons et mme dy ajouter de
lanimation. Plus particulirement, elle vous permettra daccomplir les tches suivantes :
Crer un bouton partir dobjets groups
Attribuer un nom une occurrence de bouton
Afficher la zone active dun bouton
Modifier la zone active dun bouton
Aligner des boutons
Crer une animation pour un tat de bouton
Ajouter une action un bouton
Ajouter un lment de navigation un bouton
Si vous ne connaissez pas les symboles et occurrences, avant de commencer cette leon,
slectionnez Aide > Comment > Bases de Flash > Crer des symboles et des occurrences pour
aborder cette leon.
Configurer votre espace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur buttons_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
70 Chapitre 9 : Ajouter de lanimation et des lments de navigation aux boutons
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\
BasicFlash\ start_files et double-cliquez sur buttons_start.fla.
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia/Flash MX
2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur
buttons_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
dans le mme dossier, afin de conserver le fichier de dmarrage dorigine.
3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre
espace de travail afin daborder les leons.
4 Dans le menu daffichage de la scne, dans langle suprieur droit du scnario, slectionnez
Afficher une image pour afficher la scne et lespace de travail.
5 Cliquez sur lespace de travail, ailleurs que sur un objet de la scne.
Crer un bouton partir dobjets groups
Vous pouvez crer des boutons partir de texte et de graphiques, y compris des images bitmap et
des objets groups. Dans cette leon, vous allez crer un gros bouton partir dun logo et dun
texte.
1 Dans la barre doutils, cliquez sur loutil de slection. Sur la scne, slectionnez le texte group
et le logo, puis slectionnez Modification > Convertir en symbole.
2 Dans la bote de dialogue Convertir en symbole, nommez le symbole BTNLogo, puis
slectionnez Bouton comme comportement.
3 Dans la grille dalignement, vrifiez que le carr dans le coin suprieur gauche est slectionn
comme point dalignement, puis cliquez sur OK.
Le point dalignement est le point partir duquel le symbole est align et tourn.
Attribuer un nom une occurrence de bouton
Il est recommand de nommer les occurrences des symboles sur la scne. ActionScript utilise le
nom de loccurrence pour identifier lobjet.
Avec le bouton cr toujours slectionn, ouvrez linspecteur de proprits (Fentre >
Proprits). Dans le champ Nom de loccurrence, tapez logo_btn.
Modifier la zone active dun bouton 71
Afficher la zone active d'un bouton
Une fois la fonction Activer les boutons simples slectionne, vous pouvez afficher les aspects les
moins complexes de vos boutons, comme la zone active (la zone dun bouton sur laquelle vous
pouvez cliquer) et les couleurs utilises pour les tats de bouton. Les effets plus complexes, tels que
lanimation, ne sont pas lus.
1 Cliquez sur un espace vierge de la zone de travail pour vous assurer de ne slectionner aucun
objet.
2 Slectionnez Contrle > Activer les boutons simples, puis dplacez le pointeur de la souris pour
survoler diffrentes zones du bouton cr.
Les seules zones du bouton sur lesquelles vous pouvez cliquer (telles quindiques lorsque le
pointeur se transforme en main) sont la zone de texte et le logo. Lespace blanc autour du texte
et du logo ne peut pas tre slectionn.
3 Slectionnez de nouveau Contrle > Activer les boutons simples pour dsactiver la fonction afin
de pouvoir modifier le bouton.
Vous redfinirez ensuite la zone active afin que la zone du bouton couvre lensemble de la zone
groupe.
Modifier la zone active dun bouton
Vous pouvez spcifier une zone active de taille diffrente de celle de la zone active par dfaut
en ajoutant une image-cl limage Cliqu du symbole de bouton, puis en traant une forme
dfinissant la zone active.
1 Sur la scne, double-cliquez sur le bouton du logo cr pour afficher le bouton Scnario.
Le bouton Scnario contient les tats suivants :
Haut
Survol
Bas
Cliqu
2 Double-cliquez sur le nom du Calque 1 du scnario et renommez-le Hit Area.
3 Slectionnez limage Cliqu (Image 4) du calque Hit Area du scnario BTNLogo, puis appuyez
sur la touche F6 pour ajouter une image-cl.
4 Dans la barre doutils, slectionnez loutil Rectangle. La couleur de trait et de remplissage
importent peu. Sur la scne, tracez un rectangle qui couvre, aussi exactement que possible,
le logo et le texte.
Le rectangle dfinit dsormais la zone du bouton sur laquelle vous pouvez cliquer.
5 Cliquez sur Squence 1, au-dessus du ct suprieur gauche de la scne, pour quitter le mode
ddition de symbole du bouton.
6 Slectionnez Contrle > Activer les boutons simples.
7 Sur la scne, dplacez de nouveau le pointeur sur le texte.
La zone active prend la forme du rectangle trac.
8 Slectionnez Contrle > Activer les boutons simples pour dsactiver cette fonction.
72 Chapitre 9 : Ajouter de lanimation et des lments de navigation aux boutons
Aligner des boutons
Vous pouvez aligner des boutons sur des axes horizontaux et verticaux laide du panneau Aligner.
1 Dans le scnario, cliquez sur le calque Content.
2 Cliquez sur le bouton Insrer un calque en dessous du scnario.
3 Double-cliquez sur le nom du calque, entrez Animated Buttons comme nouveau nom du
calque, puis appuyez sur Entre ou Retour.
4 Dans le panneau Bibliothque (Fentre > Bibliothque), slectionnez Button 1 et faites-le
glisser vers le bord infrieur droit de la scne. Un positionnement exact nest pas ncessaire.
5 Dans le champ Nom de loccurrence de linspecteur de proprits, attribuez le nom
doccurrence links_btn au bouton.
6 Faites glisser les boutons 2 et 3 de la bibliothque pour les placer gauche de Button 1.
Respectez approximativement lespacement illustr ci-dessous :
7 A laide de loutil Flche, tracez un cadre de slection autour des trois boutons.
8 Ouvrez le panneau Aligner en slectionnant Fentre > Panneaux de conception graphique >
Aligner. Vrifiez que Vers la scne nest pas slectionn car vous nallez pas aligner les boutons
par rapport la scne.
9 Dans le panneau Aligner, cliquez sur Aligner les centres verticalement, puis cliquez sur Rpartir
horizontalement par rapport au centre.
Les boutons sont aligns sur la scne.
10 Fermez le panneau Aligner.
11 Sur la scne, cliquez sur un espace vierge de la zone de travail pour vous assurer de ne
slectionner aucun objet, puis slectionnez Button 2. Dans le champ Nom de loccurrence de
linspecteur de proprits, saisissez contact_btn. Slectionnez Button 3 et nommez-le
sweepstakes_btn.
Crer une animation pour un tat de bouton
Vous allez crer un clip dans ltat Dessus de Button 1, puis crer une interpolation de forme dans
le clip. Linterpolation de forme cre un effet de changement de couleur, du gris au rouge.
1 Sur la scne, double-cliquez sur Button 1 pour louvrir en mode ddition de symbole.
2 Dans le scnario de Button 1, masquez tous les calques lexception de Color. Dans le calque
Color, slectionnez limage-cl Dessus.
Remarque : Vous masquez les calques en cliquant sur le point sous la colonne daffichage en
regard du nom du calque afin quune croix rouge apparaisse.
3 Sur la scne, slectionnez la forme ovale noire pour Button 1. Appuyez sur la touche F8 pour
faire de lovale un symbole.
4 Dans la bote de dialogue Convertir en symbole, nommez le symbole Button Animation.
Slectionnez Clip (et non Bouton) comme comportement, puis cliquez sur OK.
Ajouter une action un bouton 73
5 Sur la scne, double-cliquez sur le symbole Button Animation pour passer en mode ddition de
symbole.
6 Renommez le Calque 1 Color Change. Slectionnez limage 15, puis appuyez sur la touche F6
pour ajouter une image-cl.
7 La tte de lecture se trouvant toujours sur limage 15, slectionnez la forme du bouton sur la
scne, puis, dans linspecteur de proprits, slectionnez un ton de rouge clatant dans le menu
droulant Couleur de remplissage.
8 Dans le scnario, cliquez sur une image comprise entre les images 1 et 15. Dans linspecteur de
proprits, choisissez Forme dans le menu droulant Interpolation.
Faites glisser la tte de lecture sur les images 1 15 pour visualiser linterpolation de couleur.
Ajouter une action un bouton
Lorsque lutilisateur clique sur le bouton et que linterpolation est lue, la tte de lecture doit passer
la fin du scnario Button Animation, avant de sarrter. Vous utiliserez ActionScript pour
contrler le mouvement de la tte de lecture dans un scnario.
1 Ajoutez un calque dans le scnario Button Animation et nommez-le Actions.
2 Sur le calque Actions, ajoutez une image-cl dans limage 15 en appuyant sur la touche F6.
3 Ouvrez le panneau Actions (Fentre > Panneaux de dveloppement > Actions) et, si ncessaire,
agrandissez-le pour afficher la bote outils Actions et la fentre de script.
4 Avec limage 15 du calque Actions slectionne, accdez la catgorie Fonctions globales >
Contrle du scnario de la bote outils Actions, puis double-cliquez sur stop.
Laction stop vous permet de spcifier que la tte de lecture doit sarrter lorsquelle atteint
limage 15.
Dans le scnario Button Animation, limage 15 du calque Actions contient maintenant un
petit a, qui indique quune action lui est associe.
5 Cliquez sur Squence 1, au-dessus de la scne, pour quitter le mode ddition de symbole et
revenir au document principal.
6 Cliquez sur le menu doptions en haut droite du panneau Actions, puis slectionnez Fermer le
panneau pour fermer le panneau.
7 Slectionnez Contrle > Activer les boutons simples afin de pouvoir tester le bouton anim.
8 Sur la scne, dplacez le pointeur sur le bouton, puis cliquez dessus.
9 Slectionnez Contrle > Activer les boutons simples pour dsactiver cette fonction.
74 Chapitre 9 : Ajouter de lanimation et des lments de navigation aux boutons
Ajouter un lment de navigation un bouton
Grce aux comportements, vous pouvez rapidement ajouter un lment de navigation un
bouton sans ncessairement connatre ActionScript. Vous allez ajouter un lment de navigation
pour ouvrir une page Web lorsque lutilisateur clique sur un bouton.
1 Sur la scne, slectionnez loccurrence de Button 1.
2 Dans le panneau Comportements (Fentre > Panneaux de dveloppement > Comportements),
cliquez sur le bouton Ajout dun comportement, puis slectionnez Web > Atteindre la page
Web.
3 Dans la bote de dialogue Atteindre lURL, slectionnez _blank pour ouvrir lURL dans
une nouvelle fentre de navigateur. Dans le champ URL, acceptez le paramtre par dfaut
http://www.macromedia.com ou saisissez une autre URL. Cliquez sur OK.
4 Si vous le souhaitez, rptez les tapes ci-dessus, en slectionnant Button 2, puis Button 3, pour
ajouter un lment de navigation ces boutons galement.
5 Cliquez sur le menu Options en haut droite du panneau Comportement, puis slectionnez
Fermer le panneau pour fermer le panneau.
Tester le fichier SWF
Vous allez tester votre document pour afficher lanimation du bouton et vrifier que la navigation
fonctionne comme vous le souhaitez.
1 Sauvegardez votre document et slectionnez Contrle > Tester lanimation.
2 Dplacez le pointeur de la souris sur loccurrence de Button 1 pour afficher lanimation de
couleur cre.
3 Cliquez sur le bouton pour visualiser si votre navigateur Web ouvre lURL spcifie.
4 Si vous avez ajout un lment de navigation aux deux autres boutons, testez-les galement.
5 Une fois la visualisation du fichier SWF termine, fermez le fichier SWF et les fentres du
navigateur Web.
Rsum 75
Rsum
Flicitations, vous matrisez prsent les boutons. En quelques minutes, vous avez appris
accomplir les tches suivantes :
Crer un bouton partir dobjets groups
Attribuer un nom une occurrence de bouton
Afficher la zone active dun bouton
Modifier la zone active dun bouton
Aligner des boutons
Crer une animation pour un tat de bouton
Ajouter une action un bouton
Ajouter un lment de navigation un bouton
Pour en savoir plus sur Flash, choisissez une autre leon.
76 Chapitre 9 : Ajouter de lanimation et des lments de navigation aux boutons
77
CHAPITRE 10
Ajouter du texte statique, de saisie ou dynamique
Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004 fournissent de
nombreuses fonctionnalits et options de texte. Cette leon prsente les trois principaux types de
texte qui peuvent tre ajouts un document. Vous pouvez utiliser du texte statique pour ajouter
des titres, des tiquettes ou dautres contenus textuels dans un document. Vous pouvez utiliser du
texte de saisie pour permettre aux utilisateurs dinteragir avec votre application Flash, par exemple
pour entrer leurs noms et dautres informations dans un formulaire. Le troisime type de texte est
le texte dynamique. Les champs de texte dynamique servent afficher du texte qui change selon les
critres que vous spcifiez. Par exemple, vous pouvez utiliser un champ de texte dynamique pour
ajouter des valeurs stockes dans dautres champs de texte, telles que la somme de deux nombres.
A lissue de cette leon, pensez essayer les autres options de texte dcrites dans la section
Utilisation du texte du guide Utilisation de Flash de laide.
Dans cette leon, vous allez ajouter du texte et des champs de texte un document en ralisant les
oprations suivantes :
Crer un bloc de texte de taille variable
Crer un bloc de texte de taille fixe
Modifier du texte et des attributs de police
Slectionner des polices de priphrique
Ajouter un champ de saisie de texte
Copier un champ de texte
Attribuer des noms doccurrence aux champs de texte
Crer un champ de texte dynamique
Afficher du code ActionScript qui relie le champ de texte un fichier texte externe
Configurer et vrifier lorthographe
78 Chapitre 10 : Ajouter du texte statique, de saisie ou dynamique
Configurer votre espace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur text_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\
BasicFlash\ start_files et double-cliquez sur text_start.fla.
Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoIBasicFlash/start_files, puis double-cliquez sur
text_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine et le lien du fichier vers les
fichiers dpendants.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
4 Dans le menu daffichage de la scne, dans langle suprieur droit du scnario, slectionnez
Afficher une image pour afficher la scne et lespace de travail.
5 Dans la barre doutils, cliquez sur loutil de slection. Dans le Scnario, cliquez sur le calque
Static Text pour slectionner le calque de travail.
Crer un bloc de texte de taille variable
Vous pouvez dfinir la taille dun bloc de texte ou utiliser un bloc dont la taille sadaptera au texte
saisi. Pour commencer cette leon, vous allez simplement ajouter du texte un document.
1 Cliquez sur une zone vide de lespace de travail en veillant ne slectionner aucune image de
scnario et aucun objet de la scne.
2 Dans la barre doutils, slectionnez loutil Texte.
3 Dans linspecteur des proprits, dfinissez les options suivantes :
Dans le menu droulant Type de texte, slectionnez Texte statique sil nest pas dj
slectionn.
Pour la police, slectionnez Arial.
Pour la taille de la police, entrez 13.
Crer un bloc de texte de taille fixe 79
Cliquez sur la zone de couleur de texte et slectionnez le gris avec une valeur hexadcimale
de #666666.
Slectionnez Aligner gauche, sil nest pas dj slectionn.
4 Dans le Scnario, slectionnez le calque Static Text.
5 Loutil Texte tant toujours slectionn, cliquez sur la scne sur le bord gauche du repre de
Texte 1 et entrez Trio ZX2004 Safety Features.
Lorsque vous saisissez du texte avec loutil Texte slectionn, vous crez un bloc de texte dune
ligne de taille variable. Un bloc de texte dune ligne de taille variable se reconnat sa poigne
ronde dans langle suprieur droit.
6 Si ncessaire, alignez le texte situ au-dessus du repre de Texte 1. Pour ce faire, cliquez sur
loutil de slection dans la barre doutils et faites glisser votre texte sur le repre.
Remarque : Le repre du Texte 1 est situ sur un calque de repre qui napparat pas dans le
fichier SWF.
Crer un bloc de texte de taille fixe
Vous pouvez non seulement crer une ligne de texte de taille variable, mais aussi un bloc de texte
de taille fixe. Dans un bloc de texte de taille fixe, le texte est automatiquement renvoy la ligne.
Vous allez prsent crer un bloc de texte statique de dimensions fixes.
1 Vrifiez que le calque Static Text est toujours slectionn dans le scnario et utilisez loutil de
slection pour dslectionner les objets de la scne ou les images du scnario (cliquez dans la
zone de travail, ailleurs que sur un objet).
2 Dans la barre doutils, slectionnez loutil Texte.
3 Dans linspecteur des proprits, dfinissez la taille du texte sur 10 points.
4 Sur la scne, faites glisser votre pointeur sur la zone du repre de Text 2.
Un bloc de texte statique dune ligne de taille variable se reconnat sa poigne ronde dans
langle suprieur droit. Un bloc de texte de taille fixe a une poigne carre.
5 Dans le bloc de texte que vous avez cr, entrez Want to learn more?
Remarque : Vous pouvez faire glisser la poigne carre dun bloc de texte pour modifier sa taille.
En outre, vous pouvez double-cliquer sur une poigne carre pour la convertir en poigne ronde,
extensible.
6 Si ncessaire, cliquez sur loutil de slection dans la barre doutils et faites glisser le texte saisi au-
dessus du repre de Text 2 pour aligner le texte.
80 Chapitre 10 : Ajouter du texte statique, de saisie ou dynamique
Modifier du texte et des attributs de police
Lorsque vous slectionnez le texte, linspecteur des proprits affiche les options de formatage de
texte standard. Vous pouvez utiliser linspecteur des proprits pour modifier la police et la taille
dun objet texte slectionn.
1 Dans la barre doutils, cliquez sur loutil de slection. Double-cliquez sur le texte de la scne
intitule Submit your contact information .
2 Slectionnez la lettre S, puis entrez Please s, de sorte que le message devienne Please submit
your contact information .
3 Dans la barre doutils, cliquez sur loutil de slection. Utilisez linspecteur des proprits pour
slectionner le style gras.
4 Cliquez sur la commande Couleur de remplissage et choisissez une couleur diffrente pour le
texte, une autre nuance de gris par exemple.
Slectionner des polices de priphrique
Lorsque vous utilisez une police installe sur votre systme dans un document Flash, ses
informations sont intgres au fichier SWF Flash, garantissant ainsi laffichage correct de la police.
Vous pouvez galement slectionner loption Utiliser les polices de priphrique. Cette option
recherche sur lordinateur de lutilisateur les polices qui ressemblent le plus la police de
priphrique spcifie. Les polices de priphriques sont disponibles avec du texte statique
uniquement.
Vous devez spcifier que le texte slectionn utilise des polices de priphriques.
1 Le texte Please submit your contact information toujours slectionn sur la scne,
slectionnez _sans dans le menu droulant Police de linspecteur des proprits.
2 Dans linspecteur des proprits, slectionnez Utiliser les polices de priphrique.
Le texte ne change pas dapparence si la police Arial est installe sur votre ordinateur.
Ajouter un champ de saisie de texte
Vous pouvez utiliser un champ de saisie de texte pour que les utilisateurs puissent interagir avec
votre application Flash. Par exemple, les champs de saisie de texte permettent de crer un
formulaire trs simplement.
Dans une autre leon (slectionnez Aide > Comment > Bases dActionScript > Crer un
formulaire avec une logique conditionnelle et envoyer des donnes), vous apprendrez utiliser un
champ de saisie de texte pour envoyer des donnes de Flash vers un serveur. Vous allez maintenant
ajouter un champ dans lequel les utilisateurs vont entrer leur prnom.
1 Dans le Scnario, slectionnez le calque Input Text.
2 Avec loutil de slection, cliquez dans la zone de travail, ailleurs que sur les objets de la scne.
3 Dans la barre doutils, slectionnez loutil Texte.
4 Dans linspecteur des proprits, dfinissez les options suivantes :
Slectionnez Texte de saisie dans le menu droulant Type de texte.
Slectionnez Arial dans le menu droulant Police.
Pour la taille de la police, entrez 8.
Cliquez sur la zone de couleur de texte et slectionnez une nuance de bleu fonc.
Attribuer des noms doccurrence aux champs de texte 81
Slectionnez le bouton Texte alias.
Ce bouton rend le texte de petite taille plus lisible. Pour le texte de saisie, cette option est
supporte dans Macromedia Flash Player 7 et ses versions ultrieures.
Slectionnez Ligne simple dans le menu droulant Type de ligne et vrifiez que loption
Afficher la bordure autour du texte est slectionne.
Loption Ligne simple affiche le texte sur une seule ligne. Loption Afficher la bordure autour
du texte affiche les limites du champ de texte laide dune bordure.
5 Sur la scne, faites glisser le pointeur droite du texte First Name afin de crer un champ de
saisie de texte.
6 Utilisez au besoin loutil de slection pour repositionner le champ.
Copier un champ de texte
Pour dupliquer un objet rapidement sur la scne, maintenez la touche Alt enfonce et faites glisser
lobjet. Lobjet original reste sa place et vous pouvez dplacer lobjet dupliqu. Vous allez utiliser
la touche Alt pour crer deux copies du champ de saisie de texte que vous avez cr.
1 Sur la scne, slectionnez loutil de slection, cliquez sur le champ de saisie de texte que vous
avez cr et appuyez sur la touche Alt du clavier. Faites glisser une copie du champ droite du
champ Last Name.
2 Cliquez sur ce champ tout en appuyant sur la touche Alt, puis faites glisser la nouvelle copie du
champ vers le champ eMail Address.
Attribuer des noms doccurrence aux champs de texte
Un champ de saisie de texte sur la scne est une occurrence de lobjet TextField ActionScript,
auquel vous pouvez appliquer des proprits et des mthodes. Il est recommand de nommer les
occurrences de champ de saisie de sorte que les autres personnes travaillant sur le projet puissent
se rfrer loccurrence dans ActionScript.
1 Slectionnez le champ que vous avez plac ct de First Name. Dans linspecteur des
proprits, entrez firstName_txt dans la zone de texte Nom de loccurrence.
2 Slectionnez le champ que vous avez plac ct de Last Name. Dans linspecteur des
proprits, entrez lastName_txt dans la zone de texte Nom de loccurrence.
3 Slectionnez le champ que vous avez plac ct de eMail Address. Dans linspecteur des
proprits, entrez eMail_txt dans la zone de texte Nom de loccurrence.
Pour en savoir plus sur lobjet TextField, consultez Utilisation du texte dans le Guide de
rfrence ActionScript de laide.
82 Chapitre 10 : Ajouter du texte statique, de saisie ou dynamique
Crer un champ de texte dynamique
Un texte dynamique peut afficher du texte provenant de sources externes lexcution. Vous allez
maintenant crer un champ de texte dynamique reli un fichier texte externe. Le fichier texte
externe que vous allez utiliser sappelle safetyFeatures.txt. Il est situ dans le mme dossier que le
fichier FLA de la leon. Le fichier FLA contient dj le fichier ActionScript permettant dafficher
le texte lorsque vous testez ou publiez le document.
1 Dans le Scnario, slectionnez le calque Dynamic Text. Avec loutil de slection, cliquez dans la
zone de travail et dslectionnez tous les objets.
2 Slectionnez loutil Texte dans la barre doutils.
3 Dans linspecteur des proprits, dfinissez les options suivantes :
Slectionnez Texte dynamique dans le menu droulant Type de texte.
Pour les attributs de texte, dfinissez le type de texte sur Verdana avec une taille de police 6.
Pour Type de ligne, slectionnez Multiligne pour que le texte soit renvoy la ligne.
Cliquez sur la zone de couleur de texte et slectionnez une nuance de gris fonc.
Slectionnez lattribut de paragraphe Aligner gauche sil nest pas dj slectionn.
4 Sur la scne, faites glisser un champ de texte pour en crer un nouveau entre les deux rgles
horizontales.
5 Dans la zone de texte Nom de loccurrence de linspecteur des proprits, nommez le champ
dynamique newFeatures_txt.
Le code ActionScript du document charge un fichier texte externe situ dans le mme dossier
que votre document. Le code ActionScript est configur pour charger le texte dans un champ
appel newFeatures_txt.
Spcifier des options de format
La bote de dialogue Options de format permet de spcifier les paramtres de marge et de retrait
du texte.
1 Le champ de texte dynamique tant toujours slectionn sur la scne, cliquez sur Format dans
linspecteur des proprits.
2 Dans la zone de texte Marge gauche, entrez 5 et dans la zone de texte Marge droite, entrez 5.
Cliquez sur OK.
Les marges gauche et droite du texte dynamique sont dsormais de 5 pixels dans le champ
de texte.
Vrifier lorthographe 83
Afficher le code ActionScript pour le champ de texte dynamique
Vous pouvez afficher le code ActionScript qui charge le texte du fichier texte externe dans le
champ dynamique. Ce script utilise des actions LoadVars pour charger le contenu du fichier
safetyfeatures.txt dans le champ newFeatures.
1 Dans le scnario, slectionnez limage 1 du calque Actions.
2 Slectionnez Fentre > Panneaux de dveloppement > Actions ou appuyez sur la touche F9.
Le code ActionScript saffiche comme suit :
// Charger le texte comme variable et laffecter un champ de texte
dynamique
Features_lv = new LoadVars();
Features_lv.onLoad = onText;
Features_lv.load("safetyfeatures.txt");
function onText() {
newFeatures_txt.text = Features_lv.safetyFeatures;
}
3 Fermez le panneau Actions.
Tester le fichier SWF
Enregistrez et testez le document pour vrifier que le texte dynamique se charge correctement.
1 Slectionnez Fichier > Enregistrer, puis slectionnez Contrle > Tester lanimation.
Dans la fentre du fichier SWF, le texte du fichier externe doit safficher dans le champ de texte
dynamique que vous avez cr. Si ce nest pas le cas, vrifiez que vous avez entr le nom de
loccurrence correctement : newFeatures_txt. Vrifiez galement que vous avez enregistr votre
copie du fichier dentranement dans le mme dossier que le fichier text_start dorigine.
2 Compltez les champs de saisie de texte.
3 Une fois le fichier test, fermez la fentre du fichier SWF.
Vrifier lorthographe
Flash MX 2004 et Flash MX Professionnel 2004 contiennent de nouvelles fonctionnalits
permettant de vrifier lorthographe de la plupart du texte dun document, y compris les champs
de saisie, les noms des calques et les chanes ActionScript. Pour vrifier lorthographe dun
document, configurez les options Configuration de la vrification orthographique, puis lancez le
correcteur.
1 Slectionnez Texte > Installation du correcteur orthographique
2 Vrifiez que loption Vrifier le contenu des champs de texte et que le dictionnaire appropri
sont slectionns. Slectionnez dautres options votre convenance. Cliquez sur OK.
3 Slectionnez Texte > Vrifier lorthographe et rpondez aux botes de dialogue affiches par le
correcteur orthographique. Lorsque la vrification est termine, enregistrez le document.
Remarque : Pour vrifier lorthographe du texte de fichiers externes, utilisez la fonction de
correction orthographique de lapplication utilise pour crer le fichier externe.
84 Chapitre 10 : Ajouter du texte statique, de saisie ou dynamique
Rsum
Flicitations, vous connaissez maintenant les fonctions lmentaires dajout de texte un
document. En quelques minutes vous avez appris accomplir les tches suivantes :
Crer un bloc de texte de taille variable
Crer un bloc de texte de taille fixe
Modifier du texte et des attributs de police
Slectionner des polices de priphrique
Ajouter un champ de saisie de texte
Copier un champ de texte
Attribuer des noms doccurrence aux champs de texte
Crer un champ de texte dynamique
Afficher du code ActionScript qui relie le champ de texte un fichier texte externe
Configurer et vrifier lorthographe
Pour en savoir plus sur les nombreuses options permettant dajouter du texte un document,
consultez Utilisation du texte , dans le guide Utilisation de Flash de laide.
85
CHAPITRE 11
Crer une animation dans un scnario
Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004 offrent des outils
puissants de cration danimations. Dans Flash, la plupart des animations simples sont ralises
laide dun processus appel interpolation. Linterpolation consiste remplir les images situes
entre deux images-cls pour transformer lobjet graphique affich dans la premire image-cl en
lobjet graphique affich dans la deuxime image-cl.
Vous pouvez crer deux types dinterpolation dans Flash : une interpolation de mouvement et une
interpolation de forme. La principale diffrence entre linterpolation de mouvement et
linterpolation de forme rside dans le fait que linterpolation de mouvement sapplique des
objets groups ou des symboles, tandis que linterpolation de forme sapplique des objets non
groups et qui ne sont pas des symboles.
Dans cette leon, vous allez apprendre raliser les tches suivantes :
Crer une animation avec linterpolation de mouvement
Crer une animation avec linterpolation de forme
Copier des images-cls dans une animation
Modifier la vitesse dune animation
Configurer lespace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Program
Files\Macromedia\Flash MX 2004\<langue>\FirstRun\HelpPanel\HowDoI\BasicFlash\
start_files et double-cliquez sur animation_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Program
Files\Macromedia\Flash MX 2004\<langue>\FirstRun\HelpPanel\HowDoI\BasicFlash\
start_files et double-cliquez sur animation_start.fla.
86 Chapitre 11 : Crer une animation dans un scnario
Sous Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia/Flash
MX 2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur
animation_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
4 Dans le menu contextuel daffichage de la scne, dans la partie suprieure droite du scnario,
slectionnez Afficher une image pour afficher la scne et la zone de travail.
5 Le cas chant, faites glisser la limite infrieure du scnario (Fentre > Scnario) vers le bas pour
largir la fentre.
Vous pouvez galement utiliser la barre de dfilement pour passer dun calque lautre.
Crer une interpolation de mouvement
Pour crer une interpolation de mouvement, vous devez dfinir les proprits dune occurrence,
dun objet group ou dun texte dans limage-cl de dbut, puis modifier les proprits de lobjet
dans une image-cl ultrieure. Flash cre lanimation dans les images situes entre ces deux
images-cls.
Vous allez crer une interpolation de mouvement en prenant une occurrence du symbole de pneu
et en le faisant rebondir.
1 Dans le scnario (Fentre > Scnario), double-cliquez sur le titre Calque 1 et renommez-le
AnimationPneu. Appuyez ensuite sur Entre ou Retour pour renommer le calque.
2 Slectionnez le calque AnimationPneu et faites glisser le clip Pneu de la fentre Bibliothque
(Fentre > Bibliothque) vers la scne, en le plaant au-dessus de lombre du pneu.
3 Utilisez loutil Slection pour repositionner le pneu si ncessaire.
4 Slectionnez loutil Slection dans le calque AnimationPneu et slectionnez lImage 30.
Appuyez sur la touche F6 pour insrer une image-cl.
5 Slectionnez lImage 15 et appuyez sur F6 pour ajouter une autre image-cl.
Crer une interpolation de forme 87
6 Laissez la tte de lecture sur lImage 15, maintenez la touche Maj enfonce pour forcer un
mouvement linaire et faites glisser le pneu vers le haut.
7 Dans le calque AnimationPneu, slectionnez une image comprise entre les images 2 et 14.
Dans le menu Interpolation de linspecteur des proprits, slectionnez Mouvement.
Une flche apparat dans le scnario, entre les deux images-cls.
8 Slectionnez une image comprise entre les images 16 et 29. Dans le menu Interpolation de
linspecteur des proprits, slectionnez nouveau loption Mouvement.
9 Choisissez Fichier > Enregistrer pour enregistrer les modifications.
Crer une interpolation de forme
Pour crer une interpolation de forme, vous devez spcifier les attributs dune forme dans une
image-cl, puis modifier la forme ou en dessiner une autre dans une image-cl ultrieure. Comme
dans linterpolation de mouvement, Flash cre lanimation dans les images situes entre les deux
images-cls.
Vous allez maintenant crer une interpolation pour que lombre du pneu bouge et disparaisse au
fil de ses propres rebonds.
1 Cliquez sur le calque ShadowAnim (animationOmbre) pour le slectionner.
2 Slectionnez lImage 30 et appuyez sur F6 pour insrer une image-cl ; slectionnez ensuite
lImage 15 et appuyez sur F6 pour insrer une autre image-cl.
3 Placez la tte de lecture sur lImage 15 et cliquez sur loutil Slection. Faites glisser lensemble
de lombre lgrement vers le haut droite.
4 LImage 15 tant toujours slectionne, slectionnez loutil Pipette dans la barre doutils et
cliquez sur lobjet ombre.
88 Chapitre 11 : Crer une animation dans un scnario
5 Si le mlangeur nest pas dj ouvert, slectionnez Fentre > Panneaux de conception >
Mlangeur pour louvrir, puis faites passer la valeur alpha de 25 % 10 %.
6 Cliquez sur le menu doptions en haut droite du mlangeur et choisissez Fermer le panneau
pour fermer le panneau.
7 Slectionnez une image comprise entre les images 2 et 14 du calque ShadowAnim. Dans
linspecteur des proprits, slectionnez Forme dans le menu droulant Interpolation.
8 Dans le calque ShadowAnim, slectionnez une image comprise entre les images 16 et 29.
Choisissez de nouveau Forme dans le menu Interpolation de linspecteur des proprits.
Copier des images-cls dans une animation
Pour que les rebonds du pneu paraissent ralistes, celui-ci doit saplatir lgrement chaque fois.
Vous pouvez produire cet effet en transformant la forme du pneu dans lImage 1 de lanimation et
en copiant cette image dans lImage 30.
1 A laide de loutil Slection, slectionnez lImage 1 du calque AnimationPneu. Appuyez ensuite
sur F6 pour ajouter une image-cl.
Une image-cl est ajoute et la tte de lecture se positionne sur lImage 2.
2 Slectionnez nouveau lImage 1 du calque AnimationPneu.
3 Dans la barre doutils, slectionnez loutil Transformation libre.
Le pneu est slectionn et entour de poignes de transformation.
4 Slectionnez le point de transformation central (le petit cercle situ prs du centre du clip) et
faites-le glisser vers le bas du pneu.
Le point central saccroche la poigne de transformation situe au milieu de la bordure
infrieure.
5 Sur la scne, faites glisser vers le bas la poigne de transformation situe au milieu de la bordure
suprieure pour aplatir lgrement la forme du pneu.
Si ncessaire, faites glisser le pneu pour laligner sur lombre. Pour voir son positionnement,
faites glisser la tte de lecture sur les images 1 et 2.
6 Cliquez sur lImage 1 du calque AnimationPneu avec le bouton droit de la souris (Windows)
ou en appuyant sur la touche Contrle (Macintosh), puis choisissez Copier les images dans le
menu contextuel.
Modifier la vitesse de lanimation 89
7 Slectionnez lImage 29 du calque AnimationPneu et appuyez sur F6 pour insrer une
image-cl.
8 Dans lImage 30 du calque AnimationPneu, cliquez avec le bouton droit de la souris (Windows)
ou en appuyant sur la touche Contrle (Macintosh) et choisissez Coller les images dans le menu
contextuel.
9 Choisissez Contrle > Tester lanimation pour visualiser lanimation.
10 Fermez la fentre du fichier SWF pour revenir dans lenvironnement auteur.
Modifier la vitesse de lanimation
En testant lanimation, vous aurez peut-tre remarqu que le pneu rebondit plutt lentement.
Vous pouvez modifier la vitesse de lanimation en changeant le nombre dimages affiches par
seconde et en dfinissant des valeurs dacclration positives et ngatives, lesquelles dterminent le
taux dacclration et de dclration.
Modifier le nombre dimages par seconde
La cadence, mesure en images par seconde (ips), reprsente la vitesse laquelle lanimation est
lue. Par dfaut, les animations Flash sont lues une cadence de 12 ips. Cest la cadence idale
pour les animations Web. Cependant, il peut parfois savrer ncessaire de modifier la cadence.
Vous allez dfinir une cadence de 36 images par seconde, pour faire rebondir le pneu plus
rapidement.
1 Cliquez nimporte o sur la scne, loin des objets.
2 Entrez 36 dans la zone de texte Cadence de linspecteur des proprits.
La cadence sapplique lensemble du document Flash, pas seulement une animation
du document.
Modifier lacclration et la dclration
Par dfaut, les images interpoles sont lues une vitesse constante. Loption dacclration permet
de crer un effet plus naturel dacclration ou de dclration. Entrez une valeur positive pour
commencer linterpolation rapidement et ralentir vers la fin de lanimation. Entrez une valeur
ngative pour commencer linterpolation lentement et lacclrer vers la fin de lanimation.
Vous allez maintenant ajouter des valeurs dacclration positives et ngatives votre animation.
1 Dans le calque AnimationPneu, slectionnez une image comprise entre les images 2 et 14.
Ensuite, entrez 100 dans la zone de texte Acclration de linspecteur des proprits. Appuyez
sur Entre ou sur Retour.
2 Dans le mme calque, slectionnez une image comprise entre les images 16 et 29. Ensuite,
entrez -100 dans la zone de texte Acclration. Appuyez sur Entre ou sur Retour.
3 Dans le calque ShadowAnim, slectionnez une image comprise entre les images 2 et 14. Ensuite,
entrez 100 dans la zone de texte Acclration. Appuyez sur Entre ou sur Retour.
4 Dans le mme calque, slectionnez une image comprise entre les images 16 et 29. Ensuite,
entrez -100 dans la zone de texte Acclration. Appuyez sur Entre ou sur Retour.
90 Chapitre 11 : Crer une animation dans un scnario
Tester le fichier SWF
Vous allez tester le document pour visualiser lanimation et vrifier quelle fonctionne
comme prvu.
1 Sauvegardez votre document et slectionnez Contrle > Tester lanimation.
2 Une fois que vous en avez termin, fermez la fentre du fichier SWF.
Rsum
Flicitations, vous savez dsormais animer des objets dans Flash. En quelques minutes vous avez
appris accomplir les tches suivantes :
Crer une animation avec linterpolation de mouvement
Crer une animation avec linterpolation de forme
Copier des images-cls dans une animation
Modifier la vitesse dune animation
Vous pouvez galement utiliser des effets de scnario pour ajouter rapidement des effets
danimation du texte, des objets graphiques, des images et des symboles. Pour plus
dinformations, consultez Cration de mouvement , dans le guide Utilisation de Flash de laide.
Pour en savoir plus sur Flash, choisissez une autre leon.
91
CHAPITRE 12
Crer une prsentation avec des crans
(Flash Professionnel uniquement)
Flash MX Professionnel 2004 propose une nouvelle mthode de cration de prsentations, laide
de diapositives. Crer une prsentation avec des diapositives est un vritable jeu denfant : il suffit
de placer les lments sur des diapositives, dajouter des diapositives imbriques qui hritent des
lments dautres diapositives et dutiliser les commandes intgres pour naviguer entre les
diapositives au moment de lexcution. Cette leon dmontre la simplicit des diapositives et vous
permet dapprendre raliser les oprations suivantes :
Ajouter du contenu une diapositive de prsentation
Ajouter des lments de navigation aux boutons
Ajouter et nommer une diapositive
Slectionner et dplacer des diapositives
Ajouter du contenu une nouvelle diapositive
Ajouter des comportements de transition une diapositive
Configurer lespace de travail
Commencez par ouvrir le fichier de dmarrage de la leon et configurer lespace de travail afin
dobtenir la disposition optimale pour votre apprentissage.
1 Pour ouvrir votre fichier de dmarrage, slectionnez Fichier > Ouvrir dans Flash, puis effectuez
lune des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur presentation_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application
Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\
BasicFlash\start_files et double-cliquez sur presentation_start.fla.
Sur Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash MX
2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur
presentation_start.fla.
92 Chapitre 12 : Crer une prsentation avec des crans (Flash Professionnel uniquement)
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de
leon FLA, pour votre rfrence.
Le document souvre dans lenvironnement auteur de Flash.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
dans le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Tout au long de cette leon, pensez enregistrer frquemment votre travail.
3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer votre
espace de travail.
Afficher la hirarchie des crans et leurs scnarios
Pour ajouter du contenu aux crans, vous procdez en grande partie comme lorsque vous ajoutez
du contenu la scne. Les crans sont galement comparables aux clips imbriqus, bass sur une
hirarchie, des scnarios imbriqus et lhritage.
1 Si le panneau Contour de lcran napparat pas, slectionnez Fentre > Ecrans.
Le panneau Contour de lcran affiche une vignette de chaque diapositive de la prsentation,
ainsi que la hirarchie de la prsentation.
Lorsque vous slectionnez un cran dans le panneau Contour de lcran, lcran apparat dans
la fentre Document. Lorsque vous slectionnez plusieurs crans, le contenu du premier cran
slectionn apparat dans la fentre Document.
2 Dans le panneau Contour de lcran, slectionnez lcran de la prsentation.
Tous les documents de diapositives contiennent un cran de prsentation qui se trouve au
niveau suprieur de la hirarchie dcrans. Considrons la diapositive de la prsentation comme
une diapositive matre : le contenu de la diapositive de prsentation peut apparatre sur toutes
les diapositives de votre document.
Remarque : Vous ne pouvez pas supprimer ou dplacer lcran de prsentation.
Les quatre diapositives apparaissant en retrait en-dessous de la diapositive de prsentation dans
le panneau reprsentent des crans imbriqus ou enfant, dont la diapositive de prsentation est
le parent.
3 Ouvrez le scnario sil nest pas dj ouvert (Fentre > Scnario). Slectionnez une autre
diapositive dans le panneau Contour de lcran pour afficher le scnario de cet cran.
Chaque cran possde son propre scnario, mais le scnario principal dun document avec des
crans napparat jamais.
Ajouter des comportements de navigation dcran aux boutons 93
Afficher les proprits de lcran
Vous pouvez afficher diffrentes proprits dune diapositive en fonction de lendroit slectionn
sur la diapositive.
1 Dans le panneau Contour de lcran, slectionnez la vignette de la prsentation.
Linspecteur de proprits vous permet de modifier le nom de loccurrence qui est galement le
nom de lcran tel quil apparat dans le panneau Contour de lcran.
2 Slectionnez la diapositive de prsentation, et non la vignette.
Linspecteur de proprits affiche alors les mmes commandes que celles que vous utilisez
rgulirement pour manipuler la scne et les proprits de document.
Ajouter du contenu une diapositive de prsentation
Vous allez ajouter des boutons de navigation la diapositive de prsentation afin que les boutons
apparaissent sur chaque diapositive de la prsentation.
1 Dans le panneau Contour de lcran, slectionnez la vignette de la diapositive de prsentation.
Dans le scnario, slectionnez limage 1 du calque Navigation.
2 Dans le panneau Bibliothque, faites glisser le symbole btn, next vers lcran, en le plaant dans
la bande noire au bas de lcran.
3 Dans linspecteur de proprits, avec le bouton toujours slectionn, saisissez 280 dans le champ
X et 165 dans le champ Y pour placer le bouton.
Remarque : Les coordonnes saisies sont relatives au point dalignement central par dfaut de la
diapositive. Pour plus dinformations sur le point dalignement dans les crans, consultez
Spcification de la classe ActionScript et du point dalignement dun cran (Flash Professionnel
uniquement) dans le guide Utilisation de Flash de laide.
4 Saisissez forwardBtn dans le champ Nom de loccurrence.
5 Faites glisser le symbole btn, prev vers la diapositive, puis utilisez linspecteur de proprits pour
saisir 245 dans le champ X et 165 dans le champ Y.
6 Saisissez backBtn dans le champ Nom de loccurrence.
7 Dans le panneau Contour de lcran, slectionnez chaque diapositive imbrique pour vrifier
que les boutons apparaissent dsormais sur toutes les diapositives.
Remarque : Le contenu dun cran parent apparat lgrement gris lorsque vous le visualisez sur
un cran imbriqu.
Ajouter des comportements de navigation dcran aux boutons
Lorsque vous ouvrez un nouveau diaporama Flash, le document inclut dj une fonctionnalit
permettant lutilisateur de naviguer entre les diapositives laide des touches flches du clavier.
Vous allez ajouter des comportements de navigation aux boutons, pour offrir aux utilisateurs un
autre moyen de naviguer entre les diapositives.
Remarque : Par dfaut, les touches flches du clavier vous permettent de naviguer entre les crans
de mme niveau, et non entre les crans imbriqus.
1 Sur la diapositive de prsentation, slectionnez loccurrence forwardBtn. Dans le panneau
Comportements (Fentre > Panneaux de dveloppement > Comportements), cliquez sur le
bouton Ajouter (+), puis slectionnez Ecran > Atteindre la diapositive suivante dans le menu.
94 Chapitre 12 : Crer une prsentation avec des crans (Flash Professionnel uniquement)
2 Sur la diapositive de prsentation, slectionnez loccurrence backBtn. Dans le panneau
Comportements (Fentre > Panneaux de dveloppement > Comportements), cliquez sur le
bouton Ajouter (+), puis slectionnez Ecran > Atteindre la diapositive prcdente dans le menu.
3 Slectionnez Contrle > Tester lanimation, puis cliquez sur les boutons de la fentre du fichier
SWF qui saffiche pour vous assurer que les boutons fonctionnent comme vous le souhaitez.
Une fois le test de votre document termin, fermez la fentre du fichier SWF.
Ajouter et nommer une diapositive
Vous pouvez facilement ajouter des diapositives votre prsentation laide du menu contextuel
du panneau Contour de lcran.
1 Dans le panneau Contour de lcran, slectionnez la vignette de titre. Cliquez avec le bouton
droit de la souris (Windows) ou en appuyant sur la touche Contrle (Macintosh), puis
slectionnez Insertion cran dans le menu contextuel.
Un nouvel cran apparat dans le panneau Contour de lcran, au mme niveau que la
diapositive de titre. La nouvelle diapositive hrite automatiquement du contenu de la
diapositive de prsentation.
2 Double-cliquez sur le nom de la nouvelle diapositive dans le panneau Contour de lcran,
et nommez-la features.
Slectionner et dplacer des diapositives
Vous pouvez copier, couper, coller et faire glisser des crans dans le panneau Contour de lcran
pour modifier leur ordre dans la prsentation. Vous allez slectionner trois crans, les couper, puis
les coller afin de les imbriquer en tant quenfants de la diapositive features.
1 Dans le panneau Contour de lcran, slectionnez la diapositive performance. Appuyez sur la
touche Maj et cliquez sur les diapositives safety et handling pour les ajouter la slection.
2 Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur la touche Contrle
(Macintosh) sur les diapositives slectionnes, puis slectionnez Couper dans le menu
contextuel.
3 Dans le panneau Contour de lcran, cliquez avec le bouton droit de la souris (Windows) ou en
appuyant sur la touche Contrle (Macintosh) sur la diapositive features, puis slectionnez Coller
lcran imbriqu dans le menu contextuel.
Les trois diapositives apparaissent dsormais comme les enfants de la diapositive features.
Ajouter des comportements de transition 95
Ajouter du contenu une nouvelle diapositive
La diapositive features, en tant quenfant de la diapositive de prsentation, hrite des proprits de
cette diapositive. En outre, tant donn que la diapositive features est un parent des trois
diapositives que vous avez copies et colles, le contenu que vous ajoutez cette diapositive
apparat sur les trois diapositives enfant.
1 Dans le panneau Contour de lcran, slectionnez la vignette features. Dans le panneau
Bibliothque, faites glisser le symbole Features Content un quelconque endroit de la fentre
Document.
2 Dans linspecteur de proprits, attribuez loccurrence Features Content le nom doccurrence
features_mc.
3 Dans linspecteur de proprits, saisissez -275 dans le champ X et -130 dans le champ Y pour
placer loccurrence.
Ajouter des comportements de transition
Bien que votre prsentation soit quasiment termine, vous allez ajouter des comportements de
transition pour la rendre plus intressante. Plus particulirement, vous allez ajouter des
comportements pour effectuer un fondu et donner limpression que le contenu senvole de la
fentre Document.
1 Dans le panneau Contour de lcran, slectionnez la diapositive features. Dans le panneau
Comportements, cliquez sur le bouton Ajouter (+), puis slectionnez Ecran > Transition dans
le menu.
2 Dans la bote de dialogue Transitions, slectionnez Fondu dans la liste de transitions et affichez
laperu dans le ct infrieur gauche de la bote de dialogue. Vrifiez que 2 secondes est
slectionn comme dure et que En entre est slectionn comme direction, puis cliquez sur OK.
3 Dans le panneau Comportements, cliquez sur Reveal dans la colonne Evnement pour ouvrir le
menu droulant et slectionner revealChild. Loption revealChild signifie que le comportement
rvlera le nouvel cran enfant.
4 Pour ajouter le comportement de fondu, vrifiez que la diapositive features est toujours
slectionne. Dans le panneau Comportements, cliquez sur le bouton Ajouter (+), puis
slectionnez Ecran > Transition dans le menu.
5 Dans la bote de dialogue Transitions, slectionnez Vol dans la liste des transitions, puis
slectionnez En sortie comme direction.
6 Dans le champ Dure, saisissez .5 comme dure pour terminer la transition.
7 Dans le menu droulant Emplacement de dpart, slectionnez Gauche Centre et visualisez
laperu de la transition, puis cliquez sur OK.
Dans le panneau Comportements, revealChild apparat dsormais deux fois. Avec le
comportement Vol, vous souhaitez masquer lcran enfant.
96 Chapitre 12 : Crer une prsentation avec des crans (Flash Professionnel uniquement)
8 Dans le panneau Comportements, cliquez sur le deuxime vnement de la liste, que vous venez
dajouter. Dans le menu droulant, cliquez sur hideChild.
Tester votre prsentation
Votre prsentation est dsormais termine et prte tre teste.
1 Choisissez Contrle > Tester lanimation.
2 Utilisez les boutons de navigation Forward et Backward pour parcourir la prsentation et
afficher les transitions.
Rsum
Flicitations, vous savez dsormais crer un diaporama avec des crans. En quelques minutes vous
avez appris accomplir les tches suivantes :
Ajouter du contenu une diapositive de prsentation
Ajouter des lments de navigation aux boutons
Ajouter et nommer une diapositive
Slectionner et dplacer des diapositives
Ajouter du contenu une nouvelle diapositive
Ajouter des comportements de transition une diapositive
Pour en savoir plus sur lutilisation des crans, consultez Utilisation des crans (Flash
Professionnel uniquement) dans le guide Utilisation de Flash de laide.
97
CHAPITRE 13
Ajouter de linteractivit avec ActionScript
Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004 permettent aux
utilisateurs de se familiariser avec le concept dinteractivit de multiples faons. En ajoutant de
linteractivit, vous ntes plus limit une lecture squentielle de chacune des images de votre
scnario : vous accdez au contraire des options de conception et de dveloppement amliores.
Dans cette leon, vous allez apprendre quelques-unes des mthodes qui vous permettront
dimplmenter de linteractivit dans vos documents tout en effectuant les tches suivantes :
Crer une nouvelle squence
Rdiger du code ActionScript pour naviguer entre les squences
Rdiger du code ActionScript pour lire un clip anim lexcution
Utiliser un comportement pour lire un fichier MP3
Remarque : Si vous disposez de Macromedia Flash MX n 2004, vous pouvez crer un document
partir dcrans. Ces derniers offrent des options de navigation supplmentaires. Les crans de
diapositives, par exemple, incluent dj une fonctionnalit de navigation intgre, qui permet aux
utilisateurs de se dplacer entre les crans laide des touches flches du clavier. Pour plus
dinformations sur les crans, slectionnez Aide > Comment > Bases de Flash > Crer une prsentation
avec des crans (Flash Professionnel uniquement).
Configurer lespace de travail
Dans un premier temps, vous devez ouvrir le fichier de dmarrage de cette leon et configurer
votre espace de travail, afin de suivre vos leons dans un cadre optimal.
1 Pour ouvrir votre fichier de dmarrage dans Flash, slectionnez Fichier > Ouvrir. Effectuez lune
des oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\ HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez
sur interactivity_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows\Application
Data\Macromedia\FlashMX2004\<langue>\Configuration\HelpPanel\HowDoI\
BasicFlash\start_files et double-cliquez sur interactivity_start.fla.
98 Chapitre 13 : Ajouter de linteractivit avec ActionScript
Sous Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash
MX 2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files et double-cliquez sur
interactivity_start.fla.
Remarque : Le dossier BasicActionScript\finished_files comprend les versions termines des
fichiers de leon FLA pour votre rfrence.
Le document souvre dans lenvironnement auteur de Flash.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
Tout au long de cette leon, pensez enregistrer frquemment votre travail.
3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer votre
espace de travail.
4 Dans le menu contextuel daffichage de la scne, dans la partie suprieure droite du scnario,
slectionnez Afficher une image pour afficher la scne et la zone de travail.
5 Cliquez dans la zone de travail, en dehors des objets de la scne afin de nen slectionner aucun.
Nommer les occurrences de boutons
Vous devez fournir des noms aux occurrences de boutons de la scne, afin de pouvoir par la suite
faire rfrence ces occurrences dans ActionScript.
1 Dans le scnario principal, slectionnez le calque Content.
2 Dans la partie infrieure droite de la scne, slectionnez le bouton situ gauche. Dans
linspecteur des proprits (Fentre > Proprits), tapez atteindreSquence_btn dans la zone de
texte Nom de loccurrence pour nommer loccurrence du symbole.
3 Slectionnez le bouton du milieu et utilisez linspecteur des proprits pour donner ce bouton
le nom doccurrence attacherAnimation_btn.
4 Slectionnez le bouton de droite et utilisez linspecteur de proprits pour donner ce bouton
le nom doccurrence lireSon_btn.
Ajouter une scne
Dans flash, les squences vous permettent dorganiser votre document dans des sections discrtes
pouvant contenir le contenu exclusif dautres squences. Vous allez crer et ajouter du contenu
dans une nouvelle squence.
1 Slectionnez Insertion > Squence.
Vous ne voyez plus la squence 1, seule la mention Squence 2 apparat dsormais au-dessus de
la scne. La scne est vide.
2 Faites glisser le clip Animation du panneau Bibliothque (Fentre > Bibliothque) dans la scne.
Une fois le clip slectionn, utilisez linspecteur des proprits pour affecter loccurrence une
coordonne x de 200 et une coordonne y de 15. Appuyez sur Entre ou sur Retour.
Le clip se dplace vers les coordonnes spcifies sur la scne.
Lier un bouton une scne 99
3 Utilisez linspecteur des proprits pour affecter au clip Animation le nom doccurrence
animation_mc.
4 Renommez le calque 1 Animation. Crez un nouveau calque et nommez-le Boutons. Faites
glisser une occurrence du symbole BTNback sur la scne et placez-la droite du clip.
5 Utilisez linspecteur de proprits pour affecter ce bouton le nom doccurrence retour_btn.
Se dplacer entre les squences
Pour accder une squence spcifique dans lenvironnement auteur, slectionnez-la dans le
panneau Squence.
1 Pour ouvrir ce panneau, choisissez Fentre > Panneaux de conception graphique > Squence.
2 Slectionnez Squence 1.
Contrler le document laide dune action stop()
Lorsque vous testez ou publiez un document Flash contenant plusieurs squences, ces squences
sont lues de manire linaire et dans lordre dans lequel elles apparaissent dans le panneau
Squence. Vous allez utiliser une action stop() qui vous permettra darrter la tte de lecture au
niveau de limage 1 de la squence 1 dans le scnario.
1 Dans le scnario principal de la squence 1, ajoutez un nouveau calque et nommez-le Actions.
2 Cliquez sur lImage 1 du calque Actions. Dans la fentre de script du panneau Actions
(Fentre > Panneaux de dveloppement > Actions), tapez le commentaire ci-dessous, suivi du
script permettant darrter la tte de lecture sur limage voulue :
//arrte la tte de lecture sur limage 1
stop();
Lier un bouton une scne
Maintenant que la tte de lecture sarrte sur lImage 1, vous pouvez ajouter un code ActionScript
permettant lutilisateur daccder la squence 2 lorsquil relchera sa pression sur loccurrence
de bouton atteindreSquence_btn.
Appuyez deux fois sur Entre ou sur Retour et tapez le commentaire suivant, puis rdigez la
fonction permettant lutilisateur daccder la Squence 2 lors du relchement de
loccurrence atteindreSquence_btn :
//Ce script permet lutilisateur daccder la squence 2 lorsque
loccurrence de bouton atteindreSquence_btn est relche
atteindreSquence_btn.onRelease = function (){
gotoAndStop("Squence 2", 1);
};
Dans le script que vous venez de taper, vous avez utilis la mthode onRelease pour lobjet
bouton. La fonction gotoAndStop est une fonction de contrle du scnario qui vous permet de
spcifier la squence et le numro de limage. Dans ce cas, vous avez spcifi lImage 1.
100 Chapitre 13 : Ajouter de linteractivit avec ActionScript
Ajouter des lments de navigation pour revenir la Squence 1
La fonction que vous ajoutez au bouton dans la squence 2, pour renvoyer lutilisateur la
squence 1, est similaire la fonction cre pour acheminer lutilisateur vers la squence 2.
1 Dans le panneau Squence, slectionnez Squence 2. Dans le scnario, crez un nouveau calque
et nommez-le Actions.
2 Slectionnez lImage 1 dans le calque Actions. Dans le panneau Actions, entrez ce qui suit dans
la fentre de script :
//cette fonction renvoie lutilisateur vers la squence 1 lorsque
loccurrence de bouton retour_btn est relche.
retour_btn.onRelease = function (){
gotoAndStop("Squence 1", 1);
};
Dans cette fonction, seuls les noms du bouton et de la squence ont chang.
3 Dans le panneau Squence, slectionnez Squence 1.
Lire un clip
Vous pouvez configurer votre document pour lire un clip au moment de lexcution. La mthode
attachMovie() vous permet dassocier loccurrence dun clip du panneau Bibliothque la
scne, mme si vous navez pas plac doccurrence dans cette scne.
Pour utiliser la mthode attachMovie(), vous devez exporter le symbole dActionScript et lui
affecter un identificateur de liaison unique, diffrent du nom de loccurrence.
1 Dans le panneau Bibliothque, cliquez avec le bouton droit de la souris sur le symbole MCTrio
et slectionnez Liaison dans le menu contextuel.
2 Dans la bote de dialogue Proprits de liaison, activez loption Exporter pour ActionScript.
3 Dans la zone de texte Identificateur, vrifiez que MCTrio saffiche comme nom de liaison.
4 Vrifier que loption Exporter dans la premire image est slectionne, puis cliquez sur OK.
Les clips exports en vue dune utilisation dans ActionScript sont chargs, par dfaut, avant la
premire image du fichier SWF qui les contient. Ce chargement peut entraner un retard avant la
lecture de la premire image. Lorsque vous affectez un identificateur de liaison un lment, vous
pouvez spcifier un chargement du clip la premire image, afin dviter tout retard de lecture.
Utiliser la mthode attachMovie() pour lire un clip
Vous allez maintenant utiliser la mthode attachMovie() pour charger le clip vido et affecter un
nom doccurrence au symbole. Etant donn que loccurrence du symbole nexiste pas dans la
scne, vous la nommer par programmation.
1 Dans le scnario, slectionnez lImage 1 du calque Actions.
2 Dans la fentre de script du panneau Actions, placez le point dinsertion la fin de votre dernire
ligne de code. Appuyez sur Entre ou sur Retour, puis tapez ce qui suit pour ajouter un
commentaire et crer une nouvelle fonction :
//cette fonction lit trio_mc lorsque loccurrence de bouton
attacherAnimation_btn est relche.
attacherAnimation_btn.onRelease = function (){
Lire un clip 101
Ensuite, vous devez spcifier ce que fait cette fonction : elle lit le clip sur le scnario root,
savoir le scnario principal. Dans votre script, vous devez rfrencer le clip via le nom de
lidentificateur de liaison dfini dans la bote de dialogue Proprits de liaison (MCTrio).
En outre, mme si vous navez pas plac doccurrence du symbole MCTrio dans la scne, vous
devez utiliser ActionScript pour crer un nom doccurrence pour ce symbole. Le nom
doccurrence que vous devez spcifier est trio_mc.
3 Le point dinsertion se trouvant la fin de la dernire ligne de script, appuyez sur Entre ou sur
Retour. Ensuite, tapez ce qui suit :
_root.attachMovie("MCTrio", "trio_mc", 1);
Dans le script que vous venez de taper, le chiffre 1 correspond la profondeur du calque dans
lequel le clip vido doit tre lu.
Chaque occurrence de clip a son propre axe z (profondeur) dterminant lordre de compression
dun clip au sein de son fichier SWF ou son clip parent. Lorsque vous crez un nouveau clip
lexcution via la mthode attachMovie(), vous devez toujours spcifier une profondeur pour
ce nouveau clip, sous forme de paramtre de mthode.
Pour plus dinformations sur la mthode attachMovie(), consultez attachMovie() dans le
Dictionnaire ActionScript de laide.
Spcifier les coordonnes dun clip sur la scne
Outre laxe z pour le clip, vous devez spcifier les coordonnes x et y pour dfinir la position du
clip dans la scne lors de lexcution.
Appuyez sur Entre ou sur Retour aprs la dernire ligne dans la fentre de script, puis tapez ce
qui suit :
trio_mc._x = 275;
trio_mc._y = 200;
};
Purger le clip
Une fois la lecture du clip termine, vous devez supprimer le clip de la scne au moment o
lutilisateur accde la squence 2. Pour cela, vous pouvez modifier le script de loccurrence de
atteindreSquence_btn de faon lancer la purge du clip.
1 Dans le scnario, slectionnez lImage 1 du calque Actions. Dans la fentre de script, cliquez
la fin de la ligne de la fonction permettant lutilisateur daccder la squence 2 afin dy placer
le point dinsertion :
gotoAndStop("Squence 2", 1);
2 Appuyez sur Entre ou sur Retour et tapez le code suivant : ce code permet de purger le clip lors
de lexcution de la fonction, afin que la lecture du clip ne continue pas lorsque lutilisateur
accde la squence 2 :
unloadMovie("trio_mc");
La fonction entire pour atteindreSquence_btn doit se prsenter comme suit :
//Ce script permet lutilisateur daccder la squence 2 lorsque
loccurrence de atteindreSquence_btn est relche
atteindreSquence_btn.onRelease = function (){
gotoAndStop("Squence 2", 1);
unloadMovie("trio_mc");
};
102 Chapitre 13 : Ajouter de linteractivit avec ActionScript
Votre script entier doit se prsenter comme suit :
//arrte la tte de lecture sur limage 1
stop();
//Ce script permet lutilisateur daccder la squence 2 lorsque
loccurrence de atteindreSquence_btn est relche
atteindreSquence_btn.onRelease = function (){
gotoAndStop("Squence 2", 1);
unloadMovie("trio_mc");
};
//Cette fonction lit trio_mc lorsque loccurrence attacherAnimation_btn est
relche.
attacherAnimation_btn.onRelease = function (){
_root.attachMovie("MCTrio", "trio_mc", 1);
trio_mc._x = 275;
trio_mc._y = 200;
Utiliser un comportement pour lire un fichier MP3
Si vous souhaitez ajouter de linteractivit votre document laide dActionScript, les
comportements savrent des allis prcieux en ajoutant le code ActionScript pour vous. Pour lire
un fichier MP3 depuis la bibliothque, vous allez utiliser un comportement audio.
1 Dans le panneau Bibiothque, cliquez avec le bouton droit de la souris (Windows) ou en
maintenant la touche Contrle enfonce (Macintosh) sur ping.mp3, puis slectionnez Liaison
dans le menu contextuel.
2 Dans la bote de dialogue Proprits de liaison, slectionnez Exporter pour ActionScript et
vrifiez que loption Exporter dans la premire image est active.
3 Vrifiez que ping.mp3 apparat dans la zone de texte Identificateur, puis cliquez sur OK.
4 Dans la scne, slectionnez loccurrence lireSon_btn.
5 Dans le panneau Comportements (Fentre > Panneaux de dveloppement > Comportements),
cliquez sur le bouton Ajouter (+) et slectionnez Son > Charger un son de la bibliothque.
6 Dans la zone de texte ID de liaison, tapez ping.mp3 ; dans la zone de texte Nom, entrez ping.
Cliquez sur OK.
Tester votre document
Pour vrifier que linteractivit fonctionne correctement, vous devez tester votre document.
1 Choisissez Contrle > Tester lanimation.
2 Dans le fichier SWF, cliquez sur le bouton gauche pour lire la squence 2. Une fois la
visualisation de la squence 2 termine, cliquez sur le bouton Retour.
3 Dans la squence 1, cliquez sur le bouton du milieu pour lire le clip.
4 Cliquez sur le bouton droit pour lire le fichier son MP3.
5 Cliquez nouveau sur le bouton gauche pour vrifier que le clip est purg.
Rsum 103
Rsum
Vous savez dsormais crer un document interactif. En quelques minutes vous avez appris
accomplir les tches suivantes :
Crer une nouvelle squence
Rdiger du code ActionScript pour naviguer entre les squences
Rdiger du code ActionScript pour lire un clip anim lexcution
Utiliser un comportement pour lire un fichier MP3
Pour en savoir plus sur ActionScript, suivez une autre leon dans la srie Bases dActionScript.
104 Chapitre 13 : Ajouter de linteractivit avec ActionScript
105
CHAPITRE 14
Crer un formulaire contenant une logique
conditionnelle et envoyer des donnes
Vous pouvez crer un formulaire contenant une logique conditionnelle permettant au fichier
SWF de rpondre de diffrentes manires aux interactions de lutilisateur et envoyer les donnes
de ce formulaire du fichier SWF vers une source externe. Dans cette leon, vous allez crer un
formulaire simple en effectuant les tches suivantes :
Ajouter un champ de saisie de texte pour collecter les donnes de formulaire
Crer un symbole de bouton
Ajouter une action stop()
Rdiger un script qui valide le formulaire avec logique conditionnelle
Transmettre des donnes hors dun fichier SWF
Rdiger une fonction
Avant de suivre cette leon, vous devez vous familiariser avec la rdaction des fonctions et des
variables ; pour cela, choisissez Aide > Comment > Manuel de prise en main rapide > Crer une
application.
Configurer votre espace de travail
Dans un premier temps, vous devez ouvrir le fichier de dmarrage de cette leon et configurer
votre espace de travail, afin de suivre vos leons dans un cadre optimal.
1 Pour ouvrir le fichier de dmarrage, slectionnez Fichier > Ouvrir, puis effectuez lune des
oprations suivantes :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Program
Files\Macromedia\Flash MX 2004\<langue>\First Run\HelpPanel\HowDoI\
BasicActionScript\start_files et double-cliquez sur simpleForm_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Program
Files\Macromedia\FlashMX2004\<langue>\FirstRun\HelpPanel\HowDoI\
BasicActionScript\start_files et double-cliquez sur simpleForm_start.fla.
Sous Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash
MX 2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur
simpleForm_start.fla.
106 Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
Remarque : Le dossier BasicActionScript\finished_files comprend les versions termines des
fichiers de leon FLA pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine.
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons.
4 Le cas chant, faites glisser la limite infrieure du scnario (Fentre > Scnario) vers le bas pour
largir la fentre.
Ajouter un champ de saisie de texte pour collecter les donnes
de formulaire
Dans un premier temps, vous allez insrer un champ de texte dans lequel les utilisateurs pourront
saisir des donnes. Vous nommerez ce champ de texte afin de pouvoir vous y rfrer
ultrieurement, dans le code ActionScript de votre application Flash.
1 Cliquez dans la zone de travail, en dehors des objets de la scne afin de nen slectionner aucun.
2 Dans la barre doutils, slectionnez loutil Texte.
3 Dans linspecteur des proprits, effectuez les oprations suivantes pour dfinir les attributs
de texte :
Slectionnez Texte de saisie dans le menu contextuel Type de texte.
Slectionnez _sans dans le menu contextuel Police.
Tapez 10 dans la zone de texte Taille de la police.
Cliquez dans la zone de couleur du texte et slectionnez un bleu fonc.
Vrifiez que loption Aligner gauche est slectionne.
Vrifiez que loption Une seule ligne est slectionne dans le menu contextuel Type de ligne.
4 Dans le scnario, slectionnez lImage 1 du calque Input Text.
5 Dans la scne, faites glisser loutil Texte pour crer un champ de saisie de texte droite du texte
http://.
6 Le cas chant, utilisez loutil Slection pour faire glisser le champ de texte ou utilisez les touches
flches pour ajuster sa position.
7 Le champ de saisie de texte tant toujours slectionn dans linspecteur de proprits, tapez
url_txt dans la zone de texte Nom de loccurrence.
Vous ferez rfrence ce nom doccurrence ultrieurement dans votre code ActionScript.
Ajouter un message derreur 107
Ajouter un bouton Envoyer au formulaire
Le panneau Bibliothque contient un symbole de bouton denvoi (Submit button) que vous
pouvez ajouter au formulaire.
1 Faites-le glisser depuis le panneau Bibliothque (Fentre > Bibliothque) vers la scne et placez-
le sur le guide SubmitURL.
2 Faites glisser le bouton ou utilisez les touches flches pour ajuster sa position, le cas chant.
3 Dans linspecteur de proprits, tapez Envoyer_btn dans la zone de texte Nom de loccurrence.
Ajouter un message derreur
Vous allez ajouter un message qui saffichera si lutilisateur clique sur le bouton Envoyer avant de
saisir des donnes.
1 Dans le scnario, le calque Branding tant slectionn, cliquez sur le bouton Insrer un calque
et nommez le calque Botes de dialogue.
2 Slectionnez lImage 5 du calque Botes de dialogue. Cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur le calque
slectionn, puis choisissez Insrer une image-cl vide dans le menu contextuel.
3 Faites glisser le symbole de clip Dialog Box-error du panneau Bibliothque vers le centre de
la scne.
4 Dans le scnario, slectionnez lImage 5 du calque Buttons. Faites glisser le symbole Try Again
Button du panneau Bibliothque vers la scne, pour le placer sous le texte du message derreur.
5 Le bouton tant toujours slectionn, nommez-le Reessayer_btn dans linspecteur des
proprits.
108 Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
Ajouter un message de confirmation
Vous allez maintenant ajouter un message qui saffichera lorsque lutilisateur enverra une entre
dans le champ de texte.
1 Dans le calque Botes de dialogue, slectionnez lImage 10. Cliquez avec le bouton droit de la
souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur limage, puis
choisissez Insrer une image-cl vide dans le menu contextuel.
2 Faites glisser le symbole de clip Dialog Box-confirm du panneau Bibliothque vers le centre de
la scne.
3 Fermez le panneau Bibliothque.
Ajouter une action stop()
Une application Flash charge dans Flash Player est automatiquement lue en boucle continue.
ActionScript vous permet de contrler le mouvement de la tte de lecture dans le scnario. Vous
allez ajouter une action stop() dans la premire image de votre application, afin de permettre
lutilisateur de renseigner le champ de texte.
1 Dans le scnario, le calque Input Text tant slectionn, ajoutez un nouveau calque que vous
nommerez Actions.
2 Slectionnez lImage 1 dans le calque Actions.
3 Dans le panneau Actions (Fentre > Panneaux de dveloppement > Actions), vrifiez que
Image 1 est slectionn.
4 Cliquez dans la fentre de script du panneau Actions et tapez le commentaire suivant :
//Arrte la tte de lecture sur lImage 1. Appuyez sur Entre ou sur Retour.
Ajouter une logique conditionnelle pour le bouton Envoyer 109
5 Tapez stop(); pour ajouter laction stop.
Ajouter des tiquettes dimages pour la navigation
Le but est, lorsque lutilisateur appuie sur le bouton Envoyer, que Flash accde automatique au
message derreur ou au message de confirmation, en fonction des donnes entres dans le champ
de texte. Ltiquetage dune image vous permet de la rfrencer facilement dans ActionScript. Cela
est particulirement utile pour envoyer la tte de lecture vers une image spcifique.
Vous allez ajouter des tiquettes dimages afin de faciliter la navigation dans votre application
Flash.
1 Ajoutez une image-cl (Insertion > Image-cl) dans lImage 5 du calque Actions.
2 Dans linspecteur des proprits, tapez erreur dans la zone de texte Etiquette de limage.
Appuyez sur Entre ou sur Retour.
Le texte de ltiquette et un indicateur apparaissent dans lImage 5 dans le scnario.
3 Ajoutez une image-cl lImage 10 du calque Actions. Dans linspecteur des proprits, tapez
confirmation dans la zone de texte Etiquette de limage. Appuyez sur Entre ou sur Retour.
Ajouter une logique conditionnelle pour le bouton Envoyer
ActionScript vous permet de configurer Flash pour comparer les informations et y ragir en
fonction des critres spcifis. Dans cet exemple, vous allez ajouter un code ActionScript pour que
Flash excute une action spcifique si lutilisateur nentre pas de donnes dans le champ de texte,
et une autre action pour le cas o il renseigne le champ.
1 Slectionnez lImage 1 dans le calque Actions. Dans la fentre de script, placez le point
dinsertion aprs le code stop();. Appuyez sur Entre ou sur Retour.
2 Tapez le commentaire suivant : //Ajoute une logique conditionnelle pour le bouton
Envoyer, qui valide lentre de lutilisateur. Appuyez sur Entre ou sur Retour.
110 Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
3 Dans le panneau Actions, cliquez sur le bouton Insrer un chemin cible situ en haut de la
fentre.
4 Dans la bote de dialogue Insrer un chemin cible, vrifiez que loption Relatif est slectionne.
Cliquez sur Envoyer_btn dans larborescence, puis cliquez sur OK.
5 Dans la fentre de script, tapez un point (.) la suite de Envoyer_btn, puis ajoutez le code
onRelease.
6 Le point dinsertion tant plac aprs onRelease, tapez = function (){} dans la fentre de
script.
7 Placez le point dinsertion entre les parenthses courbes, appuyez sur Entre ou sur Retour, puis
tapez if (url_txt.text == null || url_txt.text == ""){ .
Dans le langage ActionScript, les lignes parallles signifient ou.
8 Le point dinsertion se trouvant toujours entre les parenthses courbes, appuyez sur Entre ou
sur Retour.
9 Tapez gotoAndStop("erreur"); dans la fentre de script. Appuyez sur Entre ou sur Retour.
10 Placez le point dinsertion aprs les parenthses courbes et tapez else{. Appuyez sur Entre ou
sur Retour.
11 Tapez gotoAndStop("confirmation"); dans la fentre de script. Appuyez sur Entre ou sur
Retour, tapez }, puis appuyez nouveau sur Entre ou sur Retour et ajoutez };.
Votre script se prsente sous la forme suivante :
//Arrte la tte de lecture sur lImage 1
stop();
//Ajoute une logique conditionnelle pour le bouton Envoyer, qui valide
lentre de lutilisateur.
this.Envoyer_btn.onRelease = function(){
if (url_txt.text == null || url_txt.text ==){
gotoAndStop("erreur");
} else {
gotoAndStop("confirmation")
}
};
Transmettre des donnes hors dun fichier SWF
Vous pouvez envoyer des donnes partir dune application Flash de plusieurs manires.
Par exemple, cette leon vous montre comment envoyer les donnes un serveur web pour
charger une page web dans votre navigateur. Aprs linstruction else, vous devez ajouter le script
ActionScript demandant Flash datteindre lURL indique par lutilisateur dans le champ de
texte.
1 Dans la fentre de script, placez le point dinsertion devant la ligne
gotoAndStop("confirmation").
2 Ensuite, dans la bote outils Actions, slectionnez Fonctions globales > Navigateur/Rseau,
puis double-cliquez sur getURL.
3 Placez le point dinsertion entre les parenthses getURL(), puis tapez "http://"+url_txt.text
pour spcifier les donnes transmettre depuis le fichier SWF (ne laissez pas despaces dans le
code).
Tester votre fichier SWF 111
Votre script doit avoir la forme suivante :
stop();
this.Envoyer_btn.onRelease = function(){
if (url_txt.text == null || url_txt.text ==){
gotoAndStop("erreur");
} else {
getUrl ("http://"+url_txt.text);
gotoAndStop("Confirmation")
}
};
Rdiger une fonction pour le bouton Ressayer
Une fonction est un script que vous pouvez utiliser plusieurs fois afin deffectuer une tche
spcifique. Vous pouvez transmettre des paramtres une fonction pour quelle renvoie une
valeur. Dans cet exemple, lorsque lutilisateur clique sur le bouton Ressayer, une fonction
sexcute pour renvoyer la tte de lecture lImage 1.
Rdigez cette fonction ds prsent. Dans ce script, vous allez indiquer le numro de limage,
car lImage 1 na pas dtiquette.
1 Dans le scnario, slectionnez lImage 5 du calque Actions.
2 Dans la fentre de script, tapez le commentaire suivant : //la fonction de ce bouton
renvoie lutilisateur lImage 1. Appuyez sur Entre ou sur Retour.
3 Tapez Reessayer_btn.onRelease = function(){, puis appuyez sur Entre ou sur Retour.
4 Entrez gotoAndStop(1);, appuyez sur Entre ou sur Retour, puis ajoutez } pour complter le
script.
Tester votre fichier SWF
Vous allez maintenant tester votre document en saisissant une URL et en vrifiant le rsultat.
1 Choisissez Contrle > Tester lanimation.
2 Lorsque le fichier SWF souvre, cliquez sur le bouton Envoyer avant de saisir quoi que ce soit
dans le champ de texte.
Le message derreur saffiche.
3 Cliquez sur le bouton Ressayer, puis tapez lURL dun site web valide dans le champ de saisie
de texte. Cliquez sur le bouton Envoyer.
Votre navigateur par dfaut ouvre la page web.
112 Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
Rsum
Vous savez dsormais rdiger un script avec une logique conditionnelle et envoyer des donnes.
En quelques minutes vous avez appris accomplir les tches suivantes :
Ajouter un champ de saisie de texte un document
Crer un symbole de bouton
Ajouter une action stop()
Rdiger un script qui valide le formulaire avec logique conditionnelle
Transmettre des donnes hors dun fichier SWF
Rdiger une fonction
Pour en savoir plus sur Flash, choisissez une autre leon.
113
CHAPITRE 15
Travailler avec des objets et des classes laide
dActionScript 2.0
Dans Macromedia Flash MX 2004 et Macromedia Flash MX Professionnel 2004, une classe est le
modle de dfinition dun type dobjet. A tout objet correspond une classe sous-jacente ; par
exemple, tout clip a une mthode appele getURL : la mthode getURL est donc dfinie dans la
dfinition de classe dun clip. Flash contient un grand nombre de classes prdfinies, dont les
classes MovieClip, Array, Color et CheckBox.
Dans cette leon, vous apprendrez crer et modifier des classes. Plus prcisment, vous allez
apprendre accomplir les tches suivantes :
Crer des objets partir de classes existantes
Crer une classe personnalise
Utiliser la saisie de donnes avec des classes personnalises
Etendre une classe existante
Remarque : Cette leon est destine aux dveloppeurs familiers des concepts de base de Flash et
dActionScript.
Configurer lespace de travail
Tout dabord, vous devez afficher les fichiers termins et configurer votre espace de travail, afin de
suivre vos leons dans un cadre optimal.
1 Affichez les fichiers termins. Vous navez pas besoin des fichiers de dmarrage pour cette leon.
Vous trouverez les fichiers termins (handson1.fla, handson2.fla, handson3.fla, Product.as et
Drag.as), qui sont des exemples de fichiers que vous allez crer dans cette leon, lemplacement
suivant :
Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and
Settings\<nomdutilisateur>\Local Settings\Application Data\Macromedia\Flash MX
2004\<langue>\Configuration\ HelpPanel\HowDoI\BasicActionScript\finished_files.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur
Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows\Application
Data\Macromedia\Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\
BasicActionScript\finished_files.
114 Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
Sous Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash
MX 2004/First Run/HelpPanel/HowDoI/BasicActionScript/finished_files.
2 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour configurer votre
espace de travail.
A propos des classes et des types dobjet
Une classe (ou type dobjet) sapparente un modle. Un objet nexiste pas tant quil nest pas cr
ou instanci partir dune dfinition de classe. Un objet est une occurrence de classe.
Les proprits correspondent aux caractristiques dun objet. Par exemple, lorsque vous alignez
des clips, vous modifiez les proprits_x et _y de lobjet MovieClip. Une proprit est une variable
associe une classe. Une proprit peut tre publique (public), ce qui signifie quelle est
accessible en dehors de la classe, ou prive (private), ce qui signifie quelle est accessible
uniquement lintrieur de la classe.
En termes orients objet, une mthode est un comportement ou une procdure pouvant agir sur
lobjet. Prenons comme exemple la mthode jeter() applique une balle : la mthode connat
la taille et le poids de la balle. Une mthode connat lobjet et toutes les proprits quil contient et
peut agir sur cet objet.
Crer un objet partir d'une classe
Vous allez crer une classe laide doutils visuels (la classe TextField) et de code (en utilisant la
classe Date).
1 Ouvrez un nouveau document Flash et renommez le calque Layer 1 en Texte.
2 Dans le calque Texte, crez un champ de texte dynamique et attribuez-lui le nom doccurrence
currentDate_txt (dateActuelle_txt).
3 Crez un calque Actions. Slectionnez lImage 1 du calque Actions et ouvrez le panneau
Actions.
4 Crez ou instanciez un objet de la classe Date, appel myDate (maDate) :
var myDate:Date=new Date();
5 Crez une variable appele currentMonth (moisCourant) quivalant la mthode
getMonth() :
var currentMonth:Number = myDate.getMonth();
6 Tracez la valeur de currentMonth :
trace (currentMonth) ;
7 Enregistrez et testez le document.
Vous devriez voir apparatre un numro dans le panneau de sortie correspondant au mois.
La mthode getMonth() affiche le mois courant. La mthode getMonth() est indexe sur
zro, ce qui signifie que la numrotation dmarre zro au lieu de un : le numro affich est
donc infrieur de un par rapport au mois actuel.
8 Fermez le panneau de sortie et la fentre du fichier SWF.
Crer une classe personnalise 115
Modifier votre script
Vous allez modifier votre script pour corriger le dcalage.
1 Ajoutez +1 la valeur de currentMonth ; testez votre document pour tre certain que le numro
du mois courant apparat. Cette ligne de script doit prendre la forme suivante :
var currentMonth:Number = myDate.getMonth()+1;
2 Commentez linstruction trace :
//trace (currentMonth) ;
3 Sous linstruction trace, dfinissez la proprit autoSize de votre zone de texte sur true :
currentDate_txt.autoSize = true;
4 Utilisez la proprit de texte de votre zone de texte pour afficher la date du jour sous la forme
suivante : Today is mm/jj/aaaa (Aujourdhui le mm//jj/aaaa). Utilisez la variable currentMonth
dj cre, plus les mthodes getDate() et getFullYear() de lobjet Date :
currentDate_txt.text="Today is "+currentMonth+"/"+ myDate.getDate() + "/
"+myDate.getFullYear();
5 Vrifiez que votre script saffiche comme suit :
var myDate:Date=new Date();
var currentMonth:Number = myDate.getMonth()+1;
//trace (currentMonth);
currentDate_txt.autoSize = true;
currentDate_txt.text="Today is +currentMonth+"/"+ myDate.getDate() + "/
"+myDate.getFullYear();
6 Enregistrez et testez le document. La date du jour doit apparatre dans la fentre du fichier SWF.
Remarque : Un exemple de fichier termin du document nouvellement cr, appel handson1.fla, se
trouve dans votre dossier finished files. Pour connatre le chemin, consultez Configurer lespace de
travail, page 113.
Crer une classe personnalise
Bien quActionScript comprenne de nombreuses classes dobjets (MovieClip, Color, etc.), il vous
faudra certains moments construire vos propres classes de faon pouvoir crer des objets en
fonction dun ensemble particulier de proprits ou de mthodes.
Pour crer une classe dfinissant chacun des nouveaux objets, vous crez un constructeur pour la
classe dobjet personnalise, puis des occurrences dobjet bases sur cette nouvelle classe, comme
dans lexemple suivant :
Remarque : Le modle ActionScript suivant est uniquement donn titre dexemple. Nentrez pas
ce script dans votre fichier leon FLA.
function Product (id:Number, prodName:Name, price:Number)
{
this.id:Number = id;
this.prodName:String = prodName;
this.price:Number = price;
}
116 Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
Afin de dfinir correctement une classe dans ActionScript 2.0, vous devez entourer toutes les
classes du mot cl class, avant de dclarer toutes les variables dans le constructeur en dehors du
constructeur. Voici un exemple :
Remarque : Le modle ActionScript suivant est uniquement donn titre dexemple. Nentrez pas
ce script dans votre fichier leon FLA.
class Product
{
//Dclaration de variables
var id:Number
var productName:String
var price:Number
//constructeur
function Product (id:Number, prodName:Name, price:Number)
{
this.id = id;
this.prodName = prodName;
this.price = price;
}
}
Pour crer des objets de cette classe, vous pouvez utiliser le code suivant :
Remarque : Le modle ActionScript suivant est donn uniquement titre dexemple. Nentrez pas
ce script dans votre fichier leon FLA.
var cliplessPedal:Product=new Product(1, "Clipless Pedal", 11);
var monkeyBar:Product=new Product(2, "Monkey Bar", 10);
En revanche, dans ActionScript 2.0, vous ne devez pas accder directement aux variables faisant
partie dune structure de classe. Vous devez crire les mthodes de la classe qui auront directement
accs ces variables. Il doit y avoir diffrentes mthodes pour obtenir et dfinir des proprits
(connues sous le nom de mthodes de lecture et de dfinition). Vous devez indiquer le type de
donnes la fois pour la valeur renvoye par la mthode et pour tout paramtre transmis la
mthode lors de la demande.
Indiquer le type des valeurs renvoyes par la mthode
Vous devez indiquer le type des valeurs renvoyes par les mthodes la suite du nom de la
mthode et de la liste des paramtres, comme dans lexemple suivant :
Remarque : Le modle ActionScript suivant est donn uniquement titre dexemple. Nentrez pas
ce script dans votre fichier leon FLA.
public function getProductName() :String
{
return name;
}
Si aucune valeur nest renvoye (par exemple, une proprit est en cours de dfinition), le type de
donne est Void :
public function setProductName(productName:String) :Void
{
this.productName=productName;
}
Crer une classe personnalise 117
Crer une classe personnalise
Vous allez maintenant construire une nouvelle classe Product en utilisant des mthodes de lecture
et de dfinition (getter et setter) et crer un objet de la classe Product.
1 Crez un fichier ActionScript en effectuant lune des oprations suivantes :
Si vous utilisez Flash MX Professionnel 2004, choisissez Fichier > Nouveau > Fichier
ActionScript (et non Document Flash). Enregistrez le document sous le nom Product.
Si vous utilisez Flash MX 2004, ouvrez un diteur de texte, Notepad par exemple.
Enregistrez le fichier sous le nom Product.as (noubliez pas dajouter lextension .as au nom
de fichier, pour crer un fichier ActionScript).
2 Crez un constructeur pour la classe Product, en crant une fonction appele Product qui
comporte les arguments id, prodName (nomProduit) et description :
function Product (id:Number, prodName:String, description:String)
{}
3 Dans la fonction constructeur, dfinissez les proprits de la classe Product quivalant aux
mthodes de dfinition (setter) que vous crez :
setID(id);
setProdName(prodName);
setDescription(description);
4 Enveloppez la fonction constructeur autour du mot cl class. Assurez-vous de bien dclarer
chacune des variables utilises dans la classe :
class Product
{
var id:Number;
var prodName:String;
var description:String
function Product (id:Number. prodName:String, description:String)
{
setID(id);
setProdName(prodName);
setDescription(description);
}
}
5 Dfinissez les mthodes de lecture et de dfinition pour chaque proprit de la classe, comme
dans lexemple suivant. Assurez-vous davoir indiqu le type de renvoi Void pour les mthodes
de dfinition et indiquez le type de donnes renvoy pour les mthodes de lecture.
class Product
{
var id:Number;
var prodName:String;
var description:String
function Product (id:Number, prodName:String, description:String) {
setID(id);
setProdName(prodName);
setDescription(description);
}
public function setID (id:Number) :Void
{
this.id = id;
}
public function setProdName (prodName:String) :Void
118 Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
{
this.prodName = prodName;
}
public function setDescription (description:String) :Void
{
this.description = description;
}
public function getID () :Number {
return id;
}
public function getProdName () :String {
return prodName
}
public function getDescription () :String {
return description;
}
}
6 Enregistrez votre fichier.
Remarque : Un exemple du fichier termin nouvellement cr, Product.as, se trouve dans votre
dossier finished files. Pour connatre le chemin, consultez Configurer lespace de travail, page 113.
Crer deux objets de la classe Product
Vous allez crer un nouveau fichier FLA, puis deux objets de la classe Product.
1 Ouvrez un nouveau document Flash et enregistrez-le au mme emplacement que Product.as.
2 Dans le nouveau document, slectionnez lImage 1 dans le scnario. Dans le panneau Actions,
crez deux objets partir de la classe Product, laide des donnes indiques dans le tableau
suivant (le modle ActionScript cr apparat aprs le tableau).
3 Vrifiez que vous avez cr les objets comme suit :
trace (pedals.getDescription ());
var handleBars:Product = new Product (1, "ATB", "Available in comfort and
aero design");
4 Tracez la proprit de description de pedals :
var pedals:Product=new Product(0,"Clipless Pedals","Excellent cleat
engagement");
5 Enregistrez et testez le document. Vous devriez voir la description de pedals dans le panneau
de sortie.
Nom doccurrence Donnes
pedals (pdales) id 0
prodName (nomProduit) Clipless Pedals (pdales automatiques)
description Excellent cleat engagement (cale-pied
parfaitement fix)
handleBars (guidon) id 1
prodName (nomProduit) ATB (VTT)
description Available in comfort and aero design
(Disponible en version Confort et
Aventure)
Etendre la classe MovieClip pour crer une nouvelle classe 119
Remarque : Un exemple de fichier termin du document nouvellement cr, handson2.fla, se trouve
dans le dossier finished files. Pour connatre le chemin, consultez Configurer lespace de travail,
page 113.
A propos du redimensionnement des classes existantes
Le mot cl extends dActionScript 2.0 vous permet dutiliser toutes les mthodes et proprits
dune classe existante dans une nouvelle classe. Par exemple, si vous vouliez dfinir une classe
ayant hrit de lensemble de la classe MovieClip, vous pourriez utiliser les lments suivants :
class Drag extends MovieClip
{}
La classe Drag hrite maintenant de toutes les proprits et mthodes de la classe MovieClip
existante ; vous pouvez utiliser les proprits et les mthodes MovieClip nimporte o dans la
dfinition de la classe, comme dans lexemple suivant :
Remarque : Le modle ActionScript suivant est donn titre dexemple uniquement. Nentrez pas
ce script dans votre fichier leon FLA.
class Drag extends MovieClip
{
//constructeur
function Drag ()
{
onPress=doDrag;
onRelease=doDrop;
}
private function doDrag():Void
{
this.startDrag();
}
private function doDrop():Void
{
this.stopDrag();
}
}
Remarque : La bote de dialogue Convertir en symbole offre maintenant un champ de classe dans
lequel vous pouvez associer des objets visuels (des clips, par exemple) nimporte quelle classe
dfinie dans ActionScript 2.0.
Etendre la classe MovieClip pour crer une nouvelle classe
Vous allez crer une nouvelle classe, extension de la classe intgre MovieClip.
1 Crez un nouveau document Flash et nommez-le Shape.fla (Forme.fla).
2 A laide des outils de dessin, dessinez une forme sur la scne. Cliquez avec le bouton droit de la
souris (Windows) ou en maintenant la touche Contrle enfonce (Macintosh) sur la forme et
choisissez Convertir en symbole dans le menu contextuel.
3 Dans la bote de dialogue Convertir en symbole, slectionnez le comportement Movie Clip et
cliquez sur Avanc. Choisissez Exporter pour ActionScript.
4 Dans la zone de texte Nom, entrez myShape.
5 Dans la zone de texte Classe AS 2.0, entrez Drag. Cliquez sur OK.
Ceci permet dassocier le clip la classe Drag que vous allez crer.
120 Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
6 A laide de linspecteur des proprits, affectez un nom dinstance au clip. Enregistrez le fichier
FLA.
Remarque : Un exemple de fichier termin du document nouvellement cr, handson3.fla, se
trouve dans votre dossier finished files. Pour connatre le chemin, consultez Configurer lespace de
travail, page 113.
7 Crez un fichier ActionScript en effectuant lune des oprations suivantes :
Si vous utilisez Flash MX Professionnel 2004, choisissez Fichier > Nouveau > Fichier
ActionScript (et non Document Flash). Enregistrez le document sous le nom Drag, au
mme emplacement que Shape.fla.
Si vous utilisez Flash MX 2004, utilisez un diteur de texte comme Notepad. Enregistrez le
fichier sous le nom Drag.as, au mme emplacement que Shape.fla.
8 Dans le fichier ActionScript nouvellement cr, crez une nouvelle classe et un constructeur
appels Drag :
class Drag extends MovieClip
{
function Drag ()
{
onPress=doDrag;
onRelease=doDrop;
}
}
9 Dfinissez les mthodes prives de la classe qui utilisent les mthodes MovieClip existantes,
startDrag() et stopDrag() :
class Drag extends MovieClip
{
function Drag()
{
onPress=doDrag;
onRelease=doDrop;
}
private function doDrag():Void
{
this.startDrag();
}
private function doDrop():Void
{
this.stopDrag()
}
}
10 Enregistrez le fichier ActionScript.
11 Testez le document Shape.fla. Vous devriez tre capable de dplacer le clip.
Remarque : Un exemple du fichier ActionScript nouvellement cr, appel Drag.as, se trouve dans
votre dossier finished files. Pour connatre le chemin, consultez Configurer lespace de travail,
page 113.
Rsum 121
Rsum
Vous savez dsormais travailler avec les objets et les classes dans ActionScript 2.0. En quelques
minutes vous avez appris accomplir les tches suivantes :
Crer et utiliser des objets de classes existantes
Crer une classe personnalise
Crer une proprit lintrieur dune classe personnalise
Crer une mthode lintrieur dune classe personnalise
Etendre une classe existante et tirer profit de lhritage
122 Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0

Vous aimerez peut-être aussi