L'Actionscript 3 Exp
-
Upload
bellakhdar -
Category
Documents
-
view
82 -
download
1
Transcript of L'Actionscript 3 Exp
David Tardiveau
David
Tard
iveau
L’ActionScript 3expliqué aux
graphistesou comment programmer
facilement dans Flash
Cod
e G
1267
3IS
BN 9
78-2
-212
-126
73-0
25 € Con
cept
ion
Nor
d C
ompo
97
82
21
21
26
73
0
L’ActionScript 3expliqué aux
graphistes
Développeur Flash depuis 1999 et titulaire d’un mastère en multimé-dia, David Tardiveau enseigne à GOBELINS, l’école de l’image, dans le domaine du off -line et du on-line. Il est par ailleurs le fondateur et l’animateur du site Yazo.net, qui avec ses tutoriaux sur l’ActionScript a déjà attiré des dizaines de millions de vi-siteurs en onze ans d’existence. Il vient de créer VOXPedago,
une entreprise d’e-learning au concept novateur.
L’Act
ionS
crip
t 3 e
xpliq
ué a
ux g
raph
istes
Apprendre à programmer dans FlashAujourd’hui, la majorité des graphistes travaillent aussi bien pour l’impression que pour le Web et sont donc amenés à programmer dans Flash, le logiciel d’animation. Mais pour cela, ils doivent connaître les bases de son langage de programmation ActionScript, ce qui n’est pas évident sans véritable culture informatique. C’est pourquoi l’auteur de ce livre a choisi un vocabulaire adapté pour expliquer à ces « réfractaires au code » comment exploiter l’ActionScript 3 dans leurs projets. Totalement pensé pour les graphistes, cet ouvrage de vulgarisation est complété par 100 fi chiers d’exemples disponibles en ligne.
À qui s’adresse cet ouvrage ?• Aux graphistes et aux étudiants en écoles de graphisme qui souhaitent
apprendre à programmer dans Flash• Aux programmeurs Flash débutants qui n’ont pas le profi l de développeurs
Au sommairePremiers pas en ActionScript. Préparer l’interface et les médias • Gérer les symboles de type Clip • Naviguer au sein d’une animation • Positionner une occurrence sur la scène. Contrôler l’apparence d’une occurrence • Manipuler une image 2D sur un plan 3D • Construction dynamique d’une interface. Optimiser la construction d’une interface • Gérer du code pour plusieurs occurrences • Gestion des médias. Charger une image à partir d’un fi chier externe • Gérer le texte dans une animation • Gérer le son dans une animation • Gérer la vidéo dans une animation • Annexe. Techniques complémentaires.
Téléchargez les 100 fi chiers d’exemplessur www.yazo.net/eyrolles
David Tardiveau
David
Tard
iveau
L’ActionScript 3expliqué aux
graphistesou comment programmer
facilement dans Flash
Code G 12673ISBN 978-2-212-12673-0
Con
cept
ion
Nor
d C
ompo
L’ActionScript 3expliqué aux
graphistes
Développeur Flash depuis 1999 et titulaire d’un mastère en multimé-dia, David Tardiveau enseigne à GOBELINS, l’école de l’image, dans le domaine du off -line et du on-line. Il est par ailleurs le fondateur et l’animateur du site Yazo.net, qui avec ses tutoriaux sur l’ActionScript a déjà attiré des dizaines de millions de vi-siteurs en onze ans d’existence. Il vient de créer VOXPedago,
une entreprise d’e-learning au concept novateur.
L’Act
ionS
crip
t 3 e
xpliq
ué a
ux g
raph
istes
Apprendre à programmer dans FlashAujourd’hui, la majorité des graphistes travaillent aussi bien pour l’impression que pour le Web et sont donc amenés à programmer dans Flash, le logiciel d’animation. Mais pour cela, ils doivent connaître les bases de son langage de programmation ActionScript, ce qui n’est pas évident sans véritable culture informatique. C’est pourquoi l’auteur de ce livre a choisi un vocabulaire adapté pour expliquer à ces « réfractaires au code » comment exploiter l’ActionScript 3 dans leurs projets. Totalement pensé pour les graphistes, cet ouvrage de vulgarisation est complété par 100 fi chiers d’exemples disponibles en ligne.
À qui s’adresse cet ouvrage ?• Aux graphistes et aux étudiants en écoles de graphisme qui souhaitent
apprendre à programmer dans Flash• Aux programmeurs Flash débutants qui n’ont pas le profi l de développeurs
Au sommairePremiers pas en ActionScript. Préparer l’interface et les médias • Gérer les symboles de type Clip • Naviguer au sein d’une animation • Positionner une occurrence sur la scène. Contrôler l’apparence d’une occurrence • Manipuler une image 2D sur un plan 3D • Construction dynamique d’une interface. Optimiser la construction d’une interface • Gérer du code pour plusieurs occurrences • Gestion des médias. Charger une image à partir d’un fi chier externe • Gérer le texte dans une animation • Gérer le son dans une animation • Gérer la vidéo dans une animation • Annexe. Techniques complémentaires.
Téléchargez les 100 fi chiers d’exemplessur www.yazo.net/eyrolles
L’ActionScript 3 expliqué aux graphistes
ou comment programmerfacilement dans Flash
ActionScript_PageTitre.indd 1 8/02/10 11:14:20
CHEZ LE MÊME ÉDITEUR
E. Sainte-Croix. – Cahier Illustrator. Spécial débutants. N°12555, 2009, 128 pages.
G. LewiS. – 2000 accords de couleurs. Pour les graphistes et les designers. N°12537, 2009, 336 pages.
E. Lupton. – Books et fanzines, do it yourself ! N°12543, 2009, 176 pages.
D. tardiveau. – ActionScript 3 (2e édition). Programmation séquentielle et orientée objet. N°12552, 2009, 426 pages.
M. Lavant. – Cahier n° 2 Flash. Spécial débutants. N°12570, 2009, 136 pages.
A. TaSSo. – Apprendre à programmer en ActionScript 3 (2e édition). N°12550, 2009, 542 pages.
D. tardiveau. – La vidéo dans Flash. N°12048, 2007, 190 pages.
A. BouCher. – Ergonomie web (2e édition). Pour des sites web efficaces. N°12479, 2009, 426 pages.
E. SLoïm. – Mémento Sites web (2e édition). Les bonnes pratiques. N°12456, 2009, 14 pages.
T. BuaniC. – Le PDF pour le prépresse. N°12087, 2007, 238 pages.
A. CLarke. – Transcender CSS. N°12107, 2007, 370 pages.
David Tardiveau
L’ActionScript 3 expliqué aux graphistes
ou comment programmerfacilement dans Flash
ActionScript_PageTitre.indd 2 8/02/10 11:14:21
ÉDITIONS EYROLLES61, bd Saint-Germain75240 Paris Cedex 05
www.editions-eyrolles.com
Le code de la propriété intellectuelle du 1er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée.En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le
présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands-Augustins, 75006 Paris.© Groupe Eyrolles, 2010, ISBN : 978-2-212-12673-0
Tardiveau Livre Page V Mercredi, 20. janvier 2010 6:14 18
Il m’aurait été difficile de réaliseouvrage sans la collaborationCharlotte Masse, illustratrice/dtrice artistique web, qui m’a autà utiliser sa mascotte et son ungraphique pour illustrer les exemd’animations de ce livre. La cibce livre étant principalement c
Remerciementsr cet deirec-oriséiversples
le deons-
tituée de graphistes, il aurait étédommage de vous imposer desformes géométriques élémentairespour illustrer mes propos (même sije suis le spécialiste pour dessinerun rond et un carré dans Flash,demandez aux nombreux étudiants
et stagiaires que j’ai vu passer dans mes classes au cours de ces dix dernières années,ils m’approuveront).
Illustration Charlotte Masse
Tardiveau Livre Page VI Mercredi, 20. janvier 2010 6:14 18
Tardiveau Livre Page VII Mercredi, 20. janvier 2010 6:14 18
Préface
Savez-vous à quoi servent ces drôles de petites fenêtres sans vitres que l’on trouvesur les toits des plus anciennes maisons alsaciennes1 ? David Tardiveau ne le savaitpas plus que moi quand je lui ai posé la question, alors que nous refaisions le mondeen marchant sur le quai des Bateliers l’été dernier… En revanche, si vous luidemandez d’analyser et de programmer une dizaine de principes de jeux imaginéspar un groupe d’étudiants des Arts décoratifs de Strasbourg, il y arrive sans aucunedifficulté en moins d’une semaine !
David Tardiveau, que je connais depuis bientôt dix ans, fait partie des gens quej’estime véritablement. C’est un développeur chevronné, mais aussi et surtoutquelqu’un qui sait partager ses connaissances, en formation comme sur le Web –comme d’autres, certainement, mais avec une grande simplicité et une immensegénérosité, ce qui est déjà plus rare.
On retrouve ce sens du partage dans cet ouvrage consacré au développement pourFlash, qui devrait enfin satisfaire les graphistes et les designers souhaitant maquetterleurs projets ou développer leurs propres applications. Avec un vocabulaire simple et
1. Ce sont des ouïes d’aération.
L’ActionScript 3 expliqué aux graphistesVIII
Tardiveau Livre Page VIII Mercredi, 20. janvier 2010 6:14 18
choisi, adapté à ce public de non-développeurs, il leur apprend les bases d’Action-Script 3, en complétant cet apprentissage par des exemples téléchargeables sousforme de fichiers FLA, qui reflètent bien les problèmes rencontrés en production.David Tardiveau, qui enseigne et manipule depuis longtemps les logiciels dugraphiste et du designer, connaît très bien son public. Son livre s’est ainsi centré surles questions, les contraintes et les désirs des créateurs en herbe comme desprofessionnels. Répondant à leurs attentes, il leur fournira une aide précieuse etconcrète pour programmer facilement dans Flash.
Charlet DennerConcepteur scénariste multimédia
Professeur associé à l’université Paris 1 Panthéon-Sorbonne
Tardiveau Livre Page IX Mercredi, 20. janvier 2010 6:14 18
Tabledes
matières
Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Pourquoi un tel ouvrage ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Aide à la lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
PARTIE I
Premiers pas en ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
CHAPITRE 1 – Préparer l’interface et les médias . . . . . . . . . . . . . 7
Symbole et occurrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Comment nommer les occurrences ? . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Logique de construction d’une interface . . . . . . . . . . . . . . . . . . . . . . . . 11Bibliothèque, scène et scénario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Afficher et masquer des occurrences . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Placer dynamiquement des symboles sur la scène . . . . . . . . . . . . . . . . . 14
L’ActionScript 3 expliqué aux graphistesX
Tardiveau Livre Page X Mercredi, 20. janvier 2010 6:14 18
Charger des médias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Charger et imbriquer des animations Flash . . . . . . . . . . . . . . . . . . . . . . . 15Approche complètement dynamique . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Préparer la construction d’une interface . . . . . . . . . . . . . . . . . . . . . . . . 18
Préparer les médias. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23Intégrer des fichiers dans la bibliothèque d’une animation . . . . . . . . . . . 24Importer des médias à l’aide de lignes de code . . . . . . . . . . . . . . . . . . . 29
Gérer le clic sur une occurrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Gérer le double-clic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Désactiver temporairement le clic sur une occurrence . . . . . . . . . . . . . . 33Afficher le curseur en forme de doigt sur une occurrence . . . . . . . . . . . 34
Exécuter une action en continu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Interrompre l’exécution en continu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
À quoi sert la paire de parenthèses () ? . . . . . . . . . . . . . . . . . . . . . . . . 37
À quoi sert l’expression evt:MouseEvent ? . . . . . . . . . . . . . . . . . . . . . . 39Astuce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
CHAPITRE 2 – Gérer les symboles de type Clip . . . . . . . . . . . . . . 43
Créer un clip animé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Créer un clip en guise de bouton . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Exécuter une action quand la lecture d’un clip se termine . . . . . . . . 47
CHAPITRE 3 – Naviguer au sein d’une animation . . . . . . . . . . . 49
Arrêter, relancer et déplacer la tête de lecture du scénario . . . . . . . . 51Naviguer grâce au nom d’étiquette d’une image-clé . . . . . . . . . . . . . . . . 56
Gérer un bouton Retour au sommaire . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Contrôler la lecture d’un clip animé . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58Exercices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Astuce. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
CHAPITRE 4 – Positionner une occurrence sur la scène . . . . . 65
Régler les positions horizontale et verticale. . . . . . . . . . . . . . . . . . . . . 65Positionner une occurrence en fonction d’une autre . . . . . . . . . . . . . . . . 67
XITable des matières
Tardiveau Livre Page XI Mercredi, 20. janvier 2010 6:14 18
Positionner une occurrence en fonction de la position de la souris . . . . . 68Positionner une occurrence en fonction des dimensions de la scène . . . 69
Glisser-déplacer une occurrence. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Déplacer une occurrence sur un axe vertical ou horizontal . . . . . . . . . . . 72
Interpoler une occurrence grâce à des lignes de code . . . . . . . . . . . . 72Effets associés aux mouvements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76Retarder l’exécution d’une interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . 80Exécuter une action à la fin d’une interpolation . . . . . . . . . . . . . . . . . . . . 80Interrompre une interpolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Mouvements cycliques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Exemples de scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
CHAPITRE 5 – Contrôler l’apparence d’une occurrence . . . . . . 91
Régler la largeur et la hauteur d’une occurrence . . . . . . . . . . . . . . . . . 91
Régler la rotation d’une occurrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Lire la valeur de la propriété rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94Rotation d’une occurrence en fonction de la position de la souris . . . . . 94
Masquer et afficher une occurrence sur la scène. . . . . . . . . . . . . . . . . 95
Appliquer un masque à une occurrence. . . . . . . . . . . . . . . . . . . . . . . . . 96
Régler le mode de surimpression d’une occurrence . . . . . . . . . . . . . . 97
Appliquer un filtre à une occurrence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
CHAPITRE 6 – Manipuler une image 2D sur un plan 3D . . . . . 103
Régler les rotations X, Y et Z d’une occurrence . . . . . . . . . . . . . . . . . . 103
Exploiter les coordonnées de la souris . . . . . . . . . . . . . . . . . . . . . . . . . 105
PARTIE II
Construction dynamique d’une interface . . . . . . . . . . . . . . . . . . 107
CHAPITRE 7 – Optimiser la construction d’une interface . . . . 109
Créer un symbole préprogrammé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Placer un symbole sur la scène grâce à des lignes de code . . . . . . . 114Imbriquer des occurrences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
L’ActionScript 3 expliqué aux graphistesXII
Tardiveau Livre Page XII Mercredi, 20. janvier 2010 6:14 18
Supprimer une occurrence au lieu de la masquer . . . . . . . . . . . . . . . 117
Créer un calque virtuel (Sprite) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
CHAPITRE 8 – Gérer du code pour plusieurs occurrences . . . 121
Faire varier une action dans un programme . . . . . . . . . . . . . . . . . . . . . 121Déclarer une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122Nom et emplacement d’une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Utiliser et modifier une variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124Dans un scénario avec plusieurs images-clés . . . . . . . . . . . . . . . . . . . . . 124Travailler avec une série de variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125Comment obtenir de l’aide pour déboguer une animation ? . . . . . . . . . . 126Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Réutiliser du code (fonction) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Fonctions avec variables locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Effectuer des tests dans une animation . . . . . . . . . . . . . . . . . . . . . . . . 130Structure simplifiée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133Exemples de démonstration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Répéter plusieurs fois une même ligne de code (boucle for()) . . . . 135
Faire référence à plusieurs occurrences (boucle for() et this[]) . . . . 140
PARTIE III
Gestion des médias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
CHAPITRE 9 – Charger une image à partir d’un fichier externe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Placer une image sur la scène en cliquant sur une occurrence . . . . 147
Centrer une image sur la scène . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Afficher une image en fondu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Redimensionner une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Preloader d’une image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Réaliser un diaporama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162Image suivante, image précédente… . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162Mosaïque progressive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166Diaporama à défilement automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
XIIITable des matières
Tardiveau Livre Page XIII Mercredi, 20. janvier 2010 6:14 18
CHAPITRE 10 – Gérer le texte dans une animation . . . . . . . . . . 171
Changer le contenu d’un texte sur la scène . . . . . . . . . . . . . . . . . . . . . 172
Placer un texte sur la scène grâce à des lignes de code . . . . . . . . . . 173
Faire défiler un texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Cliquer sur un texte pour déclencher une action . . . . . . . . . . . . . . . . . 176
Changer la couleur d’un texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Détecter le numéro de ligne cliquée . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
CHAPITRE 11 – Gérer le son dans une animation . . . . . . . . . . . . 181
Lancer un son d’ambiance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Contrôler la lecture et l’arrêt d’un son . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Exécuter une action lorsque la lecture d’un son se termine . . . . . . . 183
Régler le volume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
CHAPITRE 12 – Gérer la vidéo dans une animation . . . . . . . . . 193
Personnaliser le contrôleur d’une vidéo . . . . . . . . . . . . . . . . . . . . . . . . . 194
Exécuter une action lorsqu’une vidéo se termine . . . . . . . . . . . . . . . . 195
Déclencher une action au cours de la lecture d’une vidéo . . . . . . . . . 197
ANNEXE
Techniques complémentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Réaliser un preload d’animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Charger une animation à l’intérieur d’une autre . . . . . . . . . . . . . . . . . . 202Code permettant de travailler avec des animations imbriquées . . . . . . . . 203
Créer un lien vers une page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Afficher une animation en mode Plein écran. . . . . . . . . . . . . . . . . . . . . 204Depuis un projecteur ou une animation SWF lue avec un player . . . . . . 205Depuis une page web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207