Manuel du propriétaire | Adobe ActionScript 3.0 Manuel utilisateur

Ajouter à Mes manuels
1205 Des pages
Guide du d&eacute;veloppeur
d’ACTIONSCRIPT&reg; 3.0
Informations juridiques
Informations juridiques
Vous trouverez des informations juridiques &agrave; l’adresse http://help.adobe.com/fr_FR/legalnotices/index.html.
Derni&egrave;re mise &agrave; jour le 27/4/2013
iii
Sommaire
Chapitre 1 : Utilisation des dates et des heures
Gestion des dates calendaires et des heures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Contr&ocirc;le des intervalles temporels
..................................................................................... 4
Exemple de date et heure : horloge analogique simple
................................................................. 6
Chapitre 2 : Utilisation des cha&icirc;nes
Principes de base des cha&icirc;nes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Cr&eacute;ation de cha&icirc;nes
Propri&eacute;t&eacute; length
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Utilisation de caract&egrave;res dans des cha&icirc;nes
Comparaison de cha&icirc;nes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
R&eacute;cup&eacute;ration des repr&eacute;sentations de cha&icirc;ne d’autres objets
Concat&eacute;nation de cha&icirc;nes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Recherche de sous-cha&icirc;nes et de mod&egrave;les dans des cha&icirc;nes
Conversion de la casse dans des cha&icirc;nes
Exemple de cha&icirc;ne : ASCII Art
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Chapitre 3 : Utilisation de tableaux
Principes de base des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Tableaux index&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Tableaux associatifs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Tableaux multidimensionnels
Clonage de tableaux
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Extension de la classe Array
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Exemple de tableau : PlayList
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapitre 4 : Gestion des erreurs
Principes de base de la gestion des erreurs
Types d’erreurs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Gestion des erreurs dans ActionScript 3.0
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Utilisation des versions de d&eacute;bogage des moteurs d’ex&eacute;cution Flash
Gestion des erreurs synchrones dans une application
Cr&eacute;ation de classes d’erreur personnalis&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
R&eacute;ponse &agrave; des &eacute;v&eacute;nements et &agrave; l’&eacute;tat d’erreur
Comparaison des classes Error
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Exemple de gestion des erreurs : application CustomErrors
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Chapitre 5 : Utilisation d’expressions r&eacute;guli&egrave;res
Principes de base des expressions r&eacute;guli&egrave;res . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Syntaxe d’expression r&eacute;guli&egrave;re
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
M&eacute;thodes d’utilisation d’expressions r&eacute;guli&egrave;res avec des cha&icirc;nes
Exemple d’expression r&eacute;guli&egrave;re : analyseur Wiki
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Derni&egrave;re mise &agrave; jour le 27/4/2013
iv
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chapitre 6 : Utilisation de XML
Principes de base de XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Approche E4X concernant le traitement XML
Objets XML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Objets XMLList
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Initialisation de variables XML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Assemblage et transformation d’objets XML
Parcours de structures XML
Utilisation des espaces de noms XML
Conversion de type XML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Lecture de documents XML externes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Utilisation de XML dans un exemple ActionScript : chargement de donn&eacute;es RSS depuis Internet
. . . . . . . . . . . . . . . . . . . . . . . 118
Chapitre 7 : Utilisation de la fonctionnalit&eacute; JSON native
Pr&eacute;sentation de l’API JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
D&eacute;finition du comportement JSON personnalis&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Chapitre 8 : Gestion des &eacute;v&eacute;nements
Principes de base de la gestion des &eacute;v&eacute;nements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Variation de la gestion d’&eacute;v&eacute;nements dans ActionScript 3.0 par rapport aux versions ant&eacute;rieures
. . . . . . . . . . . . . . . . . . . . . . 131
Flux d’&eacute;v&eacute;nements
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Objets &eacute;v&eacute;nement
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Ecouteurs d’&eacute;v&eacute;nement
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Exemple de gestion des &eacute;v&eacute;nements : Alarm Clock
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Chapitre 9 : Utilisation de domaines d’application
Chapitre 10 : Programmation de l’affichage
Concepts fondamentaux de la programmation de l’affichage
Classes d’affichage de base
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Avantages de l’utilisation de la liste d’affichage
Utilisation des objets d’affichage
Orientation de la sc&egrave;ne
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Manipulation des objets d’affichage
Animation des objets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Chargement dynamique du contenu d’affichage
Exemple d’objet d’affichage : SpriteArranger
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Chapitre 11 : Utilisation de la g&eacute;om&eacute;trie
Principes de base de la g&eacute;om&eacute;trie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Utilisation des objets Point
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Utilisation des objets Rectangle
Utilisation des objets Matrix
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
Exemple de g&eacute;om&eacute;trie : application d’une transformation de matrice &agrave; un objet d’affichage
. . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Chapitre 12 : Utilisation de l’API de dessin
Principes de base de l’API de dessin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Classe Graphics
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Derni&egrave;re mise &agrave; jour le 27/4/2013
v
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Dessin de lignes et de courbes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Dessin de formes &agrave; l’aide des m&eacute;thodes int&eacute;gr&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Cr&eacute;ation de lignes et de remplissages en d&eacute;grad&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Utilisation de la classe Math avec les m&eacute;thodes de dessin
Animation avec l’API de dessin
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Exemple d’utilisation de l’API de dessin : g&eacute;n&eacute;rateur algorithmique d’effets visuels
Utilisation avanc&eacute;e de l’API de dessin
Chapitre 13 : Utilisation des images bitmap
Principes de base de l’utilisation des images bitmap
Classes Bitmap et BitmapData
Manipulation des pixels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Copie de donn&eacute;es bitmap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Compression des donn&eacute;es d’une image bitmap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Cr&eacute;ation de textures avec les fonctions de bruit al&eacute;atoire
D&eacute;filement du contenu d’images bitmap
Utilisation du mipmapping
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Exemple d’objet Bitmap : lune en rotation anim&eacute;e
D&eacute;codage asynchrone des images bitmap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Chapitre 14 : Filtrage des objets d’affichage
Principes de base du filtrage des objets d’affichage
Cr&eacute;ation et application de filtres
Filtres d’affichage disponibles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Exemple de filtrage des objets d’affichage : Filter Workbench
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302
Chapitre 15 : Utilisation des shaders de Pixel Bender
Principes de base des shaders de Pixel Bender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Chargement ou int&eacute;gration d’un shader
Acc&egrave;s aux m&eacute;tadonn&eacute;es du shader
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Sp&eacute;cification des valeurs des entr&eacute;es et des param&egrave;tres d’un shader
Utilisation d’un shader
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320
Chapitre 16 : Utilisation des clips
Principes de base des clips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Utilisation des objets MovieClip
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Contr&ocirc;le de la lecture d’un clip
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Cr&eacute;ation d’objets MovieClip &agrave; l’aide d’ActionScript
Chargement d’un fichier SWF externe
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Exemple de clip : RuntimeAssetsExplorer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Chapitre 17 : Utilisation des interpolations de mouvement
Principes de base des interpolations de mouvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Copie de scripts d’interpolation de mouvement dans Flash
Incorporation de scripts d’interpolation de mouvement
Description de l’animation
Ajout de filtres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Association d’une interpolation de mouvement &agrave; ses objets d’affichage
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Derni&egrave;re mise &agrave; jour le 27/4/2013
vi
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chapitre 18 : Utilisation de la cin&eacute;matique inverse
Principes de base de la cin&eacute;matique inverse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Aper&ccedil;u de l’animation de squelettes IK
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Obtention d’informations sur un squelette IK
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Instanciation de l’objet IKMover et restriction du mouvement
Mouvement d’un squelette IK
Utilisation de ressorts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Utilisation d’&eacute;v&eacute;nements IK
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Chapitre 19 : Travail en trois dimensions (3D)
Principes de base des objets d’affichage 3D . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Pr&eacute;sentation des objets d’affichage 3D dans les moteurs d’ex&eacute;cution de Flash Player et d’AIR
Cr&eacute;ation et d&eacute;placement d’objets d’affichage 3D
Projection d’objets 3D sur un affichage 2D
Exemple : Projection de perspective
Transformations 3D complexes
. . . . . . . . . . . . . . . . . . . . . . . . . . 363
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
Cr&eacute;ation d’effets 3D &agrave; l’aide de triangles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Chapitre 20 : Principes de base de l’utilisation du texte
Chapitre 21 : Utilisation de la classe TextField
Affichage du texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385
S&eacute;lection et manipulation de texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
Capture du texte saisi par l’utilisateur
Restriction de la saisie de texte
Mise en forme du texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Fonctions avanc&eacute;es d’affichage de texte
Utilisation du texte statique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399
Exemple TextField : mise en forme du texte dans le style &laquo; article de journal &raquo;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Chapitre 22 : Utilisation de Flash Text Engine
Cr&eacute;ation et affichage de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410
Gestion des &eacute;v&eacute;nements dans FTE
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Mise en forme du texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
Utilisation des polices
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
Contr&ocirc;le du texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Exemple d’utilisation de Flash Text Engine : mise en forme d’un article de journal
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431
Chapitre 23 : Utilisation de Text Layout Framework
Pr&eacute;sentation de Text Layout Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Utilisation de Text Layout Framework
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Structuration du texte &agrave; l’aide de TLF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446
Formatage du texte &agrave; l’aide de TLF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Importation et exportation de texte &agrave; l’aide de TLF
Gestion des conteneurs de texte &agrave; l’aide de TLF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Activation de la s&eacute;lection, de la modification et de l’annulation de texte &agrave; l’aide de TLF
Gestion des &eacute;v&eacute;nements &agrave; l’aide de TLF
Positionnement des images dans le texte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
Derni&egrave;re mise &agrave; jour le 27/4/2013
vii
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chapitre 24 : Utilisation du son
Principes de base de l’utilisation du son
Pr&eacute;sentation de l’architecture audio
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
Chargement de fichiers audio externes
Utilisation des sons int&eacute;gr&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 455
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460
Utilisation de fichiers audio de lecture en continu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Utilisation de donn&eacute;es audio g&eacute;n&eacute;r&eacute;es de fa&ccedil;on dynamique
Lecture de sons
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
S&eacute;curit&eacute; lors du chargement et de la lecture des sons
Contr&ocirc;le du volume du son et de la balance
Utilisation des m&eacute;tadonn&eacute;es audio
Acc&egrave;s aux donn&eacute;es audio brutes
Capture de l’entr&eacute;e de son
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
Exemple d’objet Sound : Podcast Player
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482
Chapitre 25 : Utilisation de la vid&eacute;o
Principes de base de la vid&eacute;o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Pr&eacute;sentation des formats vid&eacute;o
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490
Pr&eacute;sentation de la classe Video
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
Chargement de fichiers vid&eacute;o
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
Contr&ocirc;le de la lecture de la vid&eacute;o
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
Lecture de vid&eacute;os en mode plein &eacute;cran
Lecture de fichiers vid&eacute;o en flux continu
Pr&eacute;sentation des points de rep&egrave;re
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Ecriture de m&eacute;thodes de rappel pour les m&eacute;tadonn&eacute;es et les points de rep&egrave;re
Utilisation des points de rep&egrave;re et des m&eacute;tadonn&eacute;es
Gestion de l’activit&eacute; de l’objet NetStream
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
Rubriques avanc&eacute;es relatives aux fichiers vid&eacute;o
Exemple vid&eacute;o : Video Jukebox
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523
Pr&eacute;sentation &agrave; acc&eacute;l&eacute;ration mat&eacute;rielle par le biais de la classe StageVideo
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528
Chapitre 26 : Utilisation de cam&eacute;ras
Pr&eacute;sentation de la classe Camera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537
Affichage du contenu de la cam&eacute;ra
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
Conception d’une application g&eacute;rant une cam&eacute;ra locale
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
Etablissement d’une connexion avec la cam&eacute;ra de l’utilisateur
V&eacute;rification de la pr&eacute;sence de cam&eacute;ras
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
D&eacute;tection de l’autorisation d’acc&eacute;der &agrave; la cam&eacute;ra
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540
Optimisation de la qualit&eacute; des vid&eacute;os de la cam&eacute;ra
Gestion de l’&eacute;tat de la cam&eacute;ra
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Chapitre 27 : Utilisation de la gestion des droits d’auteur num&eacute;riques (DRM)
Pr&eacute;sentation du flux de travail associ&eacute; au contenu prot&eacute;g&eacute; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546
Membres et &eacute;v&eacute;nements DRM de la classe NetStream
Utilisation de la classe DRMStatusEvent
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Utilisation de la classe DRMAuthenticateEvent
Utilisation de la classe DRMErrorEvent
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559
Derni&egrave;re mise &agrave; jour le 27/4/2013
viii
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Utilisation de la classe DRMManager
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Utilisation de la classe DRMContentData
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561
Mise &agrave; jour de Flash Player en vue de prendre en charge Adobe Access
Licences hors bande
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563
Prise en charge de domaine
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Lecture de contenu chiffr&eacute; &agrave; l’aide de la prise en charge de domaine
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Aper&ccedil;u de la licence
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Diffusion de contenu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566
Open Source Media Framework
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567
Chapitre 28 : Ajout d’un contenu PDF dans AIR
D&eacute;tection des capacit&eacute;s PDF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569
Chargement du contenu PDF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570
Programmation du contenu PDF
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Limites connues pour du contenu PDF dans AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572
Chapitre 29 : Principes de base de l’interaction utilisateur
Capture des entr&eacute;es utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574
Gestion de la cible d’action
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
D&eacute;couverte des types de saisie
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576
Chapitre 30 : Saisie au clavier
Capture de la saisie au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578
Utilisation de la classe IME
Claviers virtuels
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585
Chapitre 31 : Entr&eacute;es de souris
Capture des entr&eacute;es de souris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593
Exemple d’entr&eacute;e de souris : WordSearch
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596
Chapitre 32 : Saisie tactile, multipoint et par mouvement
Principes de base de la saisie tactile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601
D&eacute;couverte de la prise en charge des actions tactiles
Gestion des &eacute;v&eacute;nements tactiles
Toucher-glisser
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 608
Gestion des &eacute;v&eacute;nements de mouvement
R&eacute;solution des probl&egrave;mes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613
Chapitre 33 : Op&eacute;ration de copier-coller
Principes de base de l’op&eacute;ration de copier-coller
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616
Lecture en provenance et &eacute;criture &agrave; destination du Presse-papiers du syst&egrave;me
Op&eacute;ration copier-coller HTML dans AIR
Formats de donn&eacute;es Clipboard
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 617
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619
Chapitre 34 : Saisie via un acc&eacute;l&eacute;rom&egrave;tre
V&eacute;rification de la prise en charge de l’acc&eacute;l&eacute;rom&egrave;tre
D&eacute;tection des changements de l’acc&eacute;l&eacute;rom&egrave;tre
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627
Derni&egrave;re mise &agrave; jour le 27/4/2013
ix
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chapitre 35 : Op&eacute;ration glisser-d&eacute;poser dans AIR
Principes de base des op&eacute;rations glisser-d&eacute;poser dans AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
Prise en charge du mouvement de glissement vers l’ext&eacute;rieur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Prise en charge du mouvement de glissement vers l’int&eacute;rieur
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634
Op&eacute;ration glisser-d&eacute;poser dans HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637
Glissement des donn&eacute;es hors d’un &eacute;l&eacute;ment HTML
Glissement de donn&eacute;es dans un &eacute;l&eacute;ment HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641
Exemple : Annulation du comportement de glissement vers l’int&eacute;rieur HTML par d&eacute;faut
Gestion des d&eacute;p&ocirc;ts de fichier dans un sandbox HTML hors application
D&eacute;p&ocirc;t de fichiers promis
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645
Chapitre 36 : Utilisation des menus
Principes de base des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654
Cr&eacute;ation de menus natifs (AIR)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661
A propos des menus contextuels dans un contenu HTML (AIR)
Affichage de menus natifs en incrustation (AIR)
Gestion des &eacute;v&eacute;nements de menu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664
Exemple de menu natif : menu de fen&ecirc;tre et d’application (AIR)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666
Chapitre 37 : Ic&ocirc;nes de la barre des t&acirc;ches dans AIR
A propos des ic&ocirc;nes de la barre des t&acirc;ches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670
Ic&ocirc;nes du Dock
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671
Ic&ocirc;nes de la barre d’&eacute;tat syst&egrave;me
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672
Ic&ocirc;nes et boutons de la barre des t&acirc;ches de la fen&ecirc;tre
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Chapitre 38 : Utilisation du syst&egrave;me de fichiers
Utilisation de la classe FileReference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676
Utilisation de l’interface de programmation du syst&egrave;me de fichiers AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691
Chapitre 39 : Stockage des donn&eacute;es locales
Objets partag&eacute;s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728
Stockage local chiffr&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 737
Chapitre 40 : Utilisation des bases de donn&eacute;es SQL locales dans AIR
A propos des bases de donn&eacute;es SQL locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741
Cr&eacute;ation et modification d’une base de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 746
Manipulation des donn&eacute;es de bases de donn&eacute;es SQL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 753
Utilisation des op&eacute;rations de base de donn&eacute;es synchrones et asynchrones
Utilisation du chiffrement avec les bases de donn&eacute;es SQL
Strat&eacute;gies d’utilisation des bases de donn&eacute;es SQL
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 782
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805
Chapitre 41 : Utilisation de tableaux d’octets
Lecture et &eacute;criture d’un objet ByteArray . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 808
Exemple ByteArray : lecture d’un fichier .zip
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 814
Chapitre 42 : Principes de base de la mise en r&eacute;seau et de la communication
Interfaces r&eacute;seau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822
Changements de connectivit&eacute; r&eacute;seau
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 823
Enregistrements DNS (Domain Name System)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 826
Derni&egrave;re mise &agrave; jour le 27/4/2013
x
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chapitre 43 : Sockets
Sockets TCP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 828
Sockets UDP (AIR)
Adresses IPv6
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 839
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 841
Chapitre 44 : Communications HTTP
Chargement de donn&eacute;es externes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 843
Requ&ecirc;tes de service Web
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 852
Ouverture d’une URL dans une autre application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 860
Chapitre 45 : Communications avec d’autres occurrences de Flash Player et d’AIR
A propos de la classe LocalConnection
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 862
Envoi de messages entre deux applications
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 864
Connexion au contenu dans des domaines diff&eacute;rents et aux applications AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 866
Chapitre 46 : Communication avec les processus natifs dans AIR
Pr&eacute;sentation des communications avec les processus natifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 869
Lancement et fermeture d’un processus natif
Communications avec un processus natif
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 870
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 871
Consid&eacute;rations li&eacute;es &agrave; la s&eacute;curit&eacute; qui affectent les communications avec le processus natif
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 872
Chapitre 47 : Utilisation de l’API externe
Principes de base de l’utilisation de l’API externe
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 874
Avantages de l’API externe et conditions requises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 877
Utilisation de la classe ExternalInterface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 878
Exemple d’API externe : communications entre ActionScript et JavaScript dans un navigateur Web
. . . . . . . . . . . . . . . . . . . . 882
Chapitre 48 : Validation des signatures XML dans AIR
Bases de la validation des signatures XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 888
A propos des signatures XML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 893
Impl&eacute;mentation de l’interface IURIDereferencer
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 895
Chapitre 49 : Environnement du syst&egrave;me client
Principes de base de l’environnement du syst&egrave;me client
Utilisation de la classe System
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 903
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904
Utilisation de la classe Capabilities
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 905
Exemple d’utilisation de Capabilities : d&eacute;tection des capacit&eacute;s du syst&egrave;me
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906
Chapitre 50 : Appel et fermeture d’une application AIR
Appel d’une application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 910
Capture des arguments de ligne de commande
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 912
Appel d’une application AIR lors de la connexion d’un utilisateur
Appel d’une application AIR &agrave; partir du navigateur
Fermeture d’une application
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 915
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 918
Chapitre 51 : Utilisation des informations sur le moteur d’ex&eacute;cution d’AIR et les syst&egrave;mes d’exploitation
Gestion des associations de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 920
Lecture de la version du moteur d’ex&eacute;cution et du correctif
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 921
Derni&egrave;re mise &agrave; jour le 27/4/2013
xi
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
D&eacute;tection des capacit&eacute;s d’AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 921
Suivi de la pr&eacute;sence des utilisateurs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 922
Chapitre 52 : Utilisation des fen&ecirc;tres natives AIR
Principes de base des fen&ecirc;tres natives dans AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 923
Cr&eacute;ation de fen&ecirc;tres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 931
Gestion des fen&ecirc;tres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 940
Ecoute des &eacute;v&eacute;nements d’une fen&ecirc;tre
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 951
Affichage des fen&ecirc;tres en mode plein &eacute;cran
Chapitre 53 : Ecrans dans AIR
Principes de base des &eacute;crans dans AIR
D&eacute;nombrement des &eacute;crans
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 954
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 955
Chapitre 54 : Impression
Principes de base de l’impression
Impression d’une page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 952
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 958
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 959
T&acirc;ches des moteurs d’ex&eacute;cution de Flash et impression syst&egrave;me
D&eacute;finition de la taille, de l’&eacute;chelle et de l’orientation
Techniques d’impression avanc&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 960
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 963
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 965
Exemple d’impression : impression de plusieurs pages
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 967
Exemple d’impression : mise &agrave; l’&eacute;chelle, recadrage et ajustement
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 969
Exemple d’impression : options d’impression et de mise en page
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 971
Chapitre 55 : Geolocation
D&eacute;tection des changements de g&eacute;olocalisation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 974
Chapitre 56 : Internationalisation des applications
Principes de base de l’internationalisation des applications
Pr&eacute;sentation du package flash.globalization
Identification des param&egrave;tres r&eacute;gionaux
Formatage des nombres
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 978
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 979
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 981
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 982
Formatage des valeurs en devise
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 985
Formatage des dates et heures
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 987
Tri et comparaison des cha&icirc;nes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 989
Conversion de la casse
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 990
Exemple : Internationalisation d’une application de suivi des stocks
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 991
Chapitre 57 : Localisation d’applications
Choix d’un jeu de param&egrave;tres r&eacute;gionaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996
Localisation de contenu Flex
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997
Localisation du contenu Flash
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997
Localisation d’applications AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 997
Localisation des dates, heures et devises
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 998
Chapitre 58 : A propos de l’environnement HTML
Pr&eacute;sentation de l’environnement HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1000
AIR et WebKit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1003
Derni&egrave;re mise &agrave; jour le 27/4/2013
xii
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chapitre 59 : Programmation HTML et JavaScript dans AIR
A propos de la classe HTMLLoader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1019
Contournement des erreurs JavaScript li&eacute;es &agrave; la s&eacute;curit&eacute;
Acc&egrave;s aux classes de l’API AIR &agrave; partir de JavaScript
A propos des URL dans AIR
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1021
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1026
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1027
Mise des objets ActionScript &agrave; disposition de JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1028
Acc&egrave;s au DOM HTML et aux objets JavaScript &agrave; partir d’ActionScript
Int&eacute;gration d’un contenu SWF en HTML
Utilisation des biblioth&egrave;ques ActionScript au sein d’une page HTML
Conversion des objets Date et RegExp
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1030
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1031
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1034
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1036
Manipulation d’une feuille de style HTML &agrave; partir d’ActionScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1036
Programmation crois&eacute;e du contenu dans des sandbox de s&eacute;curit&eacute; distincts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1038
Chapitre 60 : Programmation du conteneur HTML d’AIR &agrave; l’aide de scripts
Affichage des propri&eacute;t&eacute;s des objets HTMLLoader
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1043
D&eacute;filement du contenu HTML
Acc&egrave;s &agrave; l’historique de HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1046
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1047
Param&eacute;trage de l’agent d’utilisateur employ&eacute; lors du chargement du contenu HTML
Param&eacute;trage du codage des caract&egrave;res &agrave; utiliser pour le contenu HTML
Param&eacute;trage des interfaces utilisateur de type navigateur pour un contenu HTML
Cr&eacute;ation de sous-classes de la classe HTMLLoader
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1048
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1048
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1049
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1060
Chapitre 61 : Gestion des &eacute;v&eacute;nements HTML dans AIR
Ev&eacute;nements HTMLLoader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1062
Gestion des &eacute;v&eacute;nements DOM avec ActionScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063
R&eacute;ponse aux exceptions JavaScript non intercept&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1063
Gestion des &eacute;v&eacute;nements d’ex&eacute;cution avec JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1065
Chapitre 62 : Affichage de contenu HTML dans une application mobile
Objets StageWebView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1068
Contenu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1069
Ev&eacute;nements de navigation
Historique
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1070
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1071
Cible d’action
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072
Capture d’image bitmap
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074
Chapitre 63 : Utilisation de programmes de travail &agrave; des fins de simultan&eacute;it&eacute;
Pr&eacute;sentation des programmes de travail et de la simultan&eacute;it&eacute; . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1076
Cr&eacute;ation et gestion de programmes de travail
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1077
Communication entre programmes de travail
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1080
Chapitre 64 : S&eacute;curit&eacute;
Pr&eacute;sentation de la s&eacute;curit&eacute; sur la plate-forme Flash
Sandbox de s&eacute;curit&eacute;
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1085
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1087
Contr&ocirc;les des autorisations
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1091
Restriction des API de r&eacute;seau
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1100
S&eacute;curit&eacute; du mode plein &eacute;cran
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1102
S&eacute;curit&eacute; du mode interactif plein &eacute;cran
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1103
Derni&egrave;re mise &agrave; jour le 27/4/2013
xiii
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Sommaire
Chargement de contenu
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1104
Programmation crois&eacute;e
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1107
Acc&egrave;s aux m&eacute;dias charg&eacute;s comme s’il s’agissait de donn&eacute;es
Chargement des donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1113
Chargement de contenu incorpor&eacute; &agrave; partir de fichiers SWF import&eacute;s dans un domaine de s&eacute;curit&eacute;
Utilisation de contenus existants
D&eacute;finition des autorisations LocalConnection
Contr&ocirc;le de l’acc&egrave;s URL externe
Objets partag&eacute;s
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1118
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1118
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1120
Acc&egrave;s &agrave; la cam&eacute;ra, au microphone, au Presse-papiers, &agrave; la souris et au clavier
S&eacute;curit&eacute; AIR
. . . . . . . . . . . . . . . . . . . . 1117
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1117
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1122
Chapitre 65 : Utilisation des exemples de code ActionScript
Types d’exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1145
Ex&eacute;cution d’exemples ActionScript 3.0 dans Flash Professional
Ex&eacute;cution d’exemples ActionScript 3.0 dans Flash Builder
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1147
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1148
Ex&eacute;cution d’exemples ActionScript 3.0 sur un p&eacute;riph&eacute;rique mobile
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1150
Chapitre 66 : Prise en charge de SQL dans les bases de donn&eacute;es locales
Syntaxe SQL prise en charge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1155
Prise en charge des types de donn&eacute;es
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1177
Chapitre 67 : ID, arguments et messages d’erreur SQL d&eacute;taill&eacute;s
Chapitre 68 : AGAL (Adobe Graphics Assembly Language)
Pseudo-code binaire AGAL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1188
Derni&egrave;re mise &agrave; jour le 27/4/2013
1
Chapitre 1 : Utilisation des dates et des
heures
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Si la ponctualit&eacute; ne fait pas tout, elle n’en est pas moins un facteur cl&eacute; des applications logicielles. ActionScript 3.0
propose diff&eacute;rentes m&eacute;thodes de gestion des dates calendaires, des heures et des intervalles temporels. Deux classes
principales assurent l’essentiel de la fonctionnalit&eacute; temporelle : la classe Date et la nouvelle classe Timer du package
flash.utils.
Les dates et les heures constituent un type d’informations courant utilis&eacute; dans les programmes ActionScript. Par
exemple, vous pouvez, entre autres, conna&icirc;tre la date du jour ou calculer combien de temps un utilisateur passe sur un
&eacute;cran particulier. Dans ActionScript, vous pouvez utiliser la classe Date pour repr&eacute;senter un moment unique dans le
temps, y compris des informations de date et d’heure. Une occurrence de Date contient des valeurs pour les unit&eacute;s de
date et d’heure individuelles (ann&eacute;e, mois, date, jour de la semaine, heure, minutes, secondes, millisecondes et fuseau
horaire, par exemple). Pour des utilisations plus avanc&eacute;es, ActionScript comprend &eacute;galement la classe Timer que vous
pouvez utiliser pour effectuer des actions apr&egrave;s un certain d&eacute;lai ou &agrave; des intervalles r&eacute;p&eacute;t&eacute;s.
Voir aussi
Date
flash.utils.Timer
Gestion des dates calendaires et des heures
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans ActionScript 3.0, toutes les fonctions de gestion des dates calendaires et des heures se concentrent autour de la
classe de niveau sup&eacute;rieur Date. Cette classe contient des m&eacute;thodes et des propri&eacute;t&eacute;s qui vous permettent de manier
les dates et les heures soit selon le mod&egrave;le universel coordonn&eacute; (UTC, Universal Time Coordinated), soit selon le
fuseau horaire consid&eacute;r&eacute;. L’UTC est une d&eacute;finition normalis&eacute;e du temps qui correspond essentiellement &agrave; l’heure du
m&eacute;ridien de Greenwich (GMT, Greenwich Mean Time).
Cr&eacute;ation d’objets Date
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Date compte l’une des m&eacute;thodes constructeur les plus polyvalentes de toutes les classes de base. Vous pouvez
l’invoquer de quatre mani&egrave;res diff&eacute;rentes.
Primo, si aucun param&egrave;tre n’est fourni, le constructeur Date() renvoie un objet Date contenant la date et l’heure locale
actuelle de votre fuseau horaire. Exemple :
var now:Date = new Date();
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
Secundo, si un param&egrave;tre num&eacute;rique unique est fourni, le constructeur Date() le consid&egrave;re comme le nombre de
millisecondes &eacute;coul&eacute;es depuis le 1er janvier 1970 et renvoie l’objet Date correspondant. Notez que la valeur en
millisecondes que vous transmettez est consid&eacute;r&eacute;e comme le nombre de millisecondes depuis le 1er janvier 1970 en
temps UTC. Toutefois, l’objet Date affiche des valeurs dans votre fuseau horaire local, sauf si vous utilisez des
m&eacute;thodes UTC uniquement pour les extraire et les afficher. Si vous cr&eacute;ez un nouvel objet Date &agrave; l’aide du param&egrave;tre
en millisecondes, veillez &agrave; tenir compte du d&eacute;calage horaire entre votre fuseau local et le temps UTC. Les instructions
ci-apr&egrave;s cr&eacute;ent un objet Date d&eacute;fini &agrave; minuit le 1er janvier 1970 en temps UTC :
var millisecondsPerDay:int = 1000 * 60 * 60 * 24;
// gets a Date one day after the start date of 1/1/1970
var startTime:Date = new Date(millisecondsPerDay);
Tertio, vous pouvez transmettre plusieurs param&egrave;tres num&eacute;riques au constructeur Date(). Celui-ci les traite
respectivement comme la date, le mois, le jour, les heures, les minutes, les secondes et les millisecondes, et renvoie un
objet Date correspondant. Les param&egrave;tres indiqu&eacute;s sont consid&eacute;r&eacute;s comme correspondant &agrave; l’heure locale plut&ocirc;t qu’au
temps UTC. Les instructions suivantes &eacute;tablissent un objet Date d&eacute;fini &agrave; minuit le 1er janvier 2000, dans le fuseau
horaire local :
var millenium:Date = new Date(2000, 0, 1, 0, 0, 0, 0);
Quarto, vous pouvez transmettre un param&egrave;tre num&eacute;rique unique au constructeur Date(). Celui-ci essaiera
d’analyser cette cha&icirc;ne en composants de date et heure, et de renvoyer un objet Date correspondant. Si vous choisissez
cette approche, il est recommand&eacute; d’inclure le constructeur Date() dans un bloc try..catch afin d’intercepter toute
erreur d’analyse. Le constructeur Date() g&egrave;re plusieurs formats de cha&icirc;ne (dont la liste figure dans le manuel Guide
de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash). L’instruction suivante initialise un nouvel objet Date
&agrave; l’aide d’une valeur cha&icirc;ne :
var nextDay:Date = new Date(&quot;Mon May 1 2006 11:30:00 AM&quot;);
Si le constructeur Date() ne peut analyser le param&egrave;tre cha&icirc;ne, il ne d&eacute;clenche pas d’exception. Cependant, l’objet
Date r&eacute;sultant contiendra une valeur date incorrecte.
Obtention des valeurs d’unit&eacute;s temporelles
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez extraire les valeurs de plusieurs unit&eacute;s temporelles au sein de l’objet Date gr&acirc;ce &agrave; des propri&eacute;t&eacute;s ou des
m&eacute;thodes de la classe Date. Chacune des propri&eacute;t&eacute;s suivantes fournit la valeur d’une unit&eacute; temporelle de l’objet Date :
• La propri&eacute;t&eacute;
fullYear
• La propri&eacute;t&eacute;
month au format num&eacute;rique : de 0 pour janvier &agrave; 11 pour d&eacute;cembre
• La propri&eacute;t&eacute; date, qui correspond au num&eacute;ro calendaire du jour du mois, de 1 &agrave; 31
• La propri&eacute;t&eacute; day, qui correspond au jour de la semaine au format num&eacute;rique, 0 repr&eacute;sentant dimanche
• La propri&eacute;t&eacute; hours, de 0 &agrave; 23
• La propri&eacute;t&eacute; minutes
• La propri&eacute;t&eacute; seconds
• La propri&eacute;t&eacute; milliseconds
La classe Date offre en fait plusieurs mani&egrave;res d’obtenir ces valeurs. Vous pouvez par exemple obtenir la valeur
month de l’objet Date de quatre mani&egrave;res :
• La propri&eacute;t&eacute; month
Derni&egrave;re mise &agrave; jour le 27/4/2013
2
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
• La m&eacute;thode getMonth()
• La propri&eacute;t&eacute; monthUTC
• La m&eacute;thode getMonthUTC()
Ces quatre solutions sont d’une efficacit&eacute; &eacute;quivalente, vous pouvez donc adopter celle qui convient le mieux &agrave; votre
application.
Les propri&eacute;t&eacute;s r&eacute;pertori&eacute;es ci-dessus repr&eacute;sentent toutes des composants de la valeur date totale. Par exemple, la
propri&eacute;t&eacute; milliseconds ne sera jamais sup&eacute;rieure &agrave; 999, puisque si elle atteint 1000, la valeur seconds augmente de
1, la propri&eacute;t&eacute; milliseconds se remet &agrave; z&eacute;ro.
Si vous voulez obtenir la valeur de l’objet Date en millisecondes depuis le 1er janvier 1970 (UTC), vous pouvez
utiliser la m&eacute;thode getTime(). La m&eacute;thode setTime(), quant &agrave; elle, vous permet de modifier la valeur d’un objet
Date existant en millisecondes depuis le 1er janvier 1970 (UTC).
Op&eacute;rations arithm&eacute;tiques sur la date et l’heure
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Date permet d’additionner et de soustraire des dates et heures. Les valeurs Date sont conserv&eacute;es en interne
sous forme de millisecondes. Il est donc n&eacute;cessaire de convertir les autres valeurs en millisecondes avant de les ajouter
ou de les soustraire aux objets Date.
Si votre application doit effectuer de nombreuses op&eacute;rations arithm&eacute;tiques sur les dates et heures, il peut s’av&eacute;rer utile
de cr&eacute;er des constantes qui conservent les valeurs d’unit&eacute;s temporelles courantes en millisecondes, comme illustr&eacute; ciapr&egrave;s :
public static const millisecondsPerMinute:int = 1000 * 60;
public static const millisecondsPerHour:int = 1000 * 60 * 60;
public static const millisecondsPerDay:int = 1000 * 60 * 60 * 24;
Il devient alors simple d’effectuer des op&eacute;rations arithm&eacute;tiques &agrave; l’aide des unit&eacute;s temporelles standard. Le code ciapr&egrave;s d&eacute;cale la valeur date d’une heure par rapport &agrave; l’heure actuelle &agrave; l’aide des m&eacute;thodes getTime() et setTime() :
var oneHourFromNow:Date = new Date();
oneHourFromNow.setTime(oneHourFromNow.getTime() + millisecondsPerHour);
Une autre mani&egrave;re de d&eacute;finir une valeur date consiste &agrave; cr&eacute;er un objet Date &agrave; l’aide d’un seul param&egrave;tre en
millisecondes. Par exemple, le code suivant ajoute 30 jours &agrave; une date pour en calculer une autre :
// sets the invoice date to today's date
var invoiceDate:Date = new Date();
// adds 30 days to get the due date
var dueDate:Date = new Date(invoiceDate.getTime() + (30 * millisecondsPerDay));
La constante millisecondsPerDay est ensuite multipli&eacute;e par 30 pour repr&eacute;senter la p&eacute;riode de 30 jours et le r&eacute;sultat
est ajout&eacute; &agrave; la valeur invoiceDate afin de d&eacute;finir la valeur dueDate.
Derni&egrave;re mise &agrave; jour le 27/4/2013
3
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
Conversion entre plusieurs fuseaux horaires
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les op&eacute;rations arithm&eacute;tiques sur les dates et heures sont particuli&egrave;rement pratiques lorsque vous devez convertir des
dates d’un fuseau horaire &agrave; un autre. Tel est le r&ocirc;le de la m&eacute;thode getTimezoneOffset(), qui renvoie la valeur (en
minutes) de d&eacute;calage entre le fuseau horaire de l’objet Date et le temps UTC. La valeur renvoy&eacute;e s’exprime en minutes
parce que tous les fuseaux horaires ne correspondent pas &agrave; une heure ; certains sont d&eacute;cal&eacute;s d’une demi-heure par
rapport aux fuseaux voisins.
L’exemple suivant utilise le d&eacute;calage de fuseau horaire pour convertir une date &agrave; partir de l’heure locale en temps UTC.
La conversion s’effectue tout d’abord par calcul de la valeur du fuseau horaire en millisecondes, puis par ajustement
de la valeur Date selon ce montant :
// creates a Date in local time
var nextDay:Date = new Date(&quot;Mon May 1 2006 11:30:00 AM&quot;);
// converts the Date to UTC by adding or subtracting the time zone offset
var offsetMilliseconds:Number = nextDay.getTimezoneOffset() * 60 * 1000;
nextDay.setTime(nextDay.getTime() + offsetMilliseconds);
Contr&ocirc;le des intervalles temporels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous d&eacute;veloppez des applications &agrave; l’aide d’Adobe Flash CS4 Professional, vous avez acc&egrave;s au sc&eacute;nario, qui
fournit une progression constante, image par image, au sein de votre application. Toutefois, dans un projet purement
ActionScript, vous devez compter sur d’autres m&eacute;canismes temporels.
Boucles ou minuteurs ?
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans certains langages de programmation, vous devez mettre au point des motifs temporels &agrave; l’aide d’instructions en
boucle telles que for ou do..while.
Les instructions en boucle s’ex&eacute;cutent en g&eacute;n&eacute;ral aussi vite que la machine locale le permet, ce qui signifie que
l’application sera plus rapide sur certaines machines que sur d’autres. Si votre application doit b&eacute;n&eacute;ficier d’un
intervalle temporel coh&eacute;rent, vous devez l’associer &agrave; un calendrier ou une horloge r&eacute;els. Bien des applications, telles
que les jeux, les animations, les contr&ocirc;leurs en temps r&eacute;el, n&eacute;cessitent des m&eacute;canismes de d&eacute;compte temporel qui
soient coh&eacute;rents d’une machine &agrave; l’autre.
La classe Timer d’ActionScript 3.0 offre une solution performante dans ce domaine. Gr&acirc;ce au mod&egrave;le d’&eacute;v&eacute;nements
ActionScript 3.0, la classe Timer distribue des &eacute;v&eacute;nements Timer d&egrave;s qu’un intervalle sp&eacute;cifi&eacute; est atteint.
La classe Timer
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour la gestion des fonctions temporelles dans ActionScript 3.0, il est recommand&eacute; d’utiliser la classe Timer
(flash.utils.Timer), qui permet de distribuer des &eacute;v&eacute;nements d&egrave;s qu’un intervalle est atteint.
Derni&egrave;re mise &agrave; jour le 27/4/2013
4
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
Pour lancer un minuteur, vous devez d’abord cr&eacute;er une occurrence de la classe Timer et lui indiquer &agrave; quelle fr&eacute;quence
elle doit g&eacute;n&eacute;rer un &eacute;v&eacute;nement Timer et combien de fois elle doit le faire avant de s’arr&ecirc;ter.
Par exemple, le code suivant cr&eacute;e une occurrence de Timer qui distribue un &eacute;v&eacute;nement toutes les secondes pendant 60
secondes :
var oneMinuteTimer:Timer = new Timer(1000, 60);
L’objet Timer distribue un objet TimerEvent chaque fois que l’intervalle donn&eacute; est atteint. Le type d’&eacute;v&eacute;nement de
l’objet TimerEvent est timer (d&eacute;fini par la constante TimerEvent.TIMER). Un objet TimerEvent contient les m&ecirc;mes
propri&eacute;t&eacute;s que l’objet standard Event.
Si l’occurrence de Timer pr&eacute;voit un nombre fixe d’intervalles, elle distribue &eacute;galement un &eacute;v&eacute;nement timerComplete
(d&eacute;fini par la constante TimerEvent.TIMER_COMPLETE) lorsqu’elle atteint l’intervalle final.
Voici un court exemple d’application illustrant la classe Timer en action :
package
{
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class ShortTimer extends Sprite
{
public function ShortTimer()
{
// creates a new five-second Timer
var minuteTimer:Timer = new Timer(1000, 5);
// designates listeners for the interval and completion events
minuteTimer.addEventListener(TimerEvent.TIMER, onTick);
minuteTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
// starts the timer ticking
minuteTimer.start();
}
public function onTick(event:TimerEvent):void
{
// displays the tick count so far
// The target of this event is the Timer instance itself.
trace(&quot;tick &quot; + event.target.currentCount);
}
public function onTimerComplete(event:TimerEvent):void
{
trace(&quot;Time's Up!&quot;);
}
}
}
Lorsque la classe ShortTimer est cr&eacute;&eacute;e, elle g&eacute;n&egrave;re une occurrence de Timer qui marque chaque seconde pendant cinq
secondes. Elle ajoute alors deux &eacute;couteurs au minuteur : un qui &eacute;coute chaque d&eacute;compte et un qui &eacute;coute l’&eacute;v&eacute;nement
timerComplete.
Elle lance ensuite le d&eacute;compte du minuteur et &agrave; partir de l&agrave;, la m&eacute;thode onTick() s’ex&eacute;cute toutes les secondes.
Derni&egrave;re mise &agrave; jour le 27/4/2013
5
6
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
La m&eacute;thode onTick() affiche simplement le nombre actuel de tics. Apr&egrave;s cinq secondes, la m&eacute;thode
onTimerComplete() s’ex&eacute;cute et vous avertit que le temps est &eacute;coul&eacute;.
Si vous ex&eacute;cutez cet exemple, vous devriez voir les lignes suivantes s’afficher dans votre console ou fen&ecirc;tre de suivi &agrave;
raison d’une ligne par seconde :
tick 1
tick 2
tick 3
tick 4
tick 5
Time's Up!
Fonctions temporelles du package flash.utils
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 contient un certain nombre de fonctions temporelles similaires &agrave; celles qui &eacute;taient disponibles dans
ActionScript 2.0. Ces fonctions sont fournies au niveau du package dans le package flash.utils et elles fonctionnent de
la m&ecirc;me mani&egrave;re que dans ActionScript 2.0.
Fonction
Description
clearInterval(id:uint):void
Annule un appel de setInterval() sp&eacute;cifi&eacute;.
clearTimeout(id:uint):void
Annule un appel de setTimeout() sp&eacute;cifi&eacute;.
getTimer():int
Renvoie le nombre de millisecondes qui se sont &eacute;coul&eacute;es depuis l’initialisation
d’Adobe&reg; Flash&reg; Player ou d’Adobe&reg; AIR™.
setInterval(closure:Function,
delay:Number, ... arguments):uint
Ex&eacute;cute une fonction &agrave; fr&eacute;quence d&eacute;finie (intervalle exprim&eacute; en millisecondes).
setTimeout(closure:Function,
delay:Number, ... arguments):uint
Ex&eacute;cute une fonction sp&eacute;cifi&eacute;e apr&egrave;s un d&eacute;lai sp&eacute;cifi&eacute; (en millisecondes).
Ces fonctions demeurent dans ActionScript 3.0 afin d’assurer la compatibilit&eacute; avec les versions ant&eacute;rieures. Adobe ne
recommande pas leur utilisation dans les nouvelles applications ActionScript 3.0. Il est en g&eacute;n&eacute;ral plus simple et plus
efficace d’utiliser la classe Timer.
Exemple de date et heure : horloge analogique simple
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un exemple d’horloge analogique simple illustre ces deux concepts de date et heure :
• Obtention de la date et de l’heure actuelle et extraction des valeurs heures, minutes et secondes
• Utilisation d’une horloge pour fixer le rythme d’une application
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application SimpleClock se trouvent
dans le dossier Samples/SimpleClock. L’application se compose des fichiers suivants :
Derni&egrave;re mise &agrave; jour le 27/4/2013
7
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
Fichier
Description
SimpleClockApp.mxml
Fichier d’application principal dans Flash (FLA) ou Flex
(MXML).
ou
SimpleClockApp.fla
com/example/programmingas3/simpleclock/SimpleClock.as
Fichier d’application principal.
com/example/programmingas3/simpleclock/AnalogClockFace.as
Dessine un cadran d’horloge rond et les aiguilles des heures,
des minutes et des secondes en fonction de l’heure.
D&eacute;finition de la classe SimpleClock
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Si l’exemple d’horloge est simple, il est toujours judicieux de bien organiser les applications de mani&egrave;re &agrave; faciliter leur
extension future. Dans ce but, l’application SimpleClock utilise la classe SimpleClock pour g&eacute;rer les t&acirc;ches de
d&eacute;marrage et de mesure temporelle. Elle se sert ensuite d’une autre classe, AnalogClockFace, pour l’affichage r&eacute;el de
l’heure.
Voici le code qui d&eacute;finit et initialise la classe SimpleClock (vous remarquerez que dans la version Flash, SimpleClock
&eacute;tend la classe Sprite &agrave; la place) :
public class SimpleClock extends UIComponent
{
/**
* The time display component.
*/
private var face:AnalogClockFace;
/**
* The Timer that acts like a heartbeat for the application.
*/
private var ticker:Timer;
Cette classe poss&egrave;de deux propri&eacute;t&eacute;s importantes :
• La propri&eacute;t&eacute; face, qui correspond &agrave; une occurrence de la classe AnalogClockFace
• La propri&eacute;t&eacute; ticker, qui est une occurrence de la classe Timer
La classe SimpleClock utilise un constructeur par d&eacute;faut. La m&eacute;thode initClock() se charge de la v&eacute;ritable
configuration, en cr&eacute;ant le cadran et en lan&ccedil;ant le d&eacute;compte de l’occurrence de Timer.
Cr&eacute;ation du cadran
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les lignes suivantes du code SimpleClock cr&eacute;ent le cadran utilis&eacute; pour afficher l’heure :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
/**
* Sets up a SimpleClock instance.
*/
public function initClock(faceSize:Number = 200)
{
// creates the clock face and adds it to the display list
face = new AnalogClockFace(Math.max(20, faceSize));
face.init();
addChild(face);
// draws the initial clock display
face.draw();
La taille de l’horloge peut &ecirc;tre transmise &agrave; la m&eacute;thode initClock(). Si aucune valeur faceSize n’est transmise, la
taille par d&eacute;faut de 200 pixels est utilis&eacute;e.
L’application initialise ensuite l’horloge et l’ajoute &agrave; la liste d’affichage &agrave; l’aide de la m&eacute;thode addChild() h&eacute;rit&eacute;e de la
classe DisplayObjectContainer. Elle appelle enfin la m&eacute;thode AnalogClockFace.draw() pour afficher une fois le
cadran, qui indique l’heure actuelle.
Lancement du minuteur
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Une fois le cadran cr&eacute;&eacute;, la m&eacute;thode initClock() d&eacute;finit le minuteur :
// creates a Timer that fires an event once per second
ticker = new Timer(1000);
// designates the onTick() method to handle Timer events
ticker.addEventListener(TimerEvent.TIMER, onTick);
// starts the clock ticking
ticker.start();
Cette m&eacute;thode commence par instancier une occurrence de Timer qui va distribuer un &eacute;v&eacute;nement par seconde (toutes
les 1 000 millisecondes). Comme le constructeur Timer() ne re&ccedil;oit pas de second param&egrave;tre repeatCount, l’horloge
se reproduit ind&eacute;finiment.
La m&eacute;thode SimpleClock.onTick() s’ex&eacute;cute une fois par seconde apr&egrave;s r&eacute;ception de l’&eacute;v&eacute;nement timer :
public function onTick(event:TimerEvent):void
{
// updates the clock display
face.draw();
}
La m&eacute;thode AnalogClockFace.draw() dessine simplement le cadran de l’horloge et des aiguilles.
Derni&egrave;re mise &agrave; jour le 27/4/2013
8
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des dates et des heures
Affichage de l’heure actuelle
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La plupart du code de la classe AnalogClockFace implique la d&eacute;finition des &eacute;l&eacute;ments d’affichage du cadran. Lors de
son initialisation, AnalogClockFace dessine un contour circulaire, place des libell&eacute;s num&eacute;riques pour chaque heure,
puis cr&eacute;e trois objets Shape, un pour l’aiguille des heures, un pour celle des minutes et un pour l’aiguille des secondes
de l’horloge.
Lorsque l’application SimpleClock s’ex&eacute;cute, elle appelle la m&eacute;thode AnalogClockFace.draw() toutes les secondes,
comme suit :
/**
* Called by the parent container when the display is being drawn.
*/
public override function draw():void
{
// stores the current date and time in an instance variable
currentTime = new Date();
showTime(currentTime);
}
Cette m&eacute;thode enregistre l’heure actuelle dans une variable, pour que l’heure ne puisse changer pendant le dessin des
aiguilles de l’horloge. Elle appelle ensuite la m&eacute;thode showTime() pour afficher les aiguilles, comme illustr&eacute; ci-apr&egrave;s :
/**
* Displays the given Date/Time in that good old analog clock style.
*/
public function showTime(time:Date):void
{
// gets the time values
var seconds:uint = time.getSeconds();
var minutes:uint = time.getMinutes();
var hours:uint = time.getHours();
// multiplies by 6 to get degrees
this.secondHand.rotation = 180 + (seconds * 6);
this.minuteHand.rotation = 180 + (minutes * 6);
// Multiply by 30 to get basic degrees, then
// add up to 29.5 degrees (59 * 0.5)
// to account for the minutes.
this.hourHand.rotation = 180 + (hours * 30) + (minutes * 0.5);
}
Tout d’abord, cette m&eacute;thode extrait les valeurs des heures, des minutes et des secondes pour l’heure actuelle. Elle utilise
ensuite ces valeurs pour calculer l’angle de chaque aiguille. Comme l’aiguille des secondes effectue une rotation
compl&egrave;te en 60 secondes, elle tourne de 6 degr&eacute;s par seconde (360/60). L’aiguille des minutes pivote selon le m&ecirc;me
angle chaque minute.
L’aiguille des heures se met &agrave; jour toutes les minutes &eacute;galement et doit donc progresser &agrave; chaque minute. Elle tourne
de 30 degr&eacute;s toutes les heures (360/12), mais pivote &eacute;galement d’un demi-degr&eacute; toutes les minutes (30 degr&eacute;s divis&eacute;s
par 60 minutes).
Derni&egrave;re mise &agrave; jour le 27/4/2013
9
10
Chapitre 2 : Utilisation des cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe String contient des m&eacute;thodes qui vous permettent de manipuler des cha&icirc;nes de texte. Les cha&icirc;nes s’utilisent
avec de nombreux objets. Les m&eacute;thodes d&eacute;crites ci-apr&egrave;s permettent de manipuler les cha&icirc;nes utilis&eacute;es dans des objets
tels que TextField, StaticText, XML, ContextMenu et FileReference.
Les cha&icirc;nes sont des s&eacute;ries de caract&egrave;res. ActionScript 3.0 prend en charge les caract&egrave;res ASCII et Unicode.
Voir aussi
String
RegExp
parseFloat()
parseInt()
Principes de base des cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour les programmeurs, une &laquo; cha&icirc;ne &raquo; est un texte, une suite de lettres, chiffres ou autres caract&egrave;res qui se suivent et
forment une unit&eacute; repr&eacute;sent&eacute;e par une valeur. Par exemple, la ligne de code suivante cr&eacute;e une variable ayant le type de
donn&eacute;es String (cha&icirc;ne) et affecte une valeur de cha&icirc;ne litt&eacute;rale &agrave; cette variable :
var albumName:String = &quot;Three for the money&quot;;
Comme le montre cet exemple, ActionScript permet de d&eacute;limiter une valeur cha&icirc;ne en enfermant du texte entre des
guillemets droits doubles ou simples. Voici d’autres exemples de cha&icirc;nes :
&quot;Hello&quot;
&quot;555-7649&quot;
&quot;http://www.adobe.com/&quot;
Lorsque vous manipulez un fragment de texte en ActionScript, vous utilisez une valeur cha&icirc;ne. La classe String
d’ActionScript est le type de donn&eacute;es qui permet de travailler avec du texte. Des occurrences de cha&icirc;nes sont
fr&eacute;quemment utilis&eacute;es pour des propri&eacute;t&eacute;s, des param&egrave;tres de m&eacute;thodes, etc., dans de nombreuses autres classes en
ActionScript.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs aux cha&icirc;nes :
ASCII Syst&egrave;me de codage permettant de repr&eacute;senter du texte sous forme de caract&egrave;res et symboles dans les
programmes informatiques. Le syst&egrave;me ASCII g&egrave;re les 26 lettres de l’alphabet latin, plus un nombre limit&eacute; de
caract&egrave;res suppl&eacute;mentaires.
Caract&egrave;re Unit&eacute; de base d’un texte (lettre ou symbole).
Concat&eacute;nation Ajout bout &agrave; bout de plusieurs valeurs de cha&icirc;ne pour en cr&eacute;er une nouvelle.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
Cha&icirc;ne vide Cha&icirc;ne qui ne contient rien: ni texte, ni espace, ni autre caract&egrave;re, repr&eacute;sent&eacute;e par &quot;&quot;. Une cha&icirc;ne vide
n’est pas la m&ecirc;me chose qu’une variable ayant une valeur nulle (null) : celle-ci est une variable &agrave; laquelle aucune
occurrence de l’objet String n’est affect&eacute;e, alors qu’une cha&icirc;ne vide est une occurrence dont la valeur ne contient aucun
caract&egrave;re.
String Valeur textuelle (s&eacute;quence de caract&egrave;res).
Litt&eacute;ral (ou &laquo; litt&eacute;ral de cha&icirc;ne &raquo;) Valeur cha&icirc;ne &eacute;crite explicitement en code, sous forme de valeur texte encadr&eacute;e par
des guillemets droits simples ou doubles.
Sous-cha&icirc;ne D&eacute;finit une cha&icirc;ne qui fait partie d’une autre cha&icirc;ne.
Unicode Syst&egrave;me standardis&eacute; de codage permettant de repr&eacute;senter du texte sous forme de caract&egrave;res et symboles dans
les programmes informatiques. Le syst&egrave;me Unicode permet d’utiliser la totalit&eacute; des caract&egrave;res de toutes les langues
&eacute;crites existantes.
Cr&eacute;ation de cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe String permet de repr&eacute;senter des donn&eacute;es de cha&icirc;ne (texte) en ActionScript 3.0. Les cha&icirc;nes ActionScript
prennent en charge les caract&egrave;res ASCII et Unicode. La meilleure fa&ccedil;on de cr&eacute;er une cha&icirc;ne est d’utiliser un litt&eacute;ral de
cha&icirc;ne. Pour d&eacute;clarer un litt&eacute;ral de cha&icirc;ne, utilisez les guillemets droits doubles (&quot;) ou les guillemets droits simples (').
Par exemple, les deux cha&icirc;nes suivantes sont &eacute;quivalentes :
var str1:String = &quot;hello&quot;;
var str2:String = 'hello';
Vous pouvez &eacute;galement d&eacute;clarer une cha&icirc;ne &agrave; l’aide de l’op&eacute;rateur new, comme suit :
var str1:String = new String(&quot;hello&quot;);
var str2:String = new String(str1);
var str3:String = new String();
// str3 == &quot;&quot;
Les deux cha&icirc;nes suivantes sont &eacute;quivalentes :
var str1:String = &quot;hello&quot;;
var str2:String = new String(&quot;hello&quot;);
Pour utiliser des guillemets droits simples (') dans un litt&eacute;ral de cha&icirc;ne d&eacute;limit&eacute; par des guillemets droits simples ('),
utilisez le caract&egrave;re d’&eacute;chappement (\). De m&ecirc;me, pour utiliser des guillemets droits doubles ('') dans un litt&eacute;ral de
cha&icirc;ne d&eacute;limit&eacute; par des guillemets droits doubles (''), utilisez le caract&egrave;re d’&eacute;chappement (\). Les deux cha&icirc;nes
suivantes sont &eacute;quivalentes :
var str1:String = &quot;That's \&quot;A-OK\&quot;&quot;;
var str2:String = 'That\'s &quot;A-OK&quot;';
Vous pouvez utiliser des guillemets simples ou des guillemets doubles en fonction de ceux qui existent dans un litt&eacute;ral
de cha&icirc;ne, comme dans l’exemple suivant :
var str1:String = &quot;ActionScript &lt;span class='heavy'&gt;3.0&lt;/span&gt;&quot;;
var str2:String = '&lt;item id=&quot;155&quot;&gt;banana&lt;/item&gt;';
Rappelons qu’ActionScript fait la distinction entre les guillemets droits simples (') et les guillemets simples gauches
ou droits (' ou ' ). Il en est de m&ecirc;me pour les guillemets doubles. Utilisez des guillemets droits pour d&eacute;limiter des
litt&eacute;raux de cha&icirc;ne. Lorsque vous collez du texte dans ActionScript depuis une autre source, utilisez les caract&egrave;res
corrects.
Derni&egrave;re mise &agrave; jour le 27/4/2013
11
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
Comme indiqu&eacute; dans le tableau suivant, vous pouvez utiliser le caract&egrave;re d’&eacute;chappement (\) pour d&eacute;finir d’autres
caract&egrave;res dans des litt&eacute;raux de cha&icirc;ne :
S&eacute;quence
d’&eacute;chappement
Caract&egrave;re
\b
Retour arri&egrave;re
\f
Changement de page
\n
Nouvelle ligne
\r
Retour chariot
\t
Tabulation
\unnnn
Caract&egrave;re Unicode dont le code de caract&egrave;re est sp&eacute;cifi&eacute; par le nombre hexad&eacute;cimal nnnn ; par
exemple, \u263a est le caract&egrave;re smiley.
\\xnn
Caract&egrave;re ASCII dont le code est sp&eacute;cifi&eacute; par le nombre hexad&eacute;cimal nn.
\'
Guillemet droit simple
\&quot;
Guillemet droit double
\\
Barre oblique inverse
Propri&eacute;t&eacute; length
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Chaque cha&icirc;ne poss&egrave;de une propri&eacute;t&eacute; length correspondant au nombre de caract&egrave;res qu’elle contient:
var str:String = &quot;Adobe&quot;;
trace(str.length);
// output: 5
Une cha&icirc;ne vide et une cha&icirc;ne null ont toutes deux une longueur de 0, comme l’indique l’exemple suivant :
var str1:String = new String();
trace(str1.length);
// output: 0
str2:String = '';
trace(str2.length);
// output: 0
Utilisation de caract&egrave;res dans des cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Chaque caract&egrave;re d’une cha&icirc;ne poss&egrave;de une position d’index dans la cha&icirc;ne (un entier). La position d’index du premier
caract&egrave;re est 0. Par exemple, dans la cha&icirc;ne suivante, le caract&egrave;re y occupe la position 0 et le caract&egrave;re w occupe la
position 5 :
&quot;yellow&quot;
Vous pouvez examiner des caract&egrave;res individuels &agrave; diff&eacute;rentes positions d’une cha&icirc;ne &agrave; l’aide des m&eacute;thodes charAt()
et charCodeAt(), comme dans l’exemple suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
12
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
var str:String = &quot;hello world!&quot;;
for (var i:int = 0; i &lt; str.length; i++)
{
trace(str.charAt(i), &quot;-&quot;, str.charCodeAt(i));
}
Lorsque vous ex&eacute;cutez ce code, vous obtenez le r&eacute;sultat suivant :
h
e
l
l
o
w
o
r
l
d
!
- 104
- 101
- 108
- 108
- 111
32
- 119
- 111
- 114
- 108
- 100
- 33
Vous pouvez &eacute;galement utiliser des codes de caract&egrave;re pour d&eacute;finir une cha&icirc;ne &agrave; l’aide de la m&eacute;thode
fromCharCode(), comme l’indique l’exemple suivant :
var myStr:String = String.fromCharCode(104,101,108,108,111,32,119,111,114,108,100,33);
// Sets myStr to &quot;hello world!&quot;
Comparaison de cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser les op&eacute;rateurs suivants pour comparer des cha&icirc;nes : &lt;, &lt;=, !=, ==, =&gt; et &gt;. Vous pouvez utiliser ces
op&eacute;rateurs avec des instructions conditionnelles (if et while, par exemple) comme l’indique l’exemple suivant :
var str1:String = &quot;Apple&quot;;
var str2:String = &quot;apple&quot;;
if (str1 &lt; str2)
{
trace(&quot;A &lt; a, B &lt; b, C &lt; c, ...&quot;);
}
Lorsque vous utilisez ces op&eacute;rateurs avec des cha&icirc;nes, ActionScript consid&egrave;re la valeur du code de chaque caract&egrave;re
dans la cha&icirc;ne, en comparant les caract&egrave;res de gauche &agrave; droite, comme indiqu&eacute; ci-dessous :
trace(&quot;A&quot; &lt; &quot;B&quot;); // true
trace(&quot;A&quot; &lt; &quot;a&quot;); // true
trace(&quot;Ab&quot; &lt; &quot;az&quot;); // true
trace(&quot;abc&quot; &lt; &quot;abza&quot;); // true
Utilisez les op&eacute;rateurs == et != pour comparer des cha&icirc;nes entre elles et pour comparer des cha&icirc;nes avec d’autres types
d’objets, comme l’indique l’exemple suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
13
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
var str1:String = &quot;1&quot;;
var str1b:String = &quot;1&quot;;
var str2:String = &quot;2&quot;;
trace(str1 == str1b); // true
trace(str1 == str2); // false
var total:uint = 1;
trace(str1 == total); // true
R&eacute;cup&eacute;ration des repr&eacute;sentations de cha&icirc;ne d’autres
objets
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez obtenir une repr&eacute;sentation de cha&icirc;ne de n’importe quel type d’objet. Tous les objets disposent en effet
d’une m&eacute;thode toString() :
var n:Number = 99.47;
var str:String = n.toString();
// str == &quot;99.47&quot;
Lorsque vous utilisez l’op&eacute;rateur de concat&eacute;nation + avec une combinaison d’objet String et d’objets qui ne sont pas
des cha&icirc;nes, vous n’avez pas besoin d’utiliser la m&eacute;thode toString(). Pour plus d’informations sur la concat&eacute;nation,
voir la section suivante.
La fonction globale String() renvoie la m&ecirc;me valeur pour un objet donn&eacute; que la valeur renvoy&eacute;e par l’objet appelant
la m&eacute;thode toString().
Concat&eacute;nation de cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La concat&eacute;nation de cha&icirc;nes consiste &agrave; prendre deux cha&icirc;nes et &agrave; les combiner en une seule cha&icirc;ne de fa&ccedil;on
s&eacute;quentielle. Par exemple, vous pouvez utiliser l’op&eacute;rateur + pour concat&eacute;ner deux cha&icirc;nes :
var str1:String = &quot;green&quot;;
var str2:String = &quot;ish&quot;;
var str3:String = str1 + str2; // str3 == &quot;greenish&quot;
Vous pouvez &eacute;galement utiliser l’op&eacute;rateur += pour obtenir le m&ecirc;me r&eacute;sultat, comme dans l’exemple suivant :
var str:String = &quot;green&quot;;
str += &quot;ish&quot;; // str == &quot;greenish&quot;
En outre, la classe String comprend la m&eacute;thode concat(), utilisable comme suit :
var str1:String = &quot;Bonjour&quot;;
var str2:String = &quot;from&quot;;
var str3:String = &quot;Paris&quot;;
var str4:String = str1.concat(&quot; &quot;, str2, &quot; &quot;, str3);
// str4 == &quot;Bonjour from Paris&quot;
Si vous utilisez l’op&eacute;rateur + (ou l’op&eacute;rateur +=) avec un objet String et un objet qui n’est pas une cha&icirc;ne, ActionScript
convertit automatiquement ce dernier en un objet String afin d’&eacute;valuer l’expression, comme indiqu&eacute; dans l’exemple :
Derni&egrave;re mise &agrave; jour le 27/4/2013
14
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
var str:String = &quot;Area = &quot;;
var area:Number = Math.PI * Math.pow(3, 2);
str = str + area; // str == &quot;Area = 28.274333882308138&quot;
N&eacute;anmoins, vous pouvez utiliser des parenth&egrave;ses pour le regroupement afin de fournir un contexte &agrave; l’op&eacute;rateur +,
comme indiqu&eacute; dans l’exemple suivant :
trace(&quot;Total: $&quot; + 4.55 + 1.45); // output: Total: $4.551.45
trace(&quot;Total: $&quot; + (4.55 + 1.45)); // output: Total: $6
Recherche de sous-cha&icirc;nes et de mod&egrave;les dans des
cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les sous-cha&icirc;nes sont des caract&egrave;res cons&eacute;cutifs &agrave; l’int&eacute;rieur d’une cha&icirc;ne. La cha&icirc;ne &quot;abc&quot;, par exemple, contient les
sous-cha&icirc;nes suivantes : &quot;&quot;, &quot;a&quot;, &quot;ab&quot;, &quot;abc&quot;, &quot;b&quot;, &quot;bc&quot;, &quot;c&quot;. Vous pouvez utiliser des m&eacute;thodes ActionScript pour
localiser les sous-cha&icirc;nes d’une cha&icirc;ne.
Les mod&egrave;les sont d&eacute;finis en ActionScript par des cha&icirc;nes ou par des expressions r&eacute;guli&egrave;res. Par exemple, l’expression
r&eacute;guli&egrave;re suivante d&eacute;finit un mod&egrave;le sp&eacute;cifique, les lettres A, B, et C suivies d’un chiffre (les barres de fraction sont des
d&eacute;limiteurs d’expression r&eacute;guli&egrave;re) :
/ABC\d/
ActionScript comporte des m&eacute;thodes servant &agrave; rechercher des mod&egrave;les dans des cha&icirc;nes et &agrave; remplacer les
correspondances trouv&eacute;es par des sous-cha&icirc;nes de substitution. Ces m&eacute;thodes sont d&eacute;crites dans les sections suivantes.
Les expressions r&eacute;guli&egrave;res peuvent d&eacute;finir des mod&egrave;les compliqu&eacute;s. Pour plus d’informations, voir &laquo; Utilisation
d’expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 78.
Recherche d’une sous-cha&icirc;ne par la position d’un caract&egrave;re
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les m&eacute;thodes substr() et substring() sont similaires. Elles renvoient toutes les deux une sous-cha&icirc;ne d’une cha&icirc;ne.
Elles prennent deux param&egrave;tres. Dans les deux m&eacute;thodes, le premier param&egrave;tre est la position du caract&egrave;re initial dans
la cha&icirc;ne concern&eacute;e. Toutefois, dans la m&eacute;thode substr(), le deuxi&egrave;me param&egrave;tre est la longueur de la sous-cha&icirc;ne &agrave;
renvoyer, alors que dans la m&eacute;thode substring(), le deuxi&egrave;me param&egrave;tre est la position du caract&egrave;re final de la souscha&icirc;ne (qui ne figure pas dans la cha&icirc;ne renvoy&eacute;e). Cet exemple illustre la diff&eacute;rence entre ces deux m&eacute;thodes :
var str:String = &quot;Hello from Paris, Texas!!!&quot;;
trace(str.substr(11,15)); // output: Paris, Texas!!!
trace(str.substring(11,15)); // output: Pari
La m&eacute;thode slice() fonctionne de la m&ecirc;me fa&ccedil;on que la m&eacute;thode substring(). Lorsque deux nombres entiers non
n&eacute;gatifs sont pass&eacute;s en param&egrave;tres, son fonctionnement est identique. N&eacute;anmoins, la m&eacute;thode slice() peut recevoir
des entiers n&eacute;gatifs comme param&egrave;tres. Dans ce cas, la position des caract&egrave;res est compt&eacute;e &agrave; partir de la fin de la cha&icirc;ne,
comme dans l’exemple suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
15
16
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
var str:String = &quot;Hello from Paris,
trace(str.slice(11,15)); // output:
trace(str.slice(-3,-1)); // output:
trace(str.slice(-3,26)); // output:
trace(str.slice(-3,str.length)); //
trace(str.slice(-8,-3)); // output:
Texas!!!&quot;;
Pari
!!
!!!
output: !!!
Texas
Vous pouvez associer des entiers positifs et n&eacute;gatifs comme param&egrave;tres de la m&eacute;thode slice().
Recherche de la position des caract&egrave;res d’une sous-cha&icirc;ne correspondante
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser les m&eacute;thodes indexOf() et lastIndexOf() pour localiser des sous-cha&icirc;nes correspondantes au
sein d’une cha&icirc;ne, comme dans l’exemple suivant :
var str:String = &quot;The moon, the stars, the sea, the land&quot;;
trace(str.indexOf(&quot;the&quot;)); // output: 10
La m&eacute;thode indexOf() est sensible &agrave; la casse.
Vous pouvez sp&eacute;cifier un deuxi&egrave;me param&egrave;tre pour indiquer la position de l’index dans la cha&icirc;ne &agrave; partir de laquelle
commencer la recherche, comme suit :
var str:String = &quot;The moon, the stars, the sea, the land&quot;
trace(str.indexOf(&quot;the&quot;, 11)); // output: 21
La m&eacute;thode lastIndexOf() trouve la derni&egrave;re occurrence d’une sous-cha&icirc;ne dans la cha&icirc;ne :
var str:String = &quot;The moon, the stars, the sea, the land&quot;
trace(str.lastIndexOf(&quot;the&quot;)); // output: 30
Si vous incluez un deuxi&egrave;me param&egrave;tre avec la m&eacute;thode lastIndexOf(), la recherche est effectu&eacute;e &agrave; l’envers &agrave; partir
de cette position d’index dans la cha&icirc;ne (de droite &agrave; gauche) :
var str:String = &quot;The moon, the stars, the sea, the land&quot;
trace(str.lastIndexOf(&quot;the&quot;, 29)); // output: 21
Cr&eacute;ation d’un tableau de sous-cha&icirc;nes segment&eacute; par un d&eacute;limiteur
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser la m&eacute;thode split() pour cr&eacute;er un tableau de sous-cha&icirc;nes divis&eacute; en fonction d’un caract&egrave;re
d&eacute;limiteur. Par exemple, vous pouvez segmenter une cha&icirc;ne s&eacute;par&eacute;e par des virgules ou des tabulations en plusieurs
cha&icirc;nes.
L’exemple suivant indique comment diviser un tableau en sous-cha&icirc;nes avec le caract&egrave;re esperluette (&amp;) comme
d&eacute;limiteur :
var queryStr:String = &quot;first=joe&amp;last=cheng&amp;title=manager&amp;StartDate=3/6/65&quot;;
var params:Array = queryStr.split(&quot;&amp;&quot;, 2); // params == [&quot;first=joe&quot;,&quot;last=cheng&quot;]
Le deuxi&egrave;me param&egrave;tre de la m&eacute;thode split() (qui est facultatif) d&eacute;finit la taille maximale du tableau renvoy&eacute;.
Vous pouvez &eacute;galement utiliser une expression r&eacute;guli&egrave;re comme caract&egrave;re d&eacute;limiteur :
var str:String = &quot;Give me\t5.&quot;
var a:Array = str.split(/\s+/); // a == [&quot;Give&quot;,&quot;me&quot;,&quot;5.&quot;]
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
Pour plus d’informations, voir &laquo; Utilisation d’expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 78 et le manuel Guide de r&eacute;f&eacute;rence
ActionScript 3.0 pour la plate-forme Adobe Flash.
Recherche de mod&egrave;les dans des cha&icirc;nes et remplacement de sous-cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe String comprend les m&eacute;thodes suivantes pour utiliser des mod&egrave;les dans des cha&icirc;nes :
• Utilisez les m&eacute;thodes match() et search() pour localiser des sous-cha&icirc;nes qui correspondent &agrave; un mod&egrave;le.
• Utilisez la m&eacute;thode replace() pour rechercher des sous-cha&icirc;nes qui correspondent &agrave; un mod&egrave;le et les remplacer
par une sous-cha&icirc;ne sp&eacute;cifi&eacute;e.
Ces m&eacute;thodes sont d&eacute;crites dans les sections suivantes.
Vous pouvez utiliser des cha&icirc;nes ou des expressions r&eacute;guli&egrave;res pour d&eacute;finir des mod&egrave;les utilis&eacute;s dans ces m&eacute;thodes.
Pour plus d’informations sur les expressions r&eacute;guli&egrave;res, voir &laquo; Utilisation d’expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 78.
Recherche de sous-cha&icirc;nes correspondantes
La m&eacute;thode search() renvoie la position de l’index de la premi&egrave;re sous-cha&icirc;ne qui correspond &agrave; un mod&egrave;le donn&eacute;,
comme illustr&eacute; dans cet exemple :
var str:String = &quot;The more the merrier.&quot;;
// (This search is case-sensitive.)
trace(str.search(&quot;the&quot;)); // output: 9
Vous pouvez &eacute;galement utiliser des expressions r&eacute;guli&egrave;res pour d&eacute;finir le mod&egrave;le pour lequel &eacute;tablir une
correspondance, comme illustr&eacute; dans cet exemple :
var pattern:RegExp = /the/i;
var str:String = &quot;The more the merrier.&quot;;
trace(str.search(pattern)); // 0
Le r&eacute;sultat de la m&eacute;thode trace() est 0, car le premier caract&egrave;re dans la cha&icirc;ne est la position de l’index 0. L’indicateur
i est d&eacute;fini dans l’expression r&eacute;guli&egrave;re. Par cons&eacute;quent, la recherche n’est pas sensible &agrave; la casse.
La m&eacute;thode search() trouve une seule correspondance et renvoie sa position d’index de d&eacute;but, m&ecirc;me si l’indicateur
g (global) est d&eacute;fini dans l’expression r&eacute;guli&egrave;re.
L’exemple suivant pr&eacute;sente une expression r&eacute;guli&egrave;re plus compliqu&eacute;e qui correspond &agrave; une cha&icirc;ne dans des guillemets
doubles :
var pattern:RegExp = /&quot;[^&quot;]*&quot;/;
var str:String = &quot;The \&quot;more\&quot; the merrier.&quot;;
trace(str.search(pattern)); // output: 4
str = &quot;The \&quot;more the merrier.&quot;;
trace(str.search(pattern)); // output: -1
// (Indicates no match, since there is no closing double quotation mark.)
La m&eacute;thode match() fonctionne de fa&ccedil;on similaire. Elle recherche une sous-cha&icirc;ne correspondante. N&eacute;anmoins,
lorsque vous utilisez l’indicateur global dans un mod&egrave;le d’expression r&eacute;guli&egrave;re (comme dans l’exemple suivant),
match() renvoie un tableau de sous-cha&icirc;nes correspondantes :
var str:String = &quot;bob@example.com, omar@example.org&quot;;
var pattern:RegExp = /\w*@\w*\.[org|com]+/g;
var results:Array = str.match(pattern);
Derni&egrave;re mise &agrave; jour le 27/4/2013
17
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
Le tableau results est d&eacute;fini comme suit :
[&quot;bob@example.com&quot;,&quot;omar@example.org&quot;]
Pour plus d’informations sur les expressions r&eacute;guli&egrave;res, voir &laquo; Utilisation d’expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 78.
Remplacement de sous-cha&icirc;nes mises en correspondance
Vous pouvez utiliser la m&eacute;thode replace() pour rechercher un mod&egrave;le sp&eacute;cifi&eacute; dans une cha&icirc;ne et remplacer les
correspondances par la cha&icirc;ne de remplacement sp&eacute;cifi&eacute;e, comme illustr&eacute; dans l’exemple suivant :
var str:String = &quot;She sells seashells by the seashore.&quot;;
var pattern:RegExp = /sh/gi;
trace(str.replace(pattern, &quot;sch&quot;)); //sche sells seaschells by the seaschore.
Dans cet exemple, les cha&icirc;nes mises en correspondance ne sont pas sensibles &agrave; la casse car l’indicateur i (ignoreCase)
est d&eacute;fini dans l’expression r&eacute;guli&egrave;re, et plusieurs correspondances sont remplac&eacute;es car l’indicateur g (global) est
d&eacute;fini. Pour plus d’informations, voir &laquo; Utilisation d’expressions r&eacute;guli&egrave;res &raquo; &agrave; la page 78.
Vous pouvez inclure les codes de remplacement $ suivants dans la cha&icirc;ne de remplacement. Le texte de remplacement
indiqu&eacute; dans le tableau suivant est ins&eacute;r&eacute; &agrave; la place du code de remplacement $ :
Code $
Texte de remplacement
$$
$
$&amp;
Sous-cha&icirc;ne correspondante.
$`
Partie de la cha&icirc;ne qui pr&eacute;c&egrave;de la sous-cha&icirc;ne correspondante. Ce code utilise les guillemets simples droits gauches
(`) et non les guillemets simples droits (') ni les guillemets simples anglais gauches (' ).
$'
Partie de la cha&icirc;ne qui suit la sous-cha&icirc;ne correspondante. Ce code utilise les guillemets simples droits (' ).
$n
ni&egrave;me groupe entre parenth&egrave;ses correspondant captur&eacute;, o&ugrave; n est un chiffre compris entre 1 et 9 et $n n’est pas suivi
d’une d&eacute;cimale.
$nn
nni&egrave;me groupe entre parenth&egrave;ses correspondant captur&eacute;, o&ugrave; nn est un nombre d&eacute;cimal &agrave; deux chiffres compris
entre 01 et 99. Si la nni&egrave;me capture n’est pas d&eacute;finie, le texte de remplacement est une cha&icirc;ne vide.
L’exemple suivant illustre l’utilisation des codes de remplacement $2 et $1, qui repr&eacute;sentent le premier et le deuxi&egrave;me
groupes captur&eacute;s correspondants :
var str:String = &quot;flip-flop&quot;;
var pattern:RegExp = /(\w+)-(\w+)/g;
trace(str.replace(pattern, &quot;$2-$1&quot;)); // flop-flip
Vous pouvez &eacute;galement utiliser une fonction comme deuxi&egrave;me param&egrave;tre de la m&eacute;thode replace(). Le texte
correspondant est remplac&eacute; par la valeur renvoy&eacute;e de la fonction.
Derni&egrave;re mise &agrave; jour le 27/4/2013
18
19
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
var str:String = &quot;Now only $9.95!&quot;;
var price:RegExp = /\$([\d,]+.\d+)+/i;
trace(str.replace(price, usdToEuro));
function usdToEuro(matchedSubstring:String, capturedMatch1:String,
str:String):String
{
var usd:String = capturedMatch1;
usd = usd.replace(&quot;,&quot;, &quot;&quot;);
var exchangeRate:Number = 0.853690;
var euro:Number = parseFloat(usd) * exchangeRate;
const euroSymbol:String = String.fromCharCode(8364);
return euro.toFixed(2) + &quot; &quot; + euroSymbol;
}
index:int,
Lorsque vous utilisez une fonction comme deuxi&egrave;me param&egrave;tre de la m&eacute;thode replace(), les arguments suivants sont
transmis &agrave; la fonction :
• La partie correspondante de la cha&icirc;ne.
• Tout groupe entre parenth&egrave;ses captur&eacute; correspondant. Le nombre d’arguments transmis de cette fa&ccedil;on varie selon
le nombre de correspondances entre parenth&egrave;ses. Pour d&eacute;terminer le nombre de correspondances entre
parenth&egrave;ses, v&eacute;rifiez arguments.length - 3 dans le code de la fonction.
• La position d’index dans la cha&icirc;ne o&ugrave; d&eacute;bute la correspondance.
• La cha&icirc;ne compl&egrave;te.
Conversion de la casse dans des cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Comme illustr&eacute; dans l’exemple suivant, les m&eacute;thodes toLowerCase() et toUpperCase() convertissent les caract&egrave;res
alphab&eacute;tiques de la cha&icirc;ne en minuscule et en majuscule, respectivement :
var str:String = &quot;Dr. Bob Roberts, #9.&quot;
trace(str.toLowerCase()); // dr. bob roberts, #9.
trace(str.toUpperCase()); // DR. BOB ROBERTS, #9.
Une fois que ces m&eacute;thodes sont ex&eacute;cut&eacute;es, la cha&icirc;ne source reste inchang&eacute;e. Pour transformer la cha&icirc;ne source, utilisez
le code suivant :
str = str.toUpperCase();
Ces m&eacute;thodes fonctionnent avec des caract&egrave;res &eacute;tendus, pas simplement a–z et A–Z :
var str:String = &quot;Jos&eacute; Bar&ccedil;a&quot;;
trace(str.toUpperCase(), str.toLowerCase()); // JOS&Eacute; BAR&Ccedil;A jos&eacute; bar&ccedil;a
Derni&egrave;re mise &agrave; jour le 27/4/2013
20
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
Exemple de cha&icirc;ne : ASCII Art
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Cet exemple ASCII Art repr&eacute;sente diff&eacute;rentes fa&ccedil;ons d’utiliser la classe String en ActionScript 3.0, notamment :
• La m&eacute;thode split() de la classe String est utilis&eacute;e pour extraire des valeurs d’une cha&icirc;ne s&eacute;par&eacute;e par des caract&egrave;res
(informations d’image dans un fichier de texte s&eacute;par&eacute; par des tabulations).
• Plusieurs techniques de manipulation de cha&icirc;nes, y compris split(), la concat&eacute;nation et l’extraction d’une partie
de la cha&icirc;ne &agrave; l’aide de substring() et de substr(), sont utilis&eacute;es pour mettre la premi&egrave;re lettre de chaque mot
dans les titres d’image en majuscule.
• La m&eacute;thode getCharAt() est utilis&eacute;e pour obtenir un seul caract&egrave;re &agrave; partir d’une cha&icirc;ne (pour d&eacute;terminer le
caract&egrave;re ASCII correspondant &agrave; une valeur bitmap d’&eacute;chelle de gris).
• La concat&eacute;nation de cha&icirc;ne est utilis&eacute;e pour construire la repr&eacute;sentation ASCII art d’une image, un caract&egrave;re &agrave; la fois.
Le terme ASCII art fait r&eacute;f&eacute;rence &agrave; des repr&eacute;sentations textuelles d’une image dans lesquelles une grille de polices de
caract&egrave;res &agrave; espacement constant (caract&egrave;res Courier New, par exemple) trace l’image. L’image suivante est un
exemple d’ASCII art produit par l’application :
La version ASCII art du graphique est illustr&eacute;e &agrave; droite.
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers de l’application ASCIIArt se trouvent dans
le dossier Samples/AsciiArt. L’application se compose des fichiers suivants :
Fichier
Description
AsciiArtApp.mxml
Fichier d’application principal en FLA pour Flash ou en MXML
pour Flex
ou
AsciiArtApp.fla
com/example/programmingas3/asciiArt/AsciiArtBuilder.as
La classe qui fournit la fonctionnalit&eacute; principale de
l’application, notamment l’extraction de m&eacute;tadonn&eacute;es
d’image d’un fichier de texte, le chargement des images et la
gestion du processus de conversion d’image en texte.
com/example/programmingas3/asciiArt/BitmapToAsciiConverter.as
Une classe qui fournit la m&eacute;thode parseBitmapData()
pour convertir des donn&eacute;es d’image dans une version String.
com/example/programmingas3/asciiArt/Image.as
Une classe qui repr&eacute;sente une image bitmap charg&eacute;e.
Derni&egrave;re mise &agrave; jour le 27/4/2013
21
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
Fichier
Description
com/example/programmingas3/asciiArt/ImageInfo.as
Une classe repr&eacute;sentant des m&eacute;tadonn&eacute;es pour une image
ASCII art (titre, URL de fichier image, etc.).
image/
Un dossier contenant des images utilis&eacute;es par l’application.
txt/ImageData.txt
Un fichier de texte s&eacute;par&eacute; par des tabulations et contenant
des informations sur les images &agrave; charger par l’application.
Extraction de valeurs s&eacute;par&eacute;es par des tabulations
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Cet exemple utilise le stockage s&eacute;par&eacute; de donn&eacute;es d’application par rapport &agrave; l’application ; de cette fa&ccedil;on, si les
donn&eacute;es changent (par exemple, si une autre image est ajout&eacute;e ou que le titre d’une image change), il est inutile de
recr&eacute;er le fichier SWF. Dans ce cas, les m&eacute;tadonn&eacute;es d’image, y compris le titre de l’image, l’URL du fichier d’image
r&eacute;el et certaines valeurs utilis&eacute;es pour manipuler l’image, sont stock&eacute;s dans un fichier de texte (le fichier
txt/ImageData.txt dans le projet). Le contenu du fichier de texte est le suivant :
FILENAMETITLEWHITE_THRESHHOLDBLACK_THRESHHOLD
FruitBasket.jpgPear, apple, orange, and bananad810
Banana.jpgA picture of a bananaC820
Orange.jpgorangeFF20
Apple.jpgpicture of an apple6E10
Le fichier utilise un format s&eacute;par&eacute; par des tabulations sp&eacute;cifique. La premi&egrave;re ligne est une ligne d’en-t&ecirc;te. Les lignes
restantes contiennent les donn&eacute;es suivantes pour chaque bitmap &agrave; charger :
• Le nom de fichier du bitmap.
• Le nom d’affichage du bitmap.
• Les valeurs de seuil du blanc et les valeurs de seuil du noir pour les bitmaps. Il s’agit de valeurs hexad&eacute;cimales audessus et en dessous desquelles un pixel doit &ecirc;tre consid&eacute;r&eacute; comme totalement blanc ou totalement noir.
D&egrave;s que l’application d&eacute;marre, la classe AsciiArtBuilder se charge et analyse le contenu du fichier de texte afin de cr&eacute;er
la &laquo; pile &raquo; d’images qu’elle chargera. Pour cela, elle utilise le code suivant de la m&eacute;thode parseImageInfo() de la classe
AsciiArtBuilder :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
var lines:Array = _imageInfoLoader.data.split(&quot;\n&quot;);
var numLines:uint = lines.length;
for (var i:uint = 1; i &lt; numLines; i++)
{
var imageInfoRaw:String = lines[i];
...
if (imageInfoRaw.length &gt; 0)
{
// Create a new image info record and add it to the array of image info.
var imageInfo:ImageInfo = new ImageInfo();
// Split the current line into values (separated by tab (\t)
// characters) and extract the individual properties:
var imageProperties:Array = imageInfoRaw.split(&quot;\t&quot;);
imageInfo.fileName = imageProperties[0];
imageInfo.title = normalizeTitle(imageProperties[1]);
imageInfo.whiteThreshold = parseInt(imageProperties[2], 16);
imageInfo.blackThreshold = parseInt(imageProperties[3], 16);
result.push(imageInfo);
}
}
Le contenu entier du fichier de texte se trouve dans une seule occurrence de String, la propri&eacute;t&eacute;
_imageInfoLoader.data. Vous pouvez utiliser la m&eacute;thode split() avec le caract&egrave;re de nouvelle ligne (&quot;\n&quot;)
comme param&egrave;tre pour diviser l’occurrence de String en un tableau (lines) dont les &eacute;l&eacute;ments sont les lignes
individuelles du fichier de texte. Le code utilise ensuite une boucle pour travailler avec chacune des lignes (except&eacute; la
premi&egrave;re car elle contient uniquement des en-t&ecirc;tes). A l’int&eacute;rieur de la boucle, la m&eacute;thode split() est de nouveau
utilis&eacute;e pour diviser le contenu de la ligne en un ensemble de valeurs (l’objet Array appel&eacute; imageProperties). Le
param&egrave;tre utilis&eacute; avec la m&eacute;thode split() dans ce cas est le caract&egrave;re de tabulation (&quot;\t&quot;) car les valeurs dans chaque
ligne sont d&eacute;limit&eacute;es par des tabulations.
Utilisation de m&eacute;thodes String pour normaliser des titres d’image
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans cette application, tous les titres d’image sont affich&eacute;s &agrave; l’aide d’un format standard, avec la premi&egrave;re lettre de
chaque mot en majuscule (except&eacute; quelques mots qui ne sont g&eacute;n&eacute;ralement pas en majuscule dans des titres anglais).
Au lieu de consid&eacute;rer que le fichier de texte contient des titres format&eacute;s correctement, l’application formate les titres
lors de leur extraction du fichier de texte.
Dans la liste de code pr&eacute;c&eacute;dente, lors de l’extraction de valeurs de m&eacute;tadonn&eacute;es d’image individuelles, la ligne de code
suivante est utilis&eacute;e :
imageInfo.title = normalizeTitle(imageProperties[1]);
Dans ce code, le titre de l’image issu du fichier de texte est transmis au moyen de la m&eacute;thode normalizeTitle() avant
d’&ecirc;tre stock&eacute; dans l’objet ImageInfo :
Derni&egrave;re mise &agrave; jour le 27/4/2013
22
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
private
{
var
var
for
{
function normalizeTitle(title:String):String
words:Array = title.split(&quot; &quot;);
len:uint = words.length;
(var i:uint; i &lt; len; i++)
words[i] = capitalizeFirstLetter(words[i]);
}
return words.join(&quot; &quot;);
}
Cette m&eacute;thode utilise la m&eacute;thode split() pour diviser le titre en mots individuels (s&eacute;par&eacute;s par le caract&egrave;re
d’espacement), transmet chaque mot au moyen de la m&eacute;thode capitalizeFirstLetter() puis utilise la m&eacute;thode
join() de la classe Array pour combiner de nouveau les mots en une cha&icirc;ne unique.
Comme son nom l’indique, la m&eacute;thode capitalizeFirstLetter() met la premi&egrave;re lettre de chaque mot en
majuscule :
/**
* Capitalizes the first letter of a single word, unless it's one of
* a set of words that are normally not capitalized in English.
*/
private function capitalizeFirstLetter(word:String):String
{
switch (word)
{
case &quot;and&quot;:
case &quot;the&quot;:
case &quot;in&quot;:
case &quot;an&quot;:
case &quot;or&quot;:
case &quot;at&quot;:
case &quot;of&quot;:
case &quot;a&quot;:
// Don't do anything to these words.
break;
default:
// For any other word, capitalize the first character.
var firstLetter:String = word.substr(0, 1);
firstLetter = firstLetter.toUpperCase();
var otherLetters:String = word.substring(1);
word = firstLetter + otherLetters;
}
return word;
}
En anglais, le premier caract&egrave;re des mots suivants utilis&eacute;s dans un titre n’est pas mis en majuscule : “and,” “the,” “in,”
“an,” “or,” “at,” “of,” ou “a.” (il s’agit d’une version simplifi&eacute;e des r&egrave;gles). Pour ex&eacute;cuter cette logique, le code utilise
d’abord une instruction switch pour v&eacute;rifier si le mot est l’un des mots ne devant pas &ecirc;tre en majuscule. Si c’est le cas,
le code sort de l’instruction switch. Si le mot doit &ecirc;tre en majuscule, la proc&eacute;dure comprend plusieurs &eacute;tapes :
1 La premi&egrave;re lettre du mot est extraite &agrave; l’aide de substr(0, 1), qui extraie une sous-cha&icirc;ne commen&ccedil;ant par le
caract&egrave;re au niveau de l’index 0 (la premi&egrave;re lettre de la cha&icirc;ne, comme indiqu&eacute; par le premier param&egrave;tre 0). La
sous-cha&icirc;ne contiendra un caract&egrave;re (indiqu&eacute; par le deuxi&egrave;me param&egrave;tre 1).
2 Ce caract&egrave;re est mis en majuscule &agrave; l’aide de la m&eacute;thode toUpperCase().
Derni&egrave;re mise &agrave; jour le 27/4/2013
23
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des cha&icirc;nes
3 Les caract&egrave;res restants du mot d’origine sont extraits &agrave; l’aide de substring(1), qui extraie une sous-cha&icirc;ne
commen&ccedil;ant &agrave; l’index 1 (la deuxi&egrave;me lettre) jusqu’&agrave; la fin de la cha&icirc;ne (indiqu&eacute; en omettant le deuxi&egrave;me param&egrave;tre
de la m&eacute;thode substring()).
4 Le dernier mot est cr&eacute;&eacute; en combinant la premi&egrave;re lettre mise en majuscule et les lettres restantes en utilisant la
concat&eacute;nation de cha&icirc;ne : firstLetter + otherLetters
G&eacute;n&eacute;ration du texte ASCII art
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe BitmapToAsciiConverter permet de convertir une image bitmap en sa repr&eacute;sentation de texte ASCII. Cette
proc&eacute;dure est effectu&eacute;e par la m&eacute;thode parseBitmapData(), partiellement repr&eacute;sent&eacute;e ici :
var result:String = &quot;&quot;;
// Loop through the rows of pixels top to bottom:
for (var y:uint = 0; y &lt; _data.height; y += verticalResolution)
{
// Within each row, loop through pixels left to right:
for (var x:uint = 0; x &lt; _data.width; x += horizontalResolution)
{
...
// Convert the gray value in the 0-255 range to a value
// in the 0-64 range (since that's the number of &quot;shades of
// gray&quot; in the set of available characters):
index = Math.floor(grayVal / 4);
result += palette.charAt(index);
}
result += &quot;\n&quot;;
}
return result;
Ce code d&eacute;finit d’abord une occurrence de String appel&eacute;e result qui sera utilis&eacute;e pour cr&eacute;er la version ASCII art de
l’image bitmap. Il effectue ensuite une boucle sur les pixels de l’image bitmap source. Il utilise plusieurs techniques de
manipulation des couleurs (non d&eacute;crites ici) pour convertir le rouge, le vert et le bleu d’un pixel en une valeur d’&eacute;chelle
de gris (un nombre entre 0 et 255). Le code divise ensuite cette valeur par 4 (comme indiqu&eacute;) pour la convertir en une
valeur dans l’&eacute;chelle 0-63, qui est stock&eacute;e dans la variable index (l’&eacute;chelle 0-63 est utilis&eacute;e car la palette des caract&egrave;res
ASCII disponibles utilis&eacute;e par cette application contient 64 valeurs). La palette des caract&egrave;res est d&eacute;finie en tant
qu’occurrence de String dans la classe BitmapToAsciiConverter :
// The characters are in order from darkest to lightest, so that their
// position (index) in the string corresponds to a relative color value
// (0 = black).
private static const palette:String =
&quot;@#$%&amp;8BMW*mwqpdbkhaoQ0OZXYUJCLtfjzxnuvcr[]{}1()|/?Il!i&gt;&lt;+_~-;,. &quot;;
Etant donn&eacute; que la variable index d&eacute;finit le caract&egrave;re ASCII de la palette qui correspond au pixel actuel dans l’image
bitmap, ce caract&egrave;re est r&eacute;cup&eacute;r&eacute; de la palette String &agrave; l’aide de la m&eacute;thode charAt(). Il est ensuite ajout&eacute; &agrave;
l’occurrence de String result au moyen de l’op&eacute;rateur d’affectation de concat&eacute;nation (+=). En outre, &agrave; la fin de chaque
ligne de pixels, un caract&egrave;re de nouvelle ligne est concat&eacute;n&eacute; &agrave; la fin de l’occurrence de String result afin que la ligne
&agrave; renvoyer cr&eacute;e une ligne de pixels de caract&egrave;res.
Derni&egrave;re mise &agrave; jour le 27/4/2013
24
25
Chapitre 3 : Utilisation de tableaux
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les tableaux vous permettent de stocker plusieurs valeurs dans une seule structure de donn&eacute;es. Vous pouvez utiliser
des tableaux index&eacute;s simples qui stockent des valeurs &agrave; l’aide d’index d’entiers ordinaux fixes ou des tableaux
associatifs complexes qui stockent des valeurs &agrave; l’aide de cl&eacute;s arbitraires. Les tableaux peuvent &eacute;galement &ecirc;tre
multidimensionnels et contenir des &eacute;l&eacute;ments &eacute;tant eux-m&ecirc;mes des tableaux. Pour finir, vous pouvez utiliser un vecteur
pour les tableaux dont les &eacute;l&eacute;ments sont tous des occurrences du m&ecirc;me type de donn&eacute;es.
Voir aussi
Array
Vecteur
Principes de base des tableaux
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous aurez souvent besoin en programmation d’utiliser un ensemble d’&eacute;l&eacute;ments plut&ocirc;t qu’un seul objet; par exemple,
dans une application de lecteur de musique, vous pouvez avoir une liste de morceaux en attente de lecture. Vous ne
souhaitez pas cr&eacute;er une variable s&eacute;par&eacute;e pour chaque morceau de cette liste. Il serait pr&eacute;f&eacute;rable de rassembler tous les
objets Song et de les utiliser sous forme de groupe.
Un tableau est un &eacute;l&eacute;ment de programmation qui agit comme conteneur pour un ensemble d’&eacute;l&eacute;ments (une liste de
morceaux, par exemple). La plupart du temps, tous les &eacute;l&eacute;ments d’un tableau sont des occurrences de la m&ecirc;me classe,
mais ceci n’est pas obligatoire dans ActionScript. Les &eacute;l&eacute;ments individuels d’un tableau sont les &eacute;l&eacute;ments du tableau.
Un tableau peut &ecirc;tre compar&eacute; &agrave; un tiroir classeur pour des variables. Les variables peuvent &ecirc;tre ajout&eacute;es en tant
qu’&eacute;l&eacute;ments au tableau, comme vous placez un dossier dans le tiroir classeur. Vous pouvez utiliser le tableau comme
une variable unique, comme si vous transportiez le tiroir entier &agrave; un autre endroit. Vous pouvez utiliser les variables
en tant que groupe, comme si vous recherchiez des informations dans les dossiers en les parcourant l’un apr&egrave;s l’autre.
Vous pouvez y acc&eacute;der individuellement, comme si vous ouvriez le tiroir et s&eacute;lectionniez un seul dossier.
Par exemple, imaginez que vous cr&eacute;ez une application de lecteur de musique dans laquelle un utilisateur peut
s&eacute;lectionner plusieurs morceaux et les ajouter &agrave; une liste de lecture. Dans votre code ActionScript, vous avez une
m&eacute;thode appel&eacute;e addSongsToPlaylist() qui accepte un seul tableau comme param&egrave;tre. Peu importe le nombre de
morceaux &agrave; ajouter &agrave; la liste (quelques-uns, un grand nombre, ou m&ecirc;me un seul), vous devez appeler la m&eacute;thode
addSongsToPlaylist() une seule fois, en lui transmettant le tableau qui contient les objets Song. Dans la m&eacute;thode
addSongsToPlaylist(), vous pouvez utiliser une boucle pour parcourir les &eacute;l&eacute;ments (morceaux) du tableau un par
un et les ajouter &agrave; la liste de lecture.
Le type de tableau ActionScript le plus courant est le tableau index&eacute;. Dans un tableau index&eacute;, chaque &eacute;l&eacute;ment est stock&eacute;
dans un emplacement num&eacute;rot&eacute; appel&eacute; index. On acc&egrave;de &agrave; des &eacute;l&eacute;ments &agrave; l’aide du num&eacute;ro, comme une adresse. Les
tableaux index&eacute;s r&eacute;pondent &agrave; la plupart des besoins en programmation. La classe Array est une classe courante utilis&eacute;e
pour repr&eacute;senter un tableau index&eacute;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Un tableau index&eacute; est souvent utilis&eacute; pour stocker plusieurs &eacute;l&eacute;ments du m&ecirc;me type, des objets qui sont des
occurrences de la m&ecirc;me classe. La classe Array ne dispose pas de moyens pour restreindre le type d’&eacute;l&eacute;ments qu’elle
contient. La classe Vector est un type de tableau index&eacute; dans lequel tous les &eacute;l&eacute;ments d’un tableau unique sont du
m&ecirc;me type. L’utilisation d’une occurrence de Vector &agrave; la place d’une occurrence de Array peut &eacute;galement d&eacute;boucher
sur une am&eacute;lioration des performances entre autres. la classe Vector est prise en charge &agrave; partir de Flash Player 10 et
Adobe AIR 1.5.
Une utilisation sp&eacute;ciale d’un tableau index&eacute; est un tableau multidimensionnel. Un tableau multidimensionnel est un
tableau index&eacute; dont les &eacute;l&eacute;ments sont des tableaux index&eacute;s, qui contiennent &agrave; leur tour d’autres &eacute;l&eacute;ments.
Le tableau associatif est un autre type de tableau. Il utilise une cha&icirc;ne key au lieu d’un index num&eacute;rique pour identifier
des &eacute;l&eacute;ments individuels. Enfin, ActionScript 3.0 comprend &eacute;galement une classe Dictionary qui repr&eacute;sente un
dictionnaire. Un dictionnaire est un tableau qui vous permet d’utiliser tout type d’objet comme cl&eacute; afin de distinguer
les &eacute;l&eacute;ments entre eux.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants utilis&eacute;s dans le cadre de la programmation de routines
qui g&egrave;rent des tableaux et des vecteurs :
Array Objet qui sert de conteneur pour regrouper plusieurs objets.
Op&eacute;rateur ([]) d’acc&egrave;s au tableau Paire de crochets entourant un index ou une cl&eacute; qui identifie de fa&ccedil;on unique un
&eacute;l&eacute;ment du tableau. Cette syntaxe est utilis&eacute;e apr&egrave;s le nom d’une variable de tableau pour sp&eacute;cifier un seul &eacute;l&eacute;ment du
tableau plut&ocirc;t qu’un tableau entier.
Tableau associatif Tableau qui utilise des cl&eacute;s de cha&icirc;ne pour identifier des &eacute;l&eacute;ments individuels.
Type de base Type de donn&eacute;es des objets qu’une occurrence de Vector est autoris&eacute;e &agrave; stocker.
Dictionnaire Tableau dont les &eacute;l&eacute;ments sont constitu&eacute;s de paires d’objets appel&eacute;es cl&eacute; et valeur. La cl&eacute; est utilis&eacute;e &agrave; la
place d’un index num&eacute;rique pour identifier un seul &eacute;l&eacute;ment.
El&eacute;ment El&eacute;ment unique dans un tableau.
Index Adresse num&eacute;rique utilis&eacute;e pour identifier un &eacute;l&eacute;ment unique dans un tableau index&eacute;.
Tableau index&eacute; Type de tableau standard qui stocke chaque &eacute;l&eacute;ment dans une position num&eacute;rot&eacute;e et utilise le num&eacute;ro
(index) pour identifier des &eacute;l&eacute;ments individuels.
Cl&eacute; Cha&icirc;ne ou objet utilis&eacute; pour identifier un seul &eacute;l&eacute;ment dans un tableau associatif ou un dictionnaire.
Tableau multidimensionnel Tableau contenant des &eacute;l&eacute;ments qui sont des tableaux plut&ocirc;t que des valeurs uniques.
T Convention standard utilis&eacute;e dans la pr&eacute;sente documentation pour repr&eacute;senter le type de base d’une occurrence de
Vector, quel qu’il soit. La convention T est utilis&eacute;e pour repr&eacute;senter un nom de classe, comme cela est indiqu&eacute; dans la
description du param&egrave;tre Type. (&laquo; T &raquo; correspond &agrave; &laquo; type &raquo;, comme dans &laquo; type de donn&eacute;es &raquo;.)
Param&egrave;tre Type Syntaxe utilis&eacute;e avec le nom de classe Vector pour sp&eacute;cifier le type de base de Vector (le type de
donn&eacute;es des objets qu’il stocke). La syntaxe consiste en un point (.), puis le nom du type de donn&eacute;es entour&eacute; de
parenth&egrave;ses en chevron (&lt;&gt;). L’ensemble ressemble &agrave; ceci : Vector&lt;T&gt;. Dans la pr&eacute;sente documentation, la classe
sp&eacute;cifi&eacute;e dans le param&egrave;tre Type est repr&eacute;sent&eacute; de fa&ccedil;on g&eacute;n&eacute;rique par T.
Vecteur Type de tableau dont les &eacute;l&eacute;ments sont tous des occurrences du m&ecirc;me type de donn&eacute;es.
Derni&egrave;re mise &agrave; jour le 27/4/2013
26
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Tableaux index&eacute;s
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les tableaux index&eacute;s stockent une s&eacute;rie d’une ou de plusieurs valeurs organis&eacute;es de fa&ccedil;on &agrave; ce que vous puissiez acc&eacute;der
&agrave; chaque valeur &agrave; l’aide d’une valeur d’entier non sign&eacute;. Le premier index correspond toujours au nombre 0. L’index
est ensuite incr&eacute;ment&eacute; d’une unit&eacute; pour chaque &eacute;l&eacute;ment ajout&eacute; cons&eacute;cutivement au tableau. Dans ActionScript 3.0,
deux classes sont utilis&eacute;es comme tableaux index&eacute;s : la classe Array et la classe Vector.
Les tableaux index&eacute;s utilisent un entier 32 bits non sign&eacute; pour le num&eacute;ro d’index. La taille maximale d’un tableau
index&eacute; est 232 - 1 ou 4 294 967 295. Si vous tentez de cr&eacute;er un tableau plus grand que la taille maximale, une erreur
d’ex&eacute;cution se produit.
Pour acc&eacute;der &agrave; un &eacute;l&eacute;ment particulier d’un tableau index&eacute;, vous pouvez utiliser l’op&eacute;rateur ([]) d’acc&egrave;s au tableau pour
sp&eacute;cifier la position de l’index de l’&eacute;l&eacute;ment vis&eacute;. Par exemple, le code suivant repr&eacute;sente le premier &eacute;l&eacute;ment (l’&eacute;l&eacute;ment
&agrave; l’index 0) dans un tableau index&eacute; appel&eacute; songTitles :
songTitles[0]
La combinaison du nom de la variable du tableau suivi de l’index entre crochets fonctionne comme un identifiant
unique. En d’autres termes, elle peut &ecirc;tre utilis&eacute;e tout comme un nom de variable. Vous pouvez affecter une valeur &agrave;
un &eacute;l&eacute;ment du tableau index&eacute; en utilisant le nom et l’index du c&ocirc;t&eacute; gauche d’une instruction d’affectation :
songTitles[1] = &quot;Symphony No. 5 in D minor&quot;;
Dans la m&ecirc;me veine, vous pouvez r&eacute;cup&eacute;rer une valeur &agrave; un &eacute;l&eacute;ment du tableau index&eacute; en utilisant le nom et l’index
du c&ocirc;t&eacute; droit d’une instruction d’affectation :
var nextSong:String = songTitles[2];
Vous pouvez aussi utiliser une variable entre crochets plut&ocirc;t que de fournir une valeur explicite. Elle doit contenir une
valeur enti&egrave;re non-n&eacute;gative telle qu’un uint, un int positif ou une occurrence de Number d’entier positif. Cette
technique est utilis&eacute;e couramment pour passer en boucle sur les &eacute;l&eacute;ments dans un tableau index&eacute; et effectuer une
op&eacute;ration sur un ou tous les &eacute;l&eacute;ments. Le code ci-dessous d&eacute;crit cette technique. Le code utilise une boucle pour
acc&eacute;der &agrave; chaque valeur dans un objet Array appel&eacute; oddNumbers. Il utilise l’instruction trace() pour imprimer
chaque valeur sous la forme “oddNumber[index] = value” :
var oddNumbers:Array = [1, 3, 5, 7, 9, 11];
var len:uint = oddNumbers.length;
for (var i:uint = 0; i &lt; len; i++)
{
trace(&quot;oddNumbers[&quot; + i.toString() + &quot;] = &quot; + oddNumbers[i].toString());
}
Classe Array
La classe Array est le premier type de tableau index&eacute;. Une occurrence de Array peut comporter une valeur de n’importe
quel type de donn&eacute;es. Le m&ecirc;me objet Array peut comporter des objets qui sont de types de donn&eacute;es diff&eacute;rents. Par
exemple, une occurrence de Array unique peut avoir une valeur String en index 0, une occurrence de Number en index
1 et un objet XML en index 2.
Classe Vector
La classe Vector est un autre type de tableau index&eacute; qui est disponible dans ActionScript 3.0. Une occurrence de Vector
est un tableau typ&eacute;, ce qui signifie que tous les &eacute;l&eacute;ments d’une occurrence de Vector ont toujours le m&ecirc;me type de
donn&eacute;es.
Derni&egrave;re mise &agrave; jour le 27/4/2013
27
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Remarque : la classe Vector est prise en charge &agrave; partir de Flash Player 10 et Adobe AIR 1.5.
Lorsque vous d&eacute;clarez une variable Vector ou que vous instanciez un objet Vector, vous sp&eacute;cifiez explicitement le type
de donn&eacute;es des objets que le vecteur peut contenir. Le type de donn&eacute;es sp&eacute;cifi&eacute; est connu sous le nom de type de base
du vecteur. Lors de l’ex&eacute;cution et de la compilation (en mode strict), tout code qui fixe la valeur d’un &eacute;l&eacute;ment Vector
ou r&eacute;cup&egrave;re une valeur d’un &eacute;l&eacute;ment Vector est contr&ocirc;l&eacute;. Si le type de donn&eacute;es de l’objet que l’on tente d’ajouter ou de
r&eacute;cup&eacute;rer ne correspond pas au type de base du vecteur, une erreur se produit.
Outre la restriction concernant le type de donn&eacute;es, la classe Vector poss&egrave;de d’autres restrictions qui la distinguent de
la classe Array :
• Un vecteur est un tableau dense. Un objet Array peut comporter des valeurs dans les index 0 et 7 m&ecirc;me si elle n’en
a pas dans les positions 1 &agrave; 6. Cependant, un vecteur doit comporter une valeur (ou null) dans chaque index.
• Un vecteur peut facultativement avoir une longueur fixe. Ceci signifie que le nombre d’&eacute;l&eacute;ments du vecteur est
immuable.
• L’acc&egrave;s aux &eacute;l&eacute;ments d’un vecteur est d&eacute;fini par ses limites. Vous ne pouvez jamais lire une valeur d’un index
sup&eacute;rieur &agrave; celui de l’&eacute;l&eacute;ment final (longueur - 1). Vous ne pouvez jamais d&eacute;finir une valeur avec un index
sup&eacute;rieur &agrave; l’index final actuel. En d’autres termes, vous pouvez d&eacute;finir une valeur uniquement &agrave; l’index existant
ou &agrave; une [longueur] d’index.
En raison de ses restrictions, un vecteur pr&eacute;sente trois avantages principaux par rapport &agrave; une occurrence d’Array dont
les &eacute;l&eacute;ments sont tous des occurrences d’une classe unique :
• Performance : l’acc&egrave;s &agrave; l’&eacute;l&eacute;ment de tableau et son it&eacute;ration sont beaucoup plus rapides lorsque vous utilisez une
occurrence de Vector que lorsque vous utilisez une occurrence d’Array.
• S&eacute;curit&eacute; des types : en mode strict, le compilateur peut identifier les erreurs de type de donn&eacute;es. Parmi ces erreurs,
il y a l’affectation d’une valeur du type de donn&eacute;es incorrect &agrave; un vecteur ou l’attente d’un type de donn&eacute;es
incompatible lors de la lecture d’une valeur &agrave; partir du vecteur. A l’ex&eacute;cution, les types de donn&eacute;es sont &eacute;galement
contr&ocirc;l&eacute;s lors de l’ajout de donn&eacute;es &agrave; un objet Vector ou la lecture de donn&eacute;es qui en provient. Notez cependant
que lorsque vous utilisez la m&eacute;thode push() ou unshift() pour ajouter des valeurs &agrave; un vecteur, les types de
donn&eacute;es des arguments ne sont pas v&eacute;rifi&eacute;s au moment de la compilation. Lorsque vous utilisez ces m&eacute;thodes, les
valeurs sont toujours contr&ocirc;l&eacute;es &agrave; l’ex&eacute;cution.
• Fiabilit&eacute; : le contr&ocirc;le de gamme &agrave; l’ex&eacute;cution (ou contr&ocirc;le de longueur fixe) assure une fiabilit&eacute; nettement
sup&eacute;rieure &agrave; celle des objets Array.
A part les contraintes et les avantages suppl&eacute;mentaires, la classe Vector est tr&egrave;s proche de la classe Array. Les propri&eacute;t&eacute;s
et les m&eacute;thodes d’un objet Vector sont similaires, voire dans certains cas identiques, aux propri&eacute;t&eacute;s et aux m&eacute;thodes
d’un objet Array. Au lieu d’utiliser un objet Array dont tous les &eacute;l&eacute;ments poss&egrave;dent le m&ecirc;me type de donn&eacute;es, il est
g&eacute;n&eacute;ralement pr&eacute;f&eacute;rable de faire appel &agrave; une occurrence de l’objet Vector.
Cr&eacute;ation de tableaux
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser plusieurs techniques pour cr&eacute;er une occurrence de Array ou une occurrence de Vector.
Cependant, les techniques de cr&eacute;ation de chaque type de tableau sont quelque peu diff&eacute;rentes.
Cr&eacute;ation d’une occurrence de Array
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous cr&eacute;ez un objet Array par l’appel au constructeur Array( ou par l’utilisation d’une syntaxe de litt&eacute;ral de tableau.
Derni&egrave;re mise &agrave; jour le 27/4/2013
28
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Vous pouvez utiliser la fonction de constructeur Array() de trois fa&ccedil;ons diff&eacute;rentes. Premi&egrave;rement, si vous appelez le
constructeur sans arguments, vous obtenez un tableau vide. Vous pouvez utiliser la propri&eacute;t&eacute; length de la classe Array
pour v&eacute;rifier que le tableau ne contient aucun &eacute;l&eacute;ment. Par exemple, le code suivant appelle le constructeur Array()
sans arguments :
var names:Array = new Array();
trace(names.length); // output: 0
Deuxi&egrave;mement, si vous utilisez un nombre comme unique param&egrave;tre pour le constructeur Array(), un tableau de
cette longueur est cr&eacute;&eacute;, avec chaque valeur d’&eacute;l&eacute;ment d&eacute;finie sur undefined. L’argument doit &ecirc;tre un entier non sign&eacute;
compris entre les valeurs 0 et 4 294 967 295. Par exemple, le code suivant appelle le constructeur Array() avec un seul
argument num&eacute;rique :
var names:Array = new Array(3);
trace(names.length); // output: 3
trace(names[0]); // output: undefined
trace(names[1]); // output: undefined
trace(names[2]); // output: undefined
Troisi&egrave;mement, si vous appelez le constructeur et transmettez une liste d’&eacute;l&eacute;ments comme param&egrave;tres, un tableau est
cr&eacute;&eacute; avec des &eacute;l&eacute;ments correspondant &agrave; chacun des param&egrave;tres. Le code suivant transmet trois arguments au
constructeur Array() :
var names:Array = new Array(&quot;John&quot;, &quot;Jane&quot;, &quot;David&quot;);
trace(names.length); // output: 3
trace(names[0]); // output: John
trace(names[1]); // output: Jane
trace(names[2]); // output: David
Vous pouvez aussi cr&eacute;er des tableaux avec des litt&eacute;raux de tableau. Un litt&eacute;ral de tableau peut &ecirc;tre affect&eacute; directement
&agrave; une variable de tableau, comme illustr&eacute; dans l’exemple suivant :
var names:Array = [&quot;John&quot;, &quot;Jane&quot;, &quot;David&quot;];
Cr&eacute;ation d’une occurrence de Vector
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Vous cr&eacute;ez une occurrence de Vector par l’appel du constructeur Vector.&lt;T&gt;(). Vous pouvez aussi cr&eacute;er un vecteur
par l’appel &agrave; la fonction globale Vector.&lt;T&gt;(). Cette fonction convertit un objet sp&eacute;cifi&eacute; en une occurrence de Vector.
Dans Flash Professional CS5 et les versions ult&eacute;rieures, Flash Builder 4 et les versions ult&eacute;rieures et Flex 4 et les
versions ult&eacute;rieures, vous pouvez &eacute;galement cr&eacute;er une occurrence de Vector &agrave; l’aide de la syntaxe de litt&eacute;ral
correspondante.
Toutes les fois que vous d&eacute;clarez une variable Vector (ou de la m&ecirc;me fa&ccedil;on, un param&egrave;tre de la m&eacute;thode Vector ou un
type de renvoi de la m&eacute;thode Vector), vous sp&eacute;cifiez le type de base de la variable Vector. Vous sp&eacute;cifiez &eacute;galement le
type de base lorsque vous cr&eacute;ez une occurrence de Vector par l’appel au constructeur Vector.&lt;T&gt;(). Autrement dit,
toutes les fois que vous utilisez le terme Vector dans ActionScript, il est accompagn&eacute; d’un type de base.
Vous sp&eacute;cifiez le type de base du vecteur &agrave; l’aide de la syntaxe de param&egrave;tres de type. Le param&egrave;tre de type suit
imm&eacute;diatement le mot Vector dans le code. Il est form&eacute; d’un point (.), puis du nom de classe de base entour&eacute; de
parenth&egrave;ses en chevron (&lt;&gt;), comme l’indique cet exemple :
var v:Vector.&lt;String&gt;;
v = new Vector.&lt;String&gt;();
Derni&egrave;re mise &agrave; jour le 27/4/2013
29
30
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Dans la premi&egrave;re ligne de cet exemple, la variable v est d&eacute;clar&eacute;e comme une occurrence de Vector.&lt;Cha&icirc;ne&gt;. En
d’autres termes, il repr&eacute;sente un tableau index&eacute; qui ne peut comporter que des occurrences de String. La deuxi&egrave;me
ligne appelle le constructeur Vector() pour cr&eacute;er une occurrence du m&ecirc;me type Vector, c’est-&agrave;-dire un vecteur dont
les &eacute;l&eacute;ments sont tous des objets String. Il affecte cet objet &agrave; v.
Utilisation du constructeur Vector.&lt;T&gt;()
Si vous utilisez le constructeur Vector.&lt;T&gt;() sans arguments, il cr&eacute;e une occurrence de Vector vide. Vous pouvez
contr&ocirc;ler qu’un vecteur est vide en v&eacute;rifiant sa propri&eacute;t&eacute; length. Par exemple, le code ci-dessus appelle le constructeur
Vector.&lt;T&gt;() sans arguments :
var names:Vector.&lt;String&gt; = new Vector.&lt;String&gt;();
trace(names.length); // output: 0
Si vous savez d’avance de combien d’&eacute;l&eacute;ments un vecteur a besoin initialement, vous pouvez pr&eacute;d&eacute;finir ce nombre dans
le vecteur. Pour cr&eacute;er un vecteur avec un certain nombre d’&eacute;l&eacute;ments, transmettez le nombre d’&eacute;l&eacute;ments comme
premier param&egrave;tre (le param&egrave;tre length). Comme les &eacute;l&eacute;ments du vecteur ne peuvent pas &ecirc;tre vides, ils sont remplis
d’occurrences du type de base. Si ce type est un type de r&eacute;f&eacute;rence qui autorise les valeurs null, les &eacute;l&eacute;ments contiennent
tous null. Autrement, ils contiennent tous la valeur par d&eacute;faut pour la classe. Par exemple, une variable uint ne peut
pas &ecirc;tre null. Par cons&eacute;quent, dans le code ci-dessous, le vecteur appel&eacute; ages est cr&eacute;&eacute; avec sept &eacute;l&eacute;ments, chacun
contenant la valeur 0.
var ages:Vector.&lt;uint&gt; = new Vector.&lt;uint&gt;(7);
trace(ages); // output: 0,0,0,0,0,0,0
Enfin, &agrave; l’aide du constructeur Vector.&lt;T&gt;(), vous pouvez &eacute;galement cr&eacute;er un vecteur de longueur fixe en
transmettant true comme deuxi&egrave;me param&egrave;tre (le param&egrave;tre fixed). Dans ce cas, le vecteur est cr&eacute;&eacute; avec le nombre
sp&eacute;cifi&eacute; d’&eacute;l&eacute;ments et celui-ci ne peut pas &ecirc;tre modifi&eacute;. Notez cependant que vous pouvez quand m&ecirc;me changer les
valeurs des &eacute;l&eacute;ments d’un vecteur de longueur fixe.
Utilisation du constructeur de syntaxe de litt&eacute;ral Vector
Dans Flash Professional CS5 et les versions ult&eacute;rieures, Flash Builder 4 et les versions ult&eacute;rieures et Flex 4 et les
versions ult&eacute;rieures, vous pouvez transmettre une liste de valeurs au constructeur Vector&lt;T&gt;() pour stipuler les
valeurs initiales du vecteur :
// var v:Vector.&lt;T&gt; = new &lt;T&gt;[E0, ..., En-1 ,];
// For example:
var v:Vector.&lt;int&gt; = new &lt;int&gt;[0,1,2,];
Cette syntaxe poss&egrave;de les caract&eacute;ristiques suivantes :
• La virgule de fin de ligne est facultative.
• La syntaxe ne g&egrave;re pas la pr&eacute;sence d’&eacute;l&eacute;ments vides dans le tableau. Une instruction telle que var
v:Vector.&lt;int&gt;
= new &lt;int&gt;[0,,2,] renvoie une erreur de compilation.
• Il est impossible de stipuler la longueur par d&eacute;faut de l’occurrence de Vector. La longueur correspond au nombre
d’&eacute;l&eacute;ments qui composent la liste d’initialisation.
• Il est impossible de sp&eacute;cifier si l’occurrence de Vector poss&egrave;de une longueur fixe. Utilisez &agrave; cet effet la propri&eacute;t&eacute;
fixed.
• Il risque de se produire des pertes de donn&eacute;es ou des erreurs si les &eacute;l&eacute;ments transmis en tant que valeurs ne
correspondent pas au type indiqu&eacute;. Exemple :
var v:Vector.&lt;int&gt; = new &lt;int&gt;[4.2]; // compiler error when running in strict mode
trace(v[0]); //returns 4 when not running in strict mode
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Utilisation du constructeur Vector. &lt;T&gt;()
Outre le constructeur Vector.&lt;T&gt;() et le constructeur de syntaxe de litt&eacute;ral Vector, vous disposez &eacute;galement de la
fonction globale Vector. &lt;T&gt;() pour cr&eacute;er un objet Vector. La fonction globale Vector.&lt;T&gt;() est une fonction de
conversion. Lorsque vous appelez la fonction globale Vector.&lt;T&gt;(), vous sp&eacute;cifiez le type de base du vecteur que la
m&eacute;thode renvoie. Vous transmettez un tableau index&eacute; unique (occurrence de Array ou Vector) comme argument. La
m&eacute;thode renvoie alors un vecteur avec le type de base sp&eacute;cifi&eacute;, contenant les valeurs dans l’argument du tableau source.
Le code ci-dessous montre la syntaxe n&eacute;cessaire pour appeler la fonction globale Vector.&lt;T&gt;().
var friends:Vector.&lt;String&gt; = Vector.&lt;String&gt;([&quot;Bob&quot;, &quot;Larry&quot;, &quot;Sarah&quot;]);
La fonction globale Vector.&lt;T&gt;() ex&eacute;cute une conversion de type de base sur deux niveaux. D’abord, lorsqu’une
occurrence de Array est transmise &agrave; la fonction, une occurrence de Vector est renvoy&eacute;e. Ensuite, que le tableau source
soit une occurrence de Array ou Vector, la fonction tente de convertir les &eacute;l&eacute;ments du tableau source en valeurs du
type de base. La conversion utilise des r&egrave;gles standard de conversion des types de donn&eacute;es ActionScript. Par exemple,
le code suivant convertit les valeurs String du tableau source en nombres entiers dans le vecteur r&eacute;sultant. La partie
d&eacute;cimale de la premi&egrave;re (&quot;1.5&quot;) est tronqu&eacute;e et la troisi&egrave;me valeur non num&eacute;rique (&quot;Waffles&quot;) est convertie en 0
dans le r&eacute;sultat :
var numbers:Vector.&lt;int&gt; = Vector.&lt;int&gt;([&quot;1.5&quot;, &quot;17&quot;, &quot;Waffles&quot;]);
trace(numbers); // output: 1,17,0
S’il n’est pas possible de convertir un &eacute;l&eacute;ment source quelconque, une erreur se produit.
Lorsque le code appelle la fonction globale Vector.&lt;T&gt;(), si un &eacute;l&eacute;ment du tableau source est une occurrence d’une
sous-classe du type de base sp&eacute;cifi&eacute;, l’&eacute;l&eacute;ment est ajout&eacute; au vecteur r&eacute;sultant (aucune erreur ne se produit). L’utilisation
de la fonction globale Vector.&lt;T&gt;() est en fait le seul moyen de convertir un vecteur avec un type de base T en un
vecteur avec un type de base qui est une superclasse de T.
Insertion d’&eacute;l&eacute;ments de tableau
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’op&eacute;rateur ([]) d’acc&egrave;s au tableau constitue le moyen le plus &eacute;l&eacute;mentaire d’ajouter un &eacute;l&eacute;ment &agrave; un tableau index&eacute;.
Pour d&eacute;finir la valeur d’un &eacute;l&eacute;ment de tableau index&eacute;, utilisez le nom d’objet Array ou Vector et le num&eacute;ro d’index du
c&ocirc;t&eacute; gauche d’une instruction d’affectation.
songTitles[5] = &quot;Happy Birthday&quot;;
Si un &eacute;l&eacute;ment ne se trouve pas d&eacute;j&agrave; &agrave; cette position d’index du tableau ou du vecteur, l’index est cr&eacute;&eacute; et la valeur y est
stock&eacute;e. Si une valeur existe &agrave; cet index, la nouvelle valeur remplace l’ancienne.
Un objet Array vous permet de cr&eacute;er un &eacute;l&eacute;ment pour tout index. Cependant, avec un objet Vector, vous pouvez
affecter uniquement une valeur &agrave; un index existant ou &agrave; l’index disponible suivant. Celui-ci correspond &agrave; la propri&eacute;t&eacute;
length de l’objet Vector. Utilisez du code comme celui qui est pr&eacute;sent&eacute; ci-dessous pour ajouter un nouvel &eacute;l&eacute;ment &agrave;
un objet Vector de la fa&ccedil;on la plus s&ucirc;re :
myVector[myVector.length] = valueToAdd;
Trois m&eacute;thodes des classes Array et Vector, push(), unshift() et splice(), vous permettent d’ins&eacute;rer des &eacute;l&eacute;ments
dans un tableau index&eacute;. La m&eacute;thode push() ajoute un ou plusieurs &eacute;l&eacute;ments &agrave; la fin d’un tableau. Ainsi, le dernier
&eacute;l&eacute;ment ins&eacute;r&eacute; dans le tableau &agrave; l’aide de la m&eacute;thode push() aura le num&eacute;ro d’index le plus &eacute;lev&eacute;. La m&eacute;thode
unshift() ins&egrave;re un ou plusieurs &eacute;l&eacute;ments au d&eacute;but d’un tableau, qui est toujours au num&eacute;ro d’index 0. La m&eacute;thode
splice() ins&egrave;re des &eacute;l&eacute;ments au niveau d’un index sp&eacute;cifi&eacute; dans le tableau.
Derni&egrave;re mise &agrave; jour le 27/4/2013
31
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
L’exemple suivant illustre les trois m&eacute;thodes. Un tableau appel&eacute; planets est cr&eacute;&eacute; pour trier les noms des plan&egrave;tes par
ordre de proximit&eacute; par rapport au soleil. La m&eacute;thode push() est tout d’abord appel&eacute;e pour ajouter l’&eacute;l&eacute;ment initial,
Mars. Deuxi&egrave;mement, la m&eacute;thode unshift() est appel&eacute;e pour ins&eacute;rer l’&eacute;l&eacute;ment Mercury au d&eacute;but du tableau. Pour
finir, la m&eacute;thode splice() est appel&eacute;e pour ins&eacute;rer les &eacute;l&eacute;ments Venus et Earth apr&egrave;s Mercury, mais avant Mars. Le
premier &eacute;l&eacute;ment envoy&eacute; &agrave; splice(), l’entier 1, indique &agrave; l’insertion de d&eacute;buter &agrave; l’index 1. Le deuxi&egrave;me argument
envoy&eacute; &agrave; splice(), l’entier 0, indique qu’aucun &eacute;l&eacute;ment ne doit &ecirc;tre supprim&eacute;. Pour finir, les troisi&egrave;me et quatri&egrave;me
arguments envoy&eacute;s &agrave; splice(), Venus et Earth, sont les &eacute;l&eacute;ments &agrave; ins&eacute;rer.
var planets:Array = new Array();
planets.push(&quot;Mars&quot;); // array contents: Mars
planets.unshift(&quot;Mercury&quot;); // array contents: Mercury,Mars
planets.splice(1, 0, &quot;Venus&quot;, &quot;Earth&quot;);
trace(planets); // array contents: Mercury,Venus,Earth,Mars
Les m&eacute;thodes push() et unshift() renvoient toutes les deux un entier non sign&eacute; qui repr&eacute;sente la longueur du
tableau modifi&eacute;. La m&eacute;thode splice() renvoie un tableau vide lorsqu’elle est utilis&eacute;e pour ins&eacute;rer des &eacute;l&eacute;ments, ce qui
semble &eacute;trange mais compr&eacute;hensible en raison de saversatilit&eacute;. Vous pouvez utiliser la m&eacute;thode splice() non
seulement pour ins&eacute;rer des &eacute;l&eacute;ments dans un tableau, mais &eacute;galement pour en supprimer. Lorsque vous l’utilisez pour
supprimer des &eacute;l&eacute;ments, la m&eacute;thode splice() renvoie un tableau contenant les &eacute;l&eacute;ments supprim&eacute;s.
Remarque : si une propri&eacute;t&eacute; fixed de l’objet Vector est d&eacute;finie sur true, le nombre total d’&eacute;l&eacute;ments du vecteur reste
immuable. Si vous tentez d’ajouter un nouvel &eacute;l&eacute;ment &agrave; un vecteur de longueur fixe &agrave; l’aide des techniques d&eacute;crites ici,
une erreur se produit.
R&eacute;cup&eacute;ration des valeurs et suppression des &eacute;l&eacute;ments du tableau
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Utilisez l’op&eacute;rateur ([]) d’acc&egrave;s au tableau pour r&eacute;cup&eacute;rer la valeur d’un &eacute;l&eacute;ment de la fa&ccedil;on la plus simple. Pour
r&eacute;cup&eacute;rer la valeur d’un &eacute;l&eacute;ment de tableau index&eacute;, utilisez le nom d’objet Array ou Vector et le num&eacute;ro d’index du
c&ocirc;t&eacute; droit d’une instruction d’affectation.
var myFavoriteSong:String = songTitles[3];
Il est possible d’essayer de r&eacute;cup&eacute;rer une valeur &agrave; partir d’un tableau ou d’un vecteur &agrave; l’aide d’un index o&ugrave; aucun
&eacute;l&eacute;ment n’existe. Dans ce cas, un objet Array renvoie la valeur non d&eacute;finie et un vecteur renvoie une exception
RangeError.
Trois m&eacute;thodes des classes Array et Vector, pop(), shift() et splice(), vous permettent de supprimer des &eacute;l&eacute;ments.
La m&eacute;thode pop() supprime un &eacute;l&eacute;ment de la fin du tableau. En d’autres termes, elle supprime l’&eacute;l&eacute;ment au niveau du
num&eacute;ro d’index le plus &eacute;lev&eacute;. La m&eacute;thode shift() supprime un &eacute;l&eacute;ment du d&eacute;but du tableau, ce qui signifie qu’elle
supprime toujours l’&eacute;l&eacute;ment au num&eacute;ro d’index 0. La m&eacute;thode splice(), qui peut &eacute;galement &ecirc;tre utilis&eacute;e pour ins&eacute;rer
des &eacute;l&eacute;ments, supprime un nombre arbitraire d’&eacute;l&eacute;ments en commen&ccedil;ant au num&eacute;ro d’index indiqu&eacute; par le premier
argument envoy&eacute; &agrave; la m&eacute;thode.
L’exemple suivant utilise les trois m&eacute;thodes pour supprimer des &eacute;l&eacute;ments d’une occurrence d’Array. Un tableau
nomm&eacute; oceans est cr&eacute;&eacute; pour stocker les noms des oc&eacute;ans. Certains noms dans le tableau sont des noms de lacs plut&ocirc;t
que des noms d’oc&eacute;ans. Ils doivent donc &ecirc;tre supprim&eacute;s.
Premi&egrave;rement, la m&eacute;thode splice() est utilis&eacute;e pour supprimer les &eacute;l&eacute;ments Aral et Superior, et ins&eacute;rer les
&eacute;l&eacute;ments Atlantic et Indian. Le premier argument envoy&eacute; &agrave; splice(), l’entier 2, indique que l’op&eacute;ration doit
commencer par le troisi&egrave;me &eacute;l&eacute;ment dans la liste, qui est &agrave; l’index 2. Le deuxi&egrave;me argument, 2, indique que deux
&eacute;l&eacute;ments doivent &ecirc;tre supprim&eacute;s. Les arguments restants, Atlantic et Indian, sont des valeurs &agrave; ins&eacute;rer &agrave; l’index 2.
Derni&egrave;re mise &agrave; jour le 27/4/2013
32
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Deuxi&egrave;mement, la m&eacute;thode pop() est utilis&eacute;e pour supprimer le dernier &eacute;l&eacute;ment dans le tableau, Huron. Et
troisi&egrave;mement, la m&eacute;thode shift() est utilis&eacute;e pour supprimer le premier &eacute;l&eacute;ment dans le tableau, Victoria.
var oceans:Array = [&quot;Victoria&quot;, &quot;Pacific&quot;, &quot;Aral&quot;, &quot;Superior&quot;, &quot;Indian&quot;, &quot;Huron&quot;];
oceans.splice(2, 2, &quot;Arctic&quot;, &quot;Atlantic&quot;); // replaces Aral and Superior
oceans.pop(); // removes Huron
oceans.shift(); // removes Victoria
trace(oceans);// output: Pacific,Arctic,Atlantic,Indian
Les m&eacute;thodes pop() et shift() renvoient toutes les deux l’&eacute;l&eacute;ment qui a &eacute;t&eacute; supprim&eacute;. Pour une occurrence de Array,
le type de donn&eacute;es de la valeur renvoy&eacute;e est Object car les tableaux peuvent contenir des valeurs de n’importe quel type
de donn&eacute;es. Pour une occurrence de Vector, le type de donn&eacute;es de la valeur renvoy&eacute;e est le type de base du vecteur. La
m&eacute;thode splice() renvoie un tableau ou un vecteur contenant les valeurs supprim&eacute;es. Vous pouvez modifier
l’exemple du tableau oceans de fa&ccedil;on &agrave; ce que l’appel &agrave; splice() affecte le tableau renvoy&eacute; &agrave; une nouvelle variable de
tableau, comme illustr&eacute; dans l’exemple suivant :
var lakes:Array = oceans.splice(2, 2, &quot;Arctic&quot;, &quot;Atlantic&quot;);
trace(lakes); // output: Aral,Superior
Il se peut que vous rencontriez un code qui utilise l’op&eacute;rateur delete sur un &eacute;l&eacute;ment de l’objet Array. L’op&eacute;rateur
delete d&eacute;finit la valeur d’un &eacute;l&eacute;ment de tableau sur undefined, mais il ne supprime pas l’&eacute;l&eacute;ment du tableau. Par
exemple, le code suivant utilise l’op&eacute;rateur delete sur le troisi&egrave;me &eacute;l&eacute;ment dans le tableau oceans, mais la longueur
du tableau demeure &agrave; 5 :
var oceans:Array = [&quot;Arctic&quot;, &quot;Pacific&quot;, &quot;Victoria&quot;, &quot;Indian&quot;, &quot;Atlantic&quot;];
delete oceans[2];
trace(oceans);// output: Arctic,Pacific,,Indian,Atlantic
trace(oceans[2]); // output: undefined
trace(oceans.length); // output: 5
Vous pouvez tronquer un tableau ou un vecteur &agrave; l’aide d’une propri&eacute;t&eacute; length de tableau. Si vous d&eacute;finissez la
propri&eacute;t&eacute; length d’un tableau index&eacute; sur une longueur qui est moindre que la longueur actuelle du tableau, celui-ci
est tronqu&eacute; : tous les &eacute;l&eacute;ments stock&eacute;s &agrave; des num&eacute;ros d’index sup&eacute;rieurs &agrave; la nouvelle valeur length, diminu&eacute;e de 1,
sont supprim&eacute;s. Par exemple, si le tableau oceans &eacute;tait tri&eacute; de telle fa&ccedil;on que toutes les entr&eacute;es valides se trouvaient au
d&eacute;but du tableau, vous pourriez utiliser la propri&eacute;t&eacute; length pour supprimer les entr&eacute;es de fin de tableau, comme
l’indique le code ci-dessous :
var oceans:Array = [&quot;Arctic&quot;, &quot;Pacific&quot;, &quot;Victoria&quot;, &quot;Aral&quot;, &quot;Superior&quot;];
oceans.length = 2;
trace(oceans); // output: Arctic,Pacific
Remarque : si une propri&eacute;t&eacute; fixed de l’objet Vector est d&eacute;finie sur true, le nombre total d’&eacute;l&eacute;ments du vecteur reste
immuable. Si vous essayez de supprimer un &eacute;l&eacute;ment d’un vecteur de longueur fixe ou de tronquer celui-ci &agrave; l’aide des
techniques d&eacute;crites ici, une erreur se produit.
Tri d’un tableau
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Trois m&eacute;thodes, reverse(), sort() et sortOn(), vous permettent de modifier l’ordre d’un tableau index&eacute;, soit en
triant, soit en inversant l’ordre. Toutes ces m&eacute;thodes modifient le tableau existant. Le tableau ci-dessous r&eacute;sume ces
m&eacute;thodes et leurs comportements pour les objets Array et Vector :
Derni&egrave;re mise &agrave; jour le 27/4/2013
33
34
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
M&eacute;thode
Comportement d’Array
Comportement de Vector
reverse()
Modifie l’ordre des &eacute;l&eacute;ments de telle sorte que le dernier &eacute;l&eacute;ment
devient le premier &eacute;l&eacute;ment, le p&eacute;nulti&egrave;me le deuxi&egrave;me, etc.
Identique au comportement d’Array
sort()
Vous permet de trier les &eacute;l&eacute;ments du tableau de diverses fa&ccedil;ons
pr&eacute;d&eacute;finies, comme l’ordre alphab&eacute;tique ou num&eacute;rique. Vous pouvez
&eacute;galement sp&eacute;cifier un algorithme de tri personnalis&eacute;.
Trie les &eacute;l&eacute;ments suivant l’algorithme de tri
personnalis&eacute; que vous sp&eacute;cifiez
sortOn()
Vous permet de trier des objets qui ont une ou plusieurs propri&eacute;t&eacute;s en
commun en sp&eacute;cifiant la ou les propri&eacute;t&eacute;s &agrave; utiliser comme crit&egrave;res de
tri.
Non disponible dans la classe Vector
M&eacute;thode reverse()
La m&eacute;thode reverse() ne prend aucun param&egrave;tre et ne renvoie aucune valeur mais vous permet de faire basculer
l’ordre de votre tableau de son &eacute;tat actuel &agrave; l’ordre inverse. L’exemple suivant inverse l’ordre des oc&eacute;ans r&eacute;pertori&eacute;s
dans le tableau oceans :
var oceans:Array = [&quot;Arctic&quot;, &quot;Atlantic&quot;, &quot;Indian&quot;, &quot;Pacific&quot;];
oceans.reverse();
trace(oceans); // output: Pacific,Indian,Atlantic,Arctic
Tri de base avec la m&eacute;thode sort() (classe Array uniquement)
Pour une occurrence d’Array, la m&eacute;thode sort() r&eacute;organise les &eacute;l&eacute;ments dans un tableau &agrave; l’aide de l’ordre de tri par
d&eacute;faut. L’ordre de tri par d&eacute;faut poss&egrave;de les caract&eacute;ristiques suivantes :
• Le tri est sensible &agrave; la casse, ce qui signifie que les majuscules pr&eacute;c&eacute;dent les minuscules. Par exemple, la lettre D
pr&eacute;c&egrave;de la lettre b.
• Le tri est croissant, ce qui signifie que les codes de caract&egrave;re bas (A, par exemple) pr&eacute;c&eacute;dent les codes de caract&egrave;re
&eacute;lev&eacute;s (B, par exemple).
• Le tri place les valeurs identiques les unes &agrave; c&ocirc;t&eacute; des autres mais sans ordre particulier.
• Le tri est bas&eacute; sur des cha&icirc;nes, ce qui signifie que les &eacute;l&eacute;ments sont convertis en cha&icirc;nes avant d’&ecirc;tre compar&eacute;s (par
exemple, 10 pr&eacute;c&egrave;de 3 car la cha&icirc;ne &quot;1&quot; a un code de caract&egrave;re inf&eacute;rieur &agrave; celui de la cha&icirc;ne &quot;3&quot;).
Vous pouvez trier votre tableau en ignorant la casse ou par ordre d&eacute;croissant. Vous pouvez &eacute;galement trier les nombres
de votre tableau par ordre num&eacute;rique plut&ocirc;t que par ordre alphab&eacute;tique. La m&eacute;thode sort() de la classe Array poss&egrave;de
un param&egrave;tre options qui vous permet de modifier chaque caract&eacute;ristique de l’ordre de tri par d&eacute;faut. Les options
sont d&eacute;finies par un ensemble de constantes statiques dans la classe Array, comme indiqu&eacute; dans la liste suivante :
•
Array.CASEINSENSITIVE : cette option permet d’ignorer la casse lors du tri. Par exemple, la lettre minuscule b
pr&eacute;c&egrave;de la lettre majuscule D.
•
Array.DESCENDING : cette option inverse le tri croissant par d&eacute;faut. Par exemple, la lettre B pr&eacute;c&egrave;de la lettre A.
•
Array.UNIQUESORT : cette option permet d’arr&ecirc;ter le tri si deux valeurs identiques sont rep&eacute;r&eacute;es.
•
Array.NUMERIC : cette option permet d’effectuer un tri num&eacute;rique, de fa&ccedil;on &agrave; ce que 3 pr&eacute;c&egrave;de 10.
L’exemple suivant met en &eacute;vidence certaines de ces options. Un tableau appel&eacute; poets est cr&eacute;&eacute;. Il est tri&eacute; &agrave; l’aide de
plusieurs options.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
var poets:Array = [&quot;Blake&quot;, &quot;cummings&quot;, &quot;Angelou&quot;, &quot;Dante&quot;];
poets.sort(); // default sort
trace(poets); // output: Angelou,Blake,Dante,cummings
poets.sort(Array.CASEINSENSITIVE);
trace(poets); // output: Angelou,Blake,cummings,Dante
poets.sort(Array.DESCENDING);
trace(poets); // output: cummings,Dante,Blake,Angelou
poets.sort(Array.DESCENDING | Array.CASEINSENSITIVE); // use two options
trace(poets); // output: Dante,cummings,Blake,Angelou
Tri personnalis&eacute; avec la m&eacute;thode sort() (classes Array et Vector)
En plus du tri de base qui est disponible pour un objet Array, vous pouvez &eacute;galement &eacute;tablir une r&egrave;gle de tri
personnalis&eacute;e. Cette technique est la seule forme de m&eacute;thode sort() disponible pour la classe Vector. Pour d&eacute;finir un
tri personnalis&eacute;, vous r&eacute;digez une fonction de tri personnalis&eacute;e et la transmettez comme argument &agrave; la m&eacute;thode
sort().
Par exemple, si vous avez une liste de noms dans laquelle chaque &eacute;l&eacute;ment de liste contient le nom entier d’une personne
mais que vous souhaitez trier la liste par nom de famille, vous devez utiliser une fonction de tri personnalis&eacute; pour
analyser chaque &eacute;l&eacute;ment et utiliser le nom de famille dans la fonction de tri. Le code suivant indique comment
proc&eacute;der avec une fonction personnalis&eacute;e utilis&eacute;e comme param&egrave;tre pour la m&eacute;thode Array.sort() :
var names:Array = new Array(&quot;John Q. Smith&quot;, &quot;Jane Doe&quot;, &quot;Mike Jones&quot;);
function orderLastName(a, b):int
{
var lastName:RegExp = /\b\S+$/;
var name1 = a.match(lastName);
var name2 = b.match(lastName);
if (name1 &lt; name2)
{
return -1;
}
else if (name1 &gt; name2)
{
return 1;
}
else
{
return 0;
}
}
trace(names); // output: John Q. Smith,Jane Doe,Mike Jones
names.sort(orderLastName);
trace(names); // output: Jane Doe,Mike Jones,John Q. Smith
La fonction de tri personnalis&eacute; orderLastName() utilise une expression r&eacute;guli&egrave;re pour extraire le nom de famille de
chaque &eacute;l&eacute;ment &agrave; utiliser pour l’op&eacute;ration de comparaison. L’identifiant de fonction orderLastName est l’unique
param&egrave;tre utilis&eacute; lors de l’appel &agrave; la m&eacute;thode sort() sur le tableau names. La fonction de tri accepte deux param&egrave;tres,
a et b, car elle fonctionne sur deux &eacute;l&eacute;ments de tableau &agrave; la fois. La valeur renvoy&eacute;e de la fonction de tri indique la
mani&egrave;re dont les &eacute;l&eacute;ments doivent &ecirc;tre tri&eacute;s :
• Une valeur renvoy&eacute;e de -1 indique que le premier param&egrave;tre, a, pr&eacute;c&egrave;de le second param&egrave;tre, b.
• Une valeur renvoy&eacute;e de 1 indique que le second param&egrave;tre, b, pr&eacute;c&egrave;de le premier, a.
Derni&egrave;re mise &agrave; jour le 27/4/2013
35
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
• Une valeur renvoy&eacute;e de 0 indique que les &eacute;l&eacute;ments ont une pr&eacute;c&eacute;dence de tri &eacute;quivalente.
M&eacute;thode sortOn() (classe Array uniquement)
La m&eacute;thode sortOn() est con&ccedil;ue pour des objets Array avec des &eacute;l&eacute;ments contenant des objets. Ces objets doivent
avoir au moins une propri&eacute;t&eacute; en commun pouvant &ecirc;tre utilis&eacute;e comme cl&eacute; de tri. L’utilisation de la m&eacute;thode sortOn()
pour des tableaux d’autres types provoque des r&eacute;sultats inattendus.
Remarque : la classe Vector ne contient pas de m&eacute;thode sortOn(). Cette m&eacute;thode n’est disponible que pour les objets
Array.
L’exemple suivant modifie le tableau poets de fa&ccedil;on &agrave; ce que chaque &eacute;l&eacute;ment soit un objet plut&ocirc;t qu’une cha&icirc;ne.
Chaque objet contient &agrave; la fois le nom de famille du po&egrave;te et sa date de naissance.
var poets:Array = new Array();
poets.push({name:&quot;Angelou&quot;, born:&quot;1928&quot;});
poets.push({name:&quot;Blake&quot;, born:&quot;1757&quot;});
poets.push({name:&quot;cummings&quot;, born:&quot;1894&quot;});
poets.push({name:&quot;Dante&quot;, born:&quot;1265&quot;});
poets.push({name:&quot;Wang&quot;, born:&quot;701&quot;});
Vous pouvez utiliser la m&eacute;thode sortOn() pour trier le tableau par la propri&eacute;t&eacute; born. La m&eacute;thode sortOn() d&eacute;finit
deux param&egrave;tres, fieldName et options. L’argument fieldName doit &ecirc;tre sp&eacute;cifi&eacute; en tant que cha&icirc;ne. Dans l’exemple
suivant, la m&eacute;thode sortOn() est appel&eacute;e avec deux arguments, &quot;born&quot; et Array.NUMERIC. L’argument
Array.NUMERIC est utilis&eacute; pour v&eacute;rifier que le tri est effectu&eacute; par ordre num&eacute;rique plut&ocirc;t que par ordre alphab&eacute;tique.
Ceci est utile m&ecirc;me lorsque tous les nombres ont le m&ecirc;me nombre de chiffres car vous &ecirc;tes certain que le tri se fera
comme pr&eacute;vu si un nombre comportant un nombre inf&eacute;rieur ou sup&eacute;rieur de chiffres est ensuite ajout&eacute; au tableau.
poets.sortOn(&quot;born&quot;, Array.NUMERIC);
for (var i:int = 0; i &lt; poets.length; ++i)
{
trace(poets[i].name, poets[i].born);
}
/* output:
Wang 701
Dante 1265
Blake 1757
cummings 1894
Angelou 1928
*/
Tri sans modification du tableau d’origine (classe Array uniquement)
G&eacute;n&eacute;ralement, les m&eacute;thodes sort() et sortOn() modifient un tableau. Si vous souhaitez trier un tableau sans
modifier le tableau existant, transmettez la constante Array.RETURNINDEXEDARRAY avec le param&egrave;tre options. Cette
option indique aux m&eacute;thodes de renvoyer un nouveau tableau qui refl&egrave;te le tri et laisse le tableau d’origine inchang&eacute;.
Le tableau renvoy&eacute; par les m&eacute;thodes est un tableau simple de num&eacute;ros d’index qui refl&egrave;te le nouvel ordre de tri et ne
contient aucun &eacute;l&eacute;ment du tableau d’origine. Par exemple, pour trier le tableau poets par ann&eacute;e de naissance sans le
modifier, incluez la constante Array.RETURNINDEXEDARRAY dans l’argument transmis pour le param&egrave;tre options.
L’exemple suivant stocke les informations d’index renvoy&eacute;es dans un tableau nomm&eacute; indices et utilise le tableau
indices avec le tableau poets inchang&eacute; pour trier les po&egrave;tes dans l’ordre de leur ann&eacute;e de naissance :
Derni&egrave;re mise &agrave; jour le 27/4/2013
36
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
var indices:Array;
indices = poets.sortOn(&quot;born&quot;, Array.NUMERIC | Array.RETURNINDEXEDARRAY);
for (var i:int = 0; i &lt; indices.length; ++i)
{
var index:int = indices[i];
trace(poets[index].name, poets[index].born);
}
/* output:
Wang 701
Dante 1265
Blake 1757
cummings 1894
Angelou 1928
*/
Interrogation d’un tableau
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les quatre m&eacute;thodes restantes des classes Array et Vector, concat(), join(), slice(), toString(), interrogent
toutes le tableau sans le modifier. Les m&eacute;thodes concat() et slice() renvoient toutes les deux de nouveaux tableaux,
alors que les m&eacute;thodes join() et toString() renvoient des cha&icirc;nes. La m&eacute;thode concat() prend un nouveau tableau
ou une liste d’&eacute;l&eacute;ments comme arguments et le/la combine avec le tableau existant pour cr&eacute;er un tableau. La m&eacute;thode
slice() poss&egrave;de deux param&egrave;tres nomm&eacute;s startIndex et endIndex, et renvoie un nouveau tableau contenant une
copie des &eacute;l&eacute;ments d&eacute;coup&eacute;s du tableau existant. La d&eacute;coupe commence avec l’&eacute;l&eacute;ment &agrave; startIndex et se termine
avec l’&eacute;l&eacute;ment juste avant endIndex. Il convient d’insister : l’&eacute;l&eacute;ment &agrave; endIndex n’est pas compris dans la valeur
renvoy&eacute;e.
L’exemple suivant utilise concat() et slice() pour cr&eacute;er des tableaux &agrave; l’aide d’&eacute;l&eacute;ments d’autres tableaux :
var array1:Array = [&quot;alpha&quot;, &quot;beta&quot;];
var array2:Array = array1.concat(&quot;gamma&quot;, &quot;delta&quot;);
trace(array2); // output: alpha,beta,gamma,delta
var array3:Array = array1.concat(array2);
trace(array3); // output: alpha,beta,alpha,beta,gamma,delta
var array4:Array = array3.slice(2,5);
trace(array4); // output: alpha,beta,gamma
Vous pouvez utiliser les m&eacute;thodes join() et toString() pour interroger le tableau et renvoyer son contenu sous la
forme d’une cha&icirc;ne. Si aucun param&egrave;tre n’est utilis&eacute; pour la m&eacute;thode join(), les deux m&eacute;thodes se comportent de
fa&ccedil;on identique : elles renvoient une cha&icirc;ne contenant une liste de tous les &eacute;l&eacute;ments du tableau, s&eacute;par&eacute;s par une virgule.
La m&eacute;thode join(), contrairement &agrave; la m&eacute;thode toString(), accepte un param&egrave;tre nomm&eacute; delimiter, qui permet
de choisir le symbole &agrave; utiliser comme s&eacute;parateur entre chaque &eacute;l&eacute;ment de la cha&icirc;ne renvoy&eacute;e.
L’exemple suivant cr&eacute;e un tableau nomm&eacute; rivers et appelle &agrave; la fois join() et toString() pour renvoyer les valeurs
dans le tableau sous la forme d’une cha&icirc;ne. La m&eacute;thode toString() est utilis&eacute;e pour renvoyer des valeurs s&eacute;par&eacute;es par
une virgule (riverCSV), alors que la m&eacute;thode join() est utilis&eacute;e pour renvoyer des valeurs s&eacute;par&eacute;es par le caract&egrave;re +.
var rivers:Array = [&quot;Nile&quot;, &quot;Amazon&quot;, &quot;Yangtze&quot;, &quot;Mississippi&quot;];
var riverCSV:String = rivers.toString();
trace(riverCSV); // output: Nile,Amazon,Yangtze,Mississippi
var riverPSV:String = rivers.join(&quot;+&quot;);
trace(riverPSV); // output: Nile+Amazon+Yangtze+Mississippi
Derni&egrave;re mise &agrave; jour le 27/4/2013
37
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Il existe un probl&egrave;me avec la m&eacute;thode join() ; toutes les occurrences de tableau et de vecteur imbriqu&eacute;es sont toujours
renvoy&eacute;es avec des valeurs s&eacute;par&eacute;es par des virgules, quel que soit le s&eacute;parateur que vous sp&eacute;cifiez pour les &eacute;l&eacute;ments
de tableau principaux, comme illustr&eacute; dans l’exemple suivant :
var nested:Array = [&quot;b&quot;,&quot;c&quot;,&quot;d&quot;];
var letters:Array = [&quot;a&quot;,nested,&quot;e&quot;];
var joined:String = letters.join(&quot;+&quot;);
trace(joined); // output: a+b,c,d+e
Tableaux associatifs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un tableau associatif, parfois appel&eacute; hachage ou mappage, utilise des cl&eacute;s plut&ocirc;t qu’un index num&eacute;rique pour organiser
des valeurs stock&eacute;es. Chaque cl&eacute; dans un tableau associatif est une cha&icirc;ne unique qui est utilis&eacute;e pour acc&eacute;der &agrave; une
valeur stock&eacute;e. Un tableau associatif est une occurrence de la classe Object, ce qui signifie que chaque cl&eacute; correspond
&agrave; un nom de propri&eacute;t&eacute;. Les tableaux associatifs sont des collections non tri&eacute;es de paires de cl&eacute;s et de valeurs. Votre code
ne doit pas s’attendre &agrave; ce que les cl&eacute;s d’un tel tableau se pr&eacute;sentent dans un ordre pr&eacute;cis.
ActionScript 3.0 contient aussi un type avanc&eacute; de tableau associatif appel&eacute; dictionnaire. Les dictionnaires, qui sont des
occurrences de la classe Dictionary dans le package flash.utils, utilisent des cl&eacute;s de tout type de donn&eacute;es. En d’autres
termes, les cl&eacute;s de dictionnaire ne sont pas limit&eacute;es &agrave; des valeurs de type String.
Tableaux associatifs avec cl&eacute;s de cha&icirc;ne
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Deux m&eacute;thodes permettent de cr&eacute;er des tableaux associatifs dans ActionScript 3.0. La premi&egrave;re consiste &agrave; utiliser une
occurrence de Object. Celle-ci vous permet d’initialiser votre tableau avec un litt&eacute;ral d’objet. Une occurrence de la
classe Object, &eacute;galement appel&eacute;e objet g&eacute;n&eacute;rique, fonctionne comme un tableau associatif. Chaque nom de propri&eacute;t&eacute;
de l’objet g&eacute;n&eacute;rique devient la cl&eacute; qui permet d’acc&eacute;der &agrave; une valeur stock&eacute;e.
L’exemple suivant cr&eacute;e un tableau associatif appel&eacute; monitorInfo, &agrave; l’aide d’un litt&eacute;ral d’objet pour initialiser le tableau
avec deux paires de cl&eacute;s et de valeurs :
var monitorInfo:Object = {type:&quot;Flat Panel&quot;, resolution:&quot;1600 x 1200&quot;};
trace(monitorInfo[&quot;type&quot;], monitorInfo[&quot;resolution&quot;]);
// output: Flat Panel 1600 x 1200
Si vous n’avez pas besoin d’initialiser le tableau lors de la d&eacute;claration, vous pouvez utiliser le constructeur Object pour
cr&eacute;er le tableau, comme suit :
var monitorInfo:Object = new Object();
Une fois que le tableau est cr&eacute;&eacute; &agrave; l’aide d’un litt&eacute;ral d’objet ou du constructeur de la classe Object, vous pouvez lui
ajouter de nouvelles valeurs &agrave; l’aide de l’op&eacute;rateur ([]) d’acc&egrave;s au tableau ou de l’op&eacute;rateur point (.). L’exemple
suivant ajoute deux nouvelles valeurs &agrave; monitorArray :
monitorInfo[&quot;aspect ratio&quot;] = &quot;16:10&quot;; // bad form, do not use spaces
monitorInfo.colors = &quot;16.7 million&quot;;
trace(monitorInfo[&quot;aspect ratio&quot;], monitorInfo.colors);
// output: 16:10 16.7 million
Derni&egrave;re mise &agrave; jour le 27/4/2013
38
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
La cl&eacute; appel&eacute;e aspect ratio contient un caract&egrave;re d’espace. Cela est possible dans le cas de l’op&eacute;rateur ([]) d’acc&egrave;s
au tableau, mais avec l’op&eacute;rateur point, une erreur se produit. L’utilisation d’espace dans le nom de vos cl&eacute;s n’est donc
pas conseill&eacute;e.
La seconde m&eacute;thode pour cr&eacute;er un tableau associatif consiste &agrave; utiliser le constructeur Array (ou le constructeur d’une
classe dynamique), puis &agrave; utiliser l’op&eacute;rateur ([]) d’acc&egrave;s au tableau ou l’op&eacute;rateur point (.) pour ajouter les paires de
cl&eacute;s et de valeurs au tableau. Si vous d&eacute;clarez votre tableau associatif comme &eacute;tant de type Array, vous ne pouvez pas
utiliser de litt&eacute;ral d’objet pour l’initialiser. Ce code cr&eacute;e un tableau associatif appel&eacute; monitorInfo &agrave; l’aide du
constructeur Array, et ajoute les cl&eacute;s appel&eacute;es type et resolution, ainsi que leurs valeurs :
var monitorInfo:Array = new Array();
monitorInfo[&quot;type&quot;] = &quot;Flat Panel&quot;;
monitorInfo[&quot;resolution&quot;] = &quot;1600 x 1200&quot;;
trace(monitorInfo[&quot;type&quot;], monitorInfo[&quot;resolution&quot;]);
// output: Flat Panel 1600 x 1200
L’utilisation du constructeur Array pour cr&eacute;er un tableau associatif ne pr&eacute;sente aucun avantage. Vous ne pouvez pas
utiliser la propri&eacute;t&eacute; Array.length ou une m&eacute;thode de la classe Array avec des tableaux associatifs, m&ecirc;me si vous
utilisez le constructeur Array ou le type de donn&eacute;es Array. Il est pr&eacute;f&eacute;rable d’utiliser le constructeur Array pour cr&eacute;er
des tableaux index&eacute;s.
Tableaux associatifs avec cl&eacute;s d’objet (dictionnaires)
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser la classe Dictionary pour cr&eacute;er un tableau associatif qui utilise des objets pour les cl&eacute;s au lieu de
cha&icirc;nes. Ces tableaux sont parfois appel&eacute;s dictionnaires, hachages ou mappages. Par exemple, supposez que vous avez
une application qui d&eacute;termine l’emplacement d’un objet Sprite selon son association avec un conteneur sp&eacute;cifique.
Vous pouvez utiliser un objet Dictionary pour mapper chaque objet Sprite &agrave; un conteneur.
Le code suivant cr&eacute;e trois occurrences de la classe Sprite qui servent de cl&eacute;s pour l’objet Dictionary. La valeur GroupA
ou GroupB est affect&eacute;e &agrave; chaque cl&eacute;. Les valeurs peuvent &ecirc;tre de n’importe quel type de donn&eacute;es, mais dans cet exemple,
GroupA et GroupB sont des occurrences de la classe Object. Vous pouvez ensuite acc&eacute;der &agrave; la valeur associ&eacute;e &agrave; chaque
cl&eacute; avec l’op&eacute;rateur d’acc&egrave;s au tableau ([]), comme illustr&eacute; dans le code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
39
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
import flash.display.Sprite;
import flash.utils.Dictionary;
var groupMap:Dictionary = new Dictionary();
// objects to use
var spr1:Sprite =
var spr2:Sprite =
var spr3:Sprite =
as keys
new Sprite();
new Sprite();
new Sprite();
// objects to use as values
var groupA:Object = new Object();
var groupB:Object = new Object();
// Create new key-value pairs in dictionary.
groupMap[spr1] = groupA;
groupMap[spr2] = groupB;
groupMap[spr3] = groupB;
if (groupMap[spr1]
{
trace(&quot;spr1 is
}
if (groupMap[spr2]
{
trace(&quot;spr2 is
}
if (groupMap[spr3]
{
trace(&quot;spr3 is
}
== groupA)
in groupA&quot;);
== groupB)
in groupB&quot;);
== groupB)
in groupB&quot;);
It&eacute;ration avec des cl&eacute;s d’objet
Vous pouvez parcourir en boucle le contenu d’un objet Dictionary &agrave; l’aide d’une boucle for..in ou d’une boucle for
each..in. Une boucle for..in vous permet d’effectuer une it&eacute;ration en fonction des cl&eacute;s, tandis qu’une boucle for
each..in vous permet d’effectuer une it&eacute;ration en fonction des valeurs associ&eacute;es &agrave; chaque cl&eacute;.
Utilisez la boucle for..in pour acc&eacute;der directement aux cl&eacute;s d’objet d’un objet Dictionary. Vous pouvez &eacute;galement
acc&eacute;der aux valeurs de l’objet Dictionary avec l’op&eacute;rateur d’acc&egrave;s au tableau ([]). Le code suivant utilise l’exemple
pr&eacute;c&eacute;dent du dictionnaire groupMap pour indiquer comment parcourir en boucle un objet Dictionary avec la boucle
for..in :
for (var key:Object in groupMap)
{
trace(key, groupMap[key]);
}
/* output:
[object Sprite] [object Object]
[object Sprite] [object Object]
[object Sprite] [object Object]
*/
Utilisez la boucle for each..in pour acc&eacute;der directement aux valeurs d’un objet Dictionary. Le code suivant utilise
&eacute;galement le dictionnaire groupMap pour indiquer comment parcourir en boucle un objet Dictionary avec la boucle
for each..in :
Derni&egrave;re mise &agrave; jour le 27/4/2013
40
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
for each (var item:Object in groupMap)
{
trace(item);
}
/* output:
[object Object]
[object Object]
[object Object]
*/
Cl&eacute;s d’objet et gestion de la m&eacute;moire
Adobe&reg; Flash&reg; Player et Adobe&reg; AIR™ utilisent un syst&egrave;me de nettoyage permettant de r&eacute;cup&eacute;rer la m&eacute;moire qui n’est
plus utilis&eacute;e. Lorsque aucune r&eacute;f&eacute;rence ne pointe vers un objet, ce dernier peut &ecirc;tre nettoy&eacute; et la m&eacute;moire r&eacute;cup&eacute;r&eacute;e
au prochain nettoyage. Par exemple, le code suivant cr&eacute;e un objet et lui affecte une r&eacute;f&eacute;rence &agrave; la variable myObject :
var myObject:Object = new Object();
Tant que des r&eacute;f&eacute;rences &agrave; l’objet existent, le syst&egrave;me de nettoyage ne r&eacute;cup&egrave;re pas la m&eacute;moire que l’objet occupe. Si la
valeur de myObject est modifi&eacute;e et qu’elle pointe vers un autre objet ou qu’elle est d&eacute;finie sur null, la m&eacute;moire
occup&eacute;e par l’objet d’origine peut &ecirc;tre nettoy&eacute;e. N&eacute;anmoins, aucune autre r&eacute;f&eacute;rence &agrave; l’objet d’origine ne doit exister.
Si vous utilisez myObject comme cl&eacute; dans un objet Dictionary, vous cr&eacute;ez une autre r&eacute;f&eacute;rence &agrave; l’objet d’origine. Par
exemple, le code suivant cr&eacute;e deux r&eacute;f&eacute;rences &agrave; un objet, la variable myObject et la cl&eacute; dans l’objet myMap :
import flash.utils.Dictionary;
var myObject:Object = new Object();
var myMap:Dictionary = new Dictionary();
myMap[myObject] = &quot;foo&quot;;
Pour que l’objet r&eacute;f&eacute;renc&eacute; par myObject puisse &ecirc;tre nettoy&eacute;, vous devez supprimer toutes ses r&eacute;f&eacute;rences. Dans ce cas,
vous devez modifier la valeur de myObject et supprimer la cl&eacute; myObject de myMap, comme indiqu&eacute; dans le code
suivant :
myObject = null;
delete myMap[myObject];
Vous pouvez &eacute;galement utiliser le param&egrave;tre useWeakReference du constructeur Dictionary pour que toutes les cl&eacute;s
de dictionnaire deviennent des r&eacute;f&eacute;rences faibles. Le syst&egrave;me de nettoyage ignore les r&eacute;f&eacute;rences faibles. Par cons&eacute;quent,
un objet n’ayant que des r&eacute;f&eacute;rences faibles peut &ecirc;tre nettoy&eacute;. Par exemple, dans le code suivant, vous n’avez pas besoin
de supprimer la cl&eacute; myObject de myMap pour que l’objet puisse &ecirc;tre nettoy&eacute; :
import flash.utils.Dictionary;
var myObject:Object = new Object();
var myMap:Dictionary = new Dictionary(true);
myMap[myObject] = &quot;foo&quot;;
myObject = null; // Make object eligible for garbage collection.
Tableaux multidimensionnels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les tableaux multidimensionnels contiennent d’autres tableaux comme &eacute;l&eacute;ments. Prenons par exemple une liste de
t&acirc;ches stock&eacute;e sous forme de tableau index&eacute; de cha&icirc;nes :
Derni&egrave;re mise &agrave; jour le 27/4/2013
41
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
var tasks:Array = [&quot;wash dishes&quot;, &quot;take out trash&quot;];
Pour stocker une liste de t&acirc;ches distincte pour chaque jour de la semaine, vous pouvez cr&eacute;er un tableau
multidimensionnel avec un &eacute;l&eacute;ment pour chaque jour. Chaque &eacute;l&eacute;ment contient &agrave; son tour un tableau index&eacute;
(semblable au tableau tasks) qui stocke la liste des t&acirc;ches. Vous pouvez utiliser n’importe quelle combinaison de
tableaux index&eacute;s ou associatifs dans des tableaux multidimensionnels. Les exemples des sections suivantes utilisent soit
deux tableaux index&eacute;s soit un tableau associatif de tableaux index&eacute;s. Vous pouvez essayer les autres combinaisons pour
vous exercer.
Deux tableaux index&eacute;s
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous utilisez deux tableaux index&eacute;s, vous pouvez visualiser le r&eacute;sultat sous forme de tableau ou de feuille de
calcul. Les &eacute;l&eacute;ments du premier tableau repr&eacute;sentent les lignes alors que les &eacute;l&eacute;ments du second tableau repr&eacute;sentent
les colonnes.
Par exemple, le tableau multidimensionnel suivant utilise deux tableaux index&eacute;s pour suivre des listes de t&acirc;ches pour
chaque jour de la semaine. Le premier tableau, masterTaskList, est cr&eacute;&eacute; &agrave; l’aide du constructeur de classe Array.
Chaque &eacute;l&eacute;ment du tableau repr&eacute;sente un jour de la semaine, avec l’index 0 repr&eacute;sentant lundi et l’index 6 dimanche.
Ces &eacute;l&eacute;ments peuvent &ecirc;tre consid&eacute;r&eacute;s comme les lignes du tableau. Vous pouvez cr&eacute;er la liste de t&acirc;ches de chaque jour
en affectant un litt&eacute;ral de tableau &agrave; chacun des sept &eacute;l&eacute;ments que vous cr&eacute;ez dans le tableau masterTaskList. Les
litt&eacute;raux de tableau repr&eacute;sentent les colonnes du tableau.
var masterTaskList:Array = new Array();
masterTaskList[0] = [&quot;wash dishes&quot;, &quot;take out trash&quot;];
masterTaskList[1] = [&quot;wash dishes&quot;, &quot;pay bills&quot;];
masterTaskList[2] = [&quot;wash dishes&quot;, &quot;dentist&quot;, &quot;wash dog&quot;];
masterTaskList[3] = [&quot;wash dishes&quot;];
masterTaskList[4] = [&quot;wash dishes&quot;, &quot;clean house&quot;];
masterTaskList[5] = [&quot;wash dishes&quot;, &quot;wash car&quot;, &quot;pay rent&quot;];
masterTaskList[6] = [&quot;mow lawn&quot;, &quot;fix chair&quot;];
Vous pouvez acc&eacute;der &agrave; des &eacute;l&eacute;ments particuliers sur toute liste des t&acirc;ches &agrave; l’aide de l’op&eacute;rateur d’acc&egrave;s au tableau ([]).
Le premier groupe de crochets repr&eacute;sente le jour de la semaine et le second la liste de t&acirc;ches pour ce jour. Par exemple,
pour r&eacute;cup&eacute;rer la seconde t&acirc;che de la liste du mercredi, utilisez d’abord l’index 2 pour mercredi puis utilisez l’index 1
pour la seconde t&acirc;che dans la liste.
trace(masterTaskList[2][1]); // output: dentist
Pour r&eacute;cup&eacute;rer la premi&egrave;re t&acirc;che de la liste du dimanche, utilisez l’index 6 pour dimanche et l’index 0 pour la premi&egrave;re
t&acirc;che sur la liste.
trace(masterTaskList[6][0]); // output: mow lawn
Tableau associatif avec un tableau index&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour faciliter l’acc&egrave;s aux tableaux, vous pouvez utiliser un tableau associatif pour les jours de la semaine et un tableau
index&eacute; pour les listes de t&acirc;che. Les tableaux associatifs vous permettent d’utiliser une syntaxe &agrave; point lorsque vous vous
r&eacute;f&eacute;rez &agrave; un jour particulier de la semaine, mais n&eacute;cessitent un traitement d’ex&eacute;cution suppl&eacute;mentaire pour acc&eacute;der &agrave;
chaque &eacute;l&eacute;ment du tableau associatif. L’exemple suivant utilise un tableau associatif comme base d’une liste de t&acirc;ches,
avec une paire de cl&eacute;s et de valeurs pour chaque jour de la semaine :
Derni&egrave;re mise &agrave; jour le 27/4/2013
42
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
var masterTaskList:Object = new Object();
masterTaskList[&quot;Monday&quot;] = [&quot;wash dishes&quot;, &quot;take out trash&quot;];
masterTaskList[&quot;Tuesday&quot;] = [&quot;wash dishes&quot;, &quot;pay bills&quot;];
masterTaskList[&quot;Wednesday&quot;] = [&quot;wash dishes&quot;, &quot;dentist&quot;, &quot;wash dog&quot;];
masterTaskList[&quot;Thursday&quot;] = [&quot;wash dishes&quot;];
masterTaskList[&quot;Friday&quot;] = [&quot;wash dishes&quot;, &quot;clean house&quot;];
masterTaskList[&quot;Saturday&quot;] = [&quot;wash dishes&quot;, &quot;wash car&quot;, &quot;pay rent&quot;];
masterTaskList[&quot;Sunday&quot;] = [&quot;mow lawn&quot;, &quot;fix chair&quot;];
La syntaxe &agrave; point rend le code plus lisible car elle &eacute;vite d’utiliser plusieurs groupes de crochets.
trace(masterTaskList.Wednesday[1]); // output: dentist
trace(masterTaskList.Sunday[0]);// output: mow lawn
Vous pouvez parcourir en boucle la liste des t&acirc;ches en utilisant une boucle for..in, mais vous devez utiliser
l’op&eacute;rateur d’acc&egrave;s au tableau ([]), en lieu et place de la syntaxe &agrave; point, pour acc&eacute;der &agrave; la valeur associ&eacute;e &agrave; chaque cl&eacute;.
Etant donn&eacute; que masterTaskList est un tableau associatif, les &eacute;l&eacute;ments ne sont pas n&eacute;cessairement r&eacute;cup&eacute;r&eacute;s dans
l’ordre que vous attendez, comme l’indique l’exemple suivant :
for (var day:String in masterTaskList)
{
trace(day + &quot;: &quot; + masterTaskList[day])
}
/* output:
Sunday: mow lawn,fix chair
Wednesday: wash dishes,dentist,wash dog
Friday: wash dishes,clean house
Thursday: wash dishes
Monday: wash dishes,take out trash
Saturday: wash dishes,wash car,pay rent
Tuesday: wash dishes,pay bills
*/
Clonage de tableaux
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Array ne poss&egrave;de aucune m&eacute;thode int&eacute;gr&eacute;e pour effectuer des copies de tableaux. Vous pouvez cr&eacute;er une
copie simple d’un tableau en appelant la m&eacute;thode concat() ou slice() sans arguments. Dans une copie simple, si le
tableau d’origine a des &eacute;l&eacute;ments qui sont des objets, seules les r&eacute;f&eacute;rences aux objets sont copi&eacute;es (et non les objets). La
copie pointe vers les m&ecirc;mes objets que l’original. Tout changement effectu&eacute; sur les objets appara&icirc;t dans les deux
tableaux.
Dans une copie en profondeur, les objets se trouvant dans le tableau d’origine sont copi&eacute;s &eacute;galement de fa&ccedil;on &agrave; ce que
le nouveau tableau ne pointe pas vers les m&ecirc;mes objets que le tableau d’origine. La copie en profondeur exige plus
d’une ligne de code, ce qui n&eacute;cessite g&eacute;n&eacute;ralement la cr&eacute;ation d’une fonction. Une telle fonction peut &ecirc;tre cr&eacute;&eacute;e comme
fonction d’utilitaire globale ou comme m&eacute;thode d’une sous-classe Array.
L’exemple suivant d&eacute;finit une fonction appel&eacute;e clone() qui effectue une copie en profondeur. L’algorithme est issu
d’une technique de programmation Java courante. La fonction cr&eacute;e une copie en profondeur en s&eacute;rialisant le tableau
en une occurrence de la classe ByteArray puis en relisant le tableau dans un nouveau tableau. Cette fonction accepte
un objet de fa&ccedil;on &agrave; ce qu’il puisse &ecirc;tre utilis&eacute; &agrave; la fois avec des tableaux index&eacute;s et des tableaux associatifs, comme
indiqu&eacute; dans le code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
43
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
import flash.utils.ByteArray;
function clone(source:Object):*
{
var myBA:ByteArray = new ByteArray();
myBA.writeObject(source);
myBA.position = 0;
return(myBA.readObject());
}
Extension de la classe Array
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Array est l’une des classes de base non finale, c’est-&agrave;-dire que vous pouvez cr&eacute;er votre sous-classe d’Array.
Cette section d&eacute;crit comment cr&eacute;er une sous-classe d’Array et d&eacute;crit les probl&egrave;mes pouvant se poser pendant le
processus.
Comme mentionn&eacute; pr&eacute;c&eacute;demment, les tableaux dans ActionScript ne sont pas typ&eacute;s, mais vous pouvez cr&eacute;er une sousclasse d’Array qui accepte des &eacute;l&eacute;ments d’un seul type de donn&eacute;es. L’exemple fourni dans les sections suivantes d&eacute;finit
une sous-classe Array appel&eacute;e TypedArray qui limite ses &eacute;l&eacute;ments &agrave; des valeurs du type de donn&eacute;es indiqu&eacute; dans le
premier param&egrave;tre. La classe TypedArray est pr&eacute;sent&eacute;e comme un exemple de la fa&ccedil;on dont la classe Array est &eacute;tendue
et risque de ne pas &ecirc;tre adapt&eacute;e &agrave; des fins de production pour diff&eacute;rentes raisons. Premi&egrave;rement, la v&eacute;rification du type
a lieu lors de l’ex&eacute;cution plut&ocirc;t que de la compilation. Deuxi&egrave;mement, lorsqu’une m&eacute;thode TypedArray rencontre une
incompatibilit&eacute;, elle est ignor&eacute;e et aucune exception n’est renvoy&eacute;e, m&ecirc;me si vous pouvez facilement modifier les
m&eacute;thodes pour renvoyer des exceptions. Troisi&egrave;mement, la classe ne peut pas emp&ecirc;cher l’utilisation de l’op&eacute;rateur
d’acc&egrave;s au tableau pour ins&eacute;rer des valeurs de n’importe quel type dans le tableau. Quatri&egrave;mement, le style de codage
privil&eacute;gie la simplicit&eacute; par rapport &agrave; l’optimisation des performances.
Remarque : vous pouvez utiliser la technique d&eacute;crite ici pour cr&eacute;er un tableau typ&eacute;. Cependant, utiliser un objet Vector
constitue une meilleure d&eacute;marche. Une occurrence de Vector est un v&eacute;ritable tableau typ&eacute;. Elle d&eacute;passe la classe Array ou
toute sous-classe par ses performances et ses am&eacute;liorations. Une illustration de la cr&eacute;ation d’une sous-classe Array
constitue l’objet de cette description.
D&eacute;claration de la sous-classe
Utilisez le mot-cl&eacute; extends pour indiquer qu’une classe est une sous-classe d’Array. Une sous-classe d’Array doit
utiliser l’attribut dynamic, comme la classe Array. Autrement, votre sous-classe ne fonctionne pas correctement.
Le code suivant repr&eacute;sente la d&eacute;finition de la classe TypedArray, qui comporte une constante contenant le type de
donn&eacute;es, une m&eacute;thode de constructeur et les quatre m&eacute;thodes permettant d’ajouter des &eacute;l&eacute;ments au tableau. Le code
pour chaque m&eacute;thode est omis dans cet exemple, mais il est d&eacute;crit de fa&ccedil;on d&eacute;taill&eacute;e dans les sections qui suivent :
Derni&egrave;re mise &agrave; jour le 27/4/2013
44
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
public dynamic class TypedArray extends Array
{
private const dataType:Class;
public function TypedArray(...args) {}
AS3 override function concat(...args):Array {}
AS3 override function push(...args):uint {}
AS3 override function splice(...args) {}
AS3 override function unshift(...args):uint {}
}
Les quatre m&eacute;thodes de remplacement utilisent l’espace de nom AS3 au lieu de l’attribut public car cet exemple
suppose que l’option -as3 du compilateur est d&eacute;finie sur true et l’option -es du compilateur sur false. Il s’agit des
param&egrave;tres par d&eacute;faut pour Adobe Flash Builder et AdobeFlashProfessional.
Si vous &ecirc;tes un d&eacute;veloppeur exp&eacute;riment&eacute; et que vous pr&eacute;f&eacute;rez utiliser l’h&eacute;ritage de prototype, vous pouvez apporter
deux changements mineurs &agrave; la classe TypedArray afin qu’elle compile avec l’option -es du compilateur d&eacute;finie sur
true. Commencez par supprimer toutes les occurrences de l’attribut override et remplacez l’espace de nom AS3 par
l’attribut public. Remplacez ensuite Array.prototype pour les quatre occurrences de super.
Constructeur TypedArray
Le constructeur de sous-classe pose un d&eacute;fi int&eacute;ressant car il doit accepter une liste d’arguments de longueur arbitraire.
Il s’agit de savoir comment transf&eacute;rer les arguments au superconstructeur pour cr&eacute;er le tableau. Si vous transmettez la
liste des arguments sous forme d’un tableau, le superconstructeur le consid&egrave;re comme un seul argument de type Array
et le tableau r&eacute;sultant a toujours une longueur d’1 &eacute;l&eacute;ment. Le transfert de listes d’arguments se fait g&eacute;n&eacute;ralement au
moyen de la m&eacute;thode Function.apply(), qui prend un tableau d’arguments comme second param&egrave;tre mais le
convertit en une liste d’arguments lors de l’ex&eacute;cution de la fonction. Malheureusement, vous ne pouvez pas utiliser la
m&eacute;thode Function.apply() avec des constructeurs.
La seule solution est de recr&eacute;er la logique du constructeur Array dans le constructeur TypedArray. Le code suivant
indique l’algorithme utilis&eacute; dans le constructeur de classe Array, que vous pouvez r&eacute;utiliser dans votre constructeur de
sous-classe Array :
Derni&egrave;re mise &agrave; jour le 27/4/2013
45
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
public dynamic class Array
{
public function Array(...args)
{
var n:uint = args.length
if (n == 1 &amp;&amp; (args[0] is Number))
{
var dlen:Number = args[0];
var ulen:uint = dlen;
if (ulen != dlen)
{
throw new RangeError(&quot;Array index is not a 32-bit unsigned integer (&quot;+dlen+&quot;)&quot;);
}
length = ulen;
}
else
{
length = n;
for (var i:int=0; i &lt; n; i++)
{
this[i] = args[i]
}
}
}
}
Le constructeur TypedArray partage une grande partie du code du constructeur Array, avec seulement quatre
changements apport&eacute;s au code. Premi&egrave;rement, la liste des param&egrave;tres comprend un nouveau param&egrave;tre obligatoire de
type Class qui permet d’indiquer le type de donn&eacute;es du tableau. Deuxi&egrave;mement, le type de donn&eacute;es transmis au
constructeur est affect&eacute; &agrave; la variable dataType. Troisi&egrave;mement, dans l’instruction else, la valeur de la propri&eacute;t&eacute;
length est affect&eacute;e apr&egrave;s la boucle for de fa&ccedil;on &agrave; ce que length comprenne uniquement des arguments du type
correct. Quatri&egrave;mement, le corps de la boucle for utilise la version de remplacement de la m&eacute;thode push() de fa&ccedil;on
&agrave; ce que seuls des arguments du type de donn&eacute;es correct soient ajout&eacute;s au tableau. L’exemple suivant pr&eacute;sente la
fonction constructeur TypedArray :
Derni&egrave;re mise &agrave; jour le 27/4/2013
46
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
public dynamic class TypedArray extends Array
{
private var dataType:Class;
public function TypedArray(typeParam:Class, ...args)
{
dataType = typeParam;
var n:uint = args.length
if (n == 1 &amp;&amp; (args[0] is Number))
{
var dlen:Number = args[0];
var ulen:uint = dlen
if (ulen != dlen)
{
throw new RangeError(&quot;Array index is not a 32-bit unsigned integer (&quot;+dlen+&quot;)&quot;)
}
length = ulen;
}
else
{
for (var i:int=0; i &lt; n; i++)
{
// type check done in push()
this.push(args[i])
}
length = this.length;
}
}
}
M&eacute;thodes de remplacement TypedArray
La classe TypedArray remplace les quatre m&eacute;thodes de la classe Array qui permettent d’ajouter des &eacute;l&eacute;ments &agrave; un
tableau. Dans chaque cas, la m&eacute;thode de remplacement ajoute une v&eacute;rification du type qui emp&ecirc;che d’ajouter des
&eacute;l&eacute;ments qui ne sont pas du type de donn&eacute;es correct. Chaque m&eacute;thode appelle ensuite sa version de superclasse.
La m&eacute;thode push() parcourt en boucle la liste des arguments avec une boucle for..in et effectue une v&eacute;rification du
type sur chaque argument. Les arguments qui ne sont pas de type correct sont supprim&eacute;s du tableau args avec la
m&eacute;thode splice(). Une fois que la boucle for..in se termine, le tableau args contient des valeurs de type dataType
uniquement. La version de superclasse de push() est ensuite appel&eacute;e avec le tableau args mis &agrave; jour, comme indiqu&eacute;
dans le code suivant :
AS3 override function push(...args):uint
{
for (var i:* in args)
{
if (!(args[i] is dataType))
{
args.splice(i,1);
}
}
return (super.push.apply(this, args));
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
47
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
La m&eacute;thode concat() cr&eacute;e un TypedArray temporaire appel&eacute; passArgs pour stocker les arguments soumis &agrave; la
v&eacute;rification de type. Ceci permet de r&eacute;utiliser le code de v&eacute;rification de type qui existe dans la m&eacute;thode push(). Une
boucle for..in effectue une it&eacute;ration sur le tableau args et appelle push() sur chaque argument. Etant donn&eacute; que
passArgs est typ&eacute; sous la forme TypedArray, la version TypedArray de push() est ex&eacute;cut&eacute;e. La m&eacute;thode concat()
appelle ensuite sa version de superclasse, comme indiqu&eacute; dans le code suivant :
AS3 override function concat(...args):Array
{
var passArgs:TypedArray = new TypedArray(dataType);
for (var i:* in args)
{
// type check done in push()
passArgs.push(args[i]);
}
return (super.concat.apply(this, passArgs));
}
La m&eacute;thode splice() prend une liste d’arguments arbitraire, mais les deux premiers arguments se r&eacute;f&egrave;rent toujours
&agrave; un num&eacute;ro d’index et au nombre d’&eacute;l&eacute;ments &agrave; supprimer. C’est pourquoi la m&eacute;thode de remplacement splice()
effectue la v&eacute;rification de type uniquement pour les &eacute;l&eacute;ments du tableau args dans les positions d’index 2 ou
sup&eacute;rieures. Il est int&eacute;ressant de noter que dans le code, il semble y avoir un appel r&eacute;cursif &agrave; splice() &agrave; l’int&eacute;rieur de
la boucle for, mais en r&eacute;alit&eacute;, ce n’est pas le cas car args est de type Array et non de type TypedArray, ce qui signifie
que l’appel &agrave; args.splice() est un appel &agrave; la version de superclasse de la m&eacute;thode. Une fois que la boucle for..in
se termine, le tableau args contient des valeurs du type correct uniquement dans les positions d’index 2 ou
sup&eacute;rieures, et splice() appelle sa version de superclasse, comme indiqu&eacute; dans le code suivant :
AS3 override function splice(...args):*
{
if (args.length &gt; 2)
{
for (var i:int=2; i&lt; args.length; i++)
{
if (!(args[i] is dataType))
{
args.splice(i,1);
}
}
}
return (super.splice.apply(this, args));
}
La m&eacute;thode unshift(), qui ajoute des &eacute;l&eacute;ments au d&eacute;but d’un tableau, accepte une liste d’arguments arbitraire
&eacute;galement. La m&eacute;thode de remplacement unshift() utilise un algorithme tr&egrave;s semblable &agrave; celui utilis&eacute; par la m&eacute;thode
push(), comme indiqu&eacute; dans le code suivant :
AS3 override function unshift(...args):uint
{
for (var i:* in args)
{
if (!(args[i] is dataType))
{
args.splice(i,1);
}
}
return (super.unshift.apply(this, args));
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
48
49
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Exemple de tableau : PlayList
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple PlayList pr&eacute;sente les techniques d’utilisation des tableaux, dans le contexte d’une application de lecture
musicale qui g&egrave;re une liste de chansons. Ces techniques sont les suivantes :
• Cr&eacute;ation d’un tableau index&eacute;
• Ajout d’&eacute;l&eacute;ments &agrave; un tableau index&eacute;
• Tri d’un tableau d’objets en fonction de diff&eacute;rentes propri&eacute;t&eacute;s, &agrave; l’aide d’options de tri diff&eacute;rentes
• Conversion d’un tableau en une cha&icirc;ne s&eacute;par&eacute;e par des caract&egrave;res
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application PlayList se trouvent dans le
dossier Samples/PlayList. L’application se compose des fichiers suivants :
Fichier
Description
PlayList.mxml
Fichier d’application principal dans Flash (FLA) ou Flex (MXML).
ou
PlayList.fla
com/example/programmingas3/playlist/PlayList.as
Classe repr&eacute;sentant une liste de morceaux. Elle utilise un tableau
pour enregistrer la liste et g&egrave;re le tri des &eacute;l&eacute;ments de la liste.
com/example/programmingas3/playlist/Song.as
Objet de valeur repr&eacute;sentant des informations sur une seule
chanson. Les &eacute;l&eacute;ments g&eacute;r&eacute;s par la classe PlayList sont des
occurrences Song.
com/example/programmingas3/playlist/SortProperty.as
Pseudo-&eacute;num&eacute;ration dont les valeurs disponibles repr&eacute;sentent
les propri&eacute;t&eacute;s de la classe Song en fonction desquelles une liste
d’objets Song peut &ecirc;tre tri&eacute;e.
Pr&eacute;sentation de la classe PlayList
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe PlayList g&egrave;re un ensemble d’objets Song. Elle a des m&eacute;thodes publiques qui permettent d’ajouter une chanson
&agrave; la liste de lecture (la m&eacute;thode addSong()) et de trier les chansons dans la liste (la m&eacute;thode sortList()). En outre,
la classe comprend une propri&eacute;t&eacute; d’accesseur en lecture seule, songList, qui permet d’acc&eacute;der au groupe de chansons
dans la liste de lecture. En interne, la classe PlayList conserve une trace de ses chansons &agrave; l’aide d’une variable Array
priv&eacute;e :
public class PlayList
{
private var _songs:Array;
private var _currentSort:SortProperty = null;
private var _needToSort:Boolean = false;
...
}
En plus de la variable Array _songs utilis&eacute;e par la classe PlayList pour conserver une trace de sa liste de chansons, deux
autres variables priv&eacute;es v&eacute;rifient si la liste doit &ecirc;tre tri&eacute;e (_needToSort) et contr&ocirc;lent la propri&eacute;t&eacute; sur laquelle est bas&eacute;
le tri de la liste de chansons &agrave; un moment donn&eacute; (_currentSort).
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Comme avec tous les objets, lorsque vous avez d&eacute;clar&eacute; une occurrence de Array, vous n’avez effectu&eacute; que la moiti&eacute; du
travail consistant &agrave; cr&eacute;er un tableau. Avant d’acc&eacute;der &agrave; des m&eacute;thodes ou &agrave; des propri&eacute;t&eacute;s d’une occurrence de Array,
cette derni&egrave;re doit &ecirc;tre instanci&eacute;e dans le constructeur de la classe PlayList.
public function PlayList()
{
this._songs = new Array();
// Set the initial sorting.
this.sortList(SortProperty.TITLE);
}
La premi&egrave;re ligne du constructeur instancie la variable _songs pour qu’elle puisse &ecirc;tre utilis&eacute;e. En outre, la m&eacute;thode
sortList() est appel&eacute;e pour d&eacute;finir la propri&eacute;t&eacute; de tri initiale.
Ajout d’une chanson &agrave; la liste
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsqu’un utilisateur ajoute une nouvelle chanson dans l’application, le code dans le formulaire de saisie des donn&eacute;es
appelle la m&eacute;thode addSong() de la classe PlayList.
/**
* Adds a song to the playlist.
*/
public function addSong(song:Song):void
{
this._songs.push(song);
this._needToSort = true;
}
A l’int&eacute;rieur de addSong(), la m&eacute;thode push() du tableau _songs est appel&eacute;e. Ceci permet d’ajouter l’objet Song
transmis &agrave; addSong() en tant que nouvel &eacute;l&eacute;ment dans ce tableau. Avec la m&eacute;thode push() , le nouvel &eacute;l&eacute;ment est
ajout&eacute; &agrave; la fin du tableau, ind&eacute;pendamment du tri appliqu&eacute; pr&eacute;c&eacute;demment. Ceci signifie qu’une fois que la m&eacute;thode
push() a &eacute;t&eacute; appel&eacute;e, la liste des chansons risque de ne plus &ecirc;tre tri&eacute;e correctement. Par cons&eacute;quent, la variable
_needToSort est d&eacute;finie sur true. Th&eacute;oriquement, la m&eacute;thode sortList() pourrait &ecirc;tre appel&eacute;e imm&eacute;diatement
afin d’&eacute;viter de v&eacute;rifier si la liste est tri&eacute;e ou non &agrave; un moment donn&eacute;. En pratique, cependant, la liste des chansons n’a
pas besoin d’&ecirc;tre tri&eacute;e jusqu’au moment pr&eacute;c&eacute;dant imm&eacute;diatement sa r&eacute;cup&eacute;ration. En retardant l’op&eacute;ration de tri,
l’application n’effectue pas de tri inutile si, par exemple, plusieurs chansons sont ajout&eacute;es &agrave; la liste avant sa
r&eacute;cup&eacute;ration.
Tri de la liste de chansons
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Etant donn&eacute; que les occurrences Song g&eacute;r&eacute;es par la liste de lecture sont des objets complexes, les utilisateurs de
l’application peuvent trier la liste de lecture en fonction de diff&eacute;rentes propri&eacute;t&eacute;s (titre de la chanson ou ann&eacute;e de
publication, par exemple). Dans l’application PlayList, le tri de la liste des chansons s’effectue en trois &eacute;tapes :
identification de la propri&eacute;t&eacute; sur laquelle est bas&eacute; le tri de la liste, indication des options de tri &agrave; utiliser lors du tri en
fonction de cette propri&eacute;t&eacute; et ex&eacute;cution du tri.
Derni&egrave;re mise &agrave; jour le 27/4/2013
50
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Propri&eacute;t&eacute;s de tri
Un objet Song conserve la trace de plusieurs propri&eacute;t&eacute;s, notamment le titre de la chanson, l’artiste, l’ann&eacute;e de
publication, le nom du fichier et un ensemble de genres s&eacute;lectionn&eacute; par l’utilisateur auquel la chanson appartient.
Seules les trois premi&egrave;res propri&eacute;t&eacute;s sont pratiques pour le tri. Dans un souci de commodit&eacute; pour les d&eacute;veloppeurs,
l’exemple inclut la classe SortProperty, qui agit comme une &eacute;num&eacute;ration avec des valeurs repr&eacute;sentant les propri&eacute;t&eacute;s
disponibles pour le tri.
public static const TITLE:SortProperty = new SortProperty(&quot;title&quot;);
public static const ARTIST:SortProperty = new SortProperty(&quot;artist&quot;);
public static const YEAR:SortProperty = new SortProperty(&quot;year&quot;);
La classe SortProperty contient trois classes, TITLE, ARTIST et YEAR. Chacune d’elles stocke une cha&icirc;ne comportant le
nom de la propri&eacute;t&eacute; de la classe Song pouvant &ecirc;tre utilis&eacute;e pour le tri. Chaque fois qu’une propri&eacute;t&eacute; de tri est indiqu&eacute;e
dans le reste du code, le membre de l’&eacute;num&eacute;ration est utilis&eacute;. Par exemple, dans le constructeur PlayList, la liste est
tri&eacute;e initialement en appelant la m&eacute;thode sortList(), comme suit :
// Set the initial sorting.
this.sortList(SortProperty.TITLE);
Etant donn&eacute; que la propri&eacute;t&eacute; de tri est sp&eacute;cifi&eacute;e sous la forme SortProperty.TITLE, les chansons sont tri&eacute;es par titre.
Tri par propri&eacute;t&eacute; et d&eacute;finition d’options de tri
La classe PlayList trie la liste de chansons dans la m&eacute;thode sortList(), comme suit :
/**
* Sorts the list of songs according to the specified property.
*/
public function sortList(sortProperty:SortProperty):void
{
...
var sortOptions:uint;
switch (sortProperty)
{
case SortProperty.TITLE:
sortOptions = Array.CASEINSENSITIVE;
break;
case SortProperty.ARTIST:
sortOptions = Array.CASEINSENSITIVE;
break;
case SortProperty.YEAR:
sortOptions = Array.NUMERIC;
break;
}
// Perform the actual sorting of the data.
this._songs.sortOn(sortProperty.propertyName, sortOptions);
// Save the current sort property.
this._currentSort = sortProperty;
// Record that the list is sorted.
this._needToSort = false;
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
51
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de tableaux
Lors du tri par titre ou par artiste, il est pr&eacute;f&eacute;rable d’effectuer un tri par ordre alphab&eacute;tique. En revanche, lors du tri
par ann&eacute;e, il est plus logique d’effectuer un tri num&eacute;rique. L’instruction switch sert &agrave; d&eacute;finir l’option de tri appropri&eacute;e,
stock&eacute;e dans la variable sortOptions, en fonction de la valeur indiqu&eacute;e dans le param&egrave;tre sortProperty. Ici encore,
les membres de l’&eacute;num&eacute;ration nomm&eacute;s sont utilis&eacute;s pour faire la diff&eacute;rence entre les propri&eacute;t&eacute;s, plut&ocirc;t que les valeurs
absolues.
Une fois que vous avez d&eacute;termin&eacute; la propri&eacute;t&eacute; et les options de tri, le tableau _songs est tri&eacute; en appelant sa m&eacute;thode
sortOn(), en transmettant ces deux valeurs comme param&egrave;tres. La propri&eacute;t&eacute; de tri est enregistr&eacute;e et la liste des
chansons est tri&eacute;e.
Combinaison d’&eacute;l&eacute;ments de tableau en une cha&icirc;ne s&eacute;par&eacute;e par des caract&egrave;res
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Cet exemple utilise non seulement un tableau pour conserver la liste des chansons dans la classe PlayList mais
&eacute;galement des tableaux dans la classe Song pour g&eacute;rer la liste des genres auxquels une chanson appartient. Consid&eacute;rons
ce fragment de code issu de la d&eacute;finition de la classe Song :
private var _genres:String;
public function Song(title:String, artist:String, year:uint, filename:String, genres:Array)
{
...
// Genres are passed in as an array
// but stored as a semicolon-separated string.
this._genres = genres.join(&quot;;&quot;);
}
Lors de la cr&eacute;ation d’une occurrence de Song, le param&egrave;tre genres utilis&eacute; pour sp&eacute;cifier le genre (ou les genres) auquel
la chanson appartient est d&eacute;fini comme occurrence d’Array. Ainsi, vous pouvez regrouper plusieurs genres en une
seule variable qui peut &ecirc;tre transmise au constructeur. N&eacute;anmoins, la classe Song conserve, en interne, les genres dans
la variable priv&eacute;e _genres sous la forme d’une occurrence de String s&eacute;par&eacute;e par des points-virgules. Le param&egrave;tre
Array est converti en une cha&icirc;ne s&eacute;par&eacute;e par des points-virgules en appelant sa m&eacute;thode join() avec la valeur de
cha&icirc;ne litt&eacute;rale &quot;;&quot; comme s&eacute;parateur sp&eacute;cifi&eacute;.
De la m&ecirc;me fa&ccedil;on, les accesseurs genres permettent de d&eacute;finir ou de r&eacute;cup&eacute;rer des genres sous la forme d’un tableau :
public function get genres():Array
{
// Genres are stored as a semicolon-separated String,
// so they need to be transformed into an Array to pass them back out.
return this._genres.split(&quot;;&quot;);
}
public function set genres(value:Array):void
{
// Genres are passed in as an array,
// but stored as a semicolon-separated string.
this._genres = value.join(&quot;;&quot;);
}
L’accesseur genresset se comporte exactement comme le constructeur ; il accepte un tableau et appelle la m&eacute;thode
join() pour la convertir en une cha&icirc;ne s&eacute;par&eacute;e par des points-virgules. L’accesseur get effectue l’op&eacute;ration inverse :
la m&eacute;thode split() de la variable _genres est appel&eacute;e. Elle divise la cha&icirc;ne en un tableau de valeurs utilisant le
s&eacute;parateur sp&eacute;cifi&eacute; (la valeur de cha&icirc;ne litt&eacute;rale &quot;;&quot; comme pr&eacute;c&eacute;demment).
Derni&egrave;re mise &agrave; jour le 27/4/2013
52
53
Chapitre 4 : Gestion des erreurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
&laquo; G&eacute;rer &raquo; une erreur signifie que vous int&eacute;grez des fonctions logiques &agrave; l’application pour r&eacute;agir &agrave; une erreur ou la
corriger. Les erreurs sont g&eacute;n&eacute;r&eacute;es lors de la compilation d’une application ou lors de l’ex&eacute;cution d’une application
compil&eacute;e. Lorsque l’application g&egrave;re les erreurs, il se produit une r&eacute;action &agrave; l’erreur. Il arrive en revanche qu’une erreur
soit ignor&eacute;e (auquel cas le processus &agrave; l’origine de l’erreur &eacute;choue silencieusement). La gestion des erreurs, lorsqu’elle
est utilis&eacute;e correctement, prot&egrave;ge votre application et ses utilisateurs contre un comportement inattendu.
Cependant, la gestion des erreurs est une cat&eacute;gorie large qui englobe la r&eacute;ponse &agrave; de nombreux types d’erreurs g&eacute;n&eacute;r&eacute;es
lors de la phase de compilation ou lors de l’ex&eacute;cution d’une application. Nous allons passer en revue la gestion des
erreurs d’ex&eacute;cution (renvoy&eacute;es lors de l’ex&eacute;cution d’une application), les diff&eacute;rents types d’erreurs g&eacute;n&eacute;r&eacute;s et les
avantages du syst&egrave;me de gestion des erreurs d’ActionScript 3.0.
Principes de base de la gestion des erreurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Une erreur d’ex&eacute;cution est une erreur qui se produit dans votre code ActionScript et qui emp&ecirc;che le contenu
ActionScript de s’ex&eacute;cuter comme pr&eacute;vu. Pour assurer l’ex&eacute;cution correcte du code ActionScript du point de vue de
l’utilisateur, &eacute;crivez le code dans l’application qui g&egrave;re l’erreur (la corrige, la contourne ou informe au moins
l’utilisateur qu’elle a eu lieu). Ce processus est appel&eacute; gestion des erreurs.
La gestion des erreurs est une cat&eacute;gorie large qui englobe la r&eacute;ponse &agrave; de nombreux types d’erreurs g&eacute;n&eacute;r&eacute;es lors de la
phase de compilation ou lors de l’ex&eacute;cution d’une application. Les erreurs qui se produisent lors de la compilation sont
souvent plus faciles &agrave; identifier. Corrigez-les pour terminer la cr&eacute;ation d’un fichier SWF.
Les erreurs d’ex&eacute;cution peuvent &ecirc;tre difficiles &agrave; d&eacute;tecter car elles se produisent lorsque le code erron&eacute; est ex&eacute;cut&eacute;. Si
un segment de votre programme contient plusieurs branches de code, telle une instruction if..then..else, testez
toutes les conditions possibles, avec toutes les valeurs en entr&eacute;e susceptibles d’&ecirc;tre utilis&eacute;es par un utilisateur r&eacute;el, pour
confirmer que le code ne contient pas d’erreur.
Les erreurs d’ex&eacute;cution peuvent &ecirc;tre divis&eacute;es en deux cat&eacute;gories : les erreurs de programme sont des erreurs dans votre
code ActionScript (sp&eacute;cification du type de donn&eacute;es incorrect pour un param&egrave;tre de m&eacute;thode, par exemple) ; les
erreurs logiques sont des erreurs dans la logique (le contr&ocirc;le des donn&eacute;es et la manipulation des valeurs) de votre
programme (utilisation de la formule incorrecte pour calculer les taux d’int&eacute;r&ecirc;t dans une application bancaire, par
exemple). Encore une fois, ces deux types d’erreurs peuvent souvent &ecirc;tre d&eacute;tect&eacute;s et corrig&eacute;s &agrave; l’avance en testant
attentivement votre application.
Il serait id&eacute;al d’identifier et de supprimer toutes les erreurs de votre application avant de la mettre &agrave; la disposition des
utilisateurs finaux. Cependant, toutes les erreurs ne peuvent pas &ecirc;tre pr&eacute;vues ni &eacute;vit&eacute;es. Supposons, par exemple, que
l’application ActionScript charge des informations depuis un site Web particulier sur lequel vous n’avez aucun
contr&ocirc;le. Si ce site Web n’est pas disponible, la partie de l’application qui d&eacute;pend de ces donn&eacute;es externes ne se
comporte pas correctement. L’aspect primordial de la gestion des erreurs consiste &agrave; anticiper ces cas de figure et &agrave; les
traiter judicieusement. Il est pr&eacute;f&eacute;rable que l’ex&eacute;cution de l’application ne soit pas interrompue ou, tout du moins,
qu’un message indique &agrave; l’utilisateur pourquoi elle ne fonctionne pas.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Les erreurs d’ex&eacute;cution sont repr&eacute;sent&eacute;es de deux fa&ccedil;ons dans ActionScript :
• Classes d’erreur : de nombreuses erreurs sont associ&eacute;es &agrave; une classe Error. Lorsqu’une erreur se produit, le moteur
d’ex&eacute;cution Flash (Flash Player ou Adobe AIR, par exemple) cr&eacute;e une occurrence de la classe Error sp&eacute;cifique
associ&eacute;e &agrave; cette erreur. Votre code peut utiliser les informations contenues dans cet objet erreur pour donner une
r&eacute;ponse appropri&eacute;e &agrave; l’erreur.
• Ev&eacute;nements d’erreur : il arrive qu’une erreur se produise lorsque le moteur d’ex&eacute;cution Flash d&eacute;clencherait
normalement un &eacute;v&eacute;nement. Si tel est le cas, un &eacute;v&eacute;nement d’erreur est alors d&eacute;clench&eacute;. Chaque &eacute;v&eacute;nement
d’erreur &eacute;tant associ&eacute; &agrave; une classe, le moteur d’ex&eacute;cution de Flash transmet une occurrence de cette classe aux
m&eacute;thodes enregistr&eacute;es aupr&egrave;s de l’&eacute;v&eacute;nement d’erreur.
Pour d&eacute;terminer si une m&eacute;thode donn&eacute;e peut d&eacute;clencher une erreur ou un &eacute;v&eacute;nement d’erreur, voir la rubrique
correspondante dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs &agrave; la programmation de routines de gestion des
erreurs :
Asynchrone Commande de programme telle qu’un appel de m&eacute;thode qui ne fournit pas un r&eacute;sultat imm&eacute;diat, mais
qui produit un r&eacute;sultat (ou une erreur) sous la forme d’un &eacute;v&eacute;nement.
Capture Lorsqu’une exception (une erreur d’ex&eacute;cution) se produit et que votre code la d&eacute;couvre, ce dernier la capture.
Lorsqu’une exception est captur&eacute;e, le moteur d’ex&eacute;cution Flash cesse d’indiquer &agrave; un autre code ActionScript que
l’exception s’est produite.
Version de d&eacute;bogage Version sp&eacute;ciale du moteur d’ex&eacute;cution Flash, telle que la version de d&eacute;bogage de Flash Player
ou l’application de d&eacute;bogage du lanceur AIR (ADL), qui contient le code requis pour avertir les utilisateurs de la
pr&eacute;sence d’erreurs d’ex&eacute;cution. Dans la version standard de Flash Player ou Adobe AIR (celle que poss&egrave;dent la plupart
des utilisateurs), les erreurs qui ne sont pas g&eacute;r&eacute;es par votre code ActionScript sont ignor&eacute;es. Dans les versions de
d&eacute;bogage (int&eacute;gr&eacute;es &agrave; Adobe Flash CS4 Professional et Adobe Flash Builder), un message d’avertissement appara&icirc;t
lorsqu’une erreur non g&eacute;r&eacute;e se produit.
Exception Erreur qui se produit lorsqu’une application est en cours d’ex&eacute;cution et que le moteur d’ex&eacute;cution Flash ne
peut pas la r&eacute;soudre seul.
Renvoi Lorsque votre code capture une exception, le moteur d’ex&eacute;cution Flash cesse de signaler l’exception &agrave; d’autres
objets. S’il est important pour d’autres objets que l’exception leur soit signal&eacute;e, le code doit renvoyer l’exception pour
recommencer le processus de notification.
Synchrone Commande de programme (un appel de m&eacute;thode, par exemple) qui fournit un r&eacute;sultat imm&eacute;diat (ou qui
renvoie imm&eacute;diatement une erreur), ce qui signifie que la r&eacute;ponse peut &ecirc;tre utilis&eacute;e dans le m&ecirc;me bloc de code.
Envoi Le fait de signaler au moteur d’ex&eacute;cution Flash (et par cons&eacute;quent, &agrave; d’autres objets et au code ActionScript)
qu’une erreur s’est produite s’appelle envoyer une erreur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
54
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Types d’erreurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous d&eacute;veloppez et ex&eacute;cutez des applications, vous rencontrez diff&eacute;rents types d’erreurs et de termes. La liste
suivante pr&eacute;sente les principaux termes et types d’erreurs :
• Erreurs de compilation : g&eacute;n&eacute;r&eacute;es par le compilateur ActionScript lors de la compilation du code. Les erreurs de
compilation ont lieu lorsque des probl&egrave;mes de syntaxe dans votre code emp&ecirc;chent de cr&eacute;er votre application.
• Erreurs d’ex&eacute;cution : g&eacute;n&eacute;r&eacute;es lorsque vous ex&eacute;cutez votre application apr&egrave;s l’avoir compil&eacute;e. Les erreurs
d’ex&eacute;cution repr&eacute;sentent des erreurs qui se produisent lors de la lecture d’un fichier SWF dans un moteur
d’ex&eacute;cution Flash tel qu’Adobe Flash Player ou Adobe AIR. Dans la plupart des cas, il est possible de g&eacute;rer les
erreurs d’ex&eacute;cution au moment o&ugrave; elles se produisent, de les signaler &agrave; l’utilisateur et de prendre les mesures
requises pour poursuivre l’ex&eacute;cution de l’application. S’il s’agit d’une erreur grave (impossibilit&eacute; de se connecter &agrave;
un site Web distant ou de charger des donn&eacute;es), vous pouvez utiliser la gestion des erreurs pour mettre fin &agrave;
l’application en douceur.
• Erreurs synchrones : erreurs d’ex&eacute;cution g&eacute;n&eacute;r&eacute;es lorsqu’une fonction est appel&eacute;e. Par exemple, lorsque vous tentez
d’utiliser une m&eacute;thode sp&eacute;cifique et que l’argument que vous lui transmettez n’est pas valide, le moteur d’ex&eacute;cution
de Flash renvoie une exception. La plupart des erreurs se produisent en mode synchrone (au moment de l’ex&eacute;cution
d’une instruction) et le flux de contr&ocirc;le passe imm&eacute;diatement &agrave; l’instruction catch la plus appropri&eacute;e.
Par exemple, l’extrait de code suivant renvoie une erreur d’ex&eacute;cution, car la m&eacute;thode browse() n’est pas appel&eacute;e
avant que le programme ne tente de charger un fichier :
var fileRef:FileReference = new FileReference();
try
{
fileRef.upload(new URLRequest(&quot;http://www.yourdomain.com/fileupload.cfm&quot;));
}
catch (error:IllegalOperationError)
{
trace(error);
// Error #2037: Functions called in incorrect sequence, or earlier
// call was unsuccessful.
}
Dans ce cas, une erreur d’ex&eacute;cution est renvoy&eacute;e de fa&ccedil;on synchrone car Flash Player a d&eacute;termin&eacute; que la m&eacute;thode
browse() n’a pas &eacute;t&eacute; appel&eacute;e avant la tentative de chargement du fichier.
Pour obtenir des informations d&eacute;taill&eacute;es relatives &agrave; la gestion des erreurs synchrones, voir &laquo; Gestion des erreurs
synchrones dans une application &raquo; &agrave; la page 59.
• Les erreursasynchrones sont des erreurs du moteur d’ex&eacute;cution qui se produisent hors du flux normal du
programme. Elles g&eacute;n&egrave;rent des &eacute;v&eacute;nements, intercept&eacute;s par des &eacute;couteurs d’&eacute;v&eacute;nement. Une op&eacute;ration asynchrone
est une op&eacute;ration dans laquelle une fonction lance une op&eacute;ration mais n’attend pas qu’elle se termine. Vous pouvez
cr&eacute;er un &eacute;couteur d’&eacute;v&eacute;nements d’erreur pour attendre que l’application ou l’utilisateur tente une op&eacute;ration. Si cette
derni&egrave;re &eacute;choue, vous interceptez l’erreur avec un &eacute;couteur d’&eacute;v&eacute;nements et r&eacute;pondez &agrave; l’&eacute;v&eacute;nement d’erreur.
Ensuite, l’&eacute;couteur d’&eacute;v&eacute;nement appelle une fonction de gestionnaire d’&eacute;v&eacute;nement pour r&eacute;pondre &agrave; l’&eacute;v&eacute;nement
d’erreur avec pertinence. Par exemple, le gestionnaire d’&eacute;v&eacute;nement peut lancer une bo&icirc;te de dialogue qui invite
l’utilisateur &agrave; r&eacute;soudre l’erreur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
55
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Reprenez l’exemple d’erreur synchrone lors du chargement d’un fichier pr&eacute;sent&eacute; pr&eacute;c&eacute;demment. Si vous r&eacute;ussissez
&agrave; appeler la m&eacute;thode browse() avant de lancer le chargement d’un fichier, Flash Player distribue plusieurs
&eacute;v&eacute;nements. Par exemple, au d&eacute;marrage d’un chargement, l’&eacute;v&eacute;nement open est distribu&eacute;. A la fin du chargement,
l’&eacute;v&eacute;nement complete est distribu&eacute;. Etant donn&eacute; que la gestion d’&eacute;v&eacute;nements est asynchrone (c’est-&agrave;-dire qu’elle
n’a pas lieu &agrave; des moments pr&eacute;d&eacute;finis, connus et sp&eacute;cifiques), faites appel &agrave; la m&eacute;thode addEventListener() pour
d&eacute;tecter ces &eacute;v&eacute;nements sp&eacute;cifiques, comme l’indique le code suivant :
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.OPEN, openHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.browse();
function selectHandler(event:Event):void
{
trace(&quot;...select...&quot;);
var request:URLRequest = new URLRequest(&quot;http://www.yourdomain.com/fileupload.cfm&quot;);
request.method = URLRequestMethod.POST;
event.target.upload(request);
}
function openHandler(event:Event):void
{
trace(&quot;...open...&quot;);
}
function completeHandler(event:Event):void
{
trace(&quot;...complete...&quot;);
}
Pour obtenir des informations d&eacute;taill&eacute;es sur la gestion des erreurs asynchrones, voir &laquo; R&eacute;ponse &agrave; des &eacute;v&eacute;nements
et &agrave; l’&eacute;tat d’erreur &raquo; &agrave; la page 65.
• Exceptions non intercept&eacute;es : renvoy&eacute;es sans logique correspondante (telle une instruction catch) pour y r&eacute;pondre.
Si votre application renvoie une erreur, et qu’aucune instruction catch ni gestionnaire d’&eacute;v&eacute;nement appropri&eacute;
n’est trouv&eacute; au niveau actuel ou sup&eacute;rieur pour g&eacute;rer l’erreur, cette derni&egrave;re est consid&eacute;r&eacute;e comme une exception
non intercept&eacute;e.
Lorsqu’il se produit une erreur non intercept&eacute;e, le moteur d’ex&eacute;cution distribue un &eacute;v&eacute;nement uncaughtError.
Cet &eacute;v&eacute;nement porte &eacute;galement le nom de &laquo; gestionnaire d’erreur global &raquo;. Il est distribu&eacute; par l’objet
UncaughtErrorEvents du fichier SWF et est propos&eacute; par la propri&eacute;t&eacute; LoaderInfo.uncaughtErrorEvents. Si
aucun &eacute;couteur n’est enregistr&eacute; pour l’&eacute;v&eacute;nement uncaughtError, le moteur d’ex&eacute;cution ignore les erreurs non
intercept&eacute;es et tente de poursuivre son ex&eacute;cution, d&egrave;s lors que l’erreur n’interrompt pas le fichier SWF.
Outre la distribution de l’&eacute;v&eacute;nement uncaughtError, les versions de d&eacute;bogage du moteur d’ex&eacute;cution de Flash
r&eacute;pondent aux erreurs non intercept&eacute;es en mettant fin au script actif. Elles affichent ensuite les erreurs non
intercept&eacute;es dans le r&eacute;sultat de l’instruction trace ou &eacute;crivent le message d’erreur dans un fichier journal. Si l’objet
exception est une occurrence de la classe Error ou de l’une de ses sous-classes, les informations de trace de la pile
s’affichent &eacute;galement dans le r&eacute;sultat. Pour plus d’informations sur l’utilisation de la version de d&eacute;bogage des
moteurs d’ex&eacute;cution Flash, voir &laquo; Utilisation des versions de d&eacute;bogage des moteurs d’ex&eacute;cution Flash &raquo; &agrave; la page 58.
Remarque : lors du traitement d’un &eacute;v&eacute;nement uncaughtError, si un &eacute;v&eacute;nement d’erreur est renvoy&eacute; par un
gestionnaire uncaughtError, celui-ci est appel&eacute; plusieurs fois. Il se produit alors une boucle infinie d’exceptions. Il est
donc recommand&eacute; d’&eacute;viter ce type de sc&eacute;nario.
Derni&egrave;re mise &agrave; jour le 27/4/2013
56
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Gestion des erreurs dans ActionScript 3.0
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Etant donn&eacute; que de nombreuses applications peuvent &ecirc;tre ex&eacute;cut&eacute;es sans cr&eacute;er de logique pour g&eacute;rer les erreurs, les
d&eacute;veloppeurs sont tent&eacute;s de retarder la cr&eacute;ation de la gestion des erreurs dans leurs applications. N&eacute;anmoins, sans
gestion des erreurs, une application risque de s’interrompre ou de poser des probl&egrave;mes &agrave; l’utilisateur si elle ne
fonctionne pas comme pr&eacute;vu. ActionScript 2.0 poss&egrave;de une classe Error qui vous permet de cr&eacute;er une logique dans des
fonctions personnalis&eacute;es afin de renvoyer une exception avec un message sp&eacute;cifique. Etant donn&eacute; que la gestion des
erreurs est cruciale pour rendre une application conviviale, ActionScript 3.0 inclut une architecture &eacute;tendue pour
intercepter les erreurs.
Remarque : bien que le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash passe en revue les
exceptions renvoy&eacute;es par de nombreuses m&eacute;thodes, il ne contient pas n&eacute;cessairement toutes les exceptions associ&eacute;es &agrave;
chaque m&eacute;thode. une m&eacute;thode risque de renvoyer une exception due &agrave; une erreur de syntaxe ou d’autres probl&egrave;mes qui
ne sont pas signal&eacute;s explicitement dans la description de la m&eacute;thode, m&ecirc;me si cette derni&egrave;re r&eacute;pertorie certaines exceptions
renvoy&eacute;es.
El&eacute;ments de gestion des erreurs ActionScript 3.0
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 comprend de nombreux outils permettant de g&eacute;rer les erreurs, notamment :
• Classes Error : ActionScript 3.0 comprend un large &eacute;ventail de classes Error destin&eacute;es &agrave; multiplier le nombre de
situations susceptibles de produire des objets d’erreur. Chaque classe Error permet aux applications de g&eacute;rer et de
r&eacute;pondre &agrave; des conditions d’erreur sp&eacute;cifiques, qu’elles soient li&eacute;es &agrave; des erreurs syst&egrave;me (comme une condition
MemoryError), &agrave; des erreurs de codage (comme une condition ArgumentError), &agrave; des erreurs de r&eacute;seau et de
communication (comme une condition URIError), ou d’autres situations. Pour plus d’informations sur chaque
classe, voir &laquo; Comparaison des classes Error &raquo; &agrave; la page 68.
• Moins d’&eacute;checs silencieux : dans les versions pr&eacute;c&eacute;dentes de Flash Player, les erreurs &eacute;taient g&eacute;n&eacute;r&eacute;es et signal&eacute;es
uniquement si vous utilisiez explicitement l’instruction throw. Les m&eacute;thodes et propri&eacute;t&eacute;s ActionScript natives
renvoient des erreurs d’ex&eacute;cution pour le moteur d’ex&eacute;cution de Flash Player 9 et des versions ult&eacute;rieures de Flash.
Ces erreurs permettent de g&eacute;rer les exceptions de mani&egrave;re plus efficace au moment o&ugrave; elles se produisent, puis de
r&eacute;agir &agrave; chaque exception.
• Messages d’erreur clairs affich&eacute;s lors du d&eacute;bogage : Lorsque vous utilisez la version de d&eacute;bogage d’un moteur
d’ex&eacute;cution de Flash, les situations ou le code &agrave; l’origine du probl&egrave;me g&eacute;n&egrave;rent des messages d’erreur d&eacute;taill&eacute;s qui
vous aident &agrave; identifier les raisons de l’&eacute;chec d’un bloc de code particulier. Ces messages optimisent la r&eacute;solution
des erreurs. Pour plus d’informations, voir &laquo; Utilisation des versions de d&eacute;bogage des moteurs d’ex&eacute;cution Flash &raquo;
&agrave; la page 58.
• Les erreurs pr&eacute;cises permettent d’afficher des messages d’erreur clairs pour les utilisateurs. Dans les versions
pr&eacute;c&eacute;dentes de Flash Player, la m&eacute;thode FileReference.upload() renvoyait la valeur bool&eacute;enne false en cas
d’&eacute;chec de l’appel upload(), indiquant l’une des cinq erreurs possibles. Si une erreur se produit lorsque vous
appelez la m&eacute;thode upload() dans ActionScript 3.0, quatre erreurs sp&eacute;cifiques vous aident &agrave; afficher des messages
d’erreur plus pr&eacute;cis &agrave; l’intention des utilisateurs finaux.
Derni&egrave;re mise &agrave; jour le 27/4/2013
57
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
• Gestion des erreurs affin&eacute;e : des erreurs distinctes sont renvoy&eacute;es pour de nombreuses situations courantes. Par
exemple, dans ActionScript 2.0, avant qu’un objet FileReference ne soit renseign&eacute;, la propri&eacute;t&eacute; name poss&egrave;de la
valeur null (par cons&eacute;quent, avant d’utiliser ou d’afficher la propri&eacute;t&eacute; name, v&eacute;rifiez qu’elle est d&eacute;finie sur une
valeur autre que null). Dans ActionScript 3.0, si vous tentez d’acc&eacute;der &agrave; la propri&eacute;t&eacute; name avant qu’elle ne soit
renseign&eacute;e, Flash Player ou AIR renvoie une erreur IllegalOperationError qui vous indique que la valeur n’a pas &eacute;t&eacute;
d&eacute;finie. Vous pouvez utiliser des blocs try..catch..finally pour g&eacute;rer l’erreur. Pour plus d’informations, voir
&laquo; Utilisation des instructions try..catch..finally &raquo; &agrave; la page 59.
• Aucun probl&egrave;me s&eacute;rieux de performance : l’utilisation de blocs try..catch..finally pour g&eacute;rer des erreurs ne
n&eacute;cessite pas ou peu de ressources suppl&eacute;mentaires par rapport aux versions pr&eacute;c&eacute;dentes d’ActionScript.
• Une classe ErrorEvent qui vous permet de cr&eacute;er des &eacute;couteurs pour des &eacute;v&eacute;nements d’erreurs asynchrones
sp&eacute;cifiques : pour plus d’informations, voir &laquo; R&eacute;ponse &agrave; des &eacute;v&eacute;nements et &agrave; l’&eacute;tat d’erreur &raquo; &agrave; la page 65.
Strat&eacute;gies de gestion des erreurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Tant que l’application ne rencontre pas de condition probl&eacute;matique, vous pouvez continuer &agrave; l’ex&eacute;cuter sans cr&eacute;er de
logique de gestion des erreurs dans le code. En revanche, si vous ne g&eacute;rez pas d’erreurs de fa&ccedil;on active et que votre
application rencontre un probl&egrave;me, vos utilisateurs ignoreront toujours la raison de son &eacute;chec.
Vous pouvez aborder la gestion des erreurs de diverses fa&ccedil;ons dans votre application. La liste suivante r&eacute;sume les trois
principales options de gestion des erreurs :
• Utilisez les instructions try..catch..finally. Ces instructions interceptent les erreurs synchrones lorsqu’elles
se produisent. Vous pouvez imbriquer vos instructions dans une hi&eacute;rarchie pour intercepter des exceptions &agrave;
diff&eacute;rents niveaux d’ex&eacute;cution du code. Pour plus d’informations, voir &laquo; Utilisation des instructions
try..catch..finally &raquo; &agrave; la page 59.
• Cr&eacute;ez des objets d’erreur personnalis&eacute;s. Vous pouvez utiliser la classe Error pour cr&eacute;er des objets d’erreur
personnalis&eacute;s afin de suivre des op&eacute;rations sp&eacute;cifiques dans votre application qui ne sont pas couvertes par des
types d’erreur int&eacute;gr&eacute;s. Vous pouvez ensuite appliquer des instructions try..catch..finally aux objets d’erreur
personnalis&eacute;s. Pour plus d’informations, voir &laquo; Cr&eacute;ation de classes d’erreur personnalis&eacute;es &raquo; &agrave; la page 64.
• Ecrivez des gestionnaires et des &eacute;couteurs d’&eacute;v&eacute;nement pour r&eacute;pondre &agrave; des &eacute;v&eacute;nements d’erreur. Cette strat&eacute;gie
permet de cr&eacute;er des gestionnaires d’erreurs globaux destin&eacute;s &agrave; g&eacute;rer des &eacute;v&eacute;nements similaires sans dupliquer un
volume &eacute;lev&eacute; de code dans les blocs try..catch..finally. Il est &eacute;galement plus probable que vous interceptiez
des erreurs asynchrones &agrave; l’aide de cette approche. Pour plus d’informations, voir &laquo; R&eacute;ponse &agrave; des &eacute;v&eacute;nements et &agrave;
l’&eacute;tat d’erreur &raquo; &agrave; la page 65.
Utilisation des versions de d&eacute;bogage des moteurs
d’ex&eacute;cution Flash
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Adobe propose aux d&eacute;veloppeurs des &eacute;ditions sp&eacute;ciales des moteurs d’ex&eacute;cution Flash, destin&eacute;es &agrave; les aider &agrave; ex&eacute;cuter
des op&eacute;rations de d&eacute;bogage. Vous obtenez une copie de la version de d&eacute;bogage de Flash Player lorsque vous installez
Adobe Flash Professional ou Adobe Flash Builder. Vous disposez &eacute;galement d’un utilitaire de d&eacute;bogage des
applications Adobe AIR, appel&eacute; ADL, lorsque vous installez l’un de ces outils ou dans le cadre de l’installation du SDK
d’Adobe AIR.
Derni&egrave;re mise &agrave; jour le 27/4/2013
58
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Il existe une grande diff&eacute;rence dans la fa&ccedil;on dont les versions de d&eacute;bogage et les versions de Flash Player et Adobe AIR
mises sur le march&eacute; signalent les erreurs. Les versions de d&eacute;bogage indiquent le type d’erreur (Error, IOError ou
EOFError g&eacute;n&eacute;rique), le num&eacute;ro de l’erreur et un message d’erreur sous une forme lisible par une personne. Les
versions mises sur le march&eacute; indiquent uniquement le type d’erreur et son num&eacute;ro. Consid&eacute;rons par exemple le code
qui suit :
try
{
tf.text = myByteArray.readBoolean();
}
catch (error:EOFError)
{
tf.text = error.toString();
}
Si la m&eacute;thode readBoolean() renvoie une erreur EOFError dans la version de d&eacute;bogage de Flash Player, le message
suivant s’affiche dans le champ de texte tf : &laquo; EOFError: Erreur #2030: Fin de fichier d&eacute;tect&eacute;e &raquo;.
Dans une version commerciale de Flash Player ou d’Adobe AIR, le m&ecirc;me code afficherait le texte suivant : &laquo; EOFError:
Erreur #2030 &raquo;.
Remarque : &eacute;tant donn&eacute; que les lecteurs de d&eacute;bogage diffusent l’&eacute;v&eacute;nement &laquo; allComplete &raquo;, &eacute;vitez de cr&eacute;er des
&eacute;v&eacute;nements personnalis&eacute;s portant le nom &laquo; allComplete &raquo;. Vous risquez sinon de rencontrer un comportement
impr&eacute;visible lors du d&eacute;bogage.
Ce type de version ne comprend pas de cha&icirc;ne de message d’erreur, afin de r&eacute;duire au minimum la taille et les
ressources requises. Vous pouvez consulter le num&eacute;ro d’erreur dans la documentation (annexes du manuel Guide de
r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash) pour l’associer &agrave; un message d’erreur. Vous pouvez
&eacute;galement reproduire l’erreur dans les versions de d&eacute;bogage de Flash Player et AIR pour visualiser le message entier.
Gestion des erreurs synchrones dans une application
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La gestion des erreurs la plus courante est la logique de gestion des erreurs synchrones, qui consiste &agrave; ins&eacute;rer des
instructions dans votre code pour intercepter les erreurs synchrones lors de l’ex&eacute;cution d’une application. Ce type de
gestion des erreurs permet &agrave; votre application de rep&eacute;rer des erreurs d’ex&eacute;cution et de les r&eacute;soudre lorsque des
fonctions &eacute;chouent. La logique d’interception d’une erreur synchrone fait appel aux instructions
try..catch..finally, qui tentent litt&eacute;ralement une op&eacute;ration, interceptent toute r&eacute;ponse &agrave; l’erreur &eacute;manant du
moteur d’ex&eacute;cution Flash, puis ex&eacute;cutent une autre op&eacute;ration pour g&eacute;rer l’op&eacute;ration qui a &eacute;chou&eacute;.
Utilisation des instructions try..catch..finally
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous manipulez des erreurs d’ex&eacute;cution synchrones, utilisez les instructions try..catch..finally pour
intercepter les erreurs. Lorsqu’une erreur d’ex&eacute;cution se produit, le moteur d’ex&eacute;cution Flash renvoie une exception,
ce qui signifie qu’il suspend l’ex&eacute;cution normale et cr&eacute;e un objet sp&eacute;cial de type Error. L’objet Error est ensuite renvoy&eacute;
au premier bloc catch disponible.
Derni&egrave;re mise &agrave; jour le 27/4/2013
59
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
L’instruction try regroupe les instructions pouvant cr&eacute;er des erreurs. Vous utilisez toujours l’instruction catch avec
une instruction try. Si une erreur est d&eacute;tect&eacute;e dans l’une des instructions du bloc try, les instructions catch associ&eacute;es
&agrave; cette instruction try sont ex&eacute;cut&eacute;es.
L’instruction finally regroupe les instructions ex&eacute;cut&eacute;es, qu’une erreur se produise ou non dans le bloc try. S’il ne
se produit pas d’erreur, les instructions du bloc finally sont ex&eacute;cut&eacute;es au terme de l’ex&eacute;cution des instructions du
bloc try. S’il se produit une erreur, l’instruction catch appropri&eacute;e est ex&eacute;cut&eacute;e en premier lieu, suivie des instructions
du bloc finally.
Le code suivant illustre la syntaxe d’utilisation des instructions try..catch..finally :
try
{
// some code that could throw an error
}
catch (err:Error)
{
// code to react to the error
}
finally
{
// Code that runs whether an error was thrown. This code can clean
// up after the error, or take steps to keep the application running.
}
Chaque instruction catch identifie un type d’exception sp&eacute;cifique qu’elle g&egrave;re. L’instruction catch peut sp&eacute;cifier
uniquement des classes d’erreur qui sont des sous-classes de la classe Error. Chaque instruction catch est v&eacute;rifi&eacute;e dans
l’ordre. Seule la premi&egrave;re instruction catch qui correspond au type d’erreur renvoy&eacute; est ex&eacute;cut&eacute;e. En d’autres termes,
si vous v&eacute;rifiez d’abord la classe Error de niveau sup&eacute;rieur, puis une sous-classe de la classe Error, seule la classe Error
de niveau sup&eacute;rieur est prise en compte. Le code suivant illustre ce point :
try
{
throw new ArgumentError(&quot;I am an ArgumentError&quot;);
}
catch (error:Error)
{
trace(&quot;&lt;Error&gt; &quot; + error.message);
}
catch (error:ArgumentError)
{
trace(&quot;&lt;ArgumentError&gt; &quot; + error.message);
}
Le code pr&eacute;c&eacute;dent affiche le r&eacute;sultat suivant :
&lt;Error&gt; I am an ArgumentError
Pour intercepter correctement l’erreur ArgumentError, assurez-vous que les types d’erreur les plus sp&eacute;cifiques sont
r&eacute;pertori&eacute;s en premier, suivis des types d’erreur plus g&eacute;n&eacute;riques, comme l’indique le code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
60
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
try
{
throw new ArgumentError(&quot;I am an ArgumentError&quot;);
}
catch (error:ArgumentError)
{
trace(&quot;&lt;ArgumentError&gt; &quot; + error.message);
}
catch (error:Error)
{
trace(&quot;&lt;Error&gt; &quot; + error.message);
}
Plusieurs m&eacute;thodes et propri&eacute;t&eacute;s de l’API d’ActionScript renvoient des erreurs d’ex&eacute;cution si elles en rencontrent lors
de leur ex&eacute;cution. Par exemple, la m&eacute;thode close() de la classe Sound renvoie une erreur IOError si la m&eacute;thode ne
parvient pas &agrave; fermer le flux audio, comme indiqu&eacute; dans le code suivant :
var mySound:Sound = new Sound();
try
{
mySound.close();
}
catch (error:IOError)
{
// Error #2029: This URLStream object does not have an open stream.
}
Au fur et &agrave; mesure que vous vous familiariserez avec le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme
Adobe Flash, vous identifierez les m&eacute;thodes qui renvoient des exceptions, comme indiqu&eacute; dans la description de
chaque m&eacute;thode.
Instruction throw
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les moteurs d’ex&eacute;cution Flash renvoient des exceptions s’ils rencontrent des erreurs lors de l’ex&eacute;cution de votre
application. En outre, vous pouvez renvoyer des exceptions de fa&ccedil;on explicite &agrave; l’aide de l’instruction throw. Si tel est
le cas, Adobe vous conseille de renvoyer des occurrences de la classe Error ou de ses sous-classes. Le code suivant
illustre une instruction throw qui renvoie une occurrence de la classe Error, MyErr, et appelle une fonction,
myFunction() en r&eacute;ponse au renvoi de l’erreur :
Derni&egrave;re mise &agrave; jour le 27/4/2013
61
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
var MyError:Error = new Error(&quot;Encountered an error with the numUsers value&quot;, 99);
var numUsers:uint = 0;
try
{
if (numUsers == 0)
{
trace(&quot;numUsers equals 0&quot;);
}
}
catch (error:uint)
{
throw MyError; // Catch unsigned integer errors.
}
catch (error:int)
{
throw MyError; // Catch integer errors.
}
catch (error:Number)
{
throw MyError; // Catch number errors.
}
catch (error:*)
{
throw MyError; // Catch any other error.
}
finally
{
myFunction(); // Perform any necessary cleanup here.
}
Les instructions catch sont class&eacute;es de fa&ccedil;on &agrave; ce que les types de donn&eacute;es les plus sp&eacute;cifiques apparaissent en premier.
Si l’instruction catch associ&eacute;e au type de donn&eacute;es Number est r&eacute;pertori&eacute;e en premier, ni l’instruction catch associ&eacute;e
au type de donn&eacute;es uint, ni l’instruction catch associ&eacute;e au type de donn&eacute;es int n’est ex&eacute;cut&eacute;e.
Remarque : dans le langage de programmation Java, chaque fonction qui peut renvoyer une exception doit le d&eacute;clarer en
r&eacute;pertoriant les classes d’exception qu’elle peut renvoyer dans une clause throws associ&eacute;e &agrave; la d&eacute;claration de la fonction.
ActionScript ne requiert pas que vous d&eacute;clariez les exceptions renvoy&eacute;es par une fonction.
Affichage d’un message d’erreur simple
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’un des avantages majeurs du nouveau mod&egrave;le d’&eacute;v&eacute;nement d’erreur et d’exception consiste &agrave; permettre d’informer
les utilisateurs du moment o&ugrave; une action &eacute;choue et de la raison de cet &eacute;chec. Votre r&ocirc;le consiste &agrave; &eacute;crire le code pour
afficher le message et &agrave; offrir des options en r&eacute;ponse.
Le code suivant illustre une instruction try..catch simple permettant d’afficher l’erreur dans un champ de texte :
Derni&egrave;re mise &agrave; jour le 27/4/2013
62
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
package
{
import flash.display.Sprite;
import flash.text.TextField;
public class SimpleError extends Sprite
{
public var employee:XML =
&lt;EmpCode&gt;
&lt;costCenter&gt;1234&lt;/costCenter&gt;
&lt;costCenter&gt;1-234&lt;/costCenter&gt;
&lt;/EmpCode&gt;;
public function SimpleError()
{
try
{
if (employee.costCenter.length() != 1)
{
throw new Error(&quot;Error, employee must have exactly one cost center assigned.&quot;);
}
}
catch (error:Error)
{
var errorMessage:TextField = new TextField();
errorMessage.autoSize = TextFieldAutoSize.LEFT;
errorMessage.textColor = 0xFF0000;
errorMessage.text = error.message;
addChild(errorMessage);
}
}
}
}
En utilisant un plus grand nombre de classes d’erreur et d’erreurs de compilateur int&eacute;gr&eacute;es, ActionScript 3.0 fournit
de plus amples informations sur les raisons de l’&eacute;chec d’une action que les versions pr&eacute;c&eacute;dentes. Ces informations
permettent de cr&eacute;er des applications plus stables qui g&egrave;rent mieux les erreurs.
Renvoi des erreurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous cr&eacute;ez une application, vous &ecirc;tes parfois amen&eacute; &agrave; renvoyer une erreur si vous ne parvenez pas &agrave; la g&eacute;rer
correctement. Par exemple, le code suivant illustre un bloc try..catch imbriqu&eacute;, qui renvoie une erreur
ApplicationError personnalis&eacute;e si le bloc catch imbriqu&eacute; n’est pas capable de g&eacute;rer l’erreur :
Derni&egrave;re mise &agrave; jour le 27/4/2013
63
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
try
{
try
{
trace(&quot;&lt;&lt; try &gt;&gt;&quot;);
throw new ApplicationError(&quot;some error which will be rethrown&quot;);
}
catch (error:ApplicationError)
{
trace(&quot;&lt;&lt; catch &gt;&gt; &quot; + error);
trace(&quot;&lt;&lt; throw &gt;&gt;&quot;);
throw error;
}
catch (error:Error)
{
trace(&quot;&lt;&lt; Error &gt;&gt; &quot; + error);
}
}
catch (error:ApplicationError)
{
trace(&quot;&lt;&lt; catch &gt;&gt; &quot; + error);
}
Le r&eacute;sultat issu du fragment de code pr&eacute;c&eacute;dent serait le suivant :
&lt;&lt;
&lt;&lt;
&lt;&lt;
&lt;&lt;
try &gt;&gt;
catch &gt;&gt; ApplicationError: some error which will be rethrown
throw &gt;&gt;
catch &gt;&gt; ApplicationError: some error which will be rethrown
Le bloc try imbriqu&eacute; renvoie une erreur ApplicationError personnalis&eacute;e qui est intercept&eacute;e par le bloc catch suivant.
Ce bloc catch imbriqu&eacute; peut tenter de g&eacute;rer l’erreur et, si la tentative &eacute;choue, renvoyer l’objet ApplicationError au
bloc try..catch.
Cr&eacute;ation de classes d’erreur personnalis&eacute;es
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez &eacute;tendre l’une des classes Error standard pour cr&eacute;er vos classes d’erreur sp&eacute;cialis&eacute;es dans ActionScript.
Vous pouvez cr&eacute;er vos classes d’erreur pour les motifs suivants :
• Identifier des erreurs ou des groupes d’erreurs sp&eacute;cifiques uniques pour votre application.
Outre les erreurs intercept&eacute;es par un moteur d’ex&eacute;cution de Flash, vous pouvez par exemple g&eacute;rer diff&eacute;remment les
erreurs renvoy&eacute;es par votre propre code. Vous pouvez cr&eacute;er une sous-classe de la classe Error pour suivre le
nouveau type de donn&eacute;es d’erreur dans les blocs try..catch.
• Fournir des fonctionnalit&eacute;s d’affichage d’erreurs exceptionnelles pour les erreurs g&eacute;n&eacute;r&eacute;es par votre application.
Par exemple, vous pouvez cr&eacute;er une m&eacute;thode toString() qui formate vos messages d’erreur d’une certaine fa&ccedil;on.
Vous pouvez &eacute;galement d&eacute;finir une m&eacute;thode lookupErrorString() qui prend un code d’erreur et r&eacute;cup&egrave;re le
message ad&eacute;quat en fonction du langage que l’utilisateur pr&eacute;f&egrave;re.
Une classe d’erreur sp&eacute;cialis&eacute;e doit &eacute;tendre la classe Error d’ActionScript de base. Voici un exemple de classe AppError
sp&eacute;cialis&eacute;e qui &eacute;tend la classe Error :
Derni&egrave;re mise &agrave; jour le 27/4/2013
64
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
public class AppError extends Error
{
public function AppError(message:String, errorID:int)
{
super(message, errorID);
}
}
L’exemple suivant illustre l’utilisation d’une classe AppError dans votre projet :
try
{
throw new AppError(&quot;Encountered Custom AppError&quot;, 29);
}
catch (error:AppError)
{
trace(error.errorID + &quot;: &quot; + error.message)
}
Remarque : si vous souhaitez remplacer la m&eacute;thode Error.toString() dans votre sous-classe, fournissez-lui un
param&egrave;tre ...(rest). La sp&eacute;cification du langage ECMAScript sur laquelle est bas&eacute; ActionScript 3.0 d&eacute;finit ainsi la
m&eacute;thode Error.toString() et ActionScript 3.0 respecte cette d&eacute;finition &agrave; des fins de r&eacute;trocompatibilit&eacute;. Par
cons&eacute;quent, lorsque vous remplacez la m&eacute;thode Error.toString(), veillez &agrave; ce que les param&egrave;tres se correspondent
exactement. Vous ne pouvez pas transmettre de param&egrave;tres &agrave; la m&eacute;thode toString() lors de l’ex&eacute;cution, car ils sont
ignor&eacute;s.
R&eacute;ponse &agrave; des &eacute;v&eacute;nements et &agrave; l’&eacute;tat d’erreur
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’une des am&eacute;liorations majeures apport&eacute;es &agrave; la gestion des erreurs dans ActionScript 3.0 est la prise en charge de la
gestion des &eacute;v&eacute;nements d’erreur pour r&eacute;pondre &agrave; des erreurs asynchrones lors de l’ex&eacute;cution d’une application. (Pour
obtenir une d&eacute;finition des erreurs asynchrones, voir &laquo; Types d’erreurs &raquo; &agrave; la page 55).
Vous pouvez cr&eacute;er des &eacute;couteurs d’&eacute;v&eacute;nement et des gestionnaires d’&eacute;v&eacute;nements pour r&eacute;pondre aux &eacute;v&eacute;nements
d’erreurs. De nombreuses classes distribuent des &eacute;v&eacute;nements d’erreurs de la m&ecirc;me fa&ccedil;on que d’autres &eacute;v&eacute;nements. Par
exemple, une occurrence de la classe XMLSocket distribue normalement trois types d’&eacute;v&eacute;nements :Event.CLOSE,
Event.CONNECT et DataEvent.DATA. N&eacute;anmoins, lorsqu’un probl&egrave;me se produit, la classe XMLSocket peut distribuer
IOErrorEvent.IOError ou SecurityErrorEvent.SECURITY_ERROR. Pour plus d’informations sur les &eacute;couteurs et
les gestionnaires d’&eacute;v&eacute;nement, voir &laquo; Gestion des &eacute;v&eacute;nements &raquo; &agrave; la page 129.
Les &eacute;v&eacute;nements d’erreurs peuvent &ecirc;tre class&eacute;s en deux cat&eacute;gories :
• Ev&eacute;nements d’erreurs qui &eacute;tendent la classe ErrorEvent
La classe flash.events.ErrorEvent contient les propri&eacute;t&eacute;s et les m&eacute;thodes permettant de g&eacute;rer les erreurs d’ex&eacute;cution
li&eacute;es &agrave; des op&eacute;rations de r&eacute;seau et de communication dans une application en cours d’ex&eacute;cution. Les classes
AsyncErrorEvent, IOErrorEvent et SecurityErrorEvent &eacute;tendent la classe ErrorEvent. Si vous utilisez la version de
d&eacute;bogage d’un moteur d’ex&eacute;cution de Flash, une bo&icirc;te de dialogue vous informe, lors de l’ex&eacute;cution, de la pr&eacute;sence
d’&eacute;v&eacute;nements d’erreurs sans fonctions d’&eacute;couteur rencontr&eacute;s par le lecteur.
• Ev&eacute;nements d’erreurs bas&eacute;s sur le statut
Derni&egrave;re mise &agrave; jour le 27/4/2013
65
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Les &eacute;v&eacute;nements d’erreur bas&eacute;s sur le statut sont li&eacute;s aux propri&eacute;t&eacute;s netStatus et status des classes de
communication et de r&eacute;seau. Si un moteur d’ex&eacute;cution Flash rencontre un probl&egrave;me lors de la lecture ou de
l’&eacute;criture des donn&eacute;es, la valeur des propri&eacute;t&eacute;s netStatus.info.level ou status.level (selon l’objet de classe
que vous utilisez) est d&eacute;finie sur la valeur &quot;error&quot;. Vous r&eacute;pondez &agrave; cette erreur en v&eacute;rifiant que la propri&eacute;t&eacute; level
contient la valeur &quot;error&quot; dans votre fonction de gestionnaire d’&eacute;v&eacute;nement.
Utilisation d’&eacute;v&eacute;nements d’erreurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe ErrorEvent et ses sous-classes contiennent des types d’erreurs destin&eacute;s &agrave; g&eacute;rer les erreurs distribu&eacute;es par les
moteurs d’ex&eacute;cution Flash lorsqu’ils tentent de lire ou d’&eacute;crire des donn&eacute;es.
L’exemple suivant utilise &agrave; la fois une instruction try..catch et des gestionnaires d’&eacute;v&eacute;nement d’erreur pour afficher
toute erreur d&eacute;tect&eacute;e lors de la tentative de lecture d’un fichier local. Vous pouvez ajouter un code de gestion plus
&eacute;labor&eacute; pour proposer des options &agrave; l’utilisateur ou g&eacute;rer l’erreur automatiquement aux endroits indiqu&eacute;s par le
commentaire &laquo; your error-handling code here &raquo; :
package
{
import
import
import
import
import
import
import
import
import
flash.display.Sprite;
flash.errors.IOError;
flash.events.IOErrorEvent;
flash.events.TextEvent;
flash.media.Sound;
flash.media.SoundChannel;
flash.net.URLRequest;
flash.text.TextField;
flash.text.TextFieldAutoSize;
public class LinkEventExample extends Sprite
{
private var myMP3:Sound;
public function LinkEventExample()
{
myMP3 = new Sound();
var list:TextField = new TextField();
list.autoSize = TextFieldAutoSize.LEFT;
list.multiline = true;
list.htmlText = &quot;&lt;a href=\&quot;event:track1.mp3\&quot;&gt;Track 1&lt;/a&gt;&lt;br&gt;&quot;;
list.htmlText += &quot;&lt;a href=\&quot;event:track2.mp3\&quot;&gt;Track 2&lt;/a&gt;&lt;br&gt;&quot;;
addEventListener(TextEvent.LINK, linkHandler);
addChild(list);
}
private function playMP3(mp3:String):void
{
try
{
myMP3.load(new URLRequest(mp3));
myMP3.play();
}
catch (err:Error)
Derni&egrave;re mise &agrave; jour le 27/4/2013
66
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
{
trace(err.message);
// your error-handling code here
}
myMP3.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
}
private function linkHandler(linkEvent:TextEvent):void
{
playMP3(linkEvent.text);
// your error-handling code here
}
private function errorHandler(errorEvent:IOErrorEvent):void
{
trace(errorEvent.text);
// your error-handling code here
}
}
}
Utilisation d’&eacute;v&eacute;nements de changement de statut
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les moteurs d’ex&eacute;cution Flash changent dynamiquement la valeur des propri&eacute;t&eacute;s netStatus.info.level ou
status.level pour les classes qui prennent en charge la propri&eacute;t&eacute; level pendant qu’une application s’ex&eacute;cute. Les
classes qui ont la propri&eacute;t&eacute; netStatus.info.level sont NetConnection, NetStream et SharedObject. Les classes qui
ont la propri&eacute;t&eacute; status.level sont HTTPStatusEvent, Camera, Microphone et LocalConnection. Vous pouvez &eacute;crire
une fonction de gestionnaire pour r&eacute;pondre au changement de valeur level et suivre les erreurs de communication.
L’exemple suivant utilise une fonction netStatusHandler() pour tester la valeur de la propri&eacute;t&eacute; level. Si la
propri&eacute;t&eacute; level indique qu’une erreur a &eacute;t&eacute; rencontr&eacute;e, le code suit le message &laquo; Video stream failed &raquo;.
package
{
import
import
import
import
import
import
flash.display.Sprite;
flash.events.NetStatusEvent;
flash.events.SecurityErrorEvent;
flash.media.Video;
flash.net.NetConnection;
flash.net.NetStream;
public class VideoExample extends Sprite
{
private var videoUrl:String = &quot;Video.flv&quot;;
private var connection:NetConnection;
private var stream:NetStream;
public function VideoExample()
{
connection = new NetConnection();
connection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
connection.connect(null);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
67
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
private function netStatusHandler(event:NetStatusEvent):void
{
if (event.info.level == &quot;error&quot;)
{
trace(&quot;Video stream failed&quot;)
}
else
{
connectStream();
}
}
private function securityErrorHandler(event:SecurityErrorEvent):void
{
trace(&quot;securityErrorHandler: &quot; + event);
}
private function connectStream():void
{
var stream:NetStream = new NetStream(connection);
var video:Video = new Video();
video.attachNetStream(stream);
stream.play(videoUrl);
addChild(video);
}
}
}
Comparaison des classes Error
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript fournit de nombreuses classes Error pr&eacute;d&eacute;finies. Vous pouvez toutefois faire appel aux m&ecirc;mes classes
Error dans votre propre code. Il existe deux types principaux de classes Error dans ActionScript 3.0 : les classes Error
de base d’ActionScript et les classes Error du package flash.error. Le package flash.error contient des classes
suppl&eacute;mentaires permettant le d&eacute;bogage et le d&eacute;veloppement d’applications ActionScript 3.0.
Classes Error de base
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Parmi les classes Error de base figurent les classes Error, ArgumentError, EvalError, RangeError, ReferenceError,
SecurityError, SyntaxError, TypeError, URIError et VerifyError. Chacune de ces classes se trouve dans l’espace de
noms de niveau sup&eacute;rieur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
68
69
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Nom de classe
Description
Error
La classe Error permet de renvoyer des exceptions et La classe Error sert de classe de base &agrave; toutes les erreurs
correspond &agrave; la classe de base des autres classes
d’ex&eacute;cution et est recommand&eacute;e pour toutes les classes
d’exception d&eacute;finies dans ECMAScript : EvalError,
d’erreur personnalis&eacute;es.
RangeError, ReferenceError, SyntaxError, TypeError et
URIError.
ArgumentError
La classe ArgumentError repr&eacute;sente une erreur qui se Voici des exemples d’erreurs d’argument :
produit lorsque les valeurs de param&egrave;tre fournies lors
• Trop ou trop peu d’arguments sont fournis &agrave; une m&eacute;thode.
d’un appel de fonction ne correspondent pas aux
param&egrave;tres d&eacute;finis pour celle-ci.
• Un argument devait &ecirc;tre membre d’une &eacute;num&eacute;ration, et cela
n’a pas &eacute;t&eacute; le cas.
EvalError
Une exception EvalError est renvoy&eacute;e si des
Dans ActionScript 3.0, la prise en charge de la fonction eval()
param&egrave;tres sont transmis au constructeur de la classe a &eacute;t&eacute; supprim&eacute;e et toute tentative d’utilisation de la fonction
Function ou si le code utilisateur appelle la fonction entra&icirc;ne le renvoi d’une erreur.
eval().
Les versions pr&eacute;c&eacute;dentes de Flash Player utilisaient la fonction
eval() pour acc&eacute;der &agrave; des variables, des propri&eacute;t&eacute;s, des objets
ou des clips par nom.
RangeError
Une exception RangeError est renvoy&eacute;e si une valeur Par exemple, une exception RangeError est renvoy&eacute;e par la
num&eacute;rique exc&egrave;de la plage acceptable.
classe Timer si un retard est n&eacute;gatif ou infini. Elle peut
&eacute;galement &ecirc;tre renvoy&eacute;e si vous tentez d’ajouter un objet
d’affichage &agrave; une profondeur non valide.
ReferenceError
Une exception ReferenceError est renvoy&eacute;e lorsque
vous tentez d’utiliser une r&eacute;f&eacute;rence &agrave; une propri&eacute;t&eacute;
non d&eacute;finie pour un objet scell&eacute; (non dynamique).
Les versions du compilateur ActionScript ant&eacute;rieures
&agrave; ActionScript 3.0 ne renvoyaient pas d’erreur lorsque
vous tentiez d’acc&eacute;der &agrave; une propri&eacute;t&eacute; non
d&eacute;finie. ActionScript 3.0 renvoie toutefois
l’exception ReferenceError dans ce cas de figure.
Les exceptions pour des variables non d&eacute;finies pointent vers
des bogues &eacute;ventuels afin d’am&eacute;liorer la qualit&eacute; du logiciel.
Cependant, si vous n’avez pas l’habitude d’initialiser les
variables, ce nouveau comportement d’ActionScript requiert
de vous quelques changements lorsque vous &eacute;crivez du code.
SecurityError
L’exception SecurityError est renvoy&eacute;e lorsqu’une
violation de s&eacute;curit&eacute; se produit et que l’acc&egrave;s est
refus&eacute;.
Voici des exemples d’erreurs de s&eacute;curit&eacute; :
SyntaxError
Remarques
Une exception SyntaxError est renvoy&eacute;e lorsqu’il se
produit une erreur d’analyse dans votre code
ActionScript.
•
Un acc&egrave;s &agrave; une propri&eacute;t&eacute; ou un appel de m&eacute;thode non
autoris&eacute; est effectu&eacute; en franchissant les limites du sandbox
de s&eacute;curit&eacute;.
•
Il s’est produit une tentative d’acc&egrave;s &agrave; une URL non autoris&eacute;e
par le sandbox de s&eacute;curit&eacute;.
•
Il s’est produit une tentative de connexion socket sur un port,
mais le fichier de r&eacute;gulation socket appropri&eacute; n’&eacute;tait pas
pr&eacute;sent.
•
Il s’est produit une tentative d’acc&egrave;s &agrave; la cam&eacute;ra ou au
microphone de l’utilisateur et celui-ci a refus&eacute; l’acc&egrave;s au
p&eacute;riph&eacute;rique.
Une exception SyntaxError peut &ecirc;tre renvoy&eacute;e dans les cas
suivants :
•
ActionScript renvoie des exceptions SyntaxError lorsque la
classe RegExp analyse une expression r&eacute;guli&egrave;re non valide.
•
ActionScript renvoie des exceptions SyntaxError lorsque la
classe XMLDocument analyse un code XML non valide.
Derni&egrave;re mise &agrave; jour le 27/4/2013
70
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Nom de classe
Description
TypeError
L’exception TypeError est renvoy&eacute;e lorsque le type
Une exception TypeError peut &ecirc;tre renvoy&eacute;e dans les cas
r&eacute;el d’un op&eacute;rande ne correspond pas au type pr&eacute;vu. suivants :
URIError
VerifyError
Remarques
•
Un param&egrave;tre r&eacute;el de fonction ou de m&eacute;thode ne peut pas
&ecirc;tre forc&eacute; &agrave; correspondre au type de param&egrave;tre formel.
•
Une valeur est affect&eacute;e &agrave; une variable et ne peut pas &ecirc;tre
forc&eacute;e &agrave; correspondre au type de la variable.
•
Le c&ocirc;t&eacute; droit de l’op&eacute;rateur is ou instanceof n’est pas un
type valide.
•
L’utilisation du mot cl&eacute; super n’est pas valide.
•
Une recherche de propri&eacute;t&eacute; donne lieu &agrave; plusieurs liaisons,
soit un r&eacute;sultat ambigu.
•
Une m&eacute;thode est appel&eacute;e pour un objet incompatible. Par
exemple, une exception TypeError est renvoy&eacute;e si une
m&eacute;thode de la classe RegExp est &laquo; greff&eacute;e &raquo; sur un objet
g&eacute;n&eacute;rique, puis appel&eacute;e.
L’exception URIError est renvoy&eacute;e lorsque l’une des
fonctions de gestion URI globales est utilis&eacute;e d’une
mani&egrave;re qui n’est pas compatible avec sa d&eacute;finition.
Une exception URIError peut &ecirc;tre renvoy&eacute;e dans les cas
suivants :
Une erreur VerifyError est renvoy&eacute;e lorsqu’un fichier
SWF incorrect ou alt&eacute;r&eacute; est d&eacute;tect&eacute;.
Lorsqu’un fichier SWF charge un autre fichier SWF, le fichier
SWF parent peut intercepter une exception VerifyError g&eacute;n&eacute;r&eacute;e
par le fichier SWF charg&eacute;.
Un URI non valide est d&eacute;fini par une fonction API de Flash Player
qui s’attend &agrave; un URI valide, comme Socket.connect().
Classes Error du package flash.error
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le package flash.error contient des classes Error consid&eacute;r&eacute;es comme parties int&eacute;grantes de l’API des moteurs
d’ex&eacute;cution de Flash. A l’encontre des classes Error d&eacute;crites, le package flash.error communique les &eacute;v&eacute;nements
d’erreurs propres aux moteurs d’ex&eacute;cution de Flash (tel Flash Player ou Adobe AIR).
Derni&egrave;re mise &agrave; jour le 27/4/2013
71
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Nom de classe
Description
Remarques
EOFError
Une exception EOFError est &eacute;mise lors d’une
tentative de lecture au-del&agrave; de la fin des donn&eacute;es
disponibles.
Par exemple, une exception EOFError est &eacute;mise
chaque fois qu’une m&eacute;thode de lecture de l’interface
IDataInput est appel&eacute;e et que les donn&eacute;es sont
insuffisantes pour r&eacute;pondre &agrave; la requ&ecirc;te de lecture.
IllegalOperationError
Une exception IllegalOperationError est renvoy&eacute;e Voici quelques exemples d’exceptions d’erreurs li&eacute;es &agrave;
lorsqu’une m&eacute;thode n’est pas impl&eacute;ment&eacute;e ou si des op&eacute;rations non valides :
l’impl&eacute;mentation ne couvre pas l’utilisation
• Une classe de base, telle que
actuelle.
DisplayObjectContainer, propose plus de
fonctionnalit&eacute;s qu’une sc&egrave;ne ne peut prendre en
charge. Par exemple, si vous tentez d’obtenir ou de
d&eacute;finir un masque sur la sc&egrave;ne (&agrave; l’aide de
stage.mask), le moteur d’ex&eacute;cution de Flash
renvoie une exception IllegalOperationError
accompagn&eacute;e du message &laquo; La classe Stage
n’impl&eacute;mente ni cette propri&eacute;t&eacute;, ni cette m&eacute;thode &raquo;.
•
Une sous-classe h&eacute;rite d’une m&eacute;thode dont elle n’a
pas besoin et qu’elle ne souhaite pas prendre en
charge.
•
Certaines m&eacute;thodes d’accessibilit&eacute; sont appel&eacute;es
lorsque Flash Player est compil&eacute; sans les fonctions
d’accessibilit&eacute;.
•
Les fonctions r&eacute;serv&eacute;es &agrave; la cr&eacute;ation sont appel&eacute;es &agrave;
partir d’une version d’ex&eacute;cution de Flash Player.
•
Vous tentez de d&eacute;finir le nom d’un objet plac&eacute; sur le
sc&eacute;nario.
IOError
Une exception IOError est renvoy&eacute;e lorsqu’un type Vous obtenez cette erreur, par exemple, lorsque vous
d’exception E/S se produit.
tentez une op&eacute;ration de lecture-&eacute;criture sur un socket
qui n’est pas connect&eacute; ou qui est d&eacute;connect&eacute;.
MemoryError
Une exception MemoryError est renvoy&eacute;e lors de
l’&eacute;chec d’une requ&ecirc;te d’allocation de m&eacute;moire.
Par d&eacute;faut, ActionScript Virtual Machine 2 n’impose
pas de limite &agrave; la quantit&eacute; de m&eacute;moire allou&eacute;e par un
programme ActionScript. Sur un syst&egrave;me de bureau,
les &eacute;checs d’allocation de m&eacute;moire sont rares. Une
erreur est renvoy&eacute;e lorsque le syst&egrave;me ne parvient pas
&agrave; allouer la m&eacute;moire requise pour une op&eacute;ration. Par
cons&eacute;quent, sur un syst&egrave;me de bureau, cette
exception est peu fr&eacute;quente, &agrave; moins qu’une requ&ecirc;te
d’allocation ne soit extr&ecirc;mement importante (par
exemple, une requ&ecirc;te de 3 milliards d’octets est
impossible, car un programme Microsoft&reg; Windows&reg;
de 32 bits peut acc&eacute;der &agrave; 2 Go d’espace d’adressage
uniquement).
ScriptTimeoutError
Une exception ScriptTimeoutError est renvoy&eacute;e
lorsqu’un intervalle de d&eacute;lai d’expiration du script
de 15 secondes est atteint. En interceptant une
exception ScriptTimeoutError, vous pouvez g&eacute;rer
le d&eacute;lai d’expiration du script plus en douceur. Si
aucun gestionnaire d’exception n’est d&eacute;fini, le
gestionnaire de l’exception non intercept&eacute;e
affiche une bo&icirc;te de dialogue contenant un
message d’erreur.
Pour &eacute;viter qu’un d&eacute;veloppeur n’intercepte
l’exception et reste dans une boucle sans fin, seule la
premi&egrave;re exception ScriptTimeoutError renvoy&eacute;e au
cours d’un script donn&eacute; peut &ecirc;tre intercept&eacute;e. Le code
ne peut pas intercepter une exception
ScriptTimeoutError ult&eacute;rieure. Elle passe donc
imm&eacute;diatement au gestionnaire de l’exception non
intercept&eacute;e.
StackOverflowError
L’exception StackOverflowError est renvoy&eacute;e
lorsque la pile disponible pour le script a &eacute;t&eacute;
&eacute;puis&eacute;e.
Une exception StackOverflowError peut indiquer
qu’un probl&egrave;me de r&eacute;cursivit&eacute; &agrave; l’infini s’est produit.
Derni&egrave;re mise &agrave; jour le 27/4/2013
72
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Exemple de gestion des erreurs : application
CustomErrors
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’application CustomErrors d&eacute;crit les techniques d’utilisation des erreurs personnalis&eacute;es lors de la cr&eacute;ation d’une
application. Ces techniques sont les suivantes :
• Validation d’un paquet XML
• Ecriture d’une erreur personnalis&eacute;e
• Renvoi d’erreurs personnalis&eacute;es
• Notification des utilisateurs lors du renvoi d’une erreur
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application CustomErrors se trouvent
dans le dossier Samples/CustomError. L’application se compose des fichiers suivants :
Fichier
Description
CustomErrors.mxml
Fichier d’application principal en FLA pour Flash ou en MXML pour Flex
ou
CustomErrors.fla
com/example/programmingas3/errors/ApplicationError.as
Une classe servant de classe Error de base pour les classes FatalError et
WarningError.
com/example/programmingas3/errors/FatalError.as
Une classe qui d&eacute;finit une erreur FatalError renvoy&eacute;e par l’application.
Cette classe &eacute;tend la classe ApplicationError personnalis&eacute;e.
com/example/programmingas3/errors/Validator.as
Une classe qui d&eacute;finit une seule m&eacute;thode qui valide un paquet XML
employee fourni par l’utilisateur.
com/example/programmingas3/errors/WarningError.as
Une classe qui d&eacute;finit une erreur WarningError renvoy&eacute;e par
l’application. Cette classe &eacute;tend la classe ApplicationError personnalis&eacute;e.
Pr&eacute;sentation de l’application CustomErrors
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Au chargement de l’application, la m&eacute;thode initApp() est appel&eacute;e dans les applications Flex ou le code du sc&eacute;nario
(autre qu’une fonction) est ex&eacute;cut&eacute; dans les applications Flash Professional. Ce code d&eacute;finit un exemple de paquet
XML que la classe Validator v&eacute;rifiera. Le code suivant est ex&eacute;cut&eacute; :
employeeXML =
&lt;employee id=&quot;12345&quot;&gt;
&lt;firstName&gt;John&lt;/firstName&gt;
&lt;lastName&gt;Doe&lt;/lastName&gt;
&lt;costCenter&gt;12345&lt;/costCenter&gt;
&lt;costCenter&gt;67890&lt;/costCenter&gt;
&lt;/employee&gt;;
}
Le paquet XML est ensuite affich&eacute; dans une occurrence du composant TextArea sur la sc&egrave;ne. Cette &eacute;tape permet de
modifier le paquet XML avant de tenter de le revalider.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Lorsque l’utilisateur clique sur le bouton de validation, la m&eacute;thode validateData() est appel&eacute;e. Cette m&eacute;thode valide
le paquet XML employee &agrave; l’aide de la m&eacute;thode validateEmployeeXML() de la classe Validator. Le code suivant
pr&eacute;sente la m&eacute;thode validateData() :
function validateData():void
{
try
{
var tempXML:XML = XML(xmlText.text);
Validator.validateEmployeeXML(tempXML);
status.text = &quot;The XML was successfully validated.&quot;;
}
catch (error:FatalError)
{
showFatalError(error);
}
catch (error:WarningError)
{
showWarningError(error);
}
catch (error:Error)
{
showGenericError(error);
}
}
Un objet XML temporaire est d’abord cr&eacute;&eacute; &agrave; l’aide du contenu de l’occurrence du composant TextArea xmlText. La
m&eacute;thode validateEmployeeXML() de la classe Validator personnalis&eacute;e
(com.example.programmingas3/errors/Validator.as) est ensuite appel&eacute;e et transmet l’objet XML temporaire comme
param&egrave;tre. Si le paquet XML est valide, l’occurrence du composant Label status affiche un message de r&eacute;ussite et
l’application se ferme. Si la m&eacute;thode validateEmployeeXML() renvoie une erreur personnalis&eacute;e (c’est-&agrave;-dire qu’une
erreur FatalError, WarningError ou une erreur g&eacute;n&eacute;rique se produit), l’instruction catch appropri&eacute;e s’ex&eacute;cute et
appelle les m&eacute;thodes showFatalError(), showWarningError() ou showGenericError(). Chacune de ces
m&eacute;thodes affiche un message appropri&eacute; dans une zone de texte appel&eacute;e statusText pour avertir l’utilisateur de l’erreur
sp&eacute;cifique qui s’est produite. Chaque m&eacute;thode met &eacute;galement &agrave; jour l’occurrence du composant Label status avec un
message sp&eacute;cifique.
Si une erreur grave se produit pendant une tentative de validation du paquet XML employee, le message d’erreur
s’affiche dans la zone de texte statusText et l’occurrence du composant TextArea xmlText et l’occurrence du
composant Button validateBtn sont d&eacute;sactiv&eacute;es, comme l’indique le code suivant :
function showFatalError(error:FatalError):void
{
var message:String = error.message + &quot;\n\n&quot;;
var title:String = error.getTitle();
statusText.text = message + &quot; &quot; + title + &quot;\n\nThis application has ended.&quot;;
this.xmlText.enabled = false;
this.validateBtn.enabled = false;
hideButtons();
}
S’il se produit une erreur d’avertissement au lieu d’une erreur grave, le message d’erreur est affich&eacute; dans l’occurrence
de TextArea statusText, mais les occurrences de composant TextField xmlText et Button ne sont pas d&eacute;sactiv&eacute;es. La
m&eacute;thode showWarningError() affiche le message d’erreur personnalis&eacute; dans la zone de texte statusText. Le
message invite &eacute;galement l’utilisateur &agrave; indiquer s’il souhaite poursuivre la validation de l’objet XML ou annuler le
script. Le fragment de code suivant pr&eacute;sente la m&eacute;thode showWarningError() :
Derni&egrave;re mise &agrave; jour le 27/4/2013
73
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
function showWarningError(error:WarningError):void
{
var message:String = error.message + &quot;\n\n&quot; + &quot;Do you want to exit this application?&quot;;
showButtons();
var title:String = error.getTitle();
statusText.text = message;
}
Lorsque l’utilisateur clique sur le bouton Oui ou Non, la m&eacute;thode closeHandler() est appel&eacute;e. Le fragment de code
suivant pr&eacute;sente la m&eacute;thode closeHandler() :
function closeHandler(event:CloseEvent):void
{
switch (event.detail)
{
case yesButton:
showFatalError(new FatalError(9999));
break;
case noButton:
statusText.text = &quot;&quot;;
hideButtons();
break;
}
}
Si l’utilisateur souhaite annuler le script en cliquant sur Oui, une exception FatalError est renvoy&eacute;e, provoquant l’arr&ecirc;t
de l’application.
Cr&eacute;ation d’une validation personnalis&eacute;e
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Validator personnalis&eacute;e contient une seule m&eacute;thode, validateEmployeeXML(). La m&eacute;thode
validateEmployeeXML() g&egrave;re un seul argument, employee, qui correspond au paquet XML &agrave; valider. La m&eacute;thode
validateEmployeeXML() est la suivante :
public static function validateEmployeeXML(employee:XML):void
{
// checks for the integrity of items in the XML
if (employee.costCenter.length() &lt; 1)
{
throw new FatalError(9000);
}
if (employee.costCenter.length() &gt; 1)
{
throw new WarningError(9001);
}
if (employee.ssn.length() != 1)
{
throw new FatalError(9002);
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
74
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
Un employ&eacute; doit appartenir &agrave; un (et un seul) centre de co&ucirc;t pour &ecirc;tre valid&eacute;. S’il n’appartient &agrave; aucun centre de co&ucirc;t,
la m&eacute;thode renvoie une erreur FatalError, qui se propage jusqu’&agrave; la m&eacute;thode validateData() dans le fichier
d’application principale. Si l’employ&eacute; appartient &agrave; plusieurs centres de co&ucirc;t, une erreur WarningError est renvoy&eacute;e. La
derni&egrave;re v&eacute;rification de la validation XML contr&ocirc;le que l’utilisateur poss&egrave;de un seul num&eacute;ro de s&eacute;curit&eacute; sociale d&eacute;fini
(le nœud ssn dans le paquet XML). S’il n’y a pas exactement un nœud ssn, une erreur FatalError est renvoy&eacute;e.
Vous pouvez ajouter des v&eacute;rifications suppl&eacute;mentaires &agrave; la m&eacute;thode validateEmployeeXML() afin de v&eacute;rifier, par
exemple, que le nœud ssn contient un num&eacute;ro valide, ou que l’employ&eacute; poss&egrave;de au moins un num&eacute;ro de t&eacute;l&eacute;phone et
une adresse &eacute;lectronique, et que ces deux valeurs sont valides. Vous pouvez &eacute;galement modifier le XML de fa&ccedil;on &agrave; ce
que chaque employ&eacute; ait un ID unique et sp&eacute;cifie l’ID de son responsable.
D&eacute;finition de la classe ApplicationError
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe ApplicationError sert de classe de base aux classes FatalError et WarningError. Elle &eacute;tend la classe Error et
d&eacute;finit ses propres propri&eacute;t&eacute;s et m&eacute;thodes personnalis&eacute;es, y compris un ID d’erreur, la gravit&eacute; et un objet XML
contenant les codes d’erreur personnalis&eacute;s et les messages. Cette classe d&eacute;finit &eacute;galement deux constantes statiques
utilis&eacute;es pour d&eacute;finir la gravit&eacute; de chaque type d’erreur.
La m&eacute;thode du constructeur de la classe ApplicationError est la suivante :
public function ApplicationError()
{
messages =
&lt;errors&gt;
&lt;error code=&quot;9000&quot;&gt;
&lt;![CDATA[Employee must be assigned to a cost center.]]&gt;
&lt;/error&gt;
&lt;error code=&quot;9001&quot;&gt;
&lt;![CDATA[Employee must be assigned to only one cost center.]]&gt;
&lt;/error&gt;
&lt;error code=&quot;9002&quot;&gt;
&lt;![CDATA[Employee must have one and only one SSN.]]&gt;
&lt;/error&gt;
&lt;error code=&quot;9999&quot;&gt;
&lt;![CDATA[The application has been stopped.]]&gt;
&lt;/error&gt;
&lt;/errors&gt;;
}
Chaque nœud d’erreur dans l’objet XML contient un code num&eacute;rique unique et un message d’erreur. Vous pouvez
consulter facilement les messages d’erreur par code d’erreur &agrave; l’aide d’E4X, comme indiqu&eacute; dans la m&eacute;thode
getMessageText() suivante :
public function getMessageText(id:int):String
{
var message:XMLList = messages.error.(@code == id);
return message[0].text();
}
La m&eacute;thode getMessageText() prend un seul argument entier, id, et renvoie une cha&icirc;ne. L’argument id correspond
au code de l’erreur &agrave; rechercher. Par exemple, lorsque vous transmettez un id de 9001, l’erreur indiquant que les
employ&eacute;s doivent &ecirc;tre affect&eacute;s &agrave; un seul centre de co&ucirc;t est renvoy&eacute;e. Si plusieurs erreurs ont le m&ecirc;me code,
ActionScript renvoie le message d’erreur uniquement pour le premier r&eacute;sultat trouv&eacute; (message[0] dans l’objet
XMLList renvoy&eacute;).
Derni&egrave;re mise &agrave; jour le 27/4/2013
75
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
La m&eacute;thode suivante de cette classe, getTitle(), ne prend aucun param&egrave;tre et renvoie une valeur de cha&icirc;ne qui
contient l’ID de cette erreur sp&eacute;cifique. Cette valeur permet d’identifier ais&eacute;ment l’erreur exacte qui s’est produite lors
de la validation du paquet XML. Le fragment de code suivant pr&eacute;sente la m&eacute;thode getTitle() :
public function getTitle():String
{
return &quot;Error #&quot; + id;
}
La derni&egrave;re m&eacute;thode finale de la classe ApplicationError est toString(). Cette m&eacute;thode remplace la fonction d&eacute;finie
dans la classe Error pour que vous puissiez personnaliser la pr&eacute;sentation du message d’erreur. La m&eacute;thode renvoie une
cha&icirc;ne qui identifie le num&eacute;ro d’erreur sp&eacute;cifique et le message qui s’est affich&eacute;.
public override function toString():String
{
return &quot;[APPLICATION ERROR #&quot; + id + &quot;] &quot; + message;
}
D&eacute;finition de la classe FatalError
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe FatalError &eacute;tend la classe ApplicationError personnalis&eacute;e et d&eacute;finit trois m&eacute;thodes : le constructeur
FatalError, getTitle() et toString(). La premi&egrave;re m&eacute;thode, le constructeur FatalError, prend un seul argument
entier, errorID, et d&eacute;finit la gravit&eacute; de l’erreur &agrave; l’aide des valeurs de constante statiques d&eacute;finies dans la classe
ApplicationError. Elle obtient le message de l’erreur sp&eacute;cifique en appelant la m&eacute;thode getMessageText() dans la
classe ApplicationError. Le constructeur FatalError se pr&eacute;sente comme suit :
public function FatalError(errorID:int)
{
id = errorID;
severity = ApplicationError.FATAL;
message = getMessageText(errorID);
}
La m&eacute;thode suivante de la classe FatalError, getTitle(), remplace la m&eacute;thode getTitle() d&eacute;finie pr&eacute;c&eacute;demment
dans la classe ApplicationError et ajoute le texte “-- FATAL” dans le titre pour informer l’utilisateur qu’une erreur
grave s’est produite. La m&eacute;thode getTitle() se pr&eacute;sente comme suit :
public override function getTitle():String
{
return &quot;Error #&quot; + id + &quot; -- FATAL&quot;;
}
La m&eacute;thode finale dans cette classe, toString(), remplace la m&eacute;thode toString() d&eacute;finie dans la classe
ApplicationError. La m&eacute;thode toString() est la suivante :
public override function toString():String
{
return &quot;[FATAL ERROR #&quot; + id + &quot;] &quot; + message;
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
76
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des erreurs
D&eacute;finition de la classe WarningError
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe WarningError &eacute;tend la classe ApplicationError et est presque identique &agrave; la classe FatalError, &agrave; l’exception
de quelques changements de cha&icirc;ne mineurs. Elle d&eacute;finit la gravit&eacute; de l’erreur sur ApplicationError.WARNING au lieu
de ApplicationError.FATAL, comme indiqu&eacute; dans le code suivant :
public function WarningError(errorID:int)
{
id = errorID;
severity = ApplicationError.WARNING;
message = super.getMessageText(errorID);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
77
78
Chapitre 5 : Utilisation d’expressions
r&eacute;guli&egrave;res
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Une expression r&eacute;guli&egrave;re d&eacute;crit un mod&egrave;le servant &agrave; rechercher et &agrave; manipuler du texte de correspondance dans des
cha&icirc;nes. Les expressions r&eacute;guli&egrave;res ressemblent &agrave; des cha&icirc;nes, mais elles comprennent des codes sp&eacute;ciaux pour d&eacute;crire
des mod&egrave;les et des r&eacute;p&eacute;titions. Par exemple, l’expression r&eacute;guli&egrave;re suivante correspond &agrave; une cha&icirc;ne qui commence
par le caract&egrave;re A suivi d’un ou de plusieurs chiffres s&eacute;quentiels :
/A\d+/
Les rubriques suivantes sont consacr&eacute;es &agrave; la syntaxe de base de construction d’expressions r&eacute;guli&egrave;res. N&eacute;anmoins, les
expressions r&eacute;guli&egrave;res peuvent &ecirc;tre tr&egrave;s complexes et comporter de nombreuses nuances. Vous pouvez vous
documenter sur les expressions r&eacute;guli&egrave;res sur le Web et dans les librairies. Diff&eacute;rents environnements de
programmation impl&eacute;mentent des expressions r&eacute;guli&egrave;res de diff&eacute;rentes fa&ccedil;ons. ActionScript 3.0 impl&eacute;mente des
expressions r&eacute;guli&egrave;res comme d&eacute;fini dans la version 3 de la sp&eacute;cification du langage ECMAScript (ECMA-262).
Voir aussi
RegExp
Principes de base des expressions r&eacute;guli&egrave;res
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Une expression r&eacute;guli&egrave;re d&eacute;crit un mod&egrave;le de caract&egrave;res. Les expressions r&eacute;guli&egrave;res servent g&eacute;n&eacute;ralement &agrave; v&eacute;rifier
qu’une valeur de texte est conforme &agrave; un mod&egrave;le particulier (par exemple, v&eacute;rifier qu’un num&eacute;ro de t&eacute;l&eacute;phone saisi par
l’utilisateur comporte le nombre de chiffres correct) ou &agrave; remplacer des portions d’une valeur de texte qui
correspondent &agrave; un mod&egrave;le donn&eacute;.
Les expressions r&eacute;guli&egrave;res peuvent &ecirc;tre simples. Par exemple, supposons que vous souhaitiez confirmer qu’une cha&icirc;ne
particuli&egrave;re correspond &agrave; ABC ou que vous souhaitiez remplacer chaque occurrence d’ABC dans une cha&icirc;ne par un
autre texte. Dans ce cas, vous pouvez utiliser l’expression r&eacute;guli&egrave;re suivante qui d&eacute;finit le mod&egrave;le comportant les lettres
A, B et C, dans l’ordre :
/ABC/
Le litt&eacute;ral de l’expression r&eacute;guli&egrave;re est d&eacute;limit&eacute; avec la barre oblique (/).
Les mod&egrave;les d’expression r&eacute;guli&egrave;re peuvent &eacute;galement &ecirc;tre complexes et parfois sembler obscures, comme l’expression
suivante pour &eacute;tablir une correspondance avec une adresse &eacute;lectronique valide :
/([0-9a-zA-Z]+[-._+&amp;])*[0-9a-zA-Z]+@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}/
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Vous utiliserez le plus souvent des expressions r&eacute;guli&egrave;res pour rechercher des mod&egrave;les dans des cha&icirc;nes et pour
remplacer des caract&egrave;res. Dans ces cas, vous cr&eacute;erez un objet d’expression r&eacute;guli&egrave;re et l’utiliserez comme param&egrave;tre
pour une ou plusieurs m&eacute;thodes de classe String. Les m&eacute;thodes suivantes de la classe String prennent des expressions
r&eacute;guli&egrave;res comme param&egrave;tres : match(), replace(), search() et split(). Pour plus d’informations sur ces
m&eacute;thodes, voir &laquo; Recherche de mod&egrave;les dans des cha&icirc;nes et remplacement de sous-cha&icirc;nes &raquo; &agrave; la page 17.
La classe RegExp comprend les m&eacute;thodes suivantes : test() et exec(). Pour plus d’informations, voir &laquo; M&eacute;thodes
d’utilisation d’expressions r&eacute;guli&egrave;res avec des cha&icirc;nes &raquo; &agrave; la page 93.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs &agrave; la fonctionnalit&eacute; &eacute;tudi&eacute;e.
Caract&egrave;re d’&eacute;chappement Caract&egrave;re indiquant que le caract&egrave;re qui suit doit &ecirc;tre consid&eacute;r&eacute; comme un caract&egrave;re de
remplacement plut&ocirc;t que comme un caract&egrave;re litt&eacute;ral. Dans une syntaxe d’expression r&eacute;guli&egrave;re, la barre oblique
inverse (\) est le caract&egrave;re d’&eacute;chappement. Par cons&eacute;quent, une barre oblique inverse suivie d’un autre caract&egrave;re est un
code sp&eacute;cial plut&ocirc;t que le caract&egrave;re &agrave; proprement parler.
Indicateur Caract&egrave;re qui sp&eacute;cifie une option associ&eacute;e au mode d’utilisation du mod&egrave;le d’expression r&eacute;guli&egrave;re (respect
de la casse, par exemple).
Caract&egrave;re de remplacement Caract&egrave;re qui a une signification sp&eacute;ciale dans un mod&egrave;le d’expression r&eacute;guli&egrave;re et qui ne
repr&eacute;sente pas litt&eacute;ralement ce caract&egrave;re dans le mod&egrave;le.
Quantificateur Caract&egrave;res indiquant le nombre de r&eacute;p&eacute;titions d’une partie du mod&egrave;le. Par exemple, un quantificateur
peut &ecirc;tre utilis&eacute; pour indiquer qu’un code postal am&eacute;ricain doit contenir cinq ou neuf chiffres.
Expression r&eacute;guli&egrave;re Instruction de programme d&eacute;finissant un mod&egrave;le de caract&egrave;res qui permet de confirmer si
d’autres cha&icirc;nes correspondent &agrave; ce mod&egrave;le ou de remplacer des sections d’une cha&icirc;ne.
Syntaxe d’expression r&eacute;guli&egrave;re
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Cette section d&eacute;crit tous les &eacute;l&eacute;ments de la syntaxe d’expression r&eacute;guli&egrave;re d’ActionScript. Comme vous pourrez le
constater, les expressions r&eacute;guli&egrave;res peuvent &ecirc;tre tr&egrave;s complexes et comporter de nombreuses nuances. Vous pouvez
vous documenter sur les expressions r&eacute;guli&egrave;res sur le Web et dans les librairies. Diff&eacute;rents environnements de
programmation impl&eacute;mentent des expressions r&eacute;guli&egrave;res de diff&eacute;rentes fa&ccedil;ons. ActionScript 3.0 impl&eacute;mente des
expressions r&eacute;guli&egrave;res comme d&eacute;fini dans la version 3 de la sp&eacute;cification du langage ECMAScript (ECMA-262).
G&eacute;n&eacute;ralement, vous utilisez des expressions r&eacute;guli&egrave;res qui correspondent &agrave; des mod&egrave;les plus compliqu&eacute;s qu’une
simple cha&icirc;ne de caract&egrave;res. Par exemple, l’expression r&eacute;guli&egrave;re suivante d&eacute;finit le mod&egrave;le comportant les lettres A, B
et C, dans l’ordre, suivies par un chiffre :
/ABC\d/
Le code \d repr&eacute;sente un chiffre. La barre oblique inverse (\) est appel&eacute;e caract&egrave;re d’&eacute;chappement. Lorsqu’elle est
combin&eacute;e au caract&egrave;re qui la suit (dans ce cas, la lettre d), elle a une signification sp&eacute;ciale dans l’expression r&eacute;guli&egrave;re.
L’expression r&eacute;guli&egrave;re suivante d&eacute;finit le mod&egrave;le des lettres ABC suivies par des chiffres (remarquez l’ast&eacute;risque) :
/ABC\d*/
Derni&egrave;re mise &agrave; jour le 27/4/2013
79
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
L’ast&eacute;risque (*) est un caract&egrave;re de remplacement. Un caract&egrave;re de remplacement est un caract&egrave;re ayant une
signification sp&eacute;ciale dans les expressions r&eacute;guli&egrave;res. L’ast&eacute;risque est un type de caract&egrave;re de remplacement sp&eacute;cifique
appel&eacute; quantificateur, utilis&eacute; pour quantifier le nombre de r&eacute;p&eacute;titions d’un caract&egrave;re ou groupe de caract&egrave;res. Pour
plus de d&eacute;tails, voir &laquo; Quantificateurs &raquo; &agrave; la page 85.
Outre son mod&egrave;le, une expression r&eacute;guli&egrave;re peut contenir des indicateurs qui sp&eacute;cifient comment l’expression
r&eacute;guli&egrave;re doit &ecirc;tre mise en correspondance. Par exemple, l’expression r&eacute;guli&egrave;re suivante utilise l’indicateur i qui
indique qu’elle ignore le respect de la casse dans les cha&icirc;nes de correspondance :
/ABC\d*/i
Pour plus d’informations, voir &laquo; Indicateurs et propri&eacute;t&eacute;s &raquo; &agrave; la page 89.
Vous pouvez utiliser des expressions r&eacute;guli&egrave;res &agrave; l’aide des m&eacute;thodes suivantes de la classe String : match(),
replace() et search(). Pour plus d’informations sur ces m&eacute;thodes, voir &laquo; Recherche de mod&egrave;les dans des cha&icirc;nes et
remplacement de sous-cha&icirc;nes &raquo; &agrave; la page 17.
Cr&eacute;ation d’une occurrence d’expression r&eacute;guli&egrave;re
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Il existe deux fa&ccedil;ons de cr&eacute;er une occurrence d’expression r&eacute;guli&egrave;re. L’une des m&eacute;thodes consiste &agrave; utiliser des barres
obliques (/) pour d&eacute;limiter l’expression r&eacute;guli&egrave;re, et l’autre consiste &agrave; utiliser le constructeur new. Par exemple, les
expressions r&eacute;guli&egrave;res suivantes sont &eacute;quivalentes :
var pattern1:RegExp = /bob/i;
var pattern2:RegExp = new RegExp(&quot;bob&quot;, &quot;i&quot;);
Des barres obliques d&eacute;limitent un litt&eacute;ral d’expression r&eacute;guli&egrave;re de la m&ecirc;me fa&ccedil;on que des guillemets d&eacute;limitent un
litt&eacute;ral de cha&icirc;ne. La partie de l’expression r&eacute;guli&egrave;re contenue entre les barres obliques d&eacute;finit le mod&egrave;le. L’expression
r&eacute;guli&egrave;re peut &eacute;galement inclure des indicateurs apr&egrave;s la barre de d&eacute;limitation finale. Ces indicateurs sont consid&eacute;r&eacute;s
comme faisant partie de l’expression r&eacute;guli&egrave;re, mais ils sont s&eacute;par&eacute;s de son mod&egrave;le.
Lorsque vous utilisez le constructeur new, vous utilisez deux cha&icirc;nes pour d&eacute;finir l’expression r&eacute;guli&egrave;re. La premi&egrave;re
cha&icirc;ne d&eacute;finit le mod&egrave;le, et la seconde les indicateurs, comme dans l’exemple suivant :
var pattern2:RegExp = new RegExp(&quot;bob&quot;, &quot;i&quot;);
Lorsque vous incluez une barre oblique dans une expression r&eacute;guli&egrave;re qui est d&eacute;finie &agrave; l’aide de d&eacute;limiteurs de barre
oblique, vous devez faire pr&eacute;c&eacute;der la barre oblique du caract&egrave;re d’&eacute;chappement (\). Par exemple, l’expression r&eacute;guli&egrave;re
suivante correspond au mod&egrave;le 1/2 :
var pattern:RegExp = /1\/2/;
Pour inclure des guillemets dans une expression r&eacute;guli&egrave;re d&eacute;finie avec le constructeur new, vous devez ajouter un
caract&egrave;re d’&eacute;chappement (\) avant les guillemets (comme lorsque vous d&eacute;finissez un litt&eacute;ral String). Par exemple, les
expressions r&eacute;guli&egrave;res suivantes correspondent au mod&egrave;le eat at &quot;joe's&quot; :
var pattern1:RegExp = new RegExp(&quot;eat at \&quot;joe's\&quot;&quot;, &quot;&quot;);
var pattern2:RegExp = new RegExp('eat at &quot;joe\'s&quot;', &quot;&quot;);
N’utilisez pas le caract&egrave;re d’&eacute;chappement avec des guillemets dans des expressions r&eacute;guli&egrave;res d&eacute;finies &agrave; l’aide des
d&eacute;limiteurs de barre oblique. De m&ecirc;me, n’utilisez pas le caract&egrave;re d’&eacute;chappement avec des barres obliques dans des
expressions r&eacute;guli&egrave;res d&eacute;finies avec le constructeur new. Les expressions r&eacute;guli&egrave;res suivantes sont &eacute;quivalentes. Elles
d&eacute;finissent le mod&egrave;le 1/2 &quot;joe's&quot; :
Derni&egrave;re mise &agrave; jour le 27/4/2013
80
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
var pattern1:RegExp = /1\/2 &quot;joe's&quot;/;
var pattern2:RegExp = new RegExp(&quot;1/2 \&quot;joe's\&quot;&quot;, &quot;&quot;);
var pattern3:RegExp = new RegExp('1/2 &quot;joe\'s&quot;', '');
De m&ecirc;me, dans une expression r&eacute;guli&egrave;re d&eacute;finie &agrave; l’aide du constructeur new, tapez deux fois le caract&egrave;re barre oblique
inverse pour utiliser une m&eacute;tas&eacute;quence d&eacute;butant par le caract&egrave;re barre oblique inverse(\), telle que \d (qui correspond
&agrave; n’importe quel chiffre).
var pattern:RegExp = new RegExp(&quot;\\d+&quot;, &quot;&quot;); // matches one or more digits
Vous devez taper deux fois le caract&egrave;re barre oblique inverse, car le premier param&egrave;tre de la m&eacute;thode constructeur
RegExp() est une cha&icirc;ne. Dans un litt&eacute;ral de cha&icirc;ne, ce caract&egrave;re doit &ecirc;tre entr&eacute; deux fois pour &ecirc;tre interpr&eacute;t&eacute; comme
une barre oblique inverse unique.
La section qui suit d&eacute;crit la syntaxe servant &agrave; d&eacute;finir des mod&egrave;les d’expression r&eacute;guli&egrave;re.
Pour plus d’informations, voir &laquo; Indicateurs et propri&eacute;t&eacute;s &raquo; &agrave; la page 89.
Caract&egrave;res, caract&egrave;res de remplacement et m&eacute;tas&eacute;quences
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’expression r&eacute;guli&egrave;re la plus simple est celle qui correspond &agrave; une s&eacute;quence de caract&egrave;res, comme dans l’exemple
suivant :
var pattern:RegExp = /hello/;
N&eacute;anmoins, les caract&egrave;res suivants, appel&eacute;s caract&egrave;res de remplacement, ont des significations sp&eacute;ciales dans des
expressions r&eacute;guli&egrave;res :
^ $ \ . * + ? ( ) [ ] { } |
Par exemple, l’expression r&eacute;guli&egrave;re suivante correspond &agrave; la lettre A suivie par z&eacute;ro ou plusieurs occurrences de la lettre
B (le caract&egrave;re de remplacement ast&eacute;risque indique cette r&eacute;p&eacute;tition), suivie par la lettre C :
/AB*C/
Pour inclure un caract&egrave;re de remplacement sans sa signification sp&eacute;ciale dans un mod&egrave;le d’expression r&eacute;guli&egrave;re, vous
devez utiliser le caract&egrave;re d’&eacute;chappement (\). Par exemple, l’expression r&eacute;guli&egrave;re suivante correspond &agrave; la lettre A
suivie par la lettre B, suivie par un ast&eacute;risque, suivie par la lettre C :
var pattern:RegExp = /AB\*C/;
Une m&eacute;tas&eacute;quence, comme un caract&egrave;re de remplacement, a une signification sp&eacute;ciale dans une expression r&eacute;guli&egrave;re.
Une m&eacute;tas&eacute;quence est constitu&eacute;e de plusieurs caract&egrave;res. Les sections suivantes fournissent des d&eacute;tails sur l’utilisation
des caract&egrave;res de remplacement et des m&eacute;tas&eacute;quences.
A propos des caract&egrave;res de remplacement
Le tableau suivant r&eacute;pertorie les caract&egrave;res de remplacement que vous pouvez utiliser dans des expressions r&eacute;guli&egrave;res :
Derni&egrave;re mise &agrave; jour le 27/4/2013
81
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Caract&egrave;re de remplacement
Description
^ (caret)
Etablit une correspondance au d&eacute;but d’une cha&icirc;ne. Lorsque l’indicateur m (multiline) est d&eacute;fini, le caret
correspond au d&eacute;but d’une ligne &eacute;galement (voir &laquo; Indicateurs et propri&eacute;t&eacute;s &raquo; &agrave; la page 89). Lorsqu’il est
utilis&eacute; au d&eacute;but d’une classe de caract&egrave;re, le caret indique la n&eacute;gation et non le d&eacute;but d’une cha&icirc;ne. Pour
plus d’informations, voir &laquo; Classes de caract&egrave;re &raquo; &agrave; la page 83.
$(signe dollar)
Etablit une correspondance &agrave; la fin d’une cha&icirc;ne. Lorsque l’indicateur m (multiline) est d&eacute;fini, $
correspond &agrave; la position avant une nouvelle ligne (\n) &eacute;galement. Pour plus d’informations, voir
&laquo; Indicateurs et propri&eacute;t&eacute;s &raquo; &agrave; la page 89.
\ (caract&egrave;re d’&eacute;chappement)
Echappe la signification sp&eacute;ciale du caract&egrave;re de remplacement des caract&egrave;res sp&eacute;ciaux.
Vous pouvez &eacute;galement utiliser le caract&egrave;re d’&eacute;chappement si vous souhaitez utiliser une barre oblique
dans un litt&eacute;ral d’expression r&eacute;guli&egrave;re, comme dans /1\/2/ (pour correspondre au caract&egrave;re 1, suivi par la
barre oblique, suivi par le caract&egrave;re 2).
. (point)
Correspond &agrave; un seul caract&egrave;re.
Un point correspond &agrave; un caract&egrave;re de nouvelle ligne (\n) uniquement si l’indicateur s (dotall) est d&eacute;fini.
Pour plus d’informations, voir &laquo; Indicateurs et propri&eacute;t&eacute;s &raquo; &agrave; la page 89.
* (&eacute;toile)
Correspond &agrave; l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent r&eacute;p&eacute;t&eacute; z&eacute;ro ou plusieurs fois.
Pour plus de d&eacute;tails, voir &laquo; Quantificateurs &raquo; &agrave; la page 85.
+ (plus)
Correspond &agrave; l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent r&eacute;p&eacute;t&eacute; une ou plusieurs fois.
Pour plus de d&eacute;tails, voir &laquo; Quantificateurs &raquo; &agrave; la page 85.
? (point d’interrogation)
Correspond &agrave; l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent r&eacute;p&eacute;t&eacute; z&eacute;ro ou une fois.
Pour plus de d&eacute;tails, voir &laquo; Quantificateurs &raquo; &agrave; la page 85.
( et )
D&eacute;finit des groupes dans l’expression r&eacute;guli&egrave;re. Utilisez des groupes pour :
•
confiner le domaine du permutateur | : /(a|b|c)d/
•
d&eacute;finir le domaine d’un quantificateur :/(walla.){1,2}/
•
dans des backreferences. Par exemple, le \1 dans l’expression r&eacute;guli&egrave;re suivante correspond &agrave; toute
correspondance au premier groupe entre parenth&egrave;ses du mod&egrave;le :
•
/(\w*) est r&eacute;p&eacute;t&eacute; : \1/
Pour plus d’informations, voir &laquo; Groupes &raquo; &agrave; la page 87.
[ et ]
Sp&eacute;cifie une classe de caract&egrave;re qui d&eacute;finit des correspondances possibles pour un seul caract&egrave;re :
/[aeiou]/ correspond &agrave; l’un des caract&egrave;res sp&eacute;cifi&eacute;s.
Dans les classes de caract&egrave;re, utilisez le trait d’union (-) pour d&eacute;signer une plage de caract&egrave;res :
/[A-Z0-9]/ correspond aux lettres majuscules A &agrave; Z ou aux chiffres 0 &agrave; 9.
Dans les classes de caract&egrave;re, ins&eacute;rez un caract&egrave;re d’&eacute;chappement pour &eacute;chapper les caract&egrave;res ] et
les caract&egrave;res -:
/[+\-]\d+/ correspond &agrave; + ou &agrave; - avant un ou plusieurs chiffres.
Dans les classes de caract&egrave;re, d’autres caract&egrave;res (qui sont normalement des caract&egrave;res de remplacement)
sont consid&eacute;r&eacute;s comme des caract&egrave;res normaux (et non comme des caract&egrave;res de remplacement), sans
qu’une barre oblique inverse soit n&eacute;cessaire :
/[$]/&pound; correspond &agrave; $ou &agrave; &pound;.
Pour plus d’informations, voir &laquo; Classes de caract&egrave;re &raquo; &agrave; la page 83.
| (op&eacute;rateur de transfert de
donn&eacute;es)
Utilis&eacute; pour la permutation, pour correspondre &agrave; la partie de gauche ou &agrave; celle de droite :
/abc|xyz/ correspond &agrave; abc ou &agrave; xyz.
Derni&egrave;re mise &agrave; jour le 27/4/2013
82
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
A propos des m&eacute;tas&eacute;quences
Les m&eacute;tas&eacute;quences sont des s&eacute;quences de caract&egrave;res ayant une signification sp&eacute;ciale dans un mod&egrave;le d’expression
r&eacute;guli&egrave;re. Le tableau suivant d&eacute;crit ces m&eacute;tas&eacute;quences :
M&eacute;tas&eacute;quence
Description
{n}
Indique un quantificateur num&eacute;rique ou une plage de quantificateurs pour l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent :
{n,}
/A{27}/ correspond au caract&egrave;re A r&eacute;p&eacute;t&eacute; 27 fois.
et
/A{3}/ correspond au caract&egrave;re A r&eacute;p&eacute;t&eacute; 3 fois ou plus.
{n,n}
/A{3,5}/ correspond au caract&egrave;re A r&eacute;p&eacute;t&eacute; 3 &agrave; 5 fois.
Pour plus de d&eacute;tails, voir &laquo; Quantificateurs &raquo; &agrave; la page 85.
\b
Etablit une correspondance &agrave; la position entre un caract&egrave;re mot et un caract&egrave;re non-mot. Si le premier ou le
dernier caract&egrave;re dans la cha&icirc;ne est un caract&egrave;re mot, correspond &eacute;galement au d&eacute;but ou &agrave; la fin de la
cha&icirc;ne.
\B
Etablit une correspondance &agrave; la position entre deux caract&egrave;res mot. Correspond &eacute;galement &agrave; la position
entre deux caract&egrave;res non-mot.
\d
Correspond &agrave; une d&eacute;cimale.
\D
Correspond &agrave; tout caract&egrave;re autre qu’un chiffre.
\f
Correspond &agrave; un caract&egrave;re de changement de page.
\n
Correspond au caract&egrave;re de nouvelle ligne.
\r
Correspond au caract&egrave;re de retour de chariot.
\s
Correspond &agrave; tout caract&egrave;re d’espace blanc (un espace, une tabulation, une nouvelle ligne ou un caract&egrave;re
de retour de chariot).
\S
Correspond &agrave; tout caract&egrave;re autre qu’un caract&egrave;re d’espace blanc.
\t
Correspond au caract&egrave;re de tabulation.
\unnnn
Correspond au caract&egrave;re Unicode avec le code de caract&egrave;re sp&eacute;cifi&eacute; par le nombre hexad&eacute;cimal nnnn. Par
exemple, \u263a est le caract&egrave;re smiley.
\v
Correspond &agrave; un caract&egrave;re d’avancement vertical.
\w
Correspond &agrave; un caract&egrave;re mot (AZ–, az–, 0-9 ou _). \w ne correspond pas aux caract&egrave;res qui ne sont pas
anglais tels que &eacute;, &ntilde;, ou &ccedil;.
\W
Correspond &agrave; tout caract&egrave;re autre qu’un caract&egrave;re mot.
\\xnn
Correspond au caract&egrave;re avec la valeur ASCII sp&eacute;cifi&eacute;e, comme d&eacute;fini par le nombre hexad&eacute;cimal nn.
Classes de caract&egrave;re
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous utilisez des classes de caract&egrave;re pour sp&eacute;cifier une liste de caract&egrave;res devant correspondre &agrave; une position dans
l’expression r&eacute;guli&egrave;re. Vous d&eacute;finissez des classes de caract&egrave;re avec des crochets ( [ et ] ). Par exemple, l’expression
r&eacute;guli&egrave;re suivante d&eacute;finit une classe de caract&egrave;re qui remplace bag, beg, big, bog ou bug :
/b[aeiou]g/
Derni&egrave;re mise &agrave; jour le 27/4/2013
83
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
S&eacute;quences d’&eacute;chappement dans des classes de caract&egrave;re
La plupart des caract&egrave;res de remplacement et des m&eacute;tas&eacute;quences ayant normalement des significations sp&eacute;ciales dans
une expression r&eacute;guli&egrave;re n’ont pas ces m&ecirc;mes significations dans une classe de caract&egrave;re. Par exemple, dans une
expression r&eacute;guli&egrave;re, l’ast&eacute;risque est utilis&eacute; pour la r&eacute;p&eacute;tition, mais ce n’est pas le cas lorsqu’il appara&icirc;t dans une classe
de caract&egrave;re. La classe de caract&egrave;re suivante correspond &agrave; l’ast&eacute;risque de fa&ccedil;on litt&eacute;rale, avec tout autre caract&egrave;re
r&eacute;pertori&eacute; :
/[abc*123]/
Cependant, les trois caract&egrave;res r&eacute;pertori&eacute;s dans le tableau suivant fonctionnent comme des caract&egrave;res de
remplacement, avec une signification sp&eacute;ciale, dans des classes de caract&egrave;re :
Caract&egrave;re de remplacement
Signification dans des classes de caract&egrave;re
]
D&eacute;finit la fin de la classe de caract&egrave;re.
-
D&eacute;finit une plage de caract&egrave;res (voir la section suivante, &quot; Plages de caract&egrave;res dans des classes de caract&egrave;re
”).
\
D&eacute;finit des m&eacute;tas&eacute;quences et annule la signification sp&eacute;ciale des caract&egrave;res de remplacement.
Pour que ces caract&egrave;res soient reconnus comme caract&egrave;res litt&eacute;raux (dans la signification du caract&egrave;re de
remplacement sp&eacute;ciale), vous devez faire pr&eacute;c&eacute;der le caract&egrave;re du caract&egrave;re d’&eacute;chappement. Par exemple, l’expression
r&eacute;guli&egrave;re suivante inclut une classe de caract&egrave;re qui correspond &agrave; l’un des quatre symboles ($, \, ] ou -) :
/[$\\\]\-]/
Outre les caract&egrave;res de remplacement qui conservent leurs significations sp&eacute;ciales, les m&eacute;tas&eacute;quences suivantes
fonctionnent comme des m&eacute;tas&eacute;quences dans des classes de caract&egrave;re :
M&eacute;tas&eacute;quence
Signification dans des classes de caract&egrave;re
\n
Correspond &agrave; un caract&egrave;re de nouvelle ligne.
\r
Correspond &agrave; un caract&egrave;re de retour de chariot.
\t
Correspond &agrave; un caract&egrave;re de tabulation.
\unnnn
Correspond au caract&egrave;re avec la valeur de point de code Unicode sp&eacute;cifi&eacute;e (comme d&eacute;fini par le nombre
hexad&eacute;cimal nnnn).
\\xnn
Correspond au caract&egrave;re avec la valeur ASCII sp&eacute;cifi&eacute;e (comme d&eacute;fini par le nombre hexad&eacute;cimal nn).
D’autres caract&egrave;res de remplacement et m&eacute;tas&eacute;quences d’expression r&eacute;guli&egrave;re sont consid&eacute;r&eacute;s comme des caract&egrave;res
normaux dans une classe de caract&egrave;re.
Plages de caract&egrave;res dans des classes de caract&egrave;re
Utilisez le trait d’union pour sp&eacute;cifier une plage de caract&egrave;res telle que A-Z, a-z, ou 0-9. Ces caract&egrave;res doivent
constituer une plage valide dans le jeu de caract&egrave;res. Par exemple, la classe de caract&egrave;re suivante correspond &agrave; un
caract&egrave;re compris dans la plage a-z ou un chiffre :
/[a-z0-9]/
Vous pouvez &eacute;galement utiliser le code de caract&egrave;re ASCII \\xnn pour sp&eacute;cifier une plage par valeur ASCII. Par
exemple, la classe de caract&egrave;re suivante correspond &agrave; un caract&egrave;re d’un jeu de caract&egrave;res ASCII &eacute;tendus (&eacute; et &ecirc;, par
exemple) :
\\x
Derni&egrave;re mise &agrave; jour le 27/4/2013
84
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Classes de caract&egrave;re ni&eacute;es
Lorsque vous utilisez un caret (^) au d&eacute;but d’une classe de caract&egrave;re, il la nie (tout caract&egrave;re non r&eacute;pertori&eacute; est
consid&eacute;r&eacute; comme une correspondance). La classe de caract&egrave;re suivante correspond &agrave; tout caract&egrave;re sauf une lettre
minuscule (az–) ou un chiffre :
/[^a-z0-9]/
Vous devez taper le caret (^) au d&eacute;but d’une classe de caract&egrave;re pour indiquer la n&eacute;gation. Autrement, vous ajoutez
simplement le caret aux caract&egrave;res dans la classe de caract&egrave;re. Par exemple, la classe de caract&egrave;re suivante correspond
&agrave; un symbole (le caret, notamment) :
/[!.,#+*%$&amp;^]/
Quantificateurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous utilisez des quantificateurs pour sp&eacute;cifier des r&eacute;p&eacute;titions de caract&egrave;res ou de s&eacute;quences dans des mod&egrave;les, comme
suit :
Caract&egrave;re de remplacement
de quantificateur
Description
* (&eacute;toile)
Correspond &agrave; l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent r&eacute;p&eacute;t&eacute; z&eacute;ro ou plusieurs fois.
+ (plus)
Correspond &agrave; l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent r&eacute;p&eacute;t&eacute; une ou plusieurs fois.
? (point d’interrogation)
Correspond &agrave; l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent r&eacute;p&eacute;t&eacute; z&eacute;ro ou une fois.
{n}
Indique un quantificateur num&eacute;rique ou une plage de quantificateurs pour l’&eacute;l&eacute;ment pr&eacute;c&eacute;dent :
{n,}
/A{27}/ correspond au caract&egrave;re A r&eacute;p&eacute;t&eacute; 27 fois.
et
/A{3}/ correspond au caract&egrave;re A r&eacute;p&eacute;t&eacute; 3 fois ou plus.
{n,n}
/A{3,5}/ correspond au caract&egrave;re A r&eacute;p&eacute;t&eacute; 3 &agrave; 5 fois.
Vous pouvez appliquer un quantificateur &agrave; un seul caract&egrave;re, &agrave; une classe de caract&egrave;re ou &agrave; un groupe :
•
/a+/ correspond au caract&egrave;re a r&eacute;p&eacute;t&eacute; une ou plusieurs fois.
•
/\d+/ correspond &agrave; un ou plusieurs chiffres.
•
/[abc]+/ correspond &agrave; une r&eacute;p&eacute;tition d’un ou de plusieurs caract&egrave;res, a, b, ou c.
•
/(very, )*/ correspond au mot very suivi par une virgule et un espace r&eacute;p&eacute;t&eacute; z&eacute;ro ou plusieurs fois.
Vous pouvez utiliser des quantificateurs dans des groupes de parenth&egrave;ses auxquels sont appliqu&eacute;s des quantificateurs.
Par exemple, le quantificateur suivant correspond &agrave; des cha&icirc;nes du type word et word-word-word :
/\w+(-\w+)*/
Par d&eacute;faut, les expressions r&eacute;guli&egrave;res effectuent un greedy matching. Tout sous-mod&egrave;le dans l’expression r&eacute;guli&egrave;re (.*,
par exemple) tente de mettre en correspondance autant de caract&egrave;res que possible dans la cha&icirc;ne avant de passer &agrave; la
partie suivante de l’expression r&eacute;guli&egrave;re. Par exemple, consid&eacute;rez l’expression r&eacute;guli&egrave;re et la cha&icirc;ne suivantes :
var pattern:RegExp = /&lt;p&gt;.*&lt;\/p&gt;/;
str:String = &quot;&lt;p&gt;Paragraph 1&lt;/p&gt; &lt;p&gt;Paragraph 2&lt;/p&gt;&quot;;
L’expression r&eacute;guli&egrave;re correspond &agrave; la cha&icirc;ne enti&egrave;re :
&lt;p&gt;Paragraph 1&lt;/p&gt; &lt;p&gt;Paragraph 2&lt;/p&gt;
Derni&egrave;re mise &agrave; jour le 27/4/2013
85
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Supposez, n&eacute;anmoins, que vous souhaitez &eacute;tablir une correspondance avec un seul groupe &lt;p&gt;...&lt;/p&gt;. Vous pouvez
proc&eacute;der comme suit :
&lt;p&gt;Paragraph 1&lt;/p&gt;
Ajoutez un point d’interrogation (?) apr&egrave;s les quantificateurs pour qu’ils deviennent des quantificateurs paresseux. Par
exemple, l’expression r&eacute;guli&egrave;re suivante, qui utilise le quantificateur paresseux *? , correspond &agrave; &lt;p&gt; suivi du nombre
minimum de caract&egrave;res possible (paresseux), suivi de &lt;/p&gt; :
/&lt;p&gt;.*?&lt;\/p&gt;/
Lisez attentivement les points suivants concernant les quantificateurs :
• Les quantificateurs {0} et {0,0} n’excluent pas un &eacute;l&eacute;ment d’une correspondance.
• Ne combinez pas plusieurs quantificateurs, comme dans /abc+*/.
• Le caract&egrave;re point (.) ne divise pas les lignes en deux &agrave; moins de d&eacute;finir l’indicateur s (dotall), m&ecirc;me s’il est suivi
d’un quantificateur *. Consid&eacute;rons par exemple le code qui suit :
var str:String = &quot;&lt;p&gt;Test\n&quot;;
str += &quot;Multiline&lt;/p&gt;&quot;;
var re:RegExp = /&lt;p&gt;.*&lt;\/p&gt;/;
trace(str.match(re)); // null;
re = /&lt;p&gt;.*&lt;\/p&gt;/s;
trace(str.match(re));
// output: &lt;p&gt;Test
//
Multiline&lt;/p&gt;
Pour plus d’informations, voir &laquo; Indicateurs et propri&eacute;t&eacute;s &raquo; &agrave; la page 89.
Permutation
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Utilisez le caract&egrave;re | (barre) dans une expression r&eacute;guli&egrave;re pour que son moteur tienne compte des autres possibilit&eacute;s
pour une correspondance. Par exemple, l’expression r&eacute;guli&egrave;re suivante correspond &agrave; l’un des mots cat, dog, pig, rat :
var pattern:RegExp = /cat|dog|pig|rat/;
Vous pouvez utiliser des parenth&egrave;ses pour d&eacute;finir des groupes et limiter le domaine du permutateur |. L’expression
r&eacute;guli&egrave;re suivante correspond &agrave; cat suivi de nap ou nip :
var pattern:RegExp = /cat(nap|nip)/;
Pour plus d’informations, voir &laquo; Groupes &raquo; &agrave; la page 87.
Les deux expressions r&eacute;guli&egrave;res suivantes (l’une utilisant le permutateur |, l’autre une classe de caract&egrave;re (d&eacute;finie avec
[ et ] )) sont &eacute;quivalentes :
/1|3|5|7|9/
/[13579]/
Pour plus d’informations, voir &laquo; Classes de caract&egrave;re &raquo; &agrave; la page 83.
Derni&egrave;re mise &agrave; jour le 27/4/2013
86
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Groupes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez sp&eacute;cifier un groupe dans une expression r&eacute;guli&egrave;re en utilisant des parenth&egrave;ses, comme suit :
/class-(\d*)/
Un groupe est une sous-section d’un mod&egrave;le. Vous pouvez utiliser des groupes pour effectuer les op&eacute;rations suivantes :
• Appliquer un quantificateur &agrave; plusieurs caract&egrave;res
• D&eacute;limiter des sous-mod&egrave;les &agrave; appliquer avec la permutation (&agrave; l’aide du caract&egrave;re |)
• Capturer des correspondances de sous-cha&icirc;ne (par exemple, en utilisant \1 dans une expression r&eacute;guli&egrave;re pour
&eacute;tablir une correspondance avec un groupe mis en correspondance pr&eacute;c&eacute;demment, ou en utilisant $1 de la m&ecirc;me
fa&ccedil;on dans la m&eacute;thode replace() de la classe String)
Les sections suivantes fournissent des d&eacute;tails sur ces utilisations de groupes.
Utilisation de groupes avec des quantificateurs
Si vous n’utilisez pas de groupe, un quantificateur s’applique au caract&egrave;re ou &agrave; la classe de caract&egrave;re qui le pr&eacute;c&egrave;de,
comme indiqu&eacute; ci-dessous :
var pattern:RegExp = /ab*/ ;
// matches the character a followed by
// zero or more occurrences of the character b
pattern = /a\d+/;
// matches the character a followed by
// one or more digits
pattern = /a[123]{1,3}/;
// matches the character a followed by
// one to three occurrences of either 1, 2, or 3
N&eacute;anmoins, vous pouvez utiliser un groupe pour appliquer un quantificateur &agrave; plusieurs caract&egrave;res ou classes de
caract&egrave;re :
var pattern:RegExp = /(ab)*/;
// matches zero or more occurrences of the character a
// followed by the character b, such as ababab
pattern = /(a\d)+/;
// matches one or more occurrences of the character a followed by
// a digit, such as a1a5a8a3
pattern = /(spam ){1,3}/;
// matches 1 to 3 occurrences of the word spam followed by a space
Pour plus d’informations sur les quantificateurs, voir &laquo; Quantificateurs &raquo; &agrave; la page 85.
Utilisation de groupes avec le permutateur (|)
Vous pouvez utiliser des groupes pour d&eacute;finir le groupe de caract&egrave;res auquel vous souhaitez appliquer un permutateur
(|), comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
87
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
var pattern:RegExp = /cat|dog/;
// matches cat or dog
pattern = /ca(t|d)og/;
// matches catog or cadog
Utilisation de groupes pour capturer des correspondances de sous-cha&icirc;ne
Lorsque vous d&eacute;finissez un groupe entre parenth&egrave;ses standard dans un mod&egrave;le, vous pouvez ensuite vous y r&eacute;f&eacute;rer
dans l’expression r&eacute;guli&egrave;re. Il s’agit d’une backreference. Ces types de groupes sont appel&eacute;s groupes captur&eacute;s. Par
exemple, dans l’expression r&eacute;guli&egrave;re suivante, la s&eacute;quence \1 correspond &agrave; toute sous-cha&icirc;ne mise en correspondance
avec le groupe entre parenth&egrave;ses captur&eacute; :
var pattern:RegExp = /(\d+)-by-\1/;
// matches the following: 48-by-48
Vous pouvez sp&eacute;cifier jusqu’&agrave; 99 backreferences dans une expression r&eacute;guli&egrave;re en tapant \1,\2,...,\99.
De m&ecirc;me, dans la m&eacute;thode replace() de la classe String, vous pouvez utiliser $1–$99 pour ins&eacute;rer des
correspondances de cha&icirc;ne de groupe captur&eacute; dans la cha&icirc;ne de remplacement :
var pattern:RegExp = /Hi, (\w+)\./;
var str:String = &quot;Hi, Bob.&quot;;
trace(str.replace(pattern, &quot;$1, hello.&quot;));
// output: Bob, hello.
Si vous utilisez des groupes captur&eacute;s, la m&eacute;thode exec() de la classe RegExp et la m&eacute;thode match() de la classe String
renvoient des sous-cha&icirc;nes qui correspondent aux groupes captur&eacute;s :
var pattern:RegExp = /(\w+)@(\w+).(\w+)/;
var str:String = &quot;bob@example.com&quot;;
trace(pattern.exec(str));
// bob@example.com,bob,example,com
Utilisation de groupes non captur&eacute;s et de groupes d’anticipation
Un groupe non captur&eacute; est utilis&eacute; pour le regroupement uniquement ; il n’est pas collect&eacute; et il ne correspond pas &agrave; des
backreferences num&eacute;rot&eacute;es. Utilisez (?: et ) pour d&eacute;finir des groupes non captur&eacute;s, comme suit :
var pattern = /(?:com|org|net);
Par exemple, notez la diff&eacute;rence entre mettre (com|org) dans un groupe captur&eacute; et dans un groupe non captur&eacute; (la
m&eacute;thode exec() r&eacute;pertorie les groupes captur&eacute;s apr&egrave;s la correspondance compl&egrave;te) :
var pattern:RegExp = /(\w+)@(\w+).(com|org)/;
var str:String = &quot;bob@example.com&quot;;
trace(pattern.exec(str));
// bob@example.com,bob,example,com
//noncapturing:
var pattern:RegExp = /(\w+)@(\w+).(?:com|org)/;
var str:String = &quot;bob@example.com&quot;;
trace(pattern.exec(str));
// bob@example.com,bob,example
Un type sp&eacute;cial de groupe non captur&eacute; est le groupe d’animation dont il existe deux types : le groupe d’animation positif
et le groupe d’animation n&eacute;gatif.
Derni&egrave;re mise &agrave; jour le 27/4/2013
88
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Utilisez (?= et ) pour d&eacute;finir un groupe d’anticipation positif, qui sp&eacute;cifie que le sous-mod&egrave;le dans le groupe doit
&eacute;tablir une correspondance &agrave; la position. N&eacute;anmoins, la portion de la cha&icirc;ne qui correspond au groupe d’anticipation
positif peut correspondre aux mod&egrave;les restants dans l’expression r&eacute;guli&egrave;re. Par exemple, &eacute;tant donn&eacute; que (?=e) est
un groupe d’anticipation positif dans le code suivant, le caract&egrave;re e auquel il correspond peut &ecirc;tre mis en
correspondance par une partie suivante de l’expression r&eacute;guli&egrave;re (dans ce cas, le groupe captur&eacute;, \w*) :
var pattern:RegExp = /sh(?=e)(\w*)/i;
var str:String = &quot;Shelly sells seashells by the seashore&quot;;
trace(pattern.exec(str));
// Shelly,elly
Utilisez (?= et ) pour d&eacute;finir un groupe d’anticipation n&eacute;gatif, qui indique que le sous-mod&egrave;le dans le groupe ne doit
pas &eacute;tablir une correspondance &agrave; la position. Exemple :
var pattern:RegExp = /sh(?!e)(\w*)/i;
var str:String = &quot;She sells seashells by the seashore&quot;;
trace(pattern.exec(str));
// shore,ore
Utilisation de groupes nomm&eacute;s
Un groupe nomm&eacute; est un type de groupe dans une expression r&eacute;guli&egrave;re ayant un identificateur nomm&eacute;. Utilisez
(?P&lt;name&gt; et ) pour d&eacute;finir le groupe nomm&eacute;. Par exemple, l’expression r&eacute;guli&egrave;re suivante inclut un groupe nomm&eacute;
avec l’identificateur nomm&eacute; digits :
var pattern = /[a-z]+(?P&lt;digits&gt;\d+)[a-z]+/;
Lorsque vous utilisez la m&eacute;thode exec(), un groupe nomm&eacute; de correspondance est ajout&eacute; comme propri&eacute;t&eacute; du
tableau result :
var myPattern:RegExp = /([a-z]+)(?P&lt;digits&gt;\d+)[a-z]+/;
var str:String = &quot;a123bcd&quot;;
var result:Array = myPattern.exec(str);
trace(result.digits); // 123
Voici un autre exemple, qui utilise deux groupes nomm&eacute;s, avec les identificateurs name et dom :
var emailPattern:RegExp =
/(?P&lt;name&gt;(\w|[_.\-])+)@(?P&lt;dom&gt;((\w|-)+))+\.\w{2,4}+/;
var address:String = &quot;bob@example.com&quot;;
var result:Array = emailPattern.exec(address);
trace(result.name); // bob
trace(result.dom); // example
Remarque : les groupes nomm&eacute;s ne font pas partie de la sp&eacute;cification du langage ECMAScript. Ils repr&eacute;sentent une
fonction ajout&eacute;e dans ActionScript 3.0.
Indicateurs et propri&eacute;t&eacute;s
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le tableau suivant r&eacute;pertorie les cinq indicateurs que vous pouvez d&eacute;finir pour des expressions r&eacute;guli&egrave;res. Vous pouvez
acc&eacute;der &agrave; chaque indicateur en tant que propri&eacute;t&eacute; de l’objet d’expression r&eacute;guli&egrave;re.
Derni&egrave;re mise &agrave; jour le 27/4/2013
89
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Indicateur
Propri&eacute;t&eacute;
Description
g
global
A plusieurs correspondances.
i
ignoreCase
Correspondance sensible &agrave; la casse. S’applique aux caract&egrave;res A—Z et a—z mais pas &agrave; des caract&egrave;res
&eacute;tendus tels que &Eacute; et &eacute;.
m
multiline
Lorsque cet indicateur est d&eacute;fini, $ et ^ peuvent correspondre au d&eacute;but d’une ligne et &agrave; la fin d’une ligne,
respectivement.
s
dotall
Lorsque cet indicateur est d&eacute;fini, . (point) peut correspondre au caract&egrave;re de nouvelle ligne (\n).
x
extended
Autorise les expressions r&eacute;guli&egrave;res &eacute;tendues. Vous pouvez tapez des espaces dans l’expression
r&eacute;guli&egrave;re. Ils sont ignor&eacute;s dans le cadre du mod&egrave;le. Ceci vous permet de taper un code d’expression
r&eacute;guli&egrave;re de fa&ccedil;on plus lisible.
Ces propri&eacute;t&eacute;s sont en lecture seule. Vous pouvez d&eacute;finir les indicateurs (g, i, m, s, x) lorsque vous d&eacute;finissez une
variable d’expression r&eacute;guli&egrave;re, comme suit :
var re:RegExp = /abc/gimsx;
Cependant, vous ne pouvez pas d&eacute;finir directement les propri&eacute;t&eacute;s nomm&eacute;es. Par exemple, le code suivant g&eacute;n&egrave;re une
erreur :
var re:RegExp = /abc/;
re.global = true; // This generates an error.
Par d&eacute;faut, &agrave; moins de les sp&eacute;cifier dans la d&eacute;claration d’expression r&eacute;guli&egrave;re, les indicateurs ne sont pas d&eacute;finis, et les
propri&eacute;t&eacute;s correspondantes sont &eacute;galement d&eacute;finies sur false.
De plus, il existe deux autres propri&eacute;t&eacute;s d’une expression r&eacute;guli&egrave;re :
• La propri&eacute;t&eacute; lastIndex sp&eacute;cifie la position d’index dans la cha&icirc;ne &agrave; utiliser pour l’appel suivant &agrave; la m&eacute;thode
exec() ou test() d’une expression r&eacute;guli&egrave;re.
• La propri&eacute;t&eacute; source sp&eacute;cifie la cha&icirc;ne qui d&eacute;finit la portion de mod&egrave;le de l’expression r&eacute;guli&egrave;re.
L’indicateur g (global)
Lorsque l’indicateur g (global) n’est pas inclus, une expression r&eacute;guli&egrave;re n’a pas plus d’une correspondance. Par
exemple, avec l’indicateur g exclu de l’expression r&eacute;guli&egrave;re, la m&eacute;thode String.match() renvoie une sous-cha&icirc;ne de
correspondance uniquement :
var str:String = &quot;she sells seashells by the seashore.&quot;;
var pattern:RegExp = /sh\w*/;
trace(str.match(pattern)) // output: she
Lorsque l’indicateur g est d&eacute;fini, la m&eacute;thode Sting.match() renvoie plusieurs correspondances, comme suit :
var str:String = &quot;she sells seashells by the seashore.&quot;;
var pattern:RegExp = /sh\w*/g;
// The same pattern, but this time the g flag IS set.
trace(str.match(pattern)); // output: she,shells,shore
L’indicateur i (ignoreCase)
Par d&eacute;faut, les correspondances d’expression r&eacute;guli&egrave;re sont sensibles &agrave; la casse. Lorsque vous d&eacute;finissez l’indicateur i
(ignoreCase), le respect de la casse est ignor&eacute;. Par exemple, la lettre minuscule s dans l’expression r&eacute;guli&egrave;re ne
correspond pas &agrave; la lettre majuscule S, le premier caract&egrave;re de la cha&icirc;ne :
var str:String = &quot;She sells seashells by the seashore.&quot;;
trace(str.search(/sh/)); // output: 13 -- Not the first character
Derni&egrave;re mise &agrave; jour le 27/4/2013
90
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Lorsque l’indicateur i est d&eacute;fini, cependant, l’expression r&eacute;guli&egrave;re correspond &agrave; la lettre majuscule S :
var str:String = &quot;She sells seashells by the seashore.&quot;;
trace(str.search(/sh/i)); // output: 0
L’indicateur i ignore le respect de la casse uniquement pour les caract&egrave;res A–Z et a–z, mais par pour les caract&egrave;res
&eacute;tendus tels que &Eacute; et &eacute; .
L’indicateur m (multiline)
Si l’indicateur m (multiline) n’est pas d&eacute;fini, le ^ correspond au d&eacute;but de la cha&icirc;ne et le $ &agrave; sa fin. Si l’indicateur m est
d&eacute;fini, ces caract&egrave;res correspondent au d&eacute;but d’une ligne et &agrave; la fin d’une ligne, respectivement. Consid&eacute;rez la cha&icirc;ne
suivante, qui inclut un caract&egrave;re de nouvelle ligne :
var str:String = &quot;Test\n&quot;;
str += &quot;Multiline&quot;;
trace(str.match(/^\w*/g)); // Match a word at the beginning of the string.
M&ecirc;me si l’indicateur g (global) est d&eacute;fini dans l’expression r&eacute;guli&egrave;re, la m&eacute;thode match() correspond &agrave; une seule
sous-cha&icirc;ne, car il n’existe qu’une seule correspondance pour le ^ (le d&eacute;but de la cha&icirc;ne). Le r&eacute;sultat est le suivant :
Test
Voici le m&ecirc;me code avec l’indicateur m d&eacute;fini :
var str:String = &quot;Test\n&quot;;
str += &quot;Multiline&quot;;
trace(str.match(/^\w*/gm)); // Match a word at the beginning of lines.
Cette fois, le r&eacute;sultat inclut les mots au d&eacute;but des deux lignes :
Test,Multiline
Seul le caract&egrave;re \n signale la fin d’une ligne. Ce n’est pas le cas des caract&egrave;res suivants :
• Retour de chariot (\r)
• S&eacute;parateur de ligne Unicode (\u2028)
• S&eacute;parateur de paragraphe Unicode (\u2028)
L’indicateur s (dotall)
Si l’indicateur s (dotall ou “dot all”) n’est pas d&eacute;fini, un point (.) dans un mod&egrave;le d’expression r&eacute;guli&egrave;re ne
correspond pas &agrave; un caract&egrave;re de nouvelle ligne (\n). Par cons&eacute;quent, il n’existe aucune correspondance pour
l’exemple suivant :
var str:String = &quot;&lt;p&gt;Test\n&quot;;
str += &quot;Multiline&lt;/p&gt;&quot;;
var re:RegExp = /&lt;p&gt;.*?&lt;\/p&gt;/;
trace(str.match(re));
N&eacute;anmoins, si l’indicateur s est d&eacute;fini, le point correspond au caract&egrave;re de nouvelle ligne :
var str:String = &quot;&lt;p&gt;Test\n&quot;;
str += &quot;Multiline&lt;/p&gt;&quot;;
var re:RegExp = /&lt;p&gt;.*?&lt;\/p&gt;/s;
trace(str.match(re));
Dans ce cas, la correspondance est la sous-cha&icirc;ne enti&egrave;re dans les balises &lt;p&gt;, y compris le caract&egrave;re de nouvelle ligne :
&lt;p&gt;Test
Multiline&lt;/p&gt;
Derni&egrave;re mise &agrave; jour le 27/4/2013
91
92
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
L’indicateur x (extended)
Les expressions r&eacute;guli&egrave;res peuvent &ecirc;tre difficiles &agrave; lire, notamment lorsqu’elles comprennent de nombreux
m&eacute;tasymboles et m&eacute;tas&eacute;quences. Exemple :
/&lt;p(&gt;|(\s*[^&gt;]*&gt;)).*?&lt;\/p&gt;/gi
Lorsque vous utilisez l’indicateur x (extended) dans une expression r&eacute;guli&egrave;re, les espaces vides que vous tapez dans le
mod&egrave;le sont ignor&eacute;s. Par exemple, l’expression r&eacute;guli&egrave;re suivante est identique &agrave; l’exemple pr&eacute;c&eacute;dent :
/
&lt;p
(&gt;
|
(\s*
[^&gt;]*
&gt;))
.*?
&lt;\/p&gt;
/gix
Si l’indicateur x est d&eacute;fini et que vous souhaitez &eacute;tablir une correspondance avec un espace vide, faites pr&eacute;c&eacute;der l’espace
vide d’une barre oblique. Par exemple, les deux expressions r&eacute;guli&egrave;res suivantes sont &eacute;quivalentes :
/foo bar/
/foo \ bar/x
La propri&eacute;t&eacute; lastIndex
La propri&eacute;t&eacute; lastIndex sp&eacute;cifie la position d’index dans la cha&icirc;ne &agrave; laquelle la recherche suivante doit d&eacute;marrer.
Cette propri&eacute;t&eacute; affecte les m&eacute;thodes exec() et test() appel&eacute;es sur une expression r&eacute;guli&egrave;re dont l’indicateur g est
d&eacute;fini sur true. Consid&eacute;rons par exemple le code qui suit :
var pattern:RegExp = /p\w*/gi;
var str:String = &quot;Pedro Piper picked a peck of pickled peppers.&quot;;
trace(pattern.lastIndex);
var result:Object = pattern.exec(str);
while (result != null)
{
trace(pattern.lastIndex);
result = pattern.exec(str);
}
La propri&eacute;t&eacute; lastIndex est d&eacute;fini sur 0 par d&eacute;faut (pour commencer les recherches au d&eacute;but de la cha&icirc;ne). Apr&egrave;s
chaque correspondance, elle est d&eacute;finie sur la position d’index suivant la correspondance. Par cons&eacute;quent, le r&eacute;sultat
pour le code pr&eacute;c&eacute;dent est le suivant :
0
5
11
18
25
36
44
Si l’indicateur global est d&eacute;fini sur false, les m&eacute;thodes exec() et test() n’utilisent pas ni ne d&eacute;finissent la
propri&eacute;t&eacute; lastIndex.
Les m&eacute;thodes match(), replace() et search() de la classe String lancent toutes les recherches du d&eacute;but de la cha&icirc;ne,
ind&eacute;pendamment du r&eacute;glage de la propri&eacute;t&eacute; lastIndex de l’expression r&eacute;guli&egrave;re utilis&eacute;e dans l’appel &agrave; la m&eacute;thode
(n&eacute;anmoins, la m&eacute;thode match() d&eacute;finit lastIndex sur 0).
Vous pouvez d&eacute;finir la propri&eacute;t&eacute; lastIndex de sorte &agrave; ajuster la position de d&eacute;but dans la cha&icirc;ne pour la mise en
correspondance des expressions r&eacute;guli&egrave;res.
La propri&eacute;t&eacute; source
La propri&eacute;t&eacute; source sp&eacute;cifie la cha&icirc;ne qui d&eacute;finit la portion de mod&egrave;le d’une expression r&eacute;guli&egrave;re. Exemple :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
var pattern:RegExp = /foo/gi;
trace(pattern.source); // foo
M&eacute;thodes d’utilisation d’expressions r&eacute;guli&egrave;res avec
des cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe RegExp comprend deux m&eacute;thodes : exec() et test().
Outre les m&eacute;thodes exec() et test() de la classe RegExp, la classe String comprend les m&eacute;thodes suivantes qui vous
permettent d’&eacute;tablir une correspondance avec des expressions r&eacute;guli&egrave;res dans des cha&icirc;nes : match(), replace(),
search() et splice().
La m&eacute;thode test()
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La m&eacute;thode test() de la classe RegExp v&eacute;rifie si la cha&icirc;ne fournie contient une correspondance pour l’expression
r&eacute;guli&egrave;re, comme l’indique l’exemple suivant :
var pattern:RegExp = /Class-\w/;
var str = &quot;Class-A&quot;;
trace(pattern.test(str)); // output: true
La m&eacute;thode exec()
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La m&eacute;thode exec() de la classe RegExp v&eacute;rifie si la cha&icirc;ne fournie contient une correspondance pour l’expression
r&eacute;guli&egrave;re et renvoie un tableau avec les &eacute;l&eacute;ments suivants :
• La sous-cha&icirc;ne correspondante
• Les correspondances de sous-cha&icirc;ne pour les groupes entre parenth&egrave;ses dans l’expression r&eacute;guli&egrave;re
Le tableau inclut &eacute;galement une propri&eacute;t&eacute; index qui indique la position d’index du d&eacute;but de la correspondance de
sous-cha&icirc;ne.
Consid&eacute;rons par exemple le code qui suit :
var pattern:RegExp = /\d{3}\-\d{3}-\d{4}/; //U.S phone number
var str:String = &quot;phone: 415-555-1212&quot;;
var result:Array = pattern.exec(str);
trace(result.index, &quot; - &quot;, result);
// 7-415-555-1212
Utilisez la m&eacute;thode exec() plusieurs fois pour &eacute;tablir une correspondance avec plusieurs sous-cha&icirc;nes lorsque
l’indicateur g (global) est d&eacute;fini pour l’expression r&eacute;guli&egrave;re :
Derni&egrave;re mise &agrave; jour le 27/4/2013
93
94
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
var pattern:RegExp = /\w*sh\w*/gi;
var str:String = &quot;She sells seashells by the seashore&quot;;
var result:Array = pattern.exec(str);
while (result != null)
{
trace(result.index, &quot;\t&quot;, pattern.lastIndex, &quot;\t&quot;, result);
result = pattern.exec(str);
}
//output:
// 0 3 She
// 10 19 seashells
// 27 35 seashore
M&eacute;thodes de cha&icirc;ne utilisant des param&egrave;tres RegExp
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les m&eacute;thodes suivantes de la classe String prennent des expressions r&eacute;guli&egrave;res comme param&egrave;tres : match(),
replace(), search() et split(). Pour plus d’informations sur ces m&eacute;thodes, voir &laquo; Recherche de mod&egrave;les dans des
cha&icirc;nes et remplacement de sous-cha&icirc;nes &raquo; &agrave; la page 17.
Exemple d’expression r&eacute;guli&egrave;re : analyseur Wiki
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Cet exemple simple de conversion de texte Wiki illustre des utilisations d’expressions r&eacute;guli&egrave;res :
• Conversion de lignes de texte qui mettent en correspondance un mod&egrave;le Wiki source et les cha&icirc;nes de sortie HTML
appropri&eacute;es.
• Utilisation d’une expression r&eacute;guli&egrave;re pour convertir des mod&egrave;les URL en balises de lien hypertexte HTML &lt;a&gt;
• Utilisation d’une expression r&eacute;guli&egrave;re pour convertir les cha&icirc;nes dollar am&eacute;ricain (&quot;$9.95&quot;, par exemple) en
cha&icirc;nes euro (&quot;8.24 €&quot;, par exemple)
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers de l’application WikiEditor se trouvent
dans le dossier Samples/WikiEditor. L’application se compose des fichiers suivants :
Fichier
Description
WikiEditor.mxml
Fichier d’application principal dans Flash (FLA) ou Flex
(MXML).
ou
WikiEditor.fla
Derni&egrave;re mise &agrave; jour le 27/4/2013
95
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Fichier
Description
com/example/programmingas3/regExpExamples/WikiParser.as
Une classe qui comprend des m&eacute;thodes utilisant des
expressions r&eacute;guli&egrave;res pour convertir des mod&egrave;les de
texte d’entr&eacute;e Wiki en sortie HTML &eacute;quivalente.
com/example/programmingas3/regExpExamples/URLParser.as
Une classe qui comprend des m&eacute;thodes utilisant des
expressions r&eacute;guli&egrave;res pour convertir des cha&icirc;nes URL en
balises de lien hypertexte HTML &lt;a&gt;.
com/example/programmingas3/regExpExamples/CurrencyConverter.as
Une classe qui comprend des m&eacute;thodes utilisant des
expressions r&eacute;guli&egrave;res pour convertir des cha&icirc;nes dollar
am&eacute;ricain en cha&icirc;nes euro.
D&eacute;finition de la classe WikiParser
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe WikiParser inclut des m&eacute;thodes qui convertissent le texte d’entr&eacute;e Wiki en sortie HTML &eacute;quivalente. Il ne
s’agit pas d’une application de conversion Wiki tr&egrave;s puissante, mais elle illustre des utilisations d’expressions r&eacute;guli&egrave;res
pour la mise en correspondance de mod&egrave;le et la conversion de cha&icirc;ne.
La fonction constructeur et la m&eacute;thode setWikiData() initialisent un exemple de cha&icirc;ne de texte d’entr&eacute;e Wiki,
comme suit :
public function WikiParser()
{
wikiData = setWikiData();
}
Lorsque l’utilisateur clique sur le bouton de test dans l’application exemple, cette derni&egrave;re appelle la m&eacute;thode
parseWikiString() de l’objet WikiParser. Cette m&eacute;thode appelle plusieurs autres m&eacute;thodes, qui assemblent &agrave; leur
tour la cha&icirc;ne HTML r&eacute;sultante.
public function parseWikiString(wikiString:String):String
{
var result:String = parseBold(wikiString);
result = parseItalic(result);
result = linesToParagraphs(result);
result = parseBullets(result);
return result;
}
Chaque m&eacute;thode appel&eacute;e—parseBold(), parseItalic(), linesToParagraphs(), et parseBullets()—utilise la
m&eacute;thode replace() de la cha&icirc;ne pour remplacer les mod&egrave;les de correspondance, d&eacute;finis par une expression r&eacute;guli&egrave;re,
de fa&ccedil;on &agrave; transformer le texte Wiki en texte format&eacute; HTML.
Conversion des mod&egrave;les de texte en gras et en italique
La m&eacute;thode parseBold() recherche un mod&egrave;le de texte Wiki en gras ('''foo''', par exemple) et le transforme en
son &eacute;quivalent HTML (&lt;b&gt;foo&lt;/b&gt;, par exemple), comme suit :
private function parseBold(input:String):String
{
var pattern:RegExp = /'''(.*?)'''/g;
return input.replace(pattern, &quot;&lt;b&gt;$1&lt;/b&gt;&quot;);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Notez que la portion (.?*) de l’expression r&eacute;guli&egrave;re correspond &agrave; des caract&egrave;res (*) entre les deux mod&egrave;les de
d&eacute;finition '''. Le quantificateur ? rend la correspondance nongreedy, de fa&ccedil;on &agrave; ce que pour une cha&icirc;ne telle que
'''aaa''' bbb '''ccc''', la premi&egrave;re cha&icirc;ne mise en correspondance soit '''aaa''' et non la cha&icirc;ne enti&egrave;re (qui
commence et se termine par le mod&egrave;le ''').
Les parenth&egrave;ses dans l’expression r&eacute;guli&egrave;re d&eacute;finissent un groupe captur&eacute;, et la m&eacute;thode replace() se r&eacute;f&egrave;re &agrave; ce
groupe en utilisant le code $1 dans la cha&icirc;ne de remplacement. L’indicateur g (global) dans l’expression r&eacute;guli&egrave;re
v&eacute;rifie que la m&eacute;thode replace() remplace toutes les correspondances dans la cha&icirc;ne (pas simplement la premi&egrave;re).
La m&eacute;thode parseItalic() fonctionne comme la m&eacute;thode parseBold(), sauf qu’elle recherche deux apostrophes
('') comme s&eacute;parateur pour le texte en italique (au lieu de trois) :
private function parseItalic(input:String):String
{
var pattern:RegExp = /''(.*?)''/g;
return input.replace(pattern, &quot;&lt;i&gt;$1&lt;/i&gt;&quot;);
}
Conversion de mod&egrave;les de puce
Comme dans l’exemple suivant, la m&eacute;thode parseBullet() recherche le mod&egrave;le de puce Wiki (* foo, par exemple)
et le transforme en son &eacute;quivalent HTML (&lt;li&gt;foo&lt;/li&gt;, par exemple) :
private function parseBullets(input:String):String
{
var pattern:RegExp = /^\*(.*)/gm;
return input.replace(pattern, &quot;&lt;li&gt;$1&lt;/li&gt;&quot;);
}
Le symbole ^ au d&eacute;but de l’expression r&eacute;guli&egrave;re correspond au d&eacute;but d’une ligne. L’indicateur m (multiline) dans
l’expression r&eacute;guli&egrave;re fait en sorte que cette derni&egrave;re compare le symbole ^ au d&eacute;but d’une ligne, et non simplement
au d&eacute;but de la cha&icirc;ne.
Le mod&egrave;le \* correspond &agrave; un ast&eacute;risque (la barre oblique est utilis&eacute;e pour signaler un ast&eacute;risque litt&eacute;ral au lieu d’un
quantificateur *).
Les parenth&egrave;ses dans l’expression r&eacute;guli&egrave;re d&eacute;finissent un groupe captur&eacute;, et la m&eacute;thode replace() se r&eacute;f&egrave;re &agrave; ce
groupe en utilisant le code $1 dans la cha&icirc;ne de remplacement. L’indicateur g (global) dans l’expression r&eacute;guli&egrave;re
v&eacute;rifie que la m&eacute;thode replace() remplace toutes les correspondances dans la cha&icirc;ne (pas simplement la premi&egrave;re).
Conversion de mod&egrave;les Wiki de paragraphe
La m&eacute;thode linesToParagraphs() convertit chaque ligne dans la cha&icirc;ne Wiki d’entr&eacute;e en une balise de paragraphe
HTML &lt;p&gt;. Ces lignes dans la m&eacute;thode extraient des lignes vides de la cha&icirc;ne d’entr&eacute;e Wiki :
var pattern:RegExp = /^$/gm;
var result:String = input.replace(pattern, &quot;&quot;);
Les symboles ^ et $ dans l’expression r&eacute;guli&egrave;re correspondent au d&eacute;but et &agrave; la fin d’une ligne. L’indicateur m
(multiline) dans l’expression r&eacute;guli&egrave;re fait en sorte que cette derni&egrave;re compare le symbole ^ au d&eacute;but d’une ligne, et
non simplement au d&eacute;but de la cha&icirc;ne.
La m&eacute;thode replace() remplace toutes les cha&icirc;nes de correspondance (lignes vides) par une cha&icirc;ne vide (&quot;&quot;).
L’indicateur g (global) dans l’expression r&eacute;guli&egrave;re v&eacute;rifie que la m&eacute;thode replace() remplace toutes les
correspondances dans la cha&icirc;ne (pas simplement la premi&egrave;re).
Derni&egrave;re mise &agrave; jour le 27/4/2013
96
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
Conversion d’URL en balises HTML &lt;a&gt;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque l’utilisateur clique sur le bouton de test dans l’exemple d’application et qu’il a coch&eacute; la case urlToATag,
l’application appelle la m&eacute;thode statique URLParser.urlToATag() pour convertir les cha&icirc;nes URL de la cha&icirc;ne Wiki
d’entr&eacute;e en balises HTML &lt;a&gt;.
var
var
var
var
var
protocol:String = &quot;((?:http|ftp)://)&quot;;
urlPart:String = &quot;([a-z0-9_-]+\.[a-z0-9_-]+)&quot;;
optionalUrlPart:String = &quot;(\.[a-z0-9_-]*)&quot;;
urlPattern:RegExp = new RegExp(protocol + urlPart + optionalUrlPart, &quot;ig&quot;);
result:String = input.replace(urlPattern, &quot;&lt;a href='$1$2$3'&gt;&lt;u&gt;$1$2$3&lt;/u&gt;&lt;/a&gt;&quot;);
La fonction constructeur RegExp() sert &agrave; assembler une expression r&eacute;guli&egrave;re (urlPattern) &agrave; partir de plusieurs
parties constituantes. Ces parties constituantes sont repr&eacute;sent&eacute;es par chaque cha&icirc;ne d&eacute;finissant une partie du mod&egrave;le
de l’expression r&eacute;guli&egrave;re.
La premi&egrave;re partie du mod&egrave;le de l’expression r&eacute;guli&egrave;re, d&eacute;finie par la cha&icirc;ne protocol, d&eacute;finit un protocole URL :
http:// ou ftp://. Les parenth&egrave;ses d&eacute;finissent un groupe non captur&eacute;, indiqu&eacute; par le symbole ?. Ceci signifie que
les parenth&egrave;ses servent simplement &agrave; d&eacute;finir un groupe pour le mod&egrave;le de permutation | ; le groupe ne correspondra
pas &agrave; des codes de backreference ($1, $2, $3) dans la cha&icirc;ne de remplacement de la m&eacute;thode replace().
Les autres parties constituantes de l’expression r&eacute;guli&egrave;re utilisent chacune des groupes captur&eacute;s (indiqu&eacute;s par des
parenth&egrave;ses dans le mod&egrave;le) qui sont ensuite utilis&eacute;s dans les codes de backreference ($1, $2, $3) dans la cha&icirc;ne de
remplacement de la m&eacute;thode replace().
La partie du mod&egrave;le d&eacute;finie par la cha&icirc;ne urlPart correspond au moins &agrave; l’un des caract&egrave;res suivants : a-z, 0-9, _ ou
-. La quantificateur + indique qu’au moins un caract&egrave;re a une correspondance. Le \. indique un point obligatoire (.).
Et le reste correspond &agrave; une autre cha&icirc;ne d’au moins un de ces caract&egrave;res : a-z, 0-9, _ ou -.
La partie du mod&egrave;le d&eacute;finie par la cha&icirc;ne optionalUrlPart correspond &agrave; z&eacute;ro ou plus des caract&egrave;res suivants : un
point (.) suivi par n’importe quel nombre de caract&egrave;res alphanum&eacute;riques (y compris _ et -). Le quantificateur *
indique que z&eacute;ro ou plus de caract&egrave;res ont une correspondance.
L’appel &agrave; la m&eacute;thode replace() utilise l’expression r&eacute;guli&egrave;re et assemble la cha&icirc;ne HTML de remplacement, &agrave; l’aide
de backreferences.
La m&eacute;thode urlToATag() appelle ensuite la m&eacute;thode emailToATag(), qui utilise des techniques semblables pour
remplacer des mod&egrave;les de courrier &eacute;lectronique par des cha&icirc;nes de lien hypertexte HTML &lt;a&gt;. Les expressions
r&eacute;guli&egrave;res utilis&eacute;es pour correspondre &agrave; des URL HTTP, FTP et de courrier &eacute;lectronique dans le fichier sont assez
simples car elles sont donn&eacute;es &agrave; titre d’exemple. Elles sont beaucoup plus compliqu&eacute;es si l’on souhaite &eacute;tablir une
correspondance plus correcte.
Conversion des cha&icirc;nes dollar am&eacute;ricain en cha&icirc;nes euro
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque l’utilisateur clique sur le bouton de test dans l’exemple d’application et qu’il a coch&eacute; la case dollarToEuro ,
l’application appelle la m&eacute;thode statique CurrencyConverter.usdToEuro() pour convertir des cha&icirc;nes dollar
am&eacute;ricain (&quot;$9.95&quot;, par exemple) en cha&icirc;nes euro (&quot;8.24€&quot;, par exemple), comme suit :
var usdPrice:RegExp = /\$([\d,]+.\d+)+/g;
return input.replace(usdPrice, usdStrToEuroStr);
Derni&egrave;re mise &agrave; jour le 27/4/2013
97
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation d’expressions r&eacute;guli&egrave;res
La premi&egrave;re ligne d&eacute;finit un mod&egrave;le simple pour &eacute;tablir une correspondance avec des cha&icirc;nes dollar am&eacute;ricain. Le
caract&egrave;re $ est pr&eacute;c&eacute;d&eacute; du caract&egrave;re d’&eacute;chappement (\).
La m&eacute;thode replace() utilise l’expression r&eacute;guli&egrave;re pour &eacute;tablir une correspondance avec le mod&egrave;le et appelle la
fonction usdStrToEuroStr() pour d&eacute;terminer la cha&icirc;ne de remplacement (une valeur en euros).
Lorsqu’un nom de fonction est utilis&eacute; comme deuxi&egrave;me param&egrave;tre de la m&eacute;thode replace(), les &eacute;l&eacute;ments suivants
sont transmis comme param&egrave;tres &agrave; la fonction appel&eacute;e :
• La partie correspondante de la cha&icirc;ne.
• Tout groupe entre parenth&egrave;ses captur&eacute; correspondant. Le nombre d’arguments transmis de cette fa&ccedil;on varie selon
le nombre de correspondances de groupes entre parenth&egrave;ses captur&eacute;es. Pour d&eacute;terminer le nombre de
correspondances de groupes entre parenth&egrave;ses captur&eacute;s, v&eacute;rifiez arguments.length - 3 dans le code de la
fonction.
• La position d’index dans la cha&icirc;ne o&ugrave; d&eacute;bute la correspondance.
• La cha&icirc;ne compl&egrave;te.
La m&eacute;thode usdStrToEuroStr() convertit les mod&egrave;les de cha&icirc;ne dollar am&eacute;ricain en cha&icirc;nes euro, comme suit :
private function usdToEuro(...args):String
{
var usd:String = args[1];
usd = usd.replace(&quot;,&quot;, &quot;&quot;);
var exchangeRate:Number = 0.828017;
var euro:Number = Number(usd) * exchangeRate;
trace(usd, Number(usd), euro);
const euroSymbol:String = String.fromCharCode(8364); // €
return euro.toFixed(2) + &quot; &quot; + euroSymbol;
}
args[1] repr&eacute;sente le groupe entre parenth&egrave;ses captur&eacute; mis en correspondance par l’expression r&eacute;guli&egrave;re usdPrice.
Il s’agit de la portion num&eacute;rique de la cha&icirc;ne dollar am&eacute;ricain, c’est-&agrave;-dire la quantit&eacute; en dollar, sans le signe $. La
m&eacute;thode applique une conversion de taux de change et renvoie la cha&icirc;ne r&eacute;sultante (avec un symbole de fin de ligne €
au lieu du symbole $ plac&eacute; &agrave; gauche).
Derni&egrave;re mise &agrave; jour le 27/4/2013
98
99
Chapitre 6 : Utilisation de XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 inclut un groupe de classes bas&eacute; sur la sp&eacute;cification ECMAScript pour XML (E4X) (ECMA-357
version 2). Ces classes comprennent une fonctionnalit&eacute; puissante et facile &agrave; utiliser permettant de travailler avec des
donn&eacute;es XML. A l’aide d’E4X, vous pouvez d&eacute;velopper un code avec des donn&eacute;es XML plus rapidement qu’avec les
techniques de programmation pr&eacute;c&eacute;dentes. En outre, le code que vous produisez est plus facile &agrave; lire.
Voir aussi
Classe XML
Sp&eacute;cification ECMA-357
Principes de base de XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
XML est un moyen standard de repr&eacute;senter des informations structur&eacute;es afin de permettre aux ordinateurs de les
utiliser facilement et aux utilisateurs de les &eacute;crire et de les comprendre. XML est l’abr&eacute;viation de eXtensible Markup
Language. La norme XML est disponible &agrave; l’adresse www.w3.org/XML/.
XML offre une fa&ccedil;on pratique et standard de classer des donn&eacute;es, afin de faciliter leur lecture, leur acc&egrave;s et leur
manipulation. XML utilise une arborescence et une structure de balises identiques &agrave; celle du code HTML. Voici un
exemple simple de donn&eacute;es XML :
&lt;song&gt;
&lt;title&gt;What you know?&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;year&gt;1989&lt;/year&gt;
&lt;lastplayed&gt;2006-10-17-08:31&lt;/lastplayed&gt;
&lt;/song&gt;
Les donn&eacute;es XML peuvent &eacute;galement &ecirc;tre plus complexes, avec des balises imbriqu&eacute;es dans d’autres balises ainsi que
des attributs et d’autres composants structurels. Voici un exemple plus complexe de donn&eacute;es XML :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
&lt;album&gt;
&lt;title&gt;Questions, unanswered&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;year&gt;1989&lt;/year&gt;
&lt;tracks&gt;
&lt;song tracknumber=&quot;1&quot; length=&quot;4:05&quot;&gt;
&lt;title&gt;What do you know?&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;lastplayed&gt;2006-10-17-08:31&lt;/lastplayed&gt;
&lt;/song&gt;
&lt;song tracknumber=&quot;2&quot; length=&quot;3:45&quot;&gt;
&lt;title&gt;Who do you know?&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;lastplayed&gt;2006-10-17-08:35&lt;/lastplayed&gt;
&lt;/song&gt;
&lt;song tracknumber=&quot;3&quot; length=&quot;5:14&quot;&gt;
&lt;title&gt;When do you know?&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;lastplayed&gt;2006-10-17-08:39&lt;/lastplayed&gt;
&lt;/song&gt;
&lt;song tracknumber=&quot;4&quot; length=&quot;4:19&quot;&gt;
&lt;title&gt;Do you know?&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;lastplayed&gt;2006-10-17-08:44&lt;/lastplayed&gt;
&lt;/song&gt;
&lt;/tracks&gt;
&lt;/album&gt;
Vous remarquerez que ce document XML contient d’autres structures XML compl&egrave;tes (les balises song avec leurs
enfants, par exemple). Il d&eacute;montre &eacute;galement d’autres structures XML telles que des attributs (tracknumber et length
dans les balises song), et des balises qui contiennent d’autres balises au lieu de donn&eacute;es (la balise tracks, par exemple).
Prise en main de XML
Si vous avez peu ou pas d’exp&eacute;rience avec XML, voici une br&egrave;ve description des aspects les plus courants des donn&eacute;es
XML. Les donn&eacute;es XML sont &eacute;crites sous forme de texte brut, avec une syntaxe sp&eacute;cifique permettant d’organiser les
informations en un format structur&eacute;. G&eacute;n&eacute;ralement, un seul jeu de donn&eacute;es XML est appel&eacute; un document XML. Dans
le format XML, les donn&eacute;es sont organis&eacute;es en &eacute;l&eacute;ments (qui peuvent &ecirc;tre des &eacute;l&eacute;ments de donn&eacute;es uniques ou des
conteneurs pour d’autres &eacute;l&eacute;ments) &agrave; l’aide d’une structure hi&eacute;rarchique. Chaque document XML poss&egrave;de un &eacute;l&eacute;ment
comme niveau sup&eacute;rieur ou &eacute;l&eacute;ment principal. Cet &eacute;l&eacute;ment racine peut contenir une seule information, m&ecirc;me s’il est
plus probable qu’il contienne d’autres &eacute;l&eacute;ments qui, &agrave; leur tour, contiennent d’autres &eacute;l&eacute;ments, et ainsi de suite. Par
exemple, ce document XML contient les informations relatives &agrave; un album musical :
&lt;song tracknumber=&quot;1&quot; length=&quot;4:05&quot;&gt;
&lt;title&gt;What do you know?&lt;/title&gt;
&lt;artist&gt;Steve and the flubberblubs&lt;/artist&gt;
&lt;mood&gt;Happy&lt;/mood&gt;
&lt;lastplayed&gt;2006-10-17-08:31&lt;/lastplayed&gt;
&lt;/song&gt;
Chaque &eacute;l&eacute;ment se distingue par un ensemble de balises—le nom de l’&eacute;l&eacute;ment plac&eacute; entre chevrons (signes inf&eacute;rieur &agrave;
et sup&eacute;rieur &agrave;). La balise de d&eacute;but, indiquant le d&eacute;but de l’&eacute;l&eacute;ment, porte le nom de l’&eacute;l&eacute;ment :
&lt;title&gt;
La balise de fin, qui marque la fin de l’&eacute;l&eacute;ment, a une barre oblique avant le nom de l’&eacute;l&eacute;ment :
&lt;/title&gt;
Derni&egrave;re mise &agrave; jour le 27/4/2013
100
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Si un &eacute;l&eacute;ment est vide, il peut &ecirc;tre &eacute;crit comme &eacute;l&eacute;ment vide (parfois appel&eacute; &eacute;l&eacute;ment de fin automatique). Dans XML,
cet &eacute;l&eacute;ment :
&lt;lastplayed/&gt;
est identique &agrave; cet &eacute;l&eacute;ment :
&lt;lastplayed&gt;&lt;/lastplayed&gt;
Outre le contenu de l’&eacute;l&eacute;ment plac&eacute; entre les balises de d&eacute;but et de fin, un &eacute;l&eacute;ment peut comporter d’autres valeurs,
appel&eacute;es attributs, d&eacute;finies dans la balise de d&eacute;but de l’&eacute;l&eacute;ment. Par exemple, cet &eacute;l&eacute;ment XML d&eacute;finit un seul attribut
appel&eacute; length, avec la valeur &quot;4:19&quot; :
&lt;song length=&quot;4:19&quot;&gt;&lt;/song&gt;
Chaque &eacute;l&eacute;ment XML poss&egrave;de un contenu qui est soit une valeur, soit un ou plusieurs &eacute;l&eacute;ments XML, ou rien du tout
(pour un &eacute;l&eacute;ment vide).
En savoir plus sur XML
Pour en savoir plus sur l’utilisation de XML, un grand nombre de livres et de ressources sont disponibles, ainsi que les
sites Web suivants :
• Didacticiel XML W3Schools : http://w3schools.com/xml/
• Didacticiels XMLpitstop, listes de discussions, etc. : http://xmlpitstop.com/
Classes ActionScript pour utiliser XML
ActionScript 3.0 inclut plusieurs classes permettant d’utiliser des informations structur&eacute;es XML. Les deux classes
principales sont les suivantes :
• XML : repr&eacute;sente un seul &eacute;l&eacute;ment XML, qui peut &ecirc;tre un document XML avec plusieurs enfants ou un &eacute;l&eacute;ment &agrave;
une seule valeur dans un document.
• XMLList : repr&eacute;sente un ensemble d’&eacute;l&eacute;ments XML. Un objet XMLList est utilis&eacute; lorsque plusieurs &eacute;l&eacute;ments XML
sont des fr&egrave;res (au m&ecirc;me niveau, et contenus par le m&ecirc;me parent, dans la hi&eacute;rarchie du document XML). Par
exemple, une occurrence de XMLList serait le moyen le plus facile d’utiliser cet ensemble d’&eacute;l&eacute;ments XML
(probablement contenus dans un document XML):
&lt;artist type=&quot;composer&quot;&gt;Fred Wilson&lt;/artist&gt;
&lt;artist type=&quot;conductor&quot;&gt;James Schmidt&lt;/artist&gt;
&lt;artist type=&quot;soloist&quot;&gt;Susan Harriet Thurndon&lt;/artist&gt;
Pour des utilisations plus avanc&eacute;es impliquant des espaces de noms XML, ActionScript inclut &eacute;galement les classes
Namespace et QName. Pour plus d’informations, voir &laquo; Utilisation des espaces de noms XML &raquo; &agrave; la page 114.
Outre les classes int&eacute;gr&eacute;es permettant d’utiliser XML, ActionScript 3.0 comprend &eacute;galement plusieurs op&eacute;rateurs
offrant des fonctionnalit&eacute;s sp&eacute;cifiques pour acc&eacute;der et manipuler des donn&eacute;es XML. Cette approche d’utilisation de
XML au moyen de ces classes et de ces op&eacute;rateurs est appel&eacute;e ECMAScript pour XML (E4X), comme d&eacute;fini par la
sp&eacute;cification ECMA-357 version 2.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants utilis&eacute;s dans le cadre de la programmation de routines de
gestion des &eacute;l&eacute;ments XML :
El&eacute;ment Entit&eacute; unique dans un document XML correspondant au contenu compris entre une balise de d&eacute;but et une
balise de fin (balises comprises). Les &eacute;l&eacute;ments XML peuvent contenir des donn&eacute;es de texte ou d’autres &eacute;l&eacute;ments, ou
bien &ecirc;tre vides.
Derni&egrave;re mise &agrave; jour le 27/4/2013
101
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
El&eacute;ment vide El&eacute;ment XML qui ne contient aucun &eacute;l&eacute;ment enfant. Les &eacute;l&eacute;ments vides sont souvent &eacute;crits en tant que
balises de fin automatique (&lt;element/&gt;, par exemple).
Document Structure XML unique. Un document XML peut contenir n’importe quel nombre d’&eacute;l&eacute;ments (ou peut &ecirc;tre
constitu&eacute; d’un seul &eacute;l&eacute;ment vide) ; cependant, un document XML doit avoir un seul &eacute;l&eacute;ment de niveau sup&eacute;rieur qui
contient tous les autres &eacute;l&eacute;ments dans le document.
Nœud Autre nom d’un &eacute;l&eacute;ment XML.
Attribut Valeur nomm&eacute;e associ&eacute;e &agrave; un &eacute;l&eacute;ment qui est &eacute;crite dans la balise de d&eacute;but de l’&eacute;l&eacute;ment au format
attributename=&quot;valeur&quot;, plut&ocirc;t que d’&ecirc;tre &eacute;crite comme &eacute;l&eacute;ment enfant s&eacute;par&eacute; imbriqu&eacute; dans l’&eacute;l&eacute;ment.
Approche E4X concernant le traitement XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La sp&eacute;cification ECMAScript pour XML d&eacute;finit un ensemble de classes et de fonctionnalit&eacute;s permettant d’utiliser des
donn&eacute;es XML. Cet ensemble de classes et de fonctionnalit&eacute;s est connu sous le nom de E4X. ActionScript 3.0 int&egrave;gre
les classes E4X suivantes : XML, XMLList, QName et Namespace.
Les m&eacute;thodes, propri&eacute;t&eacute;s et op&eacute;rateurs des classes E4X sont con&ccedil;us avec les objectifs suivants :
• Simplicit&eacute; : lorsque cela est possible, E4X facilite l’&eacute;criture et la compr&eacute;hension du code &agrave; utiliser avec des donn&eacute;es XML.
• Coh&eacute;rence : les m&eacute;thodes et le raisonnement E4X sont coh&eacute;rents avec eux-m&ecirc;mes et avec d’autres parties
d’ActionScript.
• Connaissance : vous manipulez des donn&eacute;es XML avec des op&eacute;rateurs bien connus tels que l’op&eacute;rateur point (.).
Remarque : ActionScript 2.0 int&egrave;gre une autre classe XML. Dans ActionScript 3.0, cette classe a &eacute;t&eacute; renomm&eacute;e
XMLDocument, pour &eacute;viter tout conflit de nom avec la classe XML d’ActionScript 3.0 qui fait partie d’E4X. Dans
ActionScript 3.0, les classes h&eacute;rit&eacute;es (XMLDocument, XMLNode, XMLParser et XMLTag) sont comprises dans le package
flash.xml, pour la prise en charge du contenu h&eacute;rit&eacute; principalement. Les nouvelles classes E4X sont des classes de base.
Vous ne devez pas importer de package pour les utiliser. Pour plus d’informations sur les classes XML d’ActionScript 2.0
existantes, voir le package flash.xml dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Voici un exemple de manipulation de donn&eacute;es avec E4X :
var myXML:XML =
&lt;order&gt;
&lt;item id='1'&gt;
&lt;menuName&gt;burger&lt;/menuName&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;item id='2'&gt;
&lt;menuName&gt;fries&lt;/menuName&gt;
&lt;price&gt;1.45&lt;/price&gt;
&lt;/item&gt;
&lt;/order&gt;
Votre application charge souvent des donn&eacute;es XML depuis une source externe telle qu’un service Web ou un flux RSS.
Toutefois, par souci de clart&eacute;, les exemples de code ci-apr&egrave;s affectent les donn&eacute;es XML en tant que litt&eacute;raux.
Comme l’indique le code suivant, E4X inclut des op&eacute;rateurs intuitifs tels que les op&eacute;rateurs point (.) et identifiant
d’attribut (@) pour acc&eacute;der aux propri&eacute;t&eacute;s et aux attributs dans l’XML :
Derni&egrave;re mise &agrave; jour le 27/4/2013
102
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
trace(myXML.item[0].menuName); // Output: burger
trace(myXML.item.(@id==2).menuName); // Output: fries
trace(myXML.item.(menuName==&quot;burger&quot;).price); // Output: 3.95
Utilisez la m&eacute;thode appendChild() pour affecter un nouveau nœud enfant &agrave; l’XML, comme l’indique le code suivant :
var newItem:XML =
&lt;item id=&quot;3&quot;&gt;
&lt;menuName&gt;medium cola&lt;/menuName&gt;
&lt;price&gt;1.25&lt;/price&gt;
&lt;/item&gt;
myXML.appendChild(newItem);
Utilisez les op&eacute;rateurs @ et. non seulement pour lire des donn&eacute;es mais &eacute;galement pour les affecter, comme dans
l’exemple suivant :
myXML.item[0].menuName=&quot;regular burger&quot;;
myXML.item[1].menuName=&quot;small fries&quot;;
myXML.item[2].menuName=&quot;medium cola&quot;;
myXML.item.(menuName==&quot;regular burger&quot;).@quantity = &quot;2&quot;;
myXML.item.(menuName==&quot;small fries&quot;).@quantity = &quot;2&quot;;
myXML.item.(menuName==&quot;medium cola&quot;).@quantity = &quot;2&quot;;
Utilisez une boucle for pour parcourir en boucle les nœuds de l’XML, comme suit :
var total:Number = 0;
for each (var property:XML in myXML.item)
{
var q:int = Number(property.@quantity);
var p:Number = Number(property.price);
var itemTotal:Number = q * p;
total += itemTotal;
trace(q + &quot; &quot; + property.menuName + &quot; $&quot; + itemTotal.toFixed(2))
}
trace(&quot;Total: $&quot;, total.toFixed(2));
Objets XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un objet XML peut repr&eacute;senter un &eacute;l&eacute;ment XML, un attribut, un commentaire, une instruction de traitement ou un
&eacute;l&eacute;ment de texte.
Un objet XML est class&eacute; soit dans la cat&eacute;gorie des objets ayant un contenu simple, soit dans celle des objets ayant un
contenu complexe. Un objet XML ayant des nœuds enfant est consid&eacute;r&eacute; comme ayant un contenu complexe. Le
contenu est consid&eacute;r&eacute; comme simple s’il correspond &agrave; un attribut, un commentaire, une instruction de traitement ou
un nœud de texte.
Par exemple, l’objet XML suivant contient un contenu complexe, y compris un commentaire et une instruction de
traitement :
Derni&egrave;re mise &agrave; jour le 27/4/2013
103
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
XML.ignoreComments = false;
XML.ignoreProcessingInstructions = false;
var x1:XML =
&lt;order&gt;
&lt;!--This is a comment. --&gt;
&lt;?PROC_INSTR sample ?&gt;
&lt;item id='1'&gt;
&lt;menuName&gt;burger&lt;/menuName&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;item id='2'&gt;
&lt;menuName&gt;fries&lt;/menuName&gt;
&lt;price&gt;1.45&lt;/price&gt;
&lt;/item&gt;
&lt;/order&gt;
Comme l’indique l’exemple suivant, vous pouvez maintenant utiliser les m&eacute;thodes comments() et
processingInstructions() pour cr&eacute;er des objets XML, un commentaire et une instruction de traitement :
var x2:XML = x1.comments()[0];
var x3:XML = x1.processingInstructions()[0];
Propri&eacute;t&eacute;s XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe XML a cinq propri&eacute;t&eacute;s statiques :
• Les propri&eacute;t&eacute;s ignoreComments et ignoreProcessingInstructions d&eacute;terminent si les commentaires ou les
instructions de traitement sont ignor&eacute;s lorsque l’objet XML est analys&eacute;.
• La propri&eacute;t&eacute; ignoreWhitespace d&eacute;termine si les espaces blancs sont ignor&eacute;s dans les balises d’un &eacute;l&eacute;ment et les
expressions int&eacute;gr&eacute;es s&eacute;par&eacute;es uniquement par des espaces blancs.
• Les propri&eacute;t&eacute;s prettyIndentet prettyPrinting servent &agrave; formater le texte renvoy&eacute; par les m&eacute;thodes
toString() et toXMLString() de la classe XML.
Pour plus d’informations sur ces propri&eacute;t&eacute;s, voir le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme
Adobe Flash.
M&eacute;thodes XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les m&eacute;thodes suivantes vous permettent d’utiliser la structure hi&eacute;rarchique des objets XML :
•
appendChild()
•
child()
•
childIndex()
•
children()
•
descendants()
•
elements()
•
insertChildAfter()
Derni&egrave;re mise &agrave; jour le 27/4/2013
104
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
•
insertChildBefore()
•
parent()
•
prependChild()
Les m&eacute;thodes suivantes vous permettent d’utiliser des attributs d’objet XML :
•
attribute()
•
attributes()
Les m&eacute;thodes suivantes vous permettent d’utiliser des propri&eacute;t&eacute;s d’objet XML :
•
hasOwnProperty()
•
propertyIsEnumerable()
•
replace()
•
setChildren()
Les m&eacute;thodes suivantes vous permettent d’utiliser des espaces de nom et des noms qualifi&eacute;s :
•
addNamespace()
•
inScopeNamespaces()
•
localName()
•
name()
•
namespace()
•
namespaceDeclarations()
•
removeNamespace()
•
setLocalName()
•
setName()
•
setNamespace()
Les m&eacute;thodes suivantes vous permettent d’utiliser et de d&eacute;terminer certains types de contenu XML :
•
comments()
•
hasComplexContent()
•
hasSimpleContent()
•
nodeKind()
•
processingInstructions()
•
text()
Les m&eacute;thodes suivantes vous permettent d’effectuer des conversions en cha&icirc;nes et de formater des objets XML :
•
defaultSettings()
•
setSettings()
•
settings()
•
normalize()
•
toString()
•
toXMLString()
Derni&egrave;re mise &agrave; jour le 27/4/2013
105
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Il existe quelques m&eacute;thodes suppl&eacute;mentaires :
•
contains()
•
copy()
•
valueOf()
•
length()
Pour plus d’informations sur ces m&eacute;thodes, voir le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme
Adobe Flash.
Objets XMLList
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Une occurrence de XMLList repr&eacute;sente un ensemble arbitraire d’objets XML. Elle peut contenir des documents XML
complets, des fragments XML ou les r&eacute;sultats d’une requ&ecirc;te XML.
Les m&eacute;thodes suivantes vous permettent d’utiliser la structure hi&eacute;rarchique des objets XMLList :
•
child()
•
children()
•
descendants()
•
elements()
•
parent()
Les m&eacute;thodes suivantes vous permettent d’utiliser des attributs d’objet XMLList :
•
attribute()
•
attributes()
Les m&eacute;thodes suivantes vous permettent d’utiliser des propri&eacute;t&eacute;s XMLList :
•
hasOwnProperty()
•
propertyIsEnumerable()
Les m&eacute;thodes suivantes vous permettent d’utiliser et de d&eacute;terminer certains types de contenu XML :
•
comments()
•
hasComplexContent()
•
hasSimpleContent()
•
processingInstructions()
•
text()
Les m&eacute;thodes suivantes vous permettent d’effectuer des conversions en cha&icirc;nes et de formater les objets XMLList :
•
normalize()
•
toString()
•
toXMLString()
Derni&egrave;re mise &agrave; jour le 27/4/2013
106
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Il existe quelques m&eacute;thodes suppl&eacute;mentaires :
•
contains()
•
copy()
•
length()
•
valueOf()
Pour plus d’informations sur ces m&eacute;thodes, voir le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme
Adobe Flash.
Pour un objet XMLList qui contient exactement un &eacute;l&eacute;ment XML, vous pouvez utiliser toutes les propri&eacute;t&eacute;s et les
m&eacute;thodes de la classe XML car un XMLList avec un &eacute;l&eacute;ment XML est trait&eacute; comme un objet XML. Par exemple, dans
le code suivant, &eacute;tant donn&eacute; que doc.div est un objet XMLList contenant un &eacute;l&eacute;ment, vous pouvez utiliser la m&eacute;thode
appendChild() de la classe XML :
var doc:XML =
&lt;body&gt;
&lt;div&gt;
&lt;p&gt;Hello&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;;
doc.div.appendChild(&lt;p&gt;World&lt;/p&gt;);
Pour consulter la liste des m&eacute;thodes et des propri&eacute;t&eacute;s XML, voir &laquo; Objets XML &raquo; &agrave; la page 103.
Initialisation de variables XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez affecter un litt&eacute;ral XML &agrave; un objet XML, comme suit :
var myXML:XML =
&lt;order&gt;
&lt;item id='1'&gt;
&lt;menuName&gt;burger&lt;/menuName&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;item id='2'&gt;
&lt;menuName&gt;fries&lt;/menuName&gt;
&lt;price&gt;1.45&lt;/price&gt;
&lt;/item&gt;
&lt;/order&gt;
Comme indiqu&eacute; dans le code suivant, vous pouvez &eacute;galement utiliser le constructeur new pour cr&eacute;er une occurrence
d’un objet XML &agrave; partir d’une cha&icirc;ne contenant des donn&eacute;es XML :
var str:String = &quot;&lt;order&gt;&lt;item id='1'&gt;&lt;menuName&gt;burger&lt;/menuName&gt;&quot;
+ &quot;&lt;price&gt;3.95&lt;/price&gt;&lt;/item&gt;&lt;/order&gt;&quot;;
var myXML:XML = new XML(str);
Si les donn&eacute;es XML dans la cha&icirc;ne ne sont pas bien form&eacute;es (par exemple, s’il manque une balise de fin), une erreur
d’ex&eacute;cution se produit.
Vous pouvez &eacute;galement transmettre des donn&eacute;es par r&eacute;f&eacute;rence (&agrave; partir d’autres variables) dans un objet XML, comme
indiqu&eacute; dans l’exemple suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
107
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
var tagname:String = &quot;item&quot;;
var attributename:String = &quot;id&quot;;
var attributevalue:String = &quot;5&quot;;
var content:String = &quot;Chicken&quot;;
var x:XML = &lt;{tagname} {attributename}={attributevalue}&gt;{content}&lt;/{tagname}&gt;;
trace(x.toXMLString())
// Output: &lt;item id=&quot;5&quot;&gt;Chicken&lt;/item&gt;
Pour charger des donn&eacute;es XML depuis une URL, utilisez la classe URLLoader, comme indiqu&eacute; dans l’exemple suivant :
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
var externalXML:XML;
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest(&quot;xmlFile.xml&quot;);
loader.load(request);
loader.addEventListener(Event.COMPLETE, onComplete);
function onComplete(event:Event):void
{
var loader:URLLoader = event.target as URLLoader;
if (loader != null)
{
externalXML = new XML(loader.data);
trace(externalXML.toXMLString());
}
else
{
trace(&quot;loader is not a URLLoader!&quot;);
}
}
Pour lire des donn&eacute;es XML depuis une connexion de socket, utilisez la classe XMLSocket . Pour plus d’informations,
voir la classe XMLSocket dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Assemblage et transformation d’objets XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Utilisez la m&eacute;thode prependChild() ou appendChild() pour ajouter une propri&eacute;t&eacute; au d&eacute;but ou &agrave; la fin de la liste des
propri&eacute;t&eacute;s d’un objet XML, comme indiqu&eacute; dans l’exemple suivant :
var
var
var
x =
x =
x =
x1:XML = &lt;p&gt;Line 1&lt;/p&gt;
x2:XML = &lt;p&gt;Line 2&lt;/p&gt;
x:XML = &lt;body&gt;&lt;/body&gt;
x.appendChild(x1);
x.appendChild(x2);
x.prependChild(&lt;p&gt;Line 0&lt;/p&gt;);
// x == &lt;body&gt;&lt;p&gt;Line 0&lt;/p&gt;&lt;p&gt;Line 1&lt;/p&gt;&lt;p&gt;Line 2&lt;/p&gt;&lt;/body&gt;
Utilisez la m&eacute;thode insertChildBefore() ou insertChildAfter() pour ajouter une propri&eacute;t&eacute; avant ou apr&egrave;s une
propri&eacute;t&eacute; sp&eacute;cifi&eacute;e, comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
108
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
var x:XML =
&lt;body&gt;
&lt;p&gt;Paragraph 1&lt;/p&gt;
&lt;p&gt;Paragraph 2&lt;/p&gt;
&lt;/body&gt;
var newNode:XML = &lt;p&gt;Paragraph 1.5&lt;/p&gt;
x = x.insertChildAfter(x.p[0], newNode)
x = x.insertChildBefore(x.p[2], &lt;p&gt;Paragraph 1.75&lt;/p&gt;)
Comme indiqu&eacute; dans l’exemple suivant, vous pouvez &eacute;galement utiliser des accolades ( { et } ) pour transmettre des
donn&eacute;es par r&eacute;f&eacute;rence (&agrave; partir d’autres variables) lorsque vous construisez des objets XML :
var ids:Array = [121, 122, 123];
var names:Array = [[&quot;Murphy&quot;,&quot;Pat&quot;], [&quot;Thibaut&quot;,&quot;Jean&quot;], [&quot;Smith&quot;,&quot;Vijay&quot;]]
var x:XML = new XML(&quot;&lt;employeeList&gt;&lt;/employeeList&gt;&quot;);
for (var i:int = 0; i &lt; 3; i++)
{
var newnode:XML = new XML();
newnode =
&lt;employee id={ids[i]}&gt;
&lt;last&gt;{names[i][0]}&lt;/last&gt;
&lt;first&gt;{names[i][1]}&lt;/first&gt;
&lt;/employee&gt;;
x = x.appendChild(newnode)
}
Vous pouvez affecter des propri&eacute;t&eacute;s et des attributs &agrave; un objet XML &agrave; l’aide de l’op&eacute;rateur =, comme dans l’exemple
suivant :
var x:XML =
&lt;employee&gt;
&lt;lastname&gt;Smith&lt;/lastname&gt;
&lt;/employee&gt;
x.firstname = &quot;Jean&quot;;
x.@id = &quot;239&quot;;
Ceci d&eacute;finit l’objet XML x de la fa&ccedil;on suivante :
&lt;employee id=&quot;239&quot;&gt;
&lt;lastname&gt;Smith&lt;/lastname&gt;
&lt;firstname&gt;Jean&lt;/firstname&gt;
&lt;/employee&gt;
Vous pouvez utiliser les op&eacute;rateurs + et += pour concat&eacute;ner des objets XMLList :
var x1:XML = &lt;a&gt;test1&lt;/a&gt;
var x2:XML = &lt;b&gt;test2&lt;/b&gt;
var xList:XMLList = x1 + x2;
xList += &lt;c&gt;test3&lt;/c&gt;
Ceci d&eacute;finit l’objet XMLList xList de la fa&ccedil;on suivante :
&lt;a&gt;test1&lt;/a&gt;
&lt;b&gt;test2&lt;/b&gt;
&lt;c&gt;test3&lt;/c&gt;
Derni&egrave;re mise &agrave; jour le 27/4/2013
109
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Parcours de structures XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’une des fonctions puissantes d’XML est sa capacit&eacute; &agrave; fournir des donn&eacute;es imbriqu&eacute;es, complexes, via une cha&icirc;ne
lin&eacute;aire de caract&egrave;res de texte. Lorsque vous chargez des donn&eacute;es dans un objet XML, ActionScript les analyse et charge
sa structure hi&eacute;rarchique en m&eacute;moire (ou envoie une erreur d’ex&eacute;cution si les donn&eacute;es XML ne sont pas form&eacute;es
correctement).
Les op&eacute;rateurs et les m&eacute;thodes des objets XML et XMLList permettent de parcourir ais&eacute;ment la structure des donn&eacute;es XML.
Utilisez l’op&eacute;rateur point (.) et l’op&eacute;rateur d’accesseur descendant (..) pour acc&eacute;der aux propri&eacute;t&eacute;s enfant d’un objet
XML. Consid&eacute;rez l’objet XML suivant :
var myXML:XML =
&lt;order&gt;
&lt;book ISBN=&quot;0942407296&quot;&gt;
&lt;title&gt;Baking Extravagant Pastries with Kumquats&lt;/title&gt;
&lt;author&gt;
&lt;lastName&gt;Contino&lt;/lastName&gt;
&lt;firstName&gt;Chuck&lt;/firstName&gt;
&lt;/author&gt;
&lt;pageCount&gt;238&lt;/pageCount&gt;
&lt;/book&gt;
&lt;book ISBN=&quot;0865436401&quot;&gt;
&lt;title&gt;Emu Care and Breeding&lt;/title&gt;
&lt;editor&gt;
&lt;lastName&gt;Case&lt;/lastName&gt;
&lt;firstName&gt;Justin&lt;/firstName&gt;
&lt;/editor&gt;
&lt;pageCount&gt;115&lt;/pageCount&gt;
&lt;/book&gt;
&lt;/order&gt;
L’objet myXML.book est un objet XMLList contenant des propri&eacute;t&eacute;s enfant de l’objet myXML appel&eacute;es book. Ces deux
objets XML correspondent aux deux propri&eacute;t&eacute;s book de l’objet myXML.
L’objet myXML..lastName est un objet XMLList contenant des propri&eacute;t&eacute;s descendantes appel&eacute;es lastName. Ces deux
objets XML correspondent aux deux propri&eacute;t&eacute;s lastName de l’objet myXML.
L’objet myXML.book.editor.lastName est un objet XMLList contenant tout enfant appel&eacute; lastName des enfants
appel&eacute;s editor des enfants appel&eacute;s book de l’objet myXML : en l’occurrence, un objet XMLList contenant un seul objet
XML (la propri&eacute;t&eacute; lastName dont la valeur correspond &agrave; &laquo; Case &raquo;).
Acc&egrave;s aux nœuds enfant et parent
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La m&eacute;thode parent() renvoie le parent d’un objet XML.
Vous pouvez utiliser les valeurs d’index ordinales d’une liste enfant pour acc&eacute;der &agrave; des objets enfant sp&eacute;cifiques. Par
exemple, consid&eacute;rez un objet XML myXML ayant deux propri&eacute;t&eacute;s enfant appel&eacute;es book. Chaque propri&eacute;t&eacute; enfant
appel&eacute;e book poss&egrave;de un num&eacute;ro d’index qui lui est associ&eacute; :
myXML.book[0]
myXML.book[1]
Derni&egrave;re mise &agrave; jour le 27/4/2013
110
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Pour acc&eacute;der &agrave; un petit-enfant sp&eacute;cifique, vous pouvez indiquer des num&eacute;ros d’index pour les noms de l’enfant et du
petit-enfant :
myXML.book[0].title[0]
Cependant, s’il n’existe qu’un seul enfant de x.book[0] nomm&eacute; title, vous pouvez omettre la r&eacute;f&eacute;rence d’index,
comme suit :
myXML.book[0].title
De m&ecirc;me, s’il n’existe qu’un seul enfant book de l’objet x et que cet objet enfant poss&egrave;de un seul objet title, vous pouvez
omettre les deux r&eacute;f&eacute;rences d’index, de la fa&ccedil;on suivante :
myXML.book.title
Vous pouvez utiliser la m&eacute;thode child() pour acc&eacute;der &agrave; des enfants dont le nom est bas&eacute; sur une variable ou une
expression, comme indiqu&eacute; dans l’exemple suivant :
var myXML:XML =
&lt;order&gt;
&lt;book&gt;
&lt;title&gt;Dictionary&lt;/title&gt;
&lt;/book&gt;
&lt;/order&gt;;
var childName:String = &quot;book&quot;;
trace(myXML.child(childName).title) // output: Dictionary
Acc&egrave;s &agrave; des attributs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Utilisez le symbole @ (l’op&eacute;rateur identifiant d’attribut) pour acc&eacute;der aux attributs dans un objet XML ou XMLList,
comme indiqu&eacute; dans le code suivant :
var employee:XML =
&lt;employee id=&quot;6401&quot; code=&quot;233&quot;&gt;
&lt;lastName&gt;Wu&lt;/lastName&gt;
&lt;firstName&gt;Erin&lt;/firstName&gt;
&lt;/employee&gt;;
trace(employee.@id); // 6401
Vous pouvez utiliser le symbole de caract&egrave;re g&eacute;n&eacute;rique * avec le symbole @ pour acc&eacute;der &agrave; tous les attributs d’un objet
XML ou XMLList, comme dans le code suivant :
var employee:XML =
&lt;employee id=&quot;6401&quot; code=&quot;233&quot;&gt;
&lt;lastName&gt;Wu&lt;/lastName&gt;
&lt;firstName&gt;Erin&lt;/firstName&gt;
&lt;/employee&gt;;
trace(employee.@*.toXMLString());
// 6401
// 233
Vous pouvez utiliser la m&eacute;thode attribute() ou attributes() pour acc&eacute;der &agrave; un attribut sp&eacute;cifique ou &agrave; tous les
attributs d’un objet XML ou XMLList, comme dans le code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
111
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
var employee:XML =
&lt;employee id=&quot;6401&quot; code=&quot;233&quot;&gt;
&lt;lastName&gt;Wu&lt;/lastName&gt;
&lt;firstName&gt;Erin&lt;/firstName&gt;
&lt;/employee&gt;;
trace(employee.attribute(&quot;id&quot;)); // 6401
trace(employee.attribute(&quot;*&quot;).toXMLString());
// 6401
// 233
trace(employee.attributes().toXMLString());
// 6401
// 233
Vous pouvez &eacute;galement utiliser la syntaxe suivante pour acc&eacute;der &agrave; des attributs, comme indiqu&eacute; dans l’exemple
suivant :
employee.attribute(&quot;id&quot;)
employee[&quot;@id&quot;]
employee.@[&quot;id&quot;]
Ils sont tous &eacute;quivalents &agrave; employee.@id. Cependant, la syntaxe employee.@id est pr&eacute;f&eacute;rable.
Filtrage par attribut ou valeur d’&eacute;l&eacute;ment
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser les op&eacute;rateurs parenth&egrave;ses— ( et ) —pour filtrer des &eacute;l&eacute;ments avec un nom d’&eacute;l&eacute;ment sp&eacute;cifique
ou une valeur d’attribut. Consid&eacute;rez l’objet XML suivant :
var x:XML =
&lt;employeeList&gt;
&lt;employee id=&quot;347&quot;&gt;
&lt;lastName&gt;Zmed&lt;/lastName&gt;
&lt;firstName&gt;Sue&lt;/firstName&gt;
&lt;position&gt;Data analyst&lt;/position&gt;
&lt;/employee&gt;
&lt;employee id=&quot;348&quot;&gt;
&lt;lastName&gt;McGee&lt;/lastName&gt;
&lt;firstName&gt;Chuck&lt;/firstName&gt;
&lt;position&gt;Jr. data analyst&lt;/position&gt;
&lt;/employee&gt;
&lt;/employeeList&gt;
Les expressions suivantes sont toutes valides :
•
x.employee.(lastName == &quot;McGee&quot;)—Il s’agit du deuxi&egrave;me nœud employee.
•
x.employee.(lastName == &quot;McGee&quot;).firstName—Il s’agit de la propri&eacute;t&eacute; firstName du deuxi&egrave;me nœud
employee.
•
x.employee.(lastName == &quot;McGee&quot;).@id—Il s’agit de la valeur de l’attribut id du deuxi&egrave;me nœud employee.
•
x.employee.(@id == 347)—Le premier nœud employee.
•
x.employee.(@id == 347).lastName—Il s’agit de la propri&eacute;t&eacute; lastName du premier nœud employee.
•
x.employee.(@id &gt; 300)—Il s’agit d’un XMLList avec deux propri&eacute;t&eacute;s employee.
•
x.employee.(position.toString().search(&quot;analyst&quot;) &gt; -1)—Il s’agit d’un XMLList avec deux propri&eacute;t&eacute;s
position.
Derni&egrave;re mise &agrave; jour le 27/4/2013
112
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Si vous tentez d’appliquer un filtre &agrave; des attributs ou des &eacute;l&eacute;ments qui n’existent pas, une exception est renvoy&eacute;e. Par
exemple, la derni&egrave;re ligne du code suivant g&eacute;n&egrave;re une erreur car il n’existe aucun attribut id dans le deuxi&egrave;me &eacute;l&eacute;ment p :
var doc:XML =
&lt;body&gt;
&lt;p id='123'&gt;Hello, &lt;b&gt;Bob&lt;/b&gt;.&lt;/p&gt;
&lt;p&gt;Hello.&lt;/p&gt;
&lt;/body&gt;;
trace(doc.p.(@id == '123'));
De m&ecirc;me, la derni&egrave;re ligne du code suivant g&eacute;n&egrave;re une erreur car il n’existe aucune propri&eacute;t&eacute; b du deuxi&egrave;me &eacute;l&eacute;ment p :
var doc:XML =
&lt;body&gt;
&lt;p id='123'&gt;Hello, &lt;b&gt;Bob&lt;/b&gt;.&lt;/p&gt;
&lt;p&gt;Hello.&lt;/p&gt;
&lt;/body&gt;;
trace(doc.p.(b == 'Bob'));
Pour &eacute;viter ces erreurs, vous pouvez identifier les propri&eacute;t&eacute;s ayant les &eacute;l&eacute;ments ou les attributs correspondants, &agrave; l’aide
des m&eacute;thodes attribute() et elements(), comme dans le code suivant :
var doc:XML =
&lt;body&gt;
&lt;p id='123'&gt;Hello, &lt;b&gt;Bob&lt;/b&gt;.&lt;/p&gt;
&lt;p&gt;Hello.&lt;/p&gt;
&lt;/body&gt;;
trace(doc.p.(attribute('id') == '123'));
trace(doc.p.(elements('b') == 'Bob'));
Vous pouvez &eacute;galement utiliser la m&eacute;thode hasOwnProperty(), comme dans le code suivant :
var doc:XML =
&lt;body&gt;
&lt;p id='123'&gt;Hello, &lt;b&gt;Bob&lt;/b&gt;.&lt;/p&gt;
&lt;p&gt;Hello.&lt;/p&gt;
&lt;/body&gt;;
trace(doc.p.(hasOwnProperty('@id') &amp;&amp; @id == '123'));
trace(doc.p.(hasOwnProperty('b') &amp;&amp; b == 'Bob'));
Utilisation de for..in et for each.. dans les instructions
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 propose les instructions for..in et for each..in pour permettre les it&eacute;rations dans les objets
XMLList. Par exemple, consid&eacute;rez l’objet XML suivant, myXML, et l’objet XMLList, myXML.item. L’objet XMLList,
myXML.item, est constitu&eacute; de deux nœuds item de l’objet XML.
Derni&egrave;re mise &agrave; jour le 27/4/2013
113
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
var myXML:XML =
&lt;order&gt;
&lt;item id='1' quantity='2'&gt;
&lt;menuName&gt;burger&lt;/menuName&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;item id='2' quantity='2'&gt;
&lt;menuName&gt;fries&lt;/menuName&gt;
&lt;price&gt;1.45&lt;/price&gt;
&lt;/item&gt;
&lt;/order&gt;;
La boucle for..in permet de proc&eacute;der &agrave; une it&eacute;ration sur un ensemble de noms de propri&eacute;t&eacute; dans un objet XMLList :
var total:Number = 0;
for (var pname:String in myXML.item)
{
total += myXML.item.@quantity[pname] * myXML.item.price[pname];
}
La boucle for each..in permet de proc&eacute;der &agrave; une it&eacute;ration dans les propri&eacute;t&eacute;s de l’objet XMLList :
var total2:Number = 0;
for each (var prop:XML in myXML.item)
{
total2 += prop.@quantity * prop.price;
}
Utilisation des espaces de noms XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les espaces de noms dans un objet (ou document) XML identifient le type de donn&eacute;es que contient l’objet. Par
exemple, lorsque vous envoyez et fournissez des donn&eacute;es XML &agrave; un service Web qui utilise le protocole de messagerie
SOAP, vous d&eacute;clarez l’espace de noms dans la balise de d&eacute;but de l’XML :
var message:XML =
&lt;soap:Envelope xmlns:soap=&quot;http://schemas.xmlsoap.org/soap/envelope/&quot;
soap:encodingStyle=&quot;http://schemas.xmlsoap.org/soap/encoding/&quot;&gt;
&lt;soap:Body xmlns:w=&quot;http://www.test.com/weather/&quot;&gt;
&lt;w:getWeatherResponse&gt;
&lt;w:tempurature &gt;78&lt;/w:tempurature&gt;
&lt;/w:getWeatherResponse&gt;
&lt;/soap:Body&gt;
&lt;/soap:Envelope&gt;;
L’espace de nom a un pr&eacute;fixe, soap, et un URI qui le d&eacute;finit, http://schemas.xmlsoap.org/soap/envelope/.
ActionScript 3.0 inclut la classe Namespace pour utiliser des espaces de noms XML. Pour l’objet XML de l’exemple
pr&eacute;c&eacute;dent, vous pouvez utiliser la classe Namespace comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
114
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
var soapNS:Namespace = message.namespace(&quot;soap&quot;);
trace(soapNS); // Output: http://schemas.xmlsoap.org/soap/envelope/
var wNS:Namespace = new Namespace(&quot;w&quot;, &quot;http://www.test.com/weather/&quot;);
message.addNamespace(wNS);
var encodingStyle:XMLList = message.@soapNS::encodingStyle;
var body:XMLList = message.soapNS::Body;
message.soapNS::Body.wNS::GetWeatherResponse.wNS::tempurature = &quot;78&quot;;
Les m&eacute;thodes suivantes de la classe XML permettent d’utiliser les espaces de nom : addNamespace(),
inScopeNamespaces(), localName(), name(), namespace(), namespaceDeclarations(), removeNamespace(),
setLocalName(), setName() et setNamespace().
La directive default xml namespace vous permet d’affecter un espace de nom par d&eacute;faut associ&eacute; aux objets XML.
Par exemple, dans l’exemple suivant, x1 et x2 partagent le m&ecirc;me espace de nom par d&eacute;faut :
var ns1:Namespace = new Namespace(&quot;http://www.example.com/namespaces/&quot;);
default xml namespace = ns1;
var x1:XML = &lt;test1 /&gt;;
var x2:XML = &lt;test2 /&gt;;
Conversion de type XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez convertir des objets XML et XMLList en valeurs String. De m&ecirc;me, vous pouvez convertir des cha&icirc;nes en
objets XML et XMLList. Sachez que toutes les valeurs d’attribut, les noms et les valeurs de texte XML sont des cha&icirc;nes.
Les sections suivantes d&eacute;crivent toutes ces formes de conversion de type XML.
Conversion d’objets XML et XMLList en cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les classes XML et XMLList contiennent les m&eacute;thodes toString() et toXMLString(). La m&eacute;thode toXMLString()
renvoie une cha&icirc;ne qui comprend la totalit&eacute; des balises, des attributs, des d&eacute;clarations d’espace de nom et du contenu
de l’objet XML. Pour les objets XML ayant un contenu complexe (&eacute;l&eacute;ments enfant), la m&eacute;thode toString() proc&egrave;de
exactement comme la m&eacute;thode toXMLString(). Pour les objets XML ayant un contenu simple (ceux qui contiennent
un seul &eacute;l&eacute;ment de texte), la m&eacute;thode toString() renvoie uniquement le contenu de texte de l’&eacute;l&eacute;ment, comme
indiqu&eacute; dans l’exemple suivant :
var myXML:XML =
&lt;order&gt;
&lt;item id='1' quantity='2'&gt;
&lt;menuName&gt;burger&lt;/menuName&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;order&gt;;
trace(myXML.item[0].menuName.toXMLString());
// &lt;menuName&gt;burger&lt;/menuName&gt;
trace(myXML.item[0].menuName.toString());
// burger
Derni&egrave;re mise &agrave; jour le 27/4/2013
115
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Si vous utilisez la m&eacute;thode trace() sans sp&eacute;cifier toString() ou toXMLString(), les donn&eacute;es sont converties &agrave; l’aide
de la m&eacute;thode toString() par d&eacute;faut, comme indiqu&eacute; dans le code suivant :
var myXML:XML =
&lt;order&gt;
&lt;item id='1' quantity='2'&gt;
&lt;menuName&gt;burger&lt;/menuName&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;order&gt;;
trace(myXML.item[0].menuName);
// burger
Lorsque vous utilisez la m&eacute;thode trace() pour d&eacute;boguer un code, vous pouvez utiliser la m&eacute;thode toXMLString()
de fa&ccedil;on &agrave; ce que la m&eacute;thode trace() g&eacute;n&egrave;re des donn&eacute;es plus compl&egrave;tes.
Conversion de cha&icirc;nes en objets XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser le constructeur new XML() pour cr&eacute;er un objet XML &agrave; partir d’une cha&icirc;ne, comme suit :
var x:XML = new XML(&quot;&lt;a&gt;test&lt;/a&gt;&quot;);
Si vous tentez de convertir une cha&icirc;ne en XML &agrave; partir d’une cha&icirc;ne qui repr&eacute;sente un XML non valide ou un XML
qui n’est pas form&eacute; correctement, une erreur d’ex&eacute;cution est renvoy&eacute;e, comme suit :
var x:XML = new XML(&quot;&lt;a&gt;test&quot;); // throws an error
Conversion de valeurs d’attribut, de noms et de valeurs de texte &agrave; partir de
cha&icirc;nes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Toutes les valeurs d’attribut XML, les noms et les valeurs de texte sont des types de donn&eacute;es String que vous pouvez
convertir en d’autres types de donn&eacute;es. Par exemple, le code suivant utilise la fonction Number() pour convertir des
valeurs de texte en nombres :
Derni&egrave;re mise &agrave; jour le 27/4/2013
116
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
var myXML:XML =
&lt;order&gt;
&lt;item&gt;
&lt;price&gt;3.95&lt;/price&gt;
&lt;/item&gt;
&lt;item&gt;
&lt;price&gt;1.00&lt;/price&gt;
&lt;/item&gt;
&lt;/order&gt;;
var total:XML = &lt;total&gt;0&lt;/total&gt;;
myXML.appendChild(total);
for each (var item:XML in myXML.item)
{
myXML.total.children()[0] = Number(myXML.total.children()[0])
+ Number(item.price.children()[0]);
}
trace(myXML.total); // 4.95;
Si ce code n’utilisait pas la fonction Number(), il interpr&eacute;terait l’op&eacute;rateur + comme l’op&eacute;rateur de concat&eacute;nation de
cha&icirc;ne, et la m&eacute;thode trace() de la derni&egrave;re ligne g&eacute;n&eacute;rerait les &eacute;l&eacute;ments suivants :
01.003.95
Lecture de documents XML externes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser la classe URLLoader pour charger des donn&eacute;es XML depuis une URL. Pour utiliser le code
suivant dans vos applications, remplacez la valeur XML_URL dans l’exemple par une URL valide :
import flash.events.Event;
import flash.net.URLLoader;
var myXML:XML = new XML();
var XML_URL:String = &quot;http://www.example.com/Sample3.xml&quot;;
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener(Event.COMPLETE, xmlLoaded);
function xmlLoaded(event:Event):void
{
myXML = XML(myLoader.data);
trace(&quot;Data loaded.&quot;);
}
Vous pouvez &eacute;galement utiliser la classe XMLSocket pour d&eacute;finir une connexion de socket XML asynchrone avec un
serveur. Pour plus d’informations, voir le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe
Flash.
Derni&egrave;re mise &agrave; jour le 27/4/2013
117
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Utilisation de XML dans un exemple ActionScript :
chargement de donn&eacute;es RSS depuis Internet
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple d’application RSSViewer pr&eacute;sente plusieurs fonctions d’utilisation d’XML dans ActionScript, notamment :
• Utilisation de m&eacute;thodes XML pour parcourir des donn&eacute;es XML sous la forme d’un flux RSS.
• Utilisation de m&eacute;thodes XML pour assembler des donn&eacute;es XML sous la forme HTML &agrave; utiliser dans un champ de
texte.
Le format RSS est largement utilis&eacute; pour diffuser des nouvelles via XML. Un fichier de donn&eacute;es RSS simple peut avoir
l’aspect suivant :
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;rss version=&quot;2.0&quot; xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;&gt;
&lt;channel&gt;
&lt;title&gt;Alaska - Weather&lt;/title&gt;
&lt;link&gt;http://www.nws.noaa.gov/alerts/ak.html&lt;/link&gt;
&lt;description&gt;Alaska - Watches, Warnings and Advisories&lt;/description&gt;
&lt;item&gt;
&lt;title&gt;
Short Term Forecast - Taiya Inlet, Klondike Highway (Alaska)
&lt;/title&gt;
&lt;link&gt;
http://www.nws.noaa.gov/alerts/ak.html#A18.AJKNK.1900
&lt;/link&gt;
&lt;description&gt;
Short Term Forecast Issued At: 2005-04-11T19:00:00
Expired At: 2005-04-12T01:00:00 Issuing Weather Forecast Office
Homepage: http://pajk.arh.noaa.gov
&lt;/description&gt;
&lt;/item&gt;
&lt;item&gt;
&lt;title&gt;
Short Term Forecast - Haines Borough (Alaska)
&lt;/title&gt;
&lt;link&gt;
http://www.nws.noaa.gov/alerts/ak.html#AKZ019.AJKNOWAJK.190000
&lt;/link&gt;
&lt;description&gt;
Short Term Forecast Issued At: 2005-04-11T19:00:00
Expired At: 2005-04-12T01:00:00 Issuing Weather Forecast Office
Homepage: http://pajk.arh.noaa.gov
&lt;/description&gt;
&lt;/item&gt;
&lt;/channel&gt;
&lt;/rss&gt;
L’application SimpleRSS lit les donn&eacute;es RSS depuis Internet, analyse les donn&eacute;es &agrave; la recherche de titres, de liens et de
descriptions et renvoie ces donn&eacute;es. La classe SimpleRSSUI fournit l’IU et appelle la classe SimpleRSS qui effectue le
traitement XML.
Derni&egrave;re mise &agrave; jour le 27/4/2013
118
119
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application RSSViewer se trouvent dans
le dossier Samples/RSSViewer. L’application se compose des fichiers suivants :
Fichier
Description
RSSViewer.mxml
Fichier d’application principal dans Flash (FLA) ou Flex (MXML).
ou
RSSViewer.fla
com/example/programmingas3/rssViewer/RSSParser.as
Une classe qui contient des m&eacute;thodes utilisant E4X pour parcourir des
donn&eacute;es (XML) RSS et g&eacute;n&eacute;rer une repr&eacute;sentation HTML correspondante.
RSSData/ak.rss
Un exemple de fichier RSS. Cette application est d&eacute;finie pour lire des donn&eacute;es
RSS &agrave; partir du Web, sur un flux RSS Flex h&eacute;berg&eacute; par Adobe. N&eacute;anmoins,
vous pouvez facilement modifier l’application pour lire des donn&eacute;es RSS
depuis ce document qui utilise un sch&eacute;ma l&eacute;g&egrave;rement diff&eacute;rent de celui du
flux RSS Flex.
Lecture et analyse de donn&eacute;es XML
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe RSSParser comprend une m&eacute;thode xmlLoaded() qui convertit les donn&eacute;es RSS d’entr&eacute;e, stock&eacute;es dans la
variable rssXML, en une cha&icirc;ne contenant une sortie format&eacute;e HTML, rssOutput.
Vers le d&eacute;but de la m&eacute;thode, le code d&eacute;finit l’espace de nom XML par d&eacute;faut si les donn&eacute;es RSS source comprennent
un espace de nom par d&eacute;faut :
if (rssXML.namespace(&quot;&quot;) != undefined)
{
default xml namespace = rssXML.namespace(&quot;&quot;);
}
Les lignes suivantes parcourent ensuite en boucle le contenu des donn&eacute;es XML source, en examinant chaque propri&eacute;t&eacute;
descendante appel&eacute;e item :
for each (var item:XML in rssXML..item)
{
var itemTitle:String = item.title.toString();
var itemDescription:String = item.description.toString();
var itemLink:String = item.link.toString();
outXML += buildItemHTML(itemTitle,
itemDescription,
itemLink);
}
Les trois premi&egrave;res lignes d&eacute;finissent simplement des variables de cha&icirc;ne pour repr&eacute;senter les propri&eacute;t&eacute;s de titre, de
description et de lien de la propri&eacute;t&eacute; item des donn&eacute;es XML. La ligne suivante appelle la m&eacute;thode buildItemHTML()
pour obtenir des donn&eacute;es HTML sous la forme d’un objet XMLList et utilise les trois nouvelles variables de cha&icirc;ne en
tant que param&egrave;tres.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de XML
Assemblage de donn&eacute;es XMLList
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les donn&eacute;es HTML (un objet XMLList) se pr&eacute;sentent comme suit :
&lt;b&gt;itemTitle&lt;/b&gt;
&lt;p&gt;
itemDescription
&lt;br /&gt;
&lt;a href=&quot;link&quot;&gt;
&lt;font color=&quot;#008000&quot;&gt;More...&lt;/font&gt;
&lt;/a&gt;
&lt;/p&gt;
Les premi&egrave;res lignes de la m&eacute;thode effacent l’espace de noms xml par d&eacute;faut :
default xml namespace = new Namespace();
La directive default xml namespace a un domaine de niveau bloc de fonction. Cela signifie que le domaine de cette
d&eacute;claration est la m&eacute;thode buildItemHTML().
Les lignes qui suivent assemblent l’objet XMLList en fonction des arguments de cha&icirc;ne transmis &agrave; la fonction :
var body:XMLList = new XMLList();
body += new XML(&quot;&lt;b&gt;&quot; + itemTitle + &quot;&lt;/b&gt;&quot;);
var p:XML = new XML(&quot;&lt;p&gt;&quot; + itemDescription + &quot;&lt;/p&gt;&quot;);
var link:XML = &lt;a&gt;&lt;/a&gt;;
link.@href = itemLink; // &lt;link href=&quot;itemLinkString&quot;&gt;&lt;/link&gt;
link.font.@color = &quot;#008000&quot;;
// &lt;font color=&quot;#008000&quot;&gt;&lt;/font&gt;&lt;/a&gt;
// 0x008000 = green
link.font = &quot;More...&quot;;
p.appendChild(&lt;br/&gt;);
p.appendChild(link);
body += p;
Cet objet XMLList repr&eacute;sente des donn&eacute;es de cha&icirc;ne adapt&eacute;es &agrave; un champ de texte HTML d’ActionScript.
La m&eacute;thode xmlLoaded() utilise la valeur de renvoi de la m&eacute;thode buildItemHTML() et la convertit en une cha&icirc;ne :
XML.prettyPrinting = false;
rssOutput = outXML.toXMLString();
Extraction du titre du flux RSS et envoi d’un &eacute;v&eacute;nement personnalis&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La m&eacute;thode xmlLoaded() d&eacute;finit une variable de cha&icirc;ne rssTitle en fonction des informations contenues dans les
donn&eacute;es XML RSS source :
rssTitle = rssXML.channel.title.toString();
Pour finir, la m&eacute;thode xmlLoaded() g&eacute;n&egrave;re un &eacute;v&eacute;nement qui notifie l’application que les donn&eacute;es sont analys&eacute;es et
disponibles :
dataWritten = new Event(&quot;dataWritten&quot;, true);
Derni&egrave;re mise &agrave; jour le 27/4/2013
120
121
Chapitre 7 : Utilisation de la fonctionnalit&eacute;
JSON native
ActionScript 3.0 fournit une API native permettant de coder et de d&eacute;coder des objets ActionScript &agrave; l’aide du format
JavaScript Object Notation (JSON). La classe JSON et les fonctions membres associ&eacute;es suivent la sp&eacute;cification ECMA262 5e &eacute;dition avec de l&eacute;g&egrave;res variations.
Le membre de la communaut&eacute; Todd Anderson fournit une comparaison entre l’API JSON native et la classe
JSON as3corelib tierce. Voir Working with Native JSON in Flash Player 11 (disponible en anglais uniquement).
Voir aussi
JSON
Pr&eacute;sentation de l’API JSON
L’API JSON ActionScript est constitu&eacute;e de la classe JSON et des fonctions membres toJSON() sur quelques classes
natives. Pour les applications n&eacute;cessitant un codage JSON personnalis&eacute; pour une classe, la structure ActionScript
propose diverses m&eacute;thodes permettant de remplacer le codage par d&eacute;faut.
La classe JSON g&egrave;re en interne l’importation et l’exportation des classes ActionScript qui ne fournissent pas de
membre toJSON(). Dans ces cas, la classe JSON traverse les propri&eacute;t&eacute;s publiques de chaque objet qu’elle d&eacute;tecte. Si un
objet contient d’autres objets, JSON parcourt les objets imbriqu&eacute;s et effectue la m&ecirc;me travers&eacute;e. Si un objet fournit une
m&eacute;thode toJSON(), JSON utilise cette m&eacute;thode personnalis&eacute;e plut&ocirc;t que son algorithme interne.
L’interface JSON est compos&eacute;e d’une m&eacute;thode d’encodage, stringify(), et d’une m&eacute;thode de d&eacute;codage, parse().
Chacune de ces m&eacute;thodes fournit un param&egrave;tre permettant d’ins&eacute;rer votre propre logique dans la proc&eacute;dure de codage
et de d&eacute;codage JSON. Pour stringify(), ce param&egrave;tre est appel&eacute; replacer ; pour parse(), il est appel&eacute; reviver.
Ces param&egrave;tres prennent une d&eacute;finition de fonction avec deux arguments &agrave; l’aide de la signature suivante :
function(k, v):*
M&eacute;thodes toJSON()
La signature des m&eacute;thodes toJSON() est
public function toJSON(k:String):*
JSON.stringify() appelle la m&eacute;thode toJSON(), si elle existe, pour chaque propri&eacute;t&eacute; publique qu’elle rencontre
lorsqu’elle traverse un objet. Une propri&eacute;t&eacute; consiste en une paire cl&eacute;-valeur. Lorsque stringify() appelle la m&eacute;thode
toJSON(), il transmet la cl&eacute;, k, de la propri&eacute;t&eacute; qu’il examine actuellement. Une impl&eacute;mentation toJSON() standard
&eacute;value chaque nom de propri&eacute;t&eacute; et renvoie l’encodage souhait&eacute; de sa valeur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
122
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
La m&eacute;thode toJSON() peut renvoyer tout type de valeur (identifi&eacute;e &agrave; l’aide du signe *) et pas uniquement une cha&icirc;ne.
Ce type de renvoi de variable permet &agrave; la m&eacute;thode toJSON() de renvoyer un objet, le cas &eacute;ch&eacute;ant. Par exemple, si une
propri&eacute;t&eacute; de votre classe personnalis&eacute;e contient un objet issu d’une autre biblioth&egrave;que tierce, vous pouvez renvoyer cet
objet d&egrave;s que la m&eacute;thode toJSON() d&eacute;tecte votre propri&eacute;t&eacute;. JSON parcourt alors l’objet tiers. Le processus de codage
est le suivant :
• Si la m&eacute;thode toJSON() renvoie un objet qui n’est pas &eacute;valu&eacute; par rapport &agrave; une cha&icirc;ne, stringify() parcourt cet
objet.
• Si la m&eacute;thode toJSON() renvoie une cha&icirc;ne, stringify() enveloppe la valeur dans une autre cha&icirc;ne, renvoie la
cha&icirc;ne envelopp&eacute;e et passe &agrave; la valeur suivante.
Dans de nombreux cas, il est pr&eacute;f&eacute;rable de renvoyer un objet plut&ocirc;t que de renvoyer une cha&icirc;ne JSON cr&eacute;&eacute;e par votre
application. Le renvoi d’un objet implique l’utilisation de l’algorithme de codage JSON et permet &agrave; JSON de se r&eacute;p&eacute;ter
dans les objets imbriqu&eacute;s.
La m&eacute;thode toJSON() n’est pas d&eacute;finie dans la classe Object ou dans la plupart des autres classes natives. Son absence
indique &agrave; JSON d’effectuer sa travers&eacute;e standard sur les propri&eacute;t&eacute;s publiques de l’objet. Si vous pr&eacute;f&eacute;rez, vus pouvez
&eacute;galement utiliser la m&eacute;thode toJSON() pour exposer les propri&eacute;t&eacute;s priv&eacute;es de votre objet.
Certaines classes natives posent n&eacute;anmoins des probl&egrave;mes que les biblioth&egrave;ques ActionScript sont incapables de
r&eacute;soudre efficacement dans tous les cas d’utilisation. Pour ces classes, ActionScript fournit une impl&eacute;mentation triviale
que le client peut &agrave; nouveau impl&eacute;menter selon ses besoins. Les classes qui fournissent des membres toJSON() triviaux
sont les suivantes :
• ByteArray
• Date
• Dictionary
• XML
Vous pouvez int&eacute;grer la classe ByteArray dans une sous-classe pour remplacer sa m&eacute;thode toJSON(), mais vous
pouvez aussi red&eacute;finir son prototype. Les classes Date et XML, qui sont d&eacute;clar&eacute;es comme &eacute;tant finales, vous obligent &agrave;
utiliser le prototype de classe pour red&eacute;finir toJSON(). La classe Dictionary est d&eacute;clar&eacute;e comme &eacute;tant dynamique, ce
qui vous donne la libert&eacute; de remplacer la m&eacute;thode toJSON().
D&eacute;finition du comportement JSON personnalis&eacute;
Vous disposez de plusieurs options pour impl&eacute;menter vos propres codage et d&eacute;codage JSON pour les classes natives :
• D&eacute;finir ou remplacer toJSON() sur la sous-classe personnalis&eacute;e d’une classe native non finale
• D&eacute;finir et red&eacute;finir toJSON() sur le prototype de la classe
• D&eacute;finir une propri&eacute;t&eacute; toJSON sur une classe dynamique
• Utiliser les param&egrave;tres JSON.stringify()
replacer et JSON.parser() reviver
Voir aussi
ECMA-262, 5e &eacute;dition
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
D&eacute;finition de la m&eacute;thode toJSON() sur le prototype d’une classe int&eacute;gr&eacute;e
L’impl&eacute;mentation JSON native dans ActionScript imite le m&eacute;canisme JSON ECMAScript d&eacute;fini dans ECMA-262, 5e
&eacute;dition. Etant donn&eacute; qu’ECMAScript ne prend pas en charge les classes, ActionScript d&eacute;finit le comportement de
JSON en termes de distribution bas&eacute;e sur les prototypes. Anc&ecirc;tres des classes ActionScript 3.0, les prototypes
permettent un h&eacute;ritage simul&eacute;, ainsi que les ajouts et red&eacute;finitions de membres.
ActionScript permet de d&eacute;finir ou de red&eacute;finir toJSON() sur le prototype d’une classe. Ce privil&egrave;ge s’&eacute;tend aux classes
d&eacute;clar&eacute;es comme &eacute;tant finales. Lorsque vous d&eacute;finissez toJSON() sur le prototype d’une classe, votre d&eacute;finition
s’applique &agrave; toutes les occurrences de cette classe dans le cadre de votre application. Par exemple, voici comment vous
pouvez d&eacute;finir une m&eacute;thode toJSON() sur le prototype de la classe MovieClip :
MovieClip.prototype.toJSON = function(k):* {
trace(&quot;prototype.toJSON() called.&quot;);
return &quot;toJSON&quot;;
}
Lorsque votre application appelle la m&eacute;thode stringify() sur une occurrence de MovieClip, stringify()renvoie
le r&eacute;sultat de votre m&eacute;thode toJSON() :
var mc:MovieClip = new MovieClip();
var js:String = JSON.stringify(mc); //&quot;prototype toJSON() called.&quot;
trace(&quot;js: &quot; + js); //&quot;js: toJSON&quot;
Vous pouvez en outre remplacer toJSON() dans les classes natives qui d&eacute;finissent cette m&eacute;thode. Par exemple, le code
suivant remplace Date.toJSON() :
Date.prototype.toJSON = function (k):* {
return &quot;any date format you like via toJSON: &quot;+
&quot;this.time:&quot;+this.time + &quot; this.hours:&quot;+this.hours;
}
var dt:Date = new Date();
trace(JSON.stringify(dt));
// &quot;any date format you like via toJSON: this.time:1317244361947 this.hours:14&quot;
D&eacute;finition ou remplacement de toJSON() au niveau de la classe
Les applications n’ont pas toujours besoin d’utiliser des prototypes pour red&eacute;finir toJSON(). Il est &eacute;galement possible
de d&eacute;finir toJSON() en tant que membre d’une sous-classe si la classe parente n’est pas marqu&eacute;e comme finale. Vous
pouvez par exemple &eacute;tendre la classe ByteArray et d&eacute;finir une fonction toJSON() publique :
Derni&egrave;re mise &agrave; jour le 27/4/2013
123
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
package {
import flash.utils.ByteArray;
public class MyByteArray extends ByteArray
{
public function MyByteArray() {
}
public function toJSON(s:String):*
{
return &quot;MyByteArray&quot;;
}
}
}
var ba:ByteArray = new ByteArray();
trace(JSON.stringify(ba)); //&quot;ByteArray&quot;
var mba:MyByteArray = new MyByteArray(); //&quot;MyByteArray&quot;
trace(JSON.stringify(mba)); //&quot;MyByteArray&quot;
Si un classe est dynamique, il est possible d’ajouter une propri&eacute;t&eacute; toJSON &agrave; un objet de cette classe et de lui attribuer
une fonction de la fa&ccedil;on suivante :
var d:Dictionary = new Dictionary();
trace(JSON.stringify((d))); // &quot;Dictionary&quot;
d.toJSON = function(){return {c : &quot;toJSON override.&quot;};} // overrides existing function
trace(JSON.stringify((d))); // {&quot;c&quot;:&quot;toJSON override.&quot;}
Vous pouvez remplacer, d&eacute;finir ou red&eacute;finir toJSON() sur n’importe quelle classe ActionScript. N&eacute;anmoins, la plupart
des classes ActionScript int&eacute;gr&eacute;es ne d&eacute;finissent pas toJSON(). La classe Object ne d&eacute;finit pas la m&eacute;thode toJSON dans
son prototype par d&eacute;faut ni ne la d&eacute;clare en tant que membre de classe. Seule une poign&eacute;e de classes natives d&eacute;finit la
m&eacute;thode comme fonction prototype. C’est pourquoi, dans la plupart des cas, vous ne pouvez pas remplacer toJSON()
de fa&ccedil;on traditionnelle.
Les classes natives qui ne d&eacute;finissent pas toJSON() sont s&eacute;rialis&eacute;es sur JSON par l’impl&eacute;mentation JSON interne. Dans
la mesure du possible, &eacute;vitez de remplacer cette fonctionnalit&eacute; int&eacute;gr&eacute;e. Si vous d&eacute;finissez un membre toJSON(), la
classe JSON utilise votre logique plut&ocirc;t que sa propre fonctionnalit&eacute;.
Utilisation du param&egrave;tre replacer de la m&eacute;thode JSON.stringify()
Il peut &ecirc;tre utile de remplacer toJSON() sur le prototype en vue de modifier le comportement d’exportation JSON
d’une classe dans une application. N&eacute;anmoins, votre logique d’exportation doit s’appliquer uniquement &agrave; des cas
sp&eacute;ciaux sous des conditions provisoires. Pour prendre en compte ces modifications &agrave; petite &eacute;chelle, vous pouvez
utiliser le param&egrave;tre replacer de la m&eacute;thode JSON.stringify().
La m&eacute;thode stringify() applique la fonction transmise via le param&egrave;tre replacer &agrave; l’objet en cours de codage. La
signature pour cette fonction est similaire &agrave; celle de toJSON() :
function (k,v):*
Derni&egrave;re mise &agrave; jour le 27/4/2013
124
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
Contrairement &agrave; la m&eacute;thode toJSON(), la fonction replacer requiert la valeur v, ainsi que la cl&eacute; k. Cette diff&eacute;rence
est n&eacute;cessaire, car la m&eacute;thode stringify() est d&eacute;finie sur l’objet JSON statique et non sur l’objet en cours de codage.
Lorsque la m&eacute;thode JSON.stringify() appelle replacer(k,v), elle traverse l’objet d’entr&eacute;e d’origine. Le param&egrave;tre
implicite this transmis &agrave; la fonction replacer fait r&eacute;f&eacute;rence &agrave; l’objet qui d&eacute;tient la cl&eacute; et la valeur. Etant donn&eacute; que
la m&eacute;thode JSON.stringify() ne modifie pas l’objet d’entr&eacute;e d’origine, cet objet reste inchang&eacute; dans le conteneur
actuellement travers&eacute;. Vous pouvez par cons&eacute;quent utiliser le code this[k] pour interroger la cl&eacute; sur l’objet d’origine.
Le param&egrave;tre v renferme la valeur que toJSON() convertit.
Tout comme toJSON(), la fonction replacer peut renvoyer tout type de valeur. Si replacer renvoie une cha&icirc;ne, le
moteur JSON convertit le contenu en s&eacute;quence d’&eacute;chappement entre guillemets et place ce contenu &eacute;galement entre
guillemets. Cette structure garantit que stringify() re&ccedil;oive un objet de cha&icirc;ne JSON valide qui reste une cha&icirc;ne dans
un prochain appel de JSON.parse().
Le code suivant utilise le param&egrave;tre replacer et le param&egrave;tre this implicite pour renvoyer les valeurs time et hours
d’un objet Date :
JSON.stringify(d, function (k,v):* {
return &quot;any date format you like via replacer: &quot;+
&quot;holder[k].time:&quot;+this[k].time + &quot; holder[k].hours:&quot;+this[k].hours;
});
Utilisation du param&egrave;tre reviver de la m&eacute;thode JSON.parse()
Le param&egrave;tre reviver de la m&eacute;thode JSON.parse() est l’oppos&eacute; de la fonction replacer : il convertit une cha&icirc;ne
JSON en objet ActionScript utilisable. L’argument reviver est une fonction qui prend deux param&egrave;tres et renvoie tout
type :
function (k,v):*
Dans cette fonction, k est une cl&eacute; et v est la valeur de k. Tout comme stringify(), parse() traverse les paires cl&eacute;valeur JSON et applique la fonctionreviver, si elle existe, &agrave; chaque paire. L’un des probl&egrave;mes potentiels est que la
classe JSON ne renvoie pas le nom de classe ActionScript d’un objet. Il peut par cons&eacute;quent &ecirc;tre difficile de savoir quel
type d’objet ranimer. Ce probl&egrave;me peut en outre s’av&eacute;rer particuli&egrave;rement d&eacute;licat lorsque les objets sont imbriqu&eacute;s. En
d&eacute;signant les fonctions toJSON(), replacer et reviver, vous pouvez trouver des moyens d’identifier les objets
ActionScript export&eacute;s tout en gardant intacts les objets d’origine.
Exemple d’analyse
L’exemple suivant illustre une strat&eacute;gie de ranimation d’objets analys&eacute;s &agrave; partir de cha&icirc;nes JSON. Cet exemple d&eacute;finit
deux classes : JSONGenericDictExample et JSONDictionaryExtnExample. La classe JSONGenericDictExample est
une classe Dictionary personnalis&eacute;e. Chaque enregistrement contient le nom et la date de naissance d’une personne,
ainsi qu’un ID unique. Chaque fois que le constructeur JSONGenericDictExample est appel&eacute;, il ajoute l’objet
nouvellement cr&eacute;&eacute; &agrave; un tableau statique interne avec un entier augmentant statiquement comme son ID. La classe
JSONGenericDictExample d&eacute;finit &eacute;galement une m&eacute;thode revive() qui extrait uniquement l’entier du membre id
le plus long. La m&eacute;thode revive() utilise cet entier pour rechercher et renvoyer l’objet ranimable ad&eacute;quat.
La classe JSONDictionaryExtnExample &eacute;tend la classe Dictionary ActionScript. Ses enregistrements n’ont pas de
structure d&eacute;finie et peuvent contenir toutes sortes de donn&eacute;es. Les donn&eacute;es sont attribu&eacute;es apr&egrave;s la construction de
l’objet JSONDictionaryExtnExample et non par les propri&eacute;t&eacute;s d&eacute;finies dans la classe. Les enregistrements de
JSONDictionaryExtnExample utilisent les objets JSONGenericDictExample comme cl&eacute;s. Lorsqu’un objet
JSONDictionaryExtnExample est ranim&eacute;, la fonction JSONGenericDictExample.revive() utilise l’ID associ&eacute; &agrave;
JSONDictionaryExtnExample pour r&eacute;cup&eacute;rer l’objet de cl&eacute; correct.
Derni&egrave;re mise &agrave; jour le 27/4/2013
125
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
Plus important encore, la m&eacute;thode JSONDictionaryExtnExample.toJSON() renvoie une cha&icirc;ne de marqueurs en
plus de l’objet JSONDictionaryExtnExample. Cette cha&icirc;ne identifie la sortie JSON comme appartenant &agrave; la classe
JSONDictionaryExtnExample. Ce marqueur indique clairement le type d’objet en cours de traitement lors de
l’ex&eacute;cution de JSON.parse().
package {
// Generic dictionary example:
public class JSONGenericDictExample {
static var revivableObjects = [];
static var nextId = 10000;
public var id;
public var dname:String;
public var birthday;
public function JSONGenericDictExample(name, birthday) {
revivableObjects[nextId] = this;
this.id
= &quot;id_class_JSONGenericDictExample_&quot; + nextId;
this.dname
= name;
this.birthday = birthday;
nextId++;
}
public function toString():String { return this.dname; }
public static function revive(id:String):JSONGenericDictExample {
var r:RegExp = /^id_class_JSONGenericDictExample_([0-9]*)$/;
var res = r.exec(id);
return JSONGenericDictExample.revivableObjects[res[1]];
}
}
}
package {
import flash.utils.Dictionary;
import flash.utils.ByteArray;
// For this extension of dictionary, we serialize the contents of the
// dictionary by using toJSON
public final class JSONDictionaryExtnExample extends Dictionary {
public function toJSON(k):* {
var contents = {};
for (var a in this) {
contents[a.id] = this[a];
}
// We also wrap the contents in an object so that we can
// identify it by looking for the marking property &quot;class E&quot;
// while in the midst of JSON.parse.
Derni&egrave;re mise &agrave; jour le 27/4/2013
126
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
return {&quot;class JSONDictionaryExtnExample&quot;: contents};
}
// This is just here for debugging and for illustration
public function toString():String {
var retval = &quot;[JSONDictionaryExtnExample &lt;&quot;;
var printed_any = false;
for (var k in this) {
retval += k.toString() + &quot;=&quot; +
&quot;[e=&quot;+this[k].earnings +
&quot;,v=&quot;+this[k].violations + &quot;], &quot;
printed_any = true;
}
if (printed_any)
retval = retval.substring(0, retval.length-2);
retval += &quot;&gt;]&quot;
return retval;
}
}
}
Lorsque le script d’ex&eacute;cution suivant appelle JSON.parse() sur un objet JSONDictionaryExtnExample, la fonction
reviver appelle JSONGenericDictExample.revive() sur chaque objet dans JSONDictionaryExtnExample. Cet
appel extrait l’ID qui repr&eacute;sente la cl&eacute; de l’objet. La fonction JSONGenericDictExample.revive() utilise cet ID pour
r&eacute;cup&eacute;rer et renvoyer l’objet JSONDictionaryExtnExample stock&eacute; &agrave; partir d’un tableau statique priv&eacute;.
import flash.display.MovieClip;
import flash.text.TextField;
var a_bob1:JSONGenericDictExample = new JSONGenericDictExample(&quot;Bob&quot;, new
Date(Date.parse(&quot;01/02/1934&quot;)));
var a_bob2:JSONGenericDictExample = new JSONGenericDictExample(&quot;Bob&quot;, new
Date(Date.parse(&quot;05/06/1978&quot;)));
var a_jen:JSONGenericDictExample = new JSONGenericDictExample(&quot;Jen&quot;, new
Date(Date.parse(&quot;09/09/1999&quot;)));
var e = new
e[a_bob1] =
e[a_bob2] =
e[a_jen] =
JSONDictionaryExtnExample();
{earnings: 40, violations: 2};
{earnings: 10, violations: 1};
{earnings: 25, violations: 3};
trace(&quot;JSON.stringify(e): &quot; + JSON.stringify(e)); // {&quot;class JSONDictionaryExtnExample&quot;:
//{&quot;id_class_JSONGenericDictExample_10001&quot;:
//{&quot;earnings&quot;:10,&quot;violations&quot;:1},
//&quot;id_class_JSONGenericDictExample_10002&quot;:
//{&quot;earnings&quot;:25,&quot;violations&quot;:3},
//&quot;id_class_JSONGenericDictExample_10000&quot;:
// {&quot;earnings&quot;:40,&quot;violations&quot;:2}}}
var e_result = JSON.stringify(e);
var e1 = new JSONDictionaryExtnExample();
var e2 = new JSONDictionaryExtnExample();
// It's somewhat easy to convert the string from JSON.stringify(e) back
// into a dictionary (turn it into an object via JSON.parse, then loop
// over that object's properties to construct a fresh dictionary).
Derni&egrave;re mise &agrave; jour le 27/4/2013
127
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la fonctionnalit&eacute; JSON native
//
//
//
//
//
//
//
//
//
//
//
//
//
//
The harder exercise is to handle situations where the dictionaries
themselves are nested in the object passed to JSON.stringify and
thus does not occur at the topmost level of the resulting string.
(For example: consider roundtripping something like
var tricky_array = [e1, [[4, e2, 6]], {table:e3}]
where e1, e2, e3 are all dictionaries. Furthermore, consider
dictionaries that contain references to dictionaries.)
This parsing (or at least some instances of it) can be done via
JSON.parse, but it's not necessarily trivial. Careful consideration
of how toJSON, replacer, and reviver can work together is
necessary.
var e_roundtrip =
JSON.parse(e_result,
// This is a reviver that is focused on rebuilding JSONDictionaryExtnExample objects.
function (k, v) {
if (&quot;class JSONDictionaryExtnExample&quot; in v) { // special marker tag;
//see JSONDictionaryExtnExample.toJSON().
var e = new JSONDictionaryExtnExample();
var contents = v[&quot;class JSONDictionaryExtnExample&quot;];
for (var i in contents) {
// Reviving JSONGenericDictExample objects from string
// identifiers is also special;
// see JSONGenericDictExample constructor and
// JSONGenericDictExample's revive() method.
e[JSONGenericDictExample.revive(i)] = contents[i];
}
return e;
} else {
return v;
}
});
trace(&quot;// == Here is an extended Dictionary that has been round-tripped ==&quot;);
trace(&quot;// == Note that we have revived Jen/Jan during the roundtrip.
==&quot;);
trace(&quot;e:
&quot; + e); //[JSONDictionaryExtnExample &lt;Bob=[e=40,v=2], Bob=[e=10,v=1],
//Jen=[e=25,v=3]&gt;]
trace(&quot;e_roundtrip: &quot; + e_roundtrip); //[JSONDictionaryExtnExample &lt;Bob=[e=40,v=2],
//Bob=[e=10,v=1], Jen=[e=25,v=3]&gt;]
trace(&quot;Is e_roundtrip a JSONDictionaryExtnExample? &quot; + (e_roundtrip is
JSONDictionaryExtnExample)); //true
trace(&quot;Name change: Jen is now Jan&quot;);
a_jen.dname = &quot;Jan&quot;
trace(&quot;e:
&quot; + e); //[JSONDictionaryExtnExample &lt;Bob=[e=40,v=2], Bob=[e=10,v=1],
//Jan=[e=25,v=3]&gt;]
trace(&quot;e_roundtrip: &quot; + e_roundtrip); //[JSONDictionaryExtnExample &lt;Bob=[e=40,v=2],
//Bob=[e=10,v=1], Jan=[e=25,v=3]&gt;]
Derni&egrave;re mise &agrave; jour le 27/4/2013
128
129
Chapitre 8 : Gestion des &eacute;v&eacute;nements
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un syst&egrave;me de gestion des &eacute;v&eacute;nements permet au programmeur de r&eacute;pondre aux actions de l’utilisateur et aux
&eacute;v&eacute;nements syst&egrave;me de mani&egrave;re pratique. Le mod&egrave;le d’&eacute;v&eacute;nement ActionScript 3.0 n’est pas seulement pratique, il est
conforme aux normes en vigueur et bien int&eacute;gr&eacute; &agrave; la liste d’affichage. Ce mod&egrave;le repose sur la sp&eacute;cification
d’&eacute;v&eacute;nements Document Object Model (DOM) de niveau 3, une architecture de gestion d’&eacute;v&eacute;nements normalis&eacute;e. Il
constitue donc pour les programmeurs ActionScript un outil puissant et parfaitement intuitif.
Le syst&egrave;me de gestion d’&eacute;v&eacute;nements ActionScript 3.0 assure une interaction &eacute;troite avec la liste d’affichage. Pour
comprendre les principes de base de la liste d’affichage, voir &laquo; Programmation de l’affichage &raquo; &agrave; la page 156.
Voir aussi
Package flash.events
Sp&eacute;cification d’&eacute;v&eacute;nements Document Object Model (DOM) niveau 3
Principes de base de la gestion des &eacute;v&eacute;nements
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez concevoir un &eacute;v&eacute;nement comme tout type d’action qui se produit dans votre fichier SWF et qui pr&eacute;sente
un int&eacute;r&ecirc;t pour vous en tant que programmeur. Par exemple, la plupart des fichiers SWF prennent en charge une
certaine forme d’interaction, qu’il s’agisse d’une action aussi simple qu’un clic avec la souris ou d’une op&eacute;ration plus
complexe, telle que l’acceptation et le traitement des donn&eacute;es saisies dans un formulaire. Toute interaction de ce type
dans le fichier SWF est consid&eacute;r&eacute;e comme un &eacute;v&eacute;nement. Des &eacute;v&eacute;nements peuvent &eacute;galement se produire sans aucun
interaction directe de l’utilisateur, par exemple lorsque le chargement des donn&eacute;es depuis un serveur se termine ou
qu’une cam&eacute;ra reli&eacute;e devient active.
Dans ActionScript 3.0, tout &eacute;v&eacute;nement est repr&eacute;sent&eacute; par un objet &eacute;v&eacute;nement, qui correspond &agrave; une occurrence de la
classe Event ou de l’une de ses sous-classes. Le r&ocirc;le d’un objet &eacute;v&eacute;nement est non seulement de stocker des
informations relatives &agrave; un &eacute;v&eacute;nement sp&eacute;cifique, mais aussi de contenir des m&eacute;thodes qui favorisent la manipulation
de cet objet. Par exemple, lorsque Flash Player ou AIR d&eacute;tecte un clic de la souris, il cr&eacute;e un objet &eacute;v&eacute;nement (une
occurrence de la classe MouseEvent) qui repr&eacute;sente cet &eacute;v&eacute;nement particulier.
Apr&egrave;s la cr&eacute;ation d’un objet &eacute;v&eacute;nement, Flash Player ou AIR le distribue, ce qui signifie que l’objet &eacute;v&eacute;nement est
transmis &agrave; l’objet repr&eacute;sentant la cible de l’&eacute;v&eacute;nement. L’objet qui doit recevoir l’objet &eacute;v&eacute;nement ainsi distribu&eacute; est
appel&eacute; cible d’&eacute;v&eacute;nement. Par exemple, lorsqu’une cam&eacute;ra reli&eacute;e devient active, Flash Player distribue un objet
&eacute;v&eacute;nement directement &agrave; la cible de l’&eacute;v&eacute;nement, dans ce cas l’objet repr&eacute;sentant la cam&eacute;ra. Toutefois, si la cible
d’&eacute;v&eacute;nement se trouve dans la liste d’affichage, l’objet &eacute;v&eacute;nement est transmis tout au long de la hi&eacute;rarchie de la liste
d’affichage jusqu’&agrave; ce qu’il atteigne la cible en question. Dans certains cas, l’objet &eacute;v&eacute;nement se &laquo; propage &raquo; ensuite vers
le haut de la hi&eacute;rarchie de la liste d’affichage, selon le m&ecirc;me cheminement. Cette travers&eacute;e de la hi&eacute;rarchie de la liste
d’affichage correspond au flux d’&eacute;v&eacute;nements.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Vous pouvez &laquo; &eacute;couter &raquo; les objets &eacute;v&eacute;nement de votre code gr&acirc;ce aux &eacute;couteurs d’&eacute;v&eacute;nement. Les &eacute;couteurs
d’&eacute;v&eacute;nement sont des fonctions ou des m&eacute;thodes que vous &eacute;crivez pour r&eacute;pondre aux diff&eacute;rents &eacute;v&eacute;nements. Pour
garantir que le programme r&eacute;agisse aux &eacute;v&eacute;nements, vous devez ajouter des &eacute;couteurs d’&eacute;v&eacute;nement soit &agrave; la cible
d’&eacute;v&eacute;nement, soit &agrave; l’un des objets de la liste d’affichage qui font partie du flux d’&eacute;v&eacute;nements de l’objet &eacute;v&eacute;nement.
Chaque fois que vous &eacute;crivez un code d’&eacute;couteur d’&eacute;v&eacute;nement, il suit cette structure de base (les &eacute;l&eacute;ments en gras sont
des espaces r&eacute;serv&eacute;s que vous rempliriez pour votre cas particulier) :
function eventResponse(eventObject:EventType):void
{
// Actions performed in response to the event go here.
}
eventTarget.addEventListener(EventType.EVENT_NAME, eventResponse);
Ce code a un double r&ocirc;le. Tout d’abord, il d&eacute;finit une fonction, qui est une mani&egrave;re de sp&eacute;cifier les actions &agrave; ex&eacute;cuter
en r&eacute;ponse &agrave; l’&eacute;v&eacute;nement. Ensuite, il appelle la m&eacute;thode addEventListener() de l’objet source, &laquo; inscrivant &raquo; ainsi
la fonction aupr&egrave;s de l’&eacute;v&eacute;nement sp&eacute;cifi&eacute; de sorte que lorsque l’&eacute;v&eacute;nement survient, les actions de la fonction ont lieu.
Lorsque l’&eacute;v&eacute;nement se produit, la cible de l’&eacute;v&eacute;nement v&eacute;rifie sa liste de toutes les fonctions et m&eacute;thodes enregistr&eacute;es
en tant qu’&eacute;couteurs d’&eacute;v&eacute;nement. Elle appelle ensuite chacune d’elles, transmettant l’objet &eacute;v&eacute;nement &agrave; titre de
param&egrave;tre.
Vous devez apporter quatre modifications &agrave; ce code pour cr&eacute;er votre propre &eacute;couteur d’&eacute;v&eacute;nement. Premi&egrave;rement,
vous devez remplacer le nom de la fonction par celui que vous souhaitez utiliser (ceci doit &ecirc;tre modifi&eacute; &agrave; deux endroits,
l&agrave; o&ugrave; le code indique eventResponse). Deuxi&egrave;mement, vous devez sp&eacute;cifier le nom de la classe de l’objet &eacute;v&eacute;nement
qui est envoy&eacute; par l’&eacute;v&eacute;nement que vous souhaitez &eacute;couter (EventType dans le code), et vous devez indiquer la
constante pour l’&eacute;v&eacute;nement en question (EVENT_NAME dans la liste). Troisi&egrave;mement, vous devez appeler la
m&eacute;thode addEventListener() sur l’objet qui enverra l’&eacute;v&eacute;nement (eventTarget dans ce code). Vous pouvez
&eacute;galement modifier le nom de la variable utilis&eacute;e comme param&egrave;tre de la fonction (eventObject dans ce code).
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants utilis&eacute;s dans le cadre de la r&eacute;daction de routines de
gestion des &eacute;v&eacute;nements :
Propagation Certains &eacute;v&eacute;nements donnent lieu &agrave; une propagation afin de permettre &agrave; un objet d’affichage parent de
r&eacute;agir aux &eacute;v&eacute;nements distribu&eacute;s par ses enfants.
Phase de propagation Partie du flux d’&eacute;v&eacute;nements dans laquelle un &eacute;v&eacute;nement est propag&eacute; jusqu’aux objets
d’affichage parent. La phase de propagation suit la phase de capture et la phase cible.
Phase de capture Partie du flux d’&eacute;v&eacute;nements dans laquelle un &eacute;v&eacute;nement se propage de la cible la plus g&eacute;n&eacute;rale vers
l’objet cible le plus sp&eacute;cifique. La phase de capture pr&eacute;c&egrave;de la phase cible et la phase de propagation.
Comportement par d&eacute;faut Certains &eacute;v&eacute;nements sont li&eacute;s &agrave; un comportement appel&eacute; comportement par d&eacute;faut. Par
exemple, lorsqu’un utilisateur tape du texte dans un champ, un &eacute;v&eacute;nement de saisie de texte est d&eacute;clench&eacute;. Le
comportement par d&eacute;faut de cet &eacute;v&eacute;nement consiste &agrave; afficher le caract&egrave;re tap&eacute; dans le champ de texte—mais vous
pouvez annuler ce comportement par d&eacute;faut (si vous ne souhaitez pas afficher le caract&egrave;re tap&eacute;, par exemple).
Distribuer Indiquer &agrave; des &eacute;couteurs d’&eacute;v&eacute;nements qu’un &eacute;v&eacute;nement a eu lieu.
Ev&eacute;nement Op&eacute;ration subie par un objet et que ce dernier peut signaler &agrave; d’autres objets.
Flux d’&eacute;v&eacute;nements Lorsque des &eacute;v&eacute;nements concernent un objet de la liste d’affichage (un objet affich&eacute; &agrave; l’&eacute;cran), tous
les objets qui contiennent cet objet sont inform&eacute;s de l’&eacute;v&eacute;nement et avertissent &agrave; leur tour les &eacute;couteurs d’&eacute;v&eacute;nements
correspondants. Ce processus commence avec la sc&egrave;ne et se poursuit &agrave; travers la liste d’affichage jusqu’&agrave; l’objet r&eacute;el o&ugrave;
s’est produit l’&eacute;v&eacute;nement. Il recommence ensuite avec la sc&egrave;ne. Ce processus est appel&eacute; flux d’&eacute;v&eacute;nements.
Derni&egrave;re mise &agrave; jour le 27/4/2013
130
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Objet &eacute;v&eacute;nement Objet contenant des informations sur l’occurrence d’un &eacute;v&eacute;nement particulier, qui est envoy&eacute; &agrave; tous
les &eacute;couteurs lorsqu’un &eacute;v&eacute;nement est distribu&eacute;.
Cible d’&eacute;v&eacute;nement Objet qui envoie un &eacute;v&eacute;nement. Par exemple, si l’utilisateur clique sur un bouton situ&eacute; dans un
Sprite se trouvant dans la sc&egrave;ne, tous ces objets envoient des &eacute;v&eacute;nements mais c’est au niveau de la cible d’&eacute;v&eacute;nement
que se produit l’&eacute;v&eacute;nement (le bouton cliqu&eacute;, dans ce cas).
Ecouteur Objet ou fonction qui s’est enregistr&eacute; aupr&egrave;s d’un objet pour indiquer qu’il doit &ecirc;tre averti lorsqu’un
&eacute;v&eacute;nement sp&eacute;cifique se produit.
Phase cible Stade du flux d’&eacute;v&eacute;nements o&ugrave; un &eacute;v&eacute;nement atteint la cible la plus sp&eacute;cifique possible. La phase cible se
produit entre la phase de capture et la phase de propagation.
Variation de la gestion d’&eacute;v&eacute;nements dans
ActionScript 3.0 par rapport aux versions ant&eacute;rieures
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
En ce qui concerne la gestion des &eacute;v&eacute;nements, la diff&eacute;rence la plus &eacute;vidente entre ActionScript 3.0 et les versions
ant&eacute;rieures est qu’ActionScript 3.0 comprend un seul syst&egrave;me de gestion des &eacute;v&eacute;nements alors que les anciennes
versions d’ActionScript en comptent plusieurs. Cette section commence par une pr&eacute;sentation g&eacute;n&eacute;rale du
fonctionnement de la gestion des &eacute;v&eacute;nements dans les versions pr&eacute;c&eacute;dentes, puis &eacute;tudie les nouveaut&eacute;s qu’apporte
ActionScript 3.0 dans ce domaine.
Gestion des &eacute;v&eacute;nements dans les versions pr&eacute;c&eacute;dentes d’ActionScript
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Ant&eacute;rieurement &agrave; ActionScript 3.0, le langage ActionScript fournissait plusieurs m&eacute;thodes de gestion des &eacute;v&eacute;nements :
• Les gestionnaires d’&eacute;v&eacute;nement on(), qui peuvent se placer directement sur des occurrences Button et MovieClip
• Les gestionnaires d’&eacute;v&eacute;nement onClipEvent(), qui peuvent se placer directement sur des occurrences MovieClip
• Des propri&eacute;t&eacute;s de fonction de rappel, telles que XML.onload et Camera.onActivity
• Des &eacute;couteurs d’&eacute;v&eacute;nement, que vous pouvez enregistrer &agrave; l’aide de la m&eacute;thode addListener()
• La classe UIEventDispatcher, qui impl&eacute;mentait partiellement le mod&egrave;le d’&eacute;v&eacute;nements DOM
Chacun de ces m&eacute;canismes pr&eacute;sente des avantages et des inconv&eacute;nients. Les gestionnaires on() et onClipEvent()
sont simples d’utilisation, mais compliquent la maintenance des projets car il peut s’av&eacute;rer difficile de localiser le code
plac&eacute; directement sur les boutons ou les clips. Les fonctions de rappel sont &eacute;galement faciles &agrave; impl&eacute;menter, mais
imposent une limite d’une seule fonction de rappel par &eacute;v&eacute;nement. L’impl&eacute;mentation des &eacute;couteurs d’&eacute;v&eacute;nement est
plus complexe : ils n&eacute;cessitent non seulement la cr&eacute;ation d’un objet et d’une fonction d’&eacute;couteur, mais aussi
l’enregistrement de l’&eacute;couteur aupr&egrave;s de l’objet qui g&eacute;n&egrave;re l’&eacute;v&eacute;nement. Bien qu’elle accroisse le temps syst&egrave;me
n&eacute;cessaire, cette solution vous permet de cr&eacute;er plusieurs objets &eacute;couteur et de tous les enregistrer pour le m&ecirc;me
&eacute;v&eacute;nement.
Dans ActionScript 2.0, le d&eacute;veloppement des composants engendrait un mod&egrave;le d’&eacute;v&eacute;nements encore diff&eacute;rent. Ce
nouveau mod&egrave;le, caract&eacute;ris&eacute; par la classe UIEventDispatcher, reposait sur un sous-ensemble de la sp&eacute;cification
d’&eacute;v&eacute;nements DOM. Ainsi, pour les d&eacute;veloppeurs accoutum&eacute;s &agrave; la gestion des &eacute;v&eacute;nements de composant, le passage
au nouveau mod&egrave;le d’&eacute;v&eacute;nements d’ActionScript 3.0 se fera sans trop de difficult&eacute;s.
Derni&egrave;re mise &agrave; jour le 27/4/2013
131
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Malheureusement, si l’on constate des recoupements entre les divers mod&egrave;les d’&eacute;v&eacute;nements, il existe aussi des
diff&eacute;rences. Par exemple, dans ActionScript 2.0, certaines propri&eacute;t&eacute;s, telles que TextField.onChanged, peuvent
s’utiliser soit comme fonction de rappel, soit comme &eacute;couteur d’&eacute;v&eacute;nement. Toutefois, la syntaxe qui permet
d’enregistrer les objets &eacute;couteurs varie selon que vous utilisez l’une des six classes qui prennent en charge les &eacute;couteurs
ou la classe UIEventDispatcher. Pour les classes Key, Mouse, MovieClipLoader, Selection, Stage et TextField, vous
utilisez la m&eacute;thode addListener(), mais pour la gestion des &eacute;v&eacute;nements de composant, vous utilisez une m&eacute;thode
appel&eacute;e addEventListener().
La multiplicit&eacute; des mod&egrave;les de gestion d’&eacute;v&eacute;nements a fait na&icirc;tre une autre complexit&eacute; : l’&eacute;tendue de la fonction de
gestionnaire d’&eacute;v&eacute;nement variait largement en fonction du m&eacute;canisme utilis&eacute;. En d’autres termes, la signification du
mot-cl&eacute; this n’&eacute;tait pas coh&eacute;rente sur l’ensemble des syst&egrave;mes de gestion d’&eacute;v&eacute;nements.
Gestion d’&eacute;v&eacute;nements dans ActionScript 3.0
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 utilise pour la premi&egrave;re fois un mod&egrave;le de gestion d’&eacute;v&eacute;nements qui vient remplacer les nombreux
m&eacute;canismes qui existaient dans les pr&eacute;c&eacute;dentes versions du langage. Le nouveau mod&egrave;le d’&eacute;v&eacute;nements repose sur la
sp&eacute;cification d’&eacute;v&eacute;nements de niveau 3 DOM (Document Object Model). Bien que le format de fichier SWF ne suive
pas sp&eacute;cifiquement la norme DOM, il existe suffisamment de similitudes entre la liste d’affichage et la structure du
DOM pour permettre l’impl&eacute;mentation de ce mod&egrave;le d’&eacute;v&eacute;nements. Un objet de la liste d’affichage est semblable &agrave; un
noeud de la structure hi&eacute;rarchique du DOM ; dans ce chapitre, les termes objet de liste d’affichage et noeud sont
d’ailleurs utilis&eacute;s de fa&ccedil;on interchangeable.
L’impl&eacute;mentation du mod&egrave;le d’&eacute;v&eacute;nements DOM dans Flash Player et AIR comprend un concept appel&eacute;
&laquo; comportements par d&eacute;faut &raquo;. Un comportement par d&eacute;faut est une action que Flash Player ou AIR effectue comme
cons&eacute;quence normale de certains &eacute;v&eacute;nements.
Comportements par d&eacute;faut
Les d&eacute;veloppeurs se chargent normalement d’&eacute;crire le code qui permet de r&eacute;pondre aux &eacute;v&eacute;nements. Dans certains
cas, cependant, un comportement est si couramment associ&eacute; &agrave; un &eacute;v&eacute;nement que Flash Player ou AIR l’ex&eacute;cute
automatiquement, sauf si le d&eacute;veloppeur ajoute du code pour annuler son ex&eacute;cution. Comme Flash Player ou AIR se
livre automatiquement &agrave; cette op&eacute;ration, on parle de comportements par d&eacute;faut.
Par exemple, lorsqu’un utilisateur entre du texte dans un objet TextField, il est si courant de voir s’afficher la saisie dans
l’objet TextField en question que ce comportement est pr&eacute;d&eacute;fini dans Flash Player ou AIR. Si vous ne souhaitez pas
conserver ce comportement par d&eacute;faut, vous pouvez l’annuler &agrave; l’aide du syst&egrave;me de gestion des &eacute;v&eacute;nements.
Lorsqu’un utilisateur entre du texte dans un objet TextField, Flash Player ou AIR cr&eacute;e une occurrence de la classe
TextEvent afin de repr&eacute;senter cette saisie. Pour &eacute;viter que Flash Player ou AIR n’affiche le texte dans l’objet TextField,
vous devez acc&eacute;der &agrave; cette occurrence de TextEvent sp&eacute;cifique et appeler sa m&eacute;thode preventDefault().
Certains comportements par d&eacute;faut ne peuvent pas &ecirc;tre &eacute;vit&eacute;s. Par exemple, Flash Player et AIR g&eacute;n&egrave;rent un objet
MouseEvent lorsque l’utilisateur double-clique sur un mot dans un objet TextField. Le comportement par d&eacute;faut, qui
ne peut &ecirc;tre &eacute;vit&eacute;, consiste &agrave; mettre en &eacute;vidence le mot situ&eacute; sous le curseur.
De nombreux types d’objets &eacute;v&eacute;nement ne sont associ&eacute;s &agrave; aucun comportement par d&eacute;faut. Par exemple, l’objet
&eacute;v&eacute;nement Connect, que Flash Player distribue lorsqu’une connexion r&eacute;seau est &eacute;tablie, n’est associ&eacute; &agrave; aucun
comportement par d&eacute;faut. La documentation de l’API relative &agrave; la classe Event et ses sous-classes fait l’inventaire de
chaque type d’&eacute;v&eacute;nement, d&eacute;crit le comportement par d&eacute;faut qui lui est &eacute;ventuellement associ&eacute; et indique si ce dernier
peut &ecirc;tre &eacute;vit&eacute;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
132
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Il est important de comprendre que les comportements par d&eacute;faut sont uniquement associ&eacute;s &agrave; des objets &eacute;v&eacute;nements
distribu&eacute;s par Flash Player ou AIR ; il n’en existe aucun pour les objets &eacute;v&eacute;nements distribu&eacute;s via ActionScript par
programmation. Par exemple, vous pouvez utiliser les m&eacute;thodes de la classe EventDispatcher pour distribuer un objet
&eacute;v&eacute;nement du type textInput, mais cet objet ne sera associ&eacute; &agrave; aucun comportement par d&eacute;faut. En d’autres termes,
Flash Player et AIR n’affichent aucun caract&egrave;re dans un objet TextField en r&eacute;ponse &agrave; un &eacute;v&eacute;nement textInput que
vous avez distribu&eacute; par programmation.
Nouveaut&eacute;s des &eacute;couteurs d’&eacute;v&eacute;nement dans ActionScript 3.0
Pour les d&eacute;veloppeurs qui connaissent bien la m&eacute;thode ActionScript 2.0 addListener(), il peut &ecirc;tre utile de souligner
les diff&eacute;rences entre le mod&egrave;le d’&eacute;couteur d’&eacute;v&eacute;nement d’ActionScript 2.0 et le mod&egrave;le d’&eacute;v&eacute;nements
d’ActionScript 3.0. La liste ci-apr&egrave;s d&eacute;crit les principales diff&eacute;rences entre ces deux mod&egrave;les d’&eacute;v&eacute;nements :
• Pour ajouter des &eacute;couteurs d’&eacute;v&eacute;nement dans ActionScript 2.0, vous utilisez, selon le cas, addListener() ou
addEventListener(). Dans ActionScript 3.0, il faut utiliser addEventListener() dans tous les cas.
• ActionScript 2.0 ne propose aucun flux d’&eacute;v&eacute;nements dans ActionScript 2.0, ce qui signifie que la m&eacute;thode
addListener() peut uniquement &ecirc;tre appel&eacute;e sur l’objet qui &eacute;met l’&eacute;v&eacute;nement. Dans ActionScript 3.0, la m&eacute;thode
addEventListener() peut &ecirc;tre appel&eacute;e sur tout objet faisant partie du flux d’&eacute;v&eacute;nements.
• Dans ActionScript 2.0, les &eacute;couteurs d’&eacute;v&eacute;nement peuvent &ecirc;tre des fonctions, des m&eacute;thodes ou des objets, alors que
dans ActionScript 3.0, seules les fonctions et les m&eacute;thodes peuvent agir comme &eacute;couteurs d’&eacute;v&eacute;nement.
Flux d’&eacute;v&eacute;nements
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Flash Player ou AIR distribue des objets &eacute;v&eacute;nements d&egrave;s que survient un &eacute;v&eacute;nement. Si la cible d’&eacute;v&eacute;nement ne se
trouve pas dans la liste d’affichage, Flash Player ou AIR distribue l’objet &eacute;v&eacute;nement directement &agrave; la cible. Par exemple,
Flash Player distribue l’objet &eacute;v&eacute;nement Progress directement &agrave; un objet URLStream. Cependant, si la cible
d’&eacute;v&eacute;nement se trouve dans la liste d’affichage, Flash Player distribue l’objet &eacute;v&eacute;nement &agrave; la liste d’affichage, dans
laquelle l’objet chemine jusqu’&agrave; atteindre la cible d’&eacute;v&eacute;nement.
Le flux d’&eacute;v&eacute;nements repr&eacute;sente le parcours que suivra un objet &eacute;v&eacute;nement dans la liste d’affichage. Cette liste
s’organise de mani&egrave;re hi&eacute;rarchique, pour constituer une arborescence. Au sommet de la liste d’affichage se trouve la
sc&egrave;ne, un conteneur d’objet d’affichage sp&eacute;cial qui lui sert de racine. La Sc&egrave;ne, repr&eacute;sent&eacute;e par la classe
flash.display.Stage, est uniquement accessible via un objet d’affichage. Chaque objet d’affichage pr&eacute;sente une propri&eacute;t&eacute;
appel&eacute;e stage, qui renvoie &agrave; la sc&egrave;ne de cette application.
Lorsque Flash Player ou AIR distribue un objet d’&eacute;v&eacute;nement pour un &eacute;v&eacute;nement associ&eacute; &agrave; une liste d’affichage, celuici effectue un aller-retour entre la Sc&egrave;ne et le nœud cible. Selon la d&eacute;finition de la sp&eacute;cification d’&eacute;v&eacute;nements DOM, le
nœud cible est le nœud qui repr&eacute;sente la cible d’&eacute;v&eacute;nement. En d’autres termes, le noeud cible est l’objet de la liste
d’affichage au niveau duquel est survenu l’&eacute;v&eacute;nement. Par exemple, si l’utilisateur clique sur un objet de la liste
d’affichage appel&eacute; child1, Flash Player ou AIR distribue un objet &eacute;v&eacute;nement dont le noeud cible est child1.
Le flux d’&eacute;v&eacute;nements se d&eacute;compose en trois phases. La premi&egrave;re correspond &agrave; la phase de capture, qui comprend tous
les noeuds de la Sc&egrave;ne jusqu’au parent du noeud cible. La deuxi&egrave;me partie est appel&eacute;e la phase cible, qui comprend
uniquement le noeud cible. La troisi&egrave;me partie s’appelle la phase de propagation. Elle comprend les nœuds rencontr&eacute;s
lors du cheminement du parent du nœud cible jusqu’&agrave; la sc&egrave;ne.
Derni&egrave;re mise &agrave; jour le 27/4/2013
133
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Le nom de ces phases prend tout son sens si vous envisagez la liste d’affichage comme une hi&eacute;rarchie verticale dont le
sommet est la Sc&egrave;ne, comme illustr&eacute; par le sch&eacute;ma suivant :
Sc&egrave;ne
Nœud parent
Nœud enfant1
Nœud enfant2
Si un utilisateur clique sur Child1 Node, Flash Player ou AIR distribue un objet &eacute;v&eacute;nement dans ce flux d’&eacute;v&eacute;nements.
Comme le montre l’illustration suivante, le parcours de l’objet commence &agrave; Sc&egrave;ne. L’objet descend ensuite jusqu’&agrave;
Nœud parent, puis vers Nœud enfant1. Il se propage alors vers le haut jusqu’&agrave; Sc&egrave;ne, en repassant par Nœud parent
pour rejoindre Sc&egrave;ne.
Dans cet exemple, la phase de capture comprend Sc&egrave;ne et Nœud parent pendant le trajet descendant initial. La phase
cible comprend le temps pass&eacute; au nœud Nœud enfant1. La phase de propagation comprend les nœuds Nœud parent
et Sc&egrave;ne, qui se trouvent sur le chemin du retour vers le nœud racine.
Le flux d’&eacute;v&eacute;nements contribue au renforcement du syst&egrave;me de gestion des &eacute;v&eacute;nements par rapport aux versions
pr&eacute;c&eacute;dentes d’ActionScript. Dans ces derni&egrave;res, le flux d’&eacute;v&eacute;nements est inexistant, ce qui signifie que les &eacute;couteurs
d’&eacute;v&eacute;nement s’ajoutent uniquement &agrave; l’objet qui g&eacute;n&egrave;re l’&eacute;v&eacute;nement. Dans ActionScript 3.0, vous pouvez ajouter des
&eacute;couteurs d’&eacute;v&eacute;nement aussi bien &agrave; un noeud cible qu’&agrave; tout autre noeud du flux d’&eacute;v&eacute;nements.
Cette possibilit&eacute; d’ajouter des &eacute;couteurs d’&eacute;v&eacute;nement tout au long du flux d’&eacute;v&eacute;nements s’av&egrave;re particuli&egrave;rement utile
lorsqu’un composant d’interface comprend plusieurs objets. Par exemple, un objet bouton contient souvent un objet
texte qui sert de libell&eacute; au bouton. Sans la possibilit&eacute; d’ajouter un &eacute;couteur au flux d’&eacute;v&eacute;nements, il faudrait en ajouter
un &agrave; l’objet bouton et un &agrave; l’objet texte pour &ecirc;tre s&ucirc;r d’&ecirc;tre averti des &eacute;v&eacute;nements de clic survenant &agrave; tout endroit du
bouton. Le flux d’&eacute;v&eacute;nements vous permet, au contraire, de placer un seul &eacute;couteur d’&eacute;v&eacute;nement sur l’objet bouton
afin de g&eacute;rer les &eacute;v&eacute;nements de clic, qu’ils se produisent sur l’objet texte ou sur des zones de l’objet bouton non
couvertes par l’objet texte.
Cependant, certains objets &eacute;v&eacute;nements ne participent pas aux trois phases du flux d’&eacute;v&eacute;nements. Certains types
d’&eacute;v&eacute;nements, tels que enterFrame et init, sont distribu&eacute;s directement au nœud cible et ne participent ni &agrave; la phase
de capture, ni &agrave; la phase de propagation. D’autres &eacute;v&eacute;nements peuvent cibler des objets qui ne font pas partie de la liste
d’affichage, par exemple les &eacute;v&eacute;nements distribu&eacute;s &agrave; une occurrence de la classe Socket. Ces objets &eacute;v&eacute;nements
aboutissent directement &agrave; l’objet cible, sans participer &agrave; la phase de capture et de propagation.
Derni&egrave;re mise &agrave; jour le 27/4/2013
134
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Pour savoir comment se comporte un type d’&eacute;v&eacute;nement particulier, vous pouvez consulter la documentation de l’API
ou examiner les propri&eacute;t&eacute;s de l’objet &eacute;v&eacute;nement. Cette derni&egrave;re m&eacute;thode est d&eacute;crite &agrave; la section suivante.
Objets &eacute;v&eacute;nement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les objets &eacute;v&eacute;nements jouent deux r&ocirc;les essentiels dans le nouveau syst&egrave;me de gestion des &eacute;v&eacute;nements. Tout d’abord,
ces objets repr&eacute;sentent de v&eacute;ritables &eacute;v&eacute;nements, puisqu’ils stockent dans un ensemble de propri&eacute;t&eacute;s des informations
relatives &agrave; des &eacute;v&eacute;nements pr&eacute;cis. Ils contiennent en outre un jeu de m&eacute;thodes qui vous permet de manipuler les objets
&eacute;v&eacute;nement et d’agir sur le comportement du syst&egrave;me de gestion des &eacute;v&eacute;nements.
Pour faciliter l’acc&egrave;s &agrave; ces propri&eacute;t&eacute;s et ces m&eacute;thodes, l’API Flash Player d&eacute;finit une classe Event qui constitue la classe
de base de tous les objets &eacute;v&eacute;nements. La classe Event d&eacute;finit un jeu fondamental de propri&eacute;t&eacute;s et de m&eacute;thodes
commun &agrave; tous les objets &eacute;v&eacute;nement.
Cette section commence par &eacute;tudier les propri&eacute;t&eacute;s de la classe Event avant de d&eacute;crire les m&eacute;thodes de cette m&ecirc;me
classe, puis explique l’existence de sous-classes dans la classe Event.
Pr&eacute;sentation des propri&eacute;t&eacute;s de la classe Event
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Event d&eacute;finit plusieurs propri&eacute;t&eacute;s et constantes en lecture seule qui fournissent des informations essentielles
sur l’objet &eacute;v&eacute;nement. Les points suivants rev&ecirc;tent une importance particuli&egrave;re :
• Les types d’objet &eacute;v&eacute;nement sont repr&eacute;sent&eacute;s par des constantes et stock&eacute;s dans la propri&eacute;t&eacute; Event.type.
• La possibilit&eacute; d’&eacute;viter le comportement par d&eacute;faut d’un &eacute;v&eacute;nement est repr&eacute;sent&eacute;e par une valeur bool&eacute;enne,
stock&eacute;e dans la propri&eacute;t&eacute; Event.cancelable.
• Les informations relatives au flux d’&eacute;v&eacute;nements se trouvent dans les propri&eacute;t&eacute;s restantes.
Types d’objets &eacute;v&eacute;nement
Chaque objet &eacute;v&eacute;nement est associ&eacute; &agrave; un type d’&eacute;v&eacute;nement. Les types d’&eacute;v&eacute;nements sont stock&eacute;s dans la propri&eacute;t&eacute;
Event.type sous forme de cha&icirc;ne. Il est utile de conna&icirc;tre le type d’un objet &eacute;v&eacute;nement car votre code peut alors
distinguer les objets de types diff&eacute;rents. Par exemple, le code suivant sp&eacute;cifie que la fonction clickHandler() doit
r&eacute;pondre &agrave; tous les objets &eacute;v&eacute;nements clic de souris transmis &agrave; myDisplayObject :
myDisplayObject.addEventListener(MouseEvent.CLICK, clickHandler);
La classe Event est elle-m&ecirc;me associ&eacute;e &agrave; deux douzaines de types d’&eacute;v&eacute;nement, repr&eacute;sent&eacute;s par des constantes de la
classe Event. Dans cet extrait de la d&eacute;finition de la classe Event, certaines de ces constantes sont illustr&eacute;es :
package flash.events
{
public class Event
{
// class constants
public static const ACTIVATE:String = &quot;activate&quot;;
public static const ADDED:String= &quot;added&quot;;
// remaining constants omitted for brevity
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
135
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Ces constantes permettent de faire facilement r&eacute;f&eacute;rence &agrave; des types d’&eacute;v&eacute;nement pr&eacute;cis. Vous devez utiliser ces
constantes au lieu des cha&icirc;nes qu’elles repr&eacute;sentent. Si vous orthographiez de mani&egrave;re incorrecte un nom de constante
dans votre code, le compilateur peut d&eacute;tecter l’erreur. Si vous utilisez les cha&icirc;nes qu’elles repr&eacute;sentent, une erreur de
frappe ne sera pas forc&eacute;ment d&eacute;tect&eacute;e lors de la compilation et pourrait provoquer un comportement inattendu,
difficile &agrave; d&eacute;boguer. Par exemple, utilisez le code suivant pour ajouter un &eacute;couteur d’&eacute;v&eacute;nement :
myDisplayObject.addEventListener(MouseEvent.CLICK, clickHandler);
plut&ocirc;t que :
myDisplayObject.addEventListener(&quot;click&quot;, clickHandler);
Informations relatives aux comportements par d&eacute;faut
Le code que vous &eacute;crivez est en mesure de v&eacute;rifier si le comportement par d&eacute;faut d’un objet &eacute;v&eacute;nement donn&eacute; peut &ecirc;tre
&eacute;vit&eacute;. Pour ce faire, il doit acc&eacute;der &agrave; la propri&eacute;t&eacute; cancelable. La propri&eacute;t&eacute; cancelable contient une valeur bool&eacute;enne
qui indique si le comportement par d&eacute;faut peut &ecirc;tre &eacute;vit&eacute; ou non. Vous pouvez &eacute;viter, ou annuler, le comportement
par d&eacute;faut de quelques &eacute;v&eacute;nements &agrave; l’aide de la m&eacute;thode preventDefault(). Pour plus d’informations, voir
Annulation d’un comportement associ&eacute; par d&eacute;faut &agrave; un &eacute;v&eacute;nement sous &laquo; Pr&eacute;sentation des m&eacute;thodes de la classe
Event &raquo; &agrave; la page 137.
Informations de flux d’&eacute;v&eacute;nements
Les propri&eacute;t&eacute;s restantes de la classe Event contiennent des informations importantes sur l’objet &eacute;v&eacute;nement et ses
relations au flux d’&eacute;v&eacute;nements, comme l’explique la liste suivante :
• La propri&eacute;t&eacute; bubbles contient des informations sur les parties du flux d’&eacute;v&eacute;nements auquel participe l’objet
&eacute;v&eacute;nement.
• La propri&eacute;t&eacute; eventPhase indique la phase actuelle du flux d’&eacute;v&eacute;nements.
• La propri&eacute;t&eacute; target stocke une r&eacute;f&eacute;rence &agrave; la cible d’&eacute;v&eacute;nement.
• La propri&eacute;t&eacute; currentTarget stocke une r&eacute;f&eacute;rence de l’objet de liste d’affichage qui traite actuellement l’objet
&eacute;v&eacute;nement.
La propri&eacute;t&eacute; bubbles
On dit d’un &eacute;v&eacute;nement qu’il se propage lorsqu’il participe &agrave; la phase de propagation du flux d’&eacute;v&eacute;nements, c’est-&agrave;-dire
quand l’objet &eacute;v&eacute;nement est transmis du nœud cible via ses ascendants jusqu’&agrave; la Sc&egrave;ne. La propri&eacute;t&eacute; Event.bubbles
stocke une valeur bool&eacute;enne qui indique si l’objet &eacute;v&eacute;nement participe &agrave; la phase de propagation. Tous les &eacute;v&eacute;nements
qui se propagent vers le haut participent &eacute;galement aux phases de capture et cible ; de tels &eacute;v&eacute;nements participent donc
aux trois phases du flux d’&eacute;v&eacute;nements. Si la valeur est true, l’objet &eacute;v&eacute;nement participe aux trois phrases. Si la valeur
est false, l’objet &eacute;v&eacute;nement ne participe pas &agrave; la phase de propagation.
La propri&eacute;t&eacute; eventPhase
Vous pouvez d&eacute;terminer la phase d’&eacute;v&eacute;nement de tout objet &eacute;v&eacute;nement gr&acirc;ce &agrave; sa propri&eacute;t&eacute; eventPhase. La propri&eacute;t&eacute;
eventPhase a pour valeur un entier non sign&eacute; qui repr&eacute;sente l’une des trois phases du flux d’&eacute;v&eacute;nements. L’API de
Flash Player d&eacute;finit une classe EventPhase distincte qui contient trois constantes correspondant aux trois valeurs
enti&egrave;res non sign&eacute;es, comme illustr&eacute; par l’extrait de code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
136
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
package flash.events
{
public final class EventPhase
{
public static const CAPTURING_PHASE:uint = 1;
public static const AT_TARGET:uint = 2;
public static const BUBBLING_PHASE:uint= 3;
}
}
Ces constantes correspondent aux trois valeurs valables pour la propri&eacute;t&eacute; eventPhase. Vous pouvez utiliser ces
constantes pour am&eacute;liorer la lisibilit&eacute; de votre code. Supposons par exemple que vous souhaitiez &ecirc;tre s&ucirc;r qu’une
fonction appel&eacute;e myFunc() soit uniquement appel&eacute;e lorsque la cible d’&eacute;v&eacute;nement se trouve dans la sc&egrave;ne cible. Le code
suivant vous permet de tester cette condition :
if (event.eventPhase == EventPhase.AT_TARGET)
{
myFunc();
}
La propri&eacute;t&eacute; target
La propri&eacute;t&eacute; target contient une r&eacute;f&eacute;rence &agrave; l’objet cible de l’&eacute;v&eacute;nement. Dans certains cas, ce syst&egrave;me est simple, par
exemple, lorsqu’un micro devient actif, la cible de l’objet &eacute;v&eacute;nement est l’objet Microphone. Toutefois, si la cible se
trouve sur la liste d’affichage, il faut tenir compte de la hi&eacute;rarchie de cette derni&egrave;re. Par exemple, si un utilisateur clique
avec la souris sur un point correspondant &agrave; plusieurs objets de la liste d’affichage qui se chevauchent, Flash Player
et AIR choisissent toujours comme cible d’&eacute;v&eacute;nement l’objet qui se trouve le plus loin de la Sc&egrave;ne.
Dans des fichiers SWF complexes, et particuli&egrave;rement ceux dont les boutons sont r&eacute;guli&egrave;rement orn&eacute;s d’objets enfant
plus petits, la propri&eacute;t&eacute; target ne doit pas &ecirc;tre utilis&eacute;e fr&eacute;quemment car elle pointera souvent vers l’objet enfant du
bouton plut&ocirc;t que vers le bouton lui-m&ecirc;me. Dans de telles situations, il est courant d’ajouter des &eacute;couteurs
d’&eacute;v&eacute;nement au bouton et d’utiliser la propri&eacute;t&eacute; currentTarget. En effet, cette derni&egrave;re pointe vers le bouton alors
que la propri&eacute;t&eacute; target peut pointer vers l’un des enfants du bouton.
La propri&eacute;t&eacute; currentTarget
La propri&eacute;t&eacute; currentTarget contient une r&eacute;f&eacute;rence de l’objet de liste d’affichage qui traite actuellement l’objet
&eacute;v&eacute;nement. M&ecirc;me s’il peut para&icirc;tre &eacute;trange de ne pas savoir quel nœud traite actuellement l’objet &eacute;v&eacute;nement que vous
&eacute;tudiez, gardez &agrave; l’esprit que vous pouvez ajouter une fonction &eacute;couteur &agrave; n’importe quel objet d’affichage du flux
d’&eacute;v&eacute;nements de l’objet &eacute;v&eacute;nement en question. En outre, cette fonction &eacute;couteur peut &ecirc;tre plac&eacute;e &agrave; tout endroit. Par
ailleurs, la m&ecirc;me fonction &eacute;couteur peut &ecirc;tre ajout&eacute;e &agrave; diff&eacute;rents objets d’affichage. L’utilit&eacute; de la propri&eacute;t&eacute;
currentTarget augmente donc avec la taille et la complexit&eacute; du projet.
Pr&eacute;sentation des m&eacute;thodes de la classe Event
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Event contient trois cat&eacute;gories de m&eacute;thodes :
• Les m&eacute;thodes d’utilitaire, qui peuvent cr&eacute;er des copies d’un objet &eacute;v&eacute;nement ou le convertir en cha&icirc;ne
• Les m&eacute;thodes de flux d’&eacute;v&eacute;nements, qui suppriment les objets &eacute;v&eacute;nements du flux d’&eacute;v&eacute;nements
• Les m&eacute;thodes de comportement par d&eacute;faut, qui annulent le comportement par d&eacute;faut ou v&eacute;rifient s’il a &eacute;t&eacute; annul&eacute;
Derni&egrave;re mise &agrave; jour le 27/4/2013
137
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
M&eacute;thodes d’utilitaire de la classe Event
La classe Event compte deux m&eacute;thodes d’utilitaire. La m&eacute;thode clone() permet de cr&eacute;er des copies d’un objet
&eacute;v&eacute;nement. La m&eacute;thode toString() permet de repr&eacute;senter sous forme de cha&icirc;nes les propri&eacute;t&eacute;s d’un objet &eacute;v&eacute;nement
ainsi que leurs valeurs. Bien qu’utilis&eacute;es en interne par le mod&egrave;le d’&eacute;v&eacute;nements, ces deux m&eacute;thodes sont mises &agrave; la
disposition des d&eacute;veloppeurs pour un usage g&eacute;n&eacute;rique.
Pour les d&eacute;veloppeurs exp&eacute;riment&eacute;s qui souhaitent cr&eacute;er des sous-classes de la classe Event, il est n&eacute;cessaire de
red&eacute;finir et d’impl&eacute;menter des versions de ces deux m&eacute;thodes d’utilitaires afin de garantir le bon fonctionnement de
la sous-classe d’&eacute;v&eacute;nement.
Arr&ecirc;t du flux d’&eacute;v&eacute;nements
La m&eacute;thode Event.stopPropagation() ou Event.stopImmediatePropagation() vous permet d’arr&ecirc;ter le
cheminement d’un objet &eacute;v&eacute;nement dans le flux d’&eacute;v&eacute;nements. Quasi identiques, ces deux m&eacute;thodes diff&egrave;rent
uniquement en ce que les autres &eacute;couteurs d’&eacute;v&eacute;nement du nœud actuel sont autoris&eacute;s ou non &agrave; s’ex&eacute;cuter :
• La m&eacute;thode Event.stopPropagation() emp&ecirc;che l’objet &eacute;v&eacute;nement de passer au nœud suivant mais seulement
apr&egrave;s que tous les autres &eacute;couteurs du nœud actuel ont &eacute;t&eacute; autoris&eacute;s &agrave; s’ex&eacute;cuter.
• La m&eacute;thode Event.stopImmediatePropagation() emp&ecirc;che l’objet &eacute;v&eacute;nement de passer au nœud suivant sans
autoriser les autres &eacute;couteurs du nœud actuel &agrave; s’ex&eacute;cuter.
Quelle que soit la m&eacute;thode appel&eacute;e, elle n’a aucun effet sur la r&eacute;alisation du comportement par d&eacute;faut de l’&eacute;v&eacute;nement.
Utilisez les m&eacute;thodes de comportement par d&eacute;faut de la classe Event pour &eacute;viter le comportement par d&eacute;faut.
Annulation d’un comportement associ&eacute; par d&eacute;faut &agrave; un &eacute;v&eacute;nement
Deux m&eacute;thodes sont associ&eacute;es &agrave; l’annulation du comportement par d&eacute;faut : preventDefault() et
isDefaultPrevented(). Appelez la m&eacute;thode preventDefault() pour annuler le comportement associ&eacute; par d&eacute;faut
&agrave; un &eacute;v&eacute;nement. Pour v&eacute;rifier si preventDefault() a d&eacute;j&agrave; &eacute;t&eacute; appel&eacute;e sur un objet &eacute;v&eacute;nement, appelez la m&eacute;thode
isDefaultPrevented(), qui renvoie la valeur true si la m&eacute;thode a d&eacute;j&agrave; &eacute;t&eacute; appel&eacute;e, false dans le cas contraire.
La m&eacute;thode preventDefault() fonctionne uniquement s’il est possible d’annuler le comportement par d&eacute;faut de
l’&eacute;v&eacute;nement. Pour v&eacute;rifier que c’est le cas, reportez-vous &agrave; la documentation de l’API de ce type d’&eacute;v&eacute;nement ou
examinez la propri&eacute;t&eacute; cancelable de l’objet &eacute;v&eacute;nement &agrave; l’aide du code ActionScript.
L’annulation du comportement par d&eacute;faut n’a aucun effet sur la progression d’un objet &eacute;v&eacute;nement dans le flux
d’&eacute;v&eacute;nements. Utilisez les m&eacute;thodes de flux d’&eacute;v&eacute;nements de la classe Event pour supprimer un objet &eacute;v&eacute;nement du
flux d’&eacute;v&eacute;nements.
Sous-classes de la classe Event
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour de nombreux &eacute;v&eacute;nements, le jeu de propri&eacute;t&eacute;s commun, d&eacute;fini dans la classe Event est suffisant. N&eacute;anmoins,
d’autres &eacute;v&eacute;nements pr&eacute;sentent des caract&eacute;ristiques exclusives qui ne peuvent &ecirc;tre captur&eacute;es par les propri&eacute;t&eacute;s
disponibles dans la classe Event. Pour ces &eacute;v&eacute;nements, ActionScript 3.0 d&eacute;finit plusieurs sous-classes de la classe
Ev&eacute;nement.
Chaque sous-classe fournit d’autres propri&eacute;t&eacute;s et types d’&eacute;v&eacute;nements propres &agrave; la cat&eacute;gorie d’&eacute;v&eacute;nement consid&eacute;r&eacute;e.
Par exemple, les &eacute;v&eacute;nements li&eacute;s aux actions de la souris pr&eacute;sentent plusieurs caract&eacute;ristiques uniques, que les
propri&eacute;t&eacute;s d&eacute;finies dans la classe Event ne peuvent capturer. La classe MouseEvent constitue une extension de la classe
Event puisqu’elle ajoute dix propri&eacute;t&eacute;s contenant des informations telles que l’emplacement de l’&eacute;v&eacute;nement de souris
et les &eacute;ventuelles touches actionn&eacute;es en m&ecirc;me temps.
Derni&egrave;re mise &agrave; jour le 27/4/2013
138
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Une sous-classe d’Event contient &eacute;galement des constantes qui repr&eacute;sentent de types d’&eacute;v&eacute;nement associ&eacute;s &agrave; la sousclasse. Par exemple, la classe MouseEvent d&eacute;finit des constantes pour plusieurs types d’&eacute;v&eacute;nement de souris,
notamment click, doubleClick, mouseDown et mouseUp.
Comme le d&eacute;crit la section consacr&eacute;e aux m&eacute;thodes d’utilitaire de la classe Event dans &laquo; Objets &eacute;v&eacute;nement &raquo; &agrave; la
page 135, lors de la cr&eacute;ation d’une sous-classe d’Event, vous devez bloquer les m&eacute;thodes clone() et toString() pour
fournir la fonctionnalit&eacute; propre &agrave; la sous-classe.
Ecouteurs d’&eacute;v&eacute;nement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les &eacute;couteurs d’&eacute;v&eacute;nement, &eacute;galement appel&eacute;s gestionnaires d’&eacute;v&eacute;nements, sont des fonctions que Flash Player et AIR
ex&eacute;cutent en r&eacute;ponse &agrave; des &eacute;v&eacute;nements d&eacute;termin&eacute;s. La proc&eacute;dure d’ajout d’un &eacute;couteur d’&eacute;v&eacute;nement se d&eacute;roule en
deux temps. En premier lieu, vous cr&eacute;ez une fonction ou m&eacute;thode de classe que Flash Player ou AIR doit ex&eacute;cuter en
r&eacute;ponse &agrave; l’&eacute;v&eacute;nement. On parle parfois de fonction d’&eacute;couteur ou de fonction de gestionnaire d’&eacute;v&eacute;nement. En second
lieu, vous utilisez la m&eacute;thode addEventListener() pour enregistrer la fonction d’&eacute;couteur aupr&egrave;s de la cible de
l’&eacute;v&eacute;nement ou tout autre objet de la liste d’affichage qui appartient au flux d’&eacute;v&eacute;nements appropri&eacute;.
Cr&eacute;ation d’une fonction d’&eacute;couteur
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La cr&eacute;ation d’une fonction d’&eacute;couteur est un domaine dans lequel le mod&egrave;le d’&eacute;v&eacute;nements ActionScript 3.0 diff&egrave;re du
mod&egrave;le d’&eacute;v&eacute;nements DOM. Dans le mod&egrave;le d’&eacute;v&eacute;nements DOM, on distingue clairement un &eacute;couteur d’&eacute;v&eacute;nement
et une fonction d’&eacute;couteur : un &eacute;couteur d’&eacute;v&eacute;nement est une occurrence de classe qui impl&eacute;mente l’interface
EventListener, tandis qu’une fonction d’&eacute;couteur est une m&eacute;thode de cette classe appel&eacute;e handleEvent(). Dans le
mod&egrave;le d’&eacute;v&eacute;nements DOM, vous enregistrez l’occurrence de classe qui contient la fonction d’&eacute;couteur, plut&ocirc;t que la
fonction d’&eacute;couteur elle-m&ecirc;me.
Le mod&egrave;le d’&eacute;v&eacute;nements ActionScript ne fait aucune distinction entre l’&eacute;couteur d’&eacute;v&eacute;nement et la fonction
d’&eacute;couteur. L’interface EventListener est inexistante dans ActionScript 3.0 et les fonctions d’&eacute;couteur peuvent &ecirc;tre
d&eacute;finies en dehors de toute classe ou au sein d’une classe. Par ailleurs, il n’est pas n&eacute;cessaire de nommer les fonctions
d’&eacute;couteur handleEvent() ; vous pouvez utiliser tout identifiant valable. Dans ActionScript 3.0, vous enregistrez le
nom de la fonction d’&eacute;couteur elle-m&ecirc;me.
Fonction d’&eacute;couteur d&eacute;finie en dehors de toute classe
Le code suivant cr&eacute;e un fichier SWF simple qui affiche une forme carr&eacute;e de couleur rouge. Une fonction d’&eacute;couteur
appel&eacute;e clickHandler(), qui n’appartient &agrave; aucune classe, &eacute;coute les &eacute;v&eacute;nements de clic de souris dans le carr&eacute; rouge.
Derni&egrave;re mise &agrave; jour le 27/4/2013
139
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
package
{
import flash.display.Sprite;
public class ClickExample extends Sprite
{
public function ClickExample()
{
var child:ChildSprite = new ChildSprite();
addChild(child);
}
}
}
import flash.display.Sprite;
import flash.events.MouseEvent;
class ChildSprite extends Sprite
{
public function ChildSprite()
{
graphics.beginFill(0xFF0000);
graphics.drawRect(0,0,100,100);
graphics.endFill();
addEventListener(MouseEvent.CLICK, clickHandler);
}
}
function clickHandler(event:MouseEvent):void
{
trace(&quot;clickHandler detected an event of type: &quot; + event.type);
trace(&quot;the this keyword refers to: &quot; + this);
}
Lorsqu’un utilisateur interagit avec le fichier SWF r&eacute;sultant, en cliquant sur le carr&eacute;, Flash Player ou AIR g&eacute;n&egrave;re la
sortie de suivi ci-apr&egrave;s :
clickHandler detected an event of type: click
the this keyword refers to: [object global]
Notez que l’objet &eacute;v&eacute;nement est transmis sous forme d’instruction &agrave; clickHandler(). Cela permet &agrave; votre fonction
d’&eacute;couteur d’examiner l’objet &eacute;v&eacute;nement. Dans cet exemple, vous utilisez la propri&eacute;t&eacute; type de l’objet &eacute;v&eacute;nement pour
v&eacute;rifier que cet &eacute;v&eacute;nement correspond &agrave; un clic.
L’exemple v&eacute;rifie aussi la valeur du mot-cl&eacute; this. Dans ce cas, this repr&eacute;sente l’objet global, ce qui est logique puisque
la fonction est d&eacute;finie en dehors de toute classe ou objet personnalis&eacute;.
Fonction d’&eacute;couteur d&eacute;finie comme m&eacute;thode de classe
L’exemple ci-dessous est identique au pr&eacute;c&eacute;dent, qui d&eacute;finit la classe ClickExample, sauf que la fonction
clickHandler() est d&eacute;finie comme m&eacute;thode de la classe ChildSprite :
Derni&egrave;re mise &agrave; jour le 27/4/2013
140
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
package
{
import flash.display.Sprite;
public class ClickExample extends Sprite
{
public function ClickExample()
{
var child:ChildSprite = new ChildSprite();
addChild(child);
}
}
}
import flash.display.Sprite;
import flash.events.MouseEvent;
class ChildSprite extends Sprite
{
public function ChildSprite()
{
graphics.beginFill(0xFF0000);
graphics.drawRect(0,0,100,100);
graphics.endFill();
addEventListener(MouseEvent.CLICK, clickHandler);
}
private function clickHandler(event:MouseEvent):void
{
trace(&quot;clickHandler detected an event of type: &quot; + event.type);
trace(&quot;the this keyword refers to: &quot; + this);
}
}
Lorsqu’un utilisateur interagit avec le fichier SWF r&eacute;sultant, en cliquant sur le carr&eacute; rouge, Flash Player ou AIR g&eacute;n&egrave;re
la sortie de suivi ci-apr&egrave;s :
clickHandler detected an event of type: click
the this keyword refers to: [object ChildSprite]
Notez que le mot-cl&eacute; this renvoie &agrave; l’occurrence de ChildSprite appel&eacute;e child. Voici un changement de
comportement par rapport &agrave; ActionScript 2.0. Si vous utilisiez des composants dans ActionScript 2.0, vous vous
rappelez sans doute que lorsqu’une m&eacute;thode de classe &eacute;tait transmise &agrave; UIEventDispatcher.addEventListener(),
l’&eacute;tendue de la m&eacute;thode &eacute;tait li&eacute;e au composant qui &eacute;mettait l’&eacute;v&eacute;nement, et non &agrave; la classe dans laquelle la m&eacute;thode
d’&eacute;couteur &eacute;tait d&eacute;finie. En d’autres termes, si vous utilisiez cette technique dans ActionScript 2.0, le mot-cl&eacute; this
renvoyait au composant &eacute;mettant l’&eacute;v&eacute;nement et non &agrave; l’occurrence de ChildSprite.
Pour certains d&eacute;veloppeurs, il s’agissait d’un vrai probl&egrave;me car cela signifiait qu’ils ne pouvaient acc&eacute;der &agrave; aucune autre
m&eacute;thode et propri&eacute;t&eacute; de la classe qui contenait la m&eacute;thode d’&eacute;couteur. Pour le contourner, les programmeurs
d’ActionScript 2.0 pouvaient utiliser la classe mx.util.Delegate pour modifier l’&eacute;tendue de la m&eacute;thode d’&eacute;couteur.
Cette manipulation n’est plus n&eacute;cessaire puisque ActionScript 3.0 cr&eacute;e une m&eacute;thode li&eacute;e lorsque
addEventListener() est appel&eacute;e. Par cons&eacute;quent, le mot-cl&eacute; this fait r&eacute;f&eacute;rence &agrave; l’occurrence de ChildSprite
appel&eacute;e child et le programmeur peut acc&eacute;der aux autres m&eacute;thodes et propri&eacute;t&eacute;s de la classe ChildSprite.
Derni&egrave;re mise &agrave; jour le 27/4/2013
141
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Ecouteur d’&eacute;v&eacute;nement &agrave; ne pas utiliser
Une troisi&egrave;me technique permet de cr&eacute;er un objet g&eacute;n&eacute;rique dont l’une des propri&eacute;t&eacute;s pointe vers une fonction
d’&eacute;couteur affect&eacute;e dynamiquement. Elle est cependant d&eacute;conseill&eacute;e. Nous l’&eacute;voquons ici en raison de son utilisation
courante dans ActionScript 2.0 ; il n’est toutefois pas recommand&eacute; de l’utiliser dans ActionScript 3.0. Cette mise en
garde tient au fait que le mot-cl&eacute; this fera r&eacute;f&eacute;rence &agrave; l’objet global et non &agrave; l’objet &eacute;couteur.
L’exemple ci-apr&egrave;s est identique &agrave; l’exemple pr&eacute;c&eacute;dent de la classe ClickExample, sauf que la fonction d’&eacute;couteur est
d&eacute;finie comme faisant partie d’un objet g&eacute;n&eacute;rique appel&eacute; myListenerObj :
package
{
import flash.display.Sprite;
public class ClickExample extends Sprite
{
public function ClickExample()
{
var child:ChildSprite = new ChildSprite();
addChild(child);
}
}
}
import flash.display.Sprite;
import flash.events.MouseEvent;
class ChildSprite extends Sprite
{
public function ChildSprite()
{
graphics.beginFill(0xFF0000);
graphics.drawRect(0,0,100,100);
graphics.endFill();
addEventListener(MouseEvent.CLICK, myListenerObj.clickHandler);
}
}
var myListenerObj:Object = new Object();
myListenerObj.clickHandler = function (event:MouseEvent):void
{
trace(&quot;clickHandler detected an event of type: &quot; + event.type);
trace(&quot;the this keyword refers to: &quot; + this);
}
Les r&eacute;sultats de trace seront les suivants :
clickHandler detected an event of type: click
the this keyword refers to: [object global]
On s’attendrait &agrave; ce que this fasse r&eacute;f&eacute;rence &agrave; myListenerObj et que la sortie de suivi soit [object Object], mais
le mot-cl&eacute; renvoie en fait &agrave; l’objet global. Lorsque vous transmettez un nom de propri&eacute;t&eacute; dynamique comme
instruction &agrave; addEventListener(), Flash Player ou AIR est incapable de cr&eacute;er une m&eacute;thode li&eacute;e. En effet, ce que vous
transmettez comme param&egrave;tre listener n’est rien de plus que l’adresse m&eacute;moire de votre fonction d’&eacute;couteur ; Flash
Player et AIR n’ont aucun moyen de lier cette adresse &agrave; l’occurrence de myListenerObj.
Derni&egrave;re mise &agrave; jour le 27/4/2013
142
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Gestion des &eacute;couteurs d’&eacute;v&eacute;nement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez g&eacute;rer vos fonctions d’&eacute;couteur &agrave; l’aide des m&eacute;thodes de l’interface IEventDispatcher. Cette interface est
la version ActionScript 3.0 de l’interface EventTarget du mod&egrave;le d’&eacute;v&eacute;nements DOM. Bien que le nom
IEventDispatcher semble impliquer que l’objet principal de la classe est l’envoi (ou la distribution) des objets
&eacute;v&eacute;nements, les m&eacute;thodes qui lui correspondent servent en fait plus souvent &agrave; l’enregistrement, la v&eacute;rification et la
suppression des &eacute;couteurs d’&eacute;v&eacute;nement. L’interface IEventDispatcher d&eacute;finit cinq m&eacute;thodes, comme illustr&eacute; dans le
code suivant :
package flash.events
{
public interface IEventDispatcher
{
function addEventListener(eventName:String,
listener:Object,
useCapture:Boolean=false,
priority:Integer=0,
useWeakReference:Boolean=false):Boolean;
function removeEventListener(eventName:String,
listener:Object,
useCapture:Boolean=false):Boolean;
function dispatchEvent(eventObject:Event):Boolean;
function hasEventListener(eventName:String):Boolean;
function willTrigger(eventName:String):Boolean;
}
}
L’API de Flash Player impl&eacute;mente l’interface IEventDispatcher &agrave; l’aide de la classe Event Dispatcher. Cette derni&egrave;re
constitue la classe de base de toutes les classes pouvant servir de cibles d’&eacute;v&eacute;nement ou faire partie d’un flux
d’&eacute;v&eacute;nements. Par exemple, la classe DisplayObject h&eacute;rite de la classe EventDispatcher, par cons&eacute;quent, tout objet de
la liste d’affichage peut acc&eacute;der aux m&eacute;thodes de l’interface IEventDispatcher.
Ajout des &eacute;couteurs d’&eacute;v&eacute;nement
La m&eacute;thode addEventListener() est la cl&eacute; de vo&ucirc;te de l’interface IEventDispatcher. Elle permet d’enregistrer les
fonctions d’&eacute;couteurs. Les deux param&egrave;tres requis sont type et listener. Le param&egrave;tre type sp&eacute;cifie le type
d’&eacute;v&eacute;nement. Avec le param&egrave;tre listener, vous pouvez sp&eacute;cifier la fonction d’&eacute;couteur qui doit s’ex&eacute;cuter lorsque
l’&eacute;v&eacute;nement survient. Le param&egrave;tre listener peut &ecirc;tre une r&eacute;f&eacute;rence &agrave; une fonction ou une m&eacute;thode de classe.
n’utilisez pas de parenth&egrave;ses pour stipuler le param&egrave;tre listener. Par exemple, la fonction clickHandler() est
sp&eacute;cifi&eacute;e sans parenth&egrave;ses dans l’appel suivant &agrave; la m&eacute;thode addEventListener() :
addEventListener(MouseEvent.CLICK, clickHandler)
Le param&egrave;tre useCapture de la m&eacute;thode addEventListener() vous permet de contr&ocirc;ler la phase du flux
d’&eacute;v&eacute;nements pendant laquelle votre &eacute;couteur sera actif. Si useCapture a la valeur true, votre &eacute;couteur sera actif
pendant la phase de capture du flux d’&eacute;v&eacute;nements. Si useCapture a la valeur false, votre &eacute;couteur sera actif pendant
la phase cible et la phase de propagation du flux d’&eacute;v&eacute;nements. Pour &eacute;couter un &eacute;v&eacute;nement pendant toutes les phases
du flux d’&eacute;v&eacute;nements, vous devez appeler deux fois addEventListener() ; la premi&egrave;re fois, useCapture prend la
valeur true, la seconde fois, useCapture prend la valeur false.
Derni&egrave;re mise &agrave; jour le 27/4/2013
143
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Le param&egrave;tre priority de la m&eacute;thode addEventListener() ne fait pas officiellement partie du mod&egrave;le
d’&eacute;v&eacute;nements DOM de niveau 3. Il est inclus dans ActionScript 3.0 pour vous offrir une plus grande souplesse dans
l’organisation de vos &eacute;couteurs d’&eacute;v&eacute;nement. Lorsque vous appelez addEventListener(), vous pouvez d&eacute;finir la
priorit&eacute; de cet &eacute;couteur d’&eacute;v&eacute;nement en transmettant une valeur enti&egrave;re comme param&egrave;tre priority. La valeur par
d&eacute;faut est 0. Vous pouvez toutefois utiliser une valeur enti&egrave;re n&eacute;gative ou positive. Plus le nombre est &eacute;lev&eacute;, plus
l’ex&eacute;cution de l’&eacute;couteur d’&eacute;v&eacute;nement est rapide. Les &eacute;couteurs d’&eacute;v&eacute;nement de priorit&eacute; &eacute;quivalente sont ex&eacute;cut&eacute;s
suivant l’ordre dans lequel ils ont &eacute;t&eacute; ajout&eacute;s : plus l’&eacute;couteur est ajout&eacute; t&ocirc;t, plus il est ex&eacute;cut&eacute; rapidement.
Le param&egrave;tre useWeakReference vous permet de sp&eacute;cifier si la r&eacute;f&eacute;rence &agrave; la fonction d’&eacute;couteur est faible ou
normale. En lui attribuant la valeur true, vous &eacute;vitez les situations dans lesquelles les fonctions d’&eacute;couteurs demeurent
dans la m&eacute;moire alors qu’elles sont inutiles. Flash Player et AIR utilisent une technique appel&eacute;e nettoyage pour effacer
de la m&eacute;moire les objets qui ne servent plus. Un objet est consid&eacute;r&eacute; comme inutilis&eacute; lorsqu’il n’appara&icirc;t dans aucune
r&eacute;f&eacute;rence. Le nettoyeur de m&eacute;moire ignore les r&eacute;f&eacute;rences faibles, c’est-&agrave;-dire qu’une fonction d’&eacute;couteur vers laquelle
pointe uniquement une r&eacute;f&eacute;rence faible est incluse dans le nettoyage.
Suppression des &eacute;couteurs d’&eacute;v&eacute;nement
La m&eacute;thode removeEventListener() permet de supprimer un &eacute;couteur d’&eacute;v&eacute;nement dont vous n’avez plus besoin.
Il est judicieux de supprimer tous les &eacute;couteurs qui ne seront plus utilis&eacute;s. Les param&egrave;tres requis sont notamment
eventName et listener, soit les m&ecirc;mes que ceux requis pour la m&eacute;thode addEventListener(). Rappel : pour
&eacute;couter les &eacute;v&eacute;nements pendant toutes les phases du flux d’&eacute;v&eacute;nements, vous pouvez appeler addEventListener()
deux fois, en attribuant &agrave; useCapture la valeur true la premi&egrave;re, puis false la seconde. Pour supprimer les deux
&eacute;couteurs d’&eacute;v&eacute;nement, il serait n&eacute;cessaire d’appeler removeEventListener() &agrave; deux reprises, la premi&egrave;re fois en
attribuant la valeur true &agrave; useCapture, la seconde fois en utilisant la valeur false.
Distribution d’&eacute;v&eacute;nements
La m&eacute;thode dispatchEvent() peut servir aux d&eacute;veloppeurs chevronn&eacute;s pour distribuer un objet &eacute;v&eacute;nement
personnalis&eacute; dans le flux d’&eacute;v&eacute;nements. Cette m&eacute;thode accepte un seul param&egrave;tre, une r&eacute;f&eacute;rence &agrave; l’objet &eacute;v&eacute;nement,
qui doit &ecirc;tre une occurrence de la classe Event ou de l’une de ces sous-classes. Apr&egrave;s distribution, la propri&eacute;t&eacute; target
de l’objet &eacute;v&eacute;nement est d&eacute;finie avec l’objet sur lequel portait l’appel dispatchEvent().
V&eacute;rification des &eacute;couteurs d’&eacute;v&eacute;nement existants
Les deux derni&egrave;res m&eacute;thodes de l’interface IEventDispatcher fournissent des informations pr&eacute;cieuses sur l’existence
des &eacute;couteurs d’&eacute;v&eacute;nement. La m&eacute;thode hasEventListener() renvoie la valeur true si un &eacute;couteur d’&eacute;v&eacute;nement est
d&eacute;tect&eacute; pour un type d’&eacute;v&eacute;nement sp&eacute;cifique sur un objet particulier de la liste d’affichage. La m&eacute;thode
willTrigger() renvoie &eacute;galement la valeur true si un &eacute;couteur est d&eacute;tect&eacute; pour un objet donn&eacute; de la liste d’affichage.
Cependant willTrigger() v&eacute;rifie les &eacute;couteurs sur l’objet d’affichage en question mais &eacute;galement sur tous les
ascendants de cet objet dans l’ensemble des phases du flux d’&eacute;v&eacute;nements.
Derni&egrave;re mise &agrave; jour le 27/4/2013
144
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Ev&eacute;nements d’erreur sans &eacute;couteurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Plus que les &eacute;v&eacute;nements, les exceptions constituent le m&eacute;canisme principal de gestion des erreurs dans
ActionScript 3.0. Toutefois, la gestion des exceptions ne fonctionne pas sur les op&eacute;rations asynchrones telles que les
chargements de fichiers. Si une erreur survient pendant une op&eacute;ration asynchrone, Flash Player et AIR distribuent un
objet &eacute;v&eacute;nement d’erreur. Si vous ne cr&eacute;ez pas d’&eacute;couteur pour l’&eacute;v&eacute;nement d’erreur, les versions de d&eacute;bogage de Flash
Player et AIR affichent une bo&icirc;te de dialogue comportant des informations sur l’erreur en question. Par exemple, la
version de d&eacute;bogage de Flash Player affiche la bo&icirc;te de dialogue suivante, qui d&eacute;crit l’erreur associ&eacute;e &agrave; une tentative de
chargement d’un fichier par l’application &agrave; partir d’une URL non valide :
La plupart des &eacute;v&eacute;nements d’erreur reposent sur la classe ErrorEvent. Ils pr&eacute;sentent donc une propri&eacute;t&eacute; appel&eacute;e text,
qui sert au stockage du message d’erreur que Flash Player ou AIR affiche. Il existe deux exceptions : les classes
StatusEvent et NetStatusEvent. Ces deux classes poss&egrave;dent une propri&eacute;t&eacute; level (StatusEvent.level et
NetStatusEvent.info.level). Lorsque la valeur de la propri&eacute;t&eacute; level est error, ces types d’&eacute;v&eacute;nement sont
consid&eacute;r&eacute;s comme des &eacute;v&eacute;nements d’erreur.
Un &eacute;v&eacute;nement d’erreur n’interrompt pas l’ex&eacute;cution du fichier SWF. Il se traduit uniquement par l’affichage d’une
bo&icirc;te de dialogue dans les versions de d&eacute;bogage des navigateurs et des lecteurs autonomes, d’un message dans le
panneau de sortie du lecteur de cr&eacute;ation et d’une entr&eacute;e dans le fichier journal d’Adobe Flash Builder. Aucune
manifestation n’est visible dans les autres versions de Flash Player ou AIR.
Exemple de gestion des &eacute;v&eacute;nements : Alarm Clock
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple Alarm Clock correspond &agrave; une horloge qui permet &agrave; l’utilisateur de d&eacute;terminer l’heure &agrave; laquelle l’alarme
doit se d&eacute;clencher et d’afficher un message en m&ecirc;me temps. Il repose sur l’application SimpleClock du chapitre
&laquo; Utilisation des dates et des heures &raquo; &agrave; la page 1 et illustre de nombreux aspects de l’utilisation des &eacute;v&eacute;nements dans
ActionScript 3.0, notamment les suivants :
• Ecoute des &eacute;v&eacute;nements et r&eacute;ponse
• Notification d’un &eacute;v&eacute;nement aux &eacute;couteurs
• Cr&eacute;er un type d’&eacute;v&eacute;nement personnalis&eacute;
Derni&egrave;re mise &agrave; jour le 27/4/2013
145
146
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Pour obtenir les fichiers d’application Flash Professional associ&eacute;s &agrave; cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Pour obtenir les fichiers d’application Flex associ&eacute;s &agrave;
cet exemple, voir http://www.adobe.com/go/as3examples_fr. Les fichiers d’application Alarm Clock se trouvent dans
le dossier Samples/AlarmClock. Il s’agit des fichiers suivants :
Fichier
Description
AlarmClockApp.mxml
Fichier d’application principal dans Flash (FLA) ou Flex (MXML).
ou
AlarmClockApp.fla
com/example/programmingas3/clock/AlarmClock.as
Classe permettant d’&eacute;tendre la classe SimpleClock, qui ajoute la
fonctionnalit&eacute; de r&eacute;veil.
com/example/programmingas3/clock/AlarmEvent.as
Une classe d’&eacute;v&eacute;nement personnalis&eacute; (sous-classe de
flash.events.Event), qui sert d’objet &eacute;v&eacute;nement &agrave; l’&eacute;v&eacute;nement alarm
de la classe AlarmClock.
com/example/programmingas3/clock/AnalogClockFace.as
Dessine une horloge ronde et les aiguilles des heures, des minutes et
des secondes en fonction de l’heure (d&eacute;crit dans l’exemple
SimpleClock).
com/example/programmingas3/clock/SimpleClock.as
Composant d’interface d’horloge dot&eacute; d’une fonctionnalit&eacute; simple de
mesure temporelle (d&eacute;crit dans l’exemple SimpleClock).
Pr&eacute;sentation du r&eacute;veil
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans cet exemple, la principale fonctionnalit&eacute; de l’horloge (dont la mesure du temps et l’affichage du cadran) r&eacute;utilise
le code de l’application SimpleClock, d&eacute;crite &agrave; la section &laquo; Exemple de date et heure : horloge analogique simple &raquo; &agrave; la
page 6. La classe AlarmClock &eacute;tend la classe SimpleClock de cet exemple en y ajoutant la fonctionnalit&eacute; de r&eacute;veil
requise : r&eacute;glage de l’heure de d&eacute;clenchement et avertissement une fois l’alarme d&eacute;clench&eacute;e.
Le r&ocirc;le des &eacute;v&eacute;nements est de fournir un avertissement lorsque se produit quelque chose. La classe AlarmClock expose
l’&eacute;v&eacute;nement Alarme, &agrave; l’&eacute;coute duquel d’autres objets peuvent &ecirc;tre plac&eacute;s afin d’effectuer les actions voulues. En outre,
la classe AlarmClock utilise une occurrence de la classe Timer pour d&eacute;terminer &agrave; quel moment d&eacute;clencher l’alarme.
Comme la classe AlarmClock, la classe Timer fournit un &eacute;v&eacute;nement pour avertir d’autres objets (une occurrence de
AlarmClock dans ce cas) une fois un certain d&eacute;lai &eacute;coul&eacute;. Comme dans la plupart des applications ActionScript, les
&eacute;v&eacute;nements constituent une part importante de la fonctionnalit&eacute; de l’exemple Alarm Clock.
D&eacute;clenchement de l’alarme
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Comme mentionn&eacute; plus haut, la seule fonctionnalit&eacute; de la classe AlarmClock est li&eacute;e &agrave; la d&eacute;finition et au
d&eacute;clenchement de l’alarme. La classe int&eacute;gr&eacute;e Timer (flash.utils.Timer) permet au d&eacute;veloppeur de d&eacute;finir du code qui
sera ex&eacute;cut&eacute; apr&egrave;s un d&eacute;lai sp&eacute;cifique. La classe AlarmClock utilise une occurrence de Timer pour d&eacute;terminer le
moment auquel d&eacute;clencher l’alarme.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
import flash.events.TimerEvent;
import flash.utils.Timer;
/**
* The Timer that will be used for the alarm.
*/
public var alarmTimer:Timer;
...
/**
* Instantiates a new AlarmClock of a given size.
*/
public override function initClock(faceSize:Number = 200):void
{
super.initClock(faceSize);
alarmTimer = new Timer(0, 1);
alarmTimer.addEventListener(TimerEvent.TIMER, onAlarm);
}
L’occurrence de Timer d&eacute;finie dans la classe AlarmClock est appel&eacute;e alarmTimer. La m&eacute;thode initClock(), qui
effectue les op&eacute;rations de configuration n&eacute;cessaires &agrave; l’occurrence de AlarmClock, exploite la variable alarmTimer de
deux mani&egrave;res. Tout d’abord, la variable est instanci&eacute;e avec les param&egrave;tres indiquant &agrave; l’occurrence de Timer
d’attendre 0 milliseconde et de d&eacute;clencher l’&eacute;v&eacute;nement timer une seule fois. Apr&egrave;s instanciation de alarmTimer, le
code appelle la m&eacute;thode addEventListener() de cette variable pour indiquer qu’il veut &eacute;couter l’&eacute;v&eacute;nement timer
de cette variable. Le fonctionnement d’une occurrence de Timer repose sur la distribution de l’&eacute;v&eacute;nement timer apr&egrave;s
un certain d&eacute;lai. La classe AlarmClock doit savoir quand l’&eacute;v&eacute;nement timer est distribu&eacute; afin de d&eacute;clencher sa propre
alarme. En appelant addEventListener(), le code AlarmClock s’enregistre comme &eacute;couteur aupr&egrave;s de alarmTimer.
Les deux param&egrave;tres indiquent que la classe AlarmClock souhaite &eacute;couter l’&eacute;v&eacute;nement timer (indiqu&eacute; par la constante
TimerEvent.TIMER), et que lorsque l’&eacute;v&eacute;nement survient, la m&eacute;thode onAlarm() de la classe AlarmClock doit &ecirc;tre
appel&eacute;e en r&eacute;ponse &agrave; l’&eacute;v&eacute;nement.
Pour effectivement d&eacute;finir l’alarme, la m&eacute;thode setAlarm() de la classe AlarmClock est appel&eacute;e, comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
147
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
/**
* Sets the time at which the alarm should go off.
* @param hour The hour portion of the alarm time.
* @param minutes The minutes portion of the alarm time.
* @param message The message to display when the alarm goes off.
* @return The time at which the alarm will go off.
*/
public function setAlarm(hour:Number = 0, minutes:Number = 0, message:String = &quot;Alarm!&quot;):Date
{
this.alarmMessage = message;
var now:Date = new Date();
// Create this time on today's date.
alarmTime = new Date(now.fullYear, now.month, now.date, hour, minutes);
// Determine if the specified time has already passed today.
if (alarmTime &lt;= now)
{
alarmTime.setTime(alarmTime.time + MILLISECONDS_PER_DAY);
}
// Stop the alarm timer if it's currently set.
alarmTimer.reset();
// Calculate how many milliseconds should pass before the alarm should
// go off (the difference between the alarm time and now) and set that
// value as the delay for the alarm timer.
alarmTimer.delay = Math.max(1000, alarmTime.time - now.time);
alarmTimer.start();
return alarmTime;
}
Cette m&eacute;thode effectue plusieurs op&eacute;rations, notamment le stockage du message d’alarme et la cr&eacute;ation d’un objet
Date (alarmTime) repr&eacute;sentant le moment r&eacute;el o&ugrave; l’alarme se d&eacute;clenchera. Point le plus important de cette &eacute;tude, le
minuteur de la variable alarmTimer, dans les derni&egrave;res lignes la m&eacute;thode, est d&eacute;fini et activ&eacute;. Tout d’abord, la m&eacute;thode
reset() est appel&eacute;e, qui arr&ecirc;te le minuteur et le remet &agrave; z&eacute;ro s’il est d&eacute;j&agrave; reparti. Ensuite, l’heure actuelle (repr&eacute;sent&eacute;e
par la variable now) est soustraite &agrave; la valeur de la variable alarmTime afin de d&eacute;terminer combien de millisecondes
doivent s’&eacute;couler avant le d&eacute;clenchement de l’alarme. La classe Timer ne d&eacute;clenche pas l’&eacute;v&eacute;nement timer &agrave; une heure
absolue ; c’est ce d&eacute;calage relatif qui est attribu&eacute; &agrave; la propri&eacute;t&eacute; delay d’alarmTimer. Enfin, la m&eacute;thode start() est
appel&eacute;e pour lancer le minuteur.
Une fois le d&eacute;lai sp&eacute;cifi&eacute; &eacute;coul&eacute;, alarmTimer distribue l’&eacute;v&eacute;nement timer. Comme la classe AlarmClock s’est
enregistr&eacute;e comme &eacute;couteur aupr&egrave;s de sa m&eacute;thode onAlarm() pour l’&eacute;v&eacute;nement timer, lorsque celui-ci survient,
onAlarm() est appel&eacute;e.
/**
* Called when the timer event is dispatched.
*/
public function onAlarm(event:TimerEvent):void
{
trace(&quot;Alarm!&quot;);
var alarm:AlarmEvent = new AlarmEvent(this.alarmMessage);
this.dispatchEvent(alarm);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
148
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
Lorsqu’une m&eacute;thode est enregistr&eacute;e comme &eacute;couteur d’&eacute;v&eacute;nement, elle doit &ecirc;tre d&eacute;finie avec la signature adapt&eacute;e
(c’est-&agrave;-dire le jeu de param&egrave;tres et le type de renvoi de la m&eacute;thode). Pour &eacute;couter l’&eacute;v&eacute;nement timer de la classe
Timer, une m&eacute;thode doit comporter un param&egrave;tre dont le type de donn&eacute;es est TimerEvent (flash.event.TimerEvent),
une sous-classe de la classe Event. Lorsque l’occurrence de Timer appelle ses &eacute;couteurs d’&eacute;v&eacute;nement, elle transmet une
occurrence de TimerEvent &agrave; l’objet &eacute;v&eacute;nement.
Notification de l’alarme &agrave; d’autres composants
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
De m&ecirc;me que la classe Timer, la classe AlarmClock fournit un &eacute;v&eacute;nement qui permet de transmettre des notifications
&agrave; d’autres &eacute;l&eacute;ments de code lorsque l’alarme se d&eacute;clenche. Pour qu’une classe puisse utiliser le syst&egrave;me de gestion des
&eacute;v&eacute;nements int&eacute;gr&eacute; &agrave; ActionScript, elle doit impl&eacute;menter l’interface flash.events.IEventDispatcher. La plupart du
temps, cela se fait par extension de la classe flash.events.EventDispatcher, qui assure une impl&eacute;mentation standard de
IEventDispatcher (ou par extension de l’une des sous-classes de EventDispatcher). Comme d&eacute;crit pr&eacute;c&eacute;demment, la
classe AlarmClock &eacute;tend la classe SimpleClock, qui (par le biais d’une cha&icirc;ne d’h&eacute;ritage) &eacute;tend la classe
EventDispatcher. Ainsi, la classe AlarmClock int&egrave;gre d&eacute;j&agrave; une fonctionnalit&eacute; lui permettant de fournir ses propres
&eacute;v&eacute;nements.
D’autres &eacute;l&eacute;ments de code peuvent s’enregistrer pour &ecirc;tre notifi&eacute;s de l’&eacute;v&eacute;nement alarm de la classe AlarmClock en
appelant la m&eacute;thode addEventListener(), h&eacute;rit&eacute;e de EventDispatcher. Lorsqu’une occurrence de AlarmClock est
pr&ecirc;te &agrave; notifier &agrave; d’autres &eacute;l&eacute;ments de code le d&eacute;clenchement de l’&eacute;v&eacute;nement alarm, elle le fait en appelant la m&eacute;thode
dispatchEvent(), &eacute;galement h&eacute;rit&eacute;e de EventDispatcher.
var alarm:AlarmEvent = new AlarmEvent(this.alarmMessage);
this.dispatchEvent(alarm);
Ces lignes de code sont extraites de la m&eacute;thode onAlarm() de la classe AlarmClock (pr&eacute;sent&eacute;e plus haut dans son
int&eacute;gralit&eacute;). La m&eacute;thode dispatchEvent() de l’occurrence de AlarmClock est appel&eacute;e, puis elle notifie &agrave; tous les
&eacute;couteurs enregistr&eacute;s le d&eacute;clenchement de l’&eacute;v&eacute;nement alarm de l’occurrence de AlarmClock. Le param&egrave;tre transmis
&agrave; dispatchEvent() est l’objet &eacute;v&eacute;nement qui sera ensuite pass&eacute; aux m&eacute;thodes d’&eacute;couteur. Dans ce cas, il s’agit d’une
occurrence de la classe AlarmEvent, une sous-classe de Event cr&eacute;&eacute;e sp&eacute;cialement pour cet exemple.
Elaboration d’un &eacute;v&eacute;nement d’alarme personnalis&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Tous les &eacute;couteurs d’&eacute;v&eacute;nement re&ccedil;oivent un param&egrave;tre d’objet &eacute;v&eacute;nement avec des informations sur l’&eacute;v&eacute;nement qui
a &eacute;t&eacute; d&eacute;clench&eacute;. Dans bien des cas, l’objet &eacute;v&eacute;nement est une occurrence de la classe Event. Dans d’autres cas
n&eacute;anmoins, il s’av&egrave;re utile de fournir des informations compl&eacute;mentaires aux &eacute;couteurs d’&eacute;v&eacute;nement. Il suffit pour cela
de d&eacute;finir une nouvelle classe, sous-classe de la classe Event, et d’utiliser une occurrence de cette classe comme objet
&eacute;v&eacute;nement. Dans cet exemple, une occurrence de AlarmEvent est utilis&eacute;e comme objet &eacute;v&eacute;nement lorsque l’&eacute;v&eacute;nement
alarm de la classe AlarmClock est distribu&eacute;. La classe AlarmEvent, pr&eacute;sent&eacute;e ici, fournit des informations
compl&eacute;mentaires sur l’&eacute;v&eacute;nement alarm, &agrave; savoir le message d’alarme :
Derni&egrave;re mise &agrave; jour le 27/4/2013
149
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
import flash.events.Event;
/**
* This custom Event class adds a message property to a basic Event.
*/
public class AlarmEvent extends Event
{
/**
* The name of the new AlarmEvent type.
*/
public static const ALARM:String = &quot;alarm&quot;;
/**
* A text message that can be passed to an event handler
* with this event object.
*/
public var message:String;
/**
*Constructor.
*@param message The text to display when the alarm goes off.
*/
public function AlarmEvent(message:String = &quot;ALARM!&quot;)
{
super(ALARM);
this.message = message;
}
...
}
Le meilleur moyen de cr&eacute;er une classe d’objet &eacute;v&eacute;nement personnalis&eacute;e est de d&eacute;finir une classe qui &eacute;tend la classEvent,
comme illustr&eacute; dans l’exemple pr&eacute;c&eacute;dent. Pour compl&eacute;ter la fonctionnalit&eacute; h&eacute;rit&eacute;e, la classe AlarmEvent d&eacute;finit une
propri&eacute;t&eacute; message qui contient le texte du message d’alarme associ&eacute; &agrave; l’&eacute;v&eacute;nement. La valeur message est transmise
sous forme de param&egrave;tre au constructeur AlarmEvent. La classe AlarmEvent d&eacute;finit &eacute;galement la constante ALARM qui
peut servir &agrave; r&eacute;f&eacute;rencer l’&eacute;v&eacute;nement (alarm) lors de l’appel de la m&eacute;thode addEventListener() de la classe
AlarmClock.
Outre l’ajout de fonctionnalit&eacute;, chaque sous-classe Event doit red&eacute;finir la m&eacute;thode clone() h&eacute;rit&eacute;e dans le cadre de la
gestion des &eacute;v&eacute;nements ActionScript. Les sous-classes Event peuvent &eacute;ventuellement red&eacute;finir la m&eacute;thode
toString() afin d’inclure les propri&eacute;t&eacute;s de l’&eacute;v&eacute;nement personnalis&eacute; dans la valeur renvoy&eacute;e par l’appel de la m&eacute;thode
toString().
Derni&egrave;re mise &agrave; jour le 27/4/2013
150
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Gestion des &eacute;v&eacute;nements
/**
* Creates and returns a copy of the current instance.
* @return A copy of the current instance.
*/
public override function clone():Event
{
return new AlarmEvent(message);
}
/**
* Returns a String containing all the properties of the current
* instance.
* @return A string representation of the current instance.
*/
public override function toString():String
{
return formatToString(&quot;AlarmEvent&quot;, &quot;type&quot;, &quot;bubbles&quot;, &quot;cancelable&quot;, &quot;eventPhase&quot;,
&quot;message&quot;);
}
La m&eacute;thode clone() red&eacute;finie doit renvoyer une nouvelle occurrence de la sous-classe Event personnalis&eacute;e, avec
toutes les propri&eacute;t&eacute;s personnalis&eacute;es d&eacute;finies pour correspondre &agrave; l’occurrence actuelle. Dans la m&eacute;thode toString()
red&eacute;finie, la m&eacute;thode d’utilitaire formatToString() (h&eacute;rit&eacute;e de Event) sert &agrave; fournir une cha&icirc;ne comportant le nom
du type personnalis&eacute;, ainsi que les noms et valeurs de toutes ses propri&eacute;t&eacute;s.
Derni&egrave;re mise &agrave; jour le 27/4/2013
151
152
Chapitre 9 : Utilisation de domaines
d’application
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le r&ocirc;le de la classe ApplicationDomain est de stocker un tableau des d&eacute;finitions ActionScript 3.0. L’ensemble du code
d’un fichier SWF est d&eacute;fini de sorte &agrave; exister dans un domaine d’application. Les domaines d’application servent &agrave;
partitionner les classes qui se trouvent dans un m&ecirc;me domaine de s&eacute;curit&eacute;. Ainsi, plusieurs d&eacute;finitions de la m&ecirc;me
classe peuvent exister et les enfants peuvent r&eacute;utiliser les d&eacute;finitions des parents.
Vous pouvez faire appel aux domaines d’application lors du chargement, au moyen de l’API de la classe Loader, d’un
fichier SWF externe &eacute;crit en ActionScript 3.0 (Notez que vous ne pouvez pas utiliser les domaines d’application
lorsque vous chargez une image ou un fichier SWF &eacute;crit en ActionScript 1.0 ou 2.0.) Toutes les d&eacute;finitions
ActionScript 3.0 contenues dans la classe charg&eacute;e sont stock&eacute;es dans le domaine d’application. Lorsque vous chargez
un fichier SWF, vous devez indiquer que le fichier doit &ecirc;tre inclus dans le m&ecirc;me domaine d’application que l’objet
Loader en attribuant au param&egrave;tre applicationDomain de l’objet LoaderContext la valeur
ApplicationDomain.currentDomain. Si vous placez le fichier SWF charg&eacute; dans le m&ecirc;me domaine d’application,
vous pourrez acc&eacute;der directement &agrave; ses classes, Cela s’av&egrave;re pratique si vous chargez un fichier SWF qui contient des
m&eacute;dias incorpor&eacute;s auxquels vous pouvez acc&eacute;der via les noms de classe associ&eacute;s, ou si vous voulez acc&eacute;der aux
m&eacute;thodes du fichier SWF charg&eacute;.
L’exemple suivant pr&eacute;suppose l’acc&egrave;s &agrave; un fichier Greeter.swf distinct d&eacute;finissant une m&eacute;thode publique nomm&eacute;e
welcome() :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de domaines d’application
package
{
import
import
import
import
import
import
flash.display.Loader;
flash.display.Sprite;
flash.events.*;
flash.net.URLRequest;
flash.system.ApplicationDomain;
flash.system.LoaderContext;
public class ApplicationDomainExample extends Sprite
{
private var ldr:Loader;
public function ApplicationDomainExample()
{
ldr = new Loader();
var req:URLRequest = new URLRequest(&quot;Greeter.swf&quot;);
var ldrContext:LoaderContext = new LoaderContext(false,
ApplicationDomain.currentDomain);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
ldr.load(req, ldrContext);
}
private function completeHandler(event:Event):void
{
var myGreeter:Class = ApplicationDomain.currentDomain.getDefinition(&quot;Greeter&quot;) as
Class;
var myGreeter:Greeter = Greeter(event.target.content);
var message:String = myGreeter.welcome(&quot;Tommy&quot;);
trace(message); // Hello, Tommy
}
}
}
Voir aussi l’exemple de classe ApplicationDomain dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plateforme Adobe Flash.
Voici d’autres points &agrave; garder &agrave; l’esprit lorsque vous utilisez les domaines d’application :
• L’ensemble du code d’un fichier SWF est d&eacute;fini de sorte &agrave; exister dans un domaine d’application. L’application
principale s’ex&eacute;cute dans le domaine d’application actif. Le domaine du syst&egrave;me contient tous les domaines
d’application, y compris le domaine actif ; il contient donc toutes les classes Flash Player.
• A l’exception du domaine du syst&egrave;me, tous les domaines d’application sont associ&eacute;s &agrave; un domaine parent. Le
domaine parent du domaine de l’application principale est le domaine du syst&egrave;me. Les classes charg&eacute;es ne sont
d&eacute;finies que si leur parent ne les d&eacute;finit pas encore. Vous ne pouvez pas remplacer une d&eacute;finition de classe charg&eacute;e
par une d&eacute;finition plus r&eacute;cente.
Le sch&eacute;ma suivant illustre une application qui charge du contenu &agrave; partir de divers fichiers SWF au sein d’un domaine
unique, domain1.com. Selon le contenu charg&eacute;, diff&eacute;rents domaines d’application peuvent &ecirc;tre utilis&eacute;s. Le texte
suivant d&eacute;crit la logique utilis&eacute;e pour d&eacute;finir le domaine d’application appropri&eacute; pour chaque fichier SWF de
l’application.
Derni&egrave;re mise &agrave; jour le 27/4/2013
153
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de domaines d’application
A. Utilisation A B. Utilisation B C. Utilisation C
Le fichier principal d’application est application1.swf. Il contient des objets Loader qui chargent du contenu &agrave; partir
d’autres fichiers SWF. Dans ce sc&eacute;nario, le domaine d’application 1 est actif. Utilisation A, Utilisation B et
Utilisation C illustrent les diff&eacute;rentes techniques permettant de d&eacute;finir le domaine d’application appropri&eacute; pour
chaque fichier SWF de l’application.
Utilisation A Partitionnez le fichier SWF enfant en cr&eacute;ant un enfant du domaine du syst&egrave;me. Dans le sch&eacute;ma, le
domaine d’application 2 est cr&eacute;&eacute; en tant qu’enfant du domaine du syst&egrave;me. Le fichier application2.swf est charg&eacute; dans
le domaine d’application 2 et ses d&eacute;finitions de classe sont ainsi partitionn&eacute;es &agrave; partir des classes d&eacute;finies dans
application1.swf.
Cette technique s’appliquera par exemple lorsqu’une ancienne application doit charger dynamiquement une nouvelle
version de la m&ecirc;me application sans cr&eacute;er de conflits. Les conflits sont &eacute;limin&eacute;s parce que m&ecirc;me si les noms de classe
sont les m&ecirc;mes, ils sont r&eacute;partis dans diff&eacute;rents domaines d’application.
Le code suivant cr&eacute;e un domaine d’application qui est un enfant du domaine du syst&egrave;me, puis commence &agrave; charger un
fichier SWF &agrave; l’aide de ce domaine d’application :
var appDomainA:ApplicationDomain = new ApplicationDomain();
var contextA:LoaderContext = new LoaderContext(false, appDomainA);
var loaderA:Loader = new Loader();
loaderA.load(new URLRequest(&quot;application2.swf&quot;), contextA);
Utilisation B Ajoutez de nouvelles d&eacute;finitions de classe aux d&eacute;finitions actuelles. Le domaine d’application de
module1.swf est d&eacute;fini sur le domaine actif (Domaine d’application 1). Vous pouvez alors ajouter au jeu actuel de
d&eacute;finitions de classe de l’application de nouvelles d&eacute;finitions de classe. Cela pourrait servir pour une biblioth&egrave;que
d’ex&eacute;cution partag&eacute;e appartenant &agrave; l’application principale. Le fichier SWF est trait&eacute; comme une biblioth&egrave;que partag&eacute;e
distante (RSL, remote shared library). Utilisez cette technique pour charger des RSL &agrave; l’aide d’un fichier de
pr&eacute;chargement avant le lancement de l’application.
Le code suivant charge un fichier SWF, en d&eacute;finissant son domaine d’application sur le domaine actif :
Derni&egrave;re mise &agrave; jour le 27/4/2013
154
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de domaines d’application
var appDomainB:ApplicationDomain = ApplicationDomain.currentDomain;
var contextB:LoaderContext = new LoaderContext(false, appDomainB);
var loaderB:Loader = new Loader();
loaderB.load(new URLRequest(&quot;module1.swf&quot;), contextB);
Utilisation C Utilisez les d&eacute;finitions de classe du parent en ajoutant un nouveau domaine enfant au domaine actif. Le
domaine d’application de module3.swf est un enfant du domaine actif, qui utilise pour toutes les classes les versions
du parent. Cette technique peut s’appliquer &agrave; un module d’une application Internet riche (RIA, Rich Internet
Application) &agrave; plusieurs &eacute;crans, qui serait charg&eacute; comme enfant de l’application principale et utiliserait les types de
cette derni&egrave;re. Si vous pouvez garantir que toutes les classes sont toujours mises &agrave; jour pour rester compatibles avec les
anciennes versions et que l’application de chargement est toujours plus r&eacute;cente que les contenus qu’elle charge, les
enfants utiliseront les versions des parents. L’utilisation d’un nouveau domaine d’application permet &eacute;galement de
d&eacute;charger toutes les d&eacute;finitions de classe en vue du nettoyage, &agrave; condition de veiller &agrave; ce qu’il ne subsiste aucune
r&eacute;f&eacute;rence au fichier SWF enfant.
Cette technique autorise les modules charg&eacute;s &agrave; partager les objets Singleton et les membres de classe statiques de l’objet
Loader.
Le code suivant cr&eacute;e un domaine enfant dans le domaine actif et commence &agrave; charger un fichier SWF &agrave; l’aide de ce
domaine d’application :
var appDomainC:ApplicationDomain = new ApplicationDomain(ApplicationDomain.currentDomain);
var contextC:LoaderContext = new LoaderContext(false, appDomainC);
var loaderC:Loader = new Loader();
loaderC.load(new URLRequest(&quot;module3.swf&quot;), contextC);
Derni&egrave;re mise &agrave; jour le 27/4/2013
155
156
Chapitre 10 : Programmation de
l’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La programmation des &eacute;l&eacute;ments visuels dans Adobe&reg; ActionScript&reg; 3.0 repose sur l’utilisation des objets d’affichage
sur la sc&egrave;ne. Vous pouvez, par exemple, ajouter, d&eacute;placer, supprimer et trier les objets d’affichage, appliquer des filtres
et des masques, dessiner des vecteurs et des graphiques bitmap, et ex&eacute;cuter des transformations en trois dimensions
par le biais de l’API de programmation de l’affichage ActionScript. Les classes principales permettant de programmer
l’affichage font partie du package flash.display.
Remarque : Adobe&reg; AIR™ fournit l’objet HTMLoader pour rendre et afficher un contenu HTML. L’objet HTMLLoader
effectue le rendu des &eacute;l&eacute;ments visuels du DOM HTML en tant qu’objet d’affichage unique. Il est impossible d’acc&eacute;der
directement &agrave; chaque &eacute;l&eacute;ment du DOM par le biais de la hi&eacute;rarchie de la liste d’affichage ActionScript. Vous acc&eacute;dez aux
&eacute;l&eacute;ments du DOM &agrave; l’aide de l’API DOM distincte propos&eacute;e par l’objet HTMLLoader.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Concepts fondamentaux de la programmation de
l’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Chaque application cr&eacute;&eacute;e par le biais d’ActionScript 3.0 poss&egrave;de une hi&eacute;rarchie d’objets d’affichage appel&eacute;e liste
d’affichage, comme l’indique l’illustration ci-dessous. La liste d’affichage contient tous les &eacute;l&eacute;ments visibles de
l’application.
Comme le montre cette illustration, les &eacute;l&eacute;ments d’affichage se rangent dans un ou plusieurs groupes suivants :
• Sc&egrave;ne
La sc&egrave;ne constitue le conteneur de base des objets d’affichage. Chaque application comporte un objet Stage, qui
contient tous les objets d’affichage &agrave; l’&eacute;cran. La sc&egrave;ne correspond au conteneur de plus haut niveau et domine la
hi&eacute;rarchie de la liste d’affichage :
Chaque fichier SWF est associ&eacute; &agrave; une classe ActionScript, appel&eacute;e classe principale du fichier SWF. Lorsqu’un fichier
SWF s’ouvre dans Flash Player ou Adobe AIR, Flash Player ou AIR appelle la fonction constructeur correspondant
&agrave; la classe et l’occurrence cr&eacute;&eacute;e (syst&eacute;matiquement un type d’objet d’affichage) est ajout&eacute;e en tant qu’enfant de
l’objet Stage. La classe principale d’un fichier SWF &eacute;tend syst&eacute;matiquement la classe Sprite (pour plus
d’informations, voir &laquo; Avantages de l’utilisation de la liste d’affichage &raquo; &agrave; la page 162).
Vous pouvez acc&eacute;der &agrave; la sc&egrave;ne via la propri&eacute;t&eacute; stage de toute occurrence de DisplayObject. Pour plus
d’informations, voir &laquo; D&eacute;finition des propri&eacute;t&eacute;s de la sc&egrave;ne &raquo; &agrave; la page 171.
• Objets d’affichage
Derni&egrave;re mise &agrave; jour le 27/4/2013
157
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Dans ActionScript 3.0, tous les &eacute;l&eacute;ments qui apparaissent &agrave; l’&eacute;cran dans une application sont des types d’objets
d’affichage. Le package flash.display comprend une classe DisplayObject, qui correspond &agrave; une classe de base
&eacute;tendue par diverses autres classes. Ces autres classes repr&eacute;sentent divers types d’objets d’affichage, tels que les
formes vectorielles, les clips et les champs de texte, pour n’en citer que quelques-uns. Pour une pr&eacute;sentation de ces
classes, voir &laquo; Avantages de l’utilisation de la liste d’affichage &raquo; &agrave; la page 162.
• Conteneurs d’objets d’affichage
Les conteneurs d’objets d’affichage sont des types sp&eacute;ciaux d’objets d’affichage qui, outre leur propre repr&eacute;sentation
visuelle, peuvent &eacute;galement comporter des objets enfant qui sont aussi des objets d’affichage.
La classe DisplayObjectContainer est une sous-classe de la classe DisplayObject. Un objet DisplayObjectContainer
peut contenir plusieurs objets d’affichage dans la liste d’enfants correspondante. Par exemple, l’illustration suivante
contient un type d’objet DisplayObjectContainer appel&eacute; Sprite qui comporte divers objets d’affichage :
A
B
C
D
A. Objet SimpleButton. Ce type d’objet d’affichage poss&egrave;de des &eacute;tats &laquo; up &raquo;, &laquo; down &raquo; et &laquo; over &raquo;. B. Objet Bitmap. Dans ce cas de figure,
l’objet Bitmap a &eacute;t&eacute; charg&eacute; &agrave; partir d’un JPEG externe via un objet Loader. C. Objet Shape. Le &laquo; cadre d’image &raquo; contient un rectangle
arrondi dessin&eacute; dans ActionScript. Un filtre Ombre port&eacute;e est appliqu&eacute; &agrave; cet objet Shape. D. Objet TextField.
Dans le contexte des objets d’affichage, les objets DisplayObjectContainer portent &eacute;galement le nom de conteneurs
d’objets d’affichage voire, tout simplement, de conteneurs. Comme indiqu&eacute; pr&eacute;c&eacute;demment, la sc&egrave;ne est un
conteneur d’objets d’affichage.
Bien que tous les objets d’affichage visibles h&eacute;ritent leurs caract&eacute;ristiques de la classe DisplayObject, le type de
chacun d’eux correspond &agrave; une sous-classe d&eacute;termin&eacute;e de la classe DisplayObject. Il existe, par exemple, une
fonction constructeur associ&eacute;e &agrave; la classe Shape ou &agrave; la classe Video, mais aucune fonction constructeur pour la
classe DisplayObject.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants utilis&eacute;s dans le cadre de la programmation des graphiques
ActionScript :
Alpha Valeur colorim&eacute;trique repr&eacute;sentant le montant de transparence (ou, plus pr&eacute;cis&eacute;ment, le montant d’opacit&eacute;)
d’une couleur. Ainsi, une couleur dot&eacute;e d’une valeur de canal alpha de 60 % n’affiche que 60 % de son intensit&eacute; totale
et est transparente &agrave; 40 %.
Graphique bitmap Graphique d&eacute;fini en termes informatiques sous forme de grille (lignes et colonnes) de pixels de
couleur. Les exemples courants de graphiques bitmap incluent les photos num&eacute;riques et images similaires.
Derni&egrave;re mise &agrave; jour le 27/4/2013
158
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Mode de fondu Indique l’interaction requise du contenu de deux images qui se chevauchent. En r&egrave;gle g&eacute;n&eacute;rale, une
image opaque superpos&eacute;e &agrave; une autre image se contente de bloquer l’image plac&eacute;e sous elle, qui est donc totalement
invisible. Toutefois, divers modes de fondu entra&icirc;nent le m&eacute;lange des couleurs de diverses fa&ccedil;ons de sorte que le
r&eacute;sultat corresponde &agrave; une combinaison des deux images.
Liste d’affichage Hi&eacute;rarchie des objets d’affichage rendus sous forme de contenu visible &agrave; l’&eacute;cran par Flash Player
et AIR. La sc&egrave;ne correspond &agrave; la racine de la liste d’affichage et tous les objets d’affichage associ&eacute;s &agrave; la sc&egrave;ne ou &agrave; l’un
de ses enfants composent la liste d’affichage (m&ecirc;me si l’objet n’est pas &agrave; proprement parler rendu, parce qu’il r&eacute;side en
dehors de la sc&egrave;ne, par exemple).
Objet d’affichage Objet repr&eacute;sentant un type de contenu visuel dans Flash Player ou AIR. La liste d’affichage ne
contient que des objets d’affichage et toutes les classes d’objets d’affichage sont des sous-classes de la classe
DisplayObject.
Conteneur d’objet d’affichage Type sp&eacute;cial d’objet d’affichage qui, outre (g&eacute;n&eacute;ralement) sa propre repr&eacute;sentation
visuelle, peut comporter des objets d’affichage enfant.
Classe principale du fichier SWF Classe qui d&eacute;finit le comportement de l’objet d’affichage de plus haut niveau d’un
fichier SWF, soit, fondamentalement, la classe associ&eacute;e au fichier SWF en tant que tel. Ainsi, dans un fichier SWF
g&eacute;n&eacute;r&eacute; dans un outil de cr&eacute;ation Flash, la classe principale correspond &agrave; la classe du document. Elle poss&egrave;de un
&laquo; sc&eacute;nario principal &raquo; qui int&egrave;gre tous les autres sc&eacute;narios. La classe principale du fichier SWF correspond &agrave; la classe
dont le sc&eacute;nario principal est une occurrence.
Masquage Technique consistant &agrave; ne pas afficher certaines parties d’une image (ou, &agrave; l’inverse, &agrave; n’afficher que
certaines parties d’une image). Les sections de l’image masque deviennent transparentes, afin d’assurer la visibilit&eacute; du
contenu sous-jacent. Ce terme se r&eacute;f&egrave;re &agrave; la bande utilis&eacute;e par un peintre en b&acirc;timent pour emp&ecirc;cher la peinture d’&ecirc;tre
appliqu&eacute;e &agrave; certaines sections.
Sc&egrave;ne Conteneur visuel correspondant &agrave; la base ou &agrave; l’arri&egrave;re-plan de tout contenu visuel dans un fichier SWF.
Transformation Modification des caract&eacute;ristiques visuelles d’un graphique (rotation de l’objet, modification de son
&eacute;chelle, d&eacute;salignement, d&eacute;formation ou alt&eacute;ration de sa couleur).
Graphique vectoriel Graphique d&eacute;fini en termes informatiques par des lignes et des formes dessin&eacute;es en fonction de
caract&eacute;ristiques d&eacute;termin&eacute;es (&eacute;paisseur, longueur, taille, angle et position, par exemple).
Derni&egrave;re mise &agrave; jour le 27/4/2013
159
160
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Classes d’affichage de base
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le package flash.display ActionScript 3.0 contient des classes destin&eacute;es aux objets visuels susceptibles d’appara&icirc;tre
dans Flash Player ou AIR. L’illustration suivante identifie les relations entre les sous-classes de ces classes d’objets
d’affichage de base.
DisplayObject
AVM1Movie
Bitmap
InteractiveObject
DisplayObjectContainer SimpleButton
Loader
Sprite
MorphShape
Shape
StaticText
Video
TextField
Stage
MovieClip
L’illustration indique ce dont h&eacute;ritent les classes d’objets d’affichage. Notez que certaines de ces classes, en particulier
StaticText, TextField et Video, ne figurent pas dans le package flash.display, mais h&eacute;ritent toutefois des caract&eacute;ristiques
de la classe DisplayObject.
Toutes les classes qui &eacute;tendent la classe DisplayObject h&eacute;ritent de ses m&eacute;thodes et propri&eacute;t&eacute;s. Pour plus
d’informations, voir &laquo; Propri&eacute;t&eacute;s et m&eacute;thodes de la classe DisplayObject &raquo; &agrave; la page 165.
Vous pouvez cr&eacute;er une occurrence d’un objet des classes suivantes, qui figurent dans le package flash.display :
• Bitmap : la classe Bitmap permet de d&eacute;finir des objets bitmap, qu’ils soient charg&eacute;s &agrave; partir de fichiers externes ou
rendus via ActionScript. Vous pouvez charger des bitmaps &agrave; partir de fichiers externes par le biais de la classe
Loader. Libre &agrave; vous de charger des fichiers GIF, JPG ou PNG. Vous pouvez &eacute;galement cr&eacute;er un objet BitmapData
&agrave; partir de donn&eacute;es personnalis&eacute;es, puis cr&eacute;er un objet Bitmap qui utilise ces donn&eacute;es. Les m&eacute;thodes de la classe
BitmapData permettent de modifier les bitmaps, qu’ils soient charg&eacute;s ou cr&eacute;&eacute;s dans ActionScript. Pour plus
d’informations, voir &laquo; Chargement d’objets d’affichage &raquo; &agrave; la page 206 et le chapitre &laquo; Utilisation des images
bitmap &raquo; &agrave; la page 251.
• Loader : la classe Loader permet de charger des ressources externes (fichiers SWF ou graphiques). Pour plus
d’informations, voir &laquo; Chargement dynamique du contenu d’affichage &raquo; &agrave; la page 205.
• Shape : la classe Shape permet de cr&eacute;er des graphiques vectoriels, tels que des rectangles, des lignes, des cercles, etc.
Pour plus d’informations, voir &laquo; Utilisation de l’API de dessin &raquo; &agrave; la page 230.
• SimpleButton : un objet SimpleButton est une repr&eacute;sentation ActionScript d’un symbole de bouton cr&eacute;&eacute; dans l’outil
de programmation Flash. Une occurrence de SimpleButton est dot&eacute;e de quatre &eacute;tats de bouton : &laquo; up &raquo;, &laquo; down &raquo;,
&laquo; over &raquo; et &laquo; hit test &raquo; (zone qui r&eacute;agit aux &eacute;v&eacute;nements souris et clavier).
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
• Sprite : un objet Sprite peut contenir des graphiques qui lui sont propres, ainsi que des objets d’affichage enfant (la
classe Sprite &eacute;tend la classe DisplayObjectContainer). Pour plus d’informations, voir &laquo; Utilisation de conteneurs
d’objets d’affichage &raquo; &agrave; la page 165 et &laquo; Utilisation de l’API de dessin &raquo; &agrave; la page 230.
• MovieClip : un objet MovieClip est la forme ActionScript d’un symbole de clip cr&eacute;&eacute; dans l’outil de programmation
Flash. En pratique, un objet MovieClip est similaire &agrave; un objet Sprite, &agrave; une exception pr&egrave;s : il poss&egrave;de &eacute;galement
un sc&eacute;nario. Pour plus d’informations, voir &laquo; Utilisation des clips &raquo; &agrave; la page 333.
Les classes suivantes, qui ne figurent pas dans le package flash.display, sont des sous-classes de la classe DisplayObject :
• La classe TextField, qui figure dans le package flash.text, est un objet d’affichage destin&eacute; &agrave; l’affichage et &agrave; la saisie de
texte. Pour plus d’informations, voir &laquo; Principes de base de l’utilisation du texte &raquo; &agrave; la page 383.
• La classe TextLine, qui figure dans le package flash.text.engine, correspond &agrave; l’objet d’affichage permettant
d’afficher des lignes de texte compos&eacute;es par Flash Text Engine et Text Layout Framework. Pour plus
d’informations, voir &laquo; Utilisation de Flash Text Engine &raquo; &agrave; la page 410 et &laquo; Utilisation de Text Layout Framework &raquo;
&agrave; la page 440.
• La classe Video, qui figure dans le package flash.media, correspond &agrave; l’objet d’affichage utilis&eacute; pour afficher des
fichiers vid&eacute;o. Pour plus d’informations, voir &laquo; Utilisation de la vid&eacute;o &raquo; &agrave; la page 489.
Les classes suivantes du package flash.display &eacute;tendent la classe DisplayObject, mais il est impossible d’en cr&eacute;er une
occurrence. Parce qu’elles combinent des fonctionnalit&eacute;s communes en une classe unique, elles servent plut&ocirc;t de
classes parent &agrave; d’autres objets d’affichage.
• AVM1Movie : la classe AVM1Movie permet de repr&eacute;senter des fichiers SWF charg&eacute;s cr&eacute;&eacute;s dans ActionScript 1.0
et 2.0.
• DisplayObjectContainer : les classes Loader, Stage, Sprite et MovieClip &eacute;tendent chacune la classe
DisplayObjectContainer. Pour plus d’informations, voir &laquo; Utilisation de conteneurs d’objets d’affichage &raquo; &agrave; la
page 165.
• InteractiveObject : classe de base de tous les objets utilis&eacute;s pour interagir avec la souris et le clavier. Les objets
SimpleButton, TextField, Loader, Sprite, Stage et MovieClip sont tous des sous-classes de la classe
InteractiveObject. Pour plus d’informations sur la cr&eacute;ation d'une interaction de souris ou de clavier, voir
&laquo; Principes de base de l’interaction utilisateur &raquo; &agrave; la page 574.
• MorphShape : ces objets sont g&eacute;n&eacute;r&eacute;s lors de la cr&eacute;ation d’une interpolation de forme dans l’outil de
programmation Flash. Il est impossible d’en cr&eacute;er des occurrences par le biais d’ActionScript, mais vous pouvez y
acc&eacute;der dans la liste d’affichage.
• Sc&egrave;ne : la classe Stage &eacute;tend la classe DisplayObjectContainer. Il n’existe qu’une seule occurrence de sc&egrave;ne par
application, et elle figure au sommet de la hi&eacute;rarchie de la liste d’affichage. Vous pouvez acc&eacute;der &agrave; la sc&egrave;ne via la
propri&eacute;t&eacute; stage de toute occurrence de DisplayObject. Pour plus d’informations, voir &laquo; D&eacute;finition des propri&eacute;t&eacute;s
de la sc&egrave;ne &raquo; &agrave; la page 171.
Par ailleurs, la classe StaticText, qui figure dans le package flash.text, &eacute;tend la classe DisplayObject, mais il est
impossible d’en cr&eacute;er une occurrence dans du code. Les champs de texte statique sont cr&eacute;&eacute;s dans Flash uniquement.
Les classes suivantes ne sont ni des objets d’affichage, ni des conteneurs d’objets d’affichage et n’apparaissent pas dans
la liste d’affichage, mais affichent des graphiques sur la sc&egrave;ne. Elles dessinent des &eacute;l&eacute;ments dans un rectangle, appel&eacute;
fen&ecirc;tre d’affichage, positionn&eacute; relativement &agrave; la sc&egrave;ne.
• StageVideo : la classe StageVideo affiche le contenu vid&eacute;o en faisant appel, dans la mesure du possible, &agrave;
l’acc&eacute;l&eacute;ration mat&eacute;rielle. Cette classe est disponible &agrave; partir de Flash Player 10.2. Pour plus d’informations, voir
&laquo; Pr&eacute;sentation &agrave; acc&eacute;l&eacute;ration mat&eacute;rielle par le biais de la classe StageVideo &raquo; &agrave; la page 528.
• StageWebView : la classe StageWebView affiche le contenu HTML. Elle est prise en charge depuis la version 2.5
d’AIR. Pour plus d’informations, voir &laquo; Objets StageWebView &raquo; &agrave; la page 1068.
Derni&egrave;re mise &agrave; jour le 27/4/2013
161
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Les classes fl.display suivantes proposent des fonctionnalit&eacute;s &eacute;quivalentes &agrave; celles des classes flash.display.Loader et
LoaderInfo. Utilisez-les au lieu des classes flash.display &eacute;quivalentes en cas de d&eacute;veloppement dans l’environnement
Flash Professional (CS5.5 ou ult&eacute;rieur). Dans cet environnement, ces classes permettent de r&eacute;soudre les probl&egrave;mes li&eacute;s
&agrave; TLF avec pr&eacute;chargement RSL. Pour plus d’informations, voir &laquo; Utilisation des classes ProLoader et ProLoaderInfo &raquo;
&agrave; la page 210.
• fl.display.ProLoader : &eacute;quivalente &agrave; flash.display.Loader
• fl.display.ProLoaderInfo : &eacute;quivalente &agrave; flash.display.LoaderInfo
Avantages de l’utilisation de la liste d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans ActionScript 3.0, des classes distinctes sont r&eacute;serv&eacute;es aux diff&eacute;rents types d’objets d’affichage. Dans
ActionScript 1.0 et 2.0, un grand nombre de types d’objets identiques sont inclus dans une m&ecirc;me classe : MovieClip.
Cette individualisation des classes et la structure hi&eacute;rarchique des listes d’affichage pr&eacute;sentent les avantages suivants :
• Rendu plus efficace et utilisation r&eacute;duite de la m&eacute;moire
• Gestion optimis&eacute;e de la profondeur
• Parcours entier de la liste d’affichage
• Objets d’affichage absents de la liste
• Classement simplifi&eacute; en sous-classes des objets d’affichage
Rendu plus efficace et taille r&eacute;duite des fichiers
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans ActionScript 1.0 et 2.0, vous ne pouvez dessiner des formes que dans un objet MovieClip. ActionScript 3.0
int&egrave;gre des classes d’objets d’affichage plus simples, dans lesquelles vous pouvez dessiner des formes. Parce que ces
classes d’objets d’affichage ActionScript 3.0 ne contiennent pas le jeu complet de m&eacute;thodes et propri&eacute;t&eacute;s associ&eacute;es &agrave; un
objet MovieClip, elles mobilisent moins de ressources en m&eacute;moire et processeur.
Par exemple, &agrave; l’encontre d’un objet Shape, chaque objet MovieClip comporte des propri&eacute;t&eacute;s associ&eacute;es au sc&eacute;nario du
clip. Les propri&eacute;t&eacute;s de gestion du sc&eacute;nario font parfois appel &agrave; un volume consid&eacute;rable de ressources en m&eacute;moire et
processeur. Dans ActionScript 3.0, l’utilisation de l’objet Shape se traduit par une am&eacute;lioration des performances.
L’objet Shape n&eacute;cessite moins de ressources que l’objet MovieClip, plus complexe. Flash Player et AIR n’ont pas besoin
de g&eacute;rer les propri&eacute;t&eacute;s MovieClip inutilis&eacute;es, optimisant ainsi la vitesse et r&eacute;duisant les besoins de m&eacute;moire de l’objet.
Gestion optimis&eacute;e de la profondeur
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans ActionScript 1.0 et 2.0, la profondeur &eacute;tait g&eacute;r&eacute;e par un syst&egrave;me et des m&eacute;thodes de gestion lin&eacute;aire de la
profondeur, tels que getNextHighestDepth().
ActionScript 3.0 comprend la classe DisplayObjectContainer, dont les m&eacute;thodes et propri&eacute;t&eacute;s sont mieux adapt&eacute;es &agrave;
la gestion de la profondeur des objets d’affichage.
Derni&egrave;re mise &agrave; jour le 27/4/2013
162
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Dans ActionScript 3.0, lorsque vous d&eacute;placez un objet d’affichage au sein de la liste des enfants d’une occurrence de
DisplayObjectContainer, les autres enfants du conteneur d’objets d’affichage sont automatiquement repositionn&eacute;s et
des positions d’index enfant appropri&eacute;es leur sont affect&eacute;es dans le conteneur d’objets d’affichage.
Par ailleurs, ActionScript 3.0 permet syst&eacute;matiquement de d&eacute;tecter tous les objets enfant de tout conteneur d’objets
d’affichage. Chaque occurrence de DisplayObjectContainer poss&egrave;de une propri&eacute;t&eacute; numChildren, qui indique le
nombre d’enfants figurant dans le conteneur d’objets d’affichage. Puisque la liste des enfants d’un conteneur d’objets
d’affichage correspond syst&eacute;matiquement &agrave; une liste index&eacute;e, vous pouvez examiner chaque objet de la liste de la
position d’index 0 &agrave; la derni&egrave;re position d’index (numChildren - 1). Cette technique n’&eacute;tait pas propos&eacute;e par les
m&eacute;thodes et propri&eacute;t&eacute;s d’un objet MovieClip dans ActionScript 1.0 et 2.0.
ActionScript 3.0 permet de parcourir ais&eacute;ment et s&eacute;quentiellement la liste d’affichage, car les num&eacute;ros d’index de la
liste des enfants d’un conteneur d’objets d’affichage se suivent. Parcourir la liste d’affichage et g&eacute;rer la profondeur des
objets est d&eacute;sormais beaucoup plus simple que dans ActionScript 1.0 et 2.0. Dans ActionScript 1.0 et 2.0, un clip
pouvait en effet contenir des objets dont l’ordre de profondeur n’&eacute;tait pas s&eacute;quentiel, ce qui rendait parfois le parcours
de la liste d’objets difficile. Dans ActionScript 3.0, chaque liste d’enfants d’un conteneur d’objets d’affichage est mise
en cache en interne sous forme de tableau, ce qui permet des recherches extr&ecirc;mement rapides (par index). Passer en
boucle sur tous les enfants d’un conteneur d’objets d’affichage s’av&egrave;re &eacute;galement tr&egrave;s rapide.
Dans ActionScript 3.0, vous pouvez &eacute;galement acc&eacute;der aux enfants d’un conteneur d’objets d’affichage par le biais de
la m&eacute;thode getChildByName() de la classe DisplayObjectContainer.
Parcours entier de la liste d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 1.0 et 2.0 ne vous permettaient pas d’acc&eacute;der &agrave; certains objets, telles les formes vectorielles, dessin&eacute;es dans
l’outil de programmation Flash. Dans ActionScript 3.0, vous pouvez acc&eacute;der &agrave; tous les objets de la liste d’affichage,
qu’ils aient &eacute;t&eacute; cr&eacute;&eacute;s en ActionScript ou dans l’outil de programmation Flash. Pour plus d’informations, voir
&laquo; Parcours de la liste d’affichage &raquo; &agrave; la page 169.
Objets d’affichage absents de la liste
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 permet de cr&eacute;er des objets d’affichage qui ne figurent pas dans la liste d’affichage visible. Ils portent
le nom d’objets d’affichage hors liste. Un objet d’affichage n’est ajout&eacute; &agrave; la liste d’affichage visible que lorsque vous
appelez la m&eacute;thode addChild() ou addChildAt() d’une occurrence de DisplayObjectContainer qui a d&eacute;j&agrave; &eacute;t&eacute;
int&eacute;gr&eacute;e &agrave; la liste d’affichage.
Les objets d’affichage hors liste permettent d’assembler des objets d’affichage complexes, tels que ceux qui poss&egrave;dent
plusieurs conteneurs d’objets d’affichage comportant plusieurs objets d’affichage. En n’int&eacute;grant pas &agrave; la liste des
objets d’affichage, vous pouvez assembler des objets complexes sans avoir &agrave; effectuer leur rendu. Vous &eacute;conomisez
ainsi le temps de traitement correspondant. Vous pouvez alors ajouter un objet hors liste &agrave; la liste d’affichage au
moment voulu. Il est &eacute;galement possible d’int&eacute;grer un enfant d’un conteneur d’objets d’affichage &agrave; la liste d’affichage,
puis de l’en extraire ou d’en modifier la position dans cette derni&egrave;re, le cas &eacute;ch&eacute;ant.
Derni&egrave;re mise &agrave; jour le 27/4/2013
163
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Classement simplifi&eacute; en sous-classes des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans ActionScript 1.0 et 2.0, il &eacute;tait souvent n&eacute;cessaire d’ajouter de nouveaux objets MovieClip &agrave; un fichier SWF pour
cr&eacute;er des formes de base ou afficher des bitmaps. Dans ActionScript 3.0, la classe DisplayObject comprend un grand
nombre de sous-classes int&eacute;gr&eacute;es, telles que Shape et Bitmap. Parce que les classes d’ActionScript 3.0 sont plus
sp&eacute;cialis&eacute;es pour des types sp&eacute;cifiques d’objets, il est plus simple de cr&eacute;er des sous-classes de base des classes int&eacute;gr&eacute;es.
Par exemple, pour dessiner un cercle dans ActionScript 2.0, vous pourriez cr&eacute;er une classe CustomCircle qui &eacute;tend la
classe MovieClip lors de la cr&eacute;ation d’une occurrence d’un objet de la classe personnalis&eacute;e. N&eacute;anmoins, cette classe
comprendrait &eacute;galement diverses propri&eacute;t&eacute;s et m&eacute;thodes &eacute;manant de la classe MovieClip (telles que totalFrames) qui
ne s’appliquent pas &agrave; elle. Dans ActionScript 3.0, vous pouvez toutefois cr&eacute;er une classe CustomCircle qui &eacute;tend l’objet
Shape et, de ce fait, ne comprend pas les propri&eacute;t&eacute;s et m&eacute;thodes sans rapport contenues dans la classe MovieClip. Le
code suivant illustre un exemple de classe CustomCircle :
import flash.display.*;
public class CustomCircle extends Shape
{
var xPos:Number;
var yPos:Number;
var radius:Number;
var color:uint;
public function CustomCircle(xInput:Number,
yInput:Number,
rInput:Number,
colorInput:uint)
{
xPos = xInput;
yPos = yInput;
radius = rInput;
color = colorInput;
this.graphics.beginFill(color);
this.graphics.drawCircle(xPos, yPos, radius);
}
}
Utilisation des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Maintenant que vous ma&icirc;trisez les bases de la sc&egrave;ne, des objets d’affichage, des conteneurs d’objets d’affichage et de la
liste d’affichage, cette section contient des informations plus d&eacute;taill&eacute;es relatives &agrave; l’utilisation des objets d’affichage
dans ActionScript 3.0.
Derni&egrave;re mise &agrave; jour le 27/4/2013
164
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Propri&eacute;t&eacute;s et m&eacute;thodes de la classe DisplayObject
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Tous les objets d’affichage sont des sous-classes de la classe DisplayObject et, de ce fait, h&eacute;ritent des propri&eacute;t&eacute;s et
m&eacute;thodes de cette derni&egrave;re. Les propri&eacute;t&eacute;s dont ils h&eacute;ritent correspondent aux propri&eacute;t&eacute;s de base qui s’appliquent &agrave;
tous les objets d’affichage. Par exemple, chaque objet d’affichage poss&egrave;de une propri&eacute;t&eacute; x et une propri&eacute;t&eacute; y qui
indiquent sa position dans son conteneur d’objets d’affichage.
Il est impossible de cr&eacute;er une occurrence de DisplayObject &agrave; l’aide du constructeur de la classe DisplayObject. Vous
devez cr&eacute;er un autre type d’objet (un objet qui est une sous-classe de la classe DisplayObject), tel Sprite, pour cr&eacute;er une
occurrence d’objet par le biais de l’op&eacute;rateur new. Par ailleurs, pour cr&eacute;er une classe d’objet d’affichage personnalis&eacute;e,
vous devez cr&eacute;er une sous-classe de l’une des sous-classes d’objets d’affichage ayant une fonction constructeur
utilisable (telle que la classe Shape ou la classe Sprite). Pour plus d’informations, voir la description de la classe
DisplayObject dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Ajout d’objets d’affichage &agrave; la liste d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous cr&eacute;ez une occurrence d’un objet d’affichage, elle n’appara&icirc;t pas &agrave; l’&eacute;cran (sur la sc&egrave;ne) tant que vous ne
l’avez pas ajout&eacute;e &agrave; un conteneur d’objets d’affichage figurant dans la liste d’affichage. Par exemple, dans le code
suivant, l’objet myText TextField n’est pas visible si vous omettez la derni&egrave;re ligne de code. Dans la derni&egrave;re ligne de
code, le mot-cl&eacute; this doit se r&eacute;f&eacute;rer &agrave; un conteneur d’objets d’affichage figurant d&eacute;j&agrave; dans la liste d’affichage.
import flash.display.*;
import flash.text.TextField;
var myText:TextField = new TextField();
myText.text = &quot;Buenos dias.&quot;;
this.addChild(myText);
Lorsque vous ajoutez un &eacute;l&eacute;ment visuel &agrave; la sc&egrave;ne, il devient un enfant de cette derni&egrave;re. Le premier fichier SWF charg&eacute;
dans une application (tel celui int&eacute;gr&eacute; &agrave; une page HTML) est automatiquement ajout&eacute; en tant qu’enfant de la sc&egrave;ne. Il
peut s’agir de n’importe quel type d’objet qui &eacute;tend la classe Sprite.
Tout objet d’affichage cr&eacute;&eacute; sans utiliser ActionScript (par exemple en ajoutant une balise MXML dans un fichier
MXML Flex ou en pla&ccedil;ant un &eacute;l&eacute;ment sur la sc&egrave;ne dans Flash Professional) est ajout&eacute; &agrave; la liste d’affichage. Bien que
vous n’ajoutiez pas ces objets d’affichage par le biais d’ActionScript, vous pouvez y acc&eacute;der via ActionScript. Par
exemple, le code suivant r&egrave;gle la largeur d’un objet appel&eacute; button1, qui a &eacute;t&eacute; ajout&eacute; dans l’outil de programmation (et
non via ActionScript) :
button1.width = 200;
Utilisation de conteneurs d’objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Si un objet DisplayObjectContainer est supprim&eacute; de la liste d’affichage ou s’il est transf&eacute;r&eacute; ou transform&eacute; d’une autre
fa&ccedil;on, chaque objet d’affichage de DisplayObjectContainer est &eacute;galement supprim&eacute;, transf&eacute;r&eacute; ou transform&eacute;.
Un conteneur d’objets d’affichage correspond &agrave; un type d’objet d’affichage et peut &ecirc;tre ajout&eacute; &agrave; un autre conteneur
d’objets d’affichage. Par exemple, l’image suivante illustre un conteneur d’objets d’affichage, pictureScreen, qui
comporte une forme de contour et quatre autres conteneurs d’objets d’affichage (de type PictureFrame) :
Derni&egrave;re mise &agrave; jour le 27/4/2013
165
166
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
A
B
A. Forme d&eacute;finissant la bordure du conteneur d’objets d’affichage pictureScreen B. Quatre conteneurs d’objets d’affichage, qui sont des enfants
de l’objet pictureScreen
Pour qu’un objet d’affichage apparaisse dans la liste d’affichage, vous devez l’ajouter &agrave; un conteneur d’objets
d’affichage figurant dans la liste d’affichage. A cet effet, vous utilisez la m&eacute;thode addChild() ou la m&eacute;thode
addChildAt() de l’objet conteneur. Par exemple, sans la derni&egrave;re ligne du code suivant, l’objet myTextField ne
s’afficherait pas :
var myTextField:TextField = new TextField();
myTextField.text = &quot;hello&quot;;
this.root.addChild(myTextField);
Dans cet exemple de code, this.root pointe vers le conteneur d’objets d’affichage MovieClip qui comporte le code.
Dans votre propre code, vous pouvez stipuler un autre conteneur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Utilisez la m&eacute;thode addChildAt() pour ajouter l’enfant &agrave; une position d&eacute;termin&eacute;e de la liste des enfants du conteneur
d’objets d’affichage. Ces positions d’index bas&eacute;es sur z&eacute;ro dans la liste des enfants se r&eacute;f&egrave;rent &agrave; l’ordre d’apparition (de
l’avant &agrave; l’arri&egrave;re) des objets d’affichage. Consid&eacute;rons par exemple les trois objets d’affichage suivants. Chaque objet a
&eacute;t&eacute; cr&eacute;&eacute; &agrave; partir d’une classe personnalis&eacute;e appel&eacute;e Ball.
L’ordre d’apparition de ces objets d’affichage dans leur conteneur peut &ecirc;tre modifi&eacute; par le biais de la m&eacute;thode
addChildAt(). Consid&eacute;rons par exemple le code qui suit :
ball_A = new Ball(0xFFCC00, &quot;a&quot;);
ball_A.name = &quot;ball_A&quot;;
ball_A.x = 20;
ball_A.y = 20;
container.addChild(ball_A);
ball_B = new Ball(0xFFCC00, &quot;b&quot;);
ball_B.name = &quot;ball_B&quot;;
ball_B.x = 70;
ball_B.y = 20;
container.addChild(ball_B);
ball_C = new Ball(0xFFCC00, &quot;c&quot;);
ball_C.name = &quot;ball_C&quot;;
ball_C.x = 40;
ball_C.y = 60;
container.addChildAt(ball_C, 1);
Une fois ce code ex&eacute;cut&eacute;, les objets d’affichage sont plac&eacute;s comme suit dans l’objet DisplayObjectContainer
container. Notez l’ordre d’apparition des objets.
Pour placer un objet en t&ecirc;te de la liste d’affichage, il suffit de l’ajouter &agrave; nouveau &agrave; celle-ci. Par exemple, apr&egrave;s le code
pr&eacute;c&eacute;dent, utilisez la ligne de code suivante pour placer ball_A en premi&egrave;re position dans la pile :
container.addChild(ball_A);
Ce code supprime ball_A de son emplacement actuel dans la liste d’affichage de container, et l’ajoute ensuite au
sommet de la liste, ce qui a pour effet de le placer en haut de l’empilement d’objets.
Derni&egrave;re mise &agrave; jour le 27/4/2013
167
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Vous disposez de la m&eacute;thode getChildAt() pour v&eacute;rifier l’ordre d’apparition des objets d’affichage. La m&eacute;thode
getChildAt() renvoie les objets enfant d’un conteneur en fonction du num&eacute;ro d’index transmis. Par exemple, le code
suivant r&eacute;v&egrave;le le nom des objets d’affichage plac&eacute;s &agrave; des positions diverses dans la liste des enfants de l’objet
DisplayObjectContainer container :
trace(container.getChildAt(0).name); // ball_A
trace(container.getChildAt(1).name); // ball_C
trace(container.getChildAt(2).name); // ball_B
Si vous supprimez un objet d’affichage de la liste des enfants de son conteneur parent, les &eacute;l&eacute;ments de la liste ayant un
indice plus &eacute;lev&eacute; descendent tous d’une position dans l’index des enfants. Ainsi, si nous reprenons l’exemple
pr&eacute;c&eacute;dent, le code ci-apr&egrave;s illustre le transfert de l’objet d’affichage qui occupait la position 2 dans l’objet
DisplayObjectContainer container vers la position 1 suite &agrave; la suppression d’un objet d’affichage occupant une
position inf&eacute;rieure dans la liste d’enfants :
container.removeChild(ball_C);
trace(container.getChildAt(0).name); // ball_A
trace(container.getChildAt(1).name); // ball_B
Les m&eacute;thodes removeChild() et removeChildAt() ne suppriment pas enti&egrave;rement une occurrence d’objet
d’affichage. Elles se contentent de la supprimer de la liste des enfants du conteneur. Une autre variable peut continuer
&agrave; faire r&eacute;f&eacute;rence &agrave; l’occurrence (utilisez l’op&eacute;rateur delete pour supprimer totalement un objet).
Un objet d’affichage ne poss&eacute;dant qu’un seul conteneur parent, vous ne pouvez ajouter une occurrence d’objet
d’affichage qu’&agrave; un seul conteneur d’objets d’affichage. Par exemple, le code suivant indique que l’objet d’affichage tf1
ne peut figurer que dans un seul conteneur (soit, dans ce cas, un Sprite, qui &eacute;tend la classe DisplayObjectContainer) :
tf1:TextField = new TextField();
tf2:TextField = new TextField();
tf1.name = &quot;text 1&quot;;
tf2.name = &quot;text 2&quot;;
container1:Sprite = new Sprite();
container2:Sprite = new Sprite();
container1.addChild(tf1);
container1.addChild(tf2);
container2.addChild(tf1);
trace(container1.numChildren); // 1
trace(container1.getChildAt(0).name); // text 2
trace(container2.numChildren); // 1
trace(container2.getChildAt(0).name); // text 1
Si vous ajoutez &agrave; un conteneur d’objets d’affichage un objet qui est d&eacute;j&agrave; contenu dans un autre conteneur d’objets
d’affichage, l’objet sera supprim&eacute; de la liste des enfants de ce dernier.
Outre les m&eacute;thodes d&eacute;crites pr&eacute;c&eacute;demment, la classe DisplayObjectContainer d&eacute;finit plusieurs m&eacute;thodes d’utilisation
des objets d’affichage enfant, notamment :
•
contains() : d&eacute;termine si un objet d’affichage est un enfant d’un objet DisplayObjectContainer.
•
getChildByName() : extrait un objet d’affichage en fonction de son nom.
•
getChildIndex() : renvoie la position d’index d’un objet d’affichage.
•
setChildIndex() : modifie la position d’un objet d’affichage enfant.
•
removeChildren() : supprime plusieurs objets d’affichage enfants.
Derni&egrave;re mise &agrave; jour le 27/4/2013
168
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
•
swapChildren() : permute l’ordre de deux objets d’affichage.
•
swapChildrenAt() : permute l’ordre de deux objets d’affichage d&eacute;finis en fonction de leur valeur d’index.
Pour plus d’informations, voir les entr&eacute;es pertinentes du manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plateforme Adobe Flash.
N’oubliez pas qu’un objet d’affichage qui ne figure pas dans la liste d’affichage (donc, qui ne se trouve pas dans un
conteneur d’objets d’affichage enfant de la sc&egrave;ne) est appel&eacute; objet d’affichage hors liste.
Parcours de la liste d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Comme nous l’avons vu, la liste d’affichage est une structure en arborescence. Au sommet de l’arborescence figure la
sc&egrave;ne, qui peut comporter plusieurs objets d’affichage. Les objets d’affichage qui sont eux-m&ecirc;mes des conteneurs
d’objets d’affichage peuvent contenir d’autres objets d’affichage, voire des conteneurs d’objets d’affichage.
La classe DisplayObjectContainer comporte des propri&eacute;t&eacute;s et m&eacute;thodes de parcours de la liste d’affichage, par le biais
des listes d’enfants des conteneurs d’objets d’affichage. Consid&eacute;rons par exemple le code suivant, qui ajoute deux
objets d’affichage, title et pict, &agrave; l’objet container (qui est un Sprite, et la classe Sprite &eacute;tend la classe
DisplayObjectContainer) :
Derni&egrave;re mise &agrave; jour le 27/4/2013
169
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
var container:Sprite = new Sprite();
var title:TextField = new TextField();
title.text = &quot;Hello&quot;;
var pict:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;banana.jpg&quot;);
pict.load(url);
pict.name = &quot;banana loader&quot;;
container.addChild(title);
container.addChild(pict);
La m&eacute;thode getChildAt() renvoie l’enfant de la liste d’affichage &agrave; une position d’index d&eacute;termin&eacute;e :
trace(container.getChildAt(0) is TextField); // true
Vous pouvez &eacute;galement acc&eacute;der aux objets enfant en indiquant leur nom. Chaque objet d’affichage poss&egrave;de un nom,
qui est attribu&eacute; par d&eacute;faut par Flash Player ou AIR (tel &laquo; instance1 &raquo;) si vous ne l’attribuez pas vous-m&ecirc;me. Par
exemple, le code suivant indique comment utiliser la m&eacute;thode getChildByName() pour acc&eacute;der &agrave; un objet d’affichage
enfant portant le nom &laquo; banana loader &raquo; :
trace(container.getChildByName(&quot;banana loader&quot;) is Loader); // true
L’utilisation de la m&eacute;thode getChildByName() entra&icirc;ne parfois un ralentissement des performances par rapport &agrave; la
m&eacute;thode getChildAt().
Puisque la liste d’affichage d’un conteneur d’objets d’affichage peut contenir d’autres conteneurs d’objets d’affichage
en tant qu’objets enfant, vous pouvez parcourir la liste d’affichage compl&egrave;te de l’application sous forme
d’arborescence. Par exemple, dans l’extrait de code illustr&eacute; pr&eacute;c&eacute;demment, une fois l’op&eacute;ration de chargement de
l’objet Loader pict termin&eacute;e, un objet d’affichage enfant (l’image bitmap) de l’objet pict est charg&eacute;. Pour acc&eacute;der &agrave;
cet objet d’affichage bitmap, vous pouvez &eacute;crire pict.getChildAt(0). Vous pouvez &eacute;galement &eacute;crire
container.getChildAt(0).getChildAt(0) (puisque container.getChildAt(0) == pict).
La fonction suivante g&eacute;n&egrave;re un extrait trace() en retrait de la liste d’affichage d’un conteneur d’objets d’affichage :
function traceDisplayList(container:DisplayObjectContainer,indentString:String = &quot;&quot;):void
{
var child:DisplayObject;
for (var i:uint=0; i &lt; container.numChildren; i++)
{
child = container.getChildAt(i);
trace(indentString, child, child.name);
if (container.getChildAt(i) is DisplayObjectContainer)
{
traceDisplayList(DisplayObjectContainer(child), indentString + &quot;&quot;)
}
}
}
Adobe Flex
Si vous utilisez Flex, notez que cette application d&eacute;finit un grand nombre de classes d’objets d’affichage de composant
et que celles-ci priment sur les m&eacute;thodes d’acc&egrave;s &agrave; la liste d’affichage de la classe DisplayObjectContainer. Par exemple,
la classe Container du package mx.core prime sur la m&eacute;thode addChild() et autres m&eacute;thodes de la classe
DisplayObjectContainer (&eacute;tendue par la classe Container). Dans le cas de la m&eacute;thode addChild(), la classe primant
sur la m&eacute;thode, vous ne pouvez pas ajouter tous les types d’objets d’affichage &agrave; une occurrence de Container dans Flex.
La m&eacute;thode remplac&eacute;e demande dans ce cas que l’objet enfant ajout&eacute; soit de type mx.core.UIComponent.
Derni&egrave;re mise &agrave; jour le 27/4/2013
170
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
D&eacute;finition des propri&eacute;t&eacute;s de la sc&egrave;ne
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Stage annule la plupart des propri&eacute;t&eacute;s et m&eacute;thodes de la classe DisplayObject. Si vous appelez l’une de ces
propri&eacute;t&eacute;s ou m&eacute;thodes annul&eacute;es, Flash Player et AIR renvoient une exception. Par exemple, l’objet Stage ne poss&egrave;de
pas de propri&eacute;t&eacute; x ou y car, en tant que conteneur principal de l’application, sa position est fixe. Or, les propri&eacute;t&eacute;s x et
y indiquent la position d’un objet d’affichage par rapport &agrave; son conteneur, et puisque la sc&egrave;ne ne se trouve pas dans un
autre conteneur d’objets d’affichage, ces propri&eacute;t&eacute;s seraient inapplicables.
Remarque : certaines propri&eacute;t&eacute;s et m&eacute;thodes de la classe Stage sont r&eacute;serv&eacute;es aux objets d’affichage appartenant au m&ecirc;me
sandbox de s&eacute;curit&eacute; que le premier fichier SWF charg&eacute;. Pour plus d’informations, voir &laquo; S&eacute;curit&eacute; de la sc&egrave;ne &raquo; &agrave; la
page 1109.
Contr&ocirc;le de la cadence de lecture
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La propri&eacute;t&eacute; framerate de la classe Stage permet de d&eacute;finir la cadence de tous les fichiers SWF charg&eacute;s dans
l’application. Pour plus d’informations, voir le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe
Flash.
Contr&ocirc;le de la mise &agrave; l’&eacute;chelle de la sc&egrave;ne
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque la portion de l’&eacute;cran qui repr&eacute;sente Flash Player ou AIR est redimensionn&eacute;e, le moteur d’ex&eacute;cution ajuste
automatiquement le contenu de la sc&egrave;ne en cons&eacute;quence. La propri&eacute;t&eacute; scaleMode de la classe Stage d&eacute;termine
comment le contenu de la sc&egrave;ne est ajust&eacute;. Cette propri&eacute;t&eacute; peut &ecirc;tre r&eacute;gl&eacute;e sur quatre valeurs distinctes, d&eacute;finies en tant
que constantes dans la classe flash.display.StageScaleMode :
•
StageScaleMode.EXACT_FIT met &agrave; l’&eacute;chelle le fichier SWF de sorte &agrave; occuper les nouvelles dimensions de la sc&egrave;ne
sans tenir compte du format d’origine du contenu. Etant donn&eacute; que les facteurs d’&eacute;chelle ne sont pas
n&eacute;cessairement identiques en largeur et en hauteur, le contenu risque de sembler &eacute;cras&eacute; ou &eacute;tir&eacute; en cas de
modification du format de la sc&egrave;ne.
•
StageScaleMode.SHOW_ALL met &agrave; l’&eacute;chelle le fichier SWF de sorte &agrave; occuper les nouvelles dimensions de la sc&egrave;ne
sans modifier le format du contenu. Ce mode de mise &agrave; l’&eacute;chelle affiche la totalit&eacute; du contenu, mais risque de donner
lieu &agrave; des bordures de type &laquo; bo&icirc;te aux lettres &raquo; similaires aux barres noires qui entourent un film grand &eacute;cran sur
une t&eacute;l&eacute;vision standard.
•
StageScaleMode.NO_BORDER met &agrave; l’&eacute;chelle le fichier SWF de sorte &agrave; occuper totalement les nouvelles dimensions
de la sc&egrave;ne sans modifier le format du contenu. Ce mode de mise &agrave; l’&eacute;chelle exploite pleinement la zone d’affichage
de la sc&egrave;ne, mais risque d’engendrer un recadrage.
•
StageScaleMode.NO_SCALE : ne met pas &agrave; l’&eacute;chelle le fichier SWF. Si les nouvelles dimensions de la sc&egrave;ne sont
inf&eacute;rieures aux dimensions d’origine, le contenu est recadr&eacute;. Si elles leur sont sup&eacute;rieures, l’espace ajout&eacute; est vide.
Dans le mode de mise &agrave; l’&eacute;chelle StageScaleMode.NO_SCALE uniquement, les propri&eacute;t&eacute;s stageWidth et
stageHeight de la classe Stage permettent de d&eacute;terminer les dimensions r&eacute;elles de la sc&egrave;ne redimensionn&eacute;e,
exprim&eacute;es en pixels. (Dans les autres modes, les propri&eacute;t&eacute;s stageWidth et stageHeight renvoient toujours la
largeur et la hauteur d’origine du fichier SWF.) De plus, lorsque la propri&eacute;t&eacute; scaleMode est d&eacute;finie sur
StageScaleMode.NO_SCALE et que le fichier SWF est redimensionn&eacute;, l’&eacute;v&eacute;nement resize de la classe Stage est
distribu&eacute;, ce qui vous permet d’effectuer des ajustements en cons&eacute;quence.
Derni&egrave;re mise &agrave; jour le 27/4/2013
171
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
D&eacute;finir scaleMode sur StageScaleMode.NO_SCALE permet donc de mieux contr&ocirc;ler l’ajustement du contenu en
cas de redimensionnement de la fen&ecirc;tre. Par exemple, si un fichier SWF contient une vid&eacute;o et une barre de contr&ocirc;le,
il peut s’av&eacute;rer utile de conserver la taille de la barre de contr&ocirc;le en cas de redimensionnement de la sc&egrave;ne et de ne
modifier que la taille de la fen&ecirc;tre de vid&eacute;o en fonction du changement de taille de la sc&egrave;ne. Ce cas de figure est
illustr&eacute; dans l’exemple suivant :
// mainContent is a display object containing the main content;
// it is positioned at the top-left corner of the Stage, and
// it should resize when the SWF resizes.
//
//
//
//
controlBar is a display object (e.g. a Sprite) containing several
buttons; it should stay positioned at the bottom-left corner of the
Stage (below mainContent) and it should not resize when the SWF
resizes.
import
import
import
import
flash.display.Stage;
flash.display.StageAlign;
flash.display.StageScaleMode;
flash.events.Event;
var swfStage:Stage = mainContent.stage;
swfStage.scaleMode = StageScaleMode.NO_SCALE;
swfStage.align = StageAlign.TOP_LEFT;
swfStage.addEventListener(Event.RESIZE, resizeDisplay);
function resizeDisplay(event:Event):void
{
var swfWidth:int = swfStage.stageWidth;
var swfHeight:int = swfStage.stageHeight;
// Resize the main content area
var newContentHeight:Number = swfHeight - controlBar.height;
mainContent.height = newContentHeight;
mainContent.scaleX = mainContent.scaleY;
// Reposition the control bar.
controlBar.y = newContentHeight;
}
D&eacute;finition du mode de mise &agrave; l’&eacute;chelle de la sc&egrave;ne pour les fen&ecirc;tres AIR
La propri&eacute;t&eacute; scaleMode de la sc&egrave;ne indique comment celle-ci met &agrave; l’&eacute;chelle et &eacute;cr&ecirc;te les objets d’affichage enfant lors
d’un redimensionnement de fen&ecirc;tre. N’utilisez que le mode noScale dans AIR. Lorsque ce mode est activ&eacute;, la sc&egrave;ne
n’est pas mise &agrave; l’&eacute;chelle. La taille de la sc&egrave;ne est modifi&eacute;e directement en fonction des limites de la fen&ecirc;tre. Les objets
risquent d’&ecirc;tre &eacute;cr&ecirc;t&eacute;s si la taille de la fen&ecirc;tre est inf&eacute;rieure &agrave; sa taille initiale.
Les modes de mise &agrave; l’&eacute;chelle de la sc&egrave;ne sont adapt&eacute;s aux environnements tels qu’un navigateur Web qui ne permet
pas n&eacute;cessairement de contr&ocirc;ler la taille ou le format de la sc&egrave;ne. Gr&acirc;ce aux modes, vous pouvez s&eacute;lectionner le cas de
figure le moins inadapt&eacute; lorsque la sc&egrave;ne ne correspond pas &agrave; la taille ou au format id&eacute;al d&eacute;fini par l’application. Dans
AIR, vous contr&ocirc;lez toujours la sc&egrave;ne. Par cons&eacute;quent, modifier la disposition du contenu ou redimensionner la
fen&ecirc;tre assure un meilleur r&eacute;sultat que l’activation de la mise &agrave; l’&eacute;chelle de la sc&egrave;ne.
Derni&egrave;re mise &agrave; jour le 27/4/2013
172
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Dans le navigateur et la fen&ecirc;tre AIR initiale, la relation entre la taille de fen&ecirc;tre et le facteur d’&eacute;chelle initial est extraite
du fichier SWF charg&eacute;. Toutefois, lorsque vous cr&eacute;ez un objet NativeWindow, AIR choisit une relation arbitraire
d&eacute;finie sur 72:1 entre la taille de fen&ecirc;tre et le facteur d’&eacute;chelle. Par cons&eacute;quent, si la fen&ecirc;tre mesure 72x72 pixels, un
rectangle de 10x10 pixels ajout&eacute; &agrave; la fen&ecirc;tre est dessin&eacute; &agrave; la taille correcte (soit 10x10 pixels). Par contre, si la fen&ecirc;tre
mesure 144x144 pixels, un rectangle de 10x10 pixels est mis &agrave; l’&eacute;chelle (soit 20x20 pixels). Si vous pr&eacute;f&eacute;rez utiliser une
propri&eacute;t&eacute; scaleMode autre que noScale pour une sc&egrave;ne de fen&ecirc;tre, vous pouvez compenser le r&eacute;sultat en d&eacute;finissant
le facteur d’&eacute;chelle de tout objet d’affichage de la fen&ecirc;tre sur le rapport 72 pixels/largeur et hauteur actuelles de la sc&egrave;ne.
Le code suivant calcule par exemple le facteur d’&eacute;chelle requis de l’objet d’affichage client :
if(newWindow.stage.scaleMode != StageScaleMode.NO_SCALE){
client.scaleX = 72/newWindow.stage.stageWidth;
client.scaleY = 72/newWindow.stage.stageHeight;
}
Remarque : les fen&ecirc;tres Flex et HTML d&eacute;finissent automatiquement la propri&eacute;t&eacute; scaleMode de la sc&egrave;ne sur noScale.
Modifier la propri&eacute;t&eacute; scaleMode entrave le fonctionnement des m&eacute;canismes de mise en forme automatique utilis&eacute;s dans
ces types de fen&ecirc;tres.
Utilisation du mode Plein &eacute;cran
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le mode plein &eacute;cran permet de d&eacute;finir la sc&egrave;ne d’un film de sorte &agrave; remplir totalement le moniteur sans bordure ou
menu. La propri&eacute;t&eacute; displayState de la classe Stage permet d’activer ou d&eacute;sactiver ce mode pour un fichier SWF. La
propri&eacute;t&eacute; displayState peut &ecirc;tre r&eacute;gl&eacute;e sur l’une des valeurs d&eacute;finies par les constantes de la classe
flash.display.StageDisplayState. Pour activer le mode plein &eacute;cran, d&eacute;finissez la propri&eacute;t&eacute; displayState sur
StageDisplayState.FULL_SCREEN :
stage.displayState = StageDisplayState.FULL_SCREEN;
Pour activer le mode interactif plein &eacute;cran (nouveaut&eacute; dans Flash Player 11.3), d&eacute;finissez la propri&eacute;t&eacute; displayState
sur StageDisplayState.FULL_SCREEN_INTERACTIVE :
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
Dans Flash Player, le mode plein &eacute;cran ne peut &ecirc;tre activ&eacute; que via ActionScript en r&eacute;ponse &agrave; un clic de souris (clic de
bouton droit inclus) ou une frappe de touche. Le contenu AIR qui s’ex&eacute;cute dans le sandbox de s&eacute;curit&eacute; de l’application
ne n&eacute;cessite pas que le mode plein &eacute;cran soit activ&eacute; en r&eacute;ponse &agrave; une action de l’utilisateur.
Pour quitter le mode plein &eacute;cran, d&eacute;finissez la propri&eacute;t&eacute; displayState sur StageDisplayState.NORMAL.
stage.displayState = StageDisplayState.NORMAL;
Un utilisateur peut &eacute;galement d&eacute;sactiver le mode plein &eacute;cran en pla&ccedil;ant le focus sur une autre fen&ecirc;tre ou en utilisant
l’une des combinaisons de touches suivantes : la touche Echap (toutes les plates-formes), Contr&ocirc;le-W (Windows),
Commande-W (Mac) ou Alt-F4 (Windows).
Activation du mode plein &eacute;cran dans Flash Player
Pour activer le mode plein &eacute;cran d’un fichier SWF int&eacute;gr&eacute; &agrave; une page HTML, le code HTML requis pour int&eacute;grer Flash
Player doit comprendre une balise param et un attribut embed, associ&eacute;s au nom allowFullScreen et &agrave; la valeur true,
comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
173
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
&lt;object&gt;
...
&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /&gt;
&lt;embed ... allowFullScreen=&quot;true&quot; /&gt;
&lt;/object&gt;
Dans l’outil de programmation Flash, choisissez Fichier -&gt; Param&egrave;tres de publication, puis dans la bo&icirc;te de dialogue
Param&egrave;tres de publication, cliquez sur l’onglet HTML et s&eacute;lectionnez le mod&egrave;le Flash seulement - Autorisation du
Plein &eacute;cran.
Dans Flex, assurez-vous que le mod&egrave;le HTML inclut les balises &lt;object&gt; et &lt;embed&gt; qui prennent en charge le plein
&eacute;cran.
Si vous utilisez JavaScript dans une page Web pour g&eacute;n&eacute;rer les balises d’int&eacute;gration de SWF, vous devez modifier le
code JavaScript pour ajouter la balise et l’attribut allowFullScreen param. Par exemple, si votre page HTML fait
appel &agrave; la fonction AC_FL_RunContent() (utilis&eacute;e par les pages HTML g&eacute;n&eacute;r&eacute;es par Flash Professional et Flash
Builder), vous devez ajouter le param&egrave;tre allowFullScreen &agrave; cet appel de fonction, comme suit :
AC_FL_RunContent(
...
'allowFullScreen','true',
...
); //end AC code
Ce cas de figure ne s’applique pas aux fichiers SWF qui s’ex&eacute;cutent dans la version autonome de Flash Player.
Remarque : si vous d&eacute;finissez le Mode fen&ecirc;tre (wmode dans le code HTML) sur Opaque sans fen&ecirc;tre (opaque) ou
Transparent sans fen&ecirc;tre (transparent), la fen&ecirc;tre plein &eacute;cran est toujours opaque.
Il existe &eacute;galement des restrictions li&eacute;es &agrave; la s&eacute;curit&eacute; lors de l’utilisation du mode plein &eacute;cran avec Flash Player dans un
navigateur. Ces restrictions sont d&eacute;crites dans le chapitre &laquo; S&eacute;curit&eacute; &raquo; &agrave; la page 1085.
Activation du mode interactif plein &eacute;cran dans Flash Player 11.3 et les versions ult&eacute;rieures
Flash Player 11.3 et les versions ult&eacute;rieures prennent en charge le mode interactif plein &eacute;cran, qui permet une prise en
charge totale de toutes les touches du clavier (&agrave; l’exception de la touche Echap, qui permet de quitter le mode interactif
plein &eacute;cran). Le mode interactif plein &eacute;cran est utile pour les jeux (par exemple pour activer la fonction de dialogue en
ligne dans un jeu multijoueurs ou les commandes du clavier WASD dans un jeu de tir subjectif.)
Pour activer le mode interactif plein &eacute;cran d’un fichier SWF int&eacute;gr&eacute; &agrave; une page HTML, le code HTML requis pour
int&eacute;grer Flash Player doit comprendre une balise param et un attribut embed, associ&eacute;s au nom
allowFullScreenInteractive et &agrave; la valeur true, comme suit :
&lt;object&gt;
...
&lt;param name=&quot;allowFullScreenInteractive&quot; value=&quot;true&quot; /&gt;
&lt;embed ... allowFullScreenInteractive=&quot;true&quot; /&gt;
&lt;/object&gt;
Dans l’outil de cr&eacute;ation de Flash, cliquez sur Fichier -&gt; Param&egrave;tres de publication, puis, dans l’onglet HTML de la bo&icirc;te
de dialogue Param&egrave;tres de publication, s&eacute;lectionnez le mod&egrave;le Flash seulement - Autorisation du Plein &eacute;cran interactif.
Dans Flash Builder et Flex, v&eacute;rifiez que les mod&egrave;les HTML incluent les balises &lt;object&gt; et &lt;embed&gt; qui prennent en
charge le mode interactif plein &eacute;cran.
Si vous utilisez JavaScript dans une page Web pour g&eacute;n&eacute;rer les balises d’int&eacute;gration de SWF, vous devez modifier le
code JavaScript pour ajouter la balise et l’attribut allowFullScreenInteractive param. Par exemple, si votre page
HTML fait appel &agrave; la fonction AC_FL_RunContent() (utilis&eacute;e par les pages HTML g&eacute;n&eacute;r&eacute;es par Flash Professional et
Flash Builder), vous devez ajouter le param&egrave;tre allowFullScreenInteractive &agrave; cet appel de fonction, comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
174
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
AC_FL_RunContent(
...
'allowFullScreenInteractive','true',
...
); //end AC code
Ce cas de figure ne s’applique pas aux fichiers SWF qui s’ex&eacute;cutent dans la version autonome de Flash Player.
Mise &agrave; l’&eacute;chelle et taille de la sc&egrave;ne en mode plein &eacute;cran
Les propri&eacute;t&eacute;s Stage.fullScreenHeight et Stage.fullScreenWidth renvoient la hauteur et la largeur de l’&eacute;cran
utilis&eacute; lors de l’activation du mode plein &eacute;cran, lorsque le passage &agrave; cet &eacute;tat est imm&eacute;diat. Ces valeurs risquent d’&ecirc;tre
incorrectes si l’utilisateur d&eacute;place le navigateur d’un &eacute;cran &agrave; un autre apr&egrave;s avoir r&eacute;cup&eacute;r&eacute; ces valeurs, mais avant de
passer au mode plein &eacute;cran. Si l’utilisateur r&eacute;cup&egrave;re ces valeurs dans le gestionnaire d’&eacute;v&eacute;nement dans lequel il a d&eacute;fini
la propri&eacute;t&eacute; Stage.displayState sur StageDisplayState.FULL_SCREEN, celles-ci sont correctes. Pour les
utilisateurs qui utilisent plusieurs &eacute;crans, le contenu du fichier SWF s’&eacute;tend pour n’occuper qu’un seul &eacute;cran. Flash
Player et AIR utilisent une mesure pour identifier le moniteur contenant la portion la plus &eacute;lev&eacute;e du fichier SWF et
activent le mode plein &eacute;cran sur celui-ci. Les propri&eacute;t&eacute;s fullScreenHeight et fullScreenWidth ne refl&egrave;tent que la taille
du moniteur utilis&eacute; en mode plein &eacute;cran. Pour plus d’informations, voir Stage.fullScreenHeight et
Stage.fullScreenWidth dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
En mode plein &eacute;cran, le comportement de mise &agrave; l’&eacute;chelle de la sc&egrave;ne est identique &agrave; celui du mode normal. Cette mise
&agrave; l’&eacute;chelle est contr&ocirc;l&eacute;e par la propri&eacute;t&eacute; scaleMode de la classe Stage. Si la propri&eacute;t&eacute; scaleMode est d&eacute;finie sur
StageScaleMode.NO_SCALE, les propri&eacute;t&eacute;s stageWidth et stageHeight de la classe Stage sont modifi&eacute;es pour
r&eacute;percuter la taille de la zone de l’&eacute;cran occup&eacute;e par le fichier SWF (soit, dans ce cas, l’&eacute;cran entier). Dans un
navigateur, le param&egrave;tre HTML correspondant contr&ocirc;le le r&eacute;glage.
L’&eacute;v&eacute;nement fullScreen de la classe Stage permet de d&eacute;tecter et r&eacute;pondre &agrave; l’activation ou &agrave; la d&eacute;sactivation du mode
plein &eacute;cran. Par exemple, il peut &ecirc;tre n&eacute;cessaire de repositionner, d’ajouter ou de supprimer des &eacute;l&eacute;ments lors d’un
changement d’&eacute;tat du mode plein &eacute;cran, comme illustr&eacute; par cet exemple :
import flash.events.FullScreenEvent;
function fullScreenRedraw(event:FullScreenEvent):void
{
if (event.fullScreen)
{
// Remove input text fields.
// Add a button that closes full-screen mode.
}
else
{
// Re-add input text fields.
// Remove the button that closes full-screen mode.
}
}
mySprite.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenRedraw);
Comme l’indique ce code, l’objet associ&eacute; &agrave; l’&eacute;v&eacute;nement fullScreen est une occurrence de la classe
flash.events.FullScreenEvent, dont la propri&eacute;t&eacute; fullScreen indique si le mode plein &eacute;cran est activ&eacute; (true) ou non
(false).
Derni&egrave;re mise &agrave; jour le 27/4/2013
175
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Prise en charge du clavier en mode plein &eacute;cran
Lorsque Flash Player est ex&eacute;cut&eacute; dans un navigateur, l’ensemble du code ActionScript li&eacute; au clavier (&eacute;v&eacute;nements de
clavier et saisie de texte dans des occurrences de TextField, entre autres), est d&eacute;sactiv&eacute; en mode plein &eacute;cran. Les
exceptions (c’est-&agrave;-dire les touches qui restent actives) sont les suivantes :
• Les touches hors impression s&eacute;lectionn&eacute;es, notamment les touches fl&eacute;ch&eacute;es, la barre d’espacement et la touche de
tabulation
• Les raccourcis clavier qui d&eacute;sactivent le mode plein &eacute;cran : touche Echap (Windows et Mac), Contr&ocirc;le-W
(Windows), Commande-W (Mac) et Alt-F4
Ces restrictions ne sont pas pr&eacute;sentes pour le contenu SWF s’ex&eacute;cutant dans l’application Flash Player autonome ou
dans AIR. AIR prend en charge un mode plein &eacute;cran interactif qui permet la saisie clavier.
Prise en charge de la souris en mode plein &eacute;cran
Par d&eacute;faut, les &eacute;v&eacute;nements de souris fonctionnent de la m&ecirc;me fa&ccedil;on en mode plein &eacute;cran que dans un autre mode
d’affichage. N&eacute;anmoins, le mode plein &eacute;cran permet &eacute;galement de d&eacute;finir la propri&eacute;t&eacute; Stage.mouseLock en vue de
verrouiller la souris. Le verrouillage de la souris d&eacute;sactive le curseur et permet de d&eacute;placer la souris sans aucune limite.
Remarque : vous pouvez verrouiller la souris uniquement sur des applications de bureau en mode plein &eacute;cran. Le
verrouillage de la souris sur des applications dans un autre mode d’affichage ou sur des applications mobiles renvoie une
exception.
Le verrouillage de la souris est automatiquement d&eacute;sactiv&eacute; et le curseur de la souris est &agrave; nouveau visible lorsque :
• l’utilisateur quitte le mode plein &eacute;cran en appuyant sur la touche Echap (toutes les plates-formes), ou sur les touches
Ctrl-W (Windows), Cmd-W (Mac) ou Alt-F4 (Windows) ;
• la fen&ecirc;tre de l’application perd le focus ;
• une interface de param&eacute;trage est visible, notamment une bo&icirc;te de dialogue de confidentialit&eacute; ;
• une bo&icirc;te de dialogue native s’affiche, notamment une bo&icirc;te de dialogue de t&eacute;l&eacute;chargement d’un fichier.
Les &eacute;v&eacute;nements associ&eacute;s au mouvement de la souris, tels que l’&eacute;v&eacute;nement mouseMove, font appel &agrave; la classe
MouseEvent pour repr&eacute;senter l’objet de l’&eacute;v&eacute;nement. Lorsque le verrouillage de la souris est d&eacute;sactiv&eacute;, utilisez les
propri&eacute;t&eacute;s MouseEvent.localX et MouseEvent.localY pour d&eacute;terminer l’emplacement de la souris. Lorsque le
verrouillage de la souris est activ&eacute;, utilisez les propri&eacute;t&eacute;s MouseEvent.movementX et MouseEvent.movementY pour
d&eacute;terminer l’emplacement de la souris. Les propri&eacute;t&eacute;s movementX et movementY contiennent les changements de
position de la souris depuis le dernier &eacute;v&eacute;nement plut&ocirc;t que les coordonn&eacute;es absolues de l’emplacement de la souris.
Mise &agrave; l’&eacute;chelle mat&eacute;rielle en mode plein &eacute;cran
La propri&eacute;t&eacute; fullScreenSourceRect de la classe Stage permet d’utiliser Flash Player ou AIR pour mettre &agrave; l’&eacute;chelle
une zone d&eacute;termin&eacute;e de la sc&egrave;ne en mode plein &eacute;cran. Dans Flash Player et AIR, la mise &agrave; l’&eacute;chelle mat&eacute;rielle, si elle est
disponible, s’effectue &agrave; l’aide de la carte graphique et de la carte vid&eacute;o de l’ordinateur, et permet g&eacute;n&eacute;ralement
d’afficher le contenu plus rapidement que la mise &agrave; l’&eacute;chelle logicielle.
Pour tirer parti de la mise &agrave; l’&eacute;chelle mat&eacute;rielle, d&eacute;finissez l’ensemble ou une partie de la sc&egrave;ne sur le mode plein &eacute;cran.
Le code suivant ActionScript 3.0 d&eacute;finit l’ensemble de la sc&egrave;ne en mode plein &eacute;cran :
import flash.geom.*;
{
stage.fullScreenSourceRect = new Rectangle(0,0,320,240);
stage.displayState = StageDisplayState.FULL_SCREEN;
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
176
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Lorsque cette propri&eacute;t&eacute; est d&eacute;finie sur un rectangle valide et la propri&eacute;t&eacute; displayState sur le mode plein &eacute;cran, Flash
Player et AIR redimensionnent la zone sp&eacute;cifi&eacute;e. La taille r&eacute;elle de la sc&egrave;ne en pixels dans ActionScript ne change pas.
Flash Player et AIR imposent une taille limite au rectangle en fonction de la taille du message standard &laquo; Appuyez sur
la touche Echap pour quitter le mode plein &eacute;cran &raquo;. Cette limite est g&eacute;n&eacute;ralement d’environ 260 sur 30 pixels, mais peut
varier en fonction de la plate-forme et de la version de Flash Player.
La propri&eacute;t&eacute; fullScreenSourceRect ne peut &ecirc;tre d&eacute;finie que lorsque Flash Player ou AIR ne sont pas en mode plein
&eacute;cran. Pour utiliser correctement cette propri&eacute;t&eacute;, vous devez tout d’abord la d&eacute;finir, puis d&eacute;finir la propri&eacute;t&eacute;
displayState sur le mode plein &eacute;cran.
Pour activer la mise &agrave; l’&eacute;chelle, d&eacute;finissez la propri&eacute;t&eacute; fullScreenSourceRect sur un objet rectangle.
stage.fullScreenSourceRect = new Rectangle(0,0,320,240);
Pour d&eacute;sactiver la mise &agrave; l’&eacute;chelle, d&eacute;finissez la propri&eacute;t&eacute; fullScreenSourceRect sur null.
stage.fullScreenSourceRect = null;
Pour tirer parti de toutes les fonctions d’acc&eacute;l&eacute;ration mat&eacute;rielle avec Flash Player, activez cette fonction dans la bo&icirc;te
de dialogue des param&egrave;tres de Flash Player. Pour afficher cette bo&icirc;te de dialogue, cliquez avec le bouton droit de la
souris (Windows) ou cliquez tout en appuyant sur la touche Ctrl (Mac) dans le contenu Flash Player dans votre
navigateur. Cliquez sur le premier onglet, Affichage, puis cochez la case Activer l’acc&eacute;l&eacute;ration mat&eacute;rielle.
Modes Fen&ecirc;tre direct et composition GPU
Flash Player 10 propose deux modes de fen&ecirc;tre, direct et composition GPU, que vous pouvez activer dans les
param&egrave;tres de publication de l’outil de programmation Flash. Ces modes ne sont pas pris en charge par AIR. Pour tirer
parti de ces modes, vous devez activer l’acc&eacute;l&eacute;ration mat&eacute;rielle pour Flash Player.
Le mode direct utilise le chemin le plus rapide et le plus direct pour placer des graphismes sur l’&eacute;cran, ce qui est
pratique pour la lecture vid&eacute;o.
La composition GPU utilise l’unit&eacute; de traitement graphique sur la carte vid&eacute;o pour acc&eacute;l&eacute;rer la composition. La
composition vid&eacute;o consiste &agrave; cr&eacute;er des images multi-couches pour aboutir &agrave; une seule image vid&eacute;o. Lorsque la
composition est acc&eacute;l&eacute;r&eacute;e par la GPU, les performances de la conversion YUV, la correction des couleurs, la rotation,
le redimensionnement et le fondu sont nettement am&eacute;lior&eacute;s. La conversion YUV se r&eacute;f&egrave;re &agrave; la conversion des couleurs
de signaux analogiques composites, qui sont utilis&eacute;es pour la transmission, au mod&egrave;le de couleurs RVB (rouge-vertbleu) que les cam&eacute;ras vid&eacute;o et les &eacute;crans utilisent. Le recours &agrave; la GPU pour acc&eacute;l&eacute;rer la composition r&eacute;duit la demande
en m&eacute;moire et en puissance de calcul qui affectera les performances de l’unit&eacute; centrale. Il en r&eacute;sulte une lecture vid&eacute;o
plus r&eacute;guli&egrave;re en d&eacute;finition standard.
Soyez vigilant lorsque vous impl&eacute;mentez ces modes Fen&ecirc;tre. Fen&ecirc;tre L’utilisation de la composition GPU peut s’av&eacute;rer
co&ucirc;teuse en m&eacute;moire et en ressources de l’unit&eacute; centrale. Si certaines op&eacute;rations (comme les modes fondu, le filtrage,
l’&eacute;cr&ecirc;tage ou le masquage) ne peuvent pas &ecirc;tre ex&eacute;cut&eacute;es dans la GPU, c’est le logiciel qui s’en charge. Adobe vous
recommande de vous limiter &agrave; un fichier SWF par page HTML lorsque vous utilisez ces modes. Il ne faudrait pas les
utiliser pour des bandeaux. La Flash Test Movie facility ne fait pas appel &agrave; l’acc&eacute;l&eacute;ration mat&eacute;rielle mais vous pouvez
l’utiliser par le biais de l’option Aper&ccedil;u avant publication.
Il est inutile de fixer une cadence sup&eacute;rieure &agrave; 60 (c’est la fr&eacute;quence de r&eacute;g&eacute;n&eacute;ration d’&eacute;cran maximale) dans votre
fichier SWF. Une cadence entre 50 et 55 d&eacute;bouche sur des images perdues, ce qui peut se produire de temps &agrave; autre
pour des raisons diverses.
Derni&egrave;re mise &agrave; jour le 27/4/2013
177
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Le mode direct requiert Microsoft DirectX 9 avec une m&eacute;moire virtuelle RAM de 128 Mo sous Windows et OpenGL
pour Apple Macintosh, Mac OS X version 10.2 ou ult&eacute;rieure. La composition GPU requiert Microsoft DirectX 9 et la
prise en charge de Pixel Shader 2.0 sous Windows avec une m&eacute;moire virtuelle RAM de 128 Mo. Sous Mac OS X et
Linux, la composition GPU requiert OpenGL 1.5 et plusieurs extensions d’OpenGL (objet framebuffer, objets
multitexture et shader, langage d’ombrage, shader de fragments).
Vous pouvez activer les modes d’acc&eacute;l&eacute;ration direct et gpu pour chaque SWF par le biais de la bo&icirc;te de dialogue
Param&egrave;tres de publication de Flash, &agrave; l’aide du menu d’acc&eacute;l&eacute;ration mat&eacute;rielle sur l’onglet Flash. Si vous choisissez Aucun,
le mode Fen&ecirc;tre revient &agrave; d&eacute;faut, transparent ou opaque, selon le param&egrave;tre du Mode Fen&ecirc;tre de l’onglet HTML.
Manipulation des &eacute;v&eacute;nements associ&eacute;s aux objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe DisplayObject h&eacute;rite de la classe EventDispatcher. Cela signifie que chaque objet d’affichage peut &ecirc;tre
pleinement impliqu&eacute; dans le mod&egrave;le d’&eacute;v&eacute;nement (d&eacute;crit dans le chapitre &laquo; Gestion des &eacute;v&eacute;nements &raquo; &agrave; la page 129).
Chaque objet d’affichage peut utiliser sa m&eacute;thode addEventListener() (h&eacute;rit&eacute;e de la classe EventDispatcher) pour
attendre un &eacute;v&eacute;nement particulier, mais ceci uniquement si l’objet &eacute;couteur fait partie du flux d’&eacute;v&eacute;nement de
l’&eacute;v&eacute;nement consid&eacute;r&eacute;.
Lorsque Flash Player ou AIR distribue un objet &eacute;v&eacute;nement, celui-ci effectue un aller-retour &agrave; partir de la sc&egrave;ne via
l’objet d’affichage o&ugrave; s’est produit l’&eacute;v&eacute;nement. Par exemple, si un utilisateur clique sur un objet d’affichage appel&eacute;
child1, Flash Player distribue un objet &eacute;v&eacute;nement &agrave; partir de la sc&egrave;ne via la hi&eacute;rarchie de la liste d’affichage jusqu’&agrave;
l’objet d’affichage child1.
D’un point de vue conceptuel, le flux d’&eacute;v&eacute;nement est divis&eacute; en trois phases, comme illustr&eacute; par le diagramme suivant :
Pour plus d’informations, voir &laquo; Gestion des &eacute;v&eacute;nements &raquo; &agrave; la page 129.
Lors de la gestion des &eacute;v&eacute;nements li&eacute;s aux objets d’affichage, il est important de ne pas oublier l’effet potentiel des
objets &eacute;couteurs d’&eacute;v&eacute;nement sur l’&eacute;ventuelle suppression automatique des objets d’affichage de la m&eacute;moire (garbage
collection) lorsqu’ils sont supprim&eacute;s de la liste d’affichage. Si des objets d’un objet d’affichage sont enregistr&eacute;s en tant
qu’&eacute;couteurs d’&eacute;v&eacute;nement, ce dernier n’est pas supprim&eacute; de la m&eacute;moire m&ecirc;me s’il est supprim&eacute; de la liste d’affichage,
car il continue &agrave; poss&eacute;der des r&eacute;f&eacute;rences &agrave; ces objets &eacute;couteur. Pour plus d’informations, voir &laquo; Gestion des &eacute;couteurs
d’&eacute;v&eacute;nement &raquo; &agrave; la page 143.
Derni&egrave;re mise &agrave; jour le 27/4/2013
178
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
S&eacute;lection d’une sous-classe de DisplayObject
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Plusieurs options &eacute;tant disponibles, l’une des d&eacute;cisions importantes &agrave; prendre lors de l’utilisation d’objets d’affichage
est le choix de l’objet &agrave; utiliser dans un but pr&eacute;cis. Les directives suivantes vous aideront &agrave; choisir l’option appropri&eacute;e.
Ces suggestions sont valides que vous cr&eacute;iez une occurrence de classe ou que vous choisissiez une classe de base pour
une classe en cours de cr&eacute;ation :
• Si vous n’avez pas besoin d’un objet pouvant contenir d’autres objets d’affichage (autrement dit, si vous avez
simplement besoin d’un objet &agrave; utiliser comme &eacute;l&eacute;ment isol&eacute;), choisissez l’une des sous-classes suivantes de
DisplayObject ou d’InteractiveObject, selon l’utilisation pr&eacute;vue :
• Bitmap, pour afficher une image bitmap.
• TextField, pour ajouter du texte.
• Video, pour afficher une vid&eacute;o.
• Shape, pour disposer d’une &laquo; toile &raquo; destin&eacute;e au trac&eacute; d’un contenu &agrave; l’&eacute;cran. En particulier si vous souhaitez
cr&eacute;er une occurrence pour dessiner des formes &agrave; l’&eacute;cran et qu’elle ne contient pas d’autres objets d’affichage,
vous obtiendrez des performances nettement sup&eacute;rieures en utilisant Shape plut&ocirc;t que Sprite ou MovieClip.
• MorphShape, StaticText ou SimpleButton pour des &eacute;l&eacute;ments cr&eacute;&eacute;s par l’outil de programmation Flash. Il est
impossible de cr&eacute;er par programmation des occurrences de ces classes, mais vous pouvez cr&eacute;er des variables avec
ces types de donn&eacute;es pour pointer sur des &eacute;l&eacute;ments cr&eacute;&eacute;s dans l’outil de programmation Flash.
• Si vous devez disposer d’une variable qui se r&eacute;f&egrave;re &agrave; la sc&egrave;ne principale, utilisez la classe Stage en tant que type de
donn&eacute;es.
• Si vous devez disposer d’un conteneur pour charger un fichier SWF ou fichier image externe, utilisez une
occurrence de Loader. Le contenu charg&eacute; sera ajout&eacute; &agrave; la liste d’affichage en tant qu’enfant de l’occurrence de
Loader. Son type de donn&eacute;es variera selon la nature du contenu charg&eacute;, comme suit :
• Une image charg&eacute;e est une occurrence de Bitmap.
• Un fichier SWF charg&eacute; &eacute;crit dans ActionScript 3.0 est une occurrence de Sprite ou MovieClip (ou une
occurrence d’une sous-classe de ces classes, comme indiqu&eacute; par le cr&eacute;ateur du contenu).
• Un fichier SWF charg&eacute; &eacute;crit dans ActionScript 1.0 ou ActionScript 2.0 est une occurrence d’AVM1Movie.
• Si vous avez besoin d’un objet qui sera le conteneur d’autres objets d’affichage (que vous ayez ou non l’intention de
dessiner en ActionScript dans cet objet), choisissez l’une des sous-classes de DisplayObjectContainer :
• Sprite, si l’objet est cr&eacute;&eacute; en ActionScript uniquement ou en tant que classe de base d’un objet d’affichage
personnalis&eacute; cr&eacute;&eacute; et manipul&eacute; en ActionScript uniquement.
• MovieClip, si vous cr&eacute;ez une variable pointant vers un symbole de clip cr&eacute;&eacute; dans l’outil de programmation Flash.
• Si vous cr&eacute;ez une classe qui sera associ&eacute;e &agrave; un symbole de clip de la biblioth&egrave;que de Flash, choisissez l’une des sousclasses de DisplayObjectContainer comme classe de base de votre future classe :
• MovieClip, si le symbole de clip associ&eacute; poss&egrave;de un contenu sur plusieurs images.
• Sprite, si le symbole de clip associ&eacute; ne poss&egrave;de un contenu que sur la premi&egrave;re image.
Derni&egrave;re mise &agrave; jour le 27/4/2013
179
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Manipulation des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Quel que soit l’objet d’affichage utilis&eacute;, tous les &eacute;l&eacute;ments affich&eacute;s &agrave; l’&eacute;cran partagent diverses techniques de
manipulations. Par exemple, ils peuvent tous &ecirc;tre positionn&eacute;s &agrave; l’&eacute;cran, avancer ou reculer dans l’ordre d’empilement
des objets d’affichage, mis &agrave; l’&eacute;chelle, pivot&eacute;s, et ainsi de suite. Dans la mesure o&ugrave; tous les objets d’affichage h&eacute;ritent
ces fonctionnalit&eacute;s de leur classe de base commune (DisplayObject), lesdites fonctionnalit&eacute;s ont le m&ecirc;me
comportement pour une occurrence d’un objet TextField, Video, Shape ou tout autre objet d’affichage. Les sections
suivantes passent en revue plusieurs de ces manipulations appliqu&eacute;es &agrave; tous les objets d’affichage.
Modification de la position
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La manipulation la plus fondamentale de tout objet d’affichage consiste &agrave; le positionner &agrave; l’&eacute;cran. Pour d&eacute;finir la
position d’un objet d’affichage, changez ses propri&eacute;t&eacute;s x et y.
myShape.x = 17;
myShape.y = 212;
Le syst&egrave;me de positionnement d’un objet d’affichage assimile la sc&egrave;ne &agrave; un syst&egrave;me de coordonn&eacute;es cart&eacute;siennes
(syst&egrave;me de grille standard dot&eacute; d’un axe horizontal x et d’un axe vertical y). L’origine du syst&egrave;me de coordonn&eacute;es
(coordonn&eacute;e 0,0 correspondant &agrave; l’intersection des axes x et y) figure dans le coin sup&eacute;rieur gauche de la sc&egrave;ne. A partir
de l’origine, les valeurs x sont positives vers la droite et n&eacute;gatives vers la gauche, tandis que, contrairement aux
syst&egrave;mes de graphes standard, les valeurs y sont positives vers le bas et n&eacute;gatives vers le haut. Par exemple, les lignes
pr&eacute;c&eacute;dentes de code d&eacute;placent l’objet myShape vers la coordonn&eacute;e x 17 (17 pixels sur la droite de l’origine) et la
coordonn&eacute;e y 212 (212 pixels sous l’origine).
Par d&eacute;faut, lorsqu’un objet d’affichage est cr&eacute;&eacute; dans ActionScript, les propri&eacute;t&eacute;s x et y sont toutes deux d&eacute;finies sur 0,
pla&ccedil;ant ainsi l’objet dans le coin sup&eacute;rieur gauche de son contenu parent.
Modification de la position relativement &agrave; la sc&egrave;ne
Il est important de se rappeler que les propri&eacute;t&eacute;s x et y se r&eacute;f&egrave;rent toujours &agrave; la position de l’objet d’affichage par
rapport aux coordonn&eacute;es 0,0 des axes de son objet d’affichage parent. Ainsi, pour une occurrence de Shape (par
exemple un cercle) contenue dans une occurrence de Sprite, mettre &agrave; z&eacute;ro les propri&eacute;t&eacute;s x et y de l’objet Shape revient
&agrave; placer le cercle dans le coin sup&eacute;rieur gauche de l’objet Sprite, qui n’est pas forc&eacute;ment le coin sup&eacute;rieur gauche de la
sc&egrave;ne. Pour positionner un objet par rapport aux coordonn&eacute;es globales de la sc&egrave;ne, utilisez la m&eacute;thode
globalToLocal() de tout objet d’affichage afin de convertir les coordonn&eacute;es globales (sc&egrave;ne) en coordonn&eacute;es locales
(conteneur de l’objet d’affichage), comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
180
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// Position the shape at the top-left corner of the Stage,
// regardless of where its parent is located.
// Create a Sprite, positioned at x:200 and y:200.
var mySprite:Sprite = new Sprite();
mySprite.x = 200;
mySprite.y = 200;
this.addChild(mySprite);
// Draw a dot at the Sprite's 0,0 coordinate, for reference.
mySprite.graphics.lineStyle(1, 0x000000);
mySprite.graphics.beginFill(0x000000);
mySprite.graphics.moveTo(0, 0);
mySprite.graphics.lineTo(1, 0);
mySprite.graphics.lineTo(1, 1);
mySprite.graphics.lineTo(0, 1);
mySprite.graphics.endFill();
// Create the circle Shape instance.
var circle:Shape = new Shape();
mySprite.addChild(circle);
// Draw a circle with radius 50 and center point at x:50, y:50 in the Shape.
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0xff0000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
// Move the Shape so its top-left corner is at the Stage's 0, 0 coordinate.
var stagePoint:Point = new Point(0, 0);
var targetPoint:Point = mySprite.globalToLocal(stagePoint);
circle.x = targetPoint.x;
circle.y = targetPoint.y;
Vous pouvez &eacute;galement utiliser la m&eacute;thode localToGlobal() de la classe DisplayObject pour convertir les
coordonn&eacute;es locales en coordonn&eacute;es de la sc&egrave;ne.
D&eacute;placement des objets d’affichage &agrave; l’aide de la souris
Vous pouvez autoriser un utilisateur &agrave; d&eacute;placer les objets d’affichage &agrave; l’aide de la souris par le biais de deux techniques
distinctes dans ActionScript. Dans les deux cas, deux &eacute;v&eacute;nements de souris sont utilis&eacute;s : lorsque l’utilisateur appuie
sur le bouton de gauche (l’objet re&ccedil;oit alors l’instruction de suivre le curseur de la souris) et lorsqu’il le rel&acirc;che (l’objet
re&ccedil;oit alors l’instruction de cesser de suivre le curseur de la souris).
Remarque : Flash Player 11.3 et les versions ult&eacute;rieures et AIR 3.3 et les versions ult&eacute;rieures : vous pouvez &eacute;galement
utiliser l’&eacute;v&eacute;nement MouseEvent.RELEASE_OUTSIDE dans le cas d’un utilisateur qui rel&acirc;che le bouton de la souris en
dehors des limites du Sprite conteneur.
La premi&egrave;re technique, bas&eacute;e sur la m&eacute;thode startDrag(), est plus simple, mais plus limit&eacute;e. Lorsque l’utilisateur
appuie sur le bouton de la souris, la m&eacute;thode startDrag() de l’objet d’affichage &agrave; faire glisser est appel&eacute;e. Lorsque
l’utilisateur rel&acirc;che le bouton de la souris, la m&eacute;thode stopDrag() est appel&eacute;e. Puisque la classe Sprite d&eacute;finit ces deux
fonctions, l’objet d&eacute;plac&eacute; doit &ecirc;tre un Sprite ou l’une de ses sous-classes.
Derni&egrave;re mise &agrave; jour le 27/4/2013
181
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// This code creates a mouse drag interaction using the startDrag()
// technique.
// square is a MovieClip or Sprite instance).
import flash.events.MouseEvent;
// This function is called when the mouse button is pressed.
function startDragging(event:MouseEvent):void
{
square.startDrag();
}
// This function is called when the mouse button is released.
function stopDragging(event:MouseEvent):void
{
square.stopDrag();
}
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
Cette technique pr&eacute;sente un d&eacute;savantage relativement important : l’utilisation de startDrag() ne permet de faire
glisser qu’un seul &eacute;l&eacute;ment &agrave; la fois. Si un objet d’affichage est en cours de glissement et que la m&eacute;thode startDrag()
est appel&eacute;e sur un autre objet d’affichage, le premier objet cesse imm&eacute;diatement de suivre la souris. Par exemple, si la
fonction startDragging() est modifi&eacute;e comme indiqu&eacute;, seul l’objet circle est d&eacute;plac&eacute; par glissement, bien que la
m&eacute;thode square.startDrag() ait &eacute;t&eacute; appel&eacute;e :
function startDragging(event:MouseEvent):void
{
square.startDrag();
circle.startDrag();
}
Puisqu’un seul objet &agrave; la fois peut &ecirc;tre d&eacute;plac&eacute; par glissement par le biais de startDrag(), la m&eacute;thode stopDrag()
peut &ecirc;tre appel&eacute;e sur n’importe quel objet d’affichage et arr&ecirc;te tout objet en cours de glissement.
Pour d&eacute;placer plusieurs objets d’affichage, ou pour &eacute;viter tout risque de conflit au cas o&ugrave; plusieurs objets seraient
susceptibles d’utiliser startDrag(), il est pr&eacute;f&eacute;rable d’utiliser la technique de suivi de la souris pour cr&eacute;er l’effet de
glisser-d&eacute;poser. Avec cette technique, lorsque l’utilisateur appuie sur le bouton de la souris, une fonction est
enregistr&eacute;e en tant qu’&eacute;couteur de l’&eacute;v&eacute;nement mouseMove de la sc&egrave;ne. Cette fonction, qui est alors appel&eacute;e &agrave; chaque
d&eacute;placement de la souris, entra&icirc;ne le saut de l’objet d&eacute;plac&eacute; vers la coordonn&eacute;e x, y de la souris. Une fois le bouton de
la souris rel&acirc;ch&eacute;, la fonction n’est plus enregistr&eacute;e en tant qu’&eacute;couteur. Elle n’est donc plus appel&eacute;e lorsque la souris est
d&eacute;plac&eacute;e et l’objet cesse de suivre le curseur. Le code suivant illustre cette technique :
Derni&egrave;re mise &agrave; jour le 27/4/2013
182
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// This code moves display objects using the mouse-following
// technique.
// circle is a DisplayObject (e.g. a MovieClip or Sprite instance).
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
// This function is called when the mouse button is pressed.
function startDragging(event:MouseEvent):void
{
// Record the difference (offset) between where
// the cursor was when the mouse button was pressed and the x, y
// coordinate of the circle when the mouse button was pressed.
offsetX = event.stageX - circle.x;
offsetY = event.stageY - circle.y;
// tell Flash Player to start listening for the mouseMove event
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
// This function is called when the mouse button is released.
function stopDragging(event:MouseEvent):void
{
// Tell Flash Player to stop listening for the mouseMove event.
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragCircle);
}
// This function is called every time the mouse moves,
// as long as the mouse button is pressed down.
function dragCircle(event:MouseEvent):void
{
// Move the circle to the location of the cursor, maintaining
// the offset between the cursor's location and the
// location of the dragged object.
circle.x = event.stageX - offsetX;
circle.y = event.stageY - offsetY;
// Instruct Flash Player to refresh the screen after this event.
event.updateAfterEvent();
}
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
Outre le suivi du curseur par un objet d’affichage, il est souvent pr&eacute;f&eacute;rable de positionner l’objet d&eacute;plac&eacute; &agrave; l’avant de
l’affichage, cr&eacute;ant ainsi une impression de flottement au-dessus de tous les autres objets. Supposons, par exemple, que
deux objets, un cercle et un carr&eacute;, puissent tous deux &ecirc;tre d&eacute;plac&eacute;s &agrave; l’aide de la souris. Si le cercle figure sous le carr&eacute;
sur la liste d’affichage et que vous cliquez et faites glisser le cercle pour placer le curseur au-dessus du carr&eacute;, il semble
glisser derri&egrave;re le carr&eacute;, brisant ainsi l’illusion du glisser-d&eacute;poser. Vous pouvez proc&eacute;der de sorte que lorsque vous
cliquez sur le cercle, il passe en premi&egrave;re position dans la liste d’affichage et s’affiche ainsi par-dessus tout autre
contenu.
Derni&egrave;re mise &agrave; jour le 27/4/2013
183
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Le code suivant (adapt&eacute; de l’exemple pr&eacute;c&eacute;dent) permet de d&eacute;placer deux objets d’affichage, un cercle et un carr&eacute;, &agrave;
l’aide de la souris. Lorsque le bouton de la souris est press&eacute; au-dessus de l’un d’eux, cet &eacute;l&eacute;ment est amen&eacute; en haut de
la liste d’affichage de la sc&egrave;ne, afin que l’&eacute;l&eacute;ment d&eacute;plac&eacute; passe toujours devant les autres. (Tout nouveau code ou code
modifi&eacute; extrait du code pr&eacute;c&eacute;dent est imprim&eacute; en gras.)
//
//
//
//
This code creates a drag-and-drop interaction using the mouse-following
technique.
circle and square are DisplayObjects (e.g. MovieClip or Sprite
instances).
import flash.display.DisplayObject;
import flash.events.MouseEvent;
var offsetX:Number;
var offsetY:Number;
var draggedObject:DisplayObject;
// This function is called when the mouse button is pressed.
function startDragging(event:MouseEvent):void
{
// remember which object is being dragged
draggedObject = DisplayObject(event.target);
// Record the difference (offset) between where the cursor was when
// the mouse button was pressed and the x, y coordinate of the
// dragged object when the mouse button was pressed.
offsetX = event.stageX - draggedObject.x;
offsetY = event.stageY - draggedObject.y;
// move the selected object to the top of the display list
stage.addChild(draggedObject);
// Tell Flash Player to start listening for the mouseMove event.
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
// This function is called when the mouse button is released.
function stopDragging(event:MouseEvent):void
{
// Tell Flash Player to stop listening for the mouseMove event.
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragObject);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
184
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// This function is called every time the mouse moves,
// as long as the mouse button is pressed down.
function dragObject(event:MouseEvent):void
{
// Move the dragged object to the location of the cursor, maintaining
// the offset between the cursor's location and the location
// of the dragged object.
draggedObject.x = event.stageX - offsetX;
draggedObject.y = event.stageY - offsetY;
// Instruct Flash Player to refresh the screen after this event.
event.updateAfterEvent();
}
circle.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
circle.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
square.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
square.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
Pour cr&eacute;er un effet plus sophistiqu&eacute;, par exemple pour un jeu o&ugrave; des jetons ou des cartes passent d’une pile &agrave; l’autre,
il est possible d’ajouter l’objet d&eacute;plac&eacute; &agrave; la liste d’affichage de la sc&egrave;ne lorsqu’il est &laquo; pris &raquo;, puis de l’ajouter &agrave; une autre
liste d’affichage (la &laquo; pile &raquo; sur laquelle il est d&eacute;pos&eacute;) lors du rel&acirc;chement du bouton de souris.
Enfin, pour optimiser l’effet, vous pourriez appliquer un filtre Ombre port&eacute;e &agrave; l’objet d’affichage lorsque vous cliquez
dessus (en d&eacute;but de glissement) et supprimer l’ombre port&eacute;e lorsque vous rel&acirc;chez l’objet. Pour plus d’informations
sur le filtre Ombre port&eacute;e et tout autre filtre appliqu&eacute; aux objets d’affichage en ActionScript, voir &laquo; Filtrage des objets
d’affichage &raquo; &agrave; la page 276.
D&eacute;filement horizontal ou vertical des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Si la taille d’un objet d’affichage est trop &eacute;lev&eacute;e pour la zone o&ugrave; vous souhaitez l’afficher, vous disposez de la propri&eacute;t&eacute;
scrollRect pour d&eacute;finir la zone visible de l’objet d’affichage. Par ailleurs, en modifiant la propri&eacute;t&eacute; scrollRect en
r&eacute;ponse &agrave; une action de l’utilisateur, vous pouvez entra&icirc;ner un d&eacute;filement vers la gauche ou la droite ou vers le haut ou
le bas.
La propri&eacute;t&eacute; scrollRect est une occurrence de la classe Rectangle, qui combine les valeurs requises pour d&eacute;finir une
zone rectangulaire en tant qu’objet unique. Pour d&eacute;finir initialement la zone visible de l’objet d’affichage, cr&eacute;ez une
occurrence de Rectangle et affectez-la &agrave; la propri&eacute;t&eacute; scrollRect de l’objet. Par la suite, pour obtenir un d&eacute;filement
horizontal ou vertical, il suffit de lire la propri&eacute;t&eacute; scrollRect dans une variable Rectangle s&eacute;par&eacute;e et de changer la
propri&eacute;t&eacute; voulue (par exemple, modifier la propri&eacute;t&eacute; x de l’occurrence de Rectangle pour un d&eacute;filement horizontal, ou
sa propri&eacute;t&eacute; y pour un d&eacute;filement vertical). Vous r&eacute;affectez ensuite cette occurrence de Rectangle &agrave; la propri&eacute;t&eacute;
scrollRect pour avertir l’objet d’affichage du changement de valeur.
Par exemple, le code suivant d&eacute;finit la zone visible d’un objet TextField nomm&eacute; bigText dont la hauteur est trop
importante pour les dimensions du fichier SWF. Lorsque l’utilisateur clique sur les deux boutons nomm&eacute;s up et down,
les fonctions appel&eacute;es entra&icirc;nent le d&eacute;filement vertical du contenu de l’objet TextField en modifiant la propri&eacute;t&eacute; y de
l’occurrence de Rectangle scrollRect.
Derni&egrave;re mise &agrave; jour le 27/4/2013
185
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
import flash.events.MouseEvent;
import flash.geom.Rectangle;
// Define the initial viewable area of the TextField instance:
// left: 0, top: 0, width: TextField's width, height: 350 pixels.
bigText.scrollRect = new Rectangle(0, 0, bigText.width, 350);
// Cache the TextField as a bitmap to improve performance.
bigText.cacheAsBitmap = true;
// called when the &quot;up&quot; button is clicked
function scrollUp(event:MouseEvent):void
{
// Get access to the current scroll rectangle.
var rect:Rectangle = bigText.scrollRect;
// Decrease the y value of the rectangle by 20, effectively
// shifting the rectangle down by 20 pixels.
rect.y -= 20;
// Reassign the rectangle to the TextField to &quot;apply&quot; the change.
bigText.scrollRect = rect;
}
// called when the &quot;down&quot; button is clicked
function scrollDown(event:MouseEvent):void
{
// Get access to the current scroll rectangle.
var rect:Rectangle = bigText.scrollRect;
// Increase the y value of the rectangle by 20, effectively
// shifting the rectangle up by 20 pixels.
rect.y += 20;
// Reassign the rectangle to the TextField to &quot;apply&quot; the change.
bigText.scrollRect = rect;
}
up.addEventListener(MouseEvent.CLICK, scrollUp);
down.addEventListener(MouseEvent.CLICK, scrollDown);
Comme le montre cet exemple, lorsque vous utilisez la propri&eacute;t&eacute; scrollRect d’un objet d’affichage, il est pr&eacute;f&eacute;rable
de sp&eacute;cifier que Flash ou AIR doit mettre en cache le contenu de l’objet sous forme de bitmap, &agrave; l’aide de la propri&eacute;t&eacute;
cacheAsBitmap. Ainsi, Flash Player et AIR n’ont pas &agrave; redessiner le contenu complet de l’objet d’affichage &agrave; chaque
d&eacute;filement de celui-ci, et peuvent utiliser le bitmap mis en cache pour afficher la portion concern&eacute;e directement &agrave;
l’&eacute;cran. Pour plus d’informations, voir &laquo; Mise en cache des objets d’affichage &raquo; &agrave; la page 189.
Manipulation de la taille et de l’&eacute;chelle des objets
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La taille d’un objet d’affichage peut &ecirc;tre obtenue et modifi&eacute;e de deux fa&ccedil;ons, en utilisant soit les propri&eacute;t&eacute;s de
dimensions (width et height), soit les propri&eacute;t&eacute;s d’&eacute;chelle (scaleX et scaleY).
Chaque objet d’affichage poss&egrave;de une propri&eacute;t&eacute; width et une propri&eacute;t&eacute; height, qui sont initialement d&eacute;finies sur la
taille de l’objet en pixels. Vous pouvez lire les valeurs de ces propri&eacute;t&eacute;s pour mesurer la taille de l’objet d’affichage. Vous
pouvez &eacute;galement stipuler de nouvelles valeurs pour modifier la taille de l’objet, comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
186
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// Resize a display object.
square.width = 420;
square.height = 420;
// Determine the radius of a circle display object.
var radius:Number = circle.width / 2;
Modifier les propri&eacute;t&eacute;s height ou width d’un objet d’affichage modifie l’&eacute;chelle de ce dernier. En d’autres termes, son
contenu est &eacute;tir&eacute; ou comprim&eacute; en fonction de la taille de la nouvelle zone. Si l’objet d’affichage ne contient que des
formes vectorielles, elles sont redessin&eacute;es &agrave; la nouvelle &eacute;chelle, sans perte de qualit&eacute;. Tout &eacute;l&eacute;ment graphique bitmap
de l’objet d’affichage est mis &agrave; l’&eacute;chelle au lieu d’&ecirc;tre redessin&eacute;. Ainsi, une photo num&eacute;rique dont la largeur et la hauteur
augmentent de sorte &agrave; d&eacute;passer les dimensions r&eacute;elles des informations relatives aux pixels de l’image est pixellis&eacute;e, ce
qui lui donne un aspect irr&eacute;gulier.
Lorsque vous modifiez les propri&eacute;t&eacute;s width ou height d’un objet d’affichage, Flash Player et AIR mettent &eacute;galement
&agrave; jour les propri&eacute;t&eacute;s scaleX ou scaleY de l’objet.
Remarque : les objets TextField ne respectent pas ce comportement de mise &agrave; l’&eacute;chelle. Les champs de texte doivent se
redimensionner automatiquement pour g&eacute;rer le retour &agrave; la ligne automatique et les tailles de police. Leurs valeurs scaleX
et scaleY sont donc r&eacute;initialis&eacute;es &agrave; 1 au terme du redimensionnement. Toutefois, si vous ajustez la valeur scaleX ou scaleY
d’un objet TextField, les valeurs de largeur et de hauteur sont modifi&eacute;es en fonction des valeurs de mise &agrave; l’&eacute;chelle que
vous indiquez.
Ces propri&eacute;t&eacute;s repr&eacute;sentent la taille relative de l’objet d’affichage par rapport &agrave; sa taille d’origine. Les propri&eacute;t&eacute;s scaleX
et scaleY utilisent des valeurs exprim&eacute;es sous forme de fractions (d&eacute;cimales) pour repr&eacute;senter le pourcentage. Par
exemple, si la propri&eacute;t&eacute; width d’un objet d’affichage a &eacute;t&eacute; r&eacute;duite &agrave; la moiti&eacute; de sa largeur originale, la propri&eacute;t&eacute; scaleX
de cet objet prendra la valeur 0,5, soit 50 %. Si sa hauteur a doubl&eacute;, sa propri&eacute;t&eacute; scaleY prendra la valeur 2, soit 200 %.
// circle is a display object whose width and height are 150 pixels.
// At original size, scaleX and scaleY are 1 (100%).
trace(circle.scaleX); // output: 1
trace(circle.scaleY); // output: 1
// When you change the width and height properties,
// Flash Player changes the scaleX and scaleY properties accordingly.
circle.width = 100;
circle.height = 75;
trace(circle.scaleX); // output: 0.6622516556291391
trace(circle.scaleY); // output: 0.4966887417218543
Les changements de taille ne sont pas proportionnels. En d’autres termes, si vous modifiez la hauteur d’un carr&eacute;, mais
non sa largeur, ses proportions ne sont plus identiques et il devient un rectangle au lieu d’un carr&eacute;. Si vous souhaitez
modifier relativement la taille d’un objet d’affichage, vous pouvez d&eacute;finir les valeurs des propri&eacute;t&eacute;s scaleX et scaleY
pour redimensionner l’objet, plut&ocirc;t que d&eacute;finir les propri&eacute;t&eacute;s width ou height. Par exemple, ce code modifie la
propri&eacute;t&eacute; width de l’objet d’affichage appel&eacute; square, puis modifie l’&eacute;chelle verticale (scaleY) en fonction de l’&eacute;chelle
horizontale, afin que la taille du carr&eacute; demeure proportionnelle.
// Change the width directly.
square.width = 150;
// Change the vertical scale to match the horizontal scale,
// to keep the size proportional.
square.scaleY = square.scaleX;
Derni&egrave;re mise &agrave; jour le 27/4/2013
187
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Contr&ocirc;le de la distorsion lors de la mise &agrave; l’&eacute;chelle
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
En r&egrave;gle g&eacute;n&eacute;rale, lorsqu’un objet d’affichage est mis &agrave; l’&eacute;chelle (s’il est &eacute;tir&eacute; horizontalement, par exemple), la
distorsion r&eacute;sultante est r&eacute;partie &eacute;quitablement dans l’objet, de sorte que chaque partie soit soumise &agrave; un &eacute;tirement
identique. Pour les graphiques et &eacute;l&eacute;ments de conception, cette technique correspond probablement au r&eacute;sultat
escompt&eacute;. Toutefois, il est parfois pr&eacute;f&eacute;rable de garder le contr&ocirc;le sur les parties de l’objet qui seront &eacute;tir&eacute;es et celles
qui ne le seront pas. Un exemple courant est celui d’un bouton repr&eacute;sent&eacute; par un rectangle aux angles arrondis. Lors
d’une mise &agrave; l’&eacute;chelle normale, les angles du bouton sont &eacute;tir&eacute;s, entra&icirc;nant ainsi la modification de leur rayon lorsque
le bouton est redimensionn&eacute;.
Mais dans ce cas pr&eacute;cis, il serait pr&eacute;f&eacute;rable de contr&ocirc;ler la mise &agrave; l’&eacute;chelle, c’est-&agrave;-dire de pouvoir d&eacute;signer certaines
zones qui seront mises &agrave; l’&eacute;chelle (les c&ocirc;t&eacute;s) et celles qui ne le seront pas (les angles), afin que le changement d’&eacute;chelle
ne provoque pas de distorsion visible.
Vous disposez de la mise &agrave; l’&eacute;chelle &agrave; 9 d&eacute;coupes (Echelle-9) pour cr&eacute;er des objets d’affichage dont vous contr&ocirc;lez le
mode de mise &agrave; l’&eacute;chelle. La mise &agrave; l’&eacute;chelle &agrave; 9 d&eacute;coupes permet de diviser l’objet d’affichage en neuf rectangles
distincts (grille de 3 sur 3). Ces rectangles ne sont pas obligatoirement de la m&ecirc;me taille, car l’utilisateur choisit
l’emplacement des lignes de s&eacute;paration. Tout contenu plac&eacute; dans les quatre rectangles de coin (tels que les angles
arrondis d’un bouton) n’est ni &eacute;tir&eacute;, ni comprim&eacute; lors de la mise &agrave; l’&eacute;chelle de l’objet d’affichage. Les rectangles plac&eacute;s
en haut au centre et en bas au centre sont mis &agrave; l’&eacute;chelle horizontalement, mais non verticalement, tandis que les
rectangles centraux de gauche et de droite sont mis &agrave; l’&eacute;chelle verticalement, mais non horizontalement. Le rectangle
central est mis &agrave; l’&eacute;chelle horizontalement et verticalement.
Ainsi, si vous cr&eacute;ez un objet d’affichage et souhaitez qu’une partie du contenu ne subisse jamais de mise &agrave; l’&eacute;chelle, il
vous suffit de placer les lignes de s&eacute;paration de la grille de mise &agrave; l’&eacute;chelle &agrave; 9 d&eacute;coupes de telle sorte que ce contenu se
trouve dans l’un des rectangles des angles.
En ActionScript, il suffit de d&eacute;finir une valeur pour la propri&eacute;t&eacute; scale9Grid d’un objet d’affichage pour activer la mise
&agrave; l’&eacute;chelle &agrave; 9 d&eacute;coupes pour cet objet et d&eacute;finir la taille des rectangles de la grille. Vous utilisez une occurrence de la
classe Rectangle en tant que valeur de la propri&eacute;t&eacute; scale9Grid, comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
188
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
myButton.scale9Grid = new Rectangle(32, 27, 71, 64);
Les quatre param&egrave;tres du constructeur Rectangle sont la coordonn&eacute;e x, la coordonn&eacute;e y, la largeur et la hauteur. Dans
cet exemple, l’angle sup&eacute;rieur gauche du rectangle est plac&eacute; au point x : 32, y : 27 sur l’objet d’affichage appel&eacute;
myButton. Le rectangle mesure 71 pixels de large et 64 pixels de haut (son bord droit correspond &agrave; la coordonn&eacute;e x
103 sur l’objet d’affichage et son bord inf&eacute;rieur &agrave; la coordonn&eacute;e y 92 sur l’objet d’affichage).
La zone figurant dans la r&eacute;gion d&eacute;finie par l’occurrence de Rectangle repr&eacute;sente le rectangle central de la grille Echelle9. Les autres rectangles sont calcul&eacute;s par Flash Player et AIR en prolongeant les c&ocirc;t&eacute;s de l’occurrence de Rectangle,
comme indiqu&eacute; :
Dans ce cas de figure, lorsque la mise &agrave; l’&eacute;chelle du bouton augmente ou diminue, les angles arrondis ne sont ni &eacute;tir&eacute;s,
ni comprim&eacute;s, mais les autres zones sont ajust&eacute;es en cons&eacute;quence.
A
B
C
A. myButton.width = 131;myButton.height = 106; B. myButton.width = 73;myButton.height = 69; C. myButton.width = 54;myButton.height
= 141;
Mise en cache des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Que vous cr&eacute;iez une application ou des animations script&eacute;es complexes, vous devez consid&eacute;rer la performance et
l’optimisation, &agrave; mesure que la taille de vos conceptions Flash augmente. Lorsque votre contenu demeure statique (par
exemple une occurrence de Shape rectangulaire), Flash et AIR ne l’optimisent pas. Par cons&eacute;quent, lorsque vous
modifiez la position du rectangle, Flash Player ou AIR redessine la totalit&eacute; de l’occurrence de Shape.
Vous pouvez mettre en cache des objets d’affichage sp&eacute;cifiques pour am&eacute;liorer les performances de votre fichier SWF.
L’objet d’affichage est essentiellement une surface, c’est-&agrave;-dire une version bitmap des donn&eacute;es vectorielles de
l’occurrence, donn&eacute;es non destin&eacute;es &agrave; &ecirc;tre consid&eacute;rablement modifi&eacute;es tout au long de la vie de votre fichier SWF.
Ainsi, les occurrences pour lesquelles la mise en cache est activ&eacute;e ne sont pas continuellement redessin&eacute;es pendant la
lecture du fichier SWF, et le rendu de ce dernier est plus rapide.
Remarque : vous pouvez mettre &agrave; jour les donn&eacute;es vectorielles au moment de la recr&eacute;ation de la surface. Ainsi, les donn&eacute;es
vectorielles mises en cache dans la surface ne doivent pas n&eacute;cessairement &ecirc;tre les m&ecirc;mes pour l’ensemble du fichier SWF.
Derni&egrave;re mise &agrave; jour le 27/4/2013
189
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Pour qu’un objet d’affichage mette en cache sa repr&eacute;sentation sous forme de bitmap, il suffit d’activer sa propri&eacute;t&eacute;
cacheAsBitmap (true). Flash Player ou AIR cr&eacute;e un objet de surface pour l’occurrence, correspondant &agrave; une image
bitmap mise en cache et non &agrave; des donn&eacute;es vectorielles. Si vous modifiez les limites de l’objet d’affichage, la surface est
recr&eacute;&eacute;e et non redimensionn&eacute;e. Les surfaces peuvent s’imbriquer dans d’autres surfaces. La surface copiera l’image
bitmap sur sa surface parent. Pour plus d’informations, voir &laquo; Activation de la mise en cache sous forme de bitmap &raquo;
&agrave; la page 192.
Les propri&eacute;t&eacute;s opaqueBackground et scrollRect de la classe DisplayObject sont li&eacute;es &agrave; la mise en cache sous forme
de bitmap par le biais de la propri&eacute;t&eacute; cacheAsBitmap. Bien que ces trois propri&eacute;t&eacute;s soient ind&eacute;pendantes l’une de
l’autre, opaqueBackground et scrollRect ne sont utiles que lorsqu’un objet est mis en cache sous forme de bitmap.
Les avantages des propri&eacute;t&eacute;s opaqueBackground et scrollRect en termes de performances ne sont visibles que si
cacheAsBitmap est d&eacute;finie sur true. Pour plus d’informations sur le d&eacute;filement du contenu des objets d’affichage,
voir &laquo; D&eacute;filement horizontal ou vertical des objets d’affichage &raquo; &agrave; la page 185. Pour plus d’informations sur la
d&eacute;finition d’un arri&egrave;re-plan opaque, voir &laquo; D&eacute;finition d’un arri&egrave;re-plan opaque &raquo; &agrave; la page 192.
Pour plus d’informations sur le masquage du canal alpha, qui demande que vous d&eacute;finissiez la propri&eacute;t&eacute;
cacheAsBitmap sur true, voir &laquo; Masquage des objets d’affichage &raquo; &agrave; la page 197.
Quand activer la mise en cache
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’activation de la mise en cache d’un objet d’affichage cr&eacute;e une surface dont les avantages sont multiples, par exemple
pour acc&eacute;l&eacute;rer le rendu des animations vectorielles complexes. Lorsque vous souhaitez activer la mise en cache,
plusieurs sc&eacute;narios sont disponibles. Il pourrait sembler avantageux de toujours activer la mise en cache pour
am&eacute;liorer les performances de votre fichier SWF. Cependant, dans certains cas, cette op&eacute;ration n’a aucun effet
b&eacute;n&eacute;fique et risque m&ecirc;me parfois de ralentir le fichier. Cette section pr&eacute;sente des cas o&ugrave; la mise en cache s’av&egrave;re
b&eacute;n&eacute;fique, et d’autres o&ugrave; il est pr&eacute;f&eacute;rable d’utiliser les objets de fa&ccedil;on normale.
Les performances g&eacute;n&eacute;rales des donn&eacute;es mises en cache d&eacute;pendent de la complexit&eacute; des donn&eacute;es vectorielles de vos
occurrences, de la quantit&eacute; de modifications et de la d&eacute;finition, ou non, de la propri&eacute;t&eacute; opaqueBackground. Si vous
modifiez de petites zones, la diff&eacute;rence entre l’utilisation d’une surface et celle de donn&eacute;es vectorielles sera n&eacute;gligeable.
Vous pouvez dans ce cas tester les deux sc&eacute;narios avant de d&eacute;ployer votre application.
Quand utiliser la mise en cache sous forme de bitmap
Ce qui suit est une s&eacute;rie de sc&eacute;narios dans lesquels vous pouvez voir les b&eacute;n&eacute;fices significatifs qui r&eacute;sultent de la mise
en cache sous forme de bitmap.
• Image complexe d’arri&egrave;re-plan : application qui contient une image d’arri&egrave;re-plan complexe de donn&eacute;es
vectorielles (peut-&ecirc;tre une image &agrave; laquelle vous avez appliqu&eacute; la commande de tra&ccedil;age de bitmap ou illustration
cr&eacute;&eacute;e dans Adobe Illustrator&reg;). Vous pouvez animer les caract&egrave;res sur l’arri&egrave;re-plan, ce qui ralentit l’animation
parce que l’arri&egrave;re-plan a besoin de continuellement r&eacute;g&eacute;n&eacute;rer les donn&eacute;es vectorielles. Pour am&eacute;liorer les
performances, vous pouvez d&eacute;finir la propri&eacute;t&eacute; opaqueBackground de l’objet d’affichage d’arri&egrave;re-plan sur true.
L’arri&egrave;re-plan est rendu en tant que bitmap et peut &ecirc;tre redessin&eacute; rapidement pour que l’animation soit lue
beaucoup plus vite.
• Champ de texte de d&eacute;filement : application qui affiche une grande quantit&eacute; de texte dans un champ de texte de
d&eacute;filement. Vous pouvez placer le champ de texte dans un objet d’affichage que vous d&eacute;finissez comme d&eacute;roulant
&agrave; l’aide de bornes de d&eacute;roulement (propri&eacute;t&eacute; scrollRect). Ceci permet un d&eacute;roulement de pixels rapide pour
l’occurrence indiqu&eacute;e. Quand un utilisateur d&eacute;roule l’occurrence d’objet d’affichage, Flash Player ou AIR fait d&eacute;filer
les pixels d&eacute;roul&eacute;s vers le haut et g&eacute;n&egrave;re la zone nouvellement expos&eacute;e au lieu de r&eacute;g&eacute;n&eacute;rer tout le champ de texte.
Derni&egrave;re mise &agrave; jour le 27/4/2013
190
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
• Syst&egrave;me de fen&ecirc;tres : application comportant un syst&egrave;me complexe de chevauchement de fen&ecirc;tres. Chaque fen&ecirc;tre
peut &ecirc;tre ouverte ou ferm&eacute;e (par exemple, les fen&ecirc;tres du navigateur Web). Si vous marquez chaque fen&ecirc;tre en tant
que surface (en d&eacute;finissant la propri&eacute;t&eacute; cacheAsBitmap sur true), chaque fen&ecirc;tre est isol&eacute;e et mise en cache. Les
utilisateurs peuvent faire glisser les fen&ecirc;tres de mani&egrave;re &agrave; ce qu’elles se chevauchent. Chaque fen&ecirc;tre n’a pas besoin
de r&eacute;g&eacute;n&eacute;rer le contenu vectoriel.
• Masquage du canal alpha : si vous utilisez le masquage du canal alpha, vous devez d&eacute;finir la propri&eacute;t&eacute;
cacheAsBitmap sur true. Pour plus d’informations, voir &laquo; Masquage des objets d’affichage &raquo; &agrave; la page 197.
Activer la mise en cache sous forme de bitmap dans tous ces sc&eacute;narios am&eacute;liore la r&eacute;activit&eacute; et l’interactivit&eacute; de
l’application en optimisant les graphiques vectoriels.
Par ailleurs, lorsque vous appliquez un filtre &agrave; un objet d’affichage, cacheAsBitmap est automatiquement d&eacute;finie sur
true, m&ecirc;me si vous l’avez explicitement d&eacute;finie sur false. Si vous supprimez tous les filtres appliqu&eacute;s &agrave; l’objet
d’affichage, la propri&eacute;t&eacute; cacheAsBitmap retrouve la valeur pr&eacute;c&eacute;demment d&eacute;finie.
Quand &eacute;viter d’utiliser la mise en cache sous forme de bitmap
L’utilisation &agrave; mauvais escient de cette fonction risque d’affecter les performances du fichier SWF. Avant d’utiliser la
mise en cache sous forme de bitmap, tenez compte des consid&eacute;rations suivantes :
• N’abusez pas des surfaces (objets d’affichage avec mise en cache activ&eacute;e). Chaque surface utilise plus de m&eacute;moire
qu’un objet d’affichage standard, ce qui signifie que vous ne devez activer les surfaces que lorsqu’il est n&eacute;cessaire
d’am&eacute;liorer les performances de rendu.
Un bitmap cach&eacute; utilise beaucoup plus de m&eacute;moire qu’un objet d’affichage standard. Par exemple, si la taille d’une
occurrence de Sprite sur la sc&egrave;ne correspond &agrave; 250 pixels sur 250 pixels, elle est susceptible d’utiliser en cache 250
Ko au lieu d’1 Ko pour une occurrence de Sprite standard (non en cache).
• Evitez de zoomer dans les surfaces cach&eacute;es. Si vous abusez de la mise en cache sous forme de bitmap, une grande
quantit&eacute; de m&eacute;moire sera occup&eacute;e (voir la puce pr&eacute;c&eacute;dente), surtout si vous zoomez sur le contenu.
• Utilisez des surfaces essentiellement non statiques (sans animation) pour les occurrences d’objets d’affichage. Vous
pouvez faire glisser ou d&eacute;placer l’occurrence, mais son contenu ne doit pas &ecirc;tre anim&eacute; ni subir de nombreuses
modifications (les animations ou les contenus qui changent sont plus fr&eacute;quents lorsqu’une occurrence de
MovieClip contient une animation ou une occurrence de Video). Par exemple, si vous faites pivoter ou transformez
une occurrence, la diff&eacute;rence entre la surface et les donn&eacute;es vectorielles rend le traitement difficile et affecte le
fichier SWF.
• Panacher des surfaces avec des donn&eacute;es vectorielles accro&icirc;t la charge de traitement de Flash Player et AIR (et
quelquefois de l’ordinateur). Dans la mesure du possible, regroupez les surfaces, en particulier lorsque vous cr&eacute;ez
des applications &agrave; fen&ecirc;tres.
• Ne mettez pas en cache les objets dont les graphiques sont fr&eacute;quemment modifi&eacute;s. A chaque fois que vous ex&eacute;cutez
une mise &agrave; l’&eacute;chelle, inclinaison ou rotation de l’objet d’affichage, modifiez l’alpha ou la transformation de couleur,
d&eacute;placez des objets d’affichage enfant ou tracez &agrave; l’aide de la propri&eacute;t&eacute; graphique, la m&eacute;moire cache des bitmaps est
r&eacute;g&eacute;n&eacute;r&eacute;e. Si cette op&eacute;ration se produit &agrave; chaque image, le moteur d’ex&eacute;cution doit tracer l’objet dans une image
bitmap, puis copier celle-ci sur la sc&egrave;ne, d’o&ugrave; une charge de travail accrue par rapport au simple trac&eacute; de l’objet non
mis en cache sur la sc&egrave;ne. L’impact sur les performances de la mise en cache par rapport &agrave; la fr&eacute;quence de mise &agrave;
jour varie selon la complexit&eacute; et la taille de l’objet d’affichage et ne peut &ecirc;tre d&eacute;termin&eacute; qu’en testant le contenu
concern&eacute;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
191
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Activation de la mise en cache sous forme de bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour activer la mise en cache d’un objet d’affichage sous forme de bitmap, d&eacute;finissez sa propri&eacute;t&eacute; cacheAsBitmap sur
true :
mySprite.cacheAsBitmap = true;
Apr&egrave;s avoir d&eacute;fini la propri&eacute;t&eacute; cacheAsBitmap sur true, vous remarquerez que l’objet d’affichage accroche
automatiquement les pixels sur les coordonn&eacute;es enti&egrave;res. Lorsque vous testez le fichier SWF, vous devriez remarquer
que le rendu d’une animation associ&eacute;e &agrave; une image vectorielle complexe est bien plus rapide.
Une surface (bitmap en cache) n’est pas cr&eacute;&eacute;e m&ecirc;me quand cacheAsBitmap est d&eacute;fini sur true s’il se produit l’un ou
l’autre des &eacute;v&eacute;nements suivants :
• Le bitmap fait plus de 2 880 pixels en hauteur ou en largeur.
• Il est impossible d’allouer de la m&eacute;moire pour l’image bitmap.
Matrices de transformation des images bitmap mises en cache
Adobe AIR 2.0 et les versions ult&eacute;rieures (profil mobile)
Dans les applications AIR pour p&eacute;riph&eacute;riques mobiles, vous devriez d&eacute;finir la propri&eacute;t&eacute; cacheAsBitmapMatrix &agrave;
chaque fois que vous d&eacute;finissez la propri&eacute;t&eacute; cacheAsBitmap. D&eacute;finir cette propri&eacute;t&eacute; permet d’appliquer un large
&eacute;ventail de transformations &agrave; l’objet d’affichage sans d&eacute;clencher un nouveau rendu.
mySprite.cacheAsBitmap = true;
mySprite.cacheAsBitmapMatrix = new Matrix();
Lorsque vous d&eacute;finissez cette propri&eacute;t&eacute;, vous pouvez appliquer la transformation compl&eacute;mentaire suivante &agrave; l’objet
d’affichage sans mettre &agrave; nouveau l’objet en cache :
• D&eacute;placement ou translation sans accrochage de pixel
• Rotation
• Mise &agrave; l’&eacute;chelle
• Inclinaison
• Modification de l’alpha (transparence comprise entre 0 et 100 %)
Ces transformations sont appliqu&eacute;es directement &agrave; l’image bitmap mise en cache.
D&eacute;finition d’un arri&egrave;re-plan opaque
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez d&eacute;finir un arri&egrave;re-plan opaque pour un objet d’affichage. Par exemple, si l’arri&egrave;re-plan de votre fichier
SWF contient une illustration vectorielle complexe, vous pouvez d&eacute;finir la propri&eacute;t&eacute; opaqueBackground sur une
couleur donn&eacute;e (en g&eacute;n&eacute;ral la m&ecirc;me couleur que la sc&egrave;ne). La couleur est stipul&eacute;e sous forme de nombre
(g&eacute;n&eacute;ralement une valeur hexad&eacute;cimale). L’arri&egrave;re-plan est alors consid&eacute;r&eacute; comme un bitmap, ce qui permet
d’optimiser les performances.
Lorsque vous d&eacute;finissez cacheAsBitmap sur true et la propri&eacute;t&eacute; opaqueBackground sur une couleur donn&eacute;e, la
propri&eacute;t&eacute; opaqueBackground assure l’opacit&eacute; du bitmap interne et un rendu plus rapide. Si vous ne d&eacute;finissez pas
cacheAsBitmap sur true, la propri&eacute;t&eacute; opaqueBackground ajoute une forme carr&eacute;e vectorielle opaque &agrave; l’arri&egrave;re-plan
de l’objet d’affichage. Elle ne cr&eacute;e pas automatiquement un bitmap.
Derni&egrave;re mise &agrave; jour le 27/4/2013
192
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
L’exemple suivant d&eacute;crit comment d&eacute;finir l’arri&egrave;re-plan d’un objet d’affichage pour optimiser les performances :
myShape.cacheAsBitmap = true;
myShape.opaqueBackground = 0xFF0000;
Dans ce cas, la couleur d’arri&egrave;re-plan de l’objet Shape appel&eacute; myShape est d&eacute;finie sur rouge (0xFF0000). Si l’on suppose
que l’occurrence de Shape contient un triangle vert, sur une sc&egrave;ne dot&eacute;e d’un fond blanc le r&eacute;sultat sera un triangle vert
sur le fond rouge d&eacute;fini par le cadre de s&eacute;lection de l’occurrence de Shape (le rectangle qui entoure enti&egrave;rement Shape).
Ce code serait bien entendu plus logique s’il &eacute;tait utilis&eacute; avec une sc&egrave;ne dot&eacute;e d’un arri&egrave;re-plan rouge uni. Si l’arri&egrave;replan &eacute;tait d’une autre couleur, celle-ci remplacerait le rouge. Par exemple, dans un fichier SWF dot&eacute; d’un arri&egrave;re-plan
blanc, la propri&eacute;t&eacute; opaqueBackground serait probablement d&eacute;finie sur 0xFFFFFF, soit un blanc pur.
Application de modes de fondu
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les modes de fondu supposent d’associer les couleurs d’une image (l’image de base) &agrave; celles d’une autre image (l’image
m&eacute;lang&eacute;e) afin de produire une troisi&egrave;me image, qui est celle qui sera en fait affich&eacute;e &agrave; l’&eacute;cran. Chaque valeur de pixels
d’une image est trait&eacute;e avec la valeur de pixels correspondante de l’autre image afin d’obtenir un r&eacute;sultat pr&eacute;sentant
une valeur de pixels de position identique.
Tous les objets d’affichage poss&egrave;dent une propri&eacute;t&eacute; blendMode qui peut &ecirc;tre d&eacute;finie sur l’un des modes de fondu cidessous. Les valeurs ci-dessous sont des constantes d&eacute;finies dans la classe BlendMode. Vous pouvez &eacute;galement utiliser
les valeurs String (entre parenth&egrave;ses) correspondant aux valeurs r&eacute;elles des constantes.
•
BlendMode.ADD (&quot;add&quot;) : s’utilise couramment pour cr&eacute;er un effet de dissolution anim&eacute;e entre deux images en
&eacute;claircissant progressivement leurs couleurs.
•
BlendMode.ALPHA (&quot;alpha&quot;) : fr&eacute;quemment utilis&eacute; pour appliquer la transparence de l’avant-plan &agrave; l’arri&egrave;re-plan.
(Pas de prise en charge en cas de rendu par processeur graphique.)
•
BlendMode.DARKEN (&quot;darken&quot;) : s’utilise couramment pour superposer un type. (Pas de prise en charge en cas de
rendu par processeur graphique.)
•
BlendMode.DIFFERENCE (&quot;difference&quot;) : s’utilise couramment pour cr&eacute;er des couleurs plus vives.
•
BlendMode.ERASE (&quot;erase&quot;) : s’utilise couramment pour d&eacute;couper (effacer) une partie de l’arri&egrave;re-plan &agrave; l’aide de
l’alpha d’avant-plan. (Pas de prise en charge en cas de rendu par processeur graphique.)
•
BlendMode.HARDLIGHT (&quot;hardlight&quot;) : s’utilise couramment pour cr&eacute;er des effets d’ombrage. (Pas de prise en
charge en cas de rendu par processeur graphique.)
•
BlendMode.INVERT (&quot;invert&quot;) : permet d’inverser l’arri&egrave;re-plan.
•
BlendMode.LAYER (&quot;layer&quot;) : permet d’imposer la cr&eacute;ation d’un tampon provisoire en vue de la pr&eacute;composition
d’un objet d’affichage sp&eacute;cifique. (Pas de prise en charge en cas de rendu par processeur graphique.)
•
BlendMode.LIGHTEN (&quot;lighten&quot;) : s’utilise couramment pour superposer un type. (Pas de prise en charge en cas
de rendu par processeur graphique.)
•
BlendMode.MULTIPLY (&quot;multiply&quot;) : s’utilise couramment pour cr&eacute;er des ombres et des effets de profondeur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
193
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
•
BlendMode.NORMAL (&quot;normal&quot;) : permet aux valeurs des pixels de l’image m&eacute;lang&eacute;e de supplanter celles de l’image
de base.
•
BlendMode.OVERLAY (&quot;overlay&quot;) : s’utilise couramment pour cr&eacute;er des effets d’ombrage. (Pas de prise en charge
en cas de rendu par processeur graphique.)
•
BlendMode.SCREEN (&quot;screen&quot;) : s’utilise couramment pour cr&eacute;er des mises en surbrillance et des halos.
•
BlendMode.SHADER (&quot;shader&quot;) : permet d’indiquer l’utilisation d’un shader de Pixel Bender pour cr&eacute;er un effet
de m&eacute;lange personnalis&eacute;. Pour plus d’informations sur l’utilisation des shaders, voir &laquo; Utilisation des shaders de
Pixel Bender &raquo; &agrave; la page 310. (Pas de prise en charge en cas de rendu par processeur graphique.)
•
BlendMode.SUBTRACT (&quot;subtract&quot;) : s’utilise couramment pour cr&eacute;er un effet de dissolution anim&eacute;e entre deux
images en assombrissant progressivement leurs couleurs.
R&eacute;glage des couleurs DisplayObject
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser les m&eacute;thodes de la classe ColorTransform (flash.geom.ColorTransform) pour r&eacute;gler la couleur
d’un objet d’affichage. Chaque objet d’affichage poss&egrave;de une propri&eacute;t&eacute; transform, qui est une occurrence de la classe
Transform et contient des informations relatives aux diverses transformations appliqu&eacute;es &agrave; l’objet d’affichage
(rotation, changements d’&eacute;chelle ou de position, etc.). Outre ces informations sur les transformations g&eacute;om&eacute;triques,
la classe Transform comprend &eacute;galement une propri&eacute;t&eacute; colorTransform, qui est une occurrence de la classe
ColorTransform et permet de r&eacute;gler les couleurs de l’objet d’affichage Pour acc&eacute;der aux informations de
transformation d’un objet d’affichage, utilisez le code suivant :
var colorInfo:ColorTransform = myDisplayObject.transform.colorTransform;
Apr&egrave;s avoir cr&eacute;&eacute; une occurrence de ColorTransform, vous pouvez lire les valeurs de ses propri&eacute;t&eacute;s pour conna&icirc;tre les
transformations de couleur qui lui ont d&eacute;j&agrave; &eacute;t&eacute; appliqu&eacute;es, et vous pouvez modifier ces valeurs pour changer les
couleurs de l’objet. Pour mettre &agrave; jour l’objet d’affichage apr&egrave;s toute modification, vous devez r&eacute;affecter l’occurrence
de ColorTransform &agrave; la propri&eacute;t&eacute; transform.colorTransform.
var colorInfo:ColorTransform = myDisplayObject.transform.colorTransform;
// Make some color transformations here.
// Commit the change.
myDisplayObject.transform.colorTransform = colorInfo;
D&eacute;finition des valeurs de couleur &agrave; l’aide du code
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La propri&eacute;t&eacute; color de la classe ColorTransform permet d’affecter une valeur de couleur rouge, vert, bleu (RVB)
d&eacute;termin&eacute;e &agrave; l’objet d’affichage. L’exemple suivant utilise la propri&eacute;t&eacute; color pour changer en bleu la couleur de l’objet
d’affichage square lorsque l’utilisateur clique sur le bouton blueBtn :
Derni&egrave;re mise &agrave; jour le 27/4/2013
194
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// square is a display object on the Stage.
// blueBtn, redBtn, greenBtn, and blackBtn are buttons on the Stage.
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
// Get access to the ColorTransform instance associated with square.
var colorInfo:ColorTransform = square.transform.colorTransform;
// This function is called when blueBtn is clicked.
function makeBlue(event:MouseEvent):void
{
// Set the color of the ColorTransform object.
colorInfo.color = 0x003399;
// apply the change to the display object
square.transform.colorTransform = colorInfo;
}
blueBtn.addEventListener(MouseEvent.CLICK, makeBlue);
Notez que si vous changez la couleur d’un objet d’affichage &agrave; l’aide de la propri&eacute;t&eacute; color, c’est la couleur de l’objet
entier qui est modifi&eacute;e, m&ecirc;me s’il comportait plusieurs couleurs &agrave; l’origine. Par exemple, si un objet d’affichage
contient un cercle vert en arri&egrave;re-plan d’un texte noir, le choix du rouge pour la propri&eacute;t&eacute; color de l’occurrence de
ColorTransform associ&eacute;e &agrave; cet objet transformera int&eacute;gralement l’objet en rouge, cercle et texte compris (le texte ne
sera donc plus lisible sur le fond de la m&ecirc;me couleur).
Modification des effets de couleur et de luminosit&eacute; &agrave; l’aide du code
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Supposons qu’un objet d’affichage comporte plusieurs couleurs (par exemple une photo num&eacute;rique) et que vous
n’ayez pas l’intention de modifier la couleur de l’ensemble de l’objet, mais uniquement celle d’un de ses &eacute;l&eacute;ments sur
la base des couleurs existantes. Dans ce sc&eacute;nario, la classe ColorTransform comprend une s&eacute;rie de propri&eacute;t&eacute;s de
multiplication et de dominante permettant d’effectuer ce type de r&eacute;glage. Les propri&eacute;t&eacute;s de multiplication, appel&eacute;es
redMultiplier, greenMultiplier, blueMultiplier et alphaMultiplier, fonctionnent comme des filtres
photographiques de couleur (ou des lunettes &agrave; verres de couleur) et amplifient ou diminuent certaines couleurs de
l’objet d’affichage. Les propri&eacute;t&eacute;s de dominante (redOffset, greenOffset, blueOffset et alphaOffset) permettent
d’ajouter &agrave; l’objet une quantit&eacute; suppl&eacute;mentaire d’une certaine couleur, ou d’indiquer la valeur minimale que peut avoir
une couleur particuli&egrave;re.
Ces propri&eacute;t&eacute;s de multiplication et de dominante sont identiques aux r&eacute;glages de couleurs avanc&eacute;s relatifs aux
symboles de clips dans l’outil de programmation Flash lorsque vous s&eacute;lectionnez Param&egrave;tres avanc&eacute;s dans le menu
d&eacute;roulant Couleur de l’Inspecteur des propri&eacute;t&eacute;s.
Le code suivant charge une image JPEG et lui applique une transformation de couleur, qui ajuste les canaux rouge et
vert lorsque le pointeur de la classe se d&eacute;place le long des axes x et y. Dans ce cas pr&eacute;cis, comme aucune valeur de
dominante n’est sp&eacute;cifi&eacute;e, les valeurs de chaque canal colorim&eacute;trique seront un pourcentage de la valeur de couleur
originale de l’image, c’est-&agrave;-dire que la valeur maximale de rouge ou de vert d’un pixel donn&eacute; sera la quantit&eacute; originale
de vert ou de rouge de ce pixel.
Derni&egrave;re mise &agrave; jour le 27/4/2013
195
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
import
import
import
import
import
flash.display.Loader;
flash.events.MouseEvent;
flash.geom.Transform;
flash.geom.ColorTransform;
flash.net.URLRequest;
// Load an image onto the Stage.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;http://www.helpexamples.com/flash/images/image1.jpg&quot;);
loader.load(url);
this.addChild(loader);
// This function is called when the mouse moves over the loaded image.
function adjustColor(event:MouseEvent):void
{
// Access the ColorTransform object for the Loader (containing the image)
var colorTransformer:ColorTransform = loader.transform.colorTransform;
// Set the red and green multipliers according to the mouse position.
// The red value ranges from 0% (no red) when the cursor is at the left
// to 100% red (normal image appearance) when the cursor is at the right.
// The same applies to the green channel, except it's controlled by the
// position of the mouse in the y axis.
colorTransformer.redMultiplier = (loader.mouseX / loader.width) * 1;
colorTransformer.greenMultiplier = (loader.mouseY / loader.height) * 1;
// Apply the changes to the display object.
loader.transform.colorTransform = colorTransformer;
}
loader.addEventListener(MouseEvent.MOUSE_MOVE, adjustColor);
Rotation des objets
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La propri&eacute;t&eacute; rotation permet de faire pivoter les objets d’affichage. Vous pouvez lire cette valeur pour savoir si un
objet a &eacute;t&eacute; soumis &agrave; une rotation. Vous pouvez &eacute;galement la d&eacute;finir sur un nombre (exprim&eacute; en degr&eacute;s) repr&eacute;sentant
le montant de rotation &agrave; appliquer &agrave; l’objet. Par exemple, cette ligne de code fait pivoter l’objet square de 45 degr&eacute;s
(un huiti&egrave;me de tour complet) :
square.rotation = 45;
Vous pouvez &eacute;galement faire pivoter un objet d’affichage par le biais d’une matrice de transformation, d&eacute;crite dans
&laquo; Utilisation de la g&eacute;om&eacute;trie &raquo; &agrave; la page 218.
Derni&egrave;re mise &agrave; jour le 27/4/2013
196
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Application d’effets de fondu &agrave; des objets
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez contr&ocirc;ler la transparence d’un objet d’affichage de sorte &agrave; le rendre partiellement (ou totalement)
transparent, ou modifier la transparence pour cr&eacute;er une impression d’apparition ou de disparition en fondu de l’objet.
La propri&eacute;t&eacute; alpha de la classe DisplayObject d&eacute;finit la transparence (ou plus pr&eacute;cis&eacute;ment l’opacit&eacute;) d’un objet
d’affichage. La propri&eacute;t&eacute; alpha peut &ecirc;tre d&eacute;finie sur n’importe quelle valeur comprise entre 0 et 1, sachant que 0
correspond &agrave; une transparence totale et 1 &agrave; une opacit&eacute; totale. Par exemple, le code suivant rend l’objet myBall
transparent &agrave; 50 % lors d’un clic de souris :
function fadeBall(event:MouseEvent):void
{
myBall.alpha = .5;
}
myBall.addEventListener(MouseEvent.CLICK, fadeBall);
Vous pouvez &eacute;galement modifier la transparence d’un objet d’affichage en utilisant les r&eacute;glages de couleur propos&eacute;s
par la classe ColorTransform. Pour plus d’informations, voir &laquo; R&eacute;glage des couleurs DisplayObject &raquo; &agrave; la page 194.
Masquage des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser un objet d’affichage comme masque pour cr&eacute;er un &laquo; trou &raquo; laissant appara&icirc;tre le contenu d’un
autre objet.
D&eacute;finition d’un masque
Pour indiquer qu’un objet d’affichage sera le masque d’un autre objet d’affichage, d&eacute;finissez l’objet masque comme
propri&eacute;t&eacute; mask de l’objet &agrave; masquer :
// Make the object maskSprite be a mask for the object mySprite.
mySprite.mask = maskSprite;
L’objet d’affichage masqu&eacute; est r&eacute;v&eacute;l&eacute; sous toutes les zones opaques (non transparentes) de l’objet d’affichage servant
de masque. Par exemple, le code suivant cr&eacute;e une occurrence de Shape qui contient un carr&eacute; rouge de 100 pixels sur
100 et une occurrence de Sprite contenant un cercle bleu d’un rayon de 25 pixels. Lorsque l’utilisateur clique sur le
cercle, il devient le masque du carr&eacute;, de sorte que l’unique partie du carr&eacute; affich&eacute;e est la section couverte par la partie
pleine du cercle. En d’autres termes, seul un cercle rouge est visible.
Derni&egrave;re mise &agrave; jour le 27/4/2013
197
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
// This code assumes it's being run within a display object container
// such as a MovieClip or Sprite instance.
import flash.display.Shape;
// Draw a square and add it to the display list.
var square:Shape = new Shape();
square.graphics.lineStyle(1, 0x000000);
square.graphics.beginFill(0xff0000);
square.graphics.drawRect(0, 0, 100, 100);
square.graphics.endFill();
this.addChild(square);
// Draw a circle and add it to the display list.
var circle:Sprite = new Sprite();
circle.graphics.lineStyle(1, 0x000000);
circle.graphics.beginFill(0x0000ff);
circle.graphics.drawCircle(25, 25, 25);
circle.graphics.endFill();
this.addChild(circle);
function maskSquare(event:MouseEvent):void
{
square.mask = circle;
circle.removeEventListener(MouseEvent.CLICK, maskSquare);
}
circle.addEventListener(MouseEvent.CLICK, maskSquare);
L’objet d’affichage qui sert de masque peut &ecirc;tre gliss&eacute;, anim&eacute;, redimensionn&eacute; dynamiquement et peut utiliser plusieurs
formes au sein d’un masque unique. Il n’est pas n&eacute;cessaire que l’objet qui fait office de masque soit ajout&eacute; &agrave; la liste
d’affichage. Toutefois, pour que l’objet servant de masque soit mis &agrave; l’&eacute;chelle lors de la mise &agrave; l’&eacute;chelle de la sc&egrave;ne ou
pour activer l’interaction utilisateur avec le masque (op&eacute;ration de type glisser et redimensionner contr&ocirc;l&eacute;e par
l’utilisateur, par exemple), vous devez l’ajouter &agrave; la liste d’affichage. L’indice de profondeur (z-index, pour l’ordre de
superposition) des objets d’affichage n’a pas d’importance, d&egrave;s lors que l’objet masque est ajout&eacute; &agrave; la liste d’affichage
(l’objet servant de masque ne s’affiche pas &agrave; l’&eacute;cran, sauf en tant que masque). Si l’objet servant de masque est une
occurrence de MovieClip dot&eacute;e de plusieurs images, il lit toutes les images de son sc&eacute;nario, comme il le ferait s’il ne
faisait pas office de masque. Pour supprimer un masque, d&eacute;finissez la propri&eacute;t&eacute; mask sur null :
// remove the mask from mySprite
mySprite.mask = null;
Il est impossible d’utiliser un masque pour en masquer un autre. Il est impossible de d&eacute;finir la propri&eacute;t&eacute; _alpha d’un
objet d’affichage servant de masque. Seuls les remplissages sont utilis&eacute;s dans un objet d’affichage employ&eacute; comme
masque ; les traits sont ignor&eacute;s.
AIR 2
Si un objet d’affichage masqu&eacute; est mis en cache en d&eacute;finissant les propri&eacute;t&eacute;s cacheAsBitmap et
cacheAsBitmapMatrix, le masque doit correspondre &agrave; un enfant de l’objet d’affichage masqu&eacute;. De m&ecirc;me, si l’objet
d’affichage masqu&eacute; est un descendant d’un conteneur d’objet d’affichage mis en cache, le masque et l’objet d’affichage
doivent tous deux &ecirc;tre des descendants du conteneur. Si l’objet masqu&eacute; est un descendant de plusieurs conteneurs
d’objet d’affichage mis en cache, le masque doit &ecirc;tre un descendant du conteneur mis en cache le plus proche de l’objet
masqu&eacute; dans la liste d’affichage.
Derni&egrave;re mise &agrave; jour le 27/4/2013
198
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
A propos du masquage des polices de p&eacute;riph&eacute;rique
Vous pouvez utiliser un objet d’affichage pour masquer le texte d&eacute;fini dans une police de p&eacute;riph&eacute;rique. Dans ce cas, le
cadre de s&eacute;lection rectangulaire du masque est utilis&eacute; comme forme de masquage. Ainsi, si vous cr&eacute;ez un masque objet
d’affichage non rectangulaire pour un texte de police de p&eacute;riph&eacute;rique, le masque qui appara&icirc;t dans le fichier SWF
prend la forme du cadre de s&eacute;lection rectangulaire du masque, et non celle du masque en tant que tel.
Masquage du canal alpha
Le masquage du canal alpha est pris en charge si le masque et les objets d’affichage masqu&eacute;s utilisent la mise en cache
sous forme de bitmap, comme illustr&eacute; ci-apr&egrave;s :
// maskShape is a Shape instance which includes a gradient fill.
mySprite.cacheAsBitmap = true;
maskShape.cacheAsBitmap = true;
mySprite.mask = maskShape;
Une application du masquage du canal alpha consiste par exemple &agrave; appliquer un filtre &agrave; l’objet masque
ind&eacute;pendamment d’un filtre appliqu&eacute; &agrave; l’objet d’affichage masqu&eacute;.
Dans l’exemple suivant, un fichier d’image externe est charg&eacute; sur la sc&egrave;ne. Cette image (ou, plus pr&eacute;cis&eacute;ment,
l’occurrence de Loader dans laquelle elle est charg&eacute;e) correspondra &agrave; l’objet d’affichage masqu&eacute;. Un ovale d&eacute;grad&eacute;
(centre noir uni dont les bords deviennent progressivement transparents) est dessin&eacute; sur l’image. Il s’agit-l&agrave; du masque
alpha. La mise en cache sous forme de bitmap est activ&eacute;e pour les deux objets d’affichage. L’ovale est d&eacute;fini en tant que
masque de l’image, puis peut &ecirc;tre d&eacute;plac&eacute;.
// This code assumes it's being run within a display object container
// such as a MovieClip or Sprite instance.
import
import
import
import
import
flash.display.GradientType;
flash.display.Loader;
flash.display.Sprite;
flash.geom.Matrix;
flash.net.URLRequest;
// Load an image and add it to the display list.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;http://www.helpexamples.com/flash/images/image1.jpg&quot;);
loader.load(url);
this.addChild(loader);
// Create a Sprite.
var oval:Sprite = new Sprite();
// Draw a gradient oval.
var colors:Array = [0x000000, 0x000000];
var alphas:Array = [1, 0];
var ratios:Array = [0, 255];
Derni&egrave;re mise &agrave; jour le 27/4/2013
199
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
var matrix:Matrix = new Matrix();
matrix.createGradientBox(200, 100, 0, -100, -50);
oval.graphics.beginGradientFill(GradientType.RADIAL,
colors,
alphas,
ratios,
matrix);
oval.graphics.drawEllipse(-100, -50, 200, 100);
oval.graphics.endFill();
// add the Sprite to the display list
this.addChild(oval);
// Set cacheAsBitmap = true for both display objects.
loader.cacheAsBitmap = true;
oval.cacheAsBitmap = true;
// Set the oval as the mask for the loader (and its child, the loaded image)
loader.mask = oval;
// Make the oval draggable.
oval.startDrag(true);
Animation des objets
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’animation consiste &agrave; faire bouger un &eacute;l&eacute;ment ou &agrave; le faire progressivement &eacute;voluer. Les animations par script
repr&eacute;sentent un &eacute;l&eacute;ment fondamental des jeux vid&eacute;o, et elles sont aussi fr&eacute;quemment utilis&eacute;es pour obtenir un r&eacute;sultat
plus s&eacute;duisant et ajouter des interactions &agrave; d’autres applications.
Une animation par script est r&eacute;gie par un principe de base : il doit se produire une &eacute;volution et cette derni&egrave;re doit &ecirc;tre
divis&eacute;e en incr&eacute;ments, au fil du temps. Il est facile de r&eacute;p&eacute;ter une op&eacute;ration en ActionScript, &agrave; l’aide d’une simple
boucle. Toutefois, une boucle ex&eacute;cute toutes ses it&eacute;rations avant de mettre &agrave; jour l’affichage. Pour cr&eacute;er une animation
par script, vous devez &eacute;crire un code ActionScript qui ex&eacute;cute plusieurs fois une action au fil du temps et met
&eacute;galement &agrave; jour l’&eacute;cran &agrave; chaque ex&eacute;cution.
Supposons par exemple que vous souhaitez cr&eacute;er une animation simple, telle qu’une balle qui traverse l’&eacute;cran.
ActionScript comprend un m&eacute;canisme simple qui permet de suivre le passage du temps et de mettre &agrave; jour l’&eacute;cran en
cons&eacute;quence. En d’autres termes, vous pourriez &eacute;crire un code qui d&eacute;place la balle d’un petit incr&eacute;ment &agrave; chaque fois
jusqu’&agrave; ce qu’elle atteigne sa destination. Apr&egrave;s chaque d&eacute;placement, l’&eacute;cran serait mis &agrave; jour, afin que l’utilisateur
puisse visualiser le mouvement &agrave; l’&eacute;cran.
D’un point de vue pratique, il est logique de synchroniser l’animation par script avec la cadence du fichier SWF (en
d’autres termes, de modifier une animation &agrave; chaque fois qu’une nouvelle image s’affiche ou devrait s’afficher),
puisque cela permet de d&eacute;finir la fr&eacute;quence des mises &agrave; jour de l’&eacute;cran par Flash Player ou AIR. Chaque objet
d’affichage poss&egrave;de un &eacute;v&eacute;nement enterFrame qui est diffus&eacute; en fonction de la cadence d’affichage du fichier SWF
(un &eacute;v&eacute;nement par image). La plupart des d&eacute;veloppeurs qui cr&eacute;ent une animation par script utilisent l’&eacute;v&eacute;nement
enterFrame pour g&eacute;n&eacute;rer des actions r&eacute;p&eacute;t&eacute;es au fil du temps. Vous pourriez &eacute;crire du code qui &eacute;coute l’&eacute;v&eacute;nement
enterFrame, d&eacute;place la balle anim&eacute;e d’un incr&eacute;ment d&eacute;termin&eacute; &agrave; chaque image et, lorsque l’&eacute;cran est mis &agrave; jour (&agrave;
chaque image), la balle est redessin&eacute;e &agrave; sa nouvelle position, cr&eacute;ant ainsi un mouvement.
Derni&egrave;re mise &agrave; jour le 27/4/2013
200
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Remarque : une autre technique pour ex&eacute;cuter une action de mani&egrave;re r&eacute;p&eacute;titive dans le temps consiste &agrave; utiliser la classe
Timer. Une occurrence de Timer d&eacute;clenche une notification d’&eacute;v&eacute;nement apr&egrave;s un d&eacute;lai horaire donn&eacute;. Il est donc possible
d’&eacute;crire du code effectuant une animation sur la base de l’&eacute;v&eacute;nement timer de la classe Timer, en d&eacute;finissant un intervalle
tr&egrave;s court (une fraction de seconde). Pour plus d’informations sur l’utilisation de la classe Timer, voir &laquo; Contr&ocirc;le des
intervalles temporels &raquo; &agrave; la page 4.
Dans l’exemple suivant, une occurrence circulaire de Sprite, appel&eacute;e circle, est cr&eacute;&eacute;e sur la sc&egrave;ne. Lorsque l’utilisateur
clique sur le cercle, une s&eacute;quence anim&eacute;e par script d&eacute;bute et entra&icirc;ne un fondu de circle (sa propri&eacute;t&eacute; alpha
diminue) jusqu’&agrave; ce qu’il soit compl&egrave;tement transparent :
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
// draw a circle and add it to the display list
var circle:Sprite = new Sprite();
circle.graphics.beginFill(0x990000);
circle.graphics.drawCircle(50, 50, 50);
circle.graphics.endFill();
addChild(circle);
// When this animation starts, this function is called every frame.
// The change made by this function (updated to the screen every
// frame) is what causes the animation to occur.
function fadeCircle(event:Event):void
{
circle.alpha -= .05;
if (circle.alpha &lt;= 0)
{
circle.removeEventListener(Event.ENTER_FRAME, fadeCircle);
}
}
function startAnimation(event:MouseEvent):void
{
circle.addEventListener(Event.ENTER_FRAME, fadeCircle);
}
circle.addEventListener(MouseEvent.CLICK, startAnimation);
Lorsque l’utilisateur clique sur le cercle, la fonction fadeCircle() est enregistr&eacute;e en tant qu’&eacute;couteur de l’&eacute;v&eacute;nement
enterFrame. En d’autres termes, elle commence &agrave; &ecirc;tre appel&eacute;e une fois par image. Cette fonction provoque un fondu
de l’objet circle en changeant sa propri&eacute;t&eacute; alpha, si bien qu’&agrave; chaque nouvelle image la valeur de la propri&eacute;t&eacute; alpha
du cercle d&eacute;cro&icirc;t de 0,05 (soit 5 %) et l’&eacute;cran est actualis&eacute;. Au fil du temps, lorsque la valeur alpha correspond &agrave; 0
(auquel cas circle est compl&egrave;tement transparent), la fonction fadeCircle() est supprim&eacute;e des &eacute;couteurs
d’&eacute;v&eacute;nement et l’animation s’arr&ecirc;te.
Le m&ecirc;me code permet, par exemple, de cr&eacute;er un mouvement anim&eacute; au lieu d’un fondu. En substituant une autre
propri&eacute;t&eacute; &agrave; alpha dans la fonction qui &eacute;coute l’&eacute;v&eacute;nement enterFrame, cette propri&eacute;t&eacute; est anim&eacute;e. Par exemple,
remplacer la ligne
circle.alpha -= .05;
par la ligne
circle.x += 5;
Derni&egrave;re mise &agrave; jour le 27/4/2013
201
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
anime la propri&eacute;t&eacute; x. Le cercle se d&eacute;place alors vers la droite de la sc&egrave;ne. La condition qui arr&ecirc;te l’animation peut &ecirc;tre
modifi&eacute;e de sorte &agrave; arr&ecirc;ter l’animation (en d’autres termes, annuler l’enregistrement de l’&eacute;couteur enterFrame)
lorsque la coordonn&eacute;e x appropri&eacute;e est atteinte.
Orientation de la sc&egrave;ne
AIR 2.0 et les versions ult&eacute;rieures
Les p&eacute;riph&eacute;riques mobiles r&eacute;orientent g&eacute;n&eacute;ralement l’interface utilisateur de sorte &agrave; assurer un affichage &agrave; la verticale
lorsque l’utilisateur fait pivoter le p&eacute;riph&eacute;rique. Si vous activez l’orientation automatique dans votre application, le
p&eacute;riph&eacute;rique conserve l’orientation ad&eacute;quate de l’&eacute;cran, mais il vous incombe de v&eacute;rifier que le contenu s’affiche
correctement lorsque le format de la sc&egrave;ne change. Si vous d&eacute;sactivez l’orientation automatique, l’&eacute;cran du
p&eacute;riph&eacute;rique reste fixe, &agrave; moins que vous ne modifiiez l’orientation manuellement.
Les applications AIR s’ex&eacute;cutent sur divers syst&egrave;mes d’exploitation et p&eacute;riph&eacute;riques mobiles. Le comportement
d’orientation sous-jacent risque de varier selon le syst&egrave;me d’exploitation, voire selon le p&eacute;riph&eacute;rique sur un m&ecirc;me
syst&egrave;me d’exploitation. Une strat&eacute;gie de cr&eacute;ation simple adapt&eacute;e &agrave; tous les p&eacute;riph&eacute;riques et syst&egrave;mes d’exploitation
consiste &agrave; activer l’orientation automatique et &agrave; &eacute;couter les &eacute;v&eacute;nements resize de l’objet Stage pour d&eacute;terminer
lorsqu’il est n&eacute;cessaire d’actualiser la mise en forme de l’application.
Si l’application prend en charge le format portrait uniquement ou le format paysage uniquement, vous pouvez
&eacute;galement d&eacute;sactiver l’orientation automatique et d&eacute;finir le format g&eacute;r&eacute; dans le descripteur d’application AIR. Cette
strat&eacute;gie assure un comportement coh&eacute;rent et s&eacute;lectionne l’orientation la &laquo; plus &raquo; adapt&eacute;e au format s&eacute;lectionn&eacute;. Par
exemple, si vous activez le format paysage, l’orientation choisie convient aux p&eacute;riph&eacute;riques dot&eacute;s de claviers
coulissants (en mode paysage).
Identification du format et de l’orientation actuels de la sc&egrave;ne
L’orientation est indiqu&eacute;e relativement &agrave; la position normale du p&eacute;riph&eacute;rique. Sur la plupart des p&eacute;riph&eacute;riques, il
existe une position verticale clairement identifiable. Cette position est consid&eacute;r&eacute;e comme l’orientation par d&eacute;faut. Les
trois autres orientations possibles sont les suivantes : rotated left, rotated right et upside down. La classe
StageOrientation int&egrave;gre les constantes de type cha&icirc;ne &agrave; utiliser lors de la d&eacute;finition ou de la comparaison de valeurs
d’orientation.
La classe Stage d&eacute;finit deux propri&eacute;t&eacute;s qui indiquent l’orientation, &agrave; savoir :
• Stage.deviceOrientation : indique l’orientation physique du p&eacute;riph&eacute;rique par rapport &agrave; la position par d&eacute;faut.
Remarque : l’orientation du p&eacute;riph&eacute;rique n’est pas toujours disponible si l’application vient de d&eacute;marrer ou si le
p&eacute;riph&eacute;rique est pos&eacute; &agrave; plat. Dans ces cas de figure, l’orientation indiqu&eacute;e du p&eacute;riph&eacute;rique correspond &agrave; unknown.
• Stage.orientation : indique l’orientation de la sc&egrave;ne par rapport &agrave; la position par d&eacute;faut. Si vous avez activ&eacute;
l’orientation automatique, la sc&egrave;ne pivote dans la direction oppos&eacute;e &agrave; celle du p&eacute;riph&eacute;rique pour demeurer
verticale. Les positions droite et gauche indiqu&eacute;es par la propri&eacute;t&eacute; orientation repr&eacute;sentent donc l’oppos&eacute; des
positions indiqu&eacute;es par la propri&eacute;t&eacute; deviceOrientation. Ainsi, si deviceRotation indique rotated right,
orientation indique rotated left.
Pour identifier le format de la sc&egrave;ne, il suffit de comparer la largeur et la hauteur actuelles de la sc&egrave;ne :
var aspect:String = this.stage.stageWidth &gt;= this.stage.stageHeight ?
StageAspectRatio.LANDSCAPE : StageAspectRatio.PORTRAIT;
Derni&egrave;re mise &agrave; jour le 27/4/2013
202
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Orientation automatique
Si l’orientation automatique est activ&eacute;e et que l’utilisateur fait pivoter le p&eacute;riph&eacute;rique, le syst&egrave;me d’exploitation
r&eacute;oriente l’interface utilisateur enti&egrave;re, y compris la barre des t&acirc;ches syst&egrave;me et l’application. Le format de la sc&egrave;ne
passe du mode portrait au mode paysage, et vice versa. La modification du format entra&icirc;ne &eacute;galement la modification
des dimensions de la sc&egrave;ne.
Pour activer ou d&eacute;sactiver l’orientation automatique lors de l’ex&eacute;cution, d&eacute;finissez la propri&eacute;t&eacute; autoOrients de l’objet
Stage sur true ou false. Vous pouvez d&eacute;finir la valeur initiale de cette propri&eacute;t&eacute; dans le descripteur d’application AIR
avec l’&eacute;l&eacute;ment &lt;autoOrients&gt;. (Notez que dans les versions d’AIR ant&eacute;rieures &agrave; 2.6, autoOrients est une propri&eacute;t&eacute;
disponible en lecture seule, que vous ne pouvez d&eacute;finir que dans le descripteur d’application.)
Si vous sp&eacute;cifiez le format paysage ou portrait et activez l’orientation automatique, AIR d&eacute;finit l’orientation
automatique au format sp&eacute;cifi&eacute;.
Modification des dimensions de la sc&egrave;ne
En cas de modification des dimensions de la sc&egrave;ne, le contenu de cette derni&egrave;re est mis &agrave; l’&eacute;chelle et repositionn&eacute;
comme stipul&eacute; par les propri&eacute;t&eacute;s scaleMode et align de l’objet Stage. Dans la plupart des cas, il n’est pas recommand&eacute;
de se fier au comportement automatique d&eacute;fini par les param&egrave;tres scaleMode de l’objet Stage. Pour prendre en charge
plusieurs formats, il est pr&eacute;f&eacute;rable de modifier la mise en forme des graphiques et des composants ou de rafra&icirc;chir ces
derniers. (Une logique de mise en forme souple pr&eacute;sente &eacute;galement l’avantage d’assurer un meilleur fonctionnement
de l’application sur des p&eacute;riph&eacute;riques aux tailles d’&eacute;cran et formats distincts.)
L’illustration suivante pr&eacute;sente les effets des diff&eacute;rents param&egrave;tres scaleMode lors de la rotation d’un p&eacute;riph&eacute;rique
mobile standard :
Rotation d’un format paysage vers un format portrait
Cette illustration d&eacute;crit le comportement du p&eacute;riph&eacute;rique lorsque l’utilisateur passe du mode paysage au mode
portrait avec diff&eacute;rents modes de mise &agrave; l’&eacute;chelle. Le passage du mode portrait au mode paysage produit des effets
similaires.
Derni&egrave;re mise &agrave; jour le 27/4/2013
203
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Ev&eacute;nements de changement d’orientation
L’objet Stage distribue deux types d’&eacute;v&eacute;nements, dont vous disposez pour d&eacute;tecter les changements d’orientation et
r&eacute;agir &agrave; ces derniers. Les &eacute;v&eacute;nements resize et orientationChange de la sc&egrave;ne sont tous deux distribu&eacute;s si
l’orientation automatique est activ&eacute;e.
Privil&eacute;giez l’&eacute;v&eacute;nement resize si vous vous fiez &agrave; l’orientation automatique pour assurer une position verticale &agrave;
l’affichage. Lorsque la sc&egrave;ne distribue un &eacute;v&eacute;nement resize, changez la disposition de votre contenu ou redessinez-le
si n&eacute;cessaire. L’&eacute;v&eacute;nement resize n’est distribu&eacute; que si le mode de mise &agrave; l’&eacute;chelle de la sc&egrave;ne est d&eacute;fini sur noScale.
L’&eacute;v&eacute;nement orientationChange permet &eacute;galement de d&eacute;tecter les changements d’orientation. L’&eacute;v&eacute;nement
orientationChange n’est distribu&eacute; que si l’orientation automatique est activ&eacute;e.
Remarque : sur certaines plates-formes mobiles, la sc&egrave;ne distribue un &eacute;v&eacute;nement orientationChanging, que vous
pouvez annuler, avant de distribuer les &eacute;v&eacute;nements resize ou orientationChange. Etant donn&eacute; que cet &eacute;v&eacute;nement n’est
pas pris en charge sur toutes les plates-formes, &eacute;vitez de trop vous y fier.
Orientation manuelle
AIR 2.6 et les versions ult&eacute;rieures
Vous pouvez contr&ocirc;ler l’orientation de la sc&egrave;ne via la m&eacute;thode setOrientation() ou setAspectRatio() de l’objet
Stage.
D&eacute;finition de l’orientation de la sc&egrave;ne
Vous pouvez d&eacute;finir l’orientation de la sc&egrave;ne &agrave; l’ex&eacute;cution &agrave; l’aide de la m&eacute;thode setOrientation() de l’objet Stage.
Utilisez les constantes de cha&icirc;ne d&eacute;finies par la classe StageOrientation pour sp&eacute;cifier l’orientation de votre choix :
this.stage.setOrientation( StageOrientation.ROTATED_RIGHT );
Tous les p&eacute;riph&eacute;riques et syst&egrave;mes d’exploitation ne prennent pas en charge toutes les orientations possibles. Par
exemple, Android 2.2 ne prend pas en charge la s&eacute;lection par programmation de l’orientation vers la gauche sur les
p&eacute;riph&eacute;riques portrait standard et ne prend pas du tout en charge l’orientation &agrave; l’envers. La propri&eacute;t&eacute;
supportedOrientations de la sc&egrave;ne fournit une liste des orientations pouvant &ecirc;tre transmises &agrave; la m&eacute;thode
setOrientation() :
var orientations:Vector.&lt;String&gt; = this.stage.supportedOrientations;
for each( var orientation:String in orientations )
{
trace( orientation );
}
D&eacute;finition du format de la sc&egrave;ne
Si le format de la sc&egrave;ne vous importe, vous pouvez le d&eacute;finir sur portrait ou paysage. Vous pouvez d&eacute;finir le format soit
dans le descripteur de l’application AIR, soit &agrave; l’ex&eacute;cution &agrave; l’aide de la m&eacute;thode setAspectRatio() de l’objet Stage :
this.stage.setAspectRatio( StageAspectRatio.LANDSCAPE );
Le moteur d’ex&eacute;cution choisit l’une des deux orientations possibles pour le format sp&eacute;cifi&eacute;. Il est possible que ce choix
ne corresponde pas &agrave; l’orientation du p&eacute;riph&eacute;rique. Par exemple, l’orientation par d&eacute;faut est pr&eacute;f&eacute;r&eacute;e &agrave; l’orientation &agrave;
l’envers (AIR 3.2 et les versions ant&eacute;rieures) et l’orientation convenant au clavier coulissant est pr&eacute;f&eacute;r&eacute;e &agrave; l’orientation
oppos&eacute;e.
Derni&egrave;re mise &agrave; jour le 27/4/2013
204
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
(AIR 3.3 et versions ult&eacute;rieures) A partir d’AIR 3.3 (SWF version 16), vous pouvez &eacute;galement utiliser la constante
StageAspectRatio.ANY. Si vous d&eacute;finissez Stage.autoOrients sur true et appelez
setAspectRatio(StageAspectRatio.ANY), votre application a la capacit&eacute; de r&eacute;orienter toutes les orientations
(paysage vers la gauche, paysage vers la droite, portait et portrait &agrave; l’envers). Autre nouveaut&eacute; dans AIR 3.3 : le format
est persistent et toute rotation du p&eacute;riph&eacute;rique est soumise &agrave; l’orientation sp&eacute;cifi&eacute;e.
Exemple : d&eacute;finition de l’orientation de la sc&egrave;ne de fa&ccedil;on &agrave; ce qu’elle corresponde &agrave; l’orientation du p&eacute;riph&eacute;rique
L’exemple suivant illustre une fonction qui met &agrave; jour l’orientation de la sc&egrave;ne afin qu’elle corresponde &agrave; celle du
p&eacute;riph&eacute;rique. La propri&eacute;t&eacute; deviceOrientation de la sc&egrave;ne indique l’orientation physique du p&eacute;riph&eacute;rique, m&ecirc;me si
l’orientation automatique est d&eacute;sactiv&eacute;e.
function refreshOrientation( theStage:Stage ):void
{
switch ( theStage.deviceOrientation )
{
case StageOrientation.DEFAULT:
theStage.setOrientation( StageOrientation.DEFAULT );
break;
case StageOrientation.ROTATED_RIGHT:
theStage.setOrientation( StageOrientation.ROTATED_LEFT );
break;
case StageOrientation.ROTATED_LEFT:
theStage.setOrientation( StageOrientation.ROTATED_RIGHT );
break;
case StageOrientation.UPSIDE_DOWN:
theStage.setOrientation( StageOrientation.UPSIDE_DOWN );
break;
default:
//No change
}
}
La modification de l’orientation est asynchrone. Vous pouvez &eacute;couter l’&eacute;v&eacute;nement orientationChange distribu&eacute; par
la sc&egrave;ne pour savoir quand la modification est termin&eacute;e. Si une orientation n’est pas prise en charge sur un
p&eacute;riph&eacute;rique, l’appel de setOrientation() &eacute;choue sans distribuer d’erreur.
Chargement dynamique du contenu d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les &eacute;l&eacute;ments d’affichage externes suivants peuvent &ecirc;tre charg&eacute;s dans une application ActionScript 3.0 :
• Fichier SWF programm&eacute; dans ActionScript 3.0 : ce fichier peut correspondre &agrave; Sprite, MovieClip ou toute classe
qui &eacute;tend Sprite. Dans les applications AIR sous iOS, seuls les fichiers SWF qui ne contiennent pas de code d’octet
ActionScript peuvent &ecirc;tre charg&eacute;s. En d’autres termes, les fichiers SWF qui contiennent des donn&eacute;es incorpor&eacute;es,
telles qu’images et son, peuvent &ecirc;tre charg&eacute;es, mais pas les fichiers SWF contenant du code ex&eacute;cutable.
• Fichier d’image : tels que les fichiers JPG, PNG et GIF.
• Fichier AVM1 SWF : fichier SWF &eacute;crit en ActionScript 1.0 ou 2.0. (non pris en charge sur les applications mobiles AIR)
Vous chargez ces ressources par le biais de la classe Loader.
Derni&egrave;re mise &agrave; jour le 27/4/2013
205
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Chargement d’objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les objets Loader permettent de charger des fichiers SWF et des fichiers graphiques dans une application. La classe
Loader est une sous-classe de la classe DisplayObjectContainer. La liste d’affichage d’un objet Loader ne comporte
qu’un seul objet d’affichage enfant : l’objet d’affichage qui repr&eacute;sente le fichier SWF ou graphique qu’il charge. Lorsque
vous ajoutez un objet Loader &agrave; la liste d’affichage, comme dans le code ci-dessous, vous ajoutez &eacute;galement l’objet
d’affichage enfant charg&eacute; &agrave; la liste d’affichage, une fois le chargement effectu&eacute; :
var pictLdr:Loader = new Loader();
var pictURL:String = &quot;banana.jpg&quot;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
this.addChild(pictLdr);
Lorsque le fichier SWF ou l’image sont charg&eacute;s, vous pouvez transf&eacute;rer l’objet d’affichage charg&eacute; dans un autre
conteneur d’objets d’affichage, tel que l’objet container de la classe DisplayObjectContainer dans l’exemple illustr&eacute; :
import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;
var container:Sprite = new Sprite();
addChild(container);
var pictLdr:Loader = new Loader();
var pictURL:String = &quot;banana.jpg&quot;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
function imgLoaded(event:Event):void
{
container.addChild(pictLdr.content);
}
Surveillance de la progression du chargement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque le chargement du fichier d&eacute;bute, un objet LoaderInfo est cr&eacute;&eacute;. Un objet LoaderInfo fournit diverses
informations sur le chargement : progression, adresses URL du chargeur et du charg&eacute;, nombre d’octets total de l’objet
multim&eacute;dia et dimensions nominales (hauteur et largeur) de celui-ci. Par ailleurs, un objet LoaderInfo distribue les
&eacute;v&eacute;nements qui permettent de suivre la progression du chargement.
Derni&egrave;re mise &agrave; jour le 27/4/2013
206
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Le diagramme suivant pr&eacute;sente les diverses utilisations de l’objet LoaderInfo, pour l’occurrence de la classe principale
du fichier SWF, pour un objet Loader et pour un objet charg&eacute; par ce dernier :
Vous pouvez acc&eacute;der &agrave; l’objet LoaderInfo en tant que propri&eacute;t&eacute; de l’objet Loader et de l’objet d’affichage charg&eacute;. D&egrave;s
que le chargement d&eacute;bute, vous pouvez acc&eacute;der &agrave; l’objet LoaderInfo par le biais de la propri&eacute;t&eacute; contentLoaderInfo
de l’objet Loader. Lorsque le chargement de l’objet d’affichage est termin&eacute;, vous pouvez &eacute;galement acc&eacute;der &agrave; l’objet
LoaderInfo en tant que propri&eacute;t&eacute; de cet objet charg&eacute; par le biais de la propri&eacute;t&eacute; loaderInfo de l’objet d’affichage. La
propri&eacute;t&eacute; loaderInfo de l’objet d’affichage charg&eacute; se r&eacute;f&egrave;re au m&ecirc;me objet LoaderInfo que la propri&eacute;t&eacute;
contentLoaderInfo de l’objet Loader. En d’autres termes, un objet LoaderInfo est partag&eacute; entre un objet charg&eacute; et
l’objet Loader qui l’a charg&eacute; (entre le chargeur et le charg&eacute;).
Pour acc&eacute;der aux propri&eacute;t&eacute;s du contenu charg&eacute;, il est recommand&eacute; d’ajouter un &eacute;couteur d’&eacute;v&eacute;nement &agrave; l’objet
LoaderInfo, comme indiqu&eacute; dans le code suivant :
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
var ldr:Loader = new Loader();
var urlReq:URLRequest = new URLRequest(&quot;Circle.swf&quot;);
ldr.load(urlReq);
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
addChild(ldr);
function loaded(event:Event):void
{
var content:Sprite = event.target.content;
content.scaleX = 2;
}
Pour plus d’informations, voir &laquo; Gestion des &eacute;v&eacute;nements &raquo; &agrave; la page 129.
D&eacute;finition du contexte de chargement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous chargez un fichier externe dans Flash Player ou AIR par le biais de la m&eacute;thode load() ou loadBytes()
de la classe Loader, vous pouvez indiquer le param&egrave;tre context. Ce param&egrave;tre est un objet LoaderContext.
Derni&egrave;re mise &agrave; jour le 27/4/2013
207
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
La classe LoaderContext comporte trois propri&eacute;t&eacute;s qui permettent de d&eacute;finir le contexte d’utilisation du contenu
charg&eacute; :
•
checkPolicyFile : utilisez cette propri&eacute;t&eacute; uniquement pour le chargement d’un fichier image (pas pour un fichier
SWF). Si vous d&eacute;finissez cette propri&eacute;t&eacute; sur true, l’objet Loader v&eacute;rifie si le serveur d’origine h&eacute;berge un fichier de
r&eacute;gulation (voir &laquo; Contr&ocirc;les de site Web (fichiers de r&eacute;gulation) &raquo; &agrave; la page 1095). Cette op&eacute;ration n’est requise que
si le contenu &eacute;mane de domaines autres que celui du fichier SWF qui contient l’objet Loader. Si le serveur accorde
une autorisation au domaine de Loader, le code ActionScript extrait des fichiers SWF du domaine de Loader peut
acc&eacute;der aux donn&eacute;es de l’image charg&eacute;e. En d’autres termes, vous pouvez utiliser la commande
BitmapData.draw() pour acc&eacute;der aux donn&eacute;es de l’image charg&eacute;es.
Notez qu’un fichier SWF extrait d’un autre domaine que celui de l’objet Loader peut appeler
Security.allowDomain() pour autoriser un domaine d&eacute;termin&eacute;.
•
securityDomain : utilisez cette propri&eacute;t&eacute; uniquement pour le chargement d’un fichier SWF (pas pour une image).
Cette propri&eacute;t&eacute; peut &ecirc;tre appel&eacute;e pour un fichier SWF provenant d’un autre domaine que celui du fichier qui
contient l’objet Loader. Lorsque vous indiquez cette option, Flash Player v&eacute;rifie l’existence d’un fichier de
r&eacute;gulation et, s’il existe, les fichiers SWF des domaines autoris&eacute;s dans ce fichier peuvent utiliser des op&eacute;rations de
programmation crois&eacute;e avec le contenu du fichier SWF charg&eacute;. Vous pouvez stipuler
flash.system.SecurityDomain.currentDomain en tant que param&egrave;tre.
•
applicationDomain : utilisez cette propri&eacute;t&eacute; uniquement lors du chargement d’un fichier SWF &eacute;crit dans
ActionScript 3.0 (et non une image ou un fichier SWF &eacute;crit dans ActionScript 1.0 ou 2.0). Lorsque vous chargez un
fichier, vous devez indiquer que le fichier doit &ecirc;tre inclus dans le m&ecirc;me domaine d’application que l’objet Loader
en attribuant au param&egrave;tre applicationDomain la valeur
flash.system.ApplicationDomain.currentDomain. Si vous placez le fichier SWF charg&eacute; dans le m&ecirc;me
domaine d’application, vous pourrez acc&eacute;der directement &agrave; ses classes, ce qui s’av&egrave;re utile si vous chargez un fichier
SWF contenant des m&eacute;dia int&eacute;gr&eacute;s, auxquels vous pouvez acc&eacute;der via les noms de classes associ&eacute;s. Pour plus
d’informations, voir &laquo; Utilisation de domaines d’application &raquo; &agrave; la page 152.
Exemple de v&eacute;rification d’un fichier de r&eacute;gulation lors du chargement d’une image bitmap provenant d’un autre
domaine :
var context:LoaderContext = new LoaderContext();
context.checkPolicyFile = true;
var urlReq:URLRequest = new URLRequest(&quot;http://www.[your_domain_here].com/photo11.jpg&quot;);
var ldr:Loader = new Loader();
ldr.load(urlReq, context);
Exemple de v&eacute;rification d’un fichier de r&eacute;gulation lors du chargement d’un fichier SWF &agrave; partir d’un autre domaine,
dans le but de placer ce fichier dans la m&ecirc;me Sandbox de s&eacute;curit&eacute; que l’objet Loader. Par ailleurs, le code ajoute les
classes du fichier SWF charg&eacute; dans le m&ecirc;me domaine d’application que celui de l’objet Loader :
var context:LoaderContext = new LoaderContext();
context.securityDomain = SecurityDomain.currentDomain;
context.applicationDomain = ApplicationDomain.currentDomain;
var urlReq:URLRequest = new URLRequest(&quot;http://www.[your_domain_here].com/library.swf&quot;);
var ldr:Loader = new Loader();
ldr.load(urlReq, context);
Pour plus d’informations, voir la classe LoaderContext dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la
plate-forme Adobe Flash.
Derni&egrave;re mise &agrave; jour le 27/4/2013
208
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Chargement de fichiers SWF dans AIR pour iOS
Adobe AIR 3.6 et ult&eacute;rieur, iOS uniquement
Il existe des restrictions concernant le chargement et la compilation de code &agrave; l’ex&eacute;cution sur les p&eacute;riph&eacute;riques iOS. En
raison de ces restrictions, vous constaterez certaines diff&eacute;rences n&eacute;cessaires dans la t&acirc;che de chargement des fichiers
SWF externes dans votre application :
• Tous les fichiers contenant du code ActionScript doivent &ecirc;tre inclus dans le package d’application. Aucun fichier
SWF contenant du code ne peut &ecirc;tre charg&eacute; depuis une source externe (via un r&eacute;seau, par exemple). Lors de la
cr&eacute;ation du package de l’application, le code ActionScript des fichiers SWF du package d’application est compil&eacute;
en code natif pour p&eacute;riph&eacute;riques iOS.
• Il est impossible de charger, d&eacute;charger, puis recharger un fichier SWF. Si vous tentez de le faire, une erreur se
produit.
• Le comportement en cas de chargement en m&eacute;moire, puis de d&eacute;chargement, est le m&ecirc;me qu’avec les syst&egrave;mes
d’exploitation d’ordinateur de bureau. Si vous chargez un fichier SWF, puis que vous le d&eacute;chargez, tous les &eacute;l&eacute;ments
visuels contenus dans le SWF sont d&eacute;charg&eacute;s de la m&eacute;moire. Toutefois, les r&eacute;f&eacute;rences de classe &agrave; une classe
ActionScript dans le fichier SWF charg&eacute; restent en m&eacute;moire et sont accessibles par le code ActionScript.
• Tous les fichiers SWF doivent &ecirc;tre charg&eacute;s dans le m&ecirc;me domaine d’application que le fichier SWF principal. Ceci
n’est pas le comportement par d&eacute;faut. C’est pourquoi, pour chaque SWF charg&eacute;, vous devez cr&eacute;er un objet
LoaderContext sp&eacute;cifiant le domaine d’application principal et transmettre cet objet LoaderContext &agrave; l’appel de
m&eacute;thode Loader.load(). Si vous tentez de charger un fichier SWF dans un domaine d’application autre que le
domaine d’application SWF principal, une erreur se produit. Cela est vrai m&ecirc;me si le fichier SWF charg&eacute; ne contient
que des &eacute;l&eacute;ments visuels sans code ActionScript.
L’exemple suivant montre le code &agrave; utiliser pour charger le SWF depuis le package d’application dans le domaine
d’application du fichier SWF principal :
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;swfs/SecondarySwf.swf&quot;);
var loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain,
null);
loader.load(url, loaderContext);
Un fichier SWF contenant uniquement des actifs sans code peut &ecirc;tre charg&eacute; depuis le package d’application ou via
r&eacute;seau. Dans les deux cas, le fichier SWF doit toujours &ecirc;tre charg&eacute; dans le domaine d’application principal.
Pour les versions d’AIR ant&eacute;rieures &agrave; 3.6, le code est retir&eacute; de tous les fichiers SWF, &agrave; l’exception du fichier
d’application SWF principal, au cours du processus de compilation. Les fichiers SWF ne contenant que des &eacute;l&eacute;ments
visuels peuvent &ecirc;tre inclus dans le package d’application et charg&eacute;s &agrave; l’ex&eacute;cution, mais pas le code. Si vous tentez de
charger un fichier SWF contenant du code ActionScript, une erreur se produit. Cette erreur cause l’apparition d’un
message d’erreur &laquo; ActionScript non compil&eacute; &raquo; dans l’application.
Voir aussi
Packaging and loading multiple SWFs in AIR apps on iOS (disponible en anglais uniquement).
Derni&egrave;re mise &agrave; jour le 27/4/2013
209
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Utilisation des classes ProLoader et ProLoaderInfo
Flash Player 9 et les versions ult&eacute;rieures et Adobe AIR 1.0 et les versions ult&eacute;rieures requi&egrave;rent Flash
Professional CS5.5
Pour faciliter le pr&eacute;chargement de la biblioth&egrave;que RSL (Remote Shared Library), Flash Professional CS5.5 int&egrave;gre &agrave;
pr&eacute;sent les classes fl.display.ProLoader et fl.display.ProLoaderInfo. Ces classes refl&egrave;tent les classes flash.display.Loader
et flash.display.LoaderInfo, mais assurent un chargement plus coh&eacute;rent.
La classe ProLoader permet en particulier de charger les fichiers SWF qui font appel &agrave; Text Layout Framework (TLF)
lors d’un pr&eacute;chargement RSL. A l’ex&eacute;cution, les fichiers SWF qui pr&eacute;chargent d’autres fichiers SWF ou des fichiers
SWZ, tels que TLF, n&eacute;cessitent un fichier d’enveloppe SWF &agrave; usage interne uniquement. Cette couche compl&eacute;mentaire
de complexit&eacute; impos&eacute;e par le fichier d’enveloppe SWF entra&icirc;ne parfois un comportement inattendu. La classe
ProLoader r&eacute;sout ce probl&egrave;me en permettant de charger les fichiers comme des fichiers SWF standard. La solution
adopt&eacute;e par la classe ProLoader est transparente du point de vue de l’utilisateur et ne requiert pas de traitement
particulier dans ActionScript. La classe ProLoader charge par ailleurs correctement les contenus SWF standard.
Dans Flash Professional CS 5.5 et ult&eacute;rieur, vous pouvez remplacer la classe Loader par la classe ProLoader dans tous
les cas de figure en toute s&eacute;curit&eacute;. Exportez ensuite l’application vers Flash Player 10.2 ou ult&eacute;rieur, afin que la classe
ProLoader puisse acc&eacute;der &agrave; la fonctionnalit&eacute; ActionScript requise. Vous pouvez &eacute;galement faire appel &agrave; la classe
ProLoader si vous ciblez des versions ant&eacute;rieures de Flash Player qui prennent en charge ActionScript 3.0. Toutefois,
seul Flash Player 10.2 ou ult&eacute;rieur exploite pleinement les fonctions de Proloader. Utilisez toujours la classe ProLoader
si vous faites appel &agrave; TLF dans Flash Professional CS5.5 ou ult&eacute;rieur. L’utilisation de ProLoader est superflue dans les
environnements autres que Flash Professional.
Important : pour les fichiers SWF publi&eacute;s dans Flash Professional CS5.5 et ult&eacute;rieur, il est toujours possible d’utiliser les
classes fl.display.ProLoader et fl.display.ProLoaderInfo au lieu des classes flash.display.Loader et
flash.display.LoaderInfo.
Probl&egrave;mes r&eacute;solus par la classe ProLoader
La classe ProLoader r&eacute;sout les probl&egrave;mes que la classe Loader existante, de par sa conception, ne prenait pas en charge.
Ces probl&egrave;mes r&eacute;sultent du pr&eacute;chargement RSL de biblioth&egrave;ques TLF. Ils concernent sp&eacute;cifiquement les fichiers SWF
qui chargent d’autres fichiers SWF par le biais d’un objet Loader. Les probl&egrave;mes r&eacute;solus sont les suivants :
• L’utilisation de scripts entre le fichier de chargement et le fichier charg&eacute; entra&icirc;ne des r&eacute;sultats inattendus. La
classe ProLoader d&eacute;finit automatiquement le fichier SWF de chargement en tant que parent du fichier SWF charg&eacute;.
De ce fait, les communications &eacute;manant du fichier SWF de chargement ciblent directement le fichier SWF charg&eacute;.
• L’application SWF doit g&eacute;rer activement le processus de chargement. Cette op&eacute;ration requiert la mise en œuvre
d’&eacute;v&eacute;nements suppl&eacute;mentaires tels que added, removed, addedToStage et removedFromStage. Si l’application
cible Flash Player 10.2 ou ult&eacute;rieur, la classe ProLoader permet d’&eacute;viter cette t&acirc;che suppl&eacute;mentaire.
Mise &agrave; jour du code en vue d’utiliser ProLoader au lieu de Loader
Etant donn&eacute; que la classe ProLoader refl&egrave;te la classe Loader, substituer une classe &agrave; l’autre dans le code ne pr&eacute;sente
aucune difficult&eacute;. L’exemple suivant illustre la mise &agrave; jour du code existant en vue d’utiliser la nouvelle classe :
Derni&egrave;re mise &agrave; jour le 27/4/2013
210
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
import flash.display.Loader;
import flash.events.Event;
var l:Loader = new Loader();
addChild(l);
l.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
l.load(&quot;my.swf&quot;);
function loadComplete(e:Event) {
trace('load complete!');
}
Il est possible de mettre &agrave; jour ce code pour utiliser la classe ProLoader, comme suit :
import fl.display.ProLoader;
import flash.events.Event;
var l:ProLoader = new ProLoader();
addChild(l);
l.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
l.load(&quot;my.swf&quot;);
function loadComplete(e:Event) {
trace('load complete!');
}
Exemple d’objet d’affichage : SpriteArranger
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple d’application SpriteArranger est bas&eacute; sur l’exemple d’application Geometric Shapes (voir Formation &agrave;
ActionScript 3.0).
L’exemple SpriteArranger illustre divers concepts de gestion des objets d’affichage :
• Extension des classes d’objet d’affichage
• Ajout d’objets &agrave; la liste d’affichage
• Superposition des objets d’affichage et utilisation des conteneurs d’objets d’affichage
• R&eacute;ponse aux &eacute;v&eacute;nements d’objet d’affichage
• Utilisation des propri&eacute;t&eacute;s et m&eacute;thodes des objets d’affichage
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application SpriteArranger r&eacute;sident
dans le dossier Examples/SpriteArranger. L’application se compose des fichiers suivants :
Derni&egrave;re mise &agrave; jour le 27/4/2013
211
212
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Fichier
Description
SpriteArranger.mxml
Fichier d’application principal dans Flash (FLA) ou
Flex (MXML).
ou
SpriteArranger.fla
com/example/programmingas3/SpriteArranger/CircleSprite.as
Classe d&eacute;finissant un type d’objet Sprite qui assure
le rendu d’un cercle &agrave; l’&eacute;cran.
com/example/programmingas3/SpriteArranger/DrawingCanvas.as
Classe d&eacute;finissant le rectangle de la zone de dessin,
soit un conteneur d’objets d’affichage comportant
des objets GeometricSprite.
com/example/programmingas3/SpriteArranger/SquareSprite.as
Classe d&eacute;finissant un type d’objet Sprite qui assure
le rendu d’un carr&eacute; &agrave; l’&eacute;cran.
com/example/programmingas3/SpriteArranger/TriangleSprite.as
Classe d&eacute;finissant un type d’objet Sprite qui assure
le rendu d’un triangle &agrave; l’&eacute;cran.
com/example/programmingas3/SpriteArranger/GeometricSprite.as
Classe qui &eacute;tend l’objet Sprite, utilis&eacute; pour d&eacute;finir
une forme &agrave; l’&eacute;cran. CircleSprite, SquareSprite et
TriangleSprite &eacute;tendent chacun cette classe.
com/example/programmingas3/geometricshapes/IGeometricShape.as
Interface de base qui d&eacute;finit les m&eacute;thodes &agrave;
impl&eacute;menter par toutes les classes de formes
g&eacute;om&eacute;triques.
com/example/programmingas3/geometricshapes/IPolygon.as
Interface qui d&eacute;finit les m&eacute;thodes &agrave; impl&eacute;menter
par les classes de forme g&eacute;om&eacute;trique dot&eacute;es de
plusieurs c&ocirc;t&eacute;s.
com/example/programmingas3/geometricshapes/RegularPolygon.as
Type de forme g&eacute;om&eacute;trique dont les c&ocirc;t&eacute;s sont de
longueur &eacute;gale et positionn&eacute;s sym&eacute;triquement
autour du centre de la forme.
com/example/programmingas3/geometricshapes/Circle.as
Type de forme g&eacute;om&eacute;trique qui d&eacute;finit un cercle.
com/example/programmingas3/geometricshapes/EquilateralTriangle.as
Sous-classe de RegularPolygon qui d&eacute;finit un
triangle &eacute;quilat&eacute;ral.
com/example/programmingas3/geometricshapes/Square.as
Sous-classe de RegularPolygon qui d&eacute;finit un carr&eacute;.
com/example/programmingas3/geometricshapes/GeometricShapeFactory.as
Classe qui contient une &laquo; m&eacute;thode usine &raquo;
permettant de cr&eacute;er des formes d’une taille et d’un
type de forme donn&eacute;s.
D&eacute;finition des classes SpriteArranger
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’application SpriteArranger permet &agrave; l’utilisateur d’ajouter divers objets d’affichage au rectangle de la zone de dessin
&agrave; l’&eacute;cran.
La classe DrawingCanvas d&eacute;finit une zone de dessin, soit un type de conteneur d’objets d’affichage, &agrave; laquelle
l’utilisateur peut ajouter des formes &agrave; l’&eacute;cran. Ces formes sont des occurrences de l’une des sous-classes de la classe
GeometricSprite.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Classe DrawingCanvas
Dans Flex, tous les objets d’affichage enfant ajout&eacute;s &agrave; un objet Container doivent appartenir &agrave; une classe issue de la
classe mx.core.UIComponent. Cette application ajoute une occurrence de la classe DrawingCanvas en tant qu’enfant
d’un objet mx.containers.VBox, ainsi que le d&eacute;finit le code MXML dans le fichier SpriteArranger.mxml. Cet h&eacute;ritage
est d&eacute;fini dans la d&eacute;claration de classe DrawingCanvas, comme suit :
public class DrawingCanvas extends UIComponent
La classe UIComponent h&eacute;ritage des classes DisplayObject, DisplayObjectContainer et Sprite et le code de la classe
DrawingCanvas utilise les m&eacute;thodes et propri&eacute;t&eacute;s de ces derni&egrave;res.
La classe DrawingCanvas &eacute;tend la classe Sprite et cet h&eacute;ritage est d&eacute;fini dans la d&eacute;claration de classe DrawingCanvas,
comme suit :
public class DrawingCanvas extends Sprite
La classe Sprite est une sous-classe des classes DisplayObjectContainer et DisplayObject et la classe DrawingCanvas
utilise les m&eacute;thodes et propri&eacute;t&eacute;s de ces derni&egrave;res.
La m&eacute;thode constructeur DrawingCanvas() d&eacute;finit un objet Rectangle, bounds, qui est une propri&eacute;t&eacute; utilis&eacute;e
ult&eacute;rieurement lors du trac&eacute; du contour de la zone de dessin. Elle appelle ensuite la m&eacute;thode initCanvas(), comme
suit :
this.bounds = new Rectangle(0, 0, w, h);
initCanvas(fillColor, lineColor);
Comme l’indique l’exemple suivant, la m&eacute;thode initCanvas() d&eacute;finit diverses propri&eacute;t&eacute;s de l’objet DrawingCanvas,
transmises en tant qu’arguments &agrave; la m&eacute;thode constructeur :
this.lineColor = lineColor;
this.fillColor = fillColor;
this.width = 500;
this.height = 200;
La m&eacute;thode initCanvas() appelle ensuite la m&eacute;thode drawBounds() qui trace le rectangle de la zone de dessin &agrave;
l’aide de la propri&eacute;t&eacute; graphics de la classe DrawingCanvas. La propri&eacute;t&eacute; graphics est h&eacute;rit&eacute;e de la classe Shape.
this.graphics.clear();
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
this.graphics.drawRect(bounds.left - 1,
bounds.top - 1,
bounds.width + 2,
bounds.height + 2);
this.graphics.endFill();
Les autres m&eacute;thodes de la classe DrawingCanvas, indiqu&eacute;es ci-apr&egrave;s, sont appel&eacute;es en fonction des interactions de
l’utilisateur avec l’application :
• Les m&eacute;thodes addShape() et describeChildren(), d&eacute;crites &agrave; la section &laquo; Ajout d’objets d’affichage au rectangle
de la zone de dessin &raquo; &agrave; la page 214
• Les m&eacute;thodes moveToBack(), moveDown(), moveToFront() et moveUp(), d&eacute;crites &agrave; la section &laquo; R&eacute;organisation de
l’ordre de superposition des objets d’affichage &raquo; &agrave; la page 217
• La m&eacute;thode onMouseUp(), d&eacute;crite &agrave; la section &laquo; Cliquer-d&eacute;placer un objet d’affichage &raquo; &agrave; la page 216
Derni&egrave;re mise &agrave; jour le 27/4/2013
213
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
Classe GeometricSprite et ses sous-classes
Chaque objet d’affichage susceptible d’&ecirc;tre ajout&eacute; par l’utilisateur au rectangle de la zone de dessin est une occurrence
de l’une des sous-classes suivantes de la classe GeometricSprite :
• CircleSprite
• SquareSprite
• TriangleSprite
La classe GeometricSprite &eacute;tend la classe flash.display.Sprite :
public class GeometricSprite extends Sprite
La classe GeometricSprite comprend diverses propri&eacute;t&eacute;s communes &agrave; tous les objets GeometricSprite. Elles sont
d&eacute;finies dans la fonction constructeur en fonction des param&egrave;tres transmis &agrave; cette derni&egrave;re. Exemple :
this.size = size;
this.lineColor = lColor;
this.fillColor = fColor;
La propri&eacute;t&eacute; geometricShape de la classe GeometricSprite d&eacute;finit une interface IGeometricShape, qui stipule les
propri&eacute;t&eacute;s math&eacute;matiques, mais non visuelles, de la forme. Les classes qui impl&eacute;mentent l’interface IGeometricShape
sont d&eacute;finies dans l’exemple d’application GeometricShapes (voir Formation &agrave; ActionScript 3.0).
La classe GeometricSprite d&eacute;finit la m&eacute;thode drawShape(), qui est affin&eacute;e dans les d&eacute;finitions de remplacement de
chaque sous-classe de GeometricSprite. Pour plus d’informations, voir ci-apr&egrave;s &laquo; Ajout d’objets d’affichage au
rectangle de la zone de dessin &raquo;.
La classe GeometricSprite propose &eacute;galement les m&eacute;thodes suivantes :
• Les m&eacute;thodes onMouseDown() et onMouseUp(), d&eacute;crites &agrave; la section &laquo; Cliquer-d&eacute;placer un objet d’affichage &raquo; &agrave; la
page 216
• Les m&eacute;thodes showSelected() et hideSelected(), d&eacute;crites &agrave; la section &laquo; Cliquer-d&eacute;placer un objet d’affichage &raquo;
&agrave; la page 216
Ajout d’objets d’affichage au rectangle de la zone de dessin
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque l’utilisateur clique sur le bouton Add Shape, l’application appelle la m&eacute;thode addShape() de la classe
DrawingCanvas. Elle cr&eacute;e une occurrence de GeometricSprite en appelant la fonction constructeur appropri&eacute;e de l’une
des sous-classes de GeometricSprite, comme illustr&eacute; dans l’exemple suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
214
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
public function addShape(shapeName:String, len:Number):void
{
var newShape:GeometricSprite;
switch (shapeName)
{
case &quot;Triangle&quot;:
newShape = new TriangleSprite(len);
break;
case &quot;Square&quot;:
newShape = new SquareSprite(len);
break;
case &quot;Circle&quot;:
newShape = new CircleSprite(len);
break;
}
newShape.alpha = 0.8;
this.addChild(newShape);
}
Chaque m&eacute;thode constructeur appelle la m&eacute;thode drawShape(), qui utilise la propri&eacute;t&eacute; graphics de la classe (h&eacute;rit&eacute;e
de la classe Sprite) pour dessiner le graphique vectoriel appropri&eacute;. Par exemple, la m&eacute;thode drawShape() de la classe
CircleSprite comprend le code suivant :
this.graphics.clear();
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
var radius:Number = this.size / 2;
this.graphics.drawCircle(radius, radius, radius);
L’avant-derni&egrave;re ligne de la fonction addShape() d&eacute;finit la propri&eacute;t&eacute; alpha de l’objet d’affichage (h&eacute;rit&eacute;e de la classe
DisplayObject), de sorte que chaque objet d’affichage ajout&eacute; au rectangle de la zone de dessin soit l&eacute;g&egrave;rement
transparent, permettant ainsi &agrave; l’utilisateur de visualiser les objets plac&eacute;s derri&egrave;re.
La derri&egrave;re ligne de la m&eacute;thode addChild() ajoute le nouvel objet d’affichage &agrave; la liste enfant de l’occurrence de la
classe DrawingCanvas, qui figure d&eacute;j&agrave; dans la liste d’affichage. Le nouvel objet d’affichage appara&icirc;t alors sur la sc&egrave;ne.
L’interface de l’application comprend deux champs de texte, selectedSpriteTxt et outputTxt. Les propri&eacute;t&eacute;s de
texte de ces champs sont mises &agrave; jour avec des informations relatives aux objets GeometricSprite ajout&eacute;s au rectangle
de la zone de dessin ou s&eacute;lectionn&eacute;s par l’utilisateur. La classe GeometricSprite g&egrave;re ces t&acirc;ches de transmission
d’informations en annulant la m&eacute;thode toString() comme suit :
public override function toString():String
{
return this.shapeType + &quot; of size &quot; + this.size + &quot; at &quot; + this.x + &quot;, &quot; + this.y;
}
La propri&eacute;t&eacute; shapeType est d&eacute;finie sur la valeur appropri&eacute;e de la m&eacute;thode constructeur de chaque sous-classe
GeometricSprite. La m&eacute;thode toString() pourrait par exemple renvoyer la valeur suivante pour une occurrence de
CircleSprite r&eacute;cemment ajout&eacute;e &agrave; l’occurrence de DrawingCanvas :
Circle of size 50 at 0, 0
La m&eacute;thode describeChildren() de la classe DrawingCanvas parcourt la liste enfant du rectangle de la zone de
dessin en utilisant la propri&eacute;t&eacute; numChildren (h&eacute;rit&eacute;e de la classe DisplayObjectContainer) pour d&eacute;finir la limite de la
boucle for. Elle g&eacute;n&egrave;re une cha&icirc;ne qui recense chaque enfant, comme suit :
Derni&egrave;re mise &agrave; jour le 27/4/2013
215
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
var desc:String = &quot;&quot;;
var child:DisplayObject;
for (var i:int=0; i &lt; this.numChildren; i++)
{
child = this.getChildAt(i);
desc += i + &quot;: &quot; + child + '\n';
}
La cha&icirc;ne r&eacute;sultante permet de d&eacute;finir la propri&eacute;t&eacute; text du champ de texte outputTxt.
Cliquer-d&eacute;placer un objet d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque l’utilisateur clique sur une occurrence de GeometricSprite, l’application appelle le gestionnaire de l’&eacute;v&eacute;nement
onMouseDown(). Comme le montre le code ci-dessous, ce gestionnaire &eacute;coute les &eacute;v&eacute;nements de clic gauche de souris
dans la fonction constructeur de la classe GeometricSprite :
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
La m&eacute;thode onMouseDown() appelle ensuite la m&eacute;thode showSelected() de l’objet GeometricSprite. S’il s’agit du
premier appel de cette m&eacute;thode sur l’objet, elle cr&eacute;e un objet Shape appel&eacute; selectionIndicator et utilise la propri&eacute;t&eacute;
graphics de l’objet Shape pour dessiner un rectangle rouge de mise en valeur, comme suit :
this.selectionIndicator = new Shape();
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0);
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, this.size + 1);
this.addChild(this.selectionIndicator);
S’il ne s’agit pas du premier appel de la m&eacute;thode onMouseDown(), celle-ci active simplement la propri&eacute;t&eacute; visible
(h&eacute;rit&eacute;e de la classe DisplayObject) de la forme selectionIndicator :
this.selectionIndicator.visible = true;
La m&eacute;thode hideSelected() masque la forme selectionIndicator de l’objet pr&eacute;c&eacute;demment s&eacute;lectionn&eacute; en
d&eacute;finissant sa propri&eacute;t&eacute; visible sur false.
La m&eacute;thode du gestionnaire d’&eacute;v&eacute;nement onMouseDown() appelle &eacute;galement la m&eacute;thode startDrag() (h&eacute;rit&eacute;e de la
classe Sprite), qui comprend le code suivant :
var boundsRect:Rectangle = this.parent.getRect(this.parent);
boundsRect.width -= this.size;
boundsRect.height -= this.size;
this.startDrag(false, boundsRect);
L’utilisateur peut alors d&eacute;placer l’objet s&eacute;lectionn&eacute; sur la zone de dessin, au sein des limites d&eacute;finies par le rectangle
boundsRect.
Lorsque l’utilisateur rel&acirc;che le bouton de la souris, l’&eacute;v&eacute;nement mouseUp est distribu&eacute;. La m&eacute;thode constructeur de
DrawingCanvas configure l’&eacute;couteur d’&eacute;v&eacute;nement suivant :
this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
Cet &eacute;couteur d’&eacute;v&eacute;nement est associ&eacute; &agrave; l’objet DrawingCanvas, plut&ocirc;t qu’aux objets GeometricSprite individuels. En
effet, lorsque l’utilisateur d&eacute;place l’objet GeometricSprite, celui-ci risque d’&ecirc;tre plac&eacute; derri&egrave;re un autre objet d’affichage
(un autre objet GeometricSprite) lorsque le bouton de la souris est rel&acirc;ch&eacute;. L’&eacute;v&eacute;nement &laquo; mouse up &raquo; s’appliquerait &agrave;
l’objet d’affichage en avant-plan, mais non &agrave; l’objet d’affichage d&eacute;plac&eacute; par l’utilisateur. Ajouter l’&eacute;couteur &agrave; l’objet
DrawingCanvas assure la gestion de l’&eacute;v&eacute;nement.
Derni&egrave;re mise &agrave; jour le 27/4/2013
216
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Programmation de l’affichage
La m&eacute;thode onMouseUp() appelle la m&eacute;thode onMouseUp() de l’objet GeometricSprite, qui appelle alors la m&eacute;thode
stopDrag() de l’objet GeometricSprite.
R&eacute;organisation de l’ordre de superposition des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’interface utilisateur de l’application comprend des boutons intitul&eacute;s Move Back, Move Down, Move Up et Move to
Front. Lorsque l’utilisateur clique sur l’un de ces boutons, l’application appelle la m&eacute;thode correspondante de la classe
DrawingCanvas, &agrave; savoir : moveToBack(), moveDown(), moveUp() ou moveToFront(). Par exemple, la m&eacute;thode
moveToBack() comporte le code suivant :
public function moveToBack(shape:GeometricSprite):void
{
var index:int = this.getChildIndex(shape);
if (index &gt; 0)
{
this.setChildIndex(shape, 0);
}
}
Cette m&eacute;thode utilise la m&eacute;thode setChildIndex() (h&eacute;rit&eacute;e de la classe DisplayObjectContainer) pour placer l’objet
d’affichage &agrave; la position d’index 0 de la liste des enfants de l’occurrence de DrawingCanvas (this).
Le fonctionnement de la m&eacute;thode moveDown() est similaire, mais elle d&eacute;cr&eacute;mente la position d’index de l’objet
d’affichage d’une unit&eacute; dans la liste des enfants de l’occurrence de DrawingCanvas :
public function moveDown(shape:GeometricSprite):void
{
var index:int = this.getChildIndex(shape);
if (index &gt; 0)
{
this.setChildIndex(shape, index - 1);
}
}
Le fonctionnement des m&eacute;thodes moveUp() et moveToFront() est similaire aux m&eacute;thodes moveToBack() et
moveDown().
Derni&egrave;re mise &agrave; jour le 27/4/2013
217
218
Chapitre 11 : Utilisation de la g&eacute;om&eacute;trie
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le package flash.geom contient des classes qui d&eacute;finissent des objets g&eacute;om&eacute;triques, tels que des points, des rectangles
et des matrices de transformation. Vous utilisez ces classes pour d&eacute;finir les propri&eacute;t&eacute;s des objets qui sont utilis&eacute;s dans
d’autres classes.
Voir aussi
flash.geom, package
Principes de base de la g&eacute;om&eacute;trie
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le package flash.geom contient des classes qui d&eacute;finissent des objets g&eacute;om&eacute;triques, tels que des points, des rectangles
et des matrices de transformation. Ces classes ne fournissent pas n&eacute;cessairement de fonctionnalit&eacute; par elles-m&ecirc;mes ;
n&eacute;anmoins, elles sont utilis&eacute;es pour d&eacute;finir les propri&eacute;t&eacute;s des objets utilis&eacute;s dans d’autres classes.
Toutes les classes de g&eacute;om&eacute;trie se basent sur la notion selon laquelle les emplacements &agrave; l’&eacute;cran sont repr&eacute;sent&eacute;s
comme un plan en deux dimensions. L’&eacute;cran est trait&eacute; comme un graphique plat avec un axe horizontal (x) et un axe
vertical (y). Tout emplacement (ou point) &agrave; l’&eacute;cran peut &ecirc;tre repr&eacute;sent&eacute; sous la forme d’une paire de valeurs x et y,
appel&eacute;es coordonn&eacute;es de cet emplacement.
Chaque objet d’affichage, y compris la sc&egrave;ne, poss&egrave;de son propre espace de coordonn&eacute;es. L’espace de coordonn&eacute;es
constitue le graphe d’un objet et permet de tracer la position des dessins, des objets d’affichage enfant, etc. L’origine
occupe la position 0, 0 (soit l’intersection des axes x et y) et est plac&eacute;e dans l’angle sup&eacute;rieur gauche de l’objet
d’affichage. La position de l’origine est syst&eacute;matiquement respect&eacute;e pour la sc&egrave;ne, mais pas n&eacute;cessairement pour
d’autres objets d’affichage. La taille des valeurs figurant sur l’axe x cro&icirc;t vers la droite et diminue vers la gauche. La
coordonn&eacute;e x des positions figurant sur la gauche de l’origine est n&eacute;gative. Cependant, contrairement aux syst&egrave;mes de
coordonn&eacute;es classiques, la valeur des coordonn&eacute;es de l’axe y cro&icirc;t vers le bas de l’&eacute;cran et diminue vers le haut dans le
moteur d’ex&eacute;cution de Flash. La coordonn&eacute;e y des valeurs situ&eacute;es au-dessus de l’origine est n&eacute;gative. Puisque l’angle
sup&eacute;rieur gauche de la sc&egrave;ne correspond &agrave; l’origine de son espace de coordonn&eacute;es, la coordonn&eacute;e x de la plupart des
objets de la sc&egrave;ne est sup&eacute;rieure &agrave; 0 et inf&eacute;rieure &agrave; la largeur de la sc&egrave;ne. La coordonn&eacute;e y d’un m&ecirc;me objet est
sup&eacute;rieure &agrave; 0 et inf&eacute;rieure &agrave; la hauteur de la sc&egrave;ne.
Vous pouvez utiliser des occurrences de la classe Point pour repr&eacute;senter des points individuels dans un espace de
coordonn&eacute;es. Vous pouvez cr&eacute;er une occurrence de Rectangle pour repr&eacute;senter une r&eacute;gion rectangulaire dans un
espace de coordonn&eacute;es. Les utilisateurs chevronn&eacute;s peuvent utiliser une occurrence de Matrix pour appliquer des
transformations multiples ou complexes &agrave; un objet d’affichage. De nombreuses transformations simples (rotation,
position, et changements d’&eacute;chelle, par exemple) peuvent &ecirc;tre appliqu&eacute;es directement &agrave; un objet d’affichage &agrave; l’aide
des propri&eacute;t&eacute;s de ce dernier. Pour plus d’informations sur l’application de transformations &agrave; l’aide des propri&eacute;t&eacute;s d’un
objet d’affichage, voir &laquo; Manipulation des objets d’affichage &raquo; &agrave; la page 180.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes de g&eacute;om&eacute;trie importants :
Coordonn&eacute;es cart&eacute;siennes Les coordonn&eacute;es sont g&eacute;n&eacute;ralement &eacute;crites sous la forme d’une paire de nombres (5, 12 ou
17, -23). Les deux nombres sont la coordonn&eacute;e x et la coordonn&eacute;e y, respectivement.
Espace de coordonn&eacute;es Repr&eacute;sentation graphique des coordonn&eacute;es contenues dans un objet d’affichage, par rapport
auquel sont positionn&eacute;s les &eacute;l&eacute;ments enfant.
Origine Point d’intersection des axes x et y dans un espace de coordonn&eacute;es. Ce point a les coordonn&eacute;es 0, 0.
Point Emplacement unique dans un espace de coordonn&eacute;es. Dans le syst&egrave;me de coordonn&eacute;es 2D utilis&eacute; dans
ActionScript, la position sur les axes x et y (en d’autres termes, les coordonn&eacute;es du point) d&eacute;finit ce dernier.
Point d’alignement Dans un objet d’affichage, origine (coordonn&eacute;es 0, 0) de son espace de coordonn&eacute;es.
Mise &agrave; l’&eacute;chelle Taille relative d’un objet par rapport &agrave; sa taille d’origine. Mettre un objet &agrave; l’&eacute;chelle consiste &agrave; modifier
sa taille en l’&eacute;tirant ou en le r&eacute;tr&eacute;cissant.
Translation Conversion des coordonn&eacute;es d’un point d’un espace de coordonn&eacute;es &agrave; un autre.
Transformation Modification des caract&eacute;ristiques visuelles d’un graphique (rotation de l’objet, modification de son
&eacute;chelle, d&eacute;salignement, d&eacute;formation ou alt&eacute;ration de sa couleur).
Axe x Axe horizontal dans le syst&egrave;me de coordonn&eacute;es en 2 dimensions utilis&eacute; dans ActionScript.
Axe y Axe vertical dans le syst&egrave;me de coordonn&eacute;es en 2 dimensions utilis&eacute; dans ActionScript.
Utilisation des objets Point
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un objet Point d&eacute;finit une paire de coordonn&eacute;es cart&eacute;siennes. Il repr&eacute;sente un emplacement dans un syst&egrave;me de
coordonn&eacute;es &agrave; deux dimensions, dans lequel x est l’axe horizontal et y l’axe vertical.
Pour d&eacute;finir un objet Point, vous d&eacute;finissez ses propri&eacute;t&eacute;s x et y comme suit :
import flash.geom.*;
var pt1:Point = new Point(10, 20); // x == 10; y == 20
var pt2:Point = new Point();
pt2.x = 10;
pt2.y = 20;
Calcul de la distance entre deux points
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser la m&eacute;thode distance() de la classe Point pour calculer la distance entre deux points dans un
espace de coordonn&eacute;es. Par exemple, le code suivant calcule la distance entre les points d’alignement de deux objets
d’affichage, circle1 et circle2, dans le m&ecirc;me conteneur d’objet d’affichage :
import flash.geom.*;
var pt1:Point = new Point(circle1.x, circle1.y);
var pt2:Point = new Point(circle2.x, circle2.y);
var distance:Number = Point.distance(pt1, pt2);
Derni&egrave;re mise &agrave; jour le 27/4/2013
219
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
Translation d’espaces de coordonn&eacute;es
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Si deux objets d’affichage r&eacute;sident dans des conteneurs d’objet d’affichage distincts, ils peuvent figurer dans des espaces
de coordonn&eacute;es distincts. Vous pouvez utiliser la m&eacute;thode localToGlobal() de la classe DisplayObject pour traduire
les coordonn&eacute;es dans le m&ecirc;me espace de coordonn&eacute;es (global), celui de la sc&egrave;ne. Par exemple, le code suivant calcule
la distance entre les points d’alignement de deux objets d’affichage, circle1 et circle2, dans les diff&eacute;rents conteneurs
d’objet d’affichage :
import flash.geom.*;
var pt1:Point = new Point(circle1.x, circle1.y);
pt1 = circle1.localToGlobal(pt1);
var pt2:Point = new Point(circle2.x, circle2.y);
pt2 = circle2.localToGlobal(pt2);
var distance:Number = Point.distance(pt1, pt2);
De m&ecirc;me, pour calculer la distance du point d’alignement d’un objet d’affichage nomm&eacute; target &agrave; partir d’un point
sp&eacute;cifique de la sc&egrave;ne, utilisez la m&eacute;thode localToGlobal() de la classe DisplayObject :
import flash.geom.*;
var stageCenter:Point = new Point();
stageCenter.x = this.stage.stageWidth / 2;
stageCenter.y = this.stage.stageHeight / 2;
var targetCenter:Point = new Point(target.x, target.y);
targetCenter = target.localToGlobal(targetCenter);
var distance:Number = Point.distance(stageCenter, targetCenter);
D&eacute;placement d’un objet d’affichage en fonction d’une distance et d’un angle
donn&eacute;s
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser la m&eacute;thode polar() de la classe Point pour d&eacute;placer un objet d’affichage d’une distance et d’un
angle sp&eacute;cifiques. Par exemple, le code suivant d&eacute;place l’objet myDisplayObject en fonction d’une distance de
100 pixels et d’un angle de 60&deg; :
import flash.geom.*;
var distance:Number = 100;
var angle:Number = 2 * Math.PI * (90 / 360);
var translatePoint:Point = Point.polar(distance, angle);
myDisplayObject.x += translatePoint.x;
myDisplayObject.y += translatePoint.y;
Autres utilisations de la classe Point
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous pouvez utiliser des objets Point avec les propri&eacute;t&eacute;s et les m&eacute;thodes suivantes :
Derni&egrave;re mise &agrave; jour le 27/4/2013
220
221
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
Classe
M&eacute;thodes ou propri&eacute;t&eacute;s
Description
DisplayObjectContainer
areInaccessibleObjectsUnderPoint()getObject
sUnderPoint()
Utilis&eacute;e pour renvoyer une liste d’objets sous
un point dans un conteneur d’objet
d’affichage.
BitmapData
hitTest()
Utilis&eacute;e pour d&eacute;finir le pixel dans l’objet
BitmapData ainsi que le point pour lequel vous
recherchez une zone active.
BitmapData
applyFilter()
Utilis&eacute;e pour indiquer les positions des
rectangles qui d&eacute;finissent les op&eacute;rations.
copyChannel()
merge()
paletteMap()
pixelDissolve()
threshold()
Matrice
deltaTransformPoint()
transformPoint()
Rectangle
Utilis&eacute;e pour d&eacute;finir des points auxquels vous
souhaitez appliquer une transformation.
Utilis&eacute;e pour d&eacute;finir ces propri&eacute;t&eacute;s.
bottomRight
size
topLeft
Utilisation des objets Rectangle
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un objet Rectangle d&eacute;finit une zone rectangulaire. Un objet Rectangle poss&egrave;de une position, d&eacute;finie par les
coordonn&eacute;es x et y de son angle sup&eacute;rieur gauche, une propri&eacute;t&eacute; width et une propri&eacute;t&eacute; height. Pour d&eacute;finir les
propri&eacute;t&eacute;s d’un nouvel objet Rectangle, appelez la fonction constructeur Rectangle(), comme suit :
import flash.geom.Rectangle;
var rx:Number = 0;
var ry:Number = 0;
var rwidth:Number = 100;
var rheight:Number = 50;
var rect1:Rectangle = new Rectangle(rx, ry, rwidth, rheight);
Redimensionnement et repositionnement des objets Rectangle
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Il existe de nombreuses fa&ccedil;ons de redimensionner et de repositionner des objets Rectangle.
Vous pouvez redimensionner directement l’objet Rectangle en modifiant ses propri&eacute;t&eacute;s x et y. Ce changement n’a
aucune incidence sur la largeur ou la hauteur de l’objet Rectangle.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace(rect1) // (x=0, y=0, w=100, h=50)
rect1.x = 20;
rect1.y = 30;
trace(rect1); // (x=20, y=30, w=100, h=50)
Comme l’illustre le code suivant, l’objet Rectangle est repositionn&eacute; lorsque vous modifiez la propri&eacute;t&eacute; left ou top
correspondante. Les propri&eacute;t&eacute;s x et y de l’objet rectangle correspondent respectivement aux propri&eacute;t&eacute;s left et top.
N&eacute;anmoins, la position de l’angle inf&eacute;rieur gauche de l’objet Rectangle ne change pas. Par cons&eacute;quent, il est
redimensionn&eacute;.
import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace(rect1) // (x=0, y=0, w=100, h=50)
rect1.left = 20;
rect1.top = 30;
trace(rect1); // (x=20, y=30, w=80, h=20)
De m&ecirc;me, comme indiqu&eacute; dans l’exemple suivant, si vous modifiez la propri&eacute;t&eacute; bottom ou right d’un objet Rectangle,
la position de son angle sup&eacute;rieur gauche ne change pas. L’objet Rectangle est redimensionn&eacute; en cons&eacute;quence :
import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace(rect1) // (x=0, y=0, w=100, h=50)
rect1.right = 60;
trect1.bottom = 20;
trace(rect1); // (x=0, y=0, w=60, h=20)
Vous pouvez &eacute;galement repositionner un objet Rectangle &agrave; l’aide de la m&eacute;thode offset(), comme suit :
import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace(rect1) // (x=0, y=0, w=100, h=50)
rect1.offset(20, 30);
trace(rect1); // (x=20, y=30, w=100, h=50)
La m&eacute;thode offsetPt() fonctionne de la m&ecirc;me fa&ccedil;on, sauf qu’elle prend un objet Point comme param&egrave;tre, plut&ocirc;t que
les valeurs de d&eacute;calage x et y.
Derni&egrave;re mise &agrave; jour le 27/4/2013
222
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
Vous pouvez &eacute;galement redimensionner un objet Rectangle &agrave; l’aide de la m&eacute;thode inflate(), qui inclut deux
param&egrave;tres, dx et dy. Le param&egrave;tre dx repr&eacute;sente le d&eacute;placement &agrave; partir du centre des c&ocirc;t&eacute;s droit et gauche de l’objet
Rectangle, exprim&eacute; en pixels. Le param&egrave;tre dy repr&eacute;sente le d&eacute;placement &agrave; partir du centre du haut et du bas de l’objet
Rectangle, exprim&eacute; en pixels.
import flash.geom.Rectangle;
var x1:Number = 0;
var y1:Number = 0;
var width1:Number = 100;
var height1:Number = 50;
var rect1:Rectangle = new Rectangle(x1, y1, width1, height1);
trace(rect1) // (x=0, y=0, w=100, h=50)
rect1.inflate(6,4);
trace(rect1); // (x=-6, y=-4, w=112, h=58)
La m&eacute;thode inflatePt() fonctionne de la m&ecirc;me fa&ccedil;on, sauf qu’elle prend un objet Point comme param&egrave;tre, plut&ocirc;t
que les valeurs de d&eacute;calage dx et dy.
Recherche d’unions et d’intersections d’objets Rectangle
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous utilisez la m&eacute;thode union() pour rechercher la r&eacute;gion rectangulaire form&eacute;e par les limites de deux rectangles :
import flash.display.*;
import flash.geom.Rectangle;
var rect1:Rectangle = new Rectangle(0, 0, 100, 100);
trace(rect1); // (x=0, y=0, w=100, h=100)
var rect2:Rectangle = new Rectangle(120, 60, 100, 100);
trace(rect2); // (x=120, y=60, w=100, h=100)
trace(rect1.union(rect2)); // (x=0, y=0, w=220, h=160)
Vous utilisez la m&eacute;thode intersection() pour rechercher la r&eacute;gion rectangulaire form&eacute;e par la r&eacute;gion commune de
deux rectangles :
import flash.display.*;
import flash.geom.Rectangle;
var rect1:Rectangle = new Rectangle(0, 0, 100, 100);
trace(rect1); // (x=0, y=0, w=100, h=100)
var rect2:Rectangle = new Rectangle(80, 60, 100, 100);
trace(rect2); // (x=120, y=60, w=100, h=100)
trace(rect1.intersection(rect2)); // (x=80, y=60, w=20, h=40)
Vous utilisez la m&eacute;thode intersects() pour savoir si deux rectangles se recouvrent. Vous pouvez &eacute;galement utiliser
la m&eacute;thode intersects() pour savoir si un objet d’affichage est dans une certaine r&eacute;gion de la sc&egrave;ne. Dans l’exemple
de code suivant, supposez que l’espace de coordonn&eacute;es du conteneur d’objet d’affichage contenant l’objet circle soit
identique &agrave; celui de la sc&egrave;ne. L’exemple indique comment utiliser la m&eacute;thode intersects() pour d&eacute;terminer si un
objet d’affichage, circle, recoupe des r&eacute;gions sp&eacute;cifi&eacute;es de la sc&egrave;ne, d&eacute;finies par les objets Rectangle target1 et
target2 :
Derni&egrave;re mise &agrave; jour le 27/4/2013
223
224
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
import flash.display.*;
import flash.geom.Rectangle;
var circle:Shape = new Shape();
circle.graphics.lineStyle(2, 0xFF0000);
circle.graphics.drawCircle(250, 250, 100);
addChild(circle);
var circleBounds:Rectangle = circle.getBounds(stage);
var target1:Rectangle = new Rectangle(0, 0, 100, 100);
trace(circleBounds.intersects(target1)); // false
var target2:Rectangle = new Rectangle(0, 0, 300, 300);
trace(circleBounds.intersects(target2)); // true
De m&ecirc;me, vous pouvez utiliser la m&eacute;thode intersects() pour savoir si les cadres de d&eacute;limitation de deux objets
d’affichage se chevauchent. Utilisez la m&eacute;thode getRect() de la classe DisplayObject pour inclure un espace
suppl&eacute;mentaire que les traits d’un objet d’affichage ajoutent &agrave; une r&eacute;gion de s&eacute;lection.
Autres utilisations des objets Rectangle
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les objets Rectangle sont utilis&eacute;s dans les propri&eacute;t&eacute;s et m&eacute;thodes suivantes :
Classe
M&eacute;thodes ou propri&eacute;t&eacute;s
Description
BitmapData
applyFilter(), colorTransform(),
copyChannel(), copyPixels(), draw(),
drawWithQuality(), encode(), fillRect(),
generateFilterRect(), getColorBoundsRect(),
getPixels(), merge(), paletteMap(),
pixelDissolve(), setPixels() et threshold()
Utilis&eacute;e comme type de certains param&egrave;tres pour
d&eacute;finir une r&eacute;gion de l’objet BitmapData.
DisplayObject
getBounds(), getRect(), scrollRect,
scale9Grid
Utilis&eacute;e comme type de donn&eacute;es pour la propri&eacute;t&eacute; ou le
type de donn&eacute;es renvoy&eacute;.
PrintJob
addPage()
Utilis&eacute;e pour d&eacute;finir le param&egrave;tre printArea.
Sprite
startDrag()
Utilis&eacute;e pour d&eacute;finir le param&egrave;tre bounds.
TextField
getCharBoundaries()
Utilis&eacute;e comme type de valeur renvoy&eacute;.
Transform
pixelBounds
Utilis&eacute;e comme type de donn&eacute;es.
Utilisation des objets Matrix
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe Matrix repr&eacute;sente une matrice de transformation qui d&eacute;termine le mappage des points d’un espace de
coordonn&eacute;es &agrave; l’autre. Pour appliquer diverses transformations graphiques &agrave; un objet d’affichage, vous pouvez d&eacute;finir
les propri&eacute;t&eacute;s d’un objet Matrix, puis appliquer cet objet &agrave; la propri&eacute;t&eacute; matrix d’un objet Transform que vous
appliquez ensuite comme propri&eacute;t&eacute; transform de l’objet d’affichage. Ces fonctions de transformation incluent la
translation (repositionnement de x et y), la rotation, le redimensionnement et l’inclinaison.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
M&ecirc;me si vous pouvez d&eacute;finir une matrice en ajustant directement les propri&eacute;t&eacute;s (a, b, c, d, tx, ty) d’un objet Matrix, il
est plus facile d’utiliser la m&eacute;thode createBox(). Cette m&eacute;thode comporte des param&egrave;tres qui vous permettent de
d&eacute;finir directement les effets de redimensionnement, de rotation et de translation de la matrice r&eacute;sultante. Par exemple,
le code suivant cr&eacute;e un objet Matrix qui redimensionne un objet horizontalement de 2,0, le redimensionne verticalement
de 3,0, le fait pivoter de 45&deg;, le d&eacute;place (par translation) de 10 pixels vers la droite et de 20 pixels vers le bas :
var matrix:Matrix = new Matrix();
var scaleX:Number = 2.0;
var scaleY:Number = 3.0;
var rotation:Number = 2 * Math.PI * (45 / 360);
var tx:Number = 10;
var ty:Number = 20;
matrix.createBox(scaleX, scaleY, rotation, tx, ty);
Vous pouvez &eacute;galement ajuster les effets de redimensionnement, de rotation et de translation d’un objet Matrix &agrave; l’aide
des m&eacute;thodes scale(), rotate() et translate(). Ces m&eacute;thodes sont combin&eacute;es aux valeurs de l’objet Matrix
existant. Par exemple, le code suivant d&eacute;finit un objet Matrix qui redimensionne un objet d’un facteur de 4 et le fait
pivoter de 60&deg;, car les m&eacute;thodes scale() et rotate() sont appel&eacute;es deux fois :
var matrix:Matrix = new Matrix();
var rotation:Number = 2 * Math.PI * (30 / 360); // 30&deg;
var scaleFactor:Number = 2;
matrix.scale(scaleFactor, scaleFactor);
matrix.rotate(rotation);
matrix.scale(scaleX, scaleY);
matrix.rotate(rotation);
myDisplayObject.transform.matrix = matrix;
Pour appliquer une transformation par inclinaison &agrave; un objet Matrix, ajustez sa propri&eacute;t&eacute; b ou c. Lorsque vous ajustez
la propri&eacute;t&eacute; b, la matrice est inclin&eacute;e verticalement et lorsque vous ajustez la propri&eacute;t&eacute; c, elle est inclin&eacute;e
horizontalement. Le code suivant incline l’objet Matrix myMatrix verticalement d’un facteur de 2 :
var skewMatrix:Matrix = new Matrix();
skewMatrix.b = Math.tan(2);
myMatrix.concat(skewMatrix);
Vous pouvez appliquer une transformation Matrix &agrave; la propri&eacute;t&eacute; transform d’un objet d’affichage. Par exemple, le
code suivant applique une transformation Matrix &agrave; un objet d’affichage nomm&eacute; myDisplayObject :
var matrix:Matrix = myDisplayObject.transform.matrix;
var scaleFactor:Number = 2;
var rotation:Number = 2 * Math.PI * (60 / 360); // 60&deg;
matrix.scale(scaleFactor, scaleFactor);
matrix.rotate(rotation);
myDisplayObject.transform.matrix = matrix;
La premi&egrave;re ligne d&eacute;finit un objet Matrix sur la matrice de transformation existante utilis&eacute;e par l’objet d’affichage
myDisplayObject (la propri&eacute;t&eacute; matrix de la propri&eacute;t&eacute; transformation de l’objet d’affichage myDisplayObject).
Les m&eacute;thodes de la classe Matrix que vous appelez ont ainsi un effet cumulatif sur la position, l’&eacute;chelle et la rotation
actuelles de l’objet d’affichage.
Remarque : la classe ColorTransform est &eacute;galement comprise dans le package flash.geometry. Cette classe sert &agrave; d&eacute;finir
la propri&eacute;t&eacute; colorTransform d’un objet Transform. Etant donn&eacute; qu’elle n’applique aucune transformation
g&eacute;om&eacute;trique, elle n’est pas trait&eacute;e ici. Pour plus d’informations, voir la classe ColorTransform dans le manuel Guide de
r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Derni&egrave;re mise &agrave; jour le 27/4/2013
225
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
Exemple de g&eacute;om&eacute;trie : application d’une
transformation de matrice &agrave; un objet d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple d’application DisplayObjectTransformer pr&eacute;sente de nombreuses fonctions permettant d’utiliser la classe
Matrix pour transformer un objet d’affichage, notamment :
• Rotation de l’objet d’affichage
• Redimensionnement de l’objet d’affichage
• Translation (repositionnement) de l’objet d’affichage
• Inclinaison de l’objet d’affichage
L’application fournit une interface permettant d’ajuster les param&egrave;tres de la transformation de matrice, comme suit :
Lorsque l’utilisateur clique sur le bouton de transformation, l’application applique la transformation appropri&eacute;e.
L’objet d’affichage original et l’objet d’affichage pivot&eacute; de -45&deg; et redimensionn&eacute; de 50 %
Derni&egrave;re mise &agrave; jour le 27/4/2013
226
227
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application DisplayObjectTransformer
se trouvent dans le dossier Samples/DisplayObjectTransformer. L’application se compose des fichiers suivants :
Fichier
Description
DisplayObjectTransformer.mxml
Fichier d’application principal en FLA pour Flash ou en MXML
pour Flex
ou
DisplayObjectTransformer.fla
com/example/programmingas3/geometry/MatrixTransformer.as
Une classe qui contient des m&eacute;thodes permettant
d’appliquer des transformations de matrice.
img/
Un r&eacute;pertoire contenant des exemples de fichiers image
utilis&eacute;s par l’application.
D&eacute;finition de la classe MatrixTransformer
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe MatrixTransformer comprend des m&eacute;thodes statiques qui appliquent des transformations g&eacute;om&eacute;triques
d’objets Matrix.
M&eacute;thode transform()
La m&eacute;thode transform() comprend des param&egrave;tres associ&eacute;s &agrave; chaque &eacute;l&eacute;ment suivant :
•
sourceMatrix—La matrice d’entr&eacute;e, que la m&eacute;thode transforme
•
xScale et yScale—Le facteur de redimensionnement x et y
•
dx et dy—Les montants de translation x et y, en pixels
•
rotation—Le montant de rotation, en degr&eacute;s
•
skew—Le facteur d’inclinaison, en pourcentage
•
skewType—Le sens d’inclinaison, &quot;right&quot; ou &quot;left&quot;
La valeur renvoy&eacute;e est la matrice r&eacute;sultante.
La m&eacute;thode transform() appelle les m&eacute;thodes statiques suivantes de la classe :
•
skew()
•
scale()
•
translate()
•
rotate()
Chacune renvoie la matrice source avec la transformation appliqu&eacute;e.
M&eacute;thode skew()
La m&eacute;thode skew() incline la matrice en ajustant les propri&eacute;t&eacute;s b et c de la matrice. Un param&egrave;tre facultatif, unit,
d&eacute;termine les unit&eacute;s utilis&eacute;es pour d&eacute;finir l’angle d’inclinaison et, le cas &eacute;ch&eacute;ant, la m&eacute;thode convertit la valeur angle
en radians :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
if (unit ==
{
angle =
}
if (unit ==
{
angle =
}
&quot;degrees&quot;)
Math.PI * 2 * angle / 360;
&quot;gradients&quot;)
Math.PI * 2 * angle / 100;
Un objet Matrix skewMatrix est cr&eacute;&eacute; et ajust&eacute; pour appliquer la transformation par inclinaison. Au d&eacute;part, il s’agit de
la matrice d’identit&eacute;, comme suit :
var skewMatrix:Matrix = new Matrix();
Le param&egrave;tre skewSide d&eacute;termine le c&ocirc;t&eacute; auquel l’inclinaison est appliqu&eacute;e. S’il est d&eacute;fini sur &quot;right&quot;, le code suivant
d&eacute;finit la propri&eacute;t&eacute; b de la matrice :
skewMatrix.b = Math.tan(angle);
Autrement, le c&ocirc;t&eacute; inf&eacute;rieur est inclin&eacute; en ajustant la propri&eacute;t&eacute; c de la matrice, comme suit :
skewMatrix.c = Math.tan(angle);
L’inclinaison r&eacute;sultante est ensuite appliqu&eacute;e &agrave; la matrice existante en concat&eacute;nant les deux matrices, comme indiqu&eacute;
dans l’exemple suivant :
sourceMatrix.concat(skewMatrix);
return sourceMatrix;
M&eacute;thode scale()
Comme le montre l’exemple suivant, la m&eacute;thode scale() ajuste d’abord le facteur de redimensionnement s’il est
d&eacute;fini sous la forme de pourcentage, puis utilise la m&eacute;thode scale() de l’objet matrix :
if (percent)
{
xScale = xScale / 100;
yScale = yScale / 100;
}
sourceMatrix.scale(xScale, yScale);
return sourceMatrix;
M&eacute;thode translate()
La m&eacute;thode translate() applique simplement les facteurs de translation dx et dy en appelant la m&eacute;thode
translate() de l’objet matrix, comme suit :
sourceMatrix.translate(dx, dy);
return sourceMatrix;
M&eacute;thode rotate()
La m&eacute;thode rotate() convertit le facteur de rotation d’entr&eacute;e en radians (s’il est fourni en degr&eacute;s ou d&eacute;grad&eacute;s), puis
appelle la m&eacute;thode rotate() de l’objet matrix :
Derni&egrave;re mise &agrave; jour le 27/4/2013
228
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la g&eacute;om&eacute;trie
if (unit == &quot;degrees&quot;)
{
angle = Math.PI * 2 * angle / 360;
}
if (unit == &quot;gradients&quot;)
{
angle = Math.PI * 2 * angle / 100;
}
sourceMatrix.rotate(angle);
return sourceMatrix;
Appel de la m&eacute;thode MatrixTransformer.transform() depuis l’application
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’application contient une interface utilisateur permettant d’obtenir les param&egrave;tres de transformation de l’utilisateur.
Elle transmet ensuite ces valeurs, avec la propri&eacute;t&eacute; matrix de la propri&eacute;t&eacute; transform de l’objet d’affichage, &agrave; la
m&eacute;thode Matrix.transform(), comme suit :
tempMatrix = MatrixTransformer.transform(tempMatrix,
xScaleSlider.value,
yScaleSlider.value,
dxSlider.value,
dySlider.value,
rotationSlider.value,
skewSlider.value,
skewSide );
L’application applique alors la valeur renvoy&eacute;e &agrave; la propri&eacute;t&eacute; matrix de la propri&eacute;t&eacute; transform de l’objet d’affichage,
d&eacute;clenchant ainsi la transformation :
img.content.transform.matrix = tempMatrix;
Derni&egrave;re mise &agrave; jour le 27/4/2013
229
230
Chapitre 12 : Utilisation de l’API de dessin
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Bien que l’importance des images et graphiques import&eacute;s soit &eacute;vidente, il ne faut pas n&eacute;gliger la fonctionnalit&eacute; connue
sous le nom d’API de dessin, qui permet de tracer des lignes et des formes en ActionScript. Vous pouvez ainsi ouvrir
une application avec l’&eacute;quivalent informatique d’une toile vierge et y cr&eacute;er des images. La possibilit&eacute; de cr&eacute;er des
graphiques ouvre de nouvelles possibilit&eacute;s pour vos applications. Les techniques pr&eacute;sent&eacute;es ci-apr&egrave;s permettent
notamment de cr&eacute;er un programme de dessin, de r&eacute;aliser des &eacute;l&eacute;ments artistiques anim&eacute;s et interactifs ou de g&eacute;n&eacute;rer
par programmation vos propres &eacute;l&eacute;ments d’interface.
Voir aussi
flash.display.Graphics
Principes de base de l’API de dessin
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’API de dessin est le nom des fonctionnalit&eacute;s int&eacute;gr&eacute;es &agrave; ActionScript qui permettent de cr&eacute;er des graphiques
vectoriels (lignes, courbes, formes, remplissages et d&eacute;grad&eacute;s) et de les afficher &agrave; l’aide d’ActionScript. Ces
fonctionnalit&eacute;s sont prises en charge par la classe flash.display.Graphics. ActionScript permet de dessiner dans une
occurrence d’un objet de type Shape, Sprite ou MovieClip, &agrave; l’aide de la propri&eacute;t&eacute; graphics d&eacute;finie dans chacune de
ces classes (la propri&eacute;t&eacute; graphics de ces classes est en fait une occurrence de la classe Graphics).
Si vous n’avez pas l’habitude de &laquo; dessiner &raquo; par code, la classe Graphics comprend plusieurs m&eacute;thodes qui facilitent le
trac&eacute; de formes courantes (cercles, ellipses, rectangles et rectangles &agrave; coins arrondis). Ces trac&eacute;s peuvent &ecirc;tre des lignes
vides ou des formes remplies. Si vous avez besoin de fonctionnalit&eacute;s plus sophistiqu&eacute;es, la classe Graphics comporte
aussi des m&eacute;thodes destin&eacute;es au trac&eacute; de lignes et de courbes de B&eacute;zier, qui peuvent &ecirc;tre utilis&eacute;es conjointement avec
les fonctions trigonom&eacute;triques de la classe Math pour cr&eacute;er n’importe quelle forme.
Les moteurs d’ex&eacute;cution Flash (tels que Flash Player 10, Adobe AIR 1.5 et les versions ult&eacute;rieures) prennent en charge
une nouvelle API de dessin, qui vous permet de tracer int&eacute;gralement des formes par programmation &agrave; l’aide d’une
commande unique. Une fois que vous vous &ecirc;tes familiaris&eacute; avec la classe Graphics et les t&acirc;ches d&eacute;crites dans &laquo; Bases
d’utilisation de l’API de dessin &raquo;, passez &agrave; &laquo; Utilisation avanc&eacute;e de l’API de dessin &raquo; &agrave; la page 243 pour en savoir plus
sur ces fonctions.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs &agrave; l’utilisation de l’API de dessin :
Point d’ancrage L’un des deux points d’extr&eacute;mit&eacute; d’une courbe de B&eacute;zier.
Point de contr&ocirc;le Point qui d&eacute;finit la direction et la forme d’une courbe de B&eacute;zier. Cette ligne courbe ne touche jamais
le point de contr&ocirc;le, mais elle s’arrondit comme si elle &eacute;tait trac&eacute;e dans la direction de celui-ci.
Espace de coordonn&eacute;es Repr&eacute;sentation graphique des coordonn&eacute;es contenues dans un objet d’affichage, par rapport
auquel sont positionn&eacute;s les &eacute;l&eacute;ments enfant.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Remplissage Partie int&eacute;rieure opaque d’une forme constitu&eacute;e par le remplissage d’une ligne ou d’une forme ne
poss&eacute;dant pas de ligne de contour.
D&eacute;grad&eacute; Transition progressive d’une couleur &agrave; une ou plusieurs autres couleurs (par opposition &agrave; une couleur unie).
Point Emplacement unique dans un espace de coordonn&eacute;es. Dans le syst&egrave;me de coordonn&eacute;es en 2 dimensions utilis&eacute;
dans ActionScript, un point est d&eacute;fini par son emplacement le long de l’axe x et de l’axe y (les coordonn&eacute;es du point).
Courbe de B&eacute;zier quadratique Type de courbe d&eacute;fini par une formule math&eacute;matique d&eacute;termin&eacute;e. Dans ce type de
courbe, la forme de la courbe est calcul&eacute;e &agrave; partir des positions des points d’ancrage (les points d’extr&eacute;mit&eacute; de la
courbe) et d’un point de contr&ocirc;le qui d&eacute;finit la forme et la direction de la courbe.
Mise &agrave; l’&eacute;chelle Taille relative d’un objet par rapport &agrave; sa taille d’origine. Mettre un objet &agrave; l’&eacute;chelle consiste &agrave; modifier
sa taille en l’&eacute;tirant ou en le r&eacute;tr&eacute;cissant.
Trait Ligne de contour d’une forme constitu&eacute;e par le remplissage de cette ligne, ou forme ne poss&eacute;dant pas de
remplissage.
Translation Conversion des coordonn&eacute;es d’un point d’un espace de coordonn&eacute;es &agrave; un autre.
Axe x Axe horizontal dans le syst&egrave;me de coordonn&eacute;es en 2 dimensions utilis&eacute; dans ActionScript.
Axe y Axe vertical dans le syst&egrave;me de coordonn&eacute;es en 2 dimensions utilis&eacute; dans ActionScript.
Classe Graphics
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Chaque objet Shape, Sprite et MovieClip poss&egrave;de une propri&eacute;t&eacute; graphics qui est une occurrence de la classe Graphics.
La classe Graphics comporte des propri&eacute;t&eacute;s et des m&eacute;thodes permettant de tracer des lignes, des remplissages et des
formes. Pour disposer d’un objet d’affichage qui sera uniquement utilis&eacute; comme &laquo; toile de fond &raquo; pour un dessin,
utilisez une occurrence de Shape. Une occurrence de Shape est mieux adapt&eacute;e au dessin que les autres objets, car elle
ne comporte pas les fonctionnalit&eacute;s (inutiles dans ce type d’utilisation) des classes Sprite et MovieClip. Par contre, si
vous souhaitez cr&eacute;er un objet d’affichage qui servira de support &agrave; du contenu graphique mais doit &eacute;galement pouvoir
contenir d’autres objets d’affichage, utilisez une occurrence de Sprite. Pour plus d’informations sur le choix des objets
d’affichage en fonction de la t&acirc;che pr&eacute;vue, voir &laquo; S&eacute;lection d’une sous-classe de DisplayObject &raquo; &agrave; la page 179
Dessin de lignes et de courbes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Tous les graphiques qu’il est possible de r&eacute;aliser &agrave; l’aide d’une occurrence de la classe Graphics sont des trac&eacute;s &agrave; l’aide
de lignes et de courbes. Tous les dessins r&eacute;alis&eacute;s en ActionScript doivent donc suivre les m&ecirc;mes &eacute;tapes :
• D&eacute;finition de styles de ligne et de remplissage
• D&eacute;finition de la position de dessin initiale
• Dessin de lignes, courbes et formes (&eacute;ventuellement en d&eacute;pla&ccedil;ant le point de tra&ccedil;age)
• Le cas &eacute;ch&eacute;ant, cr&eacute;ation d’un remplissage
Derni&egrave;re mise &agrave; jour le 27/4/2013
231
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
D&eacute;finition de styles de ligne et de remplissage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour utiliser la propri&eacute;t&eacute; graphics d’une occurrence de Shape, Sprite ou MovieClip, vous devez d’abord d&eacute;finir le style
(&eacute;paisseur et couleur de la ligne, couleur de remplissage) &agrave; utiliser. A l’instar des outils de dessin d’Adobe&reg; Flash&reg;
Professional ou de toute autre application de dessin, en ActionScript vous pouvez dessiner avec ou sans trait, et avec
ou sans remplissage. Pour indiquer l’apparence du trait, utilisez la m&eacute;thode lineStyle() ou lineGradientStyle().
Pour cr&eacute;er une ligne pleine, utilisez la m&eacute;thode lineStyle(). Lors de l’appel de cette m&eacute;thode, les valeurs les plus
courantes &agrave; indiquer sont les trois premiers param&egrave;tres : &eacute;paisseur de ligne, couleur et alpha. Par exemple, la ligne de
code suivante indique que la forme myShape doit tracer des lignes de deux pixels d’&eacute;paisseur, en rouge (0x990000) et
avec une opacit&eacute; de 75 % :
myShape.graphics.lineStyle(2, 0x990000, .75);
La valeur par d&eacute;faut du param&egrave;tre alpha est 1.0 (100 %), vous pouvez donc l’omettre si vous souhaitez tracer une ligne
enti&egrave;rement opaque. La m&eacute;thode lineStyle() g&egrave;re &eacute;galement deux autres param&egrave;tres associ&eacute;s &agrave; l’indice de lissage
des pixels et au mode de mise &agrave; l’&eacute;chelle. Pour plus d’informations sur ces param&egrave;tres, voir la description de la m&eacute;thode
Graphics.lineStyle() dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Pour cr&eacute;er une ligne d&eacute;grad&eacute;e, utilisez la m&eacute;thode lineGradientStyle(). Pour plus d’informations sur cette
m&eacute;thode, voir &laquo; Cr&eacute;ation de lignes et de remplissages en d&eacute;grad&eacute; &raquo; &agrave; la page 235.
Pour cr&eacute;er une forme remplie, appelez les m&eacute;thodes beginFill(), beginGradientFill(), beginBitmapFill() ou
beginShaderFill() avant de d&eacute;buter le dessin. La plus basique, beginFill(), accepte deux param&egrave;tres : la couleur
de remplissage et, le cas &eacute;ch&eacute;ant, la valeur alpha correspondante. Par exemple, pour tracer une forme avec un
remplissage vert uni, utilisez le code suivant (on suppose ici que vous dessinez dans un objet nomm&eacute; myShape) :
myShape.graphics.beginFill(0x00FF00);
L’appel d’une m&eacute;thode de remplissage annule implicitement le remplissage pr&eacute;c&eacute;demment d&eacute;fini avant
l’impl&eacute;mentation du nouveau. L’appel d’une m&eacute;thode qui sp&eacute;cifie un style de trait remplace le style de trait pr&eacute;c&eacute;dent,
mais ne modifie pas le remplissage pr&eacute;c&eacute;demment d&eacute;fini, et vice-versa.
Une fois sp&eacute;cifi&eacute; le style de ligne et de remplissage, l’&eacute;tape suivante consiste &agrave; indiquer le point de d&eacute;part du dessin.
L’occurrence de Graphics poss&egrave;de un point de tra&ccedil;age, tout comme la pointe d’un crayon sur une feuille de papier.
Quel que soit l’emplacement du point de tra&ccedil;age, il repr&eacute;sente l’origine de l’action de dessin &agrave; venir. Initialement, un
objet Graphics d&eacute;bute avec son point de tra&ccedil;age aux points 0,0 dans l’espace de coordonn&eacute;es de l’objet dans lequel il
dessine. Pour que le trac&eacute; d&eacute;bute en un autre point, appelez la m&eacute;thode moveTo() avant d’appeler une des m&eacute;thodes
de dessin. Cet appel peut &ecirc;tre compar&eacute; &agrave; l’action de lever la pointe du crayon du papier et de l’amener &agrave; un nouvel
emplacement.
Lorsque le point de tra&ccedil;age est en place, utilisez une s&eacute;rie d’appels aux m&eacute;thodes lineTo() (pour tracer des lignes
droites) et curveTo() (pour tracer des courbes).
Pendant l’op&eacute;ration de dessin, vous pouvez &agrave; tout moment appeler la m&eacute;thode moveTo() pour amener le point de
tra&ccedil;age &agrave; une nouvelle position sans dessiner.
Si vous avez d&eacute;fini une couleur de remplissage, vous pouvez d&eacute;sactiver le remplissage en appelant la m&eacute;thode
endFill() pendant l’op&eacute;ration de dessin. Si vous n’avez pas trac&eacute; de forme ferm&eacute;e (autrement dit, si lors de l’appel de
la m&eacute;thode endFill() le point de tra&ccedil;age ne correspond pas au point de d&eacute;part de la forme), lorsque vous appelez la
m&eacute;thode endFill(), le moteur d’ex&eacute;cution Flash ferme automatiquement la forme en tra&ccedil;ant une ligne droite entre
le point de tra&ccedil;age actuel et l’emplacement sp&eacute;cifi&eacute; dans le dernier appel &agrave; la m&eacute;thode moveTo(). Si vous avez d&eacute;but&eacute;
un remplissage et n’avez pas appel&eacute; endFill(), tout appel &agrave; beginFill() (ou &agrave; l’une des autres m&eacute;thodes de
remplissage) ferme le remplissage actif et en d&eacute;bute un nouveau.
Derni&egrave;re mise &agrave; jour le 27/4/2013
232
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Dessin de lignes droites
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous appelez la m&eacute;thode lineTo(), l’objet Graphics trace une ligne droite (en utilisant le style de ligne que
vous avez sp&eacute;cifi&eacute;) entre le point de tra&ccedil;age actuel et les coordonn&eacute;es que vous transmettez en param&egrave;tres &agrave; cette
m&eacute;thode. Par exemple, cette ligne de code place le point de tra&ccedil;age aux coordonn&eacute;es 100, 100 puis trace une ligne
jusqu’au point 200, 200 :
myShape.graphics.moveTo(100, 100);
myShape.graphics.lineTo(200, 200);
L’exemple suivant trace des triangles rouges et verts d’une hauteur de 100 pixels :
var triangleHeight:uint = 100;
var triangle:Shape = new Shape();
// red triangle, starting at point 0, 0
triangle.graphics.beginFill(0xFF0000);
triangle.graphics.moveTo(triangleHeight / 2, 0);
triangle.graphics.lineTo(triangleHeight, triangleHeight);
triangle.graphics.lineTo(0, triangleHeight);
triangle.graphics.lineTo(triangleHeight / 2, 0);
// green triangle, starting at point 200, 0
triangle.graphics.beginFill(0x00FF00);
triangle.graphics.moveTo(200 + triangleHeight / 2, 0);
triangle.graphics.lineTo(200 + triangleHeight, triangleHeight);
triangle.graphics.lineTo(200, triangleHeight);
triangle.graphics.lineTo(200 + triangleHeight / 2, 0);
this.addChild(triangle);
Dessin de courbes
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La m&eacute;thode curveTo() dessine une courbe de B&eacute;zier. Elle trace un arc entre deux points (appel&eacute;s points d’ancrage)
courb&eacute; en direction d’un troisi&egrave;me point (appel&eacute; point de contr&ocirc;le). L’objet Graphics utilise la position de tra&ccedil;age
actuelle comme premier point d’ancrage. Lorsque vous appelez la m&eacute;thode curveTo(), vous transmettez quatre
param&egrave;tres : les coordonn&eacute;es x et y du point de contr&ocirc;le, puis les coordonn&eacute;es x et y du second point d’ancrage. Par
exemple, le code suivant trace une courbe entre le point 100, 100 et le point 200, 200. Le point de contr&ocirc;le ayant les
coordonn&eacute;es 175, 125, la courbe est orient&eacute;e vers la droite puis vers le bas :
myShape.graphics.moveTo(100, 100);
myShape.graphics.curveTo(175, 125, 200, 200);
L’exemple suivant trace des objets circulaires rouges et verts avec une largeur et une hauteur de 100 pixels. Notez qu’en
raison m&ecirc;me de la nature de l’&eacute;quation de B&eacute;zier, ces cercles ne sont pas parfaits :
Derni&egrave;re mise &agrave; jour le 27/4/2013
233
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
var size:uint = 100;
var roundObject:Shape = new Shape();
// red circular shape
roundObject.graphics.beginFill(0xFF0000);
roundObject.graphics.moveTo(size / 2, 0);
roundObject.graphics.curveTo(size, 0, size, size / 2);
roundObject.graphics.curveTo(size, size, size / 2, size);
roundObject.graphics.curveTo(0, size, 0, size / 2);
roundObject.graphics.curveTo(0, 0, size / 2, 0);
// green circular shape
roundObject.graphics.beginFill(0x00FF00);
roundObject.graphics.moveTo(200 + size / 2, 0);
roundObject.graphics.curveTo(200 + size, 0, 200 + size, size / 2);
roundObject.graphics.curveTo(200 + size, size, 200 + size / 2, size);
roundObject.graphics.curveTo(200, size, 200, size / 2);
roundObject.graphics.curveTo(200, 0, 200 + size / 2, 0);
this.addChild(roundObject);
Dessin de formes &agrave; l’aide des m&eacute;thodes int&eacute;gr&eacute;es
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour vous permettre de tracer plus commod&eacute;ment des formes courantes (cercles, ellipses, rectangles et rectangles &agrave;
coins arrondis), ActionScript 3.0 comporte des m&eacute;thodes qui tracent automatiquement ces formes. Ces m&eacute;thodes sont
drawCircle(), drawEllipse(), drawRect() et drawRoundRect(), et sont toutes d&eacute;finies dans la classe Graphics.
Elles peuvent &ecirc;tre utilis&eacute;es &agrave; la place des m&eacute;thodes lineTo() et curveTo(). Notez toutefois qu’il est n&eacute;cessaire de
sp&eacute;cifier des styles de ligne et de remplissage avant d’appeler ces m&eacute;thodes.
L’exemple suivant dessine des carr&eacute;s bleus, rouges et verts avec une largeur et une hauteur de 100 pixels. Ce code utilise
la m&eacute;thode drawRect() et sp&eacute;cifie que l’opacit&eacute; de la couleur de remplissage est de 50 % (0,5) :
var squareSize:uint = 100;
var square:Shape = new Shape();
square.graphics.beginFill(0xFF0000, 0.5);
square.graphics.drawRect(0, 0, squareSize, squareSize);
square.graphics.beginFill(0x00FF00, 0.5);
square.graphics.drawRect(200, 0, squareSize, squareSize);
square.graphics.beginFill(0x0000FF, 0.5);
square.graphics.drawRect(400, 0, squareSize, squareSize);
square.graphics.endFill();
this.addChild(square);
Dans un objet Sprite ou MovieClip, tout contenu graphique cr&eacute;&eacute; &agrave; l’aide de la propri&eacute;t&eacute; graphics appara&icirc;t toujours
derri&egrave;re les objets d’affichage enfant contenus par cet objet. Par ailleurs, le contenu cr&eacute;&eacute; avec la propri&eacute;t&eacute; graphics
n’est pas un objet d’affichage s&eacute;par&eacute;. Il n’appara&icirc;t donc pas dans la liste des enfants d’un objet Sprite ou MovieClip. Par
exemple, l’objet Sprite suivant re&ccedil;oit l’instruction de tracer un cercle avec sa propri&eacute;t&eacute; graphics, et un objet TextField
figure dans sa liste d’objets d’affichage enfant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
234
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
var label:TextField = new TextField();
label.width = 200;
label.text = &quot;They call me mellow yellow...&quot;;
label.x = 20;
label.y = 20;
mySprite.addChild(label);
this.addChild(mySprite);
Notez que l’objet TextField appara&icirc;t au-dessus du cercle trac&eacute; avec la propri&eacute;t&eacute; graphics.
Cr&eacute;ation de lignes et de remplissages en d&eacute;grad&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’objet Graphics permet aussi de tracer des traits et des remplissages avec des d&eacute;grad&eacute;s au lieu de couleurs unies. Pour
cr&eacute;er un trait d&eacute;grad&eacute;, utilisez la m&eacute;thode lineGradientStyle(). Pour cr&eacute;er un remplissage d&eacute;grad&eacute;, utilisez la
m&eacute;thode beginGradientFill().
Ces deux m&eacute;thodes re&ccedil;oivent les m&ecirc;mes param&egrave;tres. Les quatre premiers sont obligatoires : type, couleurs,
transparences alpha et rapports. Les quatre suivants sont facultatifs mais peuvent &ecirc;tre utiles pour plus de
personnalisation.
• Le premier param&egrave;tre sp&eacute;cifie le type de d&eacute;grad&eacute; &agrave; cr&eacute;er. Les valeurs acceptables sont GradientType.LINEAR ou
GradientType.RADIAL.
• Le deuxi&egrave;me param&egrave;tre indique le tableau de valeurs colorim&eacute;triques &agrave; utiliser. Dans un d&eacute;grad&eacute; lin&eacute;aire, les
couleurs sont organis&eacute;es de gauche &agrave; droite. Dans un d&eacute;grad&eacute; radial, les couleurs sont organis&eacute;es de l’int&eacute;rieur &agrave;
l’ext&eacute;rieur. L’ordre des couleurs dans le tableau repr&eacute;sente l’ordre dans lequel elles sont trac&eacute;es dans le d&eacute;grad&eacute;.
• Le troisi&egrave;me param&egrave;tre indique les valeurs de transparence alpha pour les couleurs correspondantes du param&egrave;tre
pr&eacute;c&eacute;dent.
• Le quatri&egrave;me param&egrave;tre sp&eacute;cifie les rapports, c’est-&agrave;-dire l’importance de chaque couleur dans le d&eacute;grad&eacute;. Les
valeurs acceptables vont de 0 &agrave; 255. Ces valeurs ne repr&eacute;sentent pas une hauteur ou une largeur, mais plut&ocirc;t la
position au sein du d&eacute;grad&eacute; : 0 repr&eacute;sente le d&eacute;but du d&eacute;grad&eacute;, et 255 la fin. Cette plage de rapports doit augmenter
s&eacute;quentiellement et comporter le m&ecirc;me nombre d’&eacute;l&eacute;ments que les tableaux des couleurs et des valeurs alpha
sp&eacute;cifi&eacute;s comme deuxi&egrave;me et troisi&egrave;me param&egrave;tres.
Le cinqui&egrave;me param&egrave;tre, la matrice de transformation, est facultatif mais fr&eacute;quemment utilis&eacute;, car il repr&eacute;sente un
moyen &agrave; la fois puissant et ais&eacute; de contr&ocirc;ler l’aspect du d&eacute;grad&eacute;. Ce param&egrave;tre accepte une occurrence de l’objet
Matrix. Le moyen le plus simple de cr&eacute;er un objet Matrix pour un d&eacute;grad&eacute; consiste &agrave; utiliser la m&eacute;thode
createGradientBox() de la classe Matrix.
D&eacute;finition d’un objet Matrix &agrave; utiliser avec un d&eacute;grad&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Utilisez les m&eacute;thodes beginGradientFill() et lineGradientStyle() de la classe flash.display.Graphics pour
d&eacute;finir les d&eacute;grad&eacute;s &agrave; utiliser dans des formes. Lorsque vous d&eacute;finissez un d&eacute;grad&eacute;, vous fournissez une matrice comme
l’un des param&egrave;tres de ces m&eacute;thodes.
Derni&egrave;re mise &agrave; jour le 27/4/2013
235
236
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
La fa&ccedil;on la plus facile de d&eacute;finir la matrice est d’utiliser la m&eacute;thode createGradientBox(), de la classe Matrix, qui
d&eacute;finit un tableau utilis&eacute; pour d&eacute;finir le d&eacute;grad&eacute;. D&eacute;finissez l’&eacute;chelle, la rotation et la position du d&eacute;grad&eacute; &agrave; l’aide des
param&egrave;tres transmis &agrave; la m&eacute;thode createGradientBox(). La m&eacute;thode createGradientBox() re&ccedil;oit les param&egrave;tres
suivants :
• Largeur de la zone de d&eacute;grad&eacute; : largeur (en pixels) sur laquelle s’&eacute;tend le d&eacute;grad&eacute;
• Hauteur de la zone de d&eacute;grad&eacute; : hauteur (en pixels) sur laquelle s’&eacute;tend le d&eacute;grad&eacute;
• Rotation de la zone de d&eacute;grad&eacute; : rotation (en radians) qui sera appliqu&eacute;e au d&eacute;grad&eacute;
• Translation horizontale : distance (en pixels) de d&eacute;placement horizontal du d&eacute;grad&eacute;
• Translation verticale : distance (en pixels) de d&eacute;placement vertical du d&eacute;grad&eacute;
Par exemple, supposons un d&eacute;grad&eacute; poss&eacute;dant les caract&eacute;ristiques suivantes :
•
GradientType.LINEAR
• Deux couleurs, vert et bleu, avec le tableau ratios d&eacute;fini sur [0,
•
SpreadMethod.PAD
•
InterpolationMethod.LINEAR_RGB
255]
Les exemples suivants pr&eacute;sentent des d&eacute;grad&eacute;s dans lesquels le param&egrave;tre rotation de la m&eacute;thode
createGradientBox() varie comme indiqu&eacute;, mais tous les autres r&eacute;glages restent inchang&eacute;s :
width = 100;
height = 100;
rotation = 0;
tx = 0;
ty = 0;
width = 100;
height = 100;
rotation = Math.PI/4; // 45&deg;
tx = 0;
ty = 0;
width = 100;
height = 100;
rotation = Math.PI/2; // 90&deg;
tx = 0;
ty = 0;
Les exemples suivants pr&eacute;sentent les effets sur un d&eacute;grad&eacute; lin&eacute;aire vert &agrave; bleu dans lequel les param&egrave;tres rotation, tx
et ty de la m&eacute;thode createGradientBox() varient comme indiqu&eacute;, mais tous les autres r&eacute;glages restent inchang&eacute;s :
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
width = 50;
height = 100;
rotation = 0;
tx = 0;
ty = 0;
width = 50;
height = 100;
rotation = 0
tx = 50;
ty = 0;
width = 100;
height = 50;
rotation = Math.PI/2; // 90&deg;
tx = 0;
ty = 0;
width = 100;
height = 50;
rotation = Math.PI/2; // 90&deg;
tx = 0;
ty = 50;
Les param&egrave;tres width, height, tx et ty de la m&eacute;thode createGradientBox() ont une incidence sur la taille et la
position d’un remplissage en d&eacute;grad&eacute; radial &eacute;galement, comme indiqu&eacute; dans l’exemple suivant :
width = 50;
height = 100;
rotation = 0;
tx = 25;
ty = 0;
Le code suivant produit le dernier d&eacute;grad&eacute; radial illustr&eacute; :
Derni&egrave;re mise &agrave; jour le 27/4/2013
237
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
import flash.display.Shape;
import flash.display.GradientType;
import flash.geom.Matrix;
var
var
var
var
var
var
var
type:String = GradientType.RADIAL;
colors:Array = [0x00FF00, 0x000088];
alphas:Array = [1, 1];
ratios:Array = [0, 255];
spreadMethod:String = SpreadMethod.PAD;
interp:String = InterpolationMethod.LINEAR_RGB;
focalPtRatio:Number = 0;
var matrix:Matrix = new Matrix();
var boxWidth:Number = 50;
var boxHeight:Number = 100;
var boxRotation:Number = Math.PI/2; // 90&deg;
var tx:Number = 25;
var ty:Number = 0;
matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
var square:Shape = new Shape;
square.graphics.beginGradientFill(type,
colors,
alphas,
ratios,
matrix,
spreadMethod,
interp,
focalPtRatio);
square.graphics.drawRect(0, 0, 100, 100);
addChild(square);
Notez que la largeur et la hauteur du d&eacute;grad&eacute; sont d&eacute;termin&eacute;es par la largeur et la hauteur de la matrice du d&eacute;grad&eacute;,
plut&ocirc;t que par celles qui sont dessin&eacute;es &agrave; l’aide de l’objet Graphics. Si vous dessinez avec l’objet Graphics, vous tracez
ce qui existe &agrave; ces coordonn&eacute;es dans la matrice du d&eacute;grad&eacute;. M&ecirc;me si vous utilisez l’une des m&eacute;thodes de cr&eacute;ation de
forme d’un objet de type Graphics, par exemple drawRect(), le d&eacute;grad&eacute; n’est pas &eacute;tir&eacute; en fonction de la taille de la
forme dessin&eacute;e : sa taille doit &ecirc;tre sp&eacute;cifi&eacute;e dans la matrice du d&eacute;grad&eacute;.
L’exemple ci-dessous illustre la diff&eacute;rence visuelle entre les dimensions de la matrice du d&eacute;grad&eacute; et celles du dessin :
var myShape:Shape = new Shape();
var gradientBoxMatrix:Matrix = new Matrix();
gradientBoxMatrix.createGradientBox(100, 40, 0, 0, 0);
myShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1,
1, 1], [0, 128, 255], gradientBoxMatrix);
myShape.graphics.drawRect(0, 0, 50, 40);
myShape.graphics.drawRect(0, 50, 100, 40);
myShape.graphics.drawRect(0, 100, 150, 40);
myShape.graphics.endFill();
this.addChild(myShape);
Ce code trace trois d&eacute;grad&eacute;s avec le m&ecirc;me style de remplissage, sp&eacute;cifi&eacute; avec une distribution &eacute;gale de rouge, vert et
bleu. Les d&eacute;grad&eacute;s sont trac&eacute;s &agrave; l’aide de la m&eacute;thode drawRect() avec des largeurs en pixels de 50, 100 et 150
respectivement. La matrice de d&eacute;grad&eacute; qui est sp&eacute;cifi&eacute;e dans la m&eacute;thode beginGradientFill() est cr&eacute;&eacute;e avec une
largeur de 100 pixels. Le premier d&eacute;grad&eacute; ne couvre donc que la moiti&eacute; de son spectre, le deuxi&egrave;me le couvre en entier,
et le troisi&egrave;me le couvre en entier et poss&egrave;de 50 pixels suppl&eacute;mentaires de bleu &agrave; droite.
Derni&egrave;re mise &agrave; jour le 27/4/2013
238
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
La m&eacute;thode lineGradientStyle() fonctionne de fa&ccedil;on similaire &agrave; beginGradientFill(), si ce n’est qu’outre la
d&eacute;finition du d&eacute;grad&eacute; vous devez aussi indiquer l’&eacute;paisseur du trait &agrave; l’aide de la m&eacute;thode lineStyle() avant de
tracer. Le code suivant trace une bo&icirc;te avec un trait d&eacute;grad&eacute; rouge, vert et bleu :
var myShape:Shape = new Shape();
var gradientBoxMatrix:Matrix = new Matrix();
gradientBoxMatrix.createGradientBox(200, 40, 0, 0, 0);
myShape.graphics.lineStyle(5, 0);
myShape.graphics.lineGradientStyle(GradientType.LINEAR, [0xFF0000, 0x00FF00, 0x0000FF], [1,
1, 1], [0, 128, 255], gradientBoxMatrix);
myShape.graphics.drawRect(0, 0, 200, 40);
this.addChild(myShape);
Pour plus d’informations sur la classe Matrix, voir &laquo; Utilisation des objets Matrix &raquo; &agrave; la page 224.
Utilisation de la classe Math avec les m&eacute;thodes de dessin
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Un objet Graphics trace des cercles et des carr&eacute;s, mais il permet aussi de dessiner des formes plus complexes, en
particulier lorsque les m&eacute;thodes de dessin sont utilis&eacute;es en combinaison avec les propri&eacute;t&eacute;s et les m&eacute;thodes de la classe
Math. La classe Math contient des constantes d’int&eacute;r&ecirc;t g&eacute;n&eacute;ral en math&eacute;matiques, telles que Math.PI (environ
3,14159265...), qui est la constante d&eacute;finissant le rapport entre la circonf&eacute;rence et le diam&egrave;tre d’un cercle. Elle contient
&eacute;galement des m&eacute;thodes de fonctions trigonom&eacute;triques, entre autres Math.sin(), Math.cos() et Math.tan().
L’utilisation de ces m&eacute;thodes et constantes pour le dessin de formes permet d’obtenir des effets visuels plus
dynamiques, en particulier en utilisant des r&eacute;p&eacute;titions et des r&eacute;cursions.
De nombreuses m&eacute;thodes de la classe Math attendent des mesures circulaires en radians, et non en degr&eacute;s. La
conversion entre ces deux types d’unit&eacute;s repr&eacute;sente elle-m&ecirc;me un cas d’utilisation courante de la classe Math :
var degrees = 121;
var radians = degrees * Math.PI / 180;
trace(radians) // 2.111848394913139
L’exemple suivant cr&eacute;e une onde sinuso&iuml;dale et une onde cosinuso&iuml;dale, afin d’illustrer la diff&eacute;rence entre les m&eacute;thodes
Math.sin() et Math.cos() pour une m&ecirc;me valeur.
var
var
var
var
var
var
sinWavePosition = 100;
cosWavePosition = 200;
sinWaveColor:uint = 0xFF0000;
cosWaveColor:uint = 0x00FF00;
waveMultiplier:Number = 10;
waveStretcher:Number = 5;
var i:uint;
for(i = 1; i &lt; stage.stageWidth; i++)
{
var sinPosY:Number = Math.sin(i / waveStretcher) * waveMultiplier;
var cosPosY:Number = Math.cos(i / waveStretcher) * waveMultiplier;
graphics.beginFill(sinWaveColor);
graphics.drawRect(i, sinWavePosition + sinPosY, 2, 2);
graphics.beginFill(cosWaveColor);
graphics.drawRect(i, cosWavePosition + cosPosY, 2, 2);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
239
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Animation avec l’API de dessin
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’un des avantages de la cr&eacute;ation de contenu graphique avec l’API de dessin est que ce contenu peut &ecirc;tre repositionn&eacute;
&agrave; loisir. Tout ce que vous tracez peut &ecirc;tre modifi&eacute;, en modifiant simplement les variables utilis&eacute;es pour ce dessin. Vous
pouvez donc obtenir de l’animation en changeant les variables et en retra&ccedil;ant, soit sur un nombre d’images donn&eacute;, soit
&agrave; l’aide d’un timer.
Par exemple, le code suivant change l’affichage &agrave; chaque nouvelle image (en &eacute;coutant l’&eacute;v&eacute;nement
Event.ENTER_FRAME) : il incr&eacute;mente la valeur de degr&eacute;s actuelle, puis ordonne &agrave; l’objet graphique d’effacer et
redessiner avec la nouvelle position.
stage.frameRate = 31;
var currentDegrees:Number = 0;
var radius:Number = 40;
var satelliteRadius:Number = 6;
var container:Sprite = new Sprite();
container.x = stage.stageWidth / 2;
container.y = stage.stageHeight / 2;
addChild(container);
var satellite:Shape = new Shape();
container.addChild(satellite);
addEventListener(Event.ENTER_FRAME, doEveryFrame);
function doEveryFrame(event:Event):void
{
currentDegrees += 4;
var radians:Number = getRadians(currentDegrees);
var posX:Number = Math.sin(radians) * radius;
var posY:Number = Math.cos(radians) * radius;
satellite.graphics.clear();
satellite.graphics.beginFill(0);
satellite.graphics.drawCircle(posX, posY, satelliteRadius);
}
function getRadians(degrees:Number):Number
{
return degrees * Math.PI / 180;
}
Pour produire un r&eacute;sultat nettement diff&eacute;rent, vous pouvez exp&eacute;rimenter en modifiant les valeurs initiales au d&eacute;but
du code, currentDegrees, radius et satelliteRadius. Par exemple, essayez en r&eacute;duisant la valeur de la variable
radius et/ou en augmentant la valeur de la variable totalSatellites. Ce n’est qu’un exemple simple de la fa&ccedil;on dont l’API
de dessin permet de cr&eacute;er du contenu visuel dont la complexit&eacute; dissimule la simplicit&eacute; de cr&eacute;ation.
Derni&egrave;re mise &agrave; jour le 27/4/2013
240
241
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Exemple d’utilisation de l’API de dessin : g&eacute;n&eacute;rateur
algorithmique d’effets visuels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple de g&eacute;n&eacute;rateur algorithmique d’effets visuels trace de mani&egrave;re dynamique plusieurs &laquo; satellites &raquo;, des cercles
qui se d&eacute;placent suivant une orbite circulaire. Les fonctionnalit&eacute;s pr&eacute;sent&eacute;es sont les suivantes :
• Utilisation de l’API de dessin pour tracer une forme simple avec un aspect dynamique
• Utilisation de l’interaction de l’utilisateur pour modifier les propri&eacute;t&eacute;s utilis&eacute;es pour le dessin
• Effet d’animation par effacement du contenu et retra&ccedil;age &agrave; chaque nouvelle image.
L’exemple de la section pr&eacute;c&eacute;dente animait un satellite isol&eacute; &agrave; l’aide de l’&eacute;v&eacute;nement Event.ENTER_FRAME. Cet exemple
le reprend en y ajoutant un panneau de contr&ocirc;le avec divers curseurs qui actualisent imm&eacute;diatement l’affichage de
plusieurs satellites. Dans cet exemple, le code est formalis&eacute; dans des classes externes et le code de cr&eacute;ation du satellite
est imbriqu&eacute; dans une boucle, en conservant une r&eacute;f&eacute;rence &agrave; chaque satellite dans le tableau satellites.
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers de l’application se trouvent dans le dossier
Samples/AlgorithmicVisualGenerator. Celui-ci contient les fichiers suivants :
Fichier
Description
AlgorithmicVisualGenerator.fla
Fichier d’application principal de Flash Professional
(FLA)
com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as
Classe comportant les principales fonctionnalit&eacute;s de
l’application : dessin des satellites sur la sc&egrave;ne et
actualisation des variables utilis&eacute;es pour ces dessins en
r&eacute;ponse aux &eacute;v&eacute;nements du panneau de contr&ocirc;le.
com/example/programmingas3/algorithmic/ControlPanel.as
Cette classe g&egrave;re les interactions de l’utilisateur avec
les curseurs et distribue les &eacute;v&eacute;nements appropri&eacute;s.
com/example/programmingas3/algorithmic/Satellite.as
Cette classe repr&eacute;sente l’objet d’affichage qui tourne
sur son orbite autour d’un point central et contient des
propri&eacute;t&eacute;s relatives &agrave; son &eacute;tat de dessin actuel.
D&eacute;finition des &eacute;couteurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’application commence par cr&eacute;er trois &eacute;couteurs. Le premier attend qu’un &eacute;v&eacute;nement soit distribu&eacute; par le panneau
de contr&ocirc;le pour signaler qu’une reconstruction des satellites est n&eacute;cessaire. Le second attend des changements de taille
de la sc&egrave;ne du fichier SWF. Le troisi&egrave;me attend le passage de chaque image du fichier SWF et son retra&ccedil;age &agrave; l’aide de
la fonction doEveryFrame().
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Cr&eacute;ation des satellites
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Apr&egrave;s la d&eacute;finition de ces &eacute;couteurs, la fonction build() est appel&eacute;e. Cette fonction appelle d’abord la fonction
clear(), qui efface le contenu du tableau satellites et supprime les &eacute;ventuelles formes d&eacute;j&agrave; pr&eacute;sentes sur la sc&egrave;ne.
Cette pr&eacute;caution est n&eacute;cessaire car la fonction build() peut &ecirc;tre appel&eacute;e &agrave; nouveau &agrave; la suite d’un &eacute;v&eacute;nement diffus&eacute;
par le panneau de contr&ocirc;le, par exemple en cas de modification des couleurs. Dans ce cas, les satellites doivent &ecirc;tre
supprim&eacute;s et recr&eacute;&eacute;s.
La fonction cr&eacute;e ensuite les satellites, en d&eacute;finissant les propri&eacute;t&eacute;s initiales n&eacute;cessaires &agrave; cette cr&eacute;ation, dont la variable
position qui d&eacute;finit une position al&eacute;atoire sur l’orbite et la variable color, qui dans cet exemple ne change pas une
fois que le satellite a &eacute;t&eacute; cr&eacute;&eacute;.
Lors de la cr&eacute;ation de chaque satellite, une r&eacute;f&eacute;rence est ajout&eacute;e dans le tableau satellites. Lorsque la fonction
doEveryFrame() est appel&eacute;e, elle actualise tous les satellites du tableau.
Actualisation de la position des satellites
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La fonction doEveryFrame() est au cœur du processus d’animation de l’application. Elle est appel&eacute;e &agrave; chaque image,
donc &agrave; une fr&eacute;quence identique &agrave; la cadence du fichier SWF. Les variables du dessin changent l&eacute;g&egrave;rement, ce qui
permet d’obtenir un effet d’animation.
La fonction efface d’abord tous les &eacute;ventuels dessins ant&eacute;rieurs et retrace l’arri&egrave;re-plan. Elle effectue ensuite une boucle
dans le conteneur de chaque satellite et incr&eacute;mente la propri&eacute;t&eacute; position de chaque satellite, puis actualise les
propri&eacute;t&eacute;s radius et orbitRadius qui peuvent avoir &eacute;t&eacute; modifi&eacute;es par suite d’une action de l’utilisateur dans le
panneau de contr&ocirc;le. Enfin, la nouvelle position de chaque satellite est affich&eacute;e en appelant la m&eacute;thode draw() de la
classe Satellite.
Notez que la variable de compteur i n’est incr&eacute;ment&eacute;e que jusqu’&agrave; la valeur de la variable visibleSatellites. En
effet, si l’utilisateur a limit&eacute; &agrave; l’aide du panneau de contr&ocirc;le le nombre de satellites affich&eacute;s, les autres satellites de la
boucle ne doivent pas &ecirc;tre redessin&eacute;s, mais masqu&eacute;s. La boucle charg&eacute;e de cette action suit imm&eacute;diatement celle qui
est responsable du dessin.
Lorsque la fonction doEveryFrame() se termine, le nombre de satellites visibles (visibleSatellites) est redessin&eacute;
aux nouvelles positions.
R&eacute;ponse aux interactions de l’utilisateur
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’interactivit&eacute; est assur&eacute;e par le panneau de contr&ocirc;le, qui est g&eacute;r&eacute; par la classe ControlPanel. Cette classe d&eacute;finit pour
chaque curseur un &eacute;couteur et des valeurs individuelles minimum, maximum et par d&eacute;faut. Lorsque l’utilisateur
d&eacute;place ces curseurs, la fonction changeSetting() est appel&eacute;e. Elle actualise les propri&eacute;t&eacute;s du panneau de contr&ocirc;le.
Si la modification n&eacute;cessite un nouvel affichage, un &eacute;v&eacute;nement est distribu&eacute; et pris en charge dans le fichier principal
de l’application. En fonction de la modification signal&eacute;e par le panneau de contr&ocirc;le, la fonction doEveryFrame()
redessine chaque satellite sur la base des nouvelles variables.
Derni&egrave;re mise &agrave; jour le 27/4/2013
242
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Am&eacute;liorations possibles
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Cet exemple est simplement destin&eacute; &agrave; illustrer la cr&eacute;ation d’effets visuels avec l’API de dessin. Il utilise relativement
peu de lignes de code pour cr&eacute;er une animation interactive qui semble tr&egrave;s complexe. M&ecirc;me ainsi, cet exemple pourrait
&ecirc;tre am&eacute;lior&eacute; moyennant quelques modifications mineures. Voici quelques id&eacute;es :
• La fonction doEveryFrame() pourrait incr&eacute;menter la valeur colorim&eacute;trique du satellite.
• La fonction doEveryFrame() pourrait r&eacute;duire ou augmenter progressivement le rayon de l’orbite du satellite.
• Il n’est pas n&eacute;cessaire que l’orbite du satellite soit circulaire, la classe Math permet de le d&eacute;placer selon une
sinuso&iuml;dale, par exemple.
• Les satellites pourraient utiliser une d&eacute;tection de collision entre eux.
L’API de dessin peut &ecirc;tre consid&eacute;r&eacute;e comme autre solution pour la cr&eacute;ation d’effets visuels dans l’environnement de
cr&eacute;ation Flash, en dessinant des formes de base lors de l’ex&eacute;cution. Mais elle permet aussi de cr&eacute;er des effets visuels
qu’il serait impossible de cr&eacute;er manuellement. L’API de dessin et quelques notions de math&eacute;matiques permettent au
d&eacute;veloppeur en ActionScript de donner vie &agrave; de nombreuses cr&eacute;ations inattendues.
Utilisation avanc&eacute;e de l’API de dessin
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Flash Player 10, Adobe AIR 1.5 et les moteurs d’ex&eacute;cution Flash ult&eacute;rieurs prennent en charge un jeu avanc&eacute; de
fonctions de dessin. Les am&eacute;liorations de l’API de dessin associ&eacute;es &agrave; ces moteurs d’ex&eacute;cution, qui &eacute;tendent les
m&eacute;thodes de dessin des versions ant&eacute;rieures, vous permettent de d&eacute;finir des ensembles de donn&eacute;es pour g&eacute;n&eacute;rer des
formes, les modifier lors de l’ex&eacute;cution et cr&eacute;er des effets tridimensionnels. Les am&eacute;liorations de l’API de dessin
consolident les m&eacute;thodes existantes comme commandes alternatives. Ces commandes s’appuient sur des tableaux de
vecteurs et des classes d’&eacute;num&eacute;ration pour fournir des ensembles de donn&eacute;es aux m&eacute;thodes de dessin. Les tableaux de
vecteurs acc&eacute;l&egrave;rent le rendu de formes plus complexes. Les d&eacute;veloppeurs peuvent modifier les valeurs des tableaux par
programmation pour rendre des formes dynamiques &agrave; l’ex&eacute;cution.
Les nouvelles fonctions de dessins de Flash Player 10 sont d&eacute;crites dans les sections suivantes : &laquo; Trac&eacute;s de dessin &raquo; &agrave;
la page 244, &laquo; D&eacute;finition des r&egrave;gles d’enroulement &raquo; &agrave; la page 245, &laquo; Utilisation des classes de donn&eacute;es graphiques &raquo; &agrave;
la page 247 et &laquo; A propos de l’utilisation de drawTriangles() &raquo; &agrave; la page 250.
Vous souhaiterez probablement effectuer les t&acirc;ches suivantes &agrave; l’aide des fonctions avanc&eacute;es de l’API de dessin dans
ActionScript :
• Stockage des donn&eacute;es destin&eacute;es aux m&eacute;thodes de dessin &agrave; l’aide d’objets Vector
• D&eacute;finition de trac&eacute;s pour tracer des formes par programmation en une seule op&eacute;ration
• D&eacute;finition de r&egrave;gles d’enroulement pour d&eacute;terminer le remplissage de formes se chevauchant
• La lecture du contenu graphique vectoriel d’un objet d’affichage, par exemple pour s&eacute;rialiser et enregistrer les
donn&eacute;es graphiques, pour g&eacute;n&eacute;rer une feuille Sprite &agrave; l’ex&eacute;cution ou pour dessiner une copie du contenu graphique
vectoriel.
• Utilisation de triangles et de m&eacute;thodes de dessin pour obtenir des effets tridimensionnels
Derni&egrave;re mise &agrave; jour le 27/4/2013
243
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante &eacute;num&egrave;re les termes importants que vous rencontrerez dans cette section :
• Vecteur : tableau de valeurs d’un type de donn&eacute;es identique. Un objet Vector peut stocker un tableau de valeurs
qu’utilisent des m&eacute;thodes de dessin pour construire des lignes et des formes par le biais d’une commande unique.
Pour plus d’informations sur les objets Vector, voir &laquo; Tableaux index&eacute;s &raquo; &agrave; la page 27.
• Trac&eacute; : un trac&eacute; est compos&eacute; d’un ou de plusieurs segments droits ou incurv&eacute;s. Le d&eacute;but et la fin de chaque segment
sont indiqu&eacute;s par des coordonn&eacute;es qui fonctionnent &agrave; la mani&egrave;re d’&eacute;pingles maintenant un fil en place. Un trac&eacute;
peut &ecirc;tre ferm&eacute; (un cercle, par exemple) ou ouvert, s’il comporte des extr&eacute;mit&eacute;s distinctes (une ligne onduleuse, par
exemple).
• Enroulement : direction d’un trac&eacute; tel qu’il est interpr&eacute;t&eacute; par le rendu, soit positive (sens horaire) soit n&eacute;gative (sens
antihoraire).
• GraphicsStroke : classe permettant de d&eacute;finir le style de ligne. Bien que le &laquo; trait &raquo; &agrave; proprement parler n’ait pas &eacute;t&eacute;
inclus dans la nouvelle API de dessin, l’utilisation d’une classe pour d&eacute;signer un style de ligne avec ses propres
propri&eacute;t&eacute;s de remplissage constitue l’une des am&eacute;liorations int&eacute;gr&eacute;es. Vous pouvez r&eacute;gler dynamiquement le style
d’une ligne &agrave; l’aide de la classe GraphicsStroke.
• Objet Fill : objet cr&eacute;&eacute; &agrave; l’aide de classes d’affichage telles que flash.display.GraphicsBitmapFill et
flash.display.GraphicsGradientFill, et transmis &agrave; la commande de dessin Graphics.drawGraphicsData(). Les
objets Fill et les commandes de dessin optimis&eacute;es proposent une approche de programmation plus orient&eacute;e objets
pour r&eacute;pliquer Graphics.beginBitmapFill() et Graphics.beginGradientFill().
Trac&eacute;s de dessin
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La section sur le dessin de lignes et de courbes (voir &laquo; Dessin de lignes et de courbes &raquo; &agrave; la page 231) a pr&eacute;sent&eacute; les
commandes permettant de tracer une ligne (Graphics.lineTo()) ou courbe (Graphics.curveTo()) unique, puis
de la d&eacute;placer vers un autre point (Graphics.moveTo()) pour obtenir une forme. Les m&eacute;thodes
Graphics.drawPath() et Graphics.drawTriangles() acceptent une s&eacute;rie d’objets repr&eacute;sentant ces m&ecirc;mes
commandes de dessin comme param&egrave;tre. Ces m&eacute;thodes permettent de d&eacute;finir une s&eacute;rie de commandes
Graphics.lineTo(), Graphics.curveTo() ou Graphics.moveTo() trait&eacute;es par le moteur d’ex&eacute;cution Flash en une
seule instruction.
La classe d’&eacute;num&eacute;ration GraphicsPathCommand d&eacute;finit une s&eacute;rie de constantes qui correspondent aux commandes
de dessin. Vous transmettez une s&eacute;rie de ces constantes (encapsul&eacute;es dans une occurrence de Vector) comme
param&egrave;tre de la m&eacute;thode Graphics.drawPath(). Vous pouvez ensuite rendre une forme enti&egrave;re ou plusieurs formes
&agrave; l’aide d’une seule commande. Vous pouvez aussi modifier les valeurs transmises &agrave; ces m&eacute;thodes pour modifier une
forme existante.
Outre l’occurrence Vector des commandes de dessin, la m&eacute;thode drawPath() a besoin d’un ensemble de coordonn&eacute;es
qui correspondent aux coordonn&eacute;es de chaque commande de dessin. Cr&eacute;ez une occurrence de Vector contenant des
coordonn&eacute;es (instances de Number) et transmettez-la &agrave; la m&eacute;thode drawPath() comme second argument (data).
Remarque : les valeurs du vecteur ne sont pas des objets Point. Le vecteur est une s&eacute;rie de nombres, dont chaque paire
repr&eacute;sente une paire de coordonn&eacute;es x/y.
La m&eacute;thode Graphics.drawPath() fait correspondre chaque commande &agrave; ses valeurs de point respectives (une s&eacute;rie
de deux ou quatre nombres) pour g&eacute;n&eacute;rer un trac&eacute; dans l’objet Graphics :
Derni&egrave;re mise &agrave; jour le 27/4/2013
244
245
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
package
{
import flash.display.*;
public class DrawPathExample extends Sprite
{
public function DrawPathExample(){
var squareCommands:Vector.&lt;int&gt; = new Vector.&lt;int&gt;(5, true);
squareCommands[0] = GraphicsPathCommand.MOVE_TO;
squareCommands[1] = GraphicsPathCommand.LINE_TO;
squareCommands[2] = GraphicsPathCommand.LINE_TO;
squareCommands[3] = GraphicsPathCommand.LINE_TO;
squareCommands[4] = GraphicsPathCommand.LINE_TO;
var squareCoord:Vector.&lt;Number&gt; = new Vector.&lt;Number&gt;(10, true);
squareCoord[0] = 20; //x
squareCoord[1] = 10; //y
squareCoord[2] = 50;
squareCoord[3] = 10;
squareCoord[4] = 50;
squareCoord[5] = 40;
squareCoord[6] = 20;
squareCoord[7] = 40;
squareCoord[8] = 20;
squareCoord[9] = 10;
graphics.beginFill(0x442266);//set the color
graphics.drawPath(squareCommands, squareCoord);
}
}
}
D&eacute;finition des r&egrave;gles d’enroulement
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
L’API de dessin am&eacute;lior&eacute;e prend d&eacute;sormais en charge le concept d’&laquo; enroulement &raquo; de trac&eacute;, qui d&eacute;finit la direction de
ce dernier. L’enroulement d’un trac&eacute; est soit positif (sens horaire) soit n&eacute;gatif (sens antihoraire). L’ordre dans lequel
le rendu interpr&egrave;te les coordonn&eacute;es que fournit le vecteur au param&egrave;tre data d&eacute;termine l’enroulement.
A
0
1
0
3
3
2
1
2
B
C
Enroulement positif et n&eacute;gatif
A. Les fl&egrave;ches indiquent la direction du trac&eacute;. B. Enroulement positif (sens horaire) C. Enroulement n&eacute;gatif (sens antihoraire)
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
En outre, vous remarquerez que la m&eacute;thode Graphics.drawPath() poss&egrave;de un troisi&egrave;me param&egrave;tre facultatif, appel&eacute;
&laquo; winding &raquo; :
drawPath(commands:Vector.&lt;int&gt;, data:Vector.&lt;Number&gt;, winding:String = &quot;evenOdd&quot;):void
Dans ce contexte, le troisi&egrave;me param&egrave;tre est une cha&icirc;ne ou une constante qui d&eacute;termine la r&egrave;gle d’enroulement ou de
remplissage de trac&eacute;s se croisant (les valeurs de constante sont d&eacute;finies dans la classe GraphicsPathWinding sous la
forme GraphicsPathWinding.EVEN_ODD ou GraphicsPathWinding.NON_ZERO). La r&egrave;gle d’enroulement est
importante lorsque des trac&eacute;s se croisent.
R&egrave;gle d’enroulement standard, la r&egrave;gle pair-impair est utilis&eacute;e par l’API de dessin h&eacute;rit&eacute;e. C’est aussi la r&egrave;gle par d&eacute;faut
de la m&eacute;thode Graphics.drawPath(). Lorsqu’elle est appliqu&eacute;e, des trac&eacute;s qui se croisent alternent entre des
remplissages ouverts et ferm&eacute;s. Si deux carr&eacute;s utilisant un m&ecirc;me remplissage se croisent, la zone d’intersection est
remplie. En r&egrave;gle g&eacute;n&eacute;rale, les zones adjacentes ne sont pas remplies ou leur remplissage n’est pas effac&eacute;.
La r&egrave;gle non null, en revanche, se fonde sur l’enroulement (direction du trac&eacute;) pour d&eacute;terminer si les zones d&eacute;finies
par des trac&eacute;s qui se croisent sont remplies. Lorsque des trac&eacute;s dont l’enroulement est diff&eacute;rent se croisent, la zone
d&eacute;finie n’est pas remplie, comme avec la r&egrave;gle pair-impair. Si l’enroulement est identique, la zone dont le remplissage
serait effac&eacute; est remplie :
A
B
R&egrave;gles d’enroulement associ&eacute;e aux zones d’intersection
A. R&egrave;gle d’enroulement pair-impair B. R&egrave;gle d’enroulement non nul
Nom des r&egrave;gles d’enroulement
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Les noms se r&eacute;f&egrave;rent &agrave; une r&egrave;gle beaucoup plus sp&eacute;cifique qui d&eacute;finit comment ces remplissages sont g&eacute;r&eacute;s. On affecte
aux chemins d’enroulement positifs une valeur +1 et aux n&eacute;gatifs une valeur -1. A partir d’un point au sein d’une
surface close d’une forme, tirez un trait qui s’&eacute;tend ind&eacute;finiment. Le nombre de fois que cette ligne traverse un chemin,
ainsi que les valeurs combin&eacute;es de ces chemins, est utilis&eacute; pour d&eacute;terminer le remplissage. Pour des enroulements pairimpair, c’est le nombre de fois que la ligne traverse un chemin qui est utilis&eacute;. Lorsque le d&eacute;compte est un nombre
impair, la zone est remplie. Lorsqu’il est impair, la zone ne l’est pas. Pour des enroulements non nuls, ce sont les valeurs
affect&eacute;es aux chemins qui sont utilis&eacute;es. Lorsque les valeurs combin&eacute;es du chemin ne sont pas nulles, la zone est
remplie. Lorsque la valeur combin&eacute;e est 0, la zone n’est pas remplie.
Derni&egrave;re mise &agrave; jour le 27/4/2013
246
247
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
A
B
R&egrave;gles de d&eacute;compte et remplissage d’enroulements
A. R&egrave;gle d’enroulement pair-impair B. R&egrave;gle d’enroulement non nul
Utilisation des r&egrave;gles d’enroulement
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Ces r&egrave;gles de remplissage sont complexes mais elles s’av&egrave;rent n&eacute;cessaires dans certaines situations. Par exemple,
prenons le dessin d’une forme &eacute;toil&eacute;e. Suivant la r&egrave;gle pair-impair standard, la forme n&eacute;cessiterait dix lignes
diff&eacute;rentes. Suivant la r&egrave;gle d’enroulement non nul, ces dix lignes sont r&eacute;duites &agrave; cinq. Voici le code ActionScript pour
une &eacute;toile &agrave; cinq lignes et une r&egrave;gle d’enroulement non nul :
graphics.beginFill(0x60A0FF);
graphics.drawPath( Vector.&lt;int&gt;([1,2,2,2,2]), Vector.&lt;Number&gt;([66,10, 23,127, 122,50, 10,49,
109,127]),
GraphicsPathWinding.NON_ZERO);
Et voici la forme de l’&eacute;toile :
A
B
C
Une forme d’&eacute;toile qui utilise diff&eacute;rentes r&egrave;gles d’enroulement
A. 10 lignes en pair-impair B. 5 lignes en pair-impair C. 5 lignes non nulles
Et, comme les images sont anim&eacute;es ou utilis&eacute;es comme textures sur des objets &agrave; trois dimensions et qu’elles se
recouvrent, les r&egrave;gles d’enroulement deviennent plus importantes.
Utilisation des classes de donn&eacute;es graphiques
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
L’API de dessin am&eacute;lior&eacute; inclut un ensemble de classes dans le package flash.display qui met en œuvre l’interface
IGraphicsData. Ces classes fonctionnent comme des objets de valeur (conteneurs de donn&eacute;es) qui repr&eacute;sentent les
m&eacute;thodes de l’API de dessin.
Les classes suivantes impl&eacute;mentent l’interface IGraphicsData :
• GraphicsBitmapFill
• GraphicsEndFill
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
• GraphicsGradientFill
• GraphicsPath
• GraphicsShaderFill
• GraphicsSolidFill
• GraphicsStroke
• GraphicsTrianglePath
Ces classes vous permettent de stocker un dessin complet dans un objet Vector de type IGraphicsData
(Vector.&lt;IGraphicsData&gt;). Vous pouvez ensuite r&eacute;utiliser les donn&eacute;es graphiques comme source de donn&eacute;es pour les
autres instances de la forme ou pour stocker les informations de dessin pour une utilisation ult&eacute;rieure.
Vous remarquerez qu’il existe plusieurs classes de remplissage (Fill) correspondant &agrave; chaque style de remplissage, mais
une seule classe de trait (Stroke). ActionScript propose une seule classe de trait IGraphicsData car elle d&eacute;finit son style
sur la base des classes de remplissage. Ainsi, chaque trait est en fait d&eacute;fini par une combinaison de la classe stroke et
d’une classe fill. Pour le reste, l’API de ces classes de donn&eacute;es graphiques est identique aux m&eacute;thodes qu’elles
repr&eacute;sentent dans la classe flash.display.Graphics :
M&eacute;thode graphique
Classe correspondante
beginBitmapFill()
GraphicsBitmapFill
beginFill()
GraphicsSolidFill
beginGradientFill()
GraphicsGradientFill
beginShaderFill()
GraphicsShaderFill
lineBitmapStyle()
GraphicsStroke + GraphicsBitmapFill
lineGradientStyle()
GraphicsStroke + GraphicsGradientFill
lineShaderStyle()
GraphicsStroke + GraphicsShaderFill
lineStyle()
GraphicsStroke + GraphicsSolidFill
moveTo()
GraphicsPath
lineTo()
curveTo()
drawPath()
drawTriangles()
GraphicsTrianglePath
En outre, la classe GraphicsPath poss&egrave;de ses propres m&eacute;thodes d’utilitaire (GraphicsPath.moveTo(),
GraphicsPath.lineTo(), GraphicsPath.curveTo(), GraphicsPath.wideLineTo() et
GraphicsPath.wideMoveTo()) pour simplifier la d&eacute;finition de ces commandes pour une occurrence de
GraphicsPath. Ces m&eacute;thodes facilitent la d&eacute;finition ou la mise &agrave; jour directe des commandes et des valeurs de donn&eacute;es.
R&eacute;alisation d’un dessin avec les donn&eacute;es graphiques vectorielles
Lorsque vous disposez d’une s&eacute;rie d’instances de IGraphicsData, utilisez la m&eacute;thode drawGraphicsData() de la classe
Graphics pour effectuer le rendu des graphiques. La m&eacute;thode drawGraphicsData() ex&eacute;cute un ensemble
d’instructions de dessin &agrave; partir d’un vecteur d’instances de IGraphicsData en s&eacute;quence :
Derni&egrave;re mise &agrave; jour le 27/4/2013
248
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
// stroke object
var stroke:GraphicsStroke = new GraphicsStroke(3);
stroke.joints = JointStyle.MITER;
stroke.fill = new GraphicsSolidFill(0x102020);// solid stroke
// fill object
var fill:GraphicsGradientFill = new GraphicsGradientFill();
fill.colors = [0x0000FF, 0xEEFFEE];
fill.matrix = new Matrix();
fill.matrix.createGradientBox(70, 70, Math.PI/2);
// path object
var path:GraphicsPath = new GraphicsPath(new Vector.&lt;int&gt;(), new Vector.&lt;Number&gt;());
path.commands.push(GraphicsPathCommand.MOVE_TO, GraphicsPathCommand.LINE_TO,
GraphicsPathCommand.LINE_TO);
path.data.push(125,0, 50,100, 175,0);
// combine objects for complete drawing
var drawing:Vector.&lt;IGraphicsData&gt; = new Vector.&lt;IGraphicsData&gt;();
drawing.push(stroke, fill, path);
// draw the drawing
graphics.drawGraphicsData(drawing);
En modifiant une valeur du trac&eacute; utilis&eacute; par le dessin de l’exemple, il est possible de retracer la forme plusieurs fois
pour obtenir une image plus complexe :
// draw the drawing multiple times
// change one value to modify each variation
graphics.drawGraphicsData(drawing);
path.data[2] += 200;
graphics.drawGraphicsData(drawing);
path.data[2] -= 150;
graphics.drawGraphicsData(drawing);
path.data[2] += 100;
graphics.drawGraphicsData(drawing);
path.data[2] -= 50;graphicsS.drawGraphicsData(drawing);
Bien que les objets IGraphicsData puissent d&eacute;finir des styles de remplissage et de trait, ceux-ci ne sont pas obligatoires.
Autrement dit, il est possible de d&eacute;finir des styles &agrave; l’aide des m&eacute;thodes de la classe Graphics ou d’utiliser des objets
IGraphicsData pour tracer un ensemble enregistr&eacute; de trac&eacute;s, et inversement.
Remarque : la m&eacute;thode Graphics.clear() permet d’effacer un dessin avant d’en commencer un nouveau, &agrave; moins que
vous ne compl&eacute;tiez le dessin d’origine, comme l’illustre l’exemple ci-dessus. Lorsque vous modifiez une partie d’un trac&eacute;
ou d’un ensemble d’objets IGraphicsData, retracez le dessin entier pour visualiser les changements.
Lorsque vous utilisez des classes de donn&eacute;es graphiques, le remplissage est rendu chaque fois que trois points au moins
sont trac&eacute;s car la forme est n&eacute;cessairement ferm&eacute;e &agrave; ce point. Bien que le remplissage ait un effet de fermeture, ce n’est
pas le cas du trait. Ce comportement est diff&eacute;rent de celui de commandes Graphics.lineTo() ou
Graphics.moveTo() utilis&eacute;es plusieurs fois.
Derni&egrave;re mise &agrave; jour le 27/4/2013
249
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de l’API de dessin
Lecture de donn&eacute;es graphiques vectorielles
Flash Player 11.6 et les versions ult&eacute;rieures, Adobe AIR 3.6 et les versions ult&eacute;rieures
Dans Flash Player 11.6, Adobe AIR 3.6 et versions ult&eacute;rieures, vous pouvez utiliser la m&eacute;thode readGraphicsData()
de la classe Graphics non seulement pour tracer le contenu vectoriel d’un objet d’affichage, mais aussi pour obtenir
une repr&eacute;sentation en donn&eacute;es du contenu graphique vectoriel de cet objet. Ceci peut &ecirc;tre utilis&eacute; pour cr&eacute;er un
instantan&eacute; d’un graphique afin notamment d’enregistrer, de copier ou de cr&eacute;er une feuille Sprite lors de l’ex&eacute;cution.
L’appel de la m&eacute;thode readGraphicsData() renvoie une occurrence de Vector contenant des objets IGraphicsData.
Il s’agit des m&ecirc;mes objets que ceux utilis&eacute;s pour tracer des graphiques vectoriels &agrave; l’aide de la m&eacute;thode
drawGraphicsData().
Plusieurs limitations s’appliquent &agrave; la lecture des graphiques vectoriels avec la m&eacute;thode readGraphicsData(). Pour
plus d’informations, voir l’entr&eacute;e readGraphicsData() dans le Guide de r&eacute;f&eacute;rence ActionScript.
A propos de l’utilisation de drawTriangles()
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Une autre m&eacute;thode avanc&eacute;e int&eacute;gr&eacute;e &agrave; Flash Player 10 et Adobe AIR 1.5, Graphics.drawTriangles(), s’apparente &agrave;
la m&eacute;thode Graphics.drawPath(). La m&eacute;thode Graphics.drawTriangles() utilise &eacute;galement un objet
Vector.&lt;Number&gt; pour sp&eacute;cifier les points permettant de dessiner un trac&eacute;.
La m&eacute;thode Graphics.drawTriangles() a n&eacute;anmoins pour but principal de faciliter la cr&eacute;ation d’effets
tridimensionnels par le biais d’ActionScript. Pour plus d’informations sur l’utilisation de
Graphics.drawTriangles() pour produire des effets tridimensionnels, voir &laquo; Cr&eacute;ation d’effets 3D &agrave; l’aide de
triangles &raquo; &agrave; la page 375.
Derni&egrave;re mise &agrave; jour le 27/4/2013
250
251
Chapitre 13 : Utilisation des images
bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Outre ses possibilit&eacute;s en mati&egrave;re de dessin vectoriel, ActionScript 3.0 permet &eacute;galement de cr&eacute;er des images bitmap ou
de manipuler les donn&eacute;es de pixels d’images bitmap externes charg&eacute;es dans un fichier SWF. Cette possibilit&eacute; de lire et
modifier des valeurs de pixel individuelles permet de cr&eacute;er des effets visuels comme ceux des filtres et d’utiliser les
fonctions int&eacute;gr&eacute;es de gestion du &laquo; bruit &raquo; pour cr&eacute;er des textures et des bruits al&eacute;atoires.
• Renaun Erickson: Rendering game assets in ActionScript using blitting techniques (disponible en anglais
uniquement)
• Bitmap programming: chapitre 26 du document Essential ActionScript 3, par Colin Moock (O’Reilly Media, 2007,
disponible en anglais uniquement)
• Mike Jones: Working with Sprites in Pushbutton Engine (disponible en anglais uniquement)
• Flash &amp; Math: Pixel Particles Made Simple (disponible en anglais uniquement)
• Flixel
Principes de base de l’utilisation des images bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Tout travail avec des images num&eacute;riques n&eacute;cessite de g&eacute;rer deux types de graphismes : les bitmaps et les graphismes
vectoriels. Les images bitmap, &eacute;galement appel&eacute;es graphismes en points, sont compos&eacute;es de petits carr&eacute;s (les pixels)
organis&eacute;s en une grille rectangulaire. De leur c&ocirc;t&eacute;, les graphismes vectoriels sont compos&eacute;s de formes g&eacute;om&eacute;triques
(lignes, courbes et polygones) g&eacute;n&eacute;r&eacute;es &agrave; l’aide de formules math&eacute;matiques.
Les images bitmap sont d&eacute;finies par la largeur et la hauteur de l’image, mesur&eacute;es en pixels, et par le nombre de bits
contenu dans chaque pixel (ce nombre de bits d&eacute;finit le nombre de couleurs que peut comporter l’image). Dans le cas
d’une image bitmap utilisant le mod&egrave;le colorim&eacute;trique RVB, les pixels sont compos&eacute;s de trois octets : rouge, vert et
bleu. Chaque octet contient une valeur comprise entre 0 et 255. C’est la combinaison de ces octets pour chaque pixel
qui produit une couleur, un peu comme le m&eacute;lange des couleurs de base par un peintre. Par exemple, un pixel
contenant les valeurs 255, 102 et 0 respectivement pour les octets d&eacute;volus au rouge, au vert et au bleu produira un
orange vif.
La qualit&eacute; d’une image bitmap est d&eacute;termin&eacute;e en combinant la r&eacute;solution en pixels de l’image avec sa profondeur de
couleur exprim&eacute;e en bits ou en octets. La r&eacute;solution d&eacute;finit le nombre de pixels contenus dans l’image. Plus le nombre
de pixels est important, plus la r&eacute;solution est &eacute;lev&eacute;e et plus l’image semble bien d&eacute;finie. La profondeur de couleurs
d&eacute;finit la quantit&eacute; d’informations colorim&eacute;triques contenues par chaque pixel. Par exemple, une image ayant une
profondeur de couleur de 16 bits par pixel ne peut pas repr&eacute;senter un nombre de nuances aussi &eacute;lev&eacute; qu’une image
ayant une profondeur de couleur de 48 bits. En cons&eacute;quence, l’image sur 48 bits aura plus de nuances que la version
sur 16 bits.
Dans la mesure o&ugrave; les images bitmap d&eacute;pendent de la r&eacute;solution, il est d&eacute;licat de modifier leur &eacute;chelle, ce qui se
remarque particuli&egrave;rement avec les images bitmap agrandies, qui perdent beaucoup de d&eacute;tails et de qualit&eacute;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Format des fichiers bitmap
Les images bitmap existent en divers formats de fichier. Ces formats utilisent diff&eacute;rents types d’algorithmes de
compression pour r&eacute;duire la taille des fichiers et optimiser la qualit&eacute; de l’image en fonction de sa destination. Les
moteurs d’ex&eacute;cution Adobe g&egrave;rent les formats d’image bitmap BMP, GIF, JPG, PNG et TIFF.
BMP
Le format BMP (pixellis&eacute;) est un format d’image par d&eacute;faut utilis&eacute; par le syst&egrave;me d’exploitation Microsoft Windows.
Il ne fait appel &agrave; aucune forme d’algorithme de compression ; il en r&eacute;sulte g&eacute;n&eacute;ralement des tailles de fichiers assez
importantes.
GIF
Le format GIF (Graphics Interchange Format) fut d&eacute;velopp&eacute; &agrave; l’origine par CompuServe en 1987, dans le but de
transmettre des images en 256 couleurs (cod&eacute;es sur 8 bits). Ce format, qui permet d’obtenir des fichiers de petite taille,
est tr&egrave;s utilis&eacute; pour les images sur le Web. Toutefois, en raison de son nombre limit&eacute; de couleurs, ce format n’est pas
adapt&eacute; aux photographies, qui n&eacute;cessitent en g&eacute;n&eacute;ral un nombre de nuances plus &eacute;lev&eacute;. Les images GIF autorisent la
transparence sur un bit, ce qui permet de rendre les couleurs invisibles (ou transparentes). C’est ainsi que sont produits
les fonds transparents des images de pages Web.
JPEG
D&eacute;velopp&eacute; par le Joint Photographic Experts Group (JPEG), le format d’image JPEG (souvent not&eacute; JPG) fait appel &agrave;
un algorithme de compression avec perte pour autoriser une profondeur de couleur de 24 bits avec une taille de fichier
tr&egrave;s r&eacute;duite. En raison de la compression avec perte, chaque fois que l’image est enregistr&eacute;e elle perd des donn&eacute;es, donc
de la qualit&eacute;, mais la taille de fichier r&eacute;sultante en est d’autant plus r&eacute;duite. Le format JPEG est id&eacute;al pour les
photographies, car il permet d’afficher des millions de couleurs diff&eacute;rentes. La possibilit&eacute; de contr&ocirc;ler le taux de
compression appliqu&eacute; &agrave; l’image permet de modifier la qualit&eacute; de l’image et la taille du fichier.
PNG
Le format PNG (Portable Network Graphics) a &eacute;t&eacute; cr&eacute;&eacute; comme autre possibilit&eacute; gratuite (open source) au format de
fichier GIF, qui est brevet&eacute;. Les fichiers PNG acceptent jusqu’&agrave; 64 bits de profondeur de couleur, ce qui permet
d’obtenir jusqu’&agrave; 16 millions de couleurs. Le format PNG &eacute;tant relativement r&eacute;cent, les versions anciennes de certains
navigateurs ne g&egrave;rent pas ces fichiers. Contrairement au JPG, le format PNG utilise une compression sans perte, ce qui
signifie qu’aucune donn&eacute;e de l’image n’est perdue lors de l’enregistrement. De plus, les fichiers PNG acceptent
&eacute;galement la transparence alpha, ce qui autorise jusqu’&agrave; 256 niveaux de transparence.
TIFF
Le format TIFF (ou Tagged Image File Format) &eacute;tait le format multiplate-forme de choix avant l’arriv&eacute;e de PNG. Le
format TIFF a un inconv&eacute;nient qui est la multiplicit&eacute; de ses vari&eacute;t&eacute;s : aucun lecteur n’est en mesure de traiter toutes les
versions disponibles. De surcro&icirc;t, les navigateurs Web ne prennent pas en charge ce format actuellement. TIFF peut
utiliser une compression avec ou sans pertes et il est en mesure de traiter des espaces de couleurs sp&eacute;cifiques au
p&eacute;riph&eacute;rique tels que CMJN (cyan-magenta-jaune-noir).
Fichiers bitmap transparents et opaques
Les images bitmap qui utilisent le format GIF ou PNG peuvent comporter pour chaque pixel un octet suppl&eacute;mentaire
pour le canal alpha. Cet octet de pixel suppl&eacute;mentaire repr&eacute;sente la valeur de transparence du pixel.
Les images GIF n’autorisent la transparence que sur la base d’un bit, ce qui ne permet de sp&eacute;cifier la transparence que
pour une seule couleur (dans une palette de 256 couleurs). Par contre, les images PNG acceptent jusqu’&agrave; 256 niveaux
de transparence. Cette caract&eacute;ristique est particuli&egrave;rement int&eacute;ressante pour &laquo; fondre &raquo; les images ou le texte avec
l’arri&egrave;re-plan.
Derni&egrave;re mise &agrave; jour le 27/4/2013
252
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
ActionScript 3.0 permet de g&eacute;rer cet octet suppl&eacute;mentaire de transparence &agrave; l’aide de la classe BitmapData. Comme le
mod&egrave;le de transparence PNG, ActionScript propose jusqu’&agrave; 256 niveaux de transparence.
Concepts importants et terminologie
La liste suivante contient des termes importants relatifs aux graphiques bitmap :
Alpha Niveau de transparence (ou, plus pr&eacute;cis&eacute;ment, d’opacit&eacute;) d’une couleur ou d’une image. La valeur alpha est
fr&eacute;quemment appel&eacute;e valeur du canal alpha.
Couleur ARGB Mod&egrave;le colorim&eacute;trique suivant lequel la couleur de chaque pixel est d&eacute;finie selon ses composants rouge,
vert et bleu, ainsi que par sa transparence sp&eacute;cifi&eacute;e comme valeur alpha.
Canal de couleur En g&eacute;n&eacute;ral, les couleurs sont repr&eacute;sent&eacute;es par le m&eacute;lange des couleurs primaires, rouge, vert et bleu
(pour les graphiques sur ordinateur). Chaque couleur primaire est consid&eacute;r&eacute;e comme un canal de couleur. C’est le
m&eacute;lange des proportions de chaque canal de couleur qui d&eacute;termine la couleur finale.
Codage des couleurs Parfois appel&eacute;e codage, cette caract&eacute;ristique d&eacute;termine la quantit&eacute; de m&eacute;moire vive d&eacute;volue &agrave;
chaque pixel, ce qui, indirectement, d&eacute;finit le nombre de couleurs qu’il est possible d’afficher dans l’image.
Pixel Unit&eacute; d’information de base d’une image bitmap (fondamentalement, un point color&eacute;).
R&eacute;solution Dimensions d’une image en pixels, qui d&eacute;termine le niveau de d&eacute;tails fins d’une image. La r&eacute;solution est
fr&eacute;quemment exprim&eacute;e en nombre de pixels pour la largeur et la hauteur.
Couleur RVB Mod&egrave;le colorim&eacute;trique suivant lequel la couleur de chaque pixel est d&eacute;finie selon ses composants rouge,
vert et bleu.
Classes Bitmap et BitmapData
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les principales classes ActionScript 3.0 d’utilisation des images bitmap sont la classe Bitmap, qui permet d’afficher les
images bitmap &agrave; l’&eacute;cran, et la classe BitmapData, qui permet d’acc&eacute;der et de manipuler les donn&eacute;es brutes d’une image
bitmap.
Voir aussi
flash.display.Bitmap
flash.display.BitmapData
Pr&eacute;sentation de la classe Bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Sous-classe de la classe DisplayObject, la classe Bitmap est la principale classe utilis&eacute;e en ActionScript 3.0 pour
l’affichage d’images bitmap. Ces images sont souvent charg&eacute;es par le biais de la classe flash.display.Loader ou cr&eacute;&eacute;es
dynamiquement &agrave; l’aide du constructeur Bitmap(). En cas de chargement d’une image provenant d’une source
externe, un objet Bitmap ne peut contenir que des images aux formats GIF, JPEG ou PNG. L’occurrence de l’objet
Bitmap peut &ecirc;tre consid&eacute;r&eacute;e comme enveloppe d’un objet BitmapData devant &ecirc;tre affich&eacute; sur la sc&egrave;ne. Une occurrence
de Bitmap &eacute;tant un objet d’affichage, toutes les caract&eacute;ristiques et fonctionnalit&eacute;s des objets d’affichage peuvent &ecirc;tre
utilis&eacute;es pour la manipuler. Pour plus d’informations sur l’utilisation des objets d’affichage, voir &laquo; Programmation de
l’affichage &raquo; &agrave; la page 156.
Derni&egrave;re mise &agrave; jour le 27/4/2013
253
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Accrochage et lissage des pixels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Outre les fonctionnalit&eacute;s communes &agrave; tous les objets d’affichage, la classe Bitmap dispose de quelques fonctionnalit&eacute;s
suppl&eacute;mentaires, propres aux images bitmap.
La propri&eacute;t&eacute; pixelSnapping de la classe Bitmap d&eacute;termine si un objet Bitmap accroche le pixel le plus proche. Cette
propri&eacute;t&eacute; accepte l’une des trois constantes d&eacute;finies dans la classe PixelSnapping : ALWAYS, AUTO et NEVER.
La syntaxe de l’accrochage aux pixels est la suivante :
myBitmap.pixelSnapping = PixelSnapping.ALWAYS;
Lorsque des images bitmap sont redimensionn&eacute;es, il est fr&eacute;quent qu’elles deviennent floues et distordues. Pour r&eacute;duire
cette distorsion, utilisez la propri&eacute;t&eacute; smoothing de la classe BitmapData. Lorsque cette propri&eacute;t&eacute; bool&eacute;enne a la valeur
true, elle adoucit les pixels par un effet d’anticr&egrave;nelage appliqu&eacute; aux images redimensionn&eacute;es. Celles-ci ont alors un
aspect plus clair, plus naturel.
Pr&eacute;sentation de la classe BitmapData
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe BitmapData, qui se trouve dans le package flash.display, peut &ecirc;tre compar&eacute;e &agrave; un clich&eacute; photographique des
pixels d’une image bitmap, que celle-ci soit charg&eacute;e ou cr&eacute;&eacute;e dynamiquement. Ce clich&eacute; est repr&eacute;sent&eacute; par une grille
de donn&eacute;es des pixels de l’objet. La classe BitmapData contient &eacute;galement une s&eacute;rie de m&eacute;thodes permettant de cr&eacute;er
et modifier des donn&eacute;es de pixels.
Pour instancier un objet BitmapData, utilisez le code suivant :
var myBitmap:BitmapData = new BitmapData(width:Number, height:Number, transparent:Boolean,
fillColor:uinit);
Les param&egrave;tres width et height d&eacute;terminent la taille de l’image bitmap. Dans AIR 3 et Flash Player 11 et les versions
ult&eacute;rieures, les limites de taille pour un objet BitmapData ont &eacute;t&eacute; supprim&eacute;es. La taille maximale d’une image bitmap
d&eacute;pend du syst&egrave;me d’exploitation.
Dans AIR 1.5 et Flash Player 10, la taille maximale d’un objet BitmapData est de 8 191 pixels en largeur ou en hauteur,
et le nombre total de pixels ne peut pas exc&eacute;der 16 777 215 pixels (ainsi, si la largeur d’un objet BitmapData est de
8 191 pixels, sa hauteur maximale doit &ecirc;tre de 2 048 pixels). Dans Flash Player 9 et les versions ant&eacute;rieures, ainsi que
dans AIR 1.1 et les versions ant&eacute;rieures, la limite est de 2 880 pixels de haut sur 2 880 pixels de large.
Le param&egrave;tre transparent indique si l’image bitmap comporte un canal alpha (true) ou non (false). Le param&egrave;tre
fillColor est une valeur colorim&eacute;trique sur 32 bits qui sp&eacute;cifie la couleur d’arri&egrave;re-plan, ainsi que la valeur de la
transparence (si cette derni&egrave;re est true). L’exemple suivant cr&eacute;e un objet BitmapData dont l’arri&egrave;re-plan orange est
transparent &agrave; 50 % :
var myBitmap:BitmapData = new BitmapData(150, 150, true, 0x80FF3300);
Pour afficher un objet BitmapData nouvellement cr&eacute;&eacute;, affectez-le &agrave; une occurrence de Bitmap. Pour ce faire, vous
pouvez soit transmettre l’objet BitmapData sous forme de param&egrave;tre du constructeur de l’objet Bitmap, ou l’affecter &agrave;
la propri&eacute;t&eacute; bitmapData d’une occurrence de Bitmap existante. Vous devez &eacute;galement affecter cette occurrence de
Bitmap &agrave; la liste d’affichage en appelant la m&eacute;thode addChild() ou addChildAt() du conteneur d’objet d’affichage
qui contiendra cette occurrence de Bitmap. Pour plus d’informations sur l’utilisation de la liste d’affichage, voir &laquo; Ajout
d’objets d’affichage &agrave; la liste d’affichage &raquo; &agrave; la page 165.
L’exemple suivant cr&eacute;e un objet BitmapData avec un remplissage rouge, et l’affiche dans une occurrence de Bitmap :
Derni&egrave;re mise &agrave; jour le 27/4/2013
254
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
var myBitmapDataObject:BitmapData = new BitmapData(150, 150, false, 0xFF0000);
var myImage:Bitmap = new Bitmap(myBitmapDataObject);
addChild(myImage);
Manipulation des pixels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe BitmapData contient des m&eacute;thodes qui permettent de modifier les valeurs des donn&eacute;es de pixels.
Manipulation individuelle de pixels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour modifier une image bitmap au niveau des pixels, il est d’abord n&eacute;cessaire d’obtenir les valeurs colorim&eacute;triques
des pixels de la zone &agrave; modifier. La m&eacute;thode getPixel() permet d’obtenir ces valeurs de pixels.
La m&eacute;thode getPixel() renvoie les valeurs RVB des coordonn&eacute;es (de pixels) x et y qui lui sont pass&eacute;es en param&egrave;tres.
Si l’un des pixels comporte des informations de transparence (canal alpha), il est n&eacute;cessaire d’utiliser la m&eacute;thode
getPixel32(). Cette m&eacute;thode r&eacute;cup&egrave;re &eacute;galement une valeur RVB, mais contrairement &agrave; ce qui se passe avec
getPixel(), la valeur renvoy&eacute;e par getPixel32() contient des donn&eacute;es suppl&eacute;mentaires qui repr&eacute;sentent la valeur
du canal alpha (transparence) du pixel s&eacute;lectionn&eacute;.
Pour simplement modifier la couleur ou la transparence d’un pixel contenu dans un bitmap, il est aussi possible
d’utiliser la m&eacute;thode setPixel() ou setPixel32(). Pour d&eacute;finir la couleur d’un pixel, il suffit de passer les
coordonn&eacute;es x et y et la valeur colorim&eacute;trique &agrave; l’une de ces m&eacute;thodes.
Dans l’exemple suivant, setPixel() est utilis&eacute;e pour tracer une croix sur un fond vert BitmapData. La m&eacute;thode
getPixel() permet ensuite de r&eacute;cup&eacute;rer la valeur colorim&eacute;trique du pixel ayant les coordonn&eacute;es 50, 50 et de suivre
la valeur renvoy&eacute;e.
import flash.display.Bitmap;
import flash.display.BitmapData;
var myBitmapData:BitmapData = new BitmapData(100, 100, false, 0x009900);
for (var i:uint = 0; i &lt; 100; i++)
{
var red:uint = 0xFF0000;
myBitmapData.setPixel(50, i, red);
myBitmapData.setPixel(i, 50, red);
}
var myBitmapImage:Bitmap = new Bitmap(myBitmapData);
addChild(myBitmapImage);
var pixelValue:uint = myBitmapData.getPixel(50, 50);
trace(pixelValue.toString(16));
Pour lire la valeur d’un groupe de pixels, et non pas d’un pixel isol&eacute;, utilisez la m&eacute;thode getPixels(). Cette m&eacute;thode
g&eacute;n&egrave;re un tableau d’octets &agrave; partir d’une zone rectangulaire de donn&eacute;es de pixels, et le passe en param&egrave;tre. Chaque
&eacute;l&eacute;ment du tableau d’octets (autrement dit, les valeurs des pixels) est un entier non sign&eacute; (valeurs non multipli&eacute;es sur
32 bits).
Derni&egrave;re mise &agrave; jour le 27/4/2013
255
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Inversement, pour modifier (ou d&eacute;finir) la valeur d’un groupe de pixels, utilisez la m&eacute;thode setPixels(). Cette
m&eacute;thode attend deux param&egrave;tres (rect et inputByteArray), qui sont combin&eacute;s pour produire une zone rectangulaire
(rect) de donn&eacute;es de pixels (inputByteArray).
Au fur et &agrave; mesure de la lecture (ou de l’&eacute;criture) des donn&eacute;es dans inputByteArray, la m&eacute;thode
ByteArray.readUnsignedInt() est appel&eacute;e pour chaque pixel du tableau. Si pour une raison quelconque
inputByteArray ne contient pas un rectangle complet de donn&eacute;es de pixels, la m&eacute;thode interrompt le traitement des
donn&eacute;es de l’image.
Il est important de comprendre que pour lire ou modifier des donn&eacute;es de pixels, le tableau d’octets attend les valeurs
suivantes sur 32 octets : alpha, rouge, vert, bleu (ARVB).
L’exemple suivant utilise les m&eacute;thodes getPixels() et setPixels() pour copier un groupe de pixels d’un objet
BitmapData &agrave; un autre :
import
import
import
import
flash.display.Bitmap;
flash.display.BitmapData;
flash.utils.ByteArray;
flash.geom.Rectangle;
var bitmapDataObject1:BitmapData = new BitmapData(100, 100, false, 0x006666FF);
var bitmapDataObject2:BitmapData = new BitmapData(100, 100, false, 0x00FF0000);
var rect:Rectangle = new Rectangle(0, 0, 100, 100);
var bytes:ByteArray = bitmapDataObject1.getPixels(rect);
bytes.position = 0;
bitmapDataObject2.setPixels(rect, bytes);
var bitmapImage1:Bitmap = new Bitmap(bitmapDataObject1);
addChild(bitmapImage1);
var bitmapImage2:Bitmap = new Bitmap(bitmapDataObject2);
addChild(bitmapImage2);
bitmapImage2.x = 110;
D&eacute;tection de collision au niveau des pixels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La m&eacute;thode BitmapData.hitTest() effectue une d&eacute;tection de collision au niveau des pixels entre les donn&eacute;es bitmap
et celles d’un autre objet ou d’un point.
La m&eacute;thode BitmapData.hitTest() accepte cinq param&egrave;tres :
•
firstPoint (Point) : ce param&egrave;tre r&eacute;f&eacute;rence la position du coin sup&eacute;rieur gauche du premier objet BitmapData
sur lequel le test de collision doit &ecirc;tre effectu&eacute;.
•
firstAlphaThreshold (uint) : ce param&egrave;tre sp&eacute;cifie la valeur la plus &eacute;lev&eacute;e du canal alpha consid&eacute;r&eacute; comme &eacute;tant
opaque pour ce test de collision.
•
secondObject (Object) : ce param&egrave;tre repr&eacute;sente la zone d’impact. L’objet secondObject peut &ecirc;tre un objet de
type Rectangle, Point, Bitmap ou BitmapData. Cet objet repr&eacute;sente la zone dans laquelle doit &ecirc;tre effectu&eacute;e la
d&eacute;tection de collision.
•
secondBitmapDataPoint (Point) : ce param&egrave;tre facultatif d&eacute;finit l’emplacement d’un pixel dans le deuxi&egrave;me objet
BitmapData. Utilisez uniquement ce param&egrave;tre lorsque la valeur de secondObject est un objet BitmapData. La
valeur par d&eacute;faut est null.
Derni&egrave;re mise &agrave; jour le 27/4/2013
256
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
•
secondAlphaThreshold (uint) : ce param&egrave;tre facultatif repr&eacute;sente la valeur la plus &eacute;lev&eacute;e de canal alpha
consid&eacute;r&eacute;e comme &eacute;tant opaque dans le deuxi&egrave;me objet BitmapData. La valeur par d&eacute;faut est 1. Utilisez
uniquement ce param&egrave;tre lorsque la valeur de secondObject est un objet BitmapData et que les deux objets
BitmapData sont transparents.
Lors d’une d&eacute;tection de collision sur des images opaques, n’oubliez pas qu’ActionScript traite l’image comme si c’&eacute;tait
un rectangle enti&egrave;rement opaque (ou un cadre de s&eacute;lection). Par ailleurs, lors de tests de collision au niveau des pixels
pour des images qui sont transparentes, les deux images doivent &ecirc;tre transparentes. De plus, ActionScript utilise les
param&egrave;tres de seuil alpha pour d&eacute;terminer le point auquel les pixels passent de transparents &agrave; opaques.
L’exemple suivant cr&eacute;e trois images bitmap et teste une &eacute;ventuelle collision de pixels en deux diff&eacute;rents points (l’un
renvoie false, l’autre true) :
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Point;
var bmd1:BitmapData = new BitmapData(100, 100, false, 0x000000FF);
var bmd2:BitmapData = new BitmapData(20, 20, false, 0x00FF3300);
var bm1:Bitmap = new Bitmap(bmd1);
this.addChild(bm1);
// Create a red square.
var redSquare1:Bitmap = new Bitmap(bmd2);
this.addChild(redSquare1);
redSquare1.x = 0;
// Create a second red square.
var redSquare2:Bitmap = new Bitmap(bmd2);
this.addChild(redSquare2);
redSquare2.x = 150;
redSquare2.y = 150;
// Define the
var pt1:Point
// Define the
var pt2:Point
// Define the
var pt3:Point
point
= new
point
= new
point
= new
at the top-left corner of the bitmap.
Point(0, 0);
at the center of redSquare1.
Point(20, 20);
at the center of redSquare2.
Point(160, 160);
trace(bmd1.hitTest(pt1, 0xFF, pt2)); // true
trace(bmd1.hitTest(pt1, 0xFF, pt3)); // false
Copie de donn&eacute;es bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Vous disposez de plusieurs m&eacute;thodes pour copier les donn&eacute;es bitmap d’une image &agrave; une autre : clone(),
copyPixels(), copyChannel(), draw() et drawWithQuality()(la m&eacute;thode drawWithQuality est disponible dans
Flash Player 11.3 et les versions ult&eacute;rieures et dans AIR 3.3 et les versions ult&eacute;rieures).
Derni&egrave;re mise &agrave; jour le 27/4/2013
257
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Comme son nom l’indique, la m&eacute;thode clone() permet de cloner, ou &eacute;chantillonner, des donn&eacute;es bitmap d’un objet
BitmapData &agrave; un autre. Cette m&eacute;thode renvoie un nouvel objet BitmapData qui est un clone exact de l’occurrence
originale.
L’exemple suivant clone une copie d’un carr&eacute; orange (parent) et place le clone &agrave; c&ocirc;t&eacute; du carr&eacute; parent original :
import flash.display.Bitmap;
import flash.display.BitmapData;
var myParentSquareBitmap:BitmapData = new BitmapData(100, 100, false, 0x00ff3300);
var myClonedChild:BitmapData = myParentSquareBitmap.clone();
var myParentSquareContainer:Bitmap = new Bitmap(myParentSquareBitmap);
this.addChild(myParentSquareContainer);
var myClonedChildContainer:Bitmap = new Bitmap(myClonedChild);
this.addChild(myClonedChildContainer);
myClonedChildContainer.x = 110;
La m&eacute;thode copyPixels() permet de copier rapidement et ais&eacute;ment des pixels d’un objet BitmapData dans un autre.
Cette m&eacute;thode prend un &laquo; clich&eacute; &raquo; rectangulaire (d&eacute;fini par le param&egrave;tre sourceRect) de l’image source et le copie
dans une autre zone rectangulaire de taille &eacute;gale. L’emplacement du rectangle ainsi &laquo; coll&eacute; &raquo; est d&eacute;fini par le param&egrave;tre
destPoint.
La m&eacute;thode copyChannel() analyse une valeur de canal de couleur pr&eacute;d&eacute;fini (alpha, rouge, vert ou bleu) dans un objet
source BitmapData et la copie dans un canal donn&eacute; de l’objet BitmapData de destination. Cette m&eacute;thode n’affecte pas
les autres canaux de l’objet BitmapData de destination.
Les m&eacute;thodes draw() et drawWithQuality() dessinent ou affichent le contenu graphique d’un objet d’affichage
source (Sprite, Clip, etc.) dans un nouveau bitmap. Les param&egrave;tres matrix, colorTransform, blendMode et
clipRect permettent de modifier l’aspect du nouveau bitmap. Cette m&eacute;thode utilise le programme de rendu vectoriel
de Flash Player et AIR pour g&eacute;n&eacute;rer les donn&eacute;es.
Pour appeler la m&eacute;thode draw() ou drawWithQuality(), vous devez lui transmettre l’objet source (Sprite, Clip ou
tout autre objet d’affichage) comme premier param&egrave;tre, comme ci-dessous :
myBitmap.draw(movieClip);
Si des transformations (couleur, matrice, etc.) ont &eacute;t&eacute; appliqu&eacute;es &agrave; l’objet source apr&egrave;s son chargement, ces
transformations ne sont pas copi&eacute;es dans le nouvel objet. Pour copier les transformations dans le nouveau bitmap,
vous devez copier la valeur de la propri&eacute;t&eacute; transform de l’objet original dans la propri&eacute;t&eacute; transform de l’objet Bitmap
qui utilise le nouvel objet BitmapData.
Compression des donn&eacute;es d’une image bitmap
Flash Player 11.3 et les versions ult&eacute;rieures, AIR 3.3 et les versions ult&eacute;rieures
La m&eacute;thode flash.display.BitmapData.encode() permet de compresser de fa&ccedil;on native les donn&eacute;es d’une image
bitmap dans l’un des formats de compression d’image suivants :
• PNG : utilise la compression PNG, en ayant &eacute;ventuellement recours &agrave; une compression rapide pour augmente la
vitesse de compression selon la taille du fichier. Pour utiliser la compression PNG, transmettez un nouvel objet
flash.display.PNGEncoderOptions comme second param&egrave;tre de la m&eacute;thode BitmapData.encode().
Derni&egrave;re mise &agrave; jour le 27/4/2013
258
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
• JPEG : utilise la compression JPEG, en sp&eacute;cifiant &eacute;ventuellement la qualit&eacute; de l’image. Pour utiliser la compression
JPEG, transmettez un nouvel objet flash.display.JPEGEncoderOptions comme second param&egrave;tre de la
m&eacute;thode BitmapData.encode().
• JPEGXR : utilise la compression JPEG Extended Range (XR), en sp&eacute;cifiant &eacute;ventuellement les param&egrave;tres Canal de
couleur, Avec perte et Entropie. Pour utiliser la compression JPEGXR, transmettez un nouvel objet
flash.display.JPEGXREncoderOptions comme second param&egrave;tre de la m&eacute;thode BitmapData.encode().
Vous pouvez utiliser cette fonction pour le traitement des images dans le cadre d’un flux de chargement ou de
t&eacute;l&eacute;chargement sur le serveur.
L’exemple de fragment de code suivant compresse l’objet BitmapData avec JPEGEncoderOptions :
// Compress a BitmapData object as a JPEG file.
var bitmapData:BitmapData = new BitmapData(640,480,false,0x00FF00);
var byteArray:ByteArray = new ByteArray();
bitmapData.encode(new Rectangle(0,0,640,480), new flash.display.JPEGEncoderOptions(),
byteArray);
Cr&eacute;ation de textures avec les fonctions de bruit al&eacute;atoire
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour modifier l’aspect d’un bitmap, vous pouvez lui appliquer un effet de bruit &agrave; l’aide de la m&eacute;thode noise() ou de
la m&eacute;thode perlinNoise(). La &laquo; neige &raquo; qui appara&icirc;t sur l’&eacute;cran d’un t&eacute;l&eacute;viseur mal r&eacute;gl&eacute; est du bruit, ou du souffle.
Pour appliquer un effet de bruit &agrave; un bitmap, utilisez la m&eacute;thode noise(). Cette m&eacute;thode applique une valeur
colorim&eacute;trique al&eacute;atoire aux pixels de la zone sp&eacute;cifi&eacute;e d’une image bitmap.
Cette m&eacute;thode accepte cinq param&egrave;tres :
•
randomSeed (int) : valeur al&eacute;atoire de d&eacute;part qui d&eacute;terminera le motif. En d&eacute;pit du nom de ce param&egrave;tre, une m&ecirc;me
valeur pour ce nombre produira toujours le m&ecirc;me r&eacute;sultat. Pour obtenir un r&eacute;sultat v&eacute;ritablement al&eacute;atoire, utilisez
la m&eacute;thode Math.random() pour transmettre un nombre al&eacute;atoire pour ce param&egrave;tre.
•
low (uint) : ce param&egrave;tre repr&eacute;sente la valeur la plus faible &agrave; g&eacute;n&eacute;rer pour chaque pixel (de 0 &agrave; 255). Sa valeur par
d&eacute;faut est 0. Les valeurs les plus basses produisent un motif de bruit sombre, les valeurs les plus &eacute;lev&eacute;es produisent
un motif de plus en plus clair.
•
high (uint) : ce param&egrave;tre repr&eacute;sente la valeur la plus &eacute;lev&eacute;e &agrave; g&eacute;n&eacute;rer pour chaque pixel (de 0 &agrave; 255). La valeur par
d&eacute;faut est 255. Les valeurs les plus basses produisent un motif de bruit sombre, les valeurs les plus &eacute;lev&eacute;es
produisent un motif de plus en plus clair.
•
channelOptions (uint) : ce param&egrave;tre indique le canal de couleur de l’objet bitmap auquel le motif de bruit sera
appliqu&eacute;. Ce nombre peut &ecirc;tre une combinaison quelconque des quatre valeurs des canaux de couleur (ARVB). La
valeur par d&eacute;faut est 7.
•
grayScale (Boolean) : lorsque ce param&egrave;tre est activ&eacute; (true), la valeur de randomSeed est appliqu&eacute;e aux pixels du
bitmap, ce qui donne concr&egrave;tement un effet de d&eacute;lav&eacute; sur toutes les couleurs de l’image. Le canal alpha n’est pas
affect&eacute; par ce param&egrave;tre. La valeur par d&eacute;faut est false.
L’exemple suivant cr&eacute;e une image bitmap et lui applique un motif de bruit bleu :
Derni&egrave;re mise &agrave; jour le 27/4/2013
259
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
package
{
import
import
import
import
flash.display.Sprite;
flash.display.Bitmap;
flash.display.BitmapData;
flash.display.BitmapDataChannel;
public class BitmapNoise1 extends Sprite
{
public function BitmapNoise1()
{
var myBitmap:BitmapData = new BitmapData(250, 250,false, 0xff000000);
myBitmap.noise(500, 0, 255, BitmapDataChannel.BLUE,false);
var image:Bitmap = new Bitmap(myBitmap);
addChild(image);
}
}
}
Si vous souhaitez cr&eacute;er une texture d’aspect plus organique, utilisez la m&eacute;thode perlinNoise(). La m&eacute;thode
perlinNoise() produit des textures organiques plus r&eacute;alistes, qui sont id&eacute;ales pour des effets de fum&eacute;e, de nuage,
d’eau, de flamme ou m&ecirc;me d’explosion.
Comme la m&eacute;thode perlinNoise() fait appel &agrave; un algorithme, elle n&eacute;cessite moins de m&eacute;moire vive que les textures
&agrave; base de bitmaps. Elle peut malgr&eacute; tout consommer beaucoup de ressources processeur, ce qui risque de ralentir le
contenu et de provoquer des actualisations d’&eacute;cran plus lentes que la cadence nominale, en particulier sur les
ordinateurs plus anciens. En effet, les algorithmes de cette m&eacute;thode effectuent des calculs en virgule flottante.
Cette m&eacute;thode accepte neuf param&egrave;tres (les six premiers sont obligatoires) :
•
baseX (Number) : d&eacute;termine la valeur x (taille) des motifs cr&eacute;&eacute;s.
•
baseY (Number) : d&eacute;termine la valeur y (taille) des motifs cr&eacute;&eacute;s.
•
numOctaves: (uint) : nombre d’octaves ou fonctions de bruit individuelles &agrave; combiner pour cr&eacute;er ce bruit. Les
nombres d’octaves &eacute;lev&eacute;s offrent davantage de d&eacute;tails mais n&eacute;cessitent &eacute;galement un temps de traitement plus
important.
•
randomSeed (int) : la valeur al&eacute;atoire de d&eacute;part fonctionne exactement comme dans la fonction noise(). Pour
obtenir un r&eacute;sultat v&eacute;ritablement al&eacute;atoire, utilisez la m&eacute;thode Math.random() pour transmettre un nombre
al&eacute;atoire pour ce param&egrave;tre.
•
stitch (Boolean) : si la valeur est true, cette m&eacute;thode tente de lisser les bords de transition de l’image pour cr&eacute;er
des textures sans bords d&eacute;finis, en vue d’une utilisation en mosa&iuml;que.
•
fractalNoise (Boolean) : ce param&egrave;tre concerne les bords des d&eacute;grad&eacute;s g&eacute;n&eacute;r&eacute;s par cette m&eacute;thode. S’il a la valeur
true, la m&eacute;thode g&eacute;n&egrave;re un bruit fractal qui adoucit le pourtour. S’il a la valeur false, la m&eacute;thode g&eacute;n&egrave;re des
turbulences. Les d&eacute;grad&eacute;s d’une image cr&eacute;&eacute;e avec des turbulences pr&eacute;sentent des discontinuit&eacute;s visibles qui
permettent de mieux restituer certains effets visuels comme les flammes ou les vagues.
•
channelOptions (uint) : le param&egrave;tre channelOptions fonctionne exactement comme dans la m&eacute;thode noise().
Il indique le canal de couleur de l’objet bitmap auquel le motif de bruit sera appliqu&eacute;. Ce nombre peut &ecirc;tre une
combinaison quelconque des quatre valeurs des canaux de couleur (ARVB). La valeur par d&eacute;faut est 7.
•
grayScale (Boolean) : le param&egrave;tre grayScale fonctionne exactement comme dans la m&eacute;thode noise(). Si ce
param&egrave;tre est activ&eacute; (true), la valeur de randomSeed est appliqu&eacute;e aux pixels du bitmap, ce qui donne
concr&egrave;tement un effet de d&eacute;lav&eacute; sur toutes les couleurs de l’image. La valeur par d&eacute;faut est false.
Derni&egrave;re mise &agrave; jour le 27/4/2013
260
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
•
offsets: (Array) : un tableau de points correspondant aux d&eacute;calages x et y pour chaque octave. En modifiant les
valeurs de d&eacute;calage, vous pouvez faire d&eacute;filer en continu les calques d’une image. Chaque point du tableau de
d&eacute;calage affecte une fonction de bruit pour une octave sp&eacute;cifique. La valeur par d&eacute;faut est null.
L’exemple suivant cr&eacute;e un objet BitmapData de 150 x 150 pixels qui appelle la m&eacute;thode perlinNoise() pour g&eacute;n&eacute;rer
un effet de nuage vert et bleu :
package
{
import
import
import
import
flash.display.Sprite;
flash.display.Bitmap;
flash.display.BitmapData;
flash.display.BitmapDataChannel;
public class BitmapNoise2 extends Sprite
{
public function BitmapNoise2()
{
var myBitmapDataObject:BitmapData =
new BitmapData(150, 150, false, 0x00FF0000);
var seed:Number = Math.floor(Math.random() * 100);
var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE
myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null);
var myBitmap:Bitmap = new Bitmap(myBitmapDataObject);
addChild(myBitmap);
}
}
}
D&eacute;filement du contenu d’images bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Supposons que vous avez cr&eacute;&eacute; une application cartographique. Chaque fois que l’utilisateur d&eacute;place la carte, vous devez
actualiser l’affichage (m&ecirc;me si le plan n’a &eacute;t&eacute; d&eacute;plac&eacute; que de quelques pixels).
Pour obtenir cette fonctionnalit&eacute;, il est possible de r&eacute;afficher une nouvelle image contenant le plan actualis&eacute; &agrave; chaque
d&eacute;placement. Il est &eacute;galement possible de cr&eacute;er une grande image globale et d’utiliser la m&eacute;thode scroll().
La m&eacute;thode scroll() copie une image bitmap affich&eacute;e et la colle &agrave; un nouvel emplacement, sp&eacute;cifi&eacute; par les param&egrave;tres
(x, y). S’il se trouve qu’une partie de l’image est situ&eacute;e hors &eacute;cran, l’effet obtenu est celui d’un d&eacute;filement de l’image. Si
cette fonction est combin&eacute;e avec un timer (ou un &eacute;v&eacute;nement enterFrame), l’image semble anim&eacute;e.
L’exemple suivant reprend l’exemple pr&eacute;c&eacute;dent et g&eacute;n&egrave;re une image bitmap de grande taille (dont les trois-quarts sont
restitu&eacute;s hors sc&egrave;ne). La m&eacute;thode scroll() est alors appliqu&eacute;e. Gr&acirc;ce &agrave; un &eacute;couteur pour l’&eacute;v&eacute;nement enterFrame,
l’image est d&eacute;cal&eacute;e d’un pixel en diagonale vers le bas. Cette m&eacute;thode est appel&eacute;e pour chaque nouvelle image. Les
parties de l’image non affich&eacute;es initialement apparaissent alors peu &agrave; peu sur la sc&egrave;ne gr&acirc;ce &agrave; ce d&eacute;filement.
Derni&egrave;re mise &agrave; jour le 27/4/2013
261
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
import flash.display.Bitmap;
import flash.display.BitmapData;
var myBitmapDataObject:BitmapData = new BitmapData(1000, 1000, false, 0x00FF0000);
var seed:Number = Math.floor(Math.random() * 100);
var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE;
myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null);
var myBitmap:Bitmap = new Bitmap(myBitmapDataObject);
myBitmap.x = -750;
myBitmap.y = -750;
addChild(myBitmap);
addEventListener(Event.ENTER_FRAME, scrollBitmap);
function scrollBitmap(event:Event):void
{
myBitmapDataObject.scroll(1, 1);
}
Utilisation du mipmapping
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les mipmaps sont des images bitmap qui sont regroup&eacute;es et associ&eacute;es &agrave; une texture dans le but d’am&eacute;liorer la qualit&eacute;
et les performances d’affichage &agrave; l’ex&eacute;cution. Chaque image bitmap dans le mipmap est une version de l’image bitmap
principale, mais &agrave; un niveau de d&eacute;tails r&eacute;duit.
Par exemple, vous pouvez disposer d’un mipmap qui inclut une image principale &agrave; une qualit&eacute; optimale de 64 &times; 64
pixels. Les images de qualit&eacute; inf&eacute;rieure dans le mipmap seront de 32 &times; 32, 16 &times; 16, 8 &times; 8, 4 &times; 4, 2 &times; 2 et de 1 &times; 1 pixels.
La diffusion en continu de texture fait r&eacute;f&eacute;rence &agrave; la capacit&eacute; de charger tout d’abord les images bitmap de qualit&eacute;
inf&eacute;rieure, puis d’afficher progressivement les images bitmap de qualit&eacute; sup&eacute;rieure au fur et &agrave; mesure de leur
chargement. Etant donn&eacute; que les bitmaps de qualit&eacute; inf&eacute;rieure sont de petites images, elles se chargent plus rapidement
que l’image principale. Par cons&eacute;quent, les utilisateurs de l’application peuvent afficher l’image dans une application
avant le chargement de l’image bitmap principale de qualit&eacute; sup&eacute;rieure.
Flash Player 9.115.0 (et les versions ult&eacute;rieures) et AIR impl&eacute;mentent cette technique (dite de mip-mapping), en cr&eacute;ant
des versions optimis&eacute;es &agrave; diverses &eacute;chelles de chaque bitmap (en partant de 50 %).
Flash Player 11.3 et AIR 3.3 prennent en charge la diffusion en continu de textures via le param&egrave;tre streamingLevels
des m&eacute;thodes Context3D.createCubeTexture() et Context3D.createTexture().
La compression de texture permet d'enregistrer des images de texture au format compress&eacute; directement sur le GPU en
vue d'&eacute;conomiser la m&eacute;moire GPU et la bande passante. En r&egrave;gle g&eacute;n&eacute;rale, les textures sont compress&eacute;es hors ligne et
t&eacute;l&eacute;charg&eacute;es sur le GPU au format compress&eacute;. N&eacute;anmoins, Flash Player 11.4 et AIR 3.4 prennent en charge la
compression de texture &agrave; l'ex&eacute;cution, utile dans certaines situations, notamment lors du rendu des textures
dynamiques d'une illustration vectorielle. Pour utiliser la compression de texture &agrave; l'ex&eacute;cution, proc&eacute;dez comme suit :
• Cr&eacute;ez l'objet de texture en appelant la m&eacute;thode Context3D.createTexture(), et en transmettant
flash.display3D.Context3DTextureFormat.COMPRESSED ou
flash.display3D.Context3DTextureFormat.COMPRESSED_ALPHA dans le troisi&egrave;me param&egrave;tre.
Derni&egrave;re mise &agrave; jour le 27/4/2013
262
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
• A l'aide de l'occurrence flash.display3D.textures.Texture renvoy&eacute;e par createTexture(), appelez la
m&eacute;thode flash.display3D.textures.Texture.uploadFromBitmapData() ou
flash.display3D.textures.Texture.uploadFromByteArray(). Ces m&eacute;thodes permettent de t&eacute;l&eacute;charger et
de compresser simultan&eacute;ment la texture.
Les mipmaps sont cr&eacute;&eacute;es pour les types de bitmap suivants :
• Une image bitmap (fichiers JPEG, GIF ou PNG) affich&eacute;e par le biais de la classe Loader d’ActionScript 3.0.
• Une image bitmap dans la biblioth&egrave;que d’un document Flash Professional.
• Un objet BitmapData.
• Une image bitmap affich&eacute;e &agrave; l’aide de la fonction loadMovie() d’ActionScript 2.0.
Les mipmaps ne sont pas appliqu&eacute;s aux objets filtr&eacute;s ni aux clips dont les bitmaps sont en cache. En revanche, ils sont
appliqu&eacute;s si un objet d’affichage filtr&eacute; contient des transformations de bitmap, m&ecirc;me si le bitmap se trouve dans un
contenu masqu&eacute;.
Le mipmapping est ex&eacute;cut&eacute; automatiquement, mais les quelques conseils suivants vous permettront d’&ecirc;tre certain que
vos images b&eacute;n&eacute;ficient de cette optimisation :
• Pour la lecture vid&eacute;o, d&eacute;finissez la propri&eacute;t&eacute; smoothing sur true pour l’objet Video (voir la classe Video).
• Pour les bitmaps, il n’est pas n&eacute;cessaire de d&eacute;finir la propri&eacute;t&eacute; smoothing sur true, mais l’activation de cette
propri&eacute;t&eacute; assure une am&eacute;lioration visible de la qualit&eacute;.
• Utilisez des tailles de bitmap divisibles par 4 ou 8 pour les images bidimensionnelles (affichage 640 x 128, qui peut
&ecirc;tre r&eacute;duit comme suit : 320 x 64 &gt; 160 x 32 &gt; 80 x 16 &gt; 40 x 8 &gt; 20 x 4 &gt; 10 x 2 &gt; 5 x 1).
Pour les textures tridimensionnelles, utilisez des mipmaps dans lesquels la r&eacute;solution de chaque image est une
puissance de 2 (2^n). Par exemple, la r&eacute;solution de l’image principale est de 1 024 x 1 024 pixels. Les images de
qualit&eacute; inf&eacute;rieure dans le mipmap seront &agrave; 512 x 512, 256 x 256, 128 x 128 jusqu’&agrave; 1 x 1 pixels pour un total de 11
images dans le mipmap.
Notez que le mip-mapping ne g&egrave;re pas un contenu de bitmap dont la largeur ou la hauteur est impaire.
Exemple d’objet Bitmap : lune en rotation anim&eacute;e
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple de lune en rotation anim&eacute;e illustre les techniques d’utilisation des objets Bitmap et des donn&eacute;es d’image
bitmap (objets BitmapData). L’exemple cr&eacute;e une animation d’une lune sph&eacute;rique en rotation et utilise comme donn&eacute;es
d’image brutes une image plane de la surface de la lune. Les techniques suivantes sont illustr&eacute;es :
• Chargement d’une image externe et acc&egrave;s aux donn&eacute;es d’image brutes correspondantes
• Cr&eacute;ation d’une animation par copie r&eacute;p&eacute;t&eacute;e des pixels de diff&eacute;rentes parties d’une image source
• Cr&eacute;ation d’une image bitmap par d&eacute;finition de la valeur des pixels
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application de la lune en rotation anim&eacute;e
r&eacute;sident dans le dossier Samples/SpinningMoon. L’application se compose des fichiers suivants :
Derni&egrave;re mise &agrave; jour le 27/4/2013
263
264
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Fichier
Description
SpinningMoon.mxml
Le fichier d’application principal dans Flex (MXML) ou Flash (FLA).
ou
SpinningMoon.fla
com/example/programmingas3/moon/MoonSphere.as
Classe ex&eacute;cutant le chargement, l’affichage et l’animation de la lune.
moonMap.png
Fichier image contenant une photographie de la surface de la lune,
charg&eacute; et utilis&eacute; pour cr&eacute;er la lune en rotation anim&eacute;e.
Chargement d’une image externe comme donn&eacute;es bitmap
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La premi&egrave;re t&acirc;che &agrave; ex&eacute;cuter dans cet exemple consiste &agrave; charger une image externe, une photographie de la surface
de la lune. Le chargement est g&eacute;r&eacute; par deux m&eacute;thodes de la classe MoonSphere : le constructeur MoonSphere(), qui
lance le processus de chargement, et la m&eacute;thode imageLoadComplete(), qui est appel&eacute;e au terme du chargement de
l’image externe.
Le chargement d’une image externe est similaire &agrave; celui d’un fichier SWF externe : il est r&eacute;alis&eacute; par une occurrence de
la classe flash.display.Loader. Le code ci-apr&egrave;s de la m&eacute;thode MoonSphere() commence &agrave; charger l’image :
var imageLoader:Loader = new Loader();
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoadComplete);
imageLoader.load(new URLRequest(&quot;moonMap.png&quot;));
La premi&egrave;re ligne d&eacute;clare l’occurrence de Loader appel&eacute;e imageLoader. La troisi&egrave;me ligne commence le processus de
chargement &agrave; proprement parler en appelant la m&eacute;thode load() de l’objet Loader. Cette m&eacute;thode transmet une
occurrence URLRequest repr&eacute;sentant l’URL de l’image &agrave; charger. La deuxi&egrave;me ligne d&eacute;finit l’&eacute;couteur d’&eacute;v&eacute;nement
qui se d&eacute;clenchera &agrave; l’issue du chargement de l’image. Observez que la m&eacute;thode addEventListener() n’est pas
appel&eacute;e sur l’occurrence de Loader elle-m&ecirc;me, mais sur la propri&eacute;t&eacute; contentLoaderInfo de l’objet Loader.
L’occurrence de Loader n’envoie pas d’&eacute;v&eacute;nements en rapport avec le contenu charg&eacute;. En revanche, sa propri&eacute;t&eacute;
contentLoaderInfo contient une r&eacute;f&eacute;rence &agrave; l’objet LoaderInfo qui est associ&eacute; au contenu charg&eacute; dans l’objet Loader
(en l’occurrence, l’image externe). L’objet LoaderInfo g&eacute;n&egrave;re des &eacute;v&eacute;nements en rapport avec le d&eacute;roulement et la fin
du chargement du contenu externe, notamment l’&eacute;v&eacute;nement complete (Event.COMPLETE) qui d&eacute;clenche un appel &agrave;
la m&eacute;thode imageLoadComplete() au terme du chargement de l’image.
S’il est essentiel de lancer le chargement de l’image externe, il est tout aussi important de savoir comment proc&eacute;der au
terme de cette op&eacute;ration. Comme l’illustre le code ci-dessus, la fonction imageLoadComplete() est appel&eacute;e une fois
l’image charg&eacute;e. Cette fonction ex&eacute;cute diverses op&eacute;rations sur les donn&eacute;es charg&eacute;es, comme indiqu&eacute; ult&eacute;rieurement.
Cependant, pour utiliser les donn&eacute;es d’image, elle doit pouvoir y acc&eacute;der. Une image externe charg&eacute;e par le biais d’un
objet Loader devient une image Bitmap jointe en tant qu’objet d’affichage enfant de l’objet Loader. Dans ce cas, la
m&eacute;thode &eacute;couteur d’&eacute;v&eacute;nement a acc&egrave;s &agrave; l’occurrence de Loader dans l’objet &eacute;v&eacute;nement transmis en tant que
param&egrave;tre &agrave; la m&eacute;thode. Les premi&egrave;res lignes de la m&eacute;thode imageLoadComplete() sont les suivantes :
private function imageLoadComplete(event:Event):void
{
textureMap = event.target.content.bitmapData;
...
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Notez que le param&egrave;tre de l’objet &eacute;v&eacute;nement s’appelle event et que c’est une occurrence de la classe Event. Chaque
occurrence de la classe Event poss&egrave;de une propri&eacute;t&eacute; target, qui fait r&eacute;f&eacute;rence &agrave; l’objet d&eacute;clenchant l’&eacute;v&eacute;nement (en
l’occurrence, l’occurrence de LoaderInfo sur laquelle la m&eacute;thode addEventListener() a &eacute;t&eacute; appel&eacute;e, comme indiqu&eacute;
plus haut). De m&ecirc;me, l’objet LoaderInfo poss&egrave;de une propri&eacute;t&eacute; content qui, &agrave; l’issue du chargement, contient une
occurrence de Bitmap comportant l’image bitmap charg&eacute;e. Pour afficher l’image directement &agrave; l’&eacute;cran, vous pouvez
joindre cette occurrence de Bitmap (event.target.content) &agrave; un conteneur d’objet d’affichage (vous pouvez aussi
joindre l’objet Loader &agrave; un conteneur d’objet d’affichage). Toutefois, dans cet exemple, le contenu charg&eacute; n’est pas
affich&eacute; &agrave; l’&eacute;cran, il est utilis&eacute; en tant que donn&eacute;es d’image brutes. Par cons&eacute;quent, la premi&egrave;re ligne de la m&eacute;thode
imageLoadComplete() lit la propri&eacute;t&eacute; bitmapData de l’occurrence de Bitmap charg&eacute;e
(event.target.content.bitmapData) et la stocke dans la variable d’occurrence de textureMap, qui est utilis&eacute;e en
tant que source des donn&eacute;es d’image pour cr&eacute;er l’animation de la lune en rotation. Ce processus est d&eacute;crit ci-apr&egrave;s.
Cr&eacute;ation d’une animation par copie de pixels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Une animation, dans sa d&eacute;finition la plus simple, est l’illusion d’un mouvement ou d’un changement, cr&eacute;&eacute;e par la
modification graduelle d’une image. Cet exemple a pour but de cr&eacute;er l’illusion d’une lune sph&eacute;rique tournant sur son
axe vertical. Cependant, pour les besoins de l’animation, vous pouvez ne pas tenir compte de l’aspect de distorsion
sph&eacute;rique de l’exemple. Examinez l’image charg&eacute;e et utilis&eacute;e comme source des donn&eacute;es d’image de la lune :
Comme vous pouvez le constater, l’image ne repr&eacute;sente pas une ou plusieurs sph&egrave;res ; c’est une photographie
rectangulaire de la surface de la lune. La photographie ayant &eacute;t&eacute; prise &agrave; l’emplacement exact de l’&eacute;quateur de la lune,
les parties sup&eacute;rieures et inf&eacute;rieures de l’image sont donc &eacute;tir&eacute;es et d&eacute;form&eacute;es. Pour supprimer la distorsion de l’image
et lui redonner son aspect sph&eacute;rique, nous utiliserons un filtre Mappage de d&eacute;placement (voir plus bas). Toutefois,
l’image source &eacute;tant un rectangle, il suffit que le code fasse glisser horizontalement la photographie de la surface de la
lune pour cr&eacute;er l’illusion d’une sph&egrave;re en rotation.
Observez que l’image contient en fait deux copies juxtapos&eacute;es de la photographie de la surface de la lune. Cette image
repr&eacute;sente l’image source dans laquelle des donn&eacute;es ont &eacute;t&eacute; copi&eacute;es plusieurs fois pour cr&eacute;er un effet de mouvement.
La juxtaposition de deux copies de l’image facilite la cr&eacute;ation d’un effet de d&eacute;filement continu. Examinons en d&eacute;tail le
processus d’animation afin de mieux le comprendre.
Le processus s’applique &agrave; deux objets ActionScript distincts. Le premier de ces objets est l’image source charg&eacute;e qui,
dans le code, est repr&eacute;sent&eacute;e par l’occurrence de BitmapData textureMap Comme nous l’avons vu, les donn&eacute;es
d’image sont ins&eacute;r&eacute;es dans textureMap d&egrave;s le chargement de l’image externe &agrave; l’aide de ce code :
textureMap = event.target.content.bitmapData;
Le contenu de textureMap correspond &agrave; l’image de la lune rectangulaire. En outre, pour cr&eacute;er la rotation anim&eacute;e, le
code utilise l’occurrence de Bitmap sphere, qui repr&eacute;sente l’objet d’affichage qui affiche l’image de la lune &agrave; l’&eacute;cran. A
l’instar de textureMap, l’objet sphere contient les donn&eacute;es d’image initiales de la m&eacute;thode imageLoadComplete(),
ainsi que le stipule le code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
265
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
sphere = new Bitmap();
sphere.bitmapData = new BitmapData(textureMap.width / 2, textureMap.height);
sphere.bitmapData.copyPixels(textureMap,
new Rectangle(0, 0, sphere.width, sphere.height),
new Point(0, 0));
Comme vous pouvez le constater, sphere est instanci&eacute;. La hauteur et la largeur de sa propri&eacute;t&eacute; bitmapData (les
donn&eacute;es d’image brutes qui sont affich&eacute;es par sphere) sont identiques &agrave; celles de textureMap. Autrement dit, le
contenu de sphere a la m&ecirc;me taille qu’une seule photographie de la lune (puisque l’image textureMap contient deux
photographies juxtapos&eacute;es). Des donn&eacute;es d’image sont ensuite ins&eacute;r&eacute;es dans la propri&eacute;t&eacute; bitmapData &agrave; l’aide de sa
m&eacute;thode copyPixels(). Les param&egrave;tres de l’appel de la m&eacute;thode copyPixels() donnent plusieurs indications :
• Le premier param&egrave;tre indique que les donn&eacute;es d’image copi&eacute;es proviennent de textureMap.
• Le deuxi&egrave;me param&egrave;tre, une nouvelle occurrence de Rectangle, d&eacute;termine quelle partie de textureMap est copi&eacute;e.
En l’occurrence, le clich&eacute; est un rectangle dont l’origine co&iuml;ncide avec le coin sup&eacute;rieur gauche de textureMap (ce
qu’indiquent les deux premiers param&egrave;tres de Rectangle() : 0, 0) et dont la largeur et la hauteur correspondent
aux propri&eacute;t&eacute;s width et height de sphere.
• Le troisi&egrave;me param&egrave;tre, une nouvelle occurrence de Point avec des valeurs de x et y &eacute;gales &agrave; 0, d&eacute;finit la destination
des donn&eacute;es de pixel ; en l’occurrence, le coin sup&eacute;rieur gauche (0, 0) de sphere.bitmapData.
Repr&eacute;sent&eacute; visuellement, le code copie les pixels de textureMap mis en &eacute;vidence ci-dessous et les colle sur sphere.
Autrement dit le contenu BitmapData de sphere correspond &agrave; la partie de textureMap mise en &eacute;vidence :
Pour rappel, il s’agit seulement de l’&eacute;tat initial de sphere, le contenu de la premi&egrave;re image copi&eacute;e sur sphere.
Une fois l’image source charg&eacute;e et sphere cr&eacute;&eacute;, il ne reste plus &agrave; la m&eacute;thode imageLoadComplete() qu’&agrave; d&eacute;finir
l’animation. L’animation est pilot&eacute;e par une occurrence de Timer, rotationTimer, cr&eacute;&eacute;e et lanc&eacute;e par le code suivant :
var rotationTimer:Timer = new Timer(15);
rotationTimer.addEventListener(TimerEvent.TIMER, rotateMoon);
rotationTimer.start();
Le code commence par cr&eacute;er l’occurrence de Timer rotationTimer. Le param&egrave;tre pass&eacute; au constructeur Timer()
indique que rotationTimer doit d&eacute;clencher son &eacute;v&eacute;nement timer toutes les 15 millisecondes. La m&eacute;thode
addEventListener() qui est appel&eacute;e ensuite stipule que le d&eacute;clenchement de l’&eacute;v&eacute;nement timer
(TimerEvent.TIMER) entra&icirc;ne l’appel de la m&eacute;thode rotateMoon(). Enfin, l’appel de la m&eacute;thode start() du timer
entra&icirc;ne le d&eacute;marrage de celui-ci.
De par la d&eacute;finition de rotationTimer, Flash Player appelle la m&eacute;thode rotateMoon() dans la classe MoonSphere
environ toutes les 15 millisecondes, ce qui se traduit par l’animation de la lune. Le code source de la m&eacute;thode
rotateMoon() est le suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
266
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
private function rotateMoon(event:TimerEvent):void
{
sourceX += 1;
if (sourceX &gt; textureMap.width / 2)
{
sourceX = 0;
}
sphere.Data.copyPixels(textureMap,
new Rectangle(sourceX, 0, sphere.width, sphere.height),
new Point(0, 0));
event.updateAfterEvent();
}
Ce code effectue trois op&eacute;rations :
1 La valeur de la variable sourceX (initialement fix&eacute;e &agrave; 0) est incr&eacute;ment&eacute;e d’une unit&eacute;.
sourceX += 1;
sourceX permet de d&eacute;terminer d’o&ugrave; proviennent, dans textureMap, les pixels copi&eacute;s sur sphere. Ce code d&eacute;place
donc le rectangle d’un pixel vers la droite sur textureMap. Comme le montre l’illustration suivante, apr&egrave;s plusieurs
cycles d’animation, le rectangle source s’est d&eacute;plac&eacute; de plusieurs pixels vers la droite :
Apr&egrave;s plusieurs autres cycles, le rectangle se trouve encore plus &agrave; droite.
C’est sur ce d&eacute;placement progressif constant de l’emplacement d’origine des pixels copi&eacute;s que repose l’animation.
Par un d&eacute;placement lent mais continu de l’emplacement source vers la droite, l’image affich&eacute;e &agrave; l’&eacute;cran dans sphere
semble continuellement glisser vers la gauche. C’est pourquoi l’image source (textureMap) doit contenir deux
copies de la photographie de la surface de la lune. Comme le rectangle se d&eacute;place continuellement vers la droite, il
chevauche g&eacute;n&eacute;ralement les deux photographies et non pas seulement l’une d’elles.
Derni&egrave;re mise &agrave; jour le 27/4/2013
267
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
2 Ce lent d&eacute;placement vers la droite donne cependant lieu &agrave; un probl&egrave;me. Le rectangle finira par atteindre le bord
droit de textureMap et ne trouvera plus de pixels &agrave; copier sur sphere :
Les lignes suivantes du code permettent de r&eacute;soudre ce probl&egrave;me :
if (sourceX &gt;= textureMap.width / 2)
{
sourceX = 0;
}
Le code v&eacute;rifie si sourceX (le bord gauche du rectangle) a atteint le milieu de textureMap. Si tel est le cas, il remet
la variable sourceX &agrave; 0 ; autrement dit, il la ram&egrave;ne au bord gauche de textureMap, et le cycle recommence :
3 Une fois la valeur de sourceX appropri&eacute;e calcul&eacute;e, la derni&egrave;re &eacute;tape du processus d’animation consiste &agrave; copier les
pixels du nouveau rectangle source sur sphere. Pour ce faire, nous reprenons le code qui a initialement rempli
sphere (voir plus haut), &agrave; la diff&eacute;rence pr&egrave;s que, dans l’appel du constructeur new Rectangle(), le bord gauche
du rectangle est plac&eacute; &agrave; sourceX :
sphere.bitmapData.copyPixels(textureMap,
new Rectangle(sourceX, 0, sphere.width, sphere.height),
new Point(0, 0));
Pour rappel, ce code est appel&eacute; toutes les 15 millisecondes. Comment l’emplacement du rectangle source change
constamment et que les pixels sont copi&eacute;s sur sphere, &agrave; l’&eacute;cran, la photographie de la lune repr&eacute;sent&eacute;e par sphere
semble glisser continuellement. En d’autres termes, la lune semble tourner sur elle-m&ecirc;me continuellement.
D&eacute;finition de l’aspect sph&eacute;rique
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La lune est bien entendu sph&eacute;rique , ce n’est pas un rectangle. La photographie rectangulaire de la surface lunaire, qui
fait l’objet d’une animation constante, doit donc &ecirc;tre convertie en sph&egrave;re. Cette op&eacute;ration comprend deux &eacute;tapes : un
masque cache tout le contenu except&eacute; une partie circulaire de la photographie et un filtre Mappage de d&eacute;placement
d&eacute;forme l’apparence de la photographie, lui donnant un aspect tridimensionnel.
Derni&egrave;re mise &agrave; jour le 27/4/2013
268
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Dans un premier temps, un masque circulaire cache enti&egrave;rement le contenu de l’objet MoonSphere except&eacute; la sph&egrave;re
cr&eacute;&eacute;e par le filtre. Le code suivant cr&eacute;e le masque, une occurrence de Shape, et l’applique &agrave; l’occurrence de
MoonSphere :
moonMask = new Shape();
moonMask.graphics.beginFill(0);
moonMask.graphics.drawCircle(0, 0, radius);
this.addChild(moonMask);
this.mask = moonMask;
Comme MoonSphere est un objet d’affichage (fond&eacute; sur la classe Sprite), il est possible d’appliquer directement le
masque &agrave; l’occurrence de MoonSphere &agrave; l’aide de sa propri&eacute;t&eacute; mask h&eacute;rit&eacute;e.
Il ne suffit pas d’occulter des parties de la photographie &agrave; l’aide d’un masque circulaire pour cr&eacute;er un effet r&eacute;aliste de
sph&egrave;re en rotation. En raison de la fa&ccedil;on dont la photographie de la surface lunaire a &eacute;t&eacute; prise, ses dimensions ne sont
pas proportionnelles . les parties sup&eacute;rieures et inf&eacute;rieures de l’image sont d&eacute;form&eacute;es et &eacute;tir&eacute;es par rapport aux zones
&eacute;quatoriales. Pour d&eacute;former l’apparence de la photographie et lui donner un aspect tridimensionnel, nous allons
utiliser un filtre Mappage de d&eacute;placement.
Ce type de filtre permet de d&eacute;former une image. En l’occurrence, nous allons d&eacute;former la photographie de la lune pour
lui donner un aspect plus r&eacute;aliste, en compressant horizontalement les parties sup&eacute;rieures et inf&eacute;rieures de l’image sans
toucher &agrave; son milieu. En supposant que le filtre intervienne sur une partie carr&eacute;e de la photographie, la compression
du haut et du bas mais pas du milieu aura pour effet de convertir le carr&eacute; en cercle. L’animation de cette image
d&eacute;form&eacute;e a un effet secondaire : la distance en pixels parcourue par le milieu de l’image semble sup&eacute;rieure &agrave; celle
couverte par les parties sup&eacute;rieure et inf&eacute;rieure, d’o&ugrave; l’impression que le cercle est en fait un objet tridimensionnel (une
sph&egrave;re).
Le code suivant permet de cr&eacute;er un filtre Mappage de d&eacute;placement appel&eacute; displaceFilter :
var displaceFilter:DisplacementMapFilter;
displaceFilter = new DisplacementMapFilter(fisheyeLens,
new Point(radius, 0),
BitmapDataChannel.RED,
BitmapDataChannel.GREEN,
radius, 0);
Le premier param&egrave;tre, fisheyeLens, est l’image de mappage ; en l’occurrence, un objet BitmapData cr&eacute;&eacute; par
programmation. La cr&eacute;ation de cette image est d&eacute;crite dans &laquo; Cr&eacute;ation d’une image bitmap par d&eacute;finition de la valeur
des pixels &raquo; &agrave; la page 270. Les autres param&egrave;tres d&eacute;crivent l’emplacement d’application du filtre au sein de l’image
filtr&eacute;e, les canaux colorim&eacute;triques utilis&eacute;s pour r&eacute;gir l’effet de d&eacute;placement et leur impact sur celui-ci. Une fois le filtre
Mappage de d&eacute;placement cr&eacute;&eacute;, il est appliqu&eacute; &agrave; sphere, toujours dans la m&eacute;thode imageLoadComplete() :
sphere.filters = [displaceFilter];
Derni&egrave;re mise &agrave; jour le 27/4/2013
269
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
L’image finale, une fois le masque et le filtre appliqu&eacute;s, se pr&eacute;sente comme suit :
A chaque cycle du processus d’animation de la lune en rotation, le contenu BitmapData de sphere est remplac&eacute; par un
nouveau clich&eacute; des donn&eacute;es d’image source. Il est cependant inutile de r&eacute;appliquer le filtre &agrave; chaque fois car il est
appliqu&eacute; &agrave; l’occurrence de Bitmap (l’objet d’affichage) plut&ocirc;t qu’aux donn&eacute;es bitmap (donn&eacute;es de pixel brutes). Pour
rappel, l’occurrence de Bitmap ne correspond pas aux donn&eacute;es bitmap. C’est un objet d’affichage qui affiche ces
donn&eacute;es &agrave; l’&eacute;cran. Une occurrence de Bitmap peut &ecirc;tre assimil&eacute;e &agrave; un projecteur de diapositives, tandis qu’un objet
BitmapData serait une diapositive pr&eacute;sent&eacute;e par le biais du projecteur. Il est possible d’appliquer un filtre directement
&agrave; un objet BitmapData, ce qui reviendrait &agrave; dessiner sur une diapositive pour modifier l’image. Vous pouvez aussi
appliquer un filtre &agrave; tout objet d’affichage, y compris une occurrence de Bitmap, ce qui &eacute;quivaudrait &agrave; placer un filtre
devant l’objectif du projecteur pour d&eacute;former l’image &agrave; l’&eacute;cran sans modifier la diapositive d’origine. Comme les
donn&eacute;es bitmap brutes sont accessibles par le biais de la propri&eacute;t&eacute; bitmapData d’une occurrence de Bitmap, rien
n’emp&ecirc;che de leur appliquer directement le filtre. Dans ce cas, cependant, il est pr&eacute;f&eacute;rable d’appliquer directement le
filtre &agrave; l’objet d’affichage Bitmap plut&ocirc;t qu’aux donn&eacute;es bitmap.
Pour plus d’informations sur l’utilisation du filtre Mappage de d&eacute;placement en ActionScript, voir &laquo; Filtrage des objets
d’affichage &raquo; &agrave; la page 276.
Cr&eacute;ation d’une image bitmap par d&eacute;finition de la valeur des pixels
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le fait qu’un filtre Mappage de d&eacute;placement implique en r&eacute;alit&eacute; deux images est un facteur important. L’image source
est modifi&eacute;e par le filtre. Dans cet exemple, il s’agit de l’occurrence de Bitmap sphere. L’autre image utilis&eacute;e par le filtre
est appel&eacute;e l’image de mappage. Elle n’appara&icirc;t pas &agrave; l’&eacute;cran. En revanche, la couleur de ses pixels est utilis&eacute;e en entr&eacute;e
par la fonction de d&eacute;placement : la couleur d’un pixel se trouvant &agrave; des coordonn&eacute;es x, y sp&eacute;cifiques d&eacute;termine le
d&eacute;placement (changement physique de position) &agrave; appliquer au pixel &agrave; ces coordonn&eacute;es x, y dans l’image source.
Dans cet exemple, pour utiliser le filtre Mappage de d&eacute;placement en vue de cr&eacute;er un effet sph&eacute;rique, il est donc
n&eacute;cessaire d’utiliser l’image de mappage appropri&eacute;e, c’est-&agrave;-dire une image au fond gris comportant un cercle rempli
d’un d&eacute;grad&eacute; d’une seule couleur (rouge) qui passe, horizontalement, du fonc&eacute; au clair, comme illustr&eacute; ci-dessous :
Derni&egrave;re mise &agrave; jour le 27/4/2013
270
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Comme une image de mappage et un filtre uniques sont utilis&eacute;s dans cet exemple, l’image de mappage est cr&eacute;&eacute;e une
seule fois, dans la m&eacute;thode imageLoadComplete() (autrement dit, &agrave; l’issue du chargement de l’image externe).
L’image de mappage, fisheyeLens, est cr&eacute;&eacute;e par appel de la m&eacute;thode createFisheyeMap() de la classe
MoonSphere :
var fisheyeLens:BitmapData = createFisheyeMap(radius);
Au sein de la m&eacute;thode createFisheyeMap(), l’image de mappage est dessin&eacute;e pixel par pixel &agrave; l’aide de la m&eacute;thode
setPixel() de la classe BitmapData. Vous trouverez le code complet de la m&eacute;thode createFisheyeMap() cidessous, suivi d’une pr&eacute;sentation d&eacute;taill&eacute;e de son fonctionnement :
private function createFisheyeMap(radius:int):BitmapData
{
var diameter:int = 2 * radius;
var result:BitmapData = new BitmapData(diameter,
diameter,
false,
0x808080);
// Loop through the pixels in the image one by one
for (var i:int = 0; i &lt; diameter; i++)
{
for (var j:int = 0; j &lt; diameter; j++)
{
// Calculate the x and y distances of this pixel from
// the center of the circle (as a percentage of the radius).
var pctX:Number = (i - radius) / radius;
var pctY:Number = (j - radius) / radius;
// Calculate the linear distance of this pixel from
// the center of the circle (as a percentage of the radius).
var pctDistance:Number = Math.sqrt(pctX * pctX + pctY * pctY);
// If the current pixel is inside the circle,
// set its color.
if (pctDistance &lt; 1)
{
// Calculate the appropriate color depending on the
// distance of this pixel from the center of the circle.
var red:int;
var green:int;
var blue:int;
var rgb:uint;
red = 128 * (1 + 0.75 * pctX * pctX * pctX / (1 - pctY * pctY));
green = 0;
blue = 0;
rgb = (red &lt;&lt; 16 | green &lt;&lt; 8 | blue);
// Set the pixel to the calculated color.
result.setPixel(i, j, rgb);
}
}
}
return result;
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
271
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
En premier lieu, la m&eacute;thode re&ccedil;oit un param&egrave;tre, radius, qui indique le rayon de l’image circulaire &agrave; cr&eacute;er. Le code
cr&eacute;e ensuite l’objet BitmapData sur lequel sera trac&eacute; le cercle. Cet objet, appel&eacute; result, est renvoy&eacute; comme valeur
r&eacute;sultante de la m&eacute;thode. Comme illustr&eacute; par l’extrait de code ci-dessous, la largeur et la hauteur de l’occurrence de
BitmapData result cr&eacute;&eacute;e sont &eacute;gales au diam&egrave;tre du cercle. En outre, cette occurrence n’a pas de transparence (le
troisi&egrave;me param&egrave;tre correspond &agrave; false) et elle est pr&eacute;-remplie par la couleur 0x808080 (gris moyen) :
var result:BitmapData = new BitmapData(diameter,
diameter,
false,
0x808080);
Le code utilise ensuite deux boucles pour it&eacute;rer par-dessus chaque pixel de l’image. La boucle ext&eacute;rieure parcourt de
droite &agrave; gauche chaque colonne de l’image (la variable i repr&eacute;sentant la position horizontale du pixel manipul&eacute;), alors
que la boucle int&eacute;rieure intervient sur chaque pixel de la colonne actuelle, de bas en haut (la variable j repr&eacute;sentant la
position verticale du pixel actuel). Le code des boucles (le contenu de la boucle int&eacute;rieure &eacute;tant omis) est illustr&eacute; cidessous :
for (var i:int = 0; i &lt; diameter; i++)
{
for (var j:int = 0; j &lt; diameter; j++)
{
...
}
}
Au fur et &agrave; mesure de la manipulation des pixels par les boucles, une valeur est calcul&eacute;e &agrave; chacun d’eux (la valeur
colorim&eacute;trique de ce pixel dans l’image de mappage). Ce processus comporte quatre &eacute;tapes :
1 Le code calcule la distance s&eacute;parant le pixel actuel du centre du cercle, le long de l’axe x (i - radius). Cette valeur
est divis&eacute;e par le rayon pour obtenir un pourcentage de celui-ci plut&ocirc;t qu’une distance absolue ((i - radius) /
radius). Ce pourcentage est stock&eacute; dans une variable appel&eacute;e pctX. La valeur &eacute;quivalente sur l’axe y est calcul&eacute;e et
stock&eacute;e dans la variable pctY, comme illustr&eacute; dans le code ci-dessous :
var pctX:Number = (i - radius) / radius;
var pctY:Number = (j - radius) / radius;
2 Une formule trigonom&eacute;trique standard (le th&eacute;or&egrave;me de Pythagore) est utilis&eacute;e pour calculer la distance lin&eacute;aire
entre le centre du cercle et le point actuel, &agrave; partir de pctX et pctY. Cette valeur est stock&eacute;e dans une variable,
pctDistance, comme illustr&eacute; ci-dessous :
var pctDistance:Number = Math.sqrt(pctX * pctX + pctY * pctY);
3 Le code v&eacute;rifie ensuite si la distance en pourcentage est inf&eacute;rieure &agrave; 1 (ou 100 % du rayon ; autrement dit, si le pixel
concern&eacute; se trouve sur le rayon du cercle). Si le pixel figure dans le cercle, une valeur colorim&eacute;trique calcul&eacute;e lui est
affect&eacute;e (voir la description &agrave; l’&eacute;tape 4). Dans le cas contraire, ce pixel ne fait l’objet d’aucune manipulation et
conserve la couleur par d&eacute;faut, c’est-&agrave;-dire le gris moyen.
if (pctDistance &lt; 1)
{
...
}
4 Une valeur colorim&eacute;trique est calcul&eacute;e pour tout pixel se trouvant dans le cercle. La couleur finale est une nuance
de rouge qui va du noir (0 % de rouge) sur le bord gauche du cercle au rouge vif (100 % de rouge) sur le bord droit
du cercle. La valeur colorim&eacute;trique comprend initialement trois parts de couleur (rouge, vert et bleu), comme
illustr&eacute; ci-dessous) :
Derni&egrave;re mise &agrave; jour le 27/4/2013
272
273
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
red = 128 * (1 + 0.75 * pctX * pctX * pctX / (1 - pctY * pctY));
green = 0;
blue = 0;
Observez que seule la part rouge de la couleur (variable red) poss&egrave;de une valeur. Les valeurs vert et bleu (variables
green et blue) sont illustr&eacute;es ici par souci de clart&eacute;, mais il est possible de les omettre. Cette m&eacute;thode ayant pour
but de cr&eacute;er un cercle contenant un d&eacute;grad&eacute; de rouge, les valeurs vertes et bleues sont superflues.
Une fois les trois valeurs colorim&eacute;triques individuelles d&eacute;termin&eacute;es, elles sont conjugu&eacute;es dans une valeur enti&egrave;re
unique &agrave; l’aide d’un algorithme de d&eacute;calage de bits, comme illustr&eacute; ci-dessous :
rgb = (red &lt;&lt; 16 | green &lt;&lt; 8 | blue);
En dernier lieu, la valeur colorim&eacute;trique calcul&eacute;e est affect&eacute;e au pixel actuel &agrave; l’aide de la m&eacute;thode setPixel() de
l’objet BitmapData result, comme illustr&eacute; ci-dessous :
result.setPixel(i, j, rgb);
D&eacute;codage asynchrone des images bitmap
Flash Player 11 et les versions ult&eacute;rieures, Adobe AIR 2.6 et les versions ult&eacute;rieures
Lorsque vous manipulez des images bitmap, vous pouvez d&eacute;coder et charger ces derni&egrave;res en mode asynchrone pour
optimiser les performances per&ccedil;ues d’une application. Dans de nombreux cas, le d&eacute;codage asynchrone d’une image
bitmap prend autant de temps que le d&eacute;codage synchrone. L’image bitmap est toutefois d&eacute;cod&eacute;e dans un thread
distinct avant que l’objet Loader associ&eacute; n’envoie l’&eacute;v&eacute;nement COMPLETE. Il est par cons&eacute;quent possible de d&eacute;coder en
mode asynchrone des images de taille sup&eacute;rieure apr&egrave;s leur chargement.
La classe ImageDecodingPolicy du package flash.system permet de stipuler le mod&egrave;le de chargement de bitmap.
Le mod&egrave;le de chargement par d&eacute;faut est synchrone.
Traitement du d&eacute;codage de bitmap
Mod&egrave;le de chargement de Description
bitmap
ImageDecodingPolicy.ON_DEMAND
Synchrone
Les images charg&eacute;es sont d&eacute;cod&eacute;es
lorsque l’utilisateur acc&egrave;de aux donn&eacute;es
de l’image.
Ce traitement est adapt&eacute; au d&eacute;codage des
images de taille inf&eacute;rieure. Il s’av&egrave;re
&eacute;galement utile lorsque l’application ne
n&eacute;cessite pas d’effets et de transitions
complexes.
ImageDecodingPolicy.ON_LOAD
Asynchrone
Les images charg&eacute;es sont d&eacute;cod&eacute;es au
chargement, avant la distribution de
l’&eacute;v&eacute;nement COMPLETE.
Ce mode est parfaitement adapt&eacute; aux
images de taille sup&eacute;rieure (sup&eacute;rieure &agrave;
10 MP). Si vous d&eacute;veloppez une
application mobile AIR contenant des
transitions de page, faites appel &agrave; ce
traitement de chargement de bitmap
pour optimiser les performances per&ccedil;ues
de l’application.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
Remarque : si le fichier en cours de chargement est une image bitmap et que la m&eacute;thode de d&eacute;codage utilis&eacute;e est ON_LOAD,
l’image est d&eacute;cod&eacute;e de fa&ccedil;on asynchrone avant la distribution de l’&eacute;v&eacute;nement COMPLETE.
Le code suivant illustre l’utilisation de la classe ImageDecodingPolicy :
var loaderContext:LoaderContext = new LoaderContext();
loaderContext.imageDecodingPolicy = ImageDecodingPolicy.ON_LOAD
var loader:Loader = new Loader();
loader.load(new URLRequest(&quot;http://www.adobe.com/myimage.png&quot;), loaderContext);
Vous pouvez continuer &agrave; utiliser le traitement de d&eacute;codage ON_DEMAND avec les m&eacute;thodes Loader.load() et
Loader.loadBytes(). N&eacute;anmoins, toutes les autres m&eacute;thodes qui prennent un objet LoaderContext comme
argument ignorent toutes les valeurs ImageDecodingPolicy transmises.
L’exemple suivant illustre la diff&eacute;rence entre une image d&eacute;cod&eacute;e en mode synchrone et en mode asynchrone :
package
{
import
import
import
import
import
import
flash.display.Loader;
flash.display.Sprite;
flash.events.Event;
flash.net.URLRequest;
flash.system.ImageDecodingPolicy;
flash.system.LoaderContext;
public class AsyncTest extends Sprite
{
private var loaderContext:LoaderContext;
private var loader:Loader;
private var urlRequest:URLRequest;
public function AsyncTest()
{
//Load the image synchronously
loaderContext = new LoaderContext();
//Default behavior.
loaderContext.imageDecodingPolicy = ImageDecodingPolicy.ON_DEMAND;
loader = new Loader();
loadImageSync();
//Load the image asynchronously
loaderContext = new LoaderContext();
loaderContext.imageDecodingPolicy = ImageDecodingPolicy.ON_LOAD;
loader = new Loader();
loadImageASync();
}
private function loadImageASync():void{
trace(&quot;Loading image asynchronously...&quot;);
urlRequest = new URLRequest(&quot;http://www.adobe.com/myimage.png&quot;);
urlRequest.useCache = false;
loader.load(urlRequest, loaderContext);
loader.contentLoaderInfo.addEventListener
(Event.COMPLETE, onAsyncLoadComplete);
Derni&egrave;re mise &agrave; jour le 27/4/2013
274
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des images bitmap
}
private function onAsyncLoadComplete(event:Event):void{
trace(&quot;Async. Image Load Complete&quot;);
}
private function loadImageSync():void{
trace(&quot;Loading image synchronously...&quot;);
urlRequest = new URLRequest(&quot;http://www.adobe.com/myimage.png&quot;);
urlRequest.useCache = false;
loader.load(urlRequest, loaderContext);
loader.contentLoaderInfo.addEventListener
(Event.COMPLETE, onSyncLoadComplete);
}
private function onSyncLoadComplete(event:Event):void{
trace(&quot;Sync. Image Load Complete&quot;);
}
}
}
Pour une d&eacute;monstration de l’effet des diverses strat&eacute;gies de d&eacute;codage, voir Thibaud Imbert: Asynchronous bitmap
decoding in the Adobe Flash runtimes (disponible en anglais uniquement).
Derni&egrave;re mise &agrave; jour le 27/4/2013
275
276
Chapitre 14 : Filtrage des objets
d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Historiquement, l’application d’effets de filtres &agrave; des images bitmap est du domaine des logiciels sp&eacute;cialis&eacute;s en retouche
d’image, comme Adobe Photoshop&reg; et Adobe Fireworks&reg;. ActionScript 3.0 comprend le package flash.filters, qui
int&egrave;gre une s&eacute;rie de classes de filtres d’effet d’image bitmap. Ces effets permettent aux d&eacute;veloppeurs d’appliquer des
filtres aux images bitmap et objets d’affichage par le biais d’un programme afin d’obtenir une grande partie des effets
disponibles dans les applications de retouche graphique.
Principes de base du filtrage des objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’une des fa&ccedil;ons de rendre une application plus s&eacute;duisante est de lui ajouter des effets graphiques simples, comme une
ombre port&eacute;e derri&egrave;re une photo pour cr&eacute;er l’illusion de la 3D, ou un rayonnement autour d’un bouton pour indiquer
qu’il s’agit du bouton actif. ActionScript 3.0 comporte dix filtres qui peuvent &ecirc;tre appliqu&eacute;s &agrave; n’importe quel objet
d’affichage ou &agrave; une occurrence de BitmapData. Ces filtres vont des effets de base (filtres Ombre port&eacute;e et
Rayonnement) &agrave; des effets plus complexes, tels que le filtre Mappage du d&eacute;placement et le filtre Convolution
matricielle.
Remarque : outre les filtres int&eacute;gr&eacute;s, vous pouvez programmer des effets et filtres personnalis&eacute;s par le biais de Pixel Bender
(voir &laquo; Utilisation des shaders de Pixel Bender &raquo; &agrave; la page 310).
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs &agrave; la cr&eacute;ation de filtres :
Biseau Effet de rebord cr&eacute;&eacute; en &eacute;claircissant les pixels de deux c&ocirc;t&eacute;s contigus et en assombrissant les pixels des deux
c&ocirc;t&eacute;s oppos&eacute;s, afin de cr&eacute;er un effet tridimensionnel de bordure fr&eacute;quemment utilis&eacute; pour donner &agrave; des boutons et
autres graphiques un effet enfonc&eacute; ou sorti.
Convolution Distorsion des pixels d’une image obtenue en combinant la valeur de chaque pixel avec celle(s) d’un ou
plusieurs des pixels voisins, selon divers pourcentages.
D&eacute;placement D&eacute;calage des pixels d’une image vers une nouvelle position.
Matrice Grille de chiffres utilis&eacute;e pour effectuer certains calculs math&eacute;matiques, en appliquant ces chiffres &agrave; diverses
valeurs et en combinant le r&eacute;sultat.
Voir aussi
Package flash.filters
flash.display.DisplayObject.filters
flash.display.BitmapData.applyFilter()
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Cr&eacute;ation et application de filtres
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les filtres permettent d’appliquer divers effets (ombre port&eacute;e, biseau, flou, etc.) &agrave; des images bitmap et &agrave; des objets
d’affichage. Chaque filtre &eacute;tant d&eacute;fini sous forme de classe, il suffit pour appliquer un filtre de cr&eacute;er une occurrence
d’un objet filtre, ce qui n’est gu&egrave;re diff&eacute;rent de la cr&eacute;ation de tout autre objet. Apr&egrave;s avoir cr&eacute;&eacute; une occurrence d’un
objet filtre, il est facile de l’appliquer &agrave; un objet d’affichage &agrave; l’aide de la propri&eacute;t&eacute; filters de cet objet ou, dans le cas
d’un objet BitmapData, de sa m&eacute;thode applyFilter().
Cr&eacute;ation d’un filtre
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour cr&eacute;er un objet filtre, il suffit d’appeler la fonction constructeur de la classe du filtre voulu. Par exemple, pour cr&eacute;er
un objet DropShadowFilter, utilisez le code suivant :
import flash.filters.DropShadowFilter;
var myFilter:DropShadowFilter = new DropShadowFilter();
Bien que cela n’apparaisse pas dans cet exemple, le constructeur de DropShadowFilter() (comme tous les autres
constructeurs des classes de filtres) accepte plusieurs param&egrave;tres facultatifs qui permettent de modifier l’aspect de
l’effet du filtre.
Application d’un filtre
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque l’objet filtre a &eacute;t&eacute; cr&eacute;&eacute;, vous pouvez l’appliquer &agrave; un objet d’affichage ou &agrave; un objet BitmapData, mais le mode
d’application du filtre d&eacute;pend de l’objet concern&eacute;.
Application d’un filtre &agrave; un objet d’affichage
Pour appliquer un effet de filtrage &agrave; un objet d’affichage, utilisez sa propri&eacute;t&eacute; filters. La propri&eacute;t&eacute; filters d’un
objet d’affichage est une occurrence de l’objet Array, dont les &eacute;l&eacute;ments sont les objets filtres appliqu&eacute;s &agrave; l’objet
d’affichage. Pour appliquer un seul filtre &agrave; un objet d’affichage, cr&eacute;ez l’occurrence de ce filtre, ajoutez-la &agrave; une
occurrence d’Array, et affectez cet objet Array &agrave; la propri&eacute;t&eacute; filters de l’objet d’affichage :
Derni&egrave;re mise &agrave; jour le 27/4/2013
277
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DropShadowFilter;
// Create a bitmapData object and render it to screen
var myBitmapData:BitmapData = new BitmapData(100,100,false,0xFFFF3300);
var myDisplayObject:Bitmap = new Bitmap(myBitmapData);
addChild(myDisplayObject);
// Create a DropShadowFilter instance.
var dropShadow:DropShadowFilter = new DropShadowFilter();
// Create the filters array, adding the filter to the array by passing it as
// a parameter to the Array() constructor.
var filtersArray:Array = new Array(dropShadow);
// Assign the filters array to the display object to apply the filter.
myDisplayObject.filters = filtersArray;
Pour affecter plusieurs filtres &agrave; l’objet, il suffit d’ajouter tous ces filtres &agrave; l’occurrence d’Array avant de l’affecter &agrave; la
propri&eacute;t&eacute; filters. Vous pouvez ajouter plusieurs objets &agrave; un objet Array en les passant en param&egrave;tres &agrave; son
constructeur. Par exemple, ce code applique un filtre Biseau et un filtre Rayonnement &agrave; l’objet d’affichage cr&eacute;&eacute;
pr&eacute;c&eacute;demment :
import flash.filters.BevelFilter;
import flash.filters.GlowFilter;
// Create the filters and add them to an array.
var bevel:BevelFilter = new BevelFilter();
var glow:GlowFilter = new GlowFilter();
var filtersArray:Array = new Array(bevel, glow);
// Assign the filters array to the display object to apply the filter.
myDisplayObject.filters = filtersArray;
Pour cr&eacute;er le tableau des filtres, vous pouvez utiliser le constructeur new Array() (comme dans les exemples
pr&eacute;c&eacute;dents) ou la syntaxe litt&eacute;rale Array, en mettant les filtres entre crochets ([]). Par exemple, cette ligne de code :
var filters:Array = new Array(dropShadow, blur);
donne un r&eacute;sultat identique &agrave; celle-ci :
var filters:Array = [dropShadow, blur];
Si vous appliquez plusieurs filtres &agrave; des objets d’affichage, ils sont appliqu&eacute;s en s&eacute;quence, de mani&egrave;re cumulative. Par
exemple, si un tableau de filtres comporte deux &eacute;l&eacute;ments, le filtre Biseau puis le filtre Ombre port&eacute;e, ce dernier est
appliqu&eacute; &agrave; la fois au filtre Biseau et &agrave; l’objet d’affichage lui-m&ecirc;me, du fait que le filtre Ombre port&eacute;e est en seconde
position dans le tableau des filtres. Si vous souhaitez appliquer des filtres de mani&egrave;re non cumulative, appliquez chaque
filtre &agrave; une nouvelle copie de l’objet d’affichage.
Pour affecter uniquement un ou quelques filtres &agrave; un objet d’affichage, vous pouvez cr&eacute;er l’occurrence du filtre et
l’affecter &agrave; l’objet dans la m&ecirc;me instruction. Par exemple, le code suivant applique un filtre Flou &agrave; un objet d’affichage
nomm&eacute; myDisplayObject :
myDisplayObject.filters = [new BlurFilter()];
Le code pr&eacute;c&eacute;dent cr&eacute;e une occurrence d’Array en utilisant la syntaxe litt&eacute;rale d’Array (entre crochets), puis cr&eacute;e une
nouvelle occurrence de BlurFilter comme &eacute;l&eacute;ment du tableau, et affecte ce dernier &agrave; la propri&eacute;t&eacute; filters de l’objet
d’affichage myDisplayObject.
Derni&egrave;re mise &agrave; jour le 27/4/2013
278
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Suppression des filtres appliqu&eacute;s &agrave; un objet
Pour supprimer tous les filtres d’un objet d’affichage, il suffit d’affecter la valeur null &agrave; la propri&eacute;t&eacute; filters de celui-ci :
myDisplayObject.filters = null;
Si vous avez appliqu&eacute; plusieurs filtres &agrave; un objet et souhaitez n’en supprimer qu’un, plusieurs &eacute;tapes sont n&eacute;cessaires
pour modifier le tableau de la propri&eacute;t&eacute; filters. Pour plus d’informations, voir &laquo; Probl&egrave;mes potentiels d’utilisation
des filtres &raquo; &agrave; la page 279.
Application d’un filtre &agrave; un objet BitmapData
L’application d’un filtre &agrave; un objet BitmapData n&eacute;cessite d’utiliser la m&eacute;thode applyFilter() de l’objet BitmapData :
var rect:Rectangle = new Rectangle();
var origin:Point = new Point();
myBitmapData.applyFilter(sourceBitmapData, rect, origin, new BlurFilter());
La m&eacute;thode applyFilter() applique un filtre &agrave; un objet source BitmapData, produisant ainsi une nouvelle image
filtr&eacute;e. Cette m&eacute;thode ne modifie pas l’image originale, car le r&eacute;sultat de l’application du filtre &agrave; celle-ci est enregistr&eacute;
dans l’occurrence de BitmapData pour laquelle la m&eacute;thode applyFilter() est appel&eacute;e.
Fonctionnement des filtres
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le filtrage des objets d’affichage consiste &agrave; mettre en cache une copie de l’objet original sous forme d’un bitmap
transparent.
Lorsqu’un filtre a &eacute;t&eacute; appliqu&eacute; &agrave; un objet d’affichage, le moteur d’ex&eacute;cution conserve en cache l’objet sous forme de
bitmap tant que cet objet poss&egrave;de une liste de filtres valide. Le bitmap source est ensuite repris en tant qu’image
originale pour les effets de filtrage suivants.
Tout objet d’affichage comporte g&eacute;n&eacute;ralement deux bitmaps : le premier avec l’objet d’affichage source non filtr&eacute;
d’origine et un autre pour l’image finale apr&egrave;s filtrage. L’image finale est utilis&eacute;e pour le rendu. Tant que l’objet
d’affichage ne change pas, l’image source ne n&eacute;cessite aucune actualisation.
Probl&egrave;mes potentiels d’utilisation des filtres
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Plusieurs sources potentielles de confusion ou de probl&egrave;mes peuvent survenir lors de l’utilisation de filtres.
Filtres et mise en cache bitmap
Pour appliquer un filtre &agrave; un objet d’affichage, vous devez activer la mise en cache sous forme de bitmap pour cet objet.
Si vous appliquez un filtre &agrave; un objet d’affichage dont la propri&eacute;t&eacute; cacheAsBitmap est false, la propri&eacute;t&eacute;
cacheAsBitmap de l’objet est automatiquement d&eacute;finie sur true. Si vous supprimez tous les filtres appliqu&eacute;s &agrave; l’objet
d’affichage, la propri&eacute;t&eacute; cacheAsBitmap retrouve la valeur pr&eacute;c&eacute;demment d&eacute;finie.
Derni&egrave;re mise &agrave; jour le 27/4/2013
279
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Modification des filtres &agrave; l’ex&eacute;cution
Si un ou plusieurs filtres sont d&eacute;j&agrave; appliqu&eacute;s &agrave; un objet d’affichage, vous ne pouvez pas modifier le jeu de filtres en
ajoutant d’autres filtres ou en supprimant des filtres existants du tableau de la propri&eacute;t&eacute; filters. Pour modifier le jeu
de filtres appliqu&eacute; ou lui ajouter des filtres, vous devez plut&ocirc;t effectuer les modifications requises dans un tableau
distinct, puis l’assigner &agrave; la propri&eacute;t&eacute; filters de l’objet d’affichage pour que les filtres soient appliqu&eacute;s &agrave; l’objet. La
proc&eacute;dure la plus simple consiste &agrave; lire le tableau de la propri&eacute;t&eacute; filters dans une variable Array, puis &agrave; effectuer les
modifications requises dans ce tableau temporaire. Vous r&eacute;assignez alors ce tableau &agrave; la propri&eacute;t&eacute; filters de l’objet
d’affichage. Dans les cas de figure plus complexes, il peut s’av&eacute;rer n&eacute;cessaire de conserver un tableau ma&icirc;tre distinct de
filtres. Vous effectuez toute modification requise dans ce tableau ma&icirc;tre de filtres, puis vous le r&eacute;assignez &agrave; la propri&eacute;t&eacute;
filters de l’objet d’affichage apr&egrave;s chaque modification.
Ajout d’un autre filtre
Le code suivant illustre le processus d’ajout d’un autre filtre &agrave; un objet d’affichage auquel sont d&eacute;j&agrave; appliqu&eacute;s un ou
plusieurs filtres. Initialement, un filtre Rayonnement est appliqu&eacute; &agrave; l’objet d’affichage myDisplayObject. Lorsque
l’utilisateur clique sur l’objet d’affichage, la fonction addFilters() est appel&eacute;e. Dans cette fonction, deux filtres
suppl&eacute;mentaires sont appliqu&eacute;s &agrave; myDisplayObject :
import flash.events.MouseEvent;
import flash.filters.*;
myDisplayObject.filters = [new GlowFilter()];
function addFilters(event:MouseEvent):void
{
// Make a copy of the filters array.
var filtersCopy:Array = myDisplayObject.filters;
// Make desired changes to the filters (in this case, adding filters).
filtersCopy.push(new BlurFilter());
filtersCopy.push(new DropShadowFilter());
// Apply the changes by reassigning the array to the filters property.
myDisplayObject.filters = filtersCopy;
}
myDisplayObject.addEventListener(MouseEvent.CLICK, addFilters);
Suppression d’un filtre dans un jeu de filtres
Si plusieurs filtres sont appliqu&eacute;s &agrave; un objet d’affichage et que vous souhaitez supprimer l’un des filtres sans affecter les
autres filtres appliqu&eacute;s, vous copiez les filtres dans un tableau temporaire, vous supprimez le filtre superflu du tableau,
puis vous r&eacute;assignez le tableau temporaire &agrave; la propri&eacute;t&eacute; filters de l’objet d’affichage. La section &laquo; R&eacute;cup&eacute;ration des
valeurs et suppression des &eacute;l&eacute;ments du tableau &raquo; &agrave; la page 32 d&eacute;crit plusieurs techniques de suppression d’un ou de
plusieurs &eacute;l&eacute;ments de tout tableau.
La technique la plus simple consiste &agrave; supprimer le filtre en t&ecirc;te de pile appliqu&eacute; &agrave; l’objet (en d’autres termes, le dernier
filtre appliqu&eacute; &agrave; ce dernier). Vous utilisez la m&eacute;thode pop() de la classe Array pour supprimer le filtre du tableau :
Derni&egrave;re mise &agrave; jour le 27/4/2013
280
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
// Example of removing the top-most filter from a display object
// named &quot;filteredObject&quot;.
var tempFilters:Array = filteredObject.filters;
// Remove the last element from the Array (the top-most filter).
tempFilters.pop();
// Apply the new set of filters to the display object.
filteredObject.filters = tempFilters;
Pour supprimer le filtre en bas de pile (en d’autres termes, le premier filtre appliqu&eacute; &agrave; l’objet), vous utilisez le m&ecirc;me
code en substituant la m&eacute;thode shift() de la classe Array &agrave; la m&eacute;thode pop().
Pour supprimer un filtre figurant au centre d’un tableau de filtres (sous r&eacute;serve que le tableau contienne plus de deux
filtres), vous disposez de la m&eacute;thode splice(). Vous devez conna&icirc;tre l’index (la position dans le tableau) du filtre &agrave;
supprimer. Par exemple, le code suivant supprime le deuxi&egrave;me filtre (dot&eacute; de l’index 1) d’un objet d’affichage :
// Example of removing a filter from the middle of a stack of filters
// applied to a display object named &quot;filteredObject&quot;.
var tempFilters:Array = filteredObject.filters;
// Remove the second filter from the array. It's the item at index 1
// because Array indexes start from 0.
// The first &quot;1&quot; indicates the index of the filter to remove; the
// second &quot;1&quot; indicates how many elements to remove.
tempFilters.splice(1, 1);
// Apply the new set of filters to the display object.
filteredObject.filters = tempFilters;
Identification de l’index d’un filtre
Vous devez conna&icirc;tre l’index du filtre &agrave; supprimer du tableau. A cet effet, il est n&eacute;cessaire d’identifier (selon le mode
de conception de l’application) ou de calculer l’index du filtre &agrave; supprimer.
L’approche recommand&eacute;e consiste &agrave; concevoir votre application de sorte que le filtre &agrave; supprimer occupe
syst&eacute;matiquement la m&ecirc;me position dans le jeu de filtres. Par exemple, si vous disposez d’un objet d’affichage unique
auquel sont appliqu&eacute;s un filtre Convolution et un filtre Ombre port&eacute;e (dans cet ordre) et que vous souhaitez supprimer
le filtre Ombre port&eacute;e tout en conservant le filtre Convolution, vous connaissez la position occup&eacute;e par le filtre
(premi&egrave;re). Vous savez donc &agrave; l’avance quelle m&eacute;thode Array utiliser (soit, dans ce cas, Array.pop() pour supprimer
le filtre Ombre port&eacute;e).
Si le filtre &agrave; supprimer est toujours d’un type d&eacute;termin&eacute;, mais qu’il n’occupe pas syst&eacute;matiquement la m&ecirc;me position
dans le jeu de filtres, vous pouvez v&eacute;rifier le type de donn&eacute;es de chaque filtre du tableau pour identifier le filtre &agrave;
supprimer. Par exemple, le code suivant identifie le filtre Rayonnement dans un jeu de filtres et le supprime de ce
dernier.
Derni&egrave;re mise &agrave; jour le 27/4/2013
281
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
// Example of removing a glow filter from a set of filters, where the
//filter you want to remove is the only GlowFilter instance applied
// to the filtered object.
var tempFilters:Array = filteredObject.filters;
// Loop through the filters to find the index of the GlowFilter instance.
var glowIndex:int;
var numFilters:int = tempFilters.length;
for (var i:int = 0; i &lt; numFilters; i++)
{
if (tempFilters[i] is GlowFilter)
{
glowIndex = i;
break;
}
}
// Remove the glow filter from the array.
tempFilters.splice(glowIndex, 1);
// Apply the new set of filters to the display object.
filteredObject.filters = tempFilters;
Dans un cas de figure plus complexe (si le filtre &agrave; supprimer est s&eacute;lectionn&eacute; &agrave; l’ex&eacute;cution, par exemple), l’approche
recommand&eacute;e consiste &agrave; conserver une copie distincte et permanente du tableau de filtres, qui sert de liste ma&icirc;tresse
de filtres. Lorsque vous modifiez le jeu de filtres, modifiez la liste ma&icirc;tresse, puis appliquez ce tableau de filtres en tant
que propri&eacute;t&eacute; filters de l’objet d’affichage.
Par exemple, dans le code ci-apr&egrave;s, plusieurs filtres Convolution sont appliqu&eacute;s &agrave; un objet d’affichage pour cr&eacute;er divers
effets visuels et l’un de ces filtres est supprim&eacute; ult&eacute;rieurement dans l’application sans affecter les autres filtres. Dans ce
cas de figure, le code conserve une copie ma&icirc;tresse du tableau de filtres, ainsi qu’une r&eacute;f&eacute;rence au filtre &agrave; supprimer.
Rechercher et identifier le filtre appropri&eacute; est similaire &agrave; l’approche pr&eacute;c&eacute;dente, except&eacute; qu’au lieu d’effectuer une copie
temporaire du tableau de filtres, la copie ma&icirc;tresse est manipul&eacute;e, puis appliqu&eacute;e &agrave; l’objet d’affichage.
Derni&egrave;re mise &agrave; jour le 27/4/2013
282
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
//
//
//
//
Example of removing a filter from a set of
filters, where there may be more than one
of that type of filter applied to the filtered
object, and you only want to remove one.
// A master list of filters is stored in a separate,
// persistent Array variable.
var masterFilterList:Array;
// At some point, you store a reference to the filter you
// want to remove.
var filterToRemove:ConvolutionFilter;
// ... assume the filters have been added to masterFilterList,
// which is then assigned as the filteredObject.filters:
filteredObject.filters = masterFilterList;
// ... later, when it's time to remove the filter, this code gets called:
// Loop through the filters to find the index of masterFilterList.
var removeIndex:int = -1;
var numFilters:int = masterFilterList.length;
for (var i:int = 0; i &lt; numFilters; i++)
{
if (masterFilterList[i] == filterToRemove)
{
removeIndex = i;
break;
}
}
if (removeIndex &gt;= 0)
{
// Remove the filter from the array.
masterFilterList.splice(removeIndex, 1);
// Apply the new set of filters to the display object.
filteredObject.filters = masterFilterList;
}
Si vous adoptez cette approche (qui consiste &agrave; comparer une r&eacute;f&eacute;rence stock&eacute;e &agrave; un filtre aux &eacute;l&eacute;ments que contient le
tableau de filtres pour identifier le filtre &agrave; supprimer), vous devez conserver une copie distincte du tableau de filtres.
En effet, le code ne fonctionne pas si vous comparez la r&eacute;f&eacute;rence stock&eacute;e au filtre aux &eacute;l&eacute;ments d’un tableau temporaire
copi&eacute; dans la propri&eacute;t&eacute; filters de l’objet d’affichage. La raison en est simple : lorsque vous assignez un tableau &agrave; la
propri&eacute;t&eacute; filters, le moteur d’ex&eacute;cution effectue une copie de chaque objet filtre du tableau. Ces copies (plut&ocirc;t que
les objets d’origine) sont appliqu&eacute;es &agrave; l’objet d’affichage. Lorsque vous lisez la propri&eacute;t&eacute; filters dans un tableau
temporaire, celui-ci contient des r&eacute;f&eacute;rences aux objets filtre copi&eacute;s plut&ocirc;t qu’aux objets filtre d’origine. Par cons&eacute;quent,
si vous tentez dans l’exemple pr&eacute;c&eacute;dent de d&eacute;terminer l’index de filterToRemove en le comparant aux filtres d’un
tableau de filtres temporaire, aucune correspondance n’est d&eacute;tect&eacute;e.
Derni&egrave;re mise &agrave; jour le 27/4/2013
283
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Filtres et transformations d’objets
Les zones filtr&eacute;es (ombres port&eacute;es, par exemple) situ&eacute;es hors du cadre de s&eacute;lection d’un objet d’affichage ne sont pas
prises en consid&eacute;ration pour la d&eacute;tection de clics (chevauchement ou intersection de deux occurrences). La m&eacute;thode
de d&eacute;tection des clics de la classe DisplayObject &eacute;tant de type vectoriel, il est impossible d’en pratiquer une sur le
bitmap r&eacute;sultant. Par exemple, si vous appliquez un filtre Biseau &agrave; une occurrence de bouton, la d&eacute;tection des clics n’est
pas possible sur la partie biseaut&eacute;e de l’occurrence.
Le redimensionnement, la rotation et l’inclinaison ne sont pas pris en charge par les filtres ; si l’objet d’affichage filtr&eacute;
lui-m&ecirc;me est redimensionn&eacute; (scaleX et scaleY diff&eacute;rents de 100 %), l’effet de filtre n’est pas redimensionn&eacute; avec
l’occurrence. La forme originale de l’occurrence est certes pivot&eacute;e, inclin&eacute;e ou redimensionn&eacute;e, mais pas le filtre.
Vous pouvez animer une occurrence avec un filtre afin de cr&eacute;er des effets r&eacute;alistes, ou imbriquer des occurrences et
utiliser la classe BitmapData pour animer des filtres afin d’obtenir ces effets.
Filtres et objets bitmaps
Si vous appliquez un filtre &agrave; un objet BitmapData, la propri&eacute;t&eacute; cacheAsBitmap de cet objet est automatiquement true.
Le filtre peut ainsi &ecirc;tre appliqu&eacute; &agrave; la copie de l’objet plut&ocirc;t qu’&agrave; ce dernier.
Cette copie est alors plac&eacute;e &agrave; l’&eacute;cran par-dessus l’objet original, aussi pr&egrave;s que possible, au pixel pr&egrave;s. Si les limites du
bitmap original changent, la copie &agrave; laquelle le filtrage est appliqu&eacute; est recr&eacute;&eacute;e &agrave; partir de l’original au lieu d’&ecirc;tre &eacute;tir&eacute;e.
Si vous supprimez tous les filtres de l’objet d’affichage, la propri&eacute;t&eacute; cacheAsBitmap retrouve sa valeur d’origine.
Filtres d’affichage disponibles
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
ActionScript 3.0 comprend dix classes de filtre que vous pouvez appliquer aux objets d’affichage et aux objets
BitmapData :
• filtre Biseau (classe BevelFilter)
• filtre Flou (classe BlurFilter)
• filtre Ombre port&eacute;e (classe DropShadowFilter)
• filtre Rayonnement (classe GlowFilter)
• filtre Biseau d&eacute;grad&eacute; (classe GradientBevelFilter)
• filtre Rayonnement d&eacute;grad&eacute; (classe GradientGlowFilter)
• filtre Matrice de couleurs (classe ColorMatrixFilter)
• filtre Convolution (classe ConvolutionFilter)
• filtre Mappage de d&eacute;placement (classe DisplacementMapFilter)
• filtre Shader (classe ShaderFilter)
Les six premiers sont des filtres simples pouvant &ecirc;tre utilis&eacute;s pour des effets sp&eacute;cifiques, avec certains r&eacute;glages
possibles. Ces six filtres peuvent &ecirc;tre appliqu&eacute;s en ActionScript, mais aussi &agrave; partir du panneau Filtres de Flash
Professional. Par cons&eacute;quent, m&ecirc;me si vous appliquez des filtres &agrave; l’aide d’ActionScript, sous r&eacute;serve de disposer de
Flash Professional, vous pouvez utiliser son interface visuelle pour v&eacute;rifier rapidement l’effet des diff&eacute;rents filtres et de
leurs r&eacute;glages afin de cr&eacute;er l’effet d&eacute;sir&eacute;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
284
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Les quatre derniers filtres sont uniquement disponibles en ActionScript. Ces filtres (filtre Matrice de couleurs, filtre
Convolution, filtre Mappage de d&eacute;placement et filtre Shader) permettent de cr&eacute;er des types d’effet beaucoup plus
souples. Plut&ocirc;t que proposer un effet unique optimis&eacute;, ils assurent puissance et souplesse. Par exemple, en choisissant
diff&eacute;rentes valeurs pour sa matrice, il est possible d’utiliser le filtre Convolution pour cr&eacute;er des effets de flou, de
gravure, d’accentuation, mais aussi pour des transformations, la d&eacute;tection de contour des couleurs, etc.
Chacun de ces filtres, qu’il soit simple ou complexe, dispose de propri&eacute;t&eacute;s dont les valeurs peuvent &ecirc;tre modifi&eacute;es. En
g&eacute;n&eacute;ral, il existe deux possibilit&eacute;s pour d&eacute;finir les propri&eacute;t&eacute;s d’un filtre. Tous les filtres permettent de d&eacute;finir leurs
propri&eacute;t&eacute;s en passant des valeurs en param&egrave;tres au constructeur de l’objet filtre. Que les propri&eacute;t&eacute;s du filtre soient
d&eacute;finies ou non par un passage de param&egrave;tres, il est aussi possible de modifier ult&eacute;rieurement ses r&eacute;glages en changeant
les valeurs des propri&eacute;t&eacute;s de l’objet filtre. La plupart des exemples de code d&eacute;finissent directement les propri&eacute;t&eacute;s pour
faciliter la compr&eacute;hension de l’exemple. N&eacute;anmoins, il est &eacute;galement possible, en g&eacute;n&eacute;ral, d’obtenir le m&ecirc;me r&eacute;sultat
avec moins de lignes de code, en passant les valeurs en param&egrave;tres dans le constructeur de l’objet filtre. Pour plus
d’informations sur les caract&eacute;ristiques de chaque filtre, ses propri&eacute;t&eacute;s et les param&egrave;tres constructeurs correspondants,
voir les codes associ&eacute;s au package flash.filters dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme
Adobe Flash.
Filtre Biseau
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe BevelFilter vous permet d’ajouter une bordure en relief &agrave; l’objet filtr&eacute;. Avec ce filtre, les angles et les c&ocirc;t&eacute;s des
objets semblent cisel&eacute;s, biseaut&eacute;s.
Les propri&eacute;t&eacute;s de la classe BevelFilter permettent de modifier l’apparence du biseau. Vous pouvez d&eacute;finir les couleurs
des zones claires et sombres, l’adoucissement et les angles des c&ocirc;t&eacute;s du biseau, ainsi que la tille de ces derniers. Vous
pouvez m&ecirc;me cr&eacute;er un effet de poin&ccedil;onnage.
L’exemple suivant charge une image externe et lui applique un filtre Biseau.
Derni&egrave;re mise &agrave; jour le 27/4/2013
285
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import
import
import
import
import
flash.display.*;
flash.filters.BevelFilter;
flash.filters.BitmapFilterQuality;
flash.filters.BitmapFilterType;
flash.net.URLRequest;
// Load an image onto the Stage.
var imageLoader:Loader = new Loader();
var url:String = &quot;http://www.helpexamples.com/flash/images/image3.jpg&quot;;
var urlReq:URLRequest = new URLRequest(url);
imageLoader.load(urlReq);
addChild(imageLoader);
// Create the bevel filter and set filter properties.
var bevel:BevelFilter = new BevelFilter();
bevel.distance = 5;
bevel.angle = 45;
bevel.highlightColor = 0xFFFF00;
bevel.highlightAlpha = 0.8;
bevel.shadowColor = 0x666666;
bevel.shadowAlpha = 0.8;
bevel.blurX = 5;
bevel.blurY = 5;
bevel.strength = 5;
bevel.quality = BitmapFilterQuality.HIGH;
bevel.type = BitmapFilterType.INNER;
bevel.knockout = false;
// Apply filter to the image.
imageLoader.filters = [bevel];
Filtre Flou
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe BlurFilter ajoute un effet de flou &agrave; un objet d’affichage et son contenu. Les effets de flou permettent de donner
l’impression qu’un objet n’est pas dans le plan de mise au point ou de simuler l’effet d’un mouvement rapide (flou de
mouvement). En choisissant une valeur faible pour la propri&eacute;t&eacute; quality, vous pouvez simuler un effet de photo
l&eacute;g&egrave;rement floue. Le choix d’une valeur &eacute;lev&eacute;e pour la propri&eacute;t&eacute; quality permet d’obtenir un effet de flou l&eacute;ger proche
de celui d’un flou gaussien.
L’exemple suivant cr&eacute;e un objet cercle &agrave; l’aide de la m&eacute;thode drawCircle() de la classe Graphics, puis lui applique un
filtre Flou :
Derni&egrave;re mise &agrave; jour le 27/4/2013
286
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.BlurFilter;
// Draw a circle.
var redDotCutout:Sprite = new Sprite();
redDotCutout.graphics.lineStyle();
redDotCutout.graphics.beginFill(0xFF0000);
redDotCutout.graphics.drawCircle(145, 90, 25);
redDotCutout.graphics.endFill();
// Add the circle to the display list.
addChild(redDotCutout);
// Apply the blur filter to the rectangle.
var blur:BlurFilter = new BlurFilter();
blur.blurX = 10;
blur.blurY = 10;
blur.quality = BitmapFilterQuality.MEDIUM;
redDotCutout.filters = [blur];
Filtre Ombre port&eacute;e
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’ombre port&eacute;e donne l’impression d’une source lumineuse ponctuelle au-dessus de l’objet cible. Il est possible de
modifier la position et l’intensit&eacute; de cette source lumineuse pour produire divers effets d’ombre port&eacute;e.
La classe DropShadowFilter utilise un algorithme similaire &agrave; celui du filtre Flou. La principale diff&eacute;rence tient au fait
que le filtre Ombre port&eacute;e poss&egrave;de quelques propri&eacute;t&eacute;s suppl&eacute;mentaires qui permettent de simuler diverses
caract&eacute;ristiques d’une source lumineuse (canal alpha, couleur, d&eacute;calage et luminosit&eacute;).
Le filtre Ombre port&eacute;e permet aussi d’appliquer des options de transformation au style de l’ombre port&eacute;e (ombre
interne ou externe, ou mode de masquage).
Le code suivant cr&eacute;e un objet Sprite carr&eacute; et lui applique un filtre Ombre port&eacute;e.
Derni&egrave;re mise &agrave; jour le 27/4/2013
287
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import flash.display.Sprite;
import flash.filters.DropShadowFilter;
// Draw a box.
var boxShadow:Sprite = new Sprite();
boxShadow.graphics.lineStyle(1);
boxShadow.graphics.beginFill(0xFF3300);
boxShadow.graphics.drawRect(0, 0, 100, 100);
boxShadow.graphics.endFill();
addChild(boxShadow);
// Apply the drop shadow filter to the box.
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 10;
shadow.angle = 25;
// You can also set other properties, such as the shadow color,
// alpha, amount of blur, strength, quality, and options for
// inner shadows and knockout effects.
boxShadow.filters = [shadow];
Filtre Rayonnement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe GlowFilter applique un effet d’&eacute;clairage aux objets d’affichage afin de sugg&eacute;rer qu’une lumi&egrave;re est braqu&eacute;e &agrave;
partir du dessous de l’objet pour cr&eacute;er un faible rayonnement.
Comme le filtre Ombre port&eacute;e, le filtre Rayonnement poss&egrave;de des propri&eacute;t&eacute;s qui permettent de modifier la distance,
l’angle et la couleur de la source lumineuse en fonction de l’effet d&eacute;sir&eacute;. L’objet GlowFilter comporte aussi plusieurs
options pour modifier le style de rayonnement, notamment le rayonnement interne ou externe et le mode de
masquage.
Le code suivant cr&eacute;e un objet Sprite en forme de croix et lui applique un filtre Rayonnement.
Derni&egrave;re mise &agrave; jour le 27/4/2013
288
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import flash.display.Sprite;
import flash.filters.BitmapFilterQuality;
import flash.filters.GlowFilter;
// Create a cross graphic.
var crossGraphic:Sprite = new Sprite();
crossGraphic.graphics.lineStyle();
crossGraphic.graphics.beginFill(0xCCCC00);
crossGraphic.graphics.drawRect(60, 90, 100, 20);
crossGraphic.graphics.drawRect(100, 50, 20, 100);
crossGraphic.graphics.endFill();
addChild(crossGraphic);
// Apply the glow filter to the cross shape.
var glow:GlowFilter = new GlowFilter();
glow.color = 0x009922;
glow.alpha = 1;
glow.blurX = 25;
glow.blurY = 25;
glow.quality = BitmapFilterQuality.MEDIUM;
crossGraphic.filters = [glow];
Filtre Biseau d&eacute;grad&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe GradientBevelFilter vous permet d’appliquer un effet de biseau optimis&eacute; aux objets d’affichage ou aux objets
BitmapData. L’utilisation d’un d&eacute;grad&eacute; de couleurs sur le biseau am&eacute;liore beaucoup l’effet de relief de celui-ci, en
donnant aux c&ocirc;t&eacute;s un aspect 3D plus r&eacute;aliste.
L’exemple suivant cr&eacute;e un objet rectangle &agrave; l’aide de la m&eacute;thode drawRect() de la classe Shape, puis lui applique un
filtre Biseau d&eacute;grad&eacute; :
Derni&egrave;re mise &agrave; jour le 27/4/2013
289
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import flash.display.Shape;
import flash.filters.BitmapFilterQuality;
import flash.filters.GradientBevelFilter;
// Draw a rectangle.
var box:Shape = new Shape();
box.graphics.lineStyle();
box.graphics.beginFill(0xFEFE78);
box.graphics.drawRect(100, 50, 90, 200);
box.graphics.endFill();
// Apply a gradient bevel to the rectangle.
var gradientBevel:GradientBevelFilter = new GradientBevelFilter();
gradientBevel.distance = 8;
gradientBevel.angle = 225; // opposite of 45 degrees
gradientBevel.colors = [0xFFFFCC, 0xFEFE78, 0x8F8E01];
gradientBevel.alphas = [1, 0, 1];
gradientBevel.ratios = [0, 128, 255];
gradientBevel.blurX = 8;
gradientBevel.blurY = 8;
gradientBevel.quality = BitmapFilterQuality.HIGH;
// Other properties let you set the filter strength and set options
// for inner bevel and knockout effects.
box.filters = [gradientBevel];
// Add the graphic to the display list.
addChild(box);
Filtre Rayonnement d&eacute;grad&eacute;
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe GradientGlowFilter vous permet d’appliquer un effet de rayonnement optimis&eacute; aux objets d’affichage ou aux
objets BitmapData. Cet effet donne davantage de contr&ocirc;le sur le rayonnement, produisant ainsi un effet plus r&eacute;aliste.
De plus, le filtre Rayonnement d&eacute;grad&eacute; permet d’appliquer un rayonnement aux c&ocirc;t&eacute;s int&eacute;rieur, ext&eacute;rieur ou sup&eacute;rieur
de l’objet.
L’exemple suivant dessine un cercle auquel un filtre Rayonnement d&eacute;grad&eacute; est appliqu&eacute;. Le montant de flou horizontal
et vertical augmente &agrave; mesure que le pointeur de la souris s’approche du coin inf&eacute;rieur droit de la sc&egrave;ne. Si l’utilisateur
clique dans la sc&egrave;ne, le niveau de flou augmente.
Derni&egrave;re mise &agrave; jour le 27/4/2013
290
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import
import
import
import
flash.events.MouseEvent;
flash.filters.BitmapFilterQuality;
flash.filters.BitmapFilterType;
flash.filters.GradientGlowFilter;
// Create a new Shape instance.
var shape:Shape = new Shape();
// Draw the shape.
shape.graphics.beginFill(0xFF0000, 100);
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(100, 0);
shape.graphics.lineTo(100, 100);
shape.graphics.lineTo(0, 100);
shape.graphics.lineTo(0, 0);
shape.graphics.endFill();
// Position the shape on the Stage.
addChild(shape);
shape.x = 100;
shape.y = 100;
// Define a gradient glow.
var gradientGlow:GradientGlowFilter = new GradientGlowFilter();
gradientGlow.distance = 0;
gradientGlow.angle = 45;
gradientGlow.colors = [0x000000, 0xFF0000];
gradientGlow.alphas = [0, 1];
gradientGlow.ratios = [0, 255];
gradientGlow.blurX = 10;
gradientGlow.blurY = 10;
gradientGlow.strength = 2;
gradientGlow.quality = BitmapFilterQuality.HIGH;
gradientGlow.type = BitmapFilterType.OUTER;
// Define functions to listen for two events.
function onClick(event:MouseEvent):void
{
gradientGlow.strength++;
shape.filters = [gradientGlow];
}
function onMouseMove(event:MouseEvent):void
{
gradientGlow.blurX = (stage.mouseX / stage.stageWidth) * 255;
gradientGlow.blurY = (stage.mouseY / stage.stageHeight) * 255;
shape.filters = [gradientGlow];
}
stage.addEventListener(MouseEvent.CLICK, onClick);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
Derni&egrave;re mise &agrave; jour le 27/4/2013
291
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Exemple : Combinaison de filtres de base
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple de code suivant applique plusieurs filtres de base, en combinaison avec un timer pour la cr&eacute;ation d’actions
r&eacute;p&eacute;titives, pour obtenir la simulation d’un feu de circulation.
import
import
import
import
import
import
import
import
var
var
var
var
var
var
var
var
var
var
var
var
flash.display.Shape;
flash.events.TimerEvent;
flash.filters.BitmapFilterQuality;
flash.filters.BitmapFilterType;
flash.filters.DropShadowFilter;
flash.filters.GlowFilter;
flash.filters.GradientBevelFilter;
flash.utils.Timer;
count:Number = 1;
distance:Number = 8;
angleInDegrees:Number = 225; // opposite of 45 degrees
colors:Array = [0xFFFFCC, 0xFEFE78, 0x8F8E01];
alphas:Array = [1, 0, 1];
ratios:Array = [0, 128, 255];
blurX:Number = 8;
blurY:Number = 8;
strength:Number = 1;
quality:Number = BitmapFilterQuality.HIGH;
type:String = BitmapFilterType.INNER;
knockout:Boolean = false;
// Draw the rectangle background for the traffic light.
var box:Shape = new Shape();
box.graphics.lineStyle();
box.graphics.beginFill(0xFEFE78);
box.graphics.drawRect(100, 50, 90, 200);
box.graphics.endFill();
// Draw the 3 circles for the three lights.
var stopLight:Shape = new Shape();
stopLight.graphics.lineStyle();
stopLight.graphics.beginFill(0xFF0000);
stopLight.graphics.drawCircle(145,90,25);
stopLight.graphics.endFill();
var cautionLight:Shape = new Shape();
cautionLight.graphics.lineStyle();
cautionLight.graphics.beginFill(0xFF9900);
cautionLight.graphics.drawCircle(145,150,25);
cautionLight.graphics.endFill();
var goLight:Shape = new Shape();
goLight.graphics.lineStyle();
goLight.graphics.beginFill(0x00CC00);
goLight.graphics.drawCircle(145,210,25);
goLight.graphics.endFill();
// Add the graphics to the display list.
addChild(box);
Derni&egrave;re mise &agrave; jour le 27/4/2013
292
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
addChild(stopLight);
addChild(cautionLight);
addChild(goLight);
// Apply a gradient bevel to the traffic light rectangle.
var gradientBevel:GradientBevelFilter = new GradientBevelFilter(distance, angleInDegrees,
colors, alphas, ratios, blurX, blurY, strength, quality, type, knockout);
box.filters = [gradientBevel];
// Create the inner shadow (for lights when off) and glow
// (for lights when on).
var innerShadow:DropShadowFilter = new DropShadowFilter(5, 45, 0, 0.5, 3, 3, 1, 1, true,
false);
var redGlow:GlowFilter = new GlowFilter(0xFF0000, 1, 30, 30, 1, 1, false, false);
var yellowGlow:GlowFilter = new GlowFilter(0xFF9900, 1, 30, 30, 1, 1, false, false);
var greenGlow:GlowFilter = new GlowFilter(0x00CC00, 1, 30, 30, 1, 1, false, false);
// Set the starting state of the lights (green on, red/yellow off).
stopLight.filters = [innerShadow];
cautionLight.filters = [innerShadow];
goLight.filters = [greenGlow];
// Swap the filters based on the count value.
function trafficControl(event:TimerEvent):void
{
if (count == 4)
{
count = 1;
}
switch (count)
{
case 1:
stopLight.filters = [innerShadow];
cautionLight.filters = [yellowGlow];
goLight.filters = [innerShadow];
break;
case 2:
stopLight.filters = [redGlow];
cautionLight.filters = [innerShadow];
goLight.filters = [innerShadow];
break;
case 3:
stopLight.filters = [innerShadow];
cautionLight.filters = [innerShadow];
goLight.filters = [greenGlow];
break;
}
count++;
}
// Create a timer to swap the filters at a 3 second interval.
var timer:Timer = new Timer(3000, 9);
timer.addEventListener(TimerEvent.TIMER, trafficControl);
timer.start();
Derni&egrave;re mise &agrave; jour le 27/4/2013
293
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Filtre Matrice de couleurs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe ColorMatrixFilter permet de manipuler les valeurs de couleur et les valeurs alpha des objets filtr&eacute;s. Il est ainsi
possible de cr&eacute;er des changements de saturation, des rotations de teinte (passage d’une palette d’une plage de couleur
&agrave; une autre), de d&eacute;finir la luminance de la couche alpha et de produire d’autres effets de manipulation des couleurs en
utilisant les valeurs d’un canal couleur pour les appliquer aux autres canaux.
Le principe de fonctionnement de ce filtre est le suivant : les pixels de l’image source sont analys&eacute;s un par un et leurs
composants rouge, vert, bleu et alpha sont s&eacute;par&eacute;s. Les valeurs de la matrice de couleur sont alors multipli&eacute;es par
chacune de ces valeurs, et les r&eacute;sultats sont ajout&eacute;s pour d&eacute;terminer la valeur colorim&eacute;trique r&eacute;sultante qui sera affich&eacute;e
&agrave; l’&eacute;cran pour ce pixel. La propri&eacute;t&eacute; matrix du filtre est un tableau de 20 nombres qui sont utilis&eacute;s pour le calcul de la
couleur finale. Pour plus d’informations sur l’algorithme utilis&eacute; pour calculer les valeurs de couleur, voir la description
de la propri&eacute;t&eacute; matrix de la classe ColorMatrixFilter dans le manuel Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plateforme Adobe Flash.
Filtre Convolution
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe ConvolutionFilter permet d’appliquer un large &eacute;ventail de transformations de traitement d’images aux objets
BitmapData ou aux objets d’affichage, tels que la d&eacute;finition du flou, la d&eacute;tection du contour, l’accentuation,
l’estampage et le biseautage.
Le principe de fonctionnement du filtre Convolution est le suivant : les pixels de l’image source sont analys&eacute;s un par
un pour d&eacute;terminer la couleur finale de ce pixel sur la base de sa valeur et de celles des pixels adjacents. Une matrice,
sous forme d’un tableau de valeurs num&eacute;riques, indique dans quelle mesure la valeur de chaque pixel adjacent
particulier affecte la valeur finale.
Le type de matrice le plus fr&eacute;quemment utilis&eacute; est un tableau de trois par trois. La matrice comporte donc neuf valeurs :
N
N
N
N
P
N
N
N
N
Lorsque le filtre Convolution est appliqu&eacute; &agrave; un pixel donn&eacute;, il analyse la valeur colorim&eacute;trique du pixel lui-m&ecirc;me (&laquo; P &raquo;
dans notre exemple) et celles des pixels environnants (&laquo; N &raquo; dans l’exemple). Toutefois, le choix des valeurs de la
matrice permet de sp&eacute;cifier la priorit&eacute; de certains pixels pour le calcul de l’image r&eacute;sultante.
Par exemple, la matrice suivante, appliqu&eacute;e &agrave; un filtre Convolution, laissera l’image intacte, exactement comme l’image
originale :
0
0
0
0
1
0
0
0
0
L’image n’a pas &eacute;t&eacute; modifi&eacute;e car la valeur du pixel original a une priorit&eacute; relative de 1 pour d&eacute;terminer la couleur du
pixel final, alors que les pixels environnants ont une priorit&eacute; relative de 0 (autrement dit, leur couleur n’affecte pas
l’image finale).
De m&ecirc;me, la matrice suivante provoque un d&eacute;calage &agrave; gauche de tous les pixels d’une image :
0
0
0
0
0
0
0
1
0
Derni&egrave;re mise &agrave; jour le 27/4/2013
294
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Notez que dans cet exemple, le pixel lui-m&ecirc;me n’a aucun effet sur la valeur finale du pixel affich&eacute; au m&ecirc;me
emplacement dans l’image finale : seule la valeur du pixel de droite est utilis&eacute;e pour d&eacute;terminer la valeur r&eacute;sultante de
chaque pixel.
En ActionScript, la matrice est une combinaison d’une occurrence de l’objet Array contenant les valeurs et deux
propri&eacute;t&eacute;s sp&eacute;cifiant le nombre de lignes et de colonnes de la matrice. L’exemple suivant charge une image, puis lui
applique un filtre Convolution sur la base de la matrice du listing pr&eacute;c&eacute;dent :
// Load an image onto the Stage.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;http://www.helpexamples.com/flash/images/image1.jpg&quot;);
loader.load(url);
this.addChild(loader);
function applyFilter(event:MouseEvent):void
{
// Create the convolution matrix.
var matrix:Array = [0, 0, 0,
0, 0, 1,
0, 0, 0];
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 1;
loader.filters = [convolution];
}
loader.addEventListener(MouseEvent.CLICK, applyFilter);
Un point important n’est pas &eacute;vident dans ce code : l’effet de valeurs autres que 1 ou 0 dans la matrice. Par exemple, la
m&ecirc;me matrice avec le chiffre 8 au lieu de 1 dans le coin sup&eacute;rieur droit effectuerait la m&ecirc;me action (d&eacute;calage des pixels
vers la gauche). Toutefois, les couleurs de l’image seraient 8 fois plus lumineuses. En effet, les valeurs finales de couleur
des pixels sont calcul&eacute;es en multipliant les valeurs de la matrice par celles des couleurs originales des pixels, en
additionnant ces valeurs, puis en les divisant par celle de la propri&eacute;t&eacute; divisor du filtre. Notez que, dans cet exemple,
la propri&eacute;t&eacute; divisor a la valeur 1. En r&egrave;gle g&eacute;n&eacute;rale, pour que la luminosit&eacute; des couleurs reste &agrave; peu pr&egrave;s identique &agrave;
celle des couleurs de l’image originale, la propri&eacute;t&eacute; divisor doit avoir une valeur &eacute;gale &agrave; la somme des valeurs de la
matrice. Ainsi, avec une matrice dont la somme des valeurs est 8, et pour un diviseur de 1, l’image r&eacute;sultante sera
environ 8 fois plus lumineuse que l’image originale.
Bien que l’effet de cette matrice ne soit pas tr&egrave;s spectaculaire, d’autres valeurs peuvent &ecirc;tre utilis&eacute;es pour cr&eacute;er divers
effets. Voici quelques ensembles standard de valeurs de matrice permettant d’obtenir divers effets avec une matrice de
trois sur trois :
• Flou de base (diviseur 5) :
0 1 0
1 1 1
0 1 0
• Accentuation (diviseur 1) :
0, -1, 0
-1, 5, -1
0, -1, 0
Derni&egrave;re mise &agrave; jour le 27/4/2013
295
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
• D&eacute;tection des contours (diviseur 1) :
0, -1, 0
-1, 4, -1
0, -1, 0
• Estampage (diviseur 1) :
-2, -1, 0
-1, 1, 1
0, 1, 2
Notez qu’avec la plupart de ces effets, le diviseur est 1. En effet, l’addition des valeurs n&eacute;gatives et des valeurs
positives dans la matrice donne 1 (ou 0 dans le cas de la d&eacute;tection des contours, mais la valeur de la propri&eacute;t&eacute;
divisor ne peut pas &ecirc;tre 0).
Filtre Mappage de d&eacute;placement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe DisplacementMapFilter utilise des valeurs de pixel extraites d’un objet BitmapData (appel&eacute; image de
mappage du d&eacute;placement) pour appliquer un effet de d&eacute;placement &agrave; un nouvel objet. L’image de mappage du
d&eacute;placement est en g&eacute;n&eacute;ral diff&eacute;rente de l’occurrence d’objet d’affichage ou BitmapData &agrave; laquelle le filtre est appliqu&eacute;.
L’effet de d&eacute;placement n&eacute;cessite de d&eacute;placer les pixels de l’image filtr&eacute;e, autrement dit de les d&eacute;caler d’un certain
niveau. Ce filtre permet de cr&eacute;er un effet de d&eacute;calage, de gondole ou de marbrure.
La direction et la valeur du d&eacute;placement appliqu&eacute; &agrave; un pixel donn&eacute; sont d&eacute;termin&eacute;es par la valeur colorim&eacute;trique de
l’image de mappage du d&eacute;placement. Pour utiliser ce filtre, il est n&eacute;cessaire de sp&eacute;cifier l’image de mappage, ainsi que
les valeurs suivantes, qui permettent de contr&ocirc;ler le calcul du d&eacute;placement :
• Point de mappage : emplacement, dans l’image filtr&eacute;e, auquel le coin sup&eacute;rieur gauche du filtre de d&eacute;placement sera
appliqu&eacute;. Ce param&egrave;tre n’est n&eacute;cessaire que pour appliquer le filtre &agrave; une partie de l’image seulement.
• Composant X : canal couleur de l’image de mappage qui affecte la position x des pixels.
• Composant Y : canal couleur de l’image de mappage qui affecte la position y des pixels.
• Echelle X : valeur multiplicatrice qui indique le niveau de d&eacute;placement sur l’axe x.
• Echelle Y : valeur multiplicatrice qui indique le niveau de d&eacute;placement sur l’axe y.
• Mode de filtrage : d&eacute;termine la marche &agrave; suivre dans le cas d’espaces vides cr&eacute;&eacute;s par le d&eacute;calage des pixels. Les
options, d&eacute;finies par des constantes dans la classe DisplacementMapFilterMode, sont d’afficher les pixels originaux
(mode IGNORE), de d&eacute;caler et transf&eacute;rer les pixels de l’autre c&ocirc;t&eacute; de l’image (mode WRAP, qui est le mode par d&eacute;faut),
d’utiliser le pixel d&eacute;plac&eacute; le plus proche (mode CLAMP) ou de remplir ces espaces vides avec une couleur (mode
COLOR).
Pour comprendre le fonctionnement d’un filtre de mappage de d&eacute;placement, prenons un exemple simple. Dans le code
ci-dessous, une image est charg&eacute;e, puis elle est centr&eacute;e sur la sc&egrave;ne et un filtre Mappage de d&eacute;placement lui est appliqu&eacute;,
ce qui d&eacute;place horizontalement (vers la gauche) les pixels de toute l’image.
Derni&egrave;re mise &agrave; jour le 27/4/2013
296
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import
import
import
import
import
import
flash.display.BitmapData;
flash.display.Loader;
flash.events.MouseEvent;
flash.filters.DisplacementMapFilter;
flash.geom.Point;
flash.net.URLRequest;
// Load an image onto the Stage.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;http://www.helpexamples.com/flash/images/image3.jpg&quot;);
loader.load(url);
this.addChild(loader);
var mapImage:BitmapData;
var displacementMap:DisplacementMapFilter;
// This function is called when the image finishes loading.
function setupStage(event:Event):void
{
// Center the loaded image on the Stage.
loader.x = (stage.stageWidth - loader.width) / 2;
loader.y = (stage.stageHeight - loader.height) / 2;
// Create the displacement map image.
mapImage = new BitmapData(loader.width, loader.height, false, 0xFF0000);
// Create the displacement filter.
displacementMap = new DisplacementMapFilter();
displacementMap.mapBitmap = mapImage;
displacementMap.mapPoint = new Point(0, 0);
displacementMap.componentX = BitmapDataChannel.RED;
displacementMap.scaleX = 250;
loader.filters = [displacementMap];
}
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setupStage);
Les propri&eacute;t&eacute;s utilis&eacute;es pour d&eacute;finir le d&eacute;placement sont les suivantes :
• Bitmap de mappage : le bitmap de d&eacute;placement est une nouvelle occurrence de BitmapData, cr&eacute;&eacute;e par code. Ses
dimensions sont identiques &agrave; celles de l’image charg&eacute;e (le d&eacute;placement est donc appliqu&eacute; &agrave; toute l’image). Elle est
remplie de pixels rouges opaques.
• Point de mappage : cette valeur est d&eacute;finie pour le point 0, 0 (ici encore, le d&eacute;placement sera appliqu&eacute; &agrave; toute
l’image).
• Composant X : cette valeur re&ccedil;oit la constante BitmapDataChannel.RED, ce qui signifie que c’est la valeur de rouge
de l’image bitmap de mappage qui d&eacute;terminera le niveau de d&eacute;placement des pixels sur l’axe x.
• Echelle X : cette valeur est r&eacute;gl&eacute;e sur 250. L’image de mappage &eacute;tant enti&egrave;rement rouge, la valeur totale de
d&eacute;placement ne d&eacute;cale l’image que faiblement (environ un demi-pixel). Si cette valeur &eacute;tait de 1, l’image ne serait
donc d&eacute;cal&eacute;e que de 0,5 pixel horizontalement. En choisissant une valeur de 250, nous d&eacute;pla&ccedil;ons l’image d’environ
125 pixels.
Derni&egrave;re mise &agrave; jour le 27/4/2013
297
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Ces valeurs provoquent un d&eacute;placement des pixels de l’image filtr&eacute;e de 250 pixels &agrave; gauche. La direction (gauche ou
droite) et l’importance du d&eacute;placement d&eacute;pendent de la valeur colorim&eacute;trique des pixels de l’image de mappage. Le
principe de fonctionnement de ce filtre est le suivant : il analyse un par un les pixels de l’image filtr&eacute;e (ou tout au moins
ceux de la zone &agrave; laquelle le filtre est appliqu&eacute;, ce qui ici signifie toute l’image), et proc&egrave;de comme suit pour chaque
pixel :
1 Il d&eacute;termine le pixel correspondant dans l’image de mappage. Par exemple, pour calculer la valeur de d&eacute;placement
du pixel du coin sup&eacute;rieur gauche de l’image filtr&eacute;e, le filtre analyse le pixel correspondant dans le coin sup&eacute;rieur
gauche de l’image de mappage.
2 Il d&eacute;termine la valeur du canal de couleur sp&eacute;cifi&eacute; dans le pixel de mappage. Dans cet exemple, le canal de couleur
du composant x est le rouge. Le filtre recherche donc la valeur du canal rouge au point en question dans l’image de
mappage. L’image de mappage &eacute;tant un rouge opaque, le canal rouge du pixel a la valeur 0xFF, soit 255. Cette valeur
est la valeur de d&eacute;placement.
3 Ils comparent ensuite la valeur de d&eacute;placement &agrave; la valeur m&eacute;diane (127, &agrave; mi-chemin entre 0 et 255). Si la valeur
de d&eacute;placement est inf&eacute;rieure &agrave; la valeur m&eacute;diane, le pixel est d&eacute;plac&eacute; dans une direction positive (vers la droite
pour l’axe x, vers le bas pour l’axe y). Par contre, si la valeur de d&eacute;placement est sup&eacute;rieure &agrave; la valeur m&eacute;diane
(comme dans cet exemple), le pixel est d&eacute;plac&eacute; dans une direction n&eacute;gative (vers la gauche pour l’axe x, vers le haut
pour l’axe y). Plus pr&eacute;cis&eacute;ment, le filtre soustrait la valeur de d&eacute;placement de 127, et le r&eacute;sultat (positif ou n&eacute;gatif)
est la valeur relative de d&eacute;placement qui est appliqu&eacute;e.
4 Enfin, ils d&eacute;terminent la valeur r&eacute;elle de d&eacute;placement en calculant le pourcentage de d&eacute;placement complet
repr&eacute;sent&eacute; par la valeur de d&eacute;placement relatif. Dans cet exemple, un rouge &agrave; 100 % provoque un d&eacute;placement de
100 %. Ce pourcentage est ensuite multipli&eacute; par la valeur de l’&eacute;chelle x ou de l’&eacute;chelle y pour d&eacute;terminer le nombre
de pixels de d&eacute;placement &agrave; appliquer. Dans cet exemple, la valeur de d&eacute;placement est 100 % multipli&eacute; par un
multiple de 250, soit environ 125 pixels &agrave; gauche.
Comme nous ne sp&eacute;cifions aucune valeur pour les composants x et y, les valeurs par d&eacute;faut (qui ne provoquent pas de
d&eacute;placement) sont utilis&eacute;es. C’est pourquoi l’image n’est pas d&eacute;plac&eacute;e dans le sens vertical.
Dans cet exemple, le param&egrave;tre par d&eacute;faut de mode de filtrage, WRAP, est utilis&eacute;, si bien que lorsque les pixels sont
d&eacute;plac&eacute;s vers la gauche, l’espace laiss&eacute; vide &agrave; droite est rempli par les pixels qui ont &eacute;t&eacute; d&eacute;cal&eacute;s le long du c&ocirc;t&eacute; gauche
de l’image. Vous pouvez modifier cette valeur pour voir les diff&eacute;rents effets ainsi obtenus. Par exemple, si vous ajoutez
la ligne suivante dans la partie du code qui d&eacute;finit les propri&eacute;t&eacute;s de d&eacute;placement (avant la ligne loader.filters =
[displacementMap]), l’image semble avoir subi un balayage :
displacementMap.mode = DisplacementMapFilterMode.CLAMP;
Le code ci-dessous propose un exemple plus complexe, en utilisant un filtre Mappage de d&eacute;placement pour cr&eacute;er un
effet de loupe dans l’image :
Derni&egrave;re mise &agrave; jour le 27/4/2013
298
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
import
import
import
import
import
import
import
import
import
import
import
import
flash.display.Bitmap;
flash.display.BitmapData;
flash.display.BitmapDataChannel;
flash.display.GradientType;
flash.display.Loader;
flash.display.Shape;
flash.events.MouseEvent;
flash.filters.DisplacementMapFilter;
flash.filters.DisplacementMapFilterMode;
flash.geom.Matrix;
flash.geom.Point;
flash.net.URLRequest;
// Create the gradient circles that will together form the
// displacement map image
var radius:uint = 50;
var type:String = GradientType.LINEAR;
var redColors:Array = [0xFF0000, 0x000000];
var blueColors:Array = [0x0000FF, 0x000000];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
var xMatrix:Matrix = new Matrix();
xMatrix.createGradientBox(radius * 2, radius * 2);
var yMatrix:Matrix = new Matrix();
yMatrix.createGradientBox(radius * 2, radius * 2, Math.PI / 2);
var xCircle:Shape = new Shape();
xCircle.graphics.lineStyle(0, 0, 0);
xCircle.graphics.beginGradientFill(type, redColors, alphas, ratios, xMatrix);
xCircle.graphics.drawCircle(radius, radius, radius);
var yCircle:Shape = new Shape();
yCircle.graphics.lineStyle(0, 0, 0);
yCircle.graphics.beginGradientFill(type, blueColors, alphas, ratios, yMatrix);
yCircle.graphics.drawCircle(radius, radius, radius);
// Position the circles at the bottom of the screen, for reference.
this.addChild(xCircle);
xCircle.y = stage.stageHeight - xCircle.height;
this.addChild(yCircle);
yCircle.y = stage.stageHeight - yCircle.height;
yCircle.x = 200;
// Load an image onto the Stage.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest(&quot;http://www.helpexamples.com/flash/images/image1.jpg&quot;);
loader.load(url);
this.addChild(loader);
// Create the map image by combining the two gradient circles.
var map:BitmapData = new BitmapData(xCircle.width, xCircle.height, false, 0x7F7F7F);
map.draw(xCircle);
var yMap:BitmapData = new BitmapData(yCircle.width, yCircle.height, false, 0x7F7F7F);
yMap.draw(yCircle);
map.copyChannel(yMap, yMap.rect, new Point(0, 0), BitmapDataChannel.BLUE,
BitmapDataChannel.BLUE);
Derni&egrave;re mise &agrave; jour le 27/4/2013
299
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
yMap.dispose();
// Display the map image on the Stage, for reference.
var mapBitmap:Bitmap = new Bitmap(map);
this.addChild(mapBitmap);
mapBitmap.x = 400;
mapBitmap.y = stage.stageHeight - mapBitmap.height;
// This function creates the displacement map filter at the mouse location.
function magnify():void
{
// Position the filter.
var filterX:Number = (loader.mouseX) - (map.width / 2);
var filterY:Number = (loader.mouseY) - (map.height / 2);
var pt:Point = new Point(filterX, filterY);
var xyFilter:DisplacementMapFilter = new DisplacementMapFilter();
xyFilter.mapBitmap = map;
xyFilter.mapPoint = pt;
// The red in the map image will control x displacement.
xyFilter.componentX = BitmapDataChannel.RED;
// The blue in the map image will control y displacement.
xyFilter.componentY = BitmapDataChannel.BLUE;
xyFilter.scaleX = 35;
xyFilter.scaleY = 35;
xyFilter.mode = DisplacementMapFilterMode.IGNORE;
loader.filters = [xyFilter];
}
// This function is called when the mouse moves. If the mouse is
// over the loaded image, it applies the filter.
function moveMagnifier(event:MouseEvent):void
{
if (loader.hitTestPoint(loader.mouseX, loader.mouseY))
{
magnify();
}
}
loader.addEventListener(MouseEvent.MOUSE_MOVE, moveMagnifier);
Derni&egrave;re mise &agrave; jour le 27/4/2013
300
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Ce code g&eacute;n&egrave;re d’abord deux cercles en d&eacute;grad&eacute;, qui sont combin&eacute;s pour former l’image de mappage du d&eacute;placement.
Le cercle rouge est &agrave; l’origine du d&eacute;placement sur l’axe x (xyFilter.componentX = BitmapDataChannel.RED) et le
cercle bleu est &agrave; l’origine du d&eacute;placement sur l’axe y (xyFilter.componentY = BitmapDataChannel.BLUE). Pour
vous permettre de comprendre plus ais&eacute;ment l’aspect de l’image de mappage du d&eacute;placement, le code affiche les cercles
originaux, ainsi que le cercle combin&eacute; qui fait office d’image de mappage, en bas de l’&eacute;cran.
Le code charge ensuite une image et, en fonction des d&eacute;placements de la souris, applique le filtre de d&eacute;placement &agrave; la
partie de l’image qui est sous la souris. Les cercles d&eacute;grad&eacute;s utilis&eacute;s pour l’image de mappage de d&eacute;placement
provoquent un effet centrifuge dans la zone &agrave; laquelle le filtre est appliqu&eacute;. Notez que les zones en gris de l’image de
mappage du d&eacute;placement ne provoquent pas de d&eacute;placement. En effet, la valeur du gris est 0x7F7F7F. Les canaux bleu
et rouge de ce niveau de gris ont donc exactement une valeur m&eacute;diane, si bien qu’il n’y a pas de d&eacute;placement lorsqu’une
zone grise appara&icirc;t dans l’image de mappage. Il n’y a pas non plus de d&eacute;placement au centre du cercle. Bien que cette
zone ne soit pas de couleur grise, ses canaux rouge et bleu ont des valeurs identiques &agrave; celles des canaux rouge et bleu
du gris moyen, et puisque le d&eacute;placement est bas&eacute; sur les valeurs de bleu et de rouge, aucun d&eacute;placement n’a lieu.
Filtre Shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La classe ShaderFilter vous permet d’utiliser un effet de filtre personnalis&eacute; d&eacute;fini en tant que shader de Pixel Bender.
Parce que l’effet de filtre est &eacute;crit en tant que shader de Pixel Bender, il peut &ecirc;tre enti&egrave;rement personnalis&eacute;. Le contenu
filtr&eacute; est transmis au shader en tant qu’image d’entr&eacute;e et le r&eacute;sultat de l’op&eacute;ration du shader devient le r&eacute;sultat du filtre.
Remarque : le filtre Shader est pris en charge dans ActionScript &agrave; partir de Flash Player 10 et Adobe AIR 1.5.
Pour appliquer un filtre Shader &agrave; un objet, vous devez commencer par cr&eacute;er une occurrence de Shader repr&eacute;sentant le
shader de Pixel Bender en cours d’utilisation. Pour plus d’informations concernant la proc&eacute;dure de cr&eacute;ation d’une
occurrence de Shader et la d&eacute;finition d’une image d’entr&eacute;e et des param&egrave;tres correspondants, voir &laquo; Utilisation des
shaders de Pixel Bender &raquo; &agrave; la page 310.
Lorsque vous utilisez un shader en tant que filtre, vous devez tenir compte de trois consid&eacute;rations importantes :
• Le shader doit &ecirc;tre d&eacute;fini pour accepter au moins une image d’entr&eacute;e.
Derni&egrave;re mise &agrave; jour le 27/4/2013
301
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
• L’objet filtr&eacute; (objet d’affichage ou objet BitmapData auquel est appliqu&eacute; le filtre) est transmis au shader en tant que
premi&egrave;re valeur d’image d’entr&eacute;e. De ce fait, ne d&eacute;finissez pas manuellement la valeur de la premi&egrave;re image
d’entr&eacute;e.
• Si le shader d&eacute;finit plusieurs images d’entr&eacute;e, les autres entr&eacute;es doivent &ecirc;tre stipul&eacute;es manuellement (en d&eacute;finissant
la propri&eacute;t&eacute; input de toute occurrence de ShaderInput appartenant &agrave; l’occurrence de Shader).
Lorsque vous disposez d’un objet Shader pour le shader, vous cr&eacute;ez une occurrence de ShaderFilter. Il s’agit de l’objet
filtre en tant que tel utilis&eacute; comme tout autre filtre. Pour cr&eacute;er un &eacute;l&eacute;ment ShaderFilter qui utilise un objet Shader,
appelez le constructeur ShaderFilter() et transmettez l’objet Shader en tant qu’argument, comme illustr&eacute; dans le
code suivant :
var myFilter:ShaderFilter = new ShaderFilter(myShader);
Pour disposer d’un exemple complet d’utilisation d’un filtre Shader, voir &laquo; Utilisation d’un shader comme filtre &raquo; &agrave; la
page 328.
Exemple de filtrage des objets d’affichage : Filter
Workbench
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’exemple Filter Workbench comporte une interface utilisateur qui permet d’appliquer divers filtres &agrave; des images et
autre contenu visuel et de voir le code r&eacute;sultant, qui peut &ecirc;tre utilis&eacute; pour g&eacute;n&eacute;rer le m&ecirc;me effet en ActionScript. Non
seulement cette application fournit un outil permettant d’exp&eacute;rimenter avec les filtres, mais elle illustre &eacute;galement les
techniques suivantes :
• Cr&eacute;ation d’occurrences de filtres divers
• Application de plusieurs filtres &agrave; un objet d’affichage
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application Filter Workbench r&eacute;sident
dans le dossier Samples/FilterWorkbench. L’application se compose des fichiers suivants :
Derni&egrave;re mise &agrave; jour le 27/4/2013
302
303
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Fichier
Description
com/example/programmingas3/filterWorkbench/FilterWorkbenchController.as
Classe qui fournit la principale fonctionnalit&eacute; de
l’application, notamment permuter le contenu
auquel sont appliqu&eacute;s les filtres et appliquer les
filtres au contenu.
com/example/programmingas3/filterWorkbench/IFilterFactory.as
Interface qui d&eacute;finit les m&eacute;thodes courantes et
impl&eacute;ment&eacute;es par chacune des classes usine de
filtres. Cette interface d&eacute;finit la fonctionnalit&eacute;
commune utilis&eacute;e par la classe
FilterWorkbenchController pour interagir avec
chaque classe usine de filtres.
Dans le dossier com/example/programmingas3/filterWorkbench/ :
Jeu de classes, dont chacune impl&eacute;mente l’interface
IFilterFactory. Chacune de ces classes permet de
cr&eacute;er et de d&eacute;finir les valeurs associ&eacute;es &agrave; un type
unique de filtre. Les panneaux de propri&eacute;t&eacute;s des
filtres de l’application utilisent ces classes usine pour
cr&eacute;er des occurrences des filtres correspondants,
que la classe FilterWorkbenchController extrait et
applique au contenu d’image.
BevelFactory.as
BlurFactory.as
ColorMatrixFactory.as
ConvolutionFactory.as
DropShadowFactory.as
GlowFactory.as
GradientBevelFactory.as
GradientGlowFactory.as
com/example/programmingas3/filterWorkbench/IFilterPanel.as
Interface qui d&eacute;finit les m&eacute;thodes courantes et
impl&eacute;ment&eacute;es par les classes qui sp&eacute;cifient les
panneaux de l’interface utilisateur employ&eacute;s pour
manipuler les valeurs de filtre dans l’application.
com/example/programmingas3/filterWorkbench/ColorStringFormatter.as
Classe d’utilitaires qui comporte une m&eacute;thode de
conversion d’une valeur de couleur num&eacute;rique au
format cha&icirc;ne hexad&eacute;cimal.
com/example/programmingas3/filterWorkbench/GradientColor.as
Classe servant d’objet de valeur, qui combine en un
objet unique les trois valeurs (couleur, alpha et
rapport) associ&eacute;es &agrave; chaque couleur dans
GradientBevelFilter et GradientGlowFilter.
Interface utilisateur (Flex)
FilterWorkbench.mxml
Fichier principal qui d&eacute;finit l’interface utilisateur de
l’application.
flexapp/FilterWorkbench.as
Classe qui assure la fonctionnalit&eacute; de l’interface
utilisateur de l’application principale. Elle sert de
classe code-behind au fichier MXML de l’application.
Dans le dossier flexapp/filterPanels :
Jeu de composants MXML qui assurent la
fonctionnalit&eacute; de chaque panneau utilis&eacute; pour
d&eacute;finir les options d’un filtre unique.
BevelPanel.mxml
BlurPanel.mxml
ColorMatrixPanel.mxml
ConvolutionPanel.mxml
DropShadowPanel.mxml
GlowPanel.mxml
GradientBevelPanel.mxml
GradientGlowPanel.mxml
Derni&egrave;re mise &agrave; jour le 27/4/2013
304
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Fichier
Description
flexapp/ImageContainer.as
Objet d’affichage qui sert de conteneur &agrave; l’image
charg&eacute;e &agrave; l’&eacute;cran.
flexapp/controls/BGColorCellRenderer.as
Composant de rendu de cellule personnalis&eacute;
permettant de modifier la couleur d’arri&egrave;re-plan
d’une cellule dans le composant DataGrid
flexapp/controls/QualityComboBox.as
Contr&ocirc;le personnalis&eacute; qui d&eacute;finit une liste
d&eacute;roulante modifiable associ&eacute;e au param&egrave;tre
Qualit&eacute; dans plusieurs panneaux de filtre.
flexapp/controls/TypeComboBox.as
Contr&ocirc;le personnalis&eacute; qui d&eacute;finit une liste
d&eacute;roulante modifiable associ&eacute;e au param&egrave;tre Type
dans plusieurs panneaux de filtre.
Interface utilisateur (Flash)
FilterWorkbench.fla
Fichier principal qui d&eacute;finit l’interface utilisateur de
l’application.
flashapp/FilterWorkbench.as
Classe qui assure la fonctionnalit&eacute; de l’interface
utilisateur de l’application principale. Elle sert de
classe de document au fichier FLA de l’application.
Dans le dossier flashapp/filterPanels :
Jeu de classes qui assurent la fonctionnalit&eacute; de
chaque panneau utilis&eacute; pour d&eacute;finir les options d’un
filtre unique.
BevelPanel.as
BlurPanel.as
A chaque classe correspond &eacute;galement un symbole
MovieClip dans la biblioth&egrave;que du fichier FLA de
l’application principale, dont le nom est identique &agrave;
celui de la classe (par exemple, le symbole
&laquo; BlurPanel &raquo; est li&eacute; &agrave; la classe d&eacute;finie dans
BlurPanel.as). Les composants de l’interface
utilisateur sont plac&eacute;s et identifi&eacute;s par nom dans ces
symboles.
ColorMatrixPanel.as
ConvolutionPanel.as
DropShadowPanel.as
GlowPanel.as
GradientBevelPanel.as
GradientGlowPanel.as
flashapp/ImageContainer.as
Objet d’affichage qui sert de conteneur &agrave; l’image
charg&eacute;e &agrave; l’&eacute;cran.
flashapp/BGColorCellRenderer.as
Composant de rendu de cellule personnalis&eacute;
permettant de modifier la couleur d’arri&egrave;re-plan
d’une cellule dans le composant DataGrid
flashapp/ButtonCellRenderer.as
Composant de rendu de cellule personnalis&eacute;
permettant d’ins&eacute;rer un composant Button dans
une cellule du composant DataGrid
Contenu d’image filtr&eacute;
com/example/programmingas3/filterWorkbench/ImageType.as
Cette classe sert d’objet de valeur contenant le type
et l’URL d’un fichier d’image unique, dans lequel
l’application peut charger et appliquer des filtres.
Cette classe comporte &eacute;galement un jeu de
constantes qui repr&eacute;sentent les fichiers d’image en
tant que tels disponibles.
images/sampleAnimation.swf,
Images et autre contenu visuel auxquels sont
appliqu&eacute;s des filtres dans l’application.
images/sampleImage1.jpg,
images/sampleImage2.jpg
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Utilisation des filtres ActionScript
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’application Filter Workbench est con&ccedil;ue pour vous aider &agrave; exp&eacute;rimenter avec divers effets de filtre et g&eacute;n&eacute;rer le code
ActionScript appropri&eacute; correspondant. Elle vous permet de s&eacute;lectionner trois fichiers distincts comportant un contenu
visuel, tel que des images bitmap et une animation cr&eacute;&eacute;e par Flash et d’appliquer huit filtres ActionScript distincts &agrave;
l’image s&eacute;lectionn&eacute;e, soit seuls, soit combin&eacute;s &agrave; d’autres filtres. L’application comprend les filtres suivants :
• Biseau (flash.filters.BevelFilter)
• Flou (flash.filters.BlurFilter)
• Matrice de couleurs (flash.filters.ColorMatrixFilter)
• Convolution (flash.filters.ConvolutionFilter)
• Ombre port&eacute;e (flash.filters.DropShadowFilter)
• Rayonnement (flash.filters.GlowFilter)
• Biseau d&eacute;grad&eacute; (flash.filters.GradientBevelFilter)
• Rayonnement d&eacute;grad&eacute; (flash.filters.GradientGlowFilter)
Lorsqu’un utilisateur a s&eacute;lectionn&eacute; une image et un filtre &agrave; appliquer &agrave; celle-ci, l’application affiche un panneau
contenant des contr&ocirc;les de d&eacute;finition des propri&eacute;t&eacute;s du filtre s&eacute;lectionn&eacute;. Par exemple, l’image suivante illustre
l’application dans laquelle est s&eacute;lectionn&eacute; le filtre Biseau :
Lorsque l’utilisateur r&egrave;gle les propri&eacute;t&eacute;s du filtre, l’aper&ccedil;u est actualis&eacute; en temps r&eacute;el. L’utilisateur peut &eacute;galement
appliquer plusieurs filtres. Pour ce faire, il personnalise un filtre, clique sur le bouton Apply, personnalise un autre
filtre, clique sur le bouton Apply, et ainsi de suite.
Derni&egrave;re mise &agrave; jour le 27/4/2013
305
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Les panneaux de filtre de l’application proposent diverses fonctions et sont soumis &agrave; quelques limites :
• Le filtre Matrice de couleurs comprend un jeu de contr&ocirc;les permettant de manipuler directement des propri&eacute;t&eacute;s
d’image courantes telles que la luminosit&eacute;, les contrastes, la saturation et la teinte. Il est &eacute;galement possible de
d&eacute;finir des valeurs de matrice de couleurs personnalis&eacute;es.
• Le filtre Convolution, qui n’est disponible qu’en ActionScript, comprend un jeu de valeurs de matrice de
convolution couramment utilis&eacute;es. Il est &eacute;galement possible de d&eacute;finir des valeurs personnalis&eacute;es. Toutefois, bien
que la classe ConvolutionFilter g&egrave;re une matrice de n’importe quelle taille, l’application Filter Workbench utilise
une matrice de 3 x 3 fixe, soit la taille de filtre la plus fr&eacute;quemment utilis&eacute;e.
• Le filtre Mappage de d&eacute;placement et le filtre Shader, r&eacute;serv&eacute;s &agrave; ActionScript, ne sont pas disponibles dans
l’application Filter Workbench.
Cr&eacute;ation d’occurrences de filtre
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’application Filter Workbench comprend un jeu de classes, une par filtre disponible, qui sont utilis&eacute;es par les divers
panneaux pour cr&eacute;er les filtres. Lorsqu’un utilisateur s&eacute;lectionne un filtre, le code ActionScript associ&eacute; au panneau de
filtre cr&eacute;e une occurrence de la classe de filtres usine appropri&eacute;e. (Ces classes portent le nom de classes usine, car elles
ont pour objet de cr&eacute;er des occurrences d’autres objets, &agrave; l’instar d’une vraie usine qui fabrique des produits).
Lorsque l’utilisateur modifie la valeur d’une propri&eacute;t&eacute; dans le panneau, le code correspondant appelle la m&eacute;thode
appropri&eacute;e dans la classe usine. Chaque classe usine comporte des m&eacute;thodes sp&eacute;cifiques utilis&eacute;es par le panneau pour
cr&eacute;er l’occurrence de filtre appropri&eacute;e. Par exemple, si l’utilisateur s&eacute;lectionne le filtre Flou, l’application cr&eacute;e une
occurrence de BlurFactory. La classe BlurFactory comporte une m&eacute;thode modifyFilter() qui g&egrave;re trois param&egrave;tres :
blurX, blurY et quality. Conjointement, ces param&egrave;tres permettent de cr&eacute;er l’occurrence de BlurFilter requise :
private var _filter:BlurFilter;
public function modifyFilter(blurX:Number = 4, blurY:Number = 4, quality:int = 1):void
{
_filter = new BlurFilter(blurX, blurY, quality);
dispatchEvent(new Event(Event.CHANGE));
}
En revanche, si l’utilisateur s&eacute;lectionne le filtre Convolution, celui-ci &eacute;tant beaucoup plus souple, il contr&ocirc;le un
nombre sup&eacute;rieur de propri&eacute;t&eacute;s. Dans la classe ConvolutionFactory, le code suivant est appel&eacute; lorsque l’utilisateur
s&eacute;lectionne une autre valeur dans le panneau des filtres :
Derni&egrave;re mise &agrave; jour le 27/4/2013
306
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
private var _filter:ConvolutionFilter;
public function modifyFilter(matrixX:Number = 0,
matrixY:Number = 0,
matrix:Array = null,
divisor:Number = 1.0,
bias:Number = 0.0,
preserveAlpha:Boolean = true,
clamp:Boolean = true,
color:uint = 0,
alpha:Number = 0.0):void
{
_filter = new ConvolutionFilter(matrixX, matrixY, matrix, divisor, bias, preserveAlpha,
clamp, color, alpha);
dispatchEvent(new Event(Event.CHANGE));
}
Notez que dans chaque cas, lorsque les valeurs du filtre sont modifi&eacute;es, l’objet usine distribue un &eacute;v&eacute;nement
Event.CHANGE pour avertir les &eacute;couteurs de la modification. La classe FilterWorkbenchController, qui applique les
filtres au contenu filtr&eacute;, recherche cet &eacute;v&eacute;nement pour s’assurer qu’elle doit extraire une nouvelle copie du filtre et
l’appliquer &agrave; nouveau au contenu filtr&eacute;.
La classe FilterWorkbenchController n’a pas besoin de conna&icirc;tre les d&eacute;tails pr&eacute;cis de chaque classe usine associ&eacute; au
filtre. Elle doit juste savoir que le filtre a &eacute;t&eacute; modifi&eacute; et &ecirc;tre en mesure d’acc&eacute;der &agrave; une copie de ce dernier. A cet effet,
l’application comporte une interface, IFilterFactory, qui d&eacute;finit le comportement requis d’une classe usine de filtres
pour que l’occurrence de FilterWorkbenchController de l’application soit en mesure de fonctionner correctement.
L’interface IFilterFactory d&eacute;finit la m&eacute;thode getFilter() utilis&eacute;e par la classe FilterWorkbenchController :
function getFilter():BitmapFilter;
Notez que la d&eacute;finition de la m&eacute;thode de l’interface getFilter() stipule de renvoyer une occurrence de BitmapFilter
plut&ocirc;t qu’un type d&eacute;termin&eacute; de filtre. La classe BitmapFilter ne d&eacute;finit pas de type sp&eacute;cifique de filtre. BitmapFilter
constitue de fait la classe de base sur laquelle se fondent toutes les classes de filtre. Chaque classe usine de filtres d&eacute;finit
une impl&eacute;mentation d&eacute;termin&eacute;e de la m&eacute;thode getFilter(), dans laquelle elle renvoie une r&eacute;f&eacute;rence &agrave; l’objet filtre
g&eacute;n&eacute;r&eacute;. Par exemple, une version abr&eacute;g&eacute;e du code source de la classe ConvolutionFactory est illustr&eacute;e ci-apr&egrave;s :
public class ConvolutionFactory extends EventDispatcher implements IFilterFactory
{
// ------- Private vars ------private var _filter:ConvolutionFilter;
...
// ------- IFilterFactory implementation ------public function getFilter():BitmapFilter
{
return _filter;
}
...
}
Dans l’impl&eacute;mentation de la classe ConvolutionFactory de la m&eacute;thode getFilter(), elle renvoie une occurrence de
ConvolutionFilter, bien que tout objet qui appelle getFilter() ne sache pas n&eacute;cessairement que, conform&eacute;ment &agrave; la
d&eacute;finition de la m&eacute;thode getFilter() appliqu&eacute;e par ConvolutionFactory, il doit renvoyer toute occurrence de
BitmapFilter, soit une occurrence de n’importe quelle classe de filtre ActionScript.
Derni&egrave;re mise &agrave; jour le 27/4/2013
307
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
Application de filtres aux objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Comme indiqu&eacute; pr&eacute;c&eacute;demment, l’application Filter Workbench utilise une occurrence de la classe
FilterWorkbenchController (appel&eacute;e &agrave; partir de maintenant l’&laquo; occurrence de contr&ocirc;leur &raquo;), charg&eacute;e d’appliquer les
filtres &agrave; l’objet visuel s&eacute;lectionn&eacute;. Avant que l’occurrence de contr&ocirc;leur ne puisse appliquer un filtre, elle doit identifier
l’image ou le contenu visuel concern&eacute;. Lorsque l’utilisateur s&eacute;lectionne une image, l’application appelle la m&eacute;thode
setFilterTarget() de la classe FilterWorkbenchController et transmet l’une des constantes d&eacute;finies dans la classe
ImageType :
public function setFilterTarget(targetType:ImageType):void
{
...
_loader = new Loader();
...
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, targetLoadComplete);
...
}
En se r&eacute;f&eacute;rant &agrave; ces informations, l’occurrence de contr&ocirc;leur charge le fichier indiqu&eacute;, puis le stocke dans une variable
d’occurrence appel&eacute;e _currentTarget :
private var _currentTarget:DisplayObject;
private function targetLoadComplete(event:Event):void
{
...
_currentTarget = _loader.content;
...
}
Lorsque l’utilisateur s&eacute;lectionne un filtre, l’application appelle la m&eacute;thode setFilter() de l’occurrence de contr&ocirc;leur
en indiquant au contr&ocirc;leur une r&eacute;f&eacute;rence &agrave; l’objet Filter Factory appropri&eacute;, qu’elle stocke dans une variable
d’occurrence appel&eacute;e _filterFactory.
private var _filterFactory:IFilterFactory;
public function setFilter(factory:IFilterFactory):void
{
...
_filterFactory = factory;
_filterFactory.addEventListener(Event.CHANGE, filterChange);
}
Notez que, comme indiqu&eacute; pr&eacute;c&eacute;demment, l’occurrence de contr&ocirc;leur ne conna&icirc;t pas le type de donn&eacute;es pr&eacute;cis de
l’occurrence de Filter Factory assign&eacute;. Elle ne sait qu’une chose, c’est que l’objet impl&eacute;mente l’occurrence de
IFilterFactory, ce qui signifie qu’il poss&egrave;de une m&eacute;thode getFilter() et distribue un &eacute;v&eacute;nement change
(Event.CHANGE) lorsque le filtre est modifi&eacute;.
Lorsque l’utilisateur modifie les propri&eacute;t&eacute;s d’un filtre dans le panneau des filtres, l’occurrence de contr&ocirc;leur est avertie
de la modification par l’&eacute;v&eacute;nement change de Filter Factory, qui appelle la m&eacute;thode filterChange() de l’occurrence
de contr&ocirc;leur. Cette m&eacute;thode appelle alors la m&eacute;thode applyTemporaryFilter() :
Derni&egrave;re mise &agrave; jour le 27/4/2013
308
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Filtrage des objets d’affichage
private function filterChange(event:Event):void
{
applyTemporaryFilter();
}
private function applyTemporaryFilter():void
{
var currentFilter:BitmapFilter = _filterFactory.getFilter();
// Add the current filter to the set temporarily
_currentFilters.push(currentFilter);
// Refresh the filter set of the filter target
_currentTarget.filters = _currentFilters;
// Remove the current filter from the set
// (This doesn't remove it from the filter target, since
// the target uses a copy of the filters array internally.)
_currentFilters.pop();
}
L’application du filtre &agrave; l’objet d’affichage se produit au sein de la m&eacute;thode applyTemporaryFilter(). Le contr&ocirc;leur
extrait d’abord une r&eacute;f&eacute;rence &agrave; l’objet filtre en appelant la m&eacute;thode getFilter() de Filter Factory.
var currentFilter:BitmapFilter = _filterFactory.getFilter();
L’occurrence de contr&ocirc;leur poss&egrave;de une variable d’occurrence de Array appel&eacute;e _currentFilters, dans laquelle elle
stocke tous les filtres appliqu&eacute;s &agrave; l’objet d’affichage. L’&eacute;tape suivante consiste &agrave; ajouter le filtre mis &agrave; jour &agrave; ce tableau :
_currentFilters.push(currentFilter);
Le code assigne ensuite le tableau de filtres &agrave; la propri&eacute;t&eacute; filters de l’objet d’affichage, qui applique &agrave; proprement
parler les filtres &agrave; l’image :
_currentTarget.filters = _currentFilters;
Enfin, puisque le filtre appliqu&eacute; en dernier demeure le filtre de &laquo; travail &raquo;, il ne doit pas &ecirc;tre appliqu&eacute; &agrave; titre d&eacute;finitif &agrave;
l’objet d’affichage. Il est donc supprim&eacute; du tableau _currentFilters :
_currentFilters.pop();
Supprimer ce filtre du tableau n’affecte pas l’objet d’affichage filtr&eacute;, car un objet d’affichage effectue une copie du
tableau de filtres lorsqu’il est assign&eacute; &agrave; la propri&eacute;t&eacute; filters et utilise ce tableau interne au lieu du tableau initial. De
ce fait, toute modification du tableau de filtres n’affecte pas l’objet d’affichage tant que le tableau n’a pas &eacute;t&eacute; &agrave; nouveau
assign&eacute; &agrave; la propri&eacute;t&eacute; filters de l’objet d’affichage.
Derni&egrave;re mise &agrave; jour le 27/4/2013
309
310
Chapitre 15 : Utilisation des shaders de
Pixel Bender
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Adobe Pixel Bender Toolkit permet aux d&eacute;veloppeurs de composer des shaders qui cr&eacute;ent des effets graphiques et
autres. Le pseudo-code binaire Pixel Bender peut &ecirc;tre ex&eacute;cut&eacute; dans ActionScript pour appliquer l’effet aux donn&eacute;es de
l’image ou au contenu visuel. L’utilisation des shaders de Pixel Bender vous donne la possibilit&eacute; de cr&eacute;er des effets
visuels personnalis&eacute;s et de traiter des donn&eacute;es au-del&agrave; des fonctions incorpor&eacute;es &agrave; ActionScript.
Remarque : Pixel Bender est pris en charge depuis Flash Player 10 et Adobe AIR 1.5. Les fusions, filtres et remplissages
Pixel Bender ne sont pas pris en charge en cas de rendu par le processeur graphique.
Voir aussi
Adobe Pixel Bender Technology Center
Pixel Bender Developer’s Guide (disponible en anglais uniquement)
Pixel Bender Reference (disponible en anglais uniquement)
flash.display.Shader
flash.filters.ShaderFilter
Pixel Bender basics for Flash (disponible en anglais uniquement)
Pixel Bender basics for Flex (disponible en anglais uniquement)
Principes de base des shaders de Pixel Bender
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Adobe Pixel Bender est un langage de programmation qui permet de cr&eacute;er ou de manipuler un contenu d’image. Par
le biais de Pixel Bender, vous cr&eacute;ez un noyau, &eacute;galement appel&eacute; un shader. Le shader d&eacute;finit une fonction unique
ex&eacute;cut&eacute;e s&eacute;par&eacute;ment sur chacun des pixels d’une image. Le r&eacute;sultat de chaque appel &agrave; la fonction est la couleur de sortie
aux coordonn&eacute;es de ce pixel dans l’image. Vous pouvez sp&eacute;cifier des valeurs de param&egrave;tre et images d’entr&eacute;e pour
personnaliser l’op&eacute;ration. Si un shader est ex&eacute;cut&eacute; une seule fois, les valeurs de param&egrave;tres et d’entr&eacute;e sont des
constantes. Les seuls &eacute;l&eacute;ments qui varient sont les coordonn&eacute;es du pixel dont la couleur est le r&eacute;sultat de l’appel de la
fonction.
Dans la mesure du possible, la fonction shader est appel&eacute;e pour plusieurs coordonn&eacute;es de pixel de sortie en parall&egrave;le.
Les performances du shader sont ainsi optimis&eacute;es et le traitement s’av&egrave;re souvent particuli&egrave;rement efficace.
ActionScript permet de cr&eacute;er facilement trois types d’effets par le biais d’un shader :
• remplissage d’un dessin
• mode de fondu
• filtre
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Il est &eacute;galement possible d’ex&eacute;cuter un shader en mode autonome. En mode autonome, vous acc&eacute;dez directement au
r&eacute;sultat d’un shader au lieu de pr&eacute;d&eacute;finir l’usage pr&eacute;vu. Le r&eacute;sultat correspond &agrave; des donn&eacute;es d’image, des donn&eacute;es
binaires ou des donn&eacute;es num&eacute;riques. Il n’est pas n&eacute;cessaire que les donn&eacute;es soient des donn&eacute;es d’image. Vous pouvez
ainsi affecter &agrave; un shader un jeu de donn&eacute;es en entr&eacute;e. Le shader traite les donn&eacute;es et vous acc&eacute;dez au r&eacute;sultat qu’il
renvoie.
Pixel Bender est pris en charge depuis Flash Player version 10 et Adobe AIR version 1.5. Les fusions, filtres et
remplissages Pixel Bender ne sont pas pris en charge en cas de rendu par processeur graphique. Sur un p&eacute;riph&eacute;rique
mobile, les shaders Pixel Bender sont ex&eacute;cut&eacute;s en cas de rendu par unit&eacute; centrale. Les performances ne sont toutefois
pas &agrave; la hauteur de celles d’un poste de travail. De nombreux programmes de shader ne s’ex&eacute;cutent qu’&agrave; quelques
images par seconde.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs &agrave; la cr&eacute;ation et &agrave; l’utilisation de shaders de Pixel
Bender :
Noyau Pour Pixel Bender, un noyau est &eacute;quivalent &agrave; un shader. Par le biais de Pixel Bender, votre code d&eacute;finit un
noyau, qui d&eacute;finit une fonction unique ex&eacute;cut&eacute;e s&eacute;par&eacute;ment sur chacun des pixels d’une image.
Pseudo-code binaire Pixel Bender Lorsqu’un noyau Pixel Bender est compil&eacute;, il est transform&eacute; en pseudo-code binaire
Pixel Bender. L’acc&egrave;s au pseudo-code binaire et son ex&eacute;cution se produisent lors de l’ex&eacute;cution.
Langage Pixel Bender Langage de programmation utilis&eacute; pour cr&eacute;er un noyau Pixel Bender.
Pixel Bender Toolkit Application utilis&eacute;e pour cr&eacute;er un fichier de pseudo-code binaire Pixel Bender &agrave; partir du code
source Pixel Bender. Elle vous permet d’&eacute;crire, de tester et de compiler un code source Pixel Bender.
Shader Dans le cadre de ce document, un shader est un jeu de fonctionnalit&eacute;s &eacute;crites dans le langage Pixel Bender. Le
code d’un shader cr&eacute;e un effet visuel ou effectue un calcul. Dans les deux cas, le shader renvoie un jeu de donn&eacute;es (il
s’agit en r&egrave;gle g&eacute;n&eacute;rale des pixels d’une image). Le shader ex&eacute;cute la m&ecirc;me op&eacute;ration sur chaque point de donn&eacute;es, &agrave;
l’exception des coordonn&eacute;es du pixel de sortie. Le shader n’est pas &eacute;crit en ActionScript. Il est &eacute;crit dans le langage Pixel
Bender et compil&eacute; en pseudo-code binaire Pixel Bender. Il peut &ecirc;tre int&eacute;gr&eacute; &agrave; un fichier SWF lors de la compilation ou
charg&eacute; en tant que fichier externe lors de l’ex&eacute;cution. Dans les deux cas, pour y acc&eacute;der dans ActionScript, il est
n&eacute;cessaire de cr&eacute;er un objet Shader et de le lier au pseudo-code binaire du shader.
Entr&eacute;e du shader Entr&eacute;e complexe, g&eacute;n&eacute;ralement compos&eacute;e de donn&eacute;es d’image bitmap, fournie &agrave; un shader qui
l’utilise dans ses calculs. Pour chaque variable d’entr&eacute;e d&eacute;finie dans un shader, une valeur unique (une image unique
ou un jeu de donn&eacute;es binaires) est utilis&eacute;e pour l’ex&eacute;cution de bout en bout du shader.
Param&egrave;tre de shader Valeur unique (ou jeu de valeurs limit&eacute;) fournie &agrave; un shader, qui l’utilise dans ses calculs. Chaque
valeur de param&egrave;tre est d&eacute;finie pour une ex&eacute;cution de shader unique et la m&ecirc;me valeur est utilis&eacute;e de bout en bout lors
de l’ex&eacute;cution du shader.
Utilisation des exemples de code
Il peut s’av&eacute;rer utile de tester les exemples de code fournis. Cette op&eacute;ration n&eacute;cessite d’ex&eacute;cuter le code et d’afficher les
r&eacute;sultats dans le fichier SWF cr&eacute;&eacute;. Tous les exemples cr&eacute;ent un contenu par le biais de l’API de dessin qui utilise l’effet
de shader ou est modifi&eacute;e par ce dernier.
La plupart des exemples de code se composent de deux parties. La premi&egrave;re partie correspond au code source Pixel
Bender associ&eacute; au shader utilis&eacute; dans l’exemple. Vous devez commencer par utiliser Pixel Bender Toolkit pour
compiler le code source dans un fichier de pseudo-code binaire Pixel Bender. Proc&eacute;dez comme suit pour cr&eacute;er le fichier
de pseudo-code binaire Pixel Bender :
1 Ouvrez Adobe Pixel Bender Toolkit. Le cas &eacute;ch&eacute;ant, dans le menu Build (D&eacute;veloppement), choisissez &laquo; Turn on
Flash Player warnings and errors &raquo; (Activer les avertissements et erreurs Flash Player).
Derni&egrave;re mise &agrave; jour le 27/4/2013
311
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
2 Copiez le code Pixel Bender et collez-le dans le panneau de l’&eacute;diteur de code de Pixel Bender Toolkit.
3 Dans le menu File (Fichier), choisissez &laquo; Export kernel filter for Flash Player &raquo; (Exporter le filtre de noyau associ&eacute;
&agrave; Flash Player).
4 Enregistrez le fichier de pseudo-code binaire Pixel Bender dans le m&ecirc;me r&eacute;pertoire que le document Flash. Le nom
du fichier doit &ecirc;tre identique &agrave; celui stipul&eacute; dans la description de l’exemple.
La partie ActionScript de chaque exemple est &eacute;crite en tant que fichier de classe. Pour tester l’exemple dans Flash
Professional :
1 Cr&eacute;ez un document Flash vide et enregistrez-le sur votre ordinateur.
2 Cr&eacute;ez un nouveau fichier ActionScript et enregistrez-le dans le m&ecirc;me r&eacute;pertoire que le document Flash. Le nom du
fichier doit correspondre au nom de la classe du code. Par exemple, si le code d&eacute;finit une classe MyApplication,
enregistrez le fichier ActionScript sous le nom MyApplication.as.
3 Copiez le code dans le fichier ActionScript et enregistrez le fichier.
4 Dans le document Flash, cliquez sur une partie vide de la sc&egrave;ne ou de l’espace de travail pour activer l’Inspecteur
des propri&eacute;t&eacute;s du document.
5 Dans l’Inspecteur des propri&eacute;t&eacute;s, dans le champ Classe du document, saisissez le nom de la classe ActionScript que
vous avez copi&eacute;e du texte.
6 Ex&eacute;cutez le programme en s&eacute;lectionnant Contr&ocirc;le &gt; Tester l’animation.
Les r&eacute;sultats de l’exemple s’affichent dans la fen&ecirc;tre d’aper&ccedil;u.
Ces techniques de test des exemples de code font l’objet d’une description d&eacute;taill&eacute;e dans &laquo; Utilisation des exemples de
code ActionScript &raquo; &agrave; la page 1145.
Chargement ou int&eacute;gration d’un shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La premi&egrave;re &eacute;tape dans l’utilisation d’un shader de Pixel Bender dans ActionScript consiste &agrave; pouvoir acc&eacute;der au
shader en code ActionScript. Comme un shader est cr&eacute;&eacute; &agrave; l’aide d’Adobe Pixel Bender Toolkit et r&eacute;dig&eacute; dans le langage
Pixel Bender, on ne peut pas y acc&eacute;der directement dans ActionScript. Il faut plut&ocirc;t cr&eacute;er une occurrence de la classe
Shader qui repr&eacute;sente le shader de Pixel Bender &agrave; ActionScript. L’objet Shader vous permet de trouver les informations
concernant le shader : par exemple, s’il pr&eacute;voit de recevoir des param&egrave;tres ou des valeurs pour l’image d’entr&eacute;e. Vous
passez l’objet Shader aux autres objets pour utiliser effectivement le shader. Par exemple, pour utiliser le shader comme
filtre, vous affectez l’objet Shader &agrave; la propri&eacute;t&eacute; shader d’un objet ShaderFilter. Ou bien, afin d’utiliser le shader pour
remplir l’&eacute;cran dans un dessin, vous passez l’objet Shader comme argument &agrave; la m&eacute;thode
Graphics.beginShaderFill().
Votre code ActionScript peut acc&eacute;der &agrave; un shader cr&eacute;&eacute; par Adobe Pixel Bender Toolkit (un fichier .pbj) de deux fa&ccedil;ons
distinctes :
• Chargement lors de l’ex&eacute;cution : le fichier shader peut &ecirc;tre charg&eacute; comme un &eacute;l&eacute;ment externe &agrave; l’aide d’un objet
URLLoader. Cette technique est comparable au chargement d’un &eacute;l&eacute;ment externe, comme un fichier texte, par
exemple. L’exemple suivant montre le chargement &agrave; l’ex&eacute;cution d’un fichier de pseudo-code binaire de shader et sa
liaison &agrave; une occurrence de Shader :
Derni&egrave;re mise &agrave; jour le 27/4/2013
312
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest(&quot;myShader.pbj&quot;));
var shader:Shader;
function onLoadComplete(event:Event):void {
// Create a new shader and set the loaded data as its bytecode
shader = new Shader();
shader.byteCode = loader.data;
// You can also pass the bytecode to the Shader() constructor like this:
// shader = new Shader(loader.data);
// do something with the shader
}
• Int&eacute;gration au fichier SWF : le fichier shader peut &ecirc;tre int&eacute;gr&eacute; au fichier SWF lors de la compilation &agrave; l’aide de la
balise de m&eacute;tadonn&eacute;es [Embed]. La balise de m&eacute;tadonn&eacute;es [Embed] n’est disponible que si vous utilisez le kit de
d&eacute;veloppement Flex pour compiler le fichier SWF. Le param&egrave;tre source de la balise [Embed] pointe vers le fichier
du shader et son param&egrave;tre mimeType est &quot;application/octet-stream&quot;, comme dans l’exemple ci-dessous :
[Embed(source=&quot;myShader.pbj&quot;, mimeType=&quot;application/octet-stream&quot;)]
var MyShaderClass:Class;
// ...
// create a shader and set the embedded shader as its bytecode
var shader:Shader = new Shader();
shader.byteCode = new MyShaderClass();
// You can also pass the bytecode to the Shader() constructor like this:
// var shader:Shader = new Shader(new MyShaderClass());
// do something with the shader
Dans les deux cas, vous liez le pseudo-code brut du shader (la propri&eacute;t&eacute; URLLoader.data ou une occurrence de la
classe de donn&eacute;es [Embed]) &agrave; l’occurrence de Shader. Comme le montrent les exemples pr&eacute;c&eacute;dents, vous pouvez
affecter le pseudo-code binaire &agrave; l’occurrence du shader de deux fa&ccedil;ons. Vous pouvez transmettre le pseudo-code
binaire du shader sous forme d’argument au constructeur Shader(). Vous pouvez &eacute;galement le d&eacute;finir en tant que
propri&eacute;t&eacute; byteCode de l’occurrence de Shader.
D&egrave;s qu’un shader de Pixel Bender est cr&eacute;&eacute; et li&eacute; &agrave; l’objet Shader, vous pouvez utiliser le shader pour cr&eacute;er des effets de
plusieurs fa&ccedil;ons. Vous pouvez l’utiliser en tant que filtre, mode de fondu, remplissage de bitmap ou comme moyen de
traitement autonome d’image bitmap ou autres donn&eacute;es. Vous pouvez &eacute;galement utiliser la propri&eacute;t&eacute; data de l’objet
Shader pour acc&eacute;der aux m&eacute;tadonn&eacute;es du shader, sp&eacute;cifier les images d’entr&eacute;e et sp&eacute;cifier les valeurs du param&eacute;trage.
Derni&egrave;re mise &agrave; jour le 27/4/2013
313
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Acc&egrave;s aux m&eacute;tadonn&eacute;es du shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Tandis qu’il cr&eacute;e un noyau de shader de Pixel Bender, le programmeur peut sp&eacute;cifier des m&eacute;tadonn&eacute;es sur le shader
dans le code source Pixel Bender. Vous pouvez inspecter le shader et extraire ses m&eacute;tadonn&eacute;es pendant que vous
l’utilisez dans ActionScript.
Lorsque vous cr&eacute;ez une occurrence de Shader et que vous la liez &agrave; un shader de Pixel Bender, un objet ShaderData, qui
contient des donn&eacute;es sur le shader, est cr&eacute;&eacute; et enregistr&eacute; dans la propri&eacute;t&eacute; data de l’objet Shader. La classe ShaderData
ne d&eacute;finit aucune de ses propres propri&eacute;t&eacute;s. Toutefois, lors de l’ex&eacute;cution, une propri&eacute;t&eacute; est ajout&eacute;e dynamiquement &agrave;
l’objet ShaderData pour chaque valeur de m&eacute;tadonn&eacute;es d&eacute;finie dans le code source du shader. Le nom attribu&eacute; &agrave;
chaque propri&eacute;t&eacute; est pareil &agrave; celui sp&eacute;cifi&eacute; dans les m&eacute;tadonn&eacute;es. Par exemple, supposez que le code source d’un shader
de Pixel Bender contienne la d&eacute;finition des m&eacute;tadonn&eacute;es suivante :
namespace : &quot;Adobe::Example&quot;;
vendor : &quot;Bob Jones&quot;;
version : 1;
description : &quot;Creates a version of the specified image with the specified brightness.&quot;;
L’objet ShaderData cr&eacute;&eacute; pour ce shader l’est avec les propri&eacute;t&eacute;s et valeurs suivantes :
•
namespace (String): &quot;Adobe::Example&quot;
•
vendor (String): &quot;Bob Jones&quot;
•
version (String): &quot;1&quot;
•
description (String): &quot;Creates a version of the specified image with the specified brightness&quot;
Comme les propri&eacute;t&eacute;s de m&eacute;tadonn&eacute;es sont ajout&eacute;es dynamiquement &agrave; l’objet ShaderData, vous pouvez utiliser une
boucle for..in pour inspecter l’objet ShaderData. Cette technique vous permet de vous rendre compte si le shader
poss&egrave;de des m&eacute;tadonn&eacute;es et quelles sont ses valeurs. Outre les propri&eacute;t&eacute;s des m&eacute;tadonn&eacute;es, un objet ShaderData peut
avoir des propri&eacute;t&eacute;s repr&eacute;sentant des entr&eacute;es et des param&egrave;tres qui sont d&eacute;finis dans le shader. Lorsque vous utilisez
une boucle for..in pour inspecter un objet ShaderData, v&eacute;rifiez le type de donn&eacute;es de chaque propri&eacute;t&eacute; pour vous
rendre compte si la propri&eacute;t&eacute; est une entr&eacute;e (une occurrence de ShaderInput), un param&egrave;tre (une occurrence de
ShaderParameter) ou une valeur de m&eacute;tadonn&eacute;es (une occurrence de String). L’exemple ci-dessous montre comment
utiliser une boucle for..in pour examiner les propri&eacute;t&eacute;s dynamiques de la propri&eacute;t&eacute; data d’un shader. Chaque valeur
de m&eacute;tadonn&eacute;es est ajout&eacute;e &agrave; une occurrence de Vector appel&eacute;e metadata. Remarquez que cet exemple suppose
qu’une occurrence de Shader appel&eacute;e myShader existe d&eacute;j&agrave; :
var shaderData:ShaderData = myShader.data;
var metadata:Vector.&lt;String&gt; = new Vector.&lt;String&gt;();
for (var prop:String in shaderData)
{
if (!(shaderData[prop] is ShaderInput) &amp;&amp; !(shaderData[prop] is ShaderParameter))
{
metadata[metadata.length] = shaderData[prop];
}
}
// do something with the metadata
Pour une version de cet exemple, qui extrait &eacute;galement des entr&eacute;es et des param&egrave;tres de shader, voir &laquo; Identification
des entr&eacute;es et des param&egrave;tres d’un shader &raquo; &agrave; la page 315. Pour plus d’informations sur les propri&eacute;t&eacute;s des entr&eacute;es et des
param&egrave;tres, voir &laquo; Sp&eacute;cification des valeurs des entr&eacute;es et des param&egrave;tres d’un shader &raquo; &agrave; la page 315.
Derni&egrave;re mise &agrave; jour le 27/4/2013
314
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Sp&eacute;cification des valeurs des entr&eacute;es et des param&egrave;tres
d’un shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
De nombreux shaders de Pixel Bender sont d&eacute;finis pour faire appel &agrave; une ou plusieurs images utilis&eacute;es au cours de son
traitement. Par exemple, il est courant pour un shader d’accepter une image source et de la produire dot&eacute;e d’un effet
particulier. Suivant l’utilisation du shader, soit la valeur d’entr&eacute;e est sp&eacute;cifi&eacute;e automatiquement, soit il faut en fournir
une. De la m&ecirc;me fa&ccedil;on, de nombreux shaders sp&eacute;cifient des param&egrave;tres utilis&eacute;s dans l’individualisation de ce qu’ils
produisent. Il faut &eacute;galement d&eacute;finir explicitement une valeur pour chaque param&egrave;tre avant d’utiliser le shader.
Vous utilisez la propri&eacute;t&eacute; data de l’objet Shader pour d&eacute;finir les entr&eacute;es et les param&egrave;tres et pour &eacute;tablir si un shader
en particulier pr&eacute;voit des entr&eacute;es et des param&egrave;tres. La propri&eacute;t&eacute; data est une occurrence de ShaderData.
Identification des entr&eacute;es et des param&egrave;tres d’un shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La premi&egrave;re &eacute;tape dans la sp&eacute;cification de valeurs d’entr&eacute;e et de param&egrave;tres d’un shader consiste &agrave; savoir si celui que
vous utilisez pr&eacute;voit de recevoir des images d’entr&eacute;e ou des param&egrave;tres. Chaque occurrence de Shader poss&egrave;de une
propri&eacute;t&eacute; data qui contient un objet ShaderData. Si le shader sp&eacute;cifie des entr&eacute;es ou des param&egrave;tres, on y acc&egrave;de en
tant que propri&eacute;t&eacute;s de cet objet ShaderData. Les noms des propri&eacute;t&eacute;s correspondent aux noms sp&eacute;cifi&eacute;s dans le code
source du shader pour les entr&eacute;es et les param&egrave;tres. Par exemple, si un shader sp&eacute;cifie une entr&eacute;e appel&eacute;e src, l’objet
ShaderData poss&egrave;de une propri&eacute;t&eacute; appel&eacute;e src qui repr&eacute;sente cette entr&eacute;e. Chaque propri&eacute;t&eacute; qui repr&eacute;sente une entr&eacute;e
est une occurrence de ShaderInput et chaque propri&eacute;t&eacute; qui repr&eacute;sente un param&egrave;tre est une occurrence de
ShaderParameter.
Id&eacute;alement, le programmeur du shader fournit une documentation pour le shader afin de d&eacute;crire quels sont les
param&egrave;tres et les valeurs de l’image d’entr&eacute;e qu’il pr&eacute;voit, ce qu’ils repr&eacute;sentent, les valeurs appropri&eacute;es, et ainsi de
suite.
Toutefois, si le shader n’est pas document&eacute; et que vous ne disposez pas du code source, vous pouvez inspecter les
donn&eacute;es du shader pour identifier ces entr&eacute;es et param&egrave;tres. Les propri&eacute;t&eacute;s qui repr&eacute;sentent ces entr&eacute;es et param&egrave;tres
sont ajout&eacute;es dynamiquement &agrave; l’objet ShaderData. Par cons&eacute;quent, vous pouvez utiliser une boucle for..in pour
inspecter l’objet ShaderData afin de savoir si le shader qui lui est associ&eacute; sp&eacute;cifie de tels entr&eacute;es ou param&egrave;tres. Comme
le d&eacute;crit la section &laquo; Acc&egrave;s aux m&eacute;tadonn&eacute;es du shader &raquo; &agrave; la page 314, on acc&egrave;de &eacute;galement, en tant que propri&eacute;t&eacute;
dynamique ajout&eacute;e &agrave; la propri&eacute;t&eacute; Shader.data, &agrave; toute valeur de m&eacute;tadonn&eacute;es d&eacute;finie pour un shader. Lorsque vous
utilisez cette technique afin d’identifier entr&eacute;es et param&egrave;tres, v&eacute;rifiez le type de donn&eacute;es des propri&eacute;t&eacute;s dynamiques.
Si une propri&eacute;t&eacute; est une occurrence de ShaderInput, elle repr&eacute;sente une entr&eacute;e. S’il s’agit d’une occurrence de
ShaderParameter, elle repr&eacute;sente un param&egrave;tre. Sinon, il s’agit d’une valeur de m&eacute;tadonn&eacute;es. L’exemple ci-dessous
montre comment utiliser une boucle for..in pour examiner les propri&eacute;t&eacute;s dynamiques de la propri&eacute;t&eacute; data d’un
shader. Chaque entr&eacute;e (objet ShaderInput) est ajout&eacute;e &agrave; une occurrence de Vector appel&eacute;e inputs. Chaque param&egrave;tre
(objet ShaderParameter) est ajout&eacute; &agrave; une occurrence de Vector appel&eacute;e parameters. Enfin, toute propri&eacute;t&eacute; de
m&eacute;tadonn&eacute;es est ajout&eacute;e &agrave; une occurrence de Vector appel&eacute;e metadata. Remarquez que cet exemple suppose qu’une
occurrence de Shader appel&eacute;e myShader existe d&eacute;j&agrave; :
Derni&egrave;re mise &agrave; jour le 27/4/2013
315
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
var
var
var
var
shaderData:ShaderData = myShader.data;
inputs:Vector.&lt;ShaderInput&gt; = new Vector.&lt;ShaderInput&gt;();
parameters:Vector.&lt;ShaderParameter&gt; = new Vector.&lt;ShaderParameter&gt;();
metadata:Vector.&lt;String&gt; = new Vector.&lt;String&gt;();
for (var prop:String in shaderData)
{
if (shaderData[prop] is ShaderInput)
{
inputs[inputs.length] = shaderData[prop];
}
else if (shaderData[prop] is ShaderParameter)
{
parameters[parameters.length] = shaderData[prop];
}
else
{
metadata[metadata.length] = shaderData[prop];
}
}
// do something with the inputs or properties
Sp&eacute;cification des valeurs d’entr&eacute;e d’un shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
De nombreux shaders pr&eacute;voient de recevoir une ou plusieurs images d’entr&eacute;e qui sont utilis&eacute;es au cours de son
traitement. Toutefois, dans nombre de cas, une entr&eacute;e est automatiquement sp&eacute;cifi&eacute;e lorsque l’objet Shader est utilis&eacute;.
Par exemple, supposons qu’un shader ait besoin d’une entr&eacute;e et qu’il serve de filtre. Lorsque le filtre est appliqu&eacute; &agrave; un
objet d’affichage ou BitmapData, cet objet est d&eacute;fini automatiquement comme entr&eacute;e. Dans ce cas, on ne sp&eacute;cifie pas
explicitement une valeur d’entr&eacute;e.
Toutefois, dans certains cas, et plus particuli&egrave;rement si un shader sp&eacute;cifie plusieurs entr&eacute;es, il faut d&eacute;finir explicitement
une valeur pour l’entr&eacute;e. Toute entr&eacute;e d&eacute;finie dans un shader est repr&eacute;sent&eacute;e dans ActionScript par un objet
ShaderInput. L’objet ShaderInput est une propri&eacute;t&eacute; de l’occurrence de ShaderData dans la propri&eacute;t&eacute; data de l’objet
Shader (voir &laquo; Identification des entr&eacute;es et des param&egrave;tres d’un shader &raquo; &agrave; la page 315). Par exemple, supposons qu’un
shader d&eacute;finisse une entr&eacute;e appel&eacute;e src et qu’il soit li&eacute; &agrave; un objet Shader appel&eacute; myShader. Vous acc&eacute;dez alors &agrave; l’objet
ShaderInput qui correspond &agrave; l’entr&eacute;e src &agrave; l’aide de l’identifiant suivant :
myShader.data.src
Chaque objet ShaderInput poss&egrave;de une propri&eacute;t&eacute; input qui est utilis&eacute;e pour d&eacute;finir la valeur de l’entr&eacute;e. On d&eacute;finit la
propri&eacute;t&eacute; input sur une occurrence de BitmapData pour sp&eacute;cifier des donn&eacute;es d’image. On peut aussi d&eacute;finir la
propri&eacute;t&eacute; input sur BitmapData ou Vector.occurrence de &lt;Number&gt; pour sp&eacute;cifier des donn&eacute;es binaires ou des
nombres. Pour plus d’informations sur l’utilisation d’une occurrence de BitmapData ou Vector.&lt;Number&gt; en entr&eacute;e
et les restrictions correspondantes, voir ShaderInput.input dans le Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la
plate-forme Adobe Flash.
Derni&egrave;re mise &agrave; jour le 27/4/2013
316
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
En plus de la propri&eacute;t&eacute; input, un objet ShaderInput poss&egrave;de des propri&eacute;t&eacute;s qui peuvent &ecirc;tre utilis&eacute;es pour d&eacute;terminer
quel type d’image pr&eacute;voit l’entr&eacute;e. Ces propri&eacute;t&eacute;s contiennent elles-m&ecirc;mes les propri&eacute;t&eacute;s width, height et channels.
Chaque objet ShaderInput poss&egrave;de &eacute;galement une propri&eacute;t&eacute; index qui est utile afin de d&eacute;terminer si une valeur
explicite doit &ecirc;tre fournie pour l’entr&eacute;e. Si un shader pr&eacute;voit de recevoir davantage d’entr&eacute;es que le nombre fix&eacute;
automatiquement, vous pouvez alors d&eacute;finir des valeurs pour ces entr&eacute;es. Pour plus de d&eacute;tails sur les diff&eacute;rentes fa&ccedil;ons
d’utiliser un shader et pour savoir si oui ou non les valeurs d’entr&eacute;e sont fix&eacute;es automatiquement, voir &laquo; Utilisation
d’un shader &raquo; &agrave; la page 320.
Sp&eacute;cification des valeurs de param&egrave;tres dans un shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Certains shaders d&eacute;finissent des valeurs de param&egrave;tres qu’ils utilisent dans la cr&eacute;ation de leur r&eacute;sultat. Par exemple, un
shader qui modifie la luminosit&eacute; d’une image pourrait sp&eacute;cifier un param&egrave;tre de luminosit&eacute; qui d&eacute;termine dans quelle
mesure l’op&eacute;ration affecte cette luminosit&eacute;. Un param&egrave;tre unique d&eacute;fini dans un shader peut pr&eacute;voir une ou plusieurs
valeurs suivant la fa&ccedil;on dont il a &eacute;t&eacute; sp&eacute;cifi&eacute; dans le shader. Tout param&egrave;tre d&eacute;fini dans un shader est repr&eacute;sent&eacute; dans
ActionScript par un objet ShaderParameter. L’objet ShaderParameter est une propri&eacute;t&eacute; de l’occurrence de ShaderData
dans la propri&eacute;t&eacute; des donn&eacute;es de l’objet Shader. Une description se trouve dans la section &laquo; Identification des entr&eacute;es
et des param&egrave;tres d’un shader &raquo; &agrave; la page 315. Par exemple, supposons qu’un shader qui d&eacute;finit un param&egrave;tre appel&eacute;
luminosit&eacute; soit repr&eacute;sent&eacute; par un objet Shader appel&eacute; myShader. Vous acc&eacute;dez alors &agrave; l’objet ShaderParameter
correspondant au param&egrave;tre luminosit&eacute; &agrave; l’aide de l’identifiant suivant :
myShader.data.brightness
Pour sp&eacute;cifier une ou plusieurs valeurs pour le param&egrave;tre, cr&eacute;ez un tableau ActionScript contenant la ou les valeurs et
affectez-le &agrave; la propri&eacute;t&eacute; value de l’objet ShaderParameter. La propri&eacute;t&eacute; value est d&eacute;finie en tant qu’occurrence
d’Array car il est possible qu’un seul param&egrave;tre du shader n&eacute;cessite plusieurs valeurs. M&ecirc;me si le param&egrave;tre du shader
ne pr&eacute;voit qu’une seule valeur, il vous faut placer la valeur dans un objet Array pour l’affecter &agrave; la propri&eacute;t&eacute;
ShaderParameter.value. Le code suivant montre comment d&eacute;finir une seule valeur pour la propri&eacute;t&eacute; value.
myShader.data.brightness.value = [75];
Si le code source Pixel Bender pour le shader sp&eacute;cifie une valeur par d&eacute;faut pour le param&egrave;tre, un tableau contenant la
ou les valeurs par d&eacute;faut est cr&eacute;&eacute; et affect&eacute; &agrave; la propri&eacute;t&eacute; value de l’objet ShaderParameter lorsque l’objet Shader est
cr&eacute;&eacute;. D&egrave;s qu’un tableau est affect&eacute; &agrave; la propri&eacute;t&eacute; value, m&ecirc;me s’il s’agit de celui par d&eacute;faut, la valeur du param&egrave;tre peut
&ecirc;tre modifi&eacute;e en changeant la valeur de l’&eacute;l&eacute;ment du tableau. Il n’est pas n&eacute;cessaire de cr&eacute;er un autre tableau et de
l’affecter &agrave; la propri&eacute;t&eacute; value.
L’exemple ci-dessous indique comment d&eacute;finir une valeur de param&egrave;tre dans un shader avec ActionScript. Dans cet
exemple, le shader d&eacute;finit un param&egrave;tre appel&eacute; color. Ce param&egrave;tre color est d&eacute;clar&eacute; en tant que variable float4
dans le code source Pixel Bender, ce qui signifie qu’il s’agit d’un tableau &agrave; quatre nombres en virgule flottante. Dans
l’exemple, la valeur du param&egrave;tre color change constamment. A chaque changement, le shader est utilis&eacute; pour
dessiner un rectangle color&eacute; &agrave; l’&eacute;cran. Il en r&eacute;sulte un changement de couleur anim&eacute;.
Remarque : le code de cet exemple a &eacute;t&eacute; r&eacute;dig&eacute; par Ryan Taylor. Merci Ryan de bien vouloir nous en faire profiter. Vous
pouvez acc&eacute;der aux exemples de Ryan et lire ses commentaires &agrave; l’adresse www.boostworthy.com/.
Le code ActionScript repose sur l’utilisation de trois m&eacute;thodes :
•
init() : dans la m&eacute;thode init(), le code charge le fichier de pseudo-code binaire Pixel Bender contenant le
shader. Lors du chargement du fichier, la m&eacute;thode onLoadComplete() est appel&eacute;e.
•
onLoadComplete() : dans la m&eacute;thode onLoadComplete(), le code cr&eacute;e l’objet Shader appel&eacute; shader. Il cr&eacute;e
&eacute;galement une occurrence de Sprite appel&eacute;e texture. Dans la m&eacute;thode renderShader(), le code dessine une fois
par image le r&eacute;sultat du shader dans texture.
Derni&egrave;re mise &agrave; jour le 27/4/2013
317
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
•
onEnterFrame() : la m&eacute;thode onEnterFrame() est appel&eacute;e une fois par image, cr&eacute;ant ainsi un effet d’animation.
Dans cette m&eacute;thode, le code d&eacute;finit la valeur du param&egrave;tre du shader sur la nouvelle couleur, puis appelle la
m&eacute;thode renderShader() pour dessiner le r&eacute;sultat du shader sous forme de rectangle.
•
renderShader() : dans la m&eacute;thode renderShader(), le code appelle la m&eacute;thode Graphics.beginShaderFill()
pour d&eacute;finir un remplissage de shader. Il dessine ensuite un rectangle dont le remplissage est d&eacute;fini par la sortie du
shader (la couleur g&eacute;n&eacute;r&eacute;e). Pour plus d’informations sur ce type d’utilisation d’un shader, voir &laquo; Utilisation d’un
shader comme outil de remplissage de dessin &raquo; &agrave; la page 320.
Vous trouverez ci-dessous le code ActionScript associ&eacute; &agrave; cet exemple : Utilisez cette classe en tant que classe
d’application principale d’un projet ActionScript uniquement dans Flash Builder, ou en tant que classe de document
du fichier FLA dans Flash Professional :
package
{
import
import
import
import
import
import
flash.display.Shader;
flash.display.Sprite;
flash.events.Event;
flash.net.URLLoader;
flash.net.URLLoaderDataFormat;
flash.net.URLRequest;
public class ColorFilterExample extends Sprite
{
private const DELTA_OFFSET:Number = Math.PI * 0.5;
private var loader:URLLoader;
private var shader:Shader;
private var texture:Sprite;
private var delta:Number = 0;
public function ColorFilterExample()
{
init();
}
private function init():void
{
loader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest(&quot;ColorFilter.pbj&quot;));
}
private function onLoadComplete(event:Event):void
{
shader = new Shader(loader.data);
texture = new Sprite();
addChild(texture);
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(event:Event):void
{
Derni&egrave;re mise &agrave; jour le 27/4/2013
318
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
shader.data.color.value[0] = 0.5 + Math.cos(delta - DELTA_OFFSET) * 0.5;
shader.data.color.value[1] = 0.5 + Math.cos(delta) * 0.5;
shader.data.color.value[2] = 0.5 + Math.cos(delta + DELTA_OFFSET) * 0.5;
// The alpha channel value (index 3) is set to 1 by the kernel's default
// value. This value doesn't need to change.
delta += 0.1;
renderShader();
}
private function renderShader():void
{
texture:graphics.clear();
texture.graphics.beginShaderFill(shader);
texture.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
texture.graphics.endFill();
}
}
}
Vous trouverez ci-dessous le code source du noyau du shader ColorFilter, utilis&eacute; pour la cr&eacute;ation du fichier
&laquo; ColorFilter.pbj &raquo; de pseudo-code binaire Pixel Bender.
&lt;languageVersion : 1.0;&gt;
kernel ColorFilter
&lt;
namespace : &quot;boostworthy::Example&quot;;
vendor : &quot;Ryan Taylor&quot;;
version : 1;
description : &quot;Creates an image where every pixel has the specified color value.&quot;;
&gt;
{
output pixel4 result;
parameter float4 color
&lt;
minValue:float4(0, 0, 0, 0);
maxValue:float4(1, 1, 1, 1);
defaultValue:float4(0, 0, 0, 1);
&gt;;
void evaluatePixel()
{
result = color;
}
}
Si vous utilisez un shader dont les param&egrave;tres ne sont pas document&eacute;s, c’est par le contr&ocirc;le de la propri&eacute;t&eacute; type de
l’objet ShaderParameter que vous pouvez &eacute;valuer le nombre d’&eacute;l&eacute;ments et leur type qu’il faut inclure dans le tableau.
La propri&eacute;t&eacute; type indique le type de donn&eacute;es du param&egrave;tre tel qu’il est d&eacute;fini dans le shader lui-m&ecirc;me. Pour consulter
la liste du nombre et du type d’&eacute;l&eacute;ments pr&eacute;vus par chaque type de param&egrave;tre, voir le code associ&eacute; &agrave; la propri&eacute;t&eacute;
ShaderParameter.value dans le Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour Flash Professional.
Derni&egrave;re mise &agrave; jour le 27/4/2013
319
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Chaque objet ShaderParameter poss&egrave;de &eacute;galement une propri&eacute;t&eacute; index qui indique l’emplacement du param&egrave;tre dans
l’ordre des param&egrave;tres du shader. En plus de ces propri&eacute;t&eacute;s, un objet ShaderParameter peut avoir des propri&eacute;t&eacute;s
suppl&eacute;mentaires qui contiennent des valeurs de m&eacute;tadonn&eacute;es fournies par le programmeur du shader. Par exemple, le
programmeur peut d&eacute;finir pour un param&egrave;tre des valeurs de m&eacute;tadonn&eacute;es telles que minimum, maximum et des
valeurs par d&eacute;faut. Toutes les valeurs de m&eacute;tadonn&eacute;es sp&eacute;cifi&eacute;es par le programmeur sont ajout&eacute;es &agrave; l’objet
ShaderParameter en tant que propri&eacute;t&eacute;s dynamiques. Pour passer en revue ces propri&eacute;t&eacute;s, utilisez une boucle for..in
pour boucler dans les propri&eacute;t&eacute;s dynamiques de l’objet ShaderParameter afin d’identifier ses m&eacute;tadonn&eacute;es. L’exemple
ci-dessous montre comment utiliser une boucle for..in afin d’identifier les m&eacute;tadonn&eacute;es d’un objet
ShaderParameter. Chaque valeur de m&eacute;tadonn&eacute;es est ajout&eacute;e &agrave; une occurrence de Vector appel&eacute;e metadata.
Remarquez que cet exemple suppose qu’une occurrence de Shader appel&eacute;e myShader existe d&eacute;j&agrave; et qu’elle poss&egrave;de un
param&egrave;tre appel&eacute; brightness.
var brightness:ShaderParameter = myShader.data.brightness;
var metadata:Vector.&lt;String&gt; = new Vector.&lt;String&gt;();
for (var prop:String in brightness)
{
if (brightness[prop] is String)
{
metadata[metadata.length] = brightness[prop];
}
}
// do something with the metadata
Utilisation d’un shader
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
D&egrave;s qu’un shader de Pixel Bender est disponible dans ActionScript en tant qu’objet Shader, il peut &ecirc;tre utilis&eacute; de
diff&eacute;rentes fa&ccedil;ons :
• Remplissage d’un dessin par le shader : le shader sp&eacute;cifie quelle portion d’une forme dessin&eacute;e utilise l’api du dessin
• Mode de fondu : le shader sp&eacute;cifie le degr&eacute; de fondu entre deux objets d’affichage superpos&eacute;s
• Filtre : le shader d&eacute;finit un filtre qui modifie l’apparence du contenu visuel
• Traitement d’un shader autonome : le traitement du shader se fait sans d&eacute;finir l’usage de la sortie. Sur demande, le
shader peut tourner en arri&egrave;re-plan de telle sorte que le r&eacute;sultat devient disponible &agrave; la fin du traitement. Cette
technique peut &ecirc;tre utilis&eacute;e pour g&eacute;n&eacute;rer des donn&eacute;es bitmap et traiter des donn&eacute;es non visuelles.
Utilisation d’un shader comme outil de remplissage de dessin
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Si vous utilisez un shader pour cr&eacute;er un remplissage de dessin, vous faites appel aux m&eacute;thodes de l’API de dessin pour
cr&eacute;er une forme vectorielle. La sortie du shader permet de remplir la forme, &agrave; l’instar de toute image bitmap utilis&eacute;e en
tant que remplissage de bitmap par l’API de dessin. Pour cr&eacute;er un remplissage de dessin, appelez la m&eacute;thode
beginShaderFill() de l’objet Graphics &agrave; l’emplacement du code o&ugrave; vous souhaitez commencer &agrave; dessiner la forme.
Transmettez l’objet Shader en tant que premier argument &agrave; la m&eacute;thode beginShaderFill(), comme illustr&eacute; dans le
code suivant :
Derni&egrave;re mise &agrave; jour le 27/4/2013
320
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
var canvas:Sprite = new Sprite();
canvas.graphics.beginShaderFill(myShader);
canvas.graphics.drawRect(10, 10, 150, 150);
canvas.graphics.endFill();
// add canvas to the display list to see the result
Lorsque vous utilisez un shader en tant qu’outil de remplissage de dessin, vous d&eacute;finissez les valeurs d’image d’entr&eacute;e
et de param&egrave;tre requises par le shader.
L’exemple suivant illustre l’utilisation d’un shader en tant qu’outil de remplissage de dessin. Dans cet exemple, le
shader cr&eacute;e un d&eacute;grad&eacute; &agrave; trois sommets. Ce d&eacute;grad&eacute; poss&egrave;de trois couleurs, une par sommet d’un triangle, s&eacute;par&eacute;es
des autres par un fondu d&eacute;grad&eacute;. En outre, les couleurs pivotent pour cr&eacute;er un effet de rotation de couleur anim&eacute;.
Remarque : le code de cet exemple a &eacute;t&eacute; r&eacute;dig&eacute; par Petri Leskinen. Merci Petri de bien vouloir nous en faire profiter. Vous
pouvez consulter d’autres exemples et didacticiels r&eacute;dig&eacute;s par Petri &agrave; l’adresse http://pixelero.wordpress.com/.
Le code ActionScript r&eacute;side dans trois m&eacute;thodes :
•
init() : la m&eacute;thode init() est appel&eacute;e lors du chargement de l’application. Dans cette m&eacute;thode, le code d&eacute;finit
les valeurs initiales des objets Point qui repr&eacute;sentent les sommets du triangle. Il cr&eacute;e &eacute;galement une occurrence de
Sprite appel&eacute;e canvas. Ult&eacute;rieurement, dans la m&eacute;thode updateShaderFill(), le code dessine une fois par image
le r&eacute;sultat du shader dans canvas. Enfin, le code charge le fichier de pseudo-code binaire du shader.
•
onLoadComplete() : dans la m&eacute;thode onLoadComplete(), le code cr&eacute;e l’objet Shader appel&eacute; shader. Il d&eacute;finit
&eacute;galement les valeurs initiales des param&egrave;tres. Enfin, le code ajoute la m&eacute;thode updateShaderFill() en tant
qu’&eacute;couteur de l’&eacute;v&eacute;nement enterFrame, ce qui signifie qu’il est appel&eacute; une fois par image pour cr&eacute;er un effet
anim&eacute;.
•
onEnterFrame() : la m&eacute;thode updateShaderFill() est appel&eacute;e une fois par image, ce qui cr&eacute;e l’effet d’animation.
Dans cette m&eacute;thode, le code calcule et d&eacute;finit les valeurs des param&egrave;tres du shader. Il appelle ensuite la m&eacute;thode
beginShaderFill() pour cr&eacute;er un remplissage de shader et appelle d’autres m&eacute;thodes de l’API de dessin pour
dessiner le r&eacute;sultat du shader dans un triangle.
Vous trouverez ci-dessous le code ActionScript associ&eacute; &agrave; cet exemple : Utilisez cette classe en tant que classe
d’application principale d’un projet ActionScript uniquement dans Flash Builder, ou en tant que classe de document
d’un fichier FLA dans Flash Professional :
Derni&egrave;re mise &agrave; jour le 27/4/2013
321
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
package
{
import
import
import
import
import
import
import
flash.display.Shader;
flash.display.Sprite;
flash.events.Event;
flash.geom.Point;
flash.net.URLLoader;
flash.net.URLLoaderDataFormat;
flash.net.URLRequest;
public class ThreePointGradient extends Sprite
{
private var canvas:Sprite;
private var shader:Shader;
private var loader:URLLoader;
private var topMiddle:Point;
private var bottomLeft:Point;
private var bottomRight:Point;
private var colorAngle:Number = 0.0;
private const d120:Number = 120 / 180 * Math.PI; // 120 degrees in radians
public function ThreePointGradient()
{
init();
}
private function init():void
{
canvas = new Sprite();
addChild(canvas);
var size:int = 400;
topMiddle = new Point(size / 2, 10);
bottomLeft = new Point(0, size - 10);
bottomRight = new Point(size, size - 10);
loader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest(&quot;ThreePointGradient.pbj&quot;));
}
private function onLoadComplete(event:Event):void
{
shader = new Shader(loader.data);
shader.data.point1.value = [topMiddle.x, topMiddle.y];
shader.data.point2.value = [bottomLeft.x, bottomLeft.y];
shader.data.point3.value = [bottomRight.x, bottomRight.y];
addEventListener(Event.ENTER_FRAME, updateShaderFill);
}
private function updateShaderFill(event:Event):void
Derni&egrave;re mise &agrave; jour le 27/4/2013
322
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
{
colorAngle += .06;
var c1:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle);
var c2:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle + d120);
var c3:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle - d120);
shader.data.color1.value = [c1, c2, c3, 1.0];
shader.data.color2.value = [c3, c1, c2, 1.0];
shader.data.color3.value = [c2, c3, c1, 1.0];
canvas.graphics.clear();
canvas.graphics.beginShaderFill(shader);
canvas.graphics.moveTo(topMiddle.x, topMiddle.y);
canvas.graphics.lineTo(bottomLeft.x, bottomLeft.y);
canvas.graphics.lineTo(bottomRight.x, bottomLeft.y);
canvas.graphics.endFill();
}
}
}
Le code source du noyau du shader ThreePointGradient, utilis&eacute; pour la cr&eacute;ation du fichier &laquo; ThreePointGradient.pbj &raquo;
de pseudo-code binaire Pixel Bender, est indiqu&eacute; ci-dessous :
&lt;languageVersion : 1.0;&gt;
kernel ThreePointGradient
&lt;
namespace : &quot;Petri Leskinen::Example&quot;;
vendor : &quot;Petri Leskinen&quot;;
version : 1;
description : &quot;Creates a gradient fill using three specified points and colors.&quot;;
&gt;
{
parameter float2 point1 // coordinates of the first point
&lt;
minValue:float2(0, 0);
maxValue:float2(4000, 4000);
defaultValue:float2(0, 0);
&gt;;
parameter float4 color1 // color at the first point, opaque red by default
&lt;
defaultValue:float4(1.0, 0.0, 0.0, 1.0);
&gt;;
parameter float2 point2 // coordinates of the second point
&lt;
minValue:float2(0, 0);
maxValue:float2(4000, 4000);
defaultValue:float2(0, 500);
&gt;;
parameter float4 color2 // color at the second point, opaque green by default
&lt;
defaultValue:float4(0.0, 1.0, 0.0, 1.0);
Derni&egrave;re mise &agrave; jour le 27/4/2013
323
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
&gt;;
parameter float2 point3 // coordinates of the third point
&lt;
minValue:float2(0, 0);
maxValue:float2(4000, 4000);
defaultValue:float2(0, 500);
&gt;;
parameter float4 color3 // color at the third point, opaque blue by default
&lt;
defaultValue:float4(0.0, 0.0, 1.0, 1.0);
&gt;;
output pixel4 dst;
void evaluatePixel()
{
float2 d2 = point2 - point1;
float2 d3 = point3 - point1;
// transformation to a new coordinate system
// transforms point 1 to origin, point2 to (1, 0), and point3 to (0, 1)
float2x2 mtrx = float2x2(d3.y, -d2.y, -d3.x, d2.x) / (d2.x * d3.y - d3.x * d2.y);
float2 pNew = mtrx * (outCoord() - point1);
// repeat the edge colors on the outside
pNew.xy = clamp(pNew.xy, 0.0, 1.0); // set the range to 0.0 ... 1.0
// interpolating the output color or alpha value
dst = mix(mix(color1, color2, pNew.x), color3, pNew.y);
}
}
Remarque : si vous utilisez un remplissage de shader alors que le rendu est ex&eacute;cut&eacute; par le processeur graphique, la zone
remplie s’affiche en cyan.
Pour plus d’informations sur le trac&eacute; de forme par le biais de l’API de dessin, voir &laquo; Utilisation de l’API de dessin &raquo; &agrave;
la page 230.
Utilisation d’un shader comme mode de fondu
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Utiliser un shader comme mode de fondu s’apparente &agrave; l’utilisation des autres modes de fondu. Le shader d&eacute;finit le
r&eacute;sultat de deux objets d’affichage fondus visuellement. Pour utiliser un shader en tant que mode de fondu, affectez &agrave;
votre objet Shader la propri&eacute;t&eacute; blendShader de l’objet d’affichage en premier plan. Affecter une valeur autre que null
&agrave; la propri&eacute;t&eacute; blendShader d&eacute;finit automatiquement la propri&eacute;t&eacute; blendMode de l’objet d’affichage sur
BlendMode.SHADER. Le code suivant illustre l’utilisation d’un shader en tant que mode de fondu. Notez que cet
exemple part du principe qu’un objet d’affichage appel&eacute; foreground figure dans le m&ecirc;me parent que l’autre contenu
d’affichage dans la liste d’affichage, sachant que foreground chevauche l’autre contenu :
foreground.blendShader = myShader;
Derni&egrave;re mise &agrave; jour le 27/4/2013
324
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Lorsque vous utilisez un shader en tant que mode de fondu, deux entr&eacute;es au moins doivent &ecirc;tre sp&eacute;cifi&eacute;es. Comme
indiqu&eacute; dans l’exemple, vous ne d&eacute;finissez pas les valeurs d’entr&eacute;e dans le code. Les deux images fondues sont
automatiquement utilis&eacute;es en tant qu’entr&eacute;es du shader. L’image en premier-plan fait office de seconde image (c’est &agrave;
cet objet d’affichage qu’est appliqu&eacute; le mode de fondu). Une image d’arri&egrave;re-plan est cr&eacute;&eacute;e &agrave; partir du composite de
tous les pixels figurant derri&egrave;re le cadre de s&eacute;lection de l’image en premier-plan. Cette image en arri&egrave;re-plan est d&eacute;finie
comme la premi&egrave;re image d’entr&eacute;e. Si vous utilisez un shader qui attend plus de deux entr&eacute;es, vous en indiquez la
valeur &agrave; partir de la troisi&egrave;me entr&eacute;e.
L’exemple suivant illustre l’utilisation d’un shader en tant que mode de fondu. Cet exemple utilise un mode de fondu
Eclaircir bas&eacute; sur la luminosit&eacute;. Ce fondu a pour r&eacute;sultat d’afficher le pixel le plus clair de l’un ou l’autre des objets
fondus.
Remarque : le code de cet exemple a &eacute;t&eacute; r&eacute;dig&eacute; par Mario Klingemann. Merci Mario de bien vouloir nous en faire profiter.
Pour consulter d’autres exemples de code r&eacute;dig&eacute;s par Mario, ainsi que ses commentaires, voir www.quasimondo.com/.
Le code ActionScript important figure dans les deux m&eacute;thodes suivantes :
•
init() : la m&eacute;thode init() est appel&eacute;e lors du chargement de l’application. Dans cette m&eacute;thode, le code charge le
fichier de pseudo-code binaire du shader.
•
onLoadComplete() : dans la m&eacute;thode onLoadComplete(), le code cr&eacute;e l’objet Shader appel&eacute; shader. Il dessine
ensuite trois objets. Le premier, backdrop, est un arri&egrave;re-plan gris fonc&eacute; plac&eacute; derri&egrave;re les objets fondus. Le
deuxi&egrave;me, backgroundShape, est une ellipse d&eacute;grad&eacute;e verte. Le troisi&egrave;me, foregroundShape, est une ellipse
d&eacute;grad&eacute;e orange.
L’ellipse foregroundShape est l’objet de premier plan du fondu. L’image d’arri&egrave;re-plan du fondu est compos&eacute;e de
la section de backdrop et de la section de backgroundShape qui sont recouvertes par le cadre de s&eacute;lection de l’objet
foregroundShape. L’objet foregroundShape est affich&eacute; en premi&egrave;re position dans la liste d’affichage. Il recouvre
partiellement backgroundShape et totalement backdrop. En raison de ce chevauchement, sans application d’un
mode de fondu, l’ellipse orange (foregroundShape) est enti&egrave;rement affich&eacute;e et masque une section de l’ellipse
verte (backgroundShape) :
Toutefois, si le mode de fondu est affich&eacute;, la section la plus lumineuse de l’ellipse verte est visible, car elle est plus
claire que la section de foregroundShape qui la recouvre :
Derni&egrave;re mise &agrave; jour le 27/4/2013
325
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Vous trouverez ci-dessous le code ActionScript associ&eacute; &agrave; cet exemple : Utilisez cette classe en tant que classe
d’application principale d’un projet ActionScript uniquement dans Flash Builder, ou en tant que classe de document
du fichier FLA dans Flash Professional :
package
{
import
import
import
import
import
import
import
import
import
import
import
flash.display.BlendMode;
flash.display.GradientType;
flash.display.Graphics;
flash.display.Shader;
flash.display.Shape;
flash.display.Sprite;
flash.events.Event;
flash.geom.Matrix;
flash.net.URLLoader;
flash.net.URLLoaderDataFormat;
flash.net.URLRequest;
public class LumaLighten extends Sprite
{
private var shader:Shader;
private var loader:URLLoader;
public function LumaLighten()
{
init();
}
private function init():void
{
loader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest(&quot;LumaLighten.pbj&quot;));
}
private function onLoadComplete(event:Event):void
{
shader = new Shader(loader.data);
var backdrop:Shape = new Shape();
var g0:Graphics = backdrop.graphics;
g0.beginFill(0x303030);
g0.drawRect(0, 0, 400, 200);
g0.endFill();
addChild(backdrop);
var backgroundShape:Shape = new Shape();
var g1:Graphics = backgroundShape.graphics;
var c1:Array = [0x336600, 0x80ff00];
var a1:Array = [255, 255];
var r1:Array = [100, 255];
var m1:Matrix = new Matrix();
m1.createGradientBox(300, 200);
g1.beginGradientFill(GradientType.LINEAR, c1, a1, r1, m1);
g1.drawEllipse(0, 0, 300, 200);
Derni&egrave;re mise &agrave; jour le 27/4/2013
326
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
g1.endFill();
addChild(backgroundShape);
var foregroundShape:Shape = new Shape();
var g2:Graphics = foregroundShape.graphics;
var c2:Array = [0xff8000, 0x663300];
var a2:Array = [255, 255];
var r2:Array = [100, 255];
var m2:Matrix = new Matrix();
m2.createGradientBox(300, 200);
g2.beginGradientFill(GradientType.LINEAR, c2, a2, r2, m2);
g2.drawEllipse(100, 0, 300, 200);
g2.endFill();
addChild(foregroundShape);
foregroundShape.blendShader = shader;
foregroundShape.blendMode = BlendMode.SHADER;
}
}
}
Le code source du noyau du shader LumaLighten, utilis&eacute; pour la cr&eacute;ation du fichier &laquo; LumaLighten.pbj &raquo; de pseudocode binaire Pixel Bender, est indiqu&eacute; ci-dessous :
&lt;languageVersion : 1.0;&gt;
kernel LumaLighten
&lt;
namespace : &quot;com.quasimondo.blendModes&quot;;
vendor : &quot;Quasimondo.com&quot;;
version : 1;
description : &quot;Luminance based lighten blend mode&quot;;
&gt;
{
input image4 background;
input image4 foreground;
output pixel4 dst;
const float3 LUMA = float3(0.212671, 0.715160, 0.072169);
void evaluatePixel()
{
float4 a = sampleNearest(foreground, outCoord());
float4 b = sampleNearest(background, outCoord());
float luma_a = a.r * LUMA.r + a.g * LUMA.g + a.b * LUMA.b;
float luma_b = b.r * LUMA.r + b.g * LUMA.g + b.b * LUMA.b;
dst = luma_a &gt; luma_b ? a : b;
}
}
Pour plus d’informations sur l’utilisation des modes de fondu, voir &laquo; Application de modes de fondu &raquo; &agrave; la page 193.
Derni&egrave;re mise &agrave; jour le 27/4/2013
327
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Remarque : lorsqu’un programme shader Pixel Bender est ex&eacute;cut&eacute; en tant que fusion dans Flash Player ou AIR, les
fonctions d’&eacute;chantillonnage et outCoord() ne se comportent pas comme dans les autres contextes. En mode de fusion,
une fonction d’&eacute;chantillonnage renvoie toujours le pixel en cours d’&eacute;valuation par le shader. Il est, par exemple,
impossible d’ajouter un d&eacute;calage &agrave; outCoord() pour &eacute;chantillonner un pixel environnant. De m&ecirc;me, si vous utilisez la
fonction outCoord() dans un contexte autre qu’une fonction d’&eacute;chantillonnage, ses coordonn&eacute;es renvoient toujours 0.
Il est ainsi impossible de se baser sur la position d’un pixel pour affecter la combinaison des images fusionn&eacute;es.
Utilisation d’un shader comme filtre
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Utiliser un shader comme filtre s’apparente &agrave; l’utilisation de tout autre filtre dans ActionScript. Lorsque vous utilisez
un shader en tant que filtre, l’image filtr&eacute;e (un objet d’affichage ou un objet BitmapData) est transmise au shader. Le
shader utilise l’image d’entr&eacute;e pour cr&eacute;er le r&eacute;sultat du filtre, qui correspond g&eacute;n&eacute;ralement &agrave; une version modifi&eacute;e de
l’image d’origine. Si l’objet filtr&eacute; est un objet d’affichage, le r&eacute;sultat du filtre remplace l’objet d’affichage filtr&eacute; &agrave; l’&eacute;cran.
Si l’objet filtr&eacute; est un objet BitmapData, le r&eacute;sultat du shader devient le contenu de l’objet BitmapData dont la m&eacute;thode
applyFilter() est appel&eacute;e.
Pour utiliser un shader en tant que filtre, vous commencez par cr&eacute;er l’objet Shader, comme indiqu&eacute; &agrave; la section
&laquo; Chargement ou int&eacute;gration d’un shader &raquo; &agrave; la page 312. Vous cr&eacute;ez ensuite un objet ShaderFilter li&eacute; &agrave; l’objet Shader.
L’objet ShaderFilter est le filtre appliqu&eacute; &agrave; l’objet filtr&eacute;. Vous l’appliquez &agrave; un objet &agrave; l’instar de n’importe quel filtre.
Vous le transmettez &agrave; la propri&eacute;t&eacute; filters d’un objet d’affichage ou vous appelez la m&eacute;thode applyFilter() sur un
objet BitmapData. Par exemple, le code suivant cr&eacute;e un objet ShaderFilter et applique le filtre &agrave; un objet d’affichage
appel&eacute; homeButton.
var myFilter:ShaderFilter = new ShaderFilter(myShader);
homeButton.filters = [myFilter];
Lorsque vous utilisez un shader en tant que filtre, une entr&eacute;e au moins doit lui &ecirc;tre associ&eacute;e. Comme indiqu&eacute; dans
l’exemple, vous ne d&eacute;finissez pas la valeur d’entr&eacute;e dans le code. L’objet d’affichage filtr&eacute; ou l’objet BitmapData est
d&eacute;fini en tant qu’image d’entr&eacute;e. Si vous utilisez un shader qui attend plus d’une entr&eacute;e, vous en sp&eacute;cifiez la valeur &agrave;
partir de la deuxi&egrave;me entr&eacute;e.
Dans certains cas, un filtre modifie les dimensions de l’image d’origine. Un effet d’ombre port&eacute;e standard ajoute par
exemple des pixels contenant l’ombre associ&eacute;e &agrave; l’image. Lorsque vous utilisez un shader qui modifie les dimensions
de l’image, d&eacute;finissez les propri&eacute;t&eacute;s leftExtension, rightExtension, topExtension et bottomExtension pour
indiquer l’&eacute;cart appropri&eacute;.
L’exemple suivant illustre l’utilisation d’un shader en tant que filtre. Dans cet exemple, le filtre inverse les valeurs des
canaux rouge, vert et bleu d’une image. Il a pour r&eacute;sultat un &laquo; n&eacute;gatif &raquo; de l’image.
Remarque : cet exemple utilise comme shader le noyau invertRGB.pbk Pixel Bender int&eacute;gr&eacute; &agrave; Pixel Bender Toolkit. Vous
pouvez charger le code source du noyau &agrave; partir du r&eacute;pertoire d’installation de Pixel Bender Toolkit. Compilez le code
source, puis enregistrez le fichier de pseudo-code binaire dans le m&ecirc;me r&eacute;pertoire que le code source.
Le code ActionScript important figure dans les deux m&eacute;thodes suivantes :
•
init() : la m&eacute;thode init() est appel&eacute;e lors du chargement de l’application. Dans cette m&eacute;thode, le code charge le
fichier de pseudo-code binaire du shader.
Derni&egrave;re mise &agrave; jour le 27/4/2013
328
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
•
onLoadComplete() : dans la m&eacute;thode onLoadComplete(), le code cr&eacute;e l’objet Shader appel&eacute; shader. Il cr&eacute;e et
dessine ensuite le contenu d’un objet appel&eacute; target. L’objet target est un rectangle rempli d’un d&eacute;grad&eacute; lin&eacute;aire
rouge sur la gauche, jaune-vert au centre et bleu sur la droite. Si le filtre n’est pas appliqu&eacute;, l’apparence de l’objet est
la suivante :
Si le filtre est appliqu&eacute;, les couleurs sont invers&eacute;es, auquel cas l’apparence du rectangle est la suivante :
Ce code utilise &agrave; titre de shader le noyau &laquo; invertRGB.pbk &raquo; Pixel Bender d’exemple int&eacute;gr&eacute; &agrave; Pixel Bender Toolkit. Le
code source figure dans le fichier &laquo; invertRGB.pbk &raquo;, qui r&eacute;side dans le r&eacute;pertoire d’installation de Pixel Bender
Toolkit. Compilez le code source et enregistrez le fichier de pseudo-code binaire sous le nom &laquo; invertRGB.pbj &raquo; dans
le m&ecirc;me r&eacute;pertoire que votre code source ActionScript.
Vous trouverez ci-dessous le code ActionScript associ&eacute; &agrave; cet exemple : Utilisez cette classe en tant que classe
d’application principale d’un projet ActionScript uniquement dans Flash Builder, ou en tant que classe de document
du fichier FLA dans Flash Professional :
Derni&egrave;re mise &agrave; jour le 27/4/2013
329
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
package
{
import
import
import
import
import
import
import
import
import
import
import
flash.display.GradientType;
flash.display.Graphics;
flash.display.Shader;
flash.display.Shape;
flash.display.Sprite;
flash.filters.ShaderFilter;
flash.events.Event;
flash.geom.Matrix;
flash.net.URLLoader;
flash.net.URLLoaderDataFormat;
flash.net.URLRequest;
public class InvertRGB extends Sprite
{
private var shader:Shader;
private var loader:URLLoader;
public function InvertRGB()
{
init();
}
private function init():void
{
loader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.load(new URLRequest(&quot;invertRGB.pbj&quot;));
}
private function onLoadComplete(event:Event):void
{
shader = new Shader(loader.data);
var target:Shape = new Shape();
addChild(target);
var g:Graphics = target.graphics;
var c:Array = [0x990000, 0x445500, 0x007799];
var a:Array = [255, 255, 255];
var r:Array = [0, 127, 255];
var m:Matrix = new Matrix();
m.createGradientBox(w, h);
g.beginGradientFill(GradientType.LINEAR, c, a, r, m);
g.drawRect(10, 10, w, h);
g.endFill();
var invertFilter:ShaderFilter = new ShaderFilter(shader);
target.filters = [invertFilter];
}
}
}
Pour plus d’informations sur l’application de filtres, voir &laquo; Cr&eacute;ation et application de filtres &raquo; &agrave; la page 277.
Derni&egrave;re mise &agrave; jour le 27/4/2013
330
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Utilisation d’un shader en mode autonome
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Lorsque vous utilisez un shader en mode autonome, son traitement s’ex&eacute;cute ind&eacute;pendamment de l’usage pr&eacute;vu du
r&eacute;sultat. Vous sp&eacute;cifiez le shader &agrave; ex&eacute;cuter, d&eacute;finissez les valeurs d’entr&eacute;e et de param&egrave;tres, puis stipulez un objet dans
lequel seront plac&eacute;es les donn&eacute;es r&eacute;sultantes. Vous pouvez utiliser un shader en mode autonome pour deux raisons :
• Traitement de donn&eacute;es non graphiques : en mode autonome, vous pouvez choisir de transmettre des donn&eacute;es
binaires ou num&eacute;riques arbitraires au shader au lieu de donn&eacute;es d’image bitmap. Le cas &eacute;ch&eacute;ant, le r&eacute;sultat du
shader peut &ecirc;tre renvoy&eacute; sous forme de donn&eacute;es binaires ou num&eacute;riques en plus des donn&eacute;es d’image bitmap.
• Traitement en arri&egrave;re-plan : lorsque vous ex&eacute;cutez un shader en mode autonome, il est ex&eacute;cut&eacute; en mode
asynchrone par d&eacute;faut. Cela signifie que le shader s’ex&eacute;cute en arri&egrave;re-plan pendant que votre application continue
&agrave; tourner et que votre code est averti une fois le traitement du shader termin&eacute;. Vous pouvez utiliser un shader sans
pour autant bloquer l’interface utilisateur de l’application ou tout autre traitement, m&ecirc;me si la dur&eacute;e de son
ex&eacute;cution est &eacute;lev&eacute;e.
Un objet ShaderJob permet d’ex&eacute;cuter un shader en mode autonome. Vous commencez par cr&eacute;er un objet ShaderJob
et vous le liez &agrave; l’objet Shader qui repr&eacute;sente le shader &agrave; ex&eacute;cuter :
var job:ShaderJob = new ShaderJob(myShader);
Vous d&eacute;finissez ensuite toute valeur d’entr&eacute;e ou de param&egrave;tre attendue par le shader. Si vous ex&eacute;cutez le shader en
arri&egrave;re-plan, vous enregistrez &eacute;galement un &eacute;couteur associ&eacute; &agrave; l’&eacute;v&eacute;nement complete de l’objet ShaderJob. Votre
&eacute;couteur est appel&eacute; lorsque le shader termine sa t&acirc;che :
function completeHandler(event:ShaderEvent):void
{
// do something with the shader result
}
job.addEventListener(ShaderEvent.COMPLETE, completeHandler);
Vous cr&eacute;ez ensuite un objet dans lequel est &eacute;crit le r&eacute;sultat de l’op&eacute;ration du shader, une fois celle-ci termin&eacute;e. Vous
affectez cet objet &agrave; la propri&eacute;t&eacute; target de l’objet ShaderJob :
var jobResult:BitmapData = new BitmapData(100, 75);
job.target = jobResult;
Affectez une occurrence de BitmapData &agrave; la propri&eacute;t&eacute; target si vous utilisez l’objet ShaderJob pour ex&eacute;cuter le
traitement de l’image. Si vous traitez des donn&eacute;es binaires ou num&eacute;riques, affectez un objet ByteArray ou une
occurrence de Vector.&lt;Number&gt; &agrave; la propri&eacute;t&eacute; target. Si tel est le cas, vous devez d&eacute;finir les propri&eacute;t&eacute;s width et
height de l’objet ShaderJob pour stipuler le volume de donn&eacute;es &agrave; cr&eacute;er dans l’objet target.
Remarque : vous pouvez d&eacute;finir les propri&eacute;t&eacute;s shader, target,width et height de l’objet ShaderJob en une seule &eacute;tape.
Pour ce faire, transmettez les arguments au constructeur ShaderJob(), comme suit :var job:ShaderJob = new
ShaderJob(myShader, myTarget, myWidth, myHeight);.
Lorsque vous &ecirc;tes pr&ecirc;t &agrave; ex&eacute;cuter le shader, vous appelez la m&eacute;thode start() de l’objet ShaderJob :
job.start();
Par d&eacute;faut, appeler start() entra&icirc;ne l’ex&eacute;cution asynchrone de l’objet ShaderJob. Dans ce cas, l’ex&eacute;cution du
programme continue et passe imm&eacute;diatement &agrave; la ligne suivante de code au lieu d’attendre que le shader soit termin&eacute;.
Une fois l’op&eacute;ration du shader termin&eacute;e, l’objet ShaderJob appelle ses &eacute;couteurs d’&eacute;v&eacute;nement complete et les avertit.
A ce stade (en d’autres termes, dans le corps de votre &eacute;couteur d’&eacute;v&eacute;nement complete), l’objet target contient le
r&eacute;sultat de l’op&eacute;ration du shader.
Derni&egrave;re mise &agrave; jour le 27/4/2013
331
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des shaders de Pixel Bender
Remarque : au lieu d’utiliser l’objet propri&eacute;t&eacute; target, vous pouvez extraire directement le r&eacute;sultat du shader de l’objet
&eacute;v&eacute;nement qui est transmis &agrave; la m&eacute;thode d’&eacute;couteur. L’objet &eacute;v&eacute;nement est une occurrence de ShaderEvent. L’objet
ShaderEvent poss&egrave;de trois propri&eacute;t&eacute;s susceptibles d’&ecirc;tre utilis&eacute;es pour acc&eacute;der au r&eacute;sultat, selon le type de donn&eacute;es de
l’objet d&eacute;fini en tant que propri&eacute;t&eacute; target : ShaderEvent.bitmapData, ShaderEvent.byteArray et
ShaderEvent.vector.
Vous pouvez &eacute;galement transmettre un argument true &agrave; la m&eacute;thode start(). Dans ce cas, l’op&eacute;ration du shader
s’ex&eacute;cute en mode synchrone. Tout le code (y compris l’interaction avec l’interface utilisateur et tout autre &eacute;v&eacute;nement)
est interrompu pendant l’ex&eacute;cution du shader. Une fois le shader termin&eacute;, l’objet target en contient le r&eacute;sultat et le
programme passe &agrave; la ligne de code suivante.
job.start(true);
Derni&egrave;re mise &agrave; jour le 27/4/2013
332
333
Chapitre 16 : Utilisation des clips
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La classe MovieClip est la classe de base des animations et des symboles de clip cr&eacute;&eacute;s dans l’environnement de
d&eacute;veloppement Adobe&reg; Flash&reg;. Elle poss&egrave;de tous les comportements et toutes les fonctionnalit&eacute;s des objets d’affichage,
mais int&egrave;gre des propri&eacute;t&eacute;s et m&eacute;thodes suppl&eacute;mentaires qui permettent de contr&ocirc;ler son sc&eacute;nario.
Principes de base des clips
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les clips sont un &eacute;l&eacute;ment capital pour les cr&eacute;ateurs de contenu anim&eacute; dans l’environnement de cr&eacute;ation Flash et pour
contr&ocirc;ler ce contenu avec ActionScript. Lorsque vous cr&eacute;ez un symbole de clip dans Flash, le programme ajoute ce
symbole &agrave; la biblioth&egrave;que du document Flash. Par d&eacute;faut, ce symbole devient une occurrence de la classe MovieClip
et, de ce fait, poss&egrave;de les propri&eacute;t&eacute;s et m&eacute;thodes de cette classe.
Lorsqu’une occurrence d’un symbole de clip est plac&eacute;e sur la sc&egrave;ne, la progression du sc&eacute;nario de ce clip s’effectue
automatiquement (si le clip comporte plusieurs images), sauf si cette lecture est modifi&eacute;e en ActionScript. Le sc&eacute;nario
est l’&eacute;l&eacute;ment distinctif de la classe MovieClip. Il permet de cr&eacute;er des animations par interpolation de mouvement ou
de forme via l’interface de Flash. Par contre, un objet d’affichage issu de la classe Sprite peut uniquement &ecirc;tre anim&eacute;
par programmation, en modifiant ses valeurs.
Dans les versions pr&eacute;c&eacute;dentes d’ActionScript, la classe MovieClip constituait la classe de base de toutes les occurrences
de la sc&egrave;ne. En ActionScript 3.0, un clip est d&eacute;sormais un objet d’affichage parmi d’autres, tous susceptibles de
s’afficher &agrave; l’&eacute;cran. S’il n’est pas n&eacute;cessaire de d&eacute;finir un sc&eacute;nario pour la fonction d’un objet d’affichage, l’utilisation
de la classe Shape au lieu de la classe MovieClip peut accro&icirc;tre les performances d’affichage. Pour plus d’informations
sur le choix des objets d’affichage en fonction de la t&acirc;che pr&eacute;vue, voir &laquo; S&eacute;lection d’une sous-classe de DisplayObject &raquo;
&agrave; la page 179.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs aux clips :
Fichier SWF AVM1 Fichier SWF cr&eacute;&eacute; en ActionScript 1.0 ou ActionScript 2.0, et g&eacute;n&eacute;ralement destin&eacute; aux versions 8
ou ant&eacute;rieures de Flash Player.
Fichier SWF AVM2 Fichier SWF cr&eacute;&eacute; en ActionScript 3.0 pour Adobe Flash Player 9 ou ult&eacute;rieur ou Adobe AIR.
Fichier SWF externe Fichier SWF cr&eacute;&eacute; s&eacute;par&eacute;ment du fichier SWF du projet, et destin&eacute; &agrave; &ecirc;tre charg&eacute; et lu dans celui-ci.
Image El&eacute;ment de base du sc&eacute;nario. Comme les images de films, chaque image est une &laquo; photographie &raquo; et c’est la
lecture rapide des images en s&eacute;quence qui produit l’effet d’animation.
Sc&eacute;nario M&eacute;taphore repr&eacute;sentant la s&eacute;rie d’images qui composent la s&eacute;quence d’animation d’un clip. Le sc&eacute;nario d’un
objet MovieClip est l’&eacute;quivalent du sc&eacute;nario de cet objet dans l’environnement de cr&eacute;ation Flash.
T&ecirc;te de lecture Marqueur identifiant la position (l’image) dans le sc&eacute;nario qui est affich&eacute;e &agrave; un moment donn&eacute;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Utilisation des objets MovieClip
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Lorsque vous publiez un fichier SWF, Flash convertit toutes les occurrences de symboles de clips sur la sc&egrave;ne en objets
MovieClip. Pour qu’un symbole de clip soit disponible en ActionScript, donnez-lui un nom d’occurrence dans le
champ Nom de l’occurrence de l’Inspecteur des Propri&eacute;t&eacute;s. Lors de la cr&eacute;ation du fichier SWF, Flash g&eacute;n&egrave;re le code
qui cr&eacute;e l’occurrence de MovieClip sur la sc&egrave;ne et d&eacute;clare une variable avec ce nom d’occurrence. Si les clips que vous
avez nomm&eacute;s sont imbriqu&eacute;s dans d’autres clips nomm&eacute;s, ces clips enfant sont trait&eacute;s comme des propri&eacute;t&eacute;s du clip
parent : vous pouvez acc&eacute;der &agrave; tous les clips de cette hi&eacute;rarchie en utilisant la syntaxe &agrave; point. Par exemple, si une
occurrence de clip appel&eacute;e childClip est imbriqu&eacute;e dans une autre appel&eacute;e parentClip, vous pouvez lancer sa
lecture en appelant le code suivant :
parentClip.childClip.play();
Remarque : les occurrences enfant plac&eacute;es sur la sc&egrave;ne dans l’outil de programmation de Flash ne sont pas accessibles par
le code depuis l’int&eacute;rieur du constructeur d’une occurrence parent car, &agrave; ce stade de l’ex&eacute;cution du code, elles n’ont pas
&eacute;t&eacute; cr&eacute;&eacute;es. Avant d’acc&eacute;der &agrave; l’enfant, le parent doit soit cr&eacute;er l’occurrence enfant par du code, soit retarder l’acc&egrave;s &agrave; une
fonction de rappel qui &eacute;coute l’enfant en vue de la distribution de son &eacute;v&eacute;nement Event.ADDED_TO_STAGE.
Si de nombreuses m&eacute;thodes et propri&eacute;t&eacute;s de la classe MovieClip d’ActionScript 2.0 restent les m&ecirc;mes, d’autres ont
chang&eacute;. Toutes les propri&eacute;t&eacute;s qui &eacute;taient pr&eacute;fix&eacute;es d’un trait de soulignement ont &eacute;t&eacute; renomm&eacute;es. Par exemple, les
propri&eacute;t&eacute;s _width et _height sont d&eacute;sormais accessibles sous le nom width et height, _xscale et _yscale sous le
nomscaleX et scaleY. Pour obtenir la liste compl&egrave;te des propri&eacute;t&eacute;s et m&eacute;thodes de la classe MovieClip, voir le manuel
Guide de r&eacute;f&eacute;rence ActionScript 3.0 pour la plate-forme Adobe Flash.
Contr&ocirc;le de la lecture d’un clip
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Flash utilise la m&eacute;taphore du sc&eacute;nario pour traduire une animation ou un changement d’&eacute;tat. Tout &eacute;l&eacute;ment visuel qui
a recours &agrave; un sc&eacute;nario est soit un objet MovieClip, soit une extension de la classe MovieClip. Bien qu’il soit possible
en ActionScript de commander l’arr&ecirc;t ou la lecture d’un clip et le passage &agrave; un autre point du sc&eacute;nario, il n’est pas
possible de cr&eacute;er dynamiquement un sc&eacute;nario ni d’ajouter du contenu dans une image sp&eacute;cifique. Seul l’outil de
programmation Flash le permet.
Pendant la lecture, le clip progresse le long du sc&eacute;nario &agrave; une vitesse fix&eacute;e par la cadence d’image du fichier SWF. Vous
pouvez &eacute;galement ignorer ce param&egrave;tre et le remplacer par la propri&eacute;t&eacute; Stage.frameRate dans ActionScript.
Lecture et arr&ecirc;t des clips
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les m&eacute;thodes play() et stop() permettent d’effectuer des manipulations simples sur un clip tout au long du sc&eacute;nario.
Par exemple, supposons qu’un symbole de clip sur la sc&egrave;ne contienne une animation repr&eacute;sentant une bicyclette qui
traverse l’&eacute;cran, et dont le nom d’occurrence est bicycle. Si le code suivant est associ&eacute; &agrave; une image-cl&eacute; du sc&eacute;nario
principal,
bicycle.stop();
Derni&egrave;re mise &agrave; jour le 27/4/2013
334
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
la bicyclette ne se d&eacute;place pas (son animation n’est pas mise en lecture). Le mouvement de la bicyclette peut &ecirc;tre
d&eacute;clench&eacute; par une action de l’utilisateur. Par exemple, avec un bouton nomm&eacute; startButton, le code suivant (dans
une image-cl&eacute; du sc&eacute;nario principal) d&eacute;clenche l’animation si l’utilisateur clique sur ce bouton :
// This function will be called when the button is clicked. It causes the
// bicycle animation to play.
function playAnimation(event:MouseEvent):void
{
bicycle.play();
}
// Register the function as a listener with the button.
startButton.addEventListener(MouseEvent.CLICK, playAnimation);
Avance rapide et rembobinage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Les m&eacute;thodes play() et stop() ne sont pas les seules m&eacute;thodes commandant l’animation d’un clip. Vous pouvez
&eacute;galement avancer et reculer manuellement la t&ecirc;te de lecture &agrave; l’aide des m&eacute;thodes nextFrame() et prevFrame().
L’appel de l’une de ces deux m&eacute;thodes arr&ecirc;te la lecture et fait avancer le clip ou le rembobine d’une image.
L’utilisation de la m&eacute;thode play() revient &agrave; appeler nextFrame() chaque fois qu’un &eacute;v&eacute;nement enterFrame est
d&eacute;clench&eacute; pour cet objet clip. Vous pouvez donc envisager de lire le clip bicycle en arri&egrave;re en ajoutant un &eacute;couteur
pour l’&eacute;v&eacute;nement enterFrame et en indiquant &agrave; bicycle, dans la fonction &eacute;couteur, de reculer d’une image, comme
suit :
// This function is called when the enterFrame event is triggered, meaning
// it's called once per frame.
function everyFrame(event:Event):void
{
if (bicycle.currentFrame == 1)
{
bicycle.gotoAndStop(bicycle.totalFrames);
}
else
{
bicycle.prevFrame();
}
}
bicycle.addEventListener(Event.ENTER_FRAME, everyFrame);
En lecture normale, si un clip contient plusieurs images, il tourne en boucle lors de la lecture, c’est-&agrave;-dire qu’il revient
&agrave; l’image 1 une fois qu’il a pass&eacute; la derni&egrave;re image. Si vous utilisez prevFrame() ou nextFrame(), ce comportement
ne se produit pas automatiquement (l’appel de prevFrame() lorsque la t&ecirc;te de lecture est sur l’image 1 ne d&eacute;place pas
la t&ecirc;te de lecture &agrave; la derni&egrave;re image). Dans l’exemple ci-dessus, la condition if v&eacute;rifie si le clip est revenu &agrave; la premi&egrave;re
image et fait alors passer le clip &agrave; la derni&egrave;re image, cr&eacute;ant ainsi une boucle continue de lecture en arri&egrave;re.
Derni&egrave;re mise &agrave; jour le 27/4/2013
335
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
D&eacute;placement vers une autre image et utilisation des &eacute;tiquettes d’image
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le d&eacute;placement d’un clip &agrave; une nouvelle image est une op&eacute;ration simple. Il suffit d’appeler gotoAndPlay() ou
gotoAndStop() en sp&eacute;cifiant le num&eacute;ro de l’image cible comme param&egrave;tre. Vous pouvez &eacute;galement transmettre une
cha&icirc;ne correspondant au nom de l’&eacute;tiquette d’image. Il est possible d’attribuer une &eacute;tiquette &agrave; toute image du sc&eacute;nario.
Pour ce faire, s&eacute;lectionnez une image du sc&eacute;nario, puis tapez un nom dans le champ Etiquette d’image de l’Inspecteur
des Propri&eacute;t&eacute;s.
L’utilisation des &eacute;tiquettes d’image plut&ocirc;t que des num&eacute;ros pr&eacute;sente des avantages &eacute;vidents pour cr&eacute;er un clip
complexe. Si le nombre d’images, de calques et d’interpolations d’une animation est &eacute;lev&eacute;, envisagez d’&eacute;tiqueter les
images importantes de mani&egrave;re &eacute;vocatrice, en faisant r&eacute;f&eacute;rence aux changements de comportement dans le clip (par
exemple &laquo; d&eacute;part &raquo;, &laquo; marche &raquo; ou &laquo; course &raquo;). Cette technique permet d’am&eacute;liorer la lisibilit&eacute; du code et offre plus de
souplesse, puisque les appels ActionScript destin&eacute;s &agrave; une image &eacute;tiquet&eacute;e pointent sur une r&eacute;f&eacute;rence uniquement
(l’&eacute;tiquette) plut&ocirc;t que sur une image num&eacute;rot&eacute;e. Si vous d&eacute;cidez par la suite de d&eacute;placer un segment de l’animation
vers une autre image, il ne sera pas n&eacute;cessaire de modifier le code ActionScript si vous conservez les m&ecirc;mes &eacute;tiquettes
pour toutes les images au nouvel emplacement.
Pour repr&eacute;senter des &eacute;tiquettes en code, ActionScript 3.0 comporte la classe FrameLabel. Chaque occurrence de cette
classe repr&eacute;sente une &eacute;tiquette d’image unique, et poss&egrave;de une propri&eacute;t&eacute; name qui repr&eacute;sente le nom de l’&eacute;tiquette tel
qu’il a &eacute;t&eacute; indiqu&eacute; dans l’Inspecteur des Propri&eacute;t&eacute;s, ainsi qu’une propri&eacute;t&eacute; frame qui repr&eacute;sente le num&eacute;ro de l’image
pour laquelle l’&eacute;tiquette est plac&eacute;e dans le sc&eacute;nario.
Pour permettre d’acc&eacute;der aux occurrences de FrameLabel associ&eacute;es &agrave; une occurrence de clip, la classe MovieClip
comporte deux propri&eacute;t&eacute;s qui renvoient directement des objets FrameLabel. La propri&eacute;t&eacute; currentLabels renvoie un
tableau compos&eacute; de tous les objets FrameLabel pr&eacute;sents sur l’ensemble du sc&eacute;nario d’un clip. La propri&eacute;t&eacute;
currentLabel renvoie une cha&icirc;ne contenant le nom de l’&eacute;tiquette d’image trouv&eacute;e r&eacute;cemment sur le sc&eacute;nario.
Supposons que vous ayez cr&eacute;&eacute; un clip nomm&eacute; Robot et que vous ayez &eacute;tiquet&eacute; les diff&eacute;rents &eacute;tats de l’animation. Vous
pouvez d&eacute;finir une condition pour v&eacute;rifier la propri&eacute;t&eacute; currentLabel afin d’acc&eacute;der &agrave; l’&eacute;tat actuel de Robot, comme
dans le code suivant :
if (robot.currentLabel == &quot;walking&quot;)
{
// do something
}
Flash Player 11.3 et AIR 3.3 ont ajout&eacute; l’&eacute;v&eacute;nement frameLabel &agrave; la classe FrameLabel. Vous pouvez affecter un
gestionnaire d’&eacute;v&eacute;nement &agrave; l’occurrence de FrameLabel qui repr&eacute;sente l’&eacute;tiquette d’une trame. L’&eacute;v&eacute;nement est
distribu&eacute; lorsque la t&ecirc;te de lecture acc&egrave;de &agrave; la trame.
L’exemple suivant cr&eacute;e une occurrence de FrameLabel pour la seconde &eacute;tiquette de trame dans l’objet Array des
&eacute;tiquettes de trames du MovieClip. Il enregistre ensuite un gestionnaire d’&eacute;v&eacute;nement pour l’&eacute;v&eacute;nement frameLabel :
var myFrameLabel:FrameLabel = robot.currentLabels[1];
myFrameLabel.addEventListener(Event.FRAME_LABEL, onFrameLabel);
function onFrameLabel(e:Event):void {
//do something
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
336
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Utilisation des s&eacute;quences
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Dans l’environnement de cr&eacute;ation Flash, vous pouvez utiliser les s&eacute;quences pour d&eacute;marquer une s&eacute;rie de sc&eacute;narios
qu’un fichier SWF doit suivre. Gr&acirc;ce au second param&egrave;tre de la m&eacute;thode gotoAndPlay() ou gotoAndStop(), vous
pouvez sp&eacute;cifier la s&eacute;quence sur laquelle la t&ecirc;te de lecture doit se placer. Tous les fichiers FLA commencent par une
s&eacute;quence, &agrave; laquelle vous pouvez ajouter le nombre de s&eacute;quences de votre choix.
L’utilisation des s&eacute;quences n’est pas toujours conseill&eacute;e, car elle pr&eacute;sente un certain nombre d’inconv&eacute;nients. La
maintenance d’un document Flash qui contient de nombreuses s&eacute;quences peut &ecirc;tre difficile, en particulier dans les
environnements o&ugrave; plusieurs auteurs interviennent. Un nombre &eacute;lev&eacute; de s&eacute;quences peut &eacute;galement s’av&eacute;rer inefficace
de point de vue de la bande passante, car le processus de publication implique la fusion de toutes les s&eacute;quences en un
seul sc&eacute;nario. L’ensemble des s&eacute;quences est alors t&eacute;l&eacute;charg&eacute; en mode progressif, m&ecirc;me si elles ne sont jamais lues. C’est
pourquoi l’utilisation de plusieurs s&eacute;quences est largement d&eacute;conseill&eacute;e, &agrave; moins qu’elle soit n&eacute;cessaire &agrave; l’organisation
de plusieurs animations bas&eacute;es sur des sc&eacute;narios.
La propri&eacute;t&eacute; scenes de la classe MovieClip renvoie un tableau des objets Scene repr&eacute;sentant toutes les s&eacute;quences du
fichier SWF. La propri&eacute;t&eacute; currentScene renvoie un objet Scene repr&eacute;sentant la s&eacute;quence qui est en cours de lecture.
La classe Scene a des propri&eacute;t&eacute;s qui contiennent des informations sur la s&eacute;quence. La propri&eacute;t&eacute; labels renvoie un
tableau des objets FrameLabel utilis&eacute;s au sein de la s&eacute;quence. La propri&eacute;t&eacute; name renvoie le nom de la s&eacute;quence sous
forme de cha&icirc;ne. La propri&eacute;t&eacute; numFrames renvoie un entier repr&eacute;sentant le nombre total d’images dans la s&eacute;quence.
Cr&eacute;ation d’objets MovieClip &agrave; l’aide d’ActionScript
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
L’ajout de contenu s’effectue dans Flash en faisant glisser des &eacute;l&eacute;ments de la biblioth&egrave;que sur la sc&egrave;ne. Mais il ne s’agit
pas l&agrave; de la seule m&eacute;thode. Pour des projets plus complexes, les d&eacute;veloppeurs exp&eacute;riment&eacute;s pr&eacute;f&egrave;rent souvent cr&eacute;er les
clips par programmation. Cette approche pr&eacute;sente plusieurs avantages : r&eacute;utilisation facile du code, vitesse de
compilation accrue et disponibilit&eacute; de modifications plus sophistiqu&eacute;es r&eacute;serv&eacute;es &agrave; ActionScript.
La nouvelle API de liste d’affichage d’ActionScript 3.0 simplifie le processus de cr&eacute;ation dynamique d’objets
MovieClip. La possibilit&eacute; d’instancier directement une occurrence de MovieClip, s&eacute;par&eacute;ment de son ajout &agrave; la liste
d’affichage, offre beaucoup de souplesse et de simplicit&eacute; sans sacrifier tout contr&ocirc;le.
En ActionScript 3.0, lorsqu’une occurrence de clip (ou de tout autre objet d’affichage) est cr&eacute;&eacute;e par code, elle est
invisible tant qu’elle n’a pas &eacute;t&eacute; ajout&eacute;e &agrave; la liste d’affichage &agrave; l’aide de la m&eacute;thode addChild() ou addChildAt() d’un
conteneur d’objets d’affichage Vous pouvez ainsi cr&eacute;er un clip et d&eacute;finir ses propri&eacute;t&eacute;s, et m&ecirc;me appeler ses m&eacute;thodes,
avant qu’il apparaisse &agrave; l’&eacute;cran. Pour plus d’informations sur l’utilisation de la liste d’affichage, voir &laquo; Utilisation de
conteneurs d’objets d’affichage &raquo; &agrave; la page 165.
Derni&egrave;re mise &agrave; jour le 27/4/2013
337
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Exportation des symboles de biblioth&egrave;que pour ActionScript
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Par d&eacute;faut, il est impossible de cr&eacute;er dynamiquement des occurrences de symboles de clips dans la biblioth&egrave;que d’un
document Flash (c’est-&agrave;-dire de les cr&eacute;er enti&egrave;rement en ActionScript). En effet, l’exportation de chaque symbole pour
une utilisation en ActionScript accro&icirc;t la taille du fichier SWF. Or, les symboles ne sont pas tous destin&eacute;s &agrave; une
utilisation sur la sc&egrave;ne. C’est pourquoi, pour qu’un symbole soit disponible en ActionScript, vous devez indiquer
sp&eacute;cifiquement que ce symbole doit &ecirc;tre export&eacute; pour ActionScript.
Pour exporter un symbole pour ActionScript :
1 S&eacute;lectionnez le symbole dans le panneau Biblioth&egrave;que et ouvrez sa bo&icirc;te de dialogue Propri&eacute;t&eacute;s.
2 Si n&eacute;cessaire, activez les param&egrave;tres avanc&eacute;s.
3 Dans la bo&icirc;te de dialogue Liaison, activez l’option Exporter pour ActionScript.
Les champs Classe et Classe de base sont alors activ&eacute;s.
Par d&eacute;faut, le champ Classe contient le nom du symbole sans espaces (par exemple, un symbole nomm&eacute; &laquo; Maison
Rouge &raquo; devient &laquo; MaisonRouge &raquo;). Pour sp&eacute;cifier que le symbole doit utiliser une classe personnalis&eacute;e pour son
comportement, saisissez le nom complet de cette classe, package compris. Si vous voulez avoir la possibilit&eacute; de cr&eacute;er
des occurrences du symbole en ActionScript, sans avoir pour autant besoin de comportements suppl&eacute;mentaires,
vous pouvez laisser ce nom de classe tel quel.
Par d&eacute;faut, le champ Classe de base a la valeur flash.display.MovieClip. Si vous voulez que votre symbole
&eacute;tende les fonctionnalit&eacute;s d’une autre classe personnalis&eacute;e, vous pouvez remplacer cette valeur par le nom de votre
classe, sous r&eacute;serve que celle-ci &eacute;tende la classe Sprite (ou MovieClip).
4 Cliquez sur OK pour enregistrer les changements.
A ce stade, si Flash ne d&eacute;tecte pas de fichier ActionScript externe contenant la d&eacute;finition de la classe sp&eacute;cifi&eacute;e (par
exemple, si vous n’avez pas besoin d’ajouter un comportement suppl&eacute;mentaire pour le symbole), un message
d’avertissement appara&icirc;t :
Le chemin de classe ne contient pas de d&eacute;finition pour cette classe. Une d&eacute;finition sera g&eacute;n&eacute;r&eacute;e automatiquement dans
le fichier SWF lors de l’exportation.
Vous pouvez ignorer cet avertissement si le symbole de biblioth&egrave;que ne n&eacute;cessite pas de fonctionnalit&eacute;s en dehors
de celles de la classe MovieClip.
Si vous n’indiquez aucune classe pour votre symbole, Flash cr&eacute;e pour lui une classe du type de celle-ci :
package
{
import flash.display.MovieClip;
public class ExampleMovieClip extends MovieClip
{
public function ExampleMovieClip()
{
}
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
338
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Si vous ne souhaitez pas ajouter des fonctionnalit&eacute;s ActionScript au symbole, ajoutez les propri&eacute;t&eacute;s et m&eacute;thodes
n&eacute;cessaires &agrave; la structure de code suivante. Supposons par exemple que vous disposez d’un symbole de clip contenant
un cercle de 50 pixels de diam&egrave;tre, dont le param&egrave;tre de liaison est Exporter pour ActionScript et dont la classe est
Circle. Le code suivant, lorsqu’il est plac&eacute; dans un fichier Circle.as, &eacute;tend la classe MovieClip et fournit au symbole les
m&eacute;thodes suppl&eacute;mentaires getArea() et getCircumference() :
package
{
import flash.display.MovieClip;
public class Circle extends MovieClip
{
public function Circle()
{
}
public function getArea():Number
{
// The formula is Pi times the radius squared.
return Math.PI * Math.pow((width / 2), 2);
}
public function getCircumference():Number
{
// The formula is Pi times the diameter.
return Math.PI * width;
}
}
}
Le code suivant, plac&eacute; dans une image-cl&eacute; &agrave; l’image 1 du document Flash, cr&eacute;e une occurrence du symbole et l’affiche
&agrave; l’&eacute;cran :
var c:Circle = new Circle();
addChild(c);
trace(c.width);
trace(c.height);
trace(c.getArea());
trace(c.getCircumference());
Ce code montre comment utiliser l’instanciation ActionScript au lieu de faire glisser des actifs individuels vers la sc&egrave;ne.
Il cr&eacute;e un cercle qui pr&eacute;sente toutes les propri&eacute;t&eacute;s d’un clip et poss&egrave;de les m&eacute;thodes personnalis&eacute;es d&eacute;finies dans votre
classe Circle. Il s’agit d’un exemple tout &agrave; fait &eacute;l&eacute;mentaire ; un symbole de biblioth&egrave;que peut sp&eacute;cifier un nombre
illimit&eacute; de propri&eacute;t&eacute;s et de m&eacute;thodes dans sa classe.
L’instanciation en ActionScript est un processus puissant, car il permet de cr&eacute;er dynamiquement de nombreuses
occurrences qu’il serait particuli&egrave;rement laborieux de cr&eacute;er manuellement. Elle vous apporte en outre une grande
souplesse, puisque vous pouvez personnaliser les propri&eacute;t&eacute;s de chaque occurrence d&egrave;s sa cr&eacute;ation. Pour saisir
l’importance de ces avantages, vous pouvez utiliser une boucle pour cr&eacute;er dynamiquement plusieurs occurrences de
Circle. Apr&egrave;s avoir ajout&eacute; le symbole Circle et la classe correspondante, d&eacute;crits pr&eacute;c&eacute;demment, dans la biblioth&egrave;que de
votre document Flash, placez le code suivant dans une image-cl&eacute; &agrave; l’image 1 :
Derni&egrave;re mise &agrave; jour le 27/4/2013
339
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
import flash.geom.ColorTransform;
var totalCircles:uint = 10;
var i:uint;
for (i = 0; i &lt; totalCircles; i++)
{
// Create a new Circle instance.
var c:Circle = new Circle();
// Place the new Circle at an x coordinate that will space the circles
// evenly across the Stage.
c.x = (stage.stageWidth / totalCircles) * i;
// Place the Circle instance at the vertical center of the Stage.
c.y = stage.stageHeight / 2;
// Change the Circle instance to a random color
c.transform.colorTransform = getRandomColor();
// Add the Circle instance to the current timeline.
addChild(c);
}
function getRandomColor():ColorTransform
{
// Generate random values for the red, green, and blue color channels.
var red:Number = (Math.random() * 512) - 255;
var green:Number = (Math.random() * 512) - 255;
var blue:Number = (Math.random() * 512) - 255;
// Create and return a ColorTransform object with the random colors.
return new ColorTransform(1, 1, 1, 1, red, green, blue, 0);
}
Cet exemple illustre la rapidit&eacute; avec laquelle vous pouvez cr&eacute;er et personnaliser plusieurs occurrences d’un symbole &agrave;
l’aide de code. Chaque occurrence est positionn&eacute;e en fonction du compteur de boucle. Ensuite une couleur lui est
attribu&eacute;e au hasard &agrave; l’aide de la propri&eacute;t&eacute; transform (dont Circle h&eacute;rite en &eacute;tendant la classe MovieClip).
Chargement d’un fichier SWF externe
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
En ActionScript 3.0, les fichiers SWF sont charg&eacute;s avec la classe Loader. Pour charger un fichier SWF externe, vous
devez d&eacute;finir quatre &eacute;tapes en ActionScript :
1 Cr&eacute;er un objet URLRequest avec l’adresse URL du fichier.
2 Cr&eacute;er un objet Loader.
3 Appeler la m&eacute;thode load() de l’objet Loader en lui passant en param&egrave;tre l’occurrence de l’objet URLRequest.
4 Appeler la m&eacute;thode addChild() pour un conteneur d’objet d’affichage (par exemple le sc&eacute;nario principal d’un
document Flash) afin d’ajouter l’occurrence de Loader &agrave; la liste d’affichage
Le code final se pr&eacute;sente ainsi :
var request:URLRequest = new URLRequest(&quot;http://www.[yourdomain].com/externalSwf.swf&quot;);
var loader:Loader = new Loader()
loader.load(request);
addChild(loader);
Derni&egrave;re mise &agrave; jour le 27/4/2013
340
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Le m&ecirc;me code peut &ecirc;tre utilis&eacute; pour charger un fichier image externe (image JPEG, GIF ou PNG) en sp&eacute;cifiant l’adresse
URL de ce fichier &agrave; la place de celle d’un fichier SWF. Contrairement &agrave; un fichier image, un fichier SWF peut contenir
du code ActionScript. Ainsi, bien que le processus de chargement d’un fichier SWF soit identique &agrave; celui d’une image,
le fichier SWF &agrave; l’origine du chargement et le fichier SWF charg&eacute; doivent se trouver dans le m&ecirc;me sandbox de s&eacute;curit&eacute;
si vous souhaitez utiliser ActionScript pour communiquer avec le fichier SWF externe. En outre, si ce fichier externe
contient des classes qui partagent le m&ecirc;me espace de noms que les classes du fichier SWF qui le charge, il peut s’av&eacute;rer
n&eacute;cessaire de cr&eacute;er un domaine d’application pour le fichier charg&eacute; afin d’&eacute;viter d’&eacute;ventuels conflits d’espace de nom.
Pour plus d’informations sur la s&eacute;curit&eacute; et le domaine d’application, voir &laquo; Utilisation de domaines d’application &raquo; &agrave;
la page 152 et &laquo; Chargement de contenu &raquo; &agrave; la page 1104.
Une fois que le fichier SWF externe est charg&eacute;, il devient accessible via la propri&eacute;t&eacute; Loader.content. Si ce fichier est
publi&eacute; en ActionScript 3.0, il s’agira soit d’un clip, soit d’un sprite, selon la classe qu’il &eacute;tend.
Il existe quelques diff&eacute;rences entre le chargement d’un fichier SWF dans Adobe AIR pour iOS et le chargement dans
d’autres plates-formes. Pour plus d’informations, voir &laquo; Chargement de fichiers SWF dans AIR pour iOS &raquo; &agrave; la
page 209.
Consid&eacute;rations relatives au chargement de fichiers SWF de version ancienne
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Si un fichier SWF externe a &eacute;t&eacute; publi&eacute; dans une version ant&eacute;rieure d’ActionScript, il faut tenir compte de restrictions
importantes. Contrairement &agrave; un fichier SWF ActionScript 3.0 qui s’ex&eacute;cute dans AVM2 (ActionScript Virtual
Machine 2), un fichier SWF publi&eacute; en ActionScript 1.0 ou 2.0 s’ex&eacute;cute dans AVM1 (ActionScript Virtual Machine 1).
Le chargement d’un fichier SWF ActionScript 1.0 ou 2.0 dans un fichier SWF ActionScript 3.0 pr&eacute;sente d’importantes
diff&eacute;rences par rapport au chargement d’un fichier SWF ActionScript 3.0. Flash Player garantit une compatibilit&eacute;
totale avec les versions pr&eacute;c&eacute;dentes et les contenus publi&eacute;s ant&eacute;rieurement. Tout contenu qui s’ex&eacute;cute dans les
versions ant&eacute;rieures de Flash Player s’ex&eacute;cute dans les versions de Flash Player qui g&egrave;rent ActionScript 3.0. Tenez
cependant compte des restrictions suivantes :
• Le code ActionScript 3.0 peut charger un fichier SWF &eacute;crit en ActionScript 1.0 ou 2.0. Lorsque le chargement d’un
fichier SWF ActionScript 1.0 ou 2.0 aboutit, l’objet charg&eacute; (la propri&eacute;t&eacute; Loader.content ) est un objet
AVM1Movie. Une occurrence d’AVM1Movie n’est pas identique &agrave; une occurrence de MovieClip. C’est un objet
d’affichage qui, contrairement &agrave; un clip, ne comporte pas de m&eacute;thodes ni de propri&eacute;t&eacute;s li&eacute;es au sc&eacute;nario. Le fichier
SWF AVM2 parent ne peut pas acc&eacute;der aux propri&eacute;t&eacute;s, m&eacute;thodes ou objets de l’objet AVM1Movie charg&eacute;.
• Les fichiers SWF &eacute;crits en ActionScript 1.0 ou 2.0 ne peuvent pas charger les fichiers SWF &eacute;crits en
ActionScript 3.0. Cela signifie que les fichiers SWF cr&eacute;&eacute;s dans Flash 8, Flex Builder 1.5 ou une version ant&eacute;rieure
ne peuvent pas charger les fichiers SWF &eacute;crits en ActionScript 3.0.
Il existe une seule exception &agrave; cette r&egrave;gle : un fichier SWF &eacute;crit en ActionScript 2.0 peut &ecirc;tre remplac&eacute; par un fichier
SWF &eacute;crit en ActionScript 3.0, sous r&eacute;serve que le fichier &eacute;crit en ActionScript 2.0 n’ait effectu&eacute; aucun chargement
&agrave; quelque niveau que ce soit. Pour ce faire, le fichier SWF &eacute;crit en ActionScript 2.0 doit appeler loadMovieNum()
et transmettre la valeur 0 au param&egrave;tre level.
• En r&egrave;gle g&eacute;n&eacute;rale, les fichiers SWF &eacute;crits en ActionScript 1.0 ou 2.0 doivent faire l’objet d’une migration pour
fonctionner conjointement avec des fichiers SWF &eacute;crits en ActionScript 3.0. Supposons, par exemple, que vous ayez
cr&eacute;&eacute; un lecteur multim&eacute;dia avec ActionScript 2.0. Ce lecteur multim&eacute;dia charge des contenus divers &eacute;galement
cr&eacute;&eacute;s en ActionScript 2.0. Il est impossible de cr&eacute;er un contenu en ActionScript 3.0 et de le charger dans le lecteur
multim&eacute;dia. Vous devez effectuer une migration du lecteur vers ActionScript 3.0.
N&eacute;anmoins, si vous cr&eacute;ez un lecteur multim&eacute;dia en ActionScript 3.0, il peut effectuer de simples chargements de
votre contenu en ActionScript 2.0.
Derni&egrave;re mise &agrave; jour le 27/4/2013
341
342
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Le tableau ci-apr&egrave;s r&eacute;capitule les limites des versions pr&eacute;c&eacute;dentes de Flash Player relatives au chargement de contenus
plus r&eacute;cents et &agrave; l’ex&eacute;cution de code, ainsi que les restrictions li&eacute;es &agrave; la programmation crois&eacute;e entre les fichiers SWF
&eacute;crits en diff&eacute;rentes versions d’ActionScript.
Fonctionnalit&eacute; prise en charge
Flash Player 7
Flash Player 8
Flash Player 9 et 10
Peut charger les fichiers SWF pour
version 7 et ant&eacute;rieure
version 8 et ant&eacute;rieure
version 9 (ou 10) et ant&eacute;rieure
Machine virtuelle incluse
AVM1
AVM1
AVM1 et AVM2
Ex&eacute;cute les fichiers SWF &eacute;crits en
ActionScript
1.0 et 2.0
1.0 et 2.0
1.0, 2.0 et 3.0
Dans le tableau ci-dessous, &laquo; Fonctionnalit&eacute; prise en charge &raquo; fait r&eacute;f&eacute;rence au contenu lisible dans Flash Player 9 ou
une version ult&eacute;rieure. Le contenu lisible dans Flash Player version 8 ou ant&eacute;rieure peut &ecirc;tre charg&eacute;, affich&eacute;, ex&eacute;cut&eacute; et
programm&eacute; avec ActionScript 1.0 et 2.0 uniquement.
Fonctionnalit&eacute; prise en charge
Contenu cr&eacute;&eacute; en ActionScript 1.0 et 2.0
Contenu cr&eacute;&eacute; en ActionScript 3.0
Peut charger du contenu et ex&eacute;cuter le code
de contenus cr&eacute;&eacute; dans
ActionScript 1.0 et 2.0 uniquement
ActionScript 1.0 et 2.0 et ActionScript 3.0
Peut programmer le contenu cr&eacute;&eacute; dans
ActionScript 1.0 et 2.0 uniquement
(ActionScript 3.0 via LocalConnection)
ActionScript 1.0 et 2.0 via LocalConnection
ActionScript 3.0
Exemple de clip : RuntimeAssetsExplorer
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La fonctionnalit&eacute; Exporter pour ActionScript pr&eacute;sente des avantages particuliers lorsque des biblioth&egrave;ques peuvent
&ecirc;tre r&eacute;utilis&eacute;es sur plusieurs projets. Si Flash Player ou AIR ex&eacute;cute un fichier SWF, les symboles ayant &eacute;t&eacute; export&eacute;s
dans ActionScript sont disponibles pour tous les fichiers SWF au sein du m&ecirc;me sandbox de s&eacute;curit&eacute; que le fichier SWF
qui le charge. De cette mani&egrave;re, un seul document Flash peut g&eacute;n&eacute;rer un fichier SWF destin&eacute; uniquement &agrave; accueillir
des &eacute;l&eacute;ments graphiques. Cette technique est tr&egrave;s utile pour les grands projets dans lesquels les concepteurs graphiques
charg&eacute;s des &eacute;l&eacute;ments visuels peuvent travailler en parall&egrave;le avec les d&eacute;veloppeurs qui cr&eacute;ent une &laquo; enveloppe &raquo; SWF
qui chargera les fichiers SWF des &eacute;l&eacute;ments graphiques au moment de l’ex&eacute;cution. Cette m&eacute;thode peut vous servir dans
la maintenance d’un ensemble de versions de fichiers dans lesquelles les actifs graphiques ne sont pas d&eacute;pendants du
d&eacute;veloppement de la programmation.
L’application RuntimeAssetsExplorer charge tout fichier SWF qui est une sous-classe de RuntimeAsset et permet de
consulter les &eacute;l&eacute;ments disponibles de ce fichier SWF. Cet exemple illustre les points suivants :
• Chargement d’un fichier SWF externe &agrave; l’aide de Loader.load()
• Cr&eacute;ation dynamique d’un symbole de biblioth&egrave;que export&eacute; pour ActionScript
• Contr&ocirc;le de la lecture du MovieClip avec ActionScript
Avant de commencer, notez que tous les fichiers SWF devant s’ex&eacute;cuter dans Flash Player doivent se trouver dans le
m&ecirc;me sandbox de s&eacute;curit&eacute;. Pour plus d’informations, voir &laquo; Sandbox de s&eacute;curit&eacute; &raquo; &agrave; la page 1087.
Pour obtenir les fichiers d’application associ&eacute;s &agrave; cet exemple, t&eacute;l&eacute;chargez les exemples Flash Professional. Les fichiers
de l’application RuntimeAssetsExplorer se trouvent dans le dossier Samples/Chapters/RuntimeAssetsExplorer.
L’application se compose des fichiers suivants :
Derni&egrave;re mise &agrave; jour le 27/4/2013
343
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Fichier
Description
RuntimeAssetsExample.mxml
Interface utilisateur de l’application pour Flex
(MXML) ou Flash (FLA).
ou
RuntimeAssetsExample.fla
RuntimeAssetsExample.as
Classe document pour l’application Flash (FLA).
GeometricAssets.as
Classe exemple qui impl&eacute;mente l’interface
RuntimeAsset.
GeometricAssets.fla
Fichier FLA li&eacute; &agrave; la classe GeometricAssets (classe de
document du fichier FLA) contenant les symboles
export&eacute;s pour ActionScript.
com/example/programmingas3/runtimeassetexplorer/RuntimeLibrary.as
Interface qui d&eacute;finit les m&eacute;thodes attendues par tous
les fichiers SWF d’actifs d’ex&eacute;cution qui seront
charg&eacute;s dans l’explorateur.
com/example/programmingas3/runtimeassetexplorer/AnimatingBox.as
Classe du symbole de biblioth&egrave;que dont la forme est
un rectangle pivotant.
com/example/programmingas3/runtimeassetexplorer/AnimatingStar.as
Classe du symbole de biblioth&egrave;que dont la forme est
une &eacute;toile pivotante.
Etablissement de l’interface de biblioth&egrave;que d’ex&eacute;cution
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Pour que l’explorateur interagisse convenablement avec une biblioth&egrave;que SWF, la structure des biblioth&egrave;ques
d’&eacute;l&eacute;ments doit &ecirc;tre formalis&eacute;e. Pour ce faire, nous allons cr&eacute;er une interface, que l’on pourrait comparer &agrave; une classe
dans la mesure o&ugrave; elle repr&eacute;sente un mod&egrave;le de d&eacute;finition des m&eacute;thodes qui d&eacute;finissent une structure attendue. Par
contre, &agrave; l’inverse d’une classe, elle ne comporte pas les corps des m&eacute;thodes. L’interface est un moyen de
communication pour la biblioth&egrave;que d’&eacute;l&eacute;ments et l’explorateur. Chaque fichier SWF d’&eacute;l&eacute;ments charg&eacute; dans le
navigateur impl&eacute;mentera cette interface. Pour plus d’informations sur l’utilit&eacute; des interfaces, voir Interfaces dans
Formation &agrave; ActionScript 3.0.
L’interface RuntimeLibrary est tr&egrave;s simple, puisque nous avons uniquement besoin d’une fonction qui fournisse &agrave;
l’explorateur un tableau de chemins de classe pour les symboles &agrave; exporter disponibles dans la biblioth&egrave;que. Cette
interface utilise pour ce faire une seule m&eacute;thode : getAssets().
package com.example.programmingas3.runtimeassetexplorer
{
public interface RuntimeLibrary
{
function getAssets():Array;
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Cr&eacute;ation de fichiers SWF de biblioth&egrave;que d’actifs
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
La d&eacute;finition de l’interface RuntimeLibrary permet de cr&eacute;er plusieurs fichiers SWF de biblioth&egrave;que d’actifs, qui
pourront &ecirc;tre charg&eacute;s dans un autre fichier SWF. L’&eacute;laboration d’une biblioth&egrave;que SWF d’actifs repose sur quatre
t&acirc;ches :
• Cr&eacute;ation d’une classe pour le fichier SWF de biblioth&egrave;que d’actifs
• Cr&eacute;ation de classes pour les diff&eacute;rents &eacute;l&eacute;ments contenus dans la biblioth&egrave;que
• Cr&eacute;ation des &eacute;l&eacute;ments graphiques eux-m&ecirc;mes
• Association des &eacute;l&eacute;ments graphiques &agrave; des classes et publication du fichier SWF de biblioth&egrave;que
Cr&eacute;ation d’une classe pour impl&eacute;menter l’interface RuntimeLibrary
Nous allons ensuite cr&eacute;er la classe GeometricAssets qui impl&eacute;mente l’interface RuntimeLibrary, et sera la classe du
document FLA. Le code de cette classe est tr&egrave;s proche de celui de l’interface RuntimeLibrary, la diff&eacute;rence &eacute;tant que la
d&eacute;finition de classe comporte le corps de la m&eacute;thode getAssets().
package
{
import flash.display.Sprite;
import com.example.programmingas3.runtimeassetexplorer.RuntimeLibrary;
public class GeometricAssets extends Sprite implements RuntimeLibrary
{
public function GeometricAssets() {
}
public function getAssets():Array {
return [ &quot;com.example.programmingas3.runtimeassetexplorer.AnimatingBox&quot;,
&quot;com.example.programmingas3.runtimeassetexplorer.AnimatingStar&quot; ];
}
}
}
Si nous devions cr&eacute;er une deuxi&egrave;me biblioth&egrave;que d’ex&eacute;cution, nous pourrions cr&eacute;er un autre fichier FLA reposant sur
une autre classe (AnimationAssets, par exemple) qui assure sa propre impl&eacute;mentation de getAssets().
Cr&eacute;ation de classes pour chaque &eacute;l&eacute;ment MovieClip
Pour les besoins de cet exemple, nous &eacute;tendrons simplement la classe MovieClip, sans ajouter de fonctionnalit&eacute; aux
&eacute;l&eacute;ments. Le code suivant destin&eacute; &agrave; AnimatingStar est semblable &agrave; celui de AnimatingBox :
package com.example.programmingas3.runtimeassetexplorer
{
import flash.display.MovieClip;
public class AnimatingStar extends MovieClip
{
public function AnimatingStar() {
}
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
344
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des clips
Publication de la biblioth&egrave;que
Nous allons maintenant relier les actifs de classe MovieClip &agrave; la nouvelle classe en cr&eacute;ant un fichier FLA et en entrant
GeometricAssets dans le champ Classe du document de l’Inspecteur des propri&eacute;t&eacute;s. Pour les besoins de cet exemple,
nous allons cr&eacute;er deux formes tr&egrave;s simples qui utilisent une interpolation de sc&eacute;nario pour effectuer une rotation
horaire sur 360 images. Les deux symboles animatingBox et animatingStar sont d&eacute;finis pour l’exportation vers
ActionScript et leurs champs Classe correspondent aux chemins de classe respectifs sp&eacute;cifi&eacute;s dans l’impl&eacute;mentation
de getAssets(). La classe de base par d&eacute;faut flash.display.MovieClip est conserv&eacute;e, puisque nous voulons cr&eacute;er
des sous-classes pour les m&eacute;thodes MovieClip standard.
Apr&egrave;s d&eacute;finition des param&egrave;tres d’exportation de votre symbole, publiez le fichier FLA. Vous disposez maintenant de
votre premi&egrave;re biblioth&egrave;que d’ex&eacute;cution. Ce fichier SWF pourrait &ecirc;tre charg&eacute; dans un autre fichier SWF AVM2, dans
lequel les symboles AnimatingBox et AnimatingStar seraient disponibles.
Chargement de la biblioth&egrave;que dans un autre fichier SWF
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures
Le dernier &eacute;l&eacute;ment fonctionnel &agrave; traiter est l’interface utilisateur de l’explorateur. Dans cet exemple, le chemin d’acc&egrave;s
&agrave; la biblioth&egrave;que d’ex&eacute;cution est cod&eacute; en dur dans la variable ASSETS_PATH. Vous pourriez &eacute;galement utiliser la classe
FileReference, par exemple pour cr&eacute;er une interface qui recherche un fichier SWF particulier sur le disque dur.
Une fois que la biblioth&egrave;que d’ex&eacute;cution est charg&eacute;e, Flash Player appelle la m&eacute;thode
runtimeAssetsLoadComplete().
private function runtimeAssetsLoadComplete(event:Event):void
{
var rl:* = event.target.content;
var assetList:Array = rl.getAssets();
populateDropdown(assetList);
stage.frameRate = 60;
}
Dans cette m&eacute;thode, la variable rl repr&eacute;sente le fichier SWF charg&eacute;. Le code appelle la m&eacute;thode getAssets() du fichier
SWF charg&eacute;, obtient la liste des &eacute;l&eacute;ments disponibles et remplit un composant ComboBox avec cette liste en appelant
la m&eacute;thode populateDropDown(). Cette m&eacute;thode enregistre le chemin de classe complet de chaque &eacute;l&eacute;ment. Si
l’utilisateur clique sur le bouton Ajouter, l’interface d&eacute;clenche la m&eacute;thode addAsset() :
private
{
var
var
var
...
}
function addAsset():void
className:String = assetNameCbo.selectedItem.data;
AssetClass:Class = getDefinitionByName(className) as Class;
mc:MovieClip = new AssetClass();
qui obtient le chemin de classe de l’&eacute;l&eacute;ment actuellement s&eacute;lectionn&eacute; dans la ComboBox
(assetNameCbo.selectedItem.data), et utilise la fonction getDefinitionByName() (du package flash.utils) pour
obtenir une r&eacute;f&eacute;rence &agrave; la classe de l’&eacute;l&eacute;ment afin de cr&eacute;er une nouvelle occurrence de celui-ci.
Derni&egrave;re mise &agrave; jour le 27/4/2013
345
346
Chapitre 17 : Utilisation des interpolations
de mouvement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
La section &laquo; Animation des objets &raquo; &agrave; la page 200 d&eacute;crit la proc&eacute;dure d’impl&eacute;mentation d’une animation pilot&eacute;e par un
script ActionScript.
Ce chapitre est consacr&eacute; &agrave; une autre technique de cr&eacute;ation d’une animation : l’interpolation de mouvement. Cette
technique vous permet de cr&eacute;er un mouvement en le configurant en mode interactif dans un document par le biais
d’Adobe&reg; Flash&reg; Professional. Vous pouvez ensuite utiliser ce mouvement dans votre animation dynamique &agrave; base de
code ActionScript lors de l’ex&eacute;cution.
Flash Professional g&eacute;n&egrave;re automatiquement le code ActionScript qui impl&eacute;mente l’interpolation de mouvement et
vous permet de le copier et de le r&eacute;utiliser.
Pour cr&eacute;er des interpolations de mouvement, vous devez disposer d’une licence pour Flash Professional.
Voir aussi
Package fl.motion
Principes de base des interpolations de mouvement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
Les interpolations de mouvement permettent de cr&eacute;er ais&eacute;ment une animation.
Une interpolation de mouvement modifie les propri&eacute;t&eacute;s d’un objet d’affichage, telles que la position ou la rotation,
d’une image &agrave; l’autre. Elle permet &eacute;galement de modifier l’apparence d’un objet d’affichage en cours de d&eacute;placement
en lui appliquant divers filtres et propri&eacute;t&eacute;s. Vous cr&eacute;ez l’interpolation de mouvement en mode interactif dans Flash
Professional, ce qui g&eacute;n&egrave;re le code ActionScript correspondant. Dans Flash, utilisez la commande Copie de
mouvement en tant qu’ActionScript 3.0 pour copier le code ActionScript &agrave; l’origine de l’interpolation de mouvement.
Vous pouvez alors r&eacute;utiliser le code ActionScript pour cr&eacute;er un mouvement dans votre animation dynamique lors de
l’ex&eacute;cution.
Pour plus d’informations sur la cr&eacute;ation d’une interpolation de mouvement, voir la section Interpolations de
mouvement du manuel Utilisation de Flash Professional.
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient un terme important relatif &agrave; la fonctionnalit&eacute; &eacute;tudi&eacute;e :
Interpolation de mouvement Construction qui g&eacute;n&egrave;re des images interm&eacute;diaires d’un objet d’affichage dans des &eacute;tats
et &agrave; des moments diff&eacute;rents, cr&eacute;ant ainsi l’impression que le premier &eacute;tat &eacute;volue progressivement vers le second &eacute;tat.
Une interpolation de mouvement permet de d&eacute;placer un objet d’affichage sur la sc&egrave;ne, ainsi que de le faire
progressivement grandir, r&eacute;tr&eacute;cir, pivoter ou changer de couleur.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
Copie de scripts d’interpolation de mouvement dans
Flash
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
Une interpolation g&eacute;n&egrave;re des images interm&eacute;diaires qui affichent un objet d’affichage dans des &eacute;tats diff&eacute;rents dans
deux images distinctes d’un sc&eacute;nario. Elle cr&eacute;e l’impression que le contenu de la premi&egrave;re image se transforme
progressivement en contenu de la seconde image. Dans une interpolation de mouvement, le changement d’apparence
implique g&eacute;n&eacute;ralement la modification de la position de l’objet d’affichage, cr&eacute;ant ainsi un mouvement. Outre le
repositionnement de l’objet d’affichage, une interpolation de mouvement peut faire pivoter, incliner ou
redimensionner ce dernier, voire lui appliquer des filtres.
Vous cr&eacute;ez une interpolation de mouvement dans Flash en d&eacute;pla&ccedil;ant un objet d’affichage entre des images-cl&eacute; du
sc&eacute;nario. Flash g&eacute;n&egrave;re automatiquement le code ActionScript qui d&eacute;crit l’interpolation, que vous pouvez copier et
enregistrer dans un fichier. Pour plus d’informations sur la cr&eacute;ation d’une interpolation de mouvement, voir la section
Interpolations de mouvement du manuel Utilisation de Flash Professional.
Vous pouvez acc&eacute;der &agrave; la copie de mouvement en tant que commande ActionScript 3.0 dans Flash, de deux fa&ccedil;ons
diff&eacute;rentes. La premi&egrave;re consiste &agrave; utiliser un menu contextuel d’interpolation sur la sc&egrave;ne, comme suit :
1 S&eacute;lectionnez l’interpolation de mouvement sur la sc&egrave;ne.
2 Cliquez dessus avec le bouton droit de la souris (Windows) ou cliquez sur la touche Contr&ocirc;le (Macintosh).
3 Choisissez Copie de mouvement en tant que ActionScript 3.0 . . .
La seconde technique consiste &agrave; choisir directement la commande dans le menu Edition de Flash, comme suit :
1 S&eacute;lectionnez l’interpolation de mouvement sur la sc&egrave;ne.
Derni&egrave;re mise &agrave; jour le 27/4/2013
347
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
2 Choisissez Edition &gt; Sc&eacute;nario &gt; Copier le mouvement en tant que ActionScript 3.0.
Une fois le script copi&eacute;, collez-le dans un fichier et enregistrez-le.
Une fois l’interpolation de mouvement cr&eacute;&eacute;e et apr&egrave;s avoir copi&eacute; et enregistr&eacute; le script, vous pouvez la r&eacute;utiliser sous
sa forme actuelle ou la modifier dans votre propre animation dynamique pilot&eacute;e par un script ActionScript.
Incorporation de scripts d’interpolation de mouvement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
L’en-t&ecirc;te du code ActionScript copi&eacute; &agrave; partir de Flash recense tous les modules requis pour prendre en charge
l’interpolation de mouvement.
Classes d’interpolation de mouvement
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
Les classes principales d’interpolation de mouvement, AnimatorFactory, MotionBase et Motion, appartiennent au
package fl.motion. Vous pourriez avoir besoin de classes suppl&eacute;mentaires suivant les propri&eacute;t&eacute;s que l’interpolation
de mouvement manipule. Par exemple, si l’interpolation de mouvement transforme ou fait pivoter l’objet d’affichage,
vous devez importer les classes flash.geom appropri&eacute;es. Si des filtres sont appliqu&eacute;s, importez les classes
flash.filter. Dans ActionScript, une interpolation de mouvement est une occurrence de la classe Motion. La classe
Motion stocke une s&eacute;quence d’animation d’images-cl&eacute;s pouvant s’appliquer &agrave; un objet visuel. Les donn&eacute;es de
l’animation comprennent les &eacute;l&eacute;ments suivants : position, &eacute;chelle, rotation, inclinaison, couleur, filtres et acc&eacute;l&eacute;ration.
Le code ActionScript suivant a &eacute;t&eacute; copi&eacute; &agrave; partir d’une interpolation de mouvement cr&eacute;&eacute;e dans Flash en vue d’animer
un objet d’affichage portant le nom d’occurrence Symbol1_2. Il d&eacute;clare une variable associ&eacute;e &agrave; un objet MotionBase
nomm&eacute; __motion_Symbol1_2. La classe MotionBase est le parent de la classe Motion.
Derni&egrave;re mise &agrave; jour le 27/4/2013
348
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
var __motion_Symbol1_2:MotionBase;
Le script cr&eacute;e ensuite l’objet Motion :
__motion_Symbol1_2 = new Motion();
Noms d’objet Motion
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
Dans le cas pr&eacute;c&eacute;dent, Flash a automatiquement g&eacute;n&eacute;r&eacute; le nom __motion_Symbol1_2 de l’objet Motion. Il a associ&eacute;
le pr&eacute;fixe __motion_ au nom de l’objet d’affichage. Ainsi, le nom g&eacute;n&eacute;r&eacute; automatiquement est bas&eacute; sur le nom
d’occurrence de l’objet cible de l’interpolation de mouvement dans Flash. La propri&eacute;t&eacute; duration de l’objet Motion
indique le nombre total d’images dans l’interpolation de mouvement :
__motion_Symbol1_2.duration = 200;
Par d&eacute;faut, Flash affecte automatiquement un nom &agrave; l’occurrence d’objet d’affichage dont l’interpolation de
mouvement est copi&eacute;e si elle n’en poss&egrave;de pas encore un.
Lorsque vous r&eacute;utilisez un code ActionScript cr&eacute;&eacute; par Flash dans votre propre animation, vous pouvez conserver le
nom d’interpolation automatiquement g&eacute;n&eacute;r&eacute; par Flash ou choisir un autre nom. Si vous modifiez le nom de
l’interpolation, n’oubliez pas de r&eacute;percuter la modification dans l’ensemble du script.
Dans Flash, vous pouvez &eacute;galement affecter le nom de votre choix &agrave; l’objet cible de l’interpolation de mouvement, puis
cr&eacute;er l’interpolation de mouvement et copier le script. Quelle que soit l’approche adopt&eacute;e, assurez-vous que chaque
objet Motion de votre code ActionScript poss&egrave;de un nom unique.
Description de l’animation
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
La m&eacute;thode addPropertyArray() de la classe MotionBase ajoute un tableau de valeurs pour d&eacute;crire chaque propri&eacute;t&eacute;
interpol&eacute;e.
Le tableau contient potentiellement un &eacute;l&eacute;ment par image-cl&eacute; de l’interpolation de mouvement. Il arrive souvent que
certains de ces tableaux contiennent moins d’&eacute;l&eacute;ments que le nombre total d’images-cl&eacute;s de l’interpolation de
mouvement. Ce cas de figure se produit lorsque la derni&egrave;re valeur du tableau n’est pas modifi&eacute;e pour les images
restantes.
Si la longueur de l’argument array est sup&eacute;rieure &agrave; celle de la propri&eacute;t&eacute; duration de l’objet Motion, la m&eacute;thode
addPropertyArray() ajuste en cons&eacute;quence la valeur de la propri&eacute;t&eacute; duration. Elle n’ajoute pas d’image-cl&eacute; pour
les propri&eacute;t&eacute;s pr&eacute;c&eacute;demment ajout&eacute;es. Les nouvelles images-cl&eacute;s subsistent pendant la dur&eacute;e des images
suppl&eacute;mentaires de l’animation.
Les propri&eacute;t&eacute;s x et y de l’objet Motion d&eacute;crivent la nouvelle position de l’objet interpol&eacute; au fur et &agrave; mesure de
l’ex&eacute;cution de l’animation. Ces coordonn&eacute;es correspondent aux valeurs les plus susceptibles de changer dans chaque
image-cl&eacute; si la position de l’objet d’affichage &eacute;volue. La m&eacute;thode addPropertyArray() vous permet d’ajouter d’autres
propri&eacute;t&eacute;s de mouvement. Par exemple, ajoutez les valeurs scaleX et scaleY si l’objet interpol&eacute; est redimensionn&eacute;.
Ajoutez les valeurs skewX et skewY s’il est inclin&eacute;. Ajoutez la propri&eacute;t&eacute; rotationConcat s’il fait l’objet d’une rotation.
Utilisez la m&eacute;thode addPropertyArray() pour d&eacute;finir les propri&eacute;t&eacute;s d’interpolation suivantes :
Derni&egrave;re mise &agrave; jour le 27/4/2013
349
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
x
Position horizontale du point de transformation de l’objet dans l’espace de coordonn&eacute;es de son objet parent
y
Position verticale du point de transformation de l’objet dans l’espace de coordonn&eacute;es de son objet parent
z
Position de profondeur (axe z) du point de transformation de l’objet dans l’espace de coordonn&eacute;es de son objet
parent
scaleX
Redimensionnement horizontal, exprim&eacute; sous forme de pourcentage de l’objet tel qu’il est appliqu&eacute; &agrave; partir du
point de transformation
scaleY
Redimensionnement vertical, exprim&eacute; sous forme de pourcentage de l’objet tel qu’il est appliqu&eacute; &agrave; partir du point
de transformation
skewX
Angle d’inclinaison horizontale de l’objet, en degr&eacute;s, tel qu’il est appliqu&eacute; &agrave; partir du point de transformation
skewY
Angle d’inclinaison verticale de l’objet, en degr&eacute;s, tel qu’il est appliqu&eacute; &agrave; partir du point de transformation
rotationX
Rotation de l’objet autour de l’axe x &agrave; partir de son orientation d’origine
rotationY
Rotation de l’objet autour de l’axe y &agrave; partir de son orientation d’origine
rotationConcat
Valeurs de rotation (axe z) de l’objet dans le cadre du mouvement par rapport &agrave; l’orientation pr&eacute;c&eacute;dente appliqu&eacute;e
&agrave; partir du point de transformation
useRotationConcat Si cette propri&eacute;t&eacute; est d&eacute;finie, elle entra&icirc;ne la rotation de l’objet cible lorsque la m&eacute;thode addPropertyArray()
fournit des donn&eacute;es de mouvement.
blendMode
Valeur de la classe BlendMode qui d&eacute;finit le m&eacute;lange de couleurs de l’objet sous lequel figurent les graphiques
matrix3D
Propri&eacute;t&eacute; matrix3D si elle a &eacute;t&eacute; d&eacute;finie pour l’image-cl&eacute;. R&eacute;serv&eacute;e aux interpolations 3D. Si elle est utilis&eacute;e, aucune
des propri&eacute;t&eacute;s de transformation pr&eacute;c&eacute;dentes n’est prise en consid&eacute;ration.
rotationZ
Rotation (en degr&eacute;s) autour de l’axe z de l’objet, &agrave; partir de son orientation d’origine par rapport au conteneur parent
3D. Utilis&eacute; pour les interpolations 3D au lieu de rotationConcat.
Les propri&eacute;t&eacute;s ajout&eacute;es au script automatiquement g&eacute;n&eacute;r&eacute; varient selon les propri&eacute;t&eacute;s affect&eacute;es &agrave; l’interpolation de
mouvement dans Flash. Vous pouvez ajouter, supprimer ou modifier certaines de ces propri&eacute;t&eacute;s lorsque vous
personnalisez votre version du script.
Le code suivant affecte des valeurs aux propri&eacute;t&eacute;s de l’interpolation de mouvement __motion_Wheel. Dans ce cas de
figure, l’objet d’affichage interpol&eacute; ne change pas d’emplacement, mais pivote sur place dans les 29 images de
l’interpolation de mouvement. Les diverses valeurs affect&eacute;es au tableau rotationConcat d&eacute;finissent la rotation. Les
autres valeurs de propri&eacute;t&eacute; de cette interpolation de mouvement ne sont pas modifi&eacute;es.
__motion_Wheel = new Motion();
__motion_Wheel.duration = 29;
__motion_Wheel.addPropertyArray(&quot;x&quot;, [0]);
__motion_Wheel.addPropertyArray(&quot;y&quot;, [0]);
__motion_Wheel.addPropertyArray(&quot;scaleX&quot;, [1.00]);
__motion_Wheel.addPropertyArray(&quot;scaleY&quot;, [1.00]);
__motion_Wheel.addPropertyArray(&quot;skewX&quot;, [0]);
__motion_Wheel.addPropertyArray(&quot;skewY&quot;, [0]);
__motion_Wheel.addPropertyArray(&quot;rotationConcat&quot;,
[
0,-13.2143,-26.4285,-39.6428,-52.8571,-66.0714,-79.2857,-92.4999,-105.714,
-118.929,-132.143,-145.357,-158.571,-171.786,-185,-198.214,-211.429,-224.643,
-237.857,-251.071,-264.286,-277.5,-290.714,-303.929,-317.143,-330.357,
-343.571,-356.786,-370
]
);
__motion_Wheel.addPropertyArray(&quot;blendMode&quot;, [&quot;normal&quot;]);
Derni&egrave;re mise &agrave; jour le 27/4/2013
350
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
Dans l’exemple suivant, l’objet d’affichage Leaf_1 traverse la sc&egrave;ne. Les tableaux de propri&eacute;t&eacute;s x et y correspondants
contiennent des valeurs diff&eacute;rentes pour chacune des 100 images de l’animation. Par ailleurs, l’objet pivote sur son axe
z au fur et &agrave; mesure qu’il traverse la sc&egrave;ne. Les divers &eacute;l&eacute;ments du tableau de la propri&eacute;t&eacute; rotationZ d&eacute;terminent la
rotation.
__motion_Leaf_1 = new MotionBase();
__motion_Leaf_1.duration = 100;
__motion_Symbol1_4.addPropertyArray(&quot;y&quot;,
[
0,5.91999,11.84,17.76,23.68,29.6,35.52,41.44,47.36,53.28,59.2,65.12,71.04,
76.96,82.88,88.8,94.72,100.64,106.56,112.48,118.4,124.32,130.24,136.16,142.08,
148,150.455,152.909,155.364,157.818,160.273,162.727,165.182,167.636,170.091,
172.545,175,177.455,179.909,182.364,184.818,187.273,189.727,192.182,194.636,
197.091,199.545,202,207.433,212.865,218.298,223.73,229.163,234.596,240.028,
245.461,250.893,256.326,261.759,267.191,272.624,278.057,283.489,
288.922,294.354,299.787,305.22,310.652,316.085,321.517,326.95,330.475,334,
337.525,341.05,344.575,348.1,351.625,355.15,358.675,362.2,365.725,369.25,
372.775,376.3,379.825,383.35,386.875,390.4,393.925,397.45,400.975,404.5,
407.5,410.5,413.5,416.5,419.5,422.5,425.5
]
);
__motion_Symbol1_4.addPropertyArray(&quot;scaleX&quot;, [1.00]);
__motion_Symbol1_4.addPropertyArray(&quot;scaleY&quot;, [1.00]);
__motion_Symbol1_4.addPropertyArray(&quot;skewX&quot;, [0]);
__motion_Symbol1_4.addPropertyArray(&quot;skewY&quot;, [0]);
__motion_Symbol1_4.addPropertyArray(&quot;z&quot;,
[
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
]
);
__motion_Symbol1_4.addPropertyArray(&quot;rotationX&quot;, [64.0361]);
__motion_Symbol1_4.addPropertyArray(&quot;rotationY&quot;, [41.9578]);
__motion_Symbol1_4.addPropertyArray(&quot;rotationZ&quot;,
[
-18.0336,-17.5536,-17.0736,-16.5936,-16.1136,-15.6336,-15.1536,-14.6736,
-14.1936,-13.7136,-13.2336,-12.7536,-12.2736,-11.7936,-11.3136,-10.8336,
-10.3536,-9.8736,-9.3936,-8.9136,-8.4336,-7.9536,-7.4736,-6.9936,-6.5136,
-6.0336,-7.21542,-8.39723,-9.57905,-10.7609,-11.9427,-13.1245,-14.3063,
-15.4881,-16.67,-17.8518,-19.0336,-20.2154,-21.3972,-22.5791,-23.7609,
-24.9427,-26.1245,-27.3063,-28.4881,-29.67,-30.8518,-32.0336,-31.0771,
-30.1206,-29.164,-28.2075,-27.251,-26.2945,-25.338,-24.3814,-23.4249,
-22.4684,-21.5119,-20.5553,-19.5988,-18.6423,-17.6858,-16.7293,-15.7727
-14.8162,-13.8597,-12.9032,-11.9466,-10.9901,-10.0336,-10.9427,-11.8518,
-12.7609,-13.67,-14.5791,-15.4881,-16.3972,-17.3063,-18.2154,-19.1245,
-20.0336,-20.9427,-21.8518,-22.7609,-23.67,-24.5791,-25.4881,-26.3972,
-27.3063,-28.2154,-29.1245,-30.0336,-28.3193,-26.605,-24.8907,-23.1765,
-21.4622,-19.7479,-18.0336
]
);
__motion_Symbol1_4.addPropertyArray(&quot;blendMode&quot;, [&quot;normal&quot;]);
Derni&egrave;re mise &agrave; jour le 27/4/2013
351
352
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
Ajout de filtres
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
Si l’objet cible d’une interpolation de mouvement contient des filtres, ces derniers sont ajout&eacute;s par le biais des
m&eacute;thodes initFilters() et addFilterPropertyArray() de la classe Motion.
Initialisation du tableau de filtres
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
La m&eacute;thode initFilters() initialise les filtres. Son premier argument est un tableau qui recense les noms de classe
enti&egrave;rement qualifi&eacute;s de tous les filtres appliqu&eacute;s &agrave; l’objet d’affichage. Ce tableau de noms de filtre est g&eacute;n&eacute;r&eacute; &agrave; partir
de la liste de filtres associ&eacute;e &agrave; l’interpolation de mouvement dans Flash. Dans votre copie du script, vous pouvez
supprimer ou ajouter dans ce tableau n’importe quel filtre du package flash.filters. L’appel suivant initialise la liste
de filtres associ&eacute;e &agrave; l’objet d’affichage cible. Il applique les filtres DropShadowFilter, GlowFilter et BevelFilter et
copie la liste dans chaque image-cl&eacute; de l’objet Motion.
__motion_Box.initFilters([&quot;flash.filters.DropShadowFilter&quot;, &quot;flash.filters.GlowFilter&quot;,
&quot;flash.filters.BevelFilter&quot;], [0, 0, 0]);
Ajout de filtres
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
La m&eacute;thode addFilterPropertyArray() d&eacute;crit les propri&eacute;t&eacute;s d’un filtre initialis&eacute; dot&eacute; des arguments suivants :
1 Son premier argument identifie un filtre en fonction de son index. L’index se r&eacute;f&egrave;re &agrave; la position du nom de filtre
dans le tableau des noms de classe de filtre transmis lors d’un appel pr&eacute;c&eacute;dent d’initFilters().
2 Le deuxi&egrave;me argument est la propri&eacute;t&eacute; &agrave; stocker pour le filtre dans chaque image-cl&eacute;.
3 Le troisi&egrave;me argument est la valeur de la propri&eacute;t&eacute; de filtre indiqu&eacute;e.
Etant donn&eacute; l’appel pr&eacute;c&eacute;dent d’initFilters(), les appels suivants de addFilterPropertyArray() affectent la
valeur 5 aux propri&eacute;t&eacute;s blurX et blurY de DropShadowFilter. DropShadowFilter est le premier &eacute;l&eacute;ment
(index 0)du tableau de filtres initialis&eacute;s :
__motion_Box.addFilterPropertyArray(0, &quot;blurX&quot;, [5]);
__motion_Box.addFilterPropertyArray(0, &quot;blurY&quot;, [5]);
Les trois appels suivants affectent des valeurs aux propri&eacute;t&eacute;s qualit&eacute;, alpha et couleur de GlowFilter (le deuxi&egrave;me
&eacute;l&eacute;ment (index 1) du tableau de filtres initialis&eacute;s) :
__motion_Box.addFilterPropertyArray(1, &quot;quality&quot;, [BitmapFilterQuality.LOW]);
__motion_Box.addFilterPropertyArray(1, &quot;alpha&quot;, [1.00]);
__motion_Box.addFilterPropertyArray(1, &quot;color&quot;, [0xff0000]);
Les quatre appels suivants affectent des valeurs aux propri&eacute;t&eacute;s shadowAlpha, shadowColor, highlightAlpha et
highlightColor de BevelFilter, le troisi&egrave;me &eacute;l&eacute;ment (index 2) du tableau de filtres initialis&eacute;s :
__motion_Box.addFilterPropertyArray(2,
__motion_Box.addFilterPropertyArray(2,
__motion_Box.addFilterPropertyArray(2,
__motion_Box.addFilterPropertyArray(2,
&quot;shadowAlpha&quot;, [1.00]);
&quot;shadowColor&quot;, [0x000000]);
&quot;highlightAlpha&quot;, [1.00]);
&quot;highlightColor&quot;, [0xffffff]);
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
R&eacute;glage de la couleur &agrave; l’aide de ColorMatrixFilter
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
Une fois ColorMatrixFilter initialis&eacute;, vous pouvez d&eacute;finir les propri&eacute;t&eacute;s AdjustColor appropri&eacute;es pour r&eacute;gler la
luminosit&eacute;, le contraste, la saturation et la teinte de l’objet d’affichage interpol&eacute;. En r&egrave;gle g&eacute;n&eacute;rale, le filtre
AdjustColor est appliqu&eacute; lors de la g&eacute;n&eacute;ration de l’interpolation de mouvement dans Flash. Vous pouvez l’ajuster
dans votre copie du code ActionScript. L’exemple suivant transforme la teinte et la saturation de l’objet d’affichage au
fur et &agrave; mesure qu’il se d&eacute;place.
__motion_Leaf_1.initFilters([&quot;flash.filters.ColorMatrix&quot;], [0], -1, -1);
__motion_Leaf_1.addFilterPropertyArray(0, &quot;adjustColorBrightness&quot;, [0], -1, -1);
__motion_Leaf_1.addFilterPropertyArray(0, &quot;adjustColorContrast&quot;, [0], -1, -1);
__motion_Leaf_1.addFilterPropertyArray(0, &quot;adjustColorSaturation&quot;,
[
0,-0.589039,1.17808,-1.76712,-2.35616,-2.9452,-3.53424,-4.12328,
-4.71232,-5.30136,-5.89041, 6.47945,-7.06849,-7.65753,-8.24657,
-8.83561,-9.42465,-10.0137,-10.6027,-11.1918,11.7808,-12.3699,
-12.9589,-13.5479,-14.137,-14.726,-15.3151,-15.9041,-16.4931,
17.0822,-17.6712,-18.2603,-18.8493,-19.4383,-20.0274,-20.6164,
-21.2055,-21.7945,22.3836,-22.9726,-23.5616,-24.1507,-24.7397,
-25.3288,-25.9178,-26.5068,-27.0959,27.6849,-28.274,-28.863,-29.452,
-30.0411,-30.6301,-31.2192,-31.8082,-32.3973,32.9863,-33.5753,
-34.1644,-34.7534,-35.3425,-35.9315,-36.5205,-37.1096,-37.6986,
38.2877,-38.8767,-39.4657,-40.0548,-40.6438,-41.2329,-41.8219,
-42.411,-43
],
-1, -1);
__motion_Leaf_1.addFilterPropertyArray(0, &quot;adjustColorHue&quot;,
[
0,0.677418,1.35484,2.03226,2.70967,3.38709,4.06451,4.74193,5.41935,
6.09677,6.77419,7.45161,8.12903,8.80645,9.48387,10.1613,10.8387,11.5161,
12.1935,12.871,13.5484,14.2258,14.9032,15.5806,16.2581,16.9355,17.6129,
18.2903,18.9677,19.6452,20.3226,21,22.4286,23.8571,25.2857,26.7143,28.1429,
29.5714,31,32.4286,33.8571,35.2857,36.7143,38.1429,39.5714,41,42.4286,43.8571,
45.2857,46.7143,48.1429,49.5714,51,54,57,60,63,66,69,72,75,78,81,84,87,
90,93,96,99,102,105,108,111,114
],
-1, -1);
Association d’une interpolation de mouvement &agrave; ses
objets d’affichage
Flash Player 9 et les versions ult&eacute;rieures, Adobe AIR 1.0 et les versions ult&eacute;rieures, Flash CS3 ou ult&eacute;rieur requis
La derni&egrave;re t&acirc;che consiste &agrave; associer l’interpolation de mouvement aux objets d’affichage qu’elle manipule.
La classe AnimatorFactory g&egrave;re l’association entre une interpolation de mouvement et ses objets d’affichage cible.
L’argument du constructeur d’AnimatorFactory correspond &agrave; l’objet Motion :
var __animFactory_Wheel:AnimatorFactory = new AnimatorFactory(__motion_Wheel);
Derni&egrave;re mise &agrave; jour le 27/4/2013
353
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation des interpolations de mouvement
La m&eacute;thode addTarget() de la classe AnimatorFactory permet d’associer l’objet d’affichage cible &agrave; l’interpolation de
mouvement correspondante. Le code ActionScript copi&eacute; &agrave; partir de Flash met la ligne addTarget() en commentaire
et n’indique pas de nom d’occurrence :
// __animFactory_Wheel.addTarget(&lt;instance name goes here&gt;, 0);
Dans votre copie, stipulez l’objet d’affichage &agrave; associer &agrave; l’interpolation de mouvement. Dans l’exemple suivant, les
cibles sp&eacute;cifi&eacute;es sont greenWheel et redWheel :
__animFactory_Wheel.AnimatorFactory.addTarget(greenWheel, 0);
__animFactory_Wheel.AnimationFactory.addTarget(redWheel, 0);
Vous pouvez associer plusieurs objets d’affichage &agrave; la m&ecirc;me interpolation de mouvement en utilisant plusieurs appels
de addTarget().
Derni&egrave;re mise &agrave; jour le 27/4/2013
354
355
Chapitre 18 : Utilisation de la cin&eacute;matique
inverse
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
La cin&eacute;matique inverse (IK, Inverse kinematics) est une technique de cr&eacute;ation fantastique de mouvement r&eacute;aliste.
IK vous permet de cr&eacute;er des mouvements coordonn&eacute;s au sein d’une cha&icirc;ne de sections connect&eacute;es appel&eacute;e squelette
IK, de sorte que les sections se d&eacute;placent avec r&eacute;alisme. Les sections du squelette repr&eacute;sentent ses os et articulations. A
partir de l’extr&eacute;mit&eacute; finale du squelette, IK calcule les angles des articulations requises pour atteindre cette derni&egrave;re.
Calculer manuellement ces angles s’av&eacute;rerait particuli&egrave;rement complexe. Cette fonctionnalit&eacute; pr&eacute;sente l’avantage de
permettre de cr&eacute;er des squelettes en mode interactif dans Adobe&reg; Flash&reg; Professional. Il vous suffit ensuite de les
animer par le biais d’ActionScript. Le moteur IK int&eacute;gr&eacute; &agrave; Flash Professional ex&eacute;cute les calculs requis pour d&eacute;crire le
mouvement du squelette. Vous pouvez restreindre le mouvement &agrave; certains param&egrave;tres dans votre code ActionScript.
La version Flash Professional CS5 de la cin&eacute;matique inverse (IK) int&egrave;gre &agrave; pr&eacute;sent le concept de ressort de segment,
g&eacute;n&eacute;ralement r&eacute;serv&eacute; aux applications d’animation haut de gamme. Associ&eacute;e au nouveau moteur physique
dynamique, cette fonctionnalit&eacute; permet de configurer des mouvements r&eacute;alistes. Cet effet est par ailleurs visible lors
des phases d’ex&eacute;cution et de cr&eacute;ation.
Pour cr&eacute;er des squelettes de cin&eacute;matique inverse, vous devez disposer d’une licence pour Flash Professional.
Voir aussi
Package fl.ik
Principes de base de la cin&eacute;matique inverse
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
La cin&eacute;matique inverse (IK) vous permet de cr&eacute;er une animation r&eacute;aliste en liant des sections de sorte qu’elles se
d&eacute;placent les unes par rapport aux autres avec naturel.
L’utilisation d’IK vous permet par exemple de d&eacute;placer une jambe pour qu’elle occupe une position d&eacute;termin&eacute;e en
articulant les mouvements des articulations de la jambe n&eacute;cessaires &agrave; l’obtention de la pose appropri&eacute;e. IK utilise une
structure osseuse cha&icirc;n&eacute;e portant le nom de squelette IK. Le package fl.ik vous aide &agrave; cr&eacute;er des animations qui
ressemblent &agrave; un mouvement naturel. Il vous permet d’animer plusieurs squelettes IK en toute transparence sans avoir
&agrave; ma&icirc;triser les concepts physiques sur lesquels s’appuient les algorithmes IK.
Vous cr&eacute;ez le squelette IK et les os et articulations qui le composent dans Flash Professional. Vous pouvez ensuite
utiliser les classes IK pour les animer lors de l’ex&eacute;cution.
Pour obtenir des instructions d&eacute;taill&eacute;es sur la cr&eacute;ation d’un squelette IK, voir Utilisation de la cin&eacute;matique inverse dans
Utilisation de Flash Professional.
Derni&egrave;re mise &agrave; jour le 27/4/2013
356
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la cin&eacute;matique inverse
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants relatifs &agrave; la fonctionnalit&eacute; &eacute;tudi&eacute;e.
Squelette Cha&icirc;ne cin&eacute;matique compos&eacute;e d’os et d’articulations, utilis&eacute;e en animation informatique pour simuler un
mouvement r&eacute;aliste.
Os Segment rigide d’un squelette, &eacute;quivalent &agrave; un os chez un animal.
Cin&eacute;matique inverse (IK) Processus d’identification des param&egrave;tres d’un objet souple articul&eacute; appel&eacute; squelette ou
cha&icirc;ne cin&eacute;matique.
Articulation Emplacement o&ugrave; deux os s’unissent, con&ccedil;u pour permettre le mouvement des os ; analogue &agrave; une
articulation chez un animal.
Moteur physique Package d’algorithmes physiques qui permet d’int&eacute;grer des actions r&eacute;alistes &agrave; l’animation.
Ressort Qualit&eacute; d’un segment qui se d&eacute;place et r&eacute;agit lorsque le segment parent est d&eacute;plac&eacute;, puis diminue
progressivement par incr&eacute;ments.
Aper&ccedil;u de l’animation de squelettes IK
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
Une fois le squelette IK cr&eacute;&eacute; dans Flash Professional, utilisez les classes fl.ik pour restreindre ses mouvements, suivre
les &eacute;v&eacute;nements correspondants et l’animer lors de l’ex&eacute;cution.
La figure ci-dessous illustre le clip Wheel. L’essieu est une occurrence d’un squelette IK appel&eacute;e Axle. La classe
IKMover d&eacute;place le squelette en le synchronisant avec la rotation d’une roue. Dans le squelette, IKBone, nomm&eacute;
ikBone2, est rattach&eacute; &agrave; la roue au niveau de l’articulation arri&egrave;re.
A
B
C
A. Roue B. Essieu C. ikBone2
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la cin&eacute;matique inverse
Lors de l’ex&eacute;cution, la roue tourne en association avec l’interpolation de mouvement __motion_Wheel &eacute;tudi&eacute;e dans
&laquo; Description de l’animation &raquo; &agrave; la page 349. Un objet IKMover lance et contr&ocirc;le le mouvement de l’essieu. La figure
suivante propose deux instantan&eacute;s du squelette de l’essieu connect&eacute; &agrave; la roue qui tourne sur diff&eacute;rentes images de la
rotation.
Lors de l’ex&eacute;cution, le code ActionScript suivant :
• Extrait des informations relatives au squelette et &agrave; ses composants.
• Instancie un objet IKMover.
• D&eacute;place l’essieu en conjonction avec la rotation de la roue.
import fl.ik.*
var
var
var
var
tree:IKArmature = IKManager.getArmatureByName(&quot;Axle&quot;);
bone:IKBone = tree.getBoneByName(&quot;ikBone2&quot;);
endEffector:IKJoint = bone.tailJoint;
pos:Point = endEffector.position;
var ik:IKMover = new IKMover(endEffector, pos);
ik.limitByDistance = true;
ik.distanceLimit = 0.1;
ik.limitByIteration = true;
ik.iterationLimit = 10;
Wheel.addEventListener(Event.ENTER_FRAME, frameFunc);
function frameFunc(event:Event)
{
if (Wheel != null)
{
var mat:Matrix = Wheel.transform.matrix;
var pt = new Point(90, 0);
pt = mat.transformPoint(pt);
ik.moveTo(pt);
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
357
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la cin&eacute;matique inverse
Les classes IK utilis&eacute;es pour d&eacute;placer l’essieu sont les suivantes :
• IKArmature : d&eacute;crit le squelette (structure arborescente compos&eacute;e d’os et d’articulations). A cr&eacute;er dans Flash
Professional.
• IKManager : classe qui contient tous les squelettes IK du document, &agrave; cr&eacute;er dans Flash Professional.
• IKBone : segment d’un squelette IK.
• IKJoint : connexion entre deux os IK.
• IKMover : lance et contr&ocirc;le le mouvement IK des squelettes.
Pour obtenir une description d&eacute;taill&eacute;e de ces classes, voir ik package (Package ik).
Obtention d’informations sur un squelette IK
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
Commencez par d&eacute;clarer les variables associ&eacute;es au squelette, &agrave; l’os et &agrave; l’articulation qui composent les sections &agrave;
d&eacute;placer.
Le code suivant utilise la m&eacute;thode getsqueletteByName() de la classe IKManager pour affecter la valeur du squelette
Axle &agrave; la variable IKArmature tree. Le squelette Axle a &eacute;t&eacute; pr&eacute;c&eacute;demment g&eacute;n&eacute;r&eacute; dans Flash Professional.
var tree:IKArmature = IKManager.getArmatureByName(&quot;Axle&quot;);
De m&ecirc;me, le code suivant utilise la m&eacute;thode getBoneByName() de la classe IKArmature pour affecter &agrave; la variable
IKBone la valeur de l’os ikBone2.
var bone:IKBone = tree.getBoneByName(&quot;ikBone2&quot;);
L’articulation arri&egrave;re de l’os ikBone2 correspond &agrave; la section du squelette connect&eacute;e &agrave; la roue qui tourne.
La ligne suivante d&eacute;clare la variable endEffector et l’affecte &agrave; la propri&eacute;t&eacute; tailjoint de l’os ikBone2 :
var endEffector:IKJoint = home.tailjoint;
La variable pos est un point qui stocke la position actuelle de l’articulation endEffector.
var pos:Point = endEffector.position;
Dans cet exemple, pos correspond &agrave; la position de l’articulation raccord&eacute;e &agrave; la roue &agrave; l’extr&eacute;mit&eacute; de l’essieu. La valeur
d’origine de cette variable est extraite de la propri&eacute;t&eacute; position de IKJoint.
Instanciation de l’objet IKMover et restriction du
mouvement
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
Une occurrence de la classe IKMover d&eacute;place l’essieu.
La ligne suivante instancie l’objet IKMover ik et transmet &agrave; son constructeur l’&eacute;l&eacute;ment &agrave; d&eacute;placer et le point de d&eacute;part
du mouvement :
var ik:IKMover = new IKMover(endEffector, pos);
Derni&egrave;re mise &agrave; jour le 27/4/2013
358
359
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la cin&eacute;matique inverse
Les propri&eacute;t&eacute;s de la classe IKMover vous permettent de restreindre le mouvement d’un squelette. Vous pouvez
restreindre le mouvement en fonction de la distance, des it&eacute;rations et de la dur&eacute;e du mouvement.
Les paires de propri&eacute;t&eacute;s suivantes imposent ces restrictions. Les paires se composent d’une valeur bool&eacute;enne qui
indique si le mouvement est restreint et d’un entier stipulant la restriction :
Propri&eacute;t&eacute; Boolean
Propri&eacute;t&eacute; Integer
Restriction d&eacute;finie
limitByDistance:Boolean
distanceLimit:int
D&eacute;finit la distance maximale en pixels parcourue par le moteur IK par
it&eacute;ration.
limitByIteration:Boolean
iterationLimit:int
D&eacute;finit le nombre maximal d’it&eacute;rations effectu&eacute;es par le moteur IK par
mouvement.
limitByTime:Boolean
timeLimit:int
D&eacute;finit la dur&eacute;e maximale, exprim&eacute;e en millisecondes, affect&eacute;e au
moteur IK pour effectuer le mouvement.
Toutes les valeurs bool&eacute;ennes &eacute;tant d&eacute;finies sur false par d&eacute;faut, le mouvement n’est pas restreint, sauf si vous avez
explicitement d&eacute;fini une valeur bool&eacute;enne sur true. Pour imposer une restriction, d&eacute;finissez la propri&eacute;t&eacute; appropri&eacute;e
sur true, puis indiquez la valeur de la propri&eacute;t&eacute; Integer correspondante. Si vous d&eacute;finissez la restriction sur une valeur
sans d&eacute;finir la propri&eacute;t&eacute; Boolean correspondante, elle n’est pas prise en consid&eacute;ration. Dans ce cas, le moteur IK
continue &agrave; d&eacute;placer l’objet jusqu’&agrave; ce qu’une autre restriction ou la position cible de l’objet IKMover soit atteinte.
Dans l’exemple suivant, la distance maximale parcourue par le mouvement du squelette est d&eacute;finie sur 0,1 pixel par
it&eacute;ration. Le nombre maximal d’it&eacute;rations par mouvement est d&eacute;fini sur dix.
ik.limitByDistance = true;
ik.distanceLimit = 0.1;
ik.limitByIteration = true;
ik.iterationLimit = 10;
Mouvement d’un squelette IK
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
L’objet IKMover d&eacute;place l’essieu au sein de l’&eacute;couteur d’&eacute;v&eacute;nement associ&eacute; &agrave; la roue. A chaque &eacute;v&eacute;nement enterFrame
de la roue, une nouvelle position cible du squelette est calcul&eacute;e. Par le biais de sa m&eacute;thode moveTo(), l’objet IKMover
place l’articulation arri&egrave;re sur sa position cible ou parcourt une distance aussi longue que possible sans enfreindre les
contraintes d&eacute;finies par ses propri&eacute;t&eacute;s limitByDistance, limitByIteration et limitByTime.
Wheel.addEventListener(Event.ENTER_FRAME, frameFunc);
function frameFunc(event:Event)
{
if (Wheel != null)
{
var mat:Matrix = Wheel.transform.matrix;
var pt = new Point(90,0);
pt = mat.transformPoint(pt);
ik.moveTo(pt);
}
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la cin&eacute;matique inverse
Utilisation de ressorts
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS5 ou ult&eacute;rieur requis
La cin&eacute;matique inverse prend en charge le ressort de segment dans Flash Professional CS5. Vous pouvez d&eacute;finir les
ressorts de segment lors de la phase de cr&eacute;ation et ajouter ou modifier les attributs correspondants lors de l’ex&eacute;cution.
La propri&eacute;t&eacute; Spring se rapporte &agrave; un segment et aux liaisons correspondantes. Elle poss&egrave;de deux attributs,
IKJoint.springStrength, qui d&eacute;finit l’intensit&eacute; du ressort, et IKJoint.springDamping, qui ajoute une r&eacute;sistance
&agrave; la valeur d’intensit&eacute; et modifie la valeur de d&eacute;croissance du ressort.
L’intensit&eacute; du ressort est exprim&eacute;e sous forme de pourcentage compris entre la valeur par d&eacute;faut, 0 (rigidit&eacute; absolue)
et 100 (&eacute;lasticit&eacute; importante contr&ocirc;l&eacute;e par les lois de la physique). Les segments &agrave; ressort r&eacute;agissent au mouvement de
la liaison correspondante. Si aucune autre translation (rotation, x ou y) n’est activ&eacute;e, les param&egrave;tres du ressort n’ont
aucun impact.
L’amortissement du ressort est exprim&eacute; sous forme de pourcentage, compris entre la valeur par d&eacute;faut, 0 (aucune
r&eacute;sistance) et 100 (amortissement important). L’amortissement modifie la dur&eacute;e de l’intervalle qui s&eacute;pare le
mouvement initial d’un segment et son retour &agrave; une position de repos.
V&eacute;rifiez si des ressorts sont associ&eacute;s &agrave; un objet IKArmature par le biais de la propri&eacute;t&eacute; IKArmature.springsEnabled.
Les autres propri&eacute;t&eacute;s et m&eacute;thodes relatives aux ressorts rel&egrave;vent d’objets IKJoint individuels. Une liaison peut &ecirc;tre
soumise &agrave; une rotation angulaire et &agrave; une translation le long des axes x et y. Faites appel &agrave; IKJoint.setSpringAngle
pour positionner l’angle de rotation d’un ressort de liaison et &agrave; IKJoint.setSpringPt pour d&eacute;finir la position par
translation d’un ressort de liaison.
Cet exemple s&eacute;lectionne un segment par nom et identifie la propri&eacute;t&eacute; tailJoint correspondante. Le code teste le
squelette parent pour v&eacute;rifier si des ressorts sont activ&eacute;s, puis d&eacute;finit les propri&eacute;t&eacute;s du ressort de la liaison.
var arm:IKArmature = IKManager.getArmatureAt(0);
var bone:IKBone = arm.getBoneByName(&quot;c&quot;);
var joint:IKJoint = bone.tailJoint;
if (arm.springsEnabled) {
joint.springStrength = 50; //medium spring strength
joint.springDamping = 10; //light damping resistance
if (joint.hasSpringAngle) {
joint.setSpringAngle(30); //set angle for rotational spring
}
}
Utilisation d’&eacute;v&eacute;nements IK
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures, Flash CS4 ou ult&eacute;rieur requis
La classe IKEvent vous permet de cr&eacute;er un objet &eacute;v&eacute;nement qui contient des informations sur les &eacute;v&eacute;nements IK. Une
information IKEvent d&eacute;crit le mouvement qui s’est arr&ecirc;t&eacute; car la dur&eacute;e, la distance ou le nombre maximal d’it&eacute;rations
stipul&eacute;s ont &eacute;t&eacute; d&eacute;pass&eacute;s.
Le code suivant indique un &eacute;couteur et un gestionnaire d’&eacute;v&eacute;nement destin&eacute;s au suivi des &eacute;v&eacute;nements de limite de
temps. Ce gestionnaire d’&eacute;v&eacute;nement signale les propri&eacute;t&eacute;s de dur&eacute;e, distance, nombre d’it&eacute;rations et articulations d’un
&eacute;v&eacute;nement d&eacute;clench&eacute; lorsque la dur&eacute;e maximale de l’objet IKMover est d&eacute;pass&eacute;e.
Derni&egrave;re mise &agrave; jour le 27/4/2013
360
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Utilisation de la cin&eacute;matique inverse
var ikmover:IKMover = new IKMover(endjoint, pos);
ikMover.limitByTime = true;
ikMover.timeLimit = 1000;
ikmover.addEventListener(IKEvent.TIME_LIMIT, timeLimitFunction);
function timeLimitFunction(evt:IKEvent):void
{
trace(&quot;timeLimit hit&quot;);
trace(&quot;time is &quot; + evt.time);
trace(&quot;distance is &quot; + evt.distance);
trace(&quot;iterationCount is &quot; + evt.iterationCount);
trace(&quot;IKJoint is &quot; + evt.joint.name);
}
Derni&egrave;re mise &agrave; jour le 27/4/2013
361
362
Chapitre 19 : Travail en trois dimensions
(3D)
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Les moteurs d’ex&eacute;cution de Flash Player et d’AIR prennent en charge les graphiques 3D de deux mani&egrave;res. Vous
pouvez utiliser les objets d’affichage tridimensionnels sur la liste d’affichage de Flash. Cette m&eacute;thode permet d’ajouter
des effets tridimensionnels &agrave; du contenu Flash et convient aux objets comportant peu de polygones. Dans Flash Player
11 et AIR 3 ou les versions ult&eacute;rieures, vous pouvez effectuer le rendu de s&eacute;quences 3D complexes &agrave; l’aide de l’API
Stage3D.
Une fen&ecirc;tre d’affichage Stage3D n’est pas un objet d’affichage. Les graphiques 3D sont rendus dans une fen&ecirc;tre
d’affichage qui appara&icirc;t sous la liste d’affichage de Flash (et au-dessus de tous les plans de fen&ecirc;tre d’affichage
StageVideo). Plut&ocirc;t que d’utiliser les classes DisplayObject de Flash pour cr&eacute;er une s&eacute;quence, utilisez un processus 3D
programmable (similaire &agrave; OpenGL et Direct3D). Ce processus prend les donn&eacute;es et les textures comme entr&eacute;es et
effectue le rendu de la s&eacute;quence &agrave; l’aide des programmes de shaders que vous fournissez. L’acc&eacute;l&eacute;ration mat&eacute;rielle est
utilis&eacute;e lorsqu’un processeur graphique (GPU) compatible disposant des pilotes pris en charge est disponible sur
l’ordinateur client.
Stage3D fournit une API de tr&egrave;s bas niveau. Dans une application, vous &ecirc;tes encourag&eacute; &agrave; utiliser une structure
d’application 3D prenant en charge Stage3D. Vous pouvez cr&eacute;er votre propre structure d’application, ou utiliser l’une
des nombreuses structures commerciales et Open Source d&eacute;j&agrave; disponibles.
Pour plus d’informations sur le d&eacute;veloppement d’applications 3D &agrave; l’aide de Stage3D et sur les structures d’application
3D disponibles, voir Flash Player Developer Center: Stage 3D.
Principes de base des objets d’affichage 3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La principale diff&eacute;rence entre un objet en deux dimensions (2D) et un objet en trois dimensions (3D) projet&eacute; sur un
&eacute;cran en deux dimensions consiste en l’ajout d’une troisi&egrave;me dimension &agrave; l’objet. La troisi&egrave;me dimension permet &agrave;
l’objet de se rapprocher et de s’&eacute;loigner du point de vue de l’utilisateur.
Lorsque vous d&eacute;finissez explicitement la propri&eacute;t&eacute; z d’un objet d’affichage sur une valeur num&eacute;rique, l’objet cr&eacute;e
automatiquement une matrice de transformation 3D. Vous pouvez intervenir sur cette matrice pour modifier les
param&egrave;tres de transformation 3D de l’objet.
En outre, la rotation 3D diff&egrave;re de la rotation 2D. En 2D, l’axe de la rotation est syst&eacute;matiquement perpendiculaire au
plan x/y, autrement dit, elle se trouve sur l’axe z. En 3D, l’axe de rotation peut se trouver autour de n’importe lequel
des axes, x, y ou z. La d&eacute;finition des propri&eacute;t&eacute;s de rotation et de mise &agrave; l’&eacute;chelle d’un objet d’affichage lui permet de se
d&eacute;placer dans l’espace 3D.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Concepts importants et terminologie
La liste de r&eacute;f&eacute;rence suivante contient des termes importants utilis&eacute;s dans le cadre de la programmation de graphiques
en 3 dimensions :
Perspective Dans un plan 2D, repr&eacute;sentation de lignes parall&egrave;les convergeant vers un point de fuite pour donner une
illusion de profondeur et de distance.
Projection G&eacute;n&eacute;ration d’une image 2D d’un objet 3D. La projection 3D mappe des points 3D sur un plan 2D.
Rotation Modification de l’orientation (et souvent de la position) d’un objet en faisant d&eacute;crire un mouvement
circulaire &agrave; chacun de ses points.
Transformation Modification de points 3D ou d’ensemble de points par translation, rotation, mise &agrave; l’&eacute;chelle,
inclinaison ou une combinaison de ces actions.
Translation Modification de la position d’un objet en d&eacute;pla&ccedil;ant chacun de ses points sur une distance et dans une
direction identiques.
Point de fuite Point auquel des lignes parall&egrave;les qui s’&eacute;loignent semblent se rencontrer lorsqu’elles sont repr&eacute;sent&eacute;es
dans une perspective lin&eacute;aire.
Vecteur Un vecteur 3D repr&eacute;sente un point ou un emplacement dans l’espace en trois dimensions &agrave; l’aide de
coordonn&eacute;es cart&eacute;siennes (x,y,z).
Sommet Point.
Maillage textur&eacute; Tout point d&eacute;finissant un objet dans l’espace 3D.
Mappage des coordonn&eacute;es UV Mode d’application d’une texture ou d’une image bitmap &agrave; une surface 3D. Le
mappage des coordonn&eacute;es UV affecte des valeurs &agrave; des coordonn&eacute;es sur une image en tant que pourcentages de l’axe
horizontal (U) et de l’axe vertical (V).
valeur T Facteur de mise &agrave; l’&eacute;chelle permettant de d&eacute;terminer la taille d’un objet 3D lorsque celui-ci se rapproche ou
s’&eacute;loigne du point de vue actuel.
Culling Rendu, ou non, des surfaces avec un enroulement sp&eacute;cifique. L’utilisation du culling (&eacute;limination) permet de
masquer des surfaces qui ne sont pas visibles &agrave; partir du point de vue actuel.
Pr&eacute;sentation des objets d’affichage 3D dans les moteurs
d’ex&eacute;cution de Flash Player et d’AIR
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Dans les versions de Flash Player ant&eacute;rieures &agrave; Flash Player 10 et dans les versions d’Adobe AIR ant&eacute;rieures &agrave;
Adobe AIR 1.5, les objets d’affichage poss&egrave;dent deux propri&eacute;t&eacute;s, x et y, permettant de positionner ces derniers sur un
plan 2D. A partir de Flash Player 10 et Adobe AIR 1.5, tout objet d’affichage ActionScript est dot&eacute; d’une propri&eacute;t&eacute; z
permettant de le positionner le long de l’axe z, qui est g&eacute;n&eacute;ralement utilis&eacute; pour indiquer la profondeur ou la distance.
Flash Player 10 et Adobe AIR 1.5 prennent d&eacute;sormais en charge les effets 3D. Les objets 3D restent cependant
essentiellement plats. Tout objet d’affichage, tel qu’un objet MovieClip ou Sprite, effectue en fait son propre rendu en
deux dimensions, sur un plan unique. Les fonctions 3D vous permettent de placer, d&eacute;placer, faire pivoter et
transformer de diverses fa&ccedil;ons ces objets planaires dans la totalit&eacute; des trois dimensions. Elles vous permettent
&eacute;galement de g&eacute;rer les points 3D et de les convertir en coordonn&eacute;es 2D (x et y), afin que vous puissiez projeter les objets
3D sur un affichage 2D. A l’aide de ces fonctions, vous pouvez simuler de nombreux types d’effets 3D.
Derni&egrave;re mise &agrave; jour le 27/4/2013
363
364
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Le syst&egrave;me de coordonn&eacute;es 3D utilis&eacute; par ActionScript est diff&eacute;rent. Lorsque vous utilisez des coordonn&eacute;es 2D dans
ActionScript, la valeur de x augmente au fur et &agrave; mesure du d&eacute;placement vers la droite le long de l’axe x, et la valeur
de y augmente au fur et &agrave; mesure du d&eacute;placement vers le bas le long de l’axe y. Le syst&egrave;me de coordonn&eacute;es 3D conserve
ces conventions et ajoute un axe z dont la valeur augmente au fur et &agrave; mesure que vous vous &eacute;loignez du point de vue.
A
(0,0,0)
C
B
D
Directions positives des axes x, y et z dans le syst&egrave;me de coordonn&eacute;es 3D
A. + axe Z B. Origine C. + axe X D. + axe Y
Remarque : n’oubliez pas que Flash Player et AIR repr&eacute;sentent toujours la 3D en calques. Par cons&eacute;quent, si l’objet A se
trouve devant l’objet B dans la liste d’affichage, Flash Player ou AIR rend toujours A devant B, quelles que soient les
valeurs sur l’axe z des deux objets. Pour r&eacute;soudre le conflit entre l’ordre de la liste d’affichage et celui de l’axe z, utilisez la
m&eacute;thode transform.getRelativeMatrix3D() afin d’enregistrer, puis de r&eacute;organiser les calques des objets d’affichage
3D. pour plus d’informations, voir &laquo; R&eacute;organisation de l’affichage &agrave; l’aide d’objets Matrix3D &raquo; &agrave; la page 374.
Les classes ActionScript suivantes prennent en charge les nouvelles fonctions 3D :
1 La classe flash.display.DisplayObject contient la propri&eacute;t&eacute; z et de nouvelles propri&eacute;t&eacute;s de rotation et de mise &agrave;
l’&eacute;chelle permettant de manipuler les objets d’affichage dans l’espace 3D. La m&eacute;thode
DisplayObject.local3DToGlobal() simplifie la projection de g&eacute;om&eacute;trie 3D sur un plan 2D.
2 Vous pouvez utiliser la classe flash.geom.Vector3D en tant que structure de donn&eacute;es pour la gestion des points 3D.
Elle prend aussi en charge la math&eacute;matique vectorielle.
3 La classe flash.geom.Matrix3D prend en charge les transformations complexes de g&eacute;om&eacute;trie 3D, telles que la
rotation, la mise &agrave; l’&eacute;chelle et la translation.
4 La classe flash.geom.PerspectiveProjection contr&ocirc;le les param&egrave;tres de mappage de g&eacute;om&eacute;trie 3D sur un affichage 2D.
ActionScript propose deux approches diff&eacute;rentes pour simuler des images 3D :
1 Agencement et animation d’objets planaires dans l’espace 3D. Cette approche implique l’animation d’objets
d’affichage &agrave; l’aide de leurs propri&eacute;t&eacute;s x, y et z, ou la d&eacute;finition des propri&eacute;t&eacute;s de rotation et de mise &agrave; l’&eacute;chelle par
le biais de la classe DisplayObject. Il est possible de g&eacute;n&eacute;rer des mouvements plus complexes &agrave; l’aide de l’objet
DisplayObject.transform.matrix3D. L’objet DisplayObject.transform.perspectiveProjection personnalise le trac&eacute;
des objets d’affichage dans la perspective 3D. Adoptez cette approche pour animer des objets 3D principalement
compos&eacute;s de plans. Elle convient aux galeries d’image 3D ou aux objets d’animation 2D agenc&eacute;s dans l’espace 3D,
par exemple.
Derni&egrave;re mise &agrave; jour le 27/4/2013
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
2 G&eacute;n&eacute;ration de triangles 2D &agrave; partir d’une g&eacute;om&eacute;trie 3D et rendu de ces triangles avec des textures. Pour ce faire,
vous devez d’abord d&eacute;finir et g&eacute;rer des donn&eacute;es relatives aux objets 3D, puis les convertir en triangles 2D &agrave; des fins
de rendu. Il est possible de mapper des textures bitmap sur ces triangles, qui sont ensuite trac&eacute;s sur un objet
graphique &agrave; l’aide de la m&eacute;thode Graphics.drawTriangles(). Cette approche est appropri&eacute;e pour le chargement
des donn&eacute;es d’un mod&egrave;le 3D &agrave; partir d’un fichier et le rendu du mod&egrave;le &agrave; l’&eacute;cran, ou pour la g&eacute;n&eacute;ration et le trac&eacute;
d’un terrain 3D en tant que maillages triangulaires, par exemple.
Cr&eacute;ation et d&eacute;placement d’objets d’affichage 3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Pour convertir un objet d’affichage 2D en objet d’affichage 3D, vous devez explicitement d&eacute;finir sa propri&eacute;t&eacute; z sur une
valeur num&eacute;rique. Lorsque vous affectez une valeur &agrave; la propri&eacute;t&eacute; z, un objet Transform est cr&eacute;&eacute; pour l’objet
d’affichage. La d&eacute;finition des propri&eacute;t&eacute;s DisplayObject.rotationX ou DisplayObject.rotationY cr&eacute;e &eacute;galement
un objet Transform. Celui-ci contient une propri&eacute;t&eacute; Matrix3D qui r&eacute;git la repr&eacute;sentation de l’objet d’affichage dans
l’espace 3D.
Le code suivant d&eacute;finit les coordonn&eacute;es d’un objet d’affichage appel&eacute; &laquo; leaf &raquo; (feuille) :
leaf.x = 100; leaf.y = 50; leaf.z = -30;
Vous pouvez visualiser ces valeurs, ainsi que les propri&eacute;t&eacute;s qui en d&eacute;rivent, dans la propri&eacute;t&eacute; matrix3D de l’objet
Transform de la feuille :
var leafMatrix:Matrix3D
= leaf.transform.matrix3D;
trace(leafMatrix.position.x);
trace(leafMatrix.position.y);
trace(leafMatrix.position.z);
trace(leafMatrix.position.length);
trace(leafMatrix.position.lengthSquared);
Pour plus d’informations sur les propri&eacute;t&eacute;s de l’objet Transform, voir la classe Transform. Pour plus d’informations
sur les propri&eacute;t&eacute;s de l’objet Matrix3D, voir la classe Matrix3D.
D&eacute;placement d’un objet dans l’espace 3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Vous pouvez d&eacute;placer un objet dans l’espace 3D en modifiant la valeur de ses propri&eacute;t&eacute;s x, y ou z. Lorsque vous
modifiez la valeur de sa propri&eacute;t&eacute; z, l’objet semble se rapprocher ou s’&eacute;loigner de l’observateur.
Le code suivant modifie la valeur de la propri&eacute;t&eacute; z de deux ellipses en r&eacute;ponse &agrave; un &eacute;v&eacute;nement pour leur imprimer un
mouvement de va-et-vient le long de leur axe z. ellipse2 se d&eacute;place plus rapidement qu’ellipse1 : sa propri&eacute;t&eacute; z est
incr&eacute;ment&eacute;e d’un multiple de 20 sur chaque &eacute;v&eacute;nement Frame, alors que la propri&eacute;t&eacute; z d’ellipse1 est incr&eacute;ment&eacute;e
d’un multiple de 10 :
Derni&egrave;re mise &agrave; jour le 27/4/2013
365
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
var depth:int = 1000;
function ellipse1FrameHandler(e:Event):void
{
ellipse1Back = setDepth(e, ellipse1Back);
e.currentTarget.z += ellipse1Back * 10;
}
function ellipse2FrameHandler(e:Event):void
{
ellipse2Back = setDepth(e, ellipse1Back);
e.currentTarget.z += ellipse1Back * 20;
}
function setDepth(e:Event, d:int):int
{
if(e.currentTarget.z &gt; depth)
{
e.currentTarget.z = depth;
d = -1;
}
else if (e.currentTarget.z &lt; 0)
{
e.currentTarget.z = 0;
d = 1;
}
}
Rotation d’un objet dans l’espace 3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Vous pouvez faire pivoter un objet de trois fa&ccedil;ons diff&eacute;rentes, selon la d&eacute;finition de sa propri&eacute;t&eacute; de rotation :
rotationX, rotationY et rotationZ.
La figure ci-dessous illustre deux carr&eacute;s qui ne sont pas soumis &agrave; une rotation :
Dans la figure suivante, la propri&eacute;t&eacute; rotationY du conteneur des carr&eacute;s a &eacute;t&eacute; incr&eacute;ment&eacute;e pour les faire pivoter sur
l’axe y. La rotation du conteneur, ou objet d’affichage parent, des deux carr&eacute;s fait pivoter ceux-ci :
container.rotationY += 10;
Derni&egrave;re mise &agrave; jour le 27/4/2013
366
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Dans la figure suivante, la propri&eacute;t&eacute; rotationX du conteneur des carr&eacute;s est modifi&eacute;e : Elle fait pivoter ceux-ci sur
l’axe x.
Dans la figure suivante, la propri&eacute;t&eacute; rotationZ du conteneur des carr&eacute;s a &eacute;t&eacute; incr&eacute;ment&eacute;e et ceux-ci pivotent sur
l’axe z.
Un objet d’affichage peut se d&eacute;placer et pivoter simultan&eacute;ment dans l’espace 3D.
Projection d’objets 3D sur un affichage 2D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La classe PerspectiveProjection du package flash.geom facilite l’application d’une perspective rudimentaire lors du
d&eacute;placement d’objets d’affichage dans l’espace 3D.
Si vous ne cr&eacute;ez pas explicitement une projection de perspective pour votre espace 3D, le moteur 3D utilise un objet
PerspectiveProjection par d&eacute;faut, qui existe sur la racine et est propag&eacute; &agrave; tous ses enfants.
Les trois propri&eacute;t&eacute;s qui d&eacute;finissent le mode d’affichage de l’espace 3D par un objet PerspectiveProjection sont les
suivantes :
•
fieldOfView
•
projectionCenter
•
focalLength
La modification de la valeur de fieldOfView entra&icirc;ne automatiquement la modification de la valeur de focalLength,
et inversement, car ces propri&eacute;t&eacute;s sont interd&eacute;pendantes.
La formule permettant de calculer focalLength en fonction de la valeur de fieldOfView est la suivante :
focalLength = stageWidth/2 * (cos(fieldOfView/2) / sin(fieldOfView/2)
En r&egrave;gle g&eacute;n&eacute;rale, vous modifiez explicitement la propri&eacute;t&eacute; fieldOfView.
Champ de vision
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
En manipulant la propri&eacute;t&eacute; fieldOfView de la classe PerspectiveProjection, vous pouvez faire en sorte qu’un objet
d’affichage 3D semble s’agrandir ou diminuer selon qu’il se rapproche ou s’&eacute;loigne de l’observateur, respectivement.
Derni&egrave;re mise &agrave; jour le 27/4/2013
367
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
La propri&eacute;t&eacute; fieldOfView d&eacute;finit un angle compris entre 0 et 180 degr&eacute;s qui d&eacute;termine la puissance de la projection
de perspective. Plus la valeur est &eacute;lev&eacute;e, plus forte est la distorsion appliqu&eacute;e &agrave; un objet d’affichage qui se d&eacute;place sur
son axe z. Une valeur fieldOfView basse entra&icirc;ne une mise &agrave; l’&eacute;chelle minimale et les objets ne semblent reculer que
tr&egrave;s l&eacute;g&egrave;rement. Une valeur &eacute;lev&eacute;eentra&icirc;ne une plus grande distorsion et une impression plus prononc&eacute;e de
mouvement. La valeur maximale, 179,9999... degr&eacute;s, produit un effet d’objectif œil-de-poisson extr&ecirc;me. La valeur
maximale de fieldOfView est 179,9999..., tandis que 0,00001... est sa valeur minimale. Les valeurs exactes de 0 et
180 sont ill&eacute;gales.
Centre de la projection
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La propri&eacute;t&eacute; projectionCenterrepr&eacute;sente le point de fuite de la projection de perspective. Elle est appliqu&eacute;e comme
d&eacute;calage du point d’alignement par d&eacute;faut (0,0) dans l’angle sup&eacute;rieur gauche de la sc&egrave;ne.
A mesure qu’il semble s’&eacute;loigner de l’observateur, un objet s’incline vers le point de fuite et finit par dispara&icirc;tre.
Imaginez un couloir extr&ecirc;mement long. Lorsque vous regardez dans le couloir, les bords des murs convergent vers un
point de fuite tout au fond.
Si le point de fuite se trouve au centre de la sc&egrave;ne, le couloir dispara&icirc;t vers un point central. La valeur par d&eacute;faut de la
propri&eacute;t&eacute; projectionCenter correspond au centre de la sc&egrave;ne. Si, par exemple, vous souhaitez que des &eacute;l&eacute;ments
apparaissent sur la gauche de la sc&egrave;ne et une zone 3D sur la droite de la sc&egrave;ne, d&eacute;finissez la propri&eacute;t&eacute;
projectionCenter sur un point situ&eacute; dans la partie droite de la sc&egrave;ne pour en faire le point de fuite de votre zone
d’affichage 3D.
Distance focale
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La propri&eacute;t&eacute; focalLength repr&eacute;sente la distance s&eacute;parant l’origine du point de vue (0,0,0) de l’emplacement de l’objet
d’affichage sur son axe z.
Une distance focale &eacute;lev&eacute;e est similaire &agrave; un t&eacute;l&eacute;objectif : le champ de vision est &eacute;troit et les distances entre les objets
compress&eacute;es. Une distance focale courte s’assimile &agrave; un objectif &agrave; grand angle et se caract&eacute;rise par un champ de vision
large et une distorsion prononc&eacute;e. Une distance focale moyenne correspond approximativement &agrave; ce que voit l’œil
humain.
En r&egrave;gle g&eacute;n&eacute;rale, la propri&eacute;t&eacute; focalLength est recalcul&eacute;e dynamiquement pendant la transformation de perspective
au fur et &agrave; mesure du d&eacute;placement de l’objet d’affichage, mais il est possible de la d&eacute;finir explicitement.
Valeurs par d&eacute;faut de la projection de perspective
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
L’objet PerspectiveProjection par d&eacute;faut cr&eacute;&eacute; sur la racine poss&egrave;de les valeurs suivantes :
•
fieldOfView : 55
•
perspectiveCenter : stagewidth/2, stageHeight/2
•
focalLength : stageWidth/ 2 * ( cos(fieldOfView/2) / sin(fieldOfView/2) )
Ces valeurs sont appliqu&eacute;es si vous ne cr&eacute;ez pas votre propre objet PerspectiveProjection.
Derni&egrave;re mise &agrave; jour le 27/4/2013
368
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Vous pouvez instancier votre propre objet PerspectiveProjection dans l’intention de modifier vous-m&ecirc;me les
propri&eacute;t&eacute;s projectionCenter et fieldOfView. Dans ce cas, les valeurs par d&eacute;faut du nouvel objet sont les suivantes,
en supposant que la sc&egrave;ne mesure 500 sur 500 par d&eacute;faut :
•
fieldOfView : 55
•
perspectiveCenter : 250,250
•
focalLength : 480.24554443359375
Exemple : Projection de perspective
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
L’exemple suivant illustre l’utilisation de la projection de perspective pour cr&eacute;er l’espace 3D. Il indique comment
modifier le point de fuite et la projection de perspective de l’espace par le biais de la propri&eacute;t&eacute; projectionCenter.
Cette modification force un nouveau calcul des propri&eacute;t&eacute;s focalLength et fieldOfView, r&eacute;sultant en une distorsion
de l’espace 3D.
Cet exemple :
1 cr&eacute;e un sprite appel&eacute; center, un cercle avec une mire ;
2 affecte les coordonn&eacute;es du sprite center &agrave; la propri&eacute;t&eacute; projectionCenter de la propri&eacute;t&eacute;
perspectiveProjection de la propri&eacute;t&eacute; transform de la racine ;
3 ajoute des &eacute;couteurs de l’&eacute;v&eacute;nement souris qui appellent des gestionnaires qui modifient la propri&eacute;t&eacute;
projectionCenter afin qu’elle suive l’emplacement de l’objet center ;
4 cr&eacute;e quatre bo&icirc;tes en accord&eacute;on qui forment les murs de l’espace en perspective.
Lorsque vous testez cet exemple, ProjectionDragger.swf, faites glisser le cercle &agrave; diff&eacute;rents emplacements. Le point de
fuite suit le cercle et figure l&agrave; o&ugrave; vous le d&eacute;posez. Observez comme les bo&icirc;tes qui d&eacute;limitent l’espace s’&eacute;tirent et se
distordent plus vous &eacute;loignez le centre de projection du centre de la sc&egrave;ne.
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application ProjectionDragger r&eacute;sident
dans le dossier Samples/ProjectionDragger.
Derni&egrave;re mise &agrave; jour le 27/4/2013
369
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
package
{
import flash.display.Sprite;
import flash.display.Shape;
import flash.geom.Point;
import flash.events.*;
public class ProjectionDragger extends Sprite
{
private var center : Sprite;
private var boxPanel:Shape;
private var inDrag:Boolean = false;
public function ProjectionDragger():void
{
createBoxes();
createCenter();
}
public function createCenter():void
{
var centerRadius:int = 20;
center = new Sprite();
// circle
center.graphics.lineStyle(1, 0x000099);
center.graphics.beginFill(0xCCCCCC, 0.5);
center.graphics.drawCircle(0, 0, centerRadius);
center.graphics.endFill();
// cross hairs
center.graphics.moveTo(0, centerRadius);
center.graphics.lineTo(0, -centerRadius);
center.graphics.moveTo(centerRadius, 0);
center.graphics.lineTo(-centerRadius, 0);
center.x = 175;
center.y = 175;
center.z = 0;
this.addChild(center);
center.addEventListener(MouseEvent.MOUSE_DOWN, startDragProjectionCenter);
center.addEventListener(MouseEvent.MOUSE_UP, stopDragProjectionCenter);
center.addEventListener( MouseEvent.MOUSE_MOVE, doDragProjectionCenter);
root.transform.perspectiveProjection.projectionCenter = new Point(center.x,
center.y);
}
public function createBoxes():void
{
// createBoxPanel();
var boxWidth:int = 50;
var boxHeight:int = 50;
var numLayers:int = 12;
var depthPerLayer:int = 50;
// var boxVec:Vector.&lt;Shape&gt; = new Vector.&lt;Shape&gt;(numLayers);
for (var i:int = 0; i &lt; numLayers; i++)
{
this.addChild(createBox(150, 50, (numLayers - i) * depthPerLayer, boxWidth,
boxHeight, 0xCCCCFF));
Derni&egrave;re mise &agrave; jour le 27/4/2013
370
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
this.addChild(createBox(50, 150, (numLayers - i) * depthPerLayer, boxWidth,
boxHeight, 0xFFCCCC));
this.addChild(createBox(250, 150, (numLayers - i) * depthPerLayer, boxWidth,
boxHeight, 0xCCFFCC));
this.addChild(createBox(150, 250, (numLayers - i) * depthPerLayer, boxWidth,
boxHeight, 0xDDDDDD));
}
}
public function createBox(xPos:int = 0, yPos:int = 0, zPos:int = 100, w:int = 50, h:int
= 50, color:int = 0xDDDDDD):Shape
{
var box:Shape = new Shape();
box.graphics.lineStyle(2, 0x666666);
box.graphics.beginFill(color, 1.0);
box.graphics.drawRect(0, 0, w, h);
box.graphics.endFill();
box.x = xPos;
box.y = yPos;
box.z = zPos;
return box;
}
public function startDragProjectionCenter(e:Event)
{
center.startDrag();
inDrag = true;
}
public function doDragProjectionCenter(e:Event)
{
if (inDrag)
{
root.transform.perspectiveProjection.projectionCenter = new Point(center.x,
center.y);
}
}
public function stopDragProjectionCenter(e:Event)
{
center.stopDrag();
root.transform.perspectiveProjection.projectionCenter = new Point(center.x,
center.y);
inDrag = false;
}
}
}
Pour des projections de perspective plus complexes, utilisez la classe Matrix3D.
Derni&egrave;re mise &agrave; jour le 27/4/2013
371
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Transformations 3D complexes
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
La classe Matrix3D vous permet de transformer des points 3D dans un espace de coordonn&eacute;es ou de mapper des points
3D d’un espace de coordonn&eacute;es sur un autre.
Il n’est pas n&eacute;cessaire de comprendre les math&eacute;matiques matricielles pour pouvoir utiliser la classe Matrix3D. Ses
m&eacute;thodes permettent de g&eacute;rer la plupart des op&eacute;rations de transformation courantes. Il est inutile de vous soucier de
la d&eacute;finition explicite ou du calcul de la valeur de chaque &eacute;l&eacute;ment de la matrice.
Une fois la propri&eacute;t&eacute; z d’un objet d’affichage d&eacute;finie sur une valeur num&eacute;rique, vous pouvez r&eacute;cup&eacute;rer la matrice de
transformation de l’objet par le biais de la propri&eacute;t&eacute; Matrix3D de l’objet Transform de l’objet d’affichage :
var leafMatrix:Matrix3D = this.transform.matrix3D;
Les m&eacute;thodes de l’objet Matrix3D vous permettent d’op&eacute;rer une translation sur un objet d’affichage, de le faire pivoter
et de le mettre &agrave; l’&eacute;chelle, ainsi que de lui appliquer une projection de perspective.
Utilisez la classe Vector3D et ses propri&eacute;t&eacute;s x, y et z pour g&eacute;rer les points 3D. Elle peut &eacute;galement repr&eacute;senter en
physique un vecteur spatial, dot&eacute; d’une direction et d’une magnitude. Les m&eacute;thodes de la classe Vector3D vous
permettent d’effectuer des calculs courants portant sur des vecteurs spatiaux : somme, produit scalaire et produit
vectoriel, par exemple.
Remarque : la classe Vector3D n’a aucun rapport avec la classe Vector d’ActionScript. La classe Vector3D contient des
propri&eacute;t&eacute;s et des m&eacute;thodes permettant de d&eacute;finir et de manipuler les points 3D, alors que la classe Vector prend en charge
les tableaux d’objets typ&eacute;s.
Cr&eacute;ation d’objets Matrix3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Vous pouvez cr&eacute;er ou r&eacute;cup&eacute;rer des objets Matrix3D de trois fa&ccedil;ons principales :
• Utilisez la m&eacute;thode constructeur Matrix3D() pour instancier une nouvelle matrice. Le constructeur Matrix3D()
g&egrave;re un objet Vector contenant 16 valeurs num&eacute;riques et place chacune d’elles dans une cellule de la matrice.
Exemple :
var rotateMatrix:Matrix3D = new Matrix3D(1,0,0,1, 0,1,0,1, 0,0,1,1, 0,0,0,1);
• D&eacute;finissez la valeur de la propri&eacute;t&eacute; z d’un objet d’affichage. R&eacute;cup&eacute;rez ensuite la matrice de transformation de la
propri&eacute;t&eacute; transform.matrix3D de cet objet.
• R&eacute;cup&eacute;rez l’objet Matrix3D qui r&eacute;git l’affichage des objets 3D sur la sc&egrave;ne en appelant la m&eacute;thode
perspectiveProjection.toMatrix3D() sur l’objet d’affichage racine.
Application de plusieurs transformations 3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Vous pouvez appliquer simultan&eacute;ment de nombreuses transformations 3D &agrave; l’aide d’un objet Matrix3D. Ainsi, pour
faire pivoter, mettre &agrave; l’&eacute;chelle, puis d&eacute;placer un cube, vous pourriez appliquer trois transformations distinctes &agrave;
chacun de ses points. Il est cependant beaucoup plus efficace de pr&eacute;calculer plusieurs transformations dans un m&ecirc;me
objet Matrix3D et d’appliquer une transformation matricielle unique &agrave; chacun des points.
Derni&egrave;re mise &agrave; jour le 27/4/2013
372
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Remarque : l’ordre d’application des transformations matricielles est important. Les calculs matriciels ne sont pas
r&eacute;versibles. Ainsi, l’application d’une rotation puis d’une translation ne donne pas le m&ecirc;me r&eacute;sultat que l’op&eacute;ration
inverse.
L’exemple suivant illustre deux fa&ccedil;ons d’appliquer plusieurs transformations 3D.
package {
import
import
import
import
flash.display.Sprite;
flash.display.Shape;
flash.display.Graphics;
flash.geom.*;
public class Matrix3DTransformsExample extends Sprite
{
private var rect1:Shape;
private var rect2:Shape;
public function Matrix3DTransformsExample():void
{
var pp:PerspectiveProjection = this.transform.perspectiveProjection;
pp.projectionCenter = new Point(275,200);
this.transform.perspectiveProjection = pp;
rect1 = new Shape();
rect1.x = -70;
rect1.y = -40;
rect1.z = 0;
rect1.graphics.beginFill(0xFF8800);
rect1.graphics.drawRect(0,0,50,80);
rect1.graphics.endFill();
addChild(rect1);
rect2 = new Shape();
rect2.x = 20;
rect2.y = -40;
rect2.z = 0;
rect2.graphics.beginFill(0xFF0088);
rect2.graphics.drawRect(0,0,50,80);
rect2.graphics.endFill();
addChild(rect2);
Derni&egrave;re mise &agrave; jour le 27/4/2013
373
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
doTransforms();
}
private function doTransforms():void
{
rect1.rotationX = 15;
rect1.scaleX = 1.2;
rect1.x += 100;
rect1.y += 50;
rect1.rotationZ = 10;
var matrix:Matrix3D = rect2.transform.matrix3D;
matrix.appendRotation(15, Vector3D.X_AXIS);
matrix.appendScale(1.2, 1, 1);
matrix.appendTranslation(100, 50, 0);
matrix.appendRotation(10, Vector3D.Z_AXIS);
rect2.transform.matrix3D = matrix;
}
}
}
Dans la m&eacute;thode doTransforms(), le premier bloc de code utilise les propri&eacute;t&eacute;s DisplayObject pour modifier la
rotation, la mise &agrave; l’&eacute;chelle et la position d’un rectangle. Le second bloc utilise les m&eacute;thodes de la classe Matrix3D pour
effectuer des transformations identiques.
L’utilisation des m&eacute;thodes Matrix3D pr&eacute;sente un avantage principal : tous les calculs sont d&eacute;j&agrave; effectu&eacute;s dans la
matrice. Ils sont ensuite appliqu&eacute;s une seule fois &agrave; l’objet d’affichage, lors de la d&eacute;finition de sa propri&eacute;t&eacute;
transform.matrix3D. La d&eacute;finition des propri&eacute;t&eacute;s DisplayObject am&eacute;liore quelque peu la lisibilit&eacute; du code source.
Cependant, chaque d&eacute;finition d’une propri&eacute;t&eacute; de rotation ou de mise &agrave; l’&eacute;chelle donne lieu &agrave; plusieurs calculs et
entra&icirc;ne la modification de plusieurs propri&eacute;t&eacute;s de l’objet d’affichage.
Si votre code applique plusieurs fois des transformations complexes identiques &agrave; des objets d’affichage, enregistrez
l’objet Matrix3D en tant que variable, puis r&eacute;appliquez-le autant de fois que n&eacute;cessaire.
R&eacute;organisation de l’affichage &agrave; l’aide d’objets Matrix3D
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Comme indiqu&eacute; plus haut, l’ordre d’apparition des objets d’affichage dans la liste d’affichage d&eacute;termine l’ordre
d’apparition &agrave; l’affichage, quels que soient leurs axes z relatifs. Si votre animation transforme les propri&eacute;t&eacute;s d’objets
d’affichage dans un ordre diff&eacute;rent de celui de la liste d’affichage, l’ordre d’apparition des objets d’affichage ne
correspondra peut-&ecirc;tre pas &agrave; celui des axes z. Un objet qui devrait sembler plus &eacute;loign&eacute; de l’observateur risque donc
d’appara&icirc;tre devant un objet plus proche.
Pour avoir la certitude que l’ordre d’apparition des objets d’affichage 3D correspond &agrave; leur profondeur relative,
proc&eacute;dez comme suit :
1 A l’aide de la m&eacute;thode getRelativeMatrix3D() de l’objet Transform, extrayez la profondeur relative (z-axes)
des objets d’affichage 3D enfant.
2 Supprimez les objets de la liste d’affichage &agrave; l’aide de la m&eacute;thode removeChild().
3 Triez les objets d’affichage en fonction de leurs valeurs d’axe z relatives.
4 Ajoutez &agrave; nouveau les enfants &agrave; la liste d’affichage en ordre inverse, par le biais de la m&eacute;thode addChild().
Cette r&eacute;organisation garantit que vos objets s’affichent conform&eacute;ment &agrave; leurs axes z relatifs.
Derni&egrave;re mise &agrave; jour le 27/4/2013
374
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Le code suivant garantit l’affichage correct d’une bo&icirc;te 3D &agrave; six faces. Il r&eacute;organise les faces de la bo&icirc;te une fois que des
rotations lui ont &eacute;t&eacute; appliqu&eacute;es.
public var faces:Array; . . .
public function ReorderChildren()
{
for(var ind:uint = 0; ind &lt; 6; ind++)
{
faces[ind].z = faces[ind].child.transform.getRelativeMatrix3D(root).position.z;
this.removeChild(faces[ind].child);
}
faces.sortOn(&quot;z&quot;, Array.NUMERIC | Array.DESCENDING);
for (ind = 0; ind &lt; 6; ind++)
{
this.addChild(faces[ind].child);
}
}
Pour obtenir les fichiers d’application de cet exemple, voir
www.adobe.com/go/learn_programmingAS3samples_flash_fr. Les fichiers d’application r&eacute;sident dans le dossier
Samples/ReorderByZ.
Cr&eacute;ation d’effets 3D &agrave; l’aide de triangles
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Dans ActionScript, vous effectuez des transformations de bitmap &agrave; l’aide de la m&eacute;thode
Graphics.drawTriangles(), car les mod&egrave;les 3D sont repr&eacute;sent&eacute;s par un ensemble de triangles dans l’espace. (Flash
Player et AIR ne prennent n&eacute;anmoins pas en charge une m&eacute;moire tampon de profondeur, car les objets d’affichage
sont toujours essentiellement plats, ou 2D. Pour plus d'informations, voir &laquo; Pr&eacute;sentation des objets d’affichage 3D dans
les moteurs d’ex&eacute;cution de Flash Player et d’AIR &raquo; &agrave; la page 363.) La m&eacute;thode Graphics.drawTriangles() est
similaire &agrave; la m&eacute;thode Graphics.drawPath(), en ce qu’elle accepte un ensemble de coordonn&eacute;es pour tracer un trac&eacute;
triangulaire.
Pour vous familiariser avec l’utilisation de Graphics.drawPath(), voir &laquo; Trac&eacute;s de dessin &raquo; &agrave; la page 244.
La m&eacute;thode Graphics.drawTriangles() utilise une propri&eacute;t&eacute; Vector.&lt;Number&gt; pour sp&eacute;cifier l’emplacement des
points sur le trac&eacute; triangulaire :
drawTriangles(vertices:Vector.&lt;Number&gt;, indices:Vector.&lt;int&gt; = null, uvtData:Vector.&lt;Number&gt;
= null, culling:String = &quot;none&quot;):void
Le premier param&egrave;tre de drawTriangles(), vertices, est le seul param&egrave;tre obligatoire. C’est un vecteur de nombres
d&eacute;finissant les coordonn&eacute;es par lesquelles vos triangles sont trac&eacute;s. Trois ensembles de coordonn&eacute;es (six nombres)
repr&eacute;sentent un trac&eacute; triangulaire. Sans le param&egrave;tre indices, la longueur du vecteur doit syst&eacute;matiquement &ecirc;tre un
facteur de six, car chaque triangle n&eacute;cessite trois paires de coordonn&eacute;es (trois ensembles de deux valeurs x/y).
Exemple :
graphics.beginFill(0xFF8000);
graphics.drawTriangles(
Vector.&lt;Number&gt;([
10,10, 100,10, 10,100,
110,10, 110,100, 20,100]));
Derni&egrave;re mise &agrave; jour le 27/4/2013
375
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Ces triangles n’ont pas de points en commun, mais si tel &eacute;tait le cas, le second param&egrave;tre de drawTriangles(),
indices, permettrait de r&eacute;utiliser des valeurs du vecteur vertices pour plusieurs triangles.
Lorsque vous utilisez le param&egrave;tre indices, gardez &agrave; l’esprit le fait que les valeurs indices repr&eacute;sentent des index de
point, pas des index en rapport direct avec les &eacute;l&eacute;ments du tableau vertices. En d’autres termes, un index du vecteur
vertices tel qu’il est d&eacute;fini par indices correspond en fait &agrave; l’index r&eacute;el divis&eacute; par 2. Pour le troisi&egrave;me point d’un
vecteur vertices, par exemple, utilisez une valeur indices de 2, m&ecirc;me si la premi&egrave;re valeur num&eacute;rique de ce point
commence &agrave; l’index vectoriel 4.
Par exemple, fusionnez deux triangles de sorte qu’ils aient en commun le bord diagonal, par le biais du param&egrave;tre
indices :
graphics.beginFill(0xFF8000);
graphics.drawTriangles(
Vector.&lt;Number&gt;([10,10, 100,10, 10,100, 100,100]),
Vector.&lt;int&gt;([0,1,2, 1,3,2]));
Vous remarquerez que, bien qu’un carr&eacute; r&eacute;sulte du trac&eacute; de deux triangles, seuls quatre points ont &eacute;t&eacute; sp&eacute;cifi&eacute;s dans le
vecteur vertices. Gr&acirc;ce &agrave; indices, les deux points partag&eacute;s par les deux triangles sont r&eacute;utilis&eacute;s pour chacun d’eux.
Le nombre total de sommets passe donc de 6 (12 nombres) &agrave; 4 (8 nombres).
0
1
2
3
Carr&eacute; trac&eacute; &agrave; l’aide de deux triangles &agrave; l’aide du param&egrave;tre vertices
Cette technique s’av&egrave;re utile pour les maillages triangulaires plus grands, dans lesquels la plupart des points sont
partag&eacute;s par plusieurs triangles.
Il est possible d’appliquer tous les remplissages aux triangles. Ils sont appliqu&eacute;s au maillage triangulaire r&eacute;sultant
comme ils le seraient &agrave; toute autre forme.
Transformation d’images bitmap
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Les transformations de bitmap donnent une illusion de perspective ou &laquo; texture &raquo; &agrave; un objet en trois dimensions. Vous
pouvez notamment distordre une bitmap en direction d’un point de fuite, afin que l’image semble diminuer &agrave; mesure
qu’elle se rapproche de celui-ci. Vous pouvez aussi utiliser une bitmap en deux dimensions pour cr&eacute;er une surface sur
un objet en trois dimensions, donnant ainsi l’impression qu’il poss&egrave;de une texture ou &laquo; enveloppe &raquo;.
Derni&egrave;re mise &agrave; jour le 27/4/2013
376
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Surface en deux dimensions utilisant un point de fuite et objet en trois dimensions envelopp&eacute; dans une bitmap
Mappage des coordonn&eacute;es UV
Flash Player 10 et les versions ult&eacute;rieures, Adobe AIR 1.5 et les versions ult&eacute;rieures
Lorsque vous commencerez &agrave; manipuler les textures, vous souhaiterez utiliser le param&egrave;tre uvtData de
drawTriangles(). Ce param&egrave;tre vous permet de d&eacute;finir le mappage des coordonn&eacute;es UV pour les remplissages de
bitmap.
Le mappage des coordonn&eacute;es UV est une m&eacute;thode d’application d’une texture &agrave; des objets. Il repose sur deux valeurs,
une valeur U horizontale (x) et une valeur V verticale (y). Ces valeurs sont bas&eacute;es sur des pourcentages et non sur des
valeurs de pixels. 0 U et 0 V correspondent au coin sup&eacute;rieur gauche d’une image, 1 U et 1 V &agrave; son coin inf&eacute;rieur droit :
Emplacements UV 0 et 1 sur une image bitmap
Il est possible d’affecter des coordonn&eacute;es UV aux vecteurs d’un triangle de sorte qu’ils s’associent aux emplacements
respectifs sur une image :
Coordonn&eacute;es UV d’une zone triangulaire sur une image bitmap
Les valeurs UV restent en phase avec les points du triangle.
Derni&egrave;re mise &agrave; jour le 27/4/2013
377
378
GUIDE DU D&Eacute;VELOPPEUR D’ACTIONSCRIPT 3.0
Travail en trois dimensions (3D)
Les sommets du triangle se d&eacute;placent et l’image bitmap se distord pour que les valeurs UV d’un point individuel restent identiques.
Au fur et &agrave; mesure que des transformations 3D ActionScript sont appliqu&eacute;es au triangle associ&eacute; &agrave; la bitmap, celle-ci est
appliqu&eacute;e au triangle en fonction des valeurs UV. Par cons&eacute;quent, au lieu d’utiliser des calculs matriciels, d&eacute;finissez ou
r&eacute;glez les valeurs UV pour cr&eacute;er un effet tridimensionnel.
La m&eacute;thode Graphics.drawTriangles() accepte &eacute;galement une information facultative pour les transformations
tridimensionnelles : la valeur T. La valeur T de uvtData repr&eacute;sente la perspective 3D ou, plus sp&eacute;cifiquement, le facteur
d’&eacute;chelle du sommet associ&eacute;. Le mappage des coordonn&eacute;es UVT ajoute une correction de perspective au mappage des
coordonn&eacute;es UV. Par exemple, si un objet de l’espace 3D est &eacute;loign&eacute; du point de vue de telle sorte qu’il semble mesurer
50 % de sa taille &laquo; d’origine &raquo;, sa valeur T correspond &agrave; 0,5. Comme les objets de l’espace 3D sont repr&eacute;sent&eacute;s &agrave; l’aide
de triangles, l’emplacement de ceux-ci le long de l’axe z d&eacute;termine leur valeur T. L’&eacute;quation qui repr&eacute;sente la valeur T
est la suivante :
T = focalLength/(focalLength + z);
Dans cette &eacute;quation, focalLength repr&eacute;sente une distance focale ou un emplacement &agrave; l’&laquo; &eacute;cran &raquo; calcul&eacute; qui d&eacute;termine
la quantit&eacute; de perspective de l’affichage.
A
B
D
C
E
Distance focale et valeur z
A. point de vue B. &eacute;cran C. objet 3D D. valeur focalLength E. valeur z
La valeur T permet de mettre &agrave; l’&eacute;chelle des formes simples pour donner l’impression qu’elles se trouvent au loin. C’est
g&eacute;n&eacute;ralement la valeur utilis&eacute;e pour convertir les points 3D en points 2D. Dans le cas des donn&eacute;es UVT, elle permet
aussi de mettre &agrave; l’&eacute;chelle une bitmap entre les points d’un triangle avec perspective.
Lorsque vous d&eacute;
Manuel du propriétaire | Adobe ActionScript 3.0 Manuel utilisateur

Manuels associés

Adobe

ActionScript 3.0

Adobe

Flash

Adobe

Animate CC

Adobe

Flash CS5

MACROMEDIA

FLASH 8-FORMATION ACTIONSCRIPT 2.0 DANS FLASH

MACROMEDIA

Flash MX 2004

Adobe

FLASH LITE 4

MACROMEDIA

FLASH MX 2004-UTILISATION DE FLASH

Adobe

Flash CS5

MACROMEDIA

FLASH MX 2004-UTILISATION DES COMPOSANTS

Adobe

Flash MX

Adobe

Device Central CS5.5
