Vous êtes sur la page 1sur 15

David Tardiveau

L’ActionScript 3

expliqué aux

graphistes

ou comment programmer facilement dans Flash

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

L’ActionScript 3

expliqué aux

graphistes

Apprendre à programmer dans Flash

Aujourd’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 fichiers d’exemples disponibles en ligne.

À qui s’adresse cet ouvrage ?

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.

• 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 profil de développeurs

Au sommaire

Premiers 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 fichier 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 fichiers d’exemples sur www.yazo.net/eyrolles

Code G12673 Conception Nord Compo
Code G12673
Conception Nord Compo

ISBN 978-2-212-12673-0

L’ActionScript3 expliqué aux graphistes ou comment programmer facilement dans Flash
L’ActionScript3
expliqué aux
graphistes
ou comment programmer
facilement dans Flash

CHEZ LE MÊME ÉDITEUR

E. S ainte -C roix . – Cahier Illustrator. Spécial débutants.

N°12555, 2009, 128 pages.

G. L ewi S. – 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 (2 e é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. TaSS o . Apprendre à programmer en ActionScript 3 (2 e édition).

N°12550, 2009, 542 pages.

D. tardiveau . – La vidéo dans Flash.

N°12048, 2007, 190 pages.

A. Bou C her. – Ergonomie web (2 e édition) . Pour des sites web efficaces.

N°12479, 2009, 426 pages.

E. SL oïm . – Mémento Sites web (2 e édition) . Les bonnes pratiques.

N°12456, 2009, 14 pages.

T. Buani C. – Le PDF pour le prépresse.

N°12087, 2007, 238 pages.

A. CL arke . – Transcender CSS .

N°12107, 2007, 370 pages.

David Tardiveau

L’ActionScript3

expliqué aux

graphistes

ou comment programmer facilement dans Flash

David Tardiveau L’ActionScript3 expliqué aux graphistes ou comment programmer facilement dans Flash

ÉDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com Le code de la propriété intellectuelle du 1 e r

Le code de la propriété intellectuelle du 1 er 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

Remerciements Il m’aurait été difficile de réaliser cet ouvrage sans la collaboration de Charlotte Masse,

Remerciements

Remerciements Il m’aurait été difficile de réaliser cet ouvrage sans la collaboration de Charlotte Masse,

Il m’aurait été difficile de réaliser cet ouvrage sans la collaboration de Charlotte Masse, illustratrice/direc- trice artistique web, qui m’a autorisé à utiliser sa mascotte et son univers graphique pour illustrer les exemples d’animations de ce livre. La cible de ce livre étant principalement cons- tituée de graphistes, il aurait été dommage de vous imposer des formes géométriques élémentaires pour illustrer mes propos (même si je suis le spécialiste pour dessiner un 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

Préface
Préface

Savez-vous à quoi servent ces drôles de petites fenêtres sans vitres que l’on trouve sur les toits des plus anciennes maisons alsaciennes 1 ? David Tardiveau ne le savait pas plus que moi quand je lui ai posé la question, alors que nous refaisions le monde en marchant sur le quai des Bateliers l’été dernier… En revanche, si vous lui demandez d’analyser et de programmer une dizaine de principes de jeux imaginés par un groupe d’étudiants des Arts décoratifs de Strasbourg, il y arrive sans aucune difficulté en moins d’une semaine !

David Tardiveau, que je connais depuis bientôt dix ans, fait partie des gens que j’estime véritablement. C’est un développeur chevronné, mais aussi et surtout quelqu’un qui sait partager ses connaissances, en formation comme sur le Web – comme d’autres, certainement, mais avec une grande simplicité et une immense générosité, ce qui est déjà plus rare.

On retrouve ce sens du partage dans cet ouvrage consacré au développement pour Flash, qui devrait enfin satisfaire les graphistes et les designers souhaitant maquetter leurs projets ou développer leurs propres applications. Avec un vocabulaire simple et

1. Ce sont des ouïes d’aération.

VIII
VIII

L’ActionScript 3 expliqué aux graphistes

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 sous forme de fichiers FLA, qui reflètent bien les problèmes rencontrés en production. David Tardiveau, qui enseigne et manipule depuis longtemps les logiciels du graphiste et du designer, connaît très bien son public. Son livre s’est ainsi centré sur les questions, les contraintes et les désirs des créateurs en herbe comme des professionnels. Répondant à leurs attentes, il leur fournira une aide précieuse et concrète pour programmer facilement dans Flash.

Charlet Denner Concepteur scénariste multimédia Professeur associé à l’université Paris 1 Panthéon-Sorbonne

Table des matières
Table
des
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

 

11

Bibliothèque, scène et scénario Afficher et masquer des occurrences Placer dynamiquement des symboles sur la scène

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

12

14

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

14

X
X

L’ActionScript 3 expliqué aux graphistes

Charger des médias Charger et imbriquer des animations Flash

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

15

15

Approche complètement dynamique Conclusion

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

16

17

Préparer la construction d’une interface

 

18

Préparer

les médias.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

23

Intégrer des fichiers dans la bibliothèque d’une animation Importer des médias à l’aide de lignes de code

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

24

29

Gérer le clic sur une occurrence

Gérer le double-clic Désactiver temporairement le clic sur une occurrence

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

29

32

33

Afficher le curseur en forme de doigt sur une occurrence

.

.

.

.

.

.

.

.

.

.

.

34

Exécuter une action en continu

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

34

Interrompre l’exécution en continu

 

36

À quoi sert la paire de parenthèses () ?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

37

À quoi sert l’expression evt:MouseEvent ?

 

39

Astuce

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

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

51

Naviguer 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é

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

58

Exercices

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

61

Astuce.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

62

CHAPITRE 4 – Positionner une occurrence sur la scène

.

.

.

.

.

65

Régler les positions horizontale et

 

65

Positionner une occurrence en fonction d’une autre

 

67

Table des matières

XI
XI
 

Positionner une occurrence en fonction de la position de la souris Positionner une occurrence en fonction des dimensions de la scène

 

68

69

Glisser-déplacer une

69

Déplacer une occurrence sur un axe vertical ou horizontal

 

.

.

.

.

.

.

.

.

.

.

.

72

Interpoler une occurrence grâce à des lignes de code

 

72

Effets associés aux mouvements Retarder l’exécution d’une interpolation Exécuter une action à la fin d’une interpolation Interrompre une interpolation

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

76

80

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

80

81

Mouvements cycliques

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

81

Exemples 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

 

92

Lire la valeur de la propriété rotation Rotation d’une occurrence en fonction de la position de la souris

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

94

94

Masquer et afficher une occurrence sur la

 

95

Appliquer un masque à une

 

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

 

114

Imbriquer des occurrences

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

116

XII
XII

L’ActionScript 3 expliqué aux graphistes

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

 

121

Déclarer une variable Nom et emplacement d’une variable Utiliser et modifier une variable Dans un scénario avec plusieurs images-clés Travailler avec une série de variables Comment obtenir de l’aide pour déboguer une animation ? Conclusion

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

122

123

124

124

 

125

.

.

.

.

.

.

.

.

.

.

.

126

127

Réutiliser du code (fonction)

 

127

Fonctions avec variables locales

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

128

Effectuer des tests dans une animation

Structure simplifiée Exemples de démonstration

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

130

133

.

.

.

.

.

.

.

.

.

.

.

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

 

dun chier

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

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

162

Image suivante, image précédente… Mosaïque progressive Diaporama à défilement automatique

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

162

166

.

.

.

.

.

.

.

.

.

.

.

168

Table des matières

XIII
XIII

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

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

175

Cliquer sur un texte pour déclencher une action

 

176

Changer la couleur d’un texte

 

.

.

.

.

.

.

.

.