Cours Flash Detaillé

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
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
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
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 57 58 58 58 59 59 60 60 60 61 61 61 62
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Slectionner un outil Forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Slectionner les options de cration dun polygone . . . . . . . . . . . . . . . . . . . . . . . . Dessiner un polygone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Faire pivoter la forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser la fonction de dcoupe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Transformer la forme du dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Copier des traits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser loutil Ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Slectionner et ajouter une autre couleur de remplissage . . . . . . . . . . . . . . . . . . . . Grouper la forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un logo laide de loutil Plume. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 8: Crer des symboles et des occurrences.
. . . . . . . . . . . . . . . . . . . . 63 63 64 64 65 65 66 66 66 67
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . A propos de la cration de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un symbole graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dupliquer et modifier une occurrence de symbole. . . . . . . . . . . . . . . . . . . . . . . . . Modifier un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Crer un symbole de clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Nommer loccurrence de clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter un effet au clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
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
Lire un clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Utiliser un comportement pour lire un fichier MP3 . . . . . . . . . . . . . . . . . . . . . . Tester votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CHAPITRE 14: Crer un formulaire contenant une logique conditionnelle et envoyer des donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
100 102 102 103
. . 105 105 106 107 107 108 108 109 109 110 111 111 112
Configurer votre espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter un champ de saisie de texte pour collecter les donnes de formulaire . . . Ajouter un bouton Envoyer au formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter un message derreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter un message de confirmation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter une action stop(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ajouter des tiquettes dimages pour la navigation. . . . . . . . . . . . . . . . . . . . . . . . Ajouter une logique conditionnelle pour le bouton Envoyer . . . . . . . . . . . . . . . . Transmettre des donnes hors dun fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . Rdiger une fonction pour le bouton Ressayer . . . . . . . . . . . . . . . . . . . . . . . . . . Tester votre fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rsum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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
Table des matires
Table des matires
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.
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.
10
Introduction : Apprendre utiliser Macromedia Flash MX 2004
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.
Ressources supplmentaires pour apprendre utiliser Flash
11
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.
12
Introduction : Apprendre utiliser Macromedia Flash MX 2004
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.
13
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 doublecliquez 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.
14
Chapitre 1 : Crer un document
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.
Parcourir linterface utilisateur
15
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.
Tte de lecture Image-cl Poigne de redimensionnement
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.
16
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.
Ajouter des graphiques la scne
17
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.
18
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
5 6 7 8
panneau Comportements, cliquez sur Ajouter (+) et slectionnez Vido intgre > Mettre en pause. Dans la bote de dialogue Mettre une vido en pause, slectionnez nouveau le clip, puis cliquez sur OK. Sur la scne, cliquez sur le bouton Rembobiner afin de le slectionner. Dans le panneau Comportements, cliquez sur Ajouter (+) et slectionnez Vido intgre > Rembobiner. Dans la bote de dialogue Rembobiner une vido, choisissez la vido. 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.
Ajouter des comportements de contrle de la vido
19
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. 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. 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. 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. 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).
20
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.
Rsum
21
22
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 doublecliquez sur accessibility_start.fla.
23
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.
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.
24
Chapitre 2 : Crer du contenu Flash accessible
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.
Spcifier que les lecteurs dcran doivent ignorer des lments dans le document
25
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.
26
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 :
Nom doccurrence logo_mc dealers_btn orders_btn research_btn text4_txt overview_btn powerplant_btn news_btn safety_mc text8_txt text9_txt bevel_mc Entrez le nombre suivant dans le champ Index de tabulation 1 2 3 4 5 6 7 8 9 10 11 12
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.
Contrler lordre de tabulation et lordre de lecture
27
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.
28
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
29

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 doublecliquez sur scripts_start.fla.
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.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans

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.
30
Chapitre 3 : Rdiger des scripts avec ActionScript
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.
31
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.
32
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(){
Rdiger une fonction pour un bouton
33
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
4 5
commentaire, les accolades et le point-virgule). Copiez le texte selon la procdure habituelle, grce au raccourci Ctrl+C (Windows) ou Commande+C (Macintosh). 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) 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. Dans la fonction que vous venez de copier, modifiez la proprit visible du clip screen_mc de true false. 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; };
34
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.
Rsum
35
36
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

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 doublecliquez sur calculator_start.fla.
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.
37
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.
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.
38
Chapitre 4 : Crer une application
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;
Dclarer les variables et les valeurs pour les prix
39
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.
40
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); } };
Rdiger un gestionnaire dvnement pour le composant
41
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.
42
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

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.
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.
43
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.

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.
44
Chapitre 5 : Utiliser les calques
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.
Ajouter et nommer un calque
45
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.
46
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
Rsum
47
48
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.

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.
49
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.


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.
50
Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
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).
3 4 5 6 7 8 9
Les info-bulles saffichent dans le panneau Aligner, indiquant les noms des options dalignement. 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. Toujours dans ce panneau, cliquez maintenant sur Aligner les bords gauches. Lillustration saligne sur le bord gauche de la scne. Dans le scnario, cliquez sur le calque Bevel afin de le slectionner. Dans le panneau Bibliothque (Fentre > Bibliothque), faites glisser le biseau sur la partie infrieure de la scne. Dans le panneau Aligner, vrifiez que loption Vers la scne est toujours slectionne, puis cliquez sur Mme largeur. Cliquez sur Aligner les bords gauches et Aligner les bords infrieurs. Le biseau saligne sur le bord infrieur de la scne. 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.
Spcifier des paramtres d'alignement par accrochage
51
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.
52
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.
Aligner des objets laide de linspecteur des proprits
53
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
54
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.
Rsum
55
56
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.
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.
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.
57
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.
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), assurezvous 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.
58
Chapitre 7 : Dessiner dans Flash
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.
Utiliser la fonction de dcoupe
59
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 :
60
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.
Crer un logo laide de loutil Plume
61
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.
62
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

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.
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.
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.
63
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.
64
Chapitre 8 : Crer des symboles et des occurrences
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.
Modifier un symbole
65
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.
66
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.
Rsum
67
68
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.

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.
69
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.

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.
70
Chapitre 9 : Ajouter de lanimation et des lments de navigation aux boutons
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.
Modifier la zone active dun bouton
71
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.
72
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, 4
5 6 7 8 9
agrandissez-le pour afficher la bote outils Actions et la fentre de script. 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. Cliquez sur Squence 1, au-dessus de la scne, pour quitter le mode ddition de symbole et revenir au document principal. Cliquez sur le menu doptions en haut droite du panneau Actions, puis slectionnez Fermer le panneau pour fermer le panneau. Slectionnez Contrle > Activer les boutons simples afin de pouvoir tester le bouton anim. Sur la scne, dplacez le pointeur sur le bouton, puis cliquez dessus. Slectionnez Contrle > Activer les boutons simples pour dsactiver cette fonction.
Ajouter une action un bouton
73
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.
74
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
Rsum
75
76
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
77

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.
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.
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.
78
Chapitre 10 : Ajouter du texte statique, de saisie ou dynamique
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
2 3 4
slection pour dslectionner les objets de la scne ou les images du scnario (cliquez dans la zone de travail, ailleurs que sur un objet). Dans la barre doutils, slectionnez loutil Texte. Dans linspecteur des proprits, dfinissez la taille du texte sur 10 points. 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. 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.
Crer un bloc de texte de taille fixe
79
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.
80
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.
Attribuer des noms doccurrence aux champs de texte
81
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.
82
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.

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.
Vrifier lorthographe
83
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.
84
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

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.
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.
85
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.


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.
86
Chapitre 11 : Crer une animation dans un scnario
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.
Crer une interpolation de forme
87
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.
88
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.
Modifier la vitesse de lanimation
89

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.
90
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

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.
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.
91
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.
92
Chapitre 12 : Crer une prsentation avec des crans (Flash Professionnel uniquement)
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.
Ajouter des comportements de navigation dcran aux boutons
93
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.
94
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.
Ajouter des comportements de transition
95
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.
96
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).

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.
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.
97
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.
3 4 5
Le document souvre dans lenvironnement auteur de Flash. 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. Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer votre espace de travail. 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. Cliquez dans la zone de travail, en dehors des objets de la scne afin de nen slectionner aucun.

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.
98
Chapitre 13 : Ajouter de linteractivit avec ActionScript
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.
Lier un bouton une scne
99
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 (){
100
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"); };
Lire un clip
101
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
2 3 4 5 6
maintenant la touche Contrle enfonce (Macintosh) sur ping.mp3, puis slectionnez Liaison dans le menu contextuel. Dans la bote de dialogue Proprits de liaison, slectionnez Exporter pour ActionScript et vrifiez que loption Exporter dans la premire image est active. Vrifiez que ping.mp3 apparat dans la zone de texte Identificateur, puis cliquez sur OK. Dans la scne, slectionnez loccurrence lireSon_btn. Dans le panneau Comportements (Fentre > Panneaux de dveloppement > Comportements), cliquez sur le bouton Ajouter (+) et slectionnez Son > Charger un son de la bibliothque. 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.
102
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.
Rsum
103
104
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.

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.
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.
105
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


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.
106
Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
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.
Ajouter un message derreur
107
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.
108
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.
Ajouter une logique conditionnelle pour le bouton Envoyer
109
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).
110
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.
Tester votre fichier SWF
111
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
112
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.

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.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows\Application Data\Macromedia\Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\ BasicActionScript\finished_files.
113
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.
114
Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
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; }
115
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; }
116
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 { var var var { setID(id); setProdName(prodName); setDescription(description); } } Product id:Number; prodName:String; description:String
function Product (id:Number. prodName:String, description:String)
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
117
{ 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).
Nom doccurrence
pedals (pdales)
Donnes
id 0
prodName (nomProduit) Clipless Pedals (pdales automatiques) description handleBars (guidon) id Excellent cleat engagement (cale-pied parfaitement fix) 1
prodName (nomProduit) ATB (VTT) description Available in comfort and aero design (Disponible en version Confort et Aventure)
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.
118
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.
Etendre la classe MovieClip pour crer une nouvelle classe
119
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.
120
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
Rsum
121
122

