Академический Документы
Профессиональный Документы
Культура Документы
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
.......... 9
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
. . . . . . . . . . . . . . . . . . . . . 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
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
. . . . . . . . . . . . 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
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . 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
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
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.
11
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.
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
12
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
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
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.
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.
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.
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.
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
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.
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.
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.
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
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.
19
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
Rsum
21
22
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.
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
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.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous puis enregistrez le document sous un nouveau nom, dans
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
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.
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
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
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.
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 :
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.
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;
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
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application Data \Macromedia \Flash MX 2004 \<langue>\ Configuration\ HelpPanel\ HowDoI\ QuickTasks\start_files et double-cliquez sur scripts_start.fla. Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX 2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur scripts_start.fla.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
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
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
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.
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.
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;
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
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.
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.
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(){
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.
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
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
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
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\ HowDoI\QuickTasks\start_files et double-cliquez sur calculator_start.fla.fla. Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX 2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur calculator_start.fla.
Remarque : Le dossier QuickTasks\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
37
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace
de travail pour les leons. Le formulaire inclut dj un champ de saisie dans la colonne QTY et un champ de texte dynamique dans la colonne Price. Vous allez copier les champs de texte des lignes Shockers (Amortisseurs) et Cover (Housse).
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
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
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.
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;
39
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
appuyez sur Entre ou sur Retour deux reprises, puis saisissez le commentaire suivant :
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
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); };
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){
commentaire suivant :
priceTotal_txt.text = Number (price1_txt.text) + Number (price2_txt.text) + Number (price3_txt.text); } };
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.
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
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
des chemins suivants : Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation\>\Program Files\Macromedia\Flash MX 2004\<langue>\First Run\HelpPanel\HowDoI\ BasicFlash\start_files et double-cliquez sur layers_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation\>\Program Files\Macromedia\Flash MX 2004\<langue>\First Run\HelpPanel\HowDoI\ BasicFlash\start_files et double-cliquez sur layers_start.fla.
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.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
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
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.
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.
45
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.
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.
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.
(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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
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.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
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
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
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.
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.
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.
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.
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.
Hybrid 4WD . 2 Appuyez sur la touche Maj et cliquez sur la deuxime ligne du titre 2004 Trio QZ pour lajouter la slection.
52
Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
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.
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
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.
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
Chapitre 6 : Crer une interface utilisateur avec les outils de mise en forme
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 6 : Crer une interface utilisateur avec les outils de mise en forme
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
lune des oprations suivantes: Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez sur drawing_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur d'initialisation>\Windows \Application Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\ BasicFlash\start_files et double-cliquez sur drawing_start.fla.
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.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
Flash souvre dans lenvironnement auteur. 2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans le mme dossier, afin de conserver le fichier de dmarrage dorigine. Tout au long de cette leon, pensez enregistrer frquemment votre travail. 3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer lespace de travail.
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.
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
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 :
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.
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
59
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 :
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
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
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.
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.
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
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
lune des oprations suivantes : Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez sur symbols_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\ BasicFlash\start_files et double-cliquez sur symbols_start.fla. Sur Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash MX 2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur symbols_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
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.
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.
64
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.
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
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.
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.
Dans linspecteur des proprits, aprs avoir slectionn loccurrence de ClipRoue sur la scne,
entrez roue_mc dans la zone de texte Nom de loccurrence.
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
chiffre 360.
5 Cliquez sur Mettre jour laperu pour visualiser leffet, puis cliquez sur OK.
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
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
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.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom,
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.
70
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.
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
La zone active prend la forme du rectangle trac. 8 Slectionnez Contrle > Activer les boutons simples pour dsactiver cette fonction.
71
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.
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.
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
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.
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.
73
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.
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
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\ BasicFlash\ start_files et double-cliquez sur text_start.fla. Sur Macintosh, ouvrez le rpertoire <Macintosh HD>/Applications/Macromedia Flash MX 2004/First Run/HelpPanel/HowDoIBasicFlash/start_files, puis double-cliquez sur text_start.fla.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
le mme dossier, afin de conserver le fichier de dmarrage dorigine et le lien du fichier vers les fichiers dpendants. 3 Choisissez Fentre > Jeux de panneaux > Disposition dentranement pour modifier votre espace de travail pour les leons. 4 Dans le menu daffichage de la scne, dans langle suprieur droit du scnario, slectionnez Afficher une image pour afficher la scne et lespace de travail. 5 Dans la barre doutils, cliquez sur loutil de slection. Dans le Scnario, cliquez sur le calque Static Text pour slectionner le calque de travail.
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
Cliquez sur la zone de couleur de texte et slectionnez le gris avec une valeur hexadcimale de #666666.
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.
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-
79
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.
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.
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.
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.
81
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.
Cliquez sur OK. Les marges gauche et droite du texte dynamique sont dsormais de 5 pixels dans le champ de texte.
82
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
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
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Program Files\Macromedia\Flash MX 2004\<langue>\FirstRun\HelpPanel\HowDoI\BasicFlash\ start_files et double-cliquez sur animation_start.fla.
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.
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans
largir la fentre. Vous pouvez galement utiliser la barre de dfilement pour passer dun calque lautre.
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.
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
6 Laissez la tte de lecture sur lImage 15, maintenez la touche Maj enfonce pour forcer un
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.
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
87
5 Si le mlangeur nest pas dj ouvert, slectionnez Fentre > Panneaux de conception >
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.
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
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.
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.
89
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.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows \Application Data \Macromedia \Flash MX 2004 \<langue>\Configuration\HelpPanel\HowDoI\ BasicFlash\start_files et double-cliquez sur presentation_start.fla. Sur Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash MX 2004/First Run/HelpPanel/HowDoI/BasicFlash/start_files, puis double-cliquez sur presentation_start.fla.
91
Remarque : Le dossier BasicFlash\finished_files comprend les versions termines des fichiers de leon FLA, pour votre rfrence.
Le document souvre dans lenvironnement auteur de Flash. 2 Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous un nouveau nom, dans le mme dossier, afin de conserver le fichier de dmarrage dorigine. Tout au long de cette leon, pensez enregistrer frquemment votre travail. 3 Slectionnez Fentre > Jeux de panneaux > Disposition dentranement pour configurer votre espace de travail.
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)
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.
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.
Comportements (Fentre > Panneaux de dveloppement > Comportements), cliquez sur le bouton Ajouter (+), puis slectionnez Ecran > Atteindre la diapositive suivante dans le menu.
93
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.
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.
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
Chapitre 12 : Crer une prsentation avec des crans (Flash Professionnel uniquement)
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.
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.
95
8 Dans le panneau Comportements, cliquez sur le deuxime vnement de la liste, que vous venez
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 12 : Crer une prsentation avec des crans (Flash Professionnel uniquement)
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).
des oprations suivantes : Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and Settings\<nom dutilisateur>\Local Settings\Application Data\Macromedia\Flash MX 2004\<langue>\Configuration\ HelpPanel\HowDoI\BasicFlash\start_files et double-cliquez sur interactivity_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows\Application Data\Macromedia\FlashMX2004\<langue>\Configuration\HelpPanel\HowDoI\ BasicFlash\start_files et double-cliquez sur interactivity_start.fla.
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.
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
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
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.
(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();
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.
99
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
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");
Lire un clip
101
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.
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.
oprations suivantes : Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Program Files\Macromedia\Flash MX 2004\<langue>\First Run\HelpPanel\HowDoI\ BasicActionScript\start_files et double-cliquez sur simpleForm_start.fla.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Program Files\Macromedia\FlashMX2004\<langue>\FirstRun\HelpPanel\HowDoI\ BasicActionScript\start_files et double-cliquez sur simpleForm_start.fla. Sous Macintosh, ouvrez le rpertoire <DD Macintosh>/Applications/Macromedia Flash MX 2004/First Run/HelpPanel/HowDoI/QuickTasks/start_files, puis double-cliquez sur simpleForm_start.fla.
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
largir la fentre.
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
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.
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.
proprits.
107
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.
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.
108
Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
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.
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.
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") } };
2 Ensuite, dans la bote outils Actions, slectionnez Fonctions globales > Navigateur/Rseau,
pour spcifier les donnes transmettre depuis le fichier SWF (ne laissez pas despaces dans le code).
110
Chapitre 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
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.
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.
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 14 : Crer un formulaire contenant une logique conditionnelle et envoyer des donnes
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.
Vous trouverez les fichiers termins (handson1.fla, handson2.fla, handson3.fla, Product.as et Drag.as), qui sont des exemples de fichiers que vous allez crer dans cette leon, lemplacement suivant : Sous Windows 2000 ou XP, ouvrez le rpertoire <lecteur dinitialisation>\Documents and Settings\<nomdutilisateur>\Local Settings\Application Data\Macromedia\Flash MX 2004\<langue>\Configuration\ HelpPanel\HowDoI\BasicActionScript\finished_files.
Remarque : Si le dossier Application Data est cach, modifiez les paramtres de lExplorateur Windows afin de lafficher.
Sous Windows 98, ouvrez le rpertoire <lecteur dinitialisation>\Windows\Application Data\Macromedia\Flash MX 2004\<langue>\Configuration\HelpPanel\HowDoI\ BasicActionScript\finished_files.
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.
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();
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;
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();
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.
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
Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
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 :
3 Dans la fonction constructeur, dfinissez les proprits de la classe Product quivalant aux
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; } }
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)
5 Enregistrez et testez le document. Vous devriez voir la description de pedals dans le panneau
de sortie.
118
Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
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.
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.
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.
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.
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 :
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
Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0
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
Chapitre 15 : Travailler avec des objets et des classes laide dActionScript 2.0