Vous êtes sur la page 1sur 628

Sauf mention contraire, le contenu de cet ouvrage est publi sous la licence :

Creative Commons BY-NC-SA 2.0


La copie de cet ouvrage est autorise sous rserve du respect des conditions de la licence.
Texte complet de la licence disponible sur : http : //creativecommons.org/licenses/by-nc-sa/2.0/fr/
Mentions lgales
Conception couverture : amalgam impression
Illustrations chapitres : Fan Jiyong et Alexandra Persil
OpenClassrooms 2014 - ISBN : 979-10-90085-64-0

Avant-propos
i vous lisez ces lignes, cest que vous avez trs certainement envie dapprendre
programmer en Actionscript 3. Il sagit du langage de programmation de prdilection pour concevoir des applications Adobe Flash, applications notamment
trs rpandues sur Internet, sous forme de jeux interactifs, de lecteurs de vidos, de
bannires publicitaires. . .

Contrairement aux ides prconues, lActionscript ne se cantonne pas uniquement


la ralisation de vulgaires animations. Il est possible de concevoir des applications
en ligne visuellement trs avances ou de vrais logiciels de bureau laide de Flash.
Larrive de Adobe Air et Flex a galement normment contribu au dploiement de la
technologie Flash vers de nouvelles plateformes, telles que les terminaux mobiles iOS,
Android ou BlackBerry. Initialement, Flash a t conu pour raliser des animations
vectorielles, au travers du logiciel Flash Professional dit par la socit Adobe. Depuis
la version 3, lActionscript est devenu un langage de programmation part entire,
et il est maintenant possible de concevoir des applications Flash sans avoir recours
ce logiciel. Cet ouvrage sintresse justement lapprentissage de ce langage, en utilisant essentiellement des outils gratuits et accessibles tous. Certains dentre vous se
demandent peut-tre si lActionscript est un bon choix pour commencer la programmation ? Grce sa documentation fournie et ses concepts haut niveau, ce langage
de programmation est tout fait accessible aux dbutants. De plus, les possibilits
quoffre ce langage sont vastes, et le rendu des applications intresseront coup sr les
dveloppeurs plus expriments. Nhsitez donc pas vous lancer ds maintenant la
dcouverte de ce merveilleux langage quest lActionscript 3 !

Quallez-vous apprendre en lisant ce livre ?


Le plan de ce livre a t pens en partant du principe que le lecteur est un parfait
novice en programmation : ce cours se veut progressif et accessible tous. Voici les
diffrentes parties qui vous attendent dans cet ouvrage.
1. Les bases de lActionscript : cette premire partie est une introduction la
programmation et au langage Actionscript 3. Nous verrons ce quest rellement
lActionscript 3 et quels sont les outils indispensables pour suivre ce cours. Une
fois ces derniers en place, nous commencerons tudier les fondamentaux de la
i

CHAPITRE 0. AVANT-PROPOS
programmation : les variables, les conditions, les boucles, les fonctions...
2. La programmation oriente objet : au cours de cette partie, nous aborderons
un concept incontournable en Actionscript 3, la programmation oriente objet.
Il sagit dune manire de concevoir et de structurer le code au sein dun projet.
En organisant les programmes sous forme dobjets, le dveloppement de logiciels
devient plus efficace et intuitif. Nous aborderons les notions de classes, dhritage, de polymorphisme, dinterfaces... Un chapitre sur des notions avances la
programmation oriente objet en fin de partie vous permettra dapprofondir vos
connaissances.
3. Laffichage : tout au long de cette partie, nous dcouvrirons comment raliser
du contenu visuel, qui a fait toute la rputation des applications Flash. Nous
verrons notamment comment utiliser du texte et des images, mais surtout, nous
apprendrons dessiner des graphismes vectoriels directement partir du langage
de programmation. Un TP vous attend en fin de partie, et vous permettra de
vous exercer.
4. Interaction et animation : animer le contenu et le rendre interactif nest pas
chose aise. Nanmoins avec de prcieux conseils et quelques astuces, vous parviendrez crer les applications dynamiques et attrayantes. Pour vous le prouver,
nous raliserons travers un TP un vritable jeu de billard amricain. Vous prendrez alors conscience que vous avez dj atteint un excellent niveau !
5. Annexes : avant de vous laissez explorer de nouveaux horizons par vous-mmes,
nous reviendrons dans cette partie sur quelques rgles et astuces de bonnes pratiques adopter.

Comment lire ce livre ?


Suivez lordre des chapitres
Lisez ce livre comme on lit un roman. Il a t conu pour cela.
Contrairement beaucoup de livres techniques o il est courant de lire en diagonale et
de sauter certains chapitres, il est ici trs fortement recommand de suivre lordre du
cours, moins que vous ne soyez dj un peu expriments.

Pratiquez en mme temps


Pratiquez rgulirement lActionscript 3. Nattendez pas davoir fini la lecture de ce
livre pour allumer votre ordinateur et faire vos propres essais ; nhsitez pas modifier les codes donns en exemples, afin de bien cerner le comportement de chaque
instruction. Plus vous vous exercerez, et plus lapprentissage sera rapide et efficace.
ii

REMERCIEMENTS

Utilisez les codes web !


Afin de tirer parti dOpenClassrooms, dont ce livre est issu, celui-ci vous propose ce
quon appelle des codes web . Ce sont des codes six chiffres saisir sur une page
dOpenClassrooms pour tre automatiquement redirig vers un site web sans avoir
en recopier ladresse.
Pour utiliser les codes web, rendez-vous sur la page suivante :
http://www.openclassrooms.com/codeweb
Un formulaire vous invite rentrer votre code web. Faites un premier essai avec le code
ci-dessous :


Tester le code web
B
Code web : 123456


Ces codes web ont deux intrts :
ils vous redirigent vers les sites web prsents tout au long du cours, vous permettant
ainsi dobtenir les logiciels dans leur toute dernire version ;
ils vous permettent dafficher les codes sources inclus dans ce livre, ce qui vous vitera
davoir recopier certains programmes un peu longs.
Ce systme de redirection nous permet de tenir jour le livre que vous avez entre les
mains sans que vous ayez besoin dacheter systmatiquement chaque nouvelle dition.
Si un site web change dadresse, nous modifierons la redirection mais le code web
utiliser restera le mme. Si un site web disparat, nous vous redirigerons vers une page
dOpenClassrooms expliquant ce qui sest pass et vous proposant une alternative.
En clair, cest un moyen de nous assurer de la prennit de cet ouvrage sans que vous
ayez faire quoi que ce soit !

Remerciements
Nous tenons remercier toutes les personnes qui nous ont aides et soutenues dans la
ralisation de ce livre.

Guillaume Chau
Je souhaite remercier :
Ma famille et mes proches pour leur soutien et leurs encouragements inestimables,
Guillaume Lapayre pour mavoir soutenu dans le projet, aid rdiger le cours et
motiv aller de lavant,
Jonathan Baudoin pour son suivi et sa relecture minutieuse, ainsi que son engagement
auprs de nous dans le projet,
Mathieu Nebra, Pierre Dubuc et toute lquipe de Simple IT pour avoir cr la
plate-forme OpenClassrooms nous ayant permis dcrire cet ouvrage,
Mais surtout, tous les lecteurs pour leurs questions et leurs encouragements !
iii

CHAPITRE 0. AVANT-PROPOS

Guillaume Lapayre
Je souhaite remercier :
Mes parents, ma famille et mes proches pour leur soutien et leur encouragement,
quel que soit le projet dans lequel je mengage,
Guillaume Chau pour mavoir fait confiance et mavoir permis de travailler ses
cts et contribuer la rdaction de cet ouvrage,
Jonathan Baudoin pour avoir cru en ce projet, pour le temps pass la relecture ce
cours, et pour avoir support nos nombreux coups de flemme,
Mathieu Nebra et Pierre Dubuc, et toute lquipe de Simple IT, sans lesquels cet
ouvrage naurait jamais vu le jour,
Enfin, tous les lecteurs pour leurs encouragements et lintrt quils portent ce
cours.

iv

Table des matires

Avant-propos

Quallez-vous apprendre en lisant ce livre ? . . . . . . . . . . . . . . . . . . . .

Comment lire ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ii

Suivez lordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . .

ii

Pratiquez en mme temps . . . . . . . . . . . . . . . . . . . . . . . . . .

ii

Utilisez les codes web ! . . . . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Guillaume Chau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

iii

Guillaume Lapayre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

iv

Les bases de lActionscript

1 Vous avez dit Actionscript ?

Adobe Flash

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prsentation de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Un peu dhistoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les drivs de Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Quelques exemples dutilisation . . . . . . . . . . . . . . . . . . . . . . . . . .

Le dynamisme apport au web par lActionscript . . . . . . . . . . . . .

Cration de sites web orients vers le visuel . . . . . . . . . . . . . . . .

Introduction dAdobe Air . . . . . . . . . . . . . . . . . . . . . . . . . .

LActionscript 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
v

TABLE DES MATIRES


Orient objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

De haut niveau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

vnementiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

10

2 Votre premier programme avec Flex SDK


Prambule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

Le compilateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

Le lecteur Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

Installation des outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

Flex SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

Version de dbogage du lecteur Flash . . . . . . . . . . . . . . . . . . . .

19

Crer les sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

Compiler le programme de test . . . . . . . . . . . . . . . . . . . . . . .

21

Dis bonjour au monsieur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Structure de notre programme . . . . . . . . . . . . . . . . . . . . . . .

23

Commentez votre code ! . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

Afficher un message dans la console . . . . . . . . . . . . . . . . . . . . .

30

Place au test ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

FlashDevelop la rescousse ! . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

Tlchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

Un peu de paramtrage . . . . . . . . . . . . . . . . . . . . . . . . . . .

40

Crons un projet Actionscript . . . . . . . . . . . . . . . . . . . . . . . .

43

Bien utiliser Flashdevelop . . . . . . . . . . . . . . . . . . . . . . . . . .

43

Compiler et tester notre projet . . . . . . . . . . . . . . . . . . . . . . .

47

3 Les variables

vi

11

51

Dclarer et utiliser des variables . . . . . . . . . . . . . . . . . . . . . . . . . .

52

Dclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

52

Utiliser les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

Les nombres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

Les diffrents types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

Oprations sur les nombres . . . . . . . . . . . . . . . . . . . . . . . . .

56

La classe Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

58

TABLE DES MATIRES


Les chanes de caractres

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60

chappement des caractres spciaux . . . . . . . . . . . . . . . . . . . .

60

Utiliser les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

61

Concatnation de chanes . . . . . . . . . . . . . . . . . . . . . . . . . .

62

Quelques variables et fonctions utiles . . . . . . . . . . . . . . . . . . . .

62

4 Les conditions

67

criture dune condition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

68

Quest-ce quune condition ? . . . . . . . . . . . . . . . . . . . . . . . . .

68

Les oprateurs relationnels . . . . . . . . . . . . . . . . . . . . . . . . . .

68

Les oprateurs logiques

. . . . . . . . . . . . . . . . . . . . . . . . . . .

70

La priorit des oprateurs . . . . . . . . . . . . . . . . . . . . . . . . . .

71

Linstruction if. . .else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

72

La structure de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

72

Le type boolen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

74

La structure avec else if . . . . . . . . . . . . . . . . . . . . . . . . . .

75

Linstruction switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

76

Lutilisation conventionnelle . . . . . . . . . . . . . . . . . . . . . . . . .

76

Une utilisation spcifique lActionscript . . . . . . . . . . . . . . . . .

77

5 Les boucles

79

La boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

80

Le principe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

80

criture en Actionscript . . . . . . . . . . . . . . . . . . . . . . . . . . .

80

La boucle do. . .while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

82

La boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

84

Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

84

6 Les fonctions

87

Concept de fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Le principe de fonctionnement

88

. . . . . . . . . . . . . . . . . . . . . . .

88

Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

89

Cration et appel de fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . .

90

Instructions de fonction . . . . . . . . . . . . . . . . . . . . . . . . . . .

90

Expressions de fonction . . . . . . . . . . . . . . . . . . . . . . . . . . .

92
vii

TABLE DES MATIRES


Quelques exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

92

Message de bienvenue . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93

Calcul de PGCD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93

Calcul dun maximum . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93

7 Les tableaux

97

Le type Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

Cration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

Les lments du tableau . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

Proprits du type Array . . . . . . . . . . . . . . . . . . . . . . . . . .

99

Le type Vector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100


Dclaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Gestion des lments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Les tableaux multidimensionnels . . . . . . . . . . . . . . . . . . . . . . . . . 102
Le concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Un peu de pratique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Parcourir un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
La boucle for classique . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
La boucle for...in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
La boucle for each . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

II

La Programmation Oriente Objet

8 La POO dans tous ses tats

109
111

Les notions-cls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112


Il tait une fois. . . un objet . . . . . . . . . . . . . . . . . . . . . . . . . 112
LObjet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
La Classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Un autre exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Lencapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Lhritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Manipuler des objets : les chanes de caractres . . . . . . . . . . . . . . . . . 118
Lhorrible secret du type String . . . . . . . . . . . . . . . . . . . . . . 118
Crer un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
viii

TABLE DES MATIRES


Accder aux proprits dun objet . . . . . . . . . . . . . . . . . . . . . 121
Des pointeurs sous le capot . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Plantons le dcor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Explications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
9 Les classes (1re partie)
Crer une classe

125

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

La Classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Construire la classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Des paramtres facultatifs pour nos mthodes . . . . . . . . . . . . . . . . . . 130
La surcharge de mthodes . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Les paramtres facultatifs . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Les diffrents droits daccs . . . . . . . . . . . . . . . . . . . . . . . . . 132
Les accesseurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Exercice : Crons notre premire classe . . . . . . . . . . . . . . . . . . . . . . 139
Prsentation de la classe . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
criture du code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
La classe complte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
10 Les classes (2nde partie)

145

Les lments statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146


Les variables statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Les mthodes statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Une nouvelle sorte de variable : la constante ! . . . . . . . . . . . . . . . . 148
Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Intrt des constantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Un objet dans un objet (dans un objet. . .) . . . . . . . . . . . . . . . . . . . . 150
Le problme du ptrole

. . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Une nouvelle classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153


Exercice : Jeu de rle

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Prsentation de lexercice . . . . . . . . . . . . . . . . . . . . . . . . . . 157


Solution initiale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Une nouvelle classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
La bonne solution

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
ix

TABLE DES MATIRES


11 Lhritage

175

La notion dhritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176


Construction dun hritage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
La porte protected . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Construction des sous-classes . . . . . . . . . . . . . . . . . . . . . . . . 178
La substitution dune sous-classe une superclasse . . . . . . . . . . . . 182
Le polymorphisme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Les attributs de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Les diffrents droits daccs . . . . . . . . . . . . . . . . . . . . . . . . . 185
Exemple dutilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
12 Notions avances de la POO

189

Les classes dynamiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190


Dfinition de la classe de base . . . . . . . . . . . . . . . . . . . . . . . . 190
Dfinition de proprits hors de la classe . . . . . . . . . . . . . . . . . . 191
Les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Problme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Utilisation des interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Plus loin avec les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . 198
Les classes abstraites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Le concept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Application lActionScript 3 . . . . . . . . . . . . . . . . . . . . . . . . 201
Les types inconnus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Dterminer si un objet est une occurrence dune certaine classe . . . . . 203
Des paramtres de type inconnu

. . . . . . . . . . . . . . . . . . . . . . 204

Accder dynamiquement aux proprits . . . . . . . . . . . . . . . . . . . . . 206


Les objets anonymes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Crer un objet anonyme . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Les fonctions anonymes . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

III

Laffichage

215

13 Les objets daffichage

217

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
x

TABLE DES MATIRES


Les couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Laffichage sur un cran . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Larbre des objets daffichage . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Larbre daffichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Les classes daffichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Manipuler les conteneurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Buvez du Sprite ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Ajouter des enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Afficher un objet sur la scne principale . . . . . . . . . . . . . . . . . . 230
Lindex daffichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Ajouter un enfant un index prcis

. . . . . . . . . . . . . . . . . . . . 234

Oprations sur les enfants . . . . . . . . . . . . . . . . . . . . . . . . . . 235


Retirer des enfants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Proprits utiles des objets daffichage . . . . . . . . . . . . . . . . . . . . . . 238
Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Un mot sur lorigine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Taille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Transparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Supprimer un objet daffichage de la mmoire . . . . . . . . . . . . . . . . . . 245
14 Afficher du texte

249

Une histoire de TextField . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250


La classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Utilisation de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Slection du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Centrer le champ de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Un mot sur la scne principale . . . . . . . . . . . . . . . . . . . . . . . 258
Adapter la taille du champ de texte au texte . . . . . . . . . . . . . . . 262
Modifier la position du champ de texte . . . . . . . . . . . . . . . . . . . 264
La mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Formatons notre champ de texte . . . . . . . . . . . . . . . . . . . . . . 268
Gestion du multi-ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
En HTML dans le texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
xi

TABLE DES MATIRES


Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Balises principales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Balises de mise en forme . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Les polices de caractres embarques . . . . . . . . . . . . . . . . . . . . . . . 287
Embarquer des polices . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Rotation sur soi-mme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
15 Dessiner avec lActionscript

303

Lobjet Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304


Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Des contours et des remplissages . . . . . . . . . . . . . . . . . . . . . . 306
Dessinez, cest gagn ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Les lignes et les courbes . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Les formes prdfinies . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Techniques avances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Exercice : Dessine-moi un mouton . . . . . . . . . . . . . . . . . . . . . . . . 314
Conception du dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Code final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
16 Utilisation des matrices

327

Les matrices ou la classe Matrix . . . . . . . . . . . . . . . . . . . . . . . . . 328


Introduction aux matrices . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Lobjet Matrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Cration de dgrads . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Prsentation des dgrads . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Ajouter une matrice de description . . . . . . . . . . . . . . . . . . . . . 332
Exemple : cration dun bouton . . . . . . . . . . . . . . . . . . . . . . . 334
Les transformations matricielles . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Un objet transformer . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Cration dune matrice de transformation . . . . . . . . . . . . . . . . . 336
Pour finir avec les matrices . . . . . . . . . . . . . . . . . . . . . . . . . 338
17 Manipuler des images

341

Embarquer des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342


Prparation de limage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
xii

TABLE DES MATIRES


Librairie dimages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Afficher des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
La classe Bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Redimensionnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Oprations sur les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
La classe BitmapData . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Crer notre premire image . . . . . . . . . . . . . . . . . . . . . . . . . 351
Dessiner sur des images . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
18 Filtres et modes de fusion

361

Les filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362


Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Cration dun exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Ajout de filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Application des filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Glossaire des filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Les filtres de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Correction de couleurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
Convolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Mappage de dplacement . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Les modes de fusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Dfinition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Glossaire de modes de fusion . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Le mode de fusion par dfaut . . . . . . . . . . . . . . . . . . . . . . . . 378
Les fusions de calques . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Les fusions de transparence . . . . . . . . . . . . . . . . . . . . . . . . . 384
19 Les masques

387

Un masque. . . qui ne masque pas . . . . . . . . . . . . . . . . . . . . . . . . . 388


Le principe des masques . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Les masques en Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 388
Niveaux de transparence multiples . . . . . . . . . . . . . . . . . . . . . . . . 390
Prsentation du concept . . . . . . . . . . . . . . . . . . . . . . . . . . . 390
Place au code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
xiii

TABLE DES MATIRES


Exercice : une lampe torche . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Prparation des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Mise en place du masque . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Projet final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
20 TP : Mauvais temps

403

Le cahier des charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404


Lobjectif du chapitre . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Le travail raliser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Les images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
La correction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
La structure du programme . . . . . . . . . . . . . . . . . . . . . . . . . 407
La classe Flocon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
La classe Neige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
La classe principale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
Le code source complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
La classe Flocon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414
La classe Neige . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
La classe principale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

IV

Interaction et animation

21 Les vnements

419
421

Quest ce quun vnement ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422


Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Un jour au bureau. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Les couteurs en POO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Linterface IEventDispatcher . . . . . . . . . . . . . . . . . . . . . . . 424
La classe EventDispatcher . . . . . . . . . . . . . . . . . . . . . . . . . 425
Mise en place dun couteur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
Introduction aux fonctions de rappel . . . . . . . . . . . . . . . . . . . . 426
Crer une fonction dcouteur . . . . . . . . . . . . . . . . . . . . . . . . 428
Grer les couteurs dun objet . . . . . . . . . . . . . . . . . . . . . . . . 429
Le flux dvnements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430
xiv

TABLE DES MATIRES


Prsentation du concept de flux dvnements . . . . . . . . . . . . . . . 430
Bien comprendre le fonctionnement . . . . . . . . . . . . . . . . . . . . . 433
Lobjet Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Prsentation de la classe Event . . . . . . . . . . . . . . . . . . . . . . . 435
Les proprits lis au flux dvnements . . . . . . . . . . . . . . . . . . 436
22 Interagir avec lutilisateur
La souris

439

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440

Lobjet MouseEvent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440


La technique du glisser-dposer . . . . . . . . . . . . . . . . . . . . . 446
Exercice : Crer et animer un viseur . . . . . . . . . . . . . . . . . . . . 447
Curseurs personnaliss . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449
Le clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Lobjet KeyboardEvent . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
Exercice : grer laffichage de lanimation . . . . . . . . . . . . . . . . . 457
Champs de saisie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459
Retour sur lobjet TextField . . . . . . . . . . . . . . . . . . . . . . . . 459
vnements et TextField . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Exercice : un mini formulaire . . . . . . . . . . . . . . . . . . . . . . . . 467
23 Animer des objets

473

Lanimation par images-cls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474


Lvnement Event.ENTER_FRAME . . . . . . . . . . . . . . . . . . . . . . 474
Crer une animation basique . . . . . . . . . . . . . . . . . . . . . . . . 474
Lutilisation de Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
La classe Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477
Exercice : une horloge . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478
Les interpolations avec TweenMax . . . . . . . . . . . . . . . . . . . . . . . . 482
La librairie TweenMax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Les bases de lanimation avec TweenMax . . . . . . . . . . . . . . . . . . 484
Utilisation avance de TweenMax . . . . . . . . . . . . . . . . . . . . . . 488
24 Les collisions

495

Prambule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
Dfinition dune collision . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
xv

TABLE DES MATIRES


Dtecter des collisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496
La thorie des collisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Collisions rectangulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . 498
Collisions circulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Collisions ponctuelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505
Les collisions de pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Utiliser lopacit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Application en code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
25 TP : Jeu de billard
Objectifs

513

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514

Les rgles de notre billard . . . . . . . . . . . . . . . . . . . . . . . . . . 514


Le droulement dune partie . . . . . . . . . . . . . . . . . . . . . . . . . 515
Consigne supplmentaire . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Prparation et conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Prparation du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Les diffrents lments du jeu . . . . . . . . . . . . . . . . . . . . . . . . 520
Un peu de Maths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527
Organiser son projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535
Organisation de lapplication . . . . . . . . . . . . . . . . . . . . . . . . . . . 535
La structure de lapplication . . . . . . . . . . . . . . . . . . . . . . . . . 535
Description des diffrents classes . . . . . . . . . . . . . . . . . . . . . . 537
Cration des classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537
Visuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537
Bille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547
Trous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550
Queue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Billard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573
Conclusion et amliorations possibles . . . . . . . . . . . . . . . . . . . . . . . 577
Sources du Billard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
Ides damlioration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577
26 La gestion des erreurs
xvi

579

TABLE DES MATIRES


Les principes de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
Introduction la gestion des erreurs . . . . . . . . . . . . . . . . . . . . 580
Les diffrents types derreurs dexcution . . . . . . . . . . . . . . . . . . 580
Les erreurs synchrones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581
Lintruction throw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581
Linstruction try...catch . . . . . . . . . . . . . . . . . . . . . . . . . . 583
Les erreurs asynchrones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585
Distribuer un objet ErrorEvent . . . . . . . . . . . . . . . . . . . . . . . 585
Grer des vnements derreurs . . . . . . . . . . . . . . . . . . . . . . . 585
Bien comprendre les deux approches . . . . . . . . . . . . . . . . . . . . . . . 586
Une classe utilisant les deux approches . . . . . . . . . . . . . . . . . . . 586
Intrts des erreurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

Annexes

591

27 Bonnes pratiques

593

La mmoire dans Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594


Flash et la mmoire vive . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Le ramasse-miettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Prparer un objet pour la suppression . . . . . . . . . . . . . . . . . . . 594
Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595
Les commentaires de documentation . . . . . . . . . . . . . . . . . . . . . . . 597
Ecrire un commentaire de documentation . . . . . . . . . . . . . . . . . 597
Gnrer la documentation de vos classes . . . . . . . . . . . . . . . . . . 598

xvii

TABLE DES MATIRES

xviii

Premire partie

Les bases de lActionscript

Chapitre

Vous avez dit Actionscript ?


Difficult :
Pour commencer ce cours en douceur, voici une petite introduction pour vous prsenter la
technologie Flash, ainsi que son langage de programmation principal, lActionscript 3 !
Pour ceux qui ne connatraient pas cette technologie, nous verrons ce quil est possible de
faire en Flash ainsi que les diffrentes utilisations de celui-ci. Nous essaierons galement
de prsenter les technologies Flex et Air qui peuvent servir enrichir Flash. Quelques
exemples de projets Flash vous seront donns afin que vous puissiez vous faire une ide des
possibilits de lActionscript.
Ce chapitre dintroduction ne prsente aucune difficult, mme si vous tes un parfait
dbutant en programmation. Je vous rappelle que ce cours est rdig avec une difficult
progressive aussi, contentez-vous de lire celui-ci votre rythme et tout ira bien !

CHAPITRE 1. VOUS AVEZ DIT ACTIONSCRIPT ?

Adobe Flash
Prsentation de Flash
Flash est une technologie actuellement dveloppe et soutenue par Adobe Systems
(prononcez adobi ).
Elle est principalement utilise pour afficher des animations dynamiques et interactives
dans des pages web travers le navigateur Internet. Elle permet, par exemple, dajouter
une vido ou un jeu sur son site web, animer une galerie dimages, proposer une interface
dynamique pour un service ou un logiciel en ligne.
Un document Flash est un fichier sous le format swf (Shockwave Flash), et vous en
avez srement ouvert plusieurs chaque visite sur le web : en effet, ces animations
Flash, couramment utilises sur Internet, sont un assemblage dimages, de textes, de
dessins et de sons pouvant sanimer et mme interagir avec vous.
Parmi ses concurrents, on peut citer Silverlight, de Microsoft ou encore Java, de Sun/Oracle. LHTML5, coupl avec le CSS3 est une nouvelle alternative standardise ces
animations, ne ncessitant pas de plug-in dans le navigateur. Les spcifications de
lHTML5 ne sont malheureusement pas encore finalises lheure actuelle. Je vous
encourage lire le tutoriel de Mathieu Nebra sur lHTML5 et le CSS3 sur OpenClassrooms, si vous vous sentez lme dun webdesigner !

Un peu dhistoire
Flash nest pas aussi rcent que lon pourrait le croire, car son anctre direct a vu
le jour en 1995 et est sorti un an plus tard : il sagit de FutureSplash Animator
(voir figure 1.1), un concurrent de Macromedia Shockwave cette poque (un autre
format multimdia orient vers le web). FutureSplash a t dvelopp par FutureWave
Software, une compagnie lorigine de SmartSketch, un logiciel de dessin vectoriel dont
il manquait la composante animation contrairement Shockwave.

Figure 1.1 FutureSplash Animator


Son succs amena Macromedia racheter FutureSplash Animator en dcembre 1996,
pour le renommer en Macromedia Flash (voir figure 1.2), contraction de Future et
Splash. En 2005, Adobe Systems acquiert Macromedia ; le dveloppement de Flash se
poursuit et aboutit une volution majeure de la technologie avec la sortie en 2007 de
CS3 (Creative Suite 3 ) : cest la naissance de lActionscript 3 et de Flash 9.
Depuis, Adobe travaille lamlioration du lecteur Flash avec notamment la sortie
en 2008 de la dixime version de Flash apportant quelques nouveauts et un dbut de
support de lacclration matrielle pour obtenir de meilleures performances. En 2011,
4

ADOBE FLASH

Figure 1.2 Macromedia Flash


une onzime version majeure apporte une nouveaut trs attendue : le support intgral de lacclration matrielle par la carte graphique, ouvrant la voie de nouveaux
contenus en 3D complexe. Le fameux moteur de jeux vido dEpic Games, lUnreal
Engine 3, a dailleurs t port sur la plate-forme Flash !
Adobe cherche maintenant faciliter lutilisation de sa technologie sur les autres appareils multimdia, et on peut dsormais dvelopper en Flash sur un tlphone portable
fonctionnant sous Android de Google, iOs dApple ou BlackBerry 10 de RIM, sur des
tablettes tactiles et mme sur des tlvisions !

Les drivs de Flash


La plupart des professionnels se servent du logiciel Flash Professionnal dAdobe,
mais il existe dautres faons dutiliser cette technologie. Voici les deux principales :
la premire utilise un autre langage tandis que la deuxime est en quelque sorte une
extension de lActionscript 3.
Flex
Flex est un logiciel jumeau de Flash Professionnal, il est orient dveloppement et
design dapplications (voir figure 1.3). Il permet principalement de combler les lacunes,
si on peut dire, de Flash en termes de cration dinterfaces utilisateur. Cest pourquoi,
celui-ci propose une grande collection de composants prconus faciles manipuler tels
que des boutons, des champs de texte, etc. Les dveloppeurs peuvent ainsi concevoir
trs rapidement une interface utilisateur pour des programmes qui ne ncessitent pas
toute la puissance de dessin de Flash.

Figure 1.3 Adobe Flex


Flex utilise principalement un autre langage invent par Macromdia : le MXML
(Macromedia Extensible Markup Language), une variante du langage trs connu quest
le XML. Le MXML est utilis pour dcrire la structure visuelle dune application de
la mme faon que pour crire une page web avec lHTML (lui aussi bas sur le
5

CHAPITRE 1. VOUS AVEZ DIT ACTIONSCRIPT ?


XML) ; on place alors des balises reprsentant les composants du programme tout
en les mettant en forme. Ensuite, lActionscript sajoute au XML dans une balise <mx:Script> et permet de manipuler et danimer les balises MXML ainsi que
dinteragir avec lutilisateur par exemple.
Pour obtenir plus dinformations, vous pouvez jeter un coup dil au tutoriel Flex de
Migs sur OpenClassrooms.
Air
Adobe Air est une variante de Flash permettant nimporte quelle animation cre
avec Flash ou Flex de sinstaller et de fonctionner comme une vritable application
(figure 1.4). Grce aux nombreuses nouvelles fonctionnalits et outils qui sont votre
disposition lorsque vous programmez une application Air, vous pouvez grer le systme de fichiers de lordinateur ou les disques amovibles, crer des bases de donnes,
monter un serveur, etc. Ainsi, peut-on programmer un traitement de texte ou encore
un logiciel de messagerie instantane, voire un navigateur Internet avec Flash.

Figure 1.4 Adobe Air


Une autre particularit de cette plate-forme ressemblant Flash est que, en plus du
MXML et de lActionscript 3, on peut utiliser uniquement du simple HTML, CSS
et Javascript pour crer de telles applications. Air utilise alors le moteur Webkit
(utilis par Chrome et Safari entre autres) pour afficher ces lments de pages web dans
les applications. Ceci reprsente un avantage non ngligeable pour les dveloppeurs
web voulant programmer des applications de bureau sans toutefois avoir apprendre
et matriser un autre langage de programmation !
Enfin, cest Air qui permet aux dveloppeurs Flash de crer des applications destination de mobiles comme liPhone, sur les tablettes tactiles ou encore sur les tlviseurs,
et cela depuis 2010 avec la sortie dAir 2.5 (voir figure 1.5).

Quelques exemples dutilisation


Pour bien cerner les possibilits de Flash et diffrencier les multiples variantes de cette
technologie, voici, rien que pour vous, quelques exemples illustrs.

Le dynamisme apport au web par lActionscript


Il est probable que la premire fois que vous ayez entendu parler de Flash soit en jouant
divers jeux sur le web. En effet, il existe de nombreux sites web proposant des jeux
6

QUELQUES EXEMPLES DUTILISATION

Figure 1.5 Prsentation dAdobe AIR 2.5, un driv de Flash.


Flash. Bien entendu, ceux-ci sont raliss en Flash laide du langage Actionscript.
Pour vous donner un exemple concret, je vous ai slectionn un jeu nomm Kingdom
Rush, dont un aperu est donn la figure 1.6.

Figure 1.6 Un jeu ralis en Flash : Kingdom Rush.

Cration de sites web orients vers le visuel


La technologie Flash est aussi grandement utilise dans la conception des sites web
eux-mmes. En gnral, les animations Flash sont plutt rserves aux sites web
statiques ou sites-vitrines. Ceux-ci sont trs apprcis pour leurs interactions et leurs
animations qui dynamisent normment la navigation : il est important, notamment
7

CHAPITRE 1. VOUS AVEZ DIT ACTIONSCRIPT ?


pour les sites commerciaux destination du grand public, dattirer le regard. Toutefois,
il est tout fait possible de crer des sites web dynamiques et interagir avec un serveur
grce au langage PHP par exemple. Pour que vous puissiez mieux vous faire une ide
de la chose, je vous propose daller visiter le site de la nouvelle srie de Canal+ (voir
figure 1.7) :


Carlos
.
B
Code web : 751006

Figure 1.7 Le site de la srie Carlos est ralis en Flash.

Introduction dAdobe Air


Comme nous le verrons dans le prochain chapitre, lutilisation de la technologie Flash
ncessite un lecteur spcifique nomm Flash Player. Celui-ci est trs rpandu lintrieur des navigateurs Internet, et lutilisation de Flash sest ainsi longtemps limite au
web. Heureusement, ceci nest plus le cas avec larrive dAdobe Air. En effet, cette
technologie vient ajouter de nouvelles fonctionnalits Flash et permettre lutilisation
de Flash hors-ligne en tant que programme. Pour vous donner un exemple, lapplication Flash du site de poker Winamax (voir figure 1.8), disponible initialement sur
navigateur Internet, a pu tre convertie en vritable logiciel grce Adobe Air.
Ainsi lutilisation dAdobe Air permet de porter les applications directement sur un
systme dexploitation. Cette technologie est notamment utilise aujourdhui par de
nombreux systmes dexploitation mobiles tels que liOS, Android ou BlackBerry 10.
8

LACTIONSCRIPT 3

Figure 1.8 Le logiciel Winamax utilise la technologie Air.

LActionscript 3
LActionscript est le langage de programmation servant faire fonctionner les animations Flash. Cest le plus utilis parmi les langages de Flash. Il est bas sur lECMAscript, linstar du Javascript utilis sur Internet, directement dans les pages
web. Sans lui, aucune animation ou interaction dans un fichier Flash ne serait possible
et celui-ci serait alors rduit une simple image fixe.
LActionscript est un langage orient objet, de haut niveau et vnementiel.

Orient objet
En effet, sa structure est base sur le concept dobjet, cest--dire que tous les lments
de lanimation (y compris ceux qui ne relvent pas de laffichage, comme par exemple les
nombres) sont des objets, avec des attributs et des mthodes qui leur sont attachs.
Chaque objet est dcrit par une classe : un ensemble dattributs et de mthodes
qui reprsentent son comportement.
Prenons comme exemple une voiture de sport : cest un objet qui a pour classe Voiture,
cest--dire quelle a par exemple un attribut vitesse qui nous permet de connatre sa
vitesse de dplacement, ou encore une mthode tourner gauche, qui la fait tourner.
Tous ces attributs et ces mthodes sont dcrits et expliqus dans la classe Voiture.
Sil nous prenait lenvie de programmer un jeu de course de voitures basique, il faudrait
dabord crire une classe Voiture, puis, sur le fichier principal, crer un nouvel objet
de la classe Voiture pour crer une voiture (et ensuite la dplacer par exemple).
Une partie toute entire sera consacre la programmation oriente objet, ne vous
en faites pas si vous narrivez pas tout bien saisir maintenant.
9

CHAPITRE 1. VOUS AVEZ DIT ACTIONSCRIPT ?

De haut niveau
LActionscript est un langage dit de haut niveau, cest--dire que son fonctionnement est trs loign du fonctionnement de lordinateur au niveau matriel, au contraire
des langages dit de bas niveau, proches de la machine (comme le langage C).
Gnralement, cela signifie quil est plus facile de raliser certaines choses ou quil faut
moins dinstructions, mais cela se traduit souvent par des performances plus faibles.
Le Java, le Python ou le Ruby sont dautres exemples de langages de haut niveau.

vnementiel
Enfin, cest un langage vnementiel, cest--dire que linteractivit de vos programmes
sera base sur des vnements que nous allons couter. Par exemple, pour utiliser
un bouton, nous allons couter (donc attendre) sur lui lvnement cliqu qui sera
dclench lorsque lutilisateur appuiera sur ce bouton. Bien sr, pendant ce temps,
nous pouvons faire autre chose : cest tout lintrt de ce systme.

En rsum
LActionscript est un langage interprt, il a donc besoin dun interprteur
(le lecteur Flash) pour tre excut.
La technologie Flash regroupe les programmes Flash classiques, les applications
Flex que lon peut trouver sur des pages web, ainsi que les applications AIR
destination du bureau ou dautres appareils comme les mobiles.
Le principal langage utilis dans ces programmes est lActionscript 3, mais on peut
aussi utiliser le MXML (pour Flex et AIR), voire lHTML et le Javascript (pour
les applications AIR uniquement).
LActionscript 3 est un langage de haut-niveau : son fonctionnement est loign de
la machine et il est en gnral plus facile dimplmenter des fonctionnalits complexes.
Cest aussi un langage orient objet : son fonctionnement est bas sur des concepts
dobjets et de classes.
Enfin, cest un langage vnementiel : on coute des objets, et si des vnements
surviennent, on peut excuter du code.

10

Chapitre

Votre premier programme avec Flex


SDK
Difficult :
Maintenant que vous en savez un peu plus sur Flash, il est grand temps de passer la
pratique et lessentiel de ce cours : lActionscript 3 ! Vous aurez besoin doutils pour
suivre ce cours et appliquer ce que vous apprendrez (cest trs important), mais ne vous
inquitez pas, tous sont gratuits.
Le compilateur, qui servira transformer votre code en animation, est effectivement gratuit
pour tout le monde et mme open-source ! Il sagit de Flex SDK, qui faisait partie du projet
Adobe Open Source et qui est rcemment pass sous laile de la Fondation Apache. Nous
utiliserons galement un logiciel facultatif pour nous aider coder et compiler nos projets,
disponible hlas uniquement sous Windows.

11

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


Cette partie est un peu difficile, surtout si vous navez jamais programm :
accrochez-vous, relisez les parties que vous navez pas comprises ! La suite
en sera plus facile apprhender. La partie sur la compilation en ligne de
commande est facultative si vous travaillez sur Windows et que vous tes
allergiques la console. . .

Prambule
Le compilateur
Un compilateur est un programme trs utile dans la plupart des langages de programmation. Vous vous doutez bien que lordinateur ne sait pas interprter directement le
code que nous lui crivons : en effet, les langages de programmation ont t conus
pour tre facilement utilisables par les tres humains comme vous et moi. Or, les ordinateurs ne comprennent que les instructions en binaire de bas niveau (voir chapitre
prcdent). Il faut donc traduire nos programmes grce au compilateur ! (voir figure
2.1)

Figure 2.1 Le principe de la compilation


Certains langages de programmation sont interprts par un logiciel faisant
lintermdiaire entre le code et lordinateur : on peut en gnral se passer de
la compilation. Cest le cas de la plupart des langages utiliss sur Internet,
comme le Javascript ou le PHP. Mais cest aussi le cas de lActionscript !

Mais alors, pourquoi doit-on compiler nos programmes crits en Actionscript ?


En Actionscript 3, la compilation vous donne des informations sur vos erreurs
de syntaxe pour que vous les corrigiez plus facilement, mais elle permet surtout de
rassembler tout votre code et le contenu ncessaire au bon droulement de votre programme (comme les librairies) dans un seul fichier. Ainsi, il est plus facile dintgrer
une animation Flash dans un site web et il devient possible dimporter directement
dans lanimation des images, des sons, des polices de caractres ou dautres mdias
12

PRAMBULE
qui seront chargs en mme temps que votre programme. En outre, le compilateur
compresse votre animation afin quelle prenne moins de temps se charger.
Ainsi, en Flash, le compilateur ne traduit pas votre code en binaire (voir figure 2.2).
vrai dire, ce nest quun demi-compilateur : il ne soccupe seulement de lier plusieurs
fichiers en un seul (opration appele dition de liens), alors que les compilateurs
classiques traduisent galement le code.

Figure 2.2 Le compilateur Flash


Le fichier qui est produit est en gnral au format swf (ShockWave Flash) ; cest lui
qui sera charg par un navigateur Internet par exemple.

Le lecteur Flash
Donc il nous faut un logiciel pour que lordinateur comprenne notre code ?

Oui ! Cest l que le lecteur Flash (ou Flash Player en anglais) entre en scne (voir
figure 2.3). Ce logiciel contient un ensemble doutils permettant dexcuter votre programme : Flash Player est un interprteur, et lActionscript est un langage interprt.

Figure 2.3 Le lecteur Flash


Tout ce processus se droule lintrieur dune machine virtuelle. Concrtement, Flash
Player cache le systme sur lequel votre programme tourne et gre lui-mme la mmoire et les autres changes ncessaires au bon droulement de votre programme.
Ainsi, ce dernier peut fonctionner correctement sur plusieurs systmes dexploitation
(Windows, Mac, Linux, Android, etc.) totalement diffrents. Entre autres, il dispose
13

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


dun compilateur la vole, ou JIT (Just In Time) qui traduit en temps rel certains
passages de votre code en binaire afin damliorer les performances.

Installation des outils


Ainsi, pour programmer en Actionscript, il nous faut plusieurs outils, dont un
compilateur et un lecteur Flash. Nous allons ds prsent nous occuper de tout
cela !

Java
Java est une technologie similaire Flash, dveloppe initialement par Sun Microsystems (rachet par Oracle), qui regroupe un ensemble doutils permettant de crer des
applications (voir figure 2.4). Or, le compilateur de Flash est crit en Java : il faut
donc que Java soit install sur votre ordinateur. Si vous tes certains que cest dj le
cas, vous pouvez passer ltape suivante. Sinon, tlchargez et installez Java :


Tlchargez Java
.
B
Code web : 741426

Figure 2.4 Le logo Java

Flex SDK
Le Flex SDK (Software Development Kit) est un ensemble doutils de dveloppement
qui permettent, entre autres, de compiler des programmes crits en Actionscript 1, 2
ou 3, et des applications Flex ou Air.
Depuis 2011, Adobe a plac Flex sous licence Apache, par le biais de la Fondation
Apache. Le Flex SDK est ainsi distribu maintenant sous lappellation Apache Flex,
et est donc un projet open source (figure 2.5).
Nous verrons, dans la dernire partie de ce chapitre, comment utiliser un
logiciel nous permettant de dvelopper en Actionscript sans utiliser la console
de lignes de commande : il sagit de Flashdevelop (Windows uniquement).
Si vous ne voulez pas essayer de compiler avec la console et que vous tes
sous Windows, vous pourrez alors vous passer de la console pour compiler
vos applications.
14

INSTALLATION DES OUTILS

Figure 2.5 Le logo Apache Flex

Tout dabord, il vous faut disposer dAdobe Air pour installer le SDK, et suivez
ensuite les instructions dinstallation.


Adobe Air
.
B
Code web : 815403


Ensuite, il faut que vous rcupriez le SDK sur le site dApache :


Apache Flex SDK
B
.
Code web : 944481


Cliquez sur le bouton Download, lancez le tlchargement (voir figure 2.6) et allez
prendre un caf.

Figure 2.6 Page de tlchargement dApache Flex


Une fois le tlchargement termin, installez et lancez lapplication Apache Flex SDK
Installer. Un cran de slection de la version des diffrents composants du SDK saffiche une fois lapplication ouverte (voir figure 2.7).
15

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.7 Application dinstallation

Laissez les valeurs telles quelles sont : les dernires versions sont en effet slectionnes
par dfaut.
Sur lcran suivant, choisissez lemplacement dinstallation du SDK, de prfrence un
rpertoire facilement accessible (votre dossier personnel par exemple) et nommez-le
Flex SDK 4.
Ensuite, vous devez accepter les licences dutilisation des diffrents composants du SDK
en cochant les cases de la liste des composants (voir figure 2.8).

Figure 2.8 Liste des composants du SDK


Le tlchargement et linstallation des composants dbute alors. Une fois linstallation
termine, vous pouvez fermer lapplication.
16

INSTALLATION DES OUTILS


Pour les utilisateurs de linux, il faut installer Adobe AIR 2.6.0 pour pouvoir
utiliser lapplication dinstallation de Flex SDK 4. Skype peut galement
entrer en conflit avec Adobe AIR, il faut alors le dsinstaller.
Vous voil arms dun compilateur Flash ! Mais comment sen sert-on ? Avec les lignes
de commande pardi ! Pour les utilisateurs de Windows, il est grand temps de renouer
une relation avec le terminal ! Pour Mac et Linux en revanche, cela ne devrait pas trop
vous poser de problmes. . .
Voici la marche suivre pour lancer un terminal :
Windows : dans le menu dmarrer, allez dans
Tous les
 programmes, Accessoires,

Invite de commandes, ou appuyez sur Windows +R  et entrez cmd puis validez
(voir figure 2.9).
Linux : comment a, vous ne savez pas ouvrir un terminal ? :- Le gnome-terminal
(Gnome) ou la Konsole (KDE) conviendront parfaitement (voir figure 2.10).
Mac : dans le Finder, slectionnez Applications, puis Utilitaires et enfin Terminal
(voir figure 2.11).
Sur Windows, il existe une alternative au terminal classique, bien plus complte et confortable, car elle se rapproche de ceux des systmes dexploitation
Linux ou Mac. Il sagit de Powershell ; pour le lancer, appuyez sur Windows+R, entrez powershell et validez. Dsormais, vous pouvez par exemple
appuyer sur TAB pour complter automatiquement une commande ou un
chemin, comme sur Linux !
Maintenant, il va falloir se placer dans le dossier bin du SDK : utilisez la commande
cd (Change Directory) pour vous dplacer dans larborescence de fichiers.

Figure 2.9 Windows

17

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.10 Linux

Figure 2.11 Mac

18

INSTALLATION DES OUTILS

Version de dbogage du lecteur Flash


Un deuxime outil va nous tre indispensable : il sagit dune version lgrement diffrente du lecteur Flash habituel que lon trouve dans les navigateurs Internet par
exemple. En effet, ceFlash Player de dbogage peut sexcuter tout seul comme
une quelconque application et dispose surtout de fonctions de dbogage trs utiles.
Par exemple, si un problme survient pendant que lon teste notre programme, une
fentre nous affichera les dtails de lerreur, la ligne incrimine et les diffrents appels
de fonctions ayant conduit cette erreur.
Vous pouvez ds prsent rcuprer le lecteur sur le site web dAdobe :


Flash Player de dbogage
B
Code web : 927850


Un large choix de versions soffre vous : il faut prendre le lecteur appel Projector
content debugger , correspondant votre systme dexploitation :
si vous tes sur Windows, il faut cliquer sur le lien Download the Windows Flash
Player xx.x Projector content debugger,
si vous tes sur Max, il sagit du lien Download the Macintosh Flash Player xx.x
Projector content debugger
enfin, si vous tes sur Linux, le bon lien est Download the Linux Flash Player xx.x
Projector content debugger.
Sur Windows
Lancez le fichier excutable tlcharg une fois afin que les fichiers .swf soient automatiquement associs au Lecteur Flash (voir figure 2.12)
Sur Linux
Commencez par extraire larchive tlcharge. Pour que son utilisation soit plus facile,
et surtout parce que lon en aura besoin un peu plus loin, vous pouvez dplacer lexcutable flashplayerdebugger vers le dossier /usr/bin et le renommer en flashplayer
grce la commande suivante (noubliez pas de vous placer dans le dossier de larchive
extraite) :
sudo mv f l as h playerdebugger / usr / bin / flashplayer

Une fois le dplacement effectu, relancez votre console et replacez-vous dans le dossier
Flex SDK 4/bin.
Sur Mac
Installez le lecteur Flash en double-cliquant sur linstallateur Install Adobe Flash
Player Debugger 11.dmg (voir figure 2.13)
19

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.12 Lecteur Flash de dbogage Windows

Figure 2.13 Installation de Flash Player Debugger

20

INSTALLATION DES OUTILS

Crer les sources


Vu que nous navons pas encore attaqu lcriture de programmes en Actionscript
3, je vous ai concoct un petit code de test, qui va nous permettre de vrifier que votre
installation fonctionne bien.
Pour les utilisateurs de Windows, il est ncessaire de pouvoir enregistrer vos
fichier dans nimporte quelle extension : sinon, il y a de grandes chances
pour que Windows vous trahisse en sauvegardant votre fichier Test.as en
Test.as.txt par exemple, sans que vous ne en rendiez compte ! Pour viter
cela, il faut dsactiver une fonctionnalit de Windows qui masque la plupart
des extensions : dans une fentre de lexplorateur de fichiers, allez dans le
menu Options des dossiers, puis dans longlet Affichage et dcochez
Masquer les extensions des fichiers dont le type est connu.
Commencez par crer un rpertoire Sources dans le dossier bin o lon mettra les
sources de nos futurs programmes. Dans le rpertoire Sources, crez un nouveau fichier nomm Test.as et copiez-y le code en utilisant un diteur de texte quelconque,
tel que le Bloc-notes si vous tes sous Windows. Utilisez le code web ci-dessous pour
afficher le code et le copier/coller.

Code pour test.as
B
Code web : 171910

Compiler le programme de test


Pour compiler Test.as, revenez dans le terminal pour lancer le programme mxmlc
contenu dans le dossier bin.

Windows
.\ mxmlc . exe " Sources / Test . as "

Linux et Max
./ mxmlc Sources / Test . as

Il est possible que vous ayez besoin des droits administrateurs sur Linux pour
pouvoir compiler. Pour contourner le problme, essayez dajouter bash ou
sudo avant la commande ./mxmlc.
21

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK



Ensuite, appuyez sur Entre  pour lancer la compilation (voir figures 2.14, 2.15 et
2.16 pour les diffrents cas).

Figure 2.14 Windows

Figure 2.15 Linux


Aprs quelques instants, et si tout sest bien pass, un fichier Test.swf a t cr dans
le dossier Sources ; il vous suffit de louvrir avec le lecteur de dbogage que nous avons
tlcharg prcdemment !
22

DIS BONJOUR AU MONSIEUR

Figure 2.16 Mac


Sur Windows ou Mac
Double-cliquez sur le fichier Test.swf. Si jamais le lecteur Flash ne souvre pas,
choisissez-le avec la commande Ouvrir avec... ou dans la liste Slectionner un
programme install (voir figures 2.17 et 2.18).
Sur Linux
Entrez dans votre terminal (voir figure 2.19) :
flashplayer Sources / Test . swf

Si votre curseur laisse une trane blanche et brumeuse, cela signifie que la compilation
a russi et que vous tes prts pour passer la suite !

Dis bonjour au monsieur


Nous allons maintenant crire de A Z notre premier programme Flash ! Commencez
par crer un nouveau fichier Actionscript dans le rpertoire Source, et nommez-le
Hello.as.

Structure de notre programme


Un programme crit intgralement en Actionscript, ce qui sera le cas durant ce cours,
prsente toujours la mme structure : le code est obligatoirement mis dans des fonctions, elles-mmes places dans une classe, englobe par un paquet (on utilise alors
23

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.17 Windows

Figure 2.18 Mac


24

DIS BONJOUR AU MONSIEUR

Figure 2.19 Linux


le mot anglais package). Pour linstant, il y a de grandes chances que les trois termes
que je viens dutiliser soient obscurs pour vous ; la seule chose importante retenir est
lorganisation de ces trois niveaux qui composent le code source de tout fichier Actionscript. Pas de panique : nous explorerons plus en dtails chacune de ces notions
plus tard dans le cours.
Vous trouverez un petit schma rcapitulatif la figure 2.20.

Figure 2.20 Structure dun programme

Le package
Commenons par le plus simple : le package. Il est compos dun nom facultatif et
dun bloc daccolades. Nous utilisons le mot-cl package comme ceci :
1

package nom {

2
3

25

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


Un mot-cl (ou rserv) est une expression qui est utilise par le langage et
qui lui est donc rserve. Vous ne pourrez donc pas utiliser ce type de mots
autrement que tels quils ont t dfinis en Actionscript.
Le nom du package dcrit la position de la classe dans larborescence des fichiers de
votre projet. Effectivement, vous ne pouvez choisir vous-mmes le nom du package :
vous devez mettre le chemin relatif du fichier par rapport au fichier principal (celui que
lon compile avec la commande mxmlc vue plus haut), en sparant les dossiers par des
points ( la place des slashes ou antislashes).
Par exemple, si votre fichier principal Hello.as se trouve dans le dossier source et
que vous crez un nouveau dossier ET dans lequel vous rajoutez un dossier telephoner,
en y mettant un fichier Actionscript Maison.as qui est utilis par votre programme
principal, vous devrez crire son package ainsi :
1

package ET . telephoner {

2
3

Larborescence des fichiers est alors Sources/ET/telephoner/Maison.as.


Comment cela, on peut utiliser un autre fichier Actionscript depuis notre
programme principal ?
Bien sr ! Cest mme trs utile : il vaut mieux faire plusieurs fichiers bien tris (un
dossier pour les utilitaires, un dossier pour le chargement de son. . .), que mettre lensemble des donnes dans un seul et unique fichier. Imaginez que votre programme fasse
plusieurs centaines de milliers de lignes de code : il vous sera impossible de vous y
retrouver ! Nous allons voir cette notion appele importation de fichiers dans trs
peu de temps.

Quen est-il de notre fichier Hello.as ?

Trs bonne question : pour le programme principal contenu dans le fichier que vous
allez compiler avec la commande mxmlc, il ny a pas de nom de package ! Et oui, il est
dj dans le dossier principal de votre projet, inutile donc de mettre un chemin.
Dans ce cas, le package scrit ainsi :
1

package {

2
3

Vous pouvez crire ce code dans votre fichier vide si vous ne lavez pas dj fait !
26

DIS BONJOUR AU MONSIEUR


Importer des fichiers Actionscript
Comme nous lavons vu, importer des fichiers peut savrer trs utile, voire vital dans
la plupart des cas. Limportation est une instruction (ou une ligne de code si vous
prfrez) qui permet de rendre tout le code du fichier import utilisable dans notre
code. Il y a deux types de fichiers que vous pouvez importer : les fichiers contenus dans
les packages de Flash (commenant par flash.) et vos propres fichiers. Dans les
deux cas, on utilise le mot-cl import suivi du package du fichier importer, son nom
et un point-virgule :
1

import ET . telephone . Maison ;

La plupart des instructions et lignes de code devraient tre termines par un


point-virgule en fin de ligne. Je dis devraient car il est tolr domettre
le point-virgule, mais cest trs fortement dconseill : il est le symbole qui
indique clairement la fin de votre ligne de code. Il est possible, dans de rares
cas, que vous obteniez des erreurs cause de cela. Votre ordinateur ne sautodtruira pas si vous ne mettez pas les points-virgules, mais ce serait une
trs, trs, trs mauvaise habitude : si jamais vous voulez apprendre et utiliser
un autre langage, vous oublierez constamment les points-virgules et maudirez
le jour o vous avez dcid de ne pas suivre mon conseil. . . :- Vous remarquerez quil ne faut pas mettre de point-virgule quand il sagit de blocs de
code dlimits par des accolades ({ et }), comme pour le package que lon
vient de voir.
Les importations scrivent juste aprs avoir ouvert la premire accolade du package :
1

package {

import ET . telephone . Maison ;

3
4
5

Pour notre programme, il va falloir importer un fichier standard de Flash : Sprite. Il


est ncessaire pour toute application : nous dtaillerons son utilit bien plus tard dans
le cours car il nous manque trop de notions actuellement. Je peux tout de mme vous
dire que cela nous permet dafficher le programme et donc de le lancer : effectivement,
tout programme Flash a besoin dun affichage pour sexcuter.
Je vous donne le code du fichier import que vous devez avoir dans votre Hello.as :
1

package {

import flash . display . Sprite ;

3
4
5

27

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


Vous laurez srement compris, le package du fichier est flash.display
(gestion de laffichage).

La classe
Ensuite, vient la. . . Comment a vous ne savez pas ? Retournez vite regarder le schma !
Effectivement, dans le package, on trouve une classe. Cette notion est un concept trs
important de la programmation oriente objet que jai mentionne dans lintroduction. Il est trop tt pour dvelopper cette notion, mais rassurez-vous : une partie
entire de ce cours sera consacre lorient objet.
Lessentiel est de retenir que la classe est obligatoire et que sa syntaxe est la suivante :
les mots-cls public class suivis du nom de la classe et dun bloc daccolades, comme
pour le package.
1

public class NomDeMaClasse {

2
3

Attention ! Le nom dune classe ne doit contenir que des lettres, et doit tre
identique au nom du fichier dans lequel elle se trouve (sans lextension). De
plus, il doit imprativement commencer par une majuscule : cela explique
pourquoi tous nos fichiers Actionscript ont une majuscule depuis le dbut
du cours !
tant donn que le nom du fichier est le mme que celui de la classe de ce fichier, nous
parlerons dsormais de classe dans les deux cas.
Il existe une notation appele Camel (chameau) ou CamelCase (notation
chameau), trs utilise dans le monde de linformatique. Je lai utilise pour
crire NomDeMaClasse : chaque mot dbute par une majuscule, comme des
bosses de chameau ! Son utilit est purement esthtique car cette notation
amliore la lisibilit du code lorsque lon ne peut pas utiliser despaces ou
dautres caractres spciaux. Cest le cas ici avec le nom des classes. Je pense
que cest une bonne habitude prendre, alors autant commencer tout de
suite : avouez que si javais crit Nomdemaclasse, ce serait beaucoup moins
lisible !
La classe se dispose juste aprs les importations de fichiers, comme ceci pour notre
fichier Hello.as :
1

package {

2
3

import flash . display . Sprite ;

4
5

28

public class Hello extends Sprite {

DIS BONJOUR AU MONSIEUR


6
7
8

Les plus observateurs dentre vous auront remarqu que jai ajout deux mots derrire
le nom de notre classe. Le mot-cl extends (tendre en anglais) permet dutiliser la
classe Sprite dune manire un peu spciale, comme nous le verrons dans la partie
consacre lorient objet.
Les fonctions
Maintenant que notre classe est prte, il faut crire une ou plusieurs fonctions pour
pouvoir mettre du code dedans ! Une de ces fonctions est obligatoire et elle porte un
nom : il sagit du constructeur de la classe. Devinez quoi ? Cest encore li lorient
objet ! Pour faire simple, ce constructeur est automatiquement excut dans certains
cas, lorsque lon utilise une classe. Ici, le code lintrieur sera parcouru au lancement
de notre programme. Pour crire un constructeur, on utilisera les mots-cls public
function suivis du nom de la classe, de parenthses et dun nouveau bloc daccolades.
Pour notre classe Hello contenue dans notre fichier Hello.as, le constructeur ressemblera ceci :
1

public function Hello () {

2
3

Et voil ! Notre fichier est fin prt pour que nous commencions (enfin) coder !
Voici le code complet de notre fichier Hello.as pour que vous puissiez vrifier :
1
2

// Premier niveau : le paquet


package {

// Les classes import es


import flash . display . Sprite ;

4
5
6

// Deuxi me niveau : la classe du fichier


public class Hello extends Sprite {

7
8
9

// Troisi me niveau : la ou les fonctions

10
11

// Constructeur de la classe
public function Hello () {

12
13
14

// Nous allons coder ici !

15
16

17
18
19
20

29

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Commentez votre code !


Avez-vous remarqu que jai insr du texte en franais dans le code prcdent qui na
a priori rien faire l ? On appelle cela des commentaires. Vous pouvez y crire absolument nimporte quoi et pour cause, ils seront tout simplement ignors lorsque vous
lancerez votre programme. Vous vous demandez alors quoi servent-ils ? La rponse
est plutt simple : commenter un code permet de sy retrouver mme si nous avons
nous-mmes crit le code en question. Imaginez que vous reveniez dessus quelques mois
plus tard : sil ny a aucun commentaire, vous serez aussi perdu que si vous naviez
pas t le programmeur ! Cela peut mme arriver dans un intervalle de quelques jours
seulement. Et ce serait encore pire si vous souhaitiez que votre code soit lu ou utilis
par dautres personnes. . . Mais attention, il ne sagit pas non plus dinonder votre code
de commentaires : vous ne russiriez qu le rendre encore plus illisible et incomprhensible ! Il faut trouver un juste milieu : commentez quand cela est ncessaire pour
dcrire brivement ce que fait un morceau de votre programme afin de vous en rappeler
facilement plus tard.
Il existe deux types de commentaires : les commentaires en ligne et les commentaires multi-lignes.
Les commentaires en ligne
Ce sont des commentaires qui ne comportent quune seule ligne. On les dbute par
deux slashs, comme ceci :
1

// Voici un commentaire en ligne

Tout le texte suivant les deux slashs sera considr comme du commentaire.
Vous pouvez mettre un commentaire en fin de ligne, sans gner personne :
1

import display . Sprite ; // Pour l ' affichage

Les commentaires multi-lignes


Cette fois-ci, il est possible dtaler notre commentaire sur plusieurs lignes. Pour
cela, il faut dbuter notre commentaire par un slash et une astrisque et terminer
explicitement le commentaire par une astrisque et un slash :
1
2
3
4

/* Ceci
est un commentaire
sur quatre
lignes . */

Afficher un message dans la console


Avant toute chose, il est important de souligner que la technologie Flash na jamais
t conue pour tre utilise en lignes de commande : en effet, son objectif est de propo30

DIS BONJOUR AU MONSIEUR


ser des applications et des animations entirement graphiques. Cela implique que lon
ne puisse quafficher du texte la console (avec quelques efforts) et quil est impossible
dentrer des donnes au clavier via la console, comme en langage C par exemple.
Cest une fonction qui nous permettra dafficher des messages dans la console : elle
rpond au doux nom de trace() et est quasiment exclusivement utilise pour le dbogage des programmes Flash.
Cette fonction est accessible partout dans tout code Actioncript, il suffit de lappeler.
Lappeler ? Comme mon chien pour partir en balade ?

Oui, on utilise le terme appeler lorsque lon utilise une fonction : nous nallons pas
crire du code entre les accolades de la fonction trace(), nous allons nous contenter
de lutiliser. En effet, son code est dj prt et fait partie du lecteur Flash lui-mme !
Pour lutiliser, nous allons prendre presque la mme syntaxe que celle du constructeur
Hello (qui est lui aussi une fonction), sans le bloc daccolades et sans oublier le pointvirgule (car il sagit dune instruction) :
1

trace ( " texte afficher " ) ;

Entre les deux parenthses, vous devez spcifier la fonction trace() ce quelle doit
afficher. Ce peut tre du texte (dlimit par des guillemets) ou un nombre. Par exemple,
pour afficher 42 dans la console, nous cririons :
1

trace ( 42 ) ;

vous de jouer ! Faites en sorte sans le tester que votre programme Hello soit capable dafficher le grand classique Hello world ! . Souvenez-vous o il faut mettre les
instructions dans le programme Hello que nous avons crit jusqu prsent !
1
2

// Premier niveau : le paquet


package {

3
4
5

// Les classes import es


import flash . display . Sprite ;

6
7
8

// Deuxi me niveau : la classe du fichier


public class Hello extends Sprite {

9
10

// Troisi me niveau : la ou les fonctions

11
12
13

// Constructeur de la classe
public function Hello () {

14

trace ( " Hello world ! " ) ;

15
16
17

18

31

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


19

20

Place au test !
Compiler notre programme
Commenons tout dabord par compiler Hello.as. Il y a une petite diffrence par
rapport tout lheure : cette fois-ci, il va falloir activer le mode dbogage lors de la
compilation, pour que lon puisse afficher le message Hello world ! dans la console.
Pour ce faire, ajoutons un paramtre lors de la compilation : -debug=true.
Sur Windows :
.\ mxmlc . exe - debug = true " Sources / Hello . as "

Sur Linux :
./ mxmlc - debug = true " Sources / Hello . as "

Et enfin, sur Mac :


./ mxmlc - debug = true Sources / Hello . as

Encore une fois, il est possible que vous ayez besoin des droits administrateurs sur Linux pour pouvoir compiler. Pour contourner le problme, essayez
dajouter bash ou sudo avant la commande ./mxmlc.
Si tout cest bien pass, votre console devrait afficher quelque chose comme ce que vous
voyez la figure 2.21.
Lancer le dbogueur Flash
Pour pouvoir afficher les messages de la fonction trace(), il nous faut utiliser un autre
outil notre disposition : le dbogueur Flash. En effet, Flash Player, mme en
version de dbogage, ne peut pas afficher des messages en continu dans une console. Il
se contente de les envoyer : le dbogueur va alors se charger de rcuprer les messages
et de nous les prsenter dans la console. Il sagit du programme fdb qui devrait tre
dans le rpertoire Flex SDK 4/bin (voir figure 2.22).
Lancez le programme dans votre console :
Sur Windows :
.\ fdb . exe

Sur linux :
32

DIS BONJOUR AU MONSIEUR

Figure 2.21 Rsultat de la compilation

Figure 2.22 Contenu du rpertoire Flex SDK 4/bin

33

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

./ fdb

Sur Mac :
./ fdb

Un nouvel invit de commande, gr par fdb, devrait apparatre, comme la figure


2.23.

Figure 2.23 Le nouvel invit de commande gr par fdb

Lancer notre programme


Tout dabord il faut lancer une session de dbogage pendant laquelle le dbogueur
essayera de rcuprer les messages de dbogage du lecteur Flash :
run

Le dbogueur est ainsi en attente du lecteur Flash : lancez votre programme en


double-cliquant dessus, ou avec la commande que lon a vu plus haut dans le cas de
Linux. Le lecteur Flash nest cependant pas encore dmarr, il ne devrait donc pas se
passer grand-chose lcran.
Une fois que la session est correctement dmarre, entrez cette commande dans fdb
pour rellement lancer le programme :
34

DIS BONJOUR AU MONSIEUR

continue

Miracle ! Notre trace("Hello world !"); a fonctionn et le message est apparu dans
la console ! (voir figure 2.24)

Figure 2.24 Rsultat de la fonction trace()


Une fentre blanche sest ouverte : il sagit de notre animation ! Pour linstant, elle ne
fait presque rien, nous remdierons cela dans la suite du cours.
Vous pouvez maintenant fermer votre programme. Si plus tard vous voulez quitter fdb,
entrez cette commande :
quit

Vous pouvez galement lister lintgralit des commandes du dbogueur avec cette
commande :
help

Lorsque vous programmez en lignes de commande, je vous conseille douvrir


deux consoles : une pour la compilation laide de mxmlc, et une autre pour
le dbogueur fdb. Cela vous vitera de quitter et relancer ce dernier chaque
compilation ; il vous suffira dutiliser la commande run chaque fois que vous
voulez tester votre programme.
35

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


Il en faut faire des efforts pour dboguer en lignes de commande, mais une fois
que vous avez pris le coup de main, cest plus facile. Pour se faciliter la vie, mieux vaut
squiper avec les meilleurs outils ! En effet, il existe des diteurs de code trs facile
dutilisation qui intgrent galement des outils prts lemploi pour compiler et tester
nos programmes !

FlashDevelop la rescousse !
Pour Windows, il existe un trs puissant diteur pour programmer en Flash, de
plus, il est gratuit et libre : jai nomm Flashdevelop ! Flashdevelop est ce que
lon appelle un IDE (Integrated Development Environment, environnement de
dveloppement intgr en anglais) : cest un logiciel contenant tout le ncessaire pour
programmer dans un ou plusieurs langages (ici lActionscript, mais pas seulement).
Vous allez voir : compiler sera dsormais aussi simple que dappuyer sur un bouton !

Tlchargement
Flashdevelop est donc disponible au tlchargement gratuitement, malheureusement,
la version officielle est rserve aux utilisateurs de Windows (voir figure 2.25). Commencez par tlcharger Flashdevelop.


Flashdevelop
B
Code web : 868865


Il est possible, pour les utilisateurs dun autre systme dexploitation, dutiliser une
machine virtuelle, tant que les dveloppeurs nauront pas eu le temps dadapter Flashdevelop dautres supports. Il existe galement une version alternative, sous forme
dun plugin pour le logiciel Eclipse. Rassurez-vous, le reste du cours ne porte pas sur
Flashdevelop, vous pourrez tout faire sans !


Plugin
B
Code web : 649014




Eclipse
B
.
Code web : 752289

Installation
Une fois linstallateur de Flashdevelop tlcharg, lancez-le et appuyez sur Next (voir
figure 2.26).
Cet cran nous permet de choisir dinstaller ou non des composants supplmentaires,
comme le Flex SDK. Pour viter tout problme, nous allons laisser les options par
dfaut, mais vous pouvez dcocher Install Flex SDK si vous lavez dj tlcharg et
que vous tes sr de vous. Je vous conseille toutefois de laisser le programme installer
le compilateur lui-mme pour viter tout problme. Cliquez sur Next (voir figure 2.27).
36

FLASHDEVELOP LA RESCOUSSE !

Figure 2.25 Tlchargement de FlashDevelop

Figure 2.26 Installation de FlashDevelop : tape 1

37

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.27 Installation de FlashDevelop : tape 2


Choisissez le dossier dinstallation de Flashdevelop, puis cliquez une nouvelle fois sur
Next (voir figure 2.28).

Figure 2.28 Installation de FlashDevelop : tape 3


Allez prendre un caf pendant linstallation ! (voir figure 2.29)
Cliquez sur Finish pour terminer linstallation (voir figure 2.30).
Si Flashdevelop ne se lance pas tout seul, lancez-le. Vous arrivez sur lcran daccueil
(voir figure 2.31).
38

FLASHDEVELOP LA RESCOUSSE !

Figure 2.29 Installation de FlashDevelop : tape 4

Figure 2.30 Installation de FlashDevelop : tape 5

39

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.31 Page de dmarrage de FlashDevelop


Vous pouvez fermer la page daccueil en cliquant sur la croix correspondante (voir figure
2.32).

Figure 2.32 Fermeture de la page daccueil

Un peu de paramtrage
Si vous avez dcoch Install Flex SDK lors de linstallation du logiciel, il faut lui
dire o se trouve le Flex SDK que nous avions tlcharg au dbut avant de pouvoir
lutiliser : autrement, il ne pourra pas compiler notre projet, ce qui serait bien dommage.
Ces manipulations vous seront galement utiles si vous mettez jour le Flex SDK
plus tard.
Commenons par nous rendre dans les paramtres du logiciel, laide du menu Tools
(voir figure 2.33).
40

FLASHDEVELOP LA RESCOUSSE !

Figure 2.33 Accs aux paramtres de FlashDevelop


La fentre des paramtres de Flashdevelop souvre ; slectionnez AS3Context dans la
liste de gauche, puis Installed Flex SDKs dans le panneau de droite. Ensuite, cliquez
sur le petit bouton avec trois points, comme la figure 2.34.

Figure 2.34 Paramtres de FlashDevelop


Le gestionnaire des SDK souvre et est normalement vide. Nous allons ajouter notre
SDK dans la liste : cliquez sur le bouton Ajouter en bas gauche (voir figure 2.35).
Un nouveau SDK est apparu dans la liste ! Il faut maintenant spcifier le chemin (Path)
41

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.35 diteur de collections InstalledSDK

du SDK en le slectionnant et en cliquant sur le petit bouton de droite trois points


(voir figure 2.36).

Figure 2.36 Mise en place du SDK

Choisissez le dossier o vous avez plac le SDK au dbut du chapitre, par exemple
D:\Flex SDK 4. Pour finir, validez en cliquant sur le bouton OK et fermez la fentre
des paramtres laide du bouton Close situ en bas droite.
42

FLASHDEVELOP LA RESCOUSSE !

Crons un projet Actionscript


Pour pouvoir programmer sereinement au mme endroit durant le cours, il nous faut
crer un projet Actionscript 3. Pour cela, allez dans le menu Project de la barre de
menus en haut, et cliquez sur New Project (voir figure 2.37).

Figure 2.37 Cration dun nouveau projet


Une nouvelle fentre apparat, proposant plusieurs types de projets. Slectionnez AS3
Project et donnez un nom votre projet dans le champ Name. Vous pouvez demander
Flashdevelop de vous crer automatiquement un dossier pour votre projet, en cochant
la case Create directory for project (voir figure 2.38).
Validez et notre projet est prt ! Flashdevelop a cr pour nous les dossiers et fichiers de
base quil faut pour commencer travailler sur notre programme Flash. Slectionnez
le panneau Project en bas droite : il nous affiche larborescence de notre projet (voir
figure 2.39).
Le dossier bin doit contenir tous les mdias qui seront chargs lexcution de notre
programme (pour linstant, nous allons le laisser tel quil est). Cest aussi le dossier
o notre fichier SWF sera cr la compilation. Le dossier lib sert regrouper tous
les mdias et librairies que vous pourriez importer dans votre programme, comme je
lai expliqu au tout dbut du chapitre. Laissons-le vide galement. Enfin, le dossier
src contient tous les fichiers de code qui composent notre programme. tendez-le,
et vous verrez que Flashdevelop a cr pour nous un fichier Actionscript principal
(reconnaissable la petite flche verte), quil a nomm Main.as. Double-cliquez dessus
pour louvrir dans lditeur.

Bien utiliser Flashdevelop


Avoir de bons outils ne suffit pas : il est primordial de bien savoir les utiliser ! Ainsi,
avant de tester notre projet, il est prfrable de faire un petit tour du propritaire.
43

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

Figure 2.38 Paramtrage du nouveau projet

Figure 2.39 Arborescence du projet

44

FLASHDEVELOP LA RESCOUSSE !
Linterface
Linterface de Flashdevelop, bien qucrite en anglais, est plutt claire et surtout trs
pratique (voir figure 2.40). Dtaillons-la ensemble.

Figure 2.40 Linterface de FlashDevelop


1. La barre de menu
Toutes les fonctionnalits de Flashdevelop sont accessibles dans ces menus.
File (Fichier) : vous trouverez ici toutes les commandes en rapport avec les fichiers,
comme la cration de nouveaux documents, la sauvegarde, limpression. . .
Edit (dition) : ce deuxime menu concerne le texte que vous tapez dans lditeur. Vous pouvez ainsi facilement annuler des modifications, copier-coller du texte,
commenter du code slectionn. . .
View (Affichage) : ici, vous pouvez modifier la prsentation de Flashdevelop, et rouvrir les panneaux que vous auriez malencontreusement ferm.
Search (Recherche) : si vous voulez effectuer des recherches de texte dans votre
document ou dans le contenu des fichiers de votre projet, passez par ce menu !
Debug (Dbogage) : ce menu est un peu plus technique et concerne les sessions
de dbogage que vous effectuerez dans Flashdevelop (comme avec fdb). Nous en
reparlerons plus tard.
Project (Project) : tout ce qui touche la gestion de vos projets, comme la cration,
louverture, mais aussi pour tester votre projet actuel.
Insert (Insertion) : ici vous pouvez insrer du texte spcial dans votre document,
comme lheure actuelle (timestamp) ou une couleur entre autres.
Refactor (Refactorisation) : derrire ce terme barbare se cachent les oprations automatiques de maintenance et de mise en forme de votre code afin de le retravailler
pour quil soit plus clair (Code formatter). Dans Flashdevelop se trouvent gale45

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


ment des outils de gnration de code pour travailler plus vite (Code generator).
Tools (Outils) : ici vous trouverez des outils pour le dveloppement en Flash, et
plusieurs fentres de paramtrage du logiciel.
Macros : il sagit de scripts lancer dans le logiciel pour automatiser certaines tches ;
toutefois, nous naborderons pas les macros de Flashdevelop dans ce cours.
Syntax (Syntaxe) : dans ce menu, vous pouvez spcifier Flashdevelop dans quel
langage vous tes en train de coder, afin quil puisse colorier le code de manire
adquate. En gnral, on nutilise pas ce menu, car Flashdevelop dtecte le type de
chaque fichier laide de son extension.
Help (Aide) : ce menu regroupe toutes les aides disponibles pour Flashdevelop, et
permet galement de vrifier les mises jour du logiciel.
2. La barre de raccourcis
Les commandes les plus utilises sont rassembles ici pour pouvoir les utiliser directement sans avoir passer par les menus.
3. Les raccourcis de dbogage
Cette zone de la barre des raccourcis est rserve aux boutons utiles pour compiler notre
projet (Build Project), le tester (Test Project) et changer le mode de dbogage
(choisir Debug revient ajouter le paramtre -debug=true au compilateur du Flex
SDK comme nous lavons vu plus haut).
4. Lditeur de texte
Cest ici que vous crirez vos programmes. gauche sont affichs les numros des lignes,
et en haut se trouvent les diffrents documents ouverts sous forme donglets.
5. Les panneaux de dveloppement
Ce sont des outils qui vous faciliteront la vie lorsque vous programmerez.
6. La console de sortie
Dans ce panneau seront affichs tous les messages de Flashdevelop (comme ltat de
la compilation par exemple) et les messages du lecteur Flash (par exemple, avec la
fonction trace()).

Lauto-compltion
Cette fonctionnalit est trs utile et vous lutiliserez en permanence pendant que vous
programmerez : en effet, elle peut terminer ce que vous tes en train de taper votre
place (toujours dans une optique de gain de temps) et peut galement vous aider
choisir quoi taper grce aux informations quelle propose.
Commenons par complter notre classe Main : placez-vous dans la fonction _init
aprs le commentaire // entry point (point dentre) et commencez taper trace.
Surprise ! Un menu souvre au bout du quatrime caractre, vous proposant dajouter
la fonction trace(), avec en bonus sa description ! (voir figure 2.41)

Pour valider votre choix, appuyez sur Entre et le mot trace est automatiquement
termin ! Bien entendu, cela na pas une grande utilit dans notre cas car le nom de la
46

FLASHDEVELOP LA RESCOUSSE !

Figure 2.41 Auto-compltion de la fonction trace()


fonction est trs court. Mais imaginez si vous aviez retenir toutes les fonctions et si
en plus leur nom fasait vingt caractres !
Il est galement possible dactiver lauto-compltion tout moment, mme
si lon na rien encore tap : il suffit dappuyer simultanment sur les touches
Ctrl et Espace.

Compiler et tester notre projet


Terminez votre ligne de code pour que votre programme affiche Hello world ! dans
la console. Comment a, vous ne vous souvenez plus comment faire ? ! Bon daccord, je
vous donne la ligne ajouter, mais cest bien parce que cest vous :
1

trace ( " Hello world ! " ) ;

Voici quoi doit ressembler le fichier aprs modifications :


1
2
3

package {
import flash . display . Sprite ;
import flash . events . Event ;

4
5
6
7
8
9

/* *
* ...
* @author Guillaume
*/
public class Main extends Sprite {

10
11
12
13
14
15
16

public function Main () : void {


if ( stage )
init () ;
else
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

17

47

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK


private function init ( e : Event = null ) : void {
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point

18
19
20
21
22

23

trace ( " Hello world ! " ) ;

24

25
26
27

Mais pourquoi le code est diffrent par rapport tout lheure ?

Trs bonne question ! Flashdevelop, en crant notre projet, a automatiquement rempli cette classe avec le code de base de telle sorte quil ny ait aucun problme pour
nous. Les fonctions quil a rajout sont utiles dans certains cas pour viter des erreurs
daffichage. Retenez quil faut commencer programmer juste aprs le commentaire
// entry point seulement dans notre classe Main. Dans les autres classes que vous
crerez, ce code supplmentaire ne sera pas ncessaire.
Une fois que votre classe Main est prte, lancez la compilation en cliquant sur le
bouton en forme de flche bleue (Test Project)

dans la barre des raccourcis ou en
appuyant simultanment sur les touches Ctrl et Entre . Vous remarquerez quil y
a un bouton Build Project immdiatement gauche qui ne sert qu compiler notre
projet sans le lancer.
Si tout ce passe bien, une fentre du lecteur Flash souvre avec votre programme et la
console affiche notre message Hello world ! , comme la figure 2.42.

Figure 2.42 Lancement du programme


48

FLASHDEVELOP LA RESCOUSSE !
Cest aussi simple que cela !

En rsum
Lopration de vrification des erreurs, dassemblage des diffrents fichiers et de compression dun projet sappelle la compilation.
Le Flex SDK est un ensemble doutils de dveloppement, et notamment un compilateur permettant daboutir au fichier swf.
FlashDevelop est un IDE, cest--dire un outil qui permet dcrire, de compiler et
de tester du code Actionscript plus facilement.
En Actionscript, le code scrit lintrieur de fonctions, elles-mmes contenues
dans une classe, le tout plac dans un package.
Il est possible dinsrer des commentaires au milieu du code grce aux caractres
// , /* et */ .
Il existe une fonction trace() qui permet dcrire du texte dans la console, et est
principalement utilise pour les tapes de dbogage.

49

CHAPITRE 2. VOTRE PREMIER PROGRAMME AVEC FLEX SDK

50

Chapitre

Les variables
Difficult :
Les variables sont un des lments les plus importants dans tous les langages de programmation : elles permettent de mmoriser des informations de toutes sortes. Sans elles, les
programmes seraient tous trs basiques et moins puissants, le monde informatique serait
alors dun ennui mortel.
Un petit exemple concret : vous voulez que votre programme vous dise bonjour, aprs lui
avoir donn votre nom. Une variable (appele monNom par exemple) se chargera alors de
mmoriser le mot que vous lui entrerez pour plus tard permettre au programme de vous
appeler par votre nom : il lui suffira de regarder ce quil se trouve dans la variable monNom.

51

CHAPITRE 3. LES VARIABLES

Dclarer et utiliser des variables


Dclaration
Le mot-cl var
La premire chose faire avant dutiliser des variables, cest de les crer :
1

var maVariable ;

Pour cela, nous avons notre disposition un mot-cl (ou mot rserv) obligatoire : var.
Cette instruction permet de dclarer une variable ; elle sutilise de la faon suivante :
var suivit dun espace et du nom de la variable.
Petit rappel : un mot-cl (ou rserv) est une expression qui est utilise par
le langage et qui lui est donc rserve, cest--dire que vous ne pouvez pas
appeler une variable var ou utiliser ce mot rserv pour autre chose que son
utilit premire.
Dsormais, vous savez crer une variable, mais le code prcdent nest pas trs utile.
En effet, chaque variable possde un type, indispensable, qui dcrit son comportement
et son utilit (par exemple : nombre, entier, chane de caractres, etc.). Sans ce type,
le langage ne saurait pas qui il a affaire en lisant une variable et surtout comment
lutiliser.
Noubliez pas de mettre le point-virgule en fin de ligne !

Comme pour les noms de classes, il est prfrable dutiliser la notation


Camel pour le nom de nos variables : leNomDeMaVariable au lieu de
lenomdemavariable. Vous pouvez galement utiliser lunderscore (_) pour
simuler les espaces qui eux sont interdits.

Le typage
Il faut donc assigner un type chaque nouvelle variable pour que le programme puisse
la reconnatre. Pour cela, on utilise les deux points ainsi :
1

var maVariable : sonType ;

Ce type suivra la variable tout au long de lexcution du programme.


Avant, en Actionscript 2, il tait possible de dclarer des variables sans les typer, le
lecteur Flash se chargeait de deviner le type de ces variables. Bien entendu, cette
technique est proscrire pour des raisons de performances et de rigueur (imaginez
52

DCLARER ET UTILISER DES VARIABLES


plusieurs centaines de variables qui vous avez affaire, mais dont vous ne connaissez
pas le type). Dsormais, les variables doivent tre types la cration : on appelle cela
le typage strict. Cest une des principales raisons de lamlioration des performances
des animations depuis le passage lActionscript 3.
Les diffrents types que vous pourrez utiliser seront dtaills un peu plus loin.
Initialiser la nouvelle variable
Aprs avoir cr une variable, il vous prendra peut-tre lenvie dy mettre quelque
chose pour la rutiliser plus tard :
1

var maVariable : sonType = ceQueJeMetsDedans ;

Vous remarquerez quon peut remplir une variable directement sa cration (ce qui est
drlement pratique), en mettant un signe gal aprs le type ; on appelle cette opration linitialisation. Ainsi, ds quelle sera cre, la variable maVariablesera du type
sonTypeet contiendra ceQueJeMetsDedans.
Vous ntes videmment pas obligs dinitialiser les variables, vous pourrez leur donner
une valeur (ou un contenu si vous prfrez) plus tard laide de laffectation.
Les valeurs par dfaut
Lorsque vous crez une variable et que vous ne linitialisez pas, elle nest pas tout fait
vide ; en effet, elle contient automatiquement une valeur par dfaut qui sera souvent
null, sauf quelques cas particuliers selon le type de la variable. Ainsi, si vous crivez
ceci :
1

var maVariable : sonType ;

maVariable contiendra sa valeur par dfaut, donne par son type.


Le mot-cl null est rserv lActionscript, vous ne pouvez donc pas appeler une variable null. Cette valeur remplace lancien mot-cl quivalent
undefined valable en Actionscript 2. Nanmoins, une variable que vous ninitialisez pas contient undefined si elle na pas de type, et vous pourrez rencontrer ce mot-cl avec les tableaux dans un des chapitres suivants.

Utiliser les variables


Affectation
Tout au long de lexcution du programme, vous aurez srement besoin de modifier le
contenu dune variable en fonction des besoins du moment. La mthode est presque
identique linitialisation, car on utilise nouveau le signe gal :
53

CHAPITRE 3. LES VARIABLES


1

maVariable = nouveauContenu ;

Ainsi, la valeur nouveauContenu sera stocke dans la variable maVariable.


Il est absolument interdit daffecter une valeur une variable si cette dernire
nexiste pas. Cela naurait aucun sens et le compilateur vous le fera savoir en
refusant de compiler votre programme. Noubliez donc pas de dclarer vos
variables avant de les utiliser.

Lecture
Il est tout aussi intressant de pouvoir lire une variable pour utiliser son contenu : par
exemple, le programme aura besoin de regarder ce que contient la variable monNom pour
pouvoir afficher Bonjour Georges ! si jai mis Georges dans la variable avant.
Par exemple, pour copier le contenu de la variable a dans la variable b, il faut donc
crire :
1

b = a ; // Je prends ce qu ' il y a dans la variable a , et je le


mets dans b

Vous pouvez voir ainsi que la faon de procder est trs simple : il suffit de renseigner
le nom de la variable.
Petite piqre de rappel : // Je prends ce quil y a dans la
variable a, et je le mets dans b est un commentaire ; il permet dcrire des informations sur le programme destination dventuels
lecteurs ou pour vous-mmes afin de vous rappeler quoi sert ce que vous
avez tap l par exemple. Les commentaires ninfluent en aucune faon sur
le fonctionnement du programme, ils sont tout simplement ignors.
Avec les dclarations des variables, cela donnerait :
1
2
3
4

var a : typeDeA = contenuA ;


var b : typeDeB = contenuB ;
b = a ; // Je prends ce qu ' il y a dans la variable a , et je le
mets dans b
// La variable b contient maintenant " contenuA "

Les nombres
Les diffrents types
Comme vous pouvez vous en douter, les nombres sont trs utiliss dans le monde de
linformatique, tant donn que le numrique est bas sur des suites de 0 et de 1. Il
existe diffrents types de nombres en ActionScript 3, chacun ayant sa spcificit.
54

LES NOMBRES
Le type int
Le type int sert manipuler des entiers relatifs. Voici un exemple de dclaration et
dinitialisation de ce type de variables :
1

var monEntier : int = - 100 ;

Ce type permet de manipuler des nombres cods sur 32 bits (cest--dire 32 0 ou


1 ), donc compris entre -2 147 483 648 et 2 147 483 647. Si vous sortez de cet
encadrement, vous obtiendrez une erreur. La valeur par dfaut de ce type est 0.
Pour accder rapidement ces deux valeurs, utilisez respectivement
int.MIN_VALUE et int.MAX_VALUE. Ce sont des variables un peu spciales
car elles sont utilisables partout dans votre code et on ne peut que les lire.
On les appelle des constantes, notion que nous aborderons dans le chapitre
sur lorient objet.

Le type uint
Le type uint sert manipuler des entiers naturels ou non-signs (cest--dire positifs),
voici un exemple de dclaration et dinitialisation :
1

var monEntier : uint = 42 ;

Le type uint permet dutiliser des entiers naturels cods sur 32 bits galement, donc
compris entre 0 et 4 294 967 295. Comme le type int, la valeur par dfaut est 0, et
vous obtiendrez aussi une erreur si vous sortez de cet encadrement. Dans certaines
situations, lutilisation de ce type ralentit lgrement lexcution de votre programme.
Ainsi, je vous conseille dutiliser le type int si les nombres que vous voulez manipuler
sont infrieurs 2 147 483 647.
Pour accder rapidement ces deux valeurs, utilisez respectivement
uint.MIN_VALUE et uint.MAX_VALUE. Elles sont galement utilisables en
lecture seule partout dans votre code.

Le type Number
Le type Number sert manipuler tous les nombres (entiers comme flottants), dans un
intervalle extrmement grand. On peut presque considrer quon peut y mettre tous
les nombres. Voici comment les utiliser :
1

var monNombre : Number = 3 . 1415 ;

55

CHAPITRE 3. LES VARIABLES


Comme dans la plupart des langages de programmation, et de faon gnrale
en informatique, on utilise la notation anglaise des nombres flottants (ou
virgule). Cest--dire qu la place de la virgule, on met un point : 3,14 crit
en franais donne 3.14 en Actionscript.
La valeur par dfaut de ce type est NaN.
Le mot-cl NaN signifie Not a Number (pas un nombre) : votre nombre prend
cette valeur si vous ne linitialisez pas une certaine valeur ou si vous tentez
dy stocker autre chose quun nombre.
Ainsi, le code suivant ne ferait pas derreur, mais la variable nbr aurait pour valeur
NaN :
1
2

var nbr : Number = Number ( " Je veux un nombre ! " ) ; // On force la


variable contenir du texte ...
trace ( nbr ) ; // Affiche : NaN

Pour accder rapidement la valeur minimum ou la valeur maximum autorise, utilisez respectivement Number.MIN_VALUE et Number.MAX_VALUE.
Une nouvelle fois, elles sont utilisables en lecture seule partout dans votre
code.
Vous tes curieux de savoir quels sont le minimum et le maximum autoriss ? Voici le
code pour les afficher :
1
2
3
4

trace ( Number . MIN_VALUE + " " + Number . MAX_VALUE ) ;


// Affiche : 4 . 9406564584124654e - 324 1 . 79769313486231e + 308
// Le " e " signifie " fois dix puissance " ; par exemple , 1e + 10
quivaut 1x10 ^ 10 = 10 000 000 000
// 1 . 79769313486231e + 308 est donc un nombre 309 chiffres

Si par mgarde vous essayez daffecter un nombre flottant (cest--dire


virgule, comme 3.14) une variable de type int ou uint, il sera automatiquement arrondi lentier infrieur avant dtre stock dans la variable. Par
exemple, 3.14 deviendra 3, et 45.9 deviendra 45.

Oprations sur les nombres


Les oprateurs de base
Pour effectuer une opration entre deux nombres, on procde comme sur les cahiers
de Maths lcole ! Lopration est effectue lors de lexcution du programme et le
rsultat peut tre stock dans une variable monNombre par exemple. Voici un tableau
qui regroupe les oprations de base :
56

LES NOMBRES
Nom de lopration
Addition
Soustraction
Multiplication
Division
Modulo

Symbole
+
*
/
%

Exemple
monNombre
monNombre
monNombre
monNombre
monNombre

=
=
=
=
=

1
8
2
8
8

+
*
/
%

4;
3;
3;
4;
5;

//
//
//
//
//

monNombre
monNombre
monNombre
monNombre
monNombre

=
=
=
=
=

5
5
6
2
3

Pour ceux qui ne le connatraient pas, le modulo est un oprateur moins


courant qui permet de renvoyer le reste de la division euclidienne entre deux
nombres.
Ces oprations peuvent tre effectues sur des variables des trois types de nombres que
nous avons vu prcdemment, mme en les mlangeant. Voici quelques exemples de
calculs :
1
2
3
4
5

var unEntier : uint = 3 + 42 ;


var unAutreEntier : int = - 25 ;
var monResultat : Number = unEntier * unAutreEntier ;
monResultat = monResultat / 100 ;
trace ( monResultat ) ; // Affiche : - 11 . 25

Contrairement beaucoup dautres langages, diviser par zro ne fera


pas planter votre programme. . . Le rsultat de lopration sera en fait
Number.POSITIVE_INFINITY, autrement dit, le nombre infini ! Faites trs
attention vrifier quune telle chose narrive pas, sinon vous pourriez avoir
des surprises lors de lexcution de votre programme. . .
Notez galement quil faut tre prudent sur le type de variables utilis pour les calculs.
Je rappelle quun nombre virgule sera automatiquement arrondi lentier infrieur
si vous tentez de laffecter une variable de type int ou uint. Reprez donc ce qui se
droule au fil de ces instructions :
1
2
3
4

var unEntier : uint =


var unNombre : Number
var monResultat : int
trace ( monResultat ) ;

2;
= 3 . 14 ;
= unEntier + unNombre ;
// Affiche : 5

Simplifier les calculs


Comme dans beaucoup de langages, il est possible en Actionscript de simplifier des
calculs de ce genre :
1

monResultat = monResultat / 100 ;

Ainsi lcriture de cette instruction peut tre simplifie et rduite sous la forme :
1

monResultat /= 100 ;

57

CHAPITRE 3. LES VARIABLES


Ce code est donc plus rapide crire, et provoque le mme rsultat que prcdemment.
Bien videmment, cette manipulation nest pas rserve la division, mais peut tre
effectue avec nimporte quel autre oprateur arithmtique : +=, -=, *=, /= et %=.
Nous avons prsent fait le tour des oprateurs disponibles en Actionscript.
Mais quen est-il des autres oprations mathmatiques plus complexes,
comme la racine carre ?
En effet, il nexiste pas doprateurs arithmtiques en Actionscript 3 pour effectuer
de telles oprations. Heureusement, une classe un peu spciale appele Math est fournie
par Flash.

La classe Math
Cette classe na pas besoin dtre importe, elle est accessible en permanence. Elle
contient une flope doutils mathmatiques trs utiles comme les puissances, les fonctions trigonomtriques, les nombres alatoires. . .

Les puissances
Ces fonctions de la classe Math vous permettent de manipuler les puissances sur des
nombres :
1
2
3
4
5

var monNombre : Number = 42 ;


// Elever la puissance
trace ( Math . pow ( monNombre , 5 ) ) ;
// Racine carr e
trace ( Math . sqrt ( monNombre ) ) ;

Les arrondis
Il existe trois types darrondis : larrondi classique, larrondi lentier infrieur le plus
proche et larrondi lentier suprieur le plus proche :
1
2
3
4
5
6
7

58

var monNombre : Number = 3 . 1415 ;


// Arrondi
trace ( Math . round ( monNombre ) ) ; // 3
// Entier inf rieur
trace ( Math . floor ( monNombre ) ) ; // 3
// Entier sup rieur
trace ( Math . ceil ( monNombre ) ) ; // 4

LES NOMBRES
Trigonomtrie
Cosinus, sinus, tangente, arc-cosinus, arc-sinus et arc-tangente sont des fonctions trigonomtriques que nous propose la classe Math :
La valeur de \pi est accessible laide de Math.PI.

1
2

var angle1 : Number = Math . PI / 2 ;


var angle2 : Number = Math . PI / 6 ;

3
4
5
6

// Cosinus
trace ( Math . cos ( angle1 ) ) ;
// 6 . 123233995736766e - 17

7
8
9
10

// Sinus
trace ( Math . sin ( angle1 ) ) ;
// 1

11
12
13
14

// Tangente
trace ( Math . tan ( angle1 ) ) ;
// 163312 39353195370

15
16
17
18

// ArcCosinus
trace ( Math . acos ( angle2 / angle1 ) ) ;
// 1 . 2309594173407747

19
20
21
22

// ArcSinus
trace ( Math . asin ( angle2 / angle1 ) ) ;
// 0 . 3398369094541219

23
24
25
26

// ArcTangente
trace ( Math . atan ( angle1 ) ) ;
// 1 . 0038848218538872

Les angles sont toujours exprims en radians.

Il existe une variante de la fonction arc-tangente en Actionscript 3 :


Math.atan2(). Elle sert principalement calculer sans erreur langle entre
deux positions. Nous en aurons besoin plus loin dans le cours.

59

CHAPITRE 3. LES VARIABLES


Nombre alatoire
Il serait trs intressant de fabriquer des nombres alatoires, pour des jeux par exemple.
Cela est possible avec la fonction Math.random() :
1

trace ( Math . random () ) ; // Affiche un nombre flottant al atoire


compris entre 0 et 1

Pour gnrer un nombre alatoire entre deux valeurs a et b (voir figure 3.1), il faut
utiliser la formule suivante :
1

trace ( a + Math . random () * ( b - a ) ) ;

Figure 3.1 Cration dun nombre alatoire

Les chanes de caractres


Les chanes de caractres sont galement trs utilises. Il sagit dune suite de caractres qui forme du texte. Par exemple, Hello world ! est une chane de caractres ;
son premier caractre est le H , et son dernier caractre est le ! .
Une chane de caractres est toujours entoure de guillemets, comme nous lavons
vu dans le chapitre prcdent :
1

trace ( " Hello world ! " ) ;

Mais vous pouvez aussi mettre des apostrophes la place des guillemets :
1

trace ( ' Hello world ! ') ;

Attention toutefois ne pas mlanger les deux, cela ne marcherait pas. Ainsi,
le code trace("Hello world !); est incorrect.

chappement des caractres spciaux


Mais si je veux mettre des guillemets ou des apostrophes dans ma chane de
caractres ?
60

LES CHANES DE CARACTRES


Je vous voyais venir ! Effectivement, mettre des guillemets dans une chane de caractres guillemets ou des apostrophes dans une chane de caractres apostrophes serait problmatique : en effet, le compilateur pensera que vous avez termin
votre chane au deuxime guillemet ou apostrophe rencontr, et se demandera pourquoi
diable dautres caractres se baladent derrire !
Dans cet exemple, vous pouvez voir que la coloration syntaxique nous montre le problme :
1

trace ( " Hello . swf a dit : " Hello world ! " " ) ;

En effet, le Hello world ! nest dans ce cas plus considr comme faisant partie de
la chane de caractres. . .
Pour remdier cela, il faut chapper le ou les caractres qui posent problme. Cela
consiste mettre un autre caractre spcial, lantislash (\), qui permettra de dire que
le caractre suivant doit tre pris pour un caractre tout fait banal dans notre chane.
Ainsi, le code correct serait :
1

trace ( " Hello . swf a dit : \" Hello world !\" " ) ;

Vous pouvez galement remplacer les guillemets par des apostrophes dans les cas o
a vous arrange de faire ainsi :
1

trace ( ' Hello . swf a dit : " Hello world !" ') ;

Plus besoin dchapper, car ce nest plus le caractre guillemet qui prcise o dbute
et o se termine la chane, mais lapostrophe. Par contre, si vous voulez mettre une
apostrophe en plus, le problme va revenir :
1

trace ( ' Hello . swf m 'a dit : " Hello world ! " ') ;

Encore une fois, le compilateur ne va vraiment rien comprendre ce que vous lui
crivez. Solution : chapper le caractre apostrophe qui pose problme !
1

trace ( ' Hello . swf m \ ' a dit : " Hello world !" ') ;

Vous pouvez systmatiquement chapper les guillemets et apostrophes dans


les chanes de caractres si cela vous met laise.

trace ( ' Hello . swf m \ ' a dit : \" Hello world !\" ') ;

Utiliser les variables


Maintenant, si nous voulons mmoriser des chanes de caractres, il va falloir les
ranger dans des variables de type String. Par exemple, pour mmoriser notre phrase
Hello world ! dans la variable coucou, il faut procder ainsi :
61

CHAPITRE 3. LES VARIABLES


1
2

var coucou : String = " Hello world ! " ;


trace ( coucou ) ; // Affiche : Hello world !

La valeur par dfaut dune variable de type String est null.

Concatnation de chanes
Concatner deux chanes de caractres consiste les assembler pour ne former quune seule chane. Par exemple, concatner la chane Hello avec la chane
world ! donnerait une nouvelle chane plus grande : Hello world ! . Pour cela, il
faut utiliser loprateur + (qui sert aussi additionner deux nombres), de cette faon :
1

" Hello " + " world ! "

Ainsi, si lon voulait afficher notre texte en deux parties, nous cririons ceci :
1

trace ( " Hello " + " world ! " ) ;

Il est alors possible de concatner des chanes avec des variables de tout type (y compris
avec des nombres) et de diffrentes manires :
1
2
3
4
5
6

var coucouDebut : String = " Hello " ;


var coucouFin : String = " ! " ;
var monNom : String = " J r me " ;
var monAge : int = 42 ;
trace ( coucouDebut + monNom + coucouFin + " Tu as " + monAge + "
ans , n 'est - ce pas ? " ) ;
// Affiche : Hello J r me ! Tu as 42 ans , n 'est - ce pas ?

7
8
9

trace ( Number . MIN_VALUE + " " + Number . MAX_VALUE ) ;


// Affiche : 4 . 9406564584124654e - 324 1 . 79769313486231e + 308

Quelques variables et fonctions utiles


Ces variables ou fonctions sont obligatoirement attaches une variable de type String
laide dun point. Vous ne pouvez pas les utiliser sur une chane de caractres simple
comme "Hello world !".
Longueur dune chane
Pour connatre la longueur dune chane de caractres, cest--dire, le nombre de
caractres quelle contient, il faut utiliser la variable length disponible sur notre chane
de cette manire :
62

LES CHANES DE CARACTRES


1
2
3

var coucou : String = " Hello world ! " ;


trace ( " Cette cha ne contient " + coucou . length + " caract res . "
);
// Affiche : Cette cha ne contient 13 caract res .

Le point est important : il signifie que cest la longueur de cette chane particulire que
lon veut.

Changer la casse dune chane


La casse est ltat dune lettre, cest--dire si elle est en minuscule ou en majuscule.
Il est possible de modifier la casse de lensemble dune chane de caractres
en utilisant les fonctions toLowerCase() (en casse minuscule) et toUpperCase() (en
casse majuscule) :
1
2
3
4
5

var coucou : String = " Hello world ! " ;


// En minuscules
trace ( coucou . toLowerCase () ) ; // hello world !
// En majuscules
trace ( coucou . toUpperCase () ) ; // HELLO WORLD !

Rechercher dans une chane


Il peut tre utile de rechercher un ou plusieurs caractres dans une chane. Pour cela,
on utilise la fonction indexOf() (position de) :
1

maVariable . indexOf ( " Cha ne recherch e " ) ;

La fonction renvoie la position du premier caractre de la chane recherch dans la


variable, ou -1 si elle ne la pas trouv.
Vous pouvez aussi spcifier une variable de type String entre les parenthses,
au lieu dune chane de caractres simple.
Cherchons la position de la premire lettre a dans notre variable :
1
2

var coucou : String = " Hello world ! " ;


trace ( coucou . indexOf ( " a " ) ) ; // -1 , on n 'a rien trouv

Effectivement, il ny a pas de a dans notre chane. . . Retentons notre chance avec


le mot world :
1

trace ( coucou . indexOf ( " world " ) ) ; // 6 ! Victoire !

Bravo, nous avons trouv le mot world la septime lettre !


63

CHAPITRE 3. LES VARIABLES


Il se situe la septime position, car le numro des caractres commence
zro : le premier caractre a le numro 0, le deuxime a le numro 1 et
ainsi de suite. Du coup, pour avoir le numro du dernier caractre dans la
chane, il faut prendre sa longueur moins un : coucou.length - 1.

Remplacer dans une chane


Cette fonction replace() est similaire la fonction de recherche, mais il faut en plus
indiquer le texte qui va remplacer lancien.
1

maVariable . replace ( " Cha ne recherch e " , " Cha ne ins rer la
place " ) ;

Modifions dynamiquement notre chane pour remplacer world par Jrme :


1

trace ( coucou . replace ( " world " , " J r me " ) ) ; // Hello J r me !

La variable de dpart nest pas modifie : la fonction se contente de renvoyer la nouvelle


chane que lon peut afficher ou mettre dans une variable :
1
2
3
4

var coucou : String = " Hello world ! " ;


var salut : String = coucou . replace ( " world " , " J r me " ) ;
trace ( salut ) ; // Hello J r me !
trace ( coucou ) ; // Hello world !

Le texte nest remplac quune seule fois : ds que le texte recherch est
rencontr, il est remplac et la fonction sarrte.

1
2

var coucou : String = " Hello world world world ! " ;


trace ( coucou . replace ( " world " , " J r me " ) ) ; // Hello J r me world
world !

Pour pouvoir remplacer tous les world en Jrme , il faut faire autant de
replace()que ncessaire :
1
2
3
4
5
6
7

64

var coucou : String = " Hello world world world ! " ;


coucou = coucou . replace ( " world " , " J r me " ) ;
trace ( coucou ) ; // Hello J r me world world !
coucou = coucou . replace ( " world " , " J r me " ) ;
trace ( coucou ) ; // Hello J r me J r me world !
coucou = coucou . replace ( " world " , " J r me " ) ;
trace ( coucou ) ; // Hello J r me J r me J r me !

LES CHANES DE CARACTRES


Il existe une autre mthode bien plus efficace et puissante qui consiste utiliser les expressions rgulires (ou RegExp) : ce sont des codes suivant
des rgles prcises, capables de rechercher et de remplacer du texte plusieurs fois dans une mme chane, ceci parmi une foule dautres choses fort
utiles. Malheureusement, cette notion est plutt complexe apprhender, je
ne laborderais pas dans le cours.

En rsum
Une variable permet de mmoriser une valeur.
Le mot-cl var sert dclarer une variable qui peut tre affecte dune valeur par
un signe = .
On utilise les trois types int, uint et Number pour des valeurs numriques.
Pour effectuer des calculs, il existe principalement les oprateurs de base : +, -,
*, / et %.
Grce la classe Math, il est possible de raliser des oprations mathmatiques
complexes.
Le type String est rserv lutilisation des chanes de caractres.
Diffrentes fonctions permettent de manipuler les chanes de caractres et il est
possible de les concatner grce loprateur +.

65

CHAPITRE 3. LES VARIABLES

66

Chapitre

Les conditions
Difficult :
Nous avons vu dans le prcdent chapitre comment manipuler les nombres laide doprateurs
et de variables. Nous allons voir prsent comment tester le contenu de ces variables ;
ainsi vous pourrez excuter des instructions ou non pour les diffrentes valeurs que pourront
prendre vos variables. Comme vous pourrez le voir, les conditions sont trs utiles dans le
monde de linformatique, et sont la base de linteractivit des machines, sans quoi elles
feraient toujours la mme chose !

67

CHAPITRE 4. LES CONDITIONS

criture dune condition


Quest-ce quune condition ?
Les conditions permettent de tester le contenu dune ou plusieurs variables. Ainsi,
vous pourrez excuter des instructions diffrentes suivant le rsultat du test. Grce ces
structures conditionnelles, le programme sera alors en mesure de prendre des dcisions.
Nos programmes seront donc moins monotones et pourront ragir diffremment suivant
les circonstances : imaginez si tous les programmes faisaient exactement la mme chose
quel que soit le contexte, cela serait bien ennuyeux ! Voici le genre dinstructions que
nous serons capables de raliser laide des conditions :
1
2

SI ma condition est vraie


ALORS effectuer mes instructions

Dans une condition, nous pourrons ainsi tester diffrentes choses. Par exemple, nous
pourrions tester un nombre entier pour savoir sil est positif ou non. Nous cherchons
donc une relation entre deux valeurs pour pouvoir les comparer. Pour cela, nous utiliserons donc divers oprateurs prsents dans la suite de ce cours. Si la condition est
vraie, alors les instructions qui la suivent sont excutes. Dans le cas contraire, elles
sont tout simplement ignores.
Ne vous inquitez pas si vous avez du mal saisir le concept, vous comprendrez mieux
au fil du chapitre.
En Actionscript, comme dans beaucoup dautres langages, les conditions renvoient automatiquement une valeur de type Boolean comme nous le verrons
plus loin dans le chapitre : true pour vraie et false pour fausse.

Les oprateurs relationnels


Les oprateurs relationnels permettent de comparer une variable une valeur ou
deux variables entre elles. Dans le tableau ci-dessous sont rpertoris les diffrents
symboles correspondants. Ces symboles seront utiliss en permanence, cest pourquoi
il serait judicieux de les retenir.
De manire gnrale, les oprateurs sont utiliss ainsi : une variable ou une valeur,
loprateur et une autre variable ou valeur. Voici quelques exemples de conditions :
1
2
3
4

// Cette condition est vraie si monEntier contient un nombre


sup rieur 2
monEntier > 2
// Cette deuxi me condition est vraie si maVariable et
monAutreVariable contiennent la m me valeur
monVariable == monAutreVariable

Vous pouvez galement comparer des chanes de caractres :


68

CRITURE DUNE CONDITION


Oprateur

1
2
3
4
5
6

<

Signification pour des valeurs numriques


est infrieur

>

est suprieur

<=

est infrieur ou gal

>=

est suprieur ou gal

==
!=
===
!==

est
est
est
est

gal
diffrent de
strictement gal
strictement diffrent de

Signification pour des caractres


est avant dans lordre alphabtique
est aprs dans lordre alphabtique
est avant dans lordre alphabtique ou identique
est aprs dans lordre alphabtique ou identique
est identique
est diffrent de
est strictement identique
est strictement diffrent de

var t1 : String = " Salut " ;


var t2 : String = " Salut " ;
var t3 : String = " Bonjour " ;
trace ( t1 == t2 ) ; // Affiche : true
trace ( t1 == t3 ) ; // Affiche : false
trace ( t1 > t3 ) ; // Affiche : true , car Salut est apr s Bonjour
dans l ' ordre alphab tique

Vous remarquerez que le test dgalit seffectue laide de deux signes = .


Les dbutants omettent souvent le deuxime symbole = , ce qui est source
derreurs dans votre code. En effet, le symbole = seul est un signe daffectation pour les variables comme nous lavons vu dans le prcdent chapitre.

Comparer deux variables : une question de types


Un oprateur relationnel permet de comparer uniquement deux expressions du mme
type. Il nest pas possible de comparer deux variables dont lune, par exemple, serait de
type int et lautre de type String. Si cela se produisait, le compilateur vous afficherait
un message derreur de ce type : Error : Comparison between. . . . Toutefois, il existe
une exception : les nombres qui peuvent tre compars entre eux mme si leur type
varie entre int, uint et Number. Par exemple, le code suivant fonctionnera sans erreur :
1
2
3

var nombre : Number = 0 . 4 ;


var entier : int = 1 ;
trace ( nombre < entier ) ; // Affiche : true

Mais alors, comment puis-je facilement comparer un nombre et une chane


de caractres ?
69

CHAPITRE 4. LES CONDITIONS


Et bien, il suffit de transformer lune de nos deux variables pour que les deux aient
exactement le mme type ! Par exemple, transformons le nombre en chane de caractres :
1
2
3

var nombre : Number = 3 . 14 ;


var texte : String = " 3 . 14 " ;
trace ( nombre . toString () == texte ) ; // Affiche : true

En effet, taper .toString() derrire notre variable de type Number transforme sa valeur
en chane de caractres afin que la comparaison fonctionne correctement !
La variable nombre nest pas rellement transforme, elle reste de type Number
par la suite.

Prcisions sur les oprateurs stricts


Les oprateurs stricts (=== et !==) servent comparer deux objets quelconques (par
exemple, deux variables) en regardant non seulement leur valeur, mais aussi leur type.
Ces oprateurs sont peu utiliss : en gnral, on connat lavance le type des variables
que lon manipule. Par exemple, je dclare et initialise trois variables de type Object,
cest--dire quelles nont pas de type bien dfini et que lon peut y mettre ce que
lon souhaite ; attention toutefois ne pas abuser de ce type un peu spcial, il ralentit
lexcution de votre programme. Ensuite, je teste la valeur de ces variables avec ==,
pour finalement tester leur valeur et leur type en mme temps avec ===. De toute
vidence, le caractre 3 nest pas du mme type que lentier 3.
1
2
3
4
5
6

var nom : Object = " 42 " ;


var prenom : Object = " 42 " ;
var age : Object = 42
trace ( nom === prenom ) ; // Affiche : true
trace ( nom == age ) ; // Affiche : true
trace ( nom === age ) ; // Affiche : false

Dans ce cas trs prcis, votre programme Flash convertira automatiquement le


format des variables lorsquil est ncessaire, sauf si vous utilisez les oprateurs
=== ou !==. Ainsi, la comparaison entre la chane de caractres et lentier se
droule sans accroc.

Les oprateurs logiques


Contrairement aux oprateurs prcdents qui permettaient de comparer des valeurs, les
oprateurs logiques servent combiner plusieurs conditions. Ceux-ci peuvent avoir
leur utilit lorsque nous voulons tester par exemple, si un nombre est compris dans un
intervalle. Les oprateurs relationnels ne permettent pas ce genre de comparaison.
70

CRITURE DUNE CONDITION


Nous pouvons donc contourner le problme en combinant plusieurs conditions. Prenons
un exemple : nous voulons savoir si une variable monNombre est comprise entre 0 et 10.
Pour cela nous pourrions dcomposer ce test en deux conditions :
monNombre est suprieur 0.
monNombre est infrieur 10.
Les oprateurs logiques nous permettent alors dassocier ces deux conditions en une
seule : monNombre > 0 ET monNombre < 10.
Le tableau ci-dessous prsente donc ces diffrents oprateurs, ainsi que les symboles
qui leur sont associs :
Oprateur
!
&&
||

Signification
NON logique
ET logique
OU logique

Ainsi, nous allons comparer notre nombre par rapport un intervalle laide de loprateur && :
1
2

// Test pour savoir si monNombre est compris entre 0 et 10


monNombre > 0 && monNombre < 10

La priorit des oprateurs


Pour dcider dans quel ordre les diffrentes oprations seront effectues, les oprateurs
respectent les rgles de priorit suivantes :
Les oprateurs arithmtiques (+, -, *, /, %) sont prioritaires par rapport aux
oprateurs relationnels (==, !=, <, >, etc. . .).
Les oprateurs relationnels sont prioritaires par rapport aux oprateurs logiques
(!, && et ||).
Les oprations entoures de parenthses sont toujours prioritaires.
Ainsi la condition 3 + 4 > 5 est vraie du fait que laddition est effectue avant la
comparaison.
Quelques exemples doprations imbriques :
1
2
3
4
5

trace ( 1
trace ( 1
trace ( 1
trace ( 1
trace ( 1

== 2 ) ; // Affiche : false
+ 1 == 2 ) ; // Affiche : true
== 2 || 2 == 2 ) ; // Affiche : true
!= 2 && 1 + 1 == 2 ) ; // Affiche : true
!= 2 && 1 + 2 == 2 ) ; // Affiche : false

Pour mieux comprendre lutilisation de ces conditions, nous allons tudier diffrentes
structures qui les utilisent. Commenons tout de suite avec linstruction if...else.
71

CHAPITRE 4. LES CONDITIONS

Linstruction if. . .else


La structure de base
La syntaxe
Linstruction if...else est la structure de base des conditions. Grce elle, nous
pouvons excuter des instructions diffrentes suivant si la condition est vraie ou fausse.
Sans plus attendre, voyons la structure if...else crite en Actionscript :
1
2
3
4
5
6
7
8

if ( /* Condition */ )
{
// Instructions si la condition est vraie
}
else
{
// Instructions si la condition est fausse
}

Vous remarquerez donc, dans cette structure, les deux blocs dinstructions dfinis par les
paires daccolades. Si la condition est vrifie, alors le premier bloc dinstructions sera
excut, sinon (traduction du mot else ) ce sera le second. Bien entendu, lcriture
du bloc else nest pas obligatoire. En revanche, il nest pas possible dcrire un bloc
else seul. Vous pourriez donc vous contenter du code suivant :
1
2
3
4

if ( /* Condition */ )
{
// Instructions si la condition est vraie
}

Parce que rien ne vaut un bon exemple, nous allons tout de suite tester une premire
condition dans notre IDE. Pour cela, nous prendrons une variable nomme maVie
reprsentant, par exemple, la vie restante dans un jeu quelconque. Nous pourrions
alors tester si vous tes encore en vie ou si vous tes mort. Voici donc le code insrer
juste aprs le commentaire // entry point de votre classe Main :
1

var maVie : uint = 1 ;

2
3
4
5
6
7
8
9
10

if ( maVie == 0 )
{
trace ( " Vous tes mort . " ) ;
}
else
{
trace ( " Vous tes toujours en vie . " ) ;
}

11
12

// Affiche : Vous tes toujours en vie .

Ici la variable maVie est gale 1, et donc la condition maVie == 0 est fausse. Ainsi, lors
de lexcution, seule linstruction lintrieur des accolades du else sera excute. Vous
72

LINSTRUCTION IF. . .ELSE


verrez donc apparaitre le message : Vous tes toujours en vie. Nhsitez pas tester
ce code avec diffrentes valeurs pour maVie afin de bien comprendre le fonctionnement.
Pour crire une condition if seule ou if...else, il faut respecter un certain
nombre de rgles et de conventions que nous allons dtailler.

Les rgles et conventions dcriture


Nous allons maintenant dfinir quelles sont les diffrentes rgles dcriture ainsi que
des conventions fortement recommandes. Tout dabord, vous aurez srement remarqu labsence de point-virgule ; aprs les accolades. En effet, les conditions ne
se terminent jamais par un point-virgule. Dautre part, les parenthses qui entourent
votre condition sont obligatoires. En revanche, les accolades peuvent tre facultatives
mais uniquement dans un cas ; il sagit du cas o il ny a quune seule instruction
lintrieur du bloc dinstructions. Il est alors possible dcrire votre condition suivant
lune des trois formes ci-dessous :
1
2
3
4

if ( maVie == 0 )
trace ( " Vous tes mort . " ) ;
else
trace ( " Vous tes toujours en vie . " ) ;

ou bien :
1
2
3
4
5
6

if ( maVie == 0 )
trace ( " Vous tes mort . " ) ;
else
{
trace ( " Vous tes toujours en vie . " ) ;
}

ou encore :
1
2
3
4
5
6

if ( maVie == 0 )
{
trace ( " Vous tes mort . " ) ;
}
else
trace ( " Vous tes toujours en vie . " ) ;

Pour finir ce paragraphe, nous parlerons dune chose trs importante en termes de
prsentation. Vous aurez certainement remarqu la mise en forme utilise depuis le
dbut pour crire les conditions :
Laccolade ouvrante sur une ligne.
Vos instructions dcales vers la droite laide dune tabulation.
Laccolade fermante sur une ligne.
73

CHAPITRE 4. LES CONDITIONS


Cette mise en forme est appele lindentation et nest pas obligatoire cependant, il
est trs fortement dconseill de tout crire sur une seule ligne ou de ne pas dcaler
les instructions lintrieur des accolades. En effet, respecter ces rgles vous permettra
de rendre vos codes beaucoup plus clairs et lisibles par vous mais aussi par dautres
personnes qui ne connatront pas la faon dont vous avez ralis votre programme.
Les ternaires
Dans certains cas, il est possible de condenser des conditions : on appelle cela les
expressions ternaires. Cette technique nest pas applicable tout le temps et il ne
faut pas en abuser. Pour introduire cette notion, nous allons partir du code suivant :
1
2
3
4
5
6

var monMessage : String ;


if ( maVie == 0 )
monMessage = " Vous tes mort . " ;
else
monMessage = " Vous tes toujours en vie . " ;
trace ( monMessage ) ;

Vous remarquerez quici la condition sert uniquement affecter une variable dune
valeur qui dpend dune condition. Les expressions ternaires ne peuvent tre utilises
que dans ce cas-l ! Il est alors possible de rcrire le code prcdent sous une forme
condense :
1
2

var monMessage : String = ( maVie == 0 ) ? " Vous tes mort . " : "
Vous tes toujours en vie . " ;
trace ( monMessage ) ;

Le principe est alors dcrire lensemble de la condition en une seule ligne et daffecter
directement la variable. Cest une forme dcriture qui peut tre pratique, mais sachez
quen ralit elle est trs peu utilise car elle est difficile lire. Utilisez donc les expressions ternaires pour diminuer le volume de votre code, mais tchez de garder un code
qui soit le plus facilement lisible !
Lcriture des expressions ternaires est assez spciale et souvent trompeuse.
Notez donc la prsence du symbole ? qui permet de tester la condition
place juste avant, ainsi que le signe : permettant de remplacer le motcl else et de sparer les instructions.

Le type boolen
En Actionscript, il existe un type de variable de type boolen : Boolean. Ces variables ne peuvent prendre que deux valeurs : true ou false. Les boolens sont trs
utiliss avec les conditions car ils permettent facilement dexprimer si une condition
est vraie ou fausse. Dailleurs, une condition est elle-mme exprime sous la forme
dun boolen. Pour sen assurer, vous allez tester le code suivant :
74

LINSTRUCTION IF. . .ELSE


1
2
3
4

if ( true )
trace ( " Ma condition est vraie . " ) ;
else
trace ( " Ma condition est fausse . " ) ;

5
6

// Affiche : Ma condition est vraie .

Nous pouvons remarquer quen effet la condition true est vraie, cest pourquoi lutilisation de variables de type boolen peut tre prfrable. Il nest alors plus ncessaire
dcrire le test == true pour une variable de type boolen. Ainsi, si vous utilisez
des noms judicieux pour vos variables, le code paratra plus clair :
1

var estEnVie : Boolean = true ;

2
3
4
5
6
7
8
9
10

if ( estEnVie )
{
trace ( " Vous tes toujours en vie . " ) ;
}
else
{
trace ( " Vous tes mort . " ) ;
}

11
12

// Affiche : Vous tes toujours en vie .

tant donn que le rsultat dune condition est un boolen, il est tout fait possible
de le stocker dans une variable :
1
2
3

var maVie : uint = 1 ;


var estEnVie : Boolean = ( maVie > 0 ) ;
trace ( estEnVie ) ; // Affiche : true

Lutilisation des boolens sert principalement allger votre code et le


rendre plus lisible. Encore une fois, choisissez des noms explicites pour vos
variables, cela permettra de faire plus facilement ressortir la logique de votre
programme.

La structure avec else if


Avant de clore cette partie sur la structure if...else, nous allons voir comment raliser
des tests supplmentaires avec else if. Ici, rien de bien compliqu, cest pourquoi vous
comprendrez aisment le code ci-dessous :
1

var monNombre : int = 1 ;

2
3
4
5

if ( monNombre < 0 )
{
trace ( " Ce nombre est n gatif . " ) ;

75

CHAPITRE 4. LES CONDITIONS


6
7
8
9
10
11
12
13
14

}
else if ( monNombre == 0 )
{
trace ( " Ce nombre est nul . " ) ;
}
else
{
trace ( " Ce nombre est positif . " ) ;
}

15
16

// Affiche : Ce nombre est positif .

Bien quil soit possible deffectuer plusieurs tests la suite laide de cette mthode,
cela peut savrer assez rptitif. Cest pourquoi, il existe une structure qui permet
dallger lcriture de telles conditions : il sagit de linstruction switch que nous allons
dtailler dans la suite.

Linstruction switch
Lutilisation conventionnelle
Face la structure if...else, la condition switch permet de simplifier et dallger
le code lorsque vous voulez tester diffrentes valeurs pour une mme variable. Cette
structure noffre pas plus de possibilits que celle en if...else, il sagit simplement
dune manire diffrente dcrire des conditions. Voici comment se prsente linstruction
switch :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

switch ( /* Variable */ )
{
case /* Argument */ :
// Instructions
break ;
case /* Argument */ :
// Instructions
break ;
case /* Argument */ :
// Instructions
break ;
default :
// Instructions
}

Pour utiliser cette structure, il suffit de renseigner la variable tester puis dtudier
les diffrents arguments. Notez la prsence de linstruction break; qui permet de
sortir du switch. Cette instruction est obligatoire, en cas dabsence, les instructions
situes en dessous seraient excutes. Enfin, le default correspond au cas par dfaut,
nous pouvons le comparer au else dune instruction if...else. Voici un exemple de
code que vous pouvez tester :
76

LINSTRUCTION SWITCH
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var monNombre : int


switch ( monNombre )
{
case 0 :
trace ( " Ce
break ;
case 1 :
trace ( " Ce
break ;
case 2 :
trace ( " Ce
break ;
default :
trace ( " Ce
}

= 1;

nombre vaut 0 . " ) ;


nombre vaut 1 . " ) ;
nombre vaut 2 . " ) ;
nombre ne vaut ni 0 , ni 1 , ni 2 . " ) ;

Notez quaprs chaque argument vous devez crire un double point et non
un point-virgule.

Une utilisation spcifique lActionscript


Contrairement dautres langages tels que le C ou encore le Java, linstruction switch
en Actionscript ne permet pas uniquement de faire des galits. En plaant la valeur
true la place de la variable, il est alors possible de la comparer avec un autre boolen, en particulier une condition. Voici la structure switch pouvant tester diverses
conditions :
1
2
3
4
5
6
7
8
9
10
11
12

switch ( true )
{
case ( /* Condition */ ) :
// Instructions
break ;
case ( /* Condition */ ) :
// Instructions
break ;
case ( /* Condition */ ) :
// Instructions
break ;
}

Voici un exemple concret qui permet de tester si une variable monNombre est un nombre
ngatif, nul ou positif :
1
2
3
4

var monNombre : int = 1 ;


switch ( true )
{
case ( monNombre < 0 ) :

77

CHAPITRE 4. LES CONDITIONS


5
6
7
8
9
10
11
12
13

trace ( " Ce nombre est n gatif . " ) ;


break ;
case ( monNombre == 0 ) :
trace ( " Ce nombre est nul . " ) ;
break ;
case ( monNombre > 0 ) :
trace ( " Ce nombre est positif . " ) ;
break ;

En rsum
Grce aux conditions, nous pouvons effectuer des choses diffrentes suivant ltat
dune ou plusieurs variables.
Les conditions sont ralises laide doprateurs relationnels et logiques, dont
le rsultat est un boolen.
Linstruction if...else est la plus utilise.
Les expressions ternaires permettent de condenser lcriture dune instruction
if...else.
Lorsque vous avez une multitude de valeurs tester, linstruction switch est plus
approprie.

78

Chapitre

Les boucles
Difficult :
Dans le chapitre prcdent, nous avons vu comment raliser des conditions et permettre
ainsi aux machines de faire des choix. Cest dj un grand pas dans le monde informatique,
mais ce nest pas suffisant : prsent, nous allons introduire les boucles !
Les boucles sont lies la notion de rptitivit : il sagit en fait de ritrer une srie
dinstructions plusieurs fois. Les boucles sont indispensables dans tout un tas de situations, par exemple lorsque nous demandons lutilisateur de jouer tant que la partie nest
pas termine. Pour cela, nous disposons de trois boucles en Actionscript 3 que nous
dtaillerons au fil du chapitre. tant donn que nous avons dj vu comment crire une
condition, ce chapitre devrait tre relativement simple apprhender.

79

CHAPITRE 5. LES BOUCLES

La boucle while
Le principe
Comme nous lavons dit prcdemment, les boucles permettent de rpter des instructions un certain nombre de fois. La difficult est alors de savoir quand ces instructions
doivent cesser dtre rptes. Pour cela, nous aurons besoin des conditions. Sans plus
attendre, voici le genre dinstructions ralisables laide des boucles :
1
2

TANT QUE ma condition est vraie


ALORS effectuer mes instructions

Dans une boucle while, la condition sutilise exactement de la mme manire que pour
une instruction if...else. Il faudra donc dclarer une variable avant la boucle puis
la tester lintrieur de la condition. En revanche, dans ce cas, la variable devra tre
mise jour lintrieur de la boucle pour pouvoir en sortir. En effet, pour stopper
la rptition des instructions, la condition doit obligatoirement devenir fausse un
certain moment. Oublier de mettre jour cette variable conduirait une boucle infinie,
les instructions se rpteraient alors linfini.
Dans le cas dune boucle while, la condition est teste avant dentrer dans la
boucle. Ainsi, si la condition est dj fausse avant la boucle, les instructions
lintrieur de celle-ci ne seront jamais excutes.
Vous comprendrez mieux le fonctionnement des boucles au fur et mesure de la
lecture de ce chapitre.

criture en Actionscript
En Actionscript, la boucle while permet de grer toutes les situations : celles que
nous verrons plus tard sont lgrement diffrentes, mais noffrent aucune fonctionnalit
supplmentaire. La structure dune boucle est trs similaire celle des structures
conditionnelles vues prcdemment. Voici donc comment crire une boucle while en
Actionscript :
1
2
3
4

while ( /* Condition */ )
{
// Instructions si vraie
}

Comme pour linstruction if...else, les accolades deviennent facultatives sil ny a


quune seule condition :
1
2

80

while ( /* Condition */ )
// Instruction si vraie

LA BOUCLE WHILE
Cette seconde syntaxe est correcte : en crivant cela vous naurez pas de
message derreur. Cependant, dans une boucle digne de ce nom, vous naurez
en ralit que trs rarement une seule instruction. En effet, votre boucle
contiendra toujours au moins une instruction ainsi quune mise jour de
votre variable.
Afin de mieux comprendre le fonctionnement et la syntaxe dune boucle while, nous
allons voir diffrents exemples dans la suite de ce cours.
Exemples dutilisation
Pour commencer, nous allons tester une boucle qui affiche la valeur de notre variable
teste dans la condition. Voici le code source de notre boucle tester :
var i : uint = 0 ;
while ( i < 5 )
{
trace ( i ) ;
i = i + 1;
}

1
2
3
4
5
6

Si vous lancez le projet, vous devriez obtenir ceci dans la console de sortie :
0
1
2
3
4

Vous constaterez alors que la valeur 5 nest pas affiche. Effectivement,


lorsque notre variable i prend cette valeur, la condition i < 5 nest plus
vrifie ; linstruction trace(i) nest donc plus excute. Il faudra ainsi tre
vigilant sur lcriture de votre condition pour que votre boucle sexcute bien
comme vous le dsirez.
Lintrt dutiliser une boucle while est que nous navons pas besoin de connatre
lavance ou de nous soucier du nombre de rptitions. Pour illustrer cela, nous allons
prendre un exemple : imaginons que nous cherchions la puissance de 2 correspondant
1024. Nous devons alors calculer les puissances successives de 2 jusqu atteindre 1024.
Cependant, dans notre cas, nous ne savons pas combien de fois nous allons devoir
rpter lopration. Nous utiliserons donc une boucle while de la manire suivante :
1
2
3
4
5
6

var monNombre : uint = 2 ;


var i : uint = 1 ;
while ( monNombre != 1024 )
{
i = i + 1;
monNombre *= 2 ;

81

CHAPITRE 5. LES BOUCLES


}
trace ( i ) ; // Affiche : 10

7
8

En effet, pour ceux qui connaissaient dj la rponse : 210 = 1024. Notre boucle sest
donc excute 9 fois ce qui correspond i = 10. Nous voyons bien ici que nous navions
pas besoin de connatre lavance le nombre de rptitions de la boucle.
Quelques astuces
Vous savez dj tout ce quil faut savoir sur la boucle while cependant, je vais vous
donner maintenant quelques astuces pour amliorer la lisibilit de votre code. Ces
conseils ne sont en aucun cas une obligation, il sagit principalement de pratiques trs
courantes chez les programmeurs. Elles permettront dallger votre code source mais
galement de le rendre plus lisible pour un autre programmeur. Voici donc ces astuces
fortement recommandes :
Traditionnellement, en Actionscript et dans beaucoup dautres langages, on utilise
les noms de variables i, j et k pour compter lintrieur dune boucle. En utilisant ces
noms, vous facilitez la lecture de votre code, surtout si celui-ci est assez consquent.
Lorsque vous utiliserez des boucles, vous serez trs souvent amen incrmenter ou
dcrmenter vos variables : i = i + 1 ou i = i- 1. Pour simplifier lcriture, nous
pouvons utiliser pour lincrmentation i++ et pour la dcrmentation i.
Enfin, nous allons revenir sur la notion de boucle infinie. Comme nous lavons dit, il
sagit dune boucle dont la condition est toujours vrifie. Les instructions lintrieur
sont alors rptes linfini. En voici un exemple :
var maCondition : Boolean = true ;
while ( maCondition )
{
trace ( " Ceci est une boucle infinie " ) ;
}

1
2
3
4
5

Vous vous en doutez certainement, cette boucle va afficher le message : Ceci est une
boucle infinie un nombre indfini de fois, comme ceci :
Ceci est une boucle infinie
Ceci est une boucle infinie
Ceci est une boucle infinie
...

En gnral, il faut tout prix viter dcrire ce genre de choses. Cependant, ce type de
boucles peut savrer utile dans certains cas.

La boucle do. . .while


Nous allons prsent parler de la boucle do...while qui est une voisine trs proche
de la boucle while. Toutefois, nous pouvons noter une diffrence dans la syntaxe par
82

LA BOUCLE DO. . .WHILE


lapparition du mot do ainsi que du transfert de la condition en fin de boucle. Ceci
apporte une lgre diffrence dans linterprtation du code, mais nous y reviendrons
aprs. Voici la syntaxe de cette nouvelle boucle :
1
2
3
4

do
{

// Instructions si vraie
} while ( /* Condition */ ) ;

Notez cependant lapparition dun point-virgule ; aprs la condition. Loubli de ce point-virgule est une erreur trs courante chez les dbutants. Veillez
donc ne pas commettre cette erreur, cela vous vitera des problmes de
compilation.

Quelle est la diffrence avec la boucle prcdente ?

Dans une boucle while classique, la condition est en dbut de boucle. Cest pourquoi la
boucle peut ne jamais tre excute si la condition est fausse ds le dpart. En revanche,
dans une boucle do...while, la condition est place la fin de la boucle. De ce fait,
la boucle sexcutera toujours au moins une fois. Il est donc possible dutiliser cette
boucle pour sassurer que le programme rentrera au moins une fois dans la boucle. Voici
un exemple de calcul de PGCD :
1
2
3
4
5
6
7
8
9

var nombre1 : uint = 556 ;


var nombre2 : uint = 148 ;
do
{
var reste : uint = nombre1 % nombre2 ;
nombre1 = nombre2 ;
nombre2 = reste ;
} while ( nombre2 != 0 ) ;
trace ( " PGCD = " + nombre1 ) ; // Affiche : PGCD = 4

Petit rappel : PGCD pour Plus Grand Commun Diviseur. Si vous ne vous
souvenez plus de lalgorithme, il faut diviser le plus grand nombre par le plus
petit. Ensuite, on prend le reste de la division euclidienne pour diviser le
nombre le plus petit. Puis on reprend le dernier reste pour diviser le reste de
la division prcdente. Et ainsi de suite jusqu ce quun reste soit nul. Vous
avez ainsi votre PGCD qui correspond au dernier reste non nul !
Une fois encore, vous pouvez remarquer quil nest pas ncessaire de connatre le nombre
dexcutions de la boucle contrairement une boucle for dont nous allons parler maintenant.
83

CHAPITRE 5. LES BOUCLES

La boucle for
Prsentation
La syntaxe
Comme nous lavons dj dit dans ce cours, la boucle while permet de raliser toute
sorte de boucle. Cependant, son criture est quelque peu fastidieuse cest pourquoi, il
existe une criture condense utile dans certains cas : la boucle for. Celle-ci est utilise
lorsque nous connaissons lavance le nombre dexcutions de la boucle directement
ou travers une variable. Cette boucle permet de concentrer le traitement de la variable utilise, rappelez-vous avec une boucle while, nous devions passer par les tapes
suivantes :
Dclaration et initialisation de la variable avant la boucle.
Condition sur la variable en entre de boucle.
Incrmentation de la variable lintrieur de la boucle.
Grce la boucle for, nous pouvons maintenant condenser ces trois tapes au mme
endroit :
1
2
3
4

for ( /* Initialisation */ ; /* Condition */ ; /* Incr mentation */


)
{
// Instructions
}

Attention, l encore, la prsence des points-virgules ; pour sparer


chaque champ. Cest galement une source de problmes pour la compilation.

Quelques exemples
La boucle for est trs utilise en programmation, elle permet dviter davoir crire
des instructions rptitives et galement de faire des recherches dans les tableaux,
notion que nous aborderons trs bientt. En attendant, voici quelques exemples dutilisation de la boucle for :
1
2
3
4

for ( var i : int = 0 ; i < 10 ; i ++)


{
trace ( " La valeur de i est " + i ) ;
}

Ici galement, les accolades deviennent facultatives sil ny a quune seule instruction.
Aussi, il est possible dutiliser la boucle for en dcrmentation ou en encore par pas
de 10 si vous le dsirez :
1
2

84

for ( var i : int = 10 ; i > 0 ; i - -)


trace ( " La valeur de i est " + i ) ;

LA BOUCLE FOR
La boucle for na rien de difficile, il sagit simplement dune boucle while condense.
En revanche, la syntaxe est assez spciale, cest pourquoi il est ncessaire de la retenir
car cette boucle vous servira plus que vous ne limaginez !

En rsum
Les boucles permettent de rpter une srie dinstructions tant quune condition est
vrifie.
La boucle while permet de tout faire mais il est possible que les instructions
lintrieur ne soient jamais excutes.
La boucle do...while est identique la prcdente, nanmoins la boucle est excute
au moins une fois.
La boucle for est une forme condense du while dans le cas o on connat le nombre
de rptitions de la boucle.
Lincrmentation est utilise en permanence dans les boucles et son criture peut
tre simplifie par les expressions i++ et i .

85

CHAPITRE 5. LES BOUCLES

86

Chapitre

Les fonctions
Difficult :
Maintenant, nous allons introduire les fonctions ! Sachez que cest un concept qui existe
dans tous les langages de programmation et que ces fonctions servent structurer notre
programme en petits bouts.
Nous verrons en quoi consistent rellement ces fonctions. Nous apprendrons comment
utiliser des fonctions toutes prtes, mais aussi comment en crer nous-mmes. Afin que
vous compreniez mieux toutes ces notions, je vous prsenterais quelques exemples qui
feront appel aux connaissances acquises jusquici.

87

CHAPITRE 6. LES FONCTIONS

Concept de fonction
Le principe de fonctionnement
Depuis le dbut de ce cours, tout ce que nous faisons se trouve lintrieur dune fonction nomme Main (ou peut-tre dune fonction init si vous utilisez FlashDevelop).
En effet, nous navons pas encore crit lextrieur des accolades de celle-ci. En gnral,
pour crire un programme, il faut compter entre une centaine de lignes de code jusqu
plusieurs milliers pour les plus consquents. Il nest donc pas envisageable dinsrer la
totalit du code lintrieur de la fonction Main. En effet, il faut organiser le code, ce
qui permet de le rendre plus lisible mais galement de faciliter le dbogage. Pour cela,
nous allons dcouper notre programme en morceaux. Nous regrouperons donc certaines
instructions ensemble pour crer des bouts de programme, puis nous les assemblerons
pour obtenir le programme complet. Chaque morceau est alors appel : fonction !
Comment se prsente une fonction ?

Une fonction est une srie dinstructions qui ont t regroupes pour une tche commune. Nous crons alors une fonction que nous appellerons chaque fois que nous en
avons besoin. Celle-ci se compose de la manire suivante :
Une ou des entres : il sagit dinformations qui seront utiles au cours de lexcution
de la fonction.
Le traitement et les calculs : cest le cur de la fonction, les instructions internes
sont excutes.
Une unique sortie : une fois les instructions de la fonction termines, celle-ci renvoie
un rsultat.
Pour rsumer tout ceci, vous trouverez la figure 6.1 un schma reprenant le principe
de fonctionnement.

Figure 6.1 Principe dune fonction


Notez quune fonction ne possde pas obligatoirement une entre et une sortie. Celle-ci peut trs bien se satisfaire uniquement dune entre ou dune sortie, et plus exceptionnellement aucune des deux. Nous reviendrons l-dessus
trs rapidement dans ce cours.
88

CONCEPT DE FONCTION
En rgle gnrale, on associe une fonction une tche bien prcise. Par exemple,
nous pourrions imaginer une fonction qui calcule et renvoie le carr dun nombre plac
en entre. Vous trouverez la figure 6.2 un schma de ce que cela donnerait.

Figure 6.2 Exemple dune fonction


Bien videmment, dans un programme, les fonctions sont gnralement plus complexes.
LActionscript possde dj des centaines de fonctions qui permettent par exemple
dafficher une image lcran ou encore de la transformer. Nous apprendrons les
utiliser ainsi qu crer nos propres fonctions.

Prsentation
Vous ne vous en doutez peut-tre pas, mais vous avez dj utilis des fonctions depuis
le dbut de ce cours ! Effectivement, nous avons dj utilis plusieurs fois la fonction
trace() et galement introduit la fonction toString(). Nanmoins, ces deux fonctions
sont lgrement diffrentes dans leur utilisation. Nous prsenterons donc brivement ici
ces diffrences entre les fonctions dites de base telle que la fonction trace() et les
mthodes comme la fonction toString(). Allons-y pour les fonctions de base !
Les fonctions de base
Lappel dune fonction telle que la fonction trace() se fait de manire la plus
basique qui soit. Rappelez-vous la faon dont nous crivions linstruction faisant appel
cette fonction :
1

trace ( " Texte afficher " ) ;

Vous remarquerez quil suffit simplement dcrire le nom de la fonction, ainsi que le
texte afficher entre parenthses. En revanche, ceci est diffrent pour les mthodes !
Les mthodes
Les mthodes sont lies la notion de POO ou Programmation Oriente Objet, je vous rappelle que nous y reviendrons dans une partie entirement consacre
ce concept. Contrairement aux fonctions de base, les mthodes sont associes
un objet. Pour vous montrer ceci, reprenons lexemple dutilisation de la fonction
toString() :
89

CHAPITRE 6. LES FONCTIONS


1
2

var nombre : Number = 3 . 14 ;


trace ( nombre . toString () == " 3 . 14 " ) ;

Ce quil faut noter par rapport la fonction trace(), cest que la mthode toString()
est lie lobjet nombre qui est de type Number. Notez le point . sparant lobjet
nombre de la mthode toString() ; il signifie que la mthode est lie lobjet et quelle
ne peut pas tre utilise indpendamment de lobjet auquel elle est associe. Quoi quil
en soit, vous aurez tout le temps de vous familiariser avec ceci au cours de la partie sur
la Programmation Oriente Objet.

Cration et appel de fonctions


Nous allons maintenant apprendre crer et appeler des fonctions. Nous verrons
quil existe deux faons de dclarer une fonction : les instructions de fonction et
les expressions de fonction. Commenons sans plus tarder par les instructions de
fonction.
Tout ce que nous allons voir ici concerne les fonctions de base. Nanmoins,
les mthodes ne sont pas trs diffrentes et reprendront tous les principes vus
tout au long du chapitre. Aussi, soyez attentifs tout ce qui sera dit ici ! Par
ailleurs, pour linstant, nous nous contenterons de tout crire lintrieur de
la fonction Main tel que nous le faisons depuis le dbut de ce cours.

Instructions de fonction
Dclaration
Linstruction de fonction est la premire technique permettant de dfinir une fonction. Il sagit sans aucun doute de la manire que vous serez le plus amens utiliser
lintrieur de vos programmes. Celle-ci dbute par le mot-cl function suivi du nom
donn cette fonction, dailleurs voici sa structure :
1
2
3
4

function nomDeLaFonction ( sesParametres ) : sonType


{
// Instructions ex cuter lors de l ' appel de la fonction
}

Pour faciliter la comprhension de tous ces champs, nous allons reprendre le modle
utilis plus haut pour dcrire une fonction :
Une ou des entres : il sagit des paramtres placs en entres, par ex :(monParam1:int,
monParam2:String). Vous pouvez galement ne renseigner aucun paramtre, vous
laisserez alors les parenthses vides, comme ceci ().
Le traitement et les calculs : cela correspond aux instructions places entre les
accolades de la fonction, qui seront excutes lappel de la fonction.
90

CRATION ET APPEL DE FONCTIONS


Une unique sortie : il est possible que la fonction ne renvoie aucune valeur, auquel cas
utilisez le mot-cl void comme type de renvoi. Dans le cas contraire, celle-ci ne peut
renvoyer quune unique variable. Le type de cette variable doit tre renseign aprs
les paramtres et prcd de deux-points : . Le renvoi de cette valeur seffectue
en utilisant le mot-cl return suivi de la valeur ou variable renvoyer.
Rien ne remplace un bon exemple, voici notre fonction qui lve un nombre au carr :
1
2
3
4
5
6

function carre ( nombre : int ) : int


{
var resultat : int = 0 ;
resultat = nombre * nombre ;
return resultat ;
}

Une variable dclare lintrieur dune fonction nest dfinie que pour cette
fonction. la fin de celle-ci, la variable est supprime de la mmoire et nest
donc plus accessible ! Ne tentez donc pas de rcuprer sa valeur en dehors
des accolades de la fonction !
Sachez quil est possible deffectuer des oprations aprs le mot-cl return, il est alors
prfrable de placer des parenthses autour du calcul. Veillez cependant ne pas en
faire trop, le code doit toujours rester ar et lisible. La fonction prcdente aurait donc
pu tre crite plus succinctement de la faon suivante :
1
2
3
4

function carre ( nombre : int ) : int


{
return ( nombre * nombre ) ;
}

Voil notre fonction est dfinie, il ne reste plus qu lappeler !

Appel
Lappel de la fonction nest pas bien compliqu sachant que vous avez dj ralis
cette opration ! omme pour la fonction trace(), nous allons maintenant appeler notre
fonction carre() en renseignant en paramtre le nombre que nous dsirons lever au
carr. La fonction nous renvoie une variable de type int, nous allons ainsi la stocker
dans une variable resultat dclare et de type int galement. Voici donc comment
procder :
1
2

var resultat : int = carre ( 4 ) ;


trace ( " le carr de 4 est " + resultat ) ; // Affiche : le carr
de 4 est 16

91

CHAPITRE 6. LES FONCTIONS


Lorsque votre fonction ne renvoie rien, le mot-cl void peut tre facultatif.
Cependant, je vous conseille fortement de lcrire quand mme. Dailleurs
le compilateur vous recommandera galement de prciser son type de renvoie : Warning: return value for function nomDeLaFonction has
no type declaration.
Ce nest pas trs flagrant dans ce cas, mais lutilisation des fonctions permet dorganiser
le code et de le rentre plus lisible. Ceci sera effectivement le cas lorsque vous aurez des
fonctions complexes, et que vous naurez plus qu les utiliser en les appelant en une
seule instruction ! Nous verrons diverses fonctions pour mieux comprendre juste aprs
les expressions de fonction.

Expressions de fonction
Les expressions de fonction sont beaucoup moins utilises que les instructions de
fonction et sont lgrement plus complexes. Les expressions de fonction utilisent
une instruction daffectation pour crire une fonction. Pour cela, il nous faut dfinir une fonction anonyme qui sera stocke dans une variable de type Function.
Pour viter de vous noyer dans des explications, voici la structure dune dclaration
dexpression de fonction :
1
2
3
4

var nomDeLaFonction : Function = function ( sesParametres )


{
// Instructions ex cuter lors de l ' appel de la fonction
};

Nous ne nous attarderons pas trop sur ces expressions de fonction, voici tout de
mme un exemple dutilisation :
1
2
3
4
5

var afficher : Function = function ( texte : String ) : void


{
trace ( texte ) ;
}
afficher ( " Ceci est la fonction afficher . " ) ;

Pour linstant, vous pouvez vous contenter uniquement des instructions de


fonction, ne vous compliquez pas la vie avec les expressions de fonction
qui sont moins utilises. En revanche, retenez bien comment utiliser ces instructions de fonction que nous utiliserons dsormais tout le temps.

Quelques exemples
Pour clore ce chapitre sur les fonctions, nous verrons quelques exemples de fonctions
qui pourront vous tre utile lavenir.
92

QUELQUES EXEMPLES

Message de bienvenue
Voici une fonction qui se contente dafficher un message de bienvenue la personne
indique en paramtre. Cette fonction ne renvoie aucune valeur.
1
2
3
4
5

function bienvenue ( nom : String ) : void


{
trace ( " Bonjour " + nom + " et bienvenue sur le Site du Z ro
!");
}
bienvenue ( " Marcel Dupont " ) ; // Affiche : Bonjour Marcel Dupont
et bienvenue sur le Site du Z ro !

Pour que votre code soit encore plus lisible, nhsitez pas donner des noms
explicites vos fonctions !

Calcul de PGCD
Dans cet exemple, nous allons calculer le PGCD entre deux nombres comme nous avons
appris le calculer dans le chapitre prcdent :
1
2
3
4
5
6
7
8
9
10
11

function calculPGCD ( nombre1 : int ,


{
do
{
var reste : uint = nombre1
nombre1 = nombre2 ;
nombre2 = reste ;
} while ( nombre2 != 0 ) ;
return nombre1 ;
}
trace ( " Le PGCD de 56 et 42 est :
Affiche : Le PGCD de 56 et 42

nombre2 : int ) : int

% nombre2 ;

" + calculPGCD ( 56 , 42 ) ) ; //
est : 14

Pour ceux qui voudraient rellement utiliser cette fonction, sachez quici le
nombre1 est suppos plus grand que le nombre2. Si vous le dsirez, nhsitez
pas rajouter une condition pour tester si cest effectivement le cas !

Calcul dun maximum


Voici une fonction qui pourrait vous tre utile, celle-ci vous renvoie le plus grand nombre
entre ces deux paramtres. Il ny a rien de trs compliqu, voici comment procder :
1
2

function max ( nombre1 : int , nombre2 : int ) : int


{

93

CHAPITRE 6. LES FONCTIONS


3
4
5
6
7
8
9
10
11
12
13
14
15
16

var resultat : int = 0 ;


if ( nombre1 > nombre2 )
{
resultat = nombre1 ;
}
else
{
resultat = nombre2 ;
}
return resultat ;

}
var nombre1 : int = 2 ;
var nombre2 : int = 3 ;
trace ( " Le maximum entre " + nombre1 + " et " + nombre2 + " est
" + max ( nombre1 , nombre2 ) ) ; // Affiche : Le maximum entre 2
et 3 est 3

Lorsque vous raliserez des programmes assez consquents, vous devrez conomiser
au maximum les instructions dans vos programmes pour gagner en performance ou
simplement pour le rendre plus lisible. Il peut alors devenir intressant de regarder si
vos fonctions ne peuvent pas scrire diffremment, mais surtout en moins de lignes.
Ceci peut tre le cas pour cette fonction o nous pouvons aisment nous dispenser du
bloc dinstructions else. Effectivement, testez le code suivant, vous verrez quil fait
exactement la mme chose :
1
2
3
4
5
6
7
8
9
10
11
12

function max ( nombre1 : int , nombre2 : int ) : int


{
var resultat : int = nombre1 ;
if ( nombre2 > nombre1 )
{
resultat = nombre2 ;
}
return resultat ;
}
var nombre1 : int = 2 ;
var nombre2 : int = 3 ;
trace ( " Le maximum entre " + nombre1 + " et " + nombre2 + " est
" + max ( nombre1 , nombre2 ) ) ; // Affiche : Le maximum entre 2
et 3 est 3

Vous verrez que la recherche dun optimum (maximum ou minimum) est une pratique
assez courante avec les tableaux, mais nous verrons ceci dans le prochain chapitre !

En rsum
Les fonctions permettent dorganiser le code, de le rendre plus lisible mais galement
de se sparer de tches rptitives.
Pour dclarer une fonction, on utilise le mot-cl function.
94

QUELQUES EXEMPLES
Une fonction peut recevoir plusieurs paramtres en entre, mais ne peut retourner
quune valeur au plus.
On utilise le mot-cl return pour renvoyer une valeur.
On prfre gnralement les instructions de fonction auxquelles on peut attribuer
un nom.

95

CHAPITRE 6. LES FONCTIONS

96

Chapitre

Les tableaux
Difficult :
Pour clore cette premire partie du cours, nous verrons les tableaux qui sont trs utiliss
en programmation !
Les variables de base, prsentes dans un chapitre prcdent, sont trs utiles, mais possdent leurs limites lorsquil sagit de grer beaucoup de valeurs. Effectivement, laide de
variables nous pouvons associer une valeur un nom. Ceci peut tre handicapant lors du
traitement dune quantit de valeurs importante. Cest ici quentrent en jeu les tableaux !
Le principe des tableaux est de pouvoir stocker plusieurs valeurs sous un mme nom. Ceci
facilitera alors le traitement de ces donnes puisque celles-ci seront enregistres sous le
mme nom et seront simplement diffrencies par un indice lintrieur du tableau.
En Actionscript, nous avons plusieurs manires de crer et dutiliser des tableaux. Dans
ce chapitre, nous verrons les deux types de tableaux : Array et Vector.

97

CHAPITRE 7. LES TABLEAUX

Le type Array
Le premier type de tableau utilis en Actionscript est Array. En Actionscript, les
tableaux ne sont pas fixs en taille ce qui permet une programmation plus souple.
De plus, en ce qui concerne le type Array, les tableaux ne sont pas typs, cest--dire
quils ne sont pas rservs un seul type de variable. Il est alors possible dinsrer dans
un tableau des variables de type int, uint, Number, String ou encore tout ce qui vous
passe par la tte.

Cration
La cration dun tableau de type Array peut tre ralise de multiples faons. Cependant, les tableaux sont soumis aux mmes rgles que les variables. Cest pourquoi,
nous retrouverons donc la structure de base commune toute variable :
1

var nomDuTableau : Array = ceQueJeMetsDedans ;

En revanche, lorsquil sagit dinitialiser un tableau, nous avons le choix entre diverses mthodes. Voici quatre manires diffrentes dinitialiser une variable de type
Array :
1
2
3
4

var monTableau : Array = new Array ( 3 ) ; // Cr ation d ' un tableau


de 3 valeurs non renseign es
var monTableau : Array = new Array () ; // Cr ation d ' un tableau
vide
var monTableau : Array = new Array ( " Site " , " du " , " Z ro " ) ; // Cr
ation d ' un tableau contenant les 3 valeurs indiqu es
var monTableau : Array = [ " Site " , " du " , " Z ro " ]; // Cr ation du m
me tableau contenant les 3 valeurs indiqu es

Dans beaucoup de langages, la longueur dun tableau doit tre dfinie lors de
sa dclaration. Ce nest pas le cas en Actionscript, il est tout fait possible
de changer la longueur dun tableau en cours de programme.
La fonction trace() permet galement dafficher le contenu dun tableau. Vous pouvez
ainsi tout moment connatre ltat de votre tableau :
1
2

var monTableau : Array = [ " Site " , " du " , " Z ro " ];
trace ( monTableau ) ; // Affiche : Site , du , Z ro

Les lments du tableau


Mme si un tableau regroupe plusieurs valeurs, celles-ci doivent pouvoir tre utilises
sparment. Cest ici quentre en jeu la notion dindice lintrieur dun tableau. Ces
indices sont utiliss entre crochets [] pour prciser la position de llment dsir dans
le tableau. Les valeurs peuvent alors tre traites comme nimporte quelle variable :
98

LE TYPE ARRAY
1
2
3
4
5

var monTableau : Array = new Array ( 3 ) ;


monTableau [ 0 ] = 4 ;
monTableau [ 1 ] = 5 ;
monTableau [ 2 ] = monTableau [ 0 ] + monTableau [ 1 ];
trace ( monTableau [ 2 ]) ; // Affiche : 9

Attention, en programmation les indices des tableaux commencent toujours


0. Ainsi, le troisime lment du tableau se trouve lindice2. Ce nest pas
trs compliqu comprendre, mais on a souvent tendance loublier les
premires fois.
Comme nous venons de le voir, les valeurs lintrieur dun tableau se manipulent de
la mme manire que les variables. Toutefois, une valeur non initialise dans le tableau
aura une valeur par dfaut, undefined :
1
2

var monTableau : Array = new Array () ;


trace ( monTableau [ 0 ]) ; // Affiche : undefined

Proprits du type Array


Enfin, pour en finir avec le type Array, nous allons voir quelques mthodes et proprits qui pourront vous tre utiles. Tout dabord, lorsque vous utiliserez des tableaux, vous naurez pas besoin de connatre en permanence la taille de votre tableau.
En revanche, vous pouvez tout moment avoir besoin de connatre cette longueur de
tableau. Pour cela, vous pouvez utiliser la proprit length associe aux tableaux de
type Array. Voici comment lutiliser :
1
2
3

var monTableau : Array = new Array ( 5 ) ;


var taille : int = monTableau . length ;
trace ( taille ) ; // Affiche : 5

Nous allons prsent voir diffrentes mthodes permettant dinsrer ou de supprimer


des lments dans un tableau. Dabord, la mthode push() permet dajouter un ou
plusieurs lments la fin du tableau. loppos, la mthode unshift() insre un ou
plusieurs lments au dbut du tableau, cest--dire lindice 0. Pour finir, la mthode
splice() est un compromis car elle permet dinsrer des lments un indice spcifi.
Voici un exemple dutilisation de ces mthodes :
1
2
3
4
5

var monTableau : Array = [ " Site " , " du " , " Z ro " ];
monTableau . unshift ( " Bienvenue " ) ;
monTableau . splice (1 , 0 , " sur " ," le " ) ;
monTableau . push ( " ! " ) ;
trace ( monTableau ) ; // Affiche : Bienvenue , sur , le , Site , du , Z ro ,!

99

CHAPITRE 7. LES TABLEAUX


La mthode splice() peut avoir des finalits diffrentes suivant les paramtres renseigns. Voici donc la signification de chacun de ses paramtres :
Indice de dpart o on se place pour effectuer les oprations. Nombre dlments devant tre supprims partir de lindice de dpart. Srie dlments
qui doivent tre insrs la suite de lindice de dpart. Ainsi, la mthode
splice() permet la fois dinsrer des lments mais galement de supprimer ou remplacer des lments. Dans le cas prsent, la mise zro du
deuxime paramtre permet uniquement dinsrer des lments sans en supprimer.
Enfin, pour supprimer des lments nous avons galement trois mthodes : pop(),
shift(), et splice(). Symtriquement push() et unshift(), les mthodes pop()
et shift() permettent de supprimer des lments respectivement la fin ou au dbut
dun tableau. Pour supprimer des lments au milieu du tableau, il faut utiliser la
mthode splice() prsente juste avant. Encore une fois, voici un exemple pour bien
comprendre :
1
2
3
4
5

var monTableau : Array = [ " Bienvenue " , " sur " , " le " , " Site " , " du " ,
" Z ro " , " ! " ];
monTableau . pop () ;
monTableau . splice (1 , 2 ) ;
monTableau . shift () ;
trace ( monTableau ) ; // Affiche : Site , du , Z ro

Le type Vector
Le second type de tableaux utilis en Actionscript est Vector. Vous verrez que ces
tableaux sont trs proches de ceux de type Array, ils sont notamment galement non
fixs en taille. La principale diffrence vient du fait que les tableaux de type Vector
sont typs. Cest--dire quune fois dclar pour un certain type de variables, il nest
pas possible dy mettre autre chose. Voyons tout ceci plus en dtails !

Dclaration
Ici encore, la dclaration ressemble celle dune variable, mais une nuance prs.
tant donn que les tableaux de type Vector sont typs, il est ncessaire de prciser le
type de variables qui sera utilis laide des chevrons <> . Voici donc comment
dclarer un tel tableau :
1

var nomDuTableau : Vector . < Type > = ceQueJeMetsDedans ;

Pour initialiser un tableau de type Vector, voici les mthodes proposes :


1
2
3

var monTableau : Vector . < String > = new Vector . < String >() ;
var monTableau : Vector . < int > = new Vector . < int >( 3 ) ;
var monTableau : Vector . < String > = Vector . < String >([ " Site " , " du " ,
" Z ro " ]) ;

100

LE TYPE VECTOR
tant donn que ces tableaux sont typs, vous ne pouvez pas insrer une
valeur dont le type ne correspondrait pas celui dclar. En effet, ceci entrainerait des erreurs dexcution ou de compilation.
Notez que la taille du tableau peut toutefois tre fixe en utilisant un paramtre supplmentaire de type Boolean et valant true. Voici le code correspondant :
1

var monTableau : Vector . < int > = new Vector . < int >( 3 , true ) ;

Gestion des lments


Tout comme les tableaux Array, les valeurs internes peuvent tre manipules laide
dindices mis entre crochets [] . Voici encore quelques exemples de manipulations
de valeurs lintrieur dun tableau :
1
2
3
4
5
6
7
8

var monTableau : Vector . < int > = new Vector . < int >( 10 ) ;
monTableau [ 0 ] = 0 ;
monTableau [ 1 ] = 1 ;
for ( var i : int = 2 ; i < monTableau . length ; i ++)
{
monTableau [ i ] = monTableau [i - 1 ] + monTableau [i - 2 ];
}
trace ( monTableau ) ; // Affiche : 0 ,1 ,1 ,2 ,3 ,5 ,8 , 13 , 21 , 34

Pour les plus perspicaces dentre vous, vous aurez vu apparatre les premiers
termes de la Suite de Fibonacci qui sont en effet : 0,1,1,2,3,5,8,13,21,34.
En augmentant la taille du tableau, vous pourrez ainsi avoir tous les termes
de la suite que vous dsirez !
Grce cet exemple nous commenons cerner lintrt de lutilisation des tableaux.
Effectivement, lorsque nous utilisons des boucles par exemple, il devient relativement
simple de lier notre variable i de boucle avec les indices du tableau. Ceci avait dj
t dit prcdemment, mais nous allons le rappeler, les boucles sont extrmement utiles
et performantes pour parcourir des tableaux.
Pour allier tableaux et fonctions, nous allons transformer le code prcdent pour
crer une fonction renvoyant le nime terme de la suite de Fibonacci. Dcouvrons
cette fonction :
1
2
3
4
5
6
7
8
9

function suiteFibonacci ( terme : int ) : uint


{
var monTableau : Vector . < uint > = new Vector . < uint >( terme ) ;
monTableau [ 0 ] = 0 ;
monTableau [ 1 ] = 1 ;
for ( var i : int = 2 ; i < monTableau . length ; i ++)
{
monTableau [ i ] = monTableau [i - 1 ] + monTableau [i - 2 ];
}

101

CHAPITRE 7. LES TABLEAUX


10
11
12
13
14

return ( monTableau [ terme - 1 ]) ;


}
trace ( suiteFibonacci ( 10 ) ) ; // Affiche : 34
trace ( suiteFibonacci ( 20 ) ) ; // Affiche : 4181
trace ( suiteFibonacci ( 30 ) ) ; // Affiche : 514229

Enfin, vous noterez que les mthodes push(), pop(), shift, unshift() et splice()
fonctionnent galement avec les tableaux de type Vector.

Les tableaux multidimensionnels


Le concept
Nous allons maintenant dcouvrir les tableaux multidimensionnels : un nom barbare pourtant, cette notion nest pas si complique que a ! Les tableaux multidimensionnels ne sont en ralit que des tableaux imbriqus dans dautres tableaux.
Certes, cest une notion qui fait peur aux premiers abords cependant, il ny a rien de
nouveau en matire de code. Pour mieux comprendre de quoi il sagit, nous allons illustrer cette notion par un exemple. Nous pourrions crer une liste regroupant lensemble
des livres de la collection Le Livre du Zro , il serait alors possible de raliser cela
avec un tableau classique ou monodimensionnel. Imaginons maintenant quen plus de
stocker le nom des livres, nous souhaitions y ajouter le nom de lauteur et lanne de
sortie. Dans ce cas, nous avons besoin dutiliser un tableau bidimensionnel de la
manire suivante :
1
2
3
4
5

var livres : Array = new Array () ;


livres [ 0 ] = [ " R alisez votre site web avec HTML5 et CSS3 " , "
Mathieu Nebra " , 2011 ];
livres [ 1 ] = [ " Apprenez programmer en Java " , " Cyrille Herby " ,
2011 ];
livres [ 2 ] = [ " D butez dans la 3D avec Blender " , " Antoine Veyrat
" , 2012 ];
livres [ 3 ] = [ " R digez des documents de qualit avec LaTeX " , " No
l - Arnaud Maguis " , 2010 ];

Sachant que les lments du tableau principal sont des tableaux, vous obtiendrez donc
un tableau en utilisant la notation avec indice vue prcdemment :
1

trace ( livres [ 0 ]) ; // Affiche : R alisez votre site web avec


HTML5 et CSS3 , Mathieu Nebra , 2011

Il est bien videmment possible daccder une valeur lintrieur du second tableau.
Pour cela, nous devrons utiliser une notation double indice, cest ce qui rend ce
tableau multidimensionnel ! Regardez plutt ce code :
1

102

trace ( livres [ 0 ][ 0 ]) ; // Affiche : R alisez votre site web avec


HTML5 et CSS3

LES TABLEAUX MULTIDIMENSIONNELS


Pour bien comprendre, nous pouvons effectuer une analogie avec un tableau
Excel par exemple o le premier indice correspondrait au numro de la ligne
et le second au numro de la colonne. Si vous en avez besoin, sachez que
vous pouvez raliser des tableaux de la dimension que vous souhaitez.

Un peu de pratique
Dans cette section, nous allons raliser plusieurs fonctions pour apprendre bien manipuler les tableaux. Pour les tests, nous reprendrons le tableau prcdent :
1
2
3
4
5

var livres : Array = new Array () ;


livres [ 0 ] = [ " R alisez votre site web avec HTML5 et CSS3 " , "
Mathieu Nebra " , 2011 ];
livres [ 1 ] = [ " Apprenez programmer en Java " , " Cyrille Herby " ,
2011 ];
livres [ 2 ] = [ " D butez dans la 3D avec Blender " , " Antoine Veyrat
" , 2012 ];
livres [ 3 ] = [ " R digez des documents de qualit avec LaTeX " , " No
l - Arnaud Maguis " , 2010 ];

Pour viter de surcharger le code de ce cours, nous ne rcririons pas ces lignes avant
chaque fonction. vous de les copier si vous souhaitez raliser des essais.
Qui est-ce ?
La fonction prsente ci-dessous permet de retrouver lauteur dun livre. Pour cela,
nous raliserons donc une boucle lintrieur de laquelle nous rechercherons le livre
spcifi en paramtre. Une fois le livre trouv, il ne reste plus qu retenir lindice
correspondant dans le tableau et de renvoyer le nom de lauteur. Voici la fonction en
question :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function auteur ( monTableau : Array , monLivre : String ) : String


{
var i : int = 0 ;
var continuer : Boolean = true ;
do
{
if ( monTableau [ i ][ 0 ] == monLivre )
continuer = false ;
i ++;
} while ( continuer ) ;
return monTableau [i - 1 ][ 1 ]
}
trace ( auteur ( livres , " Apprenez programmer en Java " ) ) ; //
Affiche : Cyrille Herby
trace ( auteur ( livres , " R alisez votre site web avec HTML5 et
CSS3 " ) ) ; // Affiche : Mathieu Nebra

103

CHAPITRE 7. LES TABLEAUX


Vous remarquerez que dans cet exemple, nous combinons la fois : condition, boucle,
fonction et tableau. Si vous avez bien compris cet exemple cest que vous tes au point
sur la premire partie et donc fin prt pour entamer la deuxime !

Trions par chronologie


Comme cela est annonc dans le titre, cette fonction va nous permettre de trier le
tableau en fonction de lanne de sortie des livres. Pour faire cela, nous allons devoir
crer un nouveau tableau que nous allons remplir au fur et mesure. Nous prendrons
donc chaque livre du premier tableau, puis nous chercherons o linsrer dans le second.
Pour raliser ceci, nous devrons utiliser deux boucles, une pour chaque tableau. Cette
fonction est plus complexe que la prcdente :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function tri ( monTableau : Array ) : Array


{
var nouveauTableau : Array = new Array () ;
nouveauTableau [ 0 ] = monTableau [ 0 ];
for ( var i : int = 1 ; i < monTableau . length ; i ++)
{
var j : int = 0 ;
var continuer : Boolean = true ;
while ( continuer )
{
if ( j >= nouveauTableau . length || monTableau [ i ][ 2 ]
<= nouveauTableau [ j ][ 2 ])
continuer = false ;
j ++;
}
nouveauTableau . splice (j -1 , 0 , monTableau [ i ]) ;
}
return nouveauTableau
}
livres = tri ( livres ) ;
trace ( livres [ 0 ]) ; // Affiche : R digez des documents de qualit
avec LaTeX , No l - Arnaud Maguis , 2010
trace ( livres [ 1 ]) ; // Affiche : Apprenez programmer en Java ,
Cyrille Herby , 2011
trace ( livres [ 2 ]) ; // Affiche : R alisez votre site web avec
HTML5 et CSS3 , Mathieu Nebra , 2011
trace ( livres [ 3 ]) ; // Affiche : D butez dans la 3D avec Blender ,
Antoine Veyrat , 2012

Prenez le temps de bien assimiler ces deux exemples qui reprennent la quasi-totalit
des concepts de la premire partie.
104

PARCOURIR UN TABLEAU

Parcourir un tableau
Il existe plusieurs manires de parcourir un tableau, que ce soit un Array ou un
Vector. Il faut savoir que certaines sont plus rapides que dautres, il faut savoir choisir
laquelle utiliser en fonction des possibilits. Nous utiliserons chaque fois la boucle
for que nous avons dj vue prcdemment, nanmoins lActionscript en propose
quelques variantes encore plus efficaces.

La boucle for classique


Comme nous lavons vu, la boucle for est particulirement bien adapte au parcours
dun tableau. Pour rappel, voici un exemple de manipulation de ce type de boucle :
1
2
3
4
5

var monTableau : Array = [ " l ment n 1 " , " l ment n 2 " , " l ment
n 3 " , " l ment n 4 " ];
for ( var i : int = 0 ; i < monTableau . length ; i ++)
{
trace ( monTableau [ i ]) ;
}

Ce qui affichera :
l ment
l ment
l ment
l ment

n1
n2
n3
n4

Dans une boucle for classique, nous nous basons donc sur lindice, ou la position,
des diffrents lments lintrieur du tableau. Pour cela, nous avons alors besoin de
connatre la longueur de celui-ci, que nous pouvons dailleurs stocker dans une variable :
1
2
3
4
5
6

var monTableau : Array = [ " l ment n 1 " , " l ment n 2 " , " l ment
n 3 " , " l ment n 4 " ];
var longueur : int = monTableau . length ;
for ( var i : int = 0 ; i < longueur ; i ++)
{
trace ( monTableau [ i ]) ;
}

Cependant, il est galement possible dutiliser dautres boucles o la connaissance de


la longueur dun tableau devient superflue ; jai nomm les boucles for...in et for
each !

La boucle for...in
La boucle for...in est trs proche de la boucle for classique, et sutilise quasiment de
la mme manire. Toutefois, il nest pas ncessaire de connatre le nombre dlments
105

CHAPITRE 7. LES TABLEAUX


contenus dans un tableau pour parcourir lintgralit de ce dernier. Voici un exemple
dutilisation de cette boucle :
1
2
3
4
5

var monTableau : Array = [ " l ment n 1 " , " l ment n 2 " , " l ment
n 3 " , " l ment n 4 " ];
for ( var i : String in monTableau )
{
trace ( monTableau [ i ]) ;
}

Ce qui nous affichera comme prcdemment :


l ment
l ment
l ment
l ment

n1
n2
n3
n4

Ainsi, vous pouvez considrer que dans une boucle for...in la variable se comporte
comme un indice qui sincrmente automatiquement et qui parcourt lintgralit du
tableau.
Il est fort probable que certains dentre vous se demandent alors, pourquoi
diable la variable i est-elle de type String et non de type int ?
Pour comprendre cela, nous allons devoir brivement sortir du cadre de ce chapitre.
En ralit, la boucle for...in nest pas propre aux tableaux, mais peut tre utilise
pour parcourir dautres types dlments ou objets. Pour mieux cerner le problme,
nous allons imaginer lobjet ou la variable suivante :
1

var monObjet : Object = { a : " l ment A " , b : " l ment B " , c : " l ment
C " };

Nous avons donc ici une sorte de tableau contenant trois lments. Nanmoins, ces
lments ne sont pas rangs laide dun indice, mais plutt grce une tiquette ou
proprit et ne sont donc pas disposs suivant un ordre particulier. La seule manire
de faire rfrence un lment lintrieur de cette variable est donc dutiliser les
tiquettes associes chacun de ces lments.
Lutilisation de la boucle for...in prend alors tout son sens :
1
2
3
4

for ( var i : String in monObjet )


{
trace ( i + " : " + monObjet [ i ]) ;
}

Voici le rsultat :
a : l ment A
b : l ment B
c : l ment C

106

PARCOURIR UN TABLEAU
Pour utiliser correctement la boucle for...in, vous devez vous rappeler qu
lintrieur de celle-ci nous travaillons non pas laide dun indice numrique
mais bien avec une tiquette sous forme de chane de caractres. Dans
le cas dun tableau de type Array ou Vector, la variable utilise reprsente
nanmoins lindice, mais toujours sous la forme dune chane de caractres de
type String !

La boucle for each


La dernire boucle permettant de parcourir un tableau est la boucle for each. Contrairement ses congnres, la variable utilise lintrieur de celle-ci ne fait pas rfrence
lindice, ou ltiquette, associ aux lments dun tableau, mais aux lments euxmmes.
La manipulation des lments devient alors beaucoup plus simple :
1
2
3
4
5

var monTableau : Array = [ 12 , 42 , 10 , 3 ];


for each ( var nombre : int in monTableau )
{
trace ( nombre ) ;
}

Comme vous limaginez, dans ce cas, le type de la variable devra sadapter suivant la
nature des lments contenus lintrieur du tableau :
1
2
3
4
5

var monTableau : Array = [ 2 .3 , 24567673 , 42 , 3 . 14 , 276 . 54 ];


for each ( var nombre : Number in monTableau )
{
trace ( nombre ) ;
}

Ou encore :
1
2
3
4
5

var monTableau : Array = [ ' Hello ' , ' world ' , '! ' ];
for each ( var chaine : String in monTableau )
{
trace ( chaine ) ;
}

Notez toutefois quen utilisant cette boucle vous perdez la notion de reprage
lintrieur du tableau et vous ntes alors plus en mesure de relier llment
au tableau.
Bien videmment, ce qui est faisable avec un tableau de type Array, lest aussi avec un
autre tableau de type Vector :
1
2

var monVecteur : Vector . < String > = Vector . < String >([ ' Hello ' , '
world ' , '! ' ]) ;
for each ( var chaine : String in monVecteur )

107

CHAPITRE 7. LES TABLEAUX


3

4
5

trace ( chaine ) ;

En rsum
Grce aux tableaux, nous pouvons stocker plusieurs valeurs sous un mme nom de
variable.
Les lments dun tableau sont accessibles via un indice qui dmarre 0.
Les tableaux de type Array ne sont ni fixs, ni typs.
Les tableaux de type Vector ne sont pas fixs, mais en revanche ils sont typs.
Diffrentes mthodes permettent de manipuler des tableaux la fois de Array et de
type Vector.
On utilise gnralement les boucles for, for...in ou for each pour parcourir un
tableau.
Il est possible de crer des tableaux multidimensionnels en utilisant une notation
double indice.

108

Deuxime partie

La Programmation Oriente
Objet

109

Chapitre

La POO dans tous ses tats


Difficult :
Nous allons maintenant attaquer la deuxime partie du cours, traitant dune notion trs importante en Actionscript 3 : la Programmation Oriente Objet (ou POO). Apprhender
cette notion sera peut-tre difficile au dbut, mais vous finirez par tomber sous le charme
de cette faon de programmer, je vous le promets !
Cette partie sera galement loccasion de faire (enfin !) un peu de pratique loccasion de
quelques exercices que nous raliserons ensemble.
Attachez vos ceintures, cest parti ! La POO naura bientt plus aucun secret pour vous !

111

CHAPITRE 8. LA POO DANS TOUS SES TATS

Les notions-cls
Il tait une fois. . . un objet
Vous avez srement une ide de ce quest un objet : dans la vie de tous les jours, nous
en voyons, nous en touchons des centaines. Ils ont chacun une forme et remplissent
une ou plusieurs tches. On distingue rapidement plusieurs catgories dobjets qui
se ressemblent : quand vous mettez la table, vous manipulez des objets (fourchettes,
couteaux, cuillres, . . .) appartenant la catgorie couvert . Bien sr, vous pouvez
avoir plusieurs objets de cette catgorie, voire plusieurs fourchettes identiques. Les
objets de la catgorie fourchette font galement partie de la catgorie couvert
car les fourchettes ne sont en fait que des couverts particuliers.
La programmation oriente objet part de ces diffrentes observations pour introduire de nouveaux concepts en programmation afin de rendre le dveloppement de
logiciels plus efficace et intuitif.
Lautre faon de programmer est appele le procdural o il ny a grossomodo que des variables, des fonctions et des instructions effectues les
unes la suite des autres. La POO est diffrente par bien des aspects.

LObjet
Prenons une de vos fourchettes, comme la figure 8.1.

Figure 8.1 Une fourchette (image de ArnoldReinhold, tire du site Wikimedia Commons)
Il sagit dun objet ayant une forme particulire et une certaine utilit, caractristiques
que lon peut retrouver dans les autres fourchettes. Un objet en programmation
112

LES NOTIONS-CLS
est galement une entit possdant des proprits que lon peut retrouver sur dautres
objets de la mme catgorie. Il ne sagit ni dune variable, ni dune fonction, mais
dun mlange des deux : cest un nouveau concept part entire. Un objet peut donc
contenir plusieurs variables (appeles attributs) et plusieurs fonctions (appeles mthodes). Ces variables et fonctions (appeles proprits) sont profondment lies
lobjet qui les contient : les attributs stockent des informations sur cet objet. Par
exemple, si mon objet fourchette possde un attribut poids , cet attribut reprsente la masse de cette fourchette et non la masse dune autre fourchette pose
ct.

La Classe
Seulement, vous avez sur votre table non pas une mais dix fourchettes, quoique pas
exactement identiques. En effet, cette fourchette ci et plus lgre que cette fourchette l,
donc son attribut poids est plus faible. Mais ces deux objets restent des fourchettes,
malgr leur diffrence de poids. Fourchette est donc la catgorie de ces objets, appele
classe.
On dit que les objets dune classe sont des instances (ou occurrences) de
cette classe.
Une classe dcrit la nature de ses objets : cest un schma permettant de fabriquer et
de manipuler plusieurs objets possdant les mmes attributs et mthodes. Par exemple,
la classe Fourchette pourrait dcrire les attributs poids , taille , nombre de
dents , etc. (voir figure 8.2)
Nous pourrions aussi crer une classe Couteau pour les couteaux, et une classe Cuillre
pour les cuillres.
En Actionscript 3, les classes sont considres comme des types, au mme
titre que les int, Number ou String.

Un autre exemple
Une fois la table mise, vous tournez la tte et admirez travers la fentre votre magnifique voiture toute neuve (figure 8.3) : ne serait-ce pas un objet de la classe Voiture ?
Avec un objet aussi complexe, cette classe contient certainement plus dattributs et
de mthodes que la classe Fourchette. . .
Voici quelques exemples dattributs : taille (un grand classique), marque , couleur , nombre de pneus , nombre de siges ; et quelques exemples de mthodes :
verrouiller les portires , dmarrer le moteur , acclrer , freiner , tourner
gauche , tourner droite . . . (voir figure 8.4)
113

CHAPITRE 8. LA POO DANS TOUS SES TATS

Figure 8.2 La classe Fourchette et quelques instances

Figure 8.3 Votre magnifique voiture

114

LES NOTIONS-CLS

Figure 8.4 La classe Voiture et une instance


Vous apercevez un peu plus loin la voiture de votre voisin gare en face (figure 8.5).
Cest galement un objet de la classe Voiture, avec une marque, une couleur, un
nombre de pneus et de siges, la possibilit dacclrer, de freiner, de tourner gauche
ou droite. . . Seulement, elle na ni la mme marque, ni la mme couleur que la vtre.
Ces deux objets sont des instances de la classe Voiture.

Figure 8.5 La voiture de mon voisin est une autre instance

Lencapsulation
Vous vous souvenez avoir ouvert le capot de votre voiture aprs lavoir gar : vous avez
intensment regard ce quil y a lintrieur (figure 8.6). Malgr votre immense effort
de concentration, le fonctionnement du moteur, de tous ces cbles, circuits lectriques
et autres tuyaux vous chappe encore. . .
Fort heureusement, lorsque vous refermez le capot et montez dans votre voiture, vous
115

CHAPITRE 8. LA POO DANS TOUS SES TATS

Figure 8.6 Sous le capot. . .


oubliez toute cette mcanique trop complique, et vous conduisez laide dun volant,
de pdales et dun levier de bote de vitesse (figure 8.7). Grce eux, vous pouvez
utiliser votre voiture sans tre ingnieur en gnie mcanique ou lectronique !

Figure 8.7 Votre volant vous facilite bien la tche. . .


Imaginez maintenant que vous criviez une classe trs complexe, qui permet de faire
plein de choses incroyables (figure 8.8) ! Malheureusement, personne ne voudra de votre
magnifique classe : qui serait assez fou pour se plonger dans votre code et tentez de le
dchiffrer ?
En effet, votre code est un peu comme le bazar qui se trouve sous le capot de votre voiture. Mais vous tes malins et vous fournissez aux autres dveloppeurs des mthodes
116

LES NOTIONS-CLS

Figure 8.8 Ce quoi votre code pourrait ressembler. . .


trs simples et faciles comprendre, tout en cachant littralement sous le capot ce
quelles font, linstar du volant, des pdales et du frein main. Ainsi, les programmeurs qui utiliseront votre classe (y compris vous-mmes) auront un volant disposition
au lieu dun moteur et vingt-et-un tuyaux. On appelle ce principe lencapsulation.

Lhritage
Puis, votre regard se porte sur lautoroute au loin (figure 8.9) : vous distinguez dautres
voitures. Mais des formes diffrentes se dplacent parmi elles : ce ne sont de toute
vidence pas des voitures, mais plutt des camions et des motos. Vous remarquez que
ces objets comportent eux aussi des roues ; ils ont eux aussi une couleur et une marque ;
ils peuvent eux aussi acclrer, freiner, tourner gauche, tourner droite. . . Ce seraient
presque des objets de la classe Voiture.

Figure 8.9 Une autoroute belge (image de Purka, tire du site Wikimedia Commons)
117

CHAPITRE 8. LA POO DANS TOUS SES TATS


Mince alors ! Il va falloir refaire de nouvelles classes quasiment identiques. . . Pourquoi
ne pas faire une classe Vhicule plus gnraliste, qui dcrirait les attributs et mthodes
communs aux classes Voiture, Camion et Moto ? Cest une excellente ide !
Notre nouvelle classe Vhicule dcrit donc les attributs et les mthodes communs
tous les vhicules routiers, comme le nombre de roues et de siges, la marque, la couleur,
les mthodes acclrer , freiner , tourner gauche , tourner droite . . . On
lappelle la classe mre (ou superclasse), par opposition aux classes Voiture, Camion
et Moto qui sont ses classes filles (ou sous-classes). On dit galement que les classes
Voiture, Camion et Moto hritent de la classe Vhicule.
Dsormais, inutile de rcrire les attributs et mthodes de la classe Vhicule dans la
classe Voiture, car cette dernire hrite des attributs et des mthodes de la classe
Vhicule (voir figure 8.10) ! Ainsi tous nos objets de la classe Voiture sont galement
des objets de la classe Vhicule, mais leur description dans la classe Voiture est plus
prcise (par exemple, les voitures ont un coffre, alors que les camions ont une remorque).
Lun des intrts de lhritage est donc de pouvoir crer plusieurs classes diffrentes
drivant dune classe-mre sans avoir recopier les attributs et les mthodes communes dans chaque classe. Cest aussi une faon de penser et concevoir le programme
de manire logique et cohrente.
Si nous revenions sur le premier exemple, la classe Fourchette, ainsi que les classes
Couteau et Cuillre, sont des sous-classes de la classe Couvert !

Manipuler des objets : les chanes de caractres


Lhorrible secret du type String
Vous souvenez-vous des chanes de caractres que nous avons vues dans la premire
partie ?
1

var coucou : String = " Hello world ! " ;

Regardez bien le type de la variable : String. . . Il cache un terrible secret : il sagit en


ralit dune classe ! Et oui ! En crivant la ligne au-dessus, nous avons sans le savoir,
cr une instance de la classe String. Et nous avons galement utilis des proprits
de cette classe !

Crer un objet
Tout dabord, il nous faut apprendre crer des objets. Il y a une syntaxe particulire
respecter :
1

new String () ; // Je cr un objet de la classe String ( je l ' ai


d ' ailleurs cr dans le vide , cette instruction ne servira
rien : D )

118

MANIPULER DES OBJETS : LES CHANES DE CARACTRES

Figure 8.10 Les trois classes sont des sous-classes de la classe Vhicule

119

CHAPITRE 8. LA POO DANS TOUS SES TATS


Comme vous pouvez le voir, nous utilisons le mot-cl new, suivi du nom de la classe
de lobjet que nous voulons crer, et dventuels paramtres entre parenthses (comme
pour les fonctions). Par exemple, si nous voulions crer un objet de la classe String
contenant la chane "Hello world!", nous procderions ainsi :
1

var coucou : String = new String ( " Hello world ! " ) ; // Je cr un


objet String contenant la cha ne " Hello world !"

Mais, avant nous navions pas besoin de new pour faire a !

Effectivement, la classe String possde une particularit : cest un type de donnes.


Cela signifie que les objets de cette classe sont un peu spciaux : ils peuvent agir en
tant que simple donne (nombre, chane de caractres, etc.). Ainsi, nous pouvons nous
passer de la syntaxe de cration dun objet :
1

var coucou : String = " Hello world ! " ;

revient crire :
1

var coucou : String = new String ( " Hello world ! " ) ;

Quen est-il de int, uint et Number ?

Et bien, figurez-vous que ce sont galement des classes, qui fonctionnent de la mme
manire que la classe String !
Il est impossible dutiliser le mot-cl new pour crer des objets des classes int
et uint ! Cest la raison pour laquelle elles commencent par une minuscule,
cela permet de bien marquer la diffrence avec les autres classes.
En effet, ces deux classes sont encore plus spciales et nutilisent quune seule syntaxe :
celle que vous avez apprise dans la premire partie du cours. Par contre, la classe
Number fonctionne tout fait normalement, comme la classe String :
1
2

var entier : int = new int ( - 47 ) ; // INTERDIT ! ! !


var entier2 : int = - 42 ; // Autoris

3
4
5

var entierNonSigne : uint = new uint ( 47 ) ; // NOOON ! Tout sauf a


!
var entierNonSigne2 : uint = 47 ; // Ouf !

6
7
8

var nombre : Number = new Number ( 3 . 1415 ) ; // Pas de probl me


var nombre2 : Number = 3 . 1415 ; // Pour les flemmards

120

DES POINTEURS SOUS LE CAPOT


10
11

var monNom : String = new String ( " Bryan " ) ; // Je sens que je
connais cette phrase ...
var ouSuisJe : String = " In the kitchen ! " ; // Argh !

Accder aux proprits dun objet


Reprenons un peu plus de code que nous avons crit dans la premire partie :
1
2
3

var coucou : String = new String ( " Hello world ! " ) ;


trace ( " Cette cha ne contient " + coucou . length + " caract res . "
);
// Affiche : Cette cha ne contient 13 caract res .

et observons plus particulirement cette expression : coucou.length.

Nous avons utilis la proprit length de la classe <minicode type="actionscript"String</minicode>


qui renvoie la longueur de la chane ! Dcortiquons cette instruction :
Tout dabord, nous renseignons le nom de la variable contenant notre objet. Ici, il
sagit de coucou, variable que nous avons dclar plus haut avec cette ligne : var
coucou:String = "Hello world !"..
Ensuite, nous utilisons le caractre point . pour signaler que nous allons utiliser
un attribut ou une mthode de cet objet-l.
Enfin, nous spcifions quelle proprit nous voulons utiliser : ici, nous tapons donc
length, la proprit de la classe String qui nous intresse.
Nous obtenons ainsi la longueur de lobjet chane de caractres contenu dans la
variable coucou ! En franais, cela donnerait quelque chose comme : Lis la proprit
longueur de lobjet contenu dans ma variable coucou.

Des pointeurs sous le capot


Plantons le dcor
Prenons notre classe Voiture, et supposons quelle ait une proprit marque de type
String qui contient le nom de la marque des voitures.
Crons un objet de la classe Voiture et spcifions sa marque :
1
2

var lienVoiture : Voiture = new Voiture () ; // Je cr ma voiture


...
lienVoiture . marque = " Peugeot " ; // ... de marque Peugeot .

Dclarons une deuxime variable :


1

var lienVoiture2 : Voiture ; // Je d clare une autre variable

121

CHAPITRE 8. LA POO DANS TOUS SES TATS

La variable nest pas initialise, elle contient donc null.

Ensuite, procdons une affectation :


lienVoiture2 = lienVoiture ; // C ' est bien une affectation ...
Mais que fait - elle r ellement ?

Nous allons regarder de quelle marque sont les voitures (vous avez srement devin) :
trace ( lienVoiture . marque ; // Affiche : Peugeot
trace ( lienVoiture2 . marque ) ; // Affiche : Peugeot

1
2

Bien ! Maintenant, modifions la marque de lienVoiture2 :


1
2
3

lienVoiture2 . marque = " Renault " ;


// Nous pourrions galement faire :
lienVoiture2 . marque = new String ( " Renault " ) ;

Enfin, regardons nouveau la marque des voitures :


1
2

trace ( lienVoiture . marque ) ; // Affiche : Renault


trace ( lienVoiture2 . marque ) ; // Affiche : Renault

Horreur ! Les deux ont la mme marque ! La rponse est simple : il sagit du mme
objet ! Et oui, il ny en a quun seul et unique !

Explications
Lorsque nous crons lobjet de classe Voiture, il est stock dans la mmoire vive de
votre systme. Ensuite, quand nous laffectons une variable, un lien vers cet objet est
cr, puis stock dans la variable. On dit alors que les variables sont des pointeurs :
elles pointent du doigt lobjet qui leur est associ, afin que nous, programmeurs, puissions accder cet objet. Dailleurs, vous aurez peut-tre remarqu le nom prcis que
jai donn mes variables : lienVoiture et lienVoiture2 ; nest-ce pas vocateur ?
(voir figure 8.11 )
Bien videmment, jai nomm les variables ainsi dans un but pdagogique :
vitez dappeler vos variables de cette faon, cela ne servirait rien (et tous
vos collgues vous dvisageraient dun air bizarre).
Donc, lorsque nous crivons notre affectation, nous nous contentons en ralit de recopier le pointeur vers lobjet initialement cr :
1

lienVoiture2 = lienVoiture ; // Recopions le pointeur de


lienVoiture dans lienVoiture2

Ainsi, en utilisant les proprits de lobjet de lienVoiture2, nous utilisons galement


celles de lobjet de lienVoiture. Logique : il sagit du mme objet !
122

DES POINTEURS SOUS LE CAPOT

Figure 8.11 Les variables-pointeurs sont toutes les deux lies lobjet.

Et si nous crions un autre objet de classe Voiture ?

Trs bonne ide ! Crons un nouvel objet et affectons-le la variable lienVoiture2 :


1

lienVoiture2 = new Voiture () ; // Un deuxi me objet Voiture


entre en sc ne !

Modifions sa marque :
1

lienVoiture2 . marque = " Citro n " ;

Et regardons la marque des deux voitures :


1
2

trace ( lienVoiture . marque ) ; // Affiche : Renault


trace ( lienVoiture2 . marque ) ; // Affiche : Citro n

Ouf ! Quel soulagement ! Nous avons bien deux objets distincts de la classe Voiture !

En rsum
Les objets contiennent des proprits : les variables sont appeles attributs et les
fonctions mthodes.
Chaque objet est dcrit par une classe : il sagit dune sorte de plan de construction
des objets. On dit que les objets sont des instances (ou occurrences) de leur classe.
Lencapsulation est un principe important en POO qui consiste cacher le fonctionnement interne des classes, et montrer seulement une interface simplifie.
Lhritage est un autre principe, tout aussi important, consistant faire hriter des
classes (dites classes filles) dune classe mre.
En Actionscript 3, tout est objet : tout ce que vous manipulerez, ce sera des objets.
Le mot-cl new permet de crer des objets.
La plupart des variables sont en ralit des pointeurs (ou liens) vers des objets
stocks en mmoire.

123

CHAPITRE 8. LA POO DANS TOUS SES TATS

124

Chapitre

Les classes (1re partie)


Difficult :
Dans le chapitre prcdent, nous avons introduit la notion de classe et nous avons mme
appris utiliser la classe String. Cest dj un bon dbut dans la dcouverte de la Programmation Oriente Objet, mais ce nest pas suffisant. partir de maintenant, nous
allons apprendre crer nos propres classes. En utilisant le concept dobjets ou de classes,
la Programmation Oriente Objet permet dorganiser le code vraiment diffremment de
la programmation procdurale.
tant donn quil y a beaucoup de choses dire sur le sujet, la thorie sur les classes
stalera sur deux chapitres. Ce chapitre portera sur les principes fondamentaux, nous le
complterons avec quelques notions supplmentaires dans le prochain chapitre.

125

CHAPITRE 9. LES CLASSES (1RE PARTIE)

Crer une classe


La Classe
Rappels
Comme nous lavons dj mentionn, une classe est lensemble du code permettant de
reprsenter un objet dans un programme. Celle-ci est constitue de variables appeles
attributs et de fonctions appeles mthodes. On parle galement de proprits
pour dfinir lensemble des attributs et des mthodes dune classe. Ainsi, grce
ces proprits, nous allons pouvoir structurer notre objet et dfinir lintgralit de ses
caractristiques.
Une fois que la classe est dfinie, nous pouvons alors crer des instances ou occurrences de cette classe. Pour vous faire une ide, on peut considrer une instance
comme un objet physique , en opposition la classe qui dfinit plutt une description gnrale de lobjet. Ainsi, nous pouvons crer plusieurs instances dun mme objet,
mais dont les caractristiques pourront varier lgrement.
Il est important de bien faire la diffrence entre la classe, qui est unique et
qui dcrit un certain objet, et ses instances qui peuvent tre multiples et
qui sont les objets rels . Ceux-ci peuvent tre dcrits partir des mmes
proprits dont les valeurs peuvent varier.
Pour rassurer tout le monde, nous allons prendre un petit exemple concret :
Une classe Voiture permet de dfinir lensemble du parc automobile europen. Cette
classe Voiture dfinit lensemble des caractristiques que peut possder une automobile. Il serait par exemple possible dy retrouver la marque de celle-ci, mais galement
sa couleur ou encore son immatriculation que nous pourrions dfinir comme attributs.
Maintenant nous savons ce quest une Voiture, nous aurions peut-tre lenvie den
crer quelques-unes. Cest une trs bonne ide, et nous allons commencer par crer
une Renault de couleur grise et immatricule dans le Rhne . Voil maintenant que nous en avons besoin dune seconde ; trs bien, voici une Peugeot de
couleur noire et immatricule dans le Cantal .
Dans cet exemple, nous avons donc utilis une classe Voiture pour en crer deux
instances qui sont la Renault et la Peugeot.
Structure
Si vous avez bien suivi le deuxime chapitre de la premire partie, vous devriez vous
rappeler dun schma reprsentant la structure de la classe principale. Je vous propose de gnraliser ce schma et de le complter un peu plus avec ce que nous venons de
dcouvrir. Nous pouvons y ajouter notamment les attributs et les mthodes. Vous
verrez la figure 9.1 comment sont structures les classes.
126

CRER UNE CLASSE

Figure 9.1 Schma gnral de la structure dune classe.


Vous ne devriez donc pas tre surpris de la manire dont nous dfinissons une classe
lintrieur du code :
1
2

package
{

public class NomDeLaClasse


{
// Attributs

4
5
6
7

// M thodes

8
9

10
11
12

Nous allons prsent apprendre dfinir chacune des proprits de la classe !

Construire la classe
Package
Avant toute chose, nous allons brivement reparler de la notion de package. Nous
lavions dfini comme dcrivant la position de la classe dans larborescence des fichiers
de votre projet. Rassurez-vous, cest toujours le cas ! Cependant, je voudrais prsenter
ici la manire adopter pour positionner ses propres classes dans diffrents dossiers.
Pour linstant, il est vrai que nous ne disposons pas dun projet consquent
et que le nombre de classes est assez faible. Cependant, lorsque nos projets
grandiront et que les classes vont se multiplier, nous devrons faire le tri et
ranger nos classes dans diffrents dossiers afin dy voir plus clair.
Voici donc un conseil quil serait prudent de suivre : organisez vos classes en fonction
de leur nature et de leur utilit !
Par exemple, nous pourrions imaginer un package nomm vehicules qui contiendrait les classes Voiture, Camion et Moto. Puis nous crons deux nouvelles classes
127

CHAPITRE 9. LES CLASSES (1RE PARTIE)


Fourchette et Couteau, qui nont apparemment strictement rien faire dans le package
vehicules. Il nous faut alors en insrer un nouveau que nous pourrions nommer
couverts.
Attributs
Nous allons maintenant prsenter le premier type de proprits dune classe : il sagit
des attributs ! Les attributs ont en ralit des variables, nous pouvons donc les
dclarer comme nimporte quelle variable :
1

var _unAttribut : String ;

Lorsquon programme en POO, on a lhabitude de ne pas initialiser les variables lors


de la dclaration, mais plutt lintrieur dun constructeur que nous dtaillerons
un peu aprs dans ce cours.
Nous introduisons galement le mot-cl private devant la dclaration de lattribut,
dont nous reparlerons aussi plus tard :
private var _unAttribut : String ;

a y est, nous avons notre premier attribut !


Par convention, en Actionscript 3, nous ajouterons un caractre underscore
_ devant le nom de tous nos attributs. Cela nous sera pratique lorsque
nous crirons des accesseurs et mutateurs.

Mthodes
Comme nous lavons prcis plus haut, les mthodes sont des fonctions. Il peut donc
sagir aussi bien dinstructions de fonction que dexpressions de fonction (pour
ceux qui auraient tout oubli, allez faire discrtement un tour dans le chapitre sur les
fonctions !). Nanmoins, je vous avais dit que les instructions de fonction taient
prfrables, nous utiliserons donc ce type de fonctions :
1
2
3
4

function uneM thode () : void


{
// Instructions
}

Bien entendu, lintrieur de ces mthodes nous avons accs aux diffrents attributs
afin de pouvoir modifier leur valeur ou simplement lire leur contenu. Au final, seuls les
attributs peuvent mmoriser des choses et ainsi se souvenir de ltat de lobjet en
question. Cest la raison pour laquelle, en gnral, vos mthodes serviront lire ou
modifier le contenu dun ou plusieurs attributs.
Voil comment notre mthode pourrait modifier un attribut :
1

128

function uneM thode ( nouvelleValeur : String ) : void

CRER UNE CLASSE


2

3
4

unAttribut = nouvelleValeur ;

Bien sr, nous pouvons faire toutes sortes de manipulations lintrieur dune mthode
et pas simplement affecter ou lire le contenu dun attribut.
Contrairement dautres langages, lActionscript ne prend pas en compte la
surcharge de mthodes. Pour ceux qui dcouvrent ce terme, ne vous inquitez
pas, nous en reparlerons avant la fin de ce chapitre.
Enfin, les mthodes prennent galement un mot-cl devant leur dclaration, qui est
cette fois-ci public :
1
2
3
4

public function uneM thode () : void


{
// Instructions
}

Les mots-cls private et public sont lis la notion dencapsulation que


nous dcouvrirons plus en profondeur au cours du chapitre. En attendant,
sachez que ces mots-cls existent et considrez quils font partie de la dclaration des proprits dune classe.

Constructeur
prsent, il est temps dintroduire une mthode un peu particulire : le constructeur !
Le constructeur est la mthode appele par dfaut lors de linitialisation dun objet,
vous savez lorsque vous utilisez le mot-cl new. Vous noterez que cette mthode possde
obligatoirement le mme nom que celui de la classe. Par exemple, pour notre classe
nomme Voiture, notre constructeur pourrait ressembler ceci :
1
2
3
4

public function Voiture ()


{
// Instructions
}

Le constructeur dune classe sert principalement initialiser lensemble des attributs dclars dans celle-ci.
Vous remarquerez que le constructeur ne peut pas renvoyer de valeur, aussi
vitez dinsrer le mot-cl return lintrieur de celui-ci. Une instruction de
renvoi serait ignore lexcution, et pourrait entraner des messages derreur
lors de la compilation.
Ne vous inquitez pas si certains points sont encore flous dans votre esprit, nous allons
crer ensemble une classe pas pas la fin du chapitre !
129

CHAPITRE 9. LES CLASSES (1RE PARTIE)

Des paramtres facultatifs pour nos mthodes


La surcharge de mthodes
Dans beaucoup de langages utilisant la Programmation Oriente Objet, on retrouve le concept de surcharge de mthodes, mais ce nest pas le cas en ActionScript 3. Contrairement son nom abominable, ce concept est relativement simple et
consiste a dfinir plusieurs mthodes portant le mme nom. Il est alors possible de
dfinir des paramtres de types diffrents ou encore dutiliser un nombre de paramtres
diffrent. Ceci est trs utile et permet, par exemple, de dfinir plusieurs constructeurs
nayant pas le mme nombre de paramtres :
1
2

package
{

public class MaClasse


{
// Attribut
private var _unAttribut : int ;

4
5
6
7
8

// Constructeurs
public function MaClasse ()
{
_unAttribut = 0 ;
}

9
10
11
12
13
14

public function MaClasse ( entier : int )


{
_unAttribut = entier ;
}

15
16
17
18
19

20
21
22

Dans lexemple prcdent, il serait possible dinstancier une classe sans renseigner de
paramtres avec le premier constructeur, ou en prcisant la valeur de lentier avec le
second. Cette technique servirait donc rendre lutilisation dune classe plus simple
et plus souple, en permettant lappel dune mme fonction avec des paramtres
diffrents.
Malheureusement donc, la surcharge de mthodes est strictement interdite en Actionscript, vous ne trouverez donc jamais deux mthodes ayant le mme nom au sein
dune classe, et ceci est aussi valable pour les constructeurs. En revanche, il est possible
de contourner le problme, voire mme de le simplifier : cest le rle des paramtres
facultatifs !
130

DES PARAMTRES FACULTATIFS POUR NOS MTHODES

Les paramtres facultatifs


Dfinition
En Actionscript, il existe un concept qui permet dobtenir une utilisation similaire
une surcharge de mthodes. Il sagit des paramtres facultatifs ! Cette nouvelle
notion est associe en ralit la dfinition de fonctions et nest donc pas limite aux
seules mthodes. Ainsi, pour insrer un paramtre facultatif, il suffit de lui prciser
une valeur par dfaut dans lors de la dfinition de la fonction, comme ceci :
1
2
3
4

function maFonction ( entier : int , texte : String = " Valeur par d


faut " , nombre : Number = 0 ) : void
{
trace ( nombre , texte ) ;
}

En utilisant ici des valeurs par dfaut pour les deux derniers paramtres, il alors possible
de les omettre lors de lappel de la fonction. Ainsi, contrairement la surcharge
de mthode, nous navons pas besoin, en Actionscript, de rcrire lintgralit du
contenu de la fonction pour chaque dfinition de nouveaux paramtres.
Attention cependant lordre de dfinition des paramtres. Les paramtres
facultatifs doivent obligatoirement tre placs la fin de la liste des paramtres. Ils doivent galement tre crits dans un ordre dutilisation prcis que
nous allons prciser en parlant des appels de ces fonctions.

Appels
Comme leur nom lindique, les paramtres facultatifs peuvent tre omis lors de
lappel de la fonction. Ainsi, la fonction dfinie prcdemment, peut tre appele en
renseignant uniquement le premier paramtre :
1

maFonction ( 10 ) ;

Il est galement possible de renseigner les deux premiers paramtres, sans le troisime :
1

maFonction ( 10 , " Nouveau texte " ) ;

Attention toutefois lordre de dfinition des paramtres facultatifs. En


effet, sil est possible de renseigner le premier paramtre facultatif et domettre
le second, linverse est impossible. Ainsi, lappel suivant nest pas correct :
maFonction(10, 5). Cest pourquoi, vous devez tre vigilant dans lordre
de dfinition des paramtres facultatifs de vos fonctions !
Enfin, voici dernier appel possible de votre fonction, qui comprend lintgralit des
paramtres :
1

maFonction ( 10 , " Nouveau texte " , 5 ) ;

131

CHAPITRE 9. LES CLASSES (1RE PARTIE)


Ainsi, grce la dfinition de paramtres facultatifs, nous avons trois manires
diffrentes dappeler la mme fonction !

Encapsulation
Lencapsulation que nous allons redcouvrir maintenant est lun des concepts les
plus importants de la Programmation Oriente Objet ! Vous rappelez-vous du
mot-cl private que nous avons introduit avant chacun de nos attributs ? Il permet
de masquer la proprit laquelle il est associ, celle-ci nest donc pas visible depuis
lextrieur de la classe en question. Ainsi, partir de maintenant, nous masquerons
obligatoirement lensemble de nos attributs ! Pour y accder, nous serons donc dans
lobligation de faire appel une mthode intermdiaire qui nous permettra de vrifier
les donnes et daffecter les attributs en consquence, hors du champ de vision de
lutilisateur.
Lintrt de lencapsulation est de simplifier lutilisation des objets en masquant lensemble des attributs et des mthodes qui sont utiles simplement au fonctionnement
de lobjet. Ainsi, vu de lextrieur, nous pourrons manipuler ces objets facilement, sans
nous soucier de leur fonctionnement interne.
Ce concept introduit donc la notion de droits daccs que nous allons voir tout de
suite !

Les diffrents droits daccs


Il nest pas possible de parler dencapsulation sans toucher un mot des droits daccs
ou portes. Ces droits daccs dfinissent la visibilit dune proprit au sein de votre
code. En Actionscript, il existe trois portes qui sont public, private et internal.
Ces mots-cls se placent juste avant la dclaration des proprits auxquelles ils
sont associs.
En ralit, il existe une quatrime porte nomme protected. Cependant,
celle-ci est profondment lie la notion dhritage dont nous reparlons dans
le chapitre qui lui est consacr.

Privs
Les droits daccs dits privs sutilisent avec le mot-cl private. Ils permettent
de restreindre lutilisation de la proprit la classe o elle est dfinie. Ainsi, cette
proprit ne sera pas visible depuis lextrieur de cette classe. Voici un attribut dont
la porte est de type private :
1

132

private var _monAttribut : String ;

ENCAPSULATION
Je rappelle que tous nos attributs doivent tre invisibles depuis lextrieur de
la classe o ils sont dfinis, utilisez donc la porte private.

Publiques
Les droits daccs publics sont associs au mot-cl public, que nous avons dj
crois plusieurs fois. Celui-ci permet de rendre visible partout dans le code la proprit
laquelle il est associ. Ce sera donc le cas pour la majorit de vos mthodes. Dailleurs,
il est impossible daffecter une autre porte que public un constructeur :
1
2
3
4

public function MonConstructeur () : void


{
...
}

Internes
Les droits daccs internes sont un peu spciaux. Ils sont associs au motcl internal. Les proprits dfinies avec ce type de portes sont visibles depuis
lensemble du package, dont la classe o elle est dclare appartient.
1

internal var _monAttribut : int ;

Cette porte nest pas trs utilise en gnral, mais sachez quil sagit de la
porte par dfaut lorsquaucune autre nest spcifie.

Les accesseurs
Syntaxe
Il existe un type de mthodes un peu spcial, directement li la notion dencapsulation :
les accesseurs ! On dsigne par accesseurs lensemble des accesseurs et mutateurs,
galement appeles getters et setters. Ceux-ci permettent laccs direct un attribut
de porte private en lecture par laccesseur et en criture par le mutateur. Ainsi,
dans beaucoup de langages de programmation, on retrouve un ensemble daccesseurs
dont le nom dbute par get (de langlais to get qui signifie obtenir ) et un ensemble
de mutateurs dont le nom dbute par set (de langlais to set qui signifie dfinir ).
Pour grer lensemble des accesseurs, lActionscript a introduit deux mots-cls get
et set qui permettent notamment de donner un nom identique aux deux accesseurs.
Illustrons cela par dun exemple. Voici un attribut quelconque dont la porte est de
type private :
133

CHAPITRE 9. LES CLASSES (1RE PARTIE)


private var _texte : String ;

tant donn que cet attribut est de type private, il nest pas accessible depuis lextrieur de la classe o il a t dfini. Cependant, il est probable que nous ayons besoin de
modifier cet attribut depuis la classe principale. Si nous voulons respecter le concept
dencapsulation, nous devons donc conserver la porte de cet attribut et dfinir des
accesseurs pour y avoir accs :
1
2
3
4
5

// Accesseur
public function get texte () : String
{
return _texte ;
}

6
7
8
9
10
11

// Mutateur
public function set texte ( nouveauTexte : String ) : void
{
_texte = nouveauTexte ;
}

Comme vous le voyez, mes deux accesseurs utilisent le mme nom de fonction, ce
qui est drlement pratique. Mais lutilisation des accesseurs va plus loin que a, car
leur utilisation est un peu particulire. Ainsi, laccesseur get dune instance nomme
MonObjet sutilise sans les parenthses :
1

var maVariable : String = MonObjet . texte ;

Quant lui, le mutateur sutilise galement sans parenthses, mais avec le symbole
gal = qui est considr comme un signe daffectation :
MonObjet . texte = " Nouvelle cha ne de caract res " ;

Une telle utilisation des accesseurs est spcifique lActionscript. Cette technique permet de manipuler les accesseurs comme sil sagissait de lattribut
lui-mme. Cependant, en utilisant les getters et setters, vous respectez le
concept dencapsulation. Ainsi, les proprits cres partir daccesseurs
sont considres comme tant des attributs, et non des mthodes.

Une raison supplmentaire dutiliser les accesseurs


Lorsque vous utilisez des accesseurs, vous ntes pas obligs de vous contenter de lire
un attribut dans un getter ou de lui affecter une nouvelle valeur dans un setter :
en effet, il est tout fait possible dajouter du code supplmentaire, voire de ne pas
manipuler dattribut en particulier !
Prenons la classe suivante :
1
2

package
{

134

ENCAPSULATION
/* *
* Une classe d ' exemple
*/
public class Voiture
{
private var _largeur : int ;

3
4
5
6
7
8
9

public function Voiture ()


{

10
11
12

13
14

public function get largeur () : int


{
return _largeur ;
}

15
16
17
18
19

public function set largeur ( value : int ) : void


{
_largeur = value ;
}

20
21
22
23
24
25
26
27
28

29

public function mettreAJour () : void


{
// Mettre jour l ' affichage
}

30
31

Dans un premier temps, imaginons que dans notre classe, nous disposions dune mthode mettreAJour() qui met jour laffichage de notre objet en fonction de la valeur
de lattribut _largeur. Pour spcifier la largeur de la voiture, nous procderions ainsi :
1
2
3
4
5

var voiture : Voiture = new Voiture () ;


voiture . largeur = 100 ; // Largeur de la voiture
voiture . mettreAJour () ; // Mettons jour l ' affichage de la
voiture pour une largeur de 100
voiture . largeur = 150 ; // Changeons la largeur de la voiture
voiture . mettreAJour () ; // Mettons jour l ' affichage de la
voiture pour une largeur de 150

Grce aux accesseurs, il est possible de lappeler automatiquement ds que lon modifie
la largeur de lobjet :
1
2
3
4
5

public function set largeur ( value : int ) : void


{
_largeur = value ;
mettreAJour () ;
}

135

CHAPITRE 9. LES CLASSES (1RE PARTIE)


Ainsi, au lieu davoir appeler manuellement la mthode mettreAJour(), il suffit de
modifier la largeur :
1
2
3
4
5

var voiture : Voiture = new Voiture () ;


voiture . largeur = 100 ; // Largeur de la voiture
// L ' affichage de la voiture est automatiquement mis jour
dans l ' accesseur set largeur !
voiture . largeur = 150 ; // Changeons la largeur de la voiture
// Encore une fois , l ' affichage de la voiture est
automatiquement mis jour , il n 'y a rien d ' autre faire !

Maintenant, nous aimerions limiter les valeurs possibles de lattribut largeur ; disons
quil doit tre suprieur 100 et infrieur 200.
1
2
3
4
5
6
7
8
9
10
11
12

var voiture : Voiture = new Voiture () ;


voiture . largeur = 100 ; // Largeur de la voiture
// On v rifie que la largeur est dans les limites
if ( voiture . largeur < 100 )
{
voiture . largeur = 100 ;
}
else if ( voiture . largeur > 200 )
{
voiture . largeur = 200 ;
}
trace ( voiture . largeur ) ; // Affiche : 100

13
14
15
16
17
18
19
20
21
22
23
24

voiture . largeur = 250 ; // Changeons la largeur de la voiture


// On v rifie une fois de plus que la largeur est dans les
limites
if ( voiture . largeur < 100 )
{
voiture . largeur = 100 ;
}
else if ( voiture . largeur > 200 )
{
voiture . largeur = 200 ;
}
trace ( voiture . largeur ) ; // Affiche : 200

Vous remarquerez que cest plutt fastidieux. Bien sr, nous pourrions utiliser une
fonction, mais il vaut mieux mettre dans la classe Voiture ce qui appartient la classe
Voiture ! Encore une fois, les accesseurs nous facilitent grandement la tche, voyez
plutt :
1
2
3

public function set largeur ( value : int ) : void


{
_largeur = value ;

4
5
6

136

// _largeur doit tre comprise entre 100 et 200


if ( _largeur < 100 )

ENCAPSULATION
{

_largeur = 100 ;
}
else if ( _largeur > 200 )
{
_largeur = 200 ;
}

8
9
10
11
12
13
14
15
16

mettreAJour () ;

Le code principal serait alors crit ainsi :


1
2
3
4

var voiture : Voiture = new Voiture () ;


voiture . largeur = 100 ; // Largeur de la voiture
// Plus besoin de v rifier que la largeur est dans les limites ,
l ' accesseur le fait pour nous !
trace ( voiture . largeur ) ; // Affiche : 100

5
6
7

voiture . largeur = 250 ; // Changeons la largeur de la voiture


trace ( voiture . largeur ) ; // Affiche : 200

Avouez que cest extrmement pratique ! Je vous conseille dappliquer cette faon de
faire le plus souvent possible, cela vous rendra service.

Gnrateur de code dans Flashdevelop


Il existe un outil trs pratique disponible dans la plupart des IDE, dont Flashdevelop,
pour gnrer automatiquement des portions de codes. Nous pouvons lutiliser, entre
autres, pour gnrer les accesseurs de nos attributs ! Pour cela, il faut suivre trois
tapes : voir les figures 9.2, 9.3 et 9.4.
Il est galement possible de se passer de la deuxime tape en utilisant directement le raccourci Ctrl + Maj + 1.
Le code ainsi gnr, ressemblera ceci :
1
2
3
4

public function get texte () : String


{
return _texte ;
}

5
6
7
8
9

public function set texte ( value : String ) : void


{
_texte = value ;
}

137

CHAPITRE 9. LES CLASSES (1RE PARTIE)

Figure 9.2 1. Placer le curseur sur la ligne de lattribut dont il faut gnrer les
accesseurs

Figure 9.3 2. Slectionner loption Code Generator

138

EXERCICE : CRONS NOTRE PREMIRE CLASSE

Figure 9.4 3. Slectionner une des trois options

Exercice : Crons notre premire classe


Prsentation de la classe
Description
Afin de mieux apprivoiser toutes ces nouvelles notions, nous allons maintenant crire
notre premire classe pas pas ! Nous allons donc crer une classe Voiture, que je vous
propose de dcouvrir maintenant. Nous y intgrerons les attributs suivants, ainsi que
les accesseurs correspondants :
SaMarque : cet argument de type String permet de dfinir la marque de la voiture.
Celui-ci sera dfini dans le constructeur et il sagit du seul attribut qui ne possdera pas de mutateur. En effet, une voiture peut tre repeinte, modifie par divers
accessoires qui influeront sur sa longueur ou encore elle peut changer de plaque
dimmatriculation. En revanche, elle ne peut pas changer sa marque de fabrique.
SaCouleur : cet argument de type String reprsente la couleur de peinture de la
voiture. Celle-ci sera manipule par les deux accesseurs nomms couleur.
SaLongueur : la longueur du vhicule sera dfinie par une variable de type int. Deux
accesseurs longueur permettront de manipuler cet lment. Lors dune affectation,
nous devrons vrifier si la valeur renseigne est positive. Dans le cas contraire, nous
utiliserons la valeur -1 pour prciser que la longueur est non renseigne .
SonImmatriculation : enfin limmatriculation du vhicule sera stocke dans un attribut de type String, qui possdera deux accesseurs immatriculation.
Lanons-nous donc dans la conception de cette classe. Lisez avec attention afin de noter
les diffrentes tapes de cration dune classe.
139

CHAPITRE 9. LES CLASSES (1RE PARTIE)


UML : Unified Modeling Language
Lorsque lon programme, il est possible de reprsenter les diffrentes classes sur un
schma pour rsumer leurs proprits. Il existe diffrentes modlisations standards
dont lUnified Modeling Language ou UML. Cette reprsentation est trs souvent
associe aux langages orients objets comme lActionscript. Sans donner plus de dtails, je vous propose de dcouvrir la figure 9.5 la reprsentation correspondant
notre classe Voiture.

Figure 9.5 Reprsentation UML de la classe Voiture


Comme vous le voyez, notre classe est divise en deux parties : les attributs et les
mthodes ! Ceux-ci sont donc lists en spcifiant de quels types ils sont, ainsi que
les paramtres renseigner en ce qui concerne les mthodes. Cela permet de dresser
une sorte de plan de construction de la classe coder, mais galement son mode
demploi pour dventuels autres programmeurs. Cela permet galement de mettre en
vidence les relations liant les classes les unes aux autres, comme nous le verrons au
cours des chapitres venir. Vous aurez trs certainement remarqu les signes - et
+ qui prcdent lensemble de nos proprits. Ceux-ci permettent de reprsenter
les diffrents droits daccs lis chacune de nos proprits de la manire suivante :
- pour privs, + pour publiques, ~ pour internes et # pour protgs.
Lobjectif du cours nest pas de vous apprendre utiliser lUML, cependant,
nous utiliserons quelques schmas qui sont souvent bien plus parlants que des
mots. Vous apprendrez lire et utiliser les bases de cette modlisation au fil
des chapitres de cette partie.

criture du code
Prparation du nouveau fichier
Tout dabord, pour crer une nouvelle classe, nous aurons besoin dun nouveau fichier
Actionscript ! Nous allons donc insrer une classe nomme Voiture avec File > New
> AS3 Document si vous tes sous FlashDevelop ou crer un nouveau fichier nomm
140

EXERCICE : CRONS NOTRE PREMIRE CLASSE


Voiture.as si vous nutilisez pas ce logiciel.
Puis, nous insrerons lintrieur le code de dfinition de la classe, comme ceci :
1
2
3
4

package
{
public class Voiture
{

6
7
8

Dclaration des attributs


Prcdemment, nous avons dfini les quatre attributs qui sont saMarque, saCouleur,
saLongueur et sonImmatriculation. Tous ces attributs ont videmment des droits
daccs de type private, pour respecter le concept dencapsulation.
Voici donc les diffrentes dclarations dattributs :
1
2
3
4

private
private
private
private

var
var
var
var

_marque : String ;
_couleur : String ;
_longueur : int ;
_immatriculation : String ;

Le constructeur
Comme nous lavons rapidement introduit, le constructeur de cette classe devra recevoir en paramtre la marque de fabrication du vhicule. Sachant que les autres attributs
possdent des setters, nous ne les introduirons pas dans la liste des paramtres spcifier au constructeur. Nanmoins, ceux-ci devront tout de mme tre initialiss.
Il est recommand dutiliser, ds que cela est possible, les accesseurs et les
mutateurs au sein mme de la classe, exception faite du constructeur, o
cela nest gnralement pas ncessaire.
Dcouvrons tout de suite ce constructeur :
1
2
3
4
5
6
7

public function Voiture ( marque : String )


{
_marque = marque ;
_couleur = " Sans couleur " ;
_longueur = -1 ;
_immatriculation = " Non immatricul e " ;
}

141

CHAPITRE 9. LES CLASSES (1RE PARTIE)


Vous pouvez utiliser des noms de paramtres identiques aux noms de vos
proprits (ici marque) : ils sont en effet prioritaires. Pour pouvoir utiliser
explicitement une proprit de lobjet, il faut ajouter le mot-cl this devant : si nous avions un mutateur pour lattribut marque, nous devrions
crire this.marque = marque; pour lutiliser.

Les accesseurs
Chaque attribut possde un ou deux accesseurs, nous ne les dtaillerons donc pas
tous. Je vous propose plutt de dcouvrir un getter et un setter. Nous allons prendre
lexemple des accesseurs longueur, dont voici le getter :
1
2
3
4

public function get longueur () : int


{
return _longueur ;
}

Cet accesseur na rien de trs compliqu, nous ne nous y attarderons donc pas davantage. En revanche, pour le mutateur, nous devons vrifier si la valeur spcifie est
positive, je vous rappelle. Nous devrons donc utiliser une condition en if...else pour
faire la vrification.
Voici donc le mutateur en question, que vous tes normalement en mesure de comprendre par vous-mmes maintenant :
1
2
3
4
5
6
7

public function set longueur ( nouvelleLongueur : int ) : void


{
if ( nouvelleLongueur > 0 )
_longueur = nouvelleLongueur ;
else
_longueur = -1 ;
}

Flicitations, nous avons termin lcriture de votre premire classe !

La classe complte
Parce quil est probable que certains ne soient pas pleinement satisfaits avant davoir vu
lintgralit de celle-ci, je vous propose ici un rcapitulatif intgral de la classe Voiture :
1
2
3
4
5
6
7
8
9

package
{
public class Voiture
{
/* ************** Attributs ************** */
private var _marque : String ;
private var _couleur : String ;
private var _longueur : int ;
private var _immatriculation : String ;

142

EXERCICE : CRONS NOTRE PREMIRE CLASSE


10
11
12
13
14
15
16
17
18

/* ************ Constructeur ************ */


public function Voiture ( marque : String )
{
_marque = marque ;
_couleur = " Sans couleur " ;
_longueur = -1 ;
_immatriculation = " Non immatricul e " ;
}

19
20
21
22
23
24

/* ************** Accesseurs ************** */


public function get marque () : String
{
return _marque ;
}

25
26
27
28
29

public function get couleur () : String


{
return _couleur ;
}

30
31
32
33
34

public function get longueur () : int


{
return _longueur ;
}

35
36
37
38
39

public function get immatriculation () : String


{
return _immatriculation ;
}

40
41
42
43
44
45

/* ************** Mutateurs ************** */


public function set couleur ( nouvelleCouleur : String ) :
void
{
_couleur = nouvelleCouleur ;
}

46
47
48
49
50

public function set longueur ( nouvelleLongueur : int ) : void


{
_longueur = ( nouvelleLongueur > 0 ) ?
nouvelleLongueur : -1 ;
}

51
52
53
54
55

public function set immatriculation (


n ou ve ll e Im ma tr i cu la ti o n : String ) : void
{
_immatriculation = no uv e ll eI mm a tr ic u la ti on ;
}

56

143

CHAPITRE 9. LES CLASSES (1RE PARTIE)


}

57
58
59

Vous
pouvez lafficher pour la copier
 en utilisant le code web ci-dessous.
Classe Voiture
B
Code web : 255948

En rsum
Le mot-cl this fait rfrence lobjet lui-mme.
Les classes sont tries dans diffrents package en fonction du type dobjets quelles
reprsentent.
Le constructeur est une mthode particulire appele la cration dune instance,
o on initialise gnralement les attributs.
Il est possible de dfinir des paramtres facultatifs lintrieur de nos fonctions
et mthodes pour palier limpossibilit de surcharger celles-ci.
Lencapsulation est le concept permettant de masquer le fonctionnement interne
dune classe.
Pour grer les droits daccs, nous disposons des diffrents mots-cls public,
private, internal et protected (que nous aborderons plus loin).
Des accesseurs peuvent tre dclars laide des mots-cls get et set, et simplifient
laccs aux attributs dune classe.

144

Chapitre

10

Les classes (2nde partie)


Difficult :
Dans le chapitre prcdent, nous avons prsent les bases de la thorie des classes. Nous
allons maintenant introduire des notions complmentaires qui vous permettront de structurer votre code encore plus facilement et proprement. Contrairement la plupart des notions
de cette partie sur la POO, celles que nous allons dcouvrir dans ce chapitre nont pas t
prsentes dans le premier chapitre et sont donc compltement nouvelles. Redoublez donc
dattention !

145

CHAPITRE 10. LES CLASSES (2NDE PARTIE)

Les lments statiques


Peut-tre que certains se rappellent de la classe Math que nous avons dj utilis. Ils
se demandent alors pourquoi nous lavions utilis en employant directement le nom de
la classe et sans passer par une instance de celle-ci :
1

var monNombre : Number = Math . sqrt ( 2 ) ;

Comment cela est-ce possible ?

Maintenant que vous avez dj quelques connaissances en POO, il est tout fait
justifi de se poser ce genre de question. En fait, la classe Math utilise des lments
qui sont un peu particuliers : les lments statiques ! Comme nous le verrons, ces
lments statiques ne sont pas dfinis pour les instances dune classe, mais pour la
classe elle-mme. Il existe deux types dlments statiques qui sont :
Les variables statiques.
Les mthodes statiques.
Nous verrons donc comment crer ces lments et leur intrt.

Les variables statiques


Les variables statiques sont dclares laide du mot-cl static, et sont associes,
donc dfinies, pour la classe. Prenons lexemple de notre classe Voiture du chapitre
prcdent et ajoutons-y une variable statique reprsentant le nombre de fois o celle-ci
a t instancie :
public static var occurences : int = 0 ;

Cette variable est donc partage par la classe, elle nappartient pas aux instances de
celle-ci. Toutefois, cette variable est accessible depuis nimporte quel point de la classe.
Nous pourrions notamment incrmenter cette variable lintrieur du constructeur de
la classe Voiture afin de comptabiliser le nombre doccurrences de celle-ci :
occurrences ++;

Grce cette variable statique, nous pourrions obtenir le nombre dinstances de la


classe Voiture, nimporte o dans le code. Pour cela, nul besoin de crer une nouvelle
instance de la classe, il suffit dutiliser le nom de la classe lui-mme :
1
2
3
4

var uneRenault : Voiture = new Voiture ( " Renault " ) ;


var unePeugeot : Voiture = new Voiture ( " Peugeot " ) ;
var uneCitroen : Voiture = new Voiture ( " Citro n " ) ;
trace ( Voiture . occurrences ) ; // Affiche : 3

146

LES LMENTS STATIQUES


Un lment statique ne peut tre utilis quavec la classe o celui-ci est
dclar. Il est impossible de faire rfrence un lment statique laide
dune instance de cette classe : des erreurs seraient alors engendres.

Les mthodes statiques


Il existe un second type dlments statiques : il sagit des mthodes statiques.
Dans le chapitre prcdent, je vous avais dit que les mthodes servaient principalement la lecture ou la modification dun attribut. Nous pouvons donc introduire les
mthodes statiques comme lensemble des mthodes qui offrent des fonctionnalits
naffectant pas au moins lun des attributs dune classe.
Ces lments statiques sont galement dclars laide du mot-cl static :
1
2
3
4

public static function uneMethode () : void


{
// Instructions
}

laide de ces mthodes statiques, il nous est possible de recrer la classe Math,
que nous pourrions renommer MaClasseMath. Voici par exemple la redfinition de la
mthode pow() en puissance() :
1
2
3
4
5
6
7
8
9

public static function puissance ( nombre : int , exposant : int ) : int


{
var resultat : int = nombre
for ( var i : int = 1 ; i < exposant ; i ++)
{
resultat *= nombre ;
}
return resultat ;
}

Le code complet de la classe serait :


1
2
3
4
5
6
7
8
9
10
11
12
13
14

package
{
public class MaClasseMath
{
public static function puissance ( nombre : int , exposant :
int ) : int
{
var resultat : int = nombre
for ( var i : int = 1 ; i < exposant ; i ++)
{
resultat *= nombre ;
}
return resultat ;
}
}

147

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


15

Vous remarquerez que cette classe ne possde pas de constructeur : en effet,


il est permis de ne pas mettre de constructeur si vous ne vous en servirez
pas. Ici, nous navons pas mis de constructeur car nous nallons jamais crer
dinstance de cette classe.
Nous pouvons ainsi lutiliser sans crer doccurrences de cette nouvelle classe :
1
2

var monNombre : int = MaClasseMath . puissance (2 , 10 ) ;


trace ( monNombre ) ; // Affiche : 1024

Des classes telles que Math ont t conues pour tre utilises uniquement grce des
lments statiques. En utilisant ce principe, vous pouvez ainsi regrouper un ensemble
de fonctionnalits lintrieur dune mme classe. Vous naurez donc pas besoin de crer
doccurrences de celle-ci et vous ferez ainsi lconomie des instructions de dclarations
et dinitialisations des instances.
Il est impossible dutiliser le mot-cl this dans les mthodes statiques, car
elles ne sont lies aucun objet en particulier.

Une nouvelle sorte de variable : la constante !


Lorsque nous avons introduit les variables dans la premire partie, nous navons pas
parl des constantes ! Comme son nom lindique, la valeur dune constante est
fige contrairement celle dune variable qui est voue voluer au cours du programme. Ces constantes sont principalement utilises en POO et reprsentent des
caractristiques constantes dun objet.
Je vous invite dcouvrir ce nouveau type dlment sans plus attendre !

Prsentation
Dclaration
De la mme faon que nous avions linstruction ou mot-cl var pour dclarer une variable, nous disposons du mot-cl const en ce qui concerne les constantes. Comme
les variables, ces dernires possdent galement un type. Voici par exemple la dclaration dune constante de type String :
1

148

const MA_CONSTANTE : String ;

UNE NOUVELLE SORTE DE VARIABLE : LA CONSTANTE !


Vous remarquerez quici nous nutilisons pas la notion Camel. Effectivement,
il est de coutume dcrire les noms de constantes en lettres majuscules. Cela
permet de les diffrencier des variables, et de prciser quil sagit bien dune
constante. Utilisez lunderscore _ pour sparer les diffrents mots lintrieur du nom de votre constante.
Le code prcdent na malheureusement aucun intrt et ne sert rien sans linitialisation
de la constante !
Initialisation
Tout comme une variable, il est important dinitialiser une constante. Vous pouvez procder exactement de la mme manire que pour une variable. La technique
dinitialisation dpend bien entendu du type de la constante.
Voici donc comment initialiser notre constante prcdente de type String :
1

const MA_CONSTANTE : String = " Valeur " ;

Contrairement aux variables, Il est strictement impossible dinitialiser la valeur


dune constante ailleurs que lors de sa dclaration. tant donn que la valeur
dune constante est non modifiable, nessayez pas non plus de procder une
affectation.

Intrt des constantes


Il y a certainement plus de la moiti, voire mme les trois quarts dentre vous qui se
sont pos la question suivante :

quoi ces constantes peuvent-elles bien servir ?

Contrairement ce que vous pensez, les constantes ont plusieurs utilits.


Tout dabord, elles permettent de mettre des noms sur des valeurs. Votre programme
ne marchera pas mieux avec cela, cest uniquement une question de clarification
du code. Avouez quil est quand mme plus ais de comprendre la signification
dune expression si celle-ci utilise des noms plutt que des valeurs : prixRoue *
NOMBRE_DE_ROUES plutt que prixRoue * 4. Dans le second cas, nous pourrions
nous demander sil sagit dune augmentation du prix dune roue, une conversion du
prix des euros aux dollars, ou bien une multiplication par le nombre de roues. Dans
la premire expression, lopration est tout fait claire ; ce qui simplifie grandement
le travail de relecture dun code.
Une autre utilit des constantes est de sassurer de la prennisation du code. Imaginez que le nombre de roues de votre voiture puisse servir plusieurs calculs comme
149

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


le prix de lensemble, son poids, etc. Vous devrez donc utiliser cette valeur plusieurs
fois dans votre code et des endroits diffrents. Ainsi, en utilisant une constante la
place de la valeur relle, vous facilitez une ventuelle mise jour de votre programme
dans lhypothse de linvention de la voiture 6 roues ! Essayez dimaginer le travail
quil aurait fallu fournir pour remplacer chacune des valeurs prsentes dans des coins
opposs de votre code.
Nutilisez pas non plus des constantes tour de bras dans vos programmes.
Leur but est de simplifier la lecture du code ; nallez donc pas le compliquer
davantage !

Un objet dans un objet (dans un objet. . .)


Jusqu prsent, nous navions utilis quune seule classe la fois. Mais l o la POO
devient vraiment intressante, cest lorsque nous combinons les classes entre elles !

Le problme du ptrole
Reprenons la classe Voiture :
1
2
3
4
5
6
7
8
9

package
{
public class Voiture
{
/* ************** Attributs ************** */
private var _marque : String ;
private var _couleur : String ;
private var _longueur : int ;
private var _immatriculation : String ;

10
11
12
13
14
15
16
17
18

/* ************ Constructeur ************ */


public function Voiture ( marque : String )
{
_marque = marque ;
_couleur = " Sans couleur " ;
_longueur = -1 ;
_immatriculation = " Non immatricul e " ;
}

19
20
21
22
23
24

/* ************** Accesseurs ************** */


public function get marque () : String
{
return _marque ;
}

25
26

150

public function get couleur () : String

UN OBJET DANS UN OBJET (DANS UN OBJET. . .)


{

27
28

29

return _couleur ;

30

public function get longueur () : int


{
return _longueur ;
}

31
32
33
34
35

public function get immatriculation () : String


{
return _immatriculation ;
}

36
37
38
39
40

/* ************** Mutateurs ************** */


public function set couleur ( nouvelleCouleur : String ) :
void
{
_couleur = nouvelleCouleur ;
}

41
42
43
44
45
46

public function set longueur ( nouvelleLongueur : int ) : void


{
_longueur = ( nouvelleLongueur > 0 ) ?
nouvelleLongueur : -1 ;
}

47
48
49
50
51

public function set immatriculation (


n ou ve ll e Im ma tr i cu la ti o n : String ) : void
{
_immatriculation = no uv e ll eI mm a tr ic u la ti on ;
}

52
53
54
55
56

57
58
59

Nous voulons prsent que nos objets contiennent de lessence. Pour cela, nous serions
tent de procder ainsi :
1
2
3
4
5
6
7
8
9

package
{
public class Voiture
{
/* ************** Attributs ************** */
private var _marque : String ;
private var _couleur : String ;
private var _longueur : int ;
private var _immatriculation : String ;

10
11

private var _typeEssence : String ;

151

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


12
13

private var _prixEssence : Number ;


private var _quantiteEssence : Number ;

14
15
16
17
18
19
20
21
22
23
24
25

/* ************ Constructeur ************ */


public function Voiture ( marque : String )
{
_marque = marque ;
_couleur = " Sans couleur " ;
_longueur = -1 ;
_immatriculation = " Non immatricul e " ;
_typeEssence = " Sans Plomb " ;
_prixEssence = 1 . 4 ; // Euros par litre
_quantiteEssence = 10 ; // Litres
}

26
27
28
29
30
31

/* ************** Accesseurs ************** */


public function get marque () : String
{
return _marque ;
}

32
33
34
35
36

public function get couleur () : String


{
return _couleur ;
}

37
38
39
40
41

public function get longueur () : int


{
return _longueur ;
}

42
43
44
45
46

public function get immatriculation () : String


{
return _immatriculation ;
}

47
48
49
50
51

public function get typeEssence () : String


{
return _typeEssence ;
}

52
53
54
55
56

public function get prixEssence () : Number


{
return _prixEssence ;
}

57
58
59
60
61

152

public function get quantiteEssence () : Number


{
return _quantiteEssence ;
}

UN OBJET DANS UN OBJET (DANS UN OBJET. . .)


62

/* ************** Mutateurs ************** */


public function set couleur ( nouvelleCouleur : String ) :
void
{
_couleur = nouvelleCouleur ;
}

63
64
65
66
67
68

public function set longueur ( nouvelleLongueur : int ) : void


{
_longueur = ( nouvelleLongueur > 0 ) ?
nouvelleLongueur : -1 ;
}

69
70
71
72
73

public function set immatriculation (


n ou ve ll e Im ma tr i cu la ti o n : String ) : void
{
_immatriculation = no uv e ll eI mm a tr ic u la ti on ;
}

74
75
76
77
78

public function set typeEssence ( nouveauType : String ) :


void
{
_typeEssence = nouveauType ;
}

79
80
81
82
83

public function set prixEssence ( nouveauPrix : Number ) :


void
{
_prixEssence = nouveauPrix ;
}

84
85
86
87
88

public function set quantiteEssence ( nouvelleQuantite :


Number ) : void
{
_quantiteEssence = nouvelleQuantite ;
}

89
90
91
92
93

94
95
96

Notre classe commence devenir complique, il vaudrait mieux crer une nouvelle
classe pour partager les proprits.

Une nouvelle classe


Crons une classe Essence mettre dans le fichier Essence.as :
1

package

153

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


2

3
4
5
6
7
8

public class Essence


{
/* ************** Attributs ************** */
private var _type : String ;
private var _prix : Number ;
private var _quantite : Number ;

/* ************ Constructeur ************ */


public function Essence ()
{
_type = " Sans Plomb " ;
_prix = 1 . 4 ; // Euros par litre
_quantite = 10 ; // Litres
}

10
11
12
13
14
15
16
17

/* ************** Accesseurs ************** */


public function get type () : String
{
return _type ;
}

18
19
20
21
22
23

public function get prix () : Number


{
return _prix ;
}

24
25
26
27
28

public function get quantite () : Number


{
return _quantite ;
}

29
30
31
32
33

/* ************** Mutateurs ************** */


public function set type ( nouveauType : String ) : void
{
_type = nouveauType ;
}

34
35
36
37
38
39

public function set prix ( nouveauPrix : Number ) : void


{
_prix = nouveauPrix ;
}

40
41
42
43
44

public function set quantite ( nouvelleQuantite : Number ) :


void
{
_quantite = nouvelleQuantite ;
}

45
46
47
48
49
50

154

UN OBJET DANS UN OBJET (DANS UN OBJET. . .)


51
52

Vous
pouvez lafficher pour la copier
 en utilisant le code web ci-dessous.
Classe Essence
B
Code web : 750046


Nous transfrons donc toutes les proprits relatives lessence de la voiture dans la
nouvelle classe. Il va falloir maintenant adapter la classe Voiture :
1
2
3
4
5
6
7
8
9

package
{
public class Voiture
{
/* ************** Attributs ************** */
private var _marque : String ;
private var _couleur : String ;
private var _longueur : int ;
private var _immatriculation : String ;

10
11

private var _carburant : Essence ; // Nouvel attribut


pointant sur un objet de classe Essence !

12
13
14
15
16
17
18
19
20
21

/* ************ Constructeur ************ */


public function Voiture ( marque : String )
{
_marque = marque ;
_couleur = " Sans couleur " ;
_longueur = -1 ;
_immatriculation = " Non immatricul e " ;
_carburant = new Essence () ; // Nous cr ons un objet
Essence par d faut dans le constructeur
}

22
23
24
25
26
27

/* ************** Accesseurs ************** */


public function get marque () : String
{
return _marque ;
}

28
29
30
31
32

public function get couleur () : String


{
return _couleur ;
}

33
34
35
36
37

public function get longueur () : int


{
return _longueur ;
}

38
39

public function get immatriculation () : String

155

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


{

40
41

42

return _immatriculation ;

43

public function get carburant () : Essence // Nouvel


accesseur , renvoyant un objet de classe Essence
{
return _carburant ;
}

44
45
46
47
48

/* ************** Mutateurs ************** */


public function set couleur ( nouvelleCouleur : String ) :
void
{
_couleur = nouvelleCouleur ;
}

49
50
51
52
53
54

public function set longueur ( nouvelleLongueur : int ) : void


{
_longueur = ( nouvelleLongueur > 0 ) ?
nouvelleLongueur : -1 ;
}

55
56
57
58
59

public function set immatriculation (


n ou ve ll e Im ma t ri cu la t io n : String ) : void
{
_immatriculation = no uv e ll eI mm a tr ic ul a ti on ;
}

60
61
62
63
64
65

66
67
68

69

public function set carburant ( nouveauCarburant : Essence )


: void // Nouveau mutateur , affectant un objet de
classe Essence
{
_carburant = nouveauCarburant ;
}

70
71

Comme vous pouvez le constater, nous pouvons crire des attributs pointant sur des
objets. Nous pourrions mme mettre un attribut de type Voiture !
private var ancienneVoiture : Voiture ; // L ' ancienne voiture du
propri taire

Pour modifier le carburant de notre voiture, il faut procder ainsi :


1
2
3

var maVoiture = new Voiture ( " Peugeot " ) ;


maVoiture . carburant . type = " Diesel " ;
trace ( " Type de carburant : " + maVoiture . carburant . type ) ; //
Affiche : Type de carburant : Diesel

156

EXERCICE : JEU DE RLE


Vous remarquerez que nous procdons de la mme faon que pour toutes les proprits,
en utilisant le caractre point . , comme nous lavons vu dans le premier chapitre
cette partie. Il suffit donc de mettre un point chaque fois que nous voulons accder
la proprit dun objet :
Une premire fois lorsque nous voulons accder la proprit carburant de notre
objet maVoiture.
Une seconde fois lorsque nous voulons modifier le type du carburant de la voiture.
Pour rsumer la situation, je vous propose un petit schma UML des classes Voiture
et Essence que nous venons de crer (voir figure 10.1).

Figure 10.1 Les classes Voiture et Essence


En ralit, nous combinons depuis le dbut la classe Voiture et la classe
String : beaucoup de nos attributs sont du type String. Rappelez-vous :
les chanes de caractres sont aussi des objets !

Exercice : Jeu de rle


Prsentation de lexercice
Le combat final contre le grand Mchant approche ! Votre personnage, son pe lgendaire au poing, se dresse devant cet immense monstre arm jusquaux dents !
Le moment est venu de passer la pratique ! Je propose la ralisation dun petit programme ressemblant un jeu de rle afin de bien revoir les notions essentielles du
chapitre.
Lobjectif de cet exercice est de crer la (ou les) classe(s) ncessaires au bon fonctionnement du programme principal (que nous adapterons si besoin). Voici le droulement
de ce programme :
Nous crons un objet reprsentant votre personnage, puis nous larmons.
157

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


Nous crons de faon similaire lobjet reprsentant le Mchant.
Le Mchant attaque une fois votre personnage.
Votre personnage riposte et attaque une fois le Mchant.
Pour apporter un peu de piment ce programme, les personnages peuvent succomber
aux attaques, et leur arme peut infliger un coup critique (elle a des chances dinfliger
le double de dgts ladversaire).
Nous allons passer par trois tapes successives, que jai nommes solutions, pour voir
comment programmer correctement en Orient Objet pas pas : chaque tape, nous
amliorerons notre code.
Il ne sagit pas dun TP : nous allons programmer ensemble et progressivement.

Solution initiale
Cration de la classe
Commenons par crer notre premire classe : jai choisi de lappeler Personnage.
En effet, ce sera la classe des objets reprsentant nos deux personnages (vous et le
Mchant). Dans un nouveau fichier, appel Personnage.as, crivons la structure de
base de notre classe : le package, la classe et le constructeur :
1
2

package
{

public class Personnage


{

4
5
6

// Constructeur
public function Personnage ()
{

7
8
9
10
11
12
13

Les attributs
Ensuite, ajoutons les attributs de la classe. Pour cela, rflchissons aux donnes utiles
pour notre combat. Comme dans tous les jeux avec des combats (ou presque), donnons
un niveau de sant nos personnages, que nous initialiserons 100. Et pour les armer,
indiquons la puissance de lattaque quils vont porter leur adversaire ainsi que les
chances de coup critique :
1

// Sant du personnage

158

EXERCICE : JEU DE RLE


2

private var _sante : int ;

3
4
5

// D g ts de base
private var _degats : int ;

6
7
8

// Chances de faire une critique ( sur 100 )


private var _chanceCritique : int ;

Les accesseurs
Noublions pas daccompagner les attributs de leurs accesseurs :
1
2
3
4

public function get sante () : int


{
return _sante ;
}

5
6
7
8
9

public function set sante ( value : int ) : void


{
_sante = value ;
}

10
11
12
13
14

public function get degats () : int


{
return _degats ;
}

15
16
17
18
19

public function set degats ( value : int ) : void


{
_degats = value ;
}

20
21
22
23
24

public function get chanceCritique () : int


{
return _chanceCritique ;
}

25
26
27
28
29

public function set chanceCritique ( value : int ) : void


{
_chanceCritique = value ;
}

Le contructeur
Ensuite, initialisons nos attributs au sein du constructeur :
1
2
3

// Constructeur
public function Personnage ()
{

159

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


4
5
6
7

sante = 100 ;
degats = 0 ;
chanceCritique = 0 ;

La mthode
Enfin, ajoutons une mthode, afin que nos personnages puissent attaquer un autre
personnage :
1
2
3

public function attaquer ( cible : Personnage ) : void


{
var degatsAppliques : int = degats ;

// On jette un d 100 faces : si le r sultat est inf


rieur ou gal la chance de coup critique , l '
attaque fait un coup critique !
if ( Math . random () * 100 <= chanceCritique )
{
trace ( " Critique ! " ) ;
// On double les d g ts !
degatsAppliques *= 2 ;
}

6
7
8
9
10
11
12

// On applique les d g ts
cible . sante -= degatsAppliques ;

13
14
15
16
17
18
19
20
21
22
23
24

if ( cible . sante <= 0 )


{
trace ( " La cible est d c d e . " ) ;
}
else
{
trace ( " Il reste " + cible . sante + " PV la
cible . " ) ;
}

Comme vous pouvez le constater, nous passons en paramtre un objet de la classe


Personnage, afin de rendre le code logique et surtout trs lisible. Ainsi, pour quun
personnage attaque un second, il faudra procder ainsi :
1

personnageA . attaquer ( personnageB ) ; // Le personnageA attaque le


personnageB ! S ' en est fini de lui !

La classe complte
Si tout se passe bien, vous devriez normalement avoir une classe Personnage qui correspond la description de la figure 10.2.
160

EXERCICE : JEU DE RLE

Figure 10.2 La classe Personnage


Voici le code complet de notre classe Personnage, pour vrifier le vtre :
1
2

package
{

3
4
5

public class Personnage


{

6
7
8

// Sant du personnage
private var _sante : int ;

9
10
11

// D g ts de base
private var _degats : int ;

12
13
14

// Chances de faire une critique ( sur 100 )


private var _chanceCritique : int ;

15
16
17
18
19
20
21

public function Personnage ()


{
sante = 100 ;
degats = 0 ;
chanceCritique = 0 ;
}

22
23
24
25
26

public function get sante () : int


{
return _sante ;
}

27
28
29
30
31

public function set sante ( value : int ) : void


{
_sante = value ;
}

32
33
34
35

public function get degats () : int


{
return _degats ;

161

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


}

36
37

public function set degats ( value : int ) : void


{
_degats = value ;
}

38
39
40
41
42

public function get chanceCritique () : int


{
return _chanceCritique ;
}

43
44
45
46
47

public function set chanceCritique ( value : int ) : void


{
_chanceCritique = value ;
}

48
49
50
51
52

public function attaquer ( cible : Personnage ) : void


{
var degatsAppliques : int = degats ;

53
54
55
56

// On jette un d 100 faces : si le r sultat est


inf rieur ou gal la chance de coup critique ,
l ' attaque fait un coup critique !
if ( Math . random () * 100 <= chanceCritique )
{
trace ( " Critique ! " ) ;
// On double les d g ts !
degatsAppliques *= 2 ;
}

57

58
59
60
61
62
63
64

// On applique les d g ts
cible . sante -= degatsAppliques ;

65
66
67
68
69
70
71
72
73
74
75
76
77
78

162

if ( cible . sante <= 0 )


{
trace ( " La cible est d c d e . " ) ;
}
else
{
trace ( " Il reste " + cible . sante + " PV la
cible . " ) ;
}

EXERCICE : JEU DE RLE


Le programme principal
Votre classe Main vide (contenue dans le fichier Main.as) devrait ressembler cela :
1
2
3

package {
import flash . display . Sprite ;
import flash . events . Event ;

public class Main extends Sprite {

5
6

public function Main () : void {


if ( stage )
init () ;
else
addEventListener ( Event .
ADDED_TO_STAGE , init ) ;
}

7
8
9
10
11
12
13

private function init ( e : Event = null ) : void {


removeEventListener ( Event .
ADDED_TO_STAGE , init ) ;
// entry point

14
15
16
17
18
19
20

Rappel : il faut commencer programmer aprs le commentaire // entry


point (point dentre ) la ligne 17.
Commenons par dclarer la variable qui pointera vers le premier objet de classe
Personnage (celui qui vous reprsente) :
1

var moi : Personnage = new Personnage () ;

Ensuite, donnons-lui son pe lgendaire (elle fait 80 dgts de base et a 80 chances


sur 100 de faire un coup critique) :
1
2

moi . degats = 80 ;
moi . chanceCritique = 80 ;

Le code pour crer le Mchant est trs similaire :


1
2
3

var mechant : Personnage = new Personnage () ;


mechant . degats = 40 ;
mechant . chanceCritique = 10 ;

Enfin, simulons le combat pique qui a lieu entre nos deux personnages ! Si vous vous
souvenez de ma remarque sur la mthode attaquer() un peu plus haut, vous savez
comment procder :
163

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


trace ( " Le m chant m ' attaque ! " ) ;
mechant . attaquer ( moi ) ;

1
2
3
4
5

trace ( " Il va conna tre ma fureur ! A l ' attaque ! " ) ;


moi . attaquer ( mechant ) ;

Voici le code complet de notre classe Main :


1
2

package
{

3
4

import flash . display . Sprite ;


import flash . events . Event ;

5
6
7

public class Main extends Sprite


{

public function Main () : void


{
if ( stage )
init () ;
else
addEventListener ( Event .
ADDED_TO_STAGE , init ) ;
}

9
10
11
12
13
14
15
16

private function init ( e : Event = null ) : void


{
removeEventListener ( Event .
ADDED_TO_STAGE , init ) ;
// entry point

17
18
19
20
21

// Cr ation du personnage vous repr


sentant
var moi : Personnage = new Personnage () ;
moi . degats = 80 ;
moi . chanceCritique = 80 ;

22
23
24
25
26

// Cr ation du personnage M chant


var mechant : Personnage = new Personnage
() ;
mechant . degats = 40 ;
mechant . chanceCritique = 10 ;

27
28
29
30
31
32
33
34
35
36
37
38

164

// Simulation du combat
trace ( " Le m chant m ' attaque ! " ) ;
mechant . attaquer ( moi ) ;
trace ( " Il va conna tre ma fureur ! A l '
attaque ! " ) ;
moi . attaquer ( mechant ) ;

EXERCICE : JEU DE RLE


39

Rsultat
Nous pouvons maintenant compiler et tester le projet. Voici ce que donne la console :
Le m chant m attaque !
Critique !
Il reste 20 PV la cible .
Il va conna tre ma fureur ! A l attaque !
Critique !
La cible est d c d e .

Gagn !
Attendez malheureux ! Ne criez pas victoire trop vite ! En effet, notre classe pourrait
tre amliore. . . Vous ne voyez pas en quoi ? Et bien, pensez au chapitre prcdent :
Un objet dans un objet (dans un objet. . .) . Maintenant, rflchissez cette problmatique : comment pourrait-on mieux sparer les donnes et les proprits de ma
classe Personnage ? En crant de nouvelles classes, pardi !

Une nouvelle classe


En effet, il serait judicieux de reprsenter les armes que portent nos personnages par
des objets part entire : cela semble logique, et cela respecte les principes de la POO.
En outre, cela nous faciliterait normment la tche si nous devions grer un inventaire
par exemple : nous pourrions mettre autant dobjets que lon veut, et quiper nos
personnages avec, tout ceci de faon trs souple et naturelle !
La classe Arme
Lide est donc de transfrer toutes les proprits relatives aux armes dans une nouvelle
classe Arme, comme la figure 10.3.

Figure 10.3 Transfert des proprits dans la classe Arme


Il nous faudra donc crer une nouvelle classe (ici dans le fichier Arme.as) :
165

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


1
2

package
{

public class Arme


{

4
5
6

// D g ts de l ' arme
private var _degats : int ;

7
8
9

// Chances de faire un coup critique ( sur 100 )


private var _chanceCritique : int ;

10
11
12

public function Arme ()


{
degats = 0 ;
chanceCritique = 0 ;
}

13
14
15
16
17
18

public function get chanceCritique () : int


{
return _chanceCritique ;
}

19
20
21
22
23

public function set chanceCritique ( value : int ) : void


{
_chanceCritique = value ;
}

24
25
26
27
28

public function get degats () : int


{
return _degats ;
}

29
30
31
32
33
34
35
36
37
38
39

public function set degats ( value : int ) : void


{
_degats = value ;
}

La classe Personnage
Noublions pas dadapter la classe Personnage, comme nous lavons fait dans le chapitre
prcdent :
1
2

package
{

3
4

166

public class Personnage

EXERCICE : JEU DE RLE


5

6
7
8

// Sant du personnage
private var _sante : int ;

9
10
11

// Arme quip e
private var _armeEquipee : Arme ; // Nouvel attribut
pointant sur l ' arme quip e

12
13
14
15
16

public function Personnage ()


{
sante = 100 ;
}

17
18
19
20
21

public function get sante () : int


{
return _sante ;
}

22
23
24
25
26

public function set sante ( value : int ) : void


{
_sante = value ;
}

27
28
29
30
31

public function get armeEquipee () : Arme // Nouvel


accesseur
{
return _armeEquipee ;
}

32
33
34
35
36

public function set armeEquipee ( value : Arme ) : void //


Nouveau mutateur
{
_armeEquipee = value ;
}

37
38
39
40
41
42
43
44
45
46
47

public function attaquer ( cible : Personnage ) : void


{
// Au cas o aucun arme n ' est quip e ( l ' objet
armeEquipee est null )
if ( armeEquipee == null )
{
trace ( " Aucune arme quip e : l ' attaque choue . "
);
}
else
{
var degatsAppliques : int = armeEquipee . degats ;
// D sormais , on utilise les propri t s de l
' objet armeEquipee

167

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


48

if ( Math . random () * 100 <= armeEquipee .


chanceCritique ) // Ici aussi , on utilise les
propri t s de l ' objet armeEquipee
{
trace ( " Critique ! " ) ;
// On double les d g ts !
degatsAppliques *= 2 ;
}

49

50
51
52
53
54
55

// On applique les d g ts
cible . sante -= degatsAppliques ;

56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

if ( cible . sante <= 0 )


{
trace ( " La cible est d c d e . " ) ;
}
else
{
trace ( " Il reste " + cible . sante + " PV la
cible . " ) ;
}

Le programme principal
L aussi, il va falloir adapter un peu : au lieu daffecter directement les dgts et les
chances de coup critique aux personnages, nous crons dans un premier temps les armes
via des objets de classe Arme, pour ensuite les quiper aux personnages :
1
2
3

var epeeLegendaire : Arme = new Arme () ;


epeeLegendaire . degats = 80 ;
epeeLegendaire . chanceCritique = 50 ;

4
5
6
7

var hacheDeGuerre : Arme = new Arme () ;


hacheDeGuerre . degats = 40 ;
hacheDeGuerre . chanceCritique = 10 ;

8
9
10

var moi : Personnage = new Personnage () ;


moi . armeEquipee = epeeLegendaire ;

11
12
13

var mechant : Personnage = new Personnage () ;


mechant . armeEquipee = hacheDeGuerre ;

14
15
16

168

trace ( " Le m chant m ' attaque ! " ) ;


mechant . attaquer ( moi ) ;

EXERCICE : JEU DE RLE


17
18

trace ( " Il va conna tre ma fureur ! A l ' attaque ! " ) ;


moi . attaquer ( mechant ) ;

Vous avouerez que ce code est quand mme plus clair que le prcdent !
Rsultat
Et voici le rsultat la console lorsque lon teste le projet :
Le m chant m attaque !
Il reste 60 PV la cible .
Il va conna tre ma fureur ! A l attaque !
Critique !
La cible est d c d e .

Rien na vraiment chang ( part ma chance qui sest envole !) : ce nest


toutefois pas pour rien que nous avons modifi notre code. En effet, il est
primordial de programmer correctement pour que vos projets soient lisibles,
facilement modifiables et maintenables.
Malheureusement, notre code pose encore problme : il ne respecte pas bien le principe
dencapsulation. Si vous regardez bien la mthode attaquer(), nous utilisons des
proprits de la classe Arme et reproduisons son comportement ( savoir : les coups
critiques) dans la classe Personnage : en toute logique, si une arme devrait faire un
coup critique, nous devrions le dterminer dans la bonne classe, autrement dit la classe
Arme !

La bonne solution
La bonne faon de procder consiste donc appliquer les dgts qui vont tre fait dans
la classe Arme. Pour cela, crons dans cette classe une nouvelle mthode frapper() :
1
2
3

public function frapper ( cible : Personnage ) : void


{
var degatsAppliques : int = degats ;

4
5

6
7
8
9
10
11

// On jette un d 100 faces : si le r sultat est inf


rieur ou gal la chance de coup critique , l '
attaque fait un coup critique !
if ( Math . random () * 100 <= chanceCritique )
{
trace ( " Critique ! " ) ;
// On double les d g ts !
degatsAppliques *= 2 ;
}

12
13

// On applique les d g ts

169

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


cible . sante -= degatsAppliques ;

14
15

Il va donc falloir appeler cette nouvelle mthode dans la mthode attaquer() de la


classe Personnage :
1
2
3
4
5
6
7
8
9

public function attaquer ( cible : Personnage ) : void


{
if ( armeEquipee == null )
{
trace ( " Aucune arme quip e : l ' attaque choue . "
);
}
else
{
armeEquipee . frapper ( cible ) ; // Nous appelons la
nouvelle m thode ici

10
11
12
13
14
15
16
17
18

19
20

if ( cible . sante <= 0 )


{
trace ( " La cible est d c d e . " ) ;
}
else
{
trace ( " Il reste " + cible . sante + " PV
la cible . " ) ;
}

Les classes
Lun des intrts de lutilisation de la reprsentation UML est justement de faciliter cette tape de conception et dorganisation des diffrentes classes dun mme
programme. Cela permet de visualiser la structure dun projet en ne faisant ressortir
que les informations utiles et ainsi, programmer plus rapidement et de manire plus
propre.
Finalement, vos classes devraient ressembler la figure 10.4.
Voici le code complet de nos classes :
1
2

package
{

3
4
5

public class Personnage


{

6
7
8
9

170

// Sant du personnage
private var _sante : int ;

EXERCICE : JEU DE RLE

Figure 10.4 Les classes Personnage et Arme

10
11

// Amre quip e
private var _armeEquipee : Arme ;

12
13
14
15
16

public function Personnage ()


{
sante = 100 ;
}

17
18
19
20
21

public function get sante () : int


{
return _sante ;
}

22
23
24
25
26

public function set sante ( value : int ) : void


{
_sante = value ;
}

27
28
29
30
31

public function get armeEquipee () : Arme


{
return _armeEquipee ;
}

32
33
34
35
36

public function set armeEquipee ( value : Arme ) : void


{
_armeEquipee = value ;
}

37
38
39
40
41
42
43
44

public function attaquer ( cible : Personnage ) : void


{
if ( armeEquipee == null )
{
trace ( " Aucune arme quip e : l ' attaque choue . "
);
}
else

171

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


{

45
46

armeEquipee . frapper ( cible ) ;

47
48
49
50
51
52
53
54
55
56
57
58
59

1
2

if ( cible . sante <= 0 )


{
trace ( " La cible est d c d e . " ) ;
}
else
{
trace ( " Il reste " + cible . sante + " PV la
cible . " ) ;
}

package
{

3
4
5

public class Arme


{

6
7
8

// D g ts de l ' arme
private var _degats : int ;

9
10
11

// Chances de faire un coup critique ( sur 100 )


private var _chanceCritique : int ;

12
13
14
15
16
17

public function Arme ()


{
degats = 0 ;
chanceCritique = 0 ;
}

18
19
20
21
22

public function get chanceCritique () : int


{
return _chanceCritique ;
}

23
24
25
26
27

public function set chanceCritique ( value : int ) : void


{
_chanceCritique = value ;
}

28
29
30
31
32
33

172

public function get degats () : int


{
return _degats ;
}

EXERCICE : JEU DE RLE


public function set degats ( value : int ) : void
{
_degats = value ;
}

34
35
36
37
38

public function frapper ( cible : Personnage ) : void


{
var degatsAppliques : int = degats ;

39
40
41
42

// On jette un d 100 faces : si le r sultat est


inf rieur ou gal la chance de coup critique ,
l ' attaque fait un coup critique !
if ( Math . random () * 100 <= chanceCritique )
{
trace ( " Critique ! " ) ;
// On double les d g ts !
degatsAppliques *= 2 ;
}

43

44
45
46
47
48
49
50
51
52
53
54
55

// On applique les d g ts
cible . sante -= degatsAppliques ;

Le programme
Le programme principal ne change pas par rapport la solution prcdente :
1
2
3

var epeeLegendaire : Arme = new Arme () ;


epeeLegendaire . degats = 80 ;
epeeLegendaire . chanceCritique = 50 ;

4
5
6
7

var hacheDeGuerre : Arme = new Arme () ;


hacheDeGuerre . degats = 40 ;
hacheDeGuerre . chanceCritique = 10 ;

8
9
10

var moi : Personnage = new Personnage () ;


moi . armeEquipee = epeeLegendaire ;

11
12
13

var mechant : Personnage = new Personnage () ;


mechant . armeEquipee = hacheDeGuerre ;

14
15
16
17
18

trace ( " Le m chant m ' attaque ! " ) ;


mechant . attaquer ( moi ) ;
trace ( " Il va conna tre ma fureur ! A l ' attaque ! " ) ;
moi . attaquer ( mechant ) ;

173

CHAPITRE 10. LES CLASSES (2NDE PARTIE)


Rsultat
Enfin, voici le rsultat de lexcution de notre programme :
Le
Il
Il
Il

m chant m attaque !
reste 60 PV la cible .
va conna tre ma fureur ! A l attaque !
reste 20 PV la cible .

En rsum
Il est possible dutiliser des lments dits statiques qui sont directement lis la
classe et non ses instances.
Ces lments statiques sont dclars laide du mot-cl static et facilitent
lajout de fonctionnalits au programme.
Il est impossible dutiliser le mot-cl this dans les mthodes statiques.
Nous pouvons crer des constantes qui sont similaires aux variables, mais qui ne
peuvent pas tre modifies.
Pour dclarer une constante, nous devons utiliser le mot-cl const.
Il est possible de combiner les classes entre elles : les objets peuvent alors contenir
dautres objets.

174

Chapitre

11

Lhritage
Difficult :
Dans ce chapitre, nous allons parler dhritage ! Sachez quil sagit de lune des notions les
plus importantes de la Programmation Oriente Objet et qui en font tout son intrt !
Nous dtaillerons ce concept tout au long du chapitre, mais pour vous situer rapidement
ce dont il sagit, cela permet de crer une ou des nouvelles classes en se basant sur une
autre. Ainsi, nous pouvons crire des classes qui sont similaires en utilisant une autre classe
qui regroupe lensemble des proprits communes. Dans ce chapitre, la seule difficult que
vous aurez affronter sera la notion dhritage en elle-mme. Au niveau du code, il ny
aura pas normment de nouveauts, ce qui vous simplifiera la vie !

175

CHAPITRE 11. LHRITAGE

La notion dhritage
Nous avons dj brivement prsent le concept dans les parties prcdentes, cependant,
vu son importance, il nest pas superflu dy revenir ! Lhritage permet de crer une ou
des nouvelles classes en rutilisant le code dune classe dj existante. On parle alors
de classe de base ou superclasse ou encore classe-mre pour cette dernire, et
de sous-classes ou classes-filles pour les classes hrites de celle-ci. Lide est donc
ici dtendre une classe de base, notamment en lui ajoutant de nouvelles proprits.
Dailleurs, le mot-cl qui permet dtendre une classe est extends :
public class Hello extends Sprite {

1
2
3

Nous reviendrons sur la syntaxe Actionscript plus tard. Pour linstant, nous allons
principalement nous focaliser sur la notion dhritage.
Quand est-ce utile dutiliser lhritage ?

Cest en effet une question laquelle les dbutants ont souvent du mal rpondre. En
ralit, nous pouvons introduire une relation dhritage lorsque la condition suivante
est respecte : la sous-classe est un sous-ensemble de la superclasse.
Ce terme mathmatique barbare signifie que la sous-classe appartient lensemble
de la superclasse. Si ce nest pas encore bien clair, voici quelques exemples qui vous
aideront bien comprendre :

LActionscript appartient lensemble des langages de programmation.


Les fourmis appartiennent lensemble des insectes.
Les avions appartiennent lensemble des vhicules.
Les voitures appartiennent galement lensemble des vhicules.
Les 4L appartiennent lensemble des voitures.

Comme vous pouvez le constater, les relations prcdentes ne peuvent seffectuer que
dans un seul sens. Vous remarquerez galement, daprs les deux derniers exemples,
quil est possible davoir plusieurs niveaux dhritage.
En quoi est-ce diffrent dune instance de classe ?

Il est vrai quil serait possible, par exemple, de crer des instances Avion et Voiture
dune classe Vehicule. Nous pourrions de cette manire dfinir des valeurs distinctes
pour chacun des attributs afin de les diffrencier. En utilisant le concept dhritage,
nous pourrions crire deux sous-classes Avion et Voiture qui hriteraient de lensemble
des attributs et mthodes de la superclasse, et ce sans rcrire le code lintrieur de
celles-ci. Mais tout lintrt vient du fait que lutilisation de lhritage nous permet de
176

CONSTRUCTION DUN HRITAGE


dfinir de nouveaux attributs et de nouvelles mthodes pour nos sous-classes. Sachez
quil est galement possible de redfinir des mthodes de la superclasse, mais
nous en reparlerons quand nous introduirons le polymorphisme plus loin dans ce
chapitre !

Construction dun hritage


Dans la suite de ce chapitre, nous allons principalement nous intresser aux manipulations du ct des classes-filles. Cependant, nous aurons besoin dune superclasse
partir de laquelle nous pourrons travailler. Ainsi, je vous propose une classe Vehicule,
dont le code est donn ci-dessous :
1
2
3
4
5
6

package
{
public class Vehicule
{
protected var _marque : String ;
protected var _vitesse : int ;

public function Vehicule ( marque : String , vitesse : int )


{
_marque = marque ;
_vitesse = vitesse ;
}

8
9
10
11
12
13

public function get marque () : String


{
return _marque ;
}

14
15
16
17
18

public function get vitesse () : int


{
return _vitesse ;
}

19
20
21
22
23

public function set vitesse ( vitesse : int ) : void


{
_vitesse = vitesse ;
}

24
25
26
27
28

29
30
31

177

CHAPITRE 11. LHRITAGE

La porte protected
Nous avions rapidement mentionn cette porte sans en expliquer vraiment le fonctionnement. Maintenant vous savez comment fonctionne lhritage, nous allons pouvoir
utiliser cette nouvelle porte quest protected ! Cette porte a t introduite afin de
rendre les proprits visibles non seulement depuis la classe o elles sont dfinies comme
private, mais galement depuis lensemble de ses sous-classes. Voyez les attributs de
la classe Vehicule dfinie juste avant :
protected var _marque : String ;
protected var _vitesse : int ;

1
2

Ces attributs seront donc visibles depuis les ventuelles sous-classes que nous pourrons
dfinir.
Lorsque nous avions introduit le concept dencapsulation, nous avions dit
quil fallait spcifier une porte de type private tous vos attributs. Or,
comme nous lavons dit, les attributs de ce type ne sont accessibles que depuis
la classe o ils ont t dclars. Cest pourquoi, il est maintenant prfrable
dopter pour la porte protected chaque fois que lune de vos classes est
susceptible devenir une superclasse. En pratique, on utilise quasiment tout
le temps cette porte dans lhypothse dun hritage futur.
prsent, vous connaissez lensemble des portes que propose lActionscript, dont
voici un petit rcapitulatif :
public : proprit visible nimporte o.
private : proprit visible uniquement lintrieur de la classe qui la dfinie.
protected : proprit visible depuis la classe o elle est dfinie ainsi que depuis
lensemble de ses sous-classes.
internal : proprit visible depuis lensemble du package o elle est dfinie.

Construction des sous-classes


Lhritage
Comme nous lavons dit en dbut de chapitre, lhritage se fait en tendant une
classe laide du mot-cl extends comme ceci :
1
2
3
4

package
{
public class Voiture extends Vehicule
{

5
6
7

178

CONSTRUCTION DUN HRITAGE


Attention lordre dans lequel sont placs les diffrents lments. Nous
sommes ici en train de dclarer une nouvelle classe nomme Voiture qui
hrite de la classe Vehicule.
Par cette simple extension, la classe Voiture hrite donc de lensemble des proprits de
la classe Vehicule. Il est toutefois ncessaire de lui rajouter au moins un constructeur,
et, ventuellement, quelques proprits supplmentaires pour lui donner de lintrt.
Par exemple, nous pourrions introduire un attribut _traction pour dfinir si la voiture
est une traction ou non, ou encore un attribut _immatriculation pour identifier celleci :
1
2
3
4
5
6
7
8

package
{
public class Voiture extends Vehicule
{
protected var _traction : Boolean ;
protected var _immatriculation : String ;
}
}

Le constructeur
Comme toute classe, notre sous-classe Voiture doit possder un constructeur. Cependant, celle-ci hrite dune classe-mre qui possde son propre constructeur qui
est ncessaire linitialisation des attributs. Depuis une classe-fille, il est possible
dappeler le constructeur de sa superclasse par la fonction super() :
1
2
3
4
5

public function Voiture ()


{
super () ;
// Instructions suppl mentaires
}

Lappel du constructeur super() de la superclasse doit obligatoirement tre


la premire instruction du constructeur de votre sous-classe. Les nouvelles
instructions seront places la suite pour permettre linitialisation de vos
nouvelles variables.
Voici donc un exemple de constructeur pour notre classe Voiture :
1
2
3
4
5
6

public function Voiture ( marque : String , vitesse : int ,


immatriculation : String )
{
super ( marque , vitesse ) ;
_immatriculation = immatriculation ;
_traction = true ;
}

179

CHAPITRE 11. LHRITAGE


Vous remarquerez que la fonction super() est le constructeur de la superclasse. Il est donc normal de retrouver les diffrents paramtres du constructeur dfini plus haut.

Les mthodes
En plus de pouvoir dfinir de nouveaux attributs, il est possible de rajouter autant de
mthodes que nous souhaitons lintrieur dune sous-classe. tant donn nous utilisons encore le concept dencapsulation, nous commencerons par crer des accesseurs
ce nouvel attribut. Je vous propose de dcouvrir quelques-uns dentre eux :
1
2
3
4

public function set immatriculation ( no uv el l eI mm at r ic ul a ti on :


String ) : void
{
_immatriculation = no uv e ll eI mm a tr ic ul a ti on ;
}

5
6
7
8
9

public function get immatriculation () : String


{
return _immatriculation ;
}

Comme vous pouvez le voir, ces mthodes fonctionnent exactement de la mme manire que pour une classe quelconque. En revanche, ce qui peut tre intressant, cest
dutiliser les mthodes dfinies lintrieur de la classe mre. Ainsi, si les mthodes de
votre classe mre ont une porte public ou protected, celles-ci sont accessibles depuis
les classes filles. Nous avons ainsi un mot-cl super qui nous permet de faire rfrence
la superclasse et dutiliser ses proprits. Voici, par exemple, une mthode nomme
accelerer() qui permet daugmenter la vitesse du vhicule :
1
2
3
4
5

public function accelerer () : void


{
var nouvelleVitesse : int = super . vitesse + 15 ;
super . vitesse = nouvelleVitesse ;
}

Vous noterez que nous aurions pu utiliser directement lattribut _vitesse de


la classe Vehicule pour dfinir la variable nouvelleVitesse. En revanche,
nous sommes obligs dutiliser laccesseur vitesse() pour modifier la valeur
de lattribut. En effet, seules les proprits dfinies par le mot-cl function,
donc les mthodes, peuvent tre redfinies. Nous reviendrons l-dessus juste
aprs, lorsque nous parlerons du polymorphisme.

Le mot-cl super fait rfrence lobjet via la classe-mre, par opposition


au mot-cl this qui pointe sur lobjet en lui-mme.
180

CONSTRUCTION DUN HRITAGE


Nanmoins, le mot-cl super est facultatif dans la plupart des cas. Le code ci-dessous
est tout fait fonctionnel :
1
2
3
4
5

public function accelerer () : void


{
var nouvelleVitesse : int = vitesse + 15 ; // L ' accesseur de
la classe - m re sera automatiquement s lectionn
vitesse = nouvelleVitesse ;
}

Il peut mme tre simplifi (vu que vous avez compris le principe) :
1
2
3
4

public function accelerer () : void


{
vitesse += 15 ;
}

Rappel : les accesseurs simulent le fonctionnement des attributs. Il est donc


possible dutiliser ici tous les oprateurs mathmatiques : vitesse est considr comme un nombre.
Comme je nai pas tout rcrit, je vous propose tout de mme un schma UML
rsumant les proprits des deux classes Vehicule et Voiture ainsi que le lien qui les
unit la figure 11.1.

Figure 11.1 Hritage entre les classes Vehicule et Voiture

181

CHAPITRE 11. LHRITAGE

La substitution dune sous-classe une superclasse


Un autre avantage de lutilisation de lhritage est le fait de pouvoir substituer
une sous-classe une superclasse. Cest--dire quil est possible de manipuler une
classe-fille comme sil sagissait dune instance de la classe-mre.
Parce quun exemple vaut mille mots, prenons le code suivant :
1
2
3
4
5
6
7

8
9
10
11
12
13

var MesVehicules : Array = new Array () ;


MesVehicules . push ( new Vehicule ( " Airbus A380 " , 900 ) ) ;
MesVehicules . push ( new Vehicule ( " Bicyclette " , 25 ) ) ;
MesVehicules . push ( new Voiture ( " Renault 4L " , 100 , " 911 SDZ 15 " ) )
;
for ( var i : int = 0 ; i < MesVehicules . length ; i ++)
{
trace ( " Un v hicule de type " + MesVehicules [ i ]. marque + "
peut se d placer la vitesse de " + MesVehicules [ i ].
vitesse + " km / h . " ) ;
}
/* Affiche :
Un v hicule de type Airbus A380 peut se d placer la vitesse
de 900km / h .
Un v hicule de type Bicyclette peut se d placer la vitesse de
25km / h .
Un v hicule de type Renault 4L peut se d placer la vitesse de
100km / h .
*/

Il ny a rien de surprenant dans cet exemple, les accesseurs de la classe Vehicule sont
bien accessibles depuis la classe Voiture. En revanche, ce qui deviendrait intressant,
ce serait de crer une mthode presenter() qui permet de prsenter un objet de type
Vehicule, comme ci-dessous :
1
2
3
4
5
6
7

8
9
10
11
12
13
14

var MesVehicules : Array = new Array () ;


MesVehicules . push ( new Vehicule ( " Airbus A380 " , 900 ) ) ;
MesVehicules . push ( new Vehicule ( " Bicyclette " , 25 ) ) ;
MesVehicules . push ( new Voiture ( " Renault 4L " , 100 , " 911 SDZ 15 " ) )
;
function presenter ( unVehicule : Vehicule ) : void
{
trace ( " Un v hicule de type " + unVehicule . marque + " peut
se d placer la vitesse de " + unVehicule . vitesse + " km
/h.");
}
for ( var i : int = 0 ; i < MesVehicules . length ; i ++)
{
presenter ( MesVehicules [ i ]) ;
}
/* Affiche :
Un v hicule de type Airbus A380 peut se d placer la vitesse
de 900km / h .

182

LE POLYMORPHISME
15
16
17

Un v hicule de type Bicyclette peut se d placer la vitesse de


25km / h .
Un v hicule de type Renault 4L peut se d placer la vitesse de
100km / h .
*/

Comment se fait-il quil ny ait pas derreur pour lobjet de type Voiture ?

Comme nous lavons dit plus haut dans ce cours, nous pouvons substituer une sousclasse une superclasse. En dautres termes, il est possible dutiliser une classe-fille
comme sil sagissait de la classe-mre. Dailleurs, si vous vous rappelez bien nous
avions dit quune sous-classe tait un sous-ensemble de la superclasse, ce qui veut
dire quune Voiture est un Vehicule. Il nest donc pas surprenant de pouvoir utiliser
un objet de type Voiture en tant que Vehicule.
Encore une fois, attention au sens de lhritage ! Dans notre exemple, il nest
pas possible de substituer un Vehicule une Voiture ; seul le sens oppos
est exact !

Le polymorphisme
Nous allons maintenant parler du polymorphisme ! Nous avons l-encore un nom
barbare associ un concept qui nest pas si compliqu en ralit.
Prcdemment, nous avons appris tendre une superclasse en ajoutant de nouvelles
mthodes lintrieur dune sous-classe. Cependant, il est galement possible de redfinir (rcrire) une mthode. Ainsi, nous avons la possibilit dutiliser un nom de
mthode commun pour une mthode qui se comportera diffremment suivant le type
de lobjet.
Pour vous montrer cela, nous allons insrer une nouvelle mthode quon nommera
sePresenter() lintrieur de la classe Vehicule :
1
2
3
4

public function sePresenter () : void


{
trace ( " Un v hicule de type " + marque + " peut se d placer
la vitesse de " + vitesse + " km / h . " ) ;
}

Rappel : il est conseill dutiliser les accesseurs dans la classe elle-mme (sauf
dans le constructeur).
Si nous ne faisons rien, la classe Voiture hritera de cette nouvelle mthode et nous
183

CHAPITRE 11. LHRITAGE


pourrons lutiliser sans problme. Cependant, nous aimerions personnaliser le message,
notamment en rajoutant son numro dimmatriculation qui permet galement de lidentifier. Nous devrons donc rcrire la mthode sePresenter() pour la classe Voiture.
Heureusement, nous disposons dun mot-cl override, qui permet justement de redfinir une mthode. Voici comment lutiliser :
1
2
3
4
5

override public function sePresenter () : void


{
trace ( " Une voiture " + marque + " peut se d placer la
vitesse de " + vitesse + " km / h . " ) ;
trace ( " Son immatriculation est : " + immatriculation ) ;
}

Ainsi, nous pouvons utiliser la mthode sePresenter() sans nous soucier du type
dobjets que nous sommes en train de manipuler.
1
2
3
4
5
6
7
8
9
10
11
12
13
14

var MesVehicules : Array = new Array () ;


MesVehicules . push ( new Vehicule ( " Airbus A380 " , 900 ) ) ;
MesVehicules . push ( new Vehicule ( " Bicyclette " , 25 ) ) ;
MesVehicules . push ( new Voiture ( " Renault 4L " , 100 , " 911 SDZ 75 " ) )
;
for ( var i : int = 0 ; i < MesVehicules . length ; i ++)
{
MesVehicules [ i ]. sePresenter () ;
}
/* Affiche :
Un v hicule de type Airbus A380 peut se d placer la vitesse
de 900km / h .
Un v hicule de type Bicyclette peut se d placer la vitesse de
25km / h .
Une voiture Renault 4L peut se d placer la vitesse de 100km / h
.
Son immatriculation est : 911 SDZ 75
*/

Pour rsumer, le polymorphisme est une technique trs puissante, surtout


lorsquelle est associe la substitution dune sous-classe une superclasse.
Nous pouvons ainsi dfinir des mthodes par dfaut dans la classe-mre,
puis de les redfinir pour diffrentes classes-filles. Il est ensuite possible dutiliser ces diffrents objets de la mme faon comme sil sagissait de la mme
classe. Vous verrez dans la suite que cest un atout non ngligeable !

Les attributs de classe


Lorsque nous avions parl dencapsulation, nous avions introduit les droits daccs
pour les diffrentes proprits dune classe. Or, pour ceux qui lauraient galement
184

LES ATTRIBUTS DE CLASSE


remarqu, nous avons depuis le dpart toujours insr le mot-cl public devant la
dfinition de chacune de nos classes.
Il existe aussi des droits daccs pour les classes ?

En effet, tout comme les proprits, les classes possdent des droits daccs qui
permettent de dfinir comment nous pouvons accder la classe et mme la modifier.
En ralit, on parle dattributs de classes et dattributs de proprits de classes,
cependant, nous emploierons dans ce cours, le terme droits daccs pour viter la
confusion avec les variables internes aux classes appeles galement attributs.

Les diffrents droits daccs


En ce qui concerne la dfinition de classes, lActionscript propose quatre droits
daccs diffrents. Sans plus attendre, je vous propose de les dcouvrir :
public : les droits daccs publics permettent comme pour les proprits, de
rendre la classe visible et accessible partout dans le code. Il sagit des droits daccs
recommands dans la majorit des cas.
internal : identiquement aux proprits, les droits daccs internes restreignent laccessibilit de la classe au package o elle est dfinie uniquement. Ces
droits daccs ne sont pas trs utiliss, mais il sagit de la valeur par dfaut lors dune
dfinition de classe.
final : ces droits daccs sont directement lis la notion dhritage. Le terme
final fait ici rfrence au fait que la classe ne peut plus tre tendue par une
autre classe.
dynamic : ce mot-cl permet de dfinir une classe dynamique, cest--dire modifiable
depuis lextrieur de celle-ci, loppos des classes classiques dites scelles. Nous
reviendrons sur ce concept un peu particulier dans le prochain chapitre.
Pour rsumer tout ce qui concerne les droits daccs et lencapsulation, vous
devez vous rappeler quon doit principalement limiter laccs aux attributs en
utilisant prfrentiellement le mot-cl protected. Pour les mthodes et les
classes en gnral, vous privilgierez principalement un accs publique
laide du mot-cl public. Il existe nanmoins divers autres droits daccs
qui ne sont utiles que dans de rares occasions.

Exemple dutilisation
Vous laurez compris, ces droits daccs sutilisent galement devant la dclaration
de la classe en question. Voici par exemple la dfinition de la classe Vehicule que
nous avons ralise au dbut du chapitre :
185

CHAPITRE 11. LHRITAGE


1
2

public class Vehicule


{

3
4

Nous allons essayer ici de comprendre un peu mieux lutilit du mot-cl final, troitement li au concept dhritage ! Ce mot-cl permet de dfinir la classe laquelle il
est associ, comme tant la dernire classe qui finalise larborescence dhritage. Cela
signifie que cette classe peut trs bien hriter dune autre classe, mais en aucun cas
vous ne pourrez crer de classes-filles celle-ci. Je vous propose donc une petite manipulation afin de vrifier la vracit de ces propos. Redfinissez donc la classe Vehicule
de type final :
1
2
3
4
5
6

package
{
final class Vehicule
{
protected var _marque : String ;
protected var _vitesse : int ;

public function Vehicule ( marque : String , vitesse : int )


{
_marque = marque ;
_vitesse = vitesse ;
}

8
9
10
11
12
13

public function get marque () : String


{
return _marque ;
}

14
15
16
17
18

public function get vitesse () : int


{
return _vitesse ;
}

19
20
21
22
23

public function set vitesse ( vitesse : int ) : void


{
_vitesse = vitesse ;
}

24
25
26
27
28

29
30
31

Nous avons donc maintenant une classe Vehicule quil nous est interdit dtendre.
Voyons donc ce qui se passe lorsquon tente den crer une sous-classe :
1
2
3

package
{
public class Voiture extends Vehicule

186

LES ATTRIBUTS DE CLASSE


{

4
5
6
7

Si vous tentez donc de lancer votre programme, le compilateur refusera de compiler le


projet en vous prcisant lerreur suivante : Base class is final. , qui signifie que la
classe dont on essaie dhriter est de type final et que notre hritage est donc contraire
cette dfinition de classe.
Comme vous pouvez le constater, ce mot-cl final napporte aucune relle
fonctionnalit, mais il sagit plutt dune scurit. Nanmoins, lutilit de ce
type de droits daccs est assez restreinte et vous dfinirez majoritairement
des classes de type public.

En rsum
Lhritage permet de crer une ou des nouvelles classes en utilisant le code dune
classe dj existante.
Pour hriter dune classe, il faut utiliser le mot-cl extends.
La porte protected est spcifique lhritage.
Le constructeur de la superclasse peut tre appel par la fonction super().
Dans le cas dune relation par hritage, il est possible de substituer une sous-classe
une superclasse.
Le polymorphisme permet de redfinir une mthode de la superclasse par lintermdiaire du mot-cl override.
Les diffrents droits daccs lis la dfinition dune classe sont public, internal,
final et dynamic.

187

CHAPITRE 11. LHRITAGE

188

Chapitre

12

Notions avances de la POO


Difficult :
Nous allons maintenant dcouvrir des notions disons plus. . . avances de la POO.
Avant de dmarrer ce chapitre, laissez-moi vous prciser que les concepts abords ici sont
gnralement rservs aux projets complexes ou denvergure. Il est donc fort probable que
vous nutilisiez pas ces concepts dans vos premiers projets et mme que vous nen voyez
pas encore lutilit. Cest pourquoi, il nest pas essentiel pour la suite du cours dtre
totalement au clair avec ces notions. Lisez donc attentivement ce chapitre, mais nhsitez
pas y revenir plus tard pour effectuer une lecture plus approfondie.

189

CHAPITRE 12. NOTIONS AVANCES DE LA POO

Les classes dynamiques


Dfinition de la classe de base
Nous allons ici revenir sur la notion de classes dynamiques prsente dans le chapitre prcdent. Contrairement aux classes normales dites scelles , le principe des
classes dynamiques est de pouvoir rajouter de nouvelles proprits lors de lexcution du programme. Bien videmment, avant dajouter de nouvelles proprits, il
est dabord ncessaire de dfinir une classe de base, mais cette fois laide du type
dynamic.
Nous allons donc partir dune classe Personnage trs basique :
1
2

package
{

dynamic class Personnage


{

4
5
6

protected var _sante : int ;

7
8

public function Personnage ()


{
sante = 100 ;
}

9
10
11
12
13

public function get sante () : int


{
return _sante ;
}

14
15
16
17
18
19
20
21
22
23
24

public function set sante ( value : int ) : void


{
_sante = value ;
}

Nous en reparlerons un peu plus loin, mais notez toutefois quune classe
dynamique respecte le principe dencapsulation. Nous avons ainsi nos attributs qui sont restreints la classe ainsi qu dventuelles sous-classes.
Nous pouvons ainsi instancier autant de fois quon veut cette classe Personnage, comme
ci-dessous :
1
2

var guerrier : Personnage = new Personnage () ;


var magicien : Personnage = new Personnage () ;

Nous allons maintenant voir comment tendre les fonctionnalits de notre classe durant
190

LES CLASSES DYNAMIQUES


lexcution en ajoutant de nouvelles proprits celle-ci.

Dfinition de proprits hors de la classe


En pratique
Maintenant que notre classe Personnage est dfinie de type dynamic, nous allons pouvoir crer une instance de celle-ci, puis lui ajouter de nouvelles proprits. Comme
vous avez pu le deviner, la dfinition de nouvelles proprits se fait partir dune occurrence de la classe en question. Nous allons donc prendre lexemple dun magicien :
1

var magicien : Personnage = new Personnage () ;

Ce type de personnage pourrait donc tre dot de facults magiques. Nous allons donc
lui rajouter un nouvel attribut _mana qui dfinit la rserve de magie du personnage :
1

magicien . _mana = 50 ;

Nous avons ainsi cr ici un nouvel attribut nomm _mana. Cette nouvelle proprit sera
alors effective lexcution du code et sera lie uniquement loccurrence magicien
de la classe Personnage. Cest pourquoi, un nouvel objet guerrier de cette classe, ne
disposerait pas de cet attribut.
Lutilisation de classes dynamiques ne se limite pas simplement la dfinition de nouveaux attributs, mais stend galement la dfinition de nouvelles mthodes. Dfinissons par exemple une nouvelle mthode lancerSort() spcifique linstance magicien
de la classe Personnage :
1
2
3
4
5

magicien . lancerSort = function ( cible : Personnage ) : void


{
cible . sante -= 25 ;
_mana -= 20 ;
};

Nous pouvons ainsi appeler cette mthode comme nimporte quelle autre de la classe
de base :
1

magicien . lancerSort ( guerrier ) ;

Comme vous pouvez le constater, les expressions de fonction sont particulirement utiles pour la dfinition de mthodes de classes dynamiques.

Remarques importantes
Vous aurez certainement remarqu labsence de droits daccs lis aux nouvelles
proprits. En effet, il nest pas ncessaire de les spcifier, tant donn que ces proprits
191

CHAPITRE 12. NOTIONS AVANCES DE LA POO


sont lies linstance de la classe et non la classe elle-mme. Ainsi, celles-ci ne sont
accessibles qu partir de loccurrence o elles ont t dfinies.
Pour revenir sur la notion dencapsulation, les portes private et protected limitent laccs des proprits auxquelles elles sont associes la classe uniquement, ou
ventuellement aux classes filles. Ainsi dans le cas des classes dynamiques, la dfinition de nouvelles proprits se fait lextrieur de la classe de base. Cest pourquoi
nous navons pas accs aux proprits prives dans la dfinition de ces nouvelles
proprits lors de lexcution du code.
Pourquoi passer par des classes dynamiques alors que lhritage permet
dj de faire tout cela ?
Il est vrai que dans la quasi totalit des cas, vous naurez pas besoin de passer par
la dfinition de classes dynamiques. Dailleurs, ces dernires ne permettent pas de
sparer la dfinition dune classe de son utilisation par la cration dinstances. Cest
la raison pour laquelle, il est toujours prfrable de passer par la conception de classes
non dynamiques. Cependant, ces classes dynamiques peuvent trouver leur utilit
lorsque des proprits dpendent de certaines donnes dont on ne dispose pas la
compilation. Quoi quil en soit, si vous ne savez pas quelle solution utiliser, prfrez
lhritage aux classes dynamiques chaque fois que cela est possible !

Les interfaces
Problme
Introduction
Pour introduire les interfaces, nous allons nous servir dun exemple. Nous allons reprendre lide de crer des personnages pour un jeu quelconque. Pour cela, nous allons
garder notre classe de base nomme Personnage. Cependant, nous voulons dans notre
jeu, non pas avoir de simples instances de la classe Personnage, mais plutt des lutins, des elfes et des ogres qui hritent de cette classe de base. Ceux-ci possdent alors
des aptitudes diffrentes que lon pourrait classer dans deux catgories : Magicien et
Guerrier !
Voici donc une prsentation des diffrentes races :
Lutin : ces petits bonhommes aux pouvoirs sensationnels se servent exclusivement
de la magie et possdent donc uniquement les aptitudes de la catgorie Magicien.
Elfes : ces tres baigns dans la magie, ont galement un certain talent dans la
conception et lutilisation darmes ; ils sont donc la fois Magicien et Guerrier.
Ogres : ces brutes tout droit sorties des grottes nont aucun sens de la magie, et
possdent donc seulement les aptitudes de la catgorie Guerrier.
Nous allons donc voir ici les problmes auxquels nous allons nous heurter pour conce192

LES INTERFACES
voir le code de ces diffrentes classes, toutefois, nous verrons quil est possible de les
contourner.

Les limites de lhritage


Lobjectif ici est donc de concevoir trois classes pour notre jeu : Lutin, Elfe et Ogre.
Pour raliser cela, vous pourriez avoir lide dutiliser de concept dhritage. Nous
pourrions donc organiser nos diffrentes classes suivant un double hritage. Ainsi, nous
aurions donc une classe de base Personnage, dont hriteraient les deux classes suivantes : Magicien et Guerrier. Puis nos trois classes Lutin, Elfe et Ogre seraient des
classes filles ces deux dernires. Ceci ne poserait aucun problme en ce qui concerne
les classes Lutin et Ogre. Seulement voil, la classe Elfe devrait alors hriter en mme
temps des deux classes Magicien et Guerrier, or ceci est interdit.
En effet, si dans certains langages tels que le C++, les hritages multiples
sont autoriss, cette pratique est interdite en Actionscript. Ainsi, une classe
ne peut hriter que dune unique superclasse !
Cependant, il existe un concept en Actionscript qui permet de contourner ce problme : les interfaces !

Utilisation des interfaces


Le principe
Une interface nest pas vraiment une classe, il sagit plutt dune collection de dclarations de mthodes. Contrairement aux classes, vous ne trouverez ni attribut ni
constructeur au sein dune interface. De plus, le terme dclaration de la dfinition prcdente nous indique que nous nous contenterons de dcrire les mthodes.
Ainsi, nous dfinirons la manire dont doit tre construite chacune des mthodes sans
en prciser le fonctionnement interne. Voici comment procder pour une dclaration
dune mthode :
1

function uneMethode ( param : String ) : void ;

De la mme faon que pour une dclaration de variable, vous remarquerez quon
omet le contenu de la mthode normalement plac entre accolades. Toutefois, nous
retrouvons dans cette dclaration lensemble des informations utiles de la mthode,
savoir : le nom de la fonction, les diffrents paramtres, le type de valeur renvoy.
Une interface sera donc un ensemble de dclarations de mthodes, regroupes
autour dune utilit commune. Nous pourrons ainsi crer de nouvelles classes qui utilisent ces interfaces et nous redfinirons lensemble des mthodes. On appelle cela
limplmentation !
193

CHAPITRE 12. NOTIONS AVANCES DE LA POO

Quel est lintrt des interfaces si il faut redfinir lensemble des mthodes ?

tant donn que le contenu des mthodes nest pas dfini lintrieur des interfaces, il
va bien videmment falloir le faire dans les classes qui les implmentent. Cest pourquoi,
il est fort probable que vous vous demandiez quoi pourrait bien vous servir ce concept.
Je vais donc essayer de vous lexpliquer en quelques mots.
Lorsque nous avions vu la notion dencapsulation, je vous avais prcis le fait que nous
devions masquer le fonctionnement interne dune classe lutilisateur de celle-ci. Ainsi,
lutilisation de la classe devenait plus aise car nous navions plus qu manipuler des
mthodes explicites qui se chargeaient du travail laborieux. Une interface va donc nous
servir dcrire linterface dune pseudo-classe, cest--dire, prsenter celle-ci telle
quelle est vue de lextrieur. Nous obtiendrons donc une sorte de mode demploi
qui explique comment cette pseudo-classe doit tre manipule.
Nous conviendrons que le concept dinterfaces na dutilit que dans de gros
projets. Cela permet de dfinir les normes respecter, et ainsi, de garantir
la compatibilit des classes qui les implmenteront. Ces dernires pourront
alors tre utilises de la mme manire malgr les diffrences de contenu
lintrieur de chacune des mthodes. Cela vient donc complter la notion de
polymorphisme et lide de pouvoir utiliser des objets diffrents comme sil
sagissait du mme.
Ce morceau consquent de thorie va maintenant laisser place la pratique qui, je suis
daccord avec vous, permet en gnral de mieux cerner la chose.
Les bases de la conception
prsent, nous allons reprendre notre problme de personnages concernant des lutins,
des elfes et des ogres ! Parce quun schma est toujours plus explicite quun long discours, je vous laisse dcouvrir la figure 12.1 lensemble de ces classes et interfaces que
nous allons raliser.
En premier lieu, nous allons crer une classe Personnage en tant que superclasse pour
la suite. Celle-ci na rien dextraordinaire puisquelle est identique ce que nous avons
ralise prcdemment. Je vous laisse nanmoins le temps de la reprendre avant de
passer la suite :
1
2

package
{

3
4
5

public class Personnage


{

6
7
8

194

protected var _sante : int ;

LES INTERFACES

Figure 12.1 Les classes et les interfaces que nous allons raliser
public function Personnage ()
{
sante = 100 ;
}

9
10
11
12
13

public function get sante () : int


{
return _sante ;
}

14
15
16
17
18
19
20
21
22
23
24

public function set sante ( value : int ) : void


{
_sante = value ;
}

Les interfaces
Nous voil enfin au cur du problme, nous allons devoir crer les deux interfaces
Magicien et Guerrier ! tant donn quil sagit dun exemple, nous nallons pas raliser des dizaines de dclarations de mthodes. Je vous propose ainsi de lier deux mthodes lancerSort et guerison notre interface Magicien. Voici donc notre premire
interface :
1
2

package
{

195

CHAPITRE 12. NOTIONS AVANCES DE LA POO


3
4
5
6
7
8

public interface Magicien


{
function lancerSort ( cible : Personnage ) : void ;
function guerison () : void ;
}

Dclarons galement deux mthodes pour notre seconde interface, nommes assenerCoup
et seSoigner. En voici le rsultat :
1
2
3
4
5
6
7
8

package
{
public interface Guerrier
{
function assenerCoup ( cible : Personnage ) : void ;
function seSoigner () : void ;
}
}

prsent, nous disposons des bases ncessaires la cration de nos classes relles ,
cest--dire celles que nous utiliserons dans la pratique. Nous pourrons ainsi combiner
les notions dhritage et dimplmentation pour raliser celles-ci.
Notez que dans cet exemple nous utilisons simultanment les notions
dhritage et dimplmentation. Toutefois, en pratique, il nest pas dobligatoire de procder un hritage pour utiliser les interfaces. Il est donc
tout fait possible dutiliser uniquement la notion dimplmentation.

Limplmentation
Tout comme nous avions le mot-cl extends pour lhritage, nous utiliserons implements
pour implmenter une interface dans une classe. tant donn que le contenu de
chacune des mthodes nest pas dfini dans les interfaces, nous allons devoir le faire ici.
Je vous propose donc de dcouvrir les trois classes finales qui implmenteront donc
les interfaces dfinies juste avant. Commenons par la classe Lutin :
1
2

package
{

3
4
5

public class Lutin extends Personnage implements Magicien


{

6
7
8
9
10

public function Lutin ()


{
super () ;
}

11
12

196

public function lancerSort ( cible : Personnage ) : void

LES INTERFACES
{

13
14
15
16
17
18
19
20
21
22
23

cible . sante -= 10 ;
trace ( " Sort : Boule de feu " ) ;

}
public function guerison () : void
{
this . sante += 10 ;
trace ( " Sort : Gu rison " ) ;
}

La classe Elfe est sans doute la plus complexe, puisquelle implmente les deux interfaces la fois :
1
2

package
{

public class Elfe extends Personnage implements Magicien ,


Guerrier
{

4
5
6

public function Elfe ()


{
super () ;
}

7
8
9
10
11

public function lancerSort ( cible : Personnage ) : void


{
cible . sante -= 5 ;
trace ( " Sort : Tornade " ) ;
}

12
13
14
15
16
17

public function guerison () : void


{
this . sante += 5 ;
trace ( " Sort : Gu rison " ) ;
}

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

public function assenerCoup ( cible : Personnage ) : void


{
cible . sante -= 5 ;
trace ( " Coup : p e " ) ;
}
public function seSoigner () : void
{
this . sante += 5 ;
trace ( " Soin : Herbe m dicinale " ) ;
}

197

CHAPITRE 12. NOTIONS AVANCES DE LA POO


Lorsque lon ralise un hritage et une ou plusieurs implmentations en
mme temps, lhritage doit toujours tre effectu en premier. Cest pourquoi le mot-cl extends sera toujours plac avant implements dans la
dclaration de la classe. Vous remarquerez galement que les diffrentes
interfaces implmentes ici sont spares par une virgule.
Enfin, la classe Ogre ne devrait maintenant plus poser de problmes :
1
2

package
{

public class Ogre extends Personnage implements Guerrier


{

4
5
6

public function Ogre ()


{
super () ;
}

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public function assenerCoup ( cible : Personnage ) : void


{
cible . sante -= 10 ;
trace ( " Coup : Hache de guerre " ) ;
}
public function seSoigner () : void
{
this . sante += 10 ;
trace ( " Soin : Bandage " ) ;
}

Sachant que les mthodes sont dclares uniquement lintrieur des interfaces, celles-ci doivent obligatoirement tre redfinies dans les classes qui les
implmentent. Veillez donc bien toutes les redfinir sous peine de messages
derreurs lors de la compilation de votre projet.

Plus loin avec les interfaces


Nous avons vu le principe des interfaces, mais je vais ici vous prsenter une utilisation
qui en fait tout leur intrt !
Imaginez maintenant que vous vouliez crer un jeu beaucoup plus complet, qui risque
dvoluer dans une version ultrieure. Vous voulez cette fois multiplier le nombre
des races des personnages avec, par exemple, les classes Humain, Nain, Lutin, Elfe,
Centaure, Minotaure, Ogre, Gnome et Troll. Cette fois, vous navez plus de simples
magiciens ou de purs guerriers, mais chacune des races dispose de lensemble des facul198

LES INTERFACES
ts. Ainsi, chaque espce est capable de lancer des sorts ou de se battre avec nimporte
quel type darmes. En revanche, chacun possde une liste limite de sorts au dpart,
mais peut la dvelopper au fil du jeu. Tous ces sorts sont utiliss de la manire, seuls
leurs effets et leurs dgts sont diffrents de lun lautre.
Une architecture judicieuse de vos classes serait alors de crer une interface Sort, qui
serait implmente par chacun de vos divers sorts. Lintrt serait alors de pouvoir crer
une liste de sort de type Vector.<Sort> comme attribut de votre classe Personnage.
Chaque sort serait alors utilis de la mme faon quel que soit celui-ci.
Voici un schma la figure 12.2 qui rsume la situation et qui devrait plus facilement
vous sduire.

Figure 12.2 Crez une interface Sort


Vous pouvez ainsi crer un nouvel Ogre nomm budoc. Hritant de la classe Personnage,
votre personnage va pouvoir apprendre de nouveaux sorts au fil du jeu. Voici, par
exemple, notre ami budoc qui apprend les sorts Guerison et Eclair :
1
2
3

var budoc : Ogre = new Ogre () ;


budoc . ajouterSort ( new Guerison () ) ;
budoc . ajouterSort ( new Eclair () ) ;

Je vous ai prsent le concept avec les interfaces, mais sachez que cette
pratique peut galement tre utilise avec la relation dhritage, mme si
cela est moins courant. Au risque de me rpter encore une fois, une des
grandes forces de la POO est justement de pouvoir se servir dobjets diffrents
de la mme manire grce ces techniques dhritage, de polymorphisme
et dimplmentation.
Nous sommes maintenant arrivs au bout de ces explications sur les interfaces. Jespre
vous avoir convaincus de leur utilit et jose croire que vous les utiliserez de la bonne
faon.
199

CHAPITRE 12. NOTIONS AVANCES DE LA POO

Les classes abstraites


Le concept
Une classe abstraite est une classe que lon ne peut pas instancier, cest--dire que lon
ne peut pas directement crer dobjet de cette classe avec le mot-cl new. Lorsque lon
choisit de rendre une classe abstraite, on restreint ainsi ses possibilits dutilisation.
Par contre, les sous-classes de cette classe abstraite ne sont pas forcment abstraites,
moins de lindiquer chaque fois !
Pour comprendre pourquoi cela pourrait amliorer la cohrence de votre code, reprenons lexemple des vhicules sur lautoroute (voir figure 12.3).

Figure 12.3 Diagramme UML des classes Vehicule et Voiture


Il tait alors possible de crer directement un vhicule :
1

var vehicule : Vehicule = new Vehicule ( ' Renault ' , 0 ) ;

Maintenant, si notre application ne soccupe que de voitures, il serait inutile dutiliser


directement la classe Vehicule alors que nous disposons de sa sous-classe Voiture. Si
nous laissions dautres programmeurs la possibilit de crer des vhicules au lieu de
voitures, ils auraient une chance sur deux de se tromper et doublier dutiliser la classe
Voiture. Pour cela, il faut rendre la classe Vehicule abstraite (voir figure 12.4) !
Par opposition une classe abstraite, une classe qui peut tre instancie est
une classe concrte.

200

LES CLASSES ABSTRAITES

Figure 12.4 Diagramme UML de la classe abstraite Vehicule et de sa sous-classe


Rappel : une sous-classe dune classe abstraite nest pas forcment abstraite ;
il faut le spcifier chaque fois. Dans notre exemple, on peut donc instancier
la classe Voiture, mais pas la classe Vehicule.
Ainsi, nous sommes dsormais obligs dutiliser la classe Voiture pour crer un objet
voiture : notre code est cohrent !
1

var vehicule : Vehicule = new Vehicule ( ' Renault ' , 0 ) ; // Interdit


!

2
3

var voiture : Voiture = new Voiture ( ' Renault ' , 0 , ' BX6F57 ') ; //
Autoris

Application lActionScript 3
Malheureusement, ce principe de classes abstraites ne dispose pas de mcanismes
officiels au sein du langage, il faut donc le programmer soi-mme. Cela ne signifie
pas quil ne faut pas lutiliser, et plusieurs classes fournies par Flash sont des classes
abstraites ! Mais rassurez-vous, cest en ralit trs simple.
Le principe est le suivant : nous allons faire une vrification dans le constructeur de la
classe-mre abstraite, laide dun paramtre et du mot-cl this. En effet, seule une
sous-classe de cette classe peut passer en paramtre du constructeur le mot-cl this !
Voici le code de la classe abstraite :
1
2

package
{

201

CHAPITRE 12. NOTIONS AVANCES DE LA POO


import flash . errors . Ill egalO perati onErr or ;
/* *
* Une classe abstraite
*/
public class MaClasseAbstraite
{

3
4
5
6
7
8
9

public function MaClasseAbstraite ( moi : MaClasseAbstraite


)
{
// Nous v rifions si le param tre de v rification
correspond l ' objet
if ( moi != this )
{
// Sinon , quelqu ' un tente d ' instancier cette
classe , nous envoyons donc une erreur
// car seule une sous - classe peut passer le mot
- cl ' this ' en param tre au constructeur
throw new Ill egalOp erati onErro r ( "
MaClasseAbstraite est une classe abstraite
et ne peut donc pas tre directement
instanci e . " ) ;
}
}

10
11
12
13
14
15
16
17

18
19
20

21
22
23

Le
mot-cl
throw
permet
denvoyer
une
erreur ;
ici
IllegalOperationError, qui indique quil sagit dune opration illgale. Pour linstant, il nest pas ncessaire que vous vous attardiez sur cette
instruction, nous reviendrons sur la gestion des erreurs dans un chapitre
ddi plus loin dans ce cours.
Nous demandons dans le constructeur un paramtre moi obligatoire, du mme type
que la classe elle-mme : ainsi, seuls les objets des sous-classes de MaClasseAbstraite
seront accepts. Ensuite, nous vrifions que ce paramtre pointe vers le mme objet,
cest--dire que cet objet qui vient dtre cr est bien une instance dune sous-classe.
Rappel : le mot-cl this est une rfrence qui pointe sur lunique objet qui
fait actuellement travailler le corps de la classe. Mme en remontant entre les
sous-classes, cette rfrence pointe toujours sur le mme objet (qui appartient
toutes ces classes en mme temps, comme nous lavons vu dans le chapitre
sur lhritage).
Voici le code de la sous-classe concrte :
202

LES TYPES INCONNUS


1
2
3
4
5
6
7

package
{
/* *
* Une sous - classe concr te .
*/
public class MaClasseConcrete extends MaClasseAbstraite
{

public function MaClasseConcrete ()


{
// On envoie la r f rence de l ' objet qui vient d '
tre cr la classe m re pour passer la v
rification
super ( this ) ;

9
10
11

12
13

14
15

16
17
18

Dans le constructeur de la classe-fille concrte, nous appelons le constructeur de la


classe-mre abstraite laide du mot-cl super pour passer la vrification.
Voici ce que cela donne lorsque nous voulons crer un objet de chaque classe :
1

var objet1 : MaClasseAbstraite = new MaClasseAbstraite () ; // Une


erreur va tre envoy e

2
3

var objet2 : MaClasseConcrete = new MaClasseConcrete () ; // Tout


va bien .

Les types inconnus


Dterminer si un objet est une occurrence dune certaine classe
Le mot-cl is permet de renvoyer un boolen pour savoir si un objet quelconque est
une occurrence dune certaine classe ou dune sous-classe.
1
2
3
4

var
var
var
var

entier : int = - 23 ;
entierPositif : uint = 42 ;
nombre : Number = 3 . 14 ;
chaine : String = ' Hello world ! ';

5
6
7
8
9
10

// entier est du type int


trace ( entier is int ) ; // Affiche : true
// entier n ' est pas du type uint
trace ( entier is uint ) ; // Affiche : false
// La classe int est une sous - classe de Number

203

CHAPITRE 12. NOTIONS AVANCES DE LA POO


trace ( entier is Number ) ; // Affiche : true

11
12
13
14
15

trace ( entierPositif is uint ) ; // Affiche : true


// La classe uint est aussi une sous - classe de Number
trace ( entierPositif is Number ) ; // Affiche : true

16

trace ( nombre is int ) ; // Affiche : false


trace ( nombre is Number ) ; // Affiche : true

17
18
19

trace ( chaine is String ) ; // Affiche : true


trace ( chaine is int ) ; // Affiche : false

20
21

Cela fonctionne galement avec les fonctions ! Car il faut toujours se rappeler quen
ActionScript 3, tout est objet : les variables, les fonctions, les objets de la classe
Voiture, leurs attributs, leurs mthodes. . . Les fonctions sont de classe Function,
comme on peut le confirmer dans cet exemple :
1
2
3
4

function maFonction () : void


{
trace ( ' Je suis dans une fonction ! ') ;
}

5
6
7
8
9

// Toute fonction est une instance de la classe Function !


trace ( maFonction is Function ) ; // Affiche : true
// Mais chaine n ' est pas une fonction
trace ( chaine is Function ) ; // Affiche : false

10
11
12
13
14

// Tout objet est une instance de la classe Object !


trace ( entier is Object ) ; // Affiche : true
trace ( chaine is Object ) ; // Affiche : true
trace ( maFonction is Object ) ; // Affiche : true

Des paramtres de type inconnu


Dans les fonctions, il est possible de demander des paramtres de type inconnu,
cest--dire dont nous ne pouvons pas connatre la classe lavance ! Pour cela, nous
pouvons utiliser la classe Object qui est la classe-mre de tous les objets en ActionScript 3.
1
2
3
4
5
6
7

function quiSuisJe ( quelqueChose : Object ) : void


{
if ( quelqueChose is Function )
{
trace ( ' Je suis une fonction ! ') ;
}
}

Il existe un raccourci pour spcifier que le type dun paramtre est inconnu : le caractre
* ! Reprenons lexemple prcdent en utilisant ce raccourci :
204

LES TYPES INCONNUS


1
2
3
4
5
6
7

function quiSuisJe ( quelqueChose :*) : void


{
if ( quelqueChose is Function )
{
trace ( ' Je suis une fonction ! ') ;
}
}

Essayons cette fonction avec une autre fonction :


1
2
3
4

function maFonction () : void


{
trace ( ' Je suis dans une fonction ! ') ;
}

5
6
7
8
9
10
11
12

function quiSuisJe ( quelqueChose :*) : void


{
if ( quelqueChose is Function )
{
trace ( ' Je suis une fonction ! ') ;
}
}

13
14
15

// Nous passons l ' objet maFonction de classe Function en param


tre !
quiSuisJe ( maFonction ) ; // Affiche : Je suis une fonction !

Lobjet maFonction est une occurrence de la classe Function (tant donn que cest
une fonction), donc le test est positif et le message Je suis une fonction ! est affich.
Nous pourrions ensuite appeler la fonction laide de la mthode call() de la classe
Function :
1
2
3
4

function maFonction () : void


{
trace ( ' Je suis dans une fonction ! ') ;
}

5
6
7
8
9
10
11
12
13
14

function quiSuisJe ( quelqueChose :*) : void


{
if ( quelqueChose is Function )
{
trace ( ' Je suis une fonction ! ') ;
// On appelle la fonction !
quelqueChose . call () ;
}
}

15
16
17

// Nous passons l ' objet maFonction de classe Function en param


tre
quiSuisJe ( maFonction ) ; // Affiche : Je suis une fonction ! Je
suis dans une fonction !

205

CHAPITRE 12. NOTIONS AVANCES DE LA POO

Accder dynamiquement aux proprits


En ActionScript 3, il est possible daccder une proprit dun objet en connaissant son nom uniquement lexcution. Par exemple, vous obtenez le nom dun attribut
dans une variable de type String, et vous voulez ensuite modifier sa valeur pour faire
une animation ou autre chose.
Prenons une classe Voiture disposant dun attribut vitesse et dune mthode accelerer :
1
2
3
4

package
{
public class Voiture
{

private var _vitesse : int ;

6
7

public function Voiture ()


{
vitesse = 10 ;
}

8
9
10
11
12

public function get vitesse () : int


{
return _vitesse ;
}

13
14
15
16
17

public function set vitesse ( value : int ) : void


{
_vitesse = value ;
}

18
19
20
21
22
23
24
25
26

27

public function accelerer ( combien : int = 1 ) : void


{
vitesse += combien ;
}

28
29

La syntaxe respecter pour accder lattribut de nom vitesse est la suivante :


1
2

var objet : Voiture = new Voiture () ;


var nomDeLaPropriete : String = ' vitesse ';

trace ( objet [ nomDeLaPropriete ]) ; // Affiche la vitesse de la


voiture : 10

Ou plus simplement :
1
2

var objet : Voiture = new Voiture () ;


trace ( objet [ ' vitesse ' ]) ; // Affiche : 10

206

ACCDER DYNAMIQUEMENT AUX PROPRITS

Rappel : une proprit constitue dun ou plusieurs accesseurs est considre comme un attribut.
En guise dexemple, supposons que nous voulons disposer dune fonction qui augmente
de 10 nimporte quel attribut numrique dun objet quelconque, sans avoir besoin de
plus de prcisions concernant sa classe.
1
2
3
4
5
6
7
8
9
10
11
12

function augmenter ( objet : Object , propriete : String ) : void


{
// On v rifie le type de la propri t : il faut que ce soit
un nombre
if ( objet [ propriete ] is int || objet [ propriete ] is uint ||
objet [ propriete ] is Number )
{
objet [ propriete ] += 10 ;
}
else
{
trace ( " Attention : La propri t " + propriete + " sur l
' objet " + objet + " n ' est pas un nombre . " ) ;
}
}

crivons un petit programme principal qui cre un objet Voiture et qui utilise cette
fonction pour augmenter sa vitesse :
1
2
3
4

package
{
import flash . display . Sprite ;
import flash . events . Event ;

5
6
7
8
9
10

/* *
* Programme principal
*/
public class Main extends Sprite
{

11
12
13
14
15
16
17
18

public function Main () : void


{
if ( stage )
init () ;
else
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

19
20
21
22
23

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point

24

207

CHAPITRE 12. NOTIONS AVANCES DE LA POO


// On cr une voiture
var voiture : Voiture = new Voiture () ;
// On initialise sa vitesse 10
voiture . vitesse = 10 ;
// On augmente sa vitesse de 10
augmenter ( voiture , ' vitesse ') ;
trace ( voiture . vitesse ) ; // Affiche : 20

25
26
27
28
29
30
31
32

33
34

public function augmenter ( objet : Object , propriete :


String ) : void
{
// On v rifie le type de la propri t : il faut que
ce soit un nombre
if ( objet [ propriete ] is int || objet [ propriete ] is
uint || objet [ propriete ] is Number )
{
objet [ propriete ] += 10 ;
}
else
{
trace ( " Attention : La propri t " + propriete +
" sur l ' objet " + objet + " n ' est pas un
nombre . " ) ;
}
}

35
36
37
38
39
40
41
42
43
44

45
46
47

48
49
50

Est-ce que cela fonctionne pour les mthodes ?

La rponse est oui, nous pouvons aussi le faire pour les mthodes ! Il suffit dajouter
des paramtres comme pour nimporte quel appel de fonction. Par exemple :
1
2

var voiture : Voiture = new Voiture () ;


voiture . vitesse = 10 ;

3
4
5
6

// Appelons la m thode ' accelerer ' de notre objet voiture !


voiture [ ' accelerer ' ]( 5 ) ;
trace ( voiture . vitesse ) ; // Affiche : 15

7
8
9
10

// Ce qui revient crire :


voiture . accelerer ( 5 ) ;
trace ( voiture . vitesse ) ; // Affiche : 20

208

LES OBJETS ANONYMES


11
12
13
14
15

// Avec les accesseurs , la propri t vitesse est concid r e


comme un attribut
trace ( voiture [ ' vitesse '] is Function ) ; // Affiche : false
// Alors que accelerer est bien une m thode
trace ( voiture [ ' accelerer '] is Function ) ; // Affiche : true

Voici un exemple plus concret. Nous pourrions coder une fonction qui anime une proprit numrique dun objet dune valeur une autre pendant un certain temps mais,
malheureusement, nous ne sommes pas encore assez avanc dans le cours pour pouvoir faire cela. Toutefois, je vous montre quoi pourrait ressembler la signature de la
fonction et un exemple dutilisation :
1
2
3
4

function animer ( objet : Object , propriete : String , valeurDepart :* ,


valeurArrivee :* , duree : Number ) : void
{
// Animation l ' aide de objet [ propriete ]
}

Jutilise la notation avec ltoile pour le type de valeurDepart et


valeurArrivee pour que lon puisse passer des nombres de type int, uint
ou Number. Attention toutefois vrifier leurs types dans le corps de la fonction.
Dans notre classe Main, nous pourrions crire :
1

var voiture : Voiture = new Voiture () ;

2
3
4

// Acc l rons !
animer ( voiture , ' vitesse ' , 0 , 100 , 3 ) ; // Nous animons la
vitesse de l ' objet voiture de 0 100 pendant 3 secondes

Avec cette fonction, nous pourrions donc animer nimporte quel attribut de nimporte
quel objet !

Les objets anonymes


Crer un objet anonyme
Un objet anonyme est un objet dynamique qui na pas de classe (autre que la
classe Object). On peut modifier ses proprits de manire totalement libre : crer de
nouveaux attributs ou de nouvelles mthodes, les modifier aprs coup. . . En effet, ses
proprits ne sont pas dcrite dans une classe particulire, donc on peut faire ce que
lon veut (ce qui peut parfois poser problme, o lon devra effectuer de nombreux tests
sur lobjet anonyme car on ne sait pas lavance comment il sera structur).
Pour crer un objet anonyme, il y a deux faons de procder. La premire est de
crer une instance de la classe Object comme ceci :
209

CHAPITRE 12. NOTIONS AVANCES DE LA POO


1

var objetAnonyme : Object = new Object () ;

Puis on peut lui affecter des proprits librement :


1
2
3

// Ajoutons quelques attributs


objetAnonyme . nom = " Site du Z ro " ;
objetAnonyme . adresse = " www . siteduzero . com " ;

trace ( objet . nom + " : " + objet . adresse ) ;

Nous obtenons dans la console :


Site du Z ro : www . siteduzero . com

On peut galement crer un objet anonyme avec des accolades en spcifiant directement ses proprits spares par des virgules ainsi :
1

2
3
4
5
6

nomPropriete1 : valeur1 ,
nomPropriete2 : valeur2 ,
nomPropriete3 : valeur3 ,
...

Reprenons notre exemple en utilisant cette mthode :


1
2
3
4

var objet : Object = {


nom : " Site du Z ro " ,
adresse : " www . siteduzero . com "
};

trace ( objet . nom + " : " + objet . adresse ) ;

Ce qui nous donne nouveau :


Site du Z ro : www . siteduzero . com

Il peut parfois tre utile, comme dans le cas o une fonction attend beaucoup de
paramtres facultatifs. Par exemple, nous pourrions avoir une fonction attendant neuf
paramtres facultatifs (jai volontairement mis en forme les paramtres pour quils
soient plus lisibles) :
1
2
3
4
5
6
7
8
9

210

function creerEmailBrouillon (
objet : String = " " ,
message : String = " " ,
date : Date = null ,
e ma i l sDestinataires : Array = null ,
emailsCC : Array = null ,
emailsCCI : Array = null ,
emailExpediteur : String = " " ,
piecesJointes : Array = null ,

LES OBJETS ANONYMES


10
11
12
13
14

d e m a n d e r C o n f i r m a t i o n L e c t u r e : Boolean = false
) : void
{
// Code ici
}

Cette fonction cr un brouillon de-mail : aucun champ nest obligatoire car tous les
paramtres ont une valeur par dfaut. En effet, lorsque vous enregistrez un brouillon
de-mail, vous ntes pas oblig de remplir tous les champs. Nous pouvons donc appeler
cette fonction sans lui passer de paramtre :
1

cre e r Em a il B ro uillon () ; // Tous les param tres auront leur


valeur par d faut

Mais que devrions-nous faire si nous ne voulons enregistrer que le-mail de lexpditeur
seul ? Et bien, il faudrait spcifier quand-mme des valeurs pour les paramtres prcdent le paramtre emailExpediteur, ce qui serait fastidieux et peu commode ! Voyez
plutt :
1

cre e r Em a il B ro uillon ( " " , " " , null , null , null , null , "
z o z o r @ o p e nclassrooms . com " ) ;

Pour remdier ce problme, nous pouvons nutiliser quun seul paramtre : un objet
anonyme !
1
2
3
4

function c re e rEmailBrouillon ( options : Object = null ) : void


{
// Code ici
}

Nous pouvons maintenant nous contenter de passer uniquement les paramtres qui
nous intressent lors de lappel de la fonction :
1
2
3

cre e r Em a il B ro uillon ({
emailExpediteur : " zozor@openclassrooms . com "
}) ;

Il faut avouer que cest tout de mme plus lisible et moins fastidieux taper. Dans
la fonction creerEmailBrouillon, il va falloir faire plusieurs tests sur les paramtres,
afin de savoir sils ont t passs avant de les utiliser. On commence dabord par tester
lexistence de lobjet options, puis on regarde si chaque paramtre est dfini, cest-dire sil est diffrent de undefined (indfini en anglais) et si son type est correct.
1
2
3
4
5
6
7

function c re e rEmailBrouillon ( options : Object = null ) : void


{
if ( options ) // Equivaut : options != null
{
// On v rifie si le param tre objet est d fini et est
de type String
if ( options . objet != undefined && options . objet is
String )
{

211

CHAPITRE 12. NOTIONS AVANCES DE LA POO


8
9
10

// Traiter l ' objet


trace ( " Objet : " + options . objet ) ;

11
12
13
14
15
16

if ( options . message != undefined && options . message is


String )
{
// Traiter le message
trace ( " Message : " + options . message ) ;
}

17
18
19
20
21
22

if ( options . date != undefined && options . date is Date )


{
// Traiter la date de l ' email
trace ( " Date : " + options . date ) ;
}

23
24
25
26
27

28

if ( options . emailsDestinataires != undefined && options


. emailsDestinataires is Array )
{
// Traiter la liste des destinataires
trace ( " Emails destinataires : " + options .
emailsDestinataires . join ( " , " ) ) ; // On affiche
les emails s par s par des virgules gr ce au
join (" ,")
}

29
30
31
32
33
34

if ( options . emailsCC != undefined && options . emailsCC


is Array )
{
// Traiter la liste des destinataires en copie
trace ( " Emails destinataires en copie : " + options .
emailsCC . join ( " , " ) ) ;
}

35
36
37
38
39
40

if ( options . emailsCCI != undefined && options . emailsCCI


is Array )
{
// Traiter la liste des destinataires en copie cach
e
trace ( " Emails destinataires en copie cach e : " +
options . emailsCCI . join ( " , " ) ) ;
}

41
42
43
44
45

212

if ( options . emailExpediteur != undefined && options .


emailExpediteur is String )
{
// Traiter d ' adresse de l ' exp diteur
trace ( " Email de l ' exp diteur : " + options .
emailExpediteur ) ;

LES OBJETS ANONYMES


}

46
47

if ( options . piecesJointes != undefined && options .


piecesJointes is Array )
{
// Traiter la liste des pi ces jointes
trace ( " URL des pi ces jointes : " + options .
piecesJointes . join ( " , " ) ) ;
}

48
49
50
51
52
53
54
55
56
57
58

59

if ( options . d e m a n d e r C o n f i r m a t i o n L e c t u r e != undefined &&


options . d e m a n d e r C o n f i r m a t i o n L e c t u r e is Boolean )
{
// Traiter l ' option de demande de confirmation de
lecture
trace ( " Confirmation de lecture : " + options .
demanderConfirmationLecture );
}

60
61
62

// Suite ventuelle du code ici

Il est ncessaire de bien documenter cette fonction en dtaillant les diffrents


paramtres afin que lon puisse par la suite lutiliser facilement.
Avec ce squelette de code, nous obtenons dans la console :
Email de l exp diteur : zozor@openclassrooms . com

Seul le paramtre emailExpediteur a t dtect et son type a bien t valid.


Essayons de passer plusieurs paramtres :
1
2
3

4
5

cre e r Em a il B ro uillon ({
date : new Date () , // Date d ' aujourd ' hui
e ma i l sD e stinataires :[ " titi@openclassrooms . com " , "
t at a @openclassrooms . com " , " toto@openclassrooms . com " ] , //
Destinataires
emailExpediteur : " zozor@openclassrooms . com " // Exp diteur
}) ;

Ce qui nous donne dans la console :


Date : Wed Nov 6 16:11:31 GMT +0100 2013
Emails destinataires : titi@openclassrooms . com ,
t at a @ op e nc lassrooms . com , toto@openclassrooms . com
Email de l exp diteur : zozor@openclassrooms . com

213

CHAPITRE 12. NOTIONS AVANCES DE LA POO

Les fonctions anonymes


Une fonction anonyme est une fonction dont on ne prcise pas le nom. Par exemple,
cette fonction est anonyme :
1
2
3
4

function () : void
{
trace ( " Hello world ! " ) ;
}

Comme vous pouvez le constater, cette fonction na pas de nom dfinit entre le mot-cl
function et les parenthses des paramtres. On ne peut donc pas lappeler directement.
Par contre, on peut laffecter une variable de type Function comme ceci :
1
2
3
4

var hello : Function = function () : void


{
trace ( " Hello world ! " ) ;
}

Pour lappeler, on considre que la variable est directement la fonction :


hello () ; // Appelle la fonction contenue dans la variable hello

Nous pouvons ainsi crer des mthodes sur un objet anonyme en affectant une fonction
anonyme une proprit de cet objet :
1
2
3
4
5

var anonyme : Object = new Object () ;


anonyme . hello = function () : void
{
trace ( " Hello world ! " ) ;
};

6
7

anonyme . hello () ; // Affiche : Hello world !

En rsum
Il est possible de crer des classes dynamiques que lon peut modifier durant
lexcution, grce au type dynamic.
Les interfaces permettent dhriter en quelque sorte de plusieurs classes pour partager des proprits communes.
Nos classes peuvent tre abstraites : dans ce cas, on renvoie une erreur si quelquun
essaye den crer une instance.
Le type des variables que nous manipulons peut tre indfini ; on peut alors le tester
laide du mot-cl is.
Il est possible daccder dynamiquement des proprits dont on connat le nom.
Un objet anonyme est un objet sans classe que lon peut modifier librement, et
une fonction anonyme est une fonction sans nom.

214

Troisime partie

Laffichage

215

Chapitre

13

Les objets daffichage


Difficult :
Dans ce chapitre, nous allons aborder le systme qui va nous permettre (enfin !) dafficher
des lments (texte, dessins, images, etc.) lcran ! Mais en pratique, nous ne pourrons
rellement afficher quelque chose quau chapitre suivant car il nous faut aborder quelques
notions de base auparavant.
Nous allons voir notamment :
Comment dcrire une couleur en ActionScript.
Le fonctionnement de laffichage sur un cran.
Le systme daffichage de Flash.
Cest parti !

217

CHAPITRE 13. LES OBJETS DAFFICHAGE

Introduction
Les couleurs
Composer une couleur
En informatique, les couleurs sont dcomposes en couleurs principales : le rouge, le
vert et le bleu. partir de ces trois couleurs, il est possible de crer nimporte quelle
autre couleur en les dosant (voir figure 13.1).

Figure 13.1 Les couleurs principales de la lumire


Exemple : je souhaite crer une couleur orange. Lorange est constitu de jaune et de
rouge. Ainsi, il nous faut dabord faire du jaune (rouge + vert), puis rajouter du rouge
(voir figure 13.2). Au final, lorange se cre grosso-modo avec deux quantits de rouge
pour une quantit de vert.

Figure 13.2 Composition de la couleur orange

218

INTRODUCTION
Notation hexadcimale
Pour dcrire une couleur compose de rouge, de vert et de bleu, nous utiliserons la
notation hexadcimale. On commence par crire 0x pour signifier que lon utilise
la notation hexadcimale, puis on dcrit les quantits de chacune des trois couleurs
rouge, vert et bleu : deux chiffres, allant de 0 (le minimum) F (le maximum) pour
chacune, ce qui fait six chiffres.
Pourquoi jusqu F ? Depuis quand F est un chiffre ?

Excellente question ! En ralit, il existe diffrents systmes de notation pour les nombres.
Celle que vous et moi utilisons tous les jours sappelle la notation dcimale. Cela
signifie que nous utilisons les chiffres de 0 9 pour crire les nombres. On dit aussi que
nous crivons les nombres en base dix. Une autre notation trs connue est la notation
binaire : nous dcrivons les nombres avec seulement les chiffres 0 et 1. On parle alors
de base deux. Par exemple, 5 en base dix scrit 101 en base deux !
La notation hexadcimale utilise non pas dix, mais seize chiffres ! On parle de base
seize pour cette notation. Les chiffres vont de 0 15. Avouez cependant qucrire
un chiffre laide de deux chiffres serait plutt embtant. . . Comment faire alors la
diffrence entre 12 (le chiffre) et 12 (le nombre compos du chiffre 1 et du chiffre 2) ?
Impossible !
Ainsi, nous utilisons les 6 premires lettres de lalphabet pour remplacer les chiffres 10
15, ce qui est tout de mme bien plus pratique.
Chiffre (dcimal)
10
11
12
13
14
15

Notation hexadcimale
A
B
C
D
E
F

En dehors de lActionScript, on utilise plus gnralement le # pour commencer une notation hexadcimale.
Ainsi, pour crire notre chiffre 12, nous utilisons C ! Voici quelques exemples de nombre
en base dix convertis en base seize :
Afin de dcrire une couleur, nous utiliserons donc deux chiffres en hexadcimal pour le
rouge, le vert et le bleu, de 00 FF, ce qui fait de 0 255 en dcimal. Par exemple,
pour notre couleur orange, nous crirons : 0xFF8000, car il y a deux doses de rouge
pour une dose de vert (voir figure 13.3).
219

CHAPITRE 13. LES OBJETS DAFFICHAGE


Base dix
12
5
31
32
16
160
66

Base seize
C
5
1F
20
10
A0
42

Figure 13.3 Notation hexadcimale de la couleur orange


La plupart des logiciels de dessin et retouche dimage affichent la notation
hexadcimale des couleurs quil est alors facile de copier-coller. Il existe galement des outils ou des sites Internet spcialiss dans la cration de couleur
qui fournissent cette notation (comme par exemple ColRD). Attention toutefois, il ne faut pas oublier quen ActionScript, la notation hexadcimale
commence par 0x et non pas par # !

Stocker une couleur dans une variable


Le type quil faut utiliser pour stocker un nombre en notation hexadcimale est le
type uint :
1
2

var orange : uint = 0xFF8000 ;


var orange2 : uint = 0xff8000 ; // Les lettres peuvent aussi tre
not es en minuscule

La variable ainsi cre peut tre manipule comme nimporte quelle autre variable :
1
2
3
4

220

trace ( " La couleur orange vaut


16744448
trace ( " La couleur orange vaut
base dix . " ) ; // 16744448
trace ( " La couleur orange vaut
base seize . " ) ; // FF8000
trace ( " La couleur orange vaut
base deux . " ) ; // 1111 1111

" + orange + " en base dix . " ) ; //


" + orange . toString ( 10 ) + " en
" + orange . toString ( 16 ) + " en
" + orange . toString ( 2 ) + " en
1000 0000 0000 0000

INTRODUCTION
Vous remarquerez que la couleur est stocke sous la notation dcimale, cest,
en effet, la seule notation supporte par les types de nombres. Par contre, il
est facile de retrouver la notation hexadcimale ou binaire grce la mthode
toString() comme dans lexemple ci-dessus.

Laffichage sur un cran


Tous les crans daffichage sont composs dune grille de petits carrs de lumire que
lon nomme pixels (voir figure 13.4). Nous allons voir comment utiliser cette grille
pour positionner des objets.

Figure 13.4 Lcran est compos dune grille de pixels

Le repre
Les pixels forment donc une grille suivant deux axes : laxe des X et laxe des Y. On
se situe alors sur un espace en 2D. Pour mieux visualiser la grille, nous allons utiliser
la figure 13.5 un repre qui nous montre les axes et lorigine de la grille.
Une position (cest--dire un point prcis de ce repre) est dcrite par deux coordonnes : la position en X, et la position en Y. On crit toujours les coordonnes en 2D
dans cet ordre : dabord les X, puis les Y. Ainsi, il nest pas ncessaire de tout le temps
prciser qui est quoi. Dans lexemple la figure 13.6, le pixel que lon a colori en bleu
se trouve la position (5,6), cest--dire 5 pixels du bord gauche de lcran, et 6
pixels du bord suprieur de lcran.
Tout au long du cours, il faudra avoir ce repre en tte ds quil sagira
de positionner un objet lcran. Il faut savoir quil est possible que les
coordonnes soient ngatives, mais, dans ce cas, les pixels qui dpassent ne
seront pas affichs (faute de pixels sur votre cran).

221

CHAPITRE 13. LES OBJETS DAFFICHAGE

Figure 13.5 Repre de laffichage

Figure 13.6 Exemple de position sur lcran

222

LARBRE DES OBJETS DAFFICHAGE

Larbre des objets daffichage


Larbre daffichage
Pour bien comprendre de quoi il sagit, commenons par un exemple concret, et revenons sur notre chre voiture. Nous voulons maintenant lafficher et lanimer sur notre
cran ! Nous allons utiliser un modle simplifi, celui de la figure 13.7.

Figure 13.7 Votre magnifique voiture simplifie


Supposons que cette voiture soit compose dune carrosserie et de deux roues. Vue de
lextrieur, la voiture est un objet et un seul (voir figure 13.8).

Figure 13.8 La voiture vue de lextrieur


Mais en ralit, il y a trois objets lintrieur de cet objet (voir figure 13.9) : la
carrosserie en orange et les deux roues en bleu.

Figure 13.9 Lobjet Voiture est compos dautres objets


Lorsque nous voudrons afficher la voiture, nous crerons tout dabord un conteneur
(par exemple, avec la classe Sprite), puis nous ajouterons lintrieur trois autres
objets daffichage (voir figure 13.10) : un pour la carrosserie, et un pour chaque roue.
223

CHAPITRE 13. LES OBJETS DAFFICHAGE

Figure 13.10 Nous disposons les diffrents objets dans le conteneur Voiture

Ainsi, si nous bougeons le conteneur voiture , les roues se dplaceront en mme


temps que la carrosserie ; si nous tournons le conteneur, lensemble fera une rotation
comme sil sagissait dun unique objet, linstar de ce qui se passerait dans la vraie
vie ! La voiture pourrait elle-mme se trouver dans un autre conteneur rue , que lon
pourrait faire dfiler comme un tout. . .
Ainsi, larbre daffichage est une arborescence dobjets daffichage inclus les uns
dans les autres dans une certaine logique. Voici un schma la figure 13.11 reprsentant
larbre daffichage de notre application.

Figure 13.11 Larbre daffichage de la voiture


Vous remarquerez que la racine de larbre est compose dun objet que jai
appel scne principale. Cest un objet spcial de la classe Stage qui est
toujours prsent pour la gestion de laffichage.
Maintenant, si nous voulons quil y ait deux voitures dans la rue, il suffit den ajouter
une autre dans le conteneur rue (voir figure 13.12).
224

LARBRE DES OBJETS DAFFICHAGE

Figure 13.12 Plusieurs voitures dans larbre daffichage


Il est important de se rappeler que modifier lapparence ou la position dun
conteneur impactera tous les enfants comme sil sagissait dun seul et unique
objet. Il est nanmoins possible de modifier les enfants sparment.

Les classes daffichage


En ActionScript, il existe plusieurs classes diffrentes ddies laffichage, comme
on peut le constater la figure 13.13.

Figure 13.13 Extrait de larbre dhritage des classes daffichage


225

CHAPITRE 13. LES OBJETS DAFFICHAGE


Par exemple, la classe TextField sert afficher du texte ; nous en reparlerons dans le
prochain chapitre. Elle est une sous-classe de InteractiveObject (pour les objets interactifs), elle-mme sous-classe de DisplayObject. Ainsi, toutes les classes daffichage
sont des sous-classes de la classe DisplayObject.
Rappel : les classes abstraites ne peuvent pas tre instancies directement,
cest--dire que lon ne peut pas crer de nouveaux objets de ces classes avec
le mot-cl new. Il est toutefois possible de spcifier des paramtres de type
de classes abstraites dans les mthodes, ce nest pas gnant.

La classe DisplayObject (abstraite)


Il sagit de la classe daffichage de base. Cest partir delle que toutes les autres classes
daffichage sont drives ; elle contient les proprits utiles pour manipuler des objets
daffichage simples. Encore une fois, tant donn quil sagit dune classe abstraite,
inutile dessayer de crer un objet de la classe DisplayObject.

La classe Bitmap
Cette classe permet dafficher des images composes de pixels. Les objets de cette classe
sont purement visuels ; il est impossible de grer directement les clics de souris dessus
par exemple. Nous apprendrons manipuler des images dans les prochains chapitres.

La classe Shape
Cette classe permet de crer des objets lgers permettant de dessiner lcran : tracer
des lignes, des formes, remplir. . . linstar des objets de la classe Bitmap, les objets
de la classe Shape sont purement visuels.

La classe Video
Comme vous vous en doutez, cette classe permet laffichage de vidos (avec le son).
Cest aussi une classe crant des objets purement visuels.

La classe InteractiveObject (abstraite)


Cette classe permet dintroduire de linteractivit pour nos objets daffichage : il sera
ainsi possible de savoir si lutilisateur clique sur un objet dune sous-classe de la classe
InteractiveObject.
226

LARBRE DES OBJETS DAFFICHAGE


La classe SimpleButton
Cette classe permet de fabriquer des boutons basiques rapidement : on peut ainsi lui
spcifier quel objet sera affich dans diffrents tats (normal, souris au-dessus, cliqu,
. . .), et automatiquement changer le curseur de la souris au-dessus en doigt. Cette classe
est utilise par Flash Pro dAdobe pour crer les boutons.
La classe TextField
Avec cette classe, nous prsenterons du texte lcran pendant le prochain chapitre. Il
est possible de formater le texte laide dune forme trs allge dHTML (le langage
principal utilis pour crer des sites web).
La classe DisplayObjectContainer (abstraite)
Cette dernire classe abstraite introduit la notion de conteneur : il est dsormais
possible dajouter plusieurs objets daffichage enfants dans un seul conteneur, afin de les
manipuler ensemble comme sil sagissait dun seul objet (pensez la fonction Grouper
des logiciels de bureautique).
La classe Loader
Cette classe nous permettra de charger du contenu externe notre application,
condition quil soit visuel.
La classe Stage (abstraite)
Les objets de cette classe sont des objets spciaux qui reprsentent la scne daffichage
de lapplication. Il est bien videmment impossible de crer directement une instance
de la classe Stage. Attention, la plupart des proprits hrites des classes-mres ne
fonctionnent pas sur eux (comme par exemple la position, lopacit, etc.).
La classe Sprite
Non, il ne sagit pas de la boisson ! :- Les objets de cette classe sont les plus utiliss
en tant que conteneurs, et en tant que dessins interactifs. Vous en userez (et abuserez)
en programmant en ActionScript !
La classe MovieClip
Cette classe drive de la classe Sprite ajoute un composant complexe et plutt lourd :
une ligne de temps (ou timeline en anglais). Cela consiste en une srie dimages-cls
pouvant tre rparties sur diffrents niveaux, afin de crer des animations complexes
(voir figure 13.14). Cette classe a tout dabord t conue pour tre utilise dans le
227

CHAPITRE 13. LES OBJETS DAFFICHAGE


logiciel danimation Flash Pro dAdobe ; ainsi, tant dun intrt limit pour une utilisation en ActionScript, nous ne lutiliserons quasiment pas dans ce cours.

Figure 13.14 Un exemple de timeline dans Flash Pro


Il existe dautres classes daffichage que je nai pas mentionnes ici : nous ne
les aborderons pas, elles sont trop avances et donc inutiles dans le cadre de ce
cours. Mais si vous tes curieux, vous pouvez toujours explorer les possibilits
supplmentaires qui soffrent vous en visitant la documentation.
Si nous reprenions notre exemple de la voiture, les schmas des arbres daffichage
ressembleraient aux deux figures 13.15 et 13.16.

Figure 13.15 Larbre daffichage de la voiture

Manipuler les conteneurs


Toutes les nouvelles proprits (attributs et mthodes) que nous allons voir
sont issues de la classe DisplayObjectContainer. Je vous conseille daller lire en parallle la documentation officielle du langage ActionScript 3 en
franais. Nhsitez surtout pas lutiliser aussi souvent que vous en sentez le
besoin, elle est trs pratique !
228

MANIPULER LES CONTENEURS

Figure 13.16 Plusieurs voitures dans larbre daffichage



Documentation officielle
B
Code web : 403326


.

Buvez du Sprite !
Comme nous lavons vu prcdemment, la classe Sprite va nous permettre de crer des
conteneurs daffichage trs polyvalents tout en restant lgers. Commenons par crer
un conteneur que nous appellerons voiture.
1
2

// Cr ation du conteneur ' voiture '


var voiture : Sprite = new Sprite () ;

Comme vous pouvez le remarquer, le constructeur de la classe Sprite ne


prend pas de paramtre.

Ajouter des enfants


Pour ajouter des objets daffichage enfants dans notre conteneur voiture, il faut utiliser
la mthode addChild(enfant:DisplayObject):void fournie par la classe DisplayObject
Container. Elle prend en paramtre lenfant ajouter dans le conteneur.
1
2
3
4

// Cr ons une roue


var roue : Sprite = new Sprite () ;
// Ajoutons - la dans la voiture
voiture . addChild ( roue ) ;

5
6
7
8

// Cr ons la rue et ajoutons la voiture dans la rue


var rue : Sprite = new Sprite () ;
rue . addChild ( voiture ) ;

229

CHAPITRE 13. LES OBJETS DAFFICHAGE


Lobjet roue1 est dsormais affich lintrieur du conteneur voiture, lui-mme affich
dans le conteneur rue. Mais il manque quelque chose : il faut ajouter lobjet rue dans
la scne principale, sinon il ne sera pas affich !

Afficher un objet sur la scne principale


Dans notre projet, nous utilisons une classe principale que nous avons appele Main
(dans le fichier Main.as) :
package {
import flash . display . Sprite ;
import flash . events . Event ;

1
2
3
4

/* *
* ...
* @author Guillaume
*/
public class Main extends Sprite {

5
6
7
8
9
10

public function Main () : void {


if ( stage )
init () ;
else
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

11
12
13
14
15
16
17

private function init ( e : Event = null ) : void {


removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point

18
19
20
21
22

23

trace ( " Hello world ! " ) ;

24

25
26
27

Regardez droit dans les yeux la dclaration de la classe Main : cest une sous-classe
de Sprite ! Notre classe principale est donc un conteneur, qui est automatiquement
ajout la scne au dmarrage de notre application ; ainsi, il ne nous reste plus qu
ajouter nos objets dans le conteneur de classe Main qui nous est offert !
Pour ajouter notre rue sur la scne principale, nous procderons ainsi :
1

this . addChild ( rue ) ;

Le code peut tre raccourci en enlevant le mot-cl this :


1

230

addChild ( rue ) ;

MANIPULER LES CONTENEURS


Rappel : le mot-cl this permet daccder lobjet courant. Si nous lutilisons dans des mthodes non statiques de la classe Main, nous pointerons sur
lobjet qui reprsente notre application. Il est toutefois possible domettre le
mot-cl this si cela ne pose pas de problme de conflit de noms (typiquement, lorsque vous avez la fois un attribut dans votre classe et un paramtre
du mme nom dans la mthode, il faut utiliser this pour accder lattribut
de la classe). Du coup, le code ci-dessus ne fonctionnera pas dans une autre
classe ; il faudrait alors utiliser une variable pointant sur lobjet de la classe
Main.
Voici le code complet de la classe Main :
1
2
3

package {
import flash . display . Sprite ;
import flash . events . Event ;

4
5
6
7
8
9

/* *
* ...
* @author Guillaume
*/
public class Main extends Sprite {

10

public function Main () : void {


if ( stage )
init () ;
else
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

11
12
13
14
15
16
17

private function init ( e : Event = null ) : void {


removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point

18
19
20
21

// Cr ation du conteneur ' voiture '


var voiture : Sprite = new Sprite () ;

22
23
24

// Cr ons une roue


var roue : Sprite = new Sprite () ;
// Ajoutons - la dans la voiture
voiture . addChild ( roue ) ;

25
26
27
28
29

// Cr ons la rue et ajoutons la voiture dans la rue


var rue : Sprite = new Sprite () ;
rue . addChild ( voiture ) ;

30
31
32
33
34
35

36

// On ajoute la rue sur la sc ne principale


addChild ( rue ) ;

37
38

231

CHAPITRE 13. LES OBJETS DAFFICHAGE


39
40

Si vous testez le code ce stade, vous risquez dtre un peu dus : en effet,
les conteneurs sont vides par dfaut ! Vous devrez vous contenter dune triste
scne vide, mais nous allons bientt remdier cela.
Reprenons maintenant le schma reprsentant larbre daffichage, que nous avons dtaill plus haut (voir figure 13.17).

Figure 13.17 Larbre daffichage de la voiture


Corrigeons-le pour y inclure notre objet de la classe Main (voir figure 13.18).

Figure 13.18 Larbre daffichage de notre application


232

MANIPULER LES CONTENEURS


Un objet ne peut tre affich deux endroits diffrents ; si jamais vous lajoutez un conteneur alors que lobjet est dj dans un autre conteneur, il sera
automatiquement retir de ce dernier avant dtre ajout dans le nouveau
conteneur.

Lindex daffichage
Cette notion correspond lordre daffichage des enfants dans un conteneur. Si un objet
a un index plus grand quun autre, il sera affich devant, et inversement. Lindex est
compris entre 0 et conteneur.numChildren - 1 (le nombre denfants moins un).
la figure 13.19 par exemple, la voiture bleue est au-dessus des autres car elle a lindex
daffichage le plus lev. En revanche, la voiture orange est tout en dessous car elle a
un index gal zro.

Figure 13.19 Lindex daffichage de trois voitures superposes


Il est impossible de mettre un enfant un index en dehors des bornes que
nous avons dfinies : ainsi, on ne peut pas mettre un objet un index infrieur
0 ou suprieur conteneur.numChildren - 1.
On peut obtenir lindex dun enfant en utilisant la mthode getChildIndex():int
(renvoyant un int), qui prend en paramtre lobjet enfant en question :
1
2

// On cr e la rue
var rue : Sprite = new Sprite () ;

3
4
5
6

// On ajoute trois voiture dans la rue


var voiture1 : Sprite = new Sprite () ;
rue . addChild ( voiture1 ) ;

7
8

var voiture2 : Sprite = new Sprite () ;

233

CHAPITRE 13. LES OBJETS DAFFICHAGE


9

rue . addChild ( voiture2 ) ;

10
11
12

var voiture3 : Sprite = new Sprite () ;


rue . addChild ( voiture3 ) ;

13

trace ( " La
) ) ; //
trace ( " La
) ) ; //
trace ( " La
) ) ; //

14
15
16

voiture1
Affiche
voiture2
Affiche
voiture3
Affiche

est l ' index " + rue . getChildIndex ( voiture1


0
est l ' index " + rue . getChildIndex ( voiture2
1
est l ' index " + rue . getChildIndex ( voiture3
2

Ajouter un enfant un index prcis


Il existe une variante de la mthode addChild que nous avons vue il y a peu de temps.
Il sagit de la mthode addChildAt(enfant:DisplayObject, index:int):void, qui
prend deux paramtres : lenfant ajouter, puis lindex daffichage o il faut lajouter.
Voici un exemple, o lon ajoute chaque nouvelle voiture en arrire-plan :
1
2

// On cr e la rue
var rue : Sprite = new Sprite () ;

3
4
5
6

// On ajoute des voitures la rue , en les mettant l ' arri re plan chaque fois
var voiture1 : Sprite = new Sprite () ;
rue . addChildAt ( voiture1 , 0 ) ;

7
8
9

var voiture2 : Sprite = new Sprite () ;


rue . addChildAt ( voiture2 , 0 ) ;

10
11
12

var voiture3 : Sprite = new Sprite () ;


rue . addChildAt ( voiture3 , 0 ) ;

13
14
15
16

trace ( " La
) ) ; //
trace ( " La
) ) ; //
trace ( " La
) ) ; //

voiture1
Affiche
voiture2
Affiche
voiture3
Affiche

est l ' index " + rue . getChildIndex ( voiture1


2
est l ' index " + rue . getChildIndex ( voiture2
1
est l ' index " + rue . getChildIndex ( voiture3
0

Comme vous pouvez le constater, lindex daffichage de chaque objet varie,


car il reprsente tout instant la position en profondeur de celui-ci ; si jamais
un objet passe derrire un autre par exemple, son index sera automatiquement
modifi en consquence !

234

MANIPULER LES CONTENEURS

Oprations sur les enfants


Nombre denfants
Pour obtenir le nombre denfants que contient un conteneur, vous pouvez utiliser le
getter numChildren de type int.
Attention, cest un attribut en lecture seule car aucun setter nest dfini dans
la classe DisplayObjectContainer !

1
2

// On cr e une rue
var rue : Sprite = new Sprite () ;

3
4
5
6
7
8
9
10

// On ajoute trois voitures dans la rue


var voiture1 : Sprite = new Sprite () ;
rue . addChild ( voiture1 ) ;
var voiture2 : Sprite = new Sprite () ;
rue . addChild ( voiture2 ) ;
var voiture3 : Sprite = new Sprite () ;
rue . addChild ( voiture3 ) ;

11
12

trace ( " Il y a " + rue . numChildren + " voitures dans la rue . " ) ;
// Affiche 3 .

Accder au parent dun objet daffichage


Lattribut parent permet daccder au conteneur parent qui contient lobjet daffichage.
Cette proprit est notamment utile lintrieur dune classe, quand on ne peut pas
savoir quel est le conteneur.
1

trace ( rue == voiture1 . parent ) ; // Affiche true

2
3
4

trace ( " Nombre de voitures : " + rue . numChildren ) ; // Affiche 3


trace ( " Nombre de voitures : " + voiture1 . parent . numChildren ) ;
// Affiche 3 galement

Modifier lindex dun enfant


Une fois un objet daffichage enfant ajout un conteneur, il est possible de modifier son
index daffichage. Pour cela, nous utiliserons la mthode setChildIndex(enfant:DisplayObject,
index:int):void qui prend en paramtre lenfant en question puis son nouvel index.
1
2
3
4

// On met successivement les voitures au premier - plan


rue . setChildIndex ( voiture1 , 2 ) ;
rue . setChildIndex ( voiture2 , 2 ) ;
rue . setChildIndex ( voiture3 , 2 ) ;

235

CHAPITRE 13. LES OBJETS DAFFICHAGE


5

trace ( " La
) ) ; //
trace ( " La
) ) ; //
trace ( " La
) ) ; //

6
7
8

voiture1
Affiche
voiture2
Affiche
voiture3
Affiche

est l ' index " + rue . getChildIndex ( voiture1


0
est l ' index " + rue . getChildIndex ( voiture2
1
est l ' index " + rue . getChildIndex ( voiture3
2

Rappel : la valeur de lindex


conteneur.numChildren - 1 !

doit

tre

situe

entre

et

changer les index daffichage de deux enfants


Il existe deux mthodes de la classe DisplayObjectContainer pour changer la profondeur de deux objets enfants : swapChildren() qui prend en paramtre deux rfrences
des enfants du conteneur et swapChildrenAt() qui prend en paramtre deux index
diffrents changer.
1
2
3
4

rue . swapChildren ( voiture1 , voiture2 ) ;


trace ( " La voiture1 est l ' index " + rue . getChildIndex ( voiture1
) ) ; // Affiche 1
trace ( " La voiture2 est l ' index " + rue . getChildIndex ( voiture2
) ) ; // Affiche 0
// La voiture 1 est affich e devant la voiture 2

5
6
7
8
9

rue . swapChildrenAt (0 , 1 ) ;
trace ( " La voiture1 est l ' index " + rue . getChildIndex ( voiture1
) ) ; // Affiche 0
trace ( " La voiture2 est l ' index " + rue . getChildIndex ( voiture2
) ) ; // Affiche 1
// La voiture 1 est affich e en dessous de la voiture 2

Dterminer si un objet est enfant dun conteneur


Une mthode trs pratique de la classe DisplayObjectContainer renvoie un boolen
pour le savoir : jai nomm contains() ! Elle prend en paramtre un objet de la classe
DisplayObject et retourne true si cet objet est dans la liste daffichage du conteneur
(y compris parmi les petits-enfants, parmi les enfants des petits-enfants, etc.), ou sil
sagit du conteneur lui-mme (nous considrons que le conteneur se contient lui-mme).
Sinon, elle renvoie false.
1
2
3
4

var
var
var
var

236

sprite1 : Sprite
sprite2 : Sprite
sprite3 : Sprite
sprite4 : Sprite

=
=
=
=

new
new
new
new

Sprite () ;
Sprite () ;
Sprite () ;
Sprite () ;

MANIPULER LES CONTENEURS


6
7

sprite1 . addChild ( sprite2 ) ;


sprite2 . addChild ( sprite3 ) ;

8
9
10
11
12

trace ( sprite1 . contains ( sprite1 ) ) ;


trace ( sprite1 . contains ( sprite2 ) ) ;
trace ( sprite1 . contains ( sprite3 ) ) ;
trace ( sprite1 . contains ( sprite4 ) ) ;

//
//
//
//

Affiche :
Affiche :
Affiche :
Affiche :

true
true
true
false

Retirer des enfants


Pour retirer un enfant dun parent, la mthode removeChild(enfant:DisplayObject):void
est toute indique ! linstar de la mthode addChild(), cette fonction prend en paramtre lenfant enlever de laffichage.
1
2
3
4

// On enl ve les trois voitures de la rue


rue . removeChild ( voiture1 ) ;
rue . removeChild ( voiture2 ) ;
rue . removeChild ( voiture3 ) ;

Il est galement possible de supprimer un enfant un certain index, sans savoir prcisment duquel il sagit, laide de la mthode removeChildAt(index:int):void.
Le paramtre que nous passons correspond lindex de lenfant que nous souhaitons
enlever.
1
2

// On cr e la rue
var rue : Sprite = new Sprite () ;

3
4
5
6

// On ajoute des voitures la rue , en les mettant l ' arri re plan chaque fois
var voiture1 : Sprite = new Sprite () ;
rue . addChildAt ( voiture1 , 0 ) ;

7
8
9

var voiture2 : Sprite = new Sprite () ;


rue . addChildAt ( voiture2 , 0 ) ;

10
11
12

var voiture3 : Sprite = new Sprite () ;


rue . addChildAt ( voiture3 , 0 ) ;

13
14
15
16

trace ( " La
) ) ; //
trace ( " La
) ) ; //
trace ( " La
) ) ; //

voiture1
Affiche
voiture2
Affiche
voiture3
Affiche

est l ' index " + rue . getChildIndex ( voiture1


2
est l ' index " + rue . getChildIndex ( voiture2
1
est l ' index " + rue . getChildIndex ( voiture3
0

17
18
19

// On enl ve a voiture le plus au fond


rue . removeChildAt ( 0 ) ; // voiture3 enlev e !

20
21

// On peut enlever les deux autres de la m me mani re

237

CHAPITRE 13. LES OBJETS DAFFICHAGE


22
23

rue . removeChildAt ( 0 ) ; // voiture2 enlev e !


rue . removeChildAt ( 0 ) ; // voiture1 enlev e !

Et si on souhaite enlever tous les enfants du conteneur, ny a-t-il pas un


moyen moins fastidieux ?
La rponse est oui, grce la mthode removeChildren(beginIndex:int = 0, endIndex:int
= 0x7fffffff):void qui permet de supprimer plusieurs enfants dun coup dun seul !
Les deux paramtres facultatifs spcifient partir de quel index on supprime, et jusqu quel index. Par dfaut, tous les enfants sont supprims, donc si cest ce que vous
souhaitez faire, laissez les parenthses vides.
1

rue . removeChildren () ; // Toutes les voitures sont enlev es d ' un


coup !

Proprits utiles des objets daffichage


Nous allons maintenant aborder des proprits communes tous les objets daffichage,
qui savreront trs utiles ! Toutefois, nous nous limiterons pour linstant laffichage
2D dans le repre mentionn en dbut de chapitre.
Les attributs et mthodes que nous allons voir sont des proprits de la classe
DisplayObject, dont la documentation est disponible en ligne.

Documentation
B DisplayObject
Code web : 329657


Position
Tout dabord, commenons par la position de lobjet daffichage : deux attributs, x et y,
permettent de contrler respectivement la position horizontale et verticale de lorigine
dun objet daffichage.
Reprenons lexemple de lintroduction, visible la figure 13.20.
Pour dplacer lorigine dun objet cet endroit prcis (5, 6), nous crirons ceci :
1
2
3
4
5

var monObjet : Sprite = new Sprite () ;


// Modifions la position de l ' objet !
monObjet . x = 5 ;
monObjet . y = 6 ;
addChild ( monObjet ) ;

238

PROPRITS UTILES DES OBJETS DAFFICHAGE

Figure 13.20 Exemple de position sur lcran

La position par dfaut de tout nouvel objet daffichage est (0, 0), cest--dire
que x vaut 0 et que y vaut 0 si vous ny touchez pas.

Un mot sur lorigine


Lorigine dun objet daffichage est le point qui reprsente sa position actuelle. Par
dfaut, elle est situe en haut gauche (voir figure 13.21), et elle ne peut pas tre
dplace (voir figure 13.22).

Figure 13.21 Lorigine est en haut gauche par dfaut

Comment modifier lorigine de notre conteneur si on ne peut pas la dplacer ?

239

CHAPITRE 13. LES OBJETS DAFFICHAGE

Figure 13.22 Rotation du conteneur avec lorigine par dfaut


Et bien, cest trs simple, il suffit de dplacer les enfants lintrieur de notre conteneur,
pour donner lillusion de modifier lorigine (voir figure 13.23) !

Figure 13.23 On dplace limage de voiture lintrieur du conteneur


Et cest gagn (voir figure 13.24) !

Figure 13.24 Rotation du conteneur avec la nouvelle origine


Laffichage lcran de la voiture la position (0, 0) ressemblerait alors la figure
13.25 ou bien 13.26.
Par exemple, si vous ajoutez un objet daffichage voiture dans votre conteneur rue, et
que vous positionnez la voiture en ngatif 100 pixels de lorigine de la rue, une partie
de votre voiture sera trs certainement en dehors de lcran. Mais lorigine de la rue na
240

PROPRITS UTILES DES OBJETS DAFFICHAGE

Figure 13.25 Dans le cas de lorigine par dfaut

Figure 13.26 Dans le cas o lon a centr lorigine

241

CHAPITRE 13. LES OBJETS DAFFICHAGE


pas chang entre-temps : elle est toujours sa position de dpart (0, 0). Maintenant,
vous pouvez faire rapparatre la voiture en entier en dplaant la rue de 100 pixels
vers la droite ! Son origine va ainsi changer et devenir (100, 0), ainsi la position de la
voiture par rapport la scne sera (0, 0) ! Tout est relatif !

Taille
Taille absolue
La taille absolue dun objet daffichage, cest--dire la taille quil prend lcran, peut
tre lue ou modifie laide des attributs width (longueur) et height (hauteur), en
pixels. La taille est toujours exprime en valeurs positives.
1
2
3
4
5

var maVoiture : Voiture = new Voiture () ;


// Modifions la taille de la voiture pour qu ' elle fasse 100x100
pixels !
maVoiture . width = 100 ;
maVoiture . height = 100 ;
addChild ( maVoiture ) ;

Modifier la taille dun conteneur vide et sans dessin na aucun sens, et ne


donnera aucun rsultat. Ses deux attributs width et height seront toujours
gaux 0.

Taille relative
On peut galement redimensionner un objet daffichage laide de pourcentages, grces
aux attributs scaleX pour redimensionner en longueur, et scaleY en hauteur. Les
pourcentages ne sont pas directement exprims en tant que tel : par exemple, scaleX
= 1 signifie que la longueur de lobjet est 100%, scaleY = 2 signifie que lobjet est
deux fois plus haut que sa taille absolue dorigine et scaleY = 0.5 signifie que lobjet
est moiti moins haut.
1
2
3
4

var maVoiture : Voiture = new Voiture () ;


// Modifions la taille de la voiture pour qu ' elle fasse 100x100
pixels !
maVoiture . width = 100 ;
maVoiture . height = 100 ;

5
6
7
8
9
10

// R duisons la taille de la voiture de moiti !


maVoiture . scaleX = 0 . 5 ;
maVoiture . scaleY = 0 . 5 ;
trace ( maVoiture . width ) ; // Affiche : 50
trace ( maVoiture . height ) ; // Affiche : 50

11
12

// Remettons - l sa taille normale :

242

PROPRITS UTILES DES OBJETS DAFFICHAGE


13
14
15
16
17

maVoiture . scaleX = 1 ;
maVoiture . scaleY = 1 ;
trace ( maVoiture . width ) ; // Affiche : 100
trace ( maVoiture . height ) ; // Affiche : 100
addChild ( maVoiture ) ;

Avec ses proprits, il est possible dinverser un objet daffichage laide de valeurs
ngatives :
1
2
3
4

var maVoiture : Voiture = new Voiture () ;


// Modifions la taille de la voiture pour qu ' elle fasse 100x100
pixels !
maVoiture . width = 100 ;
maVoiture . height = 100 ;

5
6
7
8
9
10

// Inversons horizontalement la voiture !


maVoiture . scaleX = -1 ;
trace ( maVoiture . width ) ; // Affiche : 100
trace ( maVoiture . height ) ; // Affiche : 100
addChild ( maVoiture ) ;

Rappel : les attributs de taille width et height sont toujours positifs.

Rotation
Lattribut rotation permet de faire tourner des objets daffichage autour de leur origine (voir figure 13.27), en utilisant des degrs. Les valeurs comprises entre 0 et 180
reprsentent la rotation en sens horaire ; les valeurs comprises entre 0 et -180 reprsentent la rotation en sens antihoraire. Les valeurs hors de cette plage sont alors rajustes (ajoutes ou soustraites de 360) pour obtenir une valeur comprise dans la plage.
Par exemple, linstruction voiture.rotation = 400 correspond voiture.rotation
= 40 (car 400 - 360 = 40).
Si vous voulez utiliser des valeurs en radians, il ne faut pas oublier de les
convertir en degrs avant dutiliser lattribut rotation : on crira par exemple
voiture.rotation = maValeurEnRadians / Math.PI * 180; en utilisant la constant Math.PI qui contient une valeur assez prcise du nombre
pi.

243

CHAPITRE 13. LES OBJETS DAFFICHAGE

Figure 13.27 Rotation dun objet (avec lorigine par dfaut)

Transparence
Visibilit
Lattribut visible vaut true si lobjet est visible, false sil est invisible. Par dfaut,
sa valeur est true (lobjet est visible).
1
2
3
4

var maVoiture : Voiture = new Voiture () ;


// Rien ne sera affich l ' cran
maVoiture . visible = false ;
addChild ( maVoiture ) ;

Un objet daffichage avec une visibilit faux nest pas du tout rendu lcran,
et ne peut donc pas interagir avec la souris par exemple. Cela permet toutefois
dconomiser des ressources de lordinateur pour amliorer les performances.
Un bon conseil : si un objet doit tre invisible, utilisez cette proprit chaque
fois que vous le pouvez !

Opacit
Lattribut alpha de type Number dtermine lopacit dun objet daffichage, cest--dire
sil est plus ou moins transparent. Les valeurs vont de 0 (invisible) 1 (opaque).
244

SUPPRIMER UN OBJET DAFFICHAGE DE LA MMOIRE


1
2
3
4

var maVoiture : Sprite = new Sprite () ;


// La voiture sera moiti transparente
maVoiture . alpha = 0 . 5 ;
addChild ( maVoiture ) ;

Lopacit dun conteneur est un multiplicateur de lopacit de tous ces enfants, et ainsi
de suite. Par exemple, si un enfant a une opacit de 0.5, et que le conteneur a une
opacit de 0.5, lopacit relle de lenfant sera de 0.5 x 0.5 = 0.25 : lenfant est donc
trois quarts transparent.
1
2
3

var enfant : Sprite = new Voiture () ;


// L ' enfant sera moiti transparent
enfant . alpha = 0 . 5 ;

4
5
6
7
8

var conteneur : Sprite = new Sprite () ;


// Le conteneur sera aussi moiti transparent
conteneur . alpha = 0 . 5 ;
conteneur . addChild ( maVoiture ) ;

9
10

// Au final , l ' opacit de l ' enfant vaut 0 . 25

Il est possible de mettre une valeur suprieure 1 : cela aura pour effet
daugmenter lopacit des enfants de lobjet. Par exemple, si un enfant a
pour opacit 0.5, et que lon met lopacit de son conteneur 2, lopacit de
lenfant relle sera 0.5 x 2 = 1 : lenfant est donc entirement opaque.
Un objet visible mais transparent (cest--dire que sa visibilit est vrai mais
que son opacit est 0) est quand mme rendu lcran, et donc consomme
des ressources de lordinateur. Toutefois, il reste interactif, il est possible de
cliquer dessus par exemple.

Supprimer un objet daffichage de la mmoire


ce stade du cours, pour supprimer un objet daffichage de la mmoire, il est ncessaire
de respecter les points suivants :
lobjet ne doit pas faire partie de la liste daffichage, cest--dire quil ne doit pas
tre lenfant dun conteneur ;
il ne doit plus y avoir une seule rfrence cet objet.
Nous tofferons cette liste au fur-et--mesure du cours, lorsque nous aborderons de
nouvelles notions, afin que vous soyez experts en mmoire non-sature !
Pour supprimer un objet de la liste daffichage, vous pouvez utiliser la mthode removeChild()
de la classe DisplayObjectContainer :
1

var maVoiture : Voiture = new Voiture () ;

245

CHAPITRE 13. LES OBJETS DAFFICHAGE


2
3
4

rue . addChild ( maVoiture ) ;


// Supprimons la voiture de la liste d ' affichage
rue . removeChild ( maVoiture ) ;

Lobjet en question doit tre un enfant du conteneur, sinon, une erreur sera
envoye lappel de la mthode removeChild().
Si jamais vous voulez supprimer lobjet daffichage depuis sa propre classe, il faut
utiliser lattribut parent et ruser un peu :
1
2
3

package
{
import flash . display . Sprite ;

public class Voiture extends Sprite


{
public function Voiture ()
{

5
6
7
8
9

10
11
12
13
14

15
16
17
18
19
20

21

public function removeFromParent () : void


{
// V rifions que la voiture est sur la liste d '
affichage ( cad . que le parent existe ) avant d '
appeler removeChild ()
if ( parent != null )
{
// Supprimons l ' objet de la liste d ' affichage
parent . removeChild ( this ) ;
}
}

22
23

Mais comment supprimer une rfrence un objet ?

Cest trs simple : il suffit daffecter la variable en question avec le mot-cl null :
1
2
3
4
5
6

var maVoiture : Voiture = new Voiture () ;


rue . addChild ( maVoiture ) ;
// Supprimons la voiture de la liste d ' affichage
rue . removeChild ( maVoiture ) ;
// Supprimons la r f rence la voiture !
maVoiture = null ;

246

SUPPRIMER UN OBJET DAFFICHAGE DE LA MMOIRE


ce stade, lobjet de la classe Voiture na pas encore t supprim : il est encore dans la
mmoire de votre ordinateur. Il sera effectivement supprim lorsque le ramasse-miette
(garbage-collector en anglais) sera pass pour nettoyer la mmoire. Seulement, pour
que le ramasse-miette puisse faire son travail, et dterminer quels objets doivent tre
supprims, il faut respecter les points numrs ci-dessus. On dit alors que ces objets
sont ligibles au nettoyage par le ramasse-miette.
Vous remarquerez ainsi quil nexiste aucun moyen de supprimer un objet
directement de la mmoire, sauf pour quelques rares exceptions. La plupart
du temps, il faut laisser le ramasse-miette le faire notre place. Cela marche
donc pour tous les objets, pas seulement les objets daffichage ; mais dans ce
cas, inutile dessayer de retirer de la liste daffichage des objets qui nont rien
voir ! Supprimer leurs rfrences suffit pour linstant.

En rsum
En ActionScript 3, les couleurs sont dcrites en notation hexadcimale, prcdes des caractres 0x (zro et x).
Laffichage sur un cran se fait dans un repre partant du coin suprieur gauche de
lcran. Les coordonns en x vont de gauche droite, et en y de haut en bas.
Les objets daffichage sont contenus dans un arbre : ils peuvent contenir
chacun des enfants pouvant eux-mme contenir dautres enfants.
On peut manipuler les enfants des conteneurs laide des proprits de la classe
DisplayObjectContainer.
Une multitude de proprits de la classe DisplayObject permet de manipuler les
objets daffichage.
Il faut respecter quelques consignes pour quun objet daffichage soit supprim de
la mmoire par le ramasse-miette.

247

CHAPITRE 13. LES OBJETS DAFFICHAGE

248

Chapitre

14

Afficher du texte
Difficult :
Mesdames, Messieurs, jai lhonneur de vous prsenter le premier chapitre o nous allons
pouvoir afficher quelque chose sur notre fentre encore jusqu prsent si dsesprment
vide ! Et il sagit rien de moins que du texte, grce une classe que nous allons retourner
dans tous les sens : TextField.
Que le spectacle commence !

249

CHAPITRE 14. AFFICHER DU TEXTE

Une histoire de TextField


La classe
Comme vous laurez srement compris, nous allons utiliser dans ce chapitre la classe
TextField. Pour vous aidez vous situer, reprenons le diagramme des classes des
objets daffichage la figure 14.1.

Figure 14.1 TextField parmi larbre des classes daffichage

Comme vous pouvez le voir, la classe TextField est une sous-classe de InteractiveObject,
elle hrite donc de toutes les fonctionnalits qui permettent lutilisateur dinteragir
avec les objets TextField (clic, slection de texte, frappe au clavier, etc.). Mais cest
aussi un objet daffichage comme les autres car la classe InteractiveObject est fille
de la classe DisplayObject : nous pouvons donc bouger, redimensionner ou tourner
nos champs de texte comme bon nous semble, voir les rendre semi-transparents !
Comme dhabitude, je vous conseille de lire la documentation sur la classe
disponible en ligne.

Documentation TextField
B
Code web : 535015

250

UNE HISTOIRE DE TEXTFIELD

Utilisation de base
Crer un champ de texte
Comme toutes les classes des objets daffichage, la classe TextField dispose dun
constructeur sans paramtre. Nous allons donc lutiliser pour crer des champs
de texte comme suit :
1

var monSuperTexte : TextField = new TextField () ;

Du texte brut
Lattribut text contient le texte brut (cest--dire non format) qui est affich dans le
champ de texte. Par dfaut, le texte est vide, cest--dire que lattribut contient une
chane de caractres vide : "".
Il sutilise comme nimporte quel autre attribut :
1
2

// Affectation d ' un texte brut


monSuperTexte . text = ' Hello World ! ';

3
4
5
6

// Avec une variable :


var maSuperChaine : String = ' Je m \ ' apelle Zozor ! ';
monSuperTexte . text = maSuperChaine ;

7
8
9

// Lecture du contenu brut du champ de texte :


trace ( ' Zozor a dit : " ' + monSuperTexte . text + '" ') ; // Affiche
: Zozor a dit : " Je m ' appelle Zozor !"

ne pas oublier !
Pour que notre champ de texte soit affich, il ne faut surtout pas oublier de lajouter
sur la liste daffichage, cest--dire quil faut lajouter parmi les enfants dun conteneur !
Ainsi, dans notre classe Main, crivons ceci :
1
2

// Ajoutons le champ de texte sur la sc ne principale :


addChild ( monSuperTexte ) ;

Rappel : la classe Main est une sous-classe de la classe Sprite, elle-mme


une sous-classe de la classe DisplayObjectContainer ! Nous pouvons donc
y ajouter des objets daffichage (nous serions bien embts sinon).

Le rsultat
Par dfaut, la couleur du texte est le noir et sans dcoration (bordure ou fond), la
police utilise est une police par dfaut de votre systme (Times New Roman sur
251

CHAPITRE 14. AFFICHER DU TEXTE


Windows/Linux et Times sur Mac), la taille est de 12 points et le texte nest pas
ditable. Mais ne vous inquitez pas, tout ceci est entirement paramtrable comme
certains ont pu le remarquer en lisant la documentation en ligne.
Pour que vous puissiez vrifier votre code, voici lensemble de la classe Main permettant
dafficher du texte lcran :
1
2
3
4
5

package
{
import flash . display . Sprite ;
import flash . events . Event ;
import flash . text . TextField ;

/* *
* Cette application sait afficher du texte !
*/
[ SWF ( width = " 800 " , height = " 600 " , backgroundColor = " # ffffff " ) ]

7
8
9
10
11

public class Main extends Sprite


{

12
13
14

public function Main () : void


{
if ( stage )
init () ;
else
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

15
16
17
18
19
20
21
22

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point

23
24
25
26
27
28
29
30
31
32

33

// Mon premier champ de texte ! \ o /


var monSuperTexte : TextField = new TextField () ;
monSuperTexte . text = ' Hello World ! ';
addChild ( monSuperTexte ) ;

34
35

Pour que vous puissiez voir quelque chose, vrifiez que


la couleur de fond de votre animation est en blanc :
[SWF(width="800",height="600",backgroundColor="#ffffff")].
Du texte noir sur fond noir par exemple, ce nest pas ce quil y a de plus
lisible.
La figure 14.2 vous montre ce que cela donne lcran.
252

UNE HISTOIRE DE TEXTFIELD

Figure 14.2 Notre premier champ de texte !


Javoue que ce nest pas trs joli, mais nous allons amliorer cela dans peu de temps.
La taille par dfaut dun champ de texte est 100 pixels de largeur et 100 pixels
de hauteur. Il est bien entendu possible de la modifier.
Pour le vrifier visuellement, nous pouvons afficher une bordure autour du champ de
texte :
1

monSuperTexte . border = true ;

Ce qui donne lcran la figure 14.3.

Figure 14.3 Le champ de texte, avec sa bordure


Ce nest pas ce quil y a de plus esthtique, alors enlevons la bordure en commentant
la ligne que nous venons dajouter :
1

// monSuperTexte . border = true ;

Maintenant que nous avons un vritable objet daffichage sous la main, exerons-nous
utiliser ses proprits.
Commenons par dplacer notre champ de texte la position (200, 100) :
1
2

monSuperTexte . x = 200 ;
monSuperTexte . y = 100 ;

Vous devriez maintenant avoir quelque chose ressemblant la figure 14.4.


Je le trouve un peu trop petit, pas vous ? Allez, triplons sa taille :
253

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.4 Position (200, 100)


1
2
3

// Taille x3 !
monSuperTexte . scaleX = 3 ;
monSuperTexte . scaleY = 3 ;

Ce qui donne lcran la figure 14.5.


Dsormais, la taille de notre champ de texte est 300 pixels de largeur et 300 pixels de
hauteur. Pour mieux le voir, nous pouvons remettre la bordure notre champ de texte
en dcommentant cette ligne :
monSuperTexte . border = true ;

Ce qui donne lcran la figure 14.6.


Pour rcapituler (voir figure 14.7), nous avons :

Cr une instance de la classe TextField.


Dfini le texte du champ de texte.
Ajout le champ de texte laffichage.
Modifi sa position.
Modifi son chelle de taille.
Il est impossible de faire tourner du texte ou de changer son opacit dans
ltat actuel, car nous utilisons le systme pour rendre les caractres, ce qui
implique ces limitations. Si vous changez tout de mme la rotation ou lopacit
du champ de texte, les caractres ne seront plus affichs. Pour contourner ce
problme, il faut utiliser des polices de caractres embarques afin que les
caractres soient rendus directement par le lecteur Flash. Nous apprendrons
comment faire la fin de ce chapitre.

254

UNE HISTOIRE DE TEXTFIELD

Figure 14.5 Notre champ de texte, quatre fois plus grand

Figure 14.6 Le champ de texte agrandi, avec sa bordure

255

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.7 Rcapitulatif des oprations

Slection du texte
Curseur dinsertion
Tous les champs de texte disposent dun curseur dinsertion, reprsent par une
barre verticale. Lorsque le champ de texte nest pas ditable, on dit quil est statique.
Dans ce cas, le curseur dinsertion est toujours invisible. Jusquici, notre champ de
texte est statique.
Dfinir une slection
Il est possible de slectionner une portion de texte directement laide de la mthode
setSelection() de la classe TextField, qui prend en paramtre la position du premier
caractre slectionner et la position du caractre aprs le dernier caractre de la
slection. Par exemple, pour slectionner les deux premires lettres, on crira ceci :
1

monSuperTexte . setSelection (0 , 2 ) ;

Nous mettons 2 en deuxime paramtre, car il faut passer la position du


caractre aprs le dernier caractre slectionner, cest--dire la position du
dernier caractre slectionner (le numro 1) plus une.
256

UNE HISTOIRE DE TEXTFIELD


Si vous testez le programme maintenant, vous ne verrez pas le texte slectionn : cest
normal, car par dfaut les champs de texte qui nont pas le focus, cest--dire qui ne
sont pas actifs, naffichent pas la slection du texte. Pour rendre un champ de texte
actif, la manire la plus simple est de cliquer dessus. Il existe cependant un moyen
dafficher tout de mme la slection, mme si le champ de texte na pas le focus : on
met lattribut alwaysShowSelection true :
1

monSuperTexte . alwaysShowSelection = true ;

Ce qui nous donne lcran la figure 14.8.

Figure 14.8 Les deux premires lettres sont slectionnes.

Accder la slection
Il est possible de savoir quelles positions le texte slectionn dbute et se termine. Nous
disposons pour cela des attributs selectionBeginIndex, position du premier caractre
slectionn, et selectionEndIndex, position du dernier caractre slectionn :
1

trace ( " S lection : " + monSuperTexte . selectionBeginIndex + " ->


" + monSuperTexte . selectionEndIndex ) ; // Affiche 0 -> 2

Pour obtenir le texte slectionn, nous utiliserons la mthode substring de lattribut


text:String du champ de texte :
1

trace ( " Texte s lectionn : " + monSuperTexte . text . substring (


monSuperTexte . selectionBeginIndex , monSuperTexte .
selec tionEndIndex ) ) ; // Affiche : He

La valeur renvoye par selectionEndIndex correspond la position du


caractre aprs le dernier caractre slectionn (autrement dit, la position
du dernier caractre slectionn + 1). Cela tombe bien car la mthode
substring prend les caractres jusqu la deuxime position passe en paramtre moins une. Nous obtenons donc le bon texte.

Empcher la slection du texte


Par dfaut, le texte contenu par un champ de texte peut tre slectionn par lutilisateur, puis ventuellement copi. Le curseur se change alors en curseur de texte.
Ce comportement peut tre gnant, par exemple, si vous utilisez un champ de texte
pour crer un bouton. Pour le dsactiver, il suffit de mettre lattribut selectable de
la classe TextField false :
257

CHAPITRE 14. AFFICHER DU TEXTE


1

monSuperTexte . selectable = false ;

Centrer le champ de texte


De la manire dont nous lavons plac jusquici, notre texte nest pas exactement au
centre de la fentre. Pour remdier cela, il nous faut connatre la taille exacte de la
scne !

Un mot sur la scne principale


La classe Stage
Comme nous lavons vu prcdemment, une instance de la classe Stage est automatiquement cre au lancement de notre programme : il sagit de la scne principale.
La scne principale est un objet daffichage comme on peut le voir sur le schma des
classes daffichage la figure 14.9.

Figure 14.9 La classe Stage parmis les autres classes daffichage


La classe Stage est donc une sous-classe de la classe DisplayObjectContainer : elle
hrite donc de toutes ses proprits et sapparente un conteneur comme ceux que
nous avons vu au chapitre prcdent. Il y a tout de mme quelques diffrences :
On ne peut pas crer de scnes principales nous-mme car la classe Stage est
abstraite.
La plupart des proprits de la classe DisplayObjectContainer ne fonctionnent pas.
La classe Stage dispose de nouvelles proprits spcifiques.
Voici une liste des proprits que nous avons dj abordes et qui sont sans effet pour
la classe Stage :
258

CENTRER LE CHAMP DE TEXTE

alpha
rotation
scaleX
scaleY
visible
x
y

Inutile donc dessayer de modifier ces attributs, cela naura aucun impact sur la scne
principale. Par contre, il est toujours possible dutiliser les attributs de linstance de
notre classe Main afin davoir un impact sur lensemble de notre arbre daffichage. Par
exemple, si lon veut rendre la scne invisible, nous pouvons mettre ce code dans notre
classe Main :
1
2

// Dans la classe Main


this . visible = false ; // Toute la sc ne est invisible !

3
4

visible = false ; // On peut omettre le mot - cl this

Il est possible daccder la scne principale grce lattribut stage disponible sur
nimporte quel objet daffichage driv de la classe DisplayObject, condition que cet
objet soit prsent dans larbre daffichage.
1
2
3
4
5

// On ne peut acc der la sc ne depuis notre objet voiture


seulement s ' il est pr sent dans l ' arbre d ' affichage :
var voiture : Sprite = new Sprite () ;
trace ( voiture . stage ) ; // Affiche null
addChild ( voiture ) ;
trace ( voiture . stage ) ; // Affiche [ object Stage ]

Cela signifie que lon peut accder la scne principale depuis notre classe Main
comme ceci :
1
2

// Dans la classe Main , dans la m thode init ()


trace ( this . stage ) ; // Affiche [ object Stage ]

3
4
5

// Comme d ' habitude , il est possible d ' omettre le mot - cl this


:
trace ( stage ) ; // Affiche [ object Stage ]

Le code par dfaut propos par FlashDevelop


Il est temps de vous expliquer pourquoi le code par dfaut de notre classe Main contient
plus de choses que pour les autres classes que nous avons cres lorsque nous utilisons
FlashDevelop. Comme nous lavons vu prcdemment, on ne peut accder la scne
daffichage que si notre objet est prsent dans larbre daffichage. Ainsi, le code
par dfaut de notre classe Main permet de vrifier si notre objet de la classe est bien
prsent dans larbre avant dappeler la mthode init(). Si jamais ce ntait pas encore
le cas (par exemple, si le lecteur Flash met un peut de temps lancer le programme),
259

CHAPITRE 14. AFFICHER DU TEXTE


nous aurions des problmes pour utiliser les proprits de la scne principale : en
effet, lattribut stage serait null ! Reprenons le code par dfaut de la classe Main et
commentons un peu pour mieux comprendre :

1
2
3
4
5

package
{
// Classes n cessaires
import flash . display . Sprite ;
import flash . events . Event ;

/* *
* La classe de base sans modification .
*/
[ SWF ( width = " 640 " , height = " 480 " , backgroundColor = " # ffffff " ) ]

7
8
9
10
11

public class Main extends Sprite


{
// Constructeur
public function Main () : void
{
if ( stage ) // Si l ' attribut stage est d fini ( c 'est
- - dire , si il est diff rent de null )
init () ; // Alors , on appelle la m thode init ()
tout de suite
else // Sinon
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
// On attend que notre instance de la classe
Main soit ajout e l ' arbre de l ' affichage
}

12
13
14
15
16
17
18
19
20

21
22

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ; //
On arr te d ' attendre

23
24
25
26
27
28

29

// Nous pouvons commencer coder ici en tout s r


nit

30
31

Le code qui permet dattendre que lobjet soit ajout larbre daffichage
utilise la notion dvnement, notion que nous aborderons dans la partie
suivante.

260

CENTRER LE CHAMP DE TEXTE


La taille de la scne
Revenons nos moutons et intressons-nous la taille de la fentre de notre programme.
On peut y accder grce deux attributs de la classe Stage (voir figure 14.10) :
stageWidth pour connatre la largeur de la scne.
stageHeight pour la hauteur.

Figure 14.10 La taille de la scne principale


Par exemple, nous pouvons crire ceci dans notre classe Main pour afficher la taille de
la scne principale :
1

trace ( " La sc ne principale a pour dimensions " + stage .


stageWidth + " x " + stage . stageHeight ) ;

La console affichera alors :


La sc ne principale a pour dimensions 640 x480

Cela correspond la configuration de notre programme qui se trouve cette ligne :


1

[ SWF ( width = " 640 " , height = " 480 " , backgroundColor = " # ffffff " ) ]

261

CHAPITRE 14. AFFICHER DU TEXTE


Il ne faut pas confondre les attributs stageWidth et stageHeight qui
donnent les dimensions de la scne principale, avec les attributs width et
height qui donnent la taille du contenu de la scne !
En effet, nous nobtenons pas le mme rsultat dans les deux cas. Pour le vrifiez,
ajoutons ce code :
trace ( " Le contenu de la sc ne principale a pour taille " +
stage . width + " x " + stage . height ) ;

Ensuite, la console affiche ceci :


La sc ne principale a pour dimensions 640 x480
Le contenu de la sc ne principale a pour taille 300 x300

Comme le montre la figure 14.11, la taille du contenu de la scne est souvent diffrente
des dimensions de la scne.

Figure 14.11 La taille du contenu de la scne par rapport aux dimensions de la scne

Adapter la taille du champ de texte au texte


Pour centrer le champ de texte, il serait intressant que celui-ci fasse la mme taille
que celle du texte lintrieur. Pour linstant, notre champ de texte fait 300 pixels de
262

CENTRER LE CHAMP DE TEXTE


largeur et 300 pixels de hauteur, ce qui est beaucoup trop. Nous pouvons dire au champ
de texte dadapter sa taille grce son attribut autoSize :
1

monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;

Sans oublier dimporter la classe TextFieldAutoSize (qui contient les valeurs autorises
pour lattribut autoSize) :
1

import flash . text . TextFieldAutoSize ;

Petite astuce si vous programmez avec FlashDevelop : appuyez simultanment sur Ctrl + Alt + Espace (au lieu de lhabituel Ctrl + Espace)
et commencez taper Text, lauto-compltion va vous proposer toutes les
classes possibles dont celle qui nous intresse ici.
Dsormais, nous avons lcran la figure 14.12.

Figure 14.12 La taille du champ de texte correspond la taille du texte


Nous pouvons afficher la taille du champ de texte pour tre sr de nous :
1

trace ( " Taille : " + monSuperTexte . width + " x " + monSuperTexte .


height ) ; // Affiche 199 . 95x52 . 95

263

CHAPITRE 14. AFFICHER DU TEXTE

Modifier la position du champ de texte


Il est temps de centrer notre champ de texte ! Nous allons procder en trois tapes pour
bien dtailler lopration.
Etape 1
Commenons par placer lorigine de notre champ de texte au centre de lcran. Pour
cela, il suffit dutiliser les attributs stageWidth et stageHeight que nous venons de
voir :
1
2

monSuperTexte . x = stage . stageWidth / 2 ;


monSuperTexte . y = stage . stageHeight / 2 ;

Ce qui nous donne lcran la figure 14.13.

Figure 14.13 Lorigine du champ de texte est centre


Notre champ de texte nest pas encore entirement centr, mais nous y sommes presque !
Etape 2
Nous allons maintenant retrancher la moiti de la largeur de notre champ de texte
sa position x pour centrer notre champ de texte horizontalement :
264

CENTRER LE CHAMP DE TEXTE


1

monSuperTexte . x -= monSuperTexte . width / 2 ;

Ce qui nous donne lcran la figure 14.14.

Figure 14.14 Notre champ de texte, centr horizontalement

Etape 3
Pour finir, nous rptons la mme chose, mais verticalement : nous retranchons la
moiti de la hauteur de notre champ de texte sa position y :
1

monSuperTexte . y -= monSuperTexte . height / 2 ;

Ce qui nous donne la figure 14.15.


En rsum
Lopration sest donc droule en trois tapes :
On centre lorigine de lobjet en utilisant stage.stageWidth et stage.stageHeight.
On retranche la moiti de sa largeur sa position horizontale x.
On retranche la moiti de sa hauteur sa position verticale y.
Et voici le code complet concernant notre champ de texte :
265

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.15 Notre champ de texte, au centre de la scne !

266

CENTRER LE CHAMP DE TEXTE


1
2
3
4

// Cr ons notre champ de texte


var monSuperTexte : TextField = new TextField () ;
monSuperTexte . text = ' Hello World ! ';
addChild ( monSuperTexte ) ;

5
6
7
8

// Multiplions sa taille par quatre


monSuperTexte . scaleX = 4 ;
monSuperTexte . scaleY = 4 ;

9
10
11

// Activons la bordure
monSuperTexte . border = true ;

12
13
14

// Adaptons la taille du champ de texte au texte


monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;

15
16
17
18

// Centrons l ' origine


monSuperTexte . x = stage . stageWidth / 2 ;
monSuperTexte . y = stage . stageHeight / 2 ;

19
20
21
22

// Retranchons la moiti de sa taille sa position


monSuperTexte . x -= monSuperTexte . width / 2 ;
monSuperTexte . y -= monSuperTexte . height / 2 ;

Nous pouvons compacter la dernire partie de notre code qui permet de centrer le
champ de texte :
1
2
3

// Centrons le champ de texte


monSuperTexte . x = stage . stageWidth / 2 - monSuperTexte . width /
2;
monSuperTexte . y = stage . stageHeight / 2 - monSuperTexte . height
/ 2;

Nous pouvons encore simplifier en factorisant :


1
2
3

// Centrons le champ de texte


monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

Cette mthode pour aligner au centre de la scne fonctionne bien videmment


avec tous les objets daffichage, pas seulement les champs de texte.

Pour linstant, il nous est impossible de faire tourner notre champ de texte
car il utilise une police de votre systme pour le rendu. Pour contourner ce
problme, il nous faut embarquer notre propre police de caractre, comme
nous le verrons dans un prochain chapitre.

267

CHAPITRE 14. AFFICHER DU TEXTE

La mise en forme
Formatons notre champ de texte
Mise en forme par dfaut
Formater du texte est possible grce la classe TextFormat (dont la documentation est disponible en ligne). Tout objet de classe TextField dispose dun attribut
defaultTextFormat de type TextFormat. Cet attribut permet de modifier la mise en
forme par dfaut du texte contenu dans le champ de texte, cela signifie quun texte qui
na pas de mise en forme spcifique recevra automatiquement cette mise en forme par
dfaut.


Documentation TextFormat
B
Code web : 348025


La mise en forme par dfaut doit tre applique avant de dfinir le texte.

Pour modifier la mise en forme par dfaut de notre champ de texte, nous procderons
ainsi :
1
2

// Cr ation de l ' instance du champ de texte


var monSuperTexte : TextField = new TextField () ;

3
4
5

// Cr ation de l ' instance de la classe TextFormat


var format : TextFormat = new TextFormat () ;

6
7

// Modifications du format ici

8
9
10

// Application du format au champ de texte


monSuperTexte . defaultTextFormat = format ;

11
12
13

// Texte afficher - apr s la mise en forme par d faut


monSuperTexte . text = " Hello World ! " ;

14
15
16

// Ajout du champ de texte l ' affichage


addChild ( monSuperTexte ) ;

La mise en forme par dfaut nest mise jour que si nous affectons un objet
de classe TextFormat lattribut defaultTextFormat. Si nous modifions
directement les attributs de defaultTextFormat, il ne se passera rien. Noubliez pas quil faut que le texte soit dfini aprs avoir mis jour la mise en
forme par dfaut.

268

LA MISE EN FORME
Lheure du changement est arrive
Nous allons dans un premier temps modifier la taille, la police de caractre et la couleur de notre texte. En se renseignant dans la documentation, nous pouvons noter les
diffrents attributs correspondants :
size:Object (entier) pour la taille du texte en pixels.
font:String (chane de caractre) pour le nom de la police de caractre utiliser.
color:Object (entier positif) pour la couleur du texte.
Avant de commencer, rendons sa taille normale notre champ de texte en supprimant
(ou commentant) les lignes qui modifient son chelle :
1
2

// monSuperTexte . scaleX = 3 ;
// monSuperTexte . scaleY = 3 ;

Exerons-nous modifier la mise en forme de notre champ de texte : notre texte doit
tre de taille 42, utilisant la police de caractre Arial et colori en bleu (dont le code
hexadcimal est 0x0000ff).
1
2

// Cr ation de l ' instance du champ de texte


var monSuperTexte : TextField = new TextField () ;

3
4
5

// Cr ation de l ' instance de la classe TextFormat


var format : TextFormat = new TextFormat () ;

6
7
8
9
10

// Mise en forme
format . size = 42 ;
format . font = " Arial " ;
format . color = 0x0000ff ;

11
12
13

// Application du format au champ de texte


monSuperTexte . defaultTextFormat = format ;

14
15
16

// Texte
monSuperTexte . text = " Hello World ! " ;

17
18
19

// Bordure
monSuperTexte . border = true ;

20
21
22

// Taille adaptative
monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;

23
24
25
26

// Centrons le champ de texte


monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

27
28
29

// Ajout du champ de texte l ' affichage


addChild ( monSuperTexte ) ;

Ce qui nous donne la figure 14.16.


269

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.16 Le texte bleu, en Arial et en taille 42


Vous remarquerez quil est possible de positionner lobjet daffichage avant
quil ne soit ajout larbre daffichage.

Si vous vous trompez en crivant le nom de la police, ou que celle-ci nest


pas installe sur le systme de lutilisateur, la police par dfaut sera utilise
la place.

Pourquoi certains de ces attributs ont pour type Object au lieu de int ou
uint ?
Cest trs simple : les attributs de la classe TextFormat ont pour valeur par dfaut
null, pour signifier quil faut utiliser les valeurs par dfaut de mise en forme (que lon
peut trouver dans la documentation, en haut de la page). Or, les attributs de type int
ou uint ne peuvent pas valoir null, donc on est oblig dutiliser le type Object (type
indfini, dont les variables peuvent valoir null). On aurait aussi pu utiliser le type *,
quivalent au type Object.
Le constructeur de la classe TextFormat permet de dfinir directement certains attributs. Ainsi, nous pourrions simplifier notre code en utilisant le constructeur de la classe
TextFormat ainsi que nous lindique la documentation en ligne.
TextFormat ( font : String = null , size : Object = null , color : Object
= null , bold : Object = null , italic : Object = null , underline
: Object = null ,
url : String = null , target : String = null , align : String =
null , leftMargin : Object = null , rightMargin : Object =
null , indent : Object = null , leading : Object = null )

Nous pouvons donc crire :


1
2

// Cr ation de l ' instance de la classe TextFormat


var format : TextFormat = new TextFormat ( " Arial " , 42 , 0x0000ff ) ;

3
4
5

// Application du format au champ de texte


monSuperTexte . defaultTextFormat = format ;

Nous pouvons galement mettre le texte en gras, italique, ou soulign, grce ces
attributs de la classe TextFormat :
bold:Object (boolen) pour mettre le texte en gras.
italic:Object (boolen) pour le mettre en italique.
270

LA MISE EN FORME
underline:Object (boolen) pour le souligner.
Notre code pour la mise en forme ressemble maintenant ceci :
1
2
3
4
5
6
7

// Mise en forme
format . size = 42 ;
format . font = " Arial " ;
format . color = 0x0000ff ;
format . bold = true ;
format . italic = true ;
format . underline = true ;

Nous pouvons galement utiliser le constructeur :


1
2

// Cr ation de l ' instance de la classe TextFormat


var format : TextFormat = new TextFormat ( " Arial " , 42 , 0x0000ff ,
true , true , true ) ;

3
4
5

// Application du format au champ de texte


monSuperTexte . defaultTextFormat = format ;

Ce qui nous donne la figure 14.17.

Figure 14.17 Le texte en gras, italique et soulign


Nous avons seulement vu les principaux attributs, mais rien ne vous empche de jeter
un coup dil la documentation pour voir tout ce quil est possible de faire.
Modifier la mise en forme par dfaut
Une fois la mise en forme par dfaut dfinie, le texte que nous ajoutons notre champ
de texte prend par dfaut cette mise en forme. Ensuite, vous aurez srement envie de
modifier cette mise en forme par dfaut. Avec un peu dastuce, cest possible ! Il suffit
daffecter de nouveau notre objet de classe TextFormat lattribut defaultTextFormat
de notre champ de texte, puis raffecter son texte :
1
2

// Cr ation de l ' instance du champ de texte


var monSuperTexte : TextField = new TextField () ;

3
4
5

// Cr ation de l ' instance de la classe TextFormat


var format : TextFormat = new TextFormat () ;

6
7
8
9
10
11

// Mise en forme
format . size = 42 ;
format . font = " Arial " ;
format . color = 0x0000ff ;
format . bold = true ;

271

CHAPITRE 14. AFFICHER DU TEXTE


format . italic = true ;
format . underline = true ;

12
13
14
15
16

// Application du format au champ de texte


monSuperTexte . defaultTextFormat = format ;

17
18
19

// Texte
monSuperTexte . text = " Hello World ! " ;

20
21
22

// Bordure
monSuperTexte . border = true ;

23
24
25

// Taille adaptative
monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;

26
27
28
29

// Centrons le champ de texte


monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

30
31
32

// Ajout du champ de texte l ' affichage


addChild ( monSuperTexte ) ;

33
34

// ...

35
36
37

// Changeons en cours de route pour du rouge


format . color = 0xff0000 ;

38
39
40

// Mise jour du format par d faut


monSuperTexte . defaultTextFormat = format ;

41
42
43

// Il faut red finir le texte pour appliquer la nouvelle mise


en forme par d faut
monSuperTexte . text = monSuperTexte . text ;

Ce qui affiche la figure 14.18.

Figure 14.18 Nous avons troqu le bleu pour du rouge

Mise en forme spcifique


Il est possible dcraser la mise en forme par dfaut, pour tout ou une partie du texte,
grce la mthode setTextFormat() de la classe TextField, qui prend en paramtre
un objet de la classe TextFormat, la position du premier caractre et la position du
caractre aprs le dernier caractre du texte dont on souhaite modifier la mise en forme.
272

LA MISE EN FORME
Ces deux positions commencent par zro, comme pour les tableaux.
Rappel : si vous ne souhaitez pas changer des attributs dans la mise en forme
spcifique, il faut que ces attributs valent null. Ainsi ils naurons pas deffet
sur le texte. Ainsi, il est prfrable de crer une nouvelle instance de la classe
TextFormat, pour tre sr que tous les attributs sont null.
Changeons la taille de la premire lettre pour 72. La premire lettre est la position
0, et la lettre aprs elle est la position 1 :
1
2

// Nouvelle instance de la classe TextFormat ( on peut r


utiliser le m me pointeur " format ")
format = new TextFormat () ;

3
4

format . size = 72 ;

5
6
7

// Application du nouveau format la premi re lettre


monSuperTexte . setTextFormat ( format , 0 , 1 ) ;

Ce qui nous donne la figure 14.19.

Figure 14.19 La premire lettre est en taille 72


Comme vous pouver le remarquer, notre lettre est coupe en haut droite ; cest un effet
de bord de litalique. Nous pouvons remdier cela grce lattribut letterSpacing
qui spcifie la largeur de lespace entre les lettres. Mettons-la 3 pixels :
1
2

// Nouvelle instance de la classe TextFormat ( on peut r


utiliser le m me pointeur " format ")
format = new TextFormat () ;

3
4
5

format . size = 72 ;
format . letterSpacing = 3 ;

6
7
8

// Application du nouveau format la premi re lettre


monSuperTexte . setTextFormat ( format , 0 , 1 ) ;

Ainsi, il y aura 3 pixels despace entre la premire lettre et la deuxime (voir figure
14.20).
Essayons de colorier le mot World en bleu et de lui enlever litalique !
1
2

// Je stocke le mot que je veux colorier


var motBleu : String = " World " ;

273

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.20 Le dfaut est corrig !


4
5
6
7
8

// Je cherche les positions ad quates pour la m thode


setTextFormat
// Position de d but , gr ce la m thode indexOf de la classe
String
var positionDebut : int = monSuperTexte . text . indexOf ( motBleu ) ;
// Position de fin , en ajoutant la longueur du mot
var positionFin : int = positionDebut + motBleu . length ;

9
10
11
12
13

// Je cr le format
format = new TextFormat () ;
format . color = 0x0000ff ;
format . italic = false ;

14
15
16

// J ' applique le format aux positions que nous avons calcul es


monSuperTexte . setTextFormat ( format , positionDebut , positionFin )
;

Ce qui nous donne la figure 14.21.

Figure 14.21 Le mot World en bleu sans litalique

Gestion du multi-ligne
Champ de texte taille fixe
Nous allons maintenant dcouvrir comment grer un champ de texte multi-lignes.
Tout dabord, il nous faut un texte plus long que Hello World ! . Vous pouvez trouver
du Lorem Ipsum (texte latin de remplissage) en ligne.


Lorem Ipsum
B
Code web : 951790

var monSuperTexte : TextField = new TextField () ;

2
3
4

var format : TextFormat = new TextFormat ( " Arial " , 14 , 0x000000 ) ;


monSuperTexte . defaultTextFormat = format ;

274

LA MISE EN FORME
5
6
7

// Texte suffisamment long


monSuperTexte . text = " Lorem ipsum dolor sit amet , consectetur
adipiscing elit . In pharetra magna imperdiet elit pretium a
malesuada nisl pellentesque . " ;

8
9

monSuperTexte . border = true ;

10
11

addChild ( monSuperTexte ) ;

12
13
14
15

// Centre
monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

Pour linstant, cela donne la figure 14.22.

Figure 14.22 Le texte sort du champ de texte


Nous aimerions bien que le texte revienne automatiquement la ligne. Pour cela, il
faut mettre lattribut multiline de la classe TextField true pour activer les lignes
multiples, et lattribut wordWrap true galement, pour activer le retour la ligne
automatique :
1
2

monSuperTexte . multiline = true ;


monSuperTexte . wordWrap = true ;

275

CHAPITRE 14. AFFICHER DU TEXTE


Ce qui donne lcran la figure 14.23.

Figure 14.23 Retour la ligne automatique


Le texte dpasse dsormais en bas du champ de texte. Toutefois, par dfaut, on peut
dfiler dans le champ de texte avec la molette de la souris. Si vous voulez dsactiver ce
comportement, il faut mettre lattribut mouseWheelEnabled de la classe TextField
false :
monSuperTexte . mouseWheelEnabled = false ;

Le champ de texte est peut-tre un peu trop troit, augmentons sa largeur (avant le
code qui le centre) :
1
2

// Modifions la largeur du champ de texte


monSuperTexte . width = 300 ;

3
4
5
6

// Centre
monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

Ce qui nous donne la figure 14.24.

Figure 14.24 Largeur de 300 pixels

Aligner le texte
Il est possible de changer lalignement du texte grce lattribut align de la classe
TextFormat. Cet attribut accepte les valeurs constantes dfinies dans la classe TextFormatAlign.
Par exemple, pour que notre texte soit align au centre :
1
2
3

var format : TextFormat = new TextFormat ( " Arial " , 14 , 0x000000 ) ;


format . align = TextFormatAlign . CENTER ; // Texte align au
centre
monSuperTexte . defaultTextFormat = format ;

Sans oublier de bien importer la classe TextFormatAlign au dbut du package :


276

LA MISE EN FORME
1

import flash . text . TextFormatAlign ;

Cela nous donne la figure 14.25.

Figure 14.25 Texte align au centre


Nous pouvons galement centrer le texte droite ou le justifier (voir figures 14.26 et
14.27) :
1
2

// Texte align droite


format . align = TextFormatAlign . RIGHT ;

3
4
5

// Texte justifi
format . align = TextFormatAlign . JUSTIFY ;

Figure 14.26 Texte align droite

Figure 14.27 Texte justifi


Un texte justifi est un texte dont les mots sont espacs de telle sorte que les
lignes de chaque paragraphes remplissent toutes la largeur disponibles, sauf
les dernires lignes. Par exemple, cet alignement est souvent utilis dans
les journaux.

Champ de texte hauteur dynamique


Il est possible dadapter la hauteur du champ de texte son texte sil est multi-ligne,
de la mme manire que nous avions adapt la taille de notre champ de texte contenant
le texte "Hello World!" au chapitre prcdent : avec lattribut autoSize de la classe
TextField :
277

CHAPITRE 14. AFFICHER DU TEXTE


monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;

Ce qui nous donne la figure 14.28.

Figure 14.28 La hauteur est automatiquement adapte au texte


Contrairement ce que nous avons vu au chapitre prcdent, seule la hauteur
est adapte au texte ; la largeur est fixe et cest vous qui la dfinissez. Ceci
est uniquement valable si le champ de texte est multi-lignes, quand lattribut
multiline du champ de texte est true.

Retour la ligne
Il est possible deffectuer des retours la ligne en crivant \n dans le texte :
monSuperTexte . text = " Lorem ipsum dolor sit amet ,\ nconsectetur
adipiscing elit .\ nIn pharetra magna imperdiet elit pretium a
malesuada nisl pellentesque . " ;

Ce qui nous donne la figure 14.29.

Figure 14.29 Deux retours la ligne

En HTML dans le texte


Introduction
Le langage HTML
Le langage HTML est utilis sur les sites web pour structurer le texte, ajouter des
paragraphes, des images, des liens hyper-texte. . . Le langage est un driv du langage
XML, ce qui signifie que sa syntaxe est base sur des balises.
Une balise dispose dun nom, mis entre chevrons, et elle est rpte deux fois :
1

<nom > </ nom >

278

EN HTML DANS LE TEXTE


La premire balise <nom> est la balise ouvrante, et la dernire balise </nom> est la
balise fermante.
Il ne faut pas oublier le slash / pour signifier quil sagit dune balise fermante.

Il est possible dimbriquer des balises dans dautres :


1
2
3
4
5
6

< balise1 >


< balise2 > </ balise2 >
< balise3 >
< balise4 > </ balise4 >
</ balise3 >
</ balise1 >

Ici, la balise 4 est contenue dans la balise 3. Les balises 2 et 3 sont contenues dans la
balise 1.
Attention bien faire correspondre les noms des balises ouvrantes et fermantes !
Chaque balise ouvrante peut disposer dattributs, ayant chacun un nom et une valeur
entre guillemets doubles :
1

< nom attribut1 = " valeur " attribut2 = " valeur " > </ nom >

Si une balise ne contient rien, on peut utiliser sa forme raccourcie :


1

< balise / >

Reprenons lexemple des balises imbriques pour voir ce que cela donnerait :
1
2
3
4
5
6

< balise1 >


< balise2 / >
< balise3 >
< balise4 / >
</ balise3 >
</ balise1 >

Enfin, il est possible de mettre du texte brut lintrieur dune balise :


1

< balise > Quel temps fera -t - il demain ? </ balise >

On peut galement mlanger des balises et du texte brut :


1

< balise1 > Salut ! < balise2 > Comment va la famille ? </ balise2 > </
balise1 >

LHTML est donc du XML avec des balises spciales que nous allons dcouvrir un
peu plus loin.
279

CHAPITRE 14. AFFICHER DU TEXTE


Seule une toute petite partie de ces balises est supporte par la classe
TextField ! Nous ne verrons que celles-ci, mais sachez quil en existe beaucoup dautres. Par ailleurs, il peut y avoir quelques diffrences au niveau des
attributs par rapport au vrai HTML.

Du HTML dans nos champs de texte


Il est possible dutiliser une version trs simplifie de lHTML dans nos champs de
texte en utilisant lattribut htmlText de la classe TextField la place de lattribut
text que nous avons utilis jusque l :
1
2

// Activation du multi - ligne avant de s picifier le texte HTML


monSuperTexte . multiline = true ;

3
4
5

// Texte HTML
monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,
consectetur adipiscing elit . In pharetra magna imperdiet
elit pretium a malesuada nisl pellentesque . ';

Il faut mettre lattribut multiline true avant de spcifier le texte HTML,


sinon les retours la ligne seront ignors, mme si vous mettez multiline
true ensuite.

Balises principales
Retour la ligne
Pour effectuer un retour la ligne dans un texte HTML, nous utiliserons la balise
<br/> comme ceci :
1

monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,


consectetur adipiscing elit . In pharetra magna imperdiet elit
pretium a malesuada nisl pellentesque . ';

Ce qui nous donne la figure 14.30.

Figure 14.30 Deux retours la ligne

280

EN HTML DANS LE TEXTE


Paragraphe
Un paragraphe est un bloc de texte pouvant tre align, qui se termine par un retour
la ligne. La balise utiliser est la balise <p align="alignement">...</p>. Lattribut
align peut prendre les valeurs suivantes :

left pour aligner le texte gauche.


right pour laligner droite.
center pour le centrer.
justify pour le justifier.

Voici un exemple o notre texte est align droite :


1

monSuperTexte . htmlText = ' <p align =" right " > Lorem ipsum dolor
sit amet , consectetur adipiscing elit . In pharetra magna
imperdiet elit pretium a malesuada nisl pellentesque . </p > ';

Ce qui nous donne la figure 14.31.

Figure 14.31 Paragraphe de texte align droite


Voici un autre exemple avec plusieurs paragraphes :
1

monSuperTexte . htmlText = ' <p align =" right " > Lorem ipsum dolor
sit amet , consectetur adipiscing elit . In pharetra magna
imperdiet elit pretium a malesuada nisl pellentesque . </p > ' +
' <p align =" left " > Lorem ipsum dolor sit amet , consectetur
adipiscing elit . In pharetra magna imperdiet elit
pretium a malesuada nisl pellentesque . </p > ';

Vous remarquerez que jai utilis la concatnation de chanes de caractres


avec loprateur + pour pouvoir crire le texte en plusieurs lignes.
Nous avons alors lcran la figure 14.32.

Figure 14.32 Deux paragraphes aligns diffremment

281

CHAPITRE 14. AFFICHER DU TEXTE


Lien
Un lien est une balise cliquable qui permet deffectuer une action, le plus souvent
permettant de changer de site web ou daller sur une autre page. Nous pouvons crer
un lien laide de la balise <a href="adresse" target="cible">nom du lien</a>.
Lattribut href contient ladresse vers laquelle pointe le lien. Lattribut target permet
de spcifier la cible du lien, cest dire o ladresse va souvrir si lon clique dessus. Il
peut prendre les valeurs suivantes :
_self : ouvre le lien dans la mme page.
_blank : ouvre le lien dans une nouvelle fentr e, ou un nouvel onglet si le navigateur
le permet.
Bien sr, ces valeurs nont dintrt que si votre animation Flash est incorpore dans
un site web. Dans les autres cas (par exemple lorsque lon teste le programme), cela
ouvrira une nouvelle fentre (ou un nouvel onglet) dans votre navigateur, mme si la
valeur de lattribut target est _self.
Voici un exemple de texte HTML disposant dun lien pointant sur le Site du Zro :
1

monSuperTexte . htmlText = ' Voulez - vous apprendre partir de z


ro ? <a href =" http :// www . siteduzero . com /" target =" _blank " >
Cliquez ici ! </a > ';

Ce qui nous donne la figure 14.33.

Figure 14.33 Une partie du texte est cliquable


Pour tester lattribut target, vous pouvez ouvrir votre fichier swf dans votre
navigateur favori ( condition quil dispose du lecteur Flash). Vous verrez
alors la page daccueil du Site du Zro se charger dans la mme page ou
souvrir dans une nouvelle fentre ou un nouvel onglet

Image
Il est possible de charger une image locale dans un champ de texte grce la balise <img src="adresse" width="largeur" height="hauteur" align="alignement"
hspace="espacement horizontal" vspace="espacement vertical"/>.
Essayons dafficher Zozor dans notre champ de texte (voir figure 17.1). Tout dabord,
tlchargez limage de Zozor et placez-la dans le dossier de votre fichier swf.


Tlchargez Zozor
B
Code web : 634351


282

EN HTML DANS LE TEXTE

Figure 14.34 Zozor, la mascotte du Site du Zro


Ensuite, renommez limage en zozor.png. Enfin, crivons ce code pour charger limage
dans notre texte HTML :
1

monSuperTexte . htmlText = ' Voici Zozor ! < img src =" zozor . png "
width =" 150 " height =" 150 " align =" right "/ > ';

Ce qui nous donne la figure 14.35.

Figure 14.35 Zozor est dans notre champ de texte !

Il est impossible daligner une image au centre. Il sagit dune limitation du


champ de texte, on ne peut rien y faire.
Si on met un texte plus long ct de limage, il sera dtour. Pour illustrer ceci,
prenons un texte beaucoup plus long ct de Zozor, et alignons-le en justifi. :
1
2
3

monSuperTexte . htmlText = ' < img src =" zozor . png " width =" 150 "
height =" 150 " align =" right "/ > ' +
' <p align =" justify " > Lorem ipsum dolor sit amet , consectetur
adipiscing elit . Sed pharetra semper ullamcorper . ' +
' Sed at urna in elit mollis egestas eu id lectus . Integer
aliquam urna vitae massa varius sed cursus mauris
aliquam . ' +
' Curabitur mauris massa , imperdiet a venenatis ac , vehicula
eu ipsum . Nulla turpis enim , tincidunt at imperdiet nec
,' +
' mollis vitae nunc . Morbi viverra iaculis neque et
tincidunt . Nullam ultrices mi mi , eu pellentesque leo . </
p>' +

283

CHAPITRE 14. AFFICHER DU TEXTE


6
7
8
9

' <p align =" justify " > Pellentesque sed felis nulla . Phasellus
laoreet sagittis ante at fringilla . ' +
' Duis iaculis , mi sed bibendum posuere , nisi velit cursus
elit , vitae tincidunt augue diam quis elit . ' +
' Sed et nisi risus . Vestibulum lobortis auctor viverra .
Mauris eleifend nisl ut orci ultricies eget egestas ' +
' ante lacinia . Pellentesque ut diam turpis . </p > ';

Ce qui nous donne la figure 14.36.

Figure 14.36 Cela ressemble un article de journal nest-ce pas ?

Liste puces
Il est possible de faire des listes puces grce la balise <li>...</li> rpte
autant de fois quil y a de lignes dans la liste :
1

monSuperTexte . htmlText = ' Voici une liste puces : < li > Ligne 1
</ li > < li > Ligne 2 </ li > < li > Ligne 3 </ li > ';

Ce qui nous donne la figure 14.37.

Figure 14.37 Une liste puce

284

EN HTML DANS LE TEXTE

Balises de mise en forme


Gras
Pour mettre du texte en gras, rien de plus simple ! Il suffit de lencadrer dune balise
<b>...</b> (b comme bold, signifiant gras en anglais) comme ceci :
1

monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,


consectetur adipiscing elit . <b > In pharetra magna imperdiet
elit pretium a malesuada nisl pellentesque . </b > ';

Ce qui nous donne la figure 14.38.

Figure 14.38 La deuxime phrase est en gras.

Italique
Pour mettre le texte en italique, cest tout aussi simple : seule la balise change. Cette
fois, il sagit de <i>...</i> :
1

monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,


consectetur adipiscing elit . <i > In pharetra magna imperdiet
elit pretium a malesuada nisl pellentesque . </i > ';

Ce qui nous donne la figure 14.39.

Figure 14.39 La deuxime phrase est en italique.

Souligner
Il est possible de souligner du texte grce la balise <u>...</u> comme ceci :
1

monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,


consectetur adipiscing elit . <u > In pharetra magna imperdiet
elit pretium a malesuada nisl pellentesque . </u > ';

Ce qui nous donne la figure 14.40.


285

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.40 La deuxime phrase est souligne.

Police, couleur et taille


Pour modifier la police de caractre, la couleur ou la taille des caractres du
texte, la balise <font face="police" color="couleur" size="taille">...</font>
est tout indique. Lattribut face peut recevoir comme valeur le nom dune police
de caractre, comme par exemple face="Arial". Lattribut color permet de dfinir une couleur en hexadcimal, prcde dun dise. Exemple de couleur orange :
color="#ff8800". Enfin, lattribut size modifie la taille des caractres du texte. On
peut dfinir une taille absolue en pixels, ou une taille relative en ajoutant un + ou un devant. Exemple de taille absolue : size="42". Exemple de taille relative : size="-5",
ce qui signifie la taille actuelle du texte moins cinq pixels.
Par exemple, nous pouvons colorier une partie de notre texte en bleu :

monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,


consectetur adipiscing elit . < font color ="# 0000ff " > In
pharetra magna imperdiet elit pretium a malesuada nisl
pellentesque . </ font > ';

Ce qui nous donne la figure 14.41.

Figure 14.41 La deuxime phrase en bleu !

Nous aurions pu, au lieu de cela, augmenter la taille de notre texte :

monSuperTexte . htmlText = ' Lorem ipsum dolor sit amet ,


consectetur adipiscing elit . < font size =" 42 " > In pharetra
magna imperdiet elit pretium a malesuada nisl pellentesque
. </ font > ';

Ce qui aurait donn la figure 14.42.


286

LES POLICES DE CARACTRES EMBARQUES

Figure 14.42 La deuxime phrase en taille 42 cette fois-ci.

Les polices de caractres embarques


Embarquer des polices
Pourquoi ?
Jusqu prsent, les polices que nous utilisons sont des polices fournies par le systme
dexploitation sur lequel notre programme est lanc. Si nous vouons appliquer une police
particulire notre texte, mais quelle nest pas prsente sur le systme, la police par
dfaut sera utilise. De plus, il nous est impossible de faire tourner notre texte ou de
changer son opacit, ce qui est un peu dommage, vous en conviendrez !
Cependant, il existe une solution ces problmes : les polices de caractres embarques ! Il sagit dinclure un fichier contenant une police directement dans notre
programme : ainsi, le lecteur Flash peut la rendre directement lcran, mme si le
systme de dispose pas de cette police en particulier ! De plus, cela permet de lisser les
caractres du texte afin de les rendre plus lisibles et plus attractifs.
Bien videmment, embarquer des fichiers directement dans le programme
augmente sa taille. Cela peut ventuellement tre gnant, mais embarquer
les polices de caractre prsente tant davantages que lon passera souvent
outre cet unique inconvnient.

Prparation
Tout dabord, il faut se munir du fichier de la police de caractre embarquer dans
notre programme. Seules les polices de format TrueType sont reconnues, mais cest
le format le plus rpandu, donc cela pose rarement problme.
287

CHAPITRE 14. AFFICHER DU TEXTE


Par exemple, vous pouvez prendre une police installe sur votre systme. Sur Windows,
les polices sont situes dans le dossier C:\Windows\Fonts. Sur Mac, il peut y en avoir
plusieurs endroits : ~/Library/Fonts/, /Library/Fonts/, /Network/Library/Fonts/,
/System/Library/Fonts/ ou /System Folder/Fonts/. Enfin, sur Linux, on peut les
trouver dans ces dossiers : /usr/share/fonts, /usr/local/share/fonts ou ~/.fonts.
Ou bien vous pouvez vous rendre sur un site proposant gratuitement des polices de
caractres, comme FontSquirrel. Prenons par exemple la police Walkway (voir figure
14.43). Tlchargez-la sur le site en cliquant sur le bouton DOWNLOAD TTF.


Tlchargez Walkway sur
.
B FontSquirrel
Code
web
:
187739


Figure 14.43 Page de tlchargement de la police Walkway


Vous obtenez une archive zip, contenant diffrents fichiers de police (voir figure 14.44).
Nous aurons besoins de quatre de ces fichiers, un par style de notre police, comme le
montre le tableau suivant.
Style
Normal
Gras
Italique
Gras Italique
288

Nom du fichier
Walkway_SemiBold.ttf
Walkway_UltraBold.ttf
Walkway_Oblique_SemiBold.ttf
Walkway_Oblique_UltraBold.ttf

LES POLICES DE CARACTRES EMBARQUES

Figure 14.44 Contenu de larchive tlcharge

289

CHAPITRE 14. AFFICHER DU TEXTE


Vous pouvez incorporer une police de caractres dont il manque certains
styles, mais vous ne pourrez pas utiliser les styles manquant. Par exemple, si
vous navez pas le fichier pour litalique, vous ne pourrez pas mettre de texte
en italique avec cette police.
Dans le rpertoire du projet, crez un dossier lib sil nest pas dj prsent, puis crez
un dossier lintrieur nomm fonts. Enfin, extrayez les quatre fichiers dont nous
avons besoin dans ce dossier (voir figure 14.45).

Figure 14.45 Les fichiers de police prts lemploi

Implmentation
Une fois que nos fichiers sont prts, il faut les incorporer notre programme, puis
les enregistrer sous le nom "walkway" pour pouvoir utiliser la police de caractre
embarque partout dans notre projet. Crez une nouvelle classe EmbedFonts (dans
un fichier nomm EmbedFonts.as) ct de la classe Main et collez-y le code complet
suivant :
1
2
3

package
{
import flash . text . Font ;

4
5
6
7

8
9

290

/* *
* Gestionnaire des polices de caract res embarqu es .
* Pour ajouter une police , placer ces fichiers dans le
dossier lib / fonts ( par exemple : lib / fonts / verdana . ttf )
, incluez - la dans la classe EmbedFonts ainsi :
* [ Embed ( source = '../ lib / fonts / verdana . ttf ', fontName = '
Fverdana ', fontWeight =" normal " , embedAsCFF = false ) ]
* private static var F_VERDANA : Class ;

LES POLICES DE CARACTRES EMBARQUES


* puis enregistrez - la dans la m thode init () ainsi :
* Font . registerFont ( F_VERDANA ) ;
* @author Guillaume CHAU
*/
public class EmbedFonts
{

10
11
12
13
14
15
16

// Incorporation des polices de caract res

17
18

// /// Walkway
// Normal
[ Embed ( source = ' ../ lib / fonts / Walkway_SemiBold . ttf ' ,
fontName = ' walkway ' , fontWeight = " normal " , embedAsCFF =
false ) ]
private static var F_WALKWAY : Class ;
// Gras
[ Embed ( source = ' ../ lib / fonts / Walkway_UltraBold . ttf ' ,
fontName = ' walkway ' , fontWeight = ' bold ' , embedAsCFF =
false ) ]
private static var F_WALKWAY_BOLD : Class ;
// Italique
[ Embed ( source = ' ../ lib / fonts / W a l kw a y _O b l iq u e _S e m iB o l d .
ttf ' , fontName = ' walkway ' , fontStyle = ' italic ' ,
embedAsCFF = false ) ]
private static var F_WALKWAY_ITALIC : Class ;
// Gras Italique
[ Embed ( source = ' ../ lib / fonts / Wa l k w a y _ O b l iq u e _ U l t r a B o ld .
ttf ' , fontName = ' walkway ' , fontStyle = ' italic ' ,
fontWeight = ' bold ' , embedAsCFF = false ) ]
private static var F_W ALKWA Y_BOLD _ITAL IC : Class ;

19
20
21

22
23
24

25
26
27

28
29
30

31
32

/* *
* Initialisation des polices de caract res . A appeler
une fois au lancement de l ' application , afin que
les polices soient prises en compte .
*/
public static function init () : void
{
// Enregistrement des polices de caract res

33
34

35
36
37
38
39
40
41
42
43

44

Font . registerFont ( F_WALKWAY ) ;


Font . registerFont ( F_WALKWAY_BOLD ) ;
Font . registerFont ( F _WALKW AY_BO LD_ITA LIC ) ;
Font . registerFont ( F_WALKWAY_ITALIC ) ;

45

46
47
48

291

CHAPITRE 14. AFFICHER DU TEXTE


Vous
pouvez lafficher pour la copier
 en utilisant le code web ci-dessous.
Classe EmbedFonts
B
Code web : 139762


Nous commenons par importer chaque fichier au dbut de la classe grce une instruction spciale, destine au compilateur :
1

[ Embed ( source = ' ../ lib / fonts / Walkway_SemiBold . ttf ' , fontName = '
walkway ' , fontWeight = " normal " , embedAsCFF = false ) ]

Jai limpression davoir dj vu quelque chose de similaire. . .

Trs juste ! Nous avons dj crit une instruction spciale dans notre classe Main pour
rgler la taille et la couleur de fond de notre fentre :
1

[ SWF ( width = " 640 " , height = " 480 " , backgroundColor = " # ffffff " ) ]

Ici, le mot-cl SWF signifie que nous allons modifier des proprits de notre programme.
Cette fois, le mot-cl Embed signifie que nous allons inclure un fichier dans notre programme. Les fichiers inclus sont directement contenus dans le programme : il sont donc
utilisables tout moment, tant chargs en mme temps.
1

source = ' ../ lib / fonts / Walkway_SemiBold . ttf '

Lattribut source indique le chemin du fichier inclure, ici


../lib/fonts/Walkway_SemiBold.ttf.
1

fontName = ' walkway '

Lattribut fontName spcifie le nom de la police de caractre, nom qui nous servira
lutiliser ensuite.
1

fontWeight = " normal "

Les attributs fontStyle (style) et fontWeight (paisseur) permettent de prciser de


quel style il sagit. En combinant les deux, il est possible de crer un style gras
italique :
1

fontStyle = ' italic ' , fontWeight = ' bold '

Enfin, le dernier attribut embedAsCFF est obligatoire et doit tre mis false. Cela
permet dviter tout problme lors de lutilisation de polices embarques, cause
dun changement entre Flex SDK 3 et Flex SDK 4.
Sur la ligne suivante, nous dclarons un attribut priv de type Class qui contiendra le
fichier de police embarque :
1

private static var F_WALKWAY : Class ;

Ce qui nous donne pour nos quatre fichiers :


292

LES POLICES DE CARACTRES EMBARQUES


1
2
3
4
5
6
7
8
9
10
11
12

13

// /// Walkway
// Normal
[ Embed ( source = ' ../ lib / fonts / Walkway_SemiBold . ttf ' , fontName = '
walkway ' , fontWeight = " normal " , embedAsCFF = false ) ]
private static var F_WALKWAY : Class ;
// Gras
[ Embed ( source = ' ../ lib / fonts / Walkway_UltraBold . ttf ' , fontName = '
walkway ' , fontWeight = ' bold ' , embedAsCFF = false ) ]
private static var F_WALKWAY_BOLD : Class ;
// Italique
[ Embed ( source = ' ../ lib / fonts / W a l kw a y _O b l iq u e _S e m iB o l d . ttf ' ,
fontName = ' walkway ' , fontStyle = ' italic ' , embedAsCFF = false ) ]
private static var F_WALKWAY_ITALIC : Class ;
// Gras Italique
[ Embed ( source = ' ../ lib / fonts / Wa l k w a y _ O b l iq u e _ U l t r a B o ld . ttf ' ,
fontName = ' walkway ' , fontStyle = ' italic ' , fontWeight = ' bold ' ,
embedAsCFF = false ) ]
private static var F_W ALKWA Y_BOLD _ITAL IC : Class ;

Une fois que tous les fichiers sont incorpors, nous dclarons une mthode publique
statique init():void qui nous permet denregistrer la police de caractre, qui sera
appele au tout dbut de notre programme :
1
2

3
4
5
6
7

/* *
* Initialisation des polices de caract res . A appeler une fois
au lancement de l ' application , afin que les polices soient
prises en compte .
*/
public static function init () : void
{
// Enregistrement des polices de caract res
}

Dans cette mthode, nous enregistrons les classes contenant les fichiers des polices de
caractres grce la mthode statique registerFont de la classe Font :
1

Font . registerFont ( F_WALKWAY ) ;

Ce qui donne :
1
2

3
4
5
6

/* *
* Initialisation des polices de caract res . A appeler une fois
au lancement de l ' application , afin que les polices soient
prises en compte .
*/
public static function init () : void
{
// Enregistrement des polices de caract res

7
8
9
10

Font . registerFont ( F_WALKWAY ) ;


Font . registerFont ( F_WALKWAY_BOLD ) ;
Font . registerFont ( F _WALKW AY_BO LD_ITA LIC ) ;

293

CHAPITRE 14. AFFICHER DU TEXTE


Font . registerFont ( F_WALKWAY_ITALIC ) ;

11
12

Enfin, dans notre classe Main, nous appelons la mthode statique init de notre classe
EmbedFonts :
1
2
3
4
5
6

package
{
import
import
import
import

flash . display . Sprite ;


flash . display . StageAlign ;
flash . display . StageScaleMode ;
flash . events . Event ;

/* *
* Notre application embarque des polices de caract res
embarqu es !
*/
[ SWF ( width = " 640 " , height = " 480 " , backgroundColor = " # ffffff " ) ]

8
9
10
11
12

public class Main extends Sprite


{

13
14
15

public function Main () : void


{
if ( stage )
init () ;
else
addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

16
17
18
19
20
21
22
23

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point

24
25
26
27
28

stage . scaleMode = StageScaleMode . NO_SCALE ;


stage . align = StageAlign . TOP_LEFT ;

29
30
31
32
33
34

35

// Polices embarqu es
EmbedFonts . init () ;

36
37

Vous remarquerez quil nest pas ncessaire dimporter la classe EmbedFonts


car elle est dans le package principal (elle est place dans le dossier racine de
la source, ici src/).

294

LES POLICES DE CARACTRES EMBARQUES


Utilisation
Et voil ! Notre police de caractre embarque est prte lemploi ! Pour que
notre champ de texte utilise les polices de caractres embarques au lieu des polices du
systme dexploitation, il faut mettre lattribut embedFonts de la classe TextField
true, sans oublier de changer le nom de la police utilise :
1
2
3

// Police utilis e : walkway


var format : TextFormat = new TextFormat ( " walkway " , 42 , 0x000000 )
;
monSuperTexte . defaultTextFormat = format ;

4
5
6

// On utilise les polices embarqu es


monSuperTexte . embedFonts = true ;

Voici le code complet pour afficher un champ de texte avec une police de caractres
embarque :
1
2

// Enregistrement des polices embarqu es


EmbedFonts . init () ;

3
4
5

// Cr ation de l ' instance du champ de texte


var monSuperTexte : TextField = new TextField () ;

6
7
8
9

// Police utilis e : walkway


var format : TextFormat = new TextFormat ( " walkway " , 42 , 0x000000 )
;
monSuperTexte . defaultTextFormat = format ;

10
11
12

// On utilise les polices embarqu es


monSuperTexte . embedFonts = true ;

13
14
15

// Taille automatique
monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;

16
17
18

// Texte HTML
monSuperTexte . htmlText = " Normal <b > Gras </ b > <i > Italique </ i > <b
> <i > Gras Italique </ i > </b > " ;

19
20
21

// Ajout la sc ne
addChild ( monSuperTexte ) ;

22
23
24
25

// Alignement au centre
monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

Ce qui nous donne lcran la figure 14.46.


Dsormais, notre texte saffichera avec cette police mme si lutilisateur ne la pas
installe ; de plus, il est possible de rendre le texte transparent et de lui appliquer une
rotation !
295

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.46 Notre police embarque en action !

296

LES POLICES DE CARACTRES EMBARQUES

Rotation sur soi-mme


Et si nous dcidions de tourner notre champ de texte sur lui-mme ? Disons 50 dans
le sens anti-horaire ? Cest dsormais possible, tant donn que nous utilisons notre
propre police embarque. Commenons par crire le code pour crer un champ de texte
utilisant une police de caractres embarque :
1
2

// Polices embarqu es
EmbedFonts . init () ;

3
4
5
6
7
8
9
10
11

// Cr ation du champ de texte


var monSuperTexte : TextField = new TextField () ;
var format : TextFormat = new TextFormat ( " walkway " , 50 , 0x000000 )
;
monSuperTexte . defaultTextFormat = format ;
monSuperTexte . embedFonts = true ;
monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;
monSuperTexte . text = " Tournez - moi ! " ;
addChild ( monSuperTexte ) ;

12
13
14
15

// Alignement au centre
monSuperTexte . x = ( stage . stageWidth - monSuperTexte . width ) / 2 ;
monSuperTexte . y = ( stage . stageHeight - monSuperTexte . height ) /
2;

Ce qui nous donne la figure 14.47.


Essayons deffectuer une rotation notre champ de texte :
1
2

// Rotation de 50 dans le sens anti - horaire


monSuperTexte . rotation = - 50 ;

Ce qui nous donne la figure 14.48.


Ce nest pas exactement ce que nous voulons accomplir ! En effet, lobjet tourne toujours
par rapport son origine, en haut gauche : cela explique que le champ de texte soit
tourn par rapport la lettre T . Malheureusement, nous ne pouvons pas modifier
directement lorigine dun objet daffichage.
Il est nanmoins possible de changer artificiellement lorigine de lobjet en question,
comme nous lavons vu dans le chapitre prcdent, en lajoutant dans un conteneur
intermdiaire de classe Sprite que jappellerai la bote :
1
2
3

// Conteneur interm diaire


var boite : Sprite = new Sprite () ;
addChild ( boite ) ;

4
5
6
7
8
9

// Cr ation du champ de texte


var monSuperTexte : TextField = new TextField () ;
var format : TextFormat = new TextFormat ( " walkway " , 50 , 0x000000 )
;
monSuperTexte . defaultTextFormat = format ;
monSuperTexte . embedFonts = true ;

297

CHAPITRE 14. AFFICHER DU TEXTE

Figure 14.47 Notre champ de texte tourner

298

LES POLICES DE CARACTRES EMBARQUES

Figure 14.48 Rotation par rapport lorigine de lobjet

299

CHAPITRE 14. AFFICHER DU TEXTE


monSuperTexte . autoSize = TextFieldAutoSize . LEFT ;
monSuperTexte . text = " Tournez - moi ! " ;

10
11
12
13
14

// On ajoute le champ de texte dans le conteneur


boite . addChild ( monSuperTexte ) ;

Une fois que le champ de texte est dans la bote, on dplace le champ de texte de la
moiti de sa taille, la fois vers le haut et vers la gauche, ainsi lorigine de la boite se
trouvera au centre du champ de texte (voir figure 14.49).

Figure 14.49 Origine de la boite centre sur le champ de texte


Ainsi, lorigine de la boite se retrouve au centre du champ de texte. Si on fait abstraction
de la bote, lorigine de notre objet est le centre du champ de texte, donc il tournera
par rapport son centre ! Voici le code de cette opration :
1
2
3

// On modifie artificiellement l ' origine en la pla ant au


centre du champ de texte :
monSuperTexte . x = - monSuperTexte . width / 2 ;
monSuperTexte . y = - monSuperTexte . height / 2 ;

Enfin, on applique toutes les transformations la bote la place de les appliquer au


champ de texte, comme si la bote tait le champ de texte lui-mme :
1
2
3
4

// Alignement au centre
// On aligne le conteneur au lieu du champ de texte
boite . x = stage . stageWidth / 2 ;
boite . y = stage . stageHeight / 2 ;

5
6
7
8

// Rotation de 50 dans le sens anti - horaire


// On tourne le conteneur au lieu du champ de texte
boite . rotation = - 50 ;

Ce qui nous donne ce que nous voulons (voir figure 14.50).


Enfin ! Notre champ de texte a consenti tourner sur lui-mme par rapport son
centre ! Vous serez souvent amen utiliser cette mthode, par exemple si vous voulez
animer une image en la faisant tourner sur elle-mme, tout en la dplaant. . .
Vous auriez peut-tre pens recentrer le champ de texte aprs chaque rotation, mais, croyez-moi, il est beaucoup plus simple de passer par un conteneur
intermdiaire.

300

LES POLICES DE CARACTRES EMBARQUES

Figure 14.50 Le texte tourne sur lui-mme !

301

CHAPITRE 14. AFFICHER DU TEXTE

En rsum
La classe TextField permet dafficher du texte lcran. Il est possible de manipuler
la slection du texte.
On peut centrer un objet grce aux proprits de la scne principale de classe Stage.
La classe TextFormat permet de mettre en forme tout ou des portions du texte,
cest--dire change la police, la taille, la couleur. . .
Il est possible dafficher du texte structur en HTML simplifi avec lattribut htmlText.
Il est trs souvent intressant dembarquer les polices de caractres dans lapplication,
sans oublier de mettre lattribut embedFonts true.
Utiliser un conteneur intermdiaire permet deffectuer la rotation dun objet
autour de son centre (ou dun autre point que son origine initiale).

302

Chapitre

15

Dessiner avec lActionscript


Difficult :
Dans ce chapitre, nous allons apprendre dessiner directement depuis lActionscript ! Je
suis certain que beaucoup parmi vous attendaient ce moment depuis fort longtemps, cest
pourquoi nous essaierons de prsenter un maximum de notions tout en prenant le temps de
bien les expliquer. Nous prsenterons en premier la classe Graphics qui est lorigine de
tout trac en Actionscript. Puis nous prsenterons alors les diffrentes mthodes de dessin
que possde cette classe.
Enfin, je vous proposerais un petit exercice o nous raliserons ensemble une illustration
dun mouton. Ce sera alors loccasion de revenir sur ces mthodes de dessin et mieux
comprendre toute la philosophie qui se cache derrire le dessin en Flash !

303

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

Lobjet Graphics
Introduction
Une proprit de type Graphics
Nous avons vu prcdemment quil existait diffrents types dobjets daffichage.
Parmi eux, certains possdent dj tout le ncessaire pour dessiner. Il sagit des classes
Shape, Sprite et MovieClip (voir figure 15.1) !

Figure 15.1 La classe Shape dans larbre des classes daffichage


Ce qui les diffrencie des autres classes cest que celles-ci ont un attribut trs particulier :
une instance de la classe Graphics. En ralit, cest cette dernire classe qui dispose
de lensemble des mthodes permettant de tracer diffrentes formes. Ainsi, en dclarant
des objets de type Shape, Sprite ou MovieClip, vous pourrez dessiner lintrieur de
ceux-ci. En particulier, la classe Shape est spcialement faite pour cela puisque celle-ci
ne contient que cet attribut et laccesseur correspondant comme vous pouvez le voir
la figure 15.2.
Cette classe est allge, ce qui implique de meilleures performances, mais une instance
de la classe Shape ne peut pas contenir denfants et elle nest pas interactive (il est
impossible de savoir si lutilisateur clique dessus).

Pourquoi ne pas utiliser directement lobjet Graphics ?

304

LOBJET GRAPHICS

Figure 15.2 La classe Shape exclusivement utilis pour sa proprit graphics


Il se peut que vous vous soyez dj demand pourquoi ne pas crer directement une
occurrence de la classe Graphics et utiliser ainsi ses diffrentes mthodes de dessin. En
ralit, lActionscript favorise lutilisation des sous-classes de DisplayObject dont
nhrite pas la classe Graphics. Cest pourquoi celle-ci est non instanciable : vous ne
pourrez donc pas utiliser la syntaxe new Graphics() et vous serez donc obligs de
passer par lutilisation de lune des trois classes dcrites plus haut. De plus, elle est
de type final, ce qui signifie que lon ne peut pas crer de sous-classes hritant de la
classe Graphics.
Je vous invite donc crer une instance de la classe Shape que nous utiliserons dans
la suite :
1

var monDessin : Shape = new Shape () ;

Dessin vectoriel
La classe Graphics est utilise pour crer des dessins vectoriels ! Ce terme est peuttre nouveau pour vous, mais ne vous inquitez pas, nous allons ici prsenter ce qui
diffrencie ce type dimages par rapport aux images bitmap . Vous ne vous tes
jamais demands comment les images taient stockes lintrieur de votre ordinateur ?
En fait le stockage des images peut tre ralis de deux manires diffrentes. Lorsque
lon parle dimages bitmap , celles-ci sont enregistres partir des couleurs de
chacun des pixels. En revanche, dans les images vectorielles, ce sont les formes en
elles-mmes qui sont sauvegardes. Cela fait donc une norme diffrence lors de la
lecture du fichier et de laffichage lcran.
Pour mieux comprendre ce dont il sagit, nous allons prendre lexemple de la figure
15.3.

Figure 15.3 Image de base


Cette image est quelconque et pourrait trs bien tre enregistre en tant quimage
bitmap ou vectorielle. Linconvnient du format bitmap est justement quil
305

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT


retient des pixels. Ainsi, si vous ne respectez plus les dimensions des pixels, limage va
tre dforme. Je mexplique ; imaginez que vous ayez besoin, pour une raison quelconque, dagrandir votre image. Les pixels vont donc tre redimensionns et limage
naura plus laspect lisse quelle avait au dpart. Au contraire, une image vectorielle
est dfinie partir de formes. Ainsi, lorsque celle-ci va tre redimensionne, laffichage
sera adapt pour correspondre nouveau la forme dsire.
Voyez plutt la diffrence la figure 15.4 entre limage bitmap gauche et
limage vectorielle droite, toutes les deux redimensionnes 300%.

Figure 15.4 Redimensionnement de limage de base


Dans ce chapitre, nous allons donc parler exclusivement de dessin vectoriel, lun des
atouts de cette technologie Flash !

Des contours et des remplissages


Le principe
Si vous avez dj utilis des classes de dessin dans dautres langages de programmation,
vous allez voir quici le principe est assez diffrent. Avant dentrer plus avant dans les
dtails, je vous invite dcouvrir les diffrents termes que nous serons amens utiliser
dans la suite de ce chapitre. Pour cela je vous propose tout dabord un petit dessin
dexemple la figure 15.5.

Figure 15.5 Composition dun lment graphique


Dans cet exemple, nous pouvons voir une bulle de pense comme on en trouve dans les
bandes dessines. Cette bulle est compose de 4 objets : un nuage et trois ovales.
Ces objets correspondent des tracs diffrents quil faudrait raliser les uns aprs les
autres. Chaque trac est donc dfini de la faon suivante :
Le remplissage : surface reprsente en bleu sur le dessin prcdent.
Le contour : ligne qui dlimite le remplissage.
306

LOBJET GRAPHICS
La ligne : trait visible qui suit le contour et pouvant avoir diffrentes apparences.
Ainsi, pour raliser un trac en Flash, il nous faut dfinir le contour de celui-ci en
indiquant quel style adopter pour le remplissage et la ligne.
Dfinir le style des lignes
Tout dabord, veuillez noter que nous parlons ici de lignes et non de contours, il sagit
donc uniquement du ct esthtique des traits qui effectivement suivent le contour.
Pour dfinir le style des lignes, nous utiliserons la mthode lineStyle() de la classe
Graphics. Cette mthode possde beaucoup de paramtres, mais tous sont facultatifs.
Cest pourquoi, je ne vous parlerai ici que des trois premiers qui sont les plus intressants. Le premier sert dfinir la largeur de la ligne, le deuxime sa couleur, et enfin
le dernier permet de prciser lopacit de celle-ci. Voici un exemple dans lequel nous
dfinissons des lignes de largeur 2, de couleur noire et transparentes 50% :
1

monDessin . graphics . lineStyle (2 , 0x000000 , 0 . 5 ) ;

Comme nous lavons dit, la mthode lineStyle() ne possde que des paramtres
facultatifs. Ainsi, si vous ne souhaitez pas de lignes sur votre trac mais uniquement
un remplissage, il vous suffit dutiliser cette mthode sans paramtres, comme ceci :
1

monDessin . graphics . lineStyle () ;

Dfinir un remplissage
Contrairement aux lignes, les remplissages ncessitent lutilisation de deux mthodes :
beginFill() et endFill(). La premire permet de dfinir les diffrentes caractristiques du remplissage, savoir sa couleur et son opacit. En revanche, dans notre
cas de figure, la couleur est un paramtre obligatoire et ne peut donc pas tre omise.
Voici par exemple comment dfinir une couleur blanche au remplissage :
1

monDessin . graphics . beginFill ( 0xFFFFFF ) ;

Lutilisation de la seconde mthode est justifie par la dfinition mme dun remplissage. En effet, pour remplir lintrieur dun contour, celui-ci doit tre ferm ! La
mthode endFill() sert donc refermer un contour, pour pouvoir lui appliquer
un remplissage. Ainsi, si lors du trac de votre contour, le point final nest pas identique au premier, une ligne droite sera alors trace entre ces deux points pour fermer
le contour. Cette mthode endFill() ne prend aucun paramtre et sutilise donc simplement de la manire suivante :
1

monDessin . graphics . endFill () ;

Notez que la mthode beginFill() doit tre appele avant endFill(), et


que la dfinition du contour seffectue entre ces instructions. Sachez galement que tout trac effectu lextrieur de ces deux instructions sera
compos uniquement de lignes et donc sera sans remplissage.

307

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

Dessinez, cest gagn !


a y est, vous allez enfin pouvoir dessiner en Actionscript ! Nous allons maintenant
voir quelles sont les diffrentes mthodes de la classe Graphics, et apprendre nous
en servir. Ensuite, nous raliserons un petit exercice la fin de ce chapitre qui devrait
vous aider mieux utiliser cette classe.

Les lignes et les courbes


Une histoire de curseur
lorigine, lensemble des tracs en Flash taient conus lintrieur du logiciel Flash
Professionnal. Ceux-ci taient donc raliss graphiquement laide de votre souris,
aussi connue sous le nom de curseur. Depuis larrive de lActionscript 3, il nest
plus ncessaire de possder le logiciel pour pouvoir effectuer des tracs. En effet, il est
maintenant possible de faire exactement la mme chose grce au code. Cependant, les
instructions sexcutent en conservant la logique utilise pour dessiner dans le logiciel.
Ainsi, lorsque vous dessinerez en Actionscript, vous devrez imaginez les diffrents
gestes que vous raliseriez avec la souris de votre ordinateur. Par exemple, si vous
souhaitez tracer une ligne, vous dplacerez dabord votre curseur lendroit o vous
voudrez dmarrer celle-ci, puis vous la tracerez. Une fois celle-ci dessine, votre curseur
se trouverait alors lautre extrmit de la ligne. Vous pourriez alors continuer votre
trac partir du mme point ou bien dplacer avant votre curseur vers une autre partie
de lcran.
Revenons maintenant ce qui nous intresse : lActionscript ! Lorsque vous dessinez
grce la classe Graphics, vous disposez un curseur fictif que vous pouvez dplacer
nimporte o sur lcran. Pour modifier la position de celui-ci, vous devez utiliser la
mthode moveTo() en spcifiant le nouvel emplacement, comme ci-dessous :
1
2
3

var _x : Number = 25 ;
var _y : Number = 50 ;
monDessin . graphics . moveTo ( _x , _y ) ;

Lorsque vous tracerez des lignes et des courbes, rappelez-vous que vous devez
au pralable modifier la position de votre curseur. Noubliez pas galement
quaprs un trac, sa position est automatiquement mise jour, ce qui facilite
la succession de diverses lignes et courbes.

Les lignes droites


Pour raliser des contours, il est possible de crer des lignes droites. Pour cela, la
classe Graphics dispose de la mthode lineTo(), qui trace une ligne entre la position
actuelle du curseur et le nouveau point spcifi en paramtre. Voici un exemple qui
308

DESSINEZ, CEST GAGN !


permet de tracer une droite horizontale dpaisseur 10 entre les points de coordonnes
(10,10) et (10,100) :
1
2
3

monDessin . graphics . lineStyle ( 10 , 0x000000 ) ;


monDessin . graphics . moveTo ( 10 , 10 ) ;
monDessin . graphics . lineTo ( 200 , 10 ) ;

Si vous lancez votre projet, vous verrez apparatre la belle ligne visible la figure 15.6.

Figure 15.6 Une ligne


Remarquez quici nous navons pas utilis les mthodes beginFill() et
endFill(), nous avons donc trac un contour sans remplissage, en utilisant uniquement un style de ligne. Notez galement que nous avons dabord
dplac notre curseur avant de dessiner la ligne.
la suite de votre ligne horizontale, vous pourriez trs bien continuer le trac de votre
contour avec une ligne verticale par exemple :
1

monDessin . graphics . lineTo ( 200 , 200 ) ; // Le curseur est la


position ( 200 , 10 ) avant l ' instruction

Les courbes
Les lignes droites cest bien, mais celles-ci sont vite limites lorsquil sagit de raliser
un dessin complexe avec des formes arrondies. Par consquent, il a t mis en place
ce quon appelle les courbes de Bzier ! Le principe de ces courbes est dutiliser un
point de contrle en plus des deux points dancrage. Ce point de contrle sert
dfinir la courbure de la ligne en direction de ce point. Pour mieux comprendre leffet
de celui-ci sur la courbe, je vous propose un exemple :
1
2
3
4
5

monDessin . graphics . lineStyle (4 , 0x000000 ) ;


monDessin . graphics . beginFill ( 0x55BBFF ) ;
monDessin . graphics . moveTo ( 10 , 100 ) ;
monDessin . graphics . curveTo ( 100 , 10 , 200 , 100 ) ;
monDessin . graphics . endFill () ;

Ici, la mthode curveTo() prend deux paires de coordonnes en paramtres. La premire correspond au point de contrle et la seconde au point dancrage final.
Voyez plutt la figure 15.7 le rsultat du trac o jai ajout les trois points.
Dans lexemple prcdent, nous avons dfini un remplissage laide de la
mthode beginFill(). Vous constaterez alors que le contour a t automatiquement referm par une ligne droite lors de lappel de la mthode
endFill().

309

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

Figure 15.7 Une courbe dcrite par trois points

Les formes prdfinies


Pour les formes gomtriques particulires, il existe des mthodes permettant
de simplifier leur trac. Nous pouvons notamment citer les cercles, les ellipses et les
rectangles.
Les formes elliptiques
Lorsquon parle de formes elliptiques, on inclut gnralement les cercles et les ellipses. Nous allons donc voir prsent comment tracer chacune de ces formes. Tout
dabord, occupons-nous des cercles. Nous disposons pour cela dune mthode nomme
drawCircle(), dans laquelle nous devons spcifier les coordonnes x et y du centre du
cercle ainsi que le rayon r de celui-ci :
1

monDessin . graphics . drawCircle (x , y , r ) ;

Pour les ellipses, la mthode a utiliser est drawEllipse(). Celle-ci prend cette fois
quatre paramtres diffrents : la largeur et la hauteur de lellipse ainsi que les coordonnes x et y du coin suprieur gauche de la zone tracer :
1

monDessin . graphics . drawEllipse (x , y , largeur , hauteur ) ;

Nous verrons dans lexercice venir comment utiliser ces fonctions, mais je vous invite
grandement faire des tests de votre ct pour bien voir linfluence des diffrents
paramtres. Noubliez pas galement de dfinir un style de ligne ou un remplissage
avant lutilisation de telles mthodes.
Les rectangles
En plus des formes elliptiques, la classe Graphics vous permet de tracer des formes
rectangulaires. La mthode drawRect() est ainsi dfinie exactement de la mme
faon que drawEllipse(), la seule diffrence quelle trace cette fois un rectangle.
Linstruction ci-dessous ne prsente donc aucune surprise :
1

monDessin . graphics . drawRect (x , y , largeur , hauteur ) ;

Il se peut que vous ayez besoin, un moment ou un autre, de tracer un rectangle dont les angles sont arrondis. Pour cela, vous disposez galement de la mthode
drawRoundRect(), o vous devrez renseigner en plus la valeur de larrondi :
310

DESSINEZ, CEST GAGN !


1

monDessin . graphics . drawRoundRect (x , y , largeur , hauteur ,


arrondi ) ;

La mthode drawRoundRect() prend en ralit un sixime paramtre si vous


dsirez des arrondis non uniformes en hauteur et en largeur. Ainsi, le cinquime
paramtre dfinit la largeur des arrondis et le sixime leur hauteur.

Techniques avances
Dessiner une trajectoire
Lorsque vous crerez des contours laide des mthodes lineTo() et curveTo(), il
est probable que vous ayez une srie dinstructions similaires afin de parcourir lensemble de votre contour. Cest pourquoi, il existe une mthode drawPath() qui permet
deffectuer lensemble de ces tracs en une seule instruction. Cette mthode prend donc
en paramtres deux tableaux de type Vector.<int> et Vector.<Number>. Le premier
permet de dfinir le type de commande, quant au second, il contient lensemble des coordonnes des diffrents points dancrage et points de contrle. En ce qui concerne
les commandes, celles-ci sont dfinies comme suit :
1 moveTo().
2 lineTo().
3 curveTo().
Pour mieux comprendre ce dont il est question, je vous propose de prendre lexemple
suivant :
1
2
3
4

monDessin . graphics . lineStyle (2 , 0x000000 ) ;


monDessin . graphics . moveTo (0 , 0 ) ;
monDessin . graphics . lineTo ( 100 , 0 ) ;
monDessin . graphics . curveTo ( 200 , 0 , 200 , 100 ) ;

Lensemble de ces tracs pourrait galement tre raliss grce la mthode drawPath()
de la faon suivante :
1
2
3
4
5
6
7
8

var commandes : Vector . < int > = new Vector . < int >() ;
commandes . push (1 , 2 , 3 ) ;
var coordonnees : Vector . < Number > = new Vector . < Number >() ;
coordonnees . push (0 , 0 ) ;
coordonnees . push ( 100 , 0 ) ;
coordonnees . push ( 200 , 0 , 200 , 100 ) ;
monDessin . graphics . lineStyle (2 , 0x000000 ) ;
mouton . graphics . drawPath ( commandes , coordonnees ) ;

Vous remarquerez que nous aurions pu ajouter lensemble des coordonnes en


une seule instruction avec la mthode push(). Nanmoins, pour garder un
maximum de lisibilit, je vous conseille de les ajouter par commande, comme
si vous utilisiez directement les mthodes correspondantes.
311

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

Nest-ce pas plus compliqu et plus long au final ?

Je vous avoue que cette criture fait peur et est au final plus longue crire que la
version originale. Cependant, mettez-vous en tte que cette nouvelle version sexcute
plus rapidement que la prcdente. Ceci vient du fait que le trac lcran se fait en
une seule fois contrairement au premier code o il faut retracer chaque instruction.
Utilisez donc cette mthode au maximum ds que vous le pouvez.
Superposition de remplissages
Lorsque vous tracez diffrents contours, ceux-ci peuvent tre amens se superposer.
Dans ce cas, il est alors possible de supprimer le remplissage dans la zone de superposition. Pour cela, dfinissez les deux contours lintrieur dun mme remplissage,
cest--dire sans fermeture du contour entre les deux par la fonction endFill(). Pour
vous montrer leffet cr, voici le code que je vous invite tester :
1
2
3
4
5

monDessin . graphics . lineStyle (4 , 0x000000 ) ;


monDessin . graphics . beginFill ( 0x0000FF ) ;
monDessin . graphics . drawCircle ( 100 , 100 , 50 ) ;
monDessin . graphics . drawCircle ( 175 , 100 , 50 ) ;
monDessin . graphics . endFill () ;

Vous verrez alors deux disques de couleur bleu dont lintersection est non remplie
comme sur la figure 15.8.

Figure 15.8 Exclusion des deux cercles

Un petit pas vers la 3D


Avant de terminer la thorie sur cette classe Graphics, je vais rapidement vous parler
dune mthode un peu spciale : drawTriangles(). Comme son nom lindique, cette
mthode permet de dessiner des triangles. Cette manire de dcouper une gomtrie
en faces triangulaires, est une pratique courante lorsquil sagit de 3D. Cela permet
notamment de pouvoir dformer une image en la divisant sur plusieurs faces orientes
diffremment. Ainsi, il est possible dappliquer ce que lon appelle une texture, sur un
objet 3D modlis partir dune multitude de faces.
Dans ce chapitre, nous naborderons pas toutes ces techniques qui sont un peu trop
avances pour nous. Toutefois, je vais vous prsenter tout de mme comment utiliser
312

DESSINEZ, CEST GAGN !


cette mthode drawTriangles() avec des lignes et des remplissages. Le principe est
de crer une liste de points que nous nommerons des sommets, lintrieur dun
tableau de type Vector.<Number> contenant leurs coordonnes. Ces sommets sont
alors numrots dans lordre de leur dclaration avec pour premier indice 0. Un second
tableau de type Vector.<int> permet ensuite crer des triangles en reliant les sommets
par trois. Ainsi, le premier triangle est gnralement constitu des sommets 0, 1 et 2.
Conscient que tout cela est certainement encore flou dans votre tte, je vous propose
un petit exemple o nous aurons 5 sommets. Ensuite, nous allons crer quatre triangles
composs respectivement des sommets (0,1,2), (1,2,3), (2,3,4) et enfin (2,4,5). Voici le
code correspondant ces manipulations :
1
2
3
4
5
6

var sommets : Vector . < Number > = Vector . < Number >([ 10 , 10 , 10 , 100 ,
100 , 10 , 100 , 100 , 190 , 100 , 190 , 10 ]) ;
var indices : Vector . < int > = Vector . < int >([ 0 , 1 , 2 , 1 , 2 , 3 , 2 , 3
, 4 , 2 , 4 , 5 ]) ;
monDessin . graphics . lineStyle (4 , 0x000000 ) ;
monDessin . graphics . beginFill ( 0xAA00FF ) ;
monDessin . graphics . drawTriangles ( sommets , indices ) ;
monDessin . graphics . endFill () ;

Vous verrez donc apparatre nos quatre triangles formant ensemble un rectangle qui
pourrait tre la base de la modlisation dun intrieur quelconque par exemple. Voyez
la figure 15.9 laffichage correspondant, o jai volontairement rajout les indices des
sommets pour que vous puissiez mieux comprendre.

Figure 15.9 Conception base de triangles

Cette mthode drawTriangles() est principalement utilis pour la 3D, cest


pourquoi il nest pas ncessaire que vous compreniez son fonctionnement
dans le dtail. Nanmoins, pour les intresss, un troisime paramtre permet de crer de lUV Mapping. Ainsi, vous pouvez renseigner un vecteur
Vector.<Number> de coordonnes UV pour appliquer une texture chaque
face. Pour chaque sommet de triangles, vous devez alors faire correspondre
un point dune image en coordonnes UV. Ces coordonnes UV sont alors
standardises (0,0) pour le coin suprieur gauche de limage bitmap et
(1,1) pour le coin infrieur droit. Ne pouvant pas mattarder davantage sur
le sujet, jinvite les intresss se rendre dans la rubrique correspondante de
la documentation officielle.
313

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT



Documentation
B drawTriangles()
Code web : 924409


Exercice : Dessine-moi un mouton


Conception du dessin
Introduction
Dans cet exercice, nous allons raliser une petite illustration reprsentant un mouton,
pas pas.
Avant de nous lancer tte baisse, je vous invite prparer votre projet afin dobtenir un
rsultat similaire au mien la fin de lexercice. Vous allez donc changer les dimensions
de votre scne principale pour que celle-ci fasse 280 x 220 pixels. Vous pouvez laisser
la couleur darrire-plan en blanc tant donn que nous allons redfinir un fond dans
peu de temps. Nous allons galement dclarer deux variables _x et _y pour contrler
la position du mouton, puis une variable Mouton de type Shape qui nous servira
effectuer lensemble de nos tracs. Enfin, noubliez pas dajouter notre Mouton notre
conteneur principal grce la fonction addChild().
Voici donc notre classe Main au dbut de lexercice :
1
2
3
4
5

package
{
import flash . display . Sprite ;
import flash . events . Event ;
import flash . display . Shape ;

6
7
8
9
10

public class Main extends Sprite


{
private var _x : int ;
private var _y : int ;

11
12
13
14
15
16

public function Main () : void


{
if ( stage ) init () ;
else addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

17
18
19
20
21
22
23
24
25

314

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point
_x = 160 ;
_y = 40 ;
var mouton : Shape = new Shape () ;

EXERCICE : DESSINE-MOI UN MOUTON


26

27

this . addChild ( mouton ) ;

28

29
30
31

Le fond
Afin de faire ressortir notre mouton blanc, nous allons tracer une zone rectangulaire
de couleur bleue comme arrire-plan de notre dessin. Pour cela, nous nous servirons de
la fonction drawRoundRect() qui permet dobtenir un rectangle aux coins arrondis, ce
qui rendra lensemble plus esthtique. Ici, aucune difficult, nous aurons donc le code
suivant :
1
2
3
4

// Fond
mouton . graphics . beginFill ( 0x10879D ) ;
mouton . graphics . drawRoundRect (0 , 0 , 280 , 220 , 40 , 40 ) ;
mouton . graphics . endFill () ;

Le corps
La ralisation du corps du mouton est certainement la partie la plus longue et fastidieuse
de cet exercice. Nanmoins, jai dj effectu lopration, vous naurez donc qu suivre
mes instructions. Pour dessiner le corps du mouton, nous allons dans un premier temps
dfinir les diffrents paramtres de remplissage et de contour. Puis, nous commencerons
par tracer une courbe de Bzier qui sera le point de dpart pour la suite. Voici donc
un premier bout de code :
1
2
3
4
5
6

// Corps
mouton . graphics . lineStyle (4 , 0x3A281E , 1 . 0 ) ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . moveTo ( _x , _y ) ;
mouton . graphics . curveTo ( _x + 20 , _y - 20 , _x + 40 , _y ) ;
mouton . graphics . endFill () ;

Comme vous limaginez, nous ne pouvons pas dessiner lintgralit du corps du mouton
dune seule traite. Ainsi, comme vous pouvez le voir aux figures 15.10 et 15.11, il faut
procder tape par tape.
Tracer chaque bosse du corps est une tape qui peut tre extrmement longue
suivant vos talents en dessin. De plus, il est peu probable que vous obteniez rapidement
un rendu proche du mien, cest pourquoi je vous pargne cette tche prilleuse et je
vous propose dj le code final permettant de dessiner lintgralit du corps :
1
2
3

// Corps
mouton . graphics . lineStyle (4 , 0x3A281E , 1 . 0 ) ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;

315

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

Figure 15.10 Mise en place du premier arrondi

Figure 15.11 Cration pas pas du corps

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

mouton . graphics . moveTo ( _x , _y ) ;


mouton . graphics . curveTo ( _x + 20 , _y - 20 , _x + 40 , _y ) ;
mouton . graphics . curveTo ( _x + 60 , _y - 10 , _x + 70 , _y + 10 ) ;
mouton . graphics . curveTo ( _x + 90 , _y + 10 , _x + 90 , _y + 30 ) ;
mouton . graphics . curveTo ( _x + 110 , _y + 40 , _x + 100 , _y + 60 ) ;
mouton . graphics . curveTo ( _x + 120 , _y + 80 , _x + 100 , _y + 90 ) ;
mouton . graphics . curveTo ( _x + 110 , _y + 110 , _x + 90 , _y + 110 ) ;
mouton . graphics . curveTo ( _x + 80 , _y + 140 , _x + 60 , _y + 120 ) ;
mouton . graphics . curveTo ( _x + 40 , _y + 150 , _x + 20 , _y + 130 ) ;
mouton . graphics . curveTo ( _x , _y + 150 , _x -20 , _y + 130 ) ;
mouton . graphics . curveTo ( _x -40 , _y + 140 , _x -50 , _y + 120 ) ;
mouton . graphics . curveTo ( _x -70 , _y + 120 , _x -70 , _y + 100 ) ;
mouton . graphics . curveTo ( _x -100 , _y + 90 , _x -90 , _y + 70 ) ;
mouton . graphics . curveTo ( _x -110 , _y + 50 , _x -90 , _y + 40 ) ;
mouton . graphics . curveTo ( _x -90 , _y + 20 , _x -60 , _y + 20 ) ;
mouton . graphics . curveTo ( _x -50 , _y , _x -30 , _y + 10 ) ;
mouton . graphics . curveTo ( _x -20 , _y -10 , _x , _y ) ;
mouton . graphics . endFill () ;

Vous devriez maintenant avoir un beau corps de mouton (voir figure 15.12) qui, je
lavoue, ressemble pour linstant plus un nuage qu autre chose.
316

EXERCICE : DESSINE-MOI UN MOUTON

Figure 15.12 Le corps du mouton


La tte
prsent, nous allons nous occuper de la tte de notre mouton. Nous lui ferons donc
deux oreilles, puis nous ajouterons la forme globale de sa tte. Les yeux, quant eux,
seront raliss plus tard car ils demanderont un peu plus de travail.
Commenons par les oreilles, que nous crerons partir de courbes de Bzier. La
partie haute des oreilles sera dissimule plus tard, il est donc inutile de sattarder
dessus. Cest pourquoi nous tracerons uniquement une courbe pour chaque oreille et
nous laisserons le soin la fonction endFill() de refermer chacun de nos remplissages.
Ainsi, le code prsent ci-dessous permet de raliser les deux oreilles de la bte :
1
2
3
4
5
6
7
8
9

// T te
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . moveTo ( _x - 30 , _y + 50 ) ;
mouton . graphics . curveTo ( _x - 90 , _y + 165 , _x - 10 , _y + 60 ) ;
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . moveTo ( _x + 50 , _y + 50 ) ;
mouton . graphics . curveTo ( _x + 100 , _y + 165 , _x + 30 , _y + 60 ) ;
mouton . graphics . endFill () ;

Bien videmment, nous avons utilis une nouvelle couleur de remplissage pour donner
un effet de peau nos oreilles que vous pouvez voir sur la figure 15.13.

Figure 15.13 Mise en place des oreilles


317

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT


Je suggre maintenant que nous passions la tte. Pour dessiner celle-ci, nous allons
commencer par tracer une ellipse. Puis nous utiliserons une ligne droite ainsi quune
courbe de Bzier sans remplissage pour reprsenter le museau de lanimal. L
encore, il ny a aucune difficult, il suffit de faire les choses dans lordre :
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . drawEllipse ( _x - 30 , _y + 20 , 80 , 150 ) ;
mouton . graphics . endFill () ;
mouton . graphics . moveTo ( _x - 5 , _y + 155 ) ;
mouton . graphics . curveTo ( _x + 10 , _y + 165 , _x + 25 , _y + 155 ) ;
mouton . graphics . moveTo ( _x + 10 , _y + 160 ) ;
mouton . graphics . lineTo ( _x + 10 , _y + 170 ) ;

1
2
3
4
5
6
7

Voici donc notre mouton qui commence doucement prendre forme comme le montre
la figure 15.14.

Figure 15.14 Notre mouton et sa tte

Les cheveux
Nous allons prsent dessiner ce que jai appel les cheveux , mais qui correspond
en ralit la petite touffe de laine prsente sur le dessus de la tte. La technique
utilise ici est similaire celle employe pour le corps, cependant nous allons utiliser
cette fois la mthode drawPath(). Afin de rendre le code plus lisible, je vous conseille
encore une fois dajouter les diffrentes coordonnes par commande. Voici donc le code
que jai ralis pour tracer les cheveux de notre beau mouton :
1
2
3
4
5
6
7
8
9
10
11

// Cheveux
var commandes : Vector . < int > = new Vector . < int >() ;
commandes . push (1 , 3 , 3 , 3 , 3 , 3 , 3 , 3 , 3 ) ;
var coordonnees : Vector . < Number > = new Vector . < Number >() ;
coordonnees . push ( _x - 20 , _y + 20 ) ;
coordonnees . push ( _x , _y - 10 , _x + 20 , _y + 10 ) ;
coordonnees . push ( _x + 40 , _y , _x + 50 , _y + 30 ) ;
coordonnees . push ( _x + 80 , _y + 30 , _x + 60 , _y + 50 ) ;
coordonnees . push ( _x + 70 , _y + 70 , _x + 40 , _y + 70 ) ;
coordonnees . push ( _x + 20 , _y + 90 , _x , _y + 70 ) ;
coordonnees . push ( _x - 20 , _y + 90 , _x - 30 , _y + 60 ) ;

318

EXERCICE : DESSINE-MOI UN MOUTON


12
13
14
15
16

coordonnees . push ( _x - 60 , _y + 50 , _x - 40 , _y + 30 ) ;
coordonnees . push ( _x - 40 , _y , _x - 20 , _y + 20 ) ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawPath ( commandes , coordonnees ) ;
mouton . graphics . endFill () ;

Nous avons cette fois quelque chose qui commence rellement ressembler un mouton
(voir figure 15.15).

Figure 15.15 Mise en place des cheveux

Les pattes
Continuons lexercice en dessinant les pattes pour lesquelles je nai pas russi trouver
leffet que je souhaitais. Ce nest pas grave, contentons-nous de dessiner deux rectangles
arrondis en guise de pieds. Rien de plus simple, ceci est ralisable en quatre instructions :
1
2
3
4
5

// Pattes
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . drawRoundRect ( _x - 60 , _y + 155 , 40 , 20 , 20 , 20
);
mouton . graphics . drawRoundRect ( _x + 40 , _y + 155 , 40 , 20 , 20 , 20
);
mouton . graphics . endFill () ;

Voici donc la figure 15.16 notre mouton qui peut prsent se tenir debout sur ses
pattes.
Les yeux
Notre mouton est trs beau, mais il est pour linstant aveugle ! Nous allons maintenant
nous occuper des yeux. Pour ceux-ci, nous nutiliserons que des cercles, ou plutt
des disques. Il nous en faudra trois pour chaque il : un pour lil en lui-mme, un
pour la pupille et enfin un dernier pour simuler le reflet blanc lintrieur de celle-ci.
Un petit dtail supplmentaire, nous naurons pas besoin de contours pour les deux
derniers disques. Cest pourquoi, nous dfinirons un style de lignes transparent pour
319

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

Figure 15.16 Notre mouton se tient debout

ceux-ci. Je vous propose donc de dcouvrir le code correspondant lensemble de ces


manipulations :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Yeux
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawCircle ( _x - 10 , _y + 100 , 15 ) ;
mouton . graphics . drawCircle ( _x + 25 , _y + 100 , 20 ) ;
mouton . graphics . endFill () ;
mouton . graphics . lineStyle (1 , 0x3A281E , 0 . 0 ) ;
mouton . graphics . beginFill ( 0x000000 ) ;
mouton . graphics . drawCircle ( _x - 10 , _y + 100 , 8 ) ;
mouton . graphics . drawCircle ( _x + 25 , _y + 100 , 8 ) ;
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawCircle ( _x - 8 , _y + 98 , 2 ) ;
mouton . graphics . drawCircle ( _x + 27 , _y + 98 , 2 ) ;
mouton . graphics . endFill () ;

Cette petite touche finale vient donner vie notre mouton qui nous scrute maintenant
du regard (voir figure 15.17) !

Figure 15.17 Le mouton intgral

320

EXERCICE : DESSINE-MOI UN MOUTON


La bulle
Jaurai pu laisser ce chef-duvre tel quel, mais je trouvais quil manquait un petit
quelque chose. Jai donc ajout une bulle au mouton comme si on se trouvait dans une
bande dessine. Rien de nouveau ici, il sagit presque exclusivement de cercles remplis
ainsi que dun rectangle arrondi. Encore une fois, la seule difficult est de placer les
lments au bon endroit. Voici comment faire :
1
2
3
4
5
6
7
8
9
10
11

// Bulle
mouton . graphics . beginFill ( 0x3A281E ) ;
mouton . graphics . drawCircle ( _x - 60 , _y + 70 , 5 ) ;
mouton . graphics . drawCircle ( _x - 80 , _y + 50 , 10 ) ;
mouton . graphics . drawRoundRect ( _x - 150 , _y - 25 , 90 , 60 , 60 , 60
);
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawCircle ( _x - 120 , _y + 15 , 5 ) ;
mouton . graphics . drawCircle ( _x - 105 , _y + 15 , 5 ) ;
mouton . graphics . drawCircle ( _x - 90 , _y + 15 , 5 ) ;
mouton . graphics . endFill () ;

Cette fois, nous avons la figure 15.18 le rsultat final de notre dessin.

Figure 15.18 Lillustration complte


Malgr ce que vous avez peut-tre ressenti au cours de cet exercice, la ralisation de ce mouton a demand beaucoup de travail, je my suis repris
plusieurs fois pour arriver ce rsultat. Nhsitez pas essayer de raliser
dautres dessins plus simples pour vous faire la main avec les mthodes de
cette classe Graphics !

Code final
Pour terminer ce chapitre, je vous ai rcrit lintgralit du code afin que vous puissiez
effectuer vos propres tests.
1

package

321

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT


2

3
4
5

import flash . display . Sprite ;


import flash . events . Event ;
import flash . display . Shape ;

6
7
8
9
10

public class Main extends Sprite


{
private var _x : int ;
private var _y : int ;

11
12
13
14
15
16

public function Main () : void


{
if ( stage ) init () ;
else addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

17
18
19
20
21
22
23
24

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// entry point
_x = 160 ;
_y = 40 ;
var mouton : Shape = new Shape () ;

25
26
27
28
29

// Fond
mouton . graphics . beginFill ( 0x10879D ) ;
mouton . graphics . drawRoundRect (0 , 0 , 280 , 220 , 40 ,
40 ) ;
mouton . graphics . endFill () ;

30
31
32
33
34
35
36
37
38
39
40
41
42

322

// Corps
mouton . graphics . lineStyle (4 , 0x3A281E , 1 . 0 ) ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . moveTo ( _x , _y ) ;
mouton . graphics . curveTo ( _x + 20 , _y - 20 , _x + 40 ,
_y ) ;
mouton . graphics . curveTo ( _x + 60 , _y - 10 , _x + 70 ,
_y + 10 ) ;
mouton . graphics . curveTo ( _x + 90 , _y + 10 , _x + 90 ,
_y + 30 ) ;
mouton . graphics . curveTo ( _x + 110 , _y + 40 , _x + 100
, _y + 60 ) ;
mouton . graphics . curveTo ( _x + 120 , _y + 80 , _x + 100
, _y + 90 ) ;
mouton . graphics . curveTo ( _x + 110 , _y + 110 , _x + 90
, _y + 110 ) ;
mouton . graphics . curveTo ( _x + 80 , _y + 140 , _x + 60 ,
_y + 120 ) ;
mouton . graphics . curveTo ( _x + 40 , _y + 150 , _x + 20 ,
_y + 130 ) ;

EXERCICE : DESSINE-MOI UN MOUTON


43
44
45
46
47
48
49
50
51

mouton . graphics . curveTo ( _x , _y + 150 , _x -20 , _y +


130 ) ;
mouton . graphics . curveTo ( _x -40 , _y + 140 , _x -50 ,
_y + 120 ) ;
mouton . graphics . curveTo ( _x -70 , _y + 120 , _x -70 ,
_y + 100 ) ;
mouton . graphics . curveTo ( _x -100 , _y + 90 , _x -90 ,
_y + 70 ) ;
mouton . graphics . curveTo ( _x -110 , _y + 50 , _x -90 ,
_y + 40 ) ;
mouton . graphics . curveTo ( _x -90 , _y + 20 , _x -60 , _y
+ 20 ) ;
mouton . graphics . curveTo ( _x -50 , _y , _x -30 , _y + 10
);
mouton . graphics . curveTo ( _x -20 , _y -10 , _x , _y ) ;
mouton . graphics . endFill () ;

52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

// T te
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . moveTo ( _x - 30 , _y + 50 ) ;
mouton . graphics . curveTo ( _x - 90 , _y + 165 , _x - 10 ,
_y + 60 ) ;
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . moveTo ( _x + 50 , _y + 50 ) ;
mouton . graphics . curveTo ( _x + 100 , _y + 165 , _x + 30
, _y + 60 ) ;
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . drawEllipse ( _x - 30 , _y + 20 , 80 ,
150 ) ;
mouton . graphics . endFill () ;
mouton . graphics . moveTo ( _x - 5 , _y + 155 ) ;
mouton . graphics . curveTo ( _x + 10 , _y + 165 , _x + 25 ,
_y + 155 ) ;
mouton . graphics . moveTo ( _x + 10 , _y + 160 ) ;
mouton . graphics . lineTo ( _x + 10 , _y + 170 ) ;

69
70
71
72
73
74
75
76
77
78

// Cheveux
var commandes : Vector . < int > = new Vector . < int >() ;
commandes . push (1 , 3 , 3 , 3 , 3 , 3 , 3 , 3 , 3 ) ;
var coordonnees : Vector . < Number > = new Vector . <
Number >() ;
coordonnees . push ( _x - 20 , _y + 20 ) ;
coordonnees . push ( _x , _y - 10 , _x + 20 , _y + 10 ) ;
coordonnees . push ( _x + 40 , _y , _x + 50 , _y + 30 ) ;
coordonnees . push ( _x + 80 , _y + 30 , _x + 60 , _y + 50
);
coordonnees . push ( _x + 70 , _y + 70 , _x + 40 , _y + 70
);

323

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT


coordonnees . push ( _x + 20 , _y + 90 , _x , _y + 70 ) ;
coordonnees . push ( _x - 20 , _y + 90 , _x - 30 , _y + 60
);
coordonnees . push ( _x - 60 , _y + 50 , _x - 40 , _y + 30
);
coordonnees . push ( _x - 40 , _y , _x - 20 , _y + 20 ) ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawPath ( commandes , coordonnees ) ;
mouton . graphics . endFill () ;

79
80
81
82
83
84
85
86

// Pattes
mouton . graphics . beginFill ( 0xF9D092 ) ;
mouton . graphics . drawRoundRect ( _x - 60 , _y + 155 , 40
, 20 , 20 , 20 ) ;
mouton . graphics . drawRoundRect ( _x + 40 , _y + 155 , 40
, 20 , 20 , 20 ) ;
mouton . graphics . endFill () ;

87
88
89
90
91
92

// Yeux
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawCircle ( _x - 10 , _y + 100 , 15 ) ;
mouton . graphics . drawCircle ( _x + 25 , _y + 100 , 20 ) ;
mouton . graphics . endFill () ;
mouton . graphics . lineStyle (1 , 0x3A281E , 0 . 0 ) ;
mouton . graphics . beginFill ( 0x000000 ) ;
mouton . graphics . drawCircle ( _x - 10 , _y + 100 , 8 ) ;
mouton . graphics . drawCircle ( _x + 25 , _y + 100 , 8 ) ;
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawCircle ( _x - 8 , _y + 98 , 2 ) ;
mouton . graphics . drawCircle ( _x + 27 , _y + 98 , 2 ) ;
mouton . graphics . endFill () ;

93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

// Bulle
mouton . graphics . beginFill ( 0x3A281E ) ;
mouton . graphics . drawCircle ( _x - 60 , _y + 70 , 5 ) ;
mouton . graphics . drawCircle ( _x - 80 , _y + 50 , 10 ) ;
mouton . graphics . drawRoundRect ( _x - 150 , _y - 25 , 90
, 60 , 60 , 60 ) ;
mouton . graphics . endFill () ;
mouton . graphics . beginFill ( 0xFFFFFF ) ;
mouton . graphics . drawCircle ( _x - 120 , _y + 15 , 5 ) ;
mouton . graphics . drawCircle ( _x - 105 , _y + 15 , 5 ) ;
mouton . graphics . drawCircle ( _x - 90 , _y + 15 , 5 ) ;
mouton . graphics . endFill () ;

108
109
110
111
112
113
114
115
116
117
118
119
120

121
122
123

324

this . addChild ( mouton ) ;

EXERCICE : DESSINE-MOI UN MOUTON


124
125

Vous
 en utilisant le code web ci-dessous.
pouvez lafficher pour le copier
Code final
B
Code web : 285951

En rsum
La classe Graphics renferme toutes les mthodes permettant de dessiner directement
depuis le code.
Pour accder cette classe Graphics, il est ncessaire de passer par linstanciation
de lune de ces trois classes : Shape, Sprite ou MovieClip.
En Flash, les dessins raliss sont de type vectoriels et sadaptent la taille de
laffichage.
Pour dessiner en Actionscript, nous devons dfinir un contour puis spcifier les
styles de remplissages et de lignes qui doivent lui tre appliqus.
Les contours peuvent tre raliss grce des lignes droites ou des courbes de
Bzier.
Des formes prdfinies facilitent le trac de formes gomtriques simples, telles que
les cercles, les ellipses et les rectangles.

325

CHAPITRE 15. DESSINER AVEC LACTIONSCRIPT

326

Chapitre

16

Utilisation des matrices


Difficult :
Nous allons prsent nous pencher sur les matrices ! Nayez pas peur, ce chapitre ne
sera pas aussi complexe quil en lair. En fait, lutilisation de ces matrices est grandement facilite en Actionscript. En effet, vous verrez que nous disposons dune classe
nomme Matrix qui permet de manipuler une matrice sans besoin de comprendre comment elle fonctionne rellement. L encore, je pense que nous pouvons remercier la POO
et lencapsulation.
Nous verrons donc comment utiliser cette classe pour dcrire comment appliquer un dgrad
dans un trac ou encore faire effectuer des transformations gomtriques nos objets
daffichage.

327

CHAPITRE 16. UTILISATION DES MATRICES

Les matrices ou la classe Matrix


Introduction aux matrices
Les bases
Avant daller plus loin, je pense quil serait bien de vous expliquer un peu ce quest une
matrice, si vous ne le savez pas dj. Ne vous inquitez pas, il ne sagit pas dun cours
de mathmatiques ! Nous ne verrons donc pas de longues formules o vous risqueriez
de vous arracher les cheveux !
Malgr son nom barbare, une matrice nest en ralit rien dautre quun tableau de
valeurs. Les nombres qui y sont stocks peuvent reprsenter tout un tas de choses suivant lutilisation que lon peut en avoir. Les matrices peuvent donc tre utilises pour
des applications simples, mais permettent galement de reprsenter des concepts mathmatiques complexes. Toutefois, en ce qui nous concerne, nous nous contenterons de
dire quune matrice est un tableau de nombres et nous nous limiterons aux matrices
bidimensionnelles. Ainsi, toute matrice est de taille m n o m est le nombre de
lignes et n le nombre de colonnes. Voici par exemple une matrice 3 3 quelconque :

1
4
7

2
5
8

3
6
9

Comme dans un tableau, il est alors possible de dsigner un lment particulier grce
un couple dindices not (i, j). Dans lexemple prcdent, supposons que nous nommions
la matrice A. Nous pourrions par exemple prciser que A(2, 1) = 4. En mathmatiques,
il est possible de raliser tout un tas doprations avec les matrices. Cependant, dans
le cadre de ce cours, lobjectif nest pas de vous les prsenter toutes, cela serait bien
trop long et naurait pas vraiment dutilit dans notre cas. Toutefois, retenez quil
existe une matrice un peu particulire o les coefficients diagonaux sont gaux 1 et
les autres coefficients sont tous nuls : la matrice identit. En voici une :

1
0
0

0
1
0

0
0
1

Pour les dbutants en la matire, vous retiendrez donc quune matrice peut globalement
se manipuler comme un tableau de nombres.
Thorie pour les initis
Malgr le titre, jinvite galement les novices en termes de matrices lire la suite ne
serait-ce que pour le plaisir ! En deux dimensions, nous avons lhabitude dutiliser un
couple de coordonnes not (x, y) pour reprer un point sur le plan. Lorsque lon utilise
la notation matricielle, il est alors prfrable de noter ces coordonnes en vertical et
nous appellerons cette nouvelle notation un vecteur. Voici donc notre vecteur :
328

LES MATRICES OU LA CLASSE MATRIX

x
y

Une des proprits des matrices est la multiplication. Elle permet ainsi de multiplier
deux matrices entre elles mais galement une matrice avec un vecteur. Toutefois, les
dimensions des deux entits de lopration doivent tre cohrentes. Dans notre cas,
pour pouvoir multiplier notre vecteur de dimension 2 1, nous devrons utiliser une
matrice 2 2. Lintrt de tout cela est qu lintrieur de notre matrice 2 2, nous
pouvons dfinir diffrentes transformations gomtriques :


sx
0

0
sy

x
y

Lexemple ci-dessus est une opration de mise lchelle o sx correspond au redimensionnement horizontal et sy au vertical. Ainsi, aprs multiplication, nous obtenons
un nouveau vecteur o les nouvelles coordonnes ont t modifies suivant la transformation. Une opration qui, sans doute, vous fera certainement peur est la rotation.
Nous y retrouvons nos fonctions prfrs : sinus et cosinus. Voici donc comment se
ralise une rotation dun angle :


sin
cos

cos
sin

x
y

Nous arrivons maintenant au petit point pour lequel il nous a fallu faire toutes ces
prcisions. Lorsque lon utilise une matrice de dimension 2 2, il est possible de
raliser beaucoup de transformations. Toutefois, la translation ne peut pas tre prise
en compte dans ces conditions. Cest pourquoi, il est impratif dajouter une dimension
supplmentaire lensemble de lopration. Il devient alors possible de raliser une
translation de la manire suivante :

1
0
0

0
1
0

tx
x
ty y
1
1

Dans lexemple prcdent, les valeurs tx et ty reprsentent les dplacements respecti

vement suivant les axes


x et
y.
Le fait de rajouter une dimension au vecteur de coordonnes na de sens que
pour lopration mathmatique. Ainsi, les coordonnes 2D du point considr
seront toujours les deux premires, la troisime tant tout simplement ignore.
Vous noterez que toute cette thorie sur les matrices permet de vous aider
mieux cerner leur intrt. Dans la suite, vous verrez que toutes ces oprations
sont simplifies grce lencapsulation de la classe Matrix, qui dispose
de mthodes simples pour dfinir ces transformations. Ce nest donc pas
dramatique si vous navez pas tout compris sur la thorie des matrices !
329

CHAPITRE 16. UTILISATION DES MATRICES

Lobjet Matrix
Suite cette petite introduction aux matrices, vous devriez maintenant tre plus
laise et, surtout, vous ne devriez pas tre surpris par tout ce qui va suivre.

Introduction
Comme vous limaginez maintenant, la classe Matrix permet de dfinir une matrice
lintrieur du code. Celle-ci permettra donc de dfinir lensemble des transformations
appliquer un objet. Si vous avez bien suivi tout ce qui a t dit sur les matrices prcdemment, vous ne devriez donc pas tre surpris par la forme des matrices manipules
par cette classe :

a
b
0

c
d
0

tx
ty
1

Nous retrouvons donc quatre coefficients a, b, c et d qui permettent de raliser les


transformations classiques telles que le redimensionnement, la rotation mais galement
linclinaison. Nous disposons galement des valeurs de translation tx et ty , permettant
de dplacer un objet. Cette classe Matrix va donc nous permettre de dfinir une matrice
qui combinera une ou plusieurs de ces transformations en mme temps.

Dclaration et initialisation
Comme toute classe, un objet Matrix sinitiale grce au constructeur de la classe
dans une variable. Voici donc comment procder :
1

var maTransformation : Matrix = new Matrix () ;

Lorsque vous initialisez une matrice comme ceci, le constructeur cre une matrice identit, qui, en termes de transformations, ne fait strictement rien. En fait,
ce constructeur possde les diffrents paramtres facultatifs suivant : a, b, c, d, tx et
ty. Toutefois, comme nous ne voulons pas nous prendre la tte avec les mathmatiques,
nous utiliserons plutt les mthodes de la classe qui simplifient normment la gestion
des transformations.

Cration de dgrads
Dans le chapitre prcdent, jai volontairement omis de vous parler des dgrads. Nous
verrons dans la suite de ce chapitre que lutilisation des matrices permet de mieux
contrler le dgrad en lui-mme et ainsi parvenir plus facilement au rendu dsir.
330

CRATION DE DGRADS

Prsentation des dgrads


La gestion des dgrads en Actionscript peut paratre complexe au premier abord,
cependant ses possibilits sont larges. Vous verrez au fil des explications que la cration
dun dgrad se fait par tapes, de la mme manire quon le ferait dans un logiciel
de graphisme. Nous allons donc dans un premier temps dfinir le dgrad laide
de diffrents tableaux Array, comme ceci :
1
2
3

var couleurs : Array = [ 0xFF0000 , 0x00FF00 ];


var alphas : Array = [1 , 1 ];
var ratios : Array = [0 , 255 ];

Dans lexemple prcdent, nous avons dclar et initialis trois tableaux : couleurs,
alphas et ratios. Comme son nom lindique, le premier sert lister les diffrentes
couleurs du dgrad, ici rouge et vert. Le deuxime permet de dfinir lopacit de
chacune des couleurs prcdentes dans le mme ordre. Enfin, la variable ratios nous
permet de grer la position des couleurs les unes par rapport aux autres. Pour comparer,
vous pouvez imaginer quil sagit des petits curseurs que vous pourriez dplacer dans
un diteur de dgrad, ici reprsents par des valeurs comprises entre 0 lextrmit
gauche et 255 lextrmit droite, comme le montre la figure 16.1.

Figure 16.1 Un dgrad et des curseurs


Un des intrts de lutilisation de tableaux vient du fait que leur taille peut
tre quelconque. Ainsi, vous pouvez rajouter autant de couleurs que vous souhaitez, en rajoutant autant valeurs dans chacun des trois tableaux prcdents.
Cest principalement en ajoutant de nouvelles couleurs que la variable ratios
prend de limportance et permet alors de bien situer les couleurs entre elles.
En thorie, il est possible dappliquer un dgrad tel quel un remplissage par exemple.
Nous reviendrons dessus plus tard, mais vous pourriez trs bien utiliser le code suivant :
1
2
3
4

var monDessin : Shape = new Shape ;


monDessin . graphics . beginGradientFill ( GradientType . LINEAR ,
couleurs , alphas , ratios ) ;
monDessin . graphics . drawRect (0 , 0 , 100 , 100 ) ;
addChild ( monDessin ) ;

Nanmoins, il est quasiment indispensable de se servir des matrices pour dcrire comment les dgrads doivent tre appliqus. Hormis les valeurs GradientType.LINEAR
et GradientType.RADIAL qui permettent de dfinir le dgrad de type linaire ou radial, il est ncessaire de prciser la largeur, la hauteur ou encore langle de ce dernier
lintrieur du futur remplissage. Ainsi un objet de type Matrix va permettre de mettre
en place ces diffrents paramtres lintrieur dune mme matrice.
331

CHAPITRE 16. UTILISATION DES MATRICES

Ajouter une matrice de description


Pr-requis
Vous noterez que lutilisation des matrices ici nest pas tout fait identique aux
transformations dcrites auparavant. Toutefois, vous verrez quau final, la description
des dgrads y est trs similaire et que les matrices seront alors dfinies de la mme
manire.
Dans la suite de ce cours, nous partirons du dgrad blanc et noir dfini ci-dessous :
1
2
3

var couleurs : Array = [ 0xFFFFFF , 0x000000 ];


var alphas : Array = [1 , 1 ];
var ratios : Array = [0 , 255 ];

Prparation de la matrice
Comme nous lavons dit, la classe Matrix possde des mthodes qui facilitent la
dfinition dune matrice. Parmi elles, la mthode createGradientBox() est particulirement utile pour dcrire la mise en place dun dgrad. Les diffrents paramtres
de cette mthode sont lists dans le code dexemple ci-dessous :
1
2
3
4
5
6
7

var matrix : Matrix = new Matrix () ;


var largeur : Number = 100 ;
var hauteur : Number = 100 ;
var rotation : Number = 0 ;
var tx : Number = 0 ;
var ty : Number = 0 ;
matrix . createGradientBox ( largeur , hauteur , rotation , tx , ty ) ;

Notez que seuls la largeur et la hauteur sont des paramtres obligatoires.


Vous pouvez donc aisment vous passer des derniers paramtres si ceux-ci
sont nuls, et ainsi allger votre code. Ce sera notamment souvent le cas pour
les valeurs de dcalage du dgrad tx et ty.
Le nom des variables dans lexemple prcdent est assez explicite, cependant je vous
propose la figure 16.2 un tableau montrant linfluence de ces diffrents paramtres
sur le remplissage final.
Comme cest souvent le cas en programmation, les angles sont exprims en
radians. Toutefois, lutilisation de la classe Math vous permet de rcuprer la
valeur de \pi et donc dexprimer facilement les angles dans cette unit. Ainsi,
la conversion en radians se fait laide du facteur \frac{\pi}{180} .

332

CRATION DE DGRADS

Figure 16.2 Les paramtres modifient laffichage


Appliquer un dgrad
Pour appliquer un dgrad un remplissage, vous devez utiliser la mthode
beginGradientFill() que nous avions rapidement vu prcdemment. Vous pouvez
alors dfinir le remplissage en renseignant les diffrents paramtres dans lordre suivant :
1

monDessin . graphics . beginGradientFill ( GradientType . LINEAR ,


couleurs , alphas , ratios , matrix ) ;

Je rappelle quun dgrad peut tre linaire ou radial, dfini par les constantes
GradientType.LINEAR et GradientType.RADIAL. Comme pour la mthode beginFill(),
le remplissage est termin lors de lappel de la fonction endFill() qui termine le trac
dun contour.
Contrairement ce que vous pourriez croire, un dgrad peut tout autant sappliquer
aux lignes. Pour cela, utilisez la mthode lineGradientStyle() exactement de la
mme manire que beginGradientFill(). Toutefois, noubliez pas de dfinir la largeur
de la ligne laide de la mthode lineStyle(), sans quoi celle-ci ne sera pas visible.
Voici donc comment procder :
1
2

monDessin . graphics . lineStyle ( 2 ) ;


monDessin . graphics . lineGradientStyle ( GradientType . LINEAR ,
couleurs , alphas , ratios , matrix ) ;

333

CHAPITRE 16. UTILISATION DES MATRICES

Exemple : cration dun bouton


Pour terminer les explications sur les dgrads, je vous propose de raliser un petit
bouton comme vous pourriez en trouver sur nimporte quelle page web. Pour ce faire,
nous allons donc utiliser un dgrad linaire vertical que nous utiliserons comme
remplissage. Nous dessinerons alors un rectangles aux coins arrondis avec une ligne de
couleur pour marquer le contour de notre bouton. Sans plus attendre, voici le code
correspondant la dfinition du dgrad et au trac de ce bouton :
1
2
3
4

// D grad de base
var couleurs : Array = [ 0xEEBBBB , 0xDD0000 ];
var alphas : Array = [1 , 1 ];
var ratios : Array = [0 , 255 ];

5
6
7
8
9
10
11
12
13

// Matrice de description
var matrix : Matrix = new Matrix () ;
var largeur : Number = 100 ;
var hauteur : Number = 15 ;
var rotation : Number = Math . PI / 2 ;
var tx : Number = 0 ;
var ty : Number = 0 ;
matrix . createGradientBox ( largeur , hauteur , rotation , tx , ty ) ;

14
15
16
17
18
19
20

// Trac du bouton
var monBouton : Shape = new Shape ;
monBouton . graphics . lineStyle (1 , 0x880000 ) ;
monBouton . graphics . beginGradientFill ( GradientType . LINEAR ,
couleurs , alphas , ratios , matrix ) ;
monBouton . graphics . drawRoundRect (0 , 0 , 100 , 25 , 10 ) ;
addChild ( monBouton ) ;

Nous avons donc ici ralis la base dun bouton typique dune page Internet. Il manque
encore le texte par-dessus celui-ci mais vous devriez normalement pouvoir vous en
occuper vous-mmes. La figure 16.3 montre quoi ressemble notre bouton.

Figure 16.3 Notre bouton

Pour ajouter du texte grce lobjet TextField, vous devrez utiliser un


conteneur de type Sprite pour raliser ce bouton. Vous pourrez alors insrer lobjet Shape lintrieur ou dessiner directement depuis la proprit
graphics du conteneur.

334

LES TRANSFORMATIONS MATRICIELLES

Les transformations matricielles


Un objet transformer
Cration de lobjet
Nous allons dabord crer une forme que nous pourrons dformer plus tard. Pour ne
pas se compliquer la vie, nous tracerons donc un carr dans un objet de type Shape.
Nous partirons du code ci-dessous pour la suite de ce chapitre :
1
2
3
4

var monObjet : Shape = new Shape () ;


monObjet . graphics . beginFill ( 0x6688FF ) ;
monObjet . graphics . drawRect (0 , 0 , 100 , 100 ) ;
this . addChild ( monObjet ) ;

Pour que vous puissiez mieux comparer les effets des diffrentes transformations, voici,
la figure 16.4, loriginal que nous venons de crer.

Figure 16.4 Notre image originale


Lorsque vous crez nimporte quel objet daffichage, il lui est associ un centre
de transformation. Par dfaut, le centre dun objet est plac au point (0,0).
Veillez donc en tenir compte lors de la cration de vos affichages car ce
point influera sur la transformation, et il est probable que vous ayez alors
besoin de replacer vos objets aprs chacune delles.

La matrice de transformation
Tout objet hritant de la classe DisplayObject possde une matrice de transformation. Celle-ci na aucune incidence sur laffichage sil sagit dune matrice identit
ou si sa valeur est null. Pour y accder, vous devez atteindre la proprit matrix dune
proprit de votre objet nomme transform. Voici donc comment y parvenir :
1

monObjet . transform . matrix = matrix ;

Notez que la proprit de type Transform possde galement une matrice de


type Matrix3D qui permet de grer les transformations en trois dimensions.
Nous nen parlerons pas ici, mais sachez que vous ne pouvez utiliser ces deux
matrices simultanment. La modification de lune des deux entrane forcment
lautre une valeur null.
335

CHAPITRE 16. UTILISATION DES MATRICES


Bien quil soit possible de modifier directement les valeurs lintrieur dune matrice,
nous prfrerons utiliser les mthodes de la classe Matrix pour effectuer nos transformations.

Cration dune matrice de transformation


Mthodes de transformations individuelles
Pour commencer, nous allons voir revenir trs souvent une matrice identit. Cela
correspond une matrice nappliquant aucune transformation lobjet. Pour cela,
utilisez la fonction identity() simplement comme ceci :
matrix . identity () ;

Ensuite, voyons comment redimensionner notre objet daffichage. Pour cela, nous utiliserons la mthode scale() o nous pouvons spcifier les valeurs de redimensionnement
horizontal sx et vertical sx, la taille dorigine tant fixe 1. Voici donc comment procder :
matrix . scale ( sx , sy ) ;

Je vais maintenant vous prsenter la mthode rotate() permettant de faire pivoter un


objet par rapport son centre. Il suffit alors uniquement de prciser langle de rotation
en radians :
matrix . rotate ( angle ) ;

Voyons prsent ensemble la translation. Rien de plus simple, il suffit de prciser les
dcalages dx et dy la mthode translate() de la faon suivante :
matrix . translate ( dx , dy ) ;

Enfin, je vous propose une srie de transformations dans lexemple suivant :


1
2
3
4
5
6
7

var matrix : Matrix = new Matrix () ;


matrix . identity () ;
matrix . scale (2 , 1 ) ;
matrix . rotate ( Math . PI / 4 ) ;
matrix . translate ( 72 , 0 ) ;
// Application des transformations
monObjet . transform . matrix = matrix ;

Dans lexemple prcdent, nous avons donc doubl notre objet dans le sens horizontal.
Puis nous lavons fait tourner de 45 par rapport son centre confondu au coin suprieur gauche du rectangle. Enfin, nous avons translat lobjet afin quil soit nouveau
entirement dans la zone visible de lcran. Regardez le rsultat final la figure 16.5.
336

LES TRANSFORMATIONS MATRICIELLES

Figure 16.5 Le rsultat final


Noubliez pas que lorsque vous effectuez des transformations, celles-ci sont
toujours ralises par rapport au centre de votre objet. Ainsi, si celui-ci nest
positionn en (0,0), vous verrez sans nul doute votre objet de dplacer galement en rapport des transformations que vous pourrez lui appliquer. Soyez
donc prvoyant au moment de la cration de objet pour essayer danticiper
ces repositionnements.

Une petite exception : linclinaison


Il est aussi possible de dformer rellement votre objet en linclinant. Toutefois, la classe
Matrix ne possde pas de mthode pour ce genre de transformations. Cependant, il
est possible de modifier directement les valeurs lintrieur de la matrice. Cest donc
ce que nous ferons pour raliser ceci, en agissant sur la valeur b pour une inclinaison
verticale et sur la c pour une horizontale. Voici donc comment faire :
1

matrix . c = - Math . tan ( 2 ) ;

Dans cet exemple, nous inclinons notre objet dune valeur de 2 horizontalement. Ainsi,
chaque pixel va tre dcal vers la droite de deux fois sa distance verticale au centre
de lobjet. Voyez plutt le rsultat la figure 16.6.

Figure 16.6 Le rsultat final

Plusieurs transformations la fois


Contrairement ce que pourrait vous laissez croire le titre, les mthodes prcdentes
permettent galement de combiner plusieurs transformations en une seule matrice. Nous
337

CHAPITRE 16. UTILISATION DES MATRICES


allons crer une matrice combinant plusieurs transformations laide dune unique
mthode : createBox().
Cette mthode permet de combiner un redimensionnement avec une rotation
et une translation. Nanmoins, il faut tre vigilant quant lordre dapplication de chacune de ces transformations. Lordre des oprations est le suivant :
identit -> rotation -> redimensionnement -> translation.
Ainsi, lorsque vous utiliserez cette mthode, la matrice sera rinitialise et effacera
donc toute transformation de la matrice. Voici donc comment sutilise cette mthode :
matrix . createBox ( sx , sx , angle , dx , dy ) ;

Je vous propose donc un petit exemple dutilisation :


1
2
3

var matrix : Matrix = new Matrix () ;


matrix . createBox (2 , 1 , Math . PI /4 , 150 , 0 ) ;
monObjet . transform . matrix = matrix ;

Les oprations sont donc insres en une seule fois lintrieur de la matrice et produisent la figure 16.7.

Figure 16.7 Le rsultat final


Remarquez que les transformations nont pas t effectues dans le mme
ordre que prcdemment, notamment la rotation qui est ralise avant le
redimensionnement. Il est donc normal que notre objet ait t dform et
quil ressemble maintenant davantage un losange qu un carr.

Pour finir avec les matrices


Ajouter des transformations
Depuis le dpart, nous ne faisons quaffecter une matrice de transformation un
objet. Pour faire a, nous utilisons donc linstruction suivante :
1

monObjet . transform . matrix = matrix ;

Cependant, en effectuant cette affectation, vous effacez galement dventuelles transformations dj appliques lobjet. Or vous souhaiteriez peut-tre conserver ces anciennes transformations et appliquer en plus les nouvelles. Pour faire cela, vous aurez
338

LES TRANSFORMATIONS MATRICIELLES


donc besoin de rcuprer la matrice existante, avant dy ajouter de nouvelles oprations
de transformation. Voil donc comment nous pourrions rajouter une rotation de 45
notre objet, sans rinitialiser lensemble des transformations dj existantes :
1
2
3
4
5
6
7

// R cup ration de la matrice de l ' objet


var matrix : Matrix = new Matrix () ;
matrix = monObjet . transform . matrix ;
// Ajout d ' une transformation
matrix . rotate ( Math . PI / 4 ) ;
// Application des transformations
monObjet . transform . matrix = matrix ;

Si vous avez bien suivi, vous devriez vous rappeler quen utilisant la mthode createBox(),
vous commencez par redfinir lobjet Matrix comme matrice identit, liminant ainsi
toute trace danciennes transformations. Il faut donc procder diffremment si vous souhaitez conserver ces transformations. Pour cela, la classe Matrix dispose dune mthode
nomme concat() qui permet de concatner une matrice avec une autre, cest--dire
de combiner les effets gomtriques des deux matrices. Voil donc comment je vous
suggre de procder :
1
2
3
4
5
6
7
8
9
10

// R cup ration de la matrice de l ' objet


var matrix : Matrix = new Matrix () ;
matrix = monObjet . transform . matrix ;
// Cr ation de la matrice de transformation
var transformation : Matrix = new Matrix () ;
transformation . createBox (2 , 1 , Math . PI /4 , 150 , 0 ) ;
// Combinaison des matrices
matrix . concat ( transformation ) ;
// Application des transformations
monObjet . transform . matrix = matrix ;

Soyez attentif toutefois la manire de concatner vos deux matrices. En


effet, il faut bien ici ajouter les modifications de la matrice transformation
la matrice dorigine matrix. Cest pourquoi nous utilisons la mthode
concat() de matrix et non celle de transformation, qui aurait pour effet
dappliquer les nouvelles transformations avant les anciennes.

Intrt des transformations matricielles


Il est probable que vous vous demandiez depuis le dbut quel est lintrt dutiliser les
matrices alors que les proprits x, y, rotation, scaleX et scaleY permettent de faire
la mme chose.
En ralit, les transformations matricielles sont plus puissantes, notamment car
elles permettent les dformations impossibles avec les proprits prcdentes. Un autre
avantage est galement de limiter les modifications lies laffichage. En effet, lorsque
vous modifiez les proprits dun objet daffichage, celui-ci doit tre entirement retrac,
cest--dire pixel par pixel. Cette opration peut donc tre longue suivant les dimensions
339

CHAPITRE 16. UTILISATION DES MATRICES


de vos tracs et autres objets daffichage. Cest pourquoi, utiliser les transformations
matricielles acclre cette tape en combinant plusieurs oprations en une seule instruction de mise jour de laffichage. Ainsi, il est prfrable dutiliser cette technique
pour diminuer le temps dexcution de ces transformations et fluidifier au maximum
votre affichage.

En rsum
Une matrice est un tableau de nombres m lignes et n colonnes.
La classe Matrix sert crer et manipuler des matrices plus simplement.
Cette classe permet notamment de faciliter la mise en place des dgrads grce sa
mthode createGradientBox().
Lobjet Matrix est beaucoup utilis pour effectuer des transformations matricielles.
Pour les transformations classiques, il existe les diffrentes mthodes scale(), rotate()
et translate().
Il est possible de combiner plusieurs oprations gomtriques grce la mthode
createBox()
Lutilisation des matrices pour les transformations gomtriques permet dacclrer
le rendu de laffichage.

340

Chapitre

17

Manipuler des images


Difficult :
Il est temps dembellir notre application laide dimages. Dans ce chapitre, nous verrons
comment incorporer des images notre application, comment les afficher sur la scne,
nous aborderons galement quelques manipulations utiles. Toutefois, nous nvoquerons
pas ici le chargement dynamique dimages.

341

CHAPITRE 17. MANIPULER DES IMAGES

Embarquer des images


Prparation de limage
Dans un premier temps, il faut prparer limage que nous voulons incorporer dans notre
application. Reprenons limage de Zozor (voir figure 17.1) que nous avons utilise pour
afficher une image dans un champ de texte.

Figure 17.1 Zozor, la mascotte du Site du Zro


Crez un dossier lib sil nexiste pas dj dans le rpertoire de votre projet, puis crez-y
un dossier img. Enfin, copiez dans ce dossier img limage de Zozor. Voil ! Notre image
de Zozor est prte tre incorpore dans notre application !

Librairie dimages
Une nouvelle classe
Pour que notre projet soit un peu organis, nous allons embarquer nos images dans
une classe qui reprsentera notre bibliothque dimages. Crez une nouvelle classe
ImageLibrary ct de notre classe Main :
1
2
3
4
5
6
7
8

package
{
/* *
* Librairie contenant nos images embarqu es .
* @author Guillaume CHAU
*/
public class ImageLibrary
{

10
11
12

Incorporer une image


Pour embarquer une image, nous allons utiliser une instruction spciale pour le
compilateur, de la mme manire que nous avons embarqu une police de caractre,
grce au mot-cl Embed :
342

EMBARQUER DES IMAGES


1

[ Embed ( source = " ../ lib / img / zozor . png " ) ]

Le code est plus simple : il suffit dindiquer le chemin de limage dans le paramtre
source. Petite astuce si vous utilisez FlashDevelop : dans larborescence du projet,
faites un clic droit sur limage incorporer, puis slectionnez Generate Embed Code,
comme la figure 17.2.

Figure 17.2 FlashDevelop facilite lincorporation dimages


FlashDevelop insre alors linstruction spciale automatiquement, lendroit o votre
curseur dinsertion se trouve dans la classe.
Puis, sur la ligne suivante, il faut dclarer un attribut statique de type Class, comme
pour les polices de caractres embarques :
1

public static var Zozor : Class ;

Voici le code complet de la classe :


1
2
3
4
5
6
7
8

package
{
/* *
* Librairie contenant nos images embarqu es .
* @author Guillaume CHAU
*/
public class ImageLibrary
{

9
10

[ Embed ( source = " ../ lib / img / zozor . png " ) ]

343

CHAPITRE 17. MANIPULER DES IMAGES


public static var Zozor : Class ;

11
12

13
14
15

Notre librairie dimages embarques est maintenant prte lemploi !

Afficher des images


La classe Bitmap
Pour afficher une image, nous allons utiliser la classe Bitmap (voir figure 17.3).

Figure 17.3 La classe Bitmap dans larbre des classes daffichage


Si nous utilisons maintenant le constructeur de la classe Bitmap, nous obtiendrons une
image vide :
1
2

// Image vide
var zozor : Bitmap = new Bitmap () ;

la place, nous allons utiliser la classe contenue dans lattribut statique que nous
avons dclar dans notre classe ImageLibrary :
1

var zozor : Bitmap = new ImageLibrary . Zozor () ;

Voici le code complet pour afficher notre image de Zozor :


344

AFFICHER DES IMAGES


1
2
3

// Cr ation de l ' image


var zozor : Bitmap = new ImageLibrary . Zozor () ;
addChild ( zozor ) ;

4
5
6
7

// Alignement au centre
zozor . x = ( stage . stageWidth - zozor . width ) / 2 ;
zozor . y = ( stage . stageHeight - zozor . height ) / 2 ;

Ce qui nous donne lcran la figure 17.4.

Figure 17.4 Zozor !

Redimensionnement
Je vous propose dessayer de redimensionner notre image de Zozor : doublez sa taille
sans regarder la solution pour vrifier que vous vous souvenez bien des attributs ncessaires.
Vous devriez obtenir la figure 17.5.
Voici une solution possible :
1

// Cr ation de l ' image

345

CHAPITRE 17. MANIPULER DES IMAGES

Figure 17.5 Zozor a pris du poids.

346

AFFICHER DES IMAGES


2
3

var zozor : Bitmap = new ImageLibrary . Zozor () ;


addChild ( zozor ) ;

4
5
6
7

// Redime nsionnement
zozor . scaleX = 2 ;
zozor . scaleY = zozor . scaleX ;

8
9
10
11

// Alignement au centre
zozor . x = ( stage . stageWidth - zozor . width ) / 2 ;
zozor . y = ( stage . stageHeight - zozor . height ) / 2 ;

laide des attributs scaleX et scaleY de la classe DisplayObject dont hrite la classe
Bitmap, nous pouvons trs facilement appliquer un coefficient multipliant la taille de
notre objet daffichage.
Limage est devenue affreuse avec ces gros pixels. . . Peut-on y remdier ?

Plus ou moins. En vrit, il ny a pas de formule magique pour rendre limage aussi
nette quelle ntait sa taille dorigine, mais il est nanmoins possible damliorer le
rendu obtenu lors de tels redimensionnements jusqu une certaine mesure. Pour cet
effet, la classe Bitmap dispose dun attribut smoothing qui indique si les pixels de
limage doivent tre lisss si elle est redimensionne :
1
2

// Lissage des pixels


zozor . smoothing = true ;

Ce qui nous donne lcran la figure 17.6.


Cest dj un peu mieux ! Mais leffet de cet attribut se fait surtout ressentir lorsque
lon diminue la taille des images. Au lieu de doubler la taille de Zozor, mettons-la
70%, sans utiliser le lissage :
1
2
3

// Cr ation de l ' image


var zozor : Bitmap = new ImageLibrary . Zozor () ;
addChild ( zozor ) ;

4
5
6

// Lissage des pixels


// zozor . smoothing = true ;

7
8
9
10

// Redime nsionnement
zozor . scaleX = 0 . 7 ;
zozor . scaleY = zozor . scaleX ;

11
12
13
14

// Alignement au centre
zozor . x = ( stage . stageWidth - zozor . width ) / 2 ;
zozor . y = ( stage . stageHeight - zozor . height ) / 2 ;

Ce qui nous donne la figure 17.7.


347

CHAPITRE 17. MANIPULER DES IMAGES

Figure 17.6 Les pixels sont lisss.

Figure 17.7 Taille 70% de loriginal

348

OPRATIONS SUR LES IMAGES


Comme vous pouvez le constater, le rendu que nous avons obtenu est loin dtre
agrable. Pour remdier cela, ractivons le lissage :
1
2
3

// Cr ation de l ' image


var zozor : Bitmap = new ImageLibrary . Zozor () ;
addChild ( zozor ) ;

4
5
6

// Lissage des pixels


zozor . smoothing = true ;

7
8
9
10

// Redime nsionnement
zozor . scaleX = 0 . 7 ;
zozor . scaleY = zozor . scaleX ;

11
12
13
14

// Alignement au centre
zozor . x = ( stage . stageWidth - zozor . width ) / 2 ;
zozor . y = ( stage . stageHeight - zozor . height ) / 2 ;

Ce qui nous donne lcran la figure 17.8.

Figure 17.8 Taille 70% avec lissage


Cest tout de mme beaucoup mieux ! Pour mieux voir les diffrences entre les deux
rendus, voici la figure 17.9 une comparaison avec zoom.
Nabusez pas du lissage si vous affichez beaucoup dimages, cela risquerait
de dgrader les performances de votre application.

Oprations sur les images


La classe BitmapData
Tout objet de la classe Bitmap dispose dun attribut bitmapData de la classe BitmapData
(voir figure 17.10). Cet objet reprsente les pixels de limage stocks en mmoire. Linstance de la classe Bitmap ne contient pas de pixels, elle nest l que pour les afficher.
349

CHAPITRE 17. MANIPULER DES IMAGES

Figure 17.9 Comparaison avec et sans lissage

Figure 17.10 Tout objet de la classe Bitmap dispose dun attribut bitmapData de
la classe BitmapData

350

OPRATIONS SUR LES IMAGES


Il est possible dutiliser un seul objet BitmapData pour plusieurs images
Bitmap. Nhsitez pas le faire si vous devez afficher plusieurs fois la mme
image, cette astuce amliore grandement les performances daffichage des
images concernes.

Crer notre premire image


Pour crer une image vide, nous pouvons crer une instance de la classe Bitmap
sans lui passer de paramtre :
1
2
3

// Cr ation de l ' image


var image : Bitmap = new Bitmap () ;
addChild ( image ) ;

Notre objet image na aucun pixel sa disposition, donc il naffiche rien et a une taille
nulle :
1

trace ( " taille de l ' image : " + image . width + " x " + image .
height ) ;

Nous obtenons ceci dans la console :


taille de l image : 0 x 0

Ne nous arrtons pas l et crons notre premire image grce la classe BitmapData :
1
2

// Cr ation des donn es de l ' image ( les pixels )


var imageData : BitmapData = new BitmapData ( 300 , 300 , false ,
0x0000ff ) ;

Le premier paramtre est la largeur du tableau de pixel (donc de limage), le deuxime


est sa hauteur. Ensuite, un boolen nous permet dindiquer si limage vide est transparente ou non. Pour finir, nous devons passer la couleur de remplissage initiale. Ici,
notre image sera donc un carr de 300 pixels de ct, rempli de couleur bleue.
Ensuite, il faut dire notre objet image dutiliser les donnes contenues dans notre
objet imageData :
1
2

// Donn es pour l ' image


image . bitmapData = imageData ;

Nous avons dsormais la figure 17.11 lcran.


Nous avons cr une image partir de rien !

Dessiner sur des images


Nous allons maintenant nous atteler rendre ce morne carr bleu un peu plus intressant en manipulant les pixels qui le composent.
351

CHAPITRE 17. MANIPULER DES IMAGES

Figure 17.11 Un carr bleu

352

OPRATIONS SUR LES IMAGES


Pipette
Nous avons disposition dune sorte de pipette, comme dans les logiciels de dessin,
qui nous permet de connatre la couleur dun pixel. Cette pipette est la mthode
getPixel(x, y) de la classe BitmapData. En paramtre, nous lui fournissons les coordonnes du pixel dont nous voulons la couleur et elle nous la renvoie (si nous donnons
des coordonnes qui sortent de limage, elle nous renvoie 0).
1
2
3

// Prenons la couleur d ' un de nos pixels ( celui du centre )


var couleur : uint = imageData . getPixel ( 150 , 150 ) ;
trace ( " couleur du pixel : " + couleur . toString ( 16 ) ) ; // Affiche
: ff ( quivalent de 0000ff )

Il existe une deuxime pipette qui nous renvoie la couleur dun pixel avec son opacit :
getPixel32(x, y).
1
2
3

// Avec l ' opacit


couleur = imageData . getPixel32 ( 150 , 150 ) ;
trace ( " couleur ARVB du pixel : " + couleur . toString ( 16 ) ) ; //
Affiche : ff0000ff

Comme vous pouvez le remarquer, il y a deux caractres supplmentaires par rapport


une couleur classique : ce sont les deux premiers. Ils reprsentent lopacit de la
couleur en quelque sorte, note en hexadcimal de 00 ff, comme pour le rouge, le
vert et le bleu. Ainsi, 0x00000000 est une couleur totalement transparente, 0x880000ff
reprsente du bleu moiti transparent et 0xff0000ff du bleu totalement opaque.
Colorier un pixel
Il est grand temps de barbouiller notre carr de couleur ! Commenons avec la mthode
setPixel(x, y, couleur), qui permet de colorier un pixel aux coordonnes que nous
passons en paramtre, avec une certaine couleur (sans gestion de lopacit) :
1
2
3

// Colorions le pixel du centre en rouge


couleur = 0xff0000 ;
imageData . setPixel ( 150 , 150 , couleur ) ;

Nous obtenons la figure 17.12 (jai agrandi limage pour que lon puisse mieux voir).
Comme nous lavons vu prcdemment, il existe galement la mthode setPixel32(x,
y, couleur) qui permet de colorier un pixel avec une couleur contenant une
valeur de transparence.
Exercice
Essayons-nous plus de fantaisies ! Je vous propose un petit exercice : coloriez chaque
pixel de notre carr avec une couleur alatoire opaque. Essayez de ne pas regarder la
solution trop vite !
Quelques conseils :
353

CHAPITRE 17. MANIPULER DES IMAGES

Figure 17.12 Pixel rouge au milieu de pixels bleus.

354

OPRATIONS SUR LES IMAGES


Utilisez deux boucles imbriques pour parcourir les pixels de limage.
Utilisez la mthode Math.random() pour gnrer un nombre alatoire de 0 1 (que
vous pouvez multiplier par 0xffffff pour avoir une couleur alatoire).
La classe BitmapData dispose des attributs width et height permettant dobtenir
la taille de limage stocke dans lobjet, un peu comme pour les objets daffichage.
Jobtiens la figure 17.13.

Figure 17.13 Un beau tas de pixels.


Ne regardez pas tout de suite la solution que je vous propose si vous navez pas rflchi
au code quil faut crire. Essayez dobtenir un bon rsultat et, mme si vous ny arrivez
pas, rassurez-vous, le simple fait davoir essay est dj un grand pas vers la matrise
du langage.
Si vous avez russi (ou que vous tes sur le point de vous jeter par la fentre !), vous
pouvez comparer votre code avec le mien (je nai vraiment pas envie davoir votre mort
sur la conscience) :
1
2
3

// Cr ation de l ' image


var image : Bitmap = new Bitmap () ;
addChild ( image ) ;

4
5
6

// Cr ation des donn es de l ' image ( les pixels )


var imageData : BitmapData = new BitmapData ( 300 , 300 , false ,
0x0000ff ) ;

7
8
9

// Donn es pour l ' image


image . bitmapData = imageData ;

10
11
12
13
14
15
16
17

// /// Barbouillage !
// On parcourt chaque pixel de l ' image
// Lignes
for ( var x : int = 0 ; x < imageData . width ; x ++)
{
// Colonnes
for ( var y : int = 0 ; y < imageData . height ; y ++)

355

CHAPITRE 17. MANIPULER DES IMAGES


{

18
19
20

// Couleur al atoire
couleur = Math . random () * 0xffffff ;

21
22
23
24
25

// Colorions le pixel actuel


imageData . setPixel32 (x , y , couleur ) ;

Et cest tout ! Finalement, cest plutt simple non ?


Exercice : variante
Et si nous corsions un peu les choses ? Modifions lexercice : il faut dsormais que tous
les pixels de limage soient remplis avec une couleur choisie alatoirement parmi un
choix limit : rouge, vert, bleu.
Quelques conseils :
Utilisez un tableau pour stocker les couleurs autorises.
Rutilisez la mthode Math.random() et la proprit length de votre tableau pour
choisir alatoirement une couleur parmi celle du tableau.
Jobtiens cette fois-ci la figure 17.14.

Figure 17.14 Pixels de trois couleurs


Solution :
1
2
3

// /// Barbouillage v 2 . 0
// On d finit d ' abord les couleurs possibles
var couleurs : Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ];

4
5
6
7
8

// On parcourt chaque pixel de l ' image


// Lignes
for ( var x : int = 0 ; x < imageData . width ; x ++)
{

356

OPRATIONS SUR LES IMAGES


// Colonnes
for ( var y : int = 0 ; y < imageData . height ; y ++)
{
// Choix de la couleur
var choix : int = Math . random () * couleurs . length
;

9
10
11
12
13
14

// Couleur choisie
couleur = couleurs [ choix ];

15
16
17
18
19
20
21

// Colorions le pixel actuel


imageData . setPixel32 (x , y , couleur ) ;

Remplissage un rectangle de couleur


Une autre mthode bien utile permet de remplir une zone rectangulaire avec une
couleur (avec transparence), ce qui nous simplifie tout de mme la vie. Il sagit de
fillRect(rectangle, couleur) de la classe BitmapData, qui prend en paramtre un
objet de la classe Rectangle et une couleur avec transparence.
1
2

// Tra ons un rectangle rouge


imageData . fillRect ( new Rectangle (0 , 0 , 150 , 100 ) , 0xffff0000 ) ;

Notre image ressemble dsormais la figure 17.15.

Figure 17.15 Un rectangle rouge sur fond bleu

Exercice : deuxime variante


Encore le mme exercice ! Mais cette fois-ci, remplissons notre image avec de gros carrs
de 25 pixels de ct dune couleur choisie alatoirement parmi le mme choix limit :
rouge, vert, bleu.
357

CHAPITRE 17. MANIPULER DES IMAGES


Quelques conseils :
Utilisez un objet de la classe Rectangle pour stocker les coordonnes et la taille des
carrs.
Bien entendu, utilisez la mthode que nous venons de voir, fillRect() !
Jobtiens la figure 17.16.

Figure 17.16 Le rendu


Et voici ce que jai crit :
1
2
3
4

// /// Barbouillage v 3 . 0
// On d finit d ' abord les couleurs possibles
var couleur : uint ;
var couleurs : Array = [ 0xff0000 , 0x00ff00 , 0x0000ff ];

5
6
7

// On d finit la taille des rectangles


var rectangle : Rectangle = new Rectangle (0 , 0 , 25 , 25 ) ;

8
9
10
11
12
13
14
15
16
17

// On parcourt l ' image pour la remplir de rectangles


// Lignes
for ( rectangle . x = 0 ; rectangle . x < imageData . width ; rectangle .
x += rectangle . width )
{
// Colonnes
for ( rectangle . y = 0 ; rectangle . y < imageData . height ;
rectangle . y += rectangle . height )
{
// Choix de la couleur
var choix : int = Math . random () * couleurs . length ;

18
19
20

// Couleur choisie
couleur = couleurs [ choix ];

21
22
23

358

// Colorions le rectangle actuel


imageData . fillRect ( rectangle , couleur ) ;

OPRATIONS SUR LES IMAGES


24
25

Comme vous pouvez le remarquer, jai utilis lobjet rectangle directement dans les
boucles for : le code en est dautant plus logique et lisible.

En rsum
Pour embarquer une image, il suffit dutiliser linstruction spciale Embed et dfinir
un attribut de type Class, comme pour les polices embarques.
Laffichage dune image se fait via la classe Bitmap dont la dfinition peut se faire
grce aux images embarques.
La classe Bitmap dispose dune proprit smoothing qui permet de lisser les pixels
dune image, principalement utile aprs une transformation.
Lensemble des pixels dune image sont stocks en mmoire laide une instance de
la classe BitmapData.
La classe Bitmap possde donc une proprit nomme bitmapData de type BitmapData
dont ldition est possible.

359

CHAPITRE 17. MANIPULER DES IMAGES

360

Chapitre

18

Filtres et modes de fusion


Difficult :
Dans ce chapitre, nous allons introduire les filtres et les modes de fusion ! Ils permettent
de modifier facilement lapparence de vos lments graphiques votre guise. Si certains
en ont dj entendu parler dans divers logiciels de graphisme, vous ne serez pas perdus
puisque le principe est le mme et les effets sont assez semblables.
Avant de vous lancer dans la lecture de ce chapitre, je dois vous mettre en garde. Effectivement, celui-ci est compos de deux glossaires qui regroupent lensemble des filtres et
modes de fusion. Leur but est de pouvoir vous tre utile plus tard lorsque vous en aurez
besoin, ne passez donc pas trop de temps dessus pour le moment, retenez simplement le
principe gnral de ces effets.

361

CHAPITRE 18. FILTRES ET MODES DE FUSION

Les filtres
Introduction
Pour amliorer simplement le visuel de vos animations, vous pouvez utiliser les diffrents filtres proposs par lActionscript. Il sagit deffets graphiques que vous pouvez
ajouter lensemble de vos lments visuels. Vous disposez donc de neuf filtres que
vous pouvez combiner selon vos prfrences pour changer lapparence dun objet. Voici,
par exemple, la figure 18.1 une combinaison de deux filtres ajoute une image.

Figure 18.1 Deux filtres ont t ajouts une image


Vous constaterez donc quil est alors possible de transformer radicalement le rendu final
dune scne. Parmi les filtres, vous trouverez plusieurs effets :

Le flou.
Lombre porte.
La lueur.
Le biseau.
Etc.

Avant de vous numrer lensemble des filtres disponibles je vous propose de voir ensemble le principe dutilisation de ceux-ci.

Cration dun exemple


Pour comprendre le fonctionnement des filtres, nous allons prendre un exemple.
Je suggre donc que nous reprenions limage ainsi que leffet prcdent. La figure 18.2
reprsente limage originale telle quelle est charge lintrieur de lanimation. Vous
pouvez videmment travailler sur une image diffrente.
Nous allons donc charger notre image comme vous savez maintenant le faire :
1
2

[ Embed ( source = ' images / Photo . png ') ]


private var Photo : Class ;

Puis nous allons linstancier et lajouter la liste daffichage :


1
2

var maPhoto : Bitmap = new Photo () ;


this . addChild ( maPhoto ) ;

362

LES FILTRES

Figure 18.2 Limage originale

Ajout de filtres
Chacun des neufs filtres est en fait dfini par sa propre classe. Ainsi, ils possdent chacun leurs propres proprits permettant de paramtrer leffet correspondant. Dans lexemple prcdent, nous avons utilis les deux classes BlurFilter et
ColorMatrixFilter. Nous apprendrons utiliser ces classes plus tard, cest pourquoi,
je vous propose directement le code de ces deux effets.

Flou
1
2
3
4

var flou : BlurFilter = new BlurFilter () ;


flou . blurX = 2 ;
flou . blurY = 2 ;
flou . quality = BitmapFilterQuality . HIGH ;

Correction colorimtrique
1
2
3
4
5
6

var matrix : Array = new Array () ;


matrix . push ( 0 . 75 , 0 . 75 , 0 . 75 , 0 , 0 ) ; //
matrix . push ( 0 . 50 , 0 . 50 , 0 . 50 , 0 , 0 ) ; //
matrix . push ( 0 . 25 , 0 . 25 , 0 . 25 , 0 , 0 ) ; //
matrix . push (0 , 0 , 0 , 1 , 0 ) ; // Alpha
var corr ectionCouleur : ColorMatrixFilter
( matrix ) ;

Rouge
Vert
Bleu
= new ColorMatrixFilter

363

CHAPITRE 18. FILTRES ET MODES DE FUSION

Application des filtres


Tout objet DisplayObject possde une proprit filters de type Array. Il est ainsi
possible dajouter des filtres sa guise en manipulant ce tableau. Ajoutons donc nos
deux filtres linitialisation de notre tableau filters :
maPhoto . filters = new Array ( correctionCouleur , flou ) ;

Nous obtenons ainsi notre image avec une correction de couleur et un flou comme le
montre la figure 18.3.

Figure 18.3 Limage a t modifie

Glossaire des filtres


Les filtres de base
Flou
Pour flouter un lment graphique, nous disposons de la classe BlurFilter :
1
2
3
4

var flou : BlurFilter = new BlurFilter () ;


flou . blurX = 5 ;
flou . blurY = 5 ;
flou . quality = BitmapFilterQuality . MEDIUM ;

Le flou est ainsi dfinit par les proprits suivantes :


blurX : quantit de flou horizontal.
364

GLOSSAIRE DES FILTRES


blurY : quantit de flou vertical.
quality : qualit du flou dfinie par les valeurs de la classe BitmapFilterQuality.
Le rsultat se trouve la figure 18.4.

Figure 18.4 Limage est floute

Ombres portes
Les ombres portes sont dfinies grce la classe DropShadowFilter :
1
2
3
4

var ombre : DropShadowFilter = new DropShadowFilter () ;


ombre . color = 0x333333 ;
ombre . distance = 5 ;
ombre . angle = - 30 ;

Pour paramtrer votre ombre porte, utilisez les proprits suivantes :


color : couleur de lombre.
distance : distance fictive de lobjet la surface derrire elle.
angle : orientation de la lumire et donc de lombre.
Le rsultat se trouve la figure 18.5.

Figure 18.5 Une ombre porte a t ajoute

365

CHAPITRE 18. FILTRES ET MODES DE FUSION


Lueur simple
Il est possible de crer une lueur ou un rayonnement derrire lobjet grce la classe
GlowFilter :
1
2
3
4
5

var lueur : GlowFilter = new GlowFilter () ;


lueur . color = 0xFFAA66 ;
lueur . blurX = 15 ;
lueur . blurY = 15 ;
lueur . quality = BitmapFilterQuality . MEDIUM ;

Nous retrouvons ici des proprits semblables celles que nous avons dj vu prcdemment, auxquelles vous pouvez en ajouter de nouvelles :

alpha : opacit de la lueur.


strength : intensit du rayonnement.
inner : indique si lombre est interne ou non.
hideObject : indique si lobjet doit tre visible ou non.

Le rsultat se trouve la figure 18.6.

Figure 18.6 Une lueur simple

Lueur en dgrad
Leffet de rayonnement que nous venons daborder peut tre personnalis en ajoutant un dgrad la lueur. Pour cela, nous disposons de la classe GradientGlowFilter :
1
2
3
4
5
6
7
8
9
10
11

var lueur : GradientGlowFilter = new GradientGlowFilter () ;


lueur . distance = 0 ;
lueur . angle = 45 ;
lueur . colors = [ 0xFF0000 , 0x333333 ];
lueur . alphas = [0 , 1 ];
lueur . ratios = [0 , 255 ];
lueur . blurX = 15 ;
lueur . blurY = 15 ;
lueur . strength = 2 ;
lueur . quality = BitmapFilterQuality . HIGH ;
lueur . type = BitmapFilterType . OUTER ;

366

GLOSSAIRE DES FILTRES


Dans ce cas de figure, nous observons plusieurs nouveauts comme la dfinition du
dgrad grce aux proprits colors, alphas et ratios ainsi que la dfinition de la
lueur en interne ou en externe par le biais de la classe BitmapFilterType.
Le rsultat se trouve la figure 18.7.

Figure 18.7 Une lueur en dgrad

Biseau simple
Pour donner du relief un objet, vous pouvez dfinir un biseau laide de la classe
BevelFilter :
1
2
3
4
5
6
7
8
9
10
11
12

var biseau : BevelFilter = new BevelFilter () ;


biseau . distance = 5 ;
biseau . angle = 45 ;
biseau . highlightColor = 0xFFFFFF ;
biseau . highlightAlpha = 0 . 5 ;
biseau . shadowColor = 0x000000 ;
biseau . shadowAlpha = 0 . 5 ;
biseau . blurX = 3 ;
biseau . blurY = 3 ;
biseau . strength = 3 ;
biseau . quality = BitmapFilterQuality . HIGH ;
biseau . type = BitmapFilterType . INNER ;

Pour dfinir ce filtre, vous aurez principalement besoin de dfinir la distance de leffet
ainsi que des effets de lueurs et dombres dfinis par les couleurs et opacits highlightColor,
highlightAlpha, shadowColor et shadowAlpha.
Le rsultat se trouve la figure 18.8.
Biseau en dgrad

Une variante de biseau existe grce lutilisation dun dgrad dans la classe GradientBevelFilter :
1

var biseau : G r adientBevelFilter = new GradientBevelFilter () ;

367

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.8 Un biseau simple


2
3
4
5
6
7
8
9

biseau . distance = 6 ;
biseau . angle = 60 ;
biseau . colors = [ 0x000000 , 0x006666 , 0xFFFFFF ];
biseau . alphas = [1 , 0 , 1 ];
biseau . ratios = [0 , 128 , 255 ];
biseau . blurX = 6 ;
biseau . blurY = 6 ;
biseau . quality = BitmapFilterQuality . HIGH ;

L encore, la principale diffrence par rapport la version simple est la dfinition dun
dgrad de couleurs.
Le rsultat se trouve la figure 18.9.

Figure 18.9 Un biseau en dgrad

Correction de couleurs
Un peu de thorie
Pour effectuer des corrections au niveau des couleurs, il existe la classe ColorMatrixFilter.
Comme son nom lindique, elle est compose dune matrice qui permet de redfinir
la couleur dun pixel. Ainsi, les lignes redfinissent, dans lordre, les composantes suivantes dun pixel : rouge, vert, bleu et alpha. Les diffrentes composantes de celles-ci
peuvent alors scrire suivant la forme suivante :
368

GLOSSAIRE DES FILTRES


fcanal (x, y) = R srouge (x, y) + V svert (x, y) + B sbleu (x, y) + A salpha (x, y) + .
O :
srouge (x, y), svert (x, y), sbleu (x, y) et salpha (x, y) sont les composantes rouge, vert,
bleu et alpha du pixel source.
R , V , B et A reprsentent leur contribution dans la valeur du canal de sortie.
est une constante.
En ralit, cette matrice est dcrite lintrieur dun tableau de 20 lments. Chaque
ligne est alors dfinie par une succession de 5 coefficients. Voici donc notre pseudomatrice A dans laquelle les colonnes correspondent aux composantes du pixel dorigine
et les lignes aux composantes du pixel final :

frouge
fvert
fbleu
falpha

srouge
A[0]
A[5]
A[10]
A[15]

svert
A[1]
A[6]
A[11]
A[16]

sbleu
A[2]
A[7]
A[12]
A[17]

En suivant cette logique, limage serait inchange


vante :
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1

salpha
A[3]
A[8]
A[13]
A[18]

A[4]
A[9]
A[14]
A[19]

par application de la matrice sui0


0
0
0

Afin de mieux comprendre ce dont il est question, je vous propose la suite divers
exemples dutilisation de cette classe ColorMatrixFilter.
Saturation
Cette technique consiste saturer les couleurs afin dobtenir une image finale en noir
et blanc. Il faut alors que chaque pixel dispose au final de la mme quantit de rouge,
de vert et de bleu. Voici comment raliser cela :
1
2
3
4
5
6

var matrix : Array = new Array () ;


matrix . push ( 0 . 33 , 0 . 33 , 0 . 33 , 0 , 0 ) ; //
matrix . push ( 0 . 33 , 0 . 33 , 0 . 33 , 0 , 0 ) ; //
matrix . push ( 0 . 33 , 0 . 33 , 0 . 33 , 0 , 0 ) ; //
matrix . push (0 , 0 , 0 , 1 , 0 ) ; // Alpha
var corr ectionCouleur : ColorMatrixFilter
( matrix ) ;

Rouge
Vert
Bleu
= new ColorMatrixFilter

Le rsultat se trouve la figure 18.10.


Pour ne pas modifier la luminosit globale de limage, veillez obtenir un
total de 1 sur lensemble dune ligne. Autrement, les valeurs originalement
comprise entre 0 et 255 seront disproportionnes et limage naura pas le
rendu dsir.
369

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.10 Un effet de saturation

Luminosit
En parlant de luminosit, il est justement possible de la contrler en jouant sur la
valeur de ces coefficients. Nous pouvons alors diminuer cette luminosit par exemple :
1
2
3
4
5
6

var matrix : Array = new Array () ;


matrix . push ( 0 .5 , 0 , 0 , 0 , 0 ) ; // Rouge
matrix . push (0 , 0 .5 , 0 , 0 , 0 ) ; // Vert
matrix . push (0 , 0 , 0 .5 , 0 , 0 ) ; // Bleu
matrix . push (0 , 0 , 0 , 1 , 0 ) ; // Alpha
var corr ectionCouleur : ColorMatrixFilter = new ColorMatrixFilter
( matrix ) ;

Le rsultat se trouve la figure 18.11.

Figure 18.11 Il est possible de jouer sur la luminosit

Le rglage de la luminosit est le seul cas o vous pouvez modifier la somme


totale des coefficients. Pour tout le reste, respectez au maximum cette rgle.

370

GLOSSAIRE DES FILTRES


Teinte
La teinte est plus difficile grer car la rotation des couleurs est gnralement
suivie dune saturation. Toutefois, je vous donne lexemple dun dcalage de 120 dans
les couleurs, ce qui revient dcaler le vert au rouge, le bleu au vert, etc. :
1
2
3
4
5
6

var matrix : Array = new Array () ;


matrix . push (0 , 0 , 1 , 0 , 0 ) ; // Rouge
matrix . push (1 , 0 , 0 , 0 , 0 ) ; // Vert
matrix . push (0 , 1 , 0 , 0 , 0 ) ; // Bleu
matrix . push (0 , 0 , 0 , 1 , 0 ) ; // Alpha
var corr ectionCouleur : ColorMatrixFilter = new ColorMatrixFilter
( matrix ) ;

Le rsultat se trouve la figure 18.12.

Figure 18.12 Il est possible de dcaler les couleurs

Pour ce genre de manipulations, je vous conseille plutt de passer par votre


logiciel de graphisme prfr.

Ngatif
Un effet ngatif consiste inverser les couleurs, cest--dire soustraire les valeurs
dorigine la valeur maximale 255. Dans ce cas, nous aurons alors besoin dutiliser une
constante, comme vous pouvez le voir ci-dessous :
1
2
3
4
5
6

var matrix : Array = new Array () ;


matrix . push ( -1 , 0 , 0 , 0 , 255 ) ; // Rouge
matrix . push (0 , -1 , 0 , 0 , 255 ) ; // Vert
matrix . push (0 , 0 , -1 , 0 , 255 ) ; // Bleu
matrix . push (0 , 0 , 0 , 1 , 0 ) ; // Alpha
var corr ectionCouleur : ColorMatrixFilter = new ColorMatrixFilter
( matrix ) ;

Le rsultat se trouve la figure 18.13.


371

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.13 Limage en ngatif


Les constantes ne sont pas des coefficients comme les prcdents. Ainsi,
ceux-ci ne sutilisent pas entre -1 et 1 comme les autres, mais plutt entre
-255 et 255.

Convolution
Introduction
La convolution utilise par la classe ConvolutionFilter fonctionne galement laide
dune matrice. Nanmoins, celle-ci est une reprsentation dun pixel et de ses voisins
proches. Cette matrice peut thoriquement tre de dimension quelconque, toutefois
nous nous contenterons dune matrice 3 3 pour la suite. Ainsi, la valeur centrale
reprsente le pixel actuel et les autres valeurs, les pixels alentours. La couleur finale
dun pixel est alors dtermine partir de sa valeur initiale et de celles des pixels
voisins. Une image intacte est donc compos uniquement de la valeur 1 au centre de la
matrice :
0 0 0
0 1 0
0 0 0
Ici, la valeur de chaque pixel est une combinaison de la valeurs de plusieurs
pixels. Ainsi, il est important davoir un total gal 1 pour conserver la
luminosit globale de limage initiale.
Avant de vous montrer diffrents exemples dapplication, je vous prsente ici la manire
dutiliser ce filtre en Actionscript :
1
2
3
4
5
6

var matrix : Array = new Array () ;


// D finition de la matrice
var convolution : ConvolutionFilter = new ConvolutionFilter () ;
convolution . matrixX = 3 ;
convolution . matrixY = 3 ;
convolution . matrix = matrix ;

372

GLOSSAIRE DES FILTRES


Vous remarquerez alors que la matrice est galement dfinie laide dun tableau de
type Arraydont il est ncessaire de spcifier les dimensions laide des proprits
matrixX et matrixY.
Flou
Lapplication la plus simple est donc de gnrer un flou en moyennant la valeur du
pixel central celle des pixels voisins :
1
2
3
4

var matrix : Array = new Array () ;


matrix . push (0 , 0 .2 , 0 ) ;
matrix . push ( 0 .2 , 0 .2 , 0 . 2 ) ,
matrix . push (0 , 0 .2 , 0 ) ;

Le rsultat se trouve la figure 18.14.

Figure 18.14 Limage est floue


Il pourrait galement tre possible de prendre en compte la valeur des pixels en diagonale pour la gnration de ce flou.
Dtection de contours
La convolution est principalement utile pour dtecter les contours lintrieur
dune image. Le principe est alors de retrancher la valeur des pixels voisins et ainsi rvler les zones o les pixels proches nont pas une valeur identique. Voici donc comment
dtecter des contours :
1
2
3
4

var matrix : Array =


matrix . push (0 , -1 ,
matrix . push ( -1 , 4 ,
matrix . push (0 , -1 ,

new Array () ;
0);
-1 ) ,
0);

Le rsultat se trouve la figure 18.15.


Notez que cette opration peut galement tre effectue uniquement en horizontal ou en vertical, on mme en diagonal !

373

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.15 Dtection des contours


Accentuation de contours
Si vous avez bien regard la matrice de dtection de contours, vous noterez que
la somme des valeurs est nulle. Nous avons alors perdu des informations concernant
limage. Ainsi, en rajoutant 1 au centre, il est possible de transformer cette dtection
de contours en accentuation de contours. Voyez donc ce que cette nouvelle matrice
provoque :
1
2
3
4

var matrix : Array =


matrix . push (0 , -1 ,
matrix . push ( -1 , 5 ,
matrix . push (0 , -1 ,

new Array () ;
0);
-1 ) ,
0);

Le rsultat se trouve la figure 18.16.

Figure 18.16 Accentuation des contours


Estampage
Cette dtection de contours permet galement de crer un effet destampage pour
faire ressortir le relief de limage. Voici comment procder :
1
2
3
4

var matrix : Array = new Array () ;


matrix . push ( -2 , -1 , 0 ) ;
matrix . push ( -1 , 1 , 1 ) ,
matrix . push (0 , 1 , 2 ) ;

374

GLOSSAIRE DES FILTRES


Le rsultat se trouve la figure 18.17.

Figure 18.17 Estampage de limage


Dans lexemple prcdent, nous avions des valeurs ngatives dans le coin suprieur
gauche et des valeurs positives dans le coin oppos, ce qui a pour effet de creuser
limage. En inversant ces valeurs, vous obtiendrez donc leffet inverse.

Mappage de dplacement
Enfin, la classe DisplacementMapFilter est le dernier filtre en Flash. Celui-ci permet
dutiliser ce quon appelle une carte de dplacement pour dformer une image.
Le dplacement est alors cr partir des diffrents canaux de cette carte . Dans
lexemple que nous verrons par la suite, nous avons ainsi dfini le canal de couleur bleue
pour laffectation de la position en x, et le canal de couleur rouge de celui en y. Voici
donc notre image de mappage du dplacement la figure 18.18.

Figure 18.18 Mappage du dplacement


Vous noterez que le dplacement se fait suivant la valeur du canal de couleur
correspondant. Cest pourquoi, la valeur 127 naffecte aucun dplacement,
contrairement aux valeurs 255 et 0 qui provoquent un dplacement maximal
dans des directions opposes.
Voici donc comment utiliser cette image de mappage du dplacement charge grce
la classe Class sous le nom de Deplacement :
1
2
3

var monDeplacement : Bitmap = new Deplacement () ;


// D finition de la carte de d placement
var map : BitmapData = new BitmapData ( monDeplacement . width ,
monDeplacement . height ) ;

375

CHAPITRE 18. FILTRES ET MODES DE FUSION


4
5
6
7
8
9
10
11
12

map . draw ( monDeplacement ) ;


// Cr ation du filtre
var deplacement : Displa cemen tMapFi lter = new
D i s p l acem entMap Filte r () ;
deplacement . mapBitmap = map ;
deplacement . componentX = BitmapDataChannel . BLUE ;
deplacement . componentY = BitmapDataChannel . RED ;
deplacement . scaleX = 60 ;
deplacement . scaleY = 60 ;
deplacement . mode = Di s p l a c e m e n t Ma p F i l t e r M o de . IGNORE ;

Comme vous lavez certainement devin, les canaux de couleurs sont choisis grce la
classe BitmapDataChannel et lchelle daffectation est spcifie laide des proprits scaleX et scaleY. Enfin, les constantes de la classe DisplacementMapFilterMode
permettent de grer laffectation des pixels sur les bords de limage.
Le rsultat se trouve la figure 18.19.

Figure 18.19 Image modifie

Les modes de fusion


Dfinition
Un autre moyen damliorer rapidement et facilement le rendu final de vos objets
visuels est lutilisation de modes de fusion ! Lorsquon parle de fusion, il sagit en
fait de mixer diffrents lments graphiques ensemble. Le principe est alors de grer
la manire dont ces diffrents objets seront fusionns dans le rendu final. Les modes
de fusion sont donc galement une manire rapide de transformer lapparence de vos
objets daffichage.
376

LES MODES DE FUSION


Fusion de calque
La premire utilit de ces modes de fusion est de pouvoir combiner diffrents objets
superposs, nomms communment calques, en fusionnant leurs couleurs. Voici la
figure 18.20 un exemple de fusion entre deux calques.

Figure 18.20 Fusion de deux images


Pour bien distinguer les filtres et les modes de fusions, retenez quun filtre
sapplique un unique objet, contrairement aux modes de fusions qui ncessitent au moins deux objets pour pouvoir tre actifs.

Fusion de transparence
La seconde utilisation de ces modes de fusion est la fusion de transparence. Le
principe est dutiliser les niveaux de transparence dun calque pour masquer certaines
parties dun second lment. Voici un exemple la figure 18.21.

Figure 18.21 Fusion de transparence

Une autre manire de grer lopacit de certaines zones dun lment est
lutilisation de masques, comme nous le verrons dans le chapitre suivant.

377

CHAPITRE 18. FILTRES ET MODES DE FUSION

Mise en place
La fusion de calques peut tre ralise entre nimporte quels objets hritant de la
classe DisplayObject. Ceux-ci disposent alors dune proprit nomme blendMode
pour dfinir le mode de fusion dsir. Cette dfinition est alors ralise laide des
constantes de la classe BlendMode.
La dfinition dun mode de fusion se fait en ralit uniquement sur un seul
calque. Vous devez alors lappliquer sur lobjet possdant lindex daffichage
le plus grand, autrement leffet de sera pas visible.
Voici donc comment ajouter le mode de fusion nomme DARKEN lobjet monCalque :
monCalque . blendMode = BlendMode . DARKEN ;

Toutefois, en ce qui concerne les fusions de transparence, vous aurez galement


besoin dimposer la cration dun groupe de transparences pour lobjet daffichage.
Cela consiste appliquer un mode de fusion de type LAYER au conteneur :
1

this . blendMode = BlendMode . LAYER ;

Voil, vous connaissez tout sur les modes de fusion prsent. Il ne nous reste plus
qu faire un tour des treize modes de fusion disponibles. Pour vous aider, je vous
propose un petit glossaire.

Glossaire de modes de fusion


Le mode de fusion par dfaut
Tout objet daffichage possde obligatoirement un seul et unique mode de fusion.
Ainsi, il existe un mode de fusion nomm NORMAL qui est appliqu par dfaut tout
objet. Voici donc comment redfinir le mode de fusion :
1

monCalque . blendMode = BlendMode . NORMAL ;

Le rsultat se trouve la figure 18.22.


Ce mode na aucune utilit, si ce nest de revenir au mode de fusion par
dfaut.

Les fusions de calques


Addition
Comme son nom lindique, ce mode de fusion va additionner les diffrents canaux
de couleurs du calque ceux de larrire-plan. Pour utiliser celui-ci, vous disposez le la
378

GLOSSAIRE DE MODES DE FUSION

Figure 18.22 Fusion par dfaut

constante ADD :
1

monCalque . blendMode = BlendMode . ADD ;

Le rsultat se trouve la figure 18.23.

Figure 18.23 Fusion par addition


Ce mode de fusion aura donc tendance claircir larrire-plan. Celui-ci peut tre
utilis pour crer des transitions entre deux objets en utilisant un fondu dclaircissement.

Obscurcir
Ce mode de fusion permet de slectionner les valeurs les plus faibles des canaux de
couleurs entre le calque et larrire-plan. Il est dfini par la constante DARKEN :
1

monCalque . blendMode = BlendMode . DARKEN ;

Le rsultat se trouve la figure 18.24.


Bien videment, en lutilisant vous allez obscurcir larrire plan. Lassombrissement est
toutefois moins intense quavec le mode de fusion MULTIPLY.
379

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.24 Limage est obscurcie


Diffrence
Le principe ici est de soustraire, pour chacun des canaux de couleurs, la valeur la plus
sombre des deux de la plus claire. Voici la constante concerne :
1

monCalque . blendMode = BlendMode . DIFFERENCE ;

Le rsultat se trouve la figure 18.25.

Figure 18.25 Fusion par diffrence de couleur


Lutilisation de ce mode de fusion nest pas trs courante car il est difficile de prvoir
lapparence finale. Utilisez donc celui-ci avec prcaution !
Lumire crue
Le principe de ce mode de fusion est relativement complexe. Nanmoins, vous pouvez
retenir quil permet de faire ressortir et dassombrir les ombrages dune image. Le nom
de la constante qui le dfinit est HARDLIGHT :
1

monCalque . blendMode = BlendMode . HARDLIGHT ;

Le rsultat se trouve la figure 18.26.


Notez que celui-ci a tendance a masquer les couleurs claires de larrire-plan.
380

GLOSSAIRE DE MODES DE FUSION

Figure 18.26 Les ombres sont mises en valeur


Ngatif
Le principe de cet effet, que nous avons dj vu auparavant, est dinverser les valeurs
sur chacun des canaux de couleurs. Il est dfini par la constante INVERT :
1

monCalque . blendMode = BlendMode . INVERT ;

Le rsultat se trouve la figure 18.27.

Figure 18.27 Inversion de la couleur de chaque pixel


La couleur dorigine du calque o le mode de fusion est appliqu na ici aucun effet sur
le rendu final. Il sagit galement dun mode de fusion peu courant.
claircir
Dans ce mode de fusion, les valeurs de canaux de couleurs de couleurs retenues sont
celles qui sont les plus claires entre le calque et larrire-plan. Il sagit du mode de
fusion oppos DARKEN. Voici sa constante :
1

monCalque . blendMode = BlendMode . LIGHTEN ;

Le rsultat se trouve la figure 18.28.


Ce dernier est galement moins claircissant que le mode de fusion ADD.
381

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.28 claicissement de limage


Produit
Dans ce mode de fusion, les valeurs des canaux de couleurs du calque et de larrireplan sont multiplies entre elles puis sont normalises . La constante correspondante
est MULTIPLY :
1

monCalque . blendMode = BlendMode . MULTIPLY ;

Le rsultat se trouve la figure 18.29.

Figure 18.29 Multiplication des couleurs


Leffet produit est un assombrissement de larrire-plan. Ce mode de fusion proche de
DARKEN est toutefois plus radical dans lobscurcissement.
Incrustation
Le principe de fonctionnement de ce mode de fusion est plutt complexe. La constante
utilise est OVERLAY :
1

monCalque . blendMode = BlendMode . OVERLAY ;

Le rsultat se trouve la figure 18.30.


Proche de HARDLIGHT, ce mode de fusion est gnralement trs utilis. Le rendu final
est nanmoins lgrement diffrent de ce dernier dans les couleurs claires qui restent
quasi-intactes.
382

GLOSSAIRE DE MODES DE FUSION

Figure 18.30 Incrustation des couleurs


cran
La particularit de ce mode de fusion est de supprimer toute nuance de noir du
calque. Il ne reste ensuite plus que la couleur brute de celui-ci. La constante qui le
dfinit est SCREEN :
1

monCalque . blendMode = BlendMode . SCREEN ;

Le rsultat se trouve la figure 18.31.

Figure 18.31 Mode de fusion cran


Ce mode de fusion a donc pour effet dclaircir larrire-plan.
Soustraction
Comme vous vous en doutez, ce mode de fusion va soustraire les diffrents canaux de couleurs du calque ceux de larrire-plan. Celui-ci correspond la constante
SUBTRACT :
1

monCalque . blendMode = BlendMode . SUBTRACT ;

Le rsultat se trouve la figure 18.32.


Ce mode de fusion est donc loppos de ADD. Ainsi, il peut tre utilis pour crer des
transitions en utilisant cette fois un fondu dassombrissement.
383

CHAPITRE 18. FILTRES ET MODES DE FUSION

Figure 18.32 Soustration des couleurs

Les fusions de transparence


Transparence
Ce mode de fusion permet dappliquer les niveaux de transparence du calque
larrire-plan. Comme nous lavons dit, ce type de fusion ncessite de modifier galement le mode de fusion du conteneur. Voici donc comment raliser cette opration
grce la constante ALPHA :
1
2

this . blendMode = BlendMode . LAYER ;


monCalque . blendMode = BlendMode . ALPHA ;

Le rsultat se trouve la figure 18.33.

Figure 18.33 Transfert de la transparence


Je rappelle quil existe une autre mthode qui consiste dfinir des masques
que nous introduirons dans le chapitre suivant. Personnellement, je vous
conseillerai dutiliser les masques plutt que la fusion de transparence.

Suppression
Le principe ici est loppos de ALPHA. Ainsi, les niveaux de transparence du calque sont
maintenant soustraits de larrire-plan. Le nom de la constante correspondant est donc
384

GLOSSAIRE DE MODES DE FUSION


ERASE :
1
2

this . blendMode = BlendMode . LAYER ;


monCalque . blendMode = BlendMode . ERASE ;

Le rsultat se trouve la figure 18.34.

Figure 18.34 Suppression de lopacit


Ce mode de fusion est galement moins courant. vitez de lutiliser si vous
pouvez contourner le problme en ajustant lordre daffichage des diffrents
lments graphiques.

En rsum
Les filtres sont des effets qui sont applicables tout objet graphique.
Il existe neuf filtres en Actionscript, regroups dans le package flash.filters.
Chaque filtre est associ une classe, dont les proprits permettent de dcrire
leffet correspondant.
Ceux-ci sont ensuite ajouts la proprit filters de type Array de tout objet
DisplayObject.
Les modes de fusion permettent de dfinir la manire dont plusieurs lments
doivent tre fusionner lors de laffichage final.
Chaque lment hritant de DisplayObject dispose dun unique mode de fusion
dfini dans la proprit blendMode.
Tous ces modes de fusion sont dfinis laide des constantes de la classe BlendMode.

385

CHAPITRE 18. FILTRES ET MODES DE FUSION

386

Chapitre

19

Les masques
Difficult :
Pour le dernier chapitre thorique de cette partie sur laffichage, je vous propose de dcouvrir les masques ! Ce concept qui permet de cacher certaines zones dun objet affichage, est
spcifique lActionscript et la technologie Flash. Pour ceux qui utilisent des logiciels
de graphisme comme Gimp ou Photoshop, vous devriez vite cerner la chose. En revanche,
pour les autres, suivez attentivement ce que va tre dit ici car cette technique est vraiment
trs pratique et trs utilise.

387

CHAPITRE 19. LES MASQUES

Un masque. . . qui ne masque pas


Le principe des masques
Lorsque vous crez des lments graphiques, il est possible que vous ayez besoin disoler
une certaine partie de lobjet daffichage en question. Cest pourquoi vous aurez besoin
de sparer la zone visible de la zone cacher. Pour cela, nous utilisons ce quon appelle
des masques !
Quest-ce quun masque ?

Un masque est un lment graphique comme un autre. On retrouve alors des masques
de type Shape, Sprite ou encore Bitmap. Celui-ci sert alors dlimiter la zone visible
dun autre objet daffichage, dfinie par lopacit du masque.
Pour bien comprendre cette notion, je vous propose la figure 19.1 un petit schma.

Figure 19.1 Principe dutilisation des masques


Comme vous pouvez le voir, nous avons donc dfini un masque circulaire qui laisse
apparatre la photo uniquement lintrieur de celui-ci. Bien videmment, un masque
peut tre extrmement complexe et compos de diffrentes formes. Par exemple, nous
aurions pu suivre les courbes du serpent pour pouvoir lisoler du reste de limage.
Dans lexemple prcdent, comme dans la suite du chapitre, jutiliserai exclusivement des masques de couleur verte. Cela vous permettra de bien discerner
les masques des objets daffichage classiques .

Les masques en Flash


Dfinition du masque
Avant dappliquer un masque un objet visuel quelconque, il est ncessaire de dfinir
ces deux lments. Pour commencer, je vous suggre un exemple relativement simple.
Nous allons donc dmarrer par deux objets Shape o nous dessinerons des formes
basiques.
388

UN MASQUE. . . QUI NE MASQUE PAS


Dans ce chapitre, nous nous contenterons de dfinir des masques dessins
grce aux mthodes de la classe Graphics. Toutefois, le principe avec des
images bitmap est strictement identique. Il faudra nanmoins prendre en
compte le canal alpha, comme nous le verrons dans la suite du chapitre.
Voici donc nos deux lments monObjet et masque contenant respectivement un rectangle orange et un cercle vert :
1
2
3
4

var monObjet : Shape = new Shape () ;


var masque : Shape = new Shape () ;
this . addChild ( monObjet ) ;
this . addChild ( masque ) ;

5
6
7
8

monObjet . graphics . beginFill ( 0xFF8800 ) ;


monObjet . graphics . drawRect (0 , 0 , 100 , 100 ) ;
monObjet . graphics . endFill () ;

9
10
11
12

masque . graphics . beginFill ( 0x00FF00 ) ;


masque . graphics . drawCircle ( 50 , 50 , 50 ) ;
masque . graphics . endFill () ;

Nous avons ici plac lobjet masque au premier plan, ce qui donne la figure 19.2.

Figure 19.2 Lobjet et son masque


Lorsque vous dfinissez un masque avec les mthodes de la classe Graphics,
seuls les remplissages sont utiliss pour dfinir le masque. Les lignes seront
alors tout simplement ignores.
Lobjectif consiste donc maintenant dfinir lobjet de couleur verte comme masque
pour llment monObjet.
Une proprit mask
En fait, la notion de masque est lie tout objet visuel, cest--dire tout objet de
la classe DisplayObject ou plutt dune de ses sous-classes. Nous avons dj vu
quune classe peut possder un attribut delle-mme ; la classe DisplayObject est justement lune delles. En effet, celle-ci possde une proprit nomme mask de type
DisplayObject !
Ainsi, avec les objets de type Shape dclars prcdemment, il est possible de faire
ceci :
389

CHAPITRE 19. LES MASQUES


1

monObjet . mask = masque ;

Dans cette instruction, nous passons bien lobjet masque la proprit mask de llment
monObjet. Si vous relancez alors lexcution du projet, vous verrez la magie soprer
(voir figure 19.3).

Figure 19.3 Effet du masque sur lobjet


Comme vous pouvez le constater, le masque nest maintenant plus visible.
Cest pourquoi, linstruction this.addChild(masque) est en ralit facultative. Toutefois, si vous najoutez pas le masque la liste daffichage, celui-ci
ne sera alors pas affect par les ventuelles transformations du conteneur.
Pour viter tout problme, je vous conseille donc de lajouter chaque fois
la liste daffichage.
Pour finir, veuillez noter quil est possible de supprimer le masque dun objet simplement en dfinissant sa proprit mask null.

Niveaux de transparence multiples


Prsentation du concept
Comme nous lavons vu prcdemment, nous pouvons dfinir la forme dun masque
pour isoler certaines zones dun objet daffichage. Toutefois, il est galement possible
de dfinir la transparence de celui-ci en grant lopacit du masque. Rien ne nous
empche alors dutiliser des niveaux de transparence multiples. Pour illustrer
cela, je vous propose la figure 19.4 un exemple de masque plusieurs niveaux de
transparence.

Figure 19.4 Principe des niveaux de transparence multiples


Comme le montre lillustration prcdente, lobjet daffichage adapte donc sa transparence lopacit du masque qui lui est associ. Nous verrons alors quil est possible
390

NIVEAUX DE TRANSPARENCE MULTIPLES


dutiliser des dgrads pour dfinir un masque ou bien utiliser directement une image
bitmap dont le format supporte la transparence.

Place au code
Cration du masque
Pour dfinir diffrents niveaux de transparence, il est ncessaire de jouer avec
lopacit des remplissages. Je suggre alors que nous ralisions un masque compos de
trois disques qui se superposent partiellement. Voici le code que je vous propose pour
faire cela :
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Objet masquer
monObjet . graphics . beginFill ( 0xFF00FF ) ;
monObjet . graphics . drawRect (0 , 0 , 160 , 150 ) ;
monObjet . graphics . endFill () ;
// Masque
masque . graphics . beginFill ( 0x00FF00 , 0 . 5 ) ;
masque . graphics . drawCircle ( 80 , 50 , 50 ) ;
masque . graphics . endFill () ;
masque . graphics . beginFill ( 0x00FF00 , 0 . 5 ) ;
masque . graphics . drawCircle ( 50 , 100 , 50 ) ;
masque . graphics . endFill () ;
masque . graphics . beginFill ( 0x00FF00 , 0 . 5 ) ;
masque . graphics . drawCircle ( 110 , 100 , 50 ) ;
masque . graphics . endFill () ;

Nous avons donc ici ralis un masque compos de trois niveaux de transparence diffrents comme vous pouvez le voir la figure 19.5.

Figure 19.5 Un masque plusieurs niveaux de transparence

Mise en place du masque


Redfinissons maintenant la proprit mask de monObjet comme nous avons appris
le faire :
1

monObjet . mask = masque ;

391

CHAPITRE 19. LES MASQUES


Vous serez alors surpris de dcouvrir que ce masque ne fonctionne pas comme nous
lavions prvu, mais ragit comme si nous avions laiss une opacit maximale pour nos
remplissages. Regardez plutt la figure 19.6.

Figure 19.6 Mauvaise application dun masque plusieur niveaux de transparence


En ralit, pour pouvoir grer la transparence dun masque, nous devons
utiliser une mise en cache sous forme de bitmap. Llment graphique est
alors gr comme sil sagissait dune image bitmap en tenant compte du
niveau de transparence de chacun de ses pixels.

Le cache bitmap
Tout objet de type DisplayObject possde une proprit nomme cacheAsBitmap.
Celle-ci permet dactiver la mise en cache sous forme de bitmap , en la dfinissant tout simplement true. Habituellement, les objets daffichage sont manipuls
par le lecteur Flash comme sil sagissait dobjets vectoriels, ce qui donne de bonnes
performances la plupart du temps, mais implique quelques limitations, comme celle
que nous venons de rencontrer. Lorsquun objet daffichage est mis en cache sous
forme de bitmap, il est dabord rendu sous forme dimage contenant des pixels, puis
manipul par le lecteur Flash. Cela nous permet donc deffectuer des oprations plus
complexes (comme les masques plusieurs niveaux de transparence). Ainsi, il nous faut
activer ce cache sur le masque, mais galement sur lobjet auquel il est appliqu. Voici
comment procder pour appliquer le masque lobjet :
1
2
3

monObjet . cacheAsBitmap = true ;


masque . cacheAsBitmap = true ;
monObjet . mask = masque ;

Cette fois, vous verrez apparatre les diffrents niveaux de transparence tels quils ont
t dfinis durant la cration du masque. Nous obtenons la figure 19.7.
Cette mise cache est galement ncessaire lorsquon travaille avec des objets
de type Bitmap. Le format dimage choisi doit nanmoins utiliser un canal
alpha, comme cest le cas des formats GIF ou PNG. La transparence est
alors utilise pour dfinir le masque partir de cette image.
392

EXERCICE : UNE LAMPE TORCHE

Figure 19.7 Application correcte dun masque plusieurs niveaux de tranparence


Mettre un objet daffichage en cache bitmap a un impact sur les performances : ainsi, il est plus rapide de dplacer lobjet en cache bitmap, mais
les transformations comme la rotation ou le redimensionnement ralentissent
lapplication de faon significative. Pour rsumer, si vous voulez afficher un
grand nombre dobjets qui se dplacent, vous pouvez amliorer les performances de votre application en activant la mise en cache bitmap, condition
de ne pas leur appliquer de transformations.

Exercice : une lampe torche


Pour terminer ce chapitre, nous allons raliser un petit exercice ensemble. Nous allons
crer une lampe torche partir de deux images et dun masque. Cet exercice ne comporte aucune difficult, contentez-vous uniquement de suivre ces diffrentes tapes avec
moi.

Prparation des images


Rue de nuit
Pour commencer, je vous invite crer un dossier nomm images o nous placerons
nos deux images. Dans un premier temps, nous aurons besoin de limage dune rue
sombre qui servira de fond pour notre projet. Voici la figure 19.8 limage que jai
nomme RueSombre.png .
Cette image sera ainsi notre rue lorsquelle nest pas claire par la lampe torche. Nous
viendrons donc ajouter une partie lumineuse par dessus pour simuler leffet dune lampe
torche.
Rue claire par la lampe
Lorsque notre lampe torche passera sur une zone, celle-ci sera claire presque comme en
plein jour. Nous aurons alors besoin dune seconde image de cette mme rue, mais cette
fois beaucoup plus lumineuse. Voici donc notre seconde image RueEclairee.png
(figure 19.9).
393

CHAPITRE 19. LES MASQUES

Figure 19.8 RueSombre.png

394

EXERCICE : UNE LAMPE TORCHE

Figure 19.9 RueEclairee.png

395

CHAPITRE 19. LES MASQUES


La lampe torche nagissant que sur une certaine partie de la rue, cest cette image qui
subira leffet du masque que nous crerons juste aprs.
Chargement des images
En premier lieu, nous allons importer nos images dans notre animation Flash. Pour
cela, nous crerons deux variables de type Class que nous appellerons RueSombre et
RueEclairee comme vous avez appris le faire. Voici toutefois le code correspondant
pour ceux qui auraient dj oubli :
1
2
3
4
5

// Chargement des images


[ Embed ( source = ' images / RueSombre . png ') ]
private var RueSombre : Class ;
[ Embed ( source = ' images / RueEclairee . png ') ]
private var RueEclairee : Class ;

Noubliez pas dajouter les images dans le dossier de votre projet pour que
celui-ci puisse compiler. Si jamais vous navez pas plac les images dans un
dossier images, pensez alors mettre jour les liens ci-dessous.

Mise en place des images


L encore, il ny a aucune difficult pour la mise en place des images. La seule chose
vrifier est de placer linstance de la classe RueEclairee par dessus celle de la classe
RueSombre. Sinon, vous ne verrez absolument rien dans le rendu final de lanimation.
Voici ce que je vous propose de faire :
1
2
3
4
5

// Mise en place des images


var maRueSombre : Bitmap = new RueSombre () ;
var maRueEclairee : Bitmap = new RueEclairee () ;
this . addChild ( maRueSombre ) ;
this . addChild ( maRueEclairee ) ;

Mise en place du masque


prsent, nous allons nous occuper du masque que nous appliquerons limage de
la rue claire. Cela devrait donc donner au final un effet de lampe torche, que vous
pourrez dplacer pour clairer la zone de la rue que vous souhaiterez.
Prparation du dgrad
La premire tape est la prparation du dgrad qui nous servira tracer notre masque.
Voici donc le code suggr :
396

EXERCICE : UNE LAMPE TORCHE


1
2
3
4
5
6

// Pr paration du d grad
var couleurs : Array = [ 0x00FF00 , 0x00FF00 ];
var alphas : Array = [1 , 0 ];
var ratios : Array = [ 192 , 255 ];
var matrix : Matrix = new Matrix () ;
matrix . create GradientBox ( 200 , 200 , 0 , -100 , - 100 ) ;

Ce quil est important de noter, cest que nous utiliserons une seule couleur o lopacit
diminuera sur les bords pour donner un effet dattnuation de la lumire. Nous voulons
galement un dgrad rapide sur lextrieur de la forme, cest pourquoi nous avons
augment la premire valeur du tableau ratios.
Cration de la lampe
Nous pouvons maintenant dessiner la forme du masque dans un objet de type Sprite.
Nous allons donc dfinir un remplissage dgrad, puis nous tracerons un cercle pour
reprsenter la forme du faisceau de lumire sortant de la lampe. Voici comment raliser
ceci :
1
2
3
4
5
6

// Cr ation de la lampe
var lampe : Sprite = new Sprite () ;
lampe . graphics . beginGradientFill ( GradientType . RADIAL , couleurs ,
alphas , ratios , matrix ) ;
lampe . graphics . drawCircle (0 , 0 , 100 ) ;
lampe . graphics . endFill () ;
this . addChild ( lampe ) ;

La figure 19.10 vous montre quoi ressemble le masque nous allons utiliser.

Figure 19.10 Aperu du masque

Application du masque
Le masque ralis prcdemment va nous permettre dafficher limage de la rue claire
uniquement dans la zone o la lampe pointe. Pour faire cela, nous allons dfinir linstance lampe comme masque pour lobjet maRueEclairee. Nous allons donc procder
comme nous avons appris le faire :
397

CHAPITRE 19. LES MASQUES


1
2
3
4

// Mise en place du masque


maRueEclairee . cacheAsBitmap = true ;
lampe . cacheAsBitmap = true ;
maRueEclairee . mask = lampe ;

Nous avons prsent ralis leffet souhait. Pour donner un peu plus dintrt ce
projet, nous allons animer celui-ci.
Animation de la lampe
Pour animer le masque, nous allons utiliser la mthode startDrag() de la classe
Sprite. En indiquant son paramtre true, on impose lobjet en question de coller la position de la souris. Ainsi, notre lampe va suivre les mouvements de la souris,
pour imiter les gestes du poignet. Voici donc comment procder :
1
2

// Animation de la lampe
lampe . startDrag ( true ) ;

Projet final
Le rendu
Nous avons maintenant termin cet exercice sur les masques. Je vous propose la figure
19.11 un aperu de lanimation finale.
Le code complet
Enfin, pour vous aider avoir une vision densemble de ce que nous venons de raliser
ensemble, voici ci-dessous lintgralit du code de ce projet :
1
2
3
4
5
6
7
8

package
{
import
import
import
import
import
import

flash . display . Sprite ;


flash . display . Shape ;
flash . display . Bitmap ;
flash . events . Event ;
flash . geom . Matrix ;
flash . display . GradientType ;

9
10
11
12
13
14
15
16
17

398

/* *
* ...
* @author Guillaume
*/
public class Main extends Sprite
{
// Chargement des images
[ Embed ( source = ' images / RueSombre . png ') ]

EXERCICE : UNE LAMPE TORCHE

Figure 19.11 Rendu final de lexercice

399

CHAPITRE 19. LES MASQUES


private var RueSombre : Class ;
[ Embed ( source = ' images / RueEclairee . png ') ]
private var RueEclairee : Class ;

18
19
20
21

public function Main () : void


{
if ( stage ) init () ;
else addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

22
23
24
25
26
27

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;

28
29
30
31

// Mise en place des images


var maRueSombre : Bitmap = new RueSombre () ;
var maRueEclairee : Bitmap = new RueEclairee () ;
this . addChild ( maRueSombre ) ;
this . addChild ( maRueEclairee ) ;

32
33
34
35
36
37

// Pr paration du d grad
var couleurs : Array = [ 0x00FF00 , 0x00FF00 ];
var alphas : Array = [1 , 0 ];
var ratios : Array = [ 192 , 255 ];
var matrix : Matrix = new Matrix () ;
matrix . createGradientBox ( 200 , 200 , 0 , -100 , - 100 ) ;

38
39
40
41
42
43
44

// Cr ation de la lampe
var lampe : Sprite = new Sprite () ;
lampe . graphics . beginGradientFill ( GradientType .
RADIAL , couleurs , alphas , ratios , matrix ) ;
lampe . graphics . drawCircle (0 , 0 , 100 ) ;
lampe . graphics . endFill () ;
this . addChild ( lampe ) ;

45
46
47
48
49
50
51

// Mise en place du masque


maRueEclairee . cacheAsBitmap = true ;
lampe . cacheAsBitmap = true ;
maRueEclairee . mask = lampe ;

52
53
54
55
56
57
58

59
60

61
62
63

400

// Animation de la lampe
lampe . startDrag ( true ) ;

EXERCICE : UNE LAMPE TORCHE

En rsum
Un masque est un objet daffichage qui sert dlimiter une zone visible dun
autre objet.
Lorsquon utilise la classe Graphics, seuls les remplissages sont pris en compte dans
les masques.
Le masque dun objet se dfinit par sa proprit mask.
Pour grer les niveaux de transparence, la proprit cacheAsBitmap du masque
et de lobjet doit tre passe true.
Pour supprimer le masque dun objet, sa proprit mask doit tre redfinie la
valeur null.

401

CHAPITRE 19. LES MASQUES

402

Chapitre

20

TP : Mauvais temps
Difficult :
Aprs ces trois longues parties plutt thoriques, il est temps de passer un peu la pratique !
Au cours de ce TP, vous aurez donc loccasion de revenir sur lensemble des notions que vous
avez vues jusqu prsent. tant donn la quantit de choses que vous avez d assimiler
jusqu maintenant, il est normal que vous ayez quelques difficults. Ne soyez donc pas
gns daller relire un chapitre ou deux qui vous ont sembl flous la premire lecture.
Toutefois, vous tes parfaitement en mesure de russir ce TP, cest pourquoi, je vous invite
fortement essayer par vous-mmes avant daller voir directement la correction.

403

CHAPITRE 20. TP : MAUVAIS TEMPS

Le cahier des charges


Lobjectif du chapitre
Le projet
Lobjectif du chapitre est de concevoir une animation reprsentant une chute de neige !
Pour obtenir un rendu un peu plus raliste, nous ajouterons galement quelques petits
dtails que je vous prsenterais dans la suite de ce TP. Avant de vous en dire plus, je
vous propose la figure 20.1 un petit aperu de lanimation que nous obtiendrons la
fin de ce chapitre.

Figure 20.1 Aperu de lanimation Mauvais temps .


Comme vous pouvez le voir, nous allons crer un certain nombre de flocons que nous
animerons afin de donner lillusion dune chute de neige. Nous ajouterons galement
une image de fond ainsi quun masque pour cacher les flocons derrire la branche au
premier plan. Par ailleurs, vous avez peut tre remarqu que les bords de limage ont
t assombris afin de mettre en valeur le centre de limage.
Bien videmment, votre but est dobtenir un rendu le plus proche possible
du mien. Toutefois, il est impossible que vous obteniez exactement la mme
chose. Lobjectif est de pratiquer et darriver un rsultat convenable et non
de reproduire exactement la mme image. Ne passez donc pas des jours
tenter dobtenir des flocons quasi identiques ceux prsents juste au-dessus.
Sachez quil y a des dizaines de faons diffrentes de raliser une telle animation. Je vous
prsenterais donc ici la mthode que jai choisie, mais nayez pas peur si la votre est
diffrente. Avant de vous lancer tte baisse, lisez bien toutes les consignes et pr-requis,
sans quoi vous narriverez certainement pas au bout !
404

LE CAHIER DES CHARGES


Intrt du projet
Ce projet a t choisi pour diverses raisons que voici :
Tout dabord, il sagit dune animation trs rpandu en Flash et que beaucoup de
dbutants dsirent raliser.
Dans ce projet, nous allons utiliser la quasi-totalit des connaissances acquises jusqu
prsent savoir : variables, conditions, boucles, fonctions, tableaux, classes ,
Programmation Oriente Objet et quasiment tout ce qui est li laffichage.
Enfin, cette animation ne ncessite pas normment de lignes de code, ce qui est
plutt favorable pour lun de vos premiers TP.
Bien entendu, nous allons dtailler davantage la manire de procder pour concevoir
ce projet.

Le travail raliser
Pour raliser cette animation, je vous invite procder pas pas. Cest pourquoi, je
vous ai prsent les diffrentes tapes de la conception de ce projet.
Cration de laspect dun flocon
La premire tape va consister dessiner un flocon. Vous avez dj toutes les connaissances pour parvenir dessiner celui-ci, vous devriez donc y arriver sans problme. Il
est possible de raliser des formes de flocons extrmement complexes, nanmoins un
simple disque fera trs bien laffaire. Le fait quil y aura des milliers de flocons dans
notre future animation devrait faire natre des ides dans votre esprit quant la manire de les concevoir . Je nen dis pas plus, vous de rflchir dores et dj, la
meilleure faon de faire !
La gnration des flocons
Ensuite, vous allez devoir gnrer lensemble de vos flocons que nous rutiliserons
linfini. Une fois gnr, chaque flocon devra tre positionn alatoirement lcran. Il
vous faudra galement dfinir alatoirement son aspect ainsi que sa vitesse de chute.
Pensez galement que vous pouvez donner de la profondeur votre scne, sachant que
les flocons les plus gros seront au premier plan et les plus rapides de notre point de
vue.
Lanimation des flocons
Tout ce qui concerne lanimation sera regroup lintrieur dune mthode qui sera
appele intervalles rguliers grce la fonction setInterval(). lintrieur de cette
mthode, vous ferez lensemble des modifications ncessaires lanimation des flocons.
Vous pourrez ainsi mettre jour la position de chaque flocon, et ventuellement, rini405

CHAPITRE 20. TP : MAUVAIS TEMPS


tialiser un flocon sorti de la scne. Cette fonction sera donc appele rgulirement et,
linfini, se chargera ainsi de lanimation de la scne.
Cest un peu prmatur puisquil sagit de lobjet du prochain chapitre, mais vous
utiliserez pour cela ce quon appelle une fonction de rappel. Sans plus dexplications,
voici comment utiliser cette fonction setInterval() :
1

var monInterval : uint = setInterval ( maMethode , intervalle ) ;

Dans linstruction prcdente, maMethode reprsente une mthode, donc de type Function,
et intervalle correspond au temps espaant deux excutions conscutives de la fonction prcdente.

Association des diffrents lments graphiques


Lorsque que toute la gestion des flocons aura t termine, vous pourrez alors passer
la composition de la scne finale. Vous devrez donc ajouter limage de fond et le
masque la scne. Vous pourrez galement tenter de crer cet effet dassombrissement
des bords de la scne en tant imaginatif. Cette tape devrait normalement se drouler
relativement bien si vous tre parvenu jusque l !

Les images
Enfin, je vous suggre de tlcharger les deux images dont vous aurez besoin pour
raliser ce TP (voir les figures 20.2 et 20.3). Il y a donc limage de fond intitule
Paysage.png ainsi que le masque nomm Masque.png .

Figure 20.2 Paysage.png

406

LA CORRECTION

Figure 20.3 Masque.png

La correction
La structure du programme
Avant de nous lancer tte baisse dans les lignes de code, je vais vous prsenter un peu
la manire dont jai conu et organis le code au sein du projet. Si vous avez ralis ce
projet par vous-mme, il est probable que vous nayez pas structur votre projet de la
mme faon. Je rappelle quil ny a pas quune seule et unique manire de concevoir
une telle animation.
La figure 20.4 vous montre comment jai procd pour programmer ce TP.
Ainsi, dans lorganisation prcdente, nous avons divis le code en trois classes diffrentes :
La classe Flocon est celle qui va principalement vous permettre de dessiner un flocon.
Elle hrite donc de Shape pour avoir accs aux mthodes de la classe Graphics. Vous
pouvez galement associer cette classe un attribut _vitesse qui correspond la
vitesse de chute du flocon et qui lui est donc propre.
Ensuite, nous avons la classe Neige qui hrite de Sprite et est donc un conteneur.
Elle va donc nous permettre de gnrer et danimer lensemble des flocons.
Enfin, notre classe principale va nous servir composer la scne finale laide de
limage de fond, du masque et dun dernier objet que nous crerons et qui servira
assombrir les bords de la scne.
Dans la suite de la correction de ce TP, nous allons donc dtailler lensemble de ses
classes en partant de la classe Flocon pour aller vers la classe principale.
407

CHAPITRE 20. TP : MAUVAIS TEMPS

Figure 20.4 La structure du projet telle quelle est dfinie dans la correction

La classe Flocon
Cration de la classe
La premire classe que nous allons crer est la classe Flocon ! Voici donc la structure
de base de cette classe :
1
2
3

package
{
import flash . display . Shape ;

public class Flocon extends Shape


{
public function Flocon ()
{
super () ;

5
6
7
8
9
10

11
12

13
14
15

Celle-ci permet tout dabord de crer le visuel du flocon. Pour cela, nous utiliserons
les mthodes de la classe Graphics puisque notre classe hrite de Shape. Rien de
plus facile maintenant pour vous, il suffit de tracer un disque blanc lintrieur du
constructeur de la manire suivante :
408

LA CORRECTION
1
2

this . graphics . beginFill ( 0xFFFFFF ) ;


this . graphics . drawCircle (0 , 0 , 1 . 5 ) ;

Sachant que nos flocons ne tomberont pas tous la mme vitesse, nous allons donc
crer un attribut _vitesse pour retenir celle-ci :
1

private var _vitesse : Number ;

Enfin, noubliez pas dinitialiser cet attribut et de lui associer des accesseurs, que nous
ne dtaillerons pas ici. Jetez simplement un coup dil au code complet de cette classe
qui, soit dit entre nous, est plutt succinct.

La classe Neige
Cration de la classe
prsent, nous allons nous occuper de la classe Neige qui sera donc notre conteneur
pour lensemble des flocons. Pour commencer, je vous invite donc crer une nouvelle
classe si ce nest dj fait. lintrieur, nous aurons besoin des trois constantes que jai
nomm LARGEUR_SCENE, HAUTEUR_SCENE et NOMBRE_FLOCONS. Pour faciliter la suite,
jai dj fait lintgralit des importations ainsi que la mise en place de la structure
globale de la classe. Voici donc notre classe Neige, prte tre remplie :
1
2
3
4
5
6

package
{
import
import
import
import

flash . display . Sprite ;


flash . filters . BlurFilter ;
flash . filters . BitmapFilterQuality ;
flash . utils .*;

public class Neige extends Sprite


{
private const LARGEUR_SCENE : int = 480 ;
private const HAUTEUR_SCENE : int = 320 ;
private const NOMBRE_FLOCONS : int = 3000 ;

8
9
10
11
12
13

public function Neige ()


{
super () ;
// G n ration des flocons
}

14
15
16
17
18
19
20
21
22
23

24

public function animerFlocons () : void


{
// Animation des flocons
}

25
26

409

CHAPITRE 20. TP : MAUVAIS TEMPS


Gnration des flocons
Nous allons ici nous intresser la cration des flocons et leur mise en place sur la
scne au dmarrage de lanimation. Pour commencer, nous allons crer nos flocons en
utilisant un tableau de Flocon de type Array. Ce tableau devra tre accessible depuis
la fonction animerFlocons(), cest pourquoi, jai dcid de crer un nouvel attribut
nomm MesFlocons :
1
2

// Tableau de Flocon
private var mesFlocons : Array ;

Dans ce paragraphe, nous nous occuperons de la gnration des flocons. Plaons-nous


donc lintrieur du constructeur de la classe Neige. Commenons tout de suite par
initialiser notre tableau Array en dfinissant sa taille NOMBRE_FLOCONS dfini juste
avant :
mesFlocons = new Array () ;

prsent, nous devons instancier nos flocons et leur apporter quelques modifications
un par un. Il se trouve que les boucles sont justement trs recommandes pour parcourir
les lments dun tableau :
1
2
3

for ( var i : uint = 0 ; i < NOMBRE_FLOCONS - 1 ; i ++) {


// Cr ation et modification de chaque flocon
}

Nous pouvons maintenant instancier nos flocons, les uns aprs les autres :
mesFlocons . push ( new Flocon () ) ;

Lors du dmarrage de lanimation, il serait prfrable que les flocons soient rpartis
alatoirement sur lcran. Nous allons donc modifier la position horizontale et la position verticale en utilisant la mthode random() de la classe Math. Voici comment
raliser cette opration :
1
2
3

// Placement al atoire des flocons sur l ' cran


mesFlocons [ i ]. x = Math . random () * LARGEUR_SCENE ;
mesFlocons [ i ]. y = Math . random () * HAUTEUR_SCENE ;

Pour donner une impression de profondeur notre scne, nous allons modifier laspect
de nos flocons ainsi que leur vitesse. Pour cela, nous allons dfinir une variable aspect
qui reprsentera la taille du flocon, mais galement sa distance lcran, le zro
correspondant une distance infinie, cest--dire loin de lcran. tant donn quavec
la distance, la vitesse de chute des flocons semble diminuer galement, nous rutiliserons cette variable pour dfinir la vitesse du flocon. Voici le code correspondant ces
manipulations :
1
2
3
4

// D finition d ' un aspect al atoire


var aspect : Number = Math . random () * 1 . 5 ;
// Modification de l ' aspect du flocon
mesFlocons [ i ]. scaleX = aspect ;

410

LA CORRECTION
5
6
7
8

mesFlocons [ i ]. scaleY = aspect ;


mesFlocons [ i ]. alpha = aspect ;
// Modification de la vitesse du flocon
mesFlocons [ i ]. vitesse = 2 * ( aspect + Math . random () ) ;

Suivant la distance du flocon lcran, celui-ci sera galement plus ou moins net. Nous
allons donc rutiliser notre variable aspect pour crer un filtre de flou, simulant la
profondeur de champ de la camra. Pour accentuer cet effet de profondeur, jai utilis
une formule mathmatique avec des puissances. Je vous donne directement le code
correspondant :
1
2
3
4
5
6
7

// G n ration du filtre
var flou : BlurFilter = new BlurFilter () ;
flou . blurX = Math . pow ( 10 * aspect , 4 ) / 10000 ;
flou . blurY = Math . pow ( 10 * aspect , 4 ) / 10000 ;
flou . quality = BitmapFilterQuality . MEDIUM ;
// Application du filtre au flocon
mesFlocons [ i ]. filters = new Array ( flou ) ;

Enfin, il ne nous reste plus qu ajouter notre flocon la liste daffichage de la classe
Neige :
1

this . addChild ( mesFlocons [ i ]) ;

La gnration des flocons est maintenant termine et notre application est prte tre
anime ! Pour cela, noubliez pas de mettre linstruction suivante lextrieur de la
boucle :
1

var monInterval : uint = setInterval ( animerFlocons , 40 ) ;

Lanimation des flocons


Dans ce paragraphe, nous allons nous occuper de toute la partie animation du programme. Nous travaillerons donc lintrieur de la mthode animerFlocons() qui, je
le rappelle, sera excute toutes les 40 millisecondes grce la fonction setInterval().
Encore une fois, nous allons manipuler les flocons individuellement. Nous utiliserons
donc nouveau une boucle for :
1
2
3

for ( var i : uint = 0 ; i < mesFlocons . length ; i ++) {


// Mise jour de chaque flocon
}

Le principe de lanimation consiste modifier la position de chaque flocon. Pour faire


cela, nous utiliserons la proprit vitesse de la classe Flocon que nous viendrons
ajouter la position verticale du flocon. Voici comment il faut procder :
1

mesFlocons [ i ]. y += mesFlocons [ i ]. vitesse ;

Pour viter de crer des flocons linfini, nous allons rutiliser les flocons qui sont sortis
de la zone visible de lcran pour les renvoyer en haut de celui-ci. Vous vous en doutez
411

CHAPITRE 20. TP : MAUVAIS TEMPS


peut-tre, nous utiliserons une condition if en testant la valeur de la position verticale
dun flocon comme ceci :
1
2
3

if ( mesFlocons [ i ]. y > HAUTEUR_SCENE ) {


// R initialisation du flocon en haut de la sc ne .
}

lintrieur, nous pouvons alors remettre la position verticale du flocon zro et


ventuellement replacer alatoirement le flocon horizontalement :
mesFlocons [ i ]. x = Math . random () * LARGEUR_SCENE ;
mesFlocons [ i ]. y = 0 ;

1
2

Aussi surprenant que cela puisse paratre, nous avons prsent termin lanimation
des flocons !

La classe principale
Cration des objets daffichage
Nous voici de retour dans la classe principale ! Nous allons donc ici grer la mise en
place des diffrents lments lcran. Dans un premier temps, je vous propose dimporter les deux images externes, savoir Paysage.png et Masque.png que vous avez
d normalement tlcharger prcdemment. Voici comment jai ralis ceci :
1
2
3
4
5

// Pr paration des images


[ Embed ( source = ' images / Paysage . png ') ]
private var Paysage : Class ;
[ Embed ( source = ' images / Masque . png ') ]
private var Masque : Class ;

Jai donc utilis quatre lments diffrents pour composer la scne finale. Jai tout
dabord pris deux occurrences monPaysage et monMasque des images prcdentes. Ensuite jai instanci notre classe Neige qui contient lensemble des flocons de lanimation.
Enfin, jai cr une nouvelle variable nomme maVignette de type Shape. Celle-ci va
nous permettre de crer un effet de vignette , comme nous le verrons juste aprs.
Voil donc nos quatre objets :
1
2
3
4
5

// Cr ation des objets d ' affichage


var monPaysage : Bitmap = new Paysage () ;
var monMasque : Bitmap = new Masque () ;
var maNeige : Neige = new Neige () ;
var maVignette : Shape = new Shape () ;

Dans la suite, nous allons alors grer l interconnexion entre ces diffrents lments
pour aboutir au rendu final que vous avez vu en dbut de chapitre.
412

LA CORRECTION
Cration dun effet de vignette
Un effet de vignette est une technique qui permet de mettre en valeur ce qui se
trouve au centre dune image. En fait, cela consiste assombrir les bords et les angles
de limage. Pour faire cela, le plus simple est crer un dgrad elliptique, de couleur
blanche au centre et sombre lextrieur. Ainsi, par application dun mode de fusion,
le centre de limage se voit devenir plus lumineuse et ressort davantage. Voici donc
la figure 20.5 le vignettage que nous allons raliser.

Figure 20.5 Dgrad radial pour un effet de vignette


Pour raliser cet effet, nous allons crer un dgrad de type radial lintrieur dun
remplissage de forme rectangulaire. Pour commencer, nous nous occuperons des rglages du dgrad en termes de couleurs. Nous aurons donc un dgrad du blanc au
noir, comme vous pouvez le voir ci-dessous :
1
2
3
4

// Param trage du d grad


var couleurs : Array = [ 0xFFFFFF , 0x000000 ];
var alphas : Array = [1 , 1 ];
var ratios : Array = [ 96 , 255 ];

Ensuite, il nous faut gnrer la matrice permettant de contrler laspect gnral du


dgrad. Pour cela, nous allons donc crer un dgrad radial plus large que la taille
de la scne afin de ne pas avoir de noir absolu, puis nous recentrerons celui-ci. Voici
comment jai ralis ceci :
1
2
3
4
5
6
7
8

// Cr ation de la matrice de description


var matrix : Matrix = new Matrix () ;
var largeur : Number = 2 * LARGEUR_SCENE ;
var hauteur : Number = 2 * HAUTEUR_SCENE ;
var rotation : Number = 0 ;
var tx : Number = -0 . 5 * LARGEUR_SCENE ;
var ty : Number = -0 . 5 * HAUTEUR_SCENE ;
matrix . create GradientBox ( largeur , hauteur , rotation , tx , ty ) ;

413

CHAPITRE 20. TP : MAUVAIS TEMPS


Ltape suivante consiste alors tracer le remplissage correspondant la taille de la
scne :
1
2
3

// Trac du remplissage
maVignette . graphics . beginGradientFill ( GradientType . RADIAL ,
couleurs , alphas , ratios , matrix ) ;
maVignette . graphics . drawRect (0 , 0 , LARGEUR_SCENE , HAUTEUR_SCENE
);

Enfin, nous allons appliquer un mode de fusion de type multiplier qui va permettre
dassombrir les bords de limage en laissant le centre de celle-ci intact.
1
2

// Application du mode de fusion


maVignette . blendMode = BlendMode . MULTIPLY ;

Nous avons prsent lintgralit de nos lments graphiques quil va falloir agencer
les uns avec les autres pour obtenir le rendu final dsir.
Mise en place des lments lcran
Maintenant, nous devons ajouter chacun de nos lments la liste daffichage. Mis
part le masque qui ne sera pas visible, les objets daffichage doivent tre ajouts
dans un certain ordre. En arrire-plan, nous aurons donc limage de fond prsente
dans la variable monPaysage. Ensuite, nous placerons lobjet maNeige par-dessus qui
sera masqu par monMasque. Enfin, nous placerons maVignette au premier plan pour
que son mode de fusion sapplique tous les objets derrire elle. Voil donc lordre
respecter :
1
2
3
4
5

// Ajout des l ments la liste d ' affichage


this . addChild ( monPaysage ) ;
this . addChild ( monMasque ) ;
this . addChild ( maNeige ) ;
this . addChild ( maVignette ) ;

Pour finir, appliquez le masque lobjet maNeige :


1
2
3
4

// Application du masque
maNeige . cacheAsBitmap = true ;
monMasque . cacheAsBitmap = true ;
maNeige . mask = monMasque ;

a y est, cest termin ! Nous avons prsent fini lintgralit de cette animation qui
demandait quelques efforts, je vous laccorde.

Le code source complet


La classe Flocon
Flocon.as
414

LE CODE SOURCE COMPLET


1
2
3

package
{
import flash . display . Shape ;

public class Flocon extends Shape


{
private var _vitesse : Number ;

5
6
7
8

public function Flocon ()


{
super () ;
_vitesse = 0 ;
this . graphics . beginFill ( 0xFFFFFF ) ;
this . graphics . drawCircle (0 , 0 , 1 . 5 ) ;
}

9
10
11
12
13
14
15
16

public function get vitesse () : Number


{
return _vitesse ;
}

17
18
19
20
21

public function set vitesse ( value : Number ) : void


{
_vitesse = value ;
}

22
23
24
25
26

27
28
29

La classe Neige
Neige.as
1
2
3
4
5
6

package
{
import
import
import
import

flash . display . Sprite ;


flash . filters . BlurFilter ;
flash . filters . BitmapFilterQuality ;
flash . utils .*;

7
8
9
10
11
12
13
14

public class Neige extends Sprite


{
private const LARGEUR_SCENE : int = 480 ;
private const HAUTEUR_SCENE : int = 320 ;
private const NOMBRE_FLOCONS : int = 3000 ;
// Tableau de Flocon
private var mesFlocons : Array ;

15

415

CHAPITRE 20. TP : MAUVAIS TEMPS


16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

public function Neige ()


{
super () ;
mesFlocons = new Array () ;
for ( var i : uint = 0 ; i < NOMBRE_FLOCONS - 1 ; i ++) {
// Cr ation et modification de chaque flocon
mesFlocons . push ( new Flocon () ) ;
// Placement al atoire des flocons sur l ' cran
mesFlocons [ i ]. x = Math . random () * LARGEUR_SCENE
;
mesFlocons [ i ]. y = Math . random () * HAUTEUR_SCENE
;
// D finition d ' un aspect al atoire
var aspect : Number = Math . random () * 1 . 5 ;
// Modification de l ' aspect du flocon
mesFlocons [ i ]. scaleX = aspect ;
mesFlocons [ i ]. scaleY = aspect ;
mesFlocons [ i ]. alpha = aspect ;
// Modification de la vitesse du flocon
mesFlocons [ i ]. vitesse = 2 * ( aspect + Math .
random () ) ;
// G n ration du filtre
var flou : BlurFilter = new BlurFilter () ;
flou . blurX = Math . pow ( 10 * aspect , 4 ) / 10000 ;
flou . blurY = Math . pow ( 10 * aspect , 4 ) / 10000 ;
flou . quality = BitmapFilterQuality . MEDIUM ;
// Application du filtre au flocon
mesFlocons [ i ]. filters = new Array ( flou ) ;
// Ajout du flocon la liste d ' affichage
this . addChild ( mesFlocons [ i ]) ;
}

44
45
46

var monInterval : uint = setInterval ( animerFlocons ,


25 ) ;

47
48
49
50
51
52
53
54
55
56
57
58
59

416

public function animerFlocons () : void


{
for ( var i : uint = 0 ; i < mesFlocons . length ; i ++) {
// Mise jour de chaque flocon
mesFlocons [ i ]. y += mesFlocons [ i ]. vitesse ;
if ( mesFlocons [ i ]. y > HAUTEUR_SCENE ) {
// R initialisation du flocon en haut de la
sc ne .
mesFlocons [ i ]. x = Math . random () *
LARGEUR_SCENE ;
mesFlocons [ i ]. y = 0 ;
}
}
}

LE CODE SOURCE COMPLET


}

60
61
62

La classe principale
Main.as
1
2
3
4
5
6
7
8
9

package
{
import
import
import
import
import
import
import

flash . display . Shape ;


flash . display . Sprite ;
flash . events . Event ;
flash . display . Bitmap ;
flash . geom . Matrix ;
flash . display . GradientType ;
flash . display . BlendMode ;

10
11
12
13
14
15
16
17
18
19
20

[ SWF ( width = " 480 " , height = " 320 " ) ]


public class Main extends Sprite
{
private const LARGEUR_SCENE : int = 480 ;
private const HAUTEUR_SCENE : int = 320 ;
// Pr paration des images
[ Embed ( source = ' images / Paysage . png ') ]
private var Paysage : Class ;
[ Embed ( source = ' images / Masque . png ') ]
private var Masque : Class ;

21
22
23
24
25
26

public function Main () : void


{
if ( stage ) init () ;
else addEventListener ( Event . ADDED_TO_STAGE , init ) ;
}

27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

private function init ( e : Event = null ) : void


{
removeEventListener ( Event . ADDED_TO_STAGE , init ) ;
// Cr ation des objets d ' affichage
var monPaysage : Bitmap = new Paysage () ;
var monMasque : Bitmap = new Masque () ;
var maNeige : Neige = new Neige () ;
var maVignette : Shape = new Shape () ;
// Param trage du d grad
var couleurs : Array = [ 0xFFFFFF , 0x000000 ];
var alphas : Array = [1 , 1 ];
var ratios : Array = [ 96 , 255 ];
// Cr ation de la matrice de description
var matrix : Matrix = new Matrix () ;

417

CHAPITRE 20. TP : MAUVAIS TEMPS


var largeur : Number = 2 * LARGEUR_SCENE ;
var hauteur : Number = 2 * HAUTEUR_SCENE ;
var rotation : Number = 0 ;
var tx : Number = -0 . 5 * LARGEUR_SCENE ;
var ty : Number = -0 . 5 * HAUTEUR_SCENE ;
matrix . createGradientBox ( largeur , hauteur , rotation
, tx , ty ) ;
// Trac du remplissage
maVignette . graphics . beginGradientFill ( GradientType .
RADIAL , couleurs , alphas , ratios , matrix ) ;
maVignette . graphics . drawRect (0 , 0 , LARGEUR_SCENE ,
HAUTEUR_SCENE ) ;
Application du mode de fusion
maVignette . blendMode = BlendMode . MULTIPLY ;
// Ajout des l ments la liste d ' affichage
this . addChild ( monPaysage ) ;
this . addChild ( monMasque ) ;
this . addChild ( maNeige ) ;
this . addChild ( maVignette ) ;
// Application du masque
maNeige . cacheAsBitmap = true ;
monMasque . cacheAsBitmap = true ;
maNeige . mask = monMasque ;

42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

63
64

65
66
67

418

Quatrime partie

Interaction et animation

419

Chapitre

21

Les vnements
Difficult :
Nous voici dans une nouvelle partie portant sur linteractivit et lanimation en Actionscript. Ces deux concepts sont troitement lis la notion dvnement qui est lobjet de
ce chapitre. Il sera malheureusement le plus thorique et le plus complexe de cette partie.
Une fois que vous aurez acquis les bases de la programmation vnementielle, les autres
chapitres seront beaucoup plus pratiques et faciles aborder.

421

CHAPITRE 21. LES VNEMENTS

Quest ce quun vnement ?


Introduction
Dans ce chapitre, nous allons aborder la programmation vnementielle. A linstar
de la POO, cette manire de programmer sinspire dlments du quotidien, savoir :
les vnements.
Attention, jen vois dj certains penser aux festivals de cet t : il ne sagit pas de
cela bien videmment ! Les vnements, tels que nous allons les voir, sont dfinis
comme des lments non prvisibles, gnralement dclench par un changement dtat
quelconque. Par exemple, dans la vie courante, nous pouvons citer :

Un rveil qui sonne.


Un accident de voiture.
Une panne de courant.
La rception dun fax.

Pour complter la dfinition prcdente, nous pourrions dire quil sagit dvnements
soudains qui surgissent lorsque lon ne sy attend pas. Dans lexemple du rveil, il est
vrai quon sattend forcment ce quil sonne, cependant, vous devez avouer que vous
tes toujours surpris lorsque ce dernier se met sonner !
En programmation, le principe est le mme. Dans le cas de lActionScript 3, nous
pourrions citer comme vnements :

Un clic laide de la souris.


Le dplacement du curseur de la souris.
Lenfoncement dune touche du clavier.
La fin de chargement dune image depuis un serveur.
Une erreur lors du chargement de cette image.

lapparition de lun des vnements, il est alors possible dexcuter des instructions
spcifiques, pour mettre jour laffichage par exemple. tant donn que nous ne savons
pas lavance quand ceux-ci se produiront, il serait possible, mais trs fastidieux,
dinclure des instructions au milieu de votre programme qui bouclent indfiniment
pour dtecter ces vnements : ctait la mthode avant lentre en scne du concept
de gestion des vnements, qui facilite grandement ce processus.
Pour introduire ce concept, nous allons maintenant faire une analogie en prenant lide
de la rception dun fax.

Un jour au bureau. . .
Aujourdhui, vous travaillez pour une grande entreprise de renomme internationale.
Votre compagnie dispose ainsi de diffrentes agences rparties sur plusieurs continents.
En tant que responsable produits, vous allez devoir prochainement prsenter un nouveau concept lensemble du groupe. Il est donc prvu que vous assistiez une runion
avec des collaborateurs de diverses agences. En revanche, les dtails pratiques tels que
lheure et lendroit de cette runion ne sont pas encore fixs.
422

QUEST CE QUUN VNEMENT ?


Fonction dcouteur
Monsieur Gumble, directeur dune agence nord-amricaine, a promis quil vous enverrait les informations concernant la runion daujourdhui par fax. Comme votre
habitude, ce matin-l vous arrivez au bureau lgrement en avance. Vous en profitez
alors pour sortir une feuille et commencez noter diffrentes choses dessus.
Machinalement, vous avez commenc anticiper et vous avez not les diffrentes tches
faire la rception de ce fameux fax : cela ressemble une fonction contenant une srie
dinstructions, non ? Cette fonction qui devra tre appele ds que vous recevrez le
fax est dsigne comme tant une fonction dcouteur.
En ActionScript 3, elle sera donc une fonction quelconque ou une mthode de classe
regroupant des instructions excuter lors de lapparition dun vnement. Gnralement, les actions qui en dcouleront dpendent de paramtres lis lvnement. Par
exemple, savoir quelle touche a t
 enfonce permettrait dexcuter des instructions
diffrentes suivant sil sagit dun A ou dun S .

couter un vnement
a y est ! Vous tes prts recevoir votre fax. Vous jetez rgulirement un coup dil
sur le tlcopieur qui se trouve dans le coin.
Attendre quun vnement survienne est appel couter un vnement. On coute
toujours sur un objet dsign comme tant la cible de lvnement. On dit galement
que cet objet dclenchera lvnement lorsque celui-ci surviendra. Ici, le tlcopieur
est la cible de lvnement qui se produira la rception dun fax.
En programmation, on coute un vnement particulier en renseignant une sorte de
signature , appele type dvnement, dcrite par une chane de caractres : il
est alors possible de distinguer un clic de souris du dplacement du curseur au-dessus
dun objet identique. couter un vnement quun objet sera susceptible de dclencher
consiste donc associer une fonction dcouteur un type dvnements tout
en ciblant cet objet. Ainsi, chaque fois que ledit objet dclenchera lvnement correspondant au type en question, la ou les fonctions dcouteur impliques seront
appeles.
Seul un objet peut faire apparatre un vnement. Nous couterons donc
toujours des vnements relatifs des objets (ici, notre tlcopieur).
Cependant, le fax narrive toujours pas et lennui pointe le bout de son nez. Vous
levez alors la tte et parcourez votre bureau du regard : vous apercevez un collgue et
vous remarquez que ce dernier semble galement attendre un fax devant la machine.
Toutefois, il est peu probable quil provienne de Monsieur Gumble. De la mme faon,
votre voisin neffectuera pas les mmes tches que vous aprs rception de son fax, sa
fonction dcouteur est donc probablement diffrente.
423

CHAPITRE 21. LES VNEMENTS


Il est possible quun vnement soit cout par plusieurs fonctions dcouteur mme si elles sont diffrentes. Elles seront toutes appeles lorsque lvnement sera dclench.

Lvnement
Aprs la pause djeuner, vous revenez votre poste pour poursuivre votre travail de la
matine. Vous navez alors pas le temps de vous asseoir quun fax arrive ! Vous regardez
celui-ci de plus prs, il sagit bien du fax de monsieur Gumble. Vous le parcourez donc
des yeux et voyez que celui-ci regorge dinformations. Vous y trouvez le nom de toutes
les personnes qui seront prsentes, lobjet de la runion, mais galement la date, lheure
et le lieu de la runion. a tombe bien, ce sont exactement les donnes quil vous
manquait !
Vous ressortez alors votre feuille puis commencez les rservations. Parmi les diffrentes
informations fournies dans le fax, vous en avez extrait celles qui vous taient utiles pour
pouvoir excuter les tches que vous vous tiez fixs. On dit que le fax reprsente
lvnement sous la forme dun objet qui contient diffrentes donnes sur ce qui sest
produit.
En programmation vnementielle , comme tout le reste en en Actionscript,
les vnements sont donc reprsents par des objets qui renferment galement des
informations concernant lvnement en question. De la mme faon, il est possible
dinterroger cette classe, pour pouvoir grer et traiter correctement ce dernier en
fonction de son type et de ses attributs. Ces objets sont tous issus de la classe Event,
dont nous reparlerons plus loin.

Les couteurs en POO


Nous allons prsent revenir et nous pencher plus srieusement sur les couteurs
et leur gestion. Comme nous lavons dit plus haut, les couteurs sont associs aux
objets. Ainsi, tout objet peut thoriquement utiliser les couteurs pour rpondre
aux vnements, une condition nanmoins : lobjet doit implmenter linterface
IEventDispatcher.

Linterface IEventDispatcher
Linterface IEventDispatcher dfinit donc le jeu de mthodes servant la gestion
des couteurs. Sans plus attendre, voici la figure 21.1 lensemble des dfinitions de
mthodes que propose cette interface.
Comme vous pouvez le voir, cette interface propose cinq dfinitions de mthodes pour
la gestion des couteurs. La mthode addEventListener() est celle que nous utiliserons le plus, sa signature complte est la suivante :
424

LES COUTEURS EN POO

Figure 21.1 Linterface IEventDispatcher


1

addEventListener ( type : String , listener : Function , useCapture :


Boolean = false , priority : int = 0 , useWeakReference : Boolean
= false ) : void

Nanmoins, dans un premier temps, nous allons laisser de ct les paramtres facultatifs. Ce qui nous donne donc :
1

addEventListener ( type : String , listener : Function ) : void

Avant de vous montrer un exemple dutilisation, nous allons revenir sur la notion
dcouteurs. Si vous tes pointilleux, vous aurez alors remarqu la prsence du mot anglais add dans le nom cette mthode, qui signifie ajout. Ainsi, lorsque nous utilisons
cette mthode nous ajoutons un nouvel couteur notre objet. En effet, il est possible
de dfinir plusieurs couteurs pour un mme objet et de pouvoir ainsi rpondre divers
vnements. Grce cela, il est donc possible dtre lcoute la fois dvnements
provenant de la souris et dautres provenant du clavier.
Tout comme il est possible dajouter des couteurs un objet, il est possible den
retrancher. Cest donc la mthode removeEventListener() qui sen charge, et voici
sa signature complte :
1

rem o v eE v en t Li stener ( type : String , listener : Function , useCapture :


Boolean = false ) : void

Nous retiendrons pour linstant cette mthode sous sa forme simplifi :


1

rem o v eE v en t Li stener ( type : String , listener : Function ) : void

Dans un premier temps, nous allons oublier les mthodes dispatchEvent() et willTrigger().
En revanche, vous pouvez noter la prsence de la mthode hasEventListener() qui
permet de vrifier si un couteur est enregistr auprs dun objet pour un type dvnement spcifique. Cette mthode renvoie donc un boolen.

La classe EventDispatcher
Comme nous lavons dit plus haut, cest linterface IEventDispatcher qui dfinit le
jeu de mthodes servant la gestion des couteurs. Nanmoins, cest lintrieur
de la classe EventDispatcher que le contenu de lensemble de ces mthodes est dfini.
Bien entendu, cette classe implmente linterface IEventDispatcher, et cest elle qui
va rellement servir de classe de base pour toute classe voulant distribuer des
425

CHAPITRE 21. LES VNEMENTS


vnements. Par hritage, cette classe permet donc tout objet dutiliser les mthodes
de linterface IEventDispatcher et dtre lcoute dvnements ; on dit alors que
lobjet devient une cible dvnements.
Ainsi, toutes les classe filles de EventDispatcher hritent donc de ces mthodes lies
la gestion des couteurs. linstar de nombreux objets, nous retrouvons parmi
elles la classe DisplayObject que nous avons dj vue. Donc, si vous vous souvenez
bien, lensemble des classes daffichage sont, par hritage, des sous-classes de la classe
EventDispatcher (voir figure 21.2).

Figure 21.2 Extrait de larbre dhritage des classes daffichage


Cela tombe bien, tous les lments de notre liste daffichage vont donc pouvoir rpondre
divers vnements. Nous verrons que les objets appartenant la liste daffichage
rpondent aux vnements dune manire assez spcifique : on appelle cela le flux
dvnements. Nous aborderons cette notion au cours de ce chapitre.

Mise en place dun couteur


Introduction aux fonctions de rappel
La thorie
En regardant la mthode addEventListener() de plus prs, vous vous apercevrez que
celle-ci dispose dun paramtre de type Function :
1

426

addEventListener ( type : String , listener : Function ) : void

MISE EN PLACE DUN COUTEUR


Dans ce cas, la fonction listener est ce quon appelle une fonction de rappel (ou
callback en anglais). Il sagit donc dune fonction, ou dune mthode, qui est passe
en paramtre une autre fonction. Ainsi, lintrieur de cette dernire, il est possible
de faire appel la fonction de rappel sa guide.
Quel est lintrt de cette fonction de rappel ? Nest-il pas plus simple de
dfinir les instructions directement dans la seconde fonction ?
Lintrt ici est justement de pouvoir se servir dune fonction sachant quon ne la
connat pas lavance. De cette manire, il est alors possible dexcuter des instructions dynamiquement sans avoir besoin de les dfinir directement. Le plus souvent, les
fonctions de rappel sont appels suite une condition, comme lapparition dun
vnement par exemple. En utilisant ce concept, vous pouvez ainsi crer une classe
et laisser lutilisateur la libert dexcuter les instructions quil souhaite sans quil
ait accs la classe elle-mme. Cela est extrmement pratique lorsquon conoit son
programme par hritage ou lorsque lon cre une bibliothque de classes.
Une fonction de rappel est une fonction appele lintrieur dune autre. Son utilisation et sa signature sont donc dfinies et figes lors de son appel. Ainsi, la dfinition
de la fonction de rappel, il est ncessaire dajouter les points suivants :
Le nombre et le type des paramtres.
Le type de la valeur renvoye.
Vous pouvez donc tout fait utiliser ce concept lintrieur de vos fonctions et ainsi
amliorer la r-utilisabilit de votre code.

Un exemple
Pour mieux comprendre cette notion, voici un exemple basique de fonction utilisant
une fonction de rappel suivant une condition :
1
2
3
4
5
6

function uneFonction ( condition : Boolean , fonction : Function ) : void


{
if ( condition ) {
fonction . call () ;
}
}

Et voici la dfinition de la fonction de rappel :


1
2
3
4

function fonctionDeRappel () : void


{
trace ( " Ceci est une fonction de rappel . " ) ;
}

427

CHAPITRE 21. LES VNEMENTS


Pour utiliser au mieux ce concept, je vous conseille de vous rendre sur la documentation officielle de la classe Function. Vous verrez notamment comment
vous servir de la mthode call() suivant les paramtres dfinies pour votre
fonction.

Documentation Function
B
Code web : 171723


Si vous souhaitez tester cet exemple, vous pouvez alors excuter linstruction suivante
aprs avoir dfini les deux fonctions prcdentes :
uneFonction ( true , fonctionDeRappel ) ;

Ce qui donne naturellement lexcution du code :


Ceci est une fonction de rappel .

Crer une fonction dcouteur


Lorsquon parle de gestion dvnements, les fonctions de rappel sont alors plus
communment appeles fonction dcouteur, comme nous lavons voqu plus haut.
La gestion de cette fonction est alors du ressort de la superclasse EventDispatcher.
Lors de la mise en place dun couteur, nous avons donc uniquement nous proccuper
de la dfinition de la fonction dcouteur.
Les fonctions dcouteur doivent donc rpondre aux exigences fixes par la classe
EventDispatcher. Voici donc la signature type dune fonction dcouteur :
1
2
3
4

function uneFonction ( event : Event ) : void


{
// Instructions ex cut es lors de l ' apparition d ' un v
nement de type donn
}

Le paramtre event renseigner ici est de type Event, cependant, dans la


pratique, il sagira plus gnralement dune sous-classe de cette dernire. La
classe utilise pour ce paramtre dpendra directement du type dvnement
spcifi lors de la mise en place de lcouteur.
Comme exemple, je vous propose cette fonction dcouteur qui pourrait servir la
gestion dvnements lis la souris :
1
2
3
4

function monEcouteur ( event : MouseEvent ) : void


{
trace ( " Vous avez cliqu sur la souris . " ) ;
}

Comme vous pouvez le voir ici, le paramtre de cette fonction est de type MouseEvent,
dont nous reparlerons ds le prochain chapitre. Il sagit donc dune sous-classe de la
428

MISE EN PLACE DUN COUTEUR


classe Event spcifique aux vnements gnrs par votre souris. Bien videmment,
cette classe aurait t diffrente sil sagissait dvnements provenant du clavier par
exemple.

Grer les couteurs dun objet


Ajouter un couteur
Comme vous laurez compris, pour ajouter un couteur un objet, nous aurons
besoin de la mthode addEventListener(). Parce que mieux vaut deux fois quune, je
vous rappelle lallure de la signature de cette dernire :
1

addEventListener ( type : String , listener : Function ) : void

prsent, vous savez donc comment dfinir la fonction passer en paramtre de cette
mthode. Quant au type dvnement, ici sous forme de String, celui-ci peut tre
renseign via les constantes dfinies lintrieur de la classe Event ou de lune de ses
sous-classes.
Encore une fois, lutilisation de ces constantes facilitent grandement la lisibilit et le
dbogage du code. Par exemple, la chane de caractres "click" peut tre remplace par lexpression MouseEvent.CLICK. De cette manire, le code est plus clair. Par
ailleurs, le compilateur peut alors dtecter une ventuelle faute de frappe, ce qui nest
pas le cas pour la chane en brut .
La constante MouseEvent.CLICK permet de faire rfrence aux vnements gnrs par
le clic de votre souris. En outre, nous sommes capables de terminer la mise en place
de notre couteur. Voici donc comment enregistrer lvnement monEcouteur() dfinie
plus haut lobjet stage :
1

stage . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;

Si vous le dsirez, vous pouvez prsent tester le code complet suivant :


1
2
3
4
5

function monEcouteur ( event : MouseEvent ) : void


{
trace ( " Vous avez cliqu sur la sc ne principale . " ) ;
}
stage . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;

Une fois lapplication lance et si vous cliquez plusieurs reprise lintrieur de votre
scne, vous verrez apparatre ceci :
Vous avez cliqu sur la sc ne principale .
Vous avez cliqu sur la sc ne principale .
Vous avez cliqu sur la sc ne principale .

429

CHAPITRE 21. LES VNEMENTS


Dans cet exemple, nous avons enregistr lcouteur auprs de lobjet stage,
cest--dire la scne principale. Nous aurions trs bien pu le faire pour notre
classe Main de type Sprite. Cependant, si vous navez rien ajout celle-ci,
ses dimensions sont nulles et il nest pas possible dy cliquer lintrieur.

Supprimer un couteur
tout moment, il est possible de retirer un couteur enregistr auprs dun objet. Pour
cela, nous disposons de la mthode removeEventListener() dfinie par linterface
IEventDispatcher :
1

r em o v eE v entListener ( type : String , listener : Function ) : void

Une fois cette mthode appele, lobjet ne rpond alors plus aux vnements en question. Nous nallons pas piloguer plus longtemps sur cette mthode qui sutilise de la
mme faon que addEventListener().
Voici donc comment retirer lcouteur ajout plus haut :
1

stage . r em oveEventListener ( MouseEvent . CLICK , monEcouteur ) ;

Le flux dvnements
Prsentation du concept de flux dvnements
Introduction
Lorsque survient un vnement, Flash Player distribue celui-ci directement lobjet
cible. Ce dernier peut alors grer lvnement comme il le souhaite, grce un ventuel
couteur. En revanche, ceci est plus complexe sil sagit dun objet daffichage. Pour
vous en convaincre, nous allons reprendre nos histoires de voitures !
Souvenez-vous de notre voiture organise comme la figure 21.3 dans la liste daffichage.
Il sagit donc de la hirarchie lintrieur de notre programme. Ceci dit, une fois que
vous aurez lanc lexcution du code, vous obtiendrez la fentre visible la figure 21.4.
Dans limage prcdente, vous voyez que le curseur est positionn sur lune des deux
roues. Au hasard, nous dirons quil sagit de lobjet roue2. Si vous cliquez laide de
votre souris, un objet MouseEvent va donc tre gnr pour que lvnement puisse
tre trait. Cependant, une petite question se pose alors !

qui doit tre distribu lvnement gnr par la souris ?

Certains diront quil semble plus logique de distribuer lvnement auprs de lobjet
roue2. En effet, cest bien lobjet qui rellement la cible de lvnement puisque cest
430

LE FLUX DVNEMENTS

Figure 21.3 Larbre daffichage de la voiture

Figure 21.4 Les diffrents objets de la voiture lintrieur du Flash Player

431

CHAPITRE 21. LES VNEMENTS


sur lui que le clic est effectu. premire vue, il est normal de faire de lobjet roue2
la cible de lvnement.
Toutefois, en y rflchissant bien, ceci nest finalement pas ce quil y a de plus pratique.
Imaginons que dans notre application, nous voulions non pas dtecter un clic sur lune
des roues ou mme sur la carrosserie, mais sur la voiture elle-mme. Comment allonsnous pouvoir grer cette situation au niveaux des vnements ? Allons nous devoir
dfinir un couteur pour chacun des objets enfants de notre objet voiture ? Heureusement, non ! Le Flash Player intgre ce quon appelle le flux dvnements qui largit
grandement les possibilits de la gestion des vnements.
Quest-ce que le flux dvnements ?
Pour faciliter la gestion des vnements pour les objets daffichage, le Flash Player
utilise une technique qui consiste acheminer lobjet dvnement dans toute la hirarchie de la liste daffichage, depuis la scne principale jusqu lobjet cible. Pour tre
plus prcis, lobjet vnement effectue en ralit un aller-retour sur le chemin dcrit
prcdemment. Nous pouvons alors distinguer trois phases :
La phase de capture : cette phase comprend la distribution de lobjet vnement
depuis la scne principale jusqu lobjet parent de la cible.
La phase cible : il sagit de la gestion de lvnement par lobjet cible.
La phase de propagation : cette dernire phase est la remonte jusqu la
scne principale, il sagit donc du chemin inverse la phase de capture.
Appliqu au cas dun clic sur lobjet roue2 de notre voiture, le flux dvnements peut
alors tre dcompos comme la figure 21.5.

Figure 21.5 La diffusion dans le flux dvnements


Avec cette manire de procder, il devient possible de grer lvnement tous les
tages de la hirarchie de notre liste daffichage. Ainsi, nous pouvons alors enregistrer
un couteur pour cet vnement auprs du conteneur voiture. Pour mieux comprendre
432

LE FLUX DVNEMENTS
tous les mcanismes du flux dvnements, nous allons maintenant raliser quelques
manipulations.

Bien comprendre le fonctionnement


Dans le flux dvnements, lobjet dvnements est distribu chaque nud
ou objet de la liste daffichage. Pour bien cerner comment cela fonctionne, nous allons
tester quelques petits bouts de code. Nous allons donc reprendre notre voiture.
Commenons par dfinir nos lments :
1
2
3
4
5
6
7

// D finition des objets d ' affichage


var voiture : Sprite = new Sprite () ;
voiture . name = " voiture " ;
var roue2 : Sprite = new Sprite () ;
roue2 . name = " roue2 " ;
voiture . addChild ( roue2 ) ;
addChild ( voiture ) ;

Pour simplifier lexemple, nous limiterons le trac de notre voiture une unique roue.
Cest un peu ridicule, je sais ! Mais cela ne nous empchera pas de comprendre les
mcanismes lis au flux dvnements.
Voici donc le code propos pour dessiner cette roue :
1
2
3
4
5
6
7

// Tra age de la roue


roue2 . graphics . lineStyle (2 , 0x000000 ) ;
roue2 . graphics . beginFill ( 0xCCE5FF ) ;
roue2 . graphics . drawCircle (0 ,0 , 25 ) ;
roue2 . graphics . endFill () ;
roue2 . x = stage . stageWidth / 2 ;
roue2 . y = stage . stageHeight / 2 ;

En guise de fonction dcouteur, nous nous contenterons de citer le nom de lobjet daffichage qui reoit lobjet vnement. Cest pour cela que nous avons dfini la
proprit name pour chacun de nos objets.
Pour rappel, le nom des variables est arbitraire et na de sens qu lintrieur du code. Une fois le code compil, Flash Player gre directement les
variables en mmoire sans utiliser le nom que vous avez dfini dans votre
code. Cest pourquoi la proprit name dfinie pour toutes les sous-classes de
DisplayObject, permet facilement de distinguer nos objets daffichage lors
de lexcution du code.
Voici donc notre fonction dcouteur :
1
2
3
4

// D finition de la fonction d ' couteur


function monEcouteur ( event : MouseEvent ) : void
{
trace ( " v nement en cours de traitement par l ' objet " +
event . currentTarget . name ) ;

433

CHAPITRE 21. LES VNEMENTS


5

Appliquons alors cette fonction dcouteur nos deux objets voiture et roue2, pour
les vnements de type MouseEvent.CLICK :
1
2
3

// Mise en place des couteurs


voiture . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;
roue2 . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;

Je vous propose prsent de lancer lexcution du code puis de cliquer sur votre roue
laide de votre souris. Vous verrez alors apparatre ceci dans la console :
v nement en cours de traitement par l objet roue2
v nement en cours de traitement par l objet voiture

Attendez ! Pourquoi lvnement est-il distribu lobjet voiture aprs avoir


t trait par lobjet roue2 ? Et sachant que le flux dvnements reprsente
un aller-retour dans la liste daffichage, ne devrait-il pas y avoir deux traitement de la fonction dcouteur par lobjet stage ?
En toute rigueur, si ! Toutefois, lors de la mise en place dun couteur avec la mthode
addEventListener(), nous dfinissons en ralit la phase durant laquelle lcouteur
est actif. Pour cela, il faut revenir sur la dfinition de cette fonction :
addEventListener ( type : String , listener : Function , useCapture :
Boolean = false , priority : int = 0 , useWeakReference : Boolean
= false ) : void

Dans cette mthode, le troisime paramtre nomm useCapture, de type Boolean,


permet de dfinir les phases durant lesquelles lcouteur est actif. Voil donc comment
ce paramtre influe sur le flux dvnements :
true : lcouteur est actif uniquement pendant la phase de capture.
false : lcouteur est actif pendant les phases cible et de propagation.
Par dfaut, ce paramtre vaut false. Dans le cas de notre objet voiture, lcouteur
est donc actif seulement pendant la phase de propagation.
Essayons maintenant de dfinir lcouteur de notre objet voiture pendant la phase de
capture :
voiture . addEventListener ( MouseEvent . CLICK , monEcouteur , true ) ;

Cette fois-ci, notre voiture voit bien lvnement avant lobjet roue2 :
v nement en cours de traitement par l objet voiture
v nement en cours de traitement par l objet roue2

Si vous avez bien compris la logique du flux dvnements, vous aurez alors devin
que lobjet voiture peut intervenir la fois durant la phase de capture et la phase de
434

LOBJET EVENT
propagation. Cependant, cela ncessite denregistrer deux couteurs diffrents auprs
de lobjet en question.
Mme si cela semble superflu, voil les instructions de dfinition des couteurs :
1
2
3

voiture . addEventListener ( MouseEvent . CLICK , monEcouteur , true ) ;


roue2 . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;
voiture . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;

prsent, nous pouvons donc agir tous les niveaux, ou disons durant toutes les phases
du flux dvnements, comme le montre la console de sortie :
v nement en cours de traitement par l objet voiture
v nement en cours de traitement par l objet roue2
v nement en cours de traitement par l objet voiture

Enfin, avant de passer la suite, notez que le passage en paramtre de la valeur true
la mthode addEventListener() de lobjet cible a pour effet de dsactiver lcouteur
pendant la phase cible. Voici un exemple illustrant ces propos :
1
2
3

voiture . addEventListener ( MouseEvent . CLICK , monEcouteur , true ) ;


roue2 . addEventListener ( MouseEvent . CLICK , monEcouteur , true ) ;
voiture . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;

Ce qui donne videmment dans la console de sortie :


v nement en cours de traitement par l objet voiture
v nement en cours de traitement par l objet voiture

Lobjet Event
Prsentation de la classe Event
Avant de clturer ce chapitre, nous allons brivement parler de la classe Event. Nous
avons dj vu que cette dernire est la superclasse de tout objet vnement. Ainsi, les
sous-classes hriteront de toutes ses proprits. Ses accesseurs et mthodes serviront
principalement la gestion de lvnement, nous allons donc rapidement les tudier.
Voici la figure 21.6 lheureuse lue que nous allons tudier.
Bien entendu, nous ne verrons et ne dtaillerons pas toutes ces proprits. Nous nous
focaliserons uniquement sur celles qui ont le plus dintrt pour nous pour linstant.
Parmi les attributs, certains sont plutt dordre gnral, nous retiendrons donc les
deux suivants :
type : cet accesseur dfinit le type de lvnement sous la forme dune chane de
caractres. Il sagit de cette mme chane qui est transmise en paramtre la
mthode addEventListener().
target : cet attribut fait rfrence lobjet cible de lvnement.
435

CHAPITRE 21. LES VNEMENTS

Figure 21.6 La classe Event


Voici un petit code dexemple dutilisation de ces proprits :
1
2
3
4
5
6

stage . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;


function monEcouteur ( event : MouseEvent ) : void
{
trace ( " v nement de type " + event . type ) ;
trace ( " Cible de l ' v nement " + event . target ) ;
}

Ce qui donne :
v nement de type click
Cible de l v nement [ object Stage ]

Les proprits lis au flux dvnements


Certaines proprits de la classe Event sont en lien direct avec le flux dvnements.
Celles-ci permettent alors de situer et de contrler lobjet Event tout au long du flux
dvnements. Nous pouvons donc citer les deux attributs suivant :
eventPhase : cette proprit indique la phase en cours dans le flux dvnements.
currentTarget : cet attribut est une rfrence lobjet cible provisoire qui peut
se situer nimporte o dans la hirarchie de la liste daffichage.
Afin de mieux comprendre ce dont il est question, nous allons reprendre nos objets
voiture et roue2. Puis nous allons redfinir la fonction dcouteur pour faire apparatre les valeurs de ces attributs :
1
2
3
4
5
6

// D finition de la fonction d ' couteur


function monEcouteur ( event : MouseEvent ) : void
{
trace ( " v nement en cours de traitement par l ' objet " +
event . currentTarget . name ) ;
trace ( " Phase du flux d ' v nements en cours : " + event .
eventPhase ) ;
}

436

LOBJET EVENT
Maintenant, enregistrons un couteur pour chacune des phases du flux dvnements :
1
2
3
4

// Mise en place des couteurs


voiture . addEventListener ( MouseEvent . CLICK , monEcouteur , true ) ;
voiture . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;
roue2 . addEventListener ( MouseEvent . CLICK , monEcouteur ) ;

prsent, il ny a plus aucun doute sur la manire dont est gr lobjet vnement
travers les diffrentes phases :
v nement en cours de traitement par l objet voiture
Phase du flux d v nements en cours : 1
v nement en cours de traitement par l objet roue2
Phase du flux d v nements en cours : 2
v nement en cours de traitement par l objet voiture
Phase du flux d v nements en cours : 3

Comme vous le voyez, les phases sont reprsents par un nombre entier
allant de 1 3. Comme souvent en Actionscript, lutilisation de ces valeurs est simplifie par la classe EventPhase et ses constantes respectives
CAPTURING_PHASE, AT_TARGET et BUBBLING_PHASE.
La classe Event dispose de deux mthodes stopImmediatePropagation() et stopPropagation()
qui servent stopper la diffusion de lvnement dans le flux dvnements, respectivement partir du nud actuel ou du nud suivant. Ces mthodes permettent donc
de grer directement la propagation de lobjet vnement.
Pour visualiser ceci, je vous invite remplacer la fonction dcouteur monEcouteur()
par la suivante :
1
2
3
4
5
6
7

function monEcouteur ( event : MouseEvent ) : void


{
trace ( " v nement en cours de traitement par l ' objet " +
event . currentTarget . name ) ;
if ( event . eventPhase == EventPhase . AT_TARGET ) {
event . stopPropagation () ;
}
}

La propagation est alors stoppe la fin de lexcution de la fonction dcouteur associe


lobjet roue2 :
v nement en cours de traitement par l objet voiture
v nement en cours de traitement par l objet roue2

437

CHAPITRE 21. LES VNEMENTS

En rsum
Un vnement est gnr de manire imprvisible, comme le clic dune souris par
exemple.
Les mthodes de gestion des couteurs sont dfinies par linterface IEventDispatcher
et la classe EventDispatcher.
La mthode addEventListener() sert associer une fonction de rappel ou fonction dcouteur un type dvnements pour un objet donn.
Le flux dvnements dfinit le parcours effectu par un vnement dans la hirarchie de la liste daffichage, entre la scne principale et lobjet cible.
Le flux dvnements est compos de la phase de capture, la phase cible et la
phase de propagation.
Les objets vnement sont reprsents par la classe Event, ou lune de ses classesfilles.

438

Chapitre

22

Interagir avec lutilisateur


Difficult :
Maintenant que toutes les bases de la programmation vnementielle sont poses, nous
allons pouvoir mettre tout ceci en pratique au cours de ce chapitre. Nous apprendrons
comment utiliser et manipuler des donnes saisies par lutilisateur. Cela pourra tre des
donnes issues de la souris ou du clavier.

439

CHAPITRE 22. INTERAGIR AVEC LUTILISATEUR

La souris
Lobjet MouseEvent
Introduction
Nous allons apprendre grer et manipuler des vnements provenant de la
souris. Lorsque quun tel vnement se produit, un objet de la classe MouseEvent est
gnr. Comme nous lavons vu, tous les objets vnements hritent de la classe
Event et de ses proprits (voir figure 22.1).

Figure 22.1 La classe MouseEvent


Dans le chapitre prcdent, javais mentionn le fait que les objets renfermaient des
informations lies lvnement. Ainsi, la classe MouseEvent dispose principalement
de proprits contenant des informations en lien avec la souris, notamment la position
du curseur au moment de la gnration de lvnement. tant donn que les interactions
avec la souris sont troitement lies linterface graphique, cette classe sera videmment
distribue dans le flux dvnements.
Nous allons maintenant faire un tour des principales constantes et proprits de
cette classe. Nanmoins, nous ne les verrons pas toutes, et je vous conseille donc de
vous rendre sur la page de la classe du guide de rfrence pour davantage dinformations.


Documentation MouseEvent
.
B
Code web : 462867


440

LA SOURIS
Les diffrents types dvnements
Les types dvnements lis la souris sont dfinis sous forme de constantes
statiques de la classe MouseEvent. On les utilise ainsi :

MouseEvent . NO M_DE_LA_CONSTANTE

2
3
4

// Par exemple :
MouseEvent . CLICK

Voici ces constantes :


CLICK : cette constante dfinit un clic avec le bouton gauche de la souris (il faut que
le bouton soit successivement enfonc puis relch tout en tant au-dessus de la cible
chaque fois).
DOUBLE_CLICK : celle-ci dfinit un double-clic de la souris. Toutefois, la gestion de ce
type dvnements ncessite daffecter la valeur true la proprit doubleClickEnabled
de lobjet en question.
MOUSE_DOWN : cette constante dcrit lenfoncement du bouton gauche de la souris.
MOUSE_UP : loppos de MOUSE_DOWN, MOUSE_UP est produit par le relchement du
bouton gauche de la souris.
MIDDLE_CLICK : cette fois-ci, il sagit dun clic laide du bouton du milieu de la
souris (qui est en gnral la molette de la souris).
MIDDLE_MOUSE_DOWN : cette constante dcrit lenfoncement du bouton du milieu de
la souris.
MIDDLE_MOUSE_UP : comme pour MOUSE_UP, MIDDLE_MOUSE_UP est produit par le
relchement du bouton du milieu de la souris, loppos de MIDDLE_MOUSE_DOWN.
RIGHT_CLICK : pour ce type dvnement, il sagit dun clic laide du bouton droit
de la souris.
RIGHT_MOUSE_DOWN : cette constante dcrit lenfoncement du bouton droit de la souris.
RIGHT_MOUSE_UP : RIGHT_MOUSE_UP est produit par le relchement du bouton droit
de la souris, loppos de RIGHT_MOUSE_DOWN.
MOUSE_MOVE : un tel vnement se produit chaque dplacement de la souris, mme
dun seul et unique pixel !
MOUSE_WHEEL : cette constante dfinit une action de dfilement laide de la molette
de la souris. La direction de la molette est dfinie dans lattribut delta de lobjet de
lvnement, qui est alors un entier positif ou ngatif.
ROLL_OVER : cette constante dfinit le survol de lobjet courant, ou de lun de ses
enfants, par la souris.
ROLL_OUT : linverse de MOUSE_OVER, cet vnement est gnr lorsque la souris
quitte la zone de trac dun objet daffichage et de lensemble de ses enfants.
Grce toutes ces constantes que vous pouvez combiner, il vous est maintenant possible
de prendre en compte les commande de lutilisateur avec la souris.
441

CHAPITRE 22. INTERAGIR AVEC LUTILISATEUR


Il existe galement les constantes MOUSE_OVER et MOUSE_OUT, trs semblables
au couple ROLL_OVER / ROLL_OUT. La diffrence se situe au niveau des objets
daffichage enfants de la cible de lvnement : dans le cas de MOUSE_OVER
et MOUSE_OUT, lvnement sera dclench chaque fois que la souris quitte
la surface dun enfant pour aller sur un autre, mme sil ny a pas despace
vide entre eux. A linverse, pour ROLL_OVER et ROLL_OUT, la cible est ses
enfants sont considrs comme tant une unique surface : lvnement nest
dclench quune seule fois. Il est donc fortement conseill de toujours utiliser
ROLL_OVER et ROLL_OUT.
Imaginons que vous ayez cr un bouton constitu dune image de fond assez grande et
dun champ de texte au milieu et que vous vouliez lanimer au passage de la souris. En
utilisant MOUSE_OVER et MOUSE_OUT, un vnement de type MOUSE_OVER se dclenchera
dabord lorsque la souris arrivera sur limage de fond. Mais si la souris passe ensuite
sur le champ de texte, un vnement de type MOUSE_OUT apparatra (la souris a quitt
la surface dun enfant du bouton) puis, immdiatement aprs, un autre vnement de
type MOUSE_OVER sera dclench (la souris arrive au-dessus du champ de texte) et viceversa. Cela nest pas vraiment optimal et cela peut provoquer des bugs danimation
pas trs agrables sur le bouton lorsque la souris passe dessus.
Si vous utilisez ROLL_OVER et ROLL_OUT, un vnement de type ROLL_OVER se dclenchera une seule fois lorsque la souris entrera sur la surface de limage de fond, mme
si la souris passe de limage au champ de texte. Enfin, un unique vnement de type
ROLL_OUT sera dclench lorsque la souris quittera limage de fond. En effet, les surfaces
de chaque enfant ne sont pas considres comme indpendantes : elles forment un tout
(la surface totale du bouton).
Quelques proprits utiles
La classe MouseEvent possde un certain nombre dattributs ou de proprits. En
voici quelques unes qui pourront vous tes trs utiles :
stageX : contient la position horizontale globale o sest produit lvnement.
stageY : contient la position verticale globale o sest produit lvnement.
localX : contient la position horizontale locale par rapport au conteneur parent o
sest produit lvnement.
localY : contient la position verticale locale par rapport au conteneur parent o sest
produit lvnement.
buttonDown : indique si le bouton est enfonc, principalement utile pour les vnements de type MOUSE_MOVE. 
altKey : indique si la touche Alt  est enfonce en parallle de lvnement de la
souris.


ctrlKey : indique si la touche Ctrl  (ou Cmd  pour les utilisateurs de Mac) est
enfonce en parallle de lvnement
 de la souris.
shiftKey : indique si la touche Shift est enfonce en parallle de lvnement de


la souris.
delta (uniquement pour les vnements de type MOUSE_WHEEL) : contient un entier
442

LA SOURIS
positif si la molette est dfile vers le haut, ngatif dans le cas contraire.
Les trois proprits altKey, ctrlKey et shiftKey sont uniquement des indicateurs permettant de dterminer si les touches correspondantes sont enfonces lors de la gnration de lvnement. Des actions sur ces boutons
nengendrent en aucun cas lmission dun objet MouseEvent.

Exemple : bouton simple


Pour illustrer ce que nous venons de voir, crons notre premier bouton ensemble ! Voici
le code crire pour le bouton :
1
2
3
4
5
6
7
8
9
10
11

// Bouton
var bouton : Sprite = new Sprite () ;
// Autorisation du double - clic
bouton . d oub le ClickEnabled = true ;
// Curseur de bouton ( g n ralement en forme de main )
bouton . buttonMode = true ;
bouton . useHandCursor = true ;
// Les enfants ne sont pas g r s par la souris afin qu ' ils n '
interf rent pas avec le curseur de la souris
// ( sinon le champ de texte pourrait annuler le curseur de
bouton )
bouton . mouseChildren = false ;
addChild ( bouton ) ;

12
13
14
15
16
17
18
19
20
21
22
23
24

// Texte
var texte : TextField = new TextField () ;
// Pour viter que le texte soit s lectionn
texte . selectable = false ;
// Taille automatique
texte . autoSize = TextFieldAutoSize . LEFT ;
// Format du texte
texte . de faultTextFormat = new TextFormat ( ' Arial ' , 32 , 0xffffff )
;
// Contenu
texte . text = " Je suis un bouton " ;
// Ajout du texte dans le bouton
bouton . addChild ( texte ) ;

25
26
27
28
29
30
31
32

// Fond bleu
var fond : Shape = new Shape () ;
// Ligne
fond . graphics . lineStyle (2 , 0x9999ff , 1 , true ) ;
// Remplissage
fond . graphics . beginFill ( 0x0000ff ) ;
// Dessin d ' un rectangle coins arrondis

443

CHAPITRE 22. INTERAGIR AVEC LUTILISATEUR


33
34
35

fond . graphics . drawRoundRect (0 , 0 , texte . width , texte . height , 12


);
// Ajout du fond bleu dans le bouton , en dessous du texte ( cad ,
l ' index 0 )
bouton . addChildAt ( fond , 0 ) ;

36
37
38
39

// Alignement du bouton au centre de la sc ne


bouton . x = ( stage . stageWidth - bouton . width ) / 2 ;
bouton . y = ( stage . stageHeight - bouton . height ) / 2 ;

Nous crons en premier lieu un sprite qui va reprsenter le bouton. On active le double
clic laide de lattribut doubleClickEnabled, puis on active le curseur de bouton (gnralement en forme de main) en mettant les attributs buttonMode et useHandCursor
true.
Pourquoi dsactiver la gestion de la souris sur les enfants du bouton ?

Si nous ne le faisons pas, le champ de texte aura le fcheux comportement de mal


faire fonctionner le curseur, qui sera remis en pointeur par dfaut (au lieu du curseur de bouton en forme de main). Ainsi, par scurit, il vaut mieux mettre lattribut
mouseChildren false pour les enfants soient plus directement grs par la souris.
Toutefois, ils comptent quand mme dans la surface totale du bouton.
Puis nous crons le champ de texte qui affichera ltiquette du bouton, suivie dun
dessin de rectangle arrondi bleu pour embellir tout ceci.
Ensuite, crivons les fonctions dcouteur qui nous permettront de tester diffrents
vnements de la souris :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Fonctions d ' couteurs


function onOver ( e : MouseEvent ) : void
{
trace ( " La souris est entr e au - dessus du
}
function onOut ( e : MouseEvent ) : void
{
trace ( " La souris n ' est plus au - dessus du
}
function onDown ( e : MouseEvent ) : void
{
trace ( " Le bouton gauche de la souris est
du bouton . " ) ;
}
function onUp ( e : MouseEvent ) : void
{
trace ( " Le bouton gauche de la souris est
du bouton . " ) ;
}
function onClick ( e : MouseEvent ) : void

444

bouton . " ) ;

bouton . " ) ;

enfonc au - dessus

rel ch au - dessus

LA SOURIS
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

trace ( " Le bouton a t cliqu . " ) ;


}
function onDoubleClick ( e : MouseEvent ) : void
{
trace ( " Le bouton a t double - cliqu . " ) ;
}
function onMiddleClick ( e : MouseEvent ) : void
{
trace ( " Le bouton a t cliqu milieu . " ) ;
}
function onRightClick ( e : MouseEvent ) : void
{
trace ( " Le bouton a t cliqu droit . " ) ;
}
function