Cours Flash Detaillé

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Cours Flash Detaillé

Încărcat de

Drepturi de autor:

Formate disponibile

Apprendre utiliser Flash

TABLE DES MATIERES

INTRODUCTION: Apprendre utiliser Macromedia Flash MX 2004

Ressources supplmentaires pour apprendre utiliser Flash . . . . . . . . . . . . . . . . . . 11

CHAPITRE 3: Rdiger des scripts avec ActionScript .

Table des matires

Table des matires

CHAPITRE 10: Ajouter du texte statique, de saisie ou dynamique

Table des matires

100 102 102 103

Table des matires

Table des matires

INTRODUCTION Apprendre utiliser Macromedia Flash MX 2004

Apprendre utiliser Flash

Introduction : Apprendre utiliser Macromedia Flash MX 2004

Ressources supplmentaires pour apprendre utiliser Flash

Ressources supplmentaires pour apprendre utiliser Flash

Pour dmarrer les leons :

1 Slectionnez Aide > Comment pour afficher l'onglet du panneau Aide.

Vous trouverez la liste des leons dans le sommaire.

La liste des rubriques contenant le mot ou la phrase s'affiche.

Cliquez sur le X situ au-dessus du sommaire.

instructions pour tlcharger le systme d'aide.

Introduction : Apprendre utiliser Macromedia Flash MX 2004

CHAPITRE 1 Crer un document

Parcourir linterface utilisateur

Chapitre 1 : Crer un document

Choisissez Fentre > Jeux de panneaux > Disposition dentranement.

Parcourir linterface utilisateur

Tte de lecture Image-cl Poigne de redimensionnement

Modifier larrire-plan et la taille de la scne

Chapitre 1 : Crer un document

Modifier laffichage de la scne

Afficher le panneau Bibliothque

Afin dafficher le panneau Bibliothque, slectionnez Fentre > Bibliothque.

Ajouter des graphiques la scne

Ajouter des graphiques la scne

Afficher les proprits des objets

Chapitre 1 : Crer un document

Ajouter des comportements de contrle de la vido

Ajouter des comportements de contrle de la vido

Utiliser lexplorateur danimations pour afficher la structure du document

Chapitre 1 : Crer un document

Pour en savoir plus sur Flash, choisissez une autre leon.

Chapitre 1 : Crer un document

CHAPITRE 2 Crer du contenu Flash accessible

Configurer lespace de travail

le mme dossier, afin de conserver le fichier de dmarrage dorigine.

de travail pour les leons.

Spcifier que le document doit tre accessible aux lecteurs dcran

Fournir un titre de document et une description

Chapitre 2 : Crer du contenu Flash accessible

Attribuer un titre et une description aux occurrences

Changer le texte statique en texte dynamique pour le rendre accessible

Contrler lordre de tabulation et lordre de lecture

Dans le panneau Accessibilit, entrez 1 dans le champ Index de tabulation.

Chapitre 2 : Crer du contenu Flash accessible

Choisissez Affichage > Afficher lordre de tabulation.

Contrler lordre de tabulation et lordre de lecture

A propos du test de votre document avec les lecteurs dcran

Chapitre 2 : Crer du contenu Flash accessible

CHAPITRE 3 Rdiger des scripts avec ActionScript

Configurer lespace de travail