L'Actionscript 3 Exp

15
David Tardiveau L’ActionScript 3 expliqué aux graphistes ou comment programmer facilement dans Flash

Transcript of L'Actionscript 3 Exp

Page 1: 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

Page 2: L'Actionscript 3 Exp

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

Page 3: L'Actionscript 3 Exp

L’ActionScript 3 expliqué aux graphistes

ou comment programmerfacilement dans Flash

ActionScript_PageTitre.indd 1 8/02/10 11:14:20

Page 4: L'Actionscript 3 Exp

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.

Page 5: L'Actionscript 3 Exp

David Tardiveau

L’ActionScript 3 expliqué aux graphistes

ou comment programmerfacilement dans Flash

ActionScript_PageTitre.indd 2 8/02/10 11:14:21

Page 6: L'Actionscript 3 Exp

É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

Page 7: L'Actionscript 3 Exp

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

Page 8: L'Actionscript 3 Exp

Tardiveau Livre Page VI Mercredi, 20. janvier 2010 6:14 18

Page 9: L'Actionscript 3 Exp

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.

Page 10: L'Actionscript 3 Exp

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

Page 11: L'Actionscript 3 Exp

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

Page 12: L'Actionscript 3 Exp

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

Page 13: L'Actionscript 3 Exp

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

Page 14: L'Actionscript 3 Exp

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

Page 15: L'Actionscript 3 Exp

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