Manuel du propriétaire | MACROMEDIA FLASH 8-DIDACTICIELS FLASH Manuel utilisateur

Didacticiels Flash
Marques commerciales
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev et WebHelp sont des marques de commerce ou des marques déposées de Macromedia, Inc. qui peuvent
être déposées aux Etats-Unis et/ou dans d’autres juridictions ou pays. Les autres noms de produits, logos, designs, titres, mot ou
expressions mentionnés dans cette publication peuvent être des marques commerciales, des marques de service ou des noms
commerciaux de Macromedia, Inc. ou d’autres entités et peuvent être enregistrées dans certaines juridictions, notamment
internationalement.
Informations au sujet des parties tierces
Ce guide contient des liens vers des sites tiers qui ne sont pas sous le contrôle de Macromedia et Macromedia n’est pas responsable
du contenu de ces sites. Si vous accédez à un site Web tiers mentionné dans ce guide, vous le faites à vos propres risques.
Macromedia fournit ces liens à des fins pratiques et l’inclusion de ces liens n’implique pas que Macromedia parraine ou accepte la
moindre responsabilité pour le contenu de ces sites Web tiers.
Technologie de compression et décompression audio discours utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com).
Technologie de compression et décompression vidéo Sorenson™ Spark™ utilisée sous licence de
Sorenson Media, Inc.
Navigateur Opera ® Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.
La technologie vidéo Macromedia Flash 8 est optimisée par la technologie vidéo On2 TrueMotion. © 1992-2005 On2
Technologies, Inc. Tous droits réservés. http://www.on2.com.
Visual SourceSafe est une marque déposée ou une marque de commerce de Microsoft Corporation aux Etats-Unis et/ou dans
d’autres pays.
Copyright © 2005 Macromedia, Inc. Tous droits réservés. Ce manuel ne peut pas être copié, photocopié, reproduit,
traduit ou converti sous forme électronique ou informatique, en partie ou en totalité, sans l’autorisation écrite préalable de
Macromedia, Inc. Nonobstant les dispositions précédentes, le propriétaire ou un utilisateur autorisé d’une copie valide du
logiciel accompagnant le présent manuel pourra en imprimer une copie à partir d’une version électronique dans le seul
but, pour le propriétaire ou l’utilisateur autorisé, d’apprendre à utiliser le logiciel, à condition qu’aucune partie de ce
manuel soit imprimée, reproduite, distribuée, revendue ou transmise à toute autre fin, y compris mais sans s’y limiter, à
des fins commerciales telles que la vente de copies de cette documentation ou la vente de services d’assistance.
Remerciements
Gestion du projet : Sheila McGinn
Rédaction : Jay Armstrong, Jen deHaan
Rédactrice en chef : Rosana Francescato
Rédactrice en chef : Lisa Stanziano
Correction : Evelyn Eldridge, Mark Nigara, Lisa Stanziano, Anne Szabla
Gestion de la production : Patrice O’Neill, Kristin Conradi, Yuko Yagi
Conception et production des supports : Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo
Noda, Paul Rangel, Arena Reed, Mario Reynoso
Remerciements particuliers à Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Mary Ann Walsh, Erick
Vera, Florian de Joannès, aux testeurs des versions bêta et aux équipes d’ingénieurs et d’assurance qualité de Flash et Flash Player.
Première édition : septembre 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103, Etats-Unis
Table des matières
Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Chapitre 1 : Tâches de base : Créer un document . . . . . . . . . . . . . 13
Parcours de l’interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Sélectionner des jeux de panneaux et organiser les panneaux . . . . 15
Utiliser les outils pour créer du contenu Flash . . . . . . . . . . . . . . . . . . . 15
Annuler des modifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Afficher le scénario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Modifier l’arrière-plan et la taille de la scène . . . . . . . . . . . . . . . . . . . . . . 17
Modifier l’affichage de la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Afficher le panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Ajouter des graphiques à la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Ajouter de la vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Afficher les propriétés des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Ajouter des comportements de contrôle de la vidéo . . . . . . . . . . . . . . . 21
Utiliser l’explorateur d’animations pour afficher la structure du
document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Tester le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Consulter l’aide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Chapitre 2 : Tâches de base : Créer un bandeau, 1ère partie . . 25
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Création d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Modification des propriétés du document . . . . . . . . . . . . . . . . . . . . . . . . 31
Importation de graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Présentation des calques et du scénario. . . . . . . . . . . . . . . . . . . . . . . . . 38
Création d’un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Importation d’éléments dans un calque . . . . . . . . . . . . . . . . . . . . . . . . 41
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
3
Chapitre 3 : Tâches de base : Créer un bandeau, 2ème partie . .45
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Création d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Ajout d’animation au scénario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Création d’un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Ecriture d’actions simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Chapitre 4 : Tâches de base : Créer un bandeau, 3ème partie . .69
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Prise en compte de votre public . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Vérification des paramètres de publication . . . . . . . . . . . . . . . . . . . . . . . 75
Insertion de contenus Flash dans un site Dreamweaver. . . . . . . . . . . . 78
Utilisation de la fonction « roundtrip editing » . . . . . . . . . . . . . . . . . . . . . 80
Vérification de la version de Flash Player. . . . . . . . . . . . . . . . . . . . . . . . . 81
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Chapitre 5 : Tâches de base : Créer du contenu Flash
accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Rendre le document accessible aux lecteurs d’écran . . . . . . . . . . . . . . 87
Fournir un titre de document et une description . . . . . . . . . . . . . . . . . . . 87
Attribuer un titre et une description aux occurrences . . . . . . . . . . . . . . 88
Spécifier que les lecteurs d’écran doivent ignorer des éléments
dans le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Changer le texte statique en texte dynamique pour le rendre
accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Contrôler l’ordre de tabulation et l’ordre de lecture . . . . . . . . . . . . . . . . 91
A propos du test de votre document avec les lecteurs d’écran . . . . . . 94
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Chapitre 6 : Tâches de base : Utiliser les calques. . . . . . . . . . . . .95
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Sélectionner un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Masquer et afficher des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Verrouiller un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Ajouter et nommer un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Modifier l’ordre des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
4
Table des matières
Organiser les calques dans un dossier. . . . . . . . . . . . . . . . . . . . . . . . . . 100
Ajouter un calque de masque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Ajouter un calque de guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Supprimer un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
Chapitre 7 : Tâches de base : Créer une application. . . . . . . . . . 103
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104
Copier les entrées et les champs de texte dynamiques . . . . . . . . . . . .105
Nommer les champs de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Ajouter et nommer un composant Button. . . . . . . . . . . . . . . . . . . . . . . .106
Déclarer les variables et les valeurs pour les prix. . . . . . . . . . . . . . . . . . 107
Préciser les valeurs des champs de saisie de texte . . . . . . . . . . . . . . .108
Rédiger une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
Rédiger un gestionnaire d’événement pour le composant . . . . . . . . . 110
Tester votre application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Chapitre 8 : Tâches de base : Utiliser les outils de mise
en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Utiliser les guides pour aligner des objets . . . . . . . . . . . . . . . . . . . . . . . . 115
Modifier la taille de la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Redimensionner les objets en fonction de la taille de la scène. . . . . . 116
Spécifier des paramètres d’alignement par accrochage . . . . . . . . . . . 117
Aligner un objet à l’aide des guides d’alignement . . . . . . . . . . . . . . . . . 118
Aligner un objet à l’aide du panneau Aligner. . . . . . . . . . . . . . . . . . . . . . 119
Accrocher des objets les uns aux autres . . . . . . . . . . . . . . . . . . . . . . . . . 119
Aligner des objets à l’aide de l’inspecteur des propriétés . . . . . . . . . .120
Aligner des objets à l’aide de la grille et des touches fléchées . . . . . . 121
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
Chapitre 9 : Tâches de base : Créer des symboles et des
occurrences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
A propos de la création de symboles . . . . . . . . . . . . . . . . . . . . . . . . . . . .125
Créer un symbole graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125
Dupliquer et modifier une occurrence de symbole . . . . . . . . . . . . . . . . 126
Modifier un symbole. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Créer un symbole de clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Nommer l’occurrence de clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
Table des matières
5
Ajouter un effet au clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Chapitre 10 : Tâches de base : Ajouter de l’animation et des
éléments de navigation aux boutons . . . . . . . . . . . . . . . . . . . . . . . 131
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Créer un bouton à partir d’objets groupés . . . . . . . . . . . . . . . . . . . . . . . 133
Attribuer un nom à une occurrence de bouton . . . . . . . . . . . . . . . . . . . 133
Afficher la zone active en activant les boutons . . . . . . . . . . . . . . . . . . . 134
Modifier la zone active d’un bouton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Aligner des boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Créer une animation pour un état de bouton . . . . . . . . . . . . . . . . . . . . . 137
Ajouter une action à un bouton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Ajouter un élément de navigation à un bouton . . . . . . . . . . . . . . . . . . . 139
Tester le fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Chapitre 11 : Tâches de base : Créer une présentation
avec des écrans (Flash Professionnel uniquement) . . . . . . . . . . 141
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Afficher la hiérarchie des écrans et leurs scénarios . . . . . . . . . . . . . . . 143
Afficher les propriétés de l’écran . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Ajouter du contenu à une diapositive de présentation . . . . . . . . . . . . 145
Ajouter des comportements de navigation d’écran aux boutons . . . 146
Ajouter et nommer une diapositive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Sélectionner et déplacer des diapositives . . . . . . . . . . . . . . . . . . . . . . . 148
Ajouter du contenu à une nouvelle diapositive . . . . . . . . . . . . . . . . . . . 148
Ajouter des comportements de transition . . . . . . . . . . . . . . . . . . . . . . . 149
Tester votre présentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Chapitre 12 : Création de graphiques : Dessiner dans Flash . . . 151
Sélectionner un outil Forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Sélectionner les options de création d’un polygone . . . . . . . . . . . . . . 153
Dessiner un polygone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Faire pivoter la forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Utiliser la fonction Découpe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Transformer la forme du dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Copier des traits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Utiliser l’outil Ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Sélectionner et ajouter une autre couleur de remplissage . . . . . . . . . 157
6
Table des matières
Grouper la forme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Créer un logo à l’aide de l’outil Plume . . . . . . . . . . . . . . . . . . . . . . . . . . .158
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159
Chapitre 13 : Création de graphiques : Créer une animation
dans un scénario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Créer une interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . .163
Créer une interpolation de forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164
Copier des images-clés dans une animation . . . . . . . . . . . . . . . . . . . . .166
Modifier la vitesse de l’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Modifier le nombre d’images par seconde . . . . . . . . . . . . . . . . . . . . . 167
Modifier l’accélération et la décélération . . . . . . . . . . . . . . . . . . . . . . 168
Tester le fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169
Chapitre 14 : Création de graphiques : Créer des animations
avec accélération (Flash Professionnel uniquement) . . . . . . . . . 171
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Ouverture du document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Créer une interpolation de mouvement. . . . . . . . . . . . . . . . . . . . . . . . 175
Ajouter les images nécessaires au scénario . . . . . . . . . . . . . . . . . 176
Créer une interpolation de mouvement dans les
nouvelles images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Utiliser des contrôles d’accélération . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Accélérer la vitesse de l’animation de la boule n° 8 . . . . . . . . . . . 179
Décélérer la vitesse de l’animation de la boule n° 8. . . . . . . . . . . 179
Ajouter des paramètres d’accélération personnalisés à
l’interpolation de la boule n° 8 . . . . . . . . . . . . . . . . . . . . . . . . . . .180
Créer une interpolation de mouvement avec un paramètre
alpha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Créer l’interpolation de la valeur alpha de l’ombre . . . . . . . . . . . . 185
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Chapitre 15 : Création de graphiques : Application de
dégradés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Ouvrir le document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
Appliquer un dégradé linéaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
Créer un dégradé radial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196
Créer une transformation de dégradé à l’aide d’une forme . . . . . . . . .198
Appliquer des touches finales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Table des matières
7
Chapitre 16 : Création de graphiques : Appliquer des filtres
et des fondus (Flash Professionnal uniquement). . . . . . . . . . . . 205
Examiner votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Ouvrir le document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207
Appliquer des filtres et des fondus. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207
Appliquer un filtre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Appliquer des filtres et des fondus à la boule blanche . . . . . . . . . 209
Chapitre 17 : Texte : Ajouter du texte à un document. . . . . . . . . 211
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Créer un bloc de texte de taille variable . . . . . . . . . . . . . . . . . . . . . . . . . 213
Créer un bloc de texte de taille fixe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Modifier du texte et des attributs de police . . . . . . . . . . . . . . . . . . . . . . 215
Sélectionner des polices de périphérique . . . . . . . . . . . . . . . . . . . . . . . 215
Ajouter un champ de saisie de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Copier un champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Attribuer des noms d’occurrence aux champs de texte . . . . . . . . . . . 217
Créer un champ de texte dynamique. . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Spécifier des options de format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Afficher le code ActionScript pour le champ de texte
dynamique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Tester le fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Vérifier l’orthographe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Chapitre 18 : ActionScript : Utiliser le mode
Assistant de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .225
Ouverture du document de démarrage. . . . . . . . . . . . . . . . . . . . . . . . . . 227
Ajout d’un script à un bouton à l’aide du mode
Assistant de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Ajout de scripts au scénario à l’aide du mode
Assistant de script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Ajout d’un script d’image au clip Titre . . . . . . . . . . . . . . . . . . . . . . . . . . .236
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238
Chapitre 19 : ActionScript : Rédiger des scripts . . . . . . . . . . . 239
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Créer l’occurrence d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . .242
8
Table des matières
Initialiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Appliquer la syntaxe ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Trouver la documentation de référence d’ActionScript . . . . . . . . . . . 245
Ajouter des commentaires à ActionScript . . . . . . . . . . . . . . . . . . . . . . 245
Rédiger une fonction pour un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Copier et modifier la fonction d’un bouton . . . . . . . . . . . . . . . . . . . . . . 247
Vérifier la syntaxe et tester votre application . . . . . . . . . . . . . . . . . . . . 248
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Chapitre 20 : ActionScript : Ajouter de l’interactivité. . . . . . . . . 251
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Ajouter une scène. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Se déplacer entre les séquences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Contrôler le document à l’aide d’une action stop() . . . . . . . . . . . . . . . 254
Lier un bouton à une scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Ajouter des éléments de navigation pour revenir à la
Séquence 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Lire un clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Utiliser la méthode attachMovie() pour lire un clip . . . . . . . . . . . . . 257
Spécifier les coordonnées d’un clip sur la scène . . . . . . . . . . . . . . 258
Purger le clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Utiliser un comportement pour lire un fichier MP3 . . . . . . . . . . . . . . . 260
Tester votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Chapitre 21 : ActionScript : Créer un formulaire contenant
une logique conditionnelle et envoyer des données . . . . . . . . . 263
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Ajouter un champ de saisie de texte pour collecter les
données de formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajouter un bouton Envoyer au formulaire . . . . . . . . . . . . . . . . . . . . . . . 266
Ajouter un message d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Ajouter un message de confirmation . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Ajouter une action stop(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Ajouter des étiquettes d’images pour la navigation . . . . . . . . . . . . . . 269
Ajouter une logique conditionnelle pour le bouton Envoyer . . . . . . . 270
Transmettre des données hors d’un fichier SWF . . . . . . . . . . . . . . . . . 271
Rédiger une fonction pour le bouton Réessayer . . . . . . . . . . . . . . . . . 272
Tester votre fichier SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Sommaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Table des matières
9
Chapitre 22 : ActionScript : Utiliser des objets et
des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
En savoir plus sur les classes et les types d’objet. . . . . . . . . . . . . . . . . 276
Créer un objet à partir d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
Modifier votre script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Créer une classe personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279
Indiquer le type des valeurs renvoyées par la méthode . . . . . . . . 280
Créer une classe personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Créer deux objets de la classe Product. . . . . . . . . . . . . . . . . . . . . . . . . .283
A propos du redimensionnement des classes existantes . . . . . . . . . .284
Etendre la classe MovieClip pour créer une nouvelle classe . . . . . . .285
Sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Chapitre 23 : Intégration de données : Présentation
(Flash Professionnel uniquement) . . . . . . . . . . . . . . . . . . . . . . . . 289
Chapitre 24 : Intégration des données : Utilisation du service
web Tips de Macromedia (Flash Professionnel uniquement) . . 291
Connexion à un service web public . . . . . . . . . . . . . . . . . . . . . . . . . . . . .292
Création d’une interface utilisateur et liaison des composants
avec le service Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Chapitre 25 : Intégration des données : Utilisation de XML pour
une feuille de temps (Flash Professionnel uniquement) . . . . . . . 301
Création de l’interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Ajout des composants DataGrid et Button . . . . . . . . . . . . . . . . . . . 308
Modification des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Chapitre 26 : Intégration des données : Utilisation de
XUpdate pour mettre à jour la feuille de temps
(Flash Professionnel uniquement) . . . . . . . . . . . . . . . . . . . . . . . . . 311
Mise à jour de la feuille de temps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
10
Table des matières
Présentation
Cette section de l’aide de Flash comprend plusieurs didacticiels détaillés
conçus pour vous enseigner les bases de Flash. Macromedia vous
recommande d’étudier ces leçons à l’aide des fichiers d’exemple fournis.
Le chemin des fichiers d’exemple est indiqué dans chaque leçon.
En effectuant ces leçons 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 leçons sont destinées aux concepteurs et développeurs Flash débutants
et de niveau intermédiaire qui souhaitent s’améliorer rapidement.
Chaque leçon cible une fonction ou un sujet spécifique de Flash et dure
entre 10 et 20 minutes, selon votre expérience. Dans ces leçons, vous
apprendrez à créer un document Flash, écrire du code ActionScript, utiliser
des comportements vidéo et de contrôle de la vidéo ou ajouter un
composant Flash.
R EM A R QU E
Ce livre n’est pas un manuel exhaustif détaillant toutes les fonctions de
Macromedia Flash. Pour des informations approfondies sur l’utilisation de
Flash, à partir du logiciel Flash choisissez l’Aide de Flash (Aide > Aide de
Flash).
11
12
Présentation
CHAPITRE 1
Tâches de base :
Créer un document
1
Vous allez maintenant découvrir toute la puissance de Macromedia Flash
Basic 8 et de Macromedia Flash Professionnel 8. Dans quelques minutes,
vous découvrirez comment créer une expérience web irrésistible combinant
vidéo, texte, graphiques et comportements de contrôle du contenu.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Parcours de l’interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Sélectionner des jeux de panneaux et organiser les panneaux . . . . . 15
Modifier l’arrière-plan et la taille de la scène . . . . . . . . . . . . . . . . . . .17
Modifier l’affichage de la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Afficher le panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Ajouter des graphiques à la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Ajouter de la vidéo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Afficher les propriétés des objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Ajouter des comportements de contrôle de la vidéo . . . . . . . . . . . 21
Utiliser l’explorateur d’animations pour afficher la structure du
document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Tester le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Consulter l’aide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Avant de commencer cette leçon, nous vous recommandons de lire le guide
Bien démarrer avec Flash afin de vous familiariser avec l’espace de travail
Flash. Pour accéder à ce guide, choisissez Aide > Bien démarrer avec Flash.
13
Parcours de l’interface utilisateur
Commencez par ouvrir le fichier FLA de démarrage que vous allez utiliser
au cours de cette leçon. Chaque leçon inclut un fichier de démarrage et un
fichier complété montrant l’aspect du fichier FLA une fois les leçons
terminées.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Create a Document, puis double-cliquez sur
document_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Create a Document et double-cliquez document_start.fla.
R E MA R Q UE
Le dossier Créer un document comprend les versions terminées des
fichiers de didacticiel FLA, pour votre référence.
Le document s’ouvre dans l’environnement auteur de Flash. Le scénario
du document comprend déjà deux calques. Pour en savoir plus sur les
calques, choisissez Aide > Didacticiels Flash > Bases de Flash > Utiliser
les calques.
L’un des calques, appelé Guides, contient des éléments qui vous
aideront à placer les objets sur la scène. L’autre calque, appelé Contenu,
est le calque sur lequel vous placerez les objets composant votre
document.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
14
Tâches de base : Créer un document
Sélectionner des jeux de panneaux et
organiser les panneaux
Le panneau Disposition d’espace de travail par défaut organise votre espace
de travail de façon à faciliter le déroulement des leçons. Vous utiliserez cette
disposition au cours de toutes les leçons que vous allez suivre dans Flash.
■
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut.
Vous pouvez déplacer les panneaux et les redimensionner de la manière
suivante :
■
Vous pouvez détacher un panneau en cliquant sur le coin supérieur
gauche de sa barre de titre et en le déplaçant au sein de l’espace de
travail.
Si le panneau s’accroche à une bordure, il est alors ancré au nouvel
emplacement (ou il retrouve son emplacement d’origine si vous l’y
avez fait glisser). Sinon, le panneau est désancré.
■
Vous pouvez redimensionner un panneau détaché en faisant glisser
son côté inférieur droit afin de l’élargir.
Utiliser les outils pour créer du contenu
Flash
Le rectangle blanc de la scène représente l’endroit où vous pouvez disposer
les objets tels que vous souhaitez les voir s’afficher dans votre fichier publié.
R EM A R QU E
Vous pouvez ouvrir plusieurs documents à la fois et utiliser les onglets des
documents, situés au-dessus de la scène, pour naviguer d’un fichier à
l’autre.
Le panneau Outils, situé à côté de la scène, offre un certain nombre de
commandes permettant de créer du texte et des graphiques vectoriels. Pour
en savoir plus sur les outils du panneau Outils, choisissez Aide >
Didacticiels Flash > Création de graphiques : Dessiner dans Flash et Aide >
Didacticiels Flash > Texte : Ajouter du texte à un document.
1.
Cliquez sur l’outil Crayon dans le panneau Outils. Cliquez sur la puce
de couleur de trait dans la zone Couleurs du panneau Outils, puis
sélectionnez la couleur de votre choix, hormis le blanc.
Parcours de l’interface utilisateur
15
2.
Déplacez le pointeur dans la scène sans relâcher le bouton de la souris
afin de dessiner une ligne.
Vous venez de créer du contenu Flash. Une fois terminé, votre
document sera bien plus impressionnant.
Annuler des modifications
Flash vous permet d’annuler toute une série de modifications apportées à
votre document. Vous allez annuler le contenu que vous venez de créer.
1.
Pour voir comment fonctionne la fonction Annuler, commencez par
ouvrir le panneau Historique (Fenêtre > Autres panneaux
> Historique).
L’outil Crayon s’affiche dans le panneau, l’utilisation de cet outil étant
la dernière action que vous avez accomplie.
2.
Effectuez l’une des opérations suivantes :
■
Sélectionnez Edition > Annuler Crayon Outil.
■
Appuyez sur Ctrl+Z (Windows) ou Commande+Z (Macintosh).
Votre dessin est effacé de la scène. Le panneau Historique affiche l’outil
Crayon en grisé, indiquant ainsi que l’annulation a été exécutée.
Flash est défini par défaut de façon à annuler 100 modifications en
ordre d’exécution inverse. Vous pouvez modifier ce paramètre par
défaut dans les préférences. Pour savoir comment modifier les
préférences, consultez la section Définition des préférences de Flash du
guide Bien démarrer avec Flash.
3.
16
Pour fermer le panneau Historique, cliquez sur le menu déroulant dans
le coin supérieur droit du panneau, puis choisissez Fermer le panneau.
Tâches de base : Créer un document
Afficher le scénario
Vous trouverez le scénario et les calques au-dessus de la scène. Vous pouvez
créer et nommer des calques, puis ajouter du contenu aux images afin
d’organiser la manière dont votre contenu Flash est lu, au fur et à mesure
que la tête de lecture parcourt les images.
■
Déplacez le pointeur de la souris sur la zone séparant la scène du
scénario. Lorsque la poignée de redimensionnement apparaît, faites-la
glisser légèrement vers le haut ou vers le bas pour redimensionner le
scénario.
Tête de lecture
Image-clé
Poignée de redimensionnement
La tête de lecture (ligne rouge) est placée sur l’Image 1 dans le scénario.
Les images-clés sont signalées par de petits cercles dans les images, qui
sont remplis pour indiquer que les images contiennent des objets. Vous
pouvez ajouter une image-clé au document si vous voulez apporter une
modification au contenu Flash de l’image.
Modifier l’arrière-plan et la taille
de la scène
La scène permet d’afficher un aperçu du contenu Flash une fois que votre
fichier sera publié. Vous allez modifier la taille de la scène afin qu’elle puisse
accueillir une illustration conçue pour une scène plus grande, puis vous
modifierez la couleur d’arrière-plan de la scène.
1.
Dans le panneauOutils, cliquez sur l’outil Sélection.
2.
Cliquez n’importe où dans l’espace de travail gris entourant la scène ou
dans l’arrière-plan de la scène, afin qu’aucun objet ne soit sélectionné.
L’inspecteur des propriétés, situé sous la scène, affiche les propriétés de
l’animation lorsque aucun objet n’est sélectionné.
Modifier l’arrière-plan et la taille de la scène
17
3.
Pour modifier la couleur d’arrière-plan de la scène, cliquez sur la puce
de couleur d’arrière-plan et sélectionnez une nuance claire de gris, par
exemple le gris avec la valeur hexadécimale CCCCCC.
4.
Pour modifier la taille de la scène, sélectionnez Taille dans l’inspecteur
des propriétés. Dans la boîte de dialogue Propriétés du document,
entrez la valeur 750 pour la largeur de la scène, puis cliquez sur OK.
La scène prend ainsi une largeur de 750 pixels.
Modifier l’affichage de la scène
Vous pouvez modifier l’affichage de la scène sans toucher à la taille réelle de
votre document.
1.
Dans la zone Affichage de la scène, au-dessus du côté droit de la scène,
saisissez 500 %. Appuyez sur Entrée (Windows) ou sur Retour
(Macintosh).
L’affichage de la scène passe à 500 %.
2.
Dans le menu contextuel Affichage de la scène, auquel vous pouvez
accéder en cliquant sur le contrôle à droite du champ de texte, choisissez
100 % pour afficher la scène dans des dimensions correspondant à la
taille du contenu Flash publié.
Afficher le panneau Bibliothèque
Le contenu Flash que vous importez ou qui représente un symbole est
stocké dans le panneau Bibliothèque. Pour en savoir plus sur les symboles
et les occurrences, choisissez Aide > Didacticiels Flash > Tâches de base :
Créer des symboles et des occurrences.
■
Afin d’afficher le panneau Bibliothèque, sélectionnez Fenêtre >
Bibliothèque.
Vous avez déjà importé des éléments de la bibliothèque et créé des
symboles pour les objets que vous allez utiliser dans cette leçon.
R E MA R Q UE
18
Flash contient aussi une bibliothèque de boutons que vous pouvez utiliser
dans votre document. Pour afficher cette bibliothèque, une fois cette
leçon terminée, sélectionnez Fenêtre > Bibliothèques communes et
sélectionnez la bibliothèque Boutons.
Tâches de base : Créer un document
Ajouter des graphiques à la
scène
Pour ajouter des éléments de la bibliothèque à votre document, vérifiez que
vous êtes en train d’ajouter l’objet au bon calque, puis faites glisser
l’élément depuis la bibliothèque jusqu’à la scène.
1.
Dans le scénario, cliquez sur le nom du calque de contenu pour le
sélectionner. Sélectionnez l’outil Sélection, faites glisser le clip Titre
(contenant une image bitmap et un graphique vectoriel) du panneau
Bibliothèque à la scène, puis alignez-le en haut de la barre grise située
dans la partie supérieure de la scène qui contient le mot Titre.
Dans Flash, vous pouvez travailler avec des images bitmap (graphismes
en pixels) et avec des illustrations vectorielles (représentations
mathématiques). Pour en savoir plus, consultez la section A propos des
graphiques vectoriels et bitmap du guide Utilisation de Flash.
2.
Sélectionnez le calque de contenu, faites glisser le symbole de texte du
panneau Bibliothèque à la scène, puis alignez-le avec le texte Trio
ZX2004 déjà en place. Utilisez les touches flèches de votre clavier pour
ajuster le texte.
Le texte de titre est en fait un graphique créé à partir de texte.
Ajouter de la vidéo
Le panneau de la bibliothèque comprend un fichier vidéo Flash importé
(FLV). Ajoutez la vidéo à votre document et Flash ajoutera les images
nécessaires pour la lire.
Pour en savoir plus sur l’utilisation de la vidéo dans Flash, reportez-vous à
la section Utilisation de la vidéo du guide Utilisation de Flash.
1.
Vérifiez que le calque de contenu est toujours sélectionné dans le
scénario. A partir du panneau Bibliothèque, faites glisser la vidéo
ggb_movie_for_trio_new jusqu’au repère vidéo gris foncé de la scène.
2.
Une boîte de dialogue s’affiche et indique que Flash va ajouter
138 images au scénario pour la vidéo. Cliquez sur Oui.
3.
Faites glisser la tête de lecture sur le scénario afin d’afficher la vidéo.
Ajouter de la vidéo
19
Afficher les propriétés des objets
Lorsque vous ajoutez un objet à la scène, vous pouvez le sélectionner, puis
afficher et modifier ses propriétés dans l’inspecteur des propriétés. Le type
d’objet sélectionné détermine les propriétés qui s’affichent. Par exemple, si
vous sélectionnez un objet de texte (et non un graphique de texte, utilisé
dans cette leçon), l’inspecteur des propriétés affiche des paramètres tels que
la police, la taille des caractères et le format du paragraphe que vous pouvez
soit afficher, soit modifier. Si aucun objet n’est sélectionné, l’inspecteur des
propriétés affiche les propriétés de l’ensemble du document.
1.
Sur la scène, sélectionnez l’outil Sélection et cliquez sur le graphique
Titre.
L’inspecteur des propriétés (Fenêtre > Propriétés > Propriétés) affiche
les paramètres du clip (hauteur, largeur et coordonnées de la scène).
R EMA R Q U E
20
2.
Sur la scène, cliquez sur le cadre de délimitation du clip que vous avez
fait glisser jusqu’à la scène et affichez ses attributs dans l’inspecteur des
propriétés.
3.
Dans la zone de texte Nom de l’occurrence de l’inspecteur des
propriétés, saisissez video comme nom d’occurrence.
Une occurrence est une instance d’un symbole sur la scène. Etant donné
qu’ActionScript, le langage de programmation de Flash, fait souvent
référence au nom des occurrences afin d’effectuer des opérations sur
celles-ci, prenez l’habitude d’attribuer un nom aux occurrences que vous
créez. Pour savoir comment donner un nom à des occurrences, choisissez
Aide > Didacticiels Flash > ActionScript : Rédiger des scripts. Pour savoir
comment donner un nom à des occurrences, consultez le didacticiel
ActionScript : Rédiger des scripts, page 239.
Tâches de base : Créer un document
Ajouter des comportements de
contrôle de la vidéo
Les comportements vous permettent d’ajouter facilement des
fonctionnalités complexes à votre document, sans qu’il ne vous soit
nécessaire de connaître ActionScript, le langage de script de Flash. Vous
allez à présent ajouter des comportements de contrôle de la vidéo.
1.
Dans le scénario, cliquez sur l’Image 1 du calque de contenu pour la
sélectionner, si cela n’a pas été fait.
2.
Sur la scène, sélectionnez l’occurrence Lire un clip (qui a l’aspect d’un
bouton de lecture) Dans le panneau Comportements (Fenêtre >
Comportements), cliquez sur le bouton Ajouter (+) et sélectionnez
Vidéo intégrée > Lire. Pour en savoir plus sur les symboles et les
occurrences, choisissez Aide > Didacticiels Flash > Tâches de base :
Créer des symboles et des occurrences.
3.
Dans la boîte de dialogue Afficher une vidéo, vérifiez que Relatif est bien
sélectionné. Sélectionnez la vidéo correspondant au nom que vous avez
donné au clip et cliquez sur OK.
4.
Dans la scène, cliquez sur l’occurrence de clip Pause pour la
sélectionner. Dans le panneau Comportements, cliquez sur Ajouter (+)
et sélectionnez Vidéo intégrée > Mettre en pause.
5.
Dans la boîte de dialogue Mettre une vidéo en pause, sélectionnez à
nouveau le clip et cliquez sur OK.
Ajouter des comportements de contrôle de la vidéo
21
6.
Sur la scène, cliquez sur l’occurrence Rembobiner afin de la sélectionner.
Dans le panneau Comportements, cliquez sur Ajouter (+) et
sélectionnez Vidéo intégrée > Rembobiner.
7.
Dans la boîte de dialogue Rembobiner une vidéo, choisissez la vidéo.
8.
Dans le champ de texte du nombre d’images à rembobiner, entrez 20.
Ce champ de texte indique le nombre d’images ramenées en arrière par
la tête de lecture lorsque l’utilisateur clique sur le bouton Rembobiner.
R E MA R Q UE
D’autres comportements de contrôle de la vidéo vous permettent de faire
avancer, de masquer et de visualiser une vidéo.
Utiliser l’explorateur d’animations
pour afficher la structure du
document
L’explorateur d’animations est l’outil qui vous permet de réorganiser,
rechercher et modifier les animations. Grâce à son arborescence,
l’explorateur d’animations fournit des informations concernant
l’organisation et le flux d’un document.
1.
Sélectionnez Fenêtre > Explorateur d’animations.
Si nécessaire, vous pouvez agrandir l’explorateur d’animations pour
afficher son arborescence complète.
Les boutons de filtre de l’explorateur d’animations permettent
d’afficher ou de masquer des informations.
2.
22
Cliquez sur le menu contextuel dans la barre de titre de l’explorateur
d’animations et sélectionnez Afficher les éléments d’animation et
Afficher les définitions de symbole, si ce n’est pas déjà fait.
Tâches de base : Créer un document
3.
Le long de la partie supérieure de l’explorateur d’animations, configurez
les boutons de filtre afin que seuls les boutons suivants soient
sélectionnés : Affiche les boutons, les clips et les graphiques, Affiche le
code ActionScript et Affiche les vidéos, 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 éléments inclus dans le
document et identifier leurs relations avec d’autres éléments.
4.
Dans le panneau Explorateur d’animations, développez Actions à lire
pour afficher l’ActionScript créé par Flash lorsque vous avez ajouté le
comportement de commande Lire une vidéo.
5.
Pour fermer l’explorateur d’animations, cliquez sur la croix.
Tester le document
Tout au long de la création d’un document, enregistrez-le et testez-le
fréquemment afin de vous assurer que le contenu Flash est lu comme
prévu. Lors du test du fichier SWF, cliquez sur les boutons de contrôle de la
vidéo afin de voir si la vidéo s’arrête, est lue et se rembobine comme prévu.
1.
Sauvegardez le document (Fichier > Enregistrer) et sélectionnez
Contrôle > Tester l’animation.
Le contenu Flash est lu dans une fenêtre de fichier SWF. FLA
représente l’extension des documents dans l’environnement de
programmation, tandis que SWF représente l’extension du contenu
Flash testé, exporté et publié.
2.
Une fois que vous aurez fini de visualiser le contenu SWF, fermez la
fenêtre du fichier SWF et revenez à l’environnement auteur.
Consulter l’aide
Les leçons fournissent une introduction à Flash et vous présentent la
manière d’utiliser les différentes fonctions afin de créer exactement le type
de document requis. Pour obtenir des informations exhaustives sur une
fonctionnalité, une procédure ou un processus décrit dans ces leçons,
veuillez consulter l’onglet Aide du panneau Aide (Aide > Aide Flash).
Consulter l’aide
23
Sommaire
Félicitations, vous avez créé un document Flash qui comprend des
graphiques, une vidéo et des comportements de contrôle de la vidéo. En
quelques minutes vous avez appris à accomplir les tâches suivantes :
■
Parcourir l’interface utilisateur
■
Ancrer et détacher des panneaux
■
Modifier l’arrière-plan et la taille de la scène
■
Modifier l’affichage de la scène
■
Afficher votre bibliothèque de documents
■
Ajouter des graphiques à la scène
■
Ajouter de la vidéo
■
Afficher les propriétés des objets
■
Ajouter des comportements de contrôle de la vidéo
■
Utiliser l’explorateur d’animations pour afficher la structure du
document
■
Tester le document
■
Consulter l’aide
Pour en savoir plus sur Flash, choisissez une autre leçon.
24
Tâches de base : Créer un document
CHAPITRE 2
Tâches de base : Créer
un bandeau, 1ère partie
2
L’apprentissage du programme Macromedia Flash Basic 8 ou Macromedia
Flash Professionnel 8 peut apparaître à priori très compliqué. Une des
raisons pour cette apparente complexité est que vous pouvez l’utiliser pour
des projets très variés : des animations, des lecteurs multimédia et des
logiciels sophistiqués. Ce didacticiel est particulièrement destiné à ceux qui
ouvrent Flash 8 pour la première fois. Il présente quelques uns des aspects
fondamentaux du programme et explique comment démarrer l’application
pour créer un projet réel. Il n’est pas nécessaire de connaître quoi que ce
soit sur Flash ou sur les techniques d’animations pour suivre ce didacticiel
qui vous fera découvrir combien il est facile d’utiliser Flash 8 pour ajouter
des éléments à vos pages web.
Il s’agit ici de la première partie d’un didacticiel en trois parties expliquant
comment créer un bandeau animé dans Flash et comment l’ajouter à une
page web avec Macromedia Dreamweaver. Vous allez d’abord apprendre
comment créer un fichier et en modifier les paramètres, importer et ajouter
des graphiques dans la scène à partir de la bibliothèque, et créer des
calques. Dans les parties 2 et 3, vous ajouterez une animation et créerez un
bouton qui ouvre une fenêtre du navigateur. Ensuite, vous déterminerez
des paramètres de publication et ajouterez le bandeau à une page web.
Tâches de base : Créer un bandeau, 1ère partie, page 25 : vous apprendrez
comment créer et structurer l’application bandeau.
Tâches de base : Créer un bandeau, 2ème partie, page 45 : vous apprendrez
comment ajouter une animation, créer un bouton et écrire des scripts de
base.
Tâches de base : Créer un bandeau, 3ème partie, page 69 : vous apprendrez
comment publier votre fichier SWF et l’insérer dans un site web à l’aide de
Dreamweaver.
Aucune connaissance préalable n’est nécessaire pour suivre ces didacticiels.
25
Dans la partie 1 de ce didacticiel, vous accomplirez les tâches suivantes :
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Création d’un document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Modification des propriétés du document . . . . . . . . . . . . . . . . . . . . 31
Importation de graphiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
Présentation des calques et du scénario. . . . . . . . . . . . . . . . . . . . . . 38
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42
Le processus de ce didacticiel comprend les tâches suivantes :
■
Etude du fichier FLA final, page 26, permet de visualiser le document
Flash final.
■
Création d’un document, page 29, explique comment créer un fichier
FLA qui sera utilisé pour créer le bandeau au cours des trois parties de
ce didacticiel.
■
Modification des propriétés du document, page 31, explique comment
modifier les dimensions du fichier SWF.
■
Importation de graphiques, page 34, explique comment importer des
éléments dans la bibliothèque du document.
■
Présentation des calques et du scénario, page 38, explique comment créer
et manipuler des calques dans le scénario principal.
■
Test de l’application, page 42, explique comment exporter et tester le
fichier SWF du document, ce qui vous permet également de tester les
modifications apportées.
Etude du fichier FLA final
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Dans cette section, vous accomplirez les tâches suivantes :
■
Ouverture du document de programmation, page 173
■
Examen du fichier FLA final, page 28
■
Fermeture du fichier FLA final, page 29
Les sections suivantes présentent les étapes à suivre pour créer vous-même
l’application en partant d’un fichier FLA flambant neuf.
26
Tâches de base : Créer un bandeau, 1ère partie
Ouverture du fichier FLA final
Il est bien utile d’analyser le fichier FLA correspondant au document de
création final pour comprendre comment l’auteur a conçu l’application.
Vous devriez analyser les types de script qui ont été employés pour ajouter
la fonctionnalité d’interactivité, et comprendre ce que vous allez créer.
Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and
Tutorials du dossier d’installation de Flash. Pour de nombreux utilisateurs,
en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en
lecture. Avant de suivre le didacticiel, copiez tout le dossier FlashBanner du
didacticiel à un emplacement de votre choix accessible en écriture.
Sur la plupart des ordinateurs, vous trouverez le dossier FlashBanner du
didacticiel aux emplacements suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.
■
Sous Macintosh : Macintosh HD/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.
Copiez le dossier FlashBanner à un autre emplacement sur le disque dur
auquel vous avez accès. Ce dossier comporte trois répertoires, Part1, Part2
et Part3, un pour chaque partie de ce didacticiel. Dans le dossier
FlashBanner/Part1, vous trouverez un fichier Flash appelé
banner1_complete.fla. Double-cliquez sur ce fichier pour l’ouvrir dans
Flash. Le fichier final du didacticiel est affiché dans l’environnement de
création Flash.
Etude du fichier FLA final
27
Examen du fichier FLA final
Dans le fichier FLA final, vous verrez la structure du fichier SWF final
pour la partie 1 de ce didacticiel. L’application, un bandeau Flash pour un
site web de gnome, ressemble à la fin de la première partie à l’illustration
suivante :
Le bandeau réalisé à la fin de la première partie
Vers la fin de la troisième partie de ce didacticiel, vous ajouterez des
graphiques, des animations et des fonctions d’interactivité au bandeau.
Ensuite, vous insérerez le bandeau dans un site web à l’aide de
Dreamweaver.
28
Tâches de base : Créer un bandeau, 1ère partie
Fermeture du fichier FLA final
Fermez le document en choisissant Fichier > Fermer.
Si vous préférez conserver le fichier final ouvert comme de référence
lorsque vous travaillez avec le fichier du bandeau, ne le modifiez pas ou
n’enregistrez aucune modification éventuelle.
Vous êtes désormais prêt à commencer la création de votre propre fichier de
bandeau dans la nouvelle section : Création d’un document.
Création d’un document
Flash 8 vous permet de créer toutes sortes d’éléments différents pour le
web, des CD-ROM et des appareils numériques. Vous créez d’abord un
fichier dans l’outil de programmation Flash que vous utilisez pour produire
des fichiers SWF. Les fichiers SWF sont les fichiers que vous placez en ligne
au sein de vos pages web. Le module Macromedia Flash Player affiche alors
le fichier afin que les visiteurs de votre site web puissent en voir le contenu
ou interagir avec son contenu.
Votre fichier SWF peut contenir de la vidéo, des sons MP3, des
animations, des images, des données etc. L’avantage du format SWF par
rapport aux autres formats réside en ce que le module Flash Player est
extrêmement répandu. Commençons par créer un bandeau.
1.
Ouvrez l’application Flash.
Création d’un document
29
Par défaut, Flash affiche la page de démarrage (voir l’illustration
suivante) dans laquelle vous pouvez sélectionner un document sur
lequel vous avez travaillé récemment, créer un nouveau document Flash
ou un fichier ActionScript, ou de créer un nouveau document à l’aide
d’un modèle prédéfini. Avec Flash Professionnel 8, vous avez la
possibilité de créer d’autres types de fichiers.
Par défaut, Flash affiche la page de démarrage à l’ouverture de
l’application. Cette illustration montre les options disponibles dans Flash
Professionnel 8.
2.
R E MA R Q UE
Si Flash n’affiche pas la page de démarrage (cette fonction pourrait avoir
été désactivée précédemment si vous partagez votre ordinateur), vous
pouvez choisir Fichier > Nouveau dans le menu principal pour créer un
nouveau document. Vérifiez que l’onglet Général est activé, choisissez
Document Flash, puis cliquez sur OK.
3.
30
Cliquez sur Document Flash dans la colonne Créer de la page de
démarrage pour créer un document vierge.
Choisissez Fichier > Enregistrer sous dans le menu principal.
Tâches de base : Créer un bandeau, 1ère partie
4.
Appelez le fichier banner.fla, cherchez un répertoire ou créez en un
nouveau dans lequel vous enregistrerez votre projet et cliquez ensuite sur
Enregistrer.
Flash enregistre les documents modifiables en tant que fichiers FLA.
Un document au format FLA vous permet d’exporter (ou compiler) les
fichiers SWF que vous pouvez intégrer dans une page HTML. Flash
Player, installé sur la plupart des ordinateurs, lit les fichiers SWF
exportés depuis Flash.
R E MA R Q UE
Il peut être judicieux d’enregistrer tout nouveau document dès le début
d’un travail (et fréquemment par la suite) afin de ne pas perdre le travail
effectué en cas de problème.
Une fois le fichier enregistré, passez à l’exercice suivant : Modification des
propriétés du document.
Modification des propriétés du
document
En ce point, vous voyez une toile vierge entourée de nombreuses
commandes (voir illustration suivante). Le grand carré blanc est appelé la
scène et c’est là que vous allez placer des éléments, des images, des boutons,
du texte ou des animations par exemple, que vous souhaitez afficher dans le
fichier SWF. La scène et les panneaux sont généralement appelés l’espace de
travail de Flash ou l’environnement de création. L’environnement Flash est
constitué de la scène, de nombreux panneaux et outils, et du scénario audessus de la scène. Pour obtenir des informations détaillées sur chaque
partie de l’espace de travail, reportez-vous à Parcours de l’interface
utilisateur, page 14.
Modification des propriétés du document
31
De nombreux panneaux sont disposés autour de la scène. Le panneau sur la
gauche est appelé le panneau Outils (voir l’illustration suivante). Il
comprend des outils que vous pouvez utiliser pour créer et modifier des
documents, tels que des outils de dessin et de sélection.
Utilisez le panneau Outils pour dessiner et faire des sélections. Dans ces
didacticiels, vous utiliserez l’outil de sélection (la flèche noire) pour faire des
sélections.
Un des panneaux en bas de l’application Flash est le panneau Propriétés.
(Choisissez Fenêtre > Propriétés > Propriétés si ce panneau n’est pas
visible.) Ce panneau est également appelé l’inspecteur des propriétés (voir
l’illustration suivante). Il vous permet de modifier diverses propriétés de
tout élément couramment sélectionné dans un document (un graphique
ou une image par exemple) ou de définir les propriétés pour l’ensemble du
fichier SWF (cadence ou dimensions, par exemple). Pour obtenir plus
d’informations sur le contrôle de la cadence d’un document, reportez-vous
à Modifier le nombre d’images par seconde, page 167.
32
Tâches de base : Créer un bandeau, 1ère partie
L’inspecteur des propriétés vous permet de modifier les propriétés de
document lorsqu’aucun objet ou image ne sont sélectionnés.
1.
Ouvrez l’inspecteur des propriétés (Fenêtre > Propriétés > Propriétés),
puis cliquez sur le bouton à côté de l’indication Taille pour ouvrir la
boîte de dialogue Propriétés du document.
R EM A R QU E
Vérifiez qu’aucune image n’est sélectionnée. Cliquez sur la scène si le
bouton mentionné à l’étape précédente n’est pas visible.
Un clic sur ce bouton dans l’inspecteur des propriétés ouvre la boîte de
dialogue Propriétés du document. Vous pouvez alors modifier la taille et la
couleur de la scène.
Le bouton affiche les dimensions actuelles du fichier FLA (550 x
400 pixels). Par défaut, les dimensions de la scène dans un nouveau
document Flash sont de 550 pixels x 400 pixels (largeur x hauteur).
En cliquant sur Taille, vous ouvrez une boîte de dialogue dans
laquelle vous pouvez modifier plusieurs propriétés relatives au
document (les dimensions de la scène, la couleur et la cadence
d’affichage du document, par exemple).
2.
Saisissez 160 dans le champ Largeur et 600 dans le champ Hauteur.
La saisie de nouvelles valeurs dans ces champs donne de nouvelles
dimensions à votre fichier FLA. Vous devez utiliser ces dimensions
spécifiques, car vous allez créer un bandeau qui doit avoir une taille
standard. Dans ce didacticiel, vous allez créer un « wide skyscraper »
(gratte-ciel étendu). Une liste des tailles standard des bandeaux est
publiée sur la page Interactive Advertising Bureau du site Interactive
Marketing Units à l’adresse www.iab.net/standards/adunits.asp.
R E MA R QU E
Vous pouvez également créer des bandeaux à partir d’un modèle de
Macromedia en choisissant Fichier > Nouveau dans le menu principal.
Sélectionnez l’onglet Modèles et choisissez la catégorie Publicité.
Modification des propriétés du document
33
3.
Cliquez sur OK une fois les nouvelles dimensions saisies pour retourner
à l’environnement de création.
Une fois dans l’environnement de création, vous pouvez constater que
les dimensions de votre document ont changé. Vous pouvez également
modifier la couleur courante de l’arrière-plan ainsi que la cadence du
document directement dans l’inspecteur des propriétés sans ouvrir la
boîte de dialogue Propriétés du document. Vous trouverez des
informations sur la cadence dans la deuxième partie de ce didacticiel,
Tâches de base : Créer un bandeau, 2ème partie, page 45.
4.
Choisissez Fichier > Enregistrer pour enregistrer le document avant de
passer à la section suivante (Importation de graphiques).
Importation de graphiques
Lorsque vous travaillez avec Flash, il est très fréquent d’importer des
éléments dans un document. Peut-être avez-vous un logo de société ou des
graphiques qu’un dessinateur vous a fournis pour votre projet. Vous pouvez
importer de nombreux éléments dans Flash, y compris des sons, de la
vidéo, des images bitmap et d’autres formats graphiques (tels que PNG,
JPEG, AI et PSD).
Les graphiques importés sont stockés dans la bibliothèque du document.
Celle-ci contient les éléments que vous importez dans le document et les
symboles que vous créez dans Flash. Un symbole est un graphique
vectoriel, un bouton, une police, un composant ou un clip que vous créez
en une seule fois et pouvez réutiliser à plusieurs reprises.
Ainsi, il n’est pas nécessaire de dessiner vos propres graphiques dans Flash,
vous pouvez importer une image d’un gnome pré-dessiné et enregistré dans
le fichier source du didacticiel. Avant de procéder à l’importation, vérifiez
que vous enregistrez les fichiers source pour ce didacticiel conformément à
la section Ouverture du fichier FLA final, puis enregistrez les images dans le
même répertoire que celui du fichier banner.fla.
34
Tâches de base : Créer un bandeau, 1ère partie
1.
Choisissez Fichier > Importer > Importer dans la bibliothèque pour
importer une image dans le document ouvert.
La boîte de dialogue Importer s’affiche (voir l’illustration suivante)
pour vous permettre de sélectionner le fichier que vous souhaitez
importer.
Naviguez jusqu’au dossier du disque dur qui contient une image à importer
dans votre document Flash
2.
Naviguez jusqu’au répertoire dans lequel vous avez enregistré les fichiers
source du didacticiel et sélectionnez l’image bitmap enregistrée dans le
répertoire FlashBanner/Part1.
3.
Sélectionnez l’image gnome.png et cliquez sur Ouvrir (Windows) ou
Importer (Macintosh).
L’image est importée dans la bibliothèque du document.
R E MA R Q UE
Vous pouvez faire glisser des éléments de la bibliothèque vers la scène à
plusieurs reprises si vous souhaitez obtenir plusieurs occurrences du
même élément. La taille du fichier n’augmente pas si vous utilisez
plusieurs occurrences sur la scène. Le fichier SWF ne stocke que les
informations du symbole ou de l’élément d’origine de la bibliothèque, et
traite chaque occurrence comme un duplicata..
4.
Choisissez Fenêtre > Bibliothèque pour ouvrir le panneau Bibliothèque.
L’image, gnome.png, que vous venez d’importer apparaît dans la
bibliothèque du document.
Importation de graphiques
35
5.
Sélectionnez l’image importée dans la bibliothèque et faites-la glisser
vers la scène.
Peu importe l’endroit où vous placez l’image sur la scène, puisque vous
définirez ses coordonnées précises par la suite. Les éléments déposés sur
la scène apparaissent lorsque le fichier SWF est lu.
6.
Cliquez sur l’outil Sélection, puis sélectionnez l’occurrence sur la scène.
En regardant l’inspecteur des propriétés, vous pouvez constater qu’il est
possible de modifier la largeur et la hauteur de l’image ainsi que ses
coordonnées X et Y sur la scène. En sélectionnant un objet sur la scène,
vous pouvez voir et modifier ses coordonnées actuelles dans l’inspecteur
des propriétés (voir l’illustration suivante).
Les coordonnées X et Y correspondent au point d’alignement qui est l’angle
supérieur gauche de ce symbole de clip.
36
Tâches de base : Créer un bandeau, 1ère partie
7.
Saisissez 0 dans le champ X et 0 dans le champ Y.
La saisie de ces valeurs met les deux coordonnées X et Y à 0, comme le
montre l’illustration suivante.
Définissez les coordonnées X et Y à l’aide de l’inspecteur de propriétés.
Mettez les valeurs X et Y à 0.
L’établissement de ces nouvelles coordonnées déplace le coin supérieur
gauche de l’image dans le coin supérieur gauche de la scène. Vous
pouvez déplacer l’image bitmap sur la scène avec l’outil de sélection au
lieu de modifier les coordonnées dans l’inspecteur des propriétés.
Cependant, l’inspecteur des propriétés permet de positionner avec
précision un objet, comme vous l’avez fait dans cette étape.
8.
Choisissez Fichier > Enregistrer pour enregistrer le document avant de
passer à la section suivante (Présentation des calques et du scénario).
R EM AR QU E
Vous pouvez également importer des fichiers de son dans vos fichiers
FLA. Cette opération n’est pas décrite dans ce didacticiel, mais de plus
amples informations sont précisées au Chapitre12, Utilisation du son.
Importation de graphiques
37
Présentation des calques et du
scénario
Le scénario apparaît au-dessus de la scène dans l’espace de travail de Flash.
Le scénario, qui contient des calques et des images, permet d’organiser les
éléments de votre document et d’en contrôler les contenus de manière
chronologique.
Les documents Flash, pareillement à des films ou des sons, peuvent se
dérouler sur une période de temps qui est mesurée en nombre d’images par
seconde. Les calques sont similaires à des feuilles transparentes empilées les
unes sur les autres et chaque calque peut contenir des images, des textes ou
des animations qui sont affichés sur la scène. La deuxième partie de ce
didacticiel, Tâches de base : Créer un bandeau, 2ème partie, page 45, vous
renseignera d’avantage sur les images et le scénario.
Le fichier FLA actuel possède un calque (Calque 1) dont les contenus
tiennent sur une seule image (Image 1). C’est en effet la façon dont les
documents Flash vierges sont ouverts.
Dans cet exercice, vous allez verrouiller et changer le nom du Calque 1.
Souvent, on veut placer des objets à une position particulière sur la scène.
Pour que ces objets demeurent à la même position, Flash vous permet de
verrouiller les calques afin que vous ne puissiez pas y sélectionner des
éléments et les déplacer par inadvertance.
Dans cette section, vous accomplirez les tâches suivantes :
38
■
Création d’un calque, page 40
■
Importation d’éléments dans un calque, page 41
Tâches de base : Créer un bandeau, 1ère partie
1.
Sélectionnez le Calque 1 dans le scénario et cliquez sur le point en
dessous de l’icône de verrou, comme illustré ci-dessous.
Verrouillage d’un calque afin que son contenu ne soit pas déplacé ou
supprimé par inadvertance de la scène. Cela empêche également d’ajouter
d’autres éléments sur ce calque par inadvertance.
Ce premier calque étant désormais verrouillé, vous devez ajouter de
nouveaux calques avant de pouvoir ajouter d’autres objets sur la scène.
Il n’est pas possible d’ajouter de nouveaux objets à un calque verrouillé.
2.
Choisissez l’outil de sélection dans le panneau Outils et double-cliquez
sur le nom Calque 1.
Le double-clic sur le nom d’un calque permet de modifier le nom de ce
calque.
3.
Saisissez arrière-plan dans le champ du nom du calque. Puis enregistrez
votre fichier.
Lorsque vous travaillerez sur des projets contenant plusieurs calques,
des noms de calques, tels que Calque 1 et Calque 14, ne renseignent
nullement sur les objets présents sur le calque. Prenez dès maintenant la
bonne habitude de donner un nom significatif aux calques.
4.
Choisissez Fichier > Enregistrer avant de passer à l’exercice suivant
(Création d’un calque).
R EM A R QU E
Vous pouvez également organiser vos calques dans des dossiers de
calques. Pour plus d’informations, consultez la section Organiser les
calques dans un dossier, page 100.
Présentation des calques et du scénario
39
Création d’un calque
Pratiquement tout projet Flash dans lequel vous importez des graphiques et
des animations, nécessite de créer au moins quelques calques. Vous devez
répartir certains éléments dans leurs propres calques, en particulier si vous
décidez d’animer des objets. Vous pouvez également empiler des
graphiques les uns sur les autres, et même créer un effet de profondeur ou
de recouvrement à l’aide de plusieurs calques.
1.
Sélectionnez le calque arrière-plan dans le scénario, puis cliquez sur
Insérer un calque pour créer un nouveau calque vide.
Le nouveau calque est créé au-dessus du calque arrière-plan (voir
l’illustration suivante).
Cliquez sur Insérer un calque pour insérer un nouveau calque au-dessus du
calque couramment sélectionné.
2.
Double-cliquez sur le nom du nouveau calque pour le modifier.
3.
Saisissez animation dans le champ de nom du nouveau calque.
Les graphiques sont empilés sur la scène en fonction de la position des
calques sur le scénario. Par exemple, tout ce que vous placez dans le
calque animation apparaîtra au-dessus du graphique dans le calque
arrière-plan. Vous allez ajouter une animation dans ce calque dans la
deuxième partie de ce didacticiel.
4.
R EM A R QU E
40
Choisissez Fichier > Enregistrer avant de passer à l’exercice suivant
(Importation d’éléments dans un calque).
S’il est nécessaire de réorganiser les calques, l’outil de sélection vous
permet de choisir et déplacer un calque au-dessus ou en dessous d’un
autre calque dans le scénario.
Tâches de base : Créer un bandeau, 1ère partie
Importation d’éléments dans un calque
Dans un précédent exercice, Importation de graphiques, vous avez importé
directement le graphique gnome.png dans la bibliothèque du document.
Puis vous avez déposé le graphique sur le calque sélectionné sur la scène.
Vous pouvez également importer des éléments directement sur la scène au
lieu de les importer dans la bibliothèque. Pour cela, vous devez d’abord
sélectionner l’image dans laquelle vous voulez importer le graphique sur le
scénario. Vous pouvez ensuite importer le graphique dans cette image qui
est affichée sur la scène. Dans le prochain exercice, vous utiliserez cette
technique pour importer un graphique.
1.
Sélectionnez l’Image 1 dans le calque d’animation.
Vous devez importer le graphique star.png dans le calque d’animation.
2.
Choisissez Fichier > Importer > Importer dans la scène.
La boîte de dialogue Ouvrir apparaît pour vous permettre de
sélectionner un graphique enregistré dans un dossier de votre
ordinateur. Naviguez jusqu’au dossier dans lequel se trouvent les
fichiers source de ce didacticiel.
3.
Sélectionnez star.png dans les fichiers sources du didacticiel et cliquez
sur Ouvrir (Windows) ou Importer (Macintosh).
Le graphique est importé dans le calque d’animation (voir l’illustration
suivante) et apparaît sur la scène.
Importation du graphique dans l’image du calque sélectionné dans le
scénario. La deuxième partie de ce didacticiel, Tâches de base : Créer un
bandeau, 2ème partie, page 45, vous renseignera d’avantage sur le scénario
et les calques.
4.
Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque).
Le graphique, que vous venez d’importer dans la scène, est également
un élément apparaissant dans la bibliothèque. Même si vous importez
un élément directement dans la scène, Flash stocke toujours les
éléments importés dans la bibliothèque.
Présentation des calques et du scénario
41
5.
Cliquez sur l’outil Sélection dans le panneau Outils.
Placez le fichier star.png sur la scène juste au-dessus de la tête du gnome
dans le graphique, comme illustré ci-dessous.
Positionnement du graphique star.png juste au-dessus de la tête du gnome.
6.
Choisissez Fichier > Enregistrer pour enregistrer votre document avant
de passer à la sectionTest de l’application.
Test de l’application
Pour terminer ce didacticiel, vous pouvez tester votre document dans Flash.
Le fichier SWF est alors lu dans Flash Player. Par exemple, vous pouvez
vérifier le bon fonctionnement de votre code dans Flash Player, l’animation
dans le scénario, l’interactivité d’un utilisateur et plus encore. Cette façon
de procéder est beaucoup plus rapide que de télécharger votre travail sur un
serveur à chaque fois que vous souhaitez voir le fichier SWF en action.
42
Tâches de base : Créer un bandeau, 1ère partie
1.
Choisissez Contrôle > Tester l’animation dans le menu principal.
L’environnement de test s’ouvre et votre document est lu dans Flash
Player. Vous pouvez alors voir la version compilée au format SWF de
votre fichier FLA. Vous utiliserez souvent la commande Tester
l’animation pour vérifier les modifications apportées à votre document
FLA.
2.
Cliquez sur le bouton Fermer de la fenêtre contenant le fichier SWF
pour retourner à l’environnement de création.
naviguez jusqu’au dossier sur le disque dur dans lequel vous avez
enregistré banner.fla au début de ce didacticiel en Création d’un
document.
Ce dossier devrait contenir un fichier supplémentaire SWF, appelé
banner.swf. Il s’agit de la version compilée du fichier banner.fla.
Lorsque vous souhaitez créer une version finale de votre fichier destiné
au téléchargement, il vous faut d’abord définir des paramètres de
publication supplémentaires dans Flash avant de compiler le fichier
SWF. Ces paramètres seront présentés dans la partie 3 (Tâches de base :
Créer un bandeau, 3ème partie, page 69) de ce didacticiel.
R E MA R Q UE
Si vous voulez comparer vos résultats au fichier source du didacticiel,
ouvrez le fichier banner1_complete.fla dans le dossier FlashBanner/Part1
que vous avez enregistré sur le disque dur dans Ouverture du document de
programmation, page 173.
Sommaire
Félicitations, vous avez terminé la première étape de création d’un bandeau
dans Flash. Vous avez utilisé l’outil de programmation de Flash pour créer
un document, ajouter des éléments et manipuler le fichier à l’aide de
nombreux outils.
En très peu de temps, vous avez appris comment utiliser l’espace de travail
de Flash pour accomplir les tâches suivantes :
■
installer un fichier FLA
■
importer des éléments dans le fichier FLA
■
disposer des éléments dans un fichier FLA
■
créer et modifier des calques
■
tester un fichier SWF
Sommaire
43
Vous êtes en train de créer un bandeau dans Flash que vous pourrez
intégrer dans une page HTML à l’aide de Dreamweaver. Dans les deux
parties suivantes de ce didacticiel, vous aller créer et modifier des symboles,
créer une animation, ajouter du code ActionScript à un bouton servant à
ouvrir une page web, et ajouter le bandeau à un site web.
Pour continuer la création de cette application, consultez la deuxième
partie de ce didacticiel : Tâches de base : Créer un bandeau, 2ème partie,
page 45.
44
Tâches de base : Créer un bandeau, 1ère partie
CHAPITRE 3
Tâches de base : Créer
un bandeau, 2ème partie
3
Bienvenue dans la 2ème partie de cette introduction en trois parties à
Macromedia Flash Basic 8 ou Macromedia Flash Professionnel 8. Vous
avez terminé avec succès la 1ère partie de ce didacticiel au cours de laquelle
vous avez créé, configuré et importé des objets dans un fichier FLA. La
lecture de cette 2ème partie montre votre intérêt à approfondir vos
connaissances de Flash. C’est bien puisque vous allez apprendre à créer des
symboles, une animation, et même écrire du code ActionScript pour
réaliser le bandeau dans ce didacticiel. En suivant cette 2ème partie, vous
allez ajouter le bandeau à un site web à l’aide de Dreamweaver (ou en
option, vous pouvez télécharger le bandeau dans un site web en utilisant
tout autre logiciel).
Reportez-vous à la présentation de Tâches de base : Créer un bandeau, 1ère
partie, page 25 pour lire une description des parties 1, 2 et 3 de ce
didacticiel.
Aucune connaissance préalable n’est nécessaire pour suivre ces didacticiels,
toutefois vous devriez avoir suivi et terminé la 1ère partie (Tâches de base :
Créer un bandeau, 1ère partie, page 25) de ce didacticiel avant de
commencer la 2ème partie.
Dans la partie 2 de ce didacticiel, vous accomplirez les tâches suivantes :
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ajout de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Création d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Ajout d’animation au scénario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Création d’un bouton. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Ecriture d’actions simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Test de l’application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
45
Le processus de ce didacticiel comprend les tâches suivantes :
■
Etude du fichier FLA final, page 46, permet de visualiser le document
Flash final pour la partie 2.
■
Ajout de texte, page 50, explique comment créer et formater un texte
dans un fichier FLA.
■
Création d’un symbole, page 53, explique comment créer un symbole de
clip auquel vous ajouterez une animation.
■
Ajout d’animation au scénario, page 55, explique comment créer une
animation à l’aide du scénario principal et d’interpolations de
mouvement.
■
Création d’un bouton, page 62, explique comment créer un bouton
pour ajouter une fonction d’interactivité au bandeau.
■
Ecriture d’actions simples, page 65, explique comment écrire du code
ActionScript pour activer un bouton.
■
Test de l’application, page 67, explique comment exporter et tester le
fichier SWF du document, ce qui permet également de tester les
modifications apportées.
Etude du fichier FLA final
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Dans cette section, vous accomplirez les tâches suivantes :
■
Ouverture du document de programmation, page 173
■
Examen du fichier FLA final, page 48
■
Fermeture du fichier FLA final, page 49
Les sections suivantes présentent les étapes à suivre pour créer vous-même
l’application en partant d’un fichier FLA flambant neuf.
46
Tâches de base : Créer un bandeau, 2ème partie
Ouverture du fichier FLA final
Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and
Tutorials du dossier d’installation de Flash. Pour de nombreux utilisateurs,
en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en
lecture. Avant de suivre le didacticiel, copiez tout le dossier FlashBanner du
didacticiel à un emplacement de votre choix accessible en écriture. Dans la
1ère partie, vous avez peut-être déjà copié les fichiers sources de
FlashBanner à un autre emplacement sur le disque dur.
Sur la plupart des ordinateurs, vous trouverez le dossier FlashBanner du
didacticiel aux emplacements suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.
■
Sous Macintosh : Macintosh HD/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.
Copiez le dossier FlashBanner à un autre emplacement sur le disque dur
auquel vous avez accès. Ce dossier comporte trois sous-répertoires, un pour
chaque partie de ce didacticiel : Part1, Part2 et Part3. Dans le dossier
FlashBanner/Part2, vous trouverez un fichier Flash appelé
banner2_complete.fla. Double-cliquez sur ce fichier pour l’ouvrir dans
Flash. Le fichier final du didacticiel est affiché dans l’environnement de
création Flash.
Etude du fichier FLA final
47
Examen du fichier FLA final
Dans le fichier FLA final, vous verrez la structure du fichier SWF final
pour la partie 2 de ce didacticiel. L’application, un bandeau Flash pour un
site web de gnome, ressemble à la fin de la deuxième partie à l’illustration
suivante :
Le bandeau réalisé pour la 2ème partie
48
Tâches de base : Créer un bandeau, 2ème partie
Ce fichier contient une animation dans un clip, du texte, un bouton
invisible et des éléments actifs que vous avez importés au cours de la 1ère
partie de ce didacticiel.
■
L’occurrence du clip contient une occurrence graphique que vous allez
animer.
■
Les champs de texte contiennent du texte statique stylisé que vous
afficherez sur la scène.
■
Le bouton invisible recouvre toute la scène et permet aux visiteurs du
site d’ouvrir un nouveau site web en cliquant sur le bandeau.
■
Les éléments actifs graphiques comprennent une image bitmap
d’arrière-plan (le gnome) et le dessin d’une étoile que vous animerez
dans un prochain exercice.
Vers la fin de la troisième partie de ce didacticiel, vous ajouterez des
graphiques, des animations et des fonctions d’interactivité au bandeau.
Puis vous insérerez le bandeau dans un site web à l’aide de Dreamweaver.
Fermeture du fichier FLA final
Fermez le document en choisissant Fichier > Fermer.
Si vous préférez conserver le fichier final ouvert comme de référence
lorsque vous travaillez avec le fichier du bandeau, ne le modifiez pas ou
n’enregistrez aucune modification éventuelle.
Vous êtes désormais prêt à commencer la création de votre propre fichier de
bandeau dans la nouvelle section : Ajout de texte.
Etude du fichier FLA final
49
Ajout de texte
Vous allez décorer le bandeau en y ajoutant du texte. Vous pouvez ajouter
plusieurs types de texte à un document Flash : du texte statique, du texte
dynamique ou du texte de saisie. Le texte statique est particulièrement
pratique lorsque vous devez ajouter du texte décoratif sur la scène ou du
texte qu’il n’est pas nécessaire de modifier ou de charger d’une source
externe. Employez le texte dynamique lorsque vous devez charger le texte
d’un fichier ou d’une base de données, ou modifier le texte à la lecture du
fichier SWF dans Flash Player. Employez le texte de saisie lorsque vous
voulez que l’utilisateur entre des informations dans un champ de texte.
Vous pouvez saisir ce texte et le transmettre à une base de données, vous en
servir pour manipuler quelque élément dans le fichier SWF, etc.
L’outil Texte vous permet d’ajouter ces trois types de texte. Au cours de cet
exercice, vous allez ajouter du texte statique à la scène à des fins décoratives.
Pour ce faire, suivez les étapes ci-après :
Ouvrez le fichier banner.fla que vous avez créé dans la 1ère partie de ce
didacticiel et renommez-le banner2.fla.
R EMA R Q U E
50
Si vous n’aviez pas terminé la 1ère partie de ce didacticiel ou si vous avez
perdu ce fichier, ouvrez l’archive ZIP des fichiers source qui est jointe à ce
didacticiel. Dans le dossier de démarrage, cherchez banner2.fla et utilisez
ce fichier pour commencer le didacticiel.
1.
Choisissez Insertion > Scénario > Calque pour insérer un nouveau
calque. Double-cliquez sur le nom du calque et tapez texte pour en
changer le nom.
2.
Dans le panneau Outils, choisissez l’outil Texte qui est un bouton
représentant un A majuscule.
3.
Cliquez en haut de la scène et tapez Surmené ? dans le champ sur la
scène.
4.
Sélectionnez le champ de texte (un cadre apparaît autour du texte
lorsque vous le sélectionnez).
5.
Ouvrez l’inspecteur des propriétés (Fenêtre > Propriétés > Propriétés) et
vérifiez que Texte statique apparaît dans le menu déroulant Type de
texte.
Tâches de base : Créer un bandeau, 2ème partie
6.
Changez la police du texte en sélectionnant une police de votre choix.
Vous modifiez la police à l’aide du menu déroulant Police (situé à côté
de l’icône A visible sur l’illustration suivante).
7.
Choisissez Texte bitmap (sans anti-alias) dans le menu déroulant de la
méthode de rendu des polices.
Les options anti-alias font que les polices de petite taille apparaissent
distinctement dans les applications, mais donnent un aspect crénelé aux
polices de grande taille. Puisque vous créez un texte de grande taille
pour le bandeau, vous devriez utiliser un texte bitmap ayant un contour
régulier avec une police de grande taille.
8.
Donnez à la police une taille de 20 points à l’aide du menu déroulant
pour la taille des polices.
Vous devez désormais changer la taille de la police de façon à faire tenir
le texte sur la scène.
Modifications des paramètres du texte dans l’inspecteur des propriétés
Une fois ces opérations terminées, le texte devrait avoir les mêmes taille
et position que le texte sur l’illustration suivante.
Ajout de texte statique au bandeau Sélectionnez la police que vous voulez
utiliser.
9.
Sélectionnez de nouveau l’outil Texte et tapez Sous payé ? sous le texte
ajouté précédemment.
Ajout de texte
51
10. Sélectionnez
le champ de texte et ouvrez l’inspecteur des propriétés.
Choisissez la police sélectionnée aux étapes précédentes.
11.
Sélectionnez ensuite une taille de police pour obtenir un texte
suffisamment grand, mais tenant toujours sur la scène.
les étapes 9 à 11 pour ajouter le texte Gnome ? sous les deux
lignes de texte précédentes. Une fois ces opérations terminées, le
bandeau ressemblera à la première illustration dans ce didacticiel qui
montre le fichier final de la 2ème partie.
12. Répétez
13.
(Facultatif) Ouvrez le panneau Aligner (Fenêtre > Aligner) pour aligner
le texte sur le centre de la scène. Sélectionnez un bloc de texte sur la
scène, dans le panneau Aligner cliquez sur Vers la scène et ensuite sur
Aligner les centres horizontalement (le survol des boutons du panneau
permet de voir un texte de description de leur fonction).
14. Choisissez Fichier
> Enregistrer pour enregistrer votre document avant
de continuer.
Lorsque le fichier a été enregistré, passez à l’exercice suivant : Création
d’un symbole.
R EM A R QU E
52
Pour obtenir des effets de texte plus complexes, vous pouvez créer un
texte dans FreeHand, enregistrer le fichier et l’importer. De même, avec
Adobe Illustrator, vous pouvez également exporter le texte au format PNG
ou SWF. Vous pouvez ensuite importer ce texte dans Flash. Vous pouvez
également étudier les options anti-alias avancées de FlashType. Pour plus
d’informations reportez-vous au Chapitre 6, A propos de FlashType.
Tâches de base : Créer un bandeau, 2ème partie
Création d’un symbole
Un symbole est un objet que vous créez dans Flash. Comme vous l’avez
appris dans la 1ère partie, un symbole peut être un graphique, un bouton
ou un clip que vous pouvez ensuite réutiliser dans le fichier FLA en cours
ou dans d’autres fichiers FLA. Les symboles que vous créez sont
automatiquement ajoutés à la bibliothèque du document (Fenêtre >
Bibliothèque) afin que vous puissiez les utiliser plusieurs fois dans un
document.
Lorsque vous ajoutez de l’animation, vous devriez toujours animer les
symboles dans Flash au lieu d’animer des graphiques bruts (graphiques que
vous dessinez) ou des éléments bruts importés (tel qu’un fichier PNG). Par
exemple, si vous tracez un cercle à l’aide de l’outil Ovale dans Flash, vous
devriez convertir ce graphique en un clip avant de l’animer. Cela vous
permet de réduire la taille du fichier SWF et facilite la création
d’animations dans Flash.
Dans l’exercice suivant, vous allez créer un symbole de clip que vous
animerez dans des exercices ultérieurs.
1.
Dans banner2.fla, sélectionnez le graphique star.png (importée au cours
de la 1ère partie) et choisissez Modifier > Convertir en symbole dans le
menu principal.
La boîte de dialogue Convertir en symbole s’ouvre (voir l’illustration
suivante) pour vous permettre de donner un nom au symbole et de
choisir le type de ce dernier.
2.
Saisissez rejoins-nous dans le champ de texte Nom (voir l’illustration
suivante).
Après avoir créé le symbole, vous verrez le nom du symbole, rejoinsnous, dans le panneau Bibliothèque. Vous verrez également, à côté du
nom du symbole, une icône représentant un clip.
Création d’un symbole
53
N’oubliez pas que le nom du symbole est différent de son nom
d’occurrence puisqu’il peut y avoir plusieurs occurrences d’un même
symbole sur la scène. Par exemple, vous pouvez définir un nom
d’occurrence pour le symbole rejoins-nous à l’aide de l’inspecteur des
propriétés après l’avoir déplacé sur la scène depuis le panneau
Bibliothèque. Si vous déposez une autre occurrence du symbole rejoinsnous sur la scène, donnez-lui un nom d’occurrence différent. Les noms
d’occurrence sont utilisés dans le code ActionScript pour identifier et
manipuler les occurrences avec le code. Vous devez suivre certaines
conventions lorsque vous donnez un nom à une occurrence. (Ces
conventions sont présentées dans Ecriture d’actions simples).
Utilisez la boîte de dialogue Convertir en symbole pour convertir un
contenu sélectionné en un symbole, lui donner un nom, et ensuite cliquez
sur OK (voir ci-dessus) pour l’ajouter à la bibliothèque du document. Lors
de la conversion d’un symbole, vous verrez une petite boîte de dialogue sans
le lien avancé ni les informations sources.
54
Tâches de base : Créer un bandeau, 2ème partie
3.
Sélectionnez l’option Clip, puis cliquez sur OK.
Cela signifie que vous allez convertir le graphique en un symbole de
clip. Les symboles de clip possèdent leur propre scénario. Par
conséquent, vous pouvez animer chaque occurrence de clip dans son
propre scénario et dans le scénario principal du document. Cette
fonction est unique aux occurrences de clip.
4.
Choisissez Fichier > Enregistrer pour enregistrer votre document avant
de continuer.
Lorsque le fichier a été enregistré, passez à l’exercice suivant : Ajout
d’animation au scénario. Dans cet exercice, vous allez animer le clip.
Ajout d’animation au scénario
Vous avez déjà utilisé le scénario dans la 1ère partie de ce didacticiel (Tâches
de base : Créer un bandeau, 1ère partie, page 25) pour insérer de nouveaux
calques et ajouter des éléments à ces calques. Dans la 1ère partie, vous avez
ajouté des éléments actifs à une image dans le scénario. Vous avez sans
doute remarqué qu’après l’ajout de contenus à une image un cercle plein
apparaît sur l’image pour indiquer que cette image contient au moins un
objet. Chaque ajout ou changement de contenu dans une image est appelé
image-clé et est représenté par un point noir. Une image-clé est une image
dans laquelle vous définissez les modifications de l’animation, ou une
image avec des contenus. Une image-clé vide est représentée par un cercle
vide.
Vous créez une animation dans un document Flash en ajoutant des
contenus à un scénario. Il peut s’agir du scénario principal ou d’un scénario
au sein d’un clip. Lorsque la tête de lecture parcourt le scénario, chaque
image est lue l’une après l’autre et, si elles sont lues rapidement (comme un
folioscope ou une suite d’images sur une bobine de film), vous pouvez créer
une animation.
Ajout d’animation au scénario
55
Lorsque vous créez une animation image par image, chaque image est une
image-clé. Dans une animation interpolée, vous définissez les images-clés à
certains points importants de l’animation et c’est Flash qui se charge de
créer les contenus des images intermédiaires. Flash affiche les images
interpolées d’une animation interpolée en bleu clair ou vert clair avec une
flèche entre chaque image-clé. Etant donné que les documents Flash
enregistrent les formes dans chaque image-clé, vous devriez créer des
images-clés uniquement aux points de l’animation auxquels quelque chose
change.
1.
Sélectionnez Modification > Document.
La boîte de dialogue Propriétés du document apparaît. Il s’agit de la
même boîte de dialogue que celle que vous avez utilisée pour modifier
les dimensions du bandeau au cours de la 1ère partie de ce didacticiel.
Vous allez maintenant modifier la cadence d’affichage du bandeau.
2.
Modifiez le nombre affiché dans le champ Cadence et saisissez 18, puis
cliquez sur OK pour appliquer la nouvelle valeur.
Une cadence plus rapide entraîne une lecture plus fluide de
l’animation, certainement plus fluide qu’avec une cadence définie sur
12 images par secondes (ips). La modification du paramètre de cadence
signifie que le scénario principal et les scénarios de clip seront tous lus à
la cadence spécifiée.
R EM A R QU E
56
Une cadence plus rapide signifie également que l’ordinateur (ou le
microprocesseur) de l’utilisateur sera quelque peu plus sollicité pour
reproduire les images supplémentaires à chaque seconde.
Tâches de base : Créer un bandeau, 2ème partie
3.
Double-cliquez sur l’occurrence du symbole rejoins-nous sur la scène.
Cela a pour effet d’ouvrir le symbole en mode d’édition de symbole
(voir l’illustration suivante). Dans ce mode, le scénario du symbole de
clip et affiché et exécuté indépendamment du scénario du fichier FLA
principal (celui que vous avez vu avant de double-cliquer sur le
symbole). Cela signifie que plusieurs animations peuvent être lues et
arrêtées indépendamment des animations du scénario principal.
N’oubliez pas qu’un clip est toujours lu à la cadence du document
(18 ips).
En mode d’édition de symbole, le symbole que vous modifiez apparaît de
façon normale, tandis que les autres éléments sur la scène sont grisés. Les
modifications effectuées dans ce mode sont appliquées à toutes les
occurrences du symbole dans votre fichier FLA. Remarquez le changement
de la barre d’édition (au-dessus du scénario sur cette illustration) pour
indiquer que vous êtes en mode d’édition, et sa relation à la scène
principale.
Lorsque vous utilisez ce mode, vous modifiez donc le symbole même,
et pas seulement l’occurrence présente sur la scène. Toutes les
modifications effectuées dans ce scénario (c’est-à-dire le scénario du
clip) sont appliquées à chaque occurrence du symbole utilisée dans le
fichier FLA.
Ajout d’animation au scénario
57
Vous pouvez savoir que vous modifiez un symbole en regardant la barre
d’édition (voir le haut de l’illustration précédente). Utilisez la barre
d’édition pour naviguer dans un document. La barre d’édition peut se
trouver au-dessus ou en dessous du scénario, selon la façon dont vous
avez organisé l’espace de travail.
La séquence 1 se rapporte au scénario principal du fichier FLA. Vous
pouvez cliquer sur ce bouton de la barre d’édition pour retourner au
scénario principal. Les noms qui apparaissent derrière ce bouton
pointent vers le symbole en cours de modification. Si le symbole est
imbriqué dans d’autres symboles, ce chemin peut contenir plusieurs
noms. Sur l’illustration précédente, il est apparent que vous modifiez le
symbole rejoins-nous du scénario principal (Séquence 1).
4.
Sélectionnez le fichier PNG qui se trouve dans le clip, puis appuyez sur
la touche F8 pour le convertir en un autre symbole.
5.
Dans la boîte de dialogue Convertir en symbole, tapez le nomnested mc
dans le champ Nom, choisissez Clip et cliquez sur OK.
6.
Sélectionnez l’Image 15 et choisissez Insertion > Scénario > Image-clé.
R E MA R Q UE
Appuyez sur F6 pour insérer rapidement une nouvelle image-clé.
Cette commande insère une nouvelle image-clé, c’est-à-dire vous
pouvez modifier les contenus dans cette image pour créer une
animation. A ce moment, le contenu de l’Image 15 est répliqué à partir
du contenu de l’Image 1. Lorsque vous modifierez l’Image 15 au cours
d’une prochaine étape, les modifications n’affecteront pas le contenu de
l’Image 1.
7.
Sélectionnez l’Image 30 et appuyez sur F6 pour insérer une nouvelle
image-clé.
L’image-clé réplique les contenus de l’Image 15. Par conséquent, les
trois images ont actuellement le même contenu.
58
Tâches de base : Créer un bandeau, 2ème partie
8.
Sélectionnez l’occurrence de clip sur l’Image 15 et ouvrez l’inspecteur
des propriétés (Fenêtre > Propriétés > Propriétés).
R EM A R QU E
Assurez-vous que vous avez bien sélectionné l’occurrence sur l’Image 15,
pas seulement l’image. Vous pouvez d’abord sélectionner l’image dans le
scénario (ou déplacer la tête de lecture jusqu’à l’Image 15), puis
sélectionnez l’occurrence de clip sur la scène afin de voir le contexte
correct de l’inspecteur des propriétés, comme illustré ci-dessous.
9.
Sélectionnez Luminosité dans le menu déroulant Couleur
(l’illustration suivante).
10. Déplacez
la glissière sur 75 % (voir l’illustration suivante).
Modification de la luminosité de l’occurrence du clip
La luminosité de l’occurrence de l’Image 15 change. Les occurrences
des les Images 1 et 30 restent inchangées. Cela signifie que vous pouvez
désormais ajouter une interpolation de mouvement qui anime la valeur
de la luminosité entre les Images 1 et 15, puis entre l’Image 15 et
l’Image 30. Après la lecture de l’Image 30, la tête de lecture retournera
à l’Image 1 et l’animation se répétera.
R EM A R QU E
Vous pouvez également modifier les valeurs alpha ou teinte en suivant la
même procédure. Les interpolations de la valeur alpha sollicitent plus le
processeur que les interpolations qui modifient la luminosité ou la teinte
d’une animation. Si possible, essayez d’éviter des procédures sollicitant
trop le microprocesseur.
Ajout d’animation au scénario
59
11.
Sélectionnez de nouveau l’occurrence sur la scène à l’Image 15, puis
choisissez l’outil Transformation libre dans le panneau Outils.
Sélectionnez la poignée inférieure droite et faites-la glisser vers le centre
de l’image pour la rendre plus petite (voir l’illustration suivante).
Redimensionnement de l’occurrence avec l’outil Transformation libre
Comme le montre cette illustration, vous pouvez également faire pivoter
l’image avec l’outil Transformation libre.
Vous pouvez créer plusieurs sortes d’animations dans un fichier FLA :
des interpolations de mouvement, des interpolations de forme et des
animations image par image. Dans ce didacticiel, vous allez créer une
interpolation de mouvement. Une interpolation de mouvement est une
animation dans laquelle vous définissez des propriétés telles que la
position, la taille et la rotation d’une occurrence à un moment donné,
puis vous modifiez ces propriétés à un autre moment. Dans cette
animation, vous allez modifier la luminosité et la taille de l’occurrence.
60
Tâches de base : Créer un bandeau, 2ème partie
12. Sélectionnez n’importe
quelle image entre les images 1 et 15, puis dans
le menu déroulant Interpolation de l’inspecteur des propriétés,
sélectionnez Mouvement.
L’étendue d’images change de couleur et une flèche apparaît entre les
Images 1 et 15 (voir l’illustration suivante). Remarquez comment les
options dans l’inspecteur des propriétés changent en cas de sélection
d’une image en comparaison à la sélection d’une occurrence de clip.
Créez une interpolation de mouvement entre les Images 1 et 15 sur le
scénario du clip
R EM A R QU E
Vous pouvez également cliquer sur l’image avec le bouton droit
(Windows) ou avec la touche Option enfoncée (Macintosh) et
sélectionnez Créer une interpolation de mouvement dans le menu
contextuel.
13.
Sélectionnez n’importe quelle image entre les Images 15 et 30, puis dans
le menu déroulant Interpolation de l’inspecteur des propriétés,
sélectionnez Mouvement pour créer une deuxième animation.
14. Cliquez
sur la tête de lecture et faites-la glisser sur le scénario du clip
pour tester (ou parcourir) l’animation.
15. Choisissez
Contrôle > Tester l’animation.
R EM AR QU E
Un moyen plus rapide de tester le fichier SWF est d’utiliser des raccourcis
de clavier. Appuyez sur Contrôle + Entrée (Windows) ou sur Commande +
Retour (Macintosh) pour tester le fichier.
Vous pouvez voir l’animation dans l’environnement de test qui s’est
ouvert. Remarquez comment elle se répète, semblant apparaître et
disparaître en raison des variations de la luminosité. Par défaut, la tête
de lecture revient à l’Image 1 et relit l’animation après avoir atteint la
dernière image du scénario. Cela signifie que l’animation se répète
continuellement si vous ne l’arrêtez pas. Vous allez apprendre comment
effectuer cet arrêt au cours de l’exercice appelé Ecriture d’actions simples.
Ajout d’animation au scénario
61
16.
Choisissez Fichier > Enregistrer pour enregistrer votre document avant
de continuer.
Lorsque le fichier a été enregistré, passez à l’exercice suivant : Création
d’un bouton.
Création d’un bouton
Lorsque vous créez un bandeau, vous devez permettre à l’utilisateur de
cliquer en quelque endroit de la surface du bandeau pour ouvrir une
nouvelle fenêtre de navigateur. Flash vous permet de créer très facilement
des boutons à cet effet. Vos boutons peuvent être des graphiques avec un
effet de survol, des sons et même vos propres animations. Ou vous pouvez
créer un bouton invisible. Les boutons invisibles sont pratiques lorsque
vous souhaitez créer des « zones réactives » sur votre site web, ou permettre
de cliquer sur tout le bandeau sans masquer vos graphiques. Dans l’exercice
suivant, vous allez ajouter un bouton invisible au-dessus des graphiques du
bandeau.
R EM A R QU E
62
Pour plus d’informations sur la création de boutons visibles avec des
graphiques et des effets de survol, effectuez une recherche à l’aide des
mots-clés création boutons dans le panneau Aide de Flash (F1).
1.
Cliquez sur la Séquence 1 dans la barre d’édition pour vous assurer que
vous êtes sur la scène principale.
2.
Choisissez Insertion > Scénario > Calque pour créer un nouveau calque
et renommez-le bouton.
3.
Sélectionnez l’outil Rectangle dans le panneau Outils (l’icône du bouton
représente un carré).
4.
Passez à la section Couleurs du panneau Outils (voir l’illustration
suivante) et cliquez sur l’icône de crayon pour sélectionner la commande
Couleur de trait.
Tâches de base : Créer un bandeau, 2ème partie
5.
Choisissez Aucune couleur, comme illustré ci-dessous. Cette option
supprime le contour du rectangle.
Sélection de Aucune couleur pour la commande de couleur de trait
6.
Cliquez et faites glisser la souris en diagonale sur la scène pour créer un
rectangle.
La taille du rectangle n’a pas d’importance – vous la déterminerez plus
tard avec l’inspecteur des propriétés.
7.
Choisissez l’outil de sélection dans le panneau Outil et cliquez sur le
rectangle sur la scène pour le sélectionner.
Un quadrillé apparaît sur le rectangle lorsque vous le sélectionnez.
8.
Ouvrez l’inspecteur de propriétés (Fenêtre > Propriétés > Propriétés).
9.
Modifiez la valeur du champ L (largeur) à 160 et celle du champ H
(hauteur) à 600. Puis mettez à 0 la valeur des deux champs X et Y
(voir l’illustration suivante).
Modifiez la largeur et la hauteur du rectangle et déterminez l’emplacement
du rectangle pour recouvrir la scène.
10. Le rectangle étant toujours sélectionné sur la scène, appuyez sur F8 pour
le convertir en un symbole.
Création d’un bouton
63
11.
Dans la boîte de dialogue Convertir en symbole, saisissez btn inv dans
le champ Nom, choisissez Bouton, puis cliquez sur OK.
12. Double-cliquez sur le nouveau bouton sur la scène pour passer en mode
d’édition de symbole.
Le rectangle se trouve actuellement dans la première image Haut du
bouton que vous avez créé. Il s’agit de l’état Haut du bouton – ce que
les utilisateurs voient lorsque le bouton est placé sur la scène. Mais vous
voulez que le bouton ne soit pas visible sur la scène. Vous devez donc
déplacer le rectangle dans l’image Cliquable qui est la surface de
réactivité du bouton (la région active sur laquelle un utilisateur peut
cliquer afin d’activer les actions du bouton).
13.
Cliquez sur l’image-clé au niveau de l’image Haut, et tout en
maintenant enfoncé le bouton de la souris faites glisser l’image-clé vers
l’image Cliquable (voir l’illustration suivante).
Cliquer et faire glisser l’image-clé du rectangle de l’image Haut à l’image
Cliquable sur le scénario.
Toute la surface du bandeau réagit désormais à un clic, mais le bouton
n’apparaît pas sur le bandeau.
14. Cliquez
sur la Séquence 1 pour revenir au scénario principal.
Un rectangle bleu sarcelle apparaît maintenant au-dessus de la surface
du bandeau. Il correspond à la surface Cliquable invisible du bouton. Si
cela vous gêne, vous pouvez cacher le calque du bouton dans
l’environnement de création.
15. (Facultatif) Sur le
scénario pour cacher le contenu de ce calque, cliquez
sur le point situé sous l’icône d’affichage sur le calque du bouton.
16.
Choisissez Fichier > Enregistrer pour enregistrer votre document avant
de continuer.
Lorsque le fichier a été enregistré, passez à l’exercice suivant : Ecriture
d’actions simples.
64
Tâches de base : Créer un bandeau, 2ème partie
Ecriture d’actions simples
Vous devez ajouter un peu de code ActionScript au bandeau pour ouvrir un
site web avec le bouton invisible ou pour envoyer des informations sur le
nombre de clics qu’a reçus le bandeau.
Vous pouvez ajouter du code ActionScript dans un document Flash en
plusieurs endroits. Vous pouvez choisir une occurrence et ajouter du code
ActionScript lié directement à cette occurrence. Pour accéder au code, il
vous faudra trouver et sélectionner de nouveau l’occurrence. Vous pouvez
également ajouter du code ActionScript dans une image (ou dans plusieurs
images) sur le scénario. Il est judicieux d’ajouter tout votre code à une seule
image sur le scénario pour faciliter la recherche, la mise à jour et
l’organisation lorsque vous travaillez sur un fichier. N’associez pas vos
codes ActionScript à des occurrences.
R E MA R Q UE
Vous pouvez également conserver vos codes ActionScript dans des
fichiers de classe externes qui seront importés dans le fichier FLA en
temps voulu. Il s’agit parfois de la meilleure façon d’organiser les codes
ActionScript, particulièrement en cas de projets volumineux. Ce n’est pas
l’objet de ce didacticiel.
Remarquez comment l’interpolation de mouvement Rejoins-nous se répète
continuellement lorsque vous la testez. Par défaut, la tête de lecture sur le
scénario effectue une boucle si les contenus sont répartis sur plus d’une
image. Par conséquent, si vous avez des contenus sur plusieurs images dans
un clip ou dans le scénario principal, ils seront lus et répétés à l’infini. Vous
pouvez arrêter cette boucle sans fin en ajoutant une simple ligne de code
ActionScript. Si vous ajoutez ce code ActionScript à une image, la tête de
lecture s’arrête lorsqu’elle atteint cette image.
stop();
Il n’est pas nécessaire d’ajouter ce code ActionScript au bandeau. Toutefois,
vous devrez ajouter ce code ActionScript à d’autres fichiers FLA que vous
créez. L’action d’arrêt est un élément de code ActionScript que vous devez
connaître lorsque vous commencez à utiliser Flash afin de pouvoir arrêter,
si nécessaire, la lecture en boucle des fichiers SWF.
Ecriture d’actions simples
65
Avant d’ajouter du code, vous devez donner au bouton un nom
d’occurrence unique au bouton. C’est ce nom d’occurrence qui vous
permet de cibler le bouton avec le code ActionScript. Si vous ne donnez pas
de nom au bouton, le code n’a aucun moyen de repérer le bouton dans le
scénario. La première étape consiste à attribuer un nom d’occurrence au
bouton invisible et ensuite d’ajouter un code permettant de repérer le
bouton portant ce nom.
1.
Sélectionnez le bouton invisible sur la scène.
2.
Ouvrez l’inspecteur des propriétés (Fenêtre > Propriétés), puis cherchez
le champ Nom de l’occurrence dans l’inspecteur des propriétés.
3.
Saisissez inv_btn dans le champ Nom de l’occurrence.
R E MA R QU E
Un nom d’occurrence est différent d’un nom de symbole (qui est entré
dans le champ Nom de la boîte de dialogue Convertir en symbole). Un
nom d’occurrence ne doit pas comporter d’espaces ni de caractères
spéciaux, mais peut contenir des traits de soulignement. De plus, le nom
d’occurrence tient compte de la casse.
4.
Choisissez Insertion > Scénario > Calque pour créer un nouveau calque
et renommez-le actions.
5.
Ouvrez le panneau Actions (Fenêtre > Actions), puis sélectionnez
Image 1 du calque des actions.
6.
Saisissez le code ActionScript suivant dans la fenêtre de script (champ de
texte modifiable) du panneau Actions :
inv_btn.onRelease = function(){
getURL("http://gnome.deseloper.com", "_blank");
};
Remarquez comment vous ciblez l’occurrence inv_btn dans la
première ligne de code. L’événement est l’événement onRelease dans
le code ActionScript qui fait référence à l’action effectuée par un
utilisateur lorsqu’il clique avec la souris puis relâche le bouton, audessus de l’occurrence inv_btn. Vous indiquez ensuite au bouton
d’ouvrir une page web particulière (http://gnome.deseloper.com) dans
une nouvelle fenêtre (_blank) à l’aide de la méthode getURL().
Evidemment, vous remplacerez cette adresse URL par celle du site web
que le bandeau doit ouvrir. Si vous voulez que le bandeau ouvre le site
web dans la page actuelle, remplacez _blank par _self.
66
Tâches de base : Créer un bandeau, 2ème partie
Il s’agit là d’un simple fragment de codes ActionScript qui réagit à un
clic sur un bouton. La documentation de Flash 8 contient une grande
quantité d’informations supplémentaires sur l’apprentissage du langage
ActionScript. Reportez-vous au Sommaire de la documentation pour y
trouver la section Formation à ActionScript 2.0 dans Flash.
7.
Choisissez Fichier > Enregistrer pour enregistrer votre document avant
de continuer.
Lorsque le fichier a été enregistré, passez à l’exercice suivant : Test de
l’application.
Test de l’application
Vous avez désormais un bandeau Flash comportant des graphiques et une
animation, et réagissant également à des clics sur un bouton. Vous avez
terminé votre premier document Flash interactif et animé. Examinons-le
en action dans une fenêtre de navigateur.
1.
Revenez au document banner2 et choisissez ensuite Fichier > Aperçu
avant publication > HTML.
Le navigateur par défaut sur votre ordinateur s’ouvre et affiche le
bandeau. Par défaut, le bandeau apparaît dans le coin supérieur gauche
du document HTML.
2.
Cliquez sur le bandeau pour ouvrir la page web. Une nouvelle fenêtre
devrait s’ouvrir et afficher le site web du gnome.
3.
Refermez les deux fenêtres du navigateur et revenez à l’environnement
de création de Flash.
Si vous êtes satisfait de votre document, enregistrez les modifications
avant de passer à la 3ème partie de ce didacticiel. Mais il se peut que
vous vouliez d’abord apporter des modifications à l’animation, au texte
ou au code, si nécessaire.
R E MA R Q UE
Si vous voulez comparer vos résultats au fichier source du didacticiel,
ouvrez le fichier banner2_complete.fla dans le dossier FlashBanner/Part2
que vous avez enregistré sur le disque dur dans Ouverture du document de
programmation, page 173.
Test de l’application
67
Sommaire
Félicitations, vous avez terminé la deuxième étape de création d’un
bandeau dans Flash. Vous avez utilisé l’outil de création de Flash pour
ajouter du texte, créer des symboles, créer une animation dans un scénario
et ajouter une fonctionnalité d’interactivité à votre application. Dans la
2ème partie de ce didacticiel, vous avez appris comment utiliser l’espace de
travail de Flash pour accomplir les tâches suivantes :
■
créer du texte
■
créer des symboles
■
créer une animation
■
créer des boutons
■
écrire du code ActionScript
Vous avez désormais un bandeau que vous pouvez exporter et ajouter sur
une page web. Dans la 3ème partie de ce didacticiel, vous allez publier
votre travail et ajouter le fichier à un site web avec Dreamweaver.
Pour continuer à créer cette application, passez à la troisième partie de ce
didacticiel : Tâches de base : Créer un bandeau, 3ème partie, page 69.
68
Tâches de base : Créer un bandeau, 2ème partie
CHAPITRE 4
Tâches de base : Créer
un bandeau, 3ème partie
4
Il s’agit ici de la troisième partie d’un didacticiel en trois parties expliquant
comment créer un simple bandeau animé dans Macromedia Flash Basic 8
ou Macromedia Flash Professionnel 8 et comment l’ajouter à une page web
à l’aide de Macromedia Dreamweaver. Vous allez y apprendre un peu plus
sur la taille des fichiers et les standards en termes de bandeau, comment
définir les paramètres de publication, ajouter le bandeau à un page web
avec Dreamweaver et ajouter un mécanisme de détection de Macromedia
Flash Player.
Dreamweaver MX 2004 ou Dreamweaver 8 doit être installé sur votre
ordinateur pour la plupart des exercices de la 3ème partie de ce didacticiel.
Si vous ne pouvez pas utiliser Dreamweaver, vous pouvez réaliser la
première partie de ce didacticiel et utiliser le code HTML produit par Flash
avec un autre éditeur HTML. Cependant, cela ne vous permettra pas de
profiter de certains avantages de la combinaison de Flash et de
Dreamweaver.
Reportez-vous à la présentation de Tâches de base : Créer un bandeau, 1ère
partie, page 25 pour lire une description des parties 1, 2 et 3 de ce
didacticiel.
Aucune connaissance préalable n’est nécessaire pour suivre ces didacticiels,
toutefois vous devriez avoir suivi et terminé les deux premières parties de ce
didacticiel avant de commencer la troisième et dernière partie.
Dans la partie 3 de ce didacticiel, vous accomplirez les tâches suivantes :
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Vérification des paramètres de publication . . . . . . . . . . . . . . . . . . . 75
Insertion de contenus Flash dans un site Dreamweaver . . . . . . . . 78
Utilisation de la fonction « roundtrip editing » . . . . . . . . . . . . . . . . . 80
Vérification de la version de Flash Player . . . . . . . . . . . . . . . . . . . . . 81
Test de l’application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
69
Le processus de ce didacticiel comprend les tâches suivantes :
■
Etude du fichier FLA final, page 70 permet de visualiser le document
Flash final pour la partie 3.
■
Vérification des paramètres de publication, page 75 explique comment
vérifier et modifier les paramètres de publication avant de compiler le
bandeau final.
■
Insertion de contenus Flash dans un site Dreamweaver, page 78 explique
comment insérer une animation Flash dans une page web à l’aide de
Dreamweaver.
■
Utilisation de la fonction « roundtrip editing », page 80 explique
comment quitter Dreamweaver pour revenir à l’outil de
programmation de Flash afin de modifier le fichier FLA.
■
Vérification de la version de Flash Player, page 81 explique comment
ajouter un comportement de Dreamweaver qui détecte si Flash Player
est installé sur l’ordinateur du visiteur.
■
Test de l’application, page 83 explique comment exporter et tester le
fichier SWF du document, ce qui permet également de tester les
progrès effectués.
Etude du fichier FLA final
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Dans cette section, vous accomplirez les tâches suivantes :
■
Ouverture du document de programmation, page 173
■
Examen du fichier FLA final, page 174
■
Fermeture du projet final, page 72
Les sections suivantes présentent les étapes à suivre pour créer vous-même
l’application en partant d’un fichier FLA flambant neuf.
70
Tâches de base : Créer un bandeau, 3ème partie
Ouverture du projet terminé
Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and
Tutorials du dossier d’installation de Flash. Pour de nombreux utilisateurs,
en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en
lecture. Avant de suivre le didacticiel, copiez tout le dossier FlashBanner du
didacticiel à un emplacement de votre choix accessible en écriture. Dans la
1ère ou la 2ème partie, vous avez peut-être déjà copié les fichiers source de
FlashBanner à un autre emplacement sur le disque dur.
Sur la plupart des ordinateurs, vous trouverez le dossier FlashBanner du
didacticiel aux emplacements suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.
■
Sous Macintosh : Macintosh HD/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.
Copiez le dossier FlashBanner à un autre emplacement sur le disque dur
auquel vous avez accès. Ce dossier comporte trois sous-répertoires, un pour
chaque partie de ce didacticiel : Part1, Part2 et Part3. Dans le dossier
FlashBanner/Part3, vous trouverez un fichier HTML appelé gnome.html
dans le dossier des éléments terminés. Double-cliquez sur ce fichier pour
l’ouvrir dans Flash. Vous voyez désormais les fichiers définitifs SWF et
HTML dans la fenêtre du navigateur.
Etude du fichier FLA final
71
Examen du projet final
Dans le projet final, vous verrez la structure du projet à la fin de la partie 3
de ce didacticiel. L’application, un bandeau Flash inséré dans une page
HTML pour un site web de gnome, ressemble à la fin de la troisième partie
à l’illustration suivante :
Le bandeau à la fin de la 3ème partie
Vers la fin de la troisième partie de ce didacticiel, vous ajouterez le bandeau
que vous avez créé avec ses graphiques, animations et fonctions
d’interactivité à un site web à l’aide de Dreamweaver.
Fermeture du projet final
Pour fermer le document, cliquez sur le bouton de fermeture de la fenêtre
du navigateur, dans le coin droit supérieur (Windows) ou dans le coin
gauche (Macintosh) de la fenêtre.
Vous pouvez également garder le fichier final ouvert afin qu’il serve de
référence lorsque vous travaillez avec le fichier du bandeau.
Vous êtes désormais prêt à commencer la création de votre propre fichier de
bandeau dans la nouvelle section : Prise en compte de votre public.
72
Tâches de base : Créer un bandeau, 3ème partie
Prise en compte de votre public
Lorsque vous créez un site, il vous faut souvent suivre certaines règles liées à
l’utilisation des bandeaux Flash. Dans le cadre de ce didacticiel, le respect
des règles établies de publicité n’est pas vraiment important puisque vous
n’allez pas fournir le bandeau à une société à des fins publicitaires. Cette
section discute brièvement de certains points à prendre en considération
lorsque vous créez un bandeau dans un projet réel ou dans un projet
distribué à grande échelle. Lorsque vous créez un bandeau pour une agence
publicitaire, vous devez généralement vous assurer que le fichier correspond
aux spécifications de taille, de dimensions, de version ciblée de Flash Player
et de cadence. Il vous faut parfois prendre d’autres informations en compte,
telles que les types d’éléments que vous pouvez utiliser, le code des boutons
que vous utilisez dans le fichier FLA file, etc.
Vous avez créé le bandeau et en avez changé ses dimensions. Ce faisant,
vous avez créé un bandeau de dimensions standard que la société
Interactive Advertising Bureau appelle un « wide skyscraper ». Ce fichier est
également d’une taille raisonnable pour une publicité Flash de cette
dimension. Vous apprendrez à réduire la taille de vos fichiers dans un
prochain exercice. Pour plus d’informations sur les dimensions standard (et
pour prendre connaissance d’autres conseils bien utiles), consultez la page
Standards and Guidelines du site Interactive Advertising Bureau à
l’adresse : www.iab.net/standards/adunits.asp. Cependant, n’oubliez pas de
confirmer les règles à suivre auprès du service de publicité, de votre client
ou du site web pour lequel vous travaillez pour la première fois. Ces règles
peuvent comprendre des standards en termes de taille de fichiers, de
dimensions, d’utilisation de son et de vidéo, et de boutons.
Prise en compte de votre public
73
L’objectif de ce didacticiel est de vous aider à comprendre comment créer
des contenus Flash, à les exporter de Flash et à les utiliser sur votre propre
site web. La leçon à tirer des règles relatives aux bandeaux est que vous
devez tenir compte de votre public. Chaque fois que vous créez un site
Flash, vous devez penser aux types d’utilisateurs qui en regarderont le
contenu – tout comme vous devez le faire lorsque vous créez n’importe
quel site web. Votre public est-il constitué de plusieurs millions
d’utilisateurs, avec quelles sortes d’ordinateurs et quelles versions de Flash
Player (le cas échéant) ? Ou, votre public est-il constitué principalement de
développeurs Flash et de nouvelles sociétés médiatiques ? Votre public a un
effet sur la version de Flash Player que vous allez cibler. Par exemple, si vous
pensez qu’un public très divers (et donc avec un éventail aussi divers de
capacités informatiques) va consulter votre site, vous devez cibler une
version plus ancienne de Flash Player, telle que la version 6. Si vous pensez
que ce sont d’autres professionnels du web qui consulteront votre site, la
version la plus récente du lecteur (avec un système de détection) suffira.
Vous allez définir la version de Flash Player et ajouter un système de
détection de Flash Player à l’aide de Dreamweaver dans les prochains
exercices.
R EM A R QU E
74
Si vous envoyez votre bandeau à un hébergeur, vous devrez sans doute
respecter leurs conditions quant à l’ajout de code pour les boutons de
votre fichier FLA. En effet, il est souvent demandé d’ajouter une variable
spécifique (telle que clickTAG) au lieu d’une adresse URL. Renseignezvous auprès du service de publicité, de votre client ou consultez les règles
pour le site web afin de connaître le code correct pour les boutons à
ajouter à votre fichier FLA. Certaines sociétés limitent également la
cadence (images par seconde – ips) que vous pouvez utiliser dans le
fichier SWF. Lorsque vous concevez un bandeau, utilisez une cadence
aussi réduite que possible. Il est recommandé d’utiliser au plus 18 images
par seconde, la valeur idéale étant 12 ips.
Tâches de base : Créer un bandeau, 3ème partie
Vérification des paramètres de
publication
Les bandeaux doivent souvent être enregistrés pour des versions
précédentes de Flash Player. La plupart des sites, avec lesquels vous pouvez
travailler, acceptent désormais les fichiers Flash Player 6. Vous pourriez
également créé un site web pour un très large public et cibler un lecteur
plus ancien. Le code ActionScript que vous avez ajouté à votre fichier peut
être lu dans Flash Player 6. Vous pouvez donc changer les paramètres à
Flash Player 6 pour votre site web.
Dans les premières parties de ce tutorial, vous avez effectué des
modifications dans la boîte de dialogue Paramètres du document. Vous
avez défini les dimensions et la cadence (ips) du fichier SWF. Dans cette
dernière partie, vous allez vérifier que les paramètres Flash Player que vous
souhaitez cibler sont corrects et que vous exportez les fichiers dont vous
avez besoin. De nombreux développeurs changent ces paramètres lorsqu’ils
commencent à travailler sur le FLA, car ils savent déjà ce qu’ils doivent
cibler.
1.
Ouvrez le fichier banner2.fla de la 2ème partie de ce didacticiel (Tâches
de base : Créer un bandeau, 2ème partie).
Si vous n’avez pas le fichier banner2.fla, ouvrez le fichier banner3.fla
inclus dans les fichiers source du didacticiel (reportez-vous à Ouverture
du projet terminé, page 71). Il se trouve dans le dossier de démarrage.
2.
Choisissez Fichier > Enregistrez sous, puis donnez le nom banner3.fla à
votre fichier.
3.
Choisissez Fichier > Paramètres de publication.
La boîte de dialogue Paramètres de publication apparaît pour vous
permettre de modifier les différents paramètres de publication de vos
fichiers.
4.
Cliquez sur l’onglet Formats, puis vérifiez que la case à cocher Flash
(.swf) est activée.
5.
Désactivez l’option HTML.
Dans cet exercice, vous n’aurez pas besoin de créer une page HTML.
Vérification des paramètres de publication
75
6.
Cliquez sur l’onglet Flash, puis sélectionnez Flash Player 6 dans le menu
déroulant Version.
Lorsque vous ajoutez des publicités Flash à une page HTML, utilisez
Flash Player 6 ou une version plus ancienne (à la date de rédaction). De
nombreux développeurs Flash utilisent encore Flash Player 5, bien
qu’un certain nombre de sites commencent à utiliser Flash Player 6, ce
qui permet d’ajouter des fonctionnalités supplémentaires à vos
publicités Flash.
7.
Sélectionnez ActionScript 1.0 dans le menu déroulant Version
d’ActionScript.
Pour cet exemple, vous avez écrit du code ActionScript 1.0 (dans la
2ème partie) et, bien que ce paramètre n’ait pas d’importance dans ce
didacticiel, c’est une bonne habitude de vérifier la version sélectionnée.
Vous pouvez écrire du code ActionScript 2.0 et publier votre fichier
pour Flash Player 6 si vous le souhaitez.
8.
Dans la section Options, sélectionnez Compresser l’animation.
Vous n’avez rien d’autre à faire dans l’onglet Flash.
9.
Une fois ces opérations terminées, cliquez sur OK pour accepter les
modifications à votre document.
10. Choisissez Fichier > Publier lorsque vous avez fini de travailler sur votre
fichier FLA.
Votre document est alors publié dans un fichier SWF dans le répertoire
où vous avez enregistré le fichier FLA.
11.
Ouvrez le répertoire dans lequel vous avez publié le fichier SWF du
bandeau. Vérifiez la taille du document (c’est-à-dire le fichier
banner3.swf).
Comme indiqué auparavant, la taille du fichier n’a pas vraiment
d’importance, car vous ne fournirez pas le bandeau à une agence de
publicité. Si vous souhaitez ou avez besoin de réduire la taille de votre
fichier de bandeau, vous pouvez ouvrir de nouveau la boîte de dialogue
Paramètres de publication (Fichier > Paramètres de publication) et
cliquez sur l’onglet Flash. Vous pouvez réduire la qualité de l’image
bitmap utilisée pour l’arrière-plan en diminuant la valeur de la qualité
JPEG.
76
Tâches de base : Créer un bandeau, 3ème partie
12. Déplacez
la glissière jusqu’à 60 et cliquez sur Publier.
Si vous vérifiez de nouveau la taille du fichier SWF, vous constaterez
qu’elle a diminué.
Il existe d’autres façons de réduire la taille d’un fichier SWF. Si vous devez
produire un fichier inférieur à une certaine taille maximum, il vous faudra
publier votre document à intervalles réguliers pour en vérifier la taille. Les
images bitmap, les sons et les contenus vidéo augmentent sérieusement la
taille d’un fichier SWF.
Si Dreamweaver n’est pas installé sur votre ordinateur, ce didacticiel se
termine avec cette section. Vous pouvez ouvrir de nouveau la boîte de
dialogue Paramètres de publication de cet exercice et activer l’option
HTML dans l’onglet Formats. Lorsque vous publiez le document, un
fichier HTML sera exporté avec le fichier SWF. Vous pouvez ouvrir ce
fichier, copier le code HTML et le coller dans votre site web. Remarquez
que ce fichier contient des balises supplémentaires, telles que head et body,
dont vous n’avez pas besoin si vous avez déjà un site web. Les balises dont
vous avez besoin sont les balises object et embed qui contiennent les
informations utilisées par Internet Explorer et les navigateurs basés sur
Mozilla pour afficher le fichier SWF.
Si Dreamweaver est installé sur votre ordinateur, passez à la page suivante.
Dans les exercices suivants, vous allez placer et modifier le bandeau dans
une page web.
Vérification des paramètres de publication
77
Insertion de contenus Flash dans
un site Dreamweaver
Vous avez déjà peut-être créé une page web pour y insérer un bandeau.
Nous avons également créer une page à cet effet qui est prête pour recevoir
un bandeau à sa taille.
Ouvrez le répertoire FlashBanner/Part3 (voir Ouverture du projet terminé)
et recherchez le dossier du site web dans ce répertoire.Ce dossier contient
les documents dont vous avez besoin pour travailler avec Dreamweaver.
Vous allez modifier la page web gnome.html dans l’exercice suivant.
R E MA R Q UE
Vous pouvez utiliser la version du site web dans le dossier des éléments
finis du dossier FlashBanner/Part3.
1.
Ouvrez la page, appelée gnome.html, dans Dreamweaver MX 2004 ou
Dreamweaver 8 (ce didacticiel utilise Dreamweaver 8).
Vous trouverez ce document dans le dossier du site web des fichiers
source de cette troisième partie. Vous le trouverez dans le dossier de
démarrage (FlashBanner/Part3/website/start).
2.
Enregistrez une copie de gnome.html dans le même répertoire que celui
du fichier SWF que vous avez publié au cours de l’exercice précédent
(banner3.swf).
3.
Enregistrez une copie de drightnav.css dans le même répertoire que celui
du fichier SWF que vous avez publié au cours de l’exercice précédent.
Vous le trouverez dans le dossier de démarrage. Ce document ajoute des
styles (tels que les marges et la couleur du texte) au fichier gnome.html.
4.
Dans Dreamweaver, assurez-vous d’être en mode scindé (Affichage >
Code et création).
Le mode scindé vous permet d’afficher et de modifier le code de votre
page, mais aussi de sélectionner le fichier SWF en mode Création.
78
Tâches de base : Créer un bandeau, 3ème partie
5.
Sélectionnez le repère d’emplacement 160 x 600 sur le côté droit de la
page web (voir l’illustration suivante).
C’est là que vous voulez ajouter le bandeau Flash au site web.
Sélection du repère d’emplacement du côté droit de la page web dans
Dreamweaver Notez que les dimensions sont les mêmes que celles de votre
fichier de bandeau.
6.
Appuyez sur la touche Retour ou Suppression pour supprimer l’image.
Laissez le curseur de saisie de texte à cette position dans le document
HTML.
7.
Sélectionnez Insertion > Médias > Flash.
La boîte de dialogue Sélectionner un fichier s’ouvre pour vous
permettre de sélectionner le fichier SWF du bandeau que vous avez
créé.
8.
Sélectionnez le fichier banner3.swf qui devrait se trouver dans le même
dossier que votre page web (voir l’étape 2).
9.
Cliquez sur OK.
Le fichier SWF est inséré dans la page web. (Dans le document
gnome.html dans le dossier des éléments terminés, vous pouvez voir le
code qui a été ajouté au document.)
10. (Facultatif) Vous pouvez
sélectionner le fichier SWF et cliquez sur Lire
dans l’inspecteur des propriétés pour voir l’animation du bandeau.
Insertion de contenus Flash dans un site Dreamweaver
79
11.
Sélectionnez Fichier > Aperçu dans le navigateur > Internet Explorer
(Windows) ou iexplore (Macintosh) (ou sélectionnez votre navigateur
préféré) pour afficher votre site qui contient maintenant le bandeau
SWF dans une fenêtre de navigateur.
12. Sélectionnez
Fichier > Enregistrer dans Dreamweaver pour enregistrer
les modifications avant de passer à l’exercice Utilisation de la fonction
« roundtrip editing ».
Utilisation de la fonction
« roundtrip editing »
Vous souhaitez peut-être changer quelque chose dans votre bandeau Flash,
par exemple, modifier la cadence ou ajouter du texte. Il est très facile de
retourner à Flash pour modifier le document à partir de Dreamweaver.
1.
Dans le fichier gnome.html, sélectionnez le fichier SWF en mode
Création (dans ce mode vous voyez la mise en page avec les codes
HTML), puis ouvrez l’inspecteur des propriétés (Fenêtre > Propriétés).
L’inspecteur des propriétés affiche les contrôles du fichier SWF.
2.
Cliquez sur Modifier dans l’inspecteur des propriétés (voir l’illustration
suivante).
Sélectionnez le fichier SWF et cliquez sur Modifier dans l’inspecteur des
propriétés.
Flash ouvre le fichier FLA associé dans l’environnement de création de
Flash ou ouvre une fenêtre permettant de sélectionner le fichier FLA
associé.
3.
Effectuez les modifications appropriées dans Flash.
Vous remarquez que la mention « Editing From Dreamweaver »
apparaît dans l’environnement de création pour indiquer que vous
travaillez sur un fichier provenant de l’environnement Dreamweaver.
80
Tâches de base : Créer un bandeau, 3ème partie
4.
Cliquez sur Terminé en regard de Edition depuis Dreamweaver
(voir l’illustration suivante).
Vous pouvez modifier directement le fichier FLA à partir de Dreamweaver.
Cliquez sur Terminé une fois toutes les modifications effectuées.
Flash met à jour le fichier FLA, publie le fichier SWF, se ferme, puis
renvoie au document Dreamweaver. Votre document est mis à jour
dans Dreamweaver.
R E MA R Q U E
Vous pouvez afficher les modifications apportées à votre fichier SWF
dans Dreamweaver, soit en affichant votre site dans un navigateur, soit en
sélectionnant le fichier SWF en mode Création et en cliquant Lire dans
l’inspecteur des propriétés.
Vérification de la version de
Flash Player
La plupart des visiteurs de votre site disposent de Flash Player 6 ou d’une
version plus récente. Il est rare qu’un visiteur ne dispose pas de ce plug-in
(module). Vous pouvez faire plusieurs choses différentes lorsqu’un visiteur
de votre site n’a pas Flash Player. Lorsque votre site repose sur des contenus
Flash, vous pouvez renvoyer le visiteur vers une page web personnalisée qui
a un lien au site de Macromedia à partir duquel il pourra télécharger Flash
Player.
Le comportement de vérification disponible dans Dreamweaver vous
permet de vérifier si les visiteurs de votre site disposent de Flash Player.
Après cette vérification effectuée par le comportement, vous pouvez
renvoyer le visiteur vers des adresses différentes en fonction de la version du
plug-in dont il dispose. Par exemple, si le visiteur n’a pas Flash Player, vous
pouvez ouvrir une page qui relie le visiteur au site de Macromedia à partir
duquel il pourra télécharger la dernière version.
1.
Dans le fichier gnome.html, cliquez à l’intérieur de la balise body
(cliquez entre la lettre « y » et le guillemet de fermeture) et ouvrez le
panneau Comportements dans Dreamweaver (Fenêtre >
Comportements).
Vérification de la version de Flash Player
81
2.
Cliquez sur Ajouter (+), puis sélectionnez Vérifiez le Plug-in dans le
menu déroulant des comportements.
3.
Sélectionnez Flash dans le menu déroulant Plug-in.
4.
Laissez le champ Si trouvé, aller à l’URL vierge.
Ce champ de texte contrôle la page affichée en fonction du plug-in. Le
fait de laisser le champ vierge assure que les utilisateurs restent sur la
même page lorsque Flash Player est installé.
5.
Saisissez une URL dans le champ Sinon, aller à l’URL.
Indiquez une URL spécifique pour les visiteurs qui n’ont pas Flash
Player. Saisissez noflash.html dans le champ.
R EMA R Q U E
Un document noflash.html a été inclus dans les fichiers source de ce
didacticiel, joints aux fichiers d’exemple dans le dossier des éléments
terminés. Vous pouvez enregistrer ce document dans le dossier où se
trouve le document gnome.html sur lequel vous êtes en train de travailler,
ou créer votre propre fichier à cet endroit. L’idéal serait de créer une page
web personnalisée pour les utilisateurs qui ne disposent pas de Flash
Player.
6.
Activez l’option Toujours aller à la première URL si la détection est
impossible.
Lorsqu’elle est activée, cette option signifie en fait « qu’on suppose que
le visiteur a le plug-in, à moins que le navigateur n’indique
expressément que le plug-in est absent ». Etant donné que vous avez
ajouté une publicité spécifique pour les visiteurs sans le plug-in, cette
option est donc préférable dans cet exercice. L’illustration suivante
montre les sélections effectuées jusqu’à maintenant pour ajouter la
détection de Flash Player.
Sélectionnez ces options pour ajouter la détection de Flash Player à l’aide
d’un comportement dans Dreamweaver.
82
Tâches de base : Créer un bandeau, 3ème partie
7.
Cliquez sur OK. Une fois ces opérations terminées, Dreamweaver ajoute
le code suivant à la balise <body> :
<body id="container" onLoad="MM_checkPlugin('Shockwave
Flash','','noflash.html',true);return
document.MM_returnValue">
8.
Enregistrez les modifications apportées au document avant de passer à
Test de l’application.
R EM A R QU E
Vous trouverez les fichiers terminés dans le répertoire
FlashBanner/Part3, dans le dossier des éléments terminés.
Vous pouvez également ajouter la détection de Flash Player dans
l’environnement de création de Flash si vous n’utilisez pas Dreamweaver.
Ouvrez la boîte Paramètres de publication (Fichier > Paramètres de
publication) et vérifiez que l’option HTML est activée dans l’onglet
Formats. Sélectionnez ensuite l’onglet HTML, puis activez l’option
Détecter la version de Flash. Cliquez sur Paramètres en regard de la case à
cocher. Cette boîte de dialogue vous permet de définir la cible, les contenus
et les pages secondaires.
Test de l’application
Vous avez désormais un bandeau Flash comportant des graphiques et une
animation, et réagissant également à des clics sur un bouton. Vous venez de
terminer votre premier document Flash interactif et animé, et vous l’avez
ensuite inséré dans un site web à l’aide de Dreamweaver. Examinons le
bandeau en action dans une fenêtre de navigateur.
1.
Cliquez sur le document gnome.html que vous avez modifié dans les
exercices précédents afin d’ouvrir la page web contenant votre bandeau.
Une nouvelle fenêtre s’ouvre dans le navigateur et affiche le site web du
gnome.
Test de l’application
83
2.
Cliquez sur le bandeau pour ouvrir la fenêtre du navigateur à partir de
la page web.
R EM A R QU E
Si vous voulez comparer vos résultats au fichier source du didacticiel,
ouvrez le fichier banner3_complete.fla et les fichiers dans le dossier des
éléments terminés dans le dossier FlashBanner/Part3 que vous avez
enregistré sur le disque dur dans Ouverture du document de
programmation, page 173.
Sommaire
Vous avez terminé votre premier site Flash et l’avez inséré dans une page
web avec Dreamweaver. Vous avez appris à créer un nouveau fichier, à
importer des contenus, à créer de nouveaux éléments actifs dans Flash, à
ajouter une animation de base et du code ActionScript, et à publier le fruit
de votre travail sur le web. Vous avez également appris à utiliser
Dreamweaver pour insérer le fichier SWF dans une page web existante,
probablement similaire à une page que vous auriez pu créer dans le passé.
Dans la 3ème partie de ce didacticiel, vous avez appris à utiliser Flash et
Dreamweaver pour accomplir les tâches suivantes :
■
modifier les paramètres de publication pour un fichier SWF
■
publier un fichier SWF
■
insérer un fichier SWF sur une page web à l’aide de Dreamweaver
■
utiliser « roundtrip editing » pour ouvrir, modifier et republier un
fichier FLA à partir de Dreamweaver
■
ajouter un comportement de Dreamweaver pour vérifier Flash Player
Cette introduction à Flash et à l’ajout d’un fichier SWF à une page web est
une étape importante de l’apprentissage de Flash. Vous disposez
maintenant des notions de base nécessaires à la création de contenus avec
Flash. Nous espérons que vous vous sentez désormais plus à même
d’apprendre à créer des contenus plus interactifs, divertissants, fonctionnels
ou instructifs à l’aide de Flash.
84
Tâches de base : Créer un bandeau, 3ème partie
CHAPITRE 5
Tâches de base : Créer du
contenu Flash accessible
5
La connaissance de quelques techniques de conception et fonctions
d’accessibilité dans Macromedia Flash Basic 8 et Macromedia
Flash Professionnel 8 vous permet de créer du contenu Flash accessible par
tous les utilisateurs, même par les personnes souffrant de handicaps.
Cette leçon explique comment créer un document accessible, conçu pour
une utilisation avec des lecteurs d’écrans (qui énoncent le contenu web
pour les utilisateurs malvoyants) et d’autres technologies d’assistance.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Rendre le document accessible aux lecteurs d’écran . . . . . . . . . . 87
Fournir un titre de document et une description . . . . . . . . . . . . . . . 87
Attribuer un titre et une description aux occurrences. . . . . . . . . . . 88
Spécifier que les lecteurs d’écran doivent ignorer des éléments
dans le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Changer le texte statique en texte dynamique pour le rendre
accessible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Contrôler l’ordre de tabulation et l’ordre de lecture . . . . . . . . . . . . 91
La leçon propose une introduction aux techniques de base permettant de
rendre votre contenu Flash accessible. Pour obtenir des informations
complètes et détaillées sur l’incorporation de fonctions d’accessibilité dans
votre contenu Flash, consultez Création de contenu accessible dans le guide
Utilisation de Flash.
85
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
2.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Create Accessible Content et double-cliquez
accessibility_start.fla.
Choisissez Fichier > Enregistrer sous puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
R E MA R Q UE
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
3.
86
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Create Accessible Content, puis double-cliquez
sur accessibility_start.fla.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
Tâches de base : Créer du contenu Flash accessible
Rendre le document accessible
aux lecteurs d’écran
Vous allez maintenant spécifier que le document doit être accessible aux
lecteurs d’écran et fournir un nom de document et une description
pouvant être énoncés par un lecteur d’écran.
1.
Vérifiez que vous n’avez rien sélectionné sur la scène et choisissez
Fenêtre > Autres panneaux > Accessibilité.
2.
Dans le panneau Accessibilité, vérifiez que les options suivantes sont
sélectionnées :
Rendre l’animation accessible est sélectionné par défaut et permet à
Flash Player de transmettre les informations d’accessibilité à un lecteur
d’écran.
permet à Flash Player de
transmettre les informations d’accessibilité imbriquées dans un clip à
un lecteur d’écran. Si cette option est sélectionnée pour le document
entier, vous pouvez tout de même masquer les objets enfants pour les
clips individuels.
Rendre les objets enfants accessibles
Etiquetage auto associe le texte situé à côté d’un autre objet Stage, tel
qu’un champ de saisie de texte, comme l’étiquette ou le titre de cet
élément.
Fournir un titre de document et
une description
Dans le panneau Accessibilité du document, vous pouvez attribuer un nom
et une description au document, destinés aux lecteurs d’écran.
■
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 présentation et une voiture animée.
Fournir un titre de document et une description
87
Attribuer un titre et une
description aux occurrences
Maintenant que vous avez fourni des informations sur le document entier,
vous pouvez fournir des informations sur les objets Stage inclus dans le
document.
1.
Sélectionnez le logo de la société Trio Motor en haut de la scène. Dans
le panneau Accessibilité, entrez Société Trio Motor dans le champ Nom.
N’entrez rien dans le champ Description.
Toutes les occurrences ne nécessitent pas de description (la description
est lue avec le titre). Si le titre fournit une description suffisante de la
fonction de l’objet, il n’est pas nécessaire d’inclure une description.
2.
Le panneau Accessibilité étant toujours ouvert, sélectionnez le bouton
Dealers sur la scène.
Les informations du panneau Accessibilité reflètent les options
d’accessibilité de l’objet sélectionné.
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 d’écran. Si vous ne
souhaitez pas que le lecteur d’écran lise le texte du bouton, vous pouvez
désélectionner Etiquetage auto lorsque vous définissez l’accessibilité du
document.
3.
Dans le champ Description, entrez Renvoie vers un site web
répertoriant les distributeurs dans le pays.
Les autres boutons incluent du texte qui sera énoncé par les lecteurs
d’écran ; il est par conséquent inutile de fournir un titre. Etant donné que
le titre des boutons est relativement explicite, il n’est pas nécessaire
d’inclure des descriptions.
88
Tâches de base : Créer du contenu Flash accessible
Spécifier que les lecteurs d’écran
doivent ignorer des éléments
dans le document
Les lecteurs d’écran suivent un ordre spécifique lors de la lecture de
contenu web. Cependant, lorsque le contenu d’une page web est modifié,
la plupart des lecteurs d’écran recommencent à lire le contenu web dès le
début. Cette particularité des lecteurs d’écran peut être problématique
lorsque le contenu Flash comprend, par exemple, une animation, pouvant
pousser le lecteur d’écran à recommencer la lecture à chaque modification
de l’animation.
Vous pouvez heureusement utiliser le panneau Accessibilité pour
désélectionner Rendre l’objet accessible, afin que le lecteur d’écran ne
reçoive pas les informations d’accessibilité de l’objet, ou bien
désélectionner Rendre les objets enfants accessibles, afin que le lecteur
d’écran ne reçoive pas les informations d’accessibilité imbriquées dans un
clip. Effectuez maintenant la deuxième opération afin que les utilisateurs
sachent que la page web contient une animation, et que cette dernière ne
provoquera pas la réactualisation constante du lecteur d’écran.
1.
Sur la scène, cliquez sur la voiture, qui est l’occurrence du clip
safety_mc.
2.
Dans le panneau Accessibilité, désélectionnez Rendre les objets enfants
accessibles. Dans le champ Nom, entrez Trio ZX2004 animation. Dans
le champ Description, entrez Animation comprenant 3 vues de la Trio
ZX2004.
Spécifier que les lecteurs d’écran doivent ignorer des éléments dans le document
89
Changer le texte statique en
texte dynamique pour le rendre
accessible
Le texte statique est accessible aux lecteurs d’écran. Cependant, vous ne
pouvez pas attribuer un nom d’occurrence au texte statique ; or, le nom
d’occurrence est requis pour contrôler l’ordre de tabulation et de lecture.
Modifiez le paragraphe de texte de présentation en texte dynamique et
spécifiez ses options d’accessibilité.
1.
Sur la scène, sélectionnez le texte commençant par « The TRIO
ZX2004 provides the ultimate in efficiency ... »
Le panneau Accessibilité change afin d’indiquer que vous ne pouvez pas
appliquer les fonctions d’accessibilité à cette sélection.
2.
Dans l’inspecteur des propriétés, choisissez Texte dynamique dans le
menu déroulant Type de texte.
Les paramètres d’accessibilité apparaissent dans le panneau
Accessibilité.
3.
R EM A R QU E
90
Dans le champ Nom de l’occurrence, entrez text9_txt.
Pour spécifier un ordre de tabulation et un ordre de lecture (c’est l’étape
suivante), vous devez attribuer un nom d’occurrence à toutes les
occurrences. Le nom d’occurrence doit être unique dans votre document.
Tâches de base : Créer du contenu Flash accessible
Contrôler l’ordre de tabulation et
l’ordre de lecture
Vous pouvez créer un ordre de tabulation qui détermine l’ordre dans lequel
les objets reçoivent le focus lorsque l’utilisateur appuie sur la touche Tab.
Vous pouvez également contrôler l’ordre dans lequel un lecteur d’écran lit
les informations concernant l’objet (l’ordre de tabulation). Vous pouvez
créer l’ordre de tabulation et de lecture à l’aide de la propriété tabIndex
dans ActionScript (dans ActionScript, la propriété tabIndex est synonyme
de l’ordre de lecture). Si vous possédez Flash Professionnel 8, vous pouvez
utiliser le panneau Accessibilité pour spécifier l’ordre de tabulation, mais
l’index de tabulation que vous affectez ne contrôle pas nécessairement
l’ordre de lecture.
Pour créer un ordre de lecture, vous devez affecter un ordre de tabulation à
chaque occurrence dans ActionScript.
Si vous disposez de Flash Professionnel, la création d’un ordre de
tabulation se résume à l’entrée d’un nombre dans le champ Index de
tabulation. Vous pouvez ensuite afficher l’ordre de tabulation directement
sur la scène.
Pour créer un ordre de tabulation dans cette leçon, utilisez l’une des
procédures suivantes. Pour créer un ordre de lecture ainsi qu’un ordre de
tabulation, suivez la procédure de contrôle de l’ordre de tabulation et de
l’ordre de lecture à l’aide d’ActionScript.
Si vous disposez de Flash Professionnel 8, vous pouvez suivre cette
procédure permettant de créer un ordre de tabulation en utilisant le
panneau Accessibilité :
1.
Le panneau Accessibilité étant ouvert, sélectionnez l’occurrence
logo_mc en haut de la scène. Dans le panneau Accessibilité, entrez 1
dans le champ Index de tabulation.
Contrôler l’ordre de tabulation et l’ordre de lecture
91
2.
Continuez à sélectionner chaque occurrence sur la scène et entrez un
ordre de tabulation dans le champ Index de tabulation, à l’aide des
informations contenues dans le tableau suivant :
Nom
d’occurrence
Entrez le nombre suivant dans le champ
Index de tabulation
logo_mc
1
dealers_btn
2
orders_btn
3
research_btn
4
5
text4_txt (le texte
situé au-dessus du
bouton Présentation
indiquant TRIO
ZX2004)
overview_btn
6
powerplant_btn
7
news_btn
8
safety_mc
9
text8_txt
10
text9_txt
11
12
bevel_mc (la barre
située le long de la
partie inférieure de la
scène)
92
Tâches de base : Créer du contenu Flash accessible
Si vous disposez de Flash Professionnel 8, suivez cette procédure pour
afficher un ordre de tabulation :
■
Choisissez Affichage > Afficher l’ordre de tabulation.
Le numéro d’index de tabulation que vous avez entré apparaît à côté de
l’occurrence sur la scène.
R E MA R QU E
Un ordre de tabulation créé avec ActionScript, et non avec le panneau
Accessibilité, n’apparaît pas lorsque Afficher l’ordre de tabulation est
activé.
Suivez cette procédure pour contrôler l’ordre de tabulation et l’ordre de
lecture à l’aide d’ActionScript :
1.
Dans le scénario, sélectionnez l’Image 1 dans le calque Actions.
2.
Dans le panneau Actions (Fenêtre > Actions), affichez le code
ActionScript qui crée l’index de tabulation pour chaque occurrence dans
le document.
3.
Si vous utilisez Flash Basic 8, ou si vous utilisez Flash Professionnel 8 et
que vous n’avez pas créé l’index de tabulation à l’aide du panneau
Accessibilité, supprimez /* et */ dans le script pour enlever les
commentaires du script.
this.logo_mc.tabIndex = 1;
this.dealers_btn.tabIndex = 2;
this.orders_btn.tabIndex = 3;
this.research_btn.tabIndex = 4;
this.text4_txt.tabIndex = 5;
this.overview_btn.tabIndex = 6;
this.powerplant_btn.tabIndex = 7;
this.news_btn.tabIndex = 8;
this.safety_mc.tabIndex = 9;
this.text8_txt.tabIndex = 10;
this.text9_txt.tabIndex = 11;
this.bevel_mc.tabIndex = 12;
Contrôler l’ordre de tabulation et l’ordre de lecture
93
A propos du test de votre
document avec les lecteurs
d’écran
Vous savez déjà qu’il est important de tester régulièrement votre document
Flash lors de sa création, afin de vérifier qu’il se comporte comme prévu. Il
est encore plus important d’effectuer des tests fréquents lorsque vous
concevez un document devant être utilisé avec des technologies
d’assistance, telles que les lecteurs d’écran. Outre tester l’ordre de
tabulation de votre fichier SWF, vous devez également tester votre ordre de
tabulation dans les différents navigateurs ; le mode de tabulation employé
par l’utilisateur pour accéder ou sortir d’un contenu Flash diffère en
fonction des navigateurs. Pour plus d’informations sur les ressources
permettant de tester votre document avec un lecteur d’écran, consultez
« Test du contenu accessible » dans le guide Utilisation de Flash.
Sommaire
Félicitations, vous avez créé du contenu Flash accessible. En quelques
minutes vous avez appris à accomplir les tâches suivantes :
■
Spécifier que le document doit être accessible aux lecteurs d’écran
■
Fournir un titre de document et une description
■
Attribuer un titre et une description aux occurrences de document
■
Spécifier que les lecteurs d’écran doivent ignorer des éléments dans le
document
■
Changer le texte statique en texte dynamique pour le rendre accessible
■
Contrôler l’ordre de navigation des utilisateurs à l’aide de la touche Tab
■
Contrôler l’ordre de lecture à l’aide d’ActionScript
Macromedia dispose d’un site web exhaustif sur l’accessibilité. Pour plus
d’informations sur l’accessibilité avec les produits Macromedia, consultez le
site web Accessibilité de Macromedia à l’adresse www.macromedia.com/
macromedia/accessibility.
94
Tâches de base : Créer du contenu Flash accessible
CHAPITRE 6
Tâches de base :
Utiliser les calques
6
Dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8, les
calques sont similaires à des feuilles transparentes en acétate empilées les
unes sur les autres. Les zones vides d’un calque laissent transparaître le
contenu des calques sous-jacents. Grâce à ces calques, vous pouvez
organiser le contenu de votre document. Par exemple, vous pouvez placer
votre illustration d’arrière-plan sur un calque et les boutons de navigation
sur un autre. Vous pouvez également créer et modifier des objets sur un
calque sans affecter les objets d’un autre calque.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Sélectionner un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Masquer et afficher des calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Verrouiller un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Ajouter et nommer un calque. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Modifier l’ordre des calques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Organiser les calques dans un dossier . . . . . . . . . . . . . . . . . . . . . . 100
Ajouter un calque de masque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Ajouter un calque de guide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Supprimer un calque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
95
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Work with Layers, puis double-cliquez sur
layers_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Work with Layers et double-cliquez layers_start.fla.
R E MA R QU E
Le dossier Utiliser les calques comprend les versions terminées des
fichiers FLA du didacticiel, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
4.
Dans le menu contextuel d’affichage de la scène, dans la partie
supérieure droite du scénario, sélectionnez Afficher une image pour
afficher la scène et l’espace de travail.
5.
Si nécessaire, faites glisser le bord inférieur du scénario (Fenêtre >
Scénario) vers le bas pour agrandir la vue du scénario.
Vous pouvez également utiliser la barre de défilement pour passer d’un
calque à l’autre.
96
Tâches de base : Utiliser les calques
Sélectionner 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, sélectionnez le calque dans
le scénario ou sélectionnez un objet Stage dans le calque. Le calque actif est
mis en surbrillance dans le scénario ; l’icône d’un crayon indique qu’il est
modifiable.
1.
Dans le panneau Outils, cliquez sur l’outil Sélection.
2.
Sur la scène, sélectionnez la voiture rouge.
Une icône de crayon dans le scénario indique que le calque de la voiture
rouge est actif.
3.
Sélectionnez le calque Text dans le scénario.
Les blocs de texte entourant la voiture sont tous deux sélectionnés sur la
scène, puisqu’ils sont sur le calque Text.
Sélectionner un calque
97
Masquer et afficher des calques
Vous pouvez masquer des calques pour afficher le contenu d’autres calques.
Vous pouvez soit masquer tous les calques de votre document
simultanément ou masquer les calques individuellement.
1.
Cliquez sur l’icône d’affichage située au-dessus des calques, de sorte
qu’une croix (X) rouge s’affiche dans la colonne d’affichage.
Tout le contenu disparaît de la scène.
2.
Cliquez sur les croix rouges une par une pour voir le contenu des calques
réapparaître sur la scène.
Les commandes situées à droite du nom d’un calque permettent de
masquer ou d’afficher son contenu.
R E MA R Q UE
Utilisez au besoin la barre de défilement 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 d’autres utilisateurs le modifient par
inadvertance.
1.
Dans le scénario, cliquez sur le point noir situé sous la colonne de
verrouillage, en regard du calque Logo.
Une icône représentant un verrou s’affiche, indiquant que le calque est
verrouillé.
2.
Avec l’outil de sélection, essayez de faire glisser le logo qui s’affiche sur
le haut de la scène.
Ce n’est pas possible, parce que le calque est verrouillé.
R E MA R QU E
98
Si vous déplacez par inadvertance un élément sur un calque non
verrouillé, appuyez sur les touches Ctrl+Z (Windows) ou Commande+Z
(Macintosh) pour annuler l’opération.
Tâches de base : Utiliser les calques
Ajouter et nommer un calque
Vous allez à présent ajouter un calque, le nommer, puis y ajouter un
symbole graphique.
1.
Dans le scénario, cliquez sur le calque de la voiture.
2.
Sélectionnez Insérer un calque sous le scénario.
Le nouveau calque s’affiche par dessus le calque de la voiture et devient
actif.
3.
Double-cliquez sur le nom du calque, entrez Arrière-plan et appuyez sur
la touche Entrée (Windows) ou Retour (Macintosh).
Il est recommandé d’attribuer à chaque calque un nom explicite
reflétant son contenu.
4.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), sélectionnez le
symbole graphique d’arrière-plan et faites-le glisser sur la scène.
Le calque d’arrière-plan est posé par-dessus tous les autres calques,
excepté le calque de masque. Son contenu s’affiche par conséquent pardessus les objets des calques sous-jacents.
Modifier l’ordre des calques
Il est bien sûr préférable que le calque d’arrière-plan ne recouvre pas les
autres objets de la scène. Ce calque doit normalement être placé sous les
autres dans le scénario. Vous allez donc déplacer le calque d’arrière-plan
que vous avez créé.
1.
Dans le scénario, faites glisser le calque d’arrière-plan de la première à la
dernière place.
Tous les objets de la scène s’affichent maintenant par-dessus l’arrièreplan.
2.
Le calque d’arrière-plan toujours sélectionné, dans l’inspecteur des
propriétés, entrez 0 dans le champ X et 72 dans le champ Y. Appuyez
sur la touche Entrée (Windows) ou Retour (Macintosh) pour placer le
calque d’arrière-plan sur la scène avec précision.
Modifier l’ordre des calques
99
Organiser les calques dans un
dossier
Vous pouvez créer des dossiers pour organiser vos calques et ordonner le
scénario. Le scénario contient deux calques qui comportent les objets de
navigation : l’un contient les boutons de navigation, l’autre les illustrations
de navigation. Vous allez créer un dossier appelé Navigation pour ces deux
calques.
1.
Dans le scénario, sélectionnez le calque Buttons.
2.
Sélectionnez Insérer un dossier de calques situé sous les noms de calque.
R EM A R QU E
Si l’inspecteur des propriétés affiche les propriétés de l’image et non du
clip, cliquez sur le clip Arrière-plan sur la scène.
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 s’affichent en retrait, indiquant qu’ils font partie du dossier.
Vous pouvez cliquer sur la flèche prévue à cet effet pour agrandir et réduire
le dossier et les calques qu’il contient.
Ajouter un calque de masque
L’utilisation d’un calque de masque permet de choisir les parties des calques
sous-jacents à afficher. Pour cela, vous devez choisir votre calque de
masque, les autres devenant par défaut les calques masqués.
Vous allez utiliser la forme rectangulaire sur la scène pour maquer une
partie du graphique et de l’animation de la route, de sorte que l’animation
soit mieux ajustée à la scène.
1.
Sur la scène, activez l’outil de sélection et cliquez sur la forme
rectangulaire sous la route.
2.
Faites glisser la forme verticalement et alignez le bord gauche de la forme
sur le bord gauche de la route.
100 Tâches de base : Utiliser les calques
3.
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur
la touche Contrôle (Macintosh) sur le calque de masque dans le
scénario, puis sélectionnez Masque dans le menu contextuel.
Le calque est converti en calque de masque, indiqué par une icône en
forme de losange bleu. Le calque situé immédiatement dessous est lié
au calque de masque. Le nom du calque masqué s’affiche en retrait et
son icône devient un calque bleu.
4.
Dans le scénario, 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 masqués sont automatiquement
verrouillés.
5.
Pour afficher l’effet de masque, sélectionnez Contrôle > Tester
l’animation.
6.
Lorsque vous avez terminé, fermez la fenêtre du fichier SWF pour
revenir au document.
Ajouter un calque de guide
Vous êtes maintenant familier avec les calques de base et les calques de
masque. Le troisième type de calque est le calque de guide. Les calques de
guide permettent de conserver du contenu que vous ne voulez pas afficher
dans le fichier publié ou exporté. Par exemple, vous pouvez y placer des
instructions destinées aux autres utilisateurs de votre document. Lorsque
vous commencez une leçon dans Flash, vous verrez que de nombreux
fichiers de leçon FLA contiennent des espaces réservés qui indiquent où
placer un objet Stage sur les calques de guide. Vous allez à présent créer un
calque de guide.
1.
Dans le scénario, sélectionnez le calque Background, puis cliquez sur
Insérer un calque pour créer un calque.
2.
Nommez ce calque Notes et appuyez sur la touche Entrée (Windows)
ou Retour (Macintosh).
3.
Cliquez avec le bouton droit de la souris (Windows) ou tout en
appuyant sur la touche Contrôle (Macintosh) sur le calque Notes et
sélectionnez Guide dans le menu contextuel.
Une icône en regard du nom du calque indique qu’il s’agit d’un calque
de guide.
Ajouter un calque de guide
101
4.
Le calque Notes toujours sélectionné, cliquez sur l’outil Texte dans le
panneau Outils. Puis, dans la partie de la scène située 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 sélectionnez Contrôle > Tester
l’animation.
Aucun contenu ajouté au calque de guide ne s’affiche dans la fenêtre du
fichier SWF.
6.
Une fois que vous en avez terminé avec l’affichage du fichier SWF,
fermez sa fenêtre pour retourner au document.
Supprimer un calque
Le calque de guide de votre document étant superflu, vous allez le
supprimer.
■
Dans le scénario, le calque Notes sélectionné, cliquez sur le bouton
Supprimer le calque.
Sommaire
Félicitations, vous savez désormais utiliser les calques dans Flash. En
quelques minutes vous avez appris à accomplir les tâches suivantes :
■
Sélectionner un calque
■
Masquer et afficher des calques
■
Verrouiller un calque
■
Ajouter et nommer un calque
■
Modifier l’ordre des calques
■
Organiser les calques dans un dossier
■
Ajouter un calque de masque
■
Ajouter un calque de guide
■
Supprimer un calque
Pour en savoir plus sur Flash, choisissez une autre leçon.
102 Tâches de base : Utiliser les calques
CHAPITRE 7
Tâches de base :
Créer une application
7
L’application que vous allez créer au cours de cette leçon permet aux
utilisateurs de visualiser le prix des produits qu’ils sélectionnent. Un
bouton Calculer additionne les prix pour obtenir le total.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Copier les entrées et les champs de texte dynamiques . . . . . . . . 105
Nommer les champs de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Ajouter et nommer un composant Button . . . . . . . . . . . . . . . . . . . 106
Déclarer les variables et les valeurs pour les prix . . . . . . . . . . . . . 107
Préciser les valeurs des champs de saisie de texte . . . . . . . . . . . 108
Rédiger une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Rédiger un gestionnaire d’événement pour le composant . . . . . .110
103
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Create an Application, puis double-cliquez sur
calculator_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Create an Application et double-cliquez calculator_start.fla.
R E MA R QU E
Le dossier Créer une application comprend les versions terminées des
fichiers de didacticiel FLA, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
R E MA R Q UE
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
Le formulaire inclut déjà 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).
104 Tâches de base : Créer une application
Copier les entrées et les champs
de texte dynamiques
Utilisez des champs de saisie de texte pour créer un formulaire.
1.
Cliquez sur le champ de saisie où les utilisateurs saisissent la quantité de
lecteurs CD (CD Player). Maintenez la touche Alt enfoncée et faites
glisser la copie du champ vers le bas, jusqu’à la zone QTY Shockers.
2.
Appuyez sur Alt et cliquez sur le champ de saisie que vous venez de faire
glisser, puis faites glisser la nouvelle copie du champ jusqu’à la zone
QTY Cover (Quantité Housses).
3.
Appuyez sur Alt et cliquez sur le champ de texte dynamique du prix des
lecteurs CD, puis faites glisser la copie du champ jusqu’à la zone Price
Shockers (Prix amortisseurs).
4.
Appuyez sur Alt et cliquez sur le champ que vous venez de faire glisser,
puis faites glisser la copie jusqu’à la zone Price Cover (Prix Housses).
Nommer les champs de texte
Avant de pouvoir définir les valeurs des champs de texte dans ActionScript,
vous devez attribuer à chaque champ de texte un nom d’occurrence dans
l’inspecteur des propriétés. L’ajout de l’extension txt au nom de
l’occurrence identifie l’objet comme étant un objet texte.
1.
Cliquez sur le champ de saisie du haut dans la colonne QTY. Dans le
champ de texte Nom de l’occurrence de l’inspecteur des propriétés
(Fenêtre > Propriétés), tapez qty1_txt.
2.
Répétez la procédure précédente 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 Price.
Dans la boîte de dialogue Nom de l’occurrence de l’inspecteur des
propriétés, saisissez price1_txt.
4.
Répétez la procédure précédente pour nommer les champs de texte du
milieu et du bas de la colonne respectivement price2_txt et price3_txt.
Nommer les champs de texte 105
Ajouter et nommer un
composant Button
Les composants sont des clips vidéo offrant un moyen facile d’ajouter des
fonctionnalités avancées à votre document sans avoir à connaître le langage
ActionScript, plus pointu. Utilisez le composant Button pour créer un
bouton Calculer qui fournit le prix total. Ce composant étant basé sur
ActionScript 2.0, vous devez tout d’abord configurer votre boîte de
dialogue Paramètres de publication pour vous assurer que votre contenu
Flash est lu comme prévu.
1.
Choisissez Fichier > Paramètres de publication.
2.
Dans l’onglet Flash de la boîte de dialogue Paramètres de publication,
choisissez ActionScript 2.0 dans le menu déroulant Version
d’ActionScript, si ce n’est pas déjà fait.
3.
Dans le scénario, cliquez sur le calque Composants afin de le
sélectionner.
4.
A partir du panneau Composants (Fenêtre > Composants), faites glisser
le composant Button vers la scène et placez-le sur le repère Calculate.
5.
Dans l’onglet Paramètres de l’inspecteur des propriétés, sélectionnez le
composant Button, cliquez sur le texte Button dans la ligne Etiquette,
saisissez Calculate. Appuyez ensuite sur Entrée ou sur Retour.
Le texte que vous entrez dans le champ Etiquette est le texte qui
apparaît sur le composant.
6.
Dans le champ de texte Nom de l’occurrence, tapez calculate pour
donner un nom d’occurrence au bouton.
106 Tâches de base : Créer une application
Déclarer les variables et les
valeurs pour les prix
Pour que votre application multiplie la quantité de pièces sélectionnées par
le prix, vous devez définir une variable pour chaque pièce dans
ActionScript. La valeur de la variable correspond au prix de la pièce.
1.
Dans le scénario, cliquez sur l’Image 1 dans le calque Actions et ouvrez
le panneau Actions (Fenêtre > Actions).
2.
Dans la fenêtre de script, tapez le texte suivant :
// déclare les variables et valeurs pour le prix des
pièces détachées.
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.
R EMA R Q U E
Au fur et à mesure que vous avancez dans cette leçon, il est possible que
vous vous rendiez compte que vous n’avez plus besoin des indicateurs de
code (les infos-bulles vous donnant la syntaxe ActionScript correcte). Si
tel est le cas, vous pouvez les désactiver en cliquant sur le menu déroulant,
dans le coin supérieur droit du panneau Actions. Choisissez Préférences,
puis désélectionnez Indicateurs de code dans l’onglet ActionScript.
3.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) et saisissez
ce qui suit afin d’indiquer le prix de chaque pièce :
var priceCD = 320;
var priceShocks = 150;
var priceCover = 125;
Déclarer les variables et les valeurs pour les prix 107
Préciser les valeurs des champs
de saisie de texte
Vous devez préciser les valeurs des champs de saisie de texte. Vous allez
utiliser les valeurs pour rédiger un code ActionScript qui multiplie la
quantité par le prix.
1.
Dans la fenêtre de script, placez le point d’insertion après le texte 125;,
appuyez sur Entrée (Windows) ou sur Retour (Macintosh) à deux
reprises, puis saisissez le texte suivant :
//définit les valeurs initiales pour les champs de texte
de la quantité.
2.
Appuyez sur Entrée ou sur Retour et saisissez :
qty1_txt.text = 0;
représente le nom de l’occurrence que vous avez donné au
premier champ de saisie sous la colonne QTY. La propriété .text
définit la valeur initiale dans le champ de texte. Définissez cette valeur
sur 0.
qty1_txt
3.
Appuyez sur Entrée ou sur Retour et saisissez les deux lignes suivantes
afin de définir la valeur 0 pour les deux autres champs QTY :
qty2_txt.text = 0;
qty3_txt.text = 0;
Lorsque vous avez fini, le code ActionScript se présente ainsi :
//définit les valeurs initiales pour les champs de texte
de la quantité.
qty1_txt.text = 0;
qty2_txt.text = 0;
qty3_txt.text = 0;
108 Tâches de base : Créer une application
Rédiger une fonction
Une fonction est un script que vous pouvez utiliser plusieurs fois afin
d’effectuer une tâche spécifique. Vous pouvez transmettre des paramètres à
une fonction qui peut retourner une valeur. Dans cette leçon, chaque fois
que l’utilisateur clique sur le bouton Calculer, une fonction multipliera les
données des champs de saisie de texte et affichera les valeurs dans les
champs de texte dynamiques. Rédigez cette fonction dès à présent.
1.
Dans la fenêtre de script, placez le point d’insertion après le code
ActionScript qty3_txt.text = 0;, appuyez sur Entrée (Windows) ou
sur Retour (Macintosh) à deux reprises, puis saisissez le commentaire
suivant :
//calcule la quantité fois le prix.
2.
Appuyez sur Entrée ou Retour et saisissez le commentaire suivant pour
créer une fonction s’exécutant lorsque la tête de lecture entre dans
l’image 1, lorsque vous attachez le script :
this.onEnterFrame = function (){
3.
Saisissez le code ActionScript suivant afin de préciser comment la
fonction doit multiplier les valeurs dans les champs de saisie de texte
pour l’avion :
price1_txt.text = Number (qty1_txt.text)*Number
(priceCD);
price1_txt est le nom d’occurrence que vous avez donné au champ de
saisie du haut sur la scène.
définit le texte qui doit apparaître dans le champ de texte,
autrement dit le nombre de pièces multiplié par le prix : les 320 dollars
que vous avez définis comme valeur de la variable priceCD.
.text
4.
Appuyez sur Entrée ou sur Retour et saisissez les deux lignes suivantes :
price2_txt.text = Number (qty2_txt.text)*Number
(priceShocks);
price3_txt.text = Number (qty3_txt.text)*Number
(priceCover);
};
Votre fonction se présente ainsi :
//calcule la quantité fois le prix.
this.onEnterFrame = function (){
price1_txt.text = Number (qty1_txt.text)*Number
(priceCD);
Rédiger une fonction 109
price2_txt.text = Number (qty2_txt.text)*Number
(priceShocks);
price3_txt.text = Number (qty3_txt.text)*Number
(priceCover);
};
Rédiger un gestionnaire
d’événement pour le composant
Pour que votre fichier SWF réagisse à un événement (ex. : un clic de
souris), vous pouvez utiliser des gestionnaires d’événement : un code
ActionScript associé à un objet ou un événement particulier. Utilisez un
gestionnaire d’événement on() pour le composant Button qui calcule le
prix total lorsque l’utilisateur clique sur ce bouton.
Pour plus d’informations sur les gestionnaires d’événement d’ActionScript,
consultez la section Gestion d’événements dans Formation à ActionScript 2.0
dans Flash.
1.
Dans la scène, cliquez sur le composant Button et accédez au panneau
Actions.
L’onglet Calculate, situé en bas du panneau Actions, indique que vous
attachez le script directement à l’objet sélectionné plutôt qu’à une
image.
2.
Dans la fenêtre de script, tapez le commentaire suivant :
//Calcule le prix total.
3.
Une fois le commentaire saisi, appuyez sur Retour (Macintosh) ou sur
Entrée (Windows) et saisissez ce qui suit afin de créer un gestionnaire
pour le composant PushButton que vous avez placé sur la scène :
on(click) {
Vous venez d’entrer le début du gestionnaire d’événement on().
L’élément (clic) indique que l’événement doit intervenir lorsque
l’utilisateur clique sur le bouton Calculer.
Un composant Button dispose de son propre scénario. Dans la
hiérarchie du scénario, le composant Scénario dépend du scénario
principal. Dans ce script, pour désigner des éléments à partir du
scénario du composant Button vers le scénario principal, utilisez le
code with (_parent).
110
Tâches de base : Créer une application
4.
Placez le point d’insertion à la fin de la ligne que vous venez de saisir,
appuyez sur Entrée ou sur Retour et saisissez ce qui suit :
with(_parent){
5.
Appuyez sur Entrée ou Retour et terminez la définition de votre
gestionnaire en tapant le commentaire suivant :
priceTotal_txt.text = Number (price1_txt.text) + Number
(price2_txt.text) + Number (price3_txt.text);
}
}
Lorsque vous avez terminé, votre script doit apparaître comme suit :
on(click) {
with(_parent){
priceTotal_txt.text = Number (price1_txt.text) + Number
(price2_txt.text) + Number (price3_txt.text);
}
}
Le gestionnaire d’événement que vous venez de saisir précise que le texte du
champ PrixTotal_txt doit être la somme des valeurs qui se trouvent dans les
champs price1_txt, price2_txt et price3_txt.
Tester votre application
Vous allez tester votre application afin de vous assurer qu’elle s’exécute
comme prévu.
1.
Sauvegardez votre document et sélectionnez Contrôle > Tester
l’animation.
2.
Dans la version test de votre animation qui s’affiche dans l’application
Flash Player, saisissez des chiffres dans les champs QTY afin de voir ce
qui s’affiche dans les champs Price.
3.
Cliquez sur le bouton Calculate afin de connaître le coût total de toutes
les pièces.
Tester votre application
111
Sommaire
Félicitations, à présent vous maîtrisez la création d’une application. En
quelques minutes vous avez appris à accomplir les tâches suivantes :
■
Copier les entrées et les champs de texte dynamiques
■
Attribuer des noms d’occurrence aux champs de texte
■
Ajouter un composant Button
■
Déclarer les variables et les valeurs
■
Préciser les valeurs des champs de texte
■
Rédiger une fonction
■
Rédiger un gestionnaire d’événement pour le composant
Pour en savoir plus sur ActionScript, reportez-vous aux didacticiels
d’ActionScript en Didacticiels Flash.
112
Tâches de base : Créer une application
CHAPITRE 8
Tâches de base : Utiliser
les outils de mise en forme
8
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 offrent
plusieurs façons de placer des objets sur la scène. Ce didacticiel va vous
apprendre à utiliser les outils de mise en forme de Flash pour créer une
interface utilisateur.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Utiliser les guides pour aligner des objets. . . . . . . . . . . . . . . . . . . . .115
Modifier la taille de la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Redimensionner les objets en fonction de la taille de la scène . .116
Spécifier des paramètres d’alignement par accrochage. . . . . . . . 117
Aligner un objet à l’aide des guides d’alignement . . . . . . . . . . . . . .118
Aligner un objet à l’aide du panneau Aligner . . . . . . . . . . . . . . . . . .119
Accrocher des objets les uns aux autres . . . . . . . . . . . . . . . . . . . . . .119
Aligner des objets à l’aide de l’inspecteur des propriétés . . . . . . 120
Aligner des objets à l’aide de la grille et des touches fléchées. . .121
Cette leçon utilise des outils spécifiques pour les différents types d’objets
(guides d’alignement pour aligner du texte, par exemple), mais les objets
peuvent tout aussi bien être alignés à l’aide d’autres outils. Utilisez les outils
de votre choix pour créer votre projet.
113
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
R E MA R QU E
114
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Use Layout Tools, puis double-cliquez sur
tools_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Use Layout Tools et double-cliquez tools_start.fla.
Le dossier Utiliser les outils de mise en forme comprend les versions
terminées des fichiers FLA du didacticiel, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
4.
Dans le menu contextuel d’affichage de la scène, dans la partie
supérieure droite du scénario, sélectionnez Afficher une image pour
afficher la scène et l’espace de travail.
5.
Cliquez dans l’espace de travail, loin des objets sur la scène de manière
à n’en sélectionner aucun.
Tâches de base : Utiliser les outils de mise en forme
Utiliser les guides pour aligner
des objets
Vous pouvez utiliser les règles et les guides pour placer ou aligner un objet
avec précision dans votre document. Vous allez ajouter des guides pour
faciliter le centrage du bloc de texte.
1.
Choisissez Affichage > Règles.
Une règle horizontale et une règle verticale s’affichent en haut et à
gauche de la scène.
2.
Cliquez sur la règle horizontale et faites glisser la souris vers le bas jusqu’à
atteindre une position horizontale de 250 pixels.
3.
Cliquez sur la règle verticale et faites glisser la souris vers la gauche
jusqu’à atteindre une position verticale de 375 pixels.
4.
Assurez-vous que l’option Accrocher aux guides est activée en
choisissant Affichage > Accrochage > Accrocher aux guides.
5.
Dans le panneau Outils, cliquez sur l’outil de sélection.
6.
Sur la scène, cliquez dans l’angle supérieur gauche de la bordure bleue
du texte et faites-la glisser jusqu’au point d’intersection des deux guides.
Un petit cercle apparaît dans le coin supérieur gauche de la bordure de
texte lorsque vous déplacez la souris à proximité du coin de la bordure
de texte. Ce cercle indique que l’accrochage est effectif.
7.
Pour supprimer les guides, sélectionnez Affichage > Guides > Effacer les
guides.
Utiliser les guides pour aligner des objets
115
Modifier la taille de la scène
La taille de la scène de votre document est de 750 pixels x 500 pixels. Vous
allez définir la taille de la scène sur 640 x 480, une taille standard adaptée à
la plupart des écrans et des résolutions.
1.
Cliquez sur une zone vide de l’espace de travail et désélectionnez le bloc
de texte.
2.
L’inspecteur des propriétés affiche les propriétés du document entier.
Sélectionnez Taille.
3.
Dans la boîte de dialogue Propriétés du document, entrez 640 pour la
largeur et 480 pour la hauteur, puis cliquez sur OK.
La taille du document est modifiée mais les objets sur la scène
conservent leur taille.
Redimensionner les objets en
fonction de la taille de la scène
Maintenant que vous avez modifié la taille de la scène, les illustrations
débordent sur l’espace de travail. Cela peut être corrigé facilement.
1.
Sur la scène, cliquez sur les montagnes grises pour les sélectionner. Tout
en maintenant la touche Maj enfoncée, cliquez sur le bandeau bleu en
haut de la scène pour l’ajouter à la sélection.
2.
Ouvrez le panneau Aligner (Fenêtre > Aligner).
Les info-bulles s’affichent dans le panneau Aligner, indiquant les noms
des options d’alignement.
3.
Dans le panneau Aligner, sélectionnez Vers la scène, puis, sous Ajuster
la taille, sélectionnez Même largeur. La taille de l’illustration
sélectionnée s’adapte à la largeur de la scène.
4.
Toujours dans ce panneau, cliquez maintenant sur Aligner les bords
gauches.
L’illustration s’aligne sur le bord gauche de la scène.
116
5.
Dans le scénario, cliquez sur le calque Bevel afin de le sélectionner.
6.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser le
biseau sur la partie inférieure de la scène.
Tâches de base : Utiliser les outils de mise en forme
7.
Dans le panneau Aligner, vérifiez que l’option Vers la scène est toujours
sélectionnée, puis cliquez sur Même largeur.
8.
Cliquez sur Aligner les bords gauches et Aligner les bords inférieurs.
Le biseau s’aligne sur le bord inférieur de la scène.
9.
Fermez les panneaux Bibliothèque et Aligner.
Spécifier des paramètres
d’alignement par accrochage
L’accrochage permet de placer un objet sur une scène avec précision en
l’accrochant à d’autres objets ou à des outils d’alignement. Vous allez
spécifier l’affichage des guides horizontaux et verticaux dans les paramètres
d’alignement par accrochage, ce qui vous aidera à placer les illustrations sur
la scène.
1.
Sélectionnez Affichage > Accrochage > Aligner par accrochage si cette
option n’est pas déjà sélectionnée.
2.
Sélectionnez Affichage > Accrochage > Modifier l’alignement par
accrochage.
3.
Dans la zone de texte Bordure de l’animation de la boîte de dialogue
Aligner par accrochage, entrez 30 px (pixels) pour accrocher les objets
sur une bordure située à 30 pixels de la scène.
4.
Vérifiez que 10 pixels s’affiche dans les zones de texte Tolérance de
l’accrochage horizontal et vertical.
La tolérance de l’accrochage détermine la distance à laquelle un objet
doit s’approcher d’un autre objet ou d’un outil d’alignement avant de
s’accrocher.
5.
Cliquez sur OK.
Spécifier des paramètres d’alignement par accrochage
117
Aligner un objet à l’aide des
guides d’alignement
Vous allez maintenant utiliser ces paramètres pour faciliter le placement
d’un objet sur la scène.
1.
Dans le panneau Outils, cliquez sur l’outil de sélection.
2.
Dans le scénario, sélectionnez le calque Auto.
3.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser la
voiture et placez-la sur une zone grise de la scène, en regard du corps du
texte.
4.
Faites de nouveau glisser l’occurrence afin d’afficher les guides
d’alignement par accrochage. Approchez la voiture du texte, déplacez-la
verticalement jusqu’à ce que le guide d’alignement au centre s’affiche.
Le guide indique que le graphique est centré par rapport au texte.
5.
Tout en conservant la voiture centrée sur le texte (le guide d’alignement
au centre doit rester affiché), faites glisser le graphique horizontalement
vers la gauche de la scène, jusqu’à ce que le guide s’accroche à la bordure
de 30 pixels créée précédemment.
Vous venez d’aligner la voiture sur le texte ainsi que sur la bordure
d’accrochage.
118
Tâches de base : Utiliser les outils de mise en forme
Aligner un objet à l’aide du
panneau Aligner
Dans une section précédente, vous avez utilisé le panneau Aligner pour
adapter les objets à la taille de la scène. Vous allez à présent utiliser le
panneau Aligner pour centrer des objets les uns par rapport aux autres et
par rapport à la scène.
1.
Avec l’outil de sélection, cliquez sur le texte de la scène intitulé
« Introducing the World’s First Hybrid 4WD ».
2.
Cliquez sur la deuxième ligne du titre, « 2004 Trio QZ » en maintenant
la touche Ctrl enfoncée, pour l’ajouter à la sélection.
3.
Dans le panneau Aligner (Fenêtre > Aligner), désélectionnez Vers la
scène et sélectionnez Aligner les centres horizontalement.
Vous avez centré les deux lignes par rapport à leur axe horizontal. Vous
allez à présent grouper le titre et centrer les deux lignes par rapport à la
scène.
4.
Les deux lignes de texte toujours sélectionnées, sélectionnez
Modification > Grouper.
5.
Dans le panneau Aligner, sélectionnez Vers la scène, puis Aligner les
centres horizontalement.
Les objets s’alignent désormais par rapport au centre horizontal de la
scène.
6.
Fermez le panneau Aligner.
Accrocher des objets les uns aux
autres
Vous pouvez accrocher des objets de la scène à d’autres objets. Pour cela,
vous devez définir l’alignement des objets les uns par rapport aux autres.
Utilisez la fonction Accrocher aux objets pour aligner une barre de
navigation sur le bandeau supérieur de la scène.
1.
Sélectionnez Affichage > Accrochage. Dans le sous-menu, sélectionnez
Accrocher aux objets, si cette option n’est pas déjà sélectionnée.
2.
Dans le scénario, sélectionnez le calque Nav.
Accrocher des objets les uns aux autres
119
3.
Dans le panneau Bibliothèque, faites glisser le graphique de navigation
sous le bandeau bleu de la scène et relâchez le bouton de la souris.
4.
Cliquez sur l’angle supérieur gauche du graphique et faites-le glisser
jusqu’à ce qu’un indicateur d’accrochage circulaire s’affiche.
5.
Maintenant, faites glisser l’angle supérieur gauche de la barre de
navigation et accrochez-la sur l’angle inférieur gauche du bandeau bleu.
Aligner des objets à l’aide de
l’inspecteur des propriétés
L’inspecteur des propriétés permet d’aligner avec précision des objets sur les
axes x et y de la scène, à partir du point d’alignement de l’objet de la scène.
Le point d’alignement est le point sur lequel un symbole s’aligne ou pivote.
Vous allez utiliser l’inspecteur des propriétés pour aligner le logo.
1.
Dans le scénario, sélectionnez le calque Top.
2.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser le
logo sur un espace vide de la scène.
120 Tâches de base : Utiliser les outils de mise en forme
3.
Dans l’inspecteur des propriétés, le logo toujours sélectionné, entrez 20
dans le champ X et 8 dans le champ Y. Appuyez sur Entrée (Windows)
ou Retour (Macintosh).
Le logo est déplacé sur les valeurs x et y que vous avez spécifiées.
R EM A R QU E
vous pouvez afficher et modifier le point d’alignement d’un objet dans le
panneau Info (Fenêtre > Info). Le carré noir de la grille représente le point
d’alignement. Pour le modifier, cliquez sur un autre carré de la grille.
Aligner des objets à l’aide de la
grille et des touches fléchées
Vous pouvez utiliser la grille pour faciliter le placement d’objets sur la
scène.
1.
Choisissez Affichage > Grille > Afficher la grille.
La grille ne s’affiche pas lorsque vous testez ou publiez le document.
R E MA R Q UE
Pour accrocher des objets aux lignes des grilles horizontale et verticale,
vous devez également sélectionner l’option Accrocher à la grille
(Affichage > Accrochage > Accrocher à la grille). La leçon présente n’utilise
pas cette option.
2.
Sur la scène, sélectionnez le titre groupé précédemment.
3.
Utilisez la touche Flèche vers le haut du clavier pour venir placer la
première ligne du titre sur une ligne de grille horizontale. Veillez à laisser
un espace entre le texte du titre et la barre de navigation.
R E MA R Q UE
Vous pouvez également utiliser les touches Flèche vers la gauche, Flèche
vers le bas et Flèche vers la droite pour ajuster les objets sur la scène.
Aligner des objets à l’aide de la grille et des touches fléchées
121
Sommaire
Félicitations, vous venez de créer une interface utilisateur à l’aide des outils
de mise en forme. En quelques minutes vous avez appris à accomplir les
tâches suivantes :
■
Afficher les règles de l’espace de travail
■
Utiliser les guides pour aligner des objets
■
Modifier la taille de la scène
■
Redimensionner les objets en fonction de la taille de la scène
■
Aligner un objet à l’aide des guides d’alignement
■
Accrocher des objets les uns aux autres
■
Aligner des objets à l’aide de l’inspecteur des propriétés
■
Utiliser la grille et les touches fléchées pour aligner des objets
Pour plus d’informations sur les options de conception de Flash, lancez une
autre leçon de la série Tâches de base.
122 Tâches de base : Utiliser les outils de mise en forme
CHAPITRE 9
Tâches de base : Créer des
symboles et des occurrences
9
Un symbole est un objet réutilisable. Chaque utilisation d’un symbole sur
la scène s’appelle une occurrence. La multiplication du nombre
d’occurrences sur la scène n’augmente pas la taille du fichier et constitue
donc un moyen efficace de limiter la taille de fichier d’un document. Les
symboles facilitent également la modification des documents ; lorsque vous
modifiez un symbole, toutes ses occurrences sont mises à jour. Enfin, ils
permettent de créer une interactivité complexe.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Créer un symbole graphique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Dupliquer et modifier une occurrence de symbole . . . . . . . . . . . . 126
Modifier un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Créer un symbole de clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Nommer l’occurrence de clip. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Ajouter un effet au clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
123
Configurer l’espace de travail
Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette
leçon et configurer votre espace de travail afin de suivre vos leçons dans un
cadre optimal.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Create Symbols and Instances, puis doublecliquez sur symbols_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Create Symbols and Instances et double-cliquez
symbols_start.fla.
R E MA R Q UE
Le dossier Créer des symboles comprend les versions terminées des
fichiers FLA du didacticiel, pour votre référence.
Le document s’ouvre dans l’environnement auteur de Flash.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail.
124 Tâches de base : Créer des symboles et des occurrences
A propos de la création de
symboles
Lorsque vous créez un symbole, vous devez spécifier l’un des
comportements de symbole suivants :
■
Graphique
■
Clip
■
Bouton
Dans cette leçon, vous allez manipuler des symboles de clip et des symboles
graphiques. Pour suivre une leçon sur les symboles de bouton, choisissez
Aide > Didacticiels Flash > Tâches de base : Ajouter de l’animation et des
éléments de navigation aux boutons
Créer un symbole graphique
Un symbole graphique convient tout particulièrement à l’utilisation
répétée d’images statiques ou à la création d’animations associées au
scénario principal. Vous ne pouvez pas attribuer de noms d’occurrence aux
symboles graphiques, ni y faire référence dans ActionScript, contrairement
aux symboles de clip et de bouton.
Vous allez convertir en symbole graphique une illustration vectorielle
présente sur la scène.
1.
Dans le panneau Outils, cliquez sur l’outil Sélection.
2.
Sur la scène, sélectionnez la voiture en traçant un cadre de sélection
autour d’elle.
3.
Choisissez Modification > Convertir en symbole.
4.
Dans la boîte de dialogue Convertir en symbole, entrez le nom
ImageVoiture et sélectionnez le comportement Image.
Créer un symbole graphique 125
5.
La grille d’alignement affiche un petit carré noir pour indiquer
l’emplacement du point d’alignement dans le cadre de délimitation. Le
point d’alignement représente l’axe autour duquel le symbole tourne et
le point sur lequel il s’aligne. Cliquez sur la case supérieure gauche dans
la grille pour sélectionner l’emplacement du point d’alignement et
cliquez sur OK.
6.
Sur la scène, la voiture est maintenant une occurrence du symbole
ImageVoiture. L’inspecteur des propriétés affiche les propriétés de
l’occurrence du symbole graphique.
7.
Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque) pour afficher
le symbole.
Le panneau Bibliothèque contient maintenant le symbole
ImageVoiture. Flash rassemble les symboles dans la bibliothèque.
Chaque document possède sa propre bibliothèque ; vous pouvez
partager les bibliothèques entre plusieurs fichiers FLA.
Dupliquer et modifier une
occurrence de symbole
Après avoir créé un symbole, vous pouvez en multiplier les occurrences
dans le document. Vous pouvez modifier les propriétés suivantes d’une
occurrence sans affecter les autres occurrences du symbole : couleur,
échelle, rotation, transparence alpha, luminosité, teinte, hauteur, largeur et
emplacement.
Si vous modifiez le symbole ultérieurement, l’occurrence conserve les
propriétés qui lui sont propres tout en reflétant la nouvelle définition du
symbole.
Vous allez maintenant dupliquer l’occurrence de la voiture et modifier la
teinte de la copie.
126 Tâches de base : Créer des symboles et des occurrences
1.
Sur la scène, sélectionnez la voiture. Maintenez la touche Alt enfoncée
et faites glisser la voiture vers le haut pour créer une autre occurrence.
2.
Après avoir sélectionné la copie, choisissez Teinte dans le menu
déroulant Couleur de l’inspecteur des propriétés.
3.
Dans la zone RVB, entrez 0 pour le rouge, 0 pour le vert et 255 pour le
bleu. Appuyez ensuite sur Entrée (Windows) ou Retour (Macintosh).
L’occurrence copiée devient bleue ; l’occurrence d’origine reste
inchangée.
Modifier un symbole
Vous pouvez passer en mode d’édition de symbole en double-cliquant sur
n’importe quelle occurrence d’un symbole. Les modifications apportées
dans ce mode sont répercutées dans toutes les occurrences du symbole.
1.
Effectuez l’une des opérations suivantes pour passer en mode d’édition
de symbole :
■
■
Sur la scène, double-cliquez sur l’une des occurrences de la voiture.
Dans le panneau Bibliothèque, double-cliquez sur le symbole
ImageVoiture.
Le nom du symbole s’affiche près de la séquence 1, en haut de l’espace
de travail. Cela vous indique que vous êtes en mode d’édition du
symbole concerné.
Modifier un symbole 127
2.
Dans le panneau Outils, sélectionnez l’outil Transformation libre et
faites-le glisser autour de la voiture du bas pour la sélectionner
entièrement.
En mode d’édition de symbole, la voiture est une image que vous
pouvez manipuler comme n’importe quelle autre illustration
vectorielle.
3.
Faites glisser légèrement à droite la poignée de redimensionnement de
l’outil Transformation libre pour étirer le symbole.
4.
Cliquez sur Séquence 1 au-dessus du scénario pour quitter le mode
d’édition de symbole.
La transformation est appliquée aux deux occurrences du symbole.
Créer un symbole de clip
Un symbole de clip est très similaire à un sous-document dans un
document. Ce type de symbole possède son propre scénario indépendant
du scénario principal. Vous pouvez ajouter des clips à l’intérieur d’autres
clips et de boutons afin de créer des clips imbriqués. Vous pouvez
également utiliser l’inspecteur des propriétés pour affecter un nom
d’occurrence à un clip et le référencer dans ActionScript.
Vous allez convertir en clip le pneu présent sur la scène.
1.
A l’aide de l’outil Sélection, cliquez sur le pneu pour le sélectionner et
choisissez Modification > Convertir en symbole.
2.
Dans la boîte de dialogue Convertir en symbole, entrez le nom
ClipRoue et sélectionnez le comportement Clip.
3.
Dans la grille d’alignement, sélectionnez cette fois le carré central en tant
que point d’alignement, pour que l’axe de rotation du symbole soit au
centre du clip. Cliquez sur OK.
Sur la scène, l’image est maintenant une occurrence du symbole
ClipRoue.
128 Tâches de base : Créer des symboles et des occurrences
Nommer l’occurrence de clip
Pour faire référence à une occurrence de symbole de bouton ou de clip dans
ActionScript, vous devez la nommer. Il est recommandé de toujours
effectuer cette opération. Vous ne pouvez pas affecter de nom d’occurrence
aux symboles graphiques.
■
Dans l’inspecteur des propriétés, après avoir sélectionné l’occurrence de
ClipRoue sur la scène, entrez roue_mc dans la zone de texte Nom de
l’occurrence.
Ajouter un effet au clip
En mode d’édition de symbole, vous pouvez créer une animation
indépendante du scénario principal dans un scénario de clip. Vous allez
ajouter un effet au symbole ClipRoue pour faire tourner toutes les
occurrences du symbole.
1.
A l’aide de l’outil Sélection, double-cliquez sur l’occurrence roue_mc
pour passer en mode d’édition de symbole.
2.
Cliquez sur le symbole avec le bouton droit de la souris (Windows) ou
en appuyant sur la touche Contrôle (Macintosh), puis sélectionnez
Effets de scénario > Transformation/Transition > Transformer.
3.
Dans la boîte de dialogue Transformer, entrez 60 dans la zone de texte
Durée pour indiquer que l’effet s’étale sur 60 images du scénario.
4.
Dans la zone de texte Rotation, entrez 1 et vérifiez que la zone de texte
Faire pivoter contient le chiffre 360.
5.
Cliquez sur Mettre à jour l’aperçu pour visualiser l’effet et cliquez sur
OK.
L’effet s’étend sur 60 images du scénario du clip.
6.
Cliquez sur Séquence 1 au-dessus du scénario pour quitter le mode
d’édition de symbole.
7.
Choisissez Contrôle > Tester l’animation pour visualiser l’animation.
Ajouter un effet au clip 129
Sommaire
Félicitations, vous connaissez désormais l’utilité des symboles et des
occurrences. En quelques minutes, vous avez accompli les tâches suivantes :
■
Créer un symbole graphique
■
Dupliquer et modifier une occurrence
■
Créer un symbole de clip
■
Modifier un symbole par l’ajout d’un effet
Pour en savoir plus sur Flash, choisissez une autre leçon de la série Tâches
de base.
130 Tâches de base : Créer des symboles et des occurrences
CHAPITRE 10
Tâches de base : Ajouter de l’animation
et des éléments de navigation aux
boutons
10
Un bouton est un symbole contenant des images spécifiques à différents
états du bouton, comme lorsque le pointeur de la souris de l’utilisateur
survole le bouton ou lorsque l’utilisateur clique sur le bouton. Lorsque
vous sélectionnez le comportement de bouton pour un symbole,
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 créent le
scénario des états du bouton. Vous pouvez ajouter des éléments de
navigation aux boutons en utilisant des comportements ou en rédigeant
des instructions ActionScript.
Ce didacticiel vous permettra d’apprendre à créer et à modifier les boutons
et même d’y ajouter de l’animation.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Créer un bouton à partir d’objets groupés . . . . . . . . . . . . . . . . . . . 133
Attribuer un nom à une occurrence de bouton . . . . . . . . . . . . . . . 133
Afficher la zone active en activant les boutons . . . . . . . . . . . . . . . 134
Modifier la zone active d’un bouton . . . . . . . . . . . . . . . . . . . . . . . . . 135
Aligner des boutons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Créer une animation pour un état de bouton . . . . . . . . . . . . . . . . . 137
Ajouter une action à un bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Ajouter un élément de navigation à un bouton . . . . . . . . . . . . . . . 139
Tester le fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Si vous ne connaissez pas les symboles et occurrences, avant de commencer
cette leçon, sélectionnez Aide > Comment > Bases de Flash > Créer des
symboles et des occurrences pour aborder cette leçon.
131
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Add Button Animation and Navigation, puis
double-cliquez sur buttons_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Add Button Animation and Navigation et double-cliquez
buttons_start.fla.
R E MA R Q UE
Le dossier Ajouter de l’animation et des éléments de navigation aux
boutons comprend les versions terminées des fichiers FLA du didacticiel,
pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
4.
Dans le menu contextuel d’affichage de la scène, dans la partie
supérieure droite du scénario, sélectionnez Afficher une image pour
afficher la scène et l’espace de travail.
5.
Cliquez dans l’espace de travail, loin des objets sur la scène de manière
à n’en sélectionner aucun.
132 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Créer un bouton à partir d’objets
groupés
Vous pouvez créer des boutons à partir de texte et de graphiques, y compris
des images bitmap et des objets groupés. Dans cette leçon, vous allez créer
un gros bouton à partir d’un logo et d’un texte.
1.
Dans le panneau Outils, cliquez sur l’outil Sélection. Sur la scène,
sélectionnez le texte groupé et le logo, puis sélectionnez Modification >
Convertir en symbole.
2.
Dans la boîte de dialogue Convertir en symbole, nommez le symbole
BTNLogo, puis sélectionnez Bouton comme comportement.
3.
Dans la grille d’alignement, vérifiez que le carré dans le coin supérieur
gauche est sélectionné comme point d’alignement, puis cliquez sur OK.
Le point d’alignement est le point à partir duquel le symbole est aligné
et tourné.
Attribuer un nom à une
occurrence de bouton
Il est recommandé de nommer les occurrences des symboles sur la scène.
ActionScript utilise le nom de l’occurrence pour identifier l’objet.
■
Avec le bouton créé toujours sélectionné, ouvrez l’inspecteur de
propriétés (Fenêtre > Propriétés). Dans le champ Nom de l’occurrence,
tapez logo_btn.
Attribuer un nom à une occurrence de bouton 133
Afficher la zone active en
activant les boutons
Une fois la fonction Activer les boutons simples sélectionnée, vous pouvez
afficher les aspects les moins complexes de vos boutons, comme la zone
active (la zone d’un bouton sur laquelle vous pouvez cliquer) et les couleurs
utilisées pour les états de bouton. Les effets plus complexes, tels que
l’animation, ne sont pas lus.
1.
Cliquez sur un espace vierge de l’espace de travail pour vous assurer de
ne sélectionner aucun objet.
2.
Sélectionnez Contrôle > Activer les boutons simples, puis déplacez le
pointeur de la souris pour survoler différentes zones du bouton créé.
Les seules zones du bouton sur lesquelles vous pouvez cliquer (telles
qu’indiquées lorsque le pointeur se transforme en main) sont la zone de
texte et le logo. L’espace blanc autour du texte et du logo ne peut pas
être sélectionné.
3.
Sélectionnez de nouveau Contrôle > Activer les boutons simples pour
désactiver la fonction afin de pouvoir modifier le bouton.
Vous redéfinirez ensuite la zone active afin que la zone du bouton couvre
l’ensemble de la zone groupée.
134 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Modifier la zone active d’un
bouton
Vous pouvez spécifier une zone active de taille différente de celle de la zone
active par défaut en ajoutant une image-clé à l’image Cliqué du symbole de
bouton, puis en traçant une forme définissant la zone active.
1.
Sur la scène, double-cliquez sur le bouton du logo créé pour afficher le
bouton Scénario. Le bouton Scénario contient les états suivants :
■
Haut
■
Survolé
■
Bas
■
Cliqué
2.
Double-cliquez sur le nom du Calque 1 du scénario et renommez-le Hit
Area.
3.
Sélectionnez l’image Cliqué (Image 4) du calque Hit Area du scénario
BTNLogo, puis appuyez sur la touche F6 pour ajouter une image-clé.
4.
Dans le panneau Outils, sélectionnez l’outil Rectangle. Les couleurs de
trait et de remplissage pour le rectangle importent peu. Sur la scène,
tracez un rectangle qui couvre, aussi exactement que possible, le logo et
le texte.
Le rectangle définit désormais la zone du bouton sur laquelle vous
pouvez cliquer.
5.
Cliquez sur Séquence 1, au-dessus du côté supérieur gauche de la scène,
pour quitter le mode d’édition de symbole du bouton.
6.
Sélectionnez Contrôle > Activer les boutons simples.
7.
Sur la scène, déplacez de nouveau le pointeur sur le texte.
La zone active prend la forme du rectangle tracé.
8.
Sélectionnez Contrôle > Activer les boutons simples pour désactiver
cette fonction.
Modifier la zone active d’un bouton 135
Aligner des boutons
Vous pouvez aligner des boutons sur des axes horizontaux et verticaux à
l’aide du panneau Aligner.
1.
Dans le scénario, cliquez sur le calque Content.
2.
Sélectionnez Insérer un calque sous le scénario.
3.
Double-cliquez sur le nom du calque, entrez Boutons animés et
appuyez sur la touche Entrée (Windows) ou Retour (Macintosh).
4.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), sélectionnez
Button 1 et faites-le glisser vers le bord inférieur droit de la scène. Un
positionnement exact n’est pas nécessaire.
5.
Dans le champ Nom de l’occurrence de l’inspecteur de propriétés,
attribuez le nom d’occurrence links_btn au bouton.
6.
Faites glisser les boutons 2 et 3 de la bibliothèque pour les placer à
gauche de Button 1. Respectez approximativement l’espacement illustré
ci-dessous :
7.
A l’aide de l’outil Sélection, tracez un cadre de sélection autour des trois
boutons.
8.
Ouvrez le panneau Aligner en sélectionnant Fenêtre > Aligner. Vérifiez
que Vers la scène n’est pas sélectionné car vous n’allez pas aligner les
boutons par rapport à la scène.
9.
Dans le panneau Aligner, cliquez sur Aligner les centres verticalement,
puis cliquez sur Répartir horizontalement par rapport au centre.
Les boutons sont alignés sur la scène.
10. Fermez
11.
le panneau Aligner.
Sur la scène, cliquez sur un espace vierge de l’espace de travail pour vous
assurer de ne sélectionner aucun objet et sélectionnez Button 2. Dans le
champ Nom de l’occurrence de l’inspecteur de propriétés, saisissez
contact_btn. Sélectionnez Button 3 et nommez-le sweepstakes_btn.
136 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Créer une animation pour un état
de bouton
Vous allez créer un clip dans l’état Dessus de Button 1, puis créer une
interpolation de forme dans le clip. L’interpolation de forme crée un effet
de changement de couleur, du gris au rouge.
1.
Sur la scène, double-cliquez sur Button 1 pour l’ouvrir en mode
d’édition de symbole.
2.
Dans le scénario de Button 1, masquez tous les calques à l’exception de
Color. Dans le calque Color, sélectionnez l’image-clé Dessus.
R EM A R QU E
Vous masquez les calques en cliquant sur le point sous la colonne
d’affichage en regard du nom du calque afin qu’une croix rouge
apparaisse.
3.
Sur la scène, sélectionnez la forme ovale noire pour Button 1. Appuyez
sur la touche F8 pour faire de l’ovale un symbole.
4.
Dans la boîte de dialogue Convertir en symbole, nommez le symbole
Button Animation. Sélectionnez Clip (et non Bouton) comme
comportement, puis cliquez sur OK.
5.
Sur la scène, double-cliquez sur le symbole Button Animation pour
passer en mode d’édition de symbole.
6.
Renommez le Calque 1 Color Change. Sélectionnez l’Image 15 et
appuyez sur F6 pour ajouter une image-clé.
7.
La tête de lecture se trouvant toujours sur l’image 15, sélectionnez la
forme du bouton sur la scène, puis, dans l’inspecteur de propriétés,
sélectionnez un ton de rouge éclatant dans le menu déroulant Couleur
de remplissage.
8.
Dans le scénario, cliquez sur une image comprise entre les images 1 et
15. Dans l’inspecteur de propriétés, choisissez Forme dans le menu
déroulant Interpolation.
Faites glisser la tête de lecture sur les images 1 à 15 pour visualiser
l’interpolation de couleur.
Créer une animation pour un état de bouton 137
Ajouter une action à un bouton
Lorsque l’utilisateur clique sur le bouton et que l’interpolation est lue, la
tête de lecture doit passer à la fin du scénario Button Animation, avant de
s’arrêter. Vous utiliserez ActionScript pour contrôler le mouvement de la
tête de lecture dans un scénario.
1.
Ajoutez un calque dans le scénario Button Animation et nommez-le
Actions.
2.
Sur le calque Actions, ajoutez une image-clé dans l’image 15 en
appuyant sur la touche F6.
3.
Ouvrez le panneau Actions (Fenêtre > Actions) et, si nécessaire,
agrandissez-le pour afficher la boîte à outils Actions et la fenêtre de
script.
4.
Avec l’image 15 du calque Actions sélectionnée, accédez à la catégorie
Fonctions globales > Contrôle du scénario de la boîte à outils Actions,
puis double-cliquez sur stop.
L’action stop vous permet de spécifier que la tête de lecture doit
s’arrêter lorsqu’elle atteint l’image 15.
Dans le scénario Button Animation, l’image 15 du calque Actions
contient maintenant un petit a, qui indique qu’une action lui est
associée.
5.
Cliquez sur Séquence 1, au-dessus de la scène, pour quitter le mode
d’édition de symbole et revenir au document principal.
6.
Cliquez sur le menu déroulant en haut à droite du panneau Actions,
puis sélectionnez Fermer le panneau.
7.
Sélectionnez Contrôle > Activer les boutons simples afin de pouvoir
tester le bouton animé.
8.
Sur la scène, déplacez le pointeur sur le bouton, puis cliquez dessus.
9.
Sélectionnez Contrôle > Activer les boutons simples pour désactiver
cette fonction.
138 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
Ajouter un élément de navigation
à un bouton
Grâce aux comportements, vous pouvez rapidement ajouter un élément de
navigation à un bouton sans nécessairement connaître ActionScript. Vous
allez ajouter un élément de navigation pour ouvrir une page Web lorsque
l’utilisateur clique sur un bouton.
1.
Sur la scène, sélectionnez l’occurrence de Button 1.
2.
Dans le panneau Comportements (Fenêtre > Comportements), cliquez
sur le bouton Ajout d’un comportement, puis sélectionnez Web >
Atteindre la page Web.
3.
Dans la boîte de dialogue Atteindre l’URL, sélectionnez _blank dans le
menu déroulant Ouvrir dans pour ouvrir l’URL dans une nouvelle
fenêtre de navigateur. Dans le champ URL, acceptez le paramètre par
défaut http://www.macromedia.com ou saisissez une autre URL.
Cliquez sur OK.
4.
Si vous le souhaitez, répétez les étapes précédentes, en sélectionnant
Button 2, puis Button 3, pour ajouter un élément de navigation à ces
boutons également.
5.
Cliquez sur le menu déroulant en haut à droite du panneau
Comportement, puis sélectionnez Fermer le panneau.
Ajouter un élément de navigation à un bouton 139
Tester le fichier SWF
Vous allez tester votre document pour afficher l’animation du bouton et
vérifier que la navigation fonctionne comme vous le souhaitez.
1.
Sauvegardez votre document et sélectionnez Contrôle > Tester
l’animation.
2.
Déplacez le pointeur de la souris sur l’occurrence de Button 1 pour
afficher l’animation de couleur créée.
3.
Cliquez sur le bouton pour visualiser si votre navigateur Web ouvre
l’URL spécifiée.
4.
Si vous avez ajouté un élément de navigation aux deux autres boutons,
testez-les également.
5.
Une fois la visualisation du fichier SWF terminée, fermez le fichier SWF
et les fenêtres du navigateur Web.
Sommaire
Félicitations, vous maîtrisez à présent les boutons. En quelques minutes,
vous avez appris à accomplir les tâches suivantes :
■
Créer un bouton à partir d’objets groupés
■
Attribuer un nom à une occurrence de bouton
■
Afficher la zone active d’un bouton
■
Modifier la zone active d’un bouton
■
Aligner des boutons
■
Créer une animation pour un état de bouton
■
Ajouter une action à un bouton
■
Ajouter un élément de navigation à un bouton
Pour en savoir plus sur Flash, choisissez une autre leçon.
140 Tâches de base : Ajouter de l’animation et des éléments de navigation aux boutons
CHAPITRE 11
Tâches de base : Créer une
présentation avec des écrans
(Flash Professionnel uniquement)
11
Flash Professionnel 8 propose une nouvelle méthode de création de
présentations, à l’aide de diapositives. Créer une présentation avec des
diapositives est un véritable jeu d’enfant : il suffit de placer les éléments sur
des diapositives, d’ajouter des diapositives imbriquées qui héritent des
éléments d’autres diapositives et d’utiliser les commandes intégrées pour
naviguer entre les diapositives au moment de l’exécution.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Ajouter du contenu à une diapositive de présentation . . . . . 145
Ajouter des comportements de navigation d’écran aux
boutons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Ajouter et nommer une diapositive. . . . . . . . . . . . . . . . . . . . . . 147
Sélectionner et déplacer des diapositives . . . . . . . . . . . . . . . 148
Ajouter du contenu à une nouvelle diapositive . . . . . . . . . . . 148
Ajouter des comportements de transition. . . . . . . . . . . . . . . . 149
141
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Basic Tasks\Presentation with Screens, puis double-cliquez
sur presentation_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Presentation with Screens et double-cliquez
presentation_start.fla.
R E MA R Q UE
Le dossier Présentation avec des écrans comprend les versions terminées
des fichiers FLA du didacticiel, pour votre référence.
Le document s’ouvre dans l’environnement auteur de Flash.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail.
142 Tâches de base : Créer une présentation avec des écrans (Flash Professionnel uniquement)
Afficher la hiérarchie des écrans
et leurs scénarios
Pour ajouter du contenu aux écrans, vous procédez en grande partie
comme lorsque vous ajoutez du contenu à la scène. Les écrans représentent
des clips imbriqués, basés sur une hiérarchie, des scénarios imbriqués
et l’héritage. Tous les écrans sont présents dans la première image du
scénario racine, qui est caché, et tout écran contient des chargements sur la
première image. Pour plus d’informations sur les écrans, reportez-vous à la
section Utilisation des écrans (Flash Professionnel uniquement) dans le guide
Utilisation de Flash.
1.
Si le panneau Contour de l’écran n’apparaît pas, sélectionnez Fenêtre >
Autres panneaux > Ecrans.
Le panneau Contour de l’écran affiche une vignette de chaque
diapositive de la présentation, ainsi que la hiérarchie de la présentation.
Lorsque vous sélectionnez un écran dans le panneau Contour de
l’écran, l’écran apparaît dans la fenêtre Document. Lorsque vous
sélectionnez plusieurs écrans, le contenu du premier écran sélectionné
apparaît dans la fenêtre Document.
Afficher la hiérarchie des écrans et leurs scénarios 143
2.
Dans le panneau Contour de l’écran, sélectionnez l’écran de la
présentation.
Tous les documents de diapositives contiennent un écran de
présentation qui se trouve au niveau supérieur de la hiérarchie d’écrans.
Considérons la diapositive de la présentation comme une diapositive
maître : le contenu de la diapositive de présentation peut apparaître sur
toutes les diapositives de votre document.
R E MA R Q UE
Vous ne pouvez pas supprimer ou déplacer l’écran de présentation.
Les quatre diapositives apparaissant en retrait en-dessous de la
diapositive de présentation dans le panneau représentent des écrans
imbriqués ou enfant, dont la diapositive de présentation est le parent.
3.
Ouvrez le scénario s’il n’est pas déjà ouvert (Fenêtre > Scénario).
Sélectionnez une autre diapositive dans le panneau Contour de l’écran
pour afficher le scénario de cet écran.
Chaque écran possède son propre scénario, mais le scénario principal
d’un document avec des écrans n’apparaît jamais.
Afficher les propriétés de l’écran
Vous pouvez afficher différentes propriétés d’une diapositive en fonction de
l’endroit sélectionné sur la diapositive.
1.
Dans le panneau Contour de l’écran, sélectionnez la vignette de la
présentation.
L’inspecteur de propriétés vous permet de modifier le nom de
l’occurrence qui est également le nom de l’écran tel qu’il apparaît dans
le panneau Contour de l’écran.
2.
Sélectionnez la diapositive de présentation, et non la vignette.
L’inspecteur de propriétés affiche alors les mêmes commandes que
celles que vous utilisez régulièrement pour manipuler la scène et les
propriétés de document.
144 Tâches de base : Créer une présentation avec des écrans (Flash Professionnel uniquement)
Ajouter du contenu à une
diapositive de présentation
Vous allez ajouter des boutons de navigation à la diapositive de
présentation afin que les boutons apparaissent sur chaque diapositive de la
présentation.
1.
Dans le panneau Contour de l’écran, sélectionnez la vignette de la
diapositive de présentation. Dans le scénario, sélectionnez l’image 1 du
calque Navigation.
2.
Dans le panneau Bibliothèque, faites glisser le symbole NextBtn vers
l’écran, en le plaçant dans la bande noire au bas de l’écran.
3.
Dans l’inspecteur de propriétés, avec le bouton toujours sélectionné,
saisissez 280 dans le champ X et 165 dans le champ Y pour placer le
bouton.
R EM A R QU E
Les coordonnées saisies sont relatives au point d’alignement central par
défaut de la diapositive. Pour plus d’informations sur le point d’alignement
dans les écrans, consultez « Spécification de la classe ActionScript et du
point d’alignement d’un écran (Flash Professionnel uniquement) » dans le
guide Utilisation de Flash.
4.
Saisissez forwardBtn dans le champ Nom de l’occurrence.
5.
Faites glisser le symbole PrevBtn vers la diapositive, puis utilisez
l’inspecteur de propriétés pour saisir 245 dans le champ X et 165 dans
le champ Y.
6.
Saisissez backBtn dans le champ Nom de l’occurrence.
7.
Dans le panneau Contour de l’écran, sélectionnez chaque diapositive
imbriquée pour vérifier que les boutons apparaissent désormais sur
toutes les diapositives.
R EM A R QU E
Le contenu d’un écran parent apparaît légèrement grisé lorsque vous le
visualisez sur un écran imbriqué.
Ajouter du contenu à une diapositive de présentation 145
Ajouter des comportements de
navigation d’écran aux boutons
Lorsque vous ouvrez un nouveau diaporama Flash, le document inclut déjà
une fonctionnalité permettant à l’utilisateur de naviguer entre les
diapositives à l’aide des touches fléchées du clavier. Vous allez ajouter des
comportements de navigation aux boutons, pour offrir aux utilisateurs un
autre moyen de naviguer entre les diapositives.
R E MA R Q UE
Par défaut, les touches fléchées du clavier vous permettent de naviguer
entre les écrans de même niveau, et non entre les écrans imbriqués.
1.
Sur la diapositive de présentation, sélectionnez l’occurrence forwardBtn.
Dans le panneau Comportements (Fenêtre > Comportements), cliquez
sur le bouton Ajouter (+), puis sélectionnez Ecran > Atteindre la
diapositive suivante dans le menu.
2.
Sur la diapositive de présentation, sélectionnez l’occurrence backBtn.
Dans le panneau Comportements (Fenêtre > Comportements), cliquez
sur le bouton Ajouter (+), puis sélectionnez Ecran > Atteindre la
diapositive précédente dans le menu.
3.
Sélectionnez Contrôle > Tester l’animation, puis cliquez sur les boutons
de la fenêtre du fichier SWF qui s’affiche. Assurez-vous ainsi que les
boutons fonctionnent comme vous le souhaitez. Une fois le test de votre
document terminé, fermez la fenêtre du fichier SWF.
146 Tâches de base : Créer une présentation avec des écrans (Flash Professionnel uniquement)
Ajouter et nommer une
diapositive
Vous pouvez facilement ajouter des diapositives à votre présentation à l’aide
du menu contextuel du panneau Contour de l’écran.
1.
Dans le panneau Contour de l’écran, sélectionnez la vignette de titre.
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur
la touche Contrôle (Macintosh), puis sélectionnez Insertion écran dans
le menu contextuel.
Un nouvel écran apparaît dans le panneau Contour de l’écran, au
même niveau que la diapositive de titre. La nouvelle diapositive hérite
automatiquement du contenu de la diapositive de présentation.
2.
Double-cliquez sur le nom de la nouvelle diapositive dans le panneau
Contour de l’écran, et nommez-la features.
Ajouter et nommer une diapositive 147
Sélectionner et déplacer des
diapositives
Vous pouvez copier, couper, coller et faire glisser des écrans dans le panneau
Contour de l’écran pour modifier leur ordre dans la présentation. Vous
allez sélectionner trois écrans, les couper, puis les coller afin de les
imbriquer en tant qu’enfants de la diapositive features.
1.
Dans le panneau Contour de l’écran, sélectionnez la diapositive
performance. Appuyez sur la touche Maj et cliquez sur les diapositives
« safety »et « handling » pour les ajouter à la sélection.
2.
Cliquez avec le bouton droit de la souris (Windows) ou en appuyant sur
la touche Contrôle (Macintosh) sur les diapositives sélectionnées, puis
sélectionnez Couper dans le menu contextuel.
3.
Dans le panneau Contour de l’écran, cliquez avec le bouton droit de la
souris (Windows) ou en appuyant sur la touche Contrôle (Macintosh)
sur la diapositive features, puis sélectionnez Coller l’écran imbriqué dans
le menu contextuel.
Les trois diapositives apparaissent désormais comme les enfants de la
diapositive features.
Ajouter du contenu à une
nouvelle diapositive
La diapositive features, en tant qu’enfant de la diapositive de présentation,
hérite des propriétés de cette diapositive. En outre, étant donné que la
diapositive features est un parent des trois diapositives que vous avez
copiées et collées, le contenu que vous ajoutez à cette diapositive apparaît
sur les trois diapositives enfant.
1.
Dans le panneau Contour de l’écran, sélectionnez la vignette features.
Dans le panneau Bibliothèque, faites glisser le symbole Features
Content à un quelconque endroit de la fenêtre Document.
2.
Dans l’inspecteur de propriétés, attribuez à l’occurrence Features
Content le nom d’occurrence features_mc.
3.
Dans l’inspecteur de propriétés, saisissez -275 dans le champ X et -130
dans le champ Y pour placer l’occurrence.
148 Tâches de base : Créer une présentation avec des écrans (Flash Professionnel uniquement)
Ajouter des comportements de
transition
Bien que votre présentation soit quasiment terminée, vous allez ajouter des
comportements de transition pour la rendre plus intéressante. Plus
particulièrement, vous allez ajouter des comportements pour effectuer un
fondu et donner l’impression que le contenu s’envole de la fenêtre
Document.
1.
Dans le panneau Contour de l’écran, sélectionnez la diapositive features.
Dans le panneau Comportements, cliquez sur Ajouter (+), puis
sélectionnez Ecran > Transition dans le menu.
2.
Dans la boîte de dialogue Transitions, sélectionnez Fondu dans la liste
de transitions et affichez l’aperçu dans le côté inférieur gauche de la boîte
de dialogue. Vérifiez que 2 secondes est sélectionné comme durée et que
Zoom avant est sélectionné comme direction, puis cliquez sur OK.
3.
Dans le panneau Comportements, cliquez sur Reveal dans la colonne
Evénement pour ouvrir le menu déroulant et sélectionner revealChild.
L’option revealChild signifie que le comportement révèlera le nouvel
écran enfant.
4.
Pour ajouter le comportement Vol, vérifiez que la diapositive features
est toujours sélectionnée. Dans le panneau Comportements, cliquez sur
Ajouter (+), puis sélectionnez Ecran > Transition dans le menu.
5.
Dans la boîte de dialogue Transitions, sélectionnez Vol dans la liste des
transitions, puis sélectionnez En sortie comme direction.
6.
Dans le champ Durée, saisissez .5 comme durée pour terminer la
transition.
7.
Dans le menu déroulant Emplacement de départ, sélectionnez Gauche
Centre et visualisez l’aperçu de la transition, puis cliquez sur OK.
Dans le panneau Comportements, revealChild apparaît désormais deux
fois. Avec le comportement Vol, vous souhaitez masquer l’écran enfant.
Ajouter des comportements de transition 149
8.
Dans le panneau Comportements, cliquez sur le deuxième événement
de la liste, que vous venez d’ajouter. Dans le menu déroulant, cliquez sur
hideChild.
Tester votre présentation
Votre présentation est désormais terminée et prête à être testée.
1.
Choisissez Contrôle > Tester l’animation.
2.
Utilisez les boutons de navigation Forward et Backward pour parcourir
la présentation et afficher les transitions.
Sommaire
Félicitations, vous savez désormais créer un diaporama avec des écrans. En
quelques minutes vous avez appris à accomplir les tâches suivantes :
■
Ajouter du contenu à une diapositive de présentation
■
Ajouter des éléments de navigation aux boutons
■
Ajouter et nommer une diapositive
■
Sélectionner et déplacer des diapositives
■
Ajouter du contenu à une nouvelle diapositive
■
Ajouter des comportements de transition à une diapositive
Pour en savoir plus sur l’utilisation des écrans, consultez « Utilisation des
écrans (Flash Professionnel uniquement) » dans le guide Utilisation de
Flash.
150 Tâches de base : Créer une présentation avec des écrans (Flash Professionnel uniquement)
CHAPITRE 12
Création de graphiques :
Dessiner dans Flash
12
Les objets que vous tracez dans Flash sont des dessins vectoriels, une
représentation mathématique des lignes, des courbes, de la couleur et de la
position de tels éléments. Les illustrations vectorielles ne dépendent pas de
la résolution utilisée, ce qui vous permet de les redimensionner et de les
afficher à n’importe quelle résolution sans pour autant dégrader leur
qualité. En outre, les graphiques vectoriels sont plus rapides à télécharger
que des images bitmap équivalentes. Ce didacticiel vous montre comment
créer des illustrations vectorielles d’un boulon et d’un logo.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Dessiner un polygone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Faire pivoter la forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Utiliser la fonction Découpe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Transformer la forme du dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Copier des traits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Utiliser l’outil Ligne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Sélectionner et ajouter une autre couleur de remplissage . . . . . 157
Grouper la forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Créer un logo à l’aide de l’outil Plume . . . . . . . . . . . . . . . . . . . . . . . 158
151
Configurer l’espace de travail
Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette
leçon et configurer votre espace de travail afin de suivre vos leçons dans un
cadre optimal.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Creating Graphics\Draw in Flash, puis double-cliquez sur
drawing_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic
Tasks/Creating Graphics/Draw in Flash et double-cliquez
drawing_start.fla.
R E MA R Q UE
Le dossier Dessiner dans Flash comprend les versions terminées des
fichiers FLA du didacticiel, pour votre référence.
Flash s’ouvre dans l’environnement auteur.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail.
152 Création de graphiques : Dessiner dans Flash
Sélectionner un outil Forme
Les outils Forme permettent de créer facilement des figures telles que des
ovales, des rectangles, des polygones et des étoiles. Pour créer un polygone,
utilisez l’outil Polygone.
1.
Dans le scénario, sélectionnez le calque Content.
2.
Dans le panneau Outils, sélectionnez l’outil Polygone. Vous devrez
peut-être cliquer dans le coin inférieur droit de l’outil Rectangle pour
afficher un menu contenant l’outil Polygone.
3.
Cliquez n’importe où dans l’espace de travail gris à côté de la scène pour
afficher les propriétés de la forme que vous allez créer. Dans l’inspecteur
des propriétés (Fenêtre > Propriétés), assurez-vous que la couleur de trait
sélectionnée 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 contrôle de couleur de remplissage et sélectionnez le bleu
correspondant à la valeur hexadécimale #0000FF.
La forme prend cette couleur, à l’intérieur du trait.
Sélectionner les options de
création d’un polygone
L’outil Polygone permet de définir le nombre de côtés du polygone ; vous
pouvez également l’utiliser pour créer une étoile. Spécifiez un polygone à
six côtés.
1.
Dans l’inspecteur des propriétés, l’outil Polygone étant toujours
sélectionné, cliquez sur Options.
2.
Dans la boîte de dialogue Paramètres des outils, assurez-vous que
l’option Polygone est sélectionnée dans le menu déroulant Style et
entrez 6 dans la zone de texte Nombre de côtés. Cliquez sur OK.
Sélectionner les options de création d’un polygone 153
Dessiner un polygone
L’activation de la touche Maj contraint la forme à suivre une ligne verticale
ou horizontale.
■
Appuyez sur la touche Maj et faites glisser la souris sur le côté gauche de
la scène (en vous éloignant des chiffres du calque Guides) pour dessiner
un hexagone, comme dans l’illustration suivante :
Faire pivoter la forme
Après avoir créé la forme, vous pouvez la faire pivoter d’un nombre de
degrés précis en utilisant le panneau Transformer.
1.
Dans le panneau Outils, cliquez sur l’outil de sélection. Sur la scène,
double-cliquez dans l’hexagone pour sélectionner à la fois le trait et le
remplissage.
Si vous cliquez une fois dans la forme, vous ne sélectionnez que le
remplissage.
2.
Sélectionnez Fenêtre > Transformer. Dans la boîte de dialogue
Transformer, vérifiez que l’option Pivoter est sélectionnée et entrez -15
dans la zone de texte Pivoter pour faire tourner la forme de 15º vers la
droite. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
154 Création de graphiques : Dessiner dans Flash
Utiliser la fonction Découpe
Lorsque vous dessinez une forme sur une forme existante et que les deux
formes sont dégroupées, la forme située au-dessus « découpe » la forme
située en dessous. Créez un cercle dans l’hexagone, puis découpez-le.
1.
Choisissez Affichage > Accrochage et sélectionnez Accrocher aux objets
si ce n’est pas déjà fait.
2.
Dans le panneau Outils, cliquez sur l’outil Ovale. Tout en appuyant sur
la touche Maj pour contraindre la forme, dessinez un cercle dans
l’hexagone (imaginez que l’hexagone est une horloge : commencez à 10h
et faites glisser la souris jusqu’à 4h), comme dans l’illustration suivante.
R EM A R QU E
Si vous n’avez pas tracé le cercle correctement, appuyez sur Ctrl+Z
(Windows) ou Commande+Z (Macintosh) pour l’effacer.
3.
Dans le panneau Outils, cliquez sur l’outil Sélection. Sur la scène,
cliquez dans le cercle et appuyez sur Retour arrière ou Suppression.
Utiliser la fonction Découpe 155
Transformer la forme du dessin
L’outil Transformation libre permet de redimensionner, faire pivoter,
compresser, étirer ou incliner les lignes et les formes. Utilisez l’outil
Transformation libre pour compresser le dessin.
1.
Dans le panneau Outils, sélectionnez l’outil Transformation libre.
Double-cliquez sur l’hexagone dans la scène pour sélectionner à la fois
le trait et le remplissage.
2.
Faites glisser la poignée située au milieu de la bordure supérieure du
cadre de l’outil Transformation libre pour donner à l’hexagone la forme
suivante :
Copier des traits
Vous pouvez sélectionner des traits et les copier. Entraînez-vous à créer la
face inférieure du boulon.
1.
A l’aide de l’outil Sélection, cliquez n’importe où dans la scène ou
l’espace de travail pour désélectionner la forme.
2.
Maintenez la touche Maj enfoncée et cliquez sur les trois lignes
inférieures de l’hexagone sur la scène afin de les sélectionner, comme
illustré ci-dessous :
3.
Appuyez sur Maj+Alt et déplacez légèrement la souris vers le bas pour
faire glisser une copie des trois lignes, comme illustré ci-dessous :
156 Création de graphiques : Dessiner dans Flash
Utiliser l’outil Ligne
L’outil Ligne permet de tracer des lignes dans n’importe quelle direction.
■
Dans le panneau Outils, sélectionnez l’outil Ligne. Sur la scène,
dessinez quatre lignes verticales reliant l’hexagone aux lignes que vous
avez copiées plus bas, comme illustré ci-dessous :
Sélectionner et ajouter une autre
couleur de remplissage
Vous pouvez utiliser l’outil Pot de peinture pour modifier une couleur
existante et colorer les zones vides délimitées par des lignes. Utilisez l’outil
Pot de peinture pour ajouter une couleur de remplissage aux zones vides de
votre dessin.
1.
Dans le panneau Outils, sélectionnez l’outil Pot de peinture. Dans la
zone Couleurs, cliquez sur Couleur de remplissage et sélectionnez le
bleu correspondant à la valeur hexadécimale #3366FF.
2.
Sur la scène, cliquez à l’intérieur des lignes pour ajouter la couleur
sélectionnée aux zones vides, comme dans l’illustration suivante :
Sélectionner et ajouter une autre couleur de remplissage 157
Grouper la forme
Vous pouvez manipuler séparément le trait et le remplissage d’une forme,
comme vous l’avez fait jusqu’ici, ou les grouper pour manipuler la forme
comme une image à part entière. C’est ce que vous allez faire maintenant.
1.
A l’aide de l’outil Sélection, entourez la forme pour sélectionner à la fois
le trait et le remplissage. Sélectionnez Modification > Grouper.
2.
Cliquez sur la zone de remplissage et déplacez la forme sur le côté gauche
de la scène pour la placer où vous voulez.
Créer un logo à l’aide de l’outil
Plume
L’outil Plume permet de dessiner avec précision des segments de lignes
droites et courbes. Vous devez cliquer pour créer les points des segments de
lignes droites ou cliquer et faire glisser la souris pour créer les points des
segments de lignes courbes. Pour ajuster les segments, déplacez les points
de la ligne. Vous allez utiliser l’outil Plume pour créer le logo.
1.
Dans le panneau Outils, sélectionnez l’outil Plume.
2.
Cliquez sur le point situé à côté du chiffre 1, puis sur le point situé à côté
du chiffre 2 pour créer un segment de ligne droite.
3.
Cliquez sur le point situé à côté du chiffre 3, puis sur le point situé à côté
du chiffre 4 (comme si vous faisiez un dessin par numéros). Vous créez
ainsi les segments de ligne droite du logo.
4.
Pour terminer le tracé, placez l’outil Plume sur le premier point
d’ancrage (le point numéro 1). Un petit cercle apparaît en regard de la
plume lorsqu’elle est correctement positionnée. Cliquez pour fermer le
tracé. Lorsque le tracé est fermé, la couleur de remplissage sélectionnée
précédemment apparaît.
Par défaut, les points de courbe sélectionnés sont représentés par des
cercles vides, alors que les points d’angle sélectionnés sont représentés
par des carrés vides.
158 Création de graphiques : Dessiner dans Flash
5.
A l’aide de l’outil Sélection, déplacez le pointeur sur le logo que vous
venez de créer.
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 :
Sommaire
Félicitations, vous savez désormais utiliser plusieurs outils de dessin de
Flash. En quelques minutes vous avez appris à accomplir les tâches
suivantes :
■
Créer un polygone
■
Faire pivoter une forme
■
Découper une forme dans une autre forme
■
Transformer une illustration
■
Copier des traits
■
Utiliser l’outil Ligne
■
Sélectionner et ajouter une couleur de remplissage
■
Grouper une forme
■
Créer un logo à l’aide de l’outil Plume
Pour en savoir plus sur la création d’illustrations dans Flash, reportez-vous
au Chapitre 5, Dessin, du guide Utilisation de Flash.
Sommaire 159
160 Création de graphiques : Dessiner dans Flash
CHAPITRE 13
Création de graphiques : Créer
une animation dans un scénario
13
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 offrent des
outils puissants de création d’animations. Dans Flash, la plupart des
animations simples sont réalisées à l’aide d’un processus appelé
interpolation. L’interpolation consiste à remplir les images situées entre
deux images-clés pour transformer l’objet graphique affiché dans la
première image-clé en l’objet graphique affiché dans la deuxième image-clé.
Vous pouvez créer deux types d’interpolation dans Flash : une interpolation
de mouvement et une interpolation de forme. La principale différence entre
l’interpolation de mouvement et l’interpolation de forme réside dans le fait
que l’interpolation de mouvement s’applique à des objets groupés ou à des
symboles, tandis que l’interpolation de forme s’applique à des objets non
groupés et qui ne sont pas des symboles.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Créer une interpolation de mouvement . . . . . . . . . . . . . . . . . . . . . . 163
Créer une interpolation de forme . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Copier des images-clés dans une animation . . . . . . . . . . . . . . . . . 166
Modifier la vitesse de l’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
161
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Creating Graphics\Timeline Animation, puis double-cliquez
sur animation_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/
Creating Graphics/Timeline Animation et double-cliquez
animation_start.fla.
R E MA R Q UE
Le dossier Timeline Animation comprend les versions terminées des
fichiers de leçon FLA, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de modifier votre espace de travail pour les leçons.
4.
Dans le menu contextuel d’affichage de la scène, dans la partie
supérieure droite du scénario, sélectionnez Afficher une image pour
afficher la scène et l’espace de travail.
5.
Le cas échéant, faites glisser la limite inférieure du scénario (Fenêtre >
Scénario) vers le bas pour élargir la fenêtre.
Vous pouvez également utiliser la barre de défilement pour passer d’un
calque à l’autre.
162 Création de graphiques : Créer une animation dans un scénario
Créer une interpolation de
mouvement
Pour créer une interpolation de mouvement, vous devez définir les
propriétés d’une occurrence, d’un objet groupé ou d’un texte dans l’imageclé de début, puis modifier les propriétés de l’objet dans une image-clé
ultérieure. Flash crée l’animation dans les images situées entre ces deux
images-clés.
Vous allez créer une interpolation de mouvement en prenant une
occurrence du symbole de pneu et en le faisant rebondir.
1.
Dans le scénario (Fenêtre > Scénario), double-cliquez sur le titre Calque
1 et renommez-le AnimationPneu. Appuyez ensuite sur Entrée
(Windows) ou Retour (Macintosh) pour renommer le calque.
2.
Sélectionnez le calque AnimationPneu et faites glisser le clip Pneu de la
fenêtre Bibliothèque (Fenêtre > Bibliothèque) vers la scène, en le plaçant
au-dessus de l’ombre du pneu.
3.
Utilisez l’outil Sélection pour repositionner le pneu si nécessaire.
4.
Sélectionnez l’outil Sélection dans le calque AnimationPneu et
sélectionnez l’Image 30. Appuyez sur la touche F6 pour insérer une
image-clé.
5.
Sélectionnez l’Image 15 et appuyez sur F6 pour ajouter une autre imageclé.
Créer une interpolation de mouvement 163
6.
Laissez la tête de lecture sur l’Image 15, maintenez la touche Maj
enfoncée pour forcer un mouvement linéaire et faites glisser le pneu vers
le haut.
7.
Dans le calque AnimationPneu, sélectionnez une image comprise entre
les images 2 et 14. Dans le menu Interpolation de l’inspecteur des
propriétés, sélectionnez Mouvement.
Une flèche apparaît dans le scénario, entre les deux images-clés.
8.
Sélectionnez une image comprise entre les images 16 et 29. Dans le
menu Interpolation de l’inspecteur des propriétés, sélectionnez à
nouveau l’option Mouvement.
9.
Choisissez Fichier > Enregistrer pour enregistrer les modifications.
Créer une interpolation de forme
Pour créer une interpolation de forme, vous devez spécifier les attributs
d’une forme dans une image-clé, puis modifier la forme ou en dessiner une
autre dans une image-clé ultérieure. Comme dans l’interpolation de
mouvement, Flash crée l’animation dans les images situées entre les deux
images-clés.
Vous allez maintenant créer une interpolation pour que l’ombre du pneu
bouge et disparaisse au fil de ses propres rebonds.
1.
Cliquez sur le calque ShadowAnim (animationOmbre) pour le
sélectionner.
2.
Sélectionnez l’Image 30 et appuyez sur F6 pour insérer une image-clé ;
sélectionnez ensuite l’Image 15 et appuyez sur F6 pour insérer une autre
image-clé.
164 Création de graphiques : Créer une animation dans un scénario
3.
Placez la tête de lecture sur l’Image 15 et cliquez sur l’outil Sélection.
Faites glisser l’ensemble de l’ombre légèrement vers le haut à droite.
4.
L’Image 15 étant toujours sélectionnée, sélectionnez l’outil Pipette dans
le panneau Outils et cliquez sur l’objet Ombre.
5.
Si le mélangeur n’est pas déjà ouvert, sélectionnez Fenêtre > Mélangeur
pour l’ouvrir, puis faites passer la valeur alpha de 25 % à 10 %.
6.
Cliquez sur le menu déroulant en haut à droite du mélangeur, puis
sélectionnez Fermer le panneau.
7.
Sélectionnez une image comprise entre les images 2 et 14 du calque
ShadowAnim. Dans l’inspecteur des propriétés, sélectionnez Forme
dans le menu déroulant Interpolation.
8.
Dans le calque ShadowAnim, sélectionnez une image comprise entre les
images 16 et 29. Choisissez de nouveau Forme dans le menu
Interpolation de l’inspecteur des propriétés.
Créer une interpolation de forme 165
Copier des images-clés dans une
animation
Pour que les rebonds du pneu paraissent réalistes, celui-ci doit s’aplatir
légèrement à chaque fois. Vous pouvez produire cet effet en transformant la
forme du pneu dans l’Image 1 de l’animation et en copiant cette image
dans l’Image 30.
1.
A l’aide de l’outil Sélection, sélectionnez l’Image 1 du calque
AnimationPneu. Appuyez ensuite sur F6 pour ajouter une image-clé.
Une image-clé est ajoutée et la tête de lecture se positionne sur
l’Image 2.
2.
Sélectionnez à nouveau l’Image 1 du calque AnimationPneu.
3.
Dans le panneau Outils, sélectionnez l’outil Transformation libre.
Le pneu est sélectionné et entouré de poignées de transformation.
4.
Sélectionnez le point de transformation central (le petit cercle situé près
du centre du clip) et faites-le glisser vers le bas du pneu.
Le point central s’accroche à la poignée de transformation située au
milieu de la bordure inférieure.
5.
Sur la scène, faites glisser vers le bas la poignée de transformation située
au milieu de la bordure supérieure pour aplatir légèrement la forme du
pneu.
Si nécessaire, faites glisser le pneu pour l’aligner sur l’ombre. Pour voir
son positionnement, faites glisser la tête de lecture sur les images 1 et 2.
6.
Enregistrez votre fichier.
R E MA R Q U E
Enregistrez toujours votre document avant de manipuler une interpolation,
notamment la copie, la suppression et le collage d’images. En cas
d’erreur, vous pouvez rétablir le document enregistré.
166 Création de graphiques : Créer une animation dans un scénario
7.
Cliquez sur l’Image 1 du calque AnimationPneu avec le bouton droit de
la souris (Windows) ou en appuyant sur la touche Contrôle
(Macintosh), puis choisissez Copier les images dans le menu contextuel.
8.
Sélectionnez l’Image 29 du calque AnimationPneu et appuyez sur F6
pour insérer une image-clé.
9.
Dans l’Image 30 du calque AnimationPneu, cliquez avec le bouton droit
de la souris (Windows) ou en appuyant sur la touche Contrôle
(Macintosh) et choisissez Coller les images dans le menu contextuel.
10. Choisissez
11.
Contrôle > Tester l’animation pour visualiser l’animation.
Fermez la fenêtre du fichier SWF pour revenir dans l’environnement
auteur.
Modifier la vitesse de l’animation
En testant l’animation, vous aurez peut-être remarqué que le pneu rebondit
plutôt lentement. Vous pouvez modifier la vitesse de l’animation en
changeant le nombre d’images affichées par seconde et en définissant des
valeurs d’accélération positives et négatives, lesquelles déterminent le taux
d’accélération et de décélération.
Modifier le nombre d’images par seconde
La cadence, mesurée en images par seconde (ips), représente la vitesse à
laquelle l’animation est lue. Par défaut, les animations Flash sont lues à une
cadence de 12 ips. C’est la cadence idéale pour les animations web.
Cependant, il peut parfois s’avérer nécessaire de modifier la cadence. Vous
allez définir une cadence de 36 images par seconde, pour faire rebondir le
pneu plus rapidement.
1.
Cliquez n’importe où sur la scène, loin des objets.
2.
Entrez 36 dans la zone de texte Cadence de l’inspecteur des propriétés.
La cadence s’applique à l’ensemble du document Flash, pas seulement à
une animation du document.
Modifier la vitesse de l’animation 167
Modifier l’accélération et la décélération
Par défaut, les images interpolées sont lues à une vitesse constante. L’option
d’accélération permet de créer un effet plus naturel d’accélération ou de
décélération. Entrez une valeur positive pour commencer l’interpolation
rapidement et ralentir vers la fin de l’animation. Entrez une valeur négative
pour commencer l’interpolation lentement et l’accélérer vers la fin de
l’animation. Vous allez maintenant ajouter des valeurs d’accélération
positives et négatives à votre animation.
1.
Dans le calque AnimationPneu, sélectionnez une image comprise entre
les images 2 et 14. Ensuite, entrez 100 dans la zone de texte Accélération
de l’inspecteur des propriétés. Appuyez sur Entrée (Windows) ou sur
Retour (Macintosh).
2.
Dans le même calque, sélectionnez une image comprise entre les images
16 et 29. Ensuite, entrez -100 dans la zone de texte Accélération.
Appuyez sur Entrée ou Retour.
3.
Dans le calque ShadowAnim, sélectionnez une image comprise entre les
images 2 et 14. Ensuite, entrez 100 dans la zone de texte Accélération.
Appuyez sur Entrée ou Retour.
4.
Dans le même calque, sélectionnez une image comprise entre les images
16 et 29. Ensuite, entrez -100 dans la zone de texte Accélération.
Appuyez sur Entrée ou Retour.
Tester le fichier SWF
Vous allez tester le document pour visualiser l’animation et vérifier qu’elle
fonctionne comme prévu.
1.
Sauvegardez votre document et sélectionnez Contrôle > Tester
l’animation.
2.
Une fois que vous en avez terminé, fermez la fenêtre du fichier SWF.
168 Création de graphiques : Créer une animation dans un scénario
Sommaire
Félicitations, vous savez désormais animer des objets dans Flash. En
quelques minutes vous avez appris à accomplir les tâches suivantes :
■
Créer une animation avec l’interpolation de mouvement
■
Créer une animation avec l’interpolation de forme
■
Copier des images-clés dans une animation
■
Modifier la vitesse d’une animation
Vous pouvez également utiliser des effets de scénario pour ajouter
rapidement des effets d’animation à du texte, des objets graphiques, des
images et des symboles. Pour plus d’informations, reportez-vous au
Chapitre10, Création de mouvement, dans le guide Utilisation de Flash.
Pour en savoir plus sur Flash, choisissez une autre leçon.
Sommaire 169
170 Création de graphiques : Créer une animation dans un scénario
CHAPITRE 14
Création de graphiques : Créer des
animations avec accélération
(Flash Professionnel uniquement)
14
Ce didacticiel vous guide dans l’utilisation des outils d’interpolation dans
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8. Une
interpolation représente le processus d’animation d’un graphique au cours
duquel vous définissez des valeurs de début et de fin pour ses propriétés,
Flash calculant ensuite les valeurs intermédiaires. L’origine du terme
interpolation (inter) se retrouve dans « intermédiaire ».
Un exemple simple d’interpolation consisterait à placer un graphique dans
la partie supérieure de la scène, d’ajouter ensuite plusieurs images au
scénario et de déplacer le graphique dans la partie inférieure de la scène
dans la dernière image. Puisque Flash remplit les valeurs de position des
images intermédiaires, vous pouvez créer facilement une animation de
graphique fluide, partant de la partie supérieure de la scène jusqu’à la partie
inférieure.
Flash Professionnel vous permet également de contrôler avec précision la
façon de calculer des valeurs de propriété interpolées afin de pouvoir créer
facilement des animations plus complexes. A l’aide de la fenêtre
Accélération/Décélération personnalisée, vous pouvez déterminer la vitesse
de modification des propriétés au début, au milieu et à la fin de vos
animations. Utilisez cette fenêtre intelligemment pour obtenir des résultats
visuels convaincants.
Ce didacticiel vous guidera à travers la procédure de création d’une
animation en interpolant différentes propriétés d’un graphique à l’aide de
diverses commandes d’interpolation dans l’environnement de
programmation de Flash.
Vous allez tout d’abord vous familiariser avec l’animation finale, puis vous
ouvrirez un document Flash de démarrage avant de publier le document
pour le web. Le didacticiel dure environ 20 minutes.
171
Avant de suivre ce didacticiel, vous devriez lire le Chapitre 2, Bases de Flash
dans le guide Bien démarrer avec Flash.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
Ouverture du document de démarrage . . . . . . . . . . . . . . . . . . 175
Créer une interpolation de mouvement . . . . . . . . . . . . . . . . . . 175
Utiliser des contrôles d’accélération . . . . . . . . . . . . . . . . . . . . 178
Créer une interpolation de mouvement avec un paramètre
alpha. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Le déroulement du didacticiel sur l’interpolation comprend les tâches
suivantes :
■
Etude du fichier FLA final, page 173 permet d’examiner le fichier Flash
final. Vous vous familiariserez ainsi avec la construction de l’exemple
d’animation et les éléments que ce didacticiel vous permettra de créer.
■
Ouverture du document de démarrage, page 175 permet de commencer
le didacticiel avec un fichier FLA contenant déjà quelques graphiques.
Vous appliquerez des effets animés sur ces graphiques.
■
Créer une interpolation de mouvement, page 175 présente les opérations
nécessaires pour appliquer une interpolation de mouvement typique.
■
Utiliser des contrôles d’accélération, page 178 présente comment
contrôler avec précision la façon dont Flash calcule le mouvement de
des animations.
■
Créer une interpolation de mouvement avec un paramètre alpha, page 185
présente les opérations nécessaires pour animer des valeurs alpha de
transparence.
172 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
Etude du fichier FLA final
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Les sections suivantes présentent les étapes à suivre pour créer vous-même
l’application.
Ouverture du document de programmation
Il est recommandé d’analyser le document de programmation final,
représenté par un fichier FLA, pour découvrir et comprendre comment
l’auteur a conçu l’animation que vous êtes sur le point de créer.
Les fichiers pour ce didacticiel se trouvent dans le dossier Flash application/
Samples and Tutorials. Pour de nombreux utilisateurs, notamment dans le
cadre de paramètres de formation, ce dossier est en lecture seule. Avant de
continuer avec ce didacticiel, vous devez copier la totalité du dossier du
didacticiel Accélération des animations dans l’emplacement accessible en
écriture de votre choix.
Sur la plupart des ordinateurs, ce dossier se trouve aux emplacements
suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Animation
Easing
■
Sous Macintosh : lecteur de démarrage/Applications/Macromedia Flash
8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Animation
Easing
Copiez le dossier Accélération des animations dans un autre emplacement
de votre disque dur pour lequel vous disposez de droits d’accès en écriture.
Le dossier Accélération des animations contient un fichier Flash appelé
tween_finished.fla. Double-cliquez sur ce fichier pour l’ouvrir dans Flash.
Le fichier final du didacticiel est affiché dans l’environnement de
programmation de Flash.
Etude du fichier FLA final 173
Examen du fichier FLA final
Le fichier FLA final contient le graphique d’une boule de billard n° 8 sur
fond vert et présentant une ombre sous cette dernière. Cette illustration a
l’aspect suivant :
Fichier FLA final
Le document contient deux interpolations :
■
Une interpolation de mouvement illustrant le rebond de la boule sur la
surface verte.
■
Une interpolation de mouvement illustrant l’augmentation ou la
diminution de la taille de l’ombre en fonction de la proximité de la
boule n° 8.
Deux méthodes sont disponibles pour afficher l’animation.
174 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
Lire l’animation dans une fenêtre séparée sous
forme de fichier SWF
Pour lire l’animation dans une fenêtre séparée sous forme de fichier SWF,
sélectionnez Contrôle > Tester l’animation.
Afficher l’animation sur la scène dans
l’environnement de programmation Flash
Pour afficher l’animation sur la scène dans l’environnement de
programmation Flash, faites glisser la tête de lecture rouge sur le scénario.
Fermeture de l’application
Pour fermer le document, choisissez Fichier > Fermer.
Si vous préférez conserver le fichier final ouvert comme référence lors de
l’utilisation du fichier de démarrage, ne le modifiez pas ni n’enregistrez
aucune modification éventuelle.
Ouverture du document de
démarrage
Maintenant que le fichier final vous a été présenté, vous pouvez créer votre
propre document Flash. Vous allez d’abord ouvrir un fichier de démarrage
contenant des graphiques auxquels vous appliquerez des animations.
Dans le dossier Accélération des animations, ouvrez le fichier appelé
tween_start.fla. Il contient des graphiques que vous allez utiliser pour créer
l’animation.
Créer une interpolation de mouvement
Pour animer le graphique de la boule n° 8 au fil du temps, vous devez
insérer suffisamment d’images dans le scénario pour augmenter le temps
entre le début et la fin du fichier FLA. Dans cette section, vous allez ajouter
des images au scénario puis créer une interpolation de mouvement dans ces
images.
Ouverture du document de démarrage 175
Ajouter les images nécessaires au scénario
Pour ajouter les images nécessaires au scénario :
1.
Dans le scénario, faites glisser le pointeur afin de sélectionner toutes les
images de 1 à 60 dans les quatre calques.
Sélectionner plusieurs images dans le scénario
2.
Sélectionnez Insertion > Scénario > Image. Les images ajoutées aux
quatre calques doivent être affichées dans le scénario.
Images ajoutées au scénario
Créer une interpolation de mouvement dans les
nouvelles images
Pour créer une interpolation de mouvement dans les nouvelles images :
1.
Sélectionnez l’image 61 du calque appelé Boule.
2.
Sélectionnez Insertion > Scénario > Image-clé.
Image-clé ajoutée à l’image 1 du scénario
176 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
3.
Sur la scène, maintenez la touche Maj enfoncée et faites glisser la boule
n° 8 vers le bas jusqu’à ce que la partie inférieure de la boule soit au
milieu du graphique d’ombre.
Boule n° 8 correctement placée sur l’ombre
Vous venez de définir une nouvelle position de la boule n° 8 sur la scène
dans l’image 61. La boule possède désormais une position pour les 60
premières images, et une position différente pour l’image-clé de l’image
61. Lors de la définition de l’interpolation de mouvement, Flash
calculera les positions de la boule n° 8 dans chaque image, autrement
dit, entre sa position originale au-dessus de la scène et sa position finale
au milieu de l’ombre.
4.
Dans le scénario, cliquez sur le nom du calque Boule. Toutes les images
de ce calque sont ainsi sélectionnées.
Ouverture du document de démarrage 177
5.
Dans l’inspecteur des propriétés, sélectionnez Mouvement dans le menu
Interpolation. Cette option applique l’interpolation de mouvement aux
images sélectionnées.
Option Mouvement sélectionnée dans le menu Interpolation de l’inspecteur
des propriétés
6.
Dans le scénario, faites glisser la tête de lecture de l’image 1 à l’image 61.
La boule n° 8 se déplace vers le bas vers le graphique de l’ombre.
R E MA R QU E
La vitesse de déplacement de la boule est constante tout au long de
l’animation. Dans la section suivante, vous apprendrez à contrôler la
vitesse à laquelle vos animations débutent et terminent leur déplacement.
7.
Sélectionnez Fichier > Enregistrer sous.
8.
Entrez le nom de fichier mon_interpolation_démarrage.fla, puis
cliquez sur OK.
Utiliser des contrôles d’accélération
Vous pouvez contrôler la vitesse de début et de fin de vos animations à
l’aide des commandes d’accélération de Flash. On utilise le terme
accélération car la création d’une animation, comme par exemple faire
tomber lentement la boule n° 8 pour ensuite accélérer sa chute, est
considérée comme une « accélération » de mouvement. Lorsqu’on ralentit
une animation à la fin, on parle de « décélération ». Flash vous permet
également d’appliquer une accélération au milieu d’une interpolation grâce
à ses commandes d’accélération personnalisées.
178 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
Accélérer la vitesse de l’animation de la boule n° 8
1.
Dans le scénario, cliquez sur le nom du calque Boule pour le
sélectionner.
2.
Dans l’inspecteur des propriétés, faites glisser le curseur Accélération
vers le bas jusqu’à atteindre la valeur -100.
Vous obtiendrez ainsi le taux d’accélération maximum, ce qui entraîne
un début lent du mouvement de la boule qui s’accélère ensuite.
Curseur Accélération défini sur la valeur -100
3.
Faites glisser la tête de lecture sur le scénario et observez la vitesse de
l’animation.
Décélérer la vitesse de l’animation de la boule n° 8
1.
Dans le scénario, cliquez sur le nom du calque Boule pour le
sélectionner.
2.
Dans l’inspecteur des propriétés, faites glisser le curseur Accélération
vers le haut jusqu’à atteindre la valeur 100.
Vous obtiendrez ainsi le taux de décélération maximum, ce qui entraîne
un début très rapide du mouvement de la boule qui décélère ensuite.
3.
Faites glisser la tête de lecture sur le scénario et observez la vitesse de
l’animation.
4.
Dans le scénario, sélectionnez le calque Boule.
5.
Dans l’inspecteur des propriétés, faites glisser le curseur Accélération
vers le bas jusqu’à atteindre la valeur 0.
Vous supprimerez ainsi l’accélération de l’animation.
Flash offre également un contrôle plus précis de la méthode d’utilisation de
l’accélération et vous permet d’ajouter une accélération au milieu d’une
interpolation. Dans la section suivante, vous allez appliquer des paramètres
d’accélération personnalisés à l’animation au lieu d’utiliser le curseur
Accélération.
Ouverture du document de démarrage 179
Ajouter des paramètres d’accélération
personnalisés à l’interpolation de la boule n° 8
1.
Dans le scénario, sélectionnez le calque Boule.
2.
Dans l’inspecteur des propriétés, sélectionnez Modifier situé à côté de la
glissière d’accélération.
Bouton Modifier dans l’inspecteur des propriétés
La boîte de dialogue Accélération et Décélération personnalisée affiche
un graphique représentant le degré de déplacement au fil du temps. Les
images sont représentées par l’axe horizontal, et le pourcentage de
modification par l’axe vertical.
Boîte de dialogue Accélération/Décélération personnalisée
180 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
3.
Dans la boîte de dialogue Accélération/Décélération personnalisée,
cliquez en appuyant sur la touche Ctrl (Windows) ou Commande
(Macintosh) (ne cliquez qu’une seule fois) sur la ligne diagonale là où
elle traverse l’Image 20 sur l’axe horizontal et à environ 32 % sur l’axe
vertical. Un nouveau point de contrôle est ainsi ajouté à la ligne.
Cliquer sur la ligne diagonale Accélération/Décélération
4.
Faites glisser la ligne en haut du graphique (ligne 100 %) tout en la
maintenant au niveau de l’image 20 sur l’axe horizontal. La ligne
représente maintenant une courbe complexe.
Déplacement du point de contrôle en haut du graphique
Ouverture du document de démarrage
181
5.
Faites glisser la poignée gauche du sommet du nouveau point de
contrôle sur le côté droit jusqu’à ce qu’elle touche le point de contrôle.
Faites glisser la poignée droite du sommet du nouveau point de contrôle
sur le côté gauche jusqu’à ce qu’elle touche le point de contrôle. La
courbe traverse ainsi le point de contrôle via un angle aigü simple.
Point de contrôle montrant le déplacement des poignées du sommet sur le
point
6.
Cliquez en appuyant sur la touche Ctrl (Windows) ou Commande
(Macintosh), sur la courbe en haut du graphique à hauteur de
l’image 32 et faites glisser le nouveau point vers le bas jusqu’à atteindre
approximativement la valeur 76 % sur l’axe vertical.
Déplacement du point au niveau de l’image 32
182 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
7.
Faites glisser les poignées des sommets afin que la ligne les reliant au
point de contrôle soit horizontale et que chaque poignée soit à la même
distance du point de contrôle.
Déplacement des poignées des sommets
8.
Cliquez en appuyant sur la touche Ctrl (Windows) ou Commande
(Macintosh) sur la courbe au niveau de l’Image 44 et faites-la glisser
jusqu’à la ligne 100 %.
9.
Faites glisser les poignées du sommet du nouveau point de contrôle sur
le point de contrôle.
10. Cliquez
en appuyant sur la touche Ctrl (Windows) ou Commande
(Macintosh) sur la courbe à peu près à la hauteur de l’image 52 et faitesla glisser vers le bas jusqu’à atteindre la valeur 95 % environ sur l’axe
vertical.
Ouverture du document de démarrage 183
11.
Faites glisser les poignées des sommets afin que la ligne les reliant au
point de contrôle soit horizontale et que chaque poignée soit à la même
distance du point de contrôle.
Courbe finale Accélération/Décélération
Vous venez de créer une courbe d’accélération complexe représentant
une boule de billard n° 8 rebondissant au lieu d’une simple
interpolation de mouvement monodirectionnelle. Le bouton Lire dans
la boîte de dialogue Accélération/Décélération personnalisée vous
permet d’avoir un aperçu de votre animation sur la scène lorsque vous
essayez différentes courbes d’interpolation.
12. Cliquez
sur Lire dans le coin inférieur droit de la boîte de dialogue
Accélération/Décélération personnalisée. Examinez l’aperçu en direct de
votre animation sur la scène.
13.
Cliquez sur OK pour fermer la boîte de dialogue.
14. Choisissez
Fichier > Enregistrer pour enregistrer le fichier FLA.
184 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
Créer une interpolation de mouvement
avec un paramètre alpha
Dans cette section, vous allez créer une interpolation de la valeur alpha du
graphique de l’ombre qui apparaît sous la boule n° 8. Les changements
d’ombre devant correspondre à la vitesse et être synchronisés avec les
rebonds de la boule n° 8, vous utiliserez la même courbe d’accélération que
celle créée à la section précédente.
Créer l’interpolation de la valeur alpha de l’ombre
1.
Dans le scénario, sélectionnez l’image 61 du calque Ombre.
2.
Sélectionnez Insertion > Scénario > Image-clé.
3.
Faites glisser la tête de lecture sur l’image 1.
4.
Cliquez en dehors de la scène pour désélectionner tous les éléments
sélectionnés.
5.
Cliquez sur le clip de l’ombre sur la scène.
6.
Dans l’inspecteur des propriétés, sélectionnez Alpha dans le menu
Couleur.
7.
Faites glisser le curseur Alpha vers le bas jusqu’à atteindre la valeur
25 %. Vous avez réglé la valeur alpha à 25 % dans l’Image 1 et à 100 %
dans l’Image 61.
Définition de la valeur alpha du clip Ombre sur la scène sur 25 %
Ouverture du document de démarrage 185
8.
Dans le scénario, cliquez sur le nom du calque Boule pour sélectionner
les images de ce calque.
9.
Dans l’inspecteur des propriétés, sélectionnez Modifier situé à côté de la
glissière d’accélération.
10. Dans
la boîte de dialogue Accélération/Décélération personnalisée,
appuyez sur Ctrl-C (Windows) ou Commande-C (Macintosh) pour
copier la courbe d’accélération appliquée à l’interpolation de la boule.
11.
Fermez la boîte de dialogue en cliquant sur le bouton Annuler.
12. Dans
le scénario, cliquez sur le calque Ombre pour sélectionner toutes
les images de ce calque.
13.
Sélectionnez Mouvement dans le menu Interpolation de l’inspecteur des
propriétés.
14. Cliquez
sur Modifier situé à côté de la glissière d’accélération.
15. Dans
la boîte de dialogue Accélération/Décélération personnalisée,
appuyez sur Ctrl+V (Windows) ou Commande+V (Macintosh) pour
coller la courbe d’accélération de l’interpolation de la boule.
16.
Cliquez Lire dans la boîte de dialogue pour avoir un aperçu de
l’animation sur la scène.
Appliquer la même courbe à l’interpolation de l’ombre vous permet
d’animer la transparence de l’ombre en fonction de la proximité de la
boule. Ainsi, l’ombre s’assombrit à mesure que la boule approche de la
surface et s’éclaircit alors qu’elle s’en éloigne.
17.
Cliquez sur OK pour fermer la boîte de dialogue.
18.
Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.
186 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
Test de l’application
Vous pouvez tester la lecture de votre future application (fichier SWF) à
n’importe quel moment de sa création. Ce didacticiel ne contenant aucune
animation ni interactivité, le fichier aura le même aspect en mode test
qu’en mode auteur.
1.
Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.
2.
Choisissez Contrôle > Tester l’animation.
3.
Une fois que vous en avez terminé avec l’affichage de l’application,
fermez le fichier SWF en cliquant sur la case de fermeture dans la fenêtre
de test.
Vous venez de terminer la création d’une animation complexe à l’aide des
commandes d’accélération personnalisées de Flash. Ces contrôles, utilisés
lors de l’interpolation de différentes propriétés d’objets sur la scène, vous
permettent de créer une grande variété de mouvements complexes et
d’effets visuels intéressants.
Test de l’application 187
188 Création de graphiques : Créer des animations avec accélération (Flash Professionnel uniquement)
CHAPITRE 15
Création de graphiques :
Application de dégradés
15
Ce didacticiel vous guide à travers la procédure d’utilisation des outils de
dégradés dans Macromedia Flash Basic 8 et Macromedia Flash
Professionnel 8. Avec Flash, vous pouvez créer des dégradés de couleur
simples et des effets de dégradés complexes. Ce didacticiel vous apprendra
comment créer ces deux types de dégradé.
Un dégradé représente une zone d’un graphique où une couleur se
transforme en une autre. Flash peut créer deux types principaux de
dégradés : linéaire et radial. Les dégradés linéaires changent de couleur le
long d’un seul axe, horizontal ou vertical. Les dégradés radiaux changent de
couleur en s’étendant vers l’extérieur à partir d’un point focal. Vous pouvez
définir la direction du dégradé, ses couleurs, l’emplacement du point focal
et de nombreuses autres propriétés des dégradés.
Les illustrations suivantes montrent deux types de dégradés :
Un dégradé linéaire à deux couleurs passant du rouge au noir
Un dégradé radial à deux couleurs passant du rouge au noir
Ce didacticiel vous guide à travers les étapes à suivre pour créer une
illustration utilisant plusieurs types de dégradés.
189
Vous allez tout d’abord vous familiariser avec l’illustration finale, puis vous
ouvrirez un document Flash de démarrage avant de publier le document
pour le web. Le didacticiel dure environ 20 minutes.
Avant de suivre ce didacticiel, vous devriez lire le Chapitre 2, Bases de Flash
dans le guide Bien démarrer avec Flash.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Ouvrir le document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Appliquer un dégradé linéaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Créer un dégradé radial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Appliquer des touches finales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Le didacticiel de ce chapitre suit l’ordre d’un processus typique de création
d’une application Flash. Il existe également d’autres processus.
Le déroulement de ce didacticiel comprend les tâches suivantes :
■
Etude du fichier FLA final, page 191 vous permet d’examiner le fichier
Flash final.
■
Ouvrir le document de démarrage, page 193 vous permet de commencer
le didacticiel avec un fichier FLA contenant déjà quelques graphiques.
Vous appliquerez des effets de dégradé sur ces graphiques.
■
Appliquer un dégradé linéaire, page 193 présente les étapes nécessaires
pour appliquer un dégradé linéaire avec deux couleurs spécifiques.
■
Créer un dégradé radial, page 196 présente les étapes nécessaires pour
appliquer un dégradé radial et ajuster son point focal.
■
Appliquer des touches finales, page 199 présente les opérations à suivre
pour transformer un dégradé. Une opération de transformation
représente un changement de taille ou de forme d’un objet. Vous
ajouterez également quelques effets de dégradés supplémentaires pour
réaliser l’illustration.
■
Test de l’application, page 203 présente comment publier votre
document Flash sous forme de fichier SWF et de le visualiser dans un
navigateur web.
190 Création de graphiques : Application de dégradés
Etude du fichier FLA final
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Les sections suivantes présentent les étapes à suivre pour créer vous-même
l’application.
Ouverture du document de programmation
Il est recommandé d’analyser le document de programmation final,
représenté par un fichier FLA, pour découvrir et comprendre comment
l’auteur a conçu l’illustration que vous êtes sur le point de créer.
Les fichiers pour ce didacticiel se trouvent dans le dossier Flash application/
Samples and Tutorials. Pour de nombreux utilisateurs, en particulier ceux
suivant des séminaires, ce dossier n’est accessible qu’en lecture. Avant de
continuer avec ce didacticiel, vous devez copier la totalité du dossier du
didacticiel sur les dégradés dans l’emplacement accessible en écriture de
votre choix.
Sur la plupart des ordinateurs, ce dossier se trouve aux emplacements
suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Gradients.
■
Sous Macintosh : lecteur de démarrage/Applications/Macromedia Flash
8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Gradients.
Copiez le dossier Dégradés dans un autre emplacement de votre disque dur
pour lequel vous disposez de droits d’accès en écriture. Le dossier Dégradés
contient un fichier Flash appelé gradients_finished.fla. Double-cliquez sur
ce fichier pour l’ouvrir dans Flash. Le fichier final du didacticiel est affiché
dans l’environnement de programmation de Flash.
Etude du fichier FLA final
191
Examen du fichier FLA final
Dans le fichier FLA final, vous verrez les effets combinés de plusieurs
dégradés. Cette illustration a l’aspect suivant :
L’illustration contient cinq dégradés :
■
Un dégradé passant du noir au vert sur l’arrière-plan.
■
Un dégradé passant du noir au vert, puis à nouveau au noir sur la partie
inférieure de la boule.
■
Un autre dégradé passant du blanc au noir dans la partie en surbrillance
au sommet de la boule.
■
Un subtil dégradé sur le cercle blanc entourant le chiffre « 8 ».
■
Un dégradé radial dans l’ombre sous la boule n° 8.
Fermeture du fichier FLA final
Pour fermer le document, choisissez Fichier > Fermer.
Si vous préférez conserver le fichier final ouvert comme référence lors de
l’utilisation du fichier de démarrage, ne le modifiez pas ni n’enregistrez
aucune modification éventuelle.
192 Création de graphiques : Application de dégradés
Ouvrir le document de
démarrage
Maintenant que le fichier final vous a été présenté, vous pouvez créer votre
propre document Flash. Vous allez d’abord ouvrir un fichier de démarrage
contenant des graphiques auxquels vous appliquerez des dégradés.
1.
Dans Flash, choisissez Fichier > Ouvrir.
2.
Naviguez jusqu’au répertoire suivant :
■
■
3.
Sous Windows : lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Creating Graphics\
Sous Macintosh : lecteur de démarrage/Applications/Macromedia
Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/
Ouvrez le fichier gradients_start.fla.
Appliquer un dégradé linéaire
Cette section vous permettra d’ajouter un dégradé linéaire à l’arrière-plan.
1.
Cliquez sur l’outil Sélection dans le panneau Outils.
2.
Sélectionnez la zone grise du calque appelé Arrière-plan.
3.
Choisissez Fenêtre > Mélangeur pour afficher le panneau du même
nom.
4.
Sélectionnez Linéaire dans le menu déroulant Type du Mélangeur.
Appliquer un dégradé linéaire 193
5.
Double-cliquez sur la nuance de dégradé située à droite puis
sélectionnez la couleur verte (n° 006600).
Sélectionner la nuance de dégradé située à droite dans le mélangeur
Sélectionner la couleur verte n° 006600 dans le Sélecteur de couleur
6.
Double-cliquez sur la nuance de dégradé située à gauche puis
sélectionnez la couleur noire (n° 000000).
7.
Sélectionnez l’outil Transformer le dégradé dans le panneau Outils. Les
commandes Transformer le dégradé apparaissent sur la scène autour du
dégradé.
Outil Gradient Transform (Transformer le dégradé)
194 Création de graphiques : Application de dégradés
8.
Faites glisser la poignée Faire pivoter le dégradé pour faire pivoter le
dégradé linéaire vers la droite comme indiqué.
Poignée Gradient Rotate (Faire pivoter le dégradé)
Faire pivoter le dégradé vers la droite
9.
Verrouillez le calque Arrière-plan dans le scénario pour éviter toute autre
modification éventuelle de ce calque.
10. Choisissez
Fichier > Enregistrer pour enregistrer le fichier FLA.
Appliquer un dégradé linéaire 195
Créer un dégradé radial
Vous allez ensuite ajouter un dégradé radial à la boule de billard n° 8 de
couleur noire.
1.
Double-cliquez sur le cercle noir dans le calque appelé Boule. Le groupe
contenant la forme de la boule noire s’ouvre.
2.
Sélectionnez la forme du cercle noir. Vous lui appliquerez un dégradé.
Ne sélectionnez pas le chiffre « 8 » sur la boule n° 8.
3.
Sélectionnez Radial dans le menu déroulant Type du panneau
Mélangeur. Sélectionnez le mode Débordement miroir dans le menu
déroulant Débordement.
Les paramètres Type radial et Débordement miroir
4.
Double-cliquez sur la nuance de dégradé située à gauche puis
sélectionnez la couleur noire (n° 000000).
5.
Double-cliquez sur la nuance de dégradé située à gauche puis tapez
002200 dans la zone de texte Couleur. Appuyez sur Entrée.
6.
Faites glisser la nuance de dégradé située à gauche vers la droite jusqu’au
3/4 environ comme indiqué dans l’illustration suivante. La partie verte
du dégradé n’apparaîtra ainsi que dans les 25 % externes de la forme de
la boule.
Déplacer une nuance de dégradé
196 Création de graphiques : Application de dégradés
7.
Sélectionnez l’outil Zoom dans le panneau Outils et cliquez sur la forme
du cercle pour l’agrandir.
8.
Choisissez l’outil Gradient Transform (Transformer le dégradé) dans le
panneau Outils.
9.
Faites pivoter le dégradé radial de 90º vers la droite en faisant glisser la
poignée Gradient Rotate (Faire pivoter le dégradé).
Déplacer et faire pivoter le dégradé de 90° vers la droite.
10. Sélectionnez la commande Point focal et
faites-la glisser à proximité du
sommet du cercle.
Déplacer la commande Point focal vers le sommet du cercle
11.
Sélectionnez le point de contrôle central et faites glisser légèrement tout
le dégradé vers le haut comme indiqué dans l’illustration suivante. Le
dégradé du débordement miroir se trouve au niveau du bas du cercle.
Déplacer le point de contrôle central vers le haut
Créer un dégradé radial 197
12. Cliquez
13.
sur l’outil Sélection dans le panneau Outils.
Double-cliquez sur l’outil Zoom pour rétablir un affichage à 100 % de
la scène.
14. Double-cliquez
sur la scène pour désélectionner le groupe de la boule
n° 8.
15. Choisissez
Fichier > Enregistrer pour enregistrer le fichier FLA.
Créer une transformation de
dégradé à l’aide d’une forme
Dans cette section, vous allez créer un dégradé puis utiliser l’outil
Transformation libre pour en modifier la forme.
1.
Sélectionnez le calque Ombre dans le scénario.
2.
Choisissez l’outil Ovale dans le panneau Outils.
3.
En maintenant enfoncée la touche Maj, tracez sur la scène avec l’outil
Ovale un cercle d’une surface de 150 pixels environ. Le cercle devrait
avoir approximativement la même taille que la boule n° 8.
4.
Sélectionnez Linéaire dans le menu Type du panneau Mélangeur.
5.
Placez la nuance de dégradé gauche complètement à gauche. Les
nuances du dégradé devraient se situer aux extrêmes opposés : l’une
totalement à gauche et l’autre totalement à droite.
6.
Double-cliquez sur la nuance située à gauche puis sélectionnez la
couleur noire (n° 000000) dans le Sélecteur de couleurs.
7.
Cliquez sur la nuance située à droite pour afficher le sélecteur de
couleurs.
8.
Sélectionnez la couleur noire (n° 000000).
9.
Dans le Sélecteur de couleurs, faites glisser le curseur Alpha vers le bas
jusqu’à atteindre la valeur zéro. Cette opération crée un dégradé passant
du noir au transparent, ce qui permet de visualiser l’arrière-plan vert à
travers le bord du cercle que vous venez de dessiner.
10. Sélectionnez
l’outil Transformer le dégradé dans le panneau Outils et
faites glisser à nouveau la commande Point focal du dégradé vers le
centre du cercle.
198 Création de graphiques : Application de dégradés
11.
Sélectionnez l’outil Transformer librement et redimensionnez le cercle
le long de l’axe y (vertical) en faisant glisser la poignée centrale haute vers
le bas comme indiqué dans l’illustration suivante.
La transformation de la forme s’accompagne d’une transformation du
dégradé.
12. Cliquez
13.
sur l’outil de sélection dans le panneau Outils.
Faites glisser la forme de l’ombre sous la boule n° 8 à l’aide de l’outil
Sélection.
14. Cliquez
en dehors de la scène pour désélectionner l’ombre.
15. Choisissez
Fichier > Enregistrer pour enregistrer le fichier FLA.
Appliquer des touches finales
Pour terminer l’illustration, vous appliquerez deux autres dégradés
linéaires : le premier sur le cercle blanc de la boule n° 8 et le second pour
faire briller le haut de la boule.
Appliquer un dégradé sur le cercle blanc
de la boule n° 8
Vous allez ensuite ajouter un dégradé au cercle blanc sur le dessin de la
boule n° 8.
1.
Cliquez sur l’outil de sélection dans le panneau Outils.
2.
Double-cliquez sur le groupe de la boule n° 8 pour le modifier.
3.
Double-cliquez sur le groupe du cercle blanc.
4.
Sélectionnez la forme du cercle blanc.
Appliquer des touches finales 199
5.
Dans le panneau Mélangeur, sélectionnez Linéaire dans le menu Type
pour attribuer à la forme du cercle blanc un dégradé linéaire.
6.
Choisissez Sans répétition dans le menu Débordement
7.
Placez le nuancier de dégradé complètement sur la gauche et doublecliquez-le.
8.
Sélectionnez la couleur blanche (n° FFFFFF) dans le sélecteur de
couleur.
9.
Définissez la valeur Alpha de la nuance blanche sur 100 %.
10. Faites
glisser la nuance de dégradé droite complètement à droite puis
double-cliquez dessus.
11.
Choisissez la couleur noire (n° 000000) dans le Sélecteur de couleurs.
12. Définissez
la valeur Alpha de la nuance noire sur 100 %.
Vos paramètres de dégradé doivent correspondre à ceux dans
l’illustration suivante :
Paramètres de dégradé du cercle blanc correctement sélectionnés dans le
Mélangeur
13.
Sélectionnez l’outil Transformer le dégradé dans le panneau Outils.
14. Faites
glisser la poignée Gradient Rotate (Faire pivoter le dégradé)
d’environ 120º vers la droite.
Rotation du dégradé de 120º
200 Création de graphiques : Application de dégradés
15. Cliquez
sur l’outil Sélection dans le panneau Outils.
16.
Double-cliquez sur la scène pour désélectionner le groupe du cercle
blanc et celui de la boule n° 8.
17.
Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.
Appliquer un dégradé linéaire à la
surbrillance
Dans cette section, vous allez appliquer un dégradé linéaire.
1.
Cliquez sur l’icône X rouge dans le calque intitulé Surbrillance afin de
révéler la forme dans ce calque. La forme apparaît au sommet de la boule
n° 8.
2.
A l’aide de l’outil Sélection, double-cliquez sur la forme en surbrillance
pour en modifier le groupe.
3.
Sélectionnez la forme en surbrillance.
4.
Sélectionnez Linéaire dans le menu Type du panneau Mélangeur.
5.
Sélectionnez Non-repeating (Sans répétition) dans le menu
Débordement.
6.
Positionnez le nuancier de dégradé tout à fait à gauche et doublecliquez-le.
7.
Sélectionnez la couleur blanche (n° FFFFFF) dans le sélecteur de
couleur.
8.
Définissez la valeur Alpha de la nuance gauche sur 0 %.
9.
Faites glisser la nuance de dégradé droite complètement à droite puis
double-cliquez dessus.
10. Choisissez
la couleur blanche dans le Sélecteur de couleurs.
Appliquer des touches finales 201
11.
Définissez la valeur Alpha de la nuance droite sur 75 %.
Vos paramètres de dégradé doivent correspondre à ceux dans
l’illustration suivante :
Paramètres de dégradé de la forme en surbrillance correctement sélectionnés
dans le Mélangeur
12. Vérifiez
que la forme en surbrillance soit toujours sélectionnée, puis
choisissez l’outil Gradient Transform (Transformer le dégradé) dans le
panneau Outils.
13.
Faites glisser la commande Faire pivoter le dégradé d’environ 90 º vers
la gauche.
14. Faites glisser la commande Gradient Scale (Redimensionner le dégradé)
vers le bas jusqu’à toucher le haut de la forme en surbrillance.
Commande Gradient Scale (Redimensionner le dégradé)
Déplacer la commande Gradient Scale (Redimensionner le dégradé) vers le
bas jusqu’à toucher le haut de la forme en surbrillance
15. Cliquez
sur l’outil de sélection dans le panneau Outils.
202 Création de graphiques : Application de dégradés
16.
Double-cliquez en dehors de la scène pour désélectionner le groupe de
la surbrillance.
L’illustration Flash finale a l’aspect suivant :
17.
Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.
Test de l’application
Vous pouvez tester la lecture de votre future application (fichier SWF) à
n’importe quel moment de sa création. Ce didacticiel ne contenant aucune
animation ni interactivité, le fichier aura le même aspect en mode test
qu’en mode auteur.
1.
Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.
2.
Choisissez Contrôle > Tester l’animation.
3.
Une fois que vous en avez terminé avec l’affichage de l’application,
fermez le fichier SWF en cliquant sur la case de fermeture dans la fenêtre
de test.
Vous venez d’appliquer avec succès différents dégradés dans Flash et de
créer une illustration attrayante et réaliste. L’utilisation des outils de
dégradé de Flash vous permet de créer une gamme infinie de graphiques et
d’effets visuels intéressants.
Test de l’application 203
204 Création de graphiques : Application de dégradés
CHAPITRE 16
Création de graphiques : Appliquer
des filtres et des fondus (Flash
Professionnal uniquement)
16
Ce didacticiel vous guide à travers la procédure de création d’effets
graphiques accrocheurs en utilisant certaines fonctions de programmation
dans Macromedia Flash Professionnel 8 (les filtres ne sont pas disponibles
dans Flash Basic). L’utilisation des filtres graphiques et des modes de fondu
disponibles dans Flash vous permet de transformer des objets graphiques
ordinaires en un contenu visuel beaucoup plus attrayant.
Un filtre graphique représente une méthode qui traite les pixels d’un objet
graphique de manière à produire un effet spécifique. Par exemple, vous
pouvez appliquer un filtre de flou à un objet de manière à en adoucir les
bords ; vous pouvez également appliquer un filtre d’ombre portée à un
objet de manière à faire apparaître une ombre derrière ce dernier.
Un mode de fondu est une méthode permettant de faire interagir les
couleurs d’un objet graphique avec celles d’autres objets graphiques situés
sous ce dernier. Par exemple, l’utilisation du mode de fondu Eclaircir vous
permet d’éclaircir en différents degrés les parties d’un objet à afficher en
fonction des couleurs des objets situés sous ce dernier.
Si ce n’est déjà fait, nous vous recommandons, avant de suivre ce
didacticiel, de lire le Chapitre 2, Bases de Flash, dans le guide Bien démarrer
avec Flash.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Examiner votre tâche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Ouvrir le document de démarrage . . . . . . . . . . . . . . . . . . . . . . . . . .207
Appliquer des filtres et des fondus . . . . . . . . . . . . . . . . . . . . . . . . . .207
205
Examiner votre tâche
Dans ce didacticiel, vous allez ajouter des graphiques à la scène et leur
appliquer des filtres pour créer une image réaliste d’une table de billard
avec une profondeur de champ réduite. Les boules en avant-plan et en
arrière-plan apparaîtront floues comme si elles étaient vues au travers d’un
objectif.
Le fichier FLA final
Pour voir le fichier FLA final (Filters&Blends_finished.fla), localisez-le à
l’un des emplacements suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Filters and
Blends
■
Sous Macintosh : lecteur de démarrage/Applications/Macromedia Flash
8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and
Blends
206 Création de graphiques : Appliquer des filtres et des fondus (Flash Professionnal uniquement)
Ouvrir le document de
démarrage
Maintenant que vous avez vu le document que vous êtes sur le point de
créer, vous pouvez créer votre propre version du document. La première
action consiste à ouvrir le document de démarrage qui contient les objets
graphiques que vous utiliserez avec les fonctions de filtre et de fondu de
Flash.
1.
Dans Flash, choisissez Fichier > Ouvrir.
2.
Utilisez l’un des emplacements suivants :
■
■
3.
Sous Windows : lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Creating Graphics\Filters and Blends
Sous Macintosh : lecteur de démarrage/Applications/Macromedia
Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/
Filters and Blends
Sélectionnez le fichier intitulé Filters&Blends_start.fla et cliquez sur
Ouvrir.
R E MA R Q UE
Pensez à enregistrer votre fichier régulièrement tout au long de ce
didacticiel.
Appliquer des filtres et des
fondus
Dans les sections suivantes, vous allez appliquer des fondus et des filtres aux
clips 9ball et CueBall trouvés dans le panneau Bibliothèque.
Appliquer des filtres et des fondus 207
Appliquer un fondu au clip 9ball
La première tâche que vous devez exécuter dans le fichier de démarrage est
d’appliquer un effet de fondu à une occurrence du clip contours de 9ball
afin de combiner ses couleurs aux couleurs du clip 9ball. Cela donne un
aspect brillant réaliste à la boule de billard.
1.
Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque).
2.
Déplacez le clip 9ball du panneau Bibliothèque vers le coin inférieur
droit de la scène.
Vous créez ainsi une nouvelle occurrence du clip 9ball sur la scène.
3.
Double-cliquez la nouvelle occurrence 9ball pour passer au mode
d’édition de symbole.
4.
Déplacez le clip contours de 9ball du panneau Bibliothèque sur la
scène de manière qu’il recouvre parfaitement l’occurrence 9ball.
Vous pouvez employer les touches fléchées pour positionner avec
précision l’occurrence de contours de9ball.
5.
En gardant toujours l’occurrence du clip contours de 9ball
sélectionnée, ouvrez l’inspecteur des propriétés et sélectionnez
Multiplier dans le menu Fondu.
6.
Double-cliquez en dehors de la scène pour quitter le mode d’édition de
symbole.
L’instance 9ball devrait toujours être sélectionnée sur la scène.
7.
Ouvrez le panneau Transformer (Fenêtre > Transformer).
8.
Activez la case à cocher Contraindre dans le panneau Transformer.
9.
Double-cliquez le champ Largeur et tapez 140.
10. Sur
la scène, l’occurrence 9ball apparaît alors plus grande que
l’occurrence 8ball.
11.
Repositionnez l’occurrence 9ball de façon qu’elle recouvre légèrement
le bord droit de l’occurrence 8ball sur la scène.
208 Création de graphiques : Appliquer des filtres et des fondus (Flash Professionnal uniquement)
Appliquer un filtre
L’étape suivante consiste à appliquer un filtre de flou au clip 9ball pour le
rendre flou comme s’il était au premier plan de la scène.
1.
L’occurrence 9ball étant toujours sélectionnée, cliquez sur l’onglet
Filtres dans l’inspecteur des propriétés.
2.
Dans l’onglet Filtres, sélectionnez Ajouter un filtre et choisissez Flou
dans le menu contextuel.
3.
Déplacez la glissière BlurX pour donner la valeur 19 à BlurX et BlurY.
Les valeurs de BlurX et BlurY sont forcées de varier ensemble par
défaut. Cliquez sur l’icône de verrou si elles ne le sont pas.
4.
Cliquez sur l’onglet Propriétés de l’inspecteur des propriétés.
5.
Dans l’inspecteur des propriétés, entrez les valeurs suivantes dans les
champs L, H, X et Y :
L : 210
H : 235
X : 315
Y : 155
6.
Cliquez en dehors de la scène pour désélectionner l’occurrence 9ball.
Appliquer des filtres et des fondus à la
boule blanche
La dernière étape consiste à utiliser un effet de couleur et un filtre pour que
la boule blanche semble être située à l’arrière-plan de la scène.
1.
Déplacez le clip CueBall (boule blanche) du panneau Bibliothèque vers
le coin supérieur gauche de la scène.
2.
La nouvelle occurrence de la boule blanche étant toujours sélectionnée,
entrez la valeur 70 dans les champs L (largeur) et H (hauteur) du
panneau Transformer.
L’occurrence de la boule blanche apparaîtra alors plus petite que
l’occurrence 8ball.
209 Création de graphiques : Appliquer des filtres et des fondus (Flash Professionnal uniquement)
3.
L’occurrence de la boule blanche étant toujours sélectionnée sur la
scène, sélectionnez l’option Luminosité dans le menu Couleur de
l’inspecteur des propriétés.
Une glissière Quantité luminosité s’affiche sur la droite du menu
Couleur.
4.
Déplacez la glissière Quantité luminosité jusqu’à ce que la valeur
atteigne -48 %.
5.
Entrez les valeurs suivantes dans les champs L, H, X et Y :
L : 105
H : 115
X : 95
Y : 105
6.
L’occurrence de la boule blanche étant toujours sélectionnée sur la
scène, cliquez sur l’onglet Filtres dans l’inspecteur des propriétés.
7.
Cliquez sur le bouton Ajouter un filtre et choisissez Flou dans le menu
contextuel Filtre.
8.
Déplacez la glissière BlurX pour donner la valeur 13 à BlurX et BlurY.
Ces zones de texte sont forcées de varier ensemble par défaut. Cliquez
sur l’icône de verrou si elles ne le sont pas.
9.
Cliquez en dehors de la scène pour désélectionner l’occurrence de la
boule blanche.
Vous venez d’appliquer les effets graphiques afin de créer un aspect réaliste
de profondeur.
Pour plus d’informations sur l’utilisation des filtres et des fondus, reportezvous à la section Chapitre9, Utilisation de filtres et de mélanges (Flash
Professional uniquement), du guide Utilisation de Flash.
210 Création de graphiques : Appliquer des filtres et des fondus (Flash Professionnal uniquement)
CHAPITRE 17
Texte : Ajouter du texte à
un document
17
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8
fournissent de nombreuses fonctionnalités et options de texte. Cette leçon
présente les trois principaux types de texte qui peuvent être ajoutés à un
document. Vous pouvez utiliser du texte statique pour ajouter des titres, des
étiquettes ou d’autres contenus textuels dans un document. Vous pouvez
utiliser du texte de saisie pour permettre aux utilisateurs d’interagir avec
votre application Flash, par exemple pour entrer leurs noms et d’autres
informations dans un formulaire. Le troisième type de texte est le texte
dynamique. Les champs de texte dynamique servent à afficher du texte qui
change selon les critères que vous spécifiez. Par exemple, vous pouvez
utiliser un champ de texte dynamique pour ajouter des valeurs stockées
dans d’autres champs de texte, telles que la somme de deux nombres. Ce
didacticiel vous montre comment ajouter du texte et des champs de texte à
un document Flash.
A l’issue de cette leçon, pensez à essayer les autres options de texte décrites
dans la section « Utilisation du texte » du guide Utilisation de Flash.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Créer un bloc de texte de taille variable. . . . . . . . . . . . . . . . . . 213
Créer un bloc de texte de taille fixe. . . . . . . . . . . . . . . . . . . . . . 214
Modifier du texte et des attributs de police. . . . . . . . . . . . . . . 215
Sélectionner des polices de périphérique. . . . . . . . . . . . . . . . 215
Ajouter un champ de saisie de texte . . . . . . . . . . . . . . . . . . . . 216
Copier un champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217
Attribuer des noms d’occurrence aux champs de texte . . . .217
211
Créer un champ de texte dynamique . . . . . . . . . . . . . . . . . . . . 218
Spécifier des options de format . . . . . . . . . . . . . . . . . . . . . . . . 219
Afficher le code ActionScript pour le champ de texte
dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220
Tester le fichier SWF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220
Vérifier l’orthographe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Text\Add Text to a Document, puis double-cliquez sur
text_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/
Text\Add Text to a Document et double-cliquez sur text_start.fla.
R E MA R QU E
Le dossier Ajouter du texte à un document comprend les versions
terminées des fichiers FLA du didacticiel, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine et le lien du fichier vers les fichiers dépendants.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de modifier votre espace de travail pour les leçons.
4.
Dans le menu contextuel d’affichage de la scène, dans la partie
supérieure droite du scénario, sélectionnez Afficher une image pour
afficher la scène et l’espace de travail.
5.
Dans le panneau Outils, cliquez sur l’outil Sélection. Dans le Scénario,
cliquez sur le calque Static Text pour sélectionner le calque de travail.
212 Texte : Ajouter du texte à un document
Créer un bloc de texte de taille
variable
Vous pouvez définir la taille d’un bloc de texte ou utiliser un bloc dont la
taille s’adaptera au texte saisi. Pour commencer cette leçon, vous allez
simplement ajouter du texte à un document.
1.
Cliquez sur une zone vide de l’espace de travail en veillant à ne
sélectionner aucune image de scénario et aucun objet de la scène.
2.
Dans le panneau Outils, sélectionnez l’outil Texte.
3.
Dans l’inspecteur des propriétés, définissez les options suivantes :
■
Dans le menu déroulant Type de texte, sélectionnez Texte statique
s’il n’est pas déjà sélectionné.
■
Pour la police, sélectionnez Arial.
■
Pour la taille de la police, entrez 13.
■
■
Cliquez sur la zone de couleur de texte et sélectionnez le gris avec
une valeur hexadécimale de #666666.
Sélectionnez Aligner à gauche, s’il n’est pas déjà sélectionné.
4.
Dans le Scénario, sélectionnez le calque Static Text.
5.
L’outil Texte étant toujours sélectionné, cliquez sur la scène sur le bord
gauche du repère de Texte 1 et entrez Trio ZX2004 Safety Features.
Lorsque vous saisissez du texte avec l’outil Texte sélectionné, vous créez
un bloc de texte d’une ligne de taille variable. Un bloc de texte d’une
ligne de taille variable se reconnaît à sa poignée ronde dans l’angle
supérieur droit.
Créer un bloc de texte de taille variable 213
6.
Si nécessaire, alignez le texte situé au-dessus du repère de Texte 1. Pour
ce faire, cliquez sur l’outil Sélection dans le panneau Outils et faites
glisser votre texte sur le repère.
R E MA R Q UE
Le repère du Texte 1 est situé sur un calque de repère qui n’apparaît pas
dans le fichier SWF.
Créer un bloc de texte de taille
fixe
Vous pouvez non seulement créer une ligne de texte de taille variable, mais
aussi un bloc de texte de taille fixe. Dans un bloc de texte de taille fixe, le
texte est automatiquement renvoyé à la ligne.
Vous allez à présent créer un bloc de texte statique de dimensions fixes.
1.
Vérifiez que le calque Static Text est toujours sélectionné dans le
scénario et utilisez l’outil de sélection pour désélectionner les objets de
la scène ou les images du scénario (cliquez dans la zone de travail, ailleurs
que sur un objet).
2.
Dans le panneau Outils, sélectionnez l’outil Texte.
3.
Dans l’inspecteur des propriétés, définissez la taille du texte sur
10 points.
4.
Sur la scène, faites glisser votre pointeur sur la zone du repère de Text 2.
Un bloc de texte statique d’une ligne de taille variable se reconnaît à sa
poignée ronde dans l’angle supérieur droit. Un bloc de texte de taille
fixe a une poignée carrée.
5.
Dans le bloc de texte que vous avez créé, entrez Want to learn more?
R EM A R QU E
Vous pouvez faire glisser la poignée carrée d’un bloc de texte pour
modifier sa taille. En outre, vous pouvez double-cliquer sur une poignée
carrée pour la convertir en poignée ronde, extensible.
6.
Si nécessaire, cliquez sur l’outil Sélection dans le panneau Outils et faites
glisser le texte saisi au-dessus du repère de Texte 2 pour aligner le texte.
214 Texte : Ajouter du texte à un document
Modifier du texte et des attributs
de police
Lorsque vous sélectionnez le texte, l’inspecteur des propriétés affiche les
options de formatage de texte standard. Vous pouvez utiliser l’inspecteur
des propriétés pour modifier la police et la taille d’un objet texte
sélectionné.
1.
Dans le panneau Outils, cliquez sur l’outil Sélection. Double-cliquez sur
le texte de la scène intitulée « Submit your contact information ».
2.
Sélectionnez la lettre S, puis entrez Please s, de sorte que le message
devienne « Please submit your contact information ».
3.
Dans le panneau Outils, cliquez sur l’outil Sélection. Utilisez
l’inspecteur des propriétés pour sélectionner le style gras.
4.
Cliquez sur la commande Couleur de remplissage et choisissez une
couleur différente pour le texte, une autre nuance de gris par exemple.
Sélectionner des polices de
périphérique
Lorsque vous utilisez une police installée sur votre système dans un
document Flash, ses informations sont intégrées au fichier SWF Flash,
garantissant ainsi l’affichage correct de la police. Vous pouvez également
sélectionner l’option Utiliser les polices de périphérique. Cette option
recherche sur l’ordinateur de l’utilisateur les polices qui ressemblent le plus
à la police de périphérique spécifiée. Les polices de périphériques sont
disponibles avec du texte statique uniquement.
Vous devez spécifier que le texte sélectionné utilise des polices de
périphérique.
1.
Le texte « Please submit your contact information » toujours sélectionné
sur la scène, sélectionnez _sans dans le menu déroulant Police de
l’inspecteur des propriétés.
2.
Dans l’inspecteur des propriétés, sélectionnez Utiliser les polices de
périphérique.
Le texte ne change pas d’apparence si la police Arial est installée sur
votre ordinateur.
Sélectionner des polices de périphérique 215
Ajouter un champ de saisie de
texte
Vous pouvez utiliser un champ de saisie de texte pour que les utilisateurs
puissent interagir avec votre application Flash. Par exemple, les champs de
saisie de texte permettent de créer un formulaire très simplement.
Dans une autre leçon (sélectionnez Aide > Didacticiels Flash >
ActionScript : Créer un formulaire avec une logique conditionnelle et
envoyer des données), vous apprendrez à utiliser un champ de saisie de
texte pour envoyer des données de Flash vers un serveur. Vous allez
maintenant ajouter un champ dans lequel les utilisateurs vont entrer leur
prénom.
1.
Dans le Scénario, sélectionnez le calque Input Text.
2.
Avec l’outil de sélection, cliquez dans la zone de travail, ailleurs que sur
les objets de la scène.
3.
Dans le panneau Outils, sélectionnez l’outil Texte.
4.
Dans l’inspecteur des propriétés, définissez les options suivantes :
■
Sélectionnez Texte de saisie dans le menu déroulant Type de texte.
■
Sélectionnez Arial dans le menu déroulant Police.
■
Pour la taille de la police, entrez 8.
■
■
Cliquez sur la zone de couleur de texte et sélectionnez une nuance
de bleu foncé.
Sélectionnez le bouton Texte aliasé.
Ce bouton rend le texte de petite taille plus lisible. Pour le texte de
saisie, cette option est supportée dans Macromedia Flash Player 7 et
ses versions ultérieures.
■
Sélectionnez Ligne simple dans le menu déroulant Type de ligne et
vérifiez que l’option Afficher la bordure autour du texte est
sélectionnée.
L’option Ligne simple affiche le texte sur une seule ligne. L’option
Afficher la bordure autour du texte affiche les limites du champ de
texte à l’aide d’une bordure.
216 Texte : Ajouter du texte à un document
5.
Sur la scène, faites glisser le pointeur à droite du texte First Name afin
de créer un champ de saisie de texte.
6.
Utilisez au besoin l’outil de sélection pour repositionner le champ.
Copier un champ de texte
Pour dupliquer un objet rapidement sur la scène, maintenez la touche Alt
enfoncée et faites glisser l’objet. L’objet original reste à sa place et vous
pouvez déplacer l’objet dupliqué. Vous allez utiliser la touche Alt pour créer
deux copies du champ de saisie de texte que vous avez créé.
1.
Sur la scène, sélectionnez l’outil Sélection, cliquez sur le champ de saisie
de texte que vous avez créé et appuyez sur la touche Alt. Faites glisser une
copie du champ à droite du champ Last Name.
2.
Cliquez sur ce champ tout en appuyant sur la touche Alt, puis faites
glisser la nouvelle copie du champ vers le champ eMail Address.
Attribuer des noms d’occurrence
aux champs de texte
Un champ de saisie de texte sur la scène est une occurrence de l’objet
TextField ActionScript, auquel vous pouvez appliquer des propriétés et des
méthodes. Il est recommandé de nommer les occurrences de champ de
saisie de sorte que les autres personnes travaillant sur le projet puissent se
référer à l’occurrence dans ActionScript.
1.
Sélectionnez le champ que vous avez placé à côté de First Name. Dans
l’inspecteur des propriétés, entrez firstName_txt dans la zone de texte
Nom de l’occurrence.
2.
Sélectionnez le champ que vous avez placé à côté de Last Name. Dans
l’inspecteur des propriétés, entrez lastName_txt dans la zone de texte
Nom de l’occurrence.
Attribuer des noms d’occurrence aux champs de texte 217
3.
Sélectionnez le champ que vous avez placé à côté de eMail Address.
Dans l’inspecteur des propriétés, entrez eMail_txt dans la zone de texte
Nom de l’occurrence.
Pour en savoir plus sur l’objet TextField, consultez « Utilisation du texte »
dans le guide Utilisation d’ActionScript dans Flash.
Créer un champ de texte
dynamique
Un texte dynamique peut afficher du texte provenant de sources externes à
l’exécution. Vous allez maintenant créer un champ de texte dynamique
relié à un fichier texte externe. Le fichier texte externe que vous allez utiliser
s’appelle safetyFeatures.txt. Il est situé dans le même dossier que le
fichier FLA de la leçon. Le fichier FLA contient déjà le fichier ActionScript
qui affiche le texte lorsque vous testez ou publiez le document.
1.
Dans le Scénario, sélectionnez le calque Dynamic Text. Avec l’outil
Sélection, cliquez dans l’espace de travail et désélectionnez tous les
objets.
2.
Cliquez sur l’outil Texte dans le panneau Outils.
3.
Dans l’inspecteur des propriétés, définissez les options suivantes :
■
■
■
■
■
218 Texte : Ajouter du texte à un document
Sélectionnez Texte dynamique dans le menu déroulant Type de
texte.
Pour les attributs de texte, définissez le type de texte sur Verdana
avec une taille de police 6.
Pour Type de ligne, sélectionnez Multiligne pour que le texte soit
renvoyé à la ligne.
Cliquez sur la zone de couleur de texte et sélectionnez une nuance
de gris foncé.
Sélectionnez l’attribut de paragraphe Aligner à gauche s’il n’est pas
déjà sélectionné.
4.
Sur la scène, faites glisser un champ de texte pour en créer un nouveau
entre les deux règles horizontales.
5.
Dans la zone de texte Nom de l’occurrence de l’inspecteur des
propriétés, nommez le champ dynamique newFeatures_txt.
Le code ActionScript du document charge un fichier texte externe situé
dans le même dossier que votre document. Le code ActionScript est
configuré pour charger le texte dans un champ appelé newFeatures_txt.
Spécifier des options de format
La boîte de dialogue Options de format permet de spécifier les paramètres
de marge et de retrait du texte.
1.
Le champ de texte dynamique étant toujours sélectionné sur la scène,
cliquez sur Format dans l’inspecteur des propriétés.
2.
Dans la zone de texte Marge gauche, entrez 5 et dans la zone de texte
Marge droite, entrez 5. Cliquez sur OK.
Les marges gauche et droite du texte dynamique sont désormais de
5 pixels dans le champ de texte.
Spécifier des options de format 219
Afficher le code ActionScript
pour le champ de texte
dynamique
Vous pouvez afficher le code ActionScript qui charge le texte du fichier
texte externe dans le champ dynamique. Ce script utilise des actions
LoadVars pour charger le contenu du fichier safetyfeatures.txt dans le
champ newFeatures.
1.
Dans le scénario, sélectionnez l’image 1 du calque Actions.
2.
Sélectionnez Fenêtre > Actions ou appuyez sur la touche F9.
Le code ActionScript s’affiche comme suit :
// Charger le texte comme variable et l’affecter au
// champ de texte dynamique
var features_lv:LoadVars = new LoadVars();
features_lv.onLoad = onText;
features_lv.load("safetyfeatures.txt");
function onText(success:Boolean) {
if (success) {
newFeatures_txt.text = features_lv.safetyfeatures;
} else {
newFeatures_txt.text = "unable to load text file.";
}
}
3.
Fermez le panneau Actions.
Tester le fichier SWF
Enregistrez et testez le document pour vérifier que le texte dynamique se
charge correctement.
1.
Sélectionnez Fichier > Enregistrer, puis sélectionnez Contrôle > Tester
l’animation.
Dans la fenêtre du fichier SWF, le texte du fichier externe doit s’afficher
dans le champ de texte dynamique que vous avez créé. Si ce n’est pas le
cas, vérifiez que vous avez entré le nom de l’occurrence correctement :
newFeatures_txt. Vérifiez également que vous avez enregistré votre
copie du fichier d’entraînement dans le même dossier que le fichier
text_start d’origine.
220 Texte : Ajouter du texte à un document
2.
Complétez les champs de saisie de texte.
3.
Une fois le fichier testé, fermez la fenêtre du fichier SWF.
Vérifier l’orthographe
Flash Basic 8 et Flash Professionnal 8 contiennent de nouvelles
fonctionnalités permettant de vérifier l’orthographe de la plupart du texte
d’un document, y compris les champs de saisie, les noms des calques et les
chaînes ActionScript. Pour vérifier l’orthographe d’un document,
configurez les options Configuration de la vérification orthographique,
puis lancez le correcteur.
1.
Sélectionnez Texte > Installation du correcteur orthographique
2.
Vérifiez que l’option Vérifier le contenu des champs de texte et que le
dictionnaire approprié sont sélectionnés. Sélectionnez d’autres options
à votre convenance. Cliquez sur OK.
3.
Sélectionnez Texte > Vérifier l’orthographe et répondez aux boîtes de
dialogue affichées par le correcteur orthographique. Lorsque la
vérification est terminée, enregistrez le document.
R E MA R Q UE
Pour vérifier l’orthographe du texte de fichiers externes, utilisez la fonction
de correction orthographique de l’application utilisée pour créer le fichier
externe.
Sommaire
Félicitations, vous connaissez maintenant les fonctions élémentaires d’ajout
de texte à un document. En quelques minutes vous avez appris à accomplir
les tâches suivantes :
■
Créer un bloc de texte de taille variable
■
Créer un bloc de texte de taille fixe
■
Modifier du texte et des attributs de police
■
Sélectionner des polices de périphérique
■
Ajouter un champ de saisie de texte
■
Copier un champ de texte
■
Attribuer des noms d’occurrence aux champs de texte
Sommaire 221
■
Créer un champ de texte dynamique
■
Afficher du code ActionScript qui relie le champ de texte à un fichier
texte externe
■
Configurer et vérifier l’orthographe
Pour en savoir plus sur les nombreuses options permettant d’ajouter du
texte à un document, reportez-vous au Chapitre 6, Utilisation du texte,
dans le guide Utilisation de Flash.
222 Texte : Ajouter du texte à un document
CHAPITRE 18
ActionScript : Utiliser le
mode Assistant de script
18
Ce didacticiel va vous apprendre à utiliser le mode Assistant de script dans
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8.
Le mode Assistant de script vous demande d’entrer les éléments d’un script
et vous aide à ajouter plus facilement une interactivité simple à votre fichier
SWF (une version comprimée d’un fichier .fla de Flash avec l’extension
.swf ) ou à une application. Ce mode convient parfaitement aux utilisateurs
qui ne maîtrisent pas encore l’écriture complète de scripts ou qui, plus
simplement, apprécient l’aide apportée par cet outil.
Utilisé en combinaison avec le panneau Actions, le mode Assistant de script
vous invite à sélectionner des options et à saisir des paramètres. Par
exemple, au lieu d’écrire votre propre script, vous pouvez sélectionner un
élément de langage dans la boîte à outils Actions (ou la commande Ajouter
(+) de la barre d’outils), le faire glisser vers la fenêtre de script, puis
compléter le script en vous laissant guider par le mode Assistant de script.
Ce didacticiel vous guide à travers les étapes d’utilisation du mode Assistant
de script afin d’ajouter une fonctionnalité d’interactivité à une application
Flash. Vous ajouterez du code ActionScript à un objet (bouton) et à des
images dans le scénario. Ce didacticiel présente également les meilleures
techniques pour ajouter des scripts à un document Flash.
Vous allez tout d’abord vous familiariser avec l’application Flash finale, puis
vous ouvrirez un document Flash de démarrage avant de tester
l’interactivité que vous aurez ajoutée à une application à l’aide du mode
Assistant de script. Le didacticiel dure environ 20 minutes.
Avant de suivre ce didacticiel, lisez le Chapitre 2, Bases de Flash dans le
guide Bien démarrer avec Flash.
223
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Etude du fichier FLA final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Ouverture du document de démarrage . . . . . . . . . . . . . . . . . . 227
Ajout d’un script à un bouton à l’aide du mode Assistant de
script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Ajout de scripts au scénario à l’aide du mode Assistant de
script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Ajout d’un script d’image au clip Titre . . . . . . . . . . . . . . . . . . . 235
Le didacticiel de ce chapitre suit l’ordre d’un processus typique de création
d’une application Flash. Il existe également d’autres processus.
Le processus de ce didacticiel comprend les tâches suivantes :
■
Etude du fichier FLA final, page 225 permet d’examiner le fichier Flash
final.
■
Ouverture du document de démarrage, page 227 permet de commencer
le didacticiel avec un fichier FLA (un fichier Flash avec l’extension .fla )
qui contient les éléments auxquels vous appliquerez le mode Assistant
de script pour ajouter du code ActionScript.
■
Ajout d’un script à un bouton à l’aide du mode Assistant de script,
page 227 explique comment utiliser le mode Assistant de script pour
ajouter directement un script à un objet, un bouton, sur la scène.
■
Ajout de scripts au scénario à l’aide du mode Assistant de script, page 232
explique comment utiliser le mode Assistant de script pour placer des
scripts sur une image dans le scénario, lesquels concernent des boutons
sur la scène. Placer un code dans une image sur le scénario au lieu de
placer directement un code sur des objets sur la scène constitue une
meilleure approche pour organiser ActionScript au sein de vos
applications Flash.
■
Ajout d’un script d’image au clip Titre, page 235 explique comment
placer un code dans l’image finale d’un clip.
■
Test de l’application, page 237 explique comment publier votre
document Flash sous forme de fichier SWF et le visualiser dans un
navigateur web.
224 ActionScript : Utiliser le mode Assistant de script
Etude du fichier FLA final
En examinant la version terminée de l’application que vous êtes sur le point
de créer, vous découvrirez également l’espace de travail Flash.
Les sections suivantes présentent les étapes à suivre pour créer vous-même
l’application.
Ouverture du document de création
Il est utile d’analyser le fichier FLA correspondant au document de création
final pour comprendre comment l’auteur a conçu l’application. Vous
devriez analyser les types de script qui ont été employés pour ajouter la
fonctionnalité d’interactivité, et comprendre ce que vous allez créer.
Les fichiers pour ce didacticiel se trouvent dans le dossier Samples and
Tutorials du dossier d’installation de Flash. Pour de nombreux utilisateurs,
en particulier ceux suivant des séminaires, ce dossier n’est accessible qu’en
lecture. Avant de suivre le didacticiel, copiez tout le dossier Script Assist du
didacticiel à un emplacement de votre choix accessible en écriture.
Sur la plupart des ordinateurs, vous trouverez le dossier Script Assist du
didacticiel aux emplacements suivants :
■
Sous Windows : lecteur de démarrage\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\ActionScript\Script Assist.
■
Sous Macintosh : Macintosh HD/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/ActionScript/Script Assist.
Copiez le dossier Script Assist à un autre emplacement sur le disque dur
auquel vous avez accès. Le dossier Script Assist comporte un fichier Flash
appelé scriptassist_complete.fla. Double-cliquez sur ce fichier pour l’ouvrir
dans Flash. Le fichier final du didacticiel est affiché dans l’environnement
de création Flash.
Etude du fichier FLA final 225
Examen du fichier FLA final
Dans le fichier final FLA, vous verrez tous les objets (boutons, clips et
graphiques) qui constituent l’exemple d’application. L’illustration suivante
montre cette application, un site web basé sur Flash présentant des
informations sur une société.
Le fichier FLA final
L’application comprend trois clips :
■
le clip Titre, qui affiche les titres des sections du site lorsque l’utilisateur
clique sur les liens de navigation correspondants (Accueil, A propos,
Produits, Contacts),
■
les clips Menu et interpolation de menu, qui affichent les liens de
navigation principaux (boutons) et créent ensemble une animation
lorsque l’application est exécutée.
L’application présente quatre boutons :
■
les boutons A propos, Produits, Contacts et Accueil fournissent la
navigation pour l’application.
Dans ce didacticiel, vous allez ajouter du code ActionScript pour permettre
de naviguer vers les différentes sections du site à l’aide des boutons.
Fermeture du fichier FLA final
Pour fermer le document, choisissez Fichier > Fermer.
Si vous préférez conserver le fichier final ouvert comme référence lors de
l’utilisation du fichier de démarrage, ne le modifiez pas ni n’enregistrez
aucune modification éventuelle.
226 ActionScript : Utiliser le mode Assistant de script
Ouverture du document de
démarrage
Maintenant que le fichier final vous a été présenté, vous pouvez créer votre
propre document Flash. Vous allez d’abord ouvrir un fichier de démarrage
contenant les éléments auxquels vous allez ajouter du code ActionScript à
l’aide du mode Assistant de script.
Pour ouvrir le document de démarrage :
1.
Dans Flash, choisissez Fichier > Ouvrir.
2.
Naviguez jusqu’au répertoire suivant :
■
■
3.
Sous Windows : disque dur\Program Files\Macromedia\Flash
8\Samples and Tutorials\Tutorial Assets\ActionScript\Script Assist.
Sous Macintosh : Macintosh HD/Applications/Macromedia Flash
8/Samples and Tutorials/Tutorial Assets/ActionScript/Script Assist.
Ouvrez le fichier scriptassist_start.fla.
Ajout d’un script à un bouton à
l’aide du mode Assistant de
script
Dans cette section, vous allez utiliser le mode Assistant de script pour
ajouter un script au bouton Accueil. Lorsque l’on clique sur le bouton
Accueil dans l’exemple d’application, le titre Accueil s’affiche dans le clip
Titre.
R EM A R QU E
Cette section explique comment ajouter directement des scripts à des
objets. Bien que cette approche puisse être pratique pour ajouter de
l’interactivité à des applications Flash, vous devriez suivre les meilleures
techniques de codage et ajouter du code au scénario plutôt qu’à des
objets particuliers. Pour plus d’informations, consultez la section Ajout de
scripts au scénario à l’aide du mode Assistant de script, page 232.
1.
Cliquez sur l’outil Sélection dans le panneau Outils.
2.
Dans le scénario, sélectionnez le calque « menu et bouton ».
Si le calque est verrouillé, déverrouillez-le.
3.
Dans le coin supérieur droit de la scène, sélectionnez le bouton Accueil.
Ajout d’un script à un bouton à l’aide du mode Assistant de script 227
4.
Dans le panneau Actions, le bouton Assistant de script est situé audessus de l’éditeur ActionScript.
Cliquez sur Assistant de script pour afficher le mode Assistant de script.
La fenêtre Assistant de script est vide si aucune fonction n’est sélectionnée.
Au début, la partie Assistant de script du panneau Actions est vide. Le
mode Assistant de script vous demande de sélectionner des options et
de définir des paramètres pour les fonctions à ajouter au bouton
sélectionné. Les paramètres sont affichés lorsque vous ajoutez une
fonction de ActionScript.
R E MA R Q UE
Notez que, lorsque le mode Assistant de script est activé, vous ne pouvez
pas modifier directement du code dans l’éditeur ActionScript puisqu’il
n’est accessible qu’en lecture. Toute interaction avec le code dans
l’éditeur est bloquée par le mode Assistant de script, mais il existe une
exception importante : vous pouvez mettre en surbrillance des fonctions
dans l’éditeur ActionScript et ensuite les supprimer.
228 ActionScript : Utiliser le mode Assistant de script
5.
Pour ajouter une fonction au bouton, cliquez sur Ajouter dans la barre
d’outils.
Le bouton Ajouter permet d’afficher toutes les fonctions prédéfinies de
ActionScript.
6.
A partir de l’option Contrôle du clip, sélectionnez le gestionnaire
d’événements on.
R EM A R QU E
Une autre méthode pour ajouter des fonctions ActionScript consiste à les
afficher et ensuite les sélectionner dans la boîte d’outils Actions. Le
bouton Ajouter dans la barre d’outils du panneau Actions et la boîte
d’outils Actions affichent les mêmes catégories de fonctions et permettent
tous deux d’ajouter des fonctions à l’éditeur.
Le mode Assistant de script vous demande de définir les paramètres des
fonctions.
Ajout d’un script à un bouton à l’aide du mode Assistant de script 229
L’événement release du gestionnaire d’événements on est sélectionné
par défaut.
L’événement release sert à déclencher l’action du script lorsque
l’utilisateur clique sur Accueil.
7.
Cliquez de nouveau sur Ajouter, puis sélectionnez la fonction goto() à
partir de Fonctions globales > option Contrôle du scénario.
Ajout de la fonction qui est déclenchée par l’apparition de l’événement
La fonction goto() est ajoutée en tant qu’action du gestionnaire
d’événements on. En d’autres termes, l’action goto() est exécutée après
que le bouton Accueil a été activé (le gestionnaire on), puis relâché
(l’événement release).
En cas de clic sur le bouton Accueil, le clip devrait se déplacer à l’image
Accueil du scénario et s’y arrêter. Pour cela, vous modifiez à l’aide du
mode Assistant de script les paramètres par défaut de la fonction
goto().
8.
Dans la fenêtre Assistant de script, sélectionnez l’option Go To and Stop
(Atteindre et Arrêter).
9.
Définissez le type pour l’étiquette d’image en le choisissant dans le menu
déroulant Type.
230 ActionScript : Utiliser le mode Assistant de script
10. Dans
le champ Image, entrez home.
Modification des paramètres de fonction pour terminer le script
Les modifications effectuées à l’aide du mode Assistant de script sont
affichées dans l’éditeur ActionScript. Vous venez de créer un script sans
avoir tapé de codes dans l’éditeur ActionScript.
Lorsque vous testerez l’application, un clic sur le bouton Accueil affichera
le titre « Accueil » dans le clip Titre, indiquant que l’image Accueil est
actuellement affichée.
Un clic sur le bouton Accueil affiche « Accueil » dans le clip Titre.
Vous pourriez répéter ce processus pour les boutons A propos, Produits et
Contacts. Toutefois pour ces boutons, vous allez employer une méthode
différente et préférée pour créer des scripts.
Dans chaque cas, à chaque clic sur l’un des boutons, vous souhaitez afficher
les images correspondantes sur le scénario ; par conséquent, vous définirez
comme image cible de la fonction GotoAndStop() les images A propos,
Produits et Contacts, comme vous venez de le faire pour le bouton Accueil.
Ajout d’un script à un bouton à l’aide du mode Assistant de script 231
Ajout de scripts au scénario à
l’aide du mode Assistant de
script
Au lieu d’ajouter des scripts à des objets particuliers et d’agir directement
sur des objets, mais aussi de répartir du code en de nombreux endroits dans
votre document Flash, placez plutôt les scripts dans une image dans le
scénario. Cette section explique comment ajouter des scripts à un scénario.
1.
Dans le scénario principal, sélectionnez l’Image 1 dans le calque
Actions.
2.
Dans la barre d’outils du panneau Actions, sélectionnez Assistant de
script pour afficher la fenêtre Assistant de script.
3.
Dans la boîte d’outils Actions, sélectionnez Classes ActionScript 2.0 >
Animation > Bouton > Evénements et localisez le gestionnaire
d’événements on(release).
Double-cliquez sur le gestionnaire d’événements on(release) pour
l’insérer dans l’éditeur ActionScript.
Insertion de fonctions dans le script à l’aide de la barre d’outils Actions
Notez que le code placé dans un scénario se comporte de manière
différente que le code placé sur des objets. Dans l’exemple précédent,
vous avez dû déterminer l’objet cible pour le gestionnaire d’événements
on(release). En effet, vous n’avez pas ajouté le script directement à
l’objet, mais vous avez fait référence au script à partir du code dans le
scénario. De plus, il utilise explicitement le mot-clé function pour
déclarer une fonction. Vous apprendrez à utiliser le mode Assistant de
script pour traiter ces points dans les étapes suivantes.
232 ActionScript : Utiliser le mode Assistant de script
4.
Sélectionnez le champ Objet.
Dans la boîte d’outils du panneau Actions, le bouton Insérer un
chemin cible est activé.
5.
Cliquez sur le bouton Insérer un chemin cible pour afficher la boîte de
dialogue Insérer un chemin cible.
Sélection de l’objet cible dans la boîte de dialogue Insérer un chemin cible
6.
Sélectionnez le bouton A propos (about_btn) à partir du clip
tween_mc.
7.
Assurez-vous que l’option Chemin relatif est sélectionnée, puis cliquez
sur OK.
L’objet cible (l’interpolation de Menu) est ajouté.
Le chemin de l’objet cible est ajouté au gestionnaire d’événements.
Ajout de scripts au scénario à l’aide du mode Assistant de script 233
Il faut maintenant ajouter la fonction goto(), c’est-à-dire l’action
survenant en cas de clic sur le bouton A propos.
1.
A l’aide de la boîte d’outils Actions ou du bouton Ajouter dans la boîte
d’outils du panneau Actions, sélectionnez Fonctions globales > Contrôle
du scénario et insérez la fonction goto.
2.
Dans la fenêtre Assistant de script, sélectionnez l’option Go To and Stop
(Atteindre et Arrêter).
3.
Définissez le type pour l’étiquette d’image en le choisissant dans le menu
déroulant Type.
4.
Dans le champ Image, entrez about.
Le script de scénario final
Répétez cette procédure pour les boutons Produits et Contacts. Dans
chaque cas, à chaque clic sur l’un des boutons, vous souhaitez afficher les
images correspondantes sur le scénario ; par conséquent, définissez pour
l’image cible de la fonction gotoAndStop() les images Produits et
Contacts comme vous l’avez fait pour le bouton A propos.
234 ActionScript : Utiliser le mode Assistant de script
Ajout d’un script d’image au clip
Titre
La dernière étape consiste à ajouter un script à la dernière image du clip
Titre. Ce script sert à afficher le texte « Accueil » dans le clip Titre
lorsque l’animation du clip est terminée.
1.
Sélectionnez le clip Titre dans le panneau Bibliothèque, son scénario
s’affiche.
Sélection du scénario du clip Titre pour ajouter un script à la dernière
image
2.
Le calque Actions étant sélectionné, choisissez la dernière image (14) sur
le scénario.
3.
Dans le panneau Actions, sélectionnez Assistant de script pour afficher
le mode Assistant de script.
4.
A l’aide de la boîte d’outils Actions ou du bouton Ajouter dans la boîte
d’outils du panneau Actions, sélectionnez Fonctions globales > Contrôle
du scénario et insérez la fonction stop().
Ajout d’un script d’image au clip Titre 235
5.
Ensuite, à l’aide de la boîte d’outils Actions ou du bouton Ajouter,
sélectionnez Classes ActionScript 2.0 > Animation > Clip > Méthodes >
gotoAndStop.
Modification des paramètres de fonction pour terminer le script
6.
Dans le panneau Assistant de script, sélectionnez l’action gotoAndStop
sur la ligne 2.
7.
Sélectionnez le champ Objet.
8.
Cliquez sur le bouton Insérer un chemin cible.
9.
Dans la boîte de dialogue Insérer un chemin cible, sélectionnez l’objet
_root et cliquez sur OK.
10. Dans
11.
le champ Image, entrezaccueil.
Désactivez la case à cocher Expression.
Désormais « Accueil » est affiché lorsque le clip Titre atteint la
dernière image et que l’animation est terminée. C’est l’état initial de
l’application après son chargement et avant que l’utilisateur clique sur
l’un des boutons.
12. Enregistrez
votre travail.
Tous les scripts nécessaires à l’exécution de l’exemple d’application sont
désormais terminés et l’application est prête pour le test.
236 ActionScript : Utiliser le mode Assistant de script
Test de l’application
Vous pouvez tester la lecture de votre future application (fichier SWF) à
n’importe quel moment de sa création. Maintenant après avoir ajouté des
scripts à l’application avec le mode Assistant de script, vous pouvez tester
l’interactivité que vous venez d’intégrer.
1.
Choisissez Fichier > Enregistrer pour enregistrer le fichier FLA.
2.
Choisissez Contrôle > Tester l’animation.
3.
Cliquez sur l’un des boutons (A propos, Produits, Contacts et Accueil)
pour vérifier que ces images sont chargées et que le titre correspondant
est affiché dans le clip Titre.
4.
Une fois que vous en avez terminé avec le test de l’application, refermez
le fichier SWF en fermant la fenêtre de test.
Vous venez d’ajouter avec succès des scripts à un bouton, au scénario
principal et au scénario Titre. Vous pouvez utiliser le mode Assistant de
script de nombreuses façons lors de vos travaux sur des documents Flash
avec ActionScript.
Sommaire
Félicitations, vous savez désormais utiliser le mode Assistant de script pour
ajouter des scripts à des objets et au scénario. En quelques minutes, vous
avez appris à accomplir les tâches suivantes à l’aide du mode Assistant de
script :
■
Afficher le mode Assistant de script dans le panneau Actions et insérer
les fonctions prédéfinies de ActionScript
■
Ajouter un script à un bouton
■
Ajouter des scripts d’image au scénario principal
■
Ajouter un script d’image à la dernière image d’un clip
Pour en savoir plus sur ActionScript, suivez une autre leçon dans la série
Bases d’ActionScript.
Sommaire 237
238 ActionScript : Utiliser le mode Assistant de script
CHAPITRE 19
ActionScript :
Rédiger des scripts
19
Le langage ActionScript fait partie de Macromedia Flash Basic 8 et de
Macromedia Flash Professionnel 8 et offre aux concepteurs et développeurs
de nombreux avantages. Grâce à ActionScript, vous pouvez contrôler la
lecture d’animations en réaction à des événements, tels que le temps écoulé
et le chargement des données ; vous pouvez rendre une animation
interactive en réaction aux actions de l’utilisateur, telles qu’un clic ; vous
pouvez utiliser des objets intégrés, tels qu’un objet bouton, avec des
méthodes, propriétés et événements intégrés associés ; vous pouvez
également créer des classes et des objets personnalisés, ainsi que des
animations plus compactes et efficaces que vous pouvez concevoir à l’aide
des outils de l’interface utilisateur, le tout à l’aide d’un code réutilisable.
ActionScript est un langage de script orienté objet offrant un contrôle sur
la lecture de votre contenu Flash. Au cours des leçons suivantes, vous verrez
la manière dont ActionScript a évolué vers ActionScript 2.0 pour englober
une série d’éléments de langage facilitant le développement de programmes
orientés objet.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Créer l’occurrence d’un symbole . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . . . . 242
Initialiser le document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Appliquer la syntaxe ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . 244
Trouver la documentation de référence d’ActionScript . . . . . . 245
Ajouter des commentaires à ActionScript . . . . . . . . . . . . . . . . . . 245
Rédiger une fonction pour un bouton . . . . . . . . . . . . . . . . . . . . . . 246
239
Copier et modifier la fonction d’un bouton . . . . . . . . . . . . . . . . . . 247
Vérifier la syntaxe et tester votre application . . . . . . . . . . . . . . . . 248
Configurer l’espace de travail
Commencez par ouvrir le fichier de démarrage de la leçon et configurer
l’espace de travail afin d’obtenir la disposition optimale pour votre
apprentissage.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\ActionScript\Write Scripts, puis double-cliquez sur
scripts_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/
ActionScript/Write Scripts et double-cliquez sur scripts_start.fla.
R E MA R Q UE
Le dossier Rédiger des scripts comprend les versions terminées des
fichiers FLA du didacticiel, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
240 ActionScript : Rédiger des scripts
Créer l’occurrence d’un symbole
Vous allez faire glisser l’occurrence d’une animation depuis la bibliothèque
jusqu’à l’écran GPS sur la scène. Puis, vous allez appliquer la
recommandation selon laquelle il faut toujours nommer les occurrences, à
la fois pour obtenir les indicateurs de code et parce que dans vos scripts
vous faites généralement référence aux noms d’occurrences plutôt qu’aux
noms de symboles. Les conseils de code sont des info-bulles qui suggèrent
la syntaxe ActionScript correcte.
1.
Dans le panneau Outils, cliquez sur l’outil Sélection. Sélectionnez le
calque de carte dans le scénario puis cliquez sur l’icône de verrouillage
située près du calque afin de le déverrouiller.
2.
Pour placer le clip correctement, sélectionnez Affichage > Accrochage.
Choisissez Aligner par accrochage et Accrocher aux objets si ces
commandes ne sont pas sélectionnées.
3.
A partir du panneau Bibliothèque (Fenêtre > Bibliothèque), faites glisser
le clip map_skewed vers la partie noire de l’arrière-plan de la scène.
Les repères n’apparaissent pas lorsque vous faites glisser un objet pour la
première fois à partir du panneau de la bibliothèque : relâchez l’objet et
faites-le glisser à nouveau.
4.
Faites de nouveau glisser le clip map_skewed sur la scène afin de faire
apparaître les repères d’alignement. Servez-vous de ces repères pour
aligner le clip sur les bords supérieurs gauche de l’écran du GPS.
R EM A R QU E
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.
Créer l’occurrence d’un symbole 241
5.
Sélectionnez l’occurrence de map_skewed sur la scène et saisissez
screen_mc dans la zone de texte Nom de l’occurrence de l’inspecteur des
propriétés (Fenêtre > Propriétés).
Flash est conçu pour afficher des conseils de code lorsque vous nommez
vos occurrences avec le bon suffixe :
■
Lorsque vous nommez l’occurrence d’un 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.
R E MA R Q UE
Pour en savoir plus sur d’autres suffixes de noms d’occurrence
déclenchant les conseils de code, reportez-vous à la section
Déclenchement des conseils de code du guide Formation à ActionScript 2.0
dans Flash.
Nommer les occurrences de
boutons
En utilisant le bon suffixe pour déclencher les conseils de code, vous allez
fournir des noms d’occurrence à deux occurrences de boutons se trouvant
déjà sur la scène.
1.
Dans le scénario, déverrouillez le calque Buttons.
2.
Sur la scène, sélectionnez l’occurrence de play_button (gros bouton
vert).
3.
Dans la zone de texte Nom de l’occurrence de l’inspecteur des
propriétés, saisissez onButton_btn afin de nommer l’occurrence.
4.
Sur la scène, sélectionnez l’occurrence de button_stop (petit bouton
rouge).
5.
Dans la zone de texte Nom de l’occurrence de l’inspecteur des
propriétés, saisissez offButton_btn afin de nommer l’occurrence.
242 ActionScript : Rédiger des scripts
Initialiser le document
L’état initial des applications définit comment le contenu apparaît la
première fois aux utilisateurs. Les propriétés et les variables sont initialisées
dans la première image d’un document. Vous allez préciser que le clip map
ne doit pas être visible lorsque le fichier SWF est lu pour la première fois.
1.
Sélectionnez l’image 1 dans le calque Actions. Si le panneau Actions
n’est pas déjà ouvert, choisissez Fenêtre > Actions.
Actions - Image apparaît en haut du panneau, indiquant que vous avez
sélectionné une image à laquelle appliquer ActionScript. Il est
recommandé de vérifier si vous êtes bien en train d’associer
ActionScript à l’image voulue.
Le panneau Actions contient une fenêtre de script (zone de texte vide)
dans laquelle vous pouvez saisir directement du texte, une boîte à outils
Actions, qui vous permet de sélectionner ActionScript afin de l’ajouter
à votre script, et un navigateur de scripts qui fonctionne comme
l’explorateur d’animations.
2.
Le long de la partie supérieure du panneau Actions, cliquez sur Insérer
un chemin cible.
3.
Dans la boîte de dialogue Insérer un chemin cible, vérifiez que Relatif,
soit chemin relatif, est sélectionné. A partir de l’arborescence de la boîte
de dialogue, sélectionnez screen_mc. Cliquez sur OK.
Un chemin cible indique à ActionScript l’emplacement d’un objet dans
l’ensemble de la structure d’un document. Pour plus d’informations sur
les chemins, reportez-vous à la section Utilisation de chemins cibles
absolus et relatifs dans le guide Utilisation de Flash.
4.
Cliquez sur la fenêtre de script et, à la fin du texte screen_mc, insérez un
point (.).
Initialiser le document 243
5.
Lorsque vous saisissez le point, des indicateurs de code pour le clip
s’affichent parce que vous avez utilisé le suffixe _mc quand vous avez
nommé l’occurrence. Double-cliquez sur _visible dans la liste des
conseils de code, puis entrez :
= false;
Cette ligne de code rend le clip screen_mc invisible sur la scène.
R EM A R QU E
Si les indicateurs de code n’apparaissent pas, cela signifie que l’option
indicateurs de code n’est pas sélectionnée dans les préférences du
panneau Actions. Vous pouvez saisir _visible directement dans la fenêtre
de script. Vous pouvez également modifier les préférences en cliquant sur
le menu déroulant dans le coin supérieur droit du panneau Actions. A partir
du menu déroulant, choisissez Préférences puis Indicateurs de code dans
l’onglet ActionScript.
Tout au long de la programmation, veillez à enregistrer souvent votre
animation.
Appliquer la syntaxe
ActionScript
Tous les langages, qu’il s’agisse de langages informatiques ou du langage
humain, sous quelque forme que ce soit, suivent des règles précises qui
favorisent la compréhension. Ces règles représentent la syntaxe.
Flash utilise la syntaxe par points, ce qui veut dire que le point (.) sert à
relier les parties d’un script. Les autres éléments syntaxiques d’ActionScript
incluent :
■
Le point virgule (;) dans les instructions ActionScript indique, tout
comme le point dans une phrase normale, la fin d’une instruction.
■
Les parenthèses () regroupent les arguments qui s’appliquent à une
instruction ActionScript.
■
Les accolades {} regroupent les instructions ActionScript associées.
Vous pouvez utiliser les crochets pour hiérarchiser les instructions.
Plus loin dans cette leçon, vous allez utiliser les fonctionnalités de Flash
vous permettant de tester votre syntaxe.
244 ActionScript : Rédiger des scripts
Trouver la documentation de
référence d’ActionScript
Si, au cours de la programmation, vous souhaitez en savoir plus sur le code
ActionScript que vous êtes en train de saisir, vous pouvez sélectionner
l’action dans la boîte à outils Actions ou dans la fenêtre de script et cliquer
sur Référence. Le panneau Aide affiche des informations concernant
l’action sélectionnée.
1.
Dans la fenêtre de script du panneau Actions, double-cliquez sur
visible afin de sélectionner ce terme.
R E MA R Q UE
Après l’étape suivante, vous allez changer de sujet, donc sortir de cette
leçon, dans le panneau Aide. Dans le panneau Aide, cliquez sur l’icône
Retour de l’historique pour revenir à ce sujet.
2.
En haut du panneau Actions, cliquez sur l’icône Aide.
La valeur visible apparaît dans le panneau Aide.
Ajouter des commentaires à
ActionScript
Dans ActionScript, le texte situé après la double barre oblique (//)
représente des commentaires dont Macromedia Flash Player ne tient pas
compte. Les commentaires décrivent la fonctionnalité du script afin que
d’autres développeurs puissent le comprendre, mais vous pouvez aussi vous
servir des commentaires pour désactiver des sections de votre script au
cours du débogage. Il est recommandé de toujours ajouter des
commentaires explicatifs à vos scripts.
■
Dans la fenêtre de script du panneau Actions, placez le point
d’insertion au début de la ligne de code, puis tapez //Initialise le
document pour masquer l’écran du clip. Appuyez sur Entrée
(Windows) ou sur Retour (Macintosh).
Ajouter des commentaires à ActionScript 245
Dans la fenêtre de script, le texte se présente comme suit :
// Initialise le document pour masquer l’écran du clip.
this.screen_mc._visible = false;
R EM A R QU E
Si vos commentaires tiennent sur plusieurs lignes, utilisez /* à la place de
la double barre oblique au début du commentaire et */ à la fin.
Rédiger une fonction pour un
bouton
Dans ActionScript, une commande est appelée fonction. Une fonction est
un script que vous pouvez rédiger une seule fois et réutiliser dans un
document afin d’accomplir une tâche donnée. Vous allez rédiger une
fonction qui fait apparaître (visible = true) le clip screen_mc lorsque
l’utilisateur relâche le bouton de la souris.
1.
Dans la fenêtre de script du panneau Actions, cliquez après la dernière
ligne de code, appuyez deux fois sur Entrée ou sur Retour puis tapez //
fonction pour afficher l’animation .
2.
Appuyez sur Entrée ou sur Retour et cliquez sur Insérer un chemin cible,
le long de la partie supérieure du panneau Actions. Sélectionnez
onButton_btn à partir de l’arborescence et cliquez sur OK.
3.
Dans la fenêtre de script, saisissez un point (.) et double-cliquez sur
onRelease dans la liste des conseils de code qui s’affiche.
4.
Dans la fenêtre de script, appuyez sur la barre d’espace et saisissez :
= function(){
La ligne de code que vous venez de compléter se présente ainsi :
this.onButton_btn.onRelease = function(){
Vous savez déjà sélectionner les objets dans la boîte de dialogue Insérer
chemin cible et vous allez à présent saisir les noms d’occurrence
directement dans la fenêtre de script.
5.
Appuyez sur Entrée ou sur Retour et saisissez :
screen_mc._visible = true;
246 ActionScript : Rédiger des scripts
6.
Appuyez sur Entrée ou sur Retour et saisissez }; pour préciser la fin de
l’instruction.
La fonction se présente ainsi :
// fonction pour afficher l’animation
this.onButton_btn.onRelease = function(){
screen_mc._visible = true;
};
Copier et modifier la fonction
d’un bouton
Vous venez de créer une fonction définissant la propriété visible d’un clip
sur true lorsque l’utilisateur relâche le bouton de la souris après un clic.
Vous avez certainement deviné comment créer une autre fonction
masquant le clip screen_mc : réglez la propriété _visible du clip sur
false lorsque l’utilisateur clique sur un bouton d’arrêt. Vous allez à
présent créer cette fonction.
1.
Dans la fenêtre de script, choisissez la fonction que vous venez d’entrer
(y compris le commentaire, les accolades et le point-virgule). Copiez le
texte selon la procédure habituelle, grâce au raccourci Ctrl+C
(Windows) ou Commande+C (Macintosh).
2.
Dans la fenêtre de script, placez le point d’insertion après la dernière
ligne de code. Appuyez ensuite deux fois sur Entrée (Windows) ou
Retour (Macintosh) et collez le texte selon la procédure habituelle, avec
le raccourci Ctrl + V (Windows) ou Commande + V (Macintosh).
3.
Dans la fonction que vous venez de copier, remplacez onButton_btn
par offButton_btn.
N’oubliez pas que précédemment vous avez attribué un nom
d’occurrence de offButton_btn à une occurrence.
4.
Dans la fonction que vous venez de copier, modifiez la propriété
visible du clip screen_mc de true à false.
Copier et modifier la fonction d’un bouton 247
5.
Dans la fonction que vous venez de copier, modifiez le commentaire
situé après la double barre oblique en saisissant fonction pour
masquer l’animation.
L’ensemble du script se présente ainsi :
// Initialise le document pour masquer l’écran du clip.
this.screen_mc._visible = false;
// fonction pour afficher l’animation
this.onButton_btn.onRelease = function(){
screen_mc._visible = true;
};
// fonction pour masquer l’animation
this.offButton_btn.onRelease = function(){
screen_mc._visible = false;
};
Vérifier la syntaxe et tester votre
application
Comme vous l’avez appris précédemment au cours de cette leçon, pour
bien fonctionner, ActionScript requiert une syntaxe correcte. Flash offre
plusieurs façons de tester votre syntaxe.
1.
Pour vérifier la syntaxe, effectuez l’une des opérations suivantes :
■
■
Cliquez sur le menu déroulant dans le coin supérieur droit de la
barre de titre du panneau Actions et choisissez Vérifier la syntaxe.
Cliquez sur Vérifier la syntaxe en haut du panneau Actions.
Si elle est correcte, un message s’affiche et vous informe que le script ne
contient pas d’erreurs.
Si la syntaxe est incorrecte, un message vous en avertit : le panneau de
sortie s’affiche et fournit des informations relatives à l’erreur.
2.
248 ActionScript : Rédiger des scripts
Cliquez sur OK pour fermer le message de syntaxe.
3.
Après avoir vérifié que votre code ActionScript ne contient pas d’erreurs
syntaxiques, enregistrez le document et sélectionnez Contrôle > Tester
l’animation.
Lorsque le fichier SWF s’affiche, l’animation ne devrait pas apparaître
dans l’écran GPS parce que sa valeur visible initiale est false.
Lorsque vous cliquez sur le bouton vert et le relâchez, vous appelez la
fonction qui définit la propriété visible du clip sur true. L’animation
est-elle lue ? Enfin, cliquez sur le bouton rouge d’arrêt pour voir si la
propriété visible de l’animation est de nouveau définie sur false.
Vous pouvez tester votre contenu SWF tout au long de la
programmation afin de confirmer que l’animation est lue correctement.
Sommaire
Félicitations, vous savez désormais rédiger des scripts avec ActionScript.
En très peu de temps, vous avez appris à accomplir les tâches suivantes :
■
Nommer les occurrences en appliquant les recommandations
■
Initialiser un document
■
Appliquer la syntaxe ActionScript
■
Trouver la documentation de référence d’ActionScript
■
Ajouter des commentaires à ActionScript
■
Rédiger une fonction
■
Copier et modifier une fonction
■
Vérifier la syntaxe et tester votre application
Pour en savoir plus sur les calques, choisissez Aide > Didacticiels Flash >
Tâches de base : Créer une application.
Sommaire 249
250 ActionScript : Rédiger des scripts
CHAPITRE 20
ActionScript : Ajouter de
l’interactivité
20
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8
permettent aux utilisateurs de se familiariser avec le concept d’interactivité
de multiples façons. En ajoutant de l’interactivité, vous n’êtes plus limité à
une lecture séquentielle de chaque image de votre scénario : vous accédez
au contraire à des options de conception et de développement améliorées.
Ce didacticiel vous présentera des méthodes d’implémentation de
l’interactivité dans Flash.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Nommer les occurrences de boutons . . . . . . . . . . . . . . . . . . . 253
Ajouter une scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Se déplacer entre les séquences . . . . . . . . . . . . . . . . . . . . . . . 254
Contrôler le document à l’aide d’une action stop() . . . . . . . . 254
Lier un bouton à une scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Ajouter des éléments de navigation pour revenir à la
Séquence 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Lire un clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Utiliser un comportement pour lire un fichier MP3 . . . . . . . . 260
Tester votre document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261
R EM A R QU E
Si vous disposez de Macromedia Flash Professionnel 8, vous pouvez
créer un document à partir d’écrans. Ces derniers offrent des options de
navigation supplémentaires. Les écrans de diapositives, par exemple,
incluent déjà une fonctionnalité de navigation intégrée qui permet aux
utilisateurs de se déplacer entre les écrans à l’aide des touches fléchées
du clavier. Pour plus d’informations sur les écrans, choisissez Aide >
Didacticiels Flash > Tâches de base : Créer une présentation avec des
écrans (Flash Professionnel uniquement).
251
Configurer l’espace de travail
Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette
leçon et configurer votre espace de travail, afin de suivre vos leçons dans un
cadre optimal.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\ActionScript\Add Interactivity, puis double-cliquez sur
interactivity_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/
ActionScript/Add Interactivity et double-cliquez sur
interactivity_start.fla.
Le document s’ouvre dans l’environnement auteur de Flash.
R EM A R QU E
Le dossier Ajouter de l’interactivité comprend les versions terminées des
fichiers FLA du didacticiel, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom, dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
Tout au long de cette leçon, pensez à enregistrer fréquemment votre
travail.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail.
4.
Dans le menu contextuel d’affichage de la scène, dans la partie
supérieure droite du scénario, sélectionnez Afficher une image pour
afficher la scène et l’espace de travail.
5.
Cliquez dans l’espace de travail, loin des objets sur la scène de manière
à n’en sélectionner aucun.
252 ActionScript : Ajouter de l’interactivité
Nommer les occurrences de
boutons
Vous devez fournir des noms aux occurrences de boutons de la scène, afin
de pouvoir par la suite faire référence à ces occurrences dans ActionScript.
1.
Dans la partie inférieure droite de la scène, sélectionnez le bouton situé
à gauche.
Dans l’inspecteur des propriétés (Fenêtre > Propriétés > Propriétés),
tapez atteindreSéquence_btn dans la zone de texte Nom de
l’occurrence pour nommer l’occurrence du symbole.
2.
Sélectionnez le bouton du milieu et utilisez l’inspecteur des propriétés
pour donner à ce bouton le nom d’occurrence attacherAnimation_btn.
3.
Sélectionnez le bouton de droite et utilisez l’inspecteur de propriétés
pour donner à ce bouton le nom d’occurrence lireSon_btn.
Ajouter une scène
Dans flash, les séquences vous permettent d’organiser votre document dans
des sections discrètes pouvant contenir le contenu exclusif d’autres
séquences. Vous allez créer et ajouter du contenu dans une nouvelle
séquence.
1.
Sélectionnez Insertion > Séquence.
Vous ne voyez plus la séquence 1, seule la mention Séquence 2 apparaît
désormais au-dessus de la scène. La scène est vide.
2.
Faites glisser le clip Animation du panneau Bibliothèque (Fenêtre >
Bibliothèque) dans la scène.
Une fois le clip sélectionné, utilisez l’inspecteur des propriétés pour
affecter à l’occurrence une coordonnée x de 200 et une coordonnée y de
15. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
Le clip se déplace vers les coordonnées spécifiées sur la scène.
3.
Utilisez l’inspecteur des propriétés pour affecter au clip Animation le
nom d’occurrence animation_mc.
Ajouter une scène 253
4.
Renommez le calque 1 Animation.
Créez un nouveau calque et nommez-le Boutons. Faites glisser une
occurrence du symbole BTNback sur la scène et placez-la à droite du
clip.
5.
Utilisez l’inspecteur de propriétés pour affecter à ce bouton le nom
d’occurrence retour_btn.
Se déplacer entre les séquences
Pour accéder à une séquence spécifique dans l’environnement auteur,
sélectionnez-la dans le panneau Séquence.
1.
Pour ouvrir ce panneau, choisissez Fenêtre > Autres panneaux >
Séquence.
2.
Sélectionnez Séquence 1.
Contrôler le document à l’aide
d’une action stop()
Lorsque vous testez ou publiez un document Flash contenant plusieurs
séquences, ces séquences sont lues de manière linéaire et dans l’ordre dans
lequel elles apparaissent dans le panneau Séquence. Vous allez utiliser une
action stop() qui vous permettra d’arrêter la tête de lecture au niveau de
l’image 1 de la séquence 1 dans le scénario.
1.
Dans le scénario principal de la séquence 1, ajoutez un nouveau calque
et nommez-le Actions.
2.
Cliquez sur l’Image 1 du calque Actions.
Dans la fenêtre de script du panneau Actions (Fenêtre > Actions), tapez
le commentaire ci-dessous, suivi du script permettant d’arrêter la tête
de lecture sur l’image voulue :
// Arrête la tête de lecture sur l’Image 1
stop();
254 ActionScript : Ajouter de l’interactivité
Lier un bouton à une scène
Maintenant que la tête de lecture s’arrête sur l’Image 1, vous pouvez ajouter
un code ActionScript permettant à l’utilisateur d’accéder à la séquence 2
lorsqu’il relâchera sa pression sur l’occurrence de bouton
atteindreSéquence_btn.
■
Appuyez deux fois sur Entrée (Windows) ou Retour (Macintosh) et
tapez le commentaire suivant. Puis rédigez la fonction qui permet à
l’utilisateur d’accéder à la séquence 2 lorsqu’il relâche la pression sur
l’occurrence atteindreSéquence_btn :
// Ce script permet à l’utilisateur d’accéder à la
séquence 2 lorsque l’occurrence de bouton
atteindreSéquence_btn
// est relâchée.
goScene_btn.onRelease = function (){
gotoAndStop("Scene 2", 1);
};
Dans le script que vous venez de rédiger, vous avez utilisé la méthode
onRelease() pour l’objet bouton. La fonction gotoAndStop() est une
fonction de contrôle du scénario permettant de spécifier la séquence et
le numéro de l’image. Dans ce cas, vous avez spécifié l’Image 1.
Ajouter des éléments de
navigation pour revenir à la
Séquence 1
La fonction que vous ajoutez au bouton dans la séquence 2, pour renvoyer
l’utilisateur à la séquence 1, est similaire à la fonction créée pour acheminer
l’utilisateur vers la séquence 2.
1.
Dans le panneau Séquence, sélectionnez Séquence 2.
Dans le scénario, créez un nouveau calque et nommez-le Actions.
Ajouter des éléments de navigation pour revenir à la Séquence 1 255
2.
Sélectionnez l’Image 1 dans le calque Actions.
Dans le panneau Actions, entrez ce qui suit dans la fenêtre de script :
// cette fonction renvoie l’utilisateur vers la
séquence 1 lorsque l’occurrence de bouton retour_btn
// est relâchée.
back_btn.onRelease = function (){
gotoAndStop("Scene 1", 1);
};
Dans cette fonction, seuls les noms du bouton et de la séquence ont
changé.
3.
Dans le panneau Séquence, sélectionnez Séquence 1.
Lire un clip
Vous pouvez configurer votre document pour lire un clip au moment de
l’exécution. La méthode attachMovie() vous permet d’associer
l’occurrence d’un clip du panneau Bibliothèque à la scène, même si vous
n’avez pas placé d’occurrence dans cette scène.
Pour utiliser la méthode attachMovie(), vous devez exporter le symbole
d’ActionScript et lui affecter un identificateur de liaison unique, différent
du nom de l’occurrence.
1.
Dans le panneau Bibliothèque, cliquez avec le bouton droit de la souris
sur le symbole MCTrio et sélectionnez Liaison dans le menu contextuel.
2.
Dans la boîte de dialogue Propriétés de liaison, activez l’option Exporter
pour ActionScript.
3.
Dans la zone de texte Identificateur, vérifiez que MCTrio s’affiche
comme nom de liaison.
4.
Vérifier que l’option Exporter dans la première image est sélectionnée,
puis cliquez sur OK.
Les clips exportés en vue d’une utilisation dans ActionScript sont
chargés, par défaut, avant la première image du fichier SWF qui les
contient. Ce chargement peut entraîner un retard avant la lecture de la
première image. Lorsque vous affectez un identifiant de liaison à un
élément, vous pouvez spécifier un chargement du clip à la première
image, afin d’éviter tout retard de lecture.
256 ActionScript : Ajouter de l’interactivité
Utiliser la méthode attachMovie() pour lire
un clip
Vous allez maintenant utiliser la méthode attachMovie() pour charger le
clip vidéo et affecter un nom d’occurrence au symbole. Etant donné que
l’occurrence du symbole n’existe pas dans la scène, vous la nommer par
programmation.
1.
Dans le scénario, sélectionnez l’Image 1 dans le calque Actions pour la
Séquence 1.
2.
Dans la fenêtre de script du panneau Actions, placez le point d’insertion
à la fin de votre dernière ligne de code.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh), puis tapez
ce qui suit pour ajouter un commentaire et créer une nouvelle
fonction :
// cette fonction lit trio_mc lorsque l’occurrence de
bouton attacherAnimation_btn
// est relâchée.
attachMovie_btn.onRelease = function(){
Ensuite, vous devez spécifier ce que fait cette fonction : elle lit le clip
sur le scénario root, à savoir le scénario principal. Dans votre script,
vous devez référencer le clip via le nom de l’identificateur de liaison
défini dans la boîte de dialogue Propriétés de liaison (MCTrio).
En outre, même si vous n’avez pas placé d’occurrence du symbole
MCTrio dans la scène, vous devez utiliser ActionScript pour créer un
nom d’occurrence pour ce symbole. Le nom d’occurrence que vous
devez spécifier est trio_mc.
Lire un clip 257
3.
Le point d’insertion se trouvant à la fin de la dernière ligne de script,
appuyez sur Entrée ou sur Retour. Ensuite, tapez ce qui suit :
this._parent.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 vidéo doit être lu.
Chaque occurrence de clip a son propre axe z (profondeur)
déterminant l’ordre de compression d’un clip au sein de son fichier
SWF ou son clip parent. Lorsque vous créez un nouveau clip à
l’exécution à l’aide de la méthode attachMovie(), vous devez toujours
spécifier une profondeur pour ce nouveau clip, sous forme de
paramètre de méthode.
R EMA R Q U E
Pour plus d’informations sur la méthode attachMovie(), reportez-vous à
attachMovie() dans le Guide de référence du langage ActionScript 2.0.
En plus, vous pouvez utiliser le Guide de référence du langage ActionScript
2.0 pour obtenir des informations sur ActionScript qui permet une gestion
approfondie des fonctions ; getNextHighestDepth(), getDepth(),
getInstanceAtDepth() sont des méthodes de la classe MovieClip. La
classe DepthManager vous permet de gérer les affectations de
profondeur relatives d’un clip.
Spécifier les coordonnées d’un clip sur la
scène
Outre l’axe z pour le clip, vous devez spécifier les coordonnées x et y pour
définir la position du clip dans la scène lors de l’exécution.
■
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) après la
dernière ligne dans la fenêtre de script, puis tapez ce qui suit :
trio_mc._x = 275;
trio_mc._y = 200;
};
258 ActionScript : Ajouter de l’interactivité
Purger le clip
Une fois la lecture du clip terminée, vous devez supprimer le clip de la
scène au moment où l’utilisateur accède à la séquence 2. Pour cela, vous
pouvez modifier le script de l’occurrence de atteindreSéquence_btn de
façon à lancer la « purge » du clip.
1.
Dans le scénario, sélectionnez l’Image 1 du calque Actions.
Dans la fenêtre de script, cliquez à la fin de la ligne de la fonction
permettant à l’utilisateur d’accéder à la séquence 2 afin d’y placer le
point d’insertion :
gotoAndStop("Scene 2", 1);
2.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh) et tapez le
code suivant : ce code permet de purger le clip lors de l’exécution de la
fonction, afin que la lecture du clip ne continue pas lorsque l’utilisateur
accède à la séquence 2 :
unloadMovie("trio_mc");
La fonction entière pour atteindreSéquence_btn doit se présenter
comme suit :
// Ce script permet à l’utilisateur d’accéder à la
séquence 2 lorsque l’occurrence de bouton
atteindreSéquence_btn
// est relâchée.
goScene_btn.onRelease = function() {
gotoAndStop("Scene 2", 1);
unloadMovie("trio_mc");
};
Votre script entier doit se présenter comme suit :
// Arrête la tête de lecture sur l’Image 1
stop();
// Ce script permet à l’utilisateur d’accéder à la
séquence 2 lorsque l’occurrence de bouton
atteindreSéquence_btn
// est relâchée.
goScene_btn.onRelease = function (){
gotoAndStop("Scene 2", 1);
unloadMovie("trio_mc");
};
// Cette fonction lit trio_mc lorsque l’occurrence de
bouton attacherAnimation_btn
// est relâchée.
attachMovie_btn.onRelease = function(){
Lire un clip 259
this._parent.attachMovie("MCTrio", "trio_mc", 1);
trio_mc._x = 275;
trio_mc._y = 200;
Utiliser un comportement pour
lire un fichier MP3
Si vous souhaitez ajouter de l’interactivité à votre document à l’aide
d’ActionScript, les comportements s’avèrent des alliés précieux en ajoutant
le code ActionScript pour vous. Pour lire un fichier MP3 depuis la
bibliothèque, vous allez utiliser un comportement audio.
1.
Dans le panneau Bibiothèque, cliquez avec le bouton droit de la souris
(Windows) ou en maintenant la touche Contrôle enfoncée (Macintosh)
sur ping.mp3, puis sélectionnez Liaison dans le menu contextuel.
2.
Dans la boîte de dialogue Propriétés de liaison, sélectionnez Exporter
pour ActionScript et vérifiez que l’option Exporter dans la première
image est activée.
3.
Vérifiez que ping.mp3 apparaît dans la zone de texte Identificateur, puis
cliquez sur OK.
4.
Dans la scène, sélectionnez l’occurrence lireSon_btn.
5.
Dans le panneau Comportements (Fenêtre > Comportements), cliquez
sur le bouton Ajouter (+) et sélectionnez Son > Charger un son de la
bibliothèque.
6.
Dans la zone de texte ID de liaison, tapez ping.mp3 ; dans la zone de
texte Nom, entrez ping.
Cliquez sur OK.
260 ActionScript : Ajouter de l’interactivité
Tester votre document
Pour vérifier que l’interactivité fonctionne correctement, vous devez tester
votre document.
1.
Choisissez Contrôle > Tester l’animation.
2.
Dans le fichier SWF, cliquez sur le bouton de gauche pour lire la
séquence 2.
Lorsque vous avez fini de visualiser la séquence 2, cliquez sur le bouton
Retour.
3.
Dans la séquence 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 vérifier que le clip est
purgé.
Sommaire
Vous savez désormais créer un document interactif. En quelques minutes
vous avez appris à accomplir les tâches suivantes :
■
Créer une nouvelle séquence
■
Rédiger du code ActionScript pour naviguer entre les séquences
■
Rédiger du code ActionScript pour lire un clip animé à l’exécution
■
Utiliser un comportement pour lire un fichier MP3
Pour en savoir plus sur ActionScript, suivez une autre leçon dans la série
Bases d’ActionScript.
Sommaire 261
262 ActionScript : Ajouter de l’interactivité
CHAPITRE 21
ActionScript : Créer un formulaire
contenant une logique conditionnelle
et envoyer des données
21
Vous pouvez créer un formulaire contenant une logique conditionnelle
permettant au fichier SWF de répondre aux interactions de l’utilisateur et
envoyer les données de ce formulaire du fichier SWF vers une source
externe. Ce didacticiel vous explique comment créer un formulaire simple.
Avant de suivre cette leçon, vous devriez avoir des notions sur la rédaction
de fonctions et de variables ; si nécessaire, choisissez Aide > Didacticiels
Flash > Tâches de base : Créer une application.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Ajouter un champ de saisie de texte pour collecter les données de
formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Ajouter un bouton Envoyer au formulaire . . . . . . . . . . . . . . . . . . . 266
Ajouter un message d’erreur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Ajouter un message de confirmation . . . . . . . . . . . . . . . . . . . . . . . .267
Ajouter une action stop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267
Ajouter des étiquettes d’images pour la navigation . . . . . . . . . . 269
Ajouter une logique conditionnelle pour le bouton Envoyer . . . .270
Transmettre des données hors d’un fichier SWF . . . . . . . . . . . . . 271
Rédiger une fonction pour le bouton Réessayer . . . . . . . . . . . . . .272
Tester votre fichier SWF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .273
263
Configurer l’espace de travail
Dans un premier temps, vous devez ouvrir le fichier de démarrage de cette
leçon et configurer votre espace de travail, afin de suivre vos leçons dans un
cadre optimal.
1.
Pour ouvrir votre fichier de démarrage, sélectionnez Fichier > Ouvrir
dans Flash et naviguez jusqu’au fichier :
■
■
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\ActionScript\Create a Form, puis double-cliquez sur
simpleForm_start.fla.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/
ActionScript\Create a Form et double-cliquez sur
simpleForm_start.fla.
R E MA R Q UE
Le dossier Créer un formulaire comprend les versions terminées des
fichiers FLA du didacticiel, pour votre référence.
2.
Choisissez Fichier > Enregistrer sous, puis enregistrez le document sous
un nouveau nom dans le même dossier, afin de conserver le fichier de
démarrage d’origine.
3.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail pour les leçons.
4.
Le cas échéant, faites glisser la limite inférieure du scénario (Fenêtre >
Scénario) vers le bas pour élargir la fenêtre.
264 ActionScript : Créer un formulaire contenant une logique conditionnelle et envoyer des données
Ajouter un champ de saisie de
texte pour collecter les données
de formulaire
Dans un premier temps, vous allez insérer un champ de texte dans lequel
les utilisateurs pourront saisir des données. Vous nommerez ce champ de
texte afin de pouvoir vous y référer ultérieurement, dans le code
ActionScript de votre application Flash.
1.
Cliquez dans l’espace de travail, loin des objets sur la scène de manière
à n’en sélectionner aucun.
2.
Dans le panneau Outils, cliquez sur l’outil Texte.
3.
Dans l’inspecteur des propriétés, effectuez les opérations suivantes pour
définir les attributs de texte :
■
Sélectionnez Texte de saisie dans le menu contextuel Type de texte.
■
Sélectionnez _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 sélectionnez un bleu
foncé.
Vérifiez que l’option Aligner à gauche est sélectionnée.
Vérifiez que l’option Une seule ligne est sélectionnée dans le menu
contextuel Type de ligne.
4.
Dans le scénario, sélectionnez l’Image 1 du calque Input Text.
5.
Dans la scène, faites glisser l’outil Texte pour créer un champ de saisie
de texte à droite du texte http://.
6.
Le cas échéant, utilisez l’outil Sélection pour faire glisser le champ de
texte ou utilisez les touches fléchées pour ajuster sa position.
7.
Le champ de saisie de texte étant toujours sélectionné dans l’inspecteur
de propriétés, tapez url_txt dans la zone de texte Nom de l’occurrence.
Vous ferez référence à ce nom d’occurrence ultérieurement dans votre
code ActionScript.
Ajouter un champ de saisie de texte pour collecter les données de formulaire 265
Ajouter un bouton Envoyer au
formulaire
Le panneau Bibliothèque contient un symbole de bouton d’envoi (Submit
button) que vous pouvez ajouter au formulaire.
1.
Faites-le glisser depuis le panneau Bibliothèque (Fenêtre >
Bibliothèque) vers la scène et placez-le sur le guide SubmitURL.
2.
Faites glisser le bouton ou utilisez les touches fléchées pour ajuster sa
position, le cas échéant.
3.
Dans l’inspecteur de propriétés, tapez Envoyer_btn dans la zone de texte
Nom de l’occurrence.
Ajouter un message d’erreur
Vous allez ajouter un message qui s’affichera si l’utilisateur clique sur le
bouton Envoyer avant de saisir des données.
1.
Dans le scénario, le calque Branding étant sélectionné, cliquez sur le
bouton Insérer un calque et nommez le calque Boîtes de dialogue.
2.
Sélectionnez l’Image 5 du calque Boîtes de dialogue.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contrôle enfoncée (Macintosh) sur le calque sélectionné, puis
choisissez Insérer une image-clé vide dans le menu contextuel.
3.
Faites glisser le symbole de clip Dialog Box-error du panneau
Bibliothèque vers le centre de la scène.
4.
Dans le scénario, sélectionnez l’Image 5 du calque Buttons.
266 ActionScript : Créer un formulaire contenant une logique conditionnelle et envoyer des données
5.
Faites glisser le symbole Try Again Button du panneau Bibliothèque
vers la scène, pour le placer sous le texte du message d’erreur.
6.
Le bouton étant toujours sélectionné, nommez-le Reessayer_btn dans
l’inspecteur des propriétés.
Ajouter un message de
confirmation
Vous allez maintenant ajouter un message qui s’affichera lorsque
l’utilisateur enverra une entrée dans le champ de texte.
1.
Dans le calque Boîtes de dialogue, sélectionner l’Image 10.
Cliquez avec le bouton droit de la souris (Windows) ou en maintenant
la touche Contrôle enfoncée (Macintosh) sur l’image sélectionnée, puis
choisissez Insérer une image-clé vide dans le menu contextuel.
2.
Faites glisser le symbole de clip Dialog Box-confirm du panneau
Bibliothèque vers le centre de la scène.
3.
Fermez le panneau Bibliothèque.
Ajouter une action stop()
Une application Flash chargée dans Flash Player est automatiquement lue
en boucle continue. ActionScript vous permet de contrôler le mouvement
de la tête de lecture dans le scénario. Vous allez ajouter une action stop()
dans la première image de votre application, afin de permettre à l’utilisateur
de renseigner le champ de texte.
1.
Dans le scénario, le calque Input Text étant sélectionné, ajoutez un
nouveau calque que vous nommerez Actions.
2.
Sélectionnez l’Image 1 dans le calque Actions.
Ajouter une action stop() 267
3.
Dans le panneau Actions (Fenêtre > Actions), vérifiez que Image 1 est
sélectionné.
4.
Cliquez dans la fenêtre de script du panneau Actions et tapez le
commentaire suivant :
// Arrête la tête de lecture sur l’Image 1.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
5.
Tapez stop(); pour ajouter l’action stop.
268 ActionScript : Créer un formulaire contenant une logique conditionnelle et envoyer des données
Ajouter des étiquettes d’images
pour la navigation
Le but est, lorsque l’utilisateur appuie sur le bouton Envoyer, que Flash
accède automatique au message d’erreur ou au message de confirmation, en
fonction des données entrées dans le champ de texte. L’étiquetage d’une
image vous permet de la référencer facilement dans ActionScript. Cela est
particulièrement utile pour envoyer la tête de lecture vers une image
spécifique.
Vous allez ajouter des étiquettes d’images afin de faciliter la navigation dans
votre application Flash.
1.
Ajoutez une image-clé (Insertion > Scénario > Image-clé) dans l’Image 5
du calque Actions.
2.
Dans l’inspecteur des propriétés, tapez erreur dans la zone de texte
Etiquette de l’image.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh). Le texte de
l’étiquette et un indicateur apparaissent dans l’Image 5 dans le scénario.
3.
Ajoutez une image-clé à l’Image 10 du calque Actions.
Dans l’inspecteur des propriétés, tapez confirmation dans la zone de
texte Etiquette de l’image. Appuyez sur Entrée ou Retour.
Ajouter des étiquettes d’images pour la navigation 269
Ajouter une logique
conditionnelle pour le bouton
Envoyer
ActionScript vous permet de configurer Flash pour comparer les
informations et y réagir en fonction des critères spécifiés. Dans cet
exemple, vous allez ajouter un code ActionScript afin que Flash exécute
une action spécifique si l’utilisateur n’entre pas de données dans le champ
de texte, et une autre action pour le cas où il renseigne le champ.
1.
Sélectionnez l’Image 1 dans le calque Actions.
Dans la fenêtre de script, placez le point d’insertion après le code
stop();. Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
2.
Tapez le commentaire suivant :
// Ajoute une logique conditionnelle pour le bouton
Envoyer
// qui valide l’entrée de l’utilisateur.
Appuyez sur Entrée ou Retour.
3.
Dans le panneau Actions, cliquez sur Insérer un chemin cible, situé en
haut de la fenêtre.
4.
Dans la boîte de dialogue Insérer un chemin cible, vérifiez que l’option
Relatif est sélectionnée.
Cliquez sur Envoyer_btn dans l’arborescence, puis cliquez sur OK.
5.
Dans la fenêtre de script, tapez un point (.) à la suite de Envoyer_btn,
puis ajoutez le code onRelease.
6.
Le point d’insertion étant placé après onRelease, tapez = function
(){} dans la fenêtre de script.
7.
Placez le point d’insertion entre les accolades, appuyez sur Entrée ou sur
Retour, puis tapez if (url_txt.text == null || url_txt.text ==
""){ dans la fenêtre de script.
Dans le langage ActionScript, les lignes parallèles signifient ou.
8.
Le point d’insertion se trouvant toujours entre les accolades, appuyez sur
Entrée ou sur Retour.
9.
Tapez gotoAndStop("erreur"); dans la fenêtre de script.
Appuyez sur Entrée ou Retour.
270 ActionScript : Créer un formulaire contenant une logique conditionnelle et envoyer des données
10. Placez
le point d’insertion après les accolades et tapez else{ dans la
fenêtre de script.
Appuyez sur Entrée ou Retour.
11.
Tapez gotoAndStop("confirmation"); dans la fenêtre de script.
Appuyez sur Entrée ou sur Retour, tapez }, puis appuyez à nouveau sur
Entrée ou sur Retour et ajoutez };. Votre script se présente sous la
forme suivante :
// Arrête la tête de lecture sur l’Image 1
stop();
// Ajoute une logique conditionnelle pour le bouton
Envoyer
// qui valide l’entrée de l’utilisateur.
this.submit_btn.onRelease = function(){
if (url_txt.text == null || url_txt.text ==””){
gotoAndStop("error");
} else {
gotoAndStop("confirm")
}
};
Transmettre des données hors
d’un fichier SWF
Vous pouvez envoyer des données à partir d’une application Flash de
plusieurs manières. Par exemple, cette leçon vous montre comment
envoyer les données à un serveur web pour charger une page web dans
votre navigateur. Après l’instruction else, vous devez ajouter le script
ActionScript demandant à Flash d’atteindre l’URL indiquée par
l’utilisateur dans le champ de texte.
1.
Dans la fenêtre de script, placez le point d’insertion devant la ligne
gotoAndStop("confirmation") .
2.
Ensuite, dans la boîte à outils Actions, sélectionnez Fonctions globales >
Navigateur/Réseau, puis double-cliquez sur getURL.
Transmettre des données hors d’un fichier SWF 271
3.
Placez le point d’insertion entre les parenthèses getURL(), puis tapez
"http://"+url_txt.text pour spécifier les données à transmettre
depuis le fichier SWF
(ne laissez pas d’espaces dans le code). Votre script doit avoir la forme
suivante :
stop();
this.submit_btn.onRelease = function(){
if (url_txt.text == null || url_txt.text ==””){
gotoAndStop("Error");
} else {
getUrl ("http://"+url_txt.text);
gotoAndStop("Confirm")
}
};
Rédiger une fonction pour le
bouton Réessayer
Une fonction est un script que vous pouvez utiliser plusieurs fois afin
d’effectuer une tâche spécifique. Vous pouvez transmettre des paramètres à
une fonction pour qu’elle renvoie une valeur. Dans cet exemple, lorsque
l’utilisateur clique sur le bouton Réessayer, une fonction s’exécute pour
renvoyer la tête de lecture à l’Image 1.
Rédigez cette fonction dès à présent. Dans ce script, vous allez indiquer le
numéro de l’image, car l’Image 1 n’a pas d’étiquette.
1.
Dans le scénario, sélectionnez l’Image 5 du calque Actions.
2.
Dans la fenêtre de script, tapez le commentaire suivant :
// la fonction de ce bouton renvoie l’utilisateur à
l’Image 1.
Appuyez sur Entrée (Windows) ou sur Retour (Macintosh).
3.
Tapez Réessayer_btn.onRelease = function(){, puis appuyez sur
Entrée ou sur Retour.
4.
Entrez gotoAndStop(1);, appuyez sur Entrée ou sur Retour, puis
ajoutez } pour compléter le script.
272 ActionScript : Créer un formulaire contenant une logique conditionnelle et envoyer des données
Tester votre fichier SWF
Vous allez maintenant tester votre document en saisissant une URL et en
vérifiant le résultat.
1.
Choisissez Contrôle > Tester l’animation.
2.
Lorsque le fichier SWF s’ouvre, cliquez sur Envoyer avant de saisir quoi
que ce soit dans le champ de texte.
Le message d’erreur s’affiche.
3.
Cliquez sur Réessayer, puis tapez l’URL d’un site web valide dans le
champ de saisie de texte.
Cliquez sur Envoyer.
Votre navigateur par défaut ouvre la page web.
Sommaire
Vous savez désormais rédiger un script avec une logique conditionnelle et
envoyer des données. En quelques minutes vous avez appris à accomplir les
tâches suivantes :
■
Ajouter un champ de saisie de texte à un document
■
Créer un symbole de bouton
■
Ajouter une action stop()
■
Rédiger un script qui valide le formulaire avec logique conditionnelle
■
Transmettre des données hors d’un fichier SWF
■
Rédiger une fonction
Pour en savoir plus sur Flash, choisissez une autre leçon.
Sommaire 273
274 ActionScript : Créer un formulaire contenant une logique conditionnelle et envoyer des données
CHAPITRE 22
ActionScript : Utiliser
des objets et des classes
22
Dans Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8, une
classe est le modèle de définition d’un type d’objet. A tout objet correspond
une classe sous-jacente ; par exemple, tout clip a une méthode appelée
getURL : la méthode getURL est donc définie dans la définition de classe
d’un clip. Flash contient un grand nombre de classes prédéfinies, dont les
classes MovieClip, Array, Color et CheckBox. Ce didacticiel vous montrera
comment créer et modifier des classes.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Configurer l’espace de travail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276
En savoir plus sur les classes et les types d’objet . . . . . . . . . . . . .276
Créer un objet à partir d’une classe . . . . . . . . . . . . . . . . . . . . . . . . . 277
Créer une classe personnalisée . . . . . . . . . . . . . . . . . . . . . . . . . . . .279
Créer deux objets de la classe Product . . . . . . . . . . . . . . . . . . . . . 283
A propos du redimensionnement des classes existantes . . . . . 284
Etendre la classe MovieClip pour créer une nouvelle classe . . 285
R EM A R QU E
Ce didacticiel est destiné aux développeurs connaissant les concepts de
base de Flash et d’ActionScript.
275
Configurer l’espace de travail
Tout d’abord, vous devez afficher les fichiers terminés et configurer votre
espace de travail, afin de suivre vos leçons dans un cadre optimal.
1.
Affichez les fichiers terminés.
Vous n’avez pas besoin des fichiers de démarrage pour cette leçon. Vous
trouverez les fichiers terminés (handson1.fla, handson2.fla,
handson3.fla, Product.as et Drag.as), qui sont des exemples de fichiers
que vous allez créer dans cette leçon :
■
■
2.
Sous Windows, ouvrez le dossier lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\ActionScript\Work with Objects and Classes.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/
ActionScript\Work with Objects and Classes.
Choisissez Fenêtre > Présentation de l’espace de travail > Par défaut afin
de configurer votre espace de travail.
En savoir plus sur les classes et
les types d’objet
Une classe (ou type d’objet) s’apparente à un modèle. Un objet n’existe pas
tant qu’il n’est pas créé ou instancié à partir d’une définition de classe. Un
objet est une occurrence de classe.
Les propriétés correspondent aux caractéristiques d’un objet. Par exemple,
lorsque vous alignez des clips, vous modifiez les propriétés_x et _y de
l’objet MovieClip. Une propriété est une variable associée à une classe. Une
propriété peut être publique (public), ce qui signifie qu’elle est accessible en
dehors de la classe, ou privée (private), ce qui signifie qu’elle est accessible
uniquement à l’intérieur de la classe.
En termes orientés objet, une méthode est un comportement ou une
procédure pouvant agir sur l’objet. Prenons comme exemple la méthode
throw() appliquée à une balle : la méthode connaît la taille et le poids de la
balle. Une méthode connaît l’objet et toutes les propriétés qu’il contient et
peut agir sur cet objet.
276 ActionScript : Utiliser des objets et des classes
Créer un objet à partir d’une
classe
Vous allez créer une classe à l’aide d’outils visuels (la classe TextField) et de
code (en utilisant la classe Date).
1.
Ouvrez un nouveau document Flash et renommez le calque Layer 1 en
Texte.
2.
Dans le calque Texte, créez un champ de texte dynamique et attribuezlui le nom d’occurrence currentDate_txt (dateActuelle_txt).
3.
Créez un calque Actions.
Sélectionnez l’Image 1 du calque Actions et ouvrez le panneau Actions.
4.
Créez ou instanciez un objet de la classe Date, appelé myDate
(maDate) :
var myDate:Date=new Date();
5.
Créez une variable appelée currentMonth (moisCourant) équivalant à
la méthode getMonth() :
var currentMonth:Number = myDate.getMonth();
6.
Tracez la valeur de currentMonth :
trace (currentMonth);
7.
Enregistrez et testez le document.
Vous devriez voir apparaître un numéro dans le panneau de sortie
correspondant au mois.
La méthode getMonth() affiche le mois courant. La méthode
getMonth() est indexée sur zéro, ce qui signifie que la numérotation
démarre à zéro au lieu de un : le numéro affiché est donc inférieur de
un par rapport au mois actuel.
8.
Fermez le panneau de sortie et la fenêtre du fichier SWF.
Créer un objet à partir d’une classe 277
Modifier votre script
Vous allez modifier votre script pour corriger le décalage.
1.
Ajoutez +1 à la valeur de currentMonth ; testez votre document pour
être certain que le numéro du mois courant apparaît.
Cette ligne de script doit prendre la forme suivante :
var currentMonth:Number = myDate.getMonth()+1;
2.
Commentez l’instruction trace :
// trace (currentMonth);
3.
Sous l’instruction trace, définissez la propriété autoSize de votre zone
de texte sur true :
currentDate_txt.autoSize = true;
4.
Utilisez la propriété de texte de votre zone de texte pour afficher la date
du jour sous la forme suivante : Today is mm/jj/aaaa (Aujourd’hui le
mm//jj/aaaa).
Utilisez la variable currentMonth déjà créée, plus les méthodes
getDate() et getFullYear() de l’objet Date :
currentDate_txt.text="Today is "+currentMonth+"/"+
myDate.getDate() + "/"+myDate.getFullYear();
5.
Vérifiez que votre script s’affiche comme suit :
var myDate:Date=new Date();
var currentMonth:Number = myDate.getMonth()+1;
// trace (currentMonth);
currentDate_txt.autoSize = true;
currentDate_txt.text="Today is "+currentMonth+"/"+
myDate.getDate() + "/"+myDate.getFullYear();
6.
Enregistrez et testez le document.
La date du jour doit apparaître dans la fenêtre du fichier SWF.
R E MA R Q UE
Un exemple de fichier terminé du document nouvellement créé, appelé
handson1.fla, se trouve dans le dossier de vos fichiers terminés. Pour
connaître le chemin, consultez Configurer l’espace de travail, page 276.
278 ActionScript : Utiliser des objets et des classes
Créer une classe personnalisée
Bien qu’ActionScript comprenne de nombreuses classes d’objets
(MovieClip, Color, etc.), il vous faudra à certains moments construire vos
propres classes. Vous pourrez ainsi créer des objets en fonction d’un
ensemble particulier de propriétés ou de méthodes.
Pour créer une classe définissant chacun des nouveaux objets, vous créez un
constructeur pour la classe d’objet personnalisée, puis des occurrences
d’objet basées sur cette nouvelle classe, comme dans l’exemple suivant :
R EMA R Q U E
Le modèle ActionScript suivant est donné à titre d’exemple uniquement.
N’entrez pas ce script dans le fichier FLA de la leçon.
function Product (id:Number, prodName:String, price:Number)
{
this.id = id;
this.prodName = prodName;
this.price = price;
}
Afin de définir correctement une classe dans ActionScript 2.0, vous devez
entourer toutes les classes du mot clé class, avant de déclarer toutes les
variables dans le constructeur en dehors du constructeur.
R EMA R Q U E
Le modèle ActionScript suivant est donné à titre d’exemple uniquement.
N’entrez pas ce script dans le fichier FLA de la leçon.
class Product
{
// Déclaration de variables
var id:Number
var prodName:String
var price:Number
// constructeur
function Product (id:Number, prodName:String,
price:Number){
this.id = id;
this.prodName = prodName;
this.price = price;
}
}
Créer une classe personnalisée 279
Pour créer des objets de cette classe, vous pouvez utiliser le code suivant :
R EM A R QU E
Le modèle ActionScript suivant est donné à titre d’exemple uniquement.
N’entrez pas ce script dans le fichier FLA de la leçon.
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 accéder directement
aux variables faisant partie d’une structure de classe. Vous devez écrire les
méthodes de la classe qui auront directement accès à ces variables. Il doit y
avoir différentes méthodes pour obtenir et définir des propriétés (connues
sous le nom de méthodes de lecture et de définition). Vous devez indiquer
le type de données à la fois pour la valeur renvoyée par la méthode et pour
tout paramètre transmis à la méthode lors de la demande.
Indiquer le type des valeurs renvoyées par
la méthode
Vous devez indiquer le type des valeurs renvoyées par les méthodes à la
suite du nom de la méthode et de la liste des paramètres, comme dans
l’exemple suivant :
R E MA R Q UE
Le modèle ActionScript suivant est donné à titre d’exemple uniquement.
N’entrez pas ce script dans le fichier FLA de la leçon.
public function getProductName() :String
{
return name;
}
Si aucune valeur n’est renvoyée (par exemple, une propriété est en cours de
définition), le type de donnée est Void :
public function setProductName(productName:String) :Void
{
this.productName=productName;
}
280 ActionScript : Utiliser des objets et des classes
Créer une classe personnalisée
Vous allez maintenant construire une nouvelle classe Product en utilisant
des méthodes de lecture et de définition (getter et setter) et créer un objet
de la classe Product.
1.
Créez un fichier ActionScript en choisissant Fichier > Nouveau >
Fichier ActionScript (et non Document Flash). Enregistrez le document
sous le nom Product.as.
2.
Créez un constructeur pour la classe Product, en créant une fonction
appelée Product qui comporte les arguments id, prodName
(nomProduit) et description :
function Product (id:Number, prodName:String,
description:String)
{}
3.
Dans la fonction constructeur, définissez les propriétés de la classe
Product équivalant aux méthodes de définition (setter) que vous créez :
setID(id);
setProdName(prodName);
setDescription(description);
4.
Entourez le mot clé class avec la fonction constructeur.
Déclarez chaque variable utilisée dans la classe :
class
{
var
var
var
Product
id:Number;
prodName:String;
description:String
function Product (id:Number, prodName:String,
description:String)
{
setID(id);
setProdName(prodName);
setDescription(description);
}
}
Créer une classe personnalisée 281
5.
Définissez les méthodes de lecture et de définition pour chaque
propriété de la classe, comme dans l’exemple suivant.
Précisez le type de renvoi Void pour les méthodes de définition et
indiquez le type de données renvoyé pour les méthodes 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
{
this.prodName = prodName;
}
public function setDescription (description:String)
:Void
{
this.description = description;
}
public function getID () :Number {
return id;
}
public function getProdName () :String {
return prodName
}
public function getDescription () :String {
return description;
}
}
6.
Enregistrez votre fichier.
R EMA R Q U E
Un exemple du fichier terminé nouvellement créé, Product.as, se trouve
dans le dossier de vos fichiers terminés. Pour connaître le chemin,
consultez Configurer l’espace de travail, page 276.
282 ActionScript : Utiliser des objets et des classes
Créer deux objets de la classe
Product
Vous allez créer un nouveau fichier FLA, puis deux objets de la classe
Product.
1.
Ouvrez un nouveau document Flash et enregistrez-le au même
emplacement que Product.as.
2.
Dans le nouveau document, sélectionnez l’Image 1 dans le scénario.
3.
Dans le panneau Actions, créez deux objets à partir de la classe Product,
à l’aide des données indiquées dans le tableau suivant (le modèle
ActionScript créé apparaît après le tableau).
Nom
d’occurrence
Données
pedals
id
0
prodName
Clipless Pedals
description
Excellent cleat engagement
handleBars
4.
id
1
prodName
ATB
description
Available in comfort and aero
design
Vérifiez que vous avez créé les objets comme suit :
var handleBars:Product = new Product (1, "ATB",
"Available in comfort and aero design");
var pedals:Product=new Product(0,"Clipless
Pedals","Excellent cleat engagement");
5.
Tracez la propriété de description de pedals :
trace (pedals.getDescription ());
6.
Enregistrez et testez le document.
Vous devriez voir la description de pedals dans le panneau de sortie.
R EM A R QU E
Un exemple de fichier terminé du document nouvellement créé, appelé
handson2.fla, se trouve dans le dossier de vos fichiers terminés. Pour
connaître le chemin, consultez Configurer l’espace de travail, page 276.
Créer deux objets de la classe Product 283
A propos du redimensionnement
des classes existantes
Le mot clé extends d’ActionScript 2.0 vous permet d’utiliser toutes les
méthodes et propriétés d’une classe existante dans une nouvelle classe. Par
exemple, si vous vouliez définir une classe appelée Drag ayant hérité de
l’ensemble de la classe MovieClip, vous pourriez utiliser les éléments
suivants :
class Drag extends MovieClip
{}
La classe Drag hérite maintenant de toutes les propriétés et méthodes de la
classe MovieClip existante ; vous pouvez utiliser les propriétés et les
méthodes MovieClip n’importe où dans la définition de la classe, comme
dans l’exemple suivant :
R EM A R QU E
Le modèle ActionScript suivant est donné à titre d’exemple uniquement.
N’entrez pas ce script dans le fichier FLA de la leçon.
class Drag extends MovieClip
{
// constructeur
function Drag ()
{
onPress=doDrag;
onRelease=doDrop;
}
private function doDrag():Void
{
this.startDrag();
}
private function doDrop():Void
{
this.stopDrag();
}
}
R E MA R QU E
La boîte de dialogue Convertir en symbole offre maintenant un champ de
classe dans lequel vous pouvez associer des objets visuels (des clips, par
exemple) à n’importe quelle classe définie dans ActionScript 2.0.
284 ActionScript : Utiliser des objets et des classes
Etendre la classe MovieClip pour
créer une nouvelle classe
Vous allez créer une nouvelle classe, extension de la classe intégrée
MovieClip.
1.
Créez un nouveau document Flash et nommez-le Shape.fla (Forme.fla).
2.
A l’aide des outils de dessin, dessinez une forme sur la scène.
Vérifiez que la totalité de la forme soit sélectionnée, puis cliquez avec le
bouton droit de la souris (Windows) ou en maintenant la touche
Contrôle enfoncée (Macintosh) sur la forme et choisissez Convertir en
symbole dans le menu contextuel.
3.
Dans la boîte de dialogue Convertir en symbole, sélectionnez 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 d’associer le clip à la classe Drag que vous
allez créer.
6.
A l’aide de l’inspecteur des propriétés, affectez un nom d’instance au
clip, puis enregistrez le fichier FLA.
R E MA R Q UE
Un exemple de fichier terminé du document nouvellement créé, appelé
handson3.fla, se trouve dans le dossier de vos fichiers terminés. Pour
connaître le chemin, consultez Configurer l’espace de travail, page 276.
7.
Créez un fichier ActionScript en choisissant Fichier > Nouveau >
Fichier ActionScript (et non Document Flash). Enregistrez le document
sous le nom Drag.as, au même emplacement que Shape.fla.
Etendre la classe MovieClip pour créer une nouvelle classe 285
8.
Dans le fichier ActionScript nouvellement créé, créez une nouvelle
classe et un constructeur appelés Drag :
class Drag extends MovieClip
{
function Drag ()
{
onPress=doDrag;
onRelease=doDrop;
}
}
9.
Définissez les méthodes privées de la classe qui utilisent les méthodes
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
11.
le fichier ActionScript.
Testez le document Shape.fla.
Vous devriez être capable de déplacer le clip.
R E MA R Q UE
Un exemple du fichier ActionScript nouvellement créé, appelé Drag.as, se
trouve dans votre dossier finished files. Pour connaître le chemin,
consultez Configurer l’espace de travail, page 276.
286 ActionScript : Utiliser des objets et des classes
Sommaire
Vous savez désormais travailler avec les objets et les classes dans
ActionScript 2.0. En quelques minutes vous avez appris à accomplir les
tâches suivantes :
■
Créer et utiliser des objets de classes existantes
■
Créer une classe personnalisée
■
Créer une propriété à l’intérieur d’une classe personnalisée
■
Créer une méthode à l’intérieur d’une classe personnalisée
■
Etendre une classe existante et tirer profit de l’héritage
Sommaire 287
288 ActionScript : Utiliser des objets et des classes
CHAPITRE 23
Intégration de données :
Présentation (Flash Professionnel
uniquement)
23
Les didacticiels suivants présentent plusieurs façons d’utiliser la liaison des
données et les composants de données dans Macromedia Flash
Professionnel 8. La plupart de ces didacticiels utilisent des services web
publics et nécessitent donc que vous disposiez d’une connexion à l’internet.
Par ailleurs, en raison des restrictions de sécurité sandbox, ces didacticiels
ne fonctionnent pas dans un navigateur mais fonctionnent dans
l’environnement auteur de Flash ou dans Flash Player.
■
Intégration des données : Utilisation du service web Tips de
Macromedia (Flash Professionnel uniquement)
■
Intégration des données : Utilisation de XML pour une feuille de
temps (Flash Professionnel uniquement)
■
Intégration des données : Utilisation de XUpdate pour mettre à jour la
feuille de temps (Flash Professionnel uniquement)
R EM A R QU E
Pour suivre les didacticiels de feuille de temps, vous devez télécharger le
fichier data.xml.
289
Ces didacticiels sont des modèles de travail qui montrent comment utiliser
les composants de données (XMLConnector, WebServices Connector,
RDMBSResolver et XUpdateResolver) avec la liaison de données dans
Flash Professionnel 8. Ils n’ont pas été conçus pour des applications prêtes à
être utilisées.
R E MA R Q U E
L’utilisation de services web publics dans ces didacticiels n’implique pas
que vous devriez les utiliser pour des applications réelles. Macromedia ne
recommande d’ailleurs pas l’utilisation de services web publics
directement dans une application cliente. Pour plus d’informations,
consultez la section « Applications et Services web » dans le chapitre
« Intégration de données » du manuel Utilisation de Flash (dans Flash,
sélectionnez Aide > Utilisation de Flash).
Si vous avez des problèmes pour télécharger ou décomprimer les fichiers,
reportez-vous à la note technique 13686 en www.macromedia.com/
support/general/ts/documents/downfiles.htm.
290 Intégration de données : Présentation (Flash Professionnel uniquement)
CHAPITRE 24
Intégration des données : Utilisation
du service web Tips de Macromedia
(Flash Professionnel uniquement)
24
Ce didacticiel vous montre comment utiliser le panneau Services Web pour
vous connecter au service de consutation des conseils Macromedia. Vous
allez utiliser divers composants pour configurer une interface utilisateur
simple.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Connexion à un service web public . . . . . . . . . . . . . . . . . . . . . . . . 292
Création d’une interface utilisateur et liaison des composants avec
le service Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Ce didacticiel utilise un service web public et requiert de ce fait une
connexion Internet.
Si vous avez des problèmes pour télécharger ou décomprimer les fichiers,
reportez-vous à la note technique 13686 en www.macromedia.com/
support/general/ts/documents/downfiles.htm.
R E MA R Q UE
L’utilisation d’un service web public dans ce didacticiel n’implique pas que
vous devez l’utiliser pour des applications réelles. Macromedia ne
recommande d’ailleurs pas l’utilisation de services web publics
directement dans une application cliente. Pour plus d’informations,
consultez la section « Présentation de la connectivité des données et de la
sécurité dans Flash Player » dans le chapitre « Intégration de données »
du manuel Utilisation de Flash (dans Flash, sélectionnez Aide > Utilisation
de Flash). Dans un environnement de production, vous devez utiliser des
services web qui sont placés sur votre propre serveur web.
291
Le fichier FLA terminé pour ce didacticiel est installé conjointement à
Flash. La liste suivante présente les chemins typiques vers ce répertoire :
■
Sous Windows : ouvrez le lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Data
Integration\Tips.
■
Sous Macintosh : ouvrez Macintosh HD/Applications/Macromedia
Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration\Tips.
Connexion à un service web
public
Définissez dans Flash le service web public auquel vous souhaitez vous
connecter.
1.
Créez un nouveau document Flash en utilisant Flash Professionnel 8.
Assurez-vous que votre ordinateur est connecté à Internet.
2.
Ouvrez le panneau Services Web (Fenêtre > Autres panneaux > Services
Web) et cliquez sur Définir les services Web.
3.
Dans la boîte de dialogue Définir les services Web qui s’affiche,
sélectionnez Ajouter un service Web (+) et cliquez ensuite sur la ligne en
surbrillance afin de la modifier.
4.
Entrez l’adresse URL http://www.flash-mx.com/mm/tips/
tips.cfc?WSDL et cliquez sur OK.
292 Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement)
5.
Dans le panneau Services Web, vérifiez les méthodes, les paramètres et
les résultats du service Web Conseils Macromedia.
Le service Web a une méthode, appelée getTipByProduct(). Cette
méthode accepte un seul paramètre appelé product. Ce paramètre
représente une chaîne indiquant au service web le produit Macromedia
pour lequel afficher un conseil. L’étape suivante consiste à relier ce
paramètre à une occurrence ComboBox dans votre application.
6.
Cliquez du bouton droit sur la méthode getTipByProduct() et
sélectionnez Ajouter un appel de méthode dans le menu contextuel.
Une occurence du composant WebServiceConnector est ajoutée sur la
scène.
7.
Dans l’inspecteur des propriétés, saisissez le nom de l’occurrence
tips_wsc.
Le composant est désormais configuré et positionné sur la scène. Vous
pouvez placer le composant n’importe où sur ou en dehors de la scène ;
il est invisible lorsque vous exécutez l’application.
Connexion à un service web public 293
Création d’une interface
utilisateur et liaison des
composants avec le service Web
Vous allez désormais utiliser les composants pour créer une interface
utilisateur simple qui vous permettra de sélectionner un produit, de cliquer
sur un bouton et d’afficher un conseil aléatoire sur le produit. Vous créez
cette application en reliant les composants de l’interface utilisateur sur la
scène aux paramètres et aux résultats renvoyés par le service web Tips de
Macromedia.
1.
Dans le panneau Composants, sélectionnez Composants de l’interface
utilisateur > ComboBox. Faites glisser un composant ComboBox sur la
scène. Dans l’inspecteur des propriétés, saisissez le nom de l’occurrence
products_cb.
2.
Dans le panneau Composants, sélectionnez Composants de l’interface
utilisateur > Button. Faites glisser un composant Button sur la scène.
Dans l’inspecteur des propriétés, entrez le nom de l’occurrence
submit_button et pour la propriété d’étiquette tapez Get Tip, comme
suit :
3.
Dans le panneau Composants, sélectionnez Composants de l’interface
utilisateur > TextArea. Faites glisser le composant sur la scène. Dans
l’inspecteur des propriétés, saisissez le nom de l’occurrence tip_ta.
4.
Dans le panneau Composants, sélectionnez Composants de l’interface
utilisateur > Label et faites glisser un composant Label sur la scène.
Placez-le au-dessus du composant ComboBox.
294 Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement)
5.
Dans l’inspecteur des propriétés, dans le champ Nom d’occurrence
tapez products_lbl et pour la propriété du texte tapez Select a Product,
comme suit :
L’inspecteur des propriétés montrant le nom d’occurrence products_lbl et le
texte « Select a Product »
6.
Faites glisser un autre composant Label sur le composant TextArea
tip_ta. Dans l’inspecteur des propriétés, donnez-lui le nom
d’occurrence tip_lbl et dans le champ de texte tapez Tips.
Ajoutez maintenant une liaison pour le composant connecteur
WebService entre le service Web Tip de Macromedia Tip et le
composant ComboBox, ce qui permet à l’utilisateur de choisir un
produit et renvoie un conseil relatif au produit.
Création d’une interface utilisateur et liaison des composants avec le service Web 295
7.
Sélectionnez le composant WebServiceConnector sur la scène. Ouvrez
l’inspecteur de composants, sélectionnez l’onglet Liaisons.Cliquez sur
Ajouter une liaison (+). Dans la boîte de dialogue Ajouter une liaison,
sélectionnez l’élément product:String (sous params:Object) et
cliquez sur OK.
296 Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement)
8.
Dans l’inspecteur des composants, double-cliquez sur la valeur vide du
champ Lié à. Dans la boîte de dialogue Lié à, sélectionnez ComboBox,
<products_cb> pour le chemin du composant et value:String pour
l’emplacement du schéma. Cliquez sur OK.
Le champ Lié à dans le panneau Inspecteur des composants
Sélection du chemin du composant et de l’emplacement du schéma dans la
boîte de dialogue Lié à
Vous allez maintenant lier le paramètre résultats dans le connecteur
de service Web au composant TextArea sur la scène.
Création d’une interface utilisateur et liaison des composants avec le service Web 297
9.
Dans l’inspecteur de composants, cliquez de nouveau sur Ajouter une
liaison (+). Dans la boîte de dialogue Ajouter une liaison, sélectionnez
l’élément results:String et cliquez sur OK. Dans l’inspecteur de
composants, double-cliquez sur la valeur vide dans le champ Lié à et,
dans la boîte de dialogue Lié à, sélectionnez TextArea, <tip_ta>
comme chemin de composant ettext:String comme emplacement de
schéma. Cliquez sur OK.
Finalement, vous utiliserez un composant Button et la méthode
trigger() pour déclencher le service. La méthode trigger vous permet
d’afficher un conseil chaque fois que vous cliquez sur le bouton.
10. Ouvrez
le panneau Actions et ajoutez le code ActionScript suivant sur
l’image 1 du scénario :
submit_button.onRelease = function(){
tips_wsc.trigger();
};
11.
Ajoutez ensuite le code ActionScript suivant après le code de l’étape 10.
Le code utilise la propriété dataProvider pour que les éléments dans
l’occurrence ComboBox soient égaux aux contenus du tableau.
products_cb.dataProvider = ["Flash", "Dreamweaver"];
R EM A R QU E
Si nécessaire, vous pouvez utiliser la méthode setStyle() pour appliquer
la couleur blanche au texte de l’occurrence Label en utilisant
products_lbl.setStyle("couleur", 0xFFFFFF);
12. Enregistrez
votre fichier.
298 Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement)
13.
Testez l’application (Contrôle > Tester l’animation). Sélectionnez Flash
dans l’occurrence ComboBox et cliquez sur Get Tip. Les résultats
devraient ressembler à la capture d’écran suivante :
14. Sélectionnez Dreamweaver et cliquez de nouveau sur Get Tip pour voir
un autre conseil.
Création d’une interface utilisateur et liaison des composants avec le service Web 299
300 Intégration des données : Utilisation du service web Tips de Macromedia (Flash Professionnel uniquement)
CHAPITRE 25
Intégration des données : Utilisation
de XML pour une feuille de temps
(Flash Professionnel uniquement)
25
Ce didacticiel vous montre comment créer une application permettant de
modifier les données d’une feuille de temps. Ces données sont enregistrées
au format XML dans une base de données XML native. Le composant
XUpdateResolver est le mieux adapté à ce type d’application car il permet
de générer des instructions XUpdate qui seront envoyées au serveur afin de
mettre à jour les données.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Création de l’interface utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Modification des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Ce didacticiel utilise un service web public et requiert de ce fait une
connexion Internet. Par ailleurs, en raison des restrictions de sécurité
sandbox, ce didacticiel ne fonctionne pas dans un navigateur mais
fonctionne dans l’environnement auteur de Flash ou dans Flash Player.
R E MA R Q UE
Le fait qu’un service web public soit utilisé dans ce didacticiel ne signifie
aucunement que vous devez absolument en utiliser un dans vos
applications. Macromedia ne recommande d’ailleurs pas l’utilisation de
services web publics directement dans une application cliente. Pour plus
d’informations, reportez-vous à La connectivité des données et la sécurité
dans Flash Player du guide Utilisation de Flash.
301
Pour ce didacticiel, vous aurez besoin du fichier data.xml se trouvant dans
le dossier Tutorial Assets. Ce fichier peut être trouvé à l’un des
emplacements suivants :
■
■
Sous Windows : ouvrez le lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Data Integration\Using XML for a Timesheet\data.xml.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data
Integration\Using XML for a Timesheet\data.xml.
R EM A R QU E
A des fins de démonstration, vous accéderez aux données XML à partir de
votre disque dur et afficherez la propriété DeltaPacket sur votre écran.
En pratique, le paquet XUpdate serait envoyé au serveur pour être traité.
Création de l’interface utilisateur
Vous allez commencer par créer une interface utilisateur pour afficher les
informations du fichier XML.
Ajout des composants XMLConnector et
DataSet
Vous allez d’abord ajouter les composants gérant les données.
1.
Créez un nouveau document Flash en utilisant Flash Professionnel 8.
Assurez-vous que votre ordinateur est connecté à Internet.
2.
Dans le panneau Composants, ouvrez la catégorie Données et faites
glisser un composant XMLConnector sur la scène. Dans l’inspecteur des
propriétés, saisissez le nom d’occurrence timeInfo_con.
3.
Dans l’inspecteur des composants ou des propriétés, cliquez sur l’onglet
Paramètres. Pour le paramètre URL, entrez data.xml et pour le
paramètre Direction, sélectionnez Receive (recevoir) dans le menu
déroulant.
4.
Depuis le panneau Composants, faites glisser un composant DataSet sur
la scène. Dans l’inspecteur des propriétés, saisissez le nom d’occurrence
timeInfo_ds.
302 Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement)
5.
Sur la scène, sélectionnez le composant XMLConnector. Dans
l’inspecteur de composants, cliquez sur l’onglet Schéma. Sélectionnez la
propriété results:XML, puis cliquez sur Importer un schéma d’un
exemple de fichier XML sur le côté supérieur droit de l’onglet Schéma.
R EM A R QU E
vous pouvez également sélectionner l’option Importer un schéma XML à
partir du menu de la barre de titre de l’inspecteur de composants.
6.
Recherchez le fichier data.xml sélectionnez-le.
La structure des données du fichier est désormais affichée dans l’onglet
Schéma. Le noeud row est associé à un tableau ActionScript d’objets
anonymes parce qu’il apparaît plusieurs fois dans le fichier XML. Les
sous-noeuds ou attributs se trouvant directement sous le noeud row
sont considérés comme les propriétés des objets anonymes contenus
dans ce tableau.
Pour plus d’informations sur la manière dont Flash traduit des
documents XML en une représentation de schéma interne, reportezvous à Intégration des données (Flash Professionnel uniquement) dans le
guide Utilisation de Flash.
Création de l’interface utilisateur 303
R E MA R Q UE
Le composant XMLConnector enregistre les informations en interne sous
forme de chaînes. Lorsqu’une requête de données est effectuée via un
composant DataBinding, vous pouvez définir le mode de conversion des
chaînes en types ActionScript appropriés. Pour cela, vous devez
sélectionner un élément dans le panneau de l’arborescence de schémas
et en modifier les paramètres.
7.
Sélectionnez le champ de schéma Date. Le type défini est String. Ceci
s’explique du fait que l’outil de programmation de Flash ne peut pas
déterminer qu’il s’agit d’un type de date basée sur sa valeur. Pour
encoder cette valeur correctement, vous devez fournir des informations
supplémentaires à Flash.
8.
Sélectionnez le paramètre Data Type du champ de schéma Date et
définissez-le sur Date. Le composant DataBinding considèrera alors
cette valeur comme une date.
Pour plus d’informations sur la liaison de données et les types de
données, reportez-vous à A propos du traitement des types de données lors
de la liaison de données (Flash Professionnel uniquement) dans le guide
Utilisation de Flash.
304 Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement)
9.
Sélectionnez le paramètre Encoder du champ de schéma Date et
définissez-le sur Date. Sélectionnez le paramètre Encoder options et
choisissez la valeur « MM/DD/YYYY ». Ce paramètre indique au
composant DataBinding de quelle manière la valeur de la chaîne est
représentée dans le fichier XML. Le composant DataBinding peut alors
récupérer les chaînes sous ce format et les convertir en objets de date
ActionScript.
Pour plus d’informations sur la liaison de données et les encodeurs,
reportez-vous à Les encodeurs de schémas dans le guide Utilisation de
Flash (dans Flash, choisissez Aide > Utilisation de Flash).
10. Sélectionnez
le champ de schéma @billable.
Le type de données du champ a été automatiquement défini sur
booléen par l’outil de programmation qui recherche certains motifs
pour estimer le type d’un élément XML. Toutefois, vous devez modifier
les options de l’encodeur pour ce champ. Pour les types de données
Boolean, ces options spécifient les chaînes indiquant des valeurs true ou
false.
11.
Le champ de schéma @billable étant toujours sélectionné,
double-cliquez sur le champ Options de l’encodeur.
la boîte de dialogue Encodeur booléen qui apparaît, entrez true
(vraie) dans le champ Strings That Mean True et entrez false (faux) dans
le champ Strings That Mean False.
12. Dans
13.
Sélectionnez le champ de schéma @duration.
Le type de données du champ a été automatiquement défini sur entier.
Ceci s’explique du fait que l’exemple de champ XML ne contenait que
des valeurs entières pour cet attribut.
Création de l’interface utilisateur 305
14. Sélectionnez
le paramètre Type de données pour le champ de schéma
et changez-le en numérique afin de ne pas le limiter aux
seules valeurs entières.
@duration
15. Dans
l’inspecteur de composants, cliquez sur l’onglet Liaisons.
16.
Cliquez sur le bouton Ajouter une liaison.
17.
Dans la boîte de dialogue Ajouter une liaison, sélectionnez l’élément
row : tableau et cliquez sur OK.
18.
Dans l’inspecteur de composants, sélectionnez la propriété Direction et
définissez-la sur Out (sortie).
19. Double-cliquez
sur la propriété Lié à.
20.Dans
la boîte de dialogue Lié à, cliquez sur le composant Data Set et
choisissez ensuite l’emplacement de schéma dataProvider: Array, puis
cliquez sur OK.
Le composant DataBinding copie chaque objet du tableau row dans un
nouvel enregistrement (objet de transfert) dans le composant DataSet.
Il applique les paramètres que vous avez choisis lors de la copie des
données de manière que le composant DataSet reçoive les champs
d’ActionScript Date, Booléen et Numérique pour les attributs @date,
@billable et @duration.
Vous allez maintenant créer des champs pour le composant DataSet qui
correspondent à ceux du composant XMLConnector.
21. Sur
la scène, sélectionnez le composant DataSet. Dans l’inspecteur de
composants, cliquez sur l’onglet Schéma.
306 Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement)
22.Cliquez sur Ajouter une propriété de composant (+) et entrez id
pour le
nom du champ et Entier pour le type de données.
23.Procédez de la même manière pour créer les nouveaux champs suivants :
■
Nom de champ = facturable, Type de données = Booléenne
■
Nom de champ = date, Type de données = Date
■
Nom de champ = durée, Type de données = Nombre
■
Nom de champ = tarif, Type de données = Nombre
R EM A R QU E
Les noms des champs doivent correspondre exactement aux noms de
leurs propriétés associées dans le composant XMLConnector (@date =
date, @billable = billable, @duration = duration), y compris la casse.
24.Sélectionnez
le champ Date que vous venez de créer. Sélectionnez le
paramètre de l’encodeur et choisissez DateToNumber.
R E MA R Q UE
Le composant DataSet doit enregistrer les dates en interne sous un
format numérique équivalent afin de pouvoir les trier correctement.
L’encodeur DateToNumber convertit une date en un nombre chaque fois
que la valeur est définie. Il convertit un nombre en une date chaque fois
qu’on accède à la valeur.
25.Le
champ Date étant toujours sélectionné, double-cliquez le champ
Formatter (formateur) dans l’inspecteur de composants et choisissez
Date dans le menu déroulant.
26.Dans
l’inspecteur des composants, double-cliquez sur le champ
Formatter Options (options du formateur).
27. Dans
la boîte de dialogue Paramètres de mise en forme de la date qui
s’affiche, entrez MM-JJ-AAAA dans la zone de texte Format.
Création de l’interface utilisateur 307
Ajout des composants DataGrid et Button
Vous allez désormais ajouter des composants pour afficher les données.
1.
Dans le panneau Composants, ouvrez la catégorie Interface de
l’utilisateur et faites glisser un composant DataGrid sur la scène.
2.
Dans l’inspecteur des propriétés, saisissez le nom d’occurrence
timeInfo_grd.
3.
Toujours dans l’inspecteur des propriétés, définissez la largeur à 360.
4.
Dans l’inspecteur de composants, cliquez sur l’onglet Liaisons.
5.
Cliquez sur le bouton Ajouter une liaison.
6.
Dans la boîte de dialogue Ajouter une liaison, sélectionnez l’élément
dataProvider : Array et cliquez sur OK.
7.
Dans l’onglet Liaisons, cliquez sur la propriété Lié à.
8.
Dans la boîte de dialogue Lié à, cliquez sur le composant Data Set et
choisissez ensuite l’emplacement de schéma dataProvider: Array, puis
cliquez sur OK.
9.
Dans l’onglet Liaisons, définissez la direction sur In (entrée).
10. Le
composant Data Grid étant toujours sélectionné, cliquez sur le
bouton Ajouter une liaison dans l’onglet Liaisons de l’inspecteur de
composants.
11.
Dans la boîte de dialogue Ajouter une liaison, sélectionnez l’élément
selectedIndex: Number et cliquez sur OK.
12. Double-cliquez
13.
sur la propriété Lié à.
Dans la boîte de dialogue Lié à, cliquez sur le composant Data Set et
choisissez ensuite l’emplacement de schéma selectedIndex: Number,
puis cliquez sur OK.
14. Laissez
la propriété de direction définie sur In/Out (entrée/sortie).
15. Faites
glisser un composant Button sur la scène et donnez-lui le nom
d’occurrence loadData_btn dans l’inspecteur des propriétés.
16.
Dans le panneau Inspecteur de composants, cliquez sur l’onglet
Paramètres. Dans le champ Etiquette, tapez Charger les données.
17.
Le bouton étant toujours sélectionné sur la scène, ouvrez le panneau
Comportement (Fenêtre > Comportements).
308 Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement)
18.
Cliquez sur Ajouter des comportements (+) et sélectionnez Données >
Déclencher une source de données. Dans la boîte de dialogue
Déclencher une source de données, sélectionnez le composant
timeInfo_con et cliquez sur OK.
19. Enregistrez
20.Exécutez
le fichier dans le même dossier que le fichier data.xml.
l’application et cliquez sur Charger des données.
Les données XML sont récupérées, converties et chargées dans le
composant DataSet. La liaison entre les composants DataSet et
DataGrid copie les données dans la grille afin de les afficher.
Modification des données
Vous allez maintenant modifier l’application afin de pouvoir modifier les
données au moyen du composant DataGrid.
1.
Sur la scène, sélectionnez le composant DataGrid. Cliquez sur l’onglet
Paramètres de l’inspecteur des composants.
2.
Définissez la propriété éditable sur true (vraie).
3.
Exécutez l’application.
Vous pouvez désormais modifier les données dans la grille.
Modification des données 309
310 Intégration des données : Utilisation de XML pour une feuille de temps (Flash Professionnel uniquement)
CHAPITRE 26
Intégration des données : Utilisation de
XUpdate pour mettre à jour la feuille de temps
(Flash Professionnel uniquement)
26
Intégration des données : Utilisation de XML pour
une feuille de temps (Flash Professionnel uniquement)
Conditions préalables :
Ce didacticiel démarre là où s’était arrêté le didacticiel Intégration des
données : Utilisation de XML pour une feuille de temps (Flash Professionnel
uniquement). Maintenant que le composant DataSet gère les données, on
suivra les modifications qui sont faites aux données dans la propriété
DeltaPacket. Il est indispensable d’utiliser un composant Resolver pour
renvoyer les modifications au serveur de manière optimale. Le composant
XUpdateResolver est le mieux adapté pour mettre à jour une source XML
car il permet de générer des instructions XUpdate qui seront envoyées au
serveur afin de mettre à jour les données.
Vous pouvez imprimer ce didacticiel en téléchargeant sa version PDF
depuis la page de documentation Macromedia Flash, accessible à l’adresse
http://www.macromedia.com/go/fl_documentation_fr.
Dans ce didacticiel, vous accomplirez les tâches suivantes :
Mise à jour de la feuille de temps . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Ce didacticiel utilise un service web public et requiert de ce fait une
connexion Internet. Par ailleurs, en raison des restrictions de sécurité
sandbox, ce didacticiel ne fonctionne pas dans un navigateur mais
fonctionne dans l’environnement auteur de Flash ou dans Flash Player.
R E MA R Q UE
L’utilisation d’un service web public dans ce didacticiel n’implique pas que
vous devez l’utiliser pour des applications réelles. Macromedia ne
recommande d’ailleurs pas l’utilisation de services web publics
directement dans une application cliente. Pour plus d’informations,
consultez La connectivité des données et la sécurité dans Flash Player du
guide Utilisation de Flash.
311
Pour ce didacticiel, vous aurez besoin du fichier data.xml se trouvant dans
le dossier Tutorial Assets. Ce fichier peut être trouvé à l’un des
emplacements suivants :
■
■
Sous Windows : ouvrez le lecteur de démarrage\Program
Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial
Assets\Data Integration\Using XML for a Timesheet\data.xml.
Sous Macintosh, ouvrez le dossier Macintosh HD/Applications/
Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data
Integration\Using XML for a Timesheet\data.xml.
R EM A R QU E
A des fins de démonstration, vous accéderez aux données XML à partir de
votre disque dur et afficherez la propriété DeltaPacket sur votre écran.
En pratique, le paquet XUpdate serait envoyé au serveur pour être traité.
Mise à jour de la feuille de temps
Vous allez désormais établir les liaisons permettant de mettre à jour la
feuille de temps.
1.
Commencez avec le fichier que vous avez créé dans le didacticiel
Intégration des données : Utilisation de XML pour une feuille de temps
(Flash Professionnel uniquement).
2.
Dans le panneau Composants, ouvrez la catégorie Données et faites
glisser un composant XUpdateResolver sur la scène.
3.
Dans l’inspecteur des propriétés, saisissez le nom d’occurrence
timeInfo_grd.
4.
Cliquez sur l’onglet Schéma dans l’inspecteur de composants et
sélectionnez la propriété du composant deltaPacket dans le panneau
Arborescence de schéma.
5.
Définissez le paramètre de l’encodeur du comosant DeltaPacket sur
DataSetDeltaToXUpdateDelta.
Cet encodeur convertit les données du composant DeltaPacket en
instructions XPath qui sont envoyées au composant XUpdateResolver ;
des informations supplémentaires sont néanmoins requises pour mener
à bien cette tâche.
312 Intégration des données : Utilisation de XUpdate pour mettre à jour la feuille de temps (Flash Professionnel uniquement)
6.
Double-cliquez sur la propriété encoder options (options de
l’encodeur). A l’invite d’entrer une valeur pour la propriété
rowNodeKey, tapez datapacket/row[@id=’?id’] .
Cette propriété permet d’identifier quel noeud du fichier XML sera
traité comme un enregistrement dans l’ensemble de données. Elle
permet également de définir la combinaison d’élément ou d’attribut
rendant le noeud row unique, ainsi que le champ de schéma dans le
composant DataSet qui la représentera. Voir Mises à jour envoyées à une
source de données externe dans le guide Utilisation de Flash (dans Flash,
choisissez Aide > Utilisation de Flash).
Dans le fichier d’exemple XML, l’attribut id du noeud datapacket/
est le seul identifiant et il sera associé au champ de schéma ID du
composant DataSet. Ceci est défini par l’expression suivante :
row
datapacket/row[@id=’?id’]
7.
Dans l’inspecteur de composants, cliquez sur l’onglet Liaisons.
8.
Cliquez sur le bouton Ajouter une liaison.
9.
Dans la boîte de dialogue Ajouter une liaison, sélectionnez la propriété
deltaPacket et cliquez sur OK.
10. Dans
l’onglet Liaisons de l’inspecteur de composants, double-cliquez
sur la propriété Lié à.
11.
Dans la boîte de dialogue Lié à, cliquez sur le composant Data Set et
choisissez ensuite l’emplacement de schéma deltaPacket, puis cliquez
sur OK.
Cette liaison copiera le composant DeltaPacket dans le composant
XUpdateResolver afin de pouvoir le manipuler avant de l’envoyer au
serveur.
R EM A R QU E
Les données sont copiées après l’appel de la méthode applyUpdates() du
composant DataSet.
12. Faites
glisser un Composant TextArea jusqu’à la scène, puis entrez le
nom d’occurrence deltaText dans l’inspecteur des propriétés.
13.
Toujours dans l’inspecteur des propriétés, définissez la largeur à 360.
14. Sélectionnez
le composant et cliquez sur l’onglet Schéma dans
l’inspecteur des composants.
Mise à jour de la feuille de temps 313
15. Cliquez
sur le bouton Ajouter une liaison.
16.
Dans la boîte de dialogue Ajouter une liaison, sélectionnez la propriété
text: String et cliquez sur OK.
17.
Dans l’onglet Liaisons, double-cliquez sur la propriété Lié à.
18.
Dans la boîte de dialogue Lié à, cliquez sur le composant
XUpdateResolver et choisissez ensuite l’emplacement de schéma
xupdatePacket, puis cliquez sur OK.
Le paquet de mise à jour contient la version modifiée du composant
DeltaPacket qui doit être envoyée au serveur.
19. Dans
le panneau Composants, ouvrez la catégorie Interface de
l’utilisateur et faites glisser un composant Button sur la scène.
20.Dans
l’inspecteur des propriétés, saisissez le nom d’occurrence
btn_show. Dans le panneau Inspecteur de composants, cliquez sur
l’onglet Paramètres, puis redéfinissez l’étiquette sur Afficher les mises à
jour.
21. Vérifiez que le bouton soit toujours sélectionné, puis ouvrez le panneau
Actions (F9) et saisissez le code suivant :
on (click) {
_parent.timeInfo_ds.applyUpdates();
}
22.Testez
l’application (Contrôle > Tester l’animation). Chargez les
données et modifiez un ou plusieurs champs dans plusieurs
enregistrements.
23.Cliquez
sur Afficher les mises à jour. Révisez le paquet XML dans le
composant TextArea.
C O N S EI L
24.Essayez
de définir le paramètre includeDeltaPacketInfo du
composant XUpdateResolver sur true (vrai) à l’aide de l’inspecteur de
composants.
R EMA R Q U E
vous pouvez copier
les données XML
dans l’éditeur XML
de votre choix pour
en faciliter la lecture.
Des informations supplémentaires sont ajoutées au paquet de mise à jour.
Ces informations permettent au serveur d’identifier cette opération de
mise à jour de façon unique. Le serveur peut alors générer un paquet de
résultats que les composants XUpdateResolver et DataSet utilisent pour
mettre à jour les données du client modifiées depuis le serveur.
314 Intégration des données : Utilisation de XUpdate pour mettre à jour la feuille de temps (Flash Professionnel uniquement)