MACROMEDIA FLASH 8-UTILISATION DES COMPOSANTS Manuel utilisateur

Utilisation des composants
Marques de commerce
1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central,
ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite,
FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder,
Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit,
Studio MX, UltraDev et WebHelp sont des marques de commerce ou des marques déposées de Macromedia, Inc. qui peuvent
être déposées aux Etats-Unis et/ou dans d’autres juridictions ou pays. Les autres noms de produits, logos, graphiques, mises en
page, titres, mots ou expressions mentionnés dans cette publication peuvent être des marques de commerce, des marques de
service ou des noms de marque appartenant à Macromedia, Inc. ou à d’autres entités et peuvent être déposés dans certaines
juridictions ou certains pays.
Autres marques mentionnées
Ce guide contient des liens vers des sites Web qui ne sont pas sous le contrôle de Macromedia, qui n’est donc aucunement
responsable de leur contenu. L’accès à ces sites se fait sous votre seule responsabilité. Macromedia mentionne ces liens pour
référence, ce qui n’implique pas son soutien, accord ou responsabilité quant au contenu des sites.
Technologie de compression et décompression audio discours utilisée sous licence de Nellymoser, Inc. (www.nellymoser.com).
Technologie de compression et décompression vidéo Sorenson™ Spark™ utilisée sous licence de
Sorenson Media, Inc.
Navigateur Opera ® Copyright © 1995-2002 Opera Software ASA et ses fournisseurs. Tous droits réservés.
La technologie vidéo Macromedia Flash 8 est optimisée par la technologie vidéo On2 TrueMotion. © 1992-2005 On2
Technologies, Inc. Tous droits réservés. http://www.on2.com.
Visual SourceSafe est une marque déposée ou une marque de commerce de Microsoft Corporation aux Etats-Unis et/ou dans
d’autres pays.
Copyright © 2005 Macromedia, Inc. Tous droits réservés. La copie, photocopie, reproduction, traduction ou conversion
de ce manuel, sous quelque forme que ce soit, mécanique ou électronique, est interdite sans une autorisation préalable
écrite de Macromedia, Inc. Le propriétaire ou l’utilisateur autorisé d’une copie valide du logiciel qu’accompagne ce
manuel peut néanmoins imprimer une copie de ce dernier à partir d’une version électronique afin d’apprendre à utiliser le
logiciel, à condition qu’aucune partie de ce manuel ne soit imprimée, reproduite, distribuée, revendue ou cédée dans un
autre but, y compris, mais sans limitation aucune, dans un but commercial, tel que la revente de copies de cette
documentation ou l’offre de services de maintenance rémunérés.
Remerciements
Gestion du projet : Sheila McGinn
Rédaction : Bob Berry, Jen deHaan, Peter deHaan, David Jacowitz, Wade Pickett
Rédactrice en chef : Rosana Francescato
Rédactrice en chef : Lisa Stanziano
Révision : Mary Ferguson, Mary Kraemer, Lisa Stanziano, Anne Szabla
Gestion de la production : Patrice O’Neill, Kristin Conradi, Yuko Yagi
Conception et production des supports : Adam Barnett, Aaron Begley, Paul Benkman. John Francis, Geeta Karmarkar, Masayo
Noda, Paul Rangel, Arena Reed, Mario Reynoso
Remerciements particuliers à Jody Bleyle, Mary Burger, Lisa Friendly, Stephanie Gowin, Bonnie Loo, Mary Ann Walsh, Erick
Vera, Florian de Joannès, aux testeurs des versions bêta et aux équipes d’ingénieurs et d’assurance qualité de Flash et Flash Player.
Première édition : Septembre 2005
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103 Etats-Unis
Table des matières
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Public visé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Configuration système requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Présentation de la documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Termes employés dans ce manuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Ressources supplémentaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Chapitre 1 : Composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Installation des composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Emplacement de stockage des fichiers de composants . . . . . . . . . . . . 14
Modification des fichiers du composant . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Avantages des composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Composant, catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Présentation de l’architecture des composants de la version 2. . . . . . 18
Fonctions du composant de la version 2 . . . . . . . . . . . . . . . . . . . . . . . . . 19
Présentation des clips compilés et des fichiers SWC . . . . . . . . . . . . . . 21
Accessibilité et composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Chapitre 2 : Création d’une application avec composants
(Flash Professionnel uniquement) . . . . . . . . . . . . . . . . . . . . . . . . . 23
Présentation du didacticiel Fix Your Mistake
(Faites-vous pardonner) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Création de la page principale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Liaison des composants de données pour afficher les
idées de cadeaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Affichage des détails des cadeaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Création de l’écran de règlement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Affichage de l’application terminée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3
Chapitre 3 : Utilisation des composants . . . . . . . . . . . . . . . . . . . .53
Panneau Composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Ajout de composants aux documents Flash . . . . . . . . . . . . . . . . . . . . . . 54
Composants du panneau Bibliothèque. . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Définition des paramètres des composants . . . . . . . . . . . . . . . . . . . . . . 59
Dimensionnement des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Suppression de composants dans les documents Flash . . . . . . . . . . . 62
Utilisation des conseils de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Création de la navigation personnalisée du focus . . . . . . . . . . . . . . . . . 63
Gestion de la profondeur des composants dans un document . . . . . . 64
Composants de l’aperçu en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Utilisation d’un préchargement avec les composants . . . . . . . . . . . . . . 66
Chargement des composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Migration des composants de la version 1 vers
l’architecture de la version 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Chapitre 4 : Gestion des événements des composants . . . . . . . .69
Gestion des événements à l’aide d’écouteurs . . . . . . . . . . . . . . . . . . . . . 70
Délégation des événements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Objet événement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Utilisation du gestionnaire d’événements on() . . . . . . . . . . . . . . . . . . . . 83
Chapitre 5 : Personnalisation des composants. . . . . . . . . . . . . . .85
Utilisation de styles pour personnaliser la couleur et le texte des
composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
A propos de l’application d’enveloppes aux composants. . . . . . . . . . .101
Présentation des thèmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Combinaison de l’application d’enveloppes et de styles pour
personnaliser un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Chapitre 6 : Création de composants. . . . . . . . . . . . . . . . . . . . . . 135
Fichiers source de composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Présentation de la structure du composant . . . . . . . . . . . . . . . . . . . . . . 136
Création de votre premier composant . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Sélection d’une classe parent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Création d’un clip de composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Création du fichier de classe ActionScript . . . . . . . . . . . . . . . . . . . . . . . 156
Incorporation de composants existants dans votre composant . . . . 186
Exportation et distribution d’un composant. . . . . . . . . . . . . . . . . . . . . . 197
Etapes finales dans le développement du composant . . . . . . . . . . . 200
4
Table des matières
Chapitre 7 : Propriétés de collection. . . . . . . . . . . . . . . . . . . . . . 203
Définition d’une propriété de collection. . . . . . . . . . . . . . . . . . . . . . . . . 205
Exemple de collection simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Définition de la classe pour un élément de collection. . . . . . . . . . . . . 208
Accès aux informations de collection par programmation . . . . . . . . 209
Exportation de composants ayant des collections dans des
fichiers SWC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Utilisation d’un composant ayant une propriété de collection . . . . . .212
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Table des matières
5
6
Table des matières
Introduction
Macromedia Flash Basic 8 et Macromedia Flash Professionnel 8 sont les outils préférés des
professionnels pour la création de contenu Web percutant. La création de ces applications
Internet enrichies repose sur des unités élémentaires appelées composants. Un composant est
un clip qui contient des paramètres définis pendant la phase de programmation dans
Macromedia Flash, ainsi que des événements, des propriétés et des méthodes ActionScript
permettant de personnaliser le composant lors de l’exécution. Les composants sont conçus
pour permettre aux développeurs de réutiliser et de partager du code. Ils permettent
également d’encapsuler une fonctionnalité complexe que les concepteurs peuvent utiliser et
personnaliser sans avoir à se servir d’ActionScript.
Les composants sont basés sur la version 2 de l’architecture des composants Macromedia.
Celle-ci permet de créer facilement et rapidement des applications robustes à la présentation
et au comportement cohérents. Ce manuel explique comment créer des applications avec les
composants de la version 2. Le manuel associé intitulé Référence du langage des composants
décrit tous les composants, ainsi que l’interface de programmation (API) de chacun d’entre
eux. Il inclut des scénarios d’utilisation et des exemples de procédures à suivre pour utiliser les
composants version 2 de Flash, par ordre alphabétique, ainsi qu’une description des API des
composants.
Vous pouvez utiliser les composants créés par Macromedia, télécharger des composants créés
par d’autres développeurs ou créer vos propres composants.
Ce chapitre contient les sections suivantes :
Public visé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Configuration système requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Présentation de la documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Conventions typographiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Termes employés dans ce manuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Ressources supplémentaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
7
Public visé
Ce manuel est destiné aux développeurs qui créent des applications Flash et qui souhaitent
exploiter des composants pour accélérer le développement. Il demande des notions de
développement d’applications dans Macromedia Flash et d’écriture de code ActionScript.
Si vous avez peu d’expérience en écriture de code ActionScript, vous pouvez ajouter des
composants à un document, définir leurs paramètres dans l’inspecteur des propriétés ou dans
l’inspecteur de composants, puis gérer leurs événements via le panneau Comportements. Par
exemple, sans écrire aucun code ActionScript, vous pouvez affecter un comportement
Atteindre la page Web à un composant Button pour qu’une adresse URL s’ouvre dans un
navigateur Web lorsque l’utilisateur clique sur ce bouton.
Si vous êtes programmeur et que vous souhaitez créer des applications plus robustes, vous
pouvez créer les composants dynamiquement, utiliser ActionScript pour définir les propriétés
et appeler les méthodes à l’exécution. Vous pouvez également exploiter le modèle d’événement
écouteur pour gérer les événements.
Pour plus d’informations, reportez-vous à Chapitre 3, Utilisation des composants, page 53.
Configuration système requise
Aucune configuration particulière n’est requise pour les composants Macromedia outre Flash.
Tout fichier SWF qui utilise les composants de la version 2 doivent être affichés avec Flash
Player 6 (6.0.79.0) ou une version ultérieure et doit être publié pour ActionScript 2.0 (vous
pouvez définir ceci dans Fichier > Paramètres de publication, sous l’onglet Flash).
Présentation de la documentation
Ce document explique comment utiliser les composants pour développer des applications
Flash. Il présume que vous connaissez déjà Macromedia Flash et ActionScript. La
documentation spécifique à Flash et aux produits apparentés est disponible séparément.
Ce document est disponible sous forme de fichier PDF et d’aide en ligne. Pour afficher l’aide
en ligne, lancez Flash et choisissez Aide > Utilisation des composants.
Pour plus d’informations sur Macromedia Flash, consultez les documents suivants :
■
Utilisation de Flash
■
Formation à ActionScript 2.0 dans Flash
■
Guide de référence du langage ActionScript 2.0
■
Référence du langage des composants
8
Introduction
Conventions typographiques
Ce manuel utilise les conventions typographiques suivantes :
■
La police en italique indique une valeur qui devrait être remplacée (par exemple, dans le
chemin d’un dossier).
■
La police de code
indentifie le code ActionScript, y compris les noms de méthode et de
propriété.
■
La police de code en italique
désigne un élément de code à remplacer (par exemple,
un paramètre ActionScript).
■
La police en gras désigne une valeur à saisir.
Termes employés dans ce manuel
Ce manuel emploie les termes suivants :
à l’exécution
Lorsque le code est exécuté dans Flash Player.
pendant la programmation
Lors du travail exécuté dans l’environnement auteur de Flash.
Ressources supplémentaires
Pour obtenir les dernières informations sur Flash, ainsi que des conseils d’experts, des
rubriques avancées, des exemples, des astuces et autres mises à jour, consultez le site
www.macromedia.com/fr/devnet, régulièrement mis à jour. Visitez régulièrement ce site Web
pour vous tenir au courant des nouveautés de Flash et tirer le meilleur parti de votre logiciel.
Pour obtenir des TechNotes, des mises à jour de la documentation et des liens vers des
ressources supplémentaires dans la communauté Flash, visitez le Centre de support
Macromedia Flash à l’adresse www.macromedia.com/flash_support_fr.
Pour plus d’informations sur la syntaxe ActionScript et son utilisation, reportez-vous à
Formation à ActionScript 2.0 dans Flash et Guide de référence du langage ActionScript 2.0.
Pour une introduction à l’utilisation des composants, consultez le séminaire On Demand de
Macromedia, Using UI Components à l’adresse www.macromedia.com/macromedia/events/
online/ondemand/index.html.
Ressources supplémentaires
9
10
Introduction
CHAPITRE 1
1
Composants
Les composants Macromedia Flash sont des clips vidéo dont les paramètres vous permettent
de modifier l’apparence et le comportement. Il peut s’agir d’un simple contrôle d’interface
utilisateur, comme un bouton radio ou une case à cocher, ou d’un contenant, comme un
panneau défilant. Un composant peut être invisible, comme le gestionnaire de focus
(FocusManager) qui permet de contrôler quels objets reçoivent du focus dans une application.
Les composants vous permettent de créer des applications Macromedia Flash complexes,
même si vous ne maîtrisez pas ActionScript. Plutôt que de créer vos propres boutons, listes et
zones déroulantes, il vous suffit de faire glisser ces composants à partir du panneau
Composants pour ajouter des fonctionnalités à vos applications. Vous pouvez également
personnaliser facilement l’aspect des composants pour les adapter à vos besoins.
Les composants sont basés sur la version 2 de l’architecture des composants Macromedia.
Celle-ci permet de créer facilement et rapidement des applications robustes à la présentation
et au comportement cohérents. L’architecture version 2 inclut des classes sur lesquelles sont
basés tous les composants, des styles et des mécanismes d’enveloppe qui vous permettent de
personnaliser l’aspect des composants, un modèle d’événement diffuseur/écouteur, la gestion
de la profondeur et du focus, la mise en œuvre de l’accessibilité et bien d’autres avantages.
R EM A R QU E
Si vous publiez les composants de la version 2, vous devez définir vos paramètres de
publication pour ActionScript 2.0 (Fichier > Paramètres de publication, onglet Flash).
Les composants de la version 2 ne fonctionnent pas correctement s’ils sont publiés en
utilisant ActionScript 1.0.
Tous les composants contiennent des paramètres prédéfinis que vous pouvez configurer lors
de la création dans Flash. Chaque composant possède également un jeu unique de méthodes,
de propriétés et d’événements ActionScript, également appelé API (interface de
programmation), qui permet de définir les paramètres et d’autres options à l’exécution.
11
Pour obtenir la liste complète des composants inclus dans Flash Basic 8 et Flash Professionnel
8, consultez la section Installation des composants, page 12. Vous pouvez également télécharger
des composants développés par des membres de la communauté Flash à l’adresse
www.macromedia.com/fr/exchange.
Ce chapitre contient les sections suivantes :
Installation des composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Emplacement de stockage des fichiers de composants . . . . . . . . . . . . . . . . . . . . . . . 14
Modification des fichiers du composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Avantages des composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Composant, catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17
Présentation de l’architecture des composants de la version 2. . . . . . . . . . . . . . . . . 18
Fonctions du composant de la version 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Présentation des clips compilés et des fichiers SWC . . . . . . . . . . . . . . . . . . . . . . . . . 21
Accessibilité et composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Installation des composants
Un jeu de composants Macromedia est déjà installé lorsque vous lancez Flash pour la première
fois. Vous pouvez les visualiser dans le panneau Composants.
Flash Basic 8 inclut les composants suivants :
■
Composant Button
■
Composant CheckBox
■
Composant ComboBox
■
Composant Label
■
Composant List
■
Composant Loader
■
Composant NumericStepper
■
Composant ProgressBar
■
Composant RadioButton
■
Composant ScrollPane
■
Composant TextArea
■
Composant TextInput
■
Composant Window
12
Composants
Flash Professionnel 8 inclut les composants de Flash Basic 8, plus les classes et composants
suivants :
■
Composant Accordion (Flash Professionnel uniquement)
■
Composant Alert (Flash Professionnel uniquement)
■
Classes de liaison des données (Flash Professionnel uniquement)
■
Composant DateField (Flash Professionnel uniquement)
■
Composant DataGrid (Flash Professionnel uniquement)
■
Composant DataHolder (Flash Professionnel uniquement)
■
Composant DataSet (Flash Professionnel uniquement)
■
Composant DateChooser (Flash Professionnel uniquement)
■
Composant FLVPlayback (Flash Professionnel uniquement)
■
Classe Form (Flash Professionnel uniquement)
■
Composants médias (Flash Professionnel uniquement)
■
Composant Menu (Flash Professionnel uniquement)
■
Composant MenuBar (Flash Professionnel uniquement)
■
Composant RDBMSResolver (Flash Professionnel uniquement)
■
Classe Screen (Flash Professionnel uniquement)
■
Classe Slide (Flash Professionnel uniquement)
■
Composant Tree (Flash Professionnel uniquement)
■
Composant WebServiceConnector (Flash Professionnel uniquement)
■
Composant XMLConnector (Flash Professionnel uniquement)
■
Composant XUpdateResolver (Flash Professionnel uniquement)
Pour afficher les composants Flash Basic 8 ou Flash Professionnel 8 :
1.
Démarrez Flash.
2.
Sélectionnez Fenêtre > Composants pour ouvrir le panneau Composants s’il n’est pas déjà
visible.
3.
Choisissez User Interface (Interface utilisateur) pour développer l’arborescence et faire
apparaître tous les composants installés.
Vous pouvez également télécharger des composants à l’adresse www.macromedia.com/fr/
exchange. Pour installer des composants téléchargés à partir du site d’échange, téléchargez et
installez Macromedia Extension Manager à l’adresse www.macromedia.com/fr/exchange/
em_download/ .
Tous les composants doivent apparaître dans le panneau Composants de Flash. Pour installer
les composants sur un ordinateur Windows ou Macintosh, respectez la procédure suivante.
Installation des composants
13
Pour installer des composants sur un ordinateur Windows ou Macintosh :
1.
Fermez Flash.
2.
Placez le fichier SWC ou FLA contenant le composant dans le dossier suivant de votre
disque dur :
■
■
Sous Windows : C:\Program Files\Macromedia\Flash
8\langue\Configuration\Components
Sous Macintosh : Macintosh HD/Applications/Macromedia Flash 8/Configuration/
Components (Macintosh)
3.
Démarrez Flash.
4.
Choisissez Fenêtre > Composants pour visualiser le composant dans le panneau
Composants s’il n’est pas déjà ouvert.
Emplacement de stockage des fichiers
de composants
Les composants Flash sont stockés dans le dossier Configuration au niveau de l’application.
R E MA R Q UE
Po u r plu s d ’ in fo rm a t io ns s u r c e s d o s s ie r s , r e po r t e z- vo u s à Dossiers de
configuration installés avec Flash du gu i de Bien démarrer avec Flash.
Les composants sont installés dans les emplacements suivants :
■
Windows 2000 ou Windows XP : C:\Program Files\Macromedia\Flash
8\langue\Configuration\Components
■
Mac OS X : Macintosh HD/Applications/Macromedia Flash 8/Configuration/
Components
14
Composants
Modification des fichiers du composant
Les fichiers sources ActionScript des composants sont placés dans :
■
Windows 2000 ou Windows XP : C:\Program Files\Macromedia\Flash 8\language\First
Run\Classes\mx
■
Mac OS X : Macintosh HD/Applications/Macromedia Flash 8/First Run/Classes/mx
Les fichiers du répertoire First Run sont copiés dans votre chemin Documents and Settings
lorsque Flash est lancé pour la première fois. Les chemins Documents and Settings sont les
suivants :
■
Windows 2000 ou Windows XP : C:\Documents and Settings\nom d’utilisateur\Local
settings\Application Data\Macromedia\Flash 8\langue\Configuration\Classes\mx.
■
Mac OS X : Nom d’utilisateur/Library/Application Support/Macromedia/Flash 8/langue/
Configuration/Classes/mx
Lorsque Flash est lancé, si un fichier est manquant dans le chemin Document and Settings,
Flash le recopie du répertoire First Run dans votre chemin Documents and Settings.
R E MA R Q UE
Si vous souhaitez modifier les fichiers sources ActionScript, modifiez ceux qui se trouvent
dans le chemin Documents and Settings. Si l’une de vos modifications « rompt » un
composant, Flash restaure la fonctionnalité d’origine lorsque vous fermez et relancez
Flash en copiant le fichier fonctionnel à partir du répertoire First Run. Dès que vous
modifiez les fichiers dans le répertoire First run et que cela « rompt » un composant, vous
devez réinstaller Flash pour restaurer les fichiers sources en fichiers fonctionnels.
Si vous avez ajouté des composants, actualisez l’affichage du panneau Composants.
Pour actualiser le contenu du panneau Composants :
■
Dans le menu du panneau Composants, choisissez Recharger.
Pour supprimer un composant dans le panneau Composants :
■
Supprimez le fichier MXP ou FLA dans le dossier Configuration.
Modification des fichiers du composant
15
Avantages des composants
Les composants vous permettent de séparer le processus de conception de votre application du
processus de codage. Ils permettent également de réutiliser du code, soit dans les composants
que vous avez créés, soit en téléchargeant et en installant des composants créés par
d’autres développeurs.
Les composants permettent aux programmeurs de créer des fonctionnalités que les
concepteurs pourront exploiter dans les applications. Les développeurs peuvent encapsuler les
fonctionnalités fréquemment utilisées dans des composants. Les concepteurs peuvent, quant à
eux, personnaliser l’apparence et le comportement de ces composants en modifiant leurs
paramètres dans l’inspecteur des propriétés ou dans l’inspecteur de composants.
Les développeurs Flash peuvent utiliser Macromedia Exchange sur le site
www.macromedia.com/go/exchange_fr pour échanger des composants. Grâce aux
composants, vous pouvez créer une application web complexe sans être obligé de développer
entièrement chaque élément. Vous pouvez localiser les composants requis et les placer dans un
document Flash pour créer une nouvelle application.
Les composants basés sur l’architecture version 2 partagent les mêmes fonctionnalités de base :
styles, traitement des événements, application d’enveloppes, gestion du focus et de la
profondeur. Lorsque vous ajoutez le premier composant version 2 dans une application,
environ 25 Ko sont ajoutés au document qui fournit ces fonctionnalités de base. Lorsque vous
ajoutez des composants supplémentaires, ces mêmes 25 Ko sont réutilisés pour eux. La taille
du document augmente donc moins que vous n’auriez pu l’imaginer. Pour plus
d’informations sur la mise à niveau des composants, consultez Migration des composants de la
version 1 vers l’architecture de la version 2, page 68.
16
Composants
Composant, catégories
Les composants inclus dans Flash sont divisés en cinq catégories (les emplacements de leurs
fichiers ActionScript source correspondent approximativement à ces catégories et sont
énumérés entre parenthèses) :
■
Composants de données (mx.data.*)
Ces composants permettent de charger et de manipuler des informations provenant de
sources de données. Les composants WebServiceConnector et XMLConnector sont des
composants de données.
R E MA R Q UE
■
Les fichiers source des composants de données ne sont pas installés avec Flash.
Toutefois, certains des fichiers de prise en charge ActionScript le sont.
Composant FLVPlayback (mx.video.FLVPlayback)
Le composant FLVPlayback vous permet d’inclure un lecteur vidéo dans votre application
Flash afin de lire de la vidéo progressive en continu sur HTTP depuis un service FVSS
(Flash Video Streaming Service - service de diffusion en continu des vidéos de Flash) ou
FCS (Flash Communication server).
■
Composants de support (mx.controls.*)
Ces composants permettent de lire et de contrôler le support en flux continu.
MediaController, MediaPlayback et MediaDisplay sont des composants de support.
■
Composants de l’interface utilisateur (mx.controls.*)
Ces composants (souvent appelés composants de l’interface) permettent à l’utilisateur
d’interagir avec une application. Par exemple, les composants RadioButton, CheckBox et
TextInput sont des contrôles de l’interface utilisateur.
■
Gestionnaires (mx.managers.*)
Ces composants sont invisibles et permettent de gérer une fonction, telle que le focus ou la
profondeur, dans une application. Les composants FocusManager, DepthManager,
PopUpManager, StyleManager et SystemManager sont des composants gestionnaires.
■
Ecrans (mx.screens.*)
La catégorie Ecrans inclut les classes ActionScript qui vous permettent de contrôler les
formulaires et les diapositives dans Flash.
Pour obtenir une liste complète de composants, reportez-vous à Référence du langage des
composants.
Composant, catégories
17
Présentation de l’architecture des
composants de la version 2
Vous pouvez utiliser l’inspecteur des propriétés ou l’inspecteur de composants pour modifier
les paramètres des composants afin d’exploiter leurs fonctionnalités de base. Cependant, si
vous souhaitez contrôler davantage le fonctionnement des composants, vous devez utiliser
leurs API et comprendre la façon dont ils ont été créés.
Les composants Flash sont basés sur la version 2 de l’architecture des composants
Macromedia. Les composants de la version 2 sont supportés par Flash Player 6 (6.0.79.0) et
une version ultérieure et par ActionScript 2.0. Ces composants ne sont pas toujours
compatibles avec les composants basés sur la version 1 de l’architecture (tous les composants
antérieurs à Flash MX 2004). Les composants version 1 originaux ne sont pas non plus pris en
charge par Flash Player 7. Pour plus d’informations, consultez Migration des composants de la
version 1 vers l’architecture de la version 2, page 68.
R E MA R Q UE
Les composants Flash MX UI ont été mis à jour pour utiliser Flash Player 7 ou une
version ultérieure. Ces composants mis à jour sont toujours basés sur la version 1 de
l’architecture. Vous pouvez les télécharger à partir de Macromedia Flash Exchange sur
le site www.macromedia.com/go/v1_components.
Les composants version 2 apparaissent dans le panneau Composants sous forme de symboles
Clip compilé (SWC). Un clip compilé est un clip composant dont le code a été compilé. Les
clips compilés ne peuvent pas être modifiés. Cependant, comme pour les autres composants, il
est possible de changer leurs paramètres dans l’inspecteur des propriétés et dans l’inspecteur
des composants. Pour plus d’informations, reportez-vous à Présentation des clips compilés et des
fichiers SWC, page 21.
Les composants version 2 sont rédigés en langage ActionScript 2.0. Chaque composant est
une classe et chaque classe est un paquet ActionScript. Par exemple, un composant de bouton
radio est une occurrence de la classe RadioButton dont le nom de paquet est mx.controls.
Pour plus d’informations sur les paquets, reportez-vous à la section Présentation des packages
du guide Formation à ActionScript 2.0 dans Flash.
18
Composants
La plupart des composants d’interface utilisateur créés avec la version 2 de l’architecture
Macromedia sont des sous-classes des classes UIObject et UIComponent et héritent de tous
leurs événements, propriétés et méthodes. De nombreux composants sont également des
sous-classes d’autres composants. Le chemin de l’héritage de chaque composant est indiqué à
l’entrée correspondante du guide Référence du langage des composants.
R EM A R QU E
La hiérarchie de classe est également disponible sous forme de fichier FlashPaper dans
l’emplacement d’installation : Flash 8\Samples and
Tutorials\Samples\Components\arch_diagram.swf.
Tous les composants utilisent également le même modèle d’événement, les mêmes styles CSS
et les mêmes mécanismes intégrés d’application d’enveloppes et de thèmes. Pour plus
d’informations sur les styles et l’application des enveloppes, consultez le
Chapitre 5, Personnalisation des composants, page 85. Pour plus d’informations sur la gestion
des événements, consultez le Chapitre 3, Utilisation des composants, page 53.
Pour une description détaillée de l’architecture des composants de la version 2, consultez le
Chapitre 6, Création de composants, page 135.
Fonctions du composant de la version 2
Cette section décrit les fonctions des composants de la version 2 (comparé aux composants de
la version 1) du point de vue d’un développeur qui les utilise pour élaborer des applications
Flash. Pour plus d’informations sur les différences entre les architectures des versions 1 et 2
pour le développement de composants, consultez le Chapitre 6, Création de composants,
page 135.
L’inspecteur de composants permet de modifier les paramètres des composants pendant la
programmation dans Macromedia Flash et Macromedia Dreamweaver. (Voir la section
Définition des paramètres des composants, page 59.)
permet aux écouteurs de gérer les événements. (Voir la
section Chapitre 4, Gestion des événements des composants, page 69.) Contrairement à
Flash MX, Flash ne contient pas de paramètre clickHandler dans l’inspecteur des propriétés.
La gestion des événements implique donc l’écriture de code ActionScript.
Le modèle d’événement écouteur
Les propriétés des enveloppes permettent
de charger des habillages individuels (par
exemple, des flèches vers le haut ou vers le bas ou la coche d’une case à cocher) au moment de
l’exécution. (Voir la section A propos de l’application d’enveloppes aux composants, page 101.)
Fonctions du composant de la version 2
19
Les styles CSS permettent d’obtenir une apparence identique dans toutes les applications.
(Voir la section Utilisation de styles pour personnaliser la couleur et le texte des composants,
page 86.)
Les thèmes permettent d’appliquer à un jeu de composants une apparence préconçue
prélevée dans la bibliothèque. (Voir la section Présentation des thèmes, page 116.)
est le thème par défaut utilisé par les composants de la version 2. (Voir la
section Présentation des thèmes, page 116.)
Le thème Halo
Les classes Manager fournissent un moyen
aisé de traiter le focus et la profondeur dans une
application. (VoirCréation de la navigation personnalisée du focus, page 63 et Gestion de la
profondeur des composants dans un document, page 64.)
Les classes de base UIObject et UIComponent fournissent les méthodes, les propriétés et
les événements élémentaires aux composants et étendent leurs fonctions. (Voir Classe
UIComponent et Classe UIObject dans Référence du langage des composants.)
facilite la distribution et l’utilisation d’un code dissimulable.
Voir Chapitre 6, Création de composants, page 135.
Le format de fichier SWC
La fonction intégrée de liaison des données est
accessible dans l’inspecteur de composants.
Pour plus d’informations, reportez-vous à la section Intégration des données (Flash Professionnel
uniquement) du guide Utilisation de Flash.
Une hiérarchie des classes facilement extensible avec ActionScript 2.0 permet de créer des
espaces de nom uniques et d’importer des classes si nécessaire et des sous-classes afin d’étendre
les fonctionnalités des composants. Voir Chapitre 6, Création de composants, page 135 et
Guide de référence du langage ActionScript 2.0.
R E MA R Q UE
20
Flash 8 possède plusieurs fonctions non supportées par les composants de la v2, y
compris la mise en cache à 9 découpes (parfois appelée Echelle 9), FlashType et de
bitmaps.
Composants
Présentation des clips compilés et des
fichiers SWC
Un clip compilé est un ensemble de symboles Flash précompilés et de code ActionScript. Il
permet d’éviter une nouvelle compilation des symboles et du code qui ne sont pas appelés à
être modifiés. Un clip peut également être « compilé » dans Flash et converti en symbole Clip
compilé. Il est par exemple possible de transformer en clip compilé un clip contenant un
volume important de code ActionScript qui ne change pas souvent. Le clip compilé se
comporte exactement comme le clip à partir duquel il a été compilé, mais les clips compilés
sont affichés et publiés beaucoup plus vite que les clips normaux. Les clips compilés ne
peuvent pas être modifiés, mais ils possèdent des propriétés qui apparaissent dans l’inspecteur
des propriétés et l’inspecteur des composants.
Les composants inclus dans Flash ne sont pas des fichiers FLA mais des clips compilés inclus
dans des fichiers (SWC) de clip compilé. SWC est le format de fichier que Macromedia utilise
pour les composants. Il contient un clip compilé, le fichier de classe ActionScript du
composant et d’autres fichiers qui décrivent ce dernier. Pour plus d’informations sur les
fichiers SWC, consultez la section Exportation et distribution d’un composant, page 197.
Lorsque vous placez un fichier SWC dans le dossier First Run/Components, le composant
apparaît dans le panneau Composants. Lorsque vous ajoutez un composant sur la scène à
partir du panneau Composants, le symbole d’un clip compilé est ajouté dans la bibliothèque.
Pour compiler un clip :
■
Dans le panneau Bibliothèque, cliquez sur le clip du bouton droit (Windows) ou avec la
touche Contrôle enfoncée (Macintosh), puis choisissez Convertir en clip compilé.
Pour exporter un fichier SWC :
■
Choisissez le clip dans le panneau Bibliothèque et cliquez du bouton droit (Windows) ou
maintenez la touche Contrôle enfoncée (Macintosh), puis sélectionnez Exporter le fichier
SWC.
R EM A R QU E
Flash Basic 8 et Flash Professionnel 8 continuent à supporter les composants FLA.
Présentation des clips compilés et des fichiers SWC
21
Accessibilité et composants
Le contenu publié sur le web est accessible à partir des quatre coins de la planète, il devrait
donc l’être également pour les personnes souffrant de divers handicaps. Le contenu visible des
animations Flash peut être rendu accessible aux personnes souffrant de handicaps visuels à
l’aide d’un logiciel de lecture des descriptions audio du contenu de l’écran.
Lors de la création d’un composant, l’auteur peut rédiger du code ActionScript destiné à
permettre la communication entre le composant et un lecteur d’écran. Lorsqu’un développeur
utilise ce composant pour créer une application dans Flash, il utilise le panneau Accessibilité
pour configurer toutes les occurrences des composants.
La plupart des composants créés par Macromedia intègrent l’accessibilité. Pour savoir si un
composant est accessible, reportez-vous à son entrée dans le guide Référence du langage des
composants. Lorsque vous créez une application dans Flash, vous devez ajouter une ligne de
code pour chaque composant
(mx.accessibility.ComponentNameAccImpl.enableAccessibility();) et définir ses
paramètres d’accessibilité dans le panneau Accessibilité. L’accessibilité fonctionne de la même
manière pour les composants que pour les autres clips Flash.
Vous pouvez également utiliser le clavier pour accéder à la plupart des composants créés par
Macromedia. Chaque entrée de composant du Référence du langage des composants indique si
vous pouvez ou non les contrôler le composant à l’aide du clavier.
22
Composants
CHAPITRE 2
2
Création d’une application avec composants
(Flash Professionnel uniquement)
Les composants de Flash sont des éléments prédéfinis et prêts à l’emploi pour créer des
applications Macromedia Flash. Ils comprennent des contrôles de l’interface utilisateur, des
mécanismes de connectivité et d’accès aux données et des éléments multimédia. Ils vous
permettent de gagner du temps lors du développement d’une application Flash en vous
fournissant les éléments et le comportement dont vous auriez autrement besoin si vous la
créiez entièrement.
Ce chapitre propose un didacticiel qui vous guide dans la procédure de création d’une
application Flash à l’aide des composants disponibles dans Macromedia Flash Professionnel 8.
Vous apprendrez à utiliser les composants dans l’environnement de programmation de Flash
et à les rendre interactifs avec le code ActionScript.
Présentation du didacticiel Fix Your
Mistake (Faites-vous pardonner)
Ce didacticiel vous guide dans la procédure de création d’une application d’achat en ligne de
base pour le service cadeaux « Fix Your Mistake » (Faites-vous pardonner), qui aide les
utilisateurs à choisir un présent approprié lorsqu’ils doivent s’excuser auprès d’une personne
qu’ils ont blessée. L’application filtre une liste de cadeaux en fonction des choix correspondant
à la gravité de l’offense de l’utilisateur. L’utilisateur peut utiliser cette liste pour ajouter des
articles au panier d’achat et passer ensuite à la page de paiement pour les informations de
facturation, d’expédition et de carte bancaire.
Ce chapitre contient les sections suivantes :
Présentation du didacticiel Fix Your Mistake (Faites-vous pardonner) . . . . . . . . . . 23
Création de la page principale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Liaison des composants de données pour afficher les idées de cadeaux . . . . . . . . 31
Affichage des détails des cadeaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Création de l’écran de règlement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Test de l’application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
23
Affichage de l’application terminée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
L’application utilise, entre autres, les composants ComboBox, DataGrid, TextArea et Button
pour créer l’interface de l’application. La page principale de l’interface a l’aspect suivant :
L’application utilise la classe ActionScript WebService pour se connecter dynamiquement à un
service Web et récupérer la liste des offenses (problems.xml) qui apparaissent dans la liste
déroulante. Elle utilise également ActionScript pour gérer les interactions de l’utilisateur avec
l’application.
L’application utilise des composants de données pour connecter l’interface à une autre source
de données. Elle utilise le composant XMLConnector pour se connecter à un fichier de
données XML (products.xml) pour la liste des cadeaux et utilise le composant DataSet pour
filtrer les données et les présenter à la grille de données.
Le didacticiel exige une certaine connaissance de l’environnement de programmation de Flash
et une certaine maîtrise d’ActionScript. Dans cet environnement auteur, vous devez savoir
utiliser les panneaux, les outils, le scénario et la bibliothèque. Le code ActionScript nécessaire
à la création de l’exemple d’application est fourni avec ce didacticiel. Toutefois, pour bien
comprendre les concepts de développement de scripts et créer votre propre application, vous
devez avoir une certaine expérience de la rédaction de code ActionScript.
Consultez la section Affichage de l’application terminée, page 52 pour afficher une version de
l’application terminée.
N’oubliez pas que l’exemple d’application n’existe qu’à titre de démonstration et que, par
conséquent, il n’est pas aussi complet qu’une application réelle.
24
Création d’une application avec composants (Flash Professionnel uniquement)
Création de la page principale
Suivez les étapes ci-dessous pour créer la page principale de l’application en ajoutant des
composants à une page de démarrage schématique. Ajoutez ensuite le code ActionScript pour
personnaliser les composants, importez les classes ActionScript qui vous permettent de
manipuler les composants de l’application et accédez à un service Web pour alimenter la liste
déroulante avec une liste d’offenses. Le code alimente la liste déroulante en définissant sa
propriété dataProvider de façon à ce qu’elle reçoive les résultats du service Web.
1.
Ouvrez le fichier first_app_start.fla qui se trouve dans l’un des emplacements suivants :
■
■
Sous Windows : lecteur d’installation :\Program Files\Macromedia\Flash 8\Samples
and Tutorials\Samples\Components\ComponentsApplication
Sous Macintosh : disque dur Macintosh/Applications/Macromedia Flash 8/Samples
and Tutorials/Samples/Components/ComponentsApplication
Le fichier contient une page de démarrage ayant l’aspect suivant :
Le fichier start_app.fla contient trois calques : un calque d’arrière-plan contenant l’image
d’arrière-plan noire et les titres du texte, un calque de texte contenant les étiquettes de
texte des sections de l’application et un calque d’étiquettes contenant les étiquettes de la
première image (Home) et de la dixième (Checkout).
Création de la page principale
25
2.
Sélectionnez Fichier > Enregistrer sous. Renommez le fichier et enregistrez-le sur votre
disque dur.
3.
Dans le scénario, sélectionnez le calque Labels, puis cliquez sur le bouton Insérer un calque
pour ajouter un nouveau calque au-dessus. Nommez le nouveau calque Form. Vous allez
placer les occurrences de composant dans ce calque.
4.
Assurez-vous que le calque Form est sélectionné. Dans le panneau Composants (Fenêtre >
Composants), localisez le composant ComboBox dans l’arborescence Interface utilisateur.
Faites glisser une occurrence de ComboBox et déposez-la sur la scène. Placez-la sous le texte
« What Did You Do? ». Dans l’inspecteur des propriétés (Fenêtre > Propriétés >
Propriétés), entrez problems_cb pour l’occurence. Entrez 400 (pixels) pour la largeur.
Entrez 76.0 pour l’emplacement x et 82.0 pour l’emplacement y.
R E MA R QU E
Le symbole du composant ComboBox a été ajouté à la bibliothèque (Fenêtre >
Bibliothèque). Lorsque vous déposez une occurrence de composant sur la scène, le
symbole de son clip compilé est automatiquement ajouté à la bibliothèque. Comme
pour tous les symboles de Flash, vous pouvez créer d’autres occurrences de ce
composant en glissant/déposant son symbole de la bibliothèque sur la scène.
5.
Faites glisser une occurrence de composant DataGrid provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la sur la scène. Placez-la sous le texte Gift
Ideas. Nommez l’occurrence products_dg. Entrez 400 (pixels) pour la largeur et 130 pour
la hauteur. Entrez 76.0 pour l’emplacement x et 128,0 pour l’emplacement y.
6.
Faites glisser une occurrence du composant DataSet issu de l’arboresence Données du
panneau Composants vers le bord de la scène. (Le composant DataSet ne s’affiche pas dans
l’application lors de l’exécution. L’icône DataSet n’est qu’un espace réservé dont vous
pouvez vous servir dans l’environnement auteur de Flash.) Nommez l’occurrence
products_ds.
26
Création d’une application avec composants (Flash Professionnel uniquement)
Faites glisser une occurrence du composant XMLConnector issu de l’arboresence Données du
panneau Composants vers le bord de la scène. (Comme le composant DataSet, le composant
XMLConnector n’apparaît pas dans l’application au moment de l’exécution.) Nommez
l’occurrence products_xmlcon. Cliquez sur l’onglet Paramètres de l’Inspecteur des propriétés
et entrez www.flash-mx.com/mm/firstapp/products.xml pour la propriété URL. Cliquez sur la
valeur pour que la propriété de direction active la liste déroulante puis cliquez sur la flèche vers
le bas et sélectionnez receive dans la liste.
R E MA R Q UE
Vous pouvez également utiliser l’inspecteur de composants (Fenêtre > Inspecteur de
composants) pour définir les paramètres des composants. Les onglets Paramètres
de l’inspecteur des propriétés et de l’inspecteur de composants fonctionnent de la
même manière.
L’URL désigne un fichier XML externe contenant des renseignements sur les produits qui
apparaissent dans la section Gift Ideas de l’application. Dans la suite de ce didacticiel, vous
utiliserez la liaison de données pour relier les composants XMLConnector, DataSet et
DataGrid. Le composant DataSet filtrera les données du fichier XML externe et le
composant DataGrid les affichera.
7.
Faites glisser une occurrence de composant Bouton provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la sur la scène. Placez-la dans le coin
inférieur droit. Nommez l’occurrence checkout_button. Cliquez sur l’onglet Paramètres et
entrez Checkout pour la propriété label. Pour les coordonnées x et y, entrez
respectivement 560.3 et 386.0.
Importation des classes de composants
Chaque composant est associé à un fichier de classe ActionScript qui définit ses méthodes et
ses propriétés. Dans cette section du didacticiel, vous ajouterez du code ActionScript pour
importer les classes associées aux composants de l’application. Vous avez déjà ajouté des
occurrences de certains de ces composants sur la scène. Pour d’autres, vous ajouterez du code
ActionScript ultérieurement dans ce didacticiel afin de créer des occurrences de manière
dynamique.
L’instruction d’importation crée une référence au nom de classe et facilite la rédaction
d’instructions ActionScript pour le composant. Elle vous permet de vous référer à la classe
simplement par son nom de classe au lieu de son nom complet, qui inclut le nom du paquet.
Par exemple, si vous référencez le fichier de classe ComboBox avec une instruction
d’importation, vous pouvez ensuite faire référence aux occurrences ComboBox avec la syntaxe
instanceName:ComboBox au lieu de instanceName:mx.controls.ComboBox.
Création de la page principale
27
Un paquet est un répertoire qui contient des fichiers de classe et qui réside dans un chemin de
répertoire de classe prédéfini. Pour référencer toutes les classes dans un paquet, vous pouvez
utiliser un caractère générique : par exemple, la syntaxe mx.controls.* référence toutes les
classes dans le paquet de contrôles. (Lorsque vous référencez un paquet à l’aide d’un caractère
générique, les classes non utilisées sont ignorées lors de la compilation de l’application et ne
prennent donc pas de place supplémentaire.)
Pour l’application de ce didacticiel, vous avez besoin des paquets et des classes individuelles
suivants :
Ce paquet contient les classes
des composants de contrôle de l’interface utilisateur : ComboBox, DataGrid, Loader,
TextInput, Label, NumericStepper, Button et CheckBox.
Paquet Contrôles de composants d’interface utilisateur
Ce paquet contient les classes
des composants conteneurs de l’interface utilisateur : Accordion, ScrollPane et Window.
Comme pour le paquet de contrôles, vous pouvez référencer ce paquet à l’aide d’un caractère
générique.
Paquet Conteneurs de composants d’interface utilisateur
Classe DataGridColumn Cette classe permet d’ajouter des colonnes à l’occurrence
DataGrid et de contrôler leur apparence.
Cette classe alimente l’occurrence ComboBox à l’aide d’une liste de
problèmes ou d’offenses. Dans le cas de cette classe, vous devez également importer l’élément
WebServiceClasses depuis la bibliothèque commune Classes. Cet élément contient des clips
compilés (fichiers SWC) qui vous serviront à compiler et générer le fichier SWF de votre
application.
Classe WebService
Classe Cart Classe personnalisée fournie avec ce didacticiel et qui définit le fonctionnement
du panier que vous créerez ultérieurement. (Pour examiner le code du fichier de classe Cart,
ouvrez le fichier cart.as situé dans le dossier component_application avec les fichiers FLA et
SWF de l’application).
Pour importer ces classes, vous allez maintenant créer un calque Actions et ajouter le code
ActionScript à la première image du scénario principal. Tout le code que vous ajoutez à
l’application au cours des étapes restantes du didacticiel doit être placé dans le calque Actions.
1.
Pour importer l’élément WebServiceClasses de la bibliothèque Classes, choisissez Fenêtre >
Bibliothèques communes > Classes.
2.
Faites glisser l’élément WebServiceClasses de la bibliothèque Classes vers la bibliothèque de
l’application.
L’importation d’un élément depuis la bibliothèque Classes est similaire à l’ajout d’un
composant dans la bibliothèque : l’opération ajoute les fichiers SWC de la classe dans la
bibliothèque. Ces fichiers SWC doivent être présents dans la bibliothèque pour que vous
puissiez utiliser la classe dans une application.
28
Création d’une application avec composants (Flash Professionnel uniquement)
3.
Dans le scénario, sélectionnez le calque Form, puis cliquez sur le bouton Insérer un calque.
Nommez le nouveau calque Actions.
4.
Sélectionnez le calque Actions, puis Image 1 et appuyez sur la touche F9 pour ouvrir le
panneau Actions.
5.
Dans le panneau Actions, entrez le code suivant pour créer une fonction stop() qui
empêchera toute lecture en boucle de l’application :
stop();
6.
L’Image 1 du calque Actions étant toujours sélectionnée, insérez le code suivant dans le
panneau Actions pour importer les classes :
// Importation des classes nécessaires.
import mx.services.WebService;
import mx.controls.*;
import mx.containers.*;
import mx.controls.gridclasses.DataGridColumn;
// Importation de la classe personnalisée Cart.
import Cart;
Définition des types de données des occurrences de
composants
Vous allez à présent affecter des types de données à chacune des occurrences de composants
déposées précédemment sur la scène au cours du didacticiel.
ActionScript 2.0 utilise un typage strict des données, c’est-à-dire que vous affectez un type de
données à chaque création de variable. Ce typage strict des données rend accessibles les
conseils de code des variables dans le panneau Actions.
■
Dans le panneau Actions, ajoutez le code suivant pour affecter des types de données aux
quatre occurrences de composants déjà créées.
/* Occurrences de types de données sur la scène ; il est possible que
d’autres occurrences soient ajoutées depuis la classe Cart.*/
var problems_cb:ComboBox;
var products_dg:DataGrid;
var cart_dg:DataGrid;
var products_xmlcon:mx.data.components.XMLConnector;
R E MA R Q UE
Les noms des occurrences que vous indiquez ici doivent correspondre à ceux que
vous avez affectés lorsque vous avez déposé les composants sur la scène.
Création de la page principale
29
Personnalisation de l’aspect des composants
Chaque composant possède des méthodes et des propriétés de style qui vous permettent de
personnaliser son apparence, par exemple en modifiant la couleur de surbrillance, la police et
la taille de police. Vous pouvez définir des styles pour chaque occurrence individuelle ou les
appliquer globalement à toutes les occurrences des composants d’une application. Dans ce
didacticiel, vous allez définir des styles généraux.
■
Pour définir des styles, ajoutez le code suivant :
// Définition de styles généraux et équations d’accélération du
composant ComboBox problems_cb.
_global.style.setStyle("themeColor", "haloBlue");
_global.style.setStyle("fontFamily", "Verdana");
_global.style.setStyle("fontSize", 10);
_global.style.setStyle("openEasing",
mx.transitions.easing.Bounce.easeOut);
Ce code définit une couleur de thème (la couleur de surbrillance d’un élément
sélectionné), la police et la taille de police des composants, ainsi que l’accélération du
composant ComboBox (mode d’apparition/disparition de la liste déroulante lorsque vous
cliquez sur la barre de titre du composant ComboBox).
Affichage d’offenses dans la liste déroulante
Dans cette section, vous allez ajouter du code pour vous connecter à un service Web
contenant la liste des offenses (Forgot to Water Your Plants, etc.). Le fichier WSDL
(Web Service Description Language) est situé à l’adresse www.flash-mx.com/mm/
firstapp/problems.cfc?WSDL. Pour découvrir la structure du fichier WSDL, allez à son
adresse URL avec votre navigateur.
Le code ActionScript transmet les résultats du service Web à l’occurrence ComboBox pour
l’affichage. Une fonction trie les offenses selon leur gravité. Lorsque le service Web ne renvoie
aucun résultat (par exemple, s’il n’est pas disponible ou si la fonction est introuvable), un
message d’erreur s’affiche dans le panneau de sortie.
■
Dans le panneau Actions, ajoutez le code suivant :
/* Définissez le service Web utilisé pour récupérer la table des
problèmes.
Ce service sera lié à l’occurrence du composant ComboBox problems_cb. */
var problemService:WebService = new WebService("http://www.flash-mx.com/
mm/firstapp/problems.cfc?WSDL");
var myProblems:Object = problemService.getProblems();
/* Si le service Web renvoie un résultat, définissez le champ qui recevra
le titre de la colonne.
30
Création d’une application avec composants (Flash Professionnel uniquement)
Affectez les résultats renvoyés par le service Web au fournisseur de
données. */
myProblems.onResult = function(wsdlResults:Array) {
problems_cb.labelField = "name";
problems_cb.dataProvider = wsdlResults.sortOn("severity",
Array.NUMERIC);
};
/* Si la connexion au service Web distant est impossible, affichez les
messages d’erreur dans le panneau de sortie. */
myProblems.onFault = function(error:Object) {
trace("error:");
for (var prop in error) {
trace(" "+prop+" -> "+error[prop]);
}
};
CONSEIL
Appuyez sur Ctrl+S pour enregistrer votre travail, puis sur Ctrl+Entrée (ou choisissez
Contrôle-> Tester l’animation) pour tester l’application. A ce stade, la liste déroulante
devrait être alimentée avec une liste d’offenses et vous devriez voir la grille de
données vide que vous avez créée pour Gift Ideas ainsi que le bouton Checkout.
Liaison des composants de données
pour afficher les idées de cadeaux
Au début du didacticiel, vous avez ajouté des occurrences des composants DataGrid, DataSet
et XMLConnector sur la scène. Vous avez défini la propriété URL de l’occurrence du
composant XMLConnector (nommé products_xmlcon) en fonction de l’emplacement d’un
fichier XML contenant les informations sur les produits de la section Gift Ideas de
l’application.
A présent, vous allez utiliser les fonctions de liaison de données de l’environnement de
programmation de Flash pour relier les composants XMLConnector, DataSet et DataGrid
entre eux et utiliser les données XML dans l’application. Pour obtenir des informations
générales sur l’utilisation des fonctions de liaison et d’autres fonctions de l’architecture
d’intégration de données Flash, consultez le Chapitre 16, Intégration des données (Flash
Professionnel uniquement) du guide Utilisation de Flash.
Lorsque vous liez les composants, le composant DataSet filtre la liste des produits du fichier
XML en fonction du degré de gravité de l’offense sélectionnée par l’utilisateur dans la section
What Did You Do?. Le composant DataGrid est chargé d’afficher la liste.
Liaison des composants de données pour afficher les idées de cadeaux
31
Utilisation d’un schéma pour décrire la source de
données XML
Lorsque vous vous connectez à une source de données XML externe via le composant
XMLConnector, vous devez définir un schéma, représentation schématique décrivant la
structure du document XML. Le schéma indique au composant XMLConnector comment
lire la source de données XML. Le moyen le plus simple pour définir un schéma consiste à
importer une copie du fichier XML concerné, puis d’utiliser cette copie comme schéma.
1.
Ouvrez votre navigateur Web et accédez à l’adresse www.flash-mx.com/mm/firstapp/
products.xml (emplacement défini pour le paramètre URL du composant
XMLConnector).
2.
Sélectionnez Fichier > Enregistrer sous.
3.
Enregistrez le fichier products.xml dans le même emplacement que le fichier FLA avec
lequel vous travaillez.
4.
Dans le scénario principal, sélectionnez Image 1.
5.
Sélectionnez l’occurrence products_xmlcon (XMLConnector) à côté de la scène.
6.
Dans l’inspecteur de composants, cliquez sur l’onglet Schéma. Cliquez sur le bouton
Importer (à droite de l’onglet Schéma, au-dessus du panneau défilant). Dans la boîte de
dialogue Ouvrir, localisez le fichier products.xml importé à l’étape 3, puis cliquez sur
Ouvrir. Le schéma du fichier products.xml s’affiche dans le panneau défilant de l’onglet
Schéma.
Dans le panneau supérieur de l’onglet Schéma, sélectionnez l’élément image. Dans le panneau
inférieur, sélectionnez data type et modifiez la valeur en la faisant passer de <empty> à
String. Répétez cette étape pour l’élément description.
Filtrage des idées de cadeaux en fonction de
l’offense
Vous allez utiliser l’onglet Liaisons de l’inspecteur de composants pour relier les occurrences
des composants XMLConnector, DataSet et DataGrid entre elles.
Pour plus d’informations sur la liaison de données, consultez la section Intégration des données
(Flash Professionnel uniquement) du guide Utilisation de Flash.
1.
Sélectionnez l’occurrence products_xmlcon (XMLConnector) sur la scène, puis cliquez
sur l’onglet Liaisons de l’inspecteur des composants.
2.
Cliquez sur le bouton Ajouter une liaison.
32
Création d’une application avec composants (Flash Professionnel uniquement)
3.
Dans la boîte de dialogue Ajouter une liaison, sélectionnez l’élément
results.products.product array et cliquez sur OK.
4.
Dans l’onglet Liaisons, cliquez sur l’élément Lié à du panneau des attributs de liaison
(panneau inférieur présentant les paires nom-valeur d’attribut).
5.
Dans la colonne Valeur de l’élément Lié à, cliquez sur l’icône en forme de loupe pour ouvrir
la boîte de dialogue Lié à.
6.
Dans la boîte de dialogue Lié à, sélectionnez l’occurrence DataSet <products_ds> dans le
panneau Chemin du composant. Sélectionnez dataProvider:array dans le panneau
Emplacement du schéma. Cliquez sur OK.
7.
Dans l’onglet Liaisons, cliquez sur l’élément Direction du panneau des attributs de liaison.
Dans le menu contextuel, sélectionnez Positive dans la colonne Valeur.
Cette option signifie que les données iront de l’occurrence products_xmlcon vers
l’occurrence products_ds (au lieu d’aller dans les deux directions ou de l’occurrence
DataSet vers l’occurrence XMLConnector).
8.
Sur la scène, sélectionnez l’occurrence products_ds. Dans l’onglet Liaisons de l’inspecteur
de composants, remarquez que le fournisseur de données du composant apparaît dans la
liste des liaisons (panneau supérieur de l’onglet Liaisons). Dans le panneau des attributs de
liaison, le paramètre Lié à indique que l’occurrence products_ds est liée à l’occurence
products_xmlcom et que le sens de la liaison est défini sur Négative.
Dans les étapes suivantes, vous allez relier l’occurrence DataSet à l’occurrence DataGrid de
sorte que les données filtrées par le jeu de données apparaissent dans la grille de données.
9.
Sélectionnez l’occurrence products_ds, puis cliquez sur le bouton Ajouter une liaison dans
l’onglet Liaisons.
10. Dans
la boîte de dialogue Ajouter une liaison, sélectionnez l’élément dataProvider:
puis cliquez sur OK.
array,
11.
Dans l’onglet Liaisons, assurez-vous que l’élément dataProvider: array est sélectionné.
12. Cliquez
13.
sur l’élément Lié à du panneau des attributs de liaison.
Dans la colonne Valeur de l’élément Lié à, cliquez sur l’icône en forme de loupe pour ouvrir
la boîte de dialogue Lié à.
14. Dans la boîte de dialogue Lié à, sélectionnez l’occurrence products_dg
(DataGrid) dans le
panneau Chemin du composant. Sélectionnez dataProvider:array dans le panneau
Emplacement du schéma. Cliquez sur OK.
Liaison des composants de données pour afficher les idées de cadeaux
33
Ajout de colonnes à la section Gift Ideas
Vous êtes désormais prêt à ajouter des colonnes à la grille de données de la section Gift Ideas
de l’application pour afficher la description et le prix des produits.
■
Sélectionnez le calque Actions. Dans le panneau Actions, insérez le code suivant pour
créer, configurer et ajouter une colonne Name et une colonne Price à l’occurrence
DataGrid :
// Définition de colonnes dans la grille de données et de leurs largeurs
par défaut dans l’occurrence
// DataGrid products_dg.
var name_dgc:DataGridColumn = new DataGridColumn("name");
name_dgc.headerText = "Name";
name_dgc.width = 280;
// Ajout d’une colonne au composant DataGrid.
products_dg.addColumn(name_dgc);
var price_dgc:DataGridColumn = new DataGridColumn("price");
price_dgc.headerText = "Price";
price_dgc.width = 100;
// Définition de la fonction qui permettra de définir le titre de la
colonne
// à l’exécution.
price_dgc.labelFunction = function(item:Object) {
if (item != undefined) {
return "$"+item.price+" "+item.priceQualifier;
}
};
products_dg.addColumn(price_dgc);
Déclenchement de XML Connector
Vous allez à présent ajouter une ligne de code qui demande à l’occurrence XMLConnector de
charger, analyser et lier le contenu du fichier distant products.xml. Ce fichier est situé à
l’adresse URL que vous avez saisie pour la propriété URL de l’occurrence XMLConnector créée
précédemment. Il contient des renseignements sur les produits qui s’afficheront dans la
section Gift Ideas de l’application.
■
Entrez le code suivant dans le panneau Actions :
products_xmlcon.trigger();
34
Création d’une application avec composants (Flash Professionnel uniquement)
Ajout d’un écouteur d’événements pour filtrer les
idées de cadeaux
Dans cette section, vous allez ajouter un écouteur d’événements qui détectera le moment où
les utilisateurs sélectionneront une offense dans la section What Did You Do? (l’occurrence
ComboBox problems_cb). L’écouteur comprend une fonction qui filtre la liste Gift Ideas en
fonction de l’offense choisie par l’utilisateur. La sélection d’une offense mineure entraîne
l’apparition d’une liste de cadeaux sans prétention (par exemple, un CD ou un bouquet de
fleurs), alors que celle d’une offense plus sérieuse affiche des cadeaux plus généreux.
Pour plus d’informations sur le fonctionnement des écouteurs d’événements, consultez la
section Utilisation des écouteurs d’événement du guide Learning ActionScript 2.0 in Flash
(Formation à ActionScript 2.0 dans Flash).
■
Dans le panneau Actions, ajoutez le code suivant :
/* Définition d’un écouteur pour l’occurrence de ComboBox problems_cb.
Cet écouteur filtrera les produits des composants DataSet et DataGrid.
Le filtrage dépend de la gravité de l’élément sélectionné dans la liste
déroulante. */
var cbListener:Object = new Object();
cbListener.change = function(evt:Object) {
products_ds.filtered = false;
products_ds.filtered = true;
products_ds.filterFunc = function(item:Object) {
// Si la gravité de l’élément en cours est supérieure ou égale à
// l’élément sélectionné dans l’occurrence ComboBox, la valeur true
est renvoyée.
return (item.severity>=evt.target.selectedItem.severity);
};
};
// Ajout de l’écouteur au composant ComboBox.
problems_cb.addEventListener("change", cbListener);
La réinitialisation de la propriété filtered (définie sur false, puis sur true) au début de la
fonction change() permet de garantir le bon fonctionnement de l’application si l’utilisateur
modifie à plusieurs reprises sa sélection dans la liste What Did You Do?
La fonction filterFunc() vérifie si l’un des éléments de la table des cadeaux correspond à la
gravité choisie par l’utilisateur dans la liste déroulante. Si le cadeau se trouve dans la plage de
gravité sélectionnée, il apparaît dans l’occurrence DataGrid (liée à l’occurrence DataSet).
La dernière ligne de code enregistre l’écouteur pour l’occurrence ComboBox problems_cb.
Liaison des composants de données pour afficher les idées de cadeaux
35
Ajout du panier
Le code que vous allez maintenant ajouter crée une occurrence de la classe personnalisée Cart
et l’initialise.
■
Dans le panneau Actions, ajoutez le code suivant :
var myCart:Cart = new Cart(this);
myCart.init();
Ce code utilise la méthode init() de la classe Cart pour ajouter une occurrence DataGrid sur
la scène, définir ses colonnes et la positionner. Il ajoute et positionne également une
occurrence du composant Button, puis ajoute un gestionnaire Alert pour ce bouton. (Pour
examiner le code de la méthode init() de la classe Cart, ouvrez le fichier Cart.as.)
CON S EI L
Appuyez sur Ctrl+S pour enregistrer votre travail, puis sur Ctrl+Entrée (ou choisissez
Contrôle-> Tester l’animation) pour tester l’application. Lorsque vous sélectionnez une
offense dans la liste déroulante, la grille de données que vous avez créée pour Gift Ideas
devrait afficher un sous-ensemble de cadeaux en fonction de l’offense sélectionnée.
Affichage des détails des cadeaux
Dans l’application, une fenêtre contextuelle s’ouvre lorsque l’utilisateur clique sur un produit
dans la section Gift Ideas. Elle contient les occurrences de composant qui affichent les
informations relatives au produit (description, image et prix). Pour composer cette fenêtre,
vous allez créer un symbole de clip et ajouter des occurrences des composants Loader,
TextArea, Label, NumericStepper et Button. La fenêtre des détails du produit pour Bouquet
of Flowers Extreme a l’aspect suivant :
36
Création d’une application avec composants (Flash Professionnel uniquement)
Vous ajouterez plus tard du code ActionScript créant dynamiquement une occurrence de ce
clip pour chaque produit. Ces occurrences de clip s’afficheront dans le composant Window
que vous avez ajouté précédemment à la bibliothèque. Les occurrences de composant seront
renseignées par les données du fichier XML externe.
1.
Faites glisser une occurrence de composant Fenêtre provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la dans la bibliothèque.
Le symbole du composant Window est à présent dans la bibliothèque. Dans la suite de ce
didacticiel, vous allez créer des occurrences du composant Window à l’aide d’ActionScript.
2.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), cliquez sur le menu d’options situé
à droite de la barre de titre et choisissez Nouveau symbole.
3.
Dans la boîte de dialogue Créer un symbole, entrez ProductForm dans le champ Nom et
activez l’option Clip de la zone Type.
4.
Cliquez sur le bouton Avancé. Sous Liaison, activez l’option Exporter pour ActionScript,
laissez l’option Exporter dans la première image sélectionnée, puis cliquez sur OK. Une
fenêtre de document s’ouvre en mode de modification de symbole pour le nouveau
symbole.
Dans le cas de symboles de clip stockés dans la bibliothèque mais absents de la scène, vous
devez activer l’option Exporter pour ActionScript pour pouvoir les manipuler avec
ActionScript. (L’exportation dans la première image permet de disposer du clip dès le
chargement de la première image.) Dans la suite de ce didacticiel, vous ajouterez du code
ActionScript générant dynamiquement une occurrence du clip chaque fois qu’un
utilisateur clique sur un produit de la section Gift Ideas.
5.
Dans le scénario du nouveau symbole, sélectionnez Calque 1 et renommez-le Composants.
6.
Faites glisser une occurrence de composant Loader provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la sur la scène. Entrez 5, 5 pour les
coordonnées x, y respectivement. Nommez l’occurrence image_ldr. Cliquez sur l’onglet
Paramètres de l’inspecteur des propriétés. Sélectionnez false pour autoLoad et false
pour scaleContent.
L’occurrence du composant Loader servira à afficher l’image du produit. Le paramètre
false de autoLoad indique que l’image ne doit pas être chargée automatiquement. Le
paramètre false de scaleContent indique que l’image ne sera pas redimensionnée. Dans
la suite de ce didacticiel, vous ajouterez du code permettant de charger l’image
dynamiquement, en fonction du produit sélectionné par l’utilisateur dans la section Gift
Ideas.
Affichage des détails des cadeaux
37
7.
Faites glisser une occurrence de composant TextArea provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la sur la scène. Placez-la à côté du
composant Loader. Entrez 125, 5 pour les coordonnées x, y respectivement. Nommez
l’occurrence description_ta. Paramétrez la largeur sur 200 et la hauteur sur 130. Cliquez
sur l’onglet Paramètres de l’inspecteur des propriétés. Pour l’option editable, sélectionnez
false. Pour l’option html, sélectionnez true. Pour l’option wordWrap, sélectionnez true.
L’occurrence du composant TextArea servira à afficher la description du produit
sélectionné. Les paramètres sélectionnés précisent que le texte ne peut pas être modifié par
l’utilisateur, qu’il peut être mis en forme avec des balises HMTL et que ses lignes seront
ajustées à la taille de la zone de texte.
8.
Faites glisser une occurrence de composant Etiqueter provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la sur la scène. Placez-la sous le composant
Loader. Paramétrez les coordonnées x, y sur 5, 145. Nommez l’occurrence price_lbl.
Cliquez sur l’onglet Paramètres de l’inspecteur des propriétés. Pour l’option autoSize,
sélectionnez left. Pour l’option html, sélectionnez true.
L’occurrence du composant Label affichera le prix du produit et son qualificatif (quantité
de produits indiquée par le prix spécifié, par exemple « unité » ou « douzaine »).
9.
Faites glisser une occurrence de composant NumericStepper provenant de l’arborescence
Interface utilisateur du panneau Composants et déposez-la sur la scène. Placez-la sous le
composant TextArea. Paramétrez les coordonnées x, y sur 135, 145. Nommez l’occurrence
quantity_ns. Cliquez sur l’onglet Paramètres de l’inspecteur des propriétés. Pour l’option
minimum, entrez 1.
La configuration du paramètre minimum sur1 précise que l’utilisateur doit choisir au moins
un produit pour ajouter l’article au panier.
10. Faites
glisser une occurrence de composant Bouton provenant de l’arborescence Interface
utilisateur du panneau Composants et déposez-la sur la scène. Placez-la à côté du
composant NumericStepper. Paramétrez les coordonnées x, y sur 225, 145. Nommez
l’occurrence addToCart_button. Cliquez sur l’onglet Paramètres de l’inspecteur des
propriétés. Pour l’option label, entrez Add To Cart.
38
Création d’une application avec composants (Flash Professionnel uniquement)
Ajout d’un écouteur d’événements pour déclencher
l’affichage des détails des cadeaux
Vous allez maintenant ajouter un écouteur d’événements à l’occurrence DataGrid
products_dg afin d’afficher des renseignements sur chaque produit. Lorsque l’utilisateur
clique sur un produit de la section Gift Ideas, une fenêtre contextuelle présente la description
de ce produit.
■
Dans le panneau Actions du scénario principal, ajoutez le code suivant :
// Création d’un écouteur de l’occurrence DataGrid afin de détecter toute
// modification de DataGrid
var dgListener:Object = new Object();
dgListener.change = function(evt:Object) {
// Lorsque la ligne en cours change dans l’occurrence DataGrid,
lancement d’une nouvelle
// fenêtre contextuelle présentant les détails du produit.
myWindow = mx.managers.PopUpManager.createPopUp(_root,
mx.containers.Window, true, {title:evt.target.selectedItem.name,
contentPath:"ProductForm", closeButton:true});
// Définition des dimensions de la fenêtre contextuelle.
myWindow.setSize(340, 210);
// Définition d’un écouteur fermant la fenêtre contextuelle lorsque
l’utilisateur clique
// sur le bouton de fermeture.
var closeListener:Object = new Object();
closeListener.click = function(evt) {
evt.target.deletePopUp();
};
myWindow.addEventListener("click", closeListener);
};
products_dg.addEventListener("change", dgListener);
Ce code crée un nouvel écouteur d’événements appelé dgListener, ainsi que des occurrences
du composant Window que vous avez ajoutées précédemment dans la bibliothèque. Le titre
de la nouvelle fenêtre est défini sur le nom du produit. Le chemin du contenu de la fenêtre est
défini sur le clip ProductForm. La taille de la fenêtre est définie sur 340 x 210 pixels.
Le code ajoute également un bouton de fermeture afin de permettre à l’utilisateur de refermer
la fenêtre après l’affichage des informations.
Affichage des détails des cadeaux
39
Ajout de code au clip ProductForm
Vous allez maintenant ajouter du code ActionScript au clip ProductForm que vous venez de
créer. ActionScript renseigne les composants du clip avec les informations relatives au cadeau
sélectionné, puis ajoute un écouteur d’événements au bouton Add to Cart qui permet
d’ajouter le produit choisi dans le panier de l’utilisateur.
Pour plus d’informations sur le fonctionnement des écouteurs d’événements, consultez la
section Utilisation des écouteurs d’événement du guide Utilisation d’ActionScript dans Flash.
1.
Dans le scénario du clip ProductForm, créez un nouveau calque et nommez-le Actions.
Sélectionnez la première image du calque Actions.
2.
Dans le panneau Actions, ajoutez le code suivant :
// Création d’un objet qui référence l’article sélectionné dans le
composant DataGrid.
var thisProduct:Object = this._parent._parent.products_dg.selectedItem;
// Renseignement des occurrences description_ta TextArea et price_lbl
Label avec les
// données du produit sélectionné.
description_ta.text = thisProduct.description;
price_lbl.text = "<b>$"+thisProduct.price+"
"+thisProduct.priceQualifier+"</b>";
// Chargement de l’image du produit depuis le répertoire de
l’application.
image_ldr.load(thisProduct.image);
R EMA R Q U E
Le code inclut des commentaires décrivant ses actions. Nous vous conseillons de
commenter ainsi tout le code ActionScript que vous rédigez pour faciliter sa
compréhension lors de toute modification ultérieure, quelle que soit la personne
appelée à en assurer la maintenance.
Le code commence par définir la variable qui référence le produit sélectionné dans toutes
les instructions suivantes. L’utilisation de thisProduct signifie que vous n’avez pas à vous
référer au produit sélectionné via le chemin
this._parent._parent.products_dg.selectedItem .
Le code renseigne ensuite les occurrences TextArea et Label à l’aide des propriétés
et priceQualifier de l’objet thisProduct. Ces propriétés
correspondent aux éléments du fichier products.xml que vous avez relié à l’occurrence
products_xmlcon XMLConnector au début de ce didacticiel. Dans la suite de ce
didacticiel, vous relierez les occurrences des composants XMLConnector, DataSet et
DataGrid entre elles, et les éléments du fichier XML renseigneront les occurrences des
deux autres composants.
description, price
40
Création d’une application avec composants (Flash Professionnel uniquement)
Pour finir, le code utilise la propriété image de l’occurence d’objet thisProduct pour
charger une image du produit dans le composant Loader.
3.
Vous allez ensuite ajouter un écouteur d’événements permettant d’ajouter le produit au
panier lorsque l’utilisateur clique sur le bouton Add to Cart (Ajouter au panier). (Dans la
suite de ce didacticiel, vous ajouterez du code ActionScript dans le scénario principal de
l’application pour créer une occurrence de la classe Cart.) Ajoutez le code suivant :
var cartListener:Object = new Object();
cartListener.click = function(evt:Object) {
var tempObj:Object = new Object();
tempObj.quantity = evt.target._parent.quantity_ns.value;
tempObj.id = thisProduct.id;
tempObj.productObj = thisProduct;
var theCart = evt.target._parent._parent._parent.myCart;
theCart.addProduct(tempObj.quantity, thisProduct);
};
addToCart_button.addEventListener("click", cartListener);
4.
Cliquez sur le bouton Vérifier la syntaxe (la coche bleue placée au-dessus du panneau
Script) afin de contrôler l’absence de toute erreur de syntaxe dans le code.
Il est préférable de vérifier régulièrement la syntaxe au fur et à mesure de l’ajout de code à
une application. Toute erreur décelée dans le code s’affiche dans la liste du panneau de
sortie. (Lors de la vérification de la syntaxe, seul le script en cours est examiné ; les autres
scripts éventuellement présents dans le fichier FLA sont ignorés.) Pour plus
d’informations, consultez Débogage de scripts du guide Formation à ActionScript 2.0 dans
Flash.
5.
Cliquez sur la petite flèche située en haut et à gauche de la fenêtre du document ou
sélectionnez Affichage > Modifier le document pour quitter le mode d’édition de symbole
et revenir au scénario principal.
CON S E I L
Appuyez sur Ctrl+S pour enregistrer votre travail, puis sur Ctrl+Entrée (ou choisissez
Contrôle > Tester l’animation) pour tester votre application. Lorsque vous cliquez sur
une sélection de cadeau à ce stade, une fenêtre devrait apparaître et afficher une
image du cadeau, accompagnée d’une description, du prix et d’un incrémenteur
numérique vous permettant de choisir la quantité souhaitée.
Affichage des détails des cadeaux
41
Création de l’écran de règlement
Lorsque l’utilisateur clique sur le bouton Checkout de l’écran principal, l’écran du même nom
apparaît. Cet écran fournit les formulaires qui permettent à l’utilisateur de saisir des
informations relatives à la facturation, la livraison et le paiement par carte bancaire. L’écran de
réglement a l’aspect suivant :
L’interface de paiement est formée de composants placés sur une image-clé au niveau de
l’Image 10 de l’application. Pour créer cette interface, vous allez utiliser le composant
Accordion. Il s’agit d’un navigateur contenant une série d’enfants qui s’affichent l’un après
l’autre. Vous ajouterez également une occurrence de composant Button afin de créer un
bouton Précédent qui permettra aux utilisateurs de revenir à l’écran principal.
Dans la suite de ce didacticiel, vous créerez des clips à utiliser en tant qu’enfants dans
l’occurrence Accordion pour afficher les panneaux des formulaires de facturation, de livraison
et de carte bancaire.
1.
Dans le scénario principal de l’application, déplacez la tête de lecture jusqu’à l’Image 10
(appelée Checkout). Assurez-vous que le calque Form est sélectionné.
2.
Insérez une image-clé vide dans l’Image 10 du calque Form (sélectionnez l’image et
choisissez Insertion > Scénario > Image-clé vide).
42
Création d’une application avec composants (Flash Professionnel uniquement)
3.
L’image-clé étant sélectionnée, faites glisser une occurrence du composant Accordion
provenant de l’arborescence Interface utilisateur du panneau Composants vers la scène.
Dans l’inspecteur des propriétés, entrez checkout_acc comme nom d’occurrence.
Paramétrez la largeur sur 300 pixels et la hauteur sur 200 pixels.
4.
Faites glisser une occurrence du composant Button provenant de l’arborescence Interface
utilisateur du panneau Composants vers le coin inférieur droit de la scène. Dans
l’inspecteur des propriétés, nommez l’occurrence back_button. Cliquez sur l’onglet
Paramètres et entrez Back pour la propriété label.
Présentation des panneaux Billing (Facturation),
Shipping (Livraison) et Credit Card (Carte bancaire)
Les panneaux Billing (Facturation), Shipping (Livraison) et Credit Card Information
(Carte bancaire) sont formés d’occurrences de clip affichées dans l’occurrence du
composant Accordion. Chaque panneau est composé de deux clips imbriqués.
Le clip parent contient un composant ScrollPane, qui sert à afficher le contenu dans une zone
défilante. Le clip enfant contient les composants Label et TextInput dans lesquels les
utilisateurs tapent leurs coordonnées (nom, adresse, etc.). Vous allez utiliser le composant
ScrollPane pour afficher le clip enfant de sorte que l’utilisateur puisse passer d’un champ
d’information à l’autre.
Création du panneau Billing Information (Facturation)
Vous allez commencer par créer deux clips qui afficheront les champs du formulaire Billing
Information (Facturation) : un clip parent avec l’occurrence du composant ScrollPane et un
clip enfant avec des occurrences des composants Label et TextArea.
1.
Dans le panneau Bibliothèque (Fenêtre > Bibliothèque), cliquez sur le menu d’options situé
à droite de la barre de titre et choisissez Nouveau symbole.
2.
Dans la boîte de dialogue Créer un symbole, entrez checkout1_mc dans le champ Nom et
activez l’option Clip de la zone Type.
3.
Cliquez sur le bouton Avancé. Sous Liaison, activez l’option Exporter pour ActionScript,
laissez l’option Exporter dans la première image sélectionnée, puis cliquez sur OK.
Une fenêtre de document s’ouvre en mode de modification de symbole pour le nouveau
symbole.
4.
Faites glisser une occurrence du composant ScrollPane sur la scène.
5.
Dans l’inspecteur des propriétés, nommez l’occurrence checkout1_sp. Paramétrez les
valeurs W et H sur 300, 135. Paramétrez les coordonnées x et y sur 0, 0.
Création de l’écran de règlement
43
6.
Cliquez sur l’onglet Paramètres. Définissez la propriété contentPath sur
checkout1_sub_mc.
Le clip checkout1_sub_mc apparaîtra dans le panneau défilant et contiendra les
composants Label et TextInput. Vous allez ensuite créer ce clip.
7.
Dans le menu d’options de la Bibliothèque, choisissez Nouveau symbole.
8.
Dans la boîte de dialogue Créer un symbole, entrez checkout1_sub_mc dans le champ
Nom et activez l’option Clip de la zone Type.
9.
Cliquez sur le bouton Avancé. Sous Liaison, activez l’option Exporter pour ActionScript,
laissez l’option Exporter dans la première image sélectionnée, puis cliquez sur OK.
Une fenêtre de document s’ouvre en mode de modification de symbole pour le nouveau
symbole.
10. Faites glisser six occurrences du composant Label sur la scène. Vous pouvez également faire
glisser une occurrence sur la scène, puis la déposer sur la scène en maintenant la touche Ctrl
(Windows) ou Option (Macintosh) enfoncée pour en faire des copies. Nommez et placez
les occurrences comme suit :
■
■
■
■
■
■
44
Pour la première occurence, entrez firstname_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 5. Cliquez sur l’onglet Paramètres et entrez
First Name pour le text.
Pour la deuxième occurence, entrez lastname_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 35. Cliquez sur l’onglet Paramètres et entrez
Last Name pour text.
Pour la troisième occurence, entrez country_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 65. Cliquez sur l’onglet Paramètres et entrez
Country pour le text.
Pour la quatrième occurence, entrez province_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 95. Cliquez sur l’onglet Paramètres et entrez
Province/State pour le text.
Pour la cinquième occurence, entrez city_lbl pour le nom de l’occurence et paramétrez
les coordonnées x et y sur 5, 125. Cliquez sur l’onglet Paramètres et entrez City pour le
text.
Pour la sixième occurence, entrez postal_lbl pour le nom de l’occurence et paramétrez
les coordonnées x et y sur 5, 155. Cliquez sur l’onglet Paramètres et entrez Postal/Zip
Code pour le text.
Création d’une application avec composants (Flash Professionnel uniquement)
11.
Faites glisser six occurrences du composant TextInput sur la scène. Placez une occurrence
TextInput immédiatement à droite de chaque occurrence du composant Label. Par
exemple, les coordonnées x, y de la première occurrence TextInput seront 105, 5. Nommez
les occurences TextInput comme suit :
■
Nommez la première occurrence billingFirstName_ti.
■
Nommez la deuxième occurrence billingLastName_ti.
■
Nommez la troisième occurrence billingCountry_ti.
■
Nommez la quatrième occurrence billingProvince_ti.
■
Nommez la cinquième occurrence billingCity_ti.
■
Nommez la sixième occurrence billingPostal_ti.
Lorsque le contenu d’un panneau défilant est trop proche de la bordure extérieure, il peut
être recadré. Au cours des étapes suivantes, vous allez ajouter un rectangle blanc au clip
checkout1_sub_mc pour que les occurrences Label et TextInput s’affichent correctement.
12. Dans
le scénario, cliquez sur le bouton Insérer un calque. Faites glisser le nouveau calque
sous le calque existant. (Le calque associé au rectangle doit être placé en bas, de sorte que le
rectangle ne gène pas l’affichage du composant.)
13.
Sélectionnez l’Image 1 du nouveau calque.
14. Dans
le panneau Outils, sélectionnez l’outil Rectangle. Définissez la couleur du trait sur
Aucune et la couleur de remplissage sur Blanc.
Cliquez sur le contrôle Couleur de trait du panneau Outils, puis sur le bouton Aucune
(le nuancier blanc traversé par une ligne rouge). Cliquez sur le contrôle Couleur de
remplissage, puis sur la couleur blanche.
15. Faites glisser la souris de manière à créer un rectangle continuant au-delà des bords inférieur
et droit des occurrences Label et TextInput.
Création de l’écran de règlement
45
Création du panneau Shipping Information
(Livraison)
Les clips du panneau Shipping Information sont similaires à ceux du panneau Billing
Information. Vous allez également ajouter un composant CheckBox qui permettra aux
utilisateurs de renseigner les champs du formulaire de livraison à l’aide des données déjà saisies
dans le panneau de facturation.
1.
Suivez les instructions précédentes (consultez la section Création du panneau Billing
Information (Facturation), page 43) pour créer les clips du panneau Shipping Information
(livraison). Remarquez les différentes appellations :
■
■
■
2.
Pour le premier clip, nommez le symbole checkout2_mc et l’occurrence
checkout2_sp. Dans l’onglet Paramètres de l’inspecteur des propriétés, définissez la
propriété contentPath sur checkout2_sub_mc.
Pour le second clip, nommez le symbole checkout2_sub_mc.
Pour les occurrences TextInput, changez « billing » en « shipping » dans les noms des
occurrences.
Le clip checkout2_sub_mc étant ouvert en mode d’édition de symbole, faites glisser une
occurrence du composant CheckBox sur la scène et positionnez-la juste au-dessus de la
première occurrence du composant Label.
Assurez-vous de placer cette occurrence dans le Calque1, avec les autres occurrences de
composant.
3.
Dans l’inspecteur des propriétés, nommez l’occurrence sameAsBilling_ch.
4.
Cliquez sur l’onglet Paramètres. Définissez la propriété label sur Same As Billing Info.
46
Création d’une application avec composants (Flash Professionnel uniquement)
Création du panneau Credit Card Information
(Carte bancaire)
Les clips du panneau Credit Card Information sont très similaires à ceux des panneaux Billing
Information et Shipping Information. Toutefois, les champs du clip imbriqué pour le
panneau Credit Card Information diffèrent légèrement des deux autres pour le numéro et les
autres données de la carte bancaire.
1.
Suivez les étapes 1 à 9 de la procédure donnée pour les informations de facturation
(consultez la section Création du panneau Billing Information (Facturation), page 43) pour
créer les clips du panneau Credit Card Information (Carte bancaire). Remarquez les
différentes appellations :
■
■
2.
Pour le premier clip, nommez le symbole checkout3_mc et l’occurrence
checkout3_sp. Dans l’onglet Paramètres de l’inspecteur des propriétés, définissez la
propriété contentPath sur checkout3_sub_mc.
Pour le second clip, nommez le symbole checkout3_sub_mc.
Faites glisser quatre occurrences du composant Label sur la scène. Nommez et placez les
occurrences comme suit :
■
■
■
■
Pour la première occurence, entrez ccName_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 5. Cliquez sur l’onglet Paramètres et entrez
Name On Card pour le text.
Pour la deuxième occurence, entrez ccType_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 35. Cliquez sur l’onglet Paramètres et entrez
Card Type pour le text.
Pour la troisième occurence, entrez ccNumber_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 65. Cliquez sur l’onglet Paramètres et entrez
Card Number pour le text.
Pour la quatrième occurence, entrez ccExp_lbl pour le nom de l’occurence et
paramétrez les coordonnées x et y sur 5, 95. Cliquez sur l’onglet Paramètres et entrez
Expiration pour le text.
3.
Faites glisser une occurrence du composant TextInput sur la scène et placez-la à droite de
l’occurrence ccName_lbl. Nommez l’occurrence ccName_ti. Paramétrez les coordonnées
x et y sur 105, 5. Paramétrez la largeur sur 140.
4.
Faites glisser une occurence du composant ComboBox sur la scène et placez-la à droite de
l’occurence ccType_lbl. Nommez la nouvelle occurrence ccType_cb. Paramétrez les
coordonnées x et y sur 105, 35. Paramétrez la largeur sur 140.
Création de l’écran de règlement
47
5.
Faites glisser une occurrence du composant TextInput sur la scène et placez-la à droite de
l’occurrence ccNumber_lbl. Nommez la nouvelle occurrence ccNumber_ti. Paramétrez les
coordonnées x et y sur 105, 65. Paramétrez la largeur sur 140.
6.
Faites glisser deux occurrences du composant ComboBox sur la scène. Placez-en une à
droite de l’occurrence ccExp_lbl et la seconde à droite du premier. Nommez la première
nouvelle occurrence ccMonth_cb. Paramétrez la largeur sur 60 et les coordonnées x et y sur
105, 95. Nommez le deuxième ccYear_cb. Paramétrez la largeur sur 70 et les coordonnées
x et y sur 175, 95.
7.
Faites glisser une occurrence du composant Button sur la scène et placez-la en bas du
formulaire, sous l’occurrence ccMonth_lbl. Nommez la nouvelle occurrence
checkout_button. Paramétrez les coordonnées x et y sur 125, 135. Dans l’onglet
Paramètres de l’inspecteur des propriétés, définissez la propriété label sur Checkout.
8.
Exécutez les étapes 14 et 15 de la procédure relative aux informations de facturation
(consultez la section Création du panneau Billing Information (Facturation), page 43) pour
ajouter un rectangle en bas du formulaire.
Ajout d’un écouteur d’événements pour le bouton
Checkout (Paiement)
Vous allez maintenant ajouter un code permettant d’afficher l’écran Checkout (Paiement)
lorsque l’utilisateur clique sur le bouton du même nom.
■
Dans le panneau Actions du scénario principal, ajoutez le code suivant :
// Lorsque l’utilisateur clique sur le bouton Checkout (Paiement), aller
à l’image dont l’étiquette est « checkout ».
var checkoutBtnListener:Object = new Object();
checkoutBtnListener.click = function(evt:Object) {
evt.target._parent.gotoAndStop("checkout");
};
checkout_button.addEventListener("click", checkoutBtnListener);
Ce code précise que, lorsque l’utilisateur clique sur le bouton Checkout (Paiement), la tête de
lecture se déplace jusqu’à l’étiquette Checkout (Paiement) dans le scénario.
48
Création d’une application avec composants (Flash Professionnel uniquement)
Ajout de code pour l’écran Checkout (Paiement)
Vous pouvez maintenant insérer du code pour l’écran Checkout (Paiement) de l’application,
sur l’Image 10 du scénario principal. Ce code traite les données saisies par l’utilisateur dans les
panneaux de facturation, de livraison et de carte bancaire que vous avez créés avec Accordion
et d’autres composants.
1.
Dans le scénario, sélectionnez l’Image 10 du calque Actions et insérez une image-clé vide
(choisissez Insertion > Scénario > Image-clé vide).
2.
Ouvrez le panneau Actions (F9).
3.
Dans le panneau Actions, ajoutez le code suivant :
stop();
import mx.containers.*;
// Définition du composant Accordion sur la scène.
var checkout_acc:Accordion;
4.
Ajoutez ensuite le premier enfant à l’occurrence du composant Accordion, pour accepter
les informations de facturation de l’utilisateur. Ajoutez le code suivant :
// Définition des enfants du composant Accordion.
var child1 = checkout_acc.createChild("checkout1_mc", "child1_mc",
{label:"1. Billing Information"});
var thisChild1 = child1.checkout1_sp.spContentHolder;
La première ligne appelle la méthode createChild() du composant Accordion et crée
une occurrence du symbole de clip checkout1_mc (que vous avez créé précédemment) ave
le nom child1_mc et l’étiquette « 1. Billing Information (Facturation) ». La seconde ligne
de code crée un raccourci vers une occurrence de composant ScrollPane imbriquée.
5.
Pour accepter les informations de livraison, créez le deuxième enfant de l’occurrence
Accordion :
/* Ajout du second enfant de Accordion.
Ajout d’un écouteur d’événements pour l’occurrence CheckBox
sameAsBilling_ch.
Cette opération copie dans le second enfant les valeurs du formulaire
issues du premier. */
var child2 = checkout_acc.createChild("checkout2_mc", "child2_mc",
{label:"2. Shipping Information"});
var thisChild2 = child2.checkout2_sp.spContentHolder;
var checkboxListener:Object = new Object();
checkboxListener.click = function(evt:Object) {
if (evt.target.selected) {
thisChild2.shippingFirstName_ti.text =
thisChild1.billingFirstName_ti.text;
thisChild2.shippingLastName_ti.text =
thisChild1.billingLastName_ti.text;
Création de l’écran de règlement
49
thisChild2.shippingCountry_ti.text =
thisChild1.billingCountry_ti.text;
thisChild2.shippingProvince_ti.text =
thisChild1.billingProvince_ti.text;
thisChild2.shippingCity_ti.text = thisChild1.billingCity_ti.text;
thisChild2.shippingPostal_ti.text =
thisChild1.billingPostal_ti.text;
}
};
thisChild2.sameAsBilling_ch.addEventListener("click", checkboxListener);
Les deux premières lignes de code sont similaires au code utilisé pour créer l’enfant Billing
Information (Facturation) : créez une occurrence du symbole de clip checkout2_mc,
nommez-la child2_mc et l’étiquette « 2. Shipping Information (Livraison) ». La seconde
ligne de code crée un raccourci vers une occurrence de composant ScrollPane imbriquée.
Au début de la troisième ligne de code, vous ajoutez un écouteur d’événements à
l’occurrence CheckBox. Si l’utilisateur active la case à cocher, les informations de livraison
utilisent les données saisies par l’utilisateur dans le panneau de facturation.
6.
Créez ensuite un troisième enfant de l’occurrence Accordion pour les informations de carte
bancaire :
// Définition du troisième enfant Accordion.
var child3 = checkout_acc.createChild("checkout3_mc", "child3_mc",
{label:"3. Credit Card Information"});
var thisChild3 = child3.checkout3_sp.spContentHolder;
7.
Ajoutez ce code pour créer des occurrences du composant ComboBox pour le mois, l’année
et le type de carte bancaire, et renseignez chacune d’elles avec une table définie
statistiquement :
/* Définition des valeurs des trois occurrences de ComboBox de la scène :
ccMonth_cb, ccYear_cb and ccType_cb */
thisChild3.ccMonth_cb.labels = ["01", "02", "03", "04", "05", "06",
"07", "08", "09", "10", "11", "12"];
thisChild3.ccYear_cb.labels = [2004, 2005, 2006, 2007, 2008, 2009,
2010];
thisChild3.ccType_cb.labels = ["VISA", "MasterCard", "American Express",
"Diners Club"];
8.
Pour finir, insérez le code suivant pour ajouter des écouteurs d’événements aux boutons
Checkout (Paiement) et Back. Lorsque l’utilisateur clique sur le bouton Checkout, l’objet
écouteur copie le contenu des champs des formulaires des panneaux de facturation,
livraison et carte bancaire dans un objet LoadVars qui est envoyé au serveur. (La classe
LoadVars vous permet d’envoyer toutes les variables d’un objet à une adresse URL
spécifiée.) Lorsque l’utilisateur clique sur le bouton Back, l’écran principal de l’application
réapparaît.
/* Création d’un écouteur pour l’occurrence Button checkout_button.
50
Création d’une application avec composants (Flash Professionnel uniquement)
Cet écouteur envoie toutes les variables du formulaire au serveur lorsque
l’utilisateur clique sur le bouton Checkout. */
var checkoutListener:Object = new Object();
checkoutListener.click = function(evt:Object){
evt.target.enabled = false;
/* Création de deux occurrences d’objet LoadVars, qui envoient des
variables
et reçoivent les résultats du serveur distant. */
var response_lv:LoadVars = new LoadVars();
var checkout_lv:LoadVars = new LoadVars();
checkout_lv.billingFirstName = thisChild1.billingFirstName_ti.text;
checkout_lv.billingLastName = thisChild1.billingLastName_ti.text;
checkout_lv.billingCountry = thisChild1.billingCountry_ti.text;
checkout_lv.billingProvince = thisChild1.billingProvince_ti.text;
checkout_lv.billingCity = thisChild1.billingCity_ti.text;
checkout_lv.billingPostal = thisChild1.billingPostal_ti.text;
checkout_lv.shippingFirstName = thisChild2.shippingFirstName_ti.text;
checkout_lv.shippingLastName = thisChild2.shippingLastName_ti.text;
checkout_lv.shippingCountry = thisChild2.shippingCountry_ti.text;
checkout_lv.shippingProvince = thisChild2.shippingProvince_ti.text;
checkout_lv.shippingCity = thisChild2.shippingCity_ti.text;
checkout_lv.shippingPostal = thisChild2.shippingPostal_ti.text;
checkout_lv.ccName = thisChild3.ccName_ti.text;
checkout_lv.ccType = thisChild3.ccType_cb.selectedItem;
checkout_lv.ccNumber = thisChild3.ccNumber_ti.text;
checkout_lv.ccMonth = thisChild3.ccMonth_cb.selectedItem;
checkout_lv.ccYear = thisChild3.ccYear_cb.selectedItem;
/* Envoi des variables de l’objet LoadVars checkout_lv au script
distant sur le serveur.
Enregistrement des résultats dans l’occurrence response_lv. */
checkout_lv.sendAndLoad("http://www.flash-mx.com/mm/firstapp/
cart.cfm", response_lv, "POST");
response_lv.onLoad = function(success:Boolean) {
evt.target.enabled = true;
};
};
thisChild3.checkout_button.addEventListener("click", checkoutListener);
cart_mc._visible = false;
var backListener:Object = new Object();
backListener.click = function(evt:Object) {
evt.target._parent.gotoAndStop("home");
}
back_button.addEventListener("click", backListener);
Création de l’écran de règlement
51
Test de l’application
Félicitations ! Vous avez terminé l’application. Appuyez maintenant sur Ctrl+S pour
enregistrer votre travail puis sur Ctrl+Entrée (ou choisissez Contrôle > Tester l’animation)
pour tester l’application.
Affichage de l’application terminée
Si vous n’avez pas réussi à terminer le didacticiel, vous pouvez afficher une version de
l’application terminée. Vous pouvez trouver ce fichier Flash (FLA) de départ,
first_app_start.fla, et le fichier fini, first_app.fla, dans le dossier Samples de votre disque dur :
■
Sous Windows : lecteur d’initialisation:\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\ComponentsApplication
■
Sous Macintosh : disque dur Macintosh/Applications/Macromedia Flash 8/Samples and
Tutorials/Samples/Components/ComponentsApplication
Pour afficher le fichier FLA pour l’application, ouvrez le fichier first_app.fla dans le dossier
components_application.
Vous pouvez comparer ces fichiers aux vôtres pour essayer de repérer vos erreurs.
Tous les composants utilisés dans l’application apparaissent dans la bibliothèque (de même
que les fichiers graphiques et les autres éléments utilisés pour créer l’application). Certains
composants apparaissent sous forme d’occurrences sur la scène. D’autres sont référencés dans
le code ActionScript et n’apparaissent pas avant l’exécution.
52
Création d’une application avec composants (Flash Professionnel uniquement)
CHAPITRE 3
3
Utilisation des composants
Dans ce chapitre, vous allez employer plusieurs fichiers Macromedia Flash (FLA) et fichiers de
classe ActionScript pour apprendre à ajouter des composants à un document et définir leurs
propriétés. Ce chapitre présente également quelques rubriques avancées, telles que l’utilisation
des conseils de code, la création de la navigation personnalisée du focus, la gestion de la
profondeur des composants et la migration des composants de la version 1 vers l’architecture
version 2du composant Macromedia.
Les fichiers utilisés dans ce chapitre, TipCalulator.fla et TipCalculator.swf, sont stockés dans
votre disque dur aux emplacements suivants :
■
(Windows) Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\TipCalculator
■
(Macintosh) Applications/Macromedia Flash 8/Samples and Tutorials/Samples/
Components/TipCalculator
Ce chapitre contient les rubriques suivantes :
Panneau Composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Ajout de composants aux documents Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Composants du panneau Bibliothèque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Définition des paramètres des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Dimensionnement des composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Suppression de composants dans les documents Flash . . . . . . . . . . . . . . . . . . . . . . 62
Utilisation des conseils de code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Création de la navigation personnalisée du focus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Gestion de la profondeur des composants dans un document . . . . . . . . . . . . . . . . . 64
Composants de l’aperçu en direct . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Utilisation d’un préchargement avec les composants . . . . . . . . . . . . . . . . . . . . . . . . . 66
Chargement des composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Migration des composants de la version 1 vers l’architecture de la version 2 . . . . . 68
53
Panneau Composants
Tous les composants contenus dans le répertoire Composants/configuration au niveau de
l’utilisateur apparaissent dans le panneau Composants. (Pour plus d’informations sur ce
répertoire, consultez la section Emplacement de stockage des fichiers de composants, page 14.)
Pour afficher le panneau Composants :
■
Choisissez Fenêtre > Composants.
Menu du panneau
Pour afficher les composants installés après le démarrage de Flash :
1.
Choisissez Fenêtre > Composants.
2.
Dans le menu contextuel du panneau Composants, choisissez Recharger.
Ajout de composants aux documents
Flash
Lorsque vous faites glisser un composant du panneau Composants pour le déposer sur la
scène, un symbole de clip compilé (SWC) est ajouté dans le panneau Bibliothèque. Une fois
un symbole SWC ajouté à la bibliothèque, vous pouvez faire glisser plusieurs occurrences sur
la scène. Vous pouvez également ajouter ce composant dans un document au moment de
l’exécution en utilisant la méthode UIObject.createClassObject()ActionScript.
R EM A R QU E
54
Les composants Menu et Alerte sont deux exceptions et ne peuvent pas être instanciés
à l’aide UIObject.createClassObject(). Ils utilisent plutôt la méthode show().
Utilisation des composants
Ajout d’un composant pendant la programmation
Vous pouvez ajouter un composant à un document au moyen du panneau Composants, puis
en ajouter d’autres occurrences en les faisant glisser du panneau Bibliothèque vers la scène.
Vous pouvez définir les propriétés des occurrences supplémentaires dans l’onglet Paramètres
de l’inspecteur des propriétés ou de l’inspecteur de composants.
Pour ajouter un composant à un document Flash via le panneau Composants :
1.
Choisissez Fenêtre > Composants.
2.
Effectuez l’une des opérations suivantes :
3.
■
Faites glisser un composant du panneau Composants sur la scène.
■
Double-cliquez sur un composant dans le panneau Composants.
Si le composant est un fichierFLA (tous les composants version 2 installés sont des
fichiersSWC) et si vous avez modifié des enveloppes pour une autre occurrence du même
composant ou d’un composant qui partage des enveloppes avec celui que vous ajoutez,
effectuez l’une des opérations suivantes :
■
■
Choisissez Ne pas remplacer les éléments existants pour conserver les enveloppes
modifiées et les appliquer au nouveau composant.
Pour remplacer toutes les enveloppes par les enveloppes par défaut, choisissez
Remplacer les éléments existants. Le nouveau composant, et toutes ses versions
précédentes ou celles des composants qui partagent ses enveloppes, utiliseront les
enveloppes par défaut.
4.
Sélectionnez le composant sur la scène.
5.
Choisissez Fenêtre > Propriétés > Propriétés.
6.
Dans l’inspecteur des propriétés, nommez l’occurrence de composant.
7.
Cliquez sur l’onglet Paramètres et définissez les paramètres de l’occurrence.
L’illustration suivante présente l’inspecteur des propriétés pour le composant TextInput du
fichier exemple TipCalculator.fla (stocké dans le répertoire Flash 8/Samples and Tutorials/
Samples/Components/TipCalculator).
Ajout de composants aux documents Flash
55
Pour plus d’informations, reportez-vous à Définition des paramètres des composants,
page 59.
8.
Changez la taille du composant comme vous le souhaitez en modifiant les valeurs de la
largeur et de la hauteur.
Pour plus d’informations sur le dimensionnement des types spécifiques de composants,
consultez les entrées des composants dans Référence du langage des composants.
9.
Pour modifier la couleur et la mise en forme du texte d’un composant, exécutez une ou
plusieurs des actions suivantes :
■
■
■
Définissez ou modifiez la valeur d’une propriété de style pour une occurrence de
composant via la méthode setStyle(), disponible pour tous les composants. Pour
plus d’informations, reportez-vous à UIObject.setStyle(), page 1416.
Modifiez les propriétés souhaitées sur la déclaration de style global affectée à tous les
composants de la version 2.
Créez une déclaration de style personnalisé pour certaines occurrences de composant.
Pour plus d’informations, reportez-vous à Utilisation de styles pour personnaliser la
couleur et le texte des composants, page 86.
10. Pour
■
■
personnaliser l’apparence d’un composant, effectuez l’une des opérations suivantes :
Appliquez un thème. (Voir Présentation des thèmes, page 116).
Modifier les enveloppes d’un composant (voir A propos de l’application d’enveloppes aux
composants, page 101).
Ajout de composants à l’exécution avec ActionScript
Les instructions de cette section requièrent une connaissance moyenne ou avancée
d’ActionScript.
Pour ajouter des composants à une application Flash de manière dynamique, utilisez la
méthode createClassObject() (que la plupart des composants héritent de la classe
UIObject). Par exemple, vous pouvez ajouter des composants qui créent la mise en page en
fonction des préférences définies par l’utilisateur (comme sur la page d’accueil d’un
portail Web).
56
Utilisation des composants
Les composants version 2 installés avec Flash résident dans des répertoires de paquet. (Pour
plus d’informations, reportez-vous à Présentation des packages du guide Formation à
ActionScript 2.0 dans Flash. Lorsque vous ajoutez un composant à la scène au cours de la
programmation, il suffit de l’appeler par le nom de son occurrence pour y faire référence (par
exemple, myButton). Toutefois, si vous ajoutez un composant à une application avec
ActionScript (à l’exécution), vous devez soit indiquer son nom de classe entièrement qualifié
(par exemple, mx.controls.Button), soit importer le paquet avec l’instruction import.
Par exemple, pour écrire du code ActionScript faisant référence à un composant Alert, vous
pouvez utiliser l’instruction import pour référencer la classe :
import mx.controls.Alert;
Alert.show("The connection has failed", "Error");
Vous pouvez également utiliser le chemin complet du paquet :
mx.controls.Alert.show("The connection has failed", "Error");
Pour plus d’informations, consultez la section Importation de fichiers de classe du guide
Formation à ActionScript 2.0 dans Flash.
Les méthodes ActionScript permettent de définir des paramètres supplémentaires pour les
composants ajoutés dynamiquement. Pour plus d’informations, consultez la section Référence
du langage des composants.
R E MA R Q UE
Pour ajouter un composant à un document au moment de l’exécution, ce composant
doit être dans la bibliothèque lorsque le fichier SWF est compilé. Pour ajouter un
composant à la bibliothèque, faites glisser l’icône du composant du panneau
Composants vers la bibliothèque. De plus, si vous chargez un clip contenant un
composant instancié de manière dynamique (en utilisant ActionScript) dans un autre
clip, le composant du clip parent doit être présent dans la bibliothèque lorsque le fichier
SWF est compilé.
Pour ajouter un composant à votre document Flash avec ActionScript :
1.
Faites glisser un composant du panneau Composants dans la bibliothèque du document
actuel.
R EM A R QU E
Les composants sont paramétrés par défaut sur Exporter dans la première image
(clic droit pour Windows ou Ctrl + clic pour Macintosh) et sélectionnez l’option de
menu Liaison pour voir le paramètre Exporter dans la première image). Si vous
souhaitez utiliser un préchargement pour une application contenant des
composants, vous devez modifier l’image d’exportation. Pour obtenir des
instructions, reportez-vous à Utilisation d’un préchargement avec les composants,
page 66.
2.
Dans le scénario, sélectionnez l’image dans laquelle vous souhaitez ajouter le composant.
3.
Ouvrez le panneau Actions s’il n’est pas déjà ouvert.
Ajout de composants aux documents Flash
57
4.
Appelez la méthode createClassObject() pour créer l’occurrence du composant au
moment de l’exécution.
Cette méthode peut être appelée seule ou à partir de n’importe quelle occurrence de
composant. Elle possède les paramètres suivants : le nom de classe du composant, le nom
de la nouvelle occurrence, la profondeur et un objet d’initialisation facultatif qui permet
de définir les propriétés à l’exécution.
Vous pouvez spécifier le paquet de classes dans le paramètre de nom de classe, comme dans
l’exemple suivant :
createClassObject(mx.controls.CheckBox, "cb", 5, {label:"Check Me"});
Vous pouvez également importer le paquet de classes de la manière suivante :
import mx.controls.CheckBox;
createClassObject(CheckBox, "cb", 5, {label:"Check Me"});
Pour plus d’informations, consultez les sections UIObject.createClassObject(),
page 1395 et Chapitre 4, Gestion des événements des composants, page 69.
Composants du panneau Bibliothèque
Lorsque vous ajoutez un composant à un document, il apparaît sous forme de symbole de clip
compilé (fichier SWC) dans le panneau Bibliothèque.
Composant ComboBox dans le panneau Bibliothèque
58
Utilisation des composants
Vous pouvez ajouter plusieurs occurrences d’un composant en faisant glisser son icône de la
bibliothèque vers la scène.
Pour plus d’informations sur les clips compilés, consultez la section Présentation des clips
compilés et des fichiers SWC, page 21.
Définition des paramètres des
composants
Chaque composant dispose de paramètres que vous pouvez définir pour modifier son
apparence et son comportement. Un paramètre est une propriété qui apparaît dans
l’inspecteur des propriétés et l’inspecteur des composants. Les propriétés les plus utilisées
apparaissent sous forme de paramètres de création ; les autres doivent être définies à l’aide
d’ActionScript. Tous les paramètres définissables pendant la programmation peuvent
également être modifiés avec ActionScript. La définition d’un paramètre par ActionScript
remplace toutes les valeurs définies lors de la programmation.
Tous les composants de la version 2 (Interface utilisateur) héritent des propriétés et des
méthodes des classes UIObject et UIComponent, utilisées par tous les composants, telles que
UIObject.setSize(), UIObject.setStyle(), UIObject.x et UIObject.y. Chaque
composant possède également des propriétés et des méthodes qui lui sont propres, dont
certaines sont disponibles lors de la programmation. Par exemple, le composant ProgressBar a
une propriété percentComplete (ProgressBar.percentComplete) et le composant
NumericStepper, les propriétés nextValue et previousValue
(NumericStepper.nextValue, NumericStepper.previousValue).
Vous pouvez définir les paramètres de l’occurrence d’un composant via l’inspecteur des
propriétés ou des composants (le panneau utilisé n’a pas d’importance).
Définition des paramètres des composants
59
Pour entrer le nom d’une occurrence de composant dans l’inspecteur des
propriétés :
1.
Choisissez Fenêtre > Propriétés > Propriétés.
2.
Sélectionnez une occurrence de composant sur la scène.
3.
Entrez un nom d’occurrence dans la zone de texte placée sous le mot Composant.
Pour faciliter la compréhension de votre code ActionScript, il est conseillé de préciser le
type du composant en ajoutant un suffixe au nom de l’occurrence. Dans cet exemple, le
nom de l’occurrence est states_cb car le composant est une zone de liste déroulante
(Combo Box) énumérant les états américains.
Pour entrer les paramètres d’une occurrence de composant dans l’inspecteur
de composants :
1.
Choisissez Fenêtre > Inspecteur de composants.
2.
Sélectionnez une occurrence de composant sur la scène.
3.
Pour entrer les paramètres, cliquez sur l’onglet Paramètres.
4.
Pour définir ou consulter les liaisons ou les schémas d’un composant, cliquez sur leurs
onglets respectifs. Pour plus d’informations, reportez-vous à la section Intégration des
données (Flash Professionnel uniquement) du guide Utilisation de Flash.
60
Utilisation des composants
Dimensionnement des composants
Pour redimensionner les occurrences de vos composants, employez l’outil Transformation
libre ou la méthode setSize().
Redimensionnement du composant Menu sur la scène à l’aide de l’outil Transformation libre
Vous pouvez appeler la méthode setSize() à partir de n’importe quelle occurrence de
composant pour le redimensionner (voir UIObject.setSize(), page 1414). Le code
suivant redimensionne le composant TextArea avec une largeur de 200 pixels et une hauteur
de 300 pixels :
myTextArea.setSize(200, 300);
R EMA R Q U E
Si vous utilisez les propriétés ActionScript _width et _height pour régler la largeur et la
hauteur d’un composant, le redimensionnement est effectué, mais la disposition du
contenu reste la même. Le composant risque alors d’être déformé pendant la lecture de
l’animation.
Dimensionnement des composants
61
La taille d’un composant n’est pas automatiquement ajustée à son étiquette. Si une occurrence
de composant ajoutée à un document n’est pas assez grande pour contenir son étiquette, le
texte de celle-ci sera tronqué. Vous devez donc adapter le composant à la taille de son
étiquette.
Etiquette tronquée du composant CheckBox
Pour plus d’informations sur le redimensionnement des composants, consultez les entrées
correspondantes dans le manuel Référence du langage des composants.
Suppression de composants dans les
documents Flash
Pour supprimer les occurrences d’un composant dans un document Flash, vous devez
supprimer le composant de la bibliothèque en effaçant l’icône de son clip compilé. Supprimer
le composant dans la scène ne suffit pas.
Pour supprimer un composant d’un document :
1.
Dans le panneau Bibliothèque, sélectionnez le symbole du clip compilé (SWC).
2.
Cliquez sur le bouton Supprimer en bas du panneau Bibliothèque ou choisissez Supprimer
dans le menu des options de la bibliothèque.
3.
Dans la boîte de dialogue Supprimer, cliquez sur Supprimer pour confirmer l’opération.
62
Utilisation des composants
Utilisation des conseils de code
Lorsque vous utilisez ActionScript 2.0, vous pouvez utiliser le typage strict pour une variable
basée sur une classe intégrée, notamment les classes de composants. Dans ce cas, l’éditeur
ActionScript affiche des conseils de code pour cette variable. Supposons par exemple que vous
tapiez le code suivant :
import mx.controls.CheckBox;
var myCheckBox:CheckBox;
myCheckBox.
Dès que vous tapez le point après myCheckBox, Flash affiche la liste des méthodes et propriétés
disponibles pour les composants CheckBox, puisque vous avez désigné la variable comme
étant de type CheckBox. Pour plus d’informations, consultez la section Affectation des types de
données et typage strict et Utilisation des conseils de code dans le guide Formation à ActionScript
2.0 dans Flash.
Création de la navigation personnalisée
du focus
Lorsqu’un utilisateur appuie sur la touche de tabulation pour naviguer dans une application
Flash ou clique dans une application, la classe FocusManager détermine quel composant
reçoit le focus de saisie (pour plus d’informations, reportez-vous à Classe FocusManager dans
le guideRéférence du langage des composants). Il n’est pas nécessaire d’ajouter une occurrence
FocusManager à une application ou du code pour activer le gestionnaire de focus.
Si un objet RadioButton reçoit le focus, le gestionnaire de focus l’examine, de même que tous
les objets ayant la même valeur groupName, puis attribue le focus à l’objet dont la propriété
selected est définie sur true.
Chaque composant Window modal contenant une occurrence du gestionnaire de focus, ses
contrôles constituent son propre jeu de tabulation. Ainsi, l’utilisateur ne risque pas de
naviguer par erreur vers les composants des autres fenêtres en appuyant sur la touche de
tabulation.
Création de la navigation personnalisée du focus
63
Pour créer une navigation de focus dans une application, définissez la propriété tabIndex
pour tous les composants (y compris les boutons) qui doivent recevoir le focus. Lorsqu’un
utilisateur appuie sur la touche de tabulation, la classe FocusManager recherche un objet
activé dont la valeur tabIndex est supérieure à la valeur actuelle de tabIndex. Lorsque la
classe FocusManager atteint la propriété tabIndex la plus élevée, elle revient à 0. Par exemple,
dans le code suivant, l’objet comment (probablement un composant TextArea) reçoit le focus
en premier, puis l’occurrence okButton le reçoit à son tour :
var comment:mx.controls.TextArea;
var okButton:mx.controls.Button;
comment.tabIndex = 1;
okButton.tabIndex = 2;
Vous pouvez également utiliser le panneau Accessibilité pour affecter une valeur d’indexation.
Si aucune valeur d’indexation n’est définie sur la scène, le gestionnaire de focus utilise les
niveaux de profondeur (l’ordre z). Les niveaux de profondeur sont principalement définis par
l’ordre dans lequel les composants sont déposés sur la scène. Vous pouvez néanmoins utiliser
les commandes Modifier > Réorganiser > Mettre au premier plan/Mettre à l’arrière-plan pour
déterminer l’ordre z final.
Pour attribuer le focus à un composant dans une application, appelez la méthode
FocusManager.setFocus().
Pour créer un bouton qui reçoive le focus lorsqu’un utilisateur appuie sur Entrée (Windows)
ou sur Retour (Macintosh), définissez la propriété FocusManager.defaultPushButton sur
l’occurrence du bouton désiré, comme dans le code suivant :
focusManager.defaultPushButton = okButton;
La Classe FocusManager (API) remplace le rectangle de focus par défaut de Flash Player par
un rectangle de focus personnalisé dont les bords sont arrondis.
Pour plus d’informations sur la création d’un programme de focus dans une application Flash,
consultez la section Classe FocusManager du guide Référence du langage des composants.
Gestion de la profondeur des
composants dans un document
Pour positionner un composant devant ou derrière un autre objet dans une application, vous
devez utiliser la Classe DepthManager du guide Référence du langage des composants. Les
méthodes de la classe DepthManager vous permettent de placer les composants d’interface
utilisateur dans l’ordre relatif approprié. Par exemple, une liste déroulante s’ouvre devant
d’autres composants, des curseurs apparaissent devant tous les objets, des boîtes de dialogue
flottent au-dessus du contenu, etc.
64
Utilisation des composants
Le gestionnaire DepthManager sert deux objectifs principaux : gérer les affectations de
profondeurs relatives dans tout document et gérer les profondeurs réservées au scénario racine
pour les services système, tels que le curseur et les info-bulles.
Pour utiliser DepthManager, appelez ses méthodes.
Le code suivant place l’occurrence du composant loader à une profondeur inférieure à celle
du composant button (et, dans le fichier SWF publié, elle apparaît “sous” le bouton, s’ils se
chevauchent) :
loader.setDepthBelow(button);
R EM A R QU E
Vous pouvez également gérer les épaisseurs relatives grâce aux calques et aux options
de menu Modification > Réorganisation de votre document. Les composants répondent
aux mêmes règles de gestion de la profondeur d’exécution en utilisant les calques et la
disposition des clips.
Composants de l’aperçu en direct
La fonction Aperçu en direct, activée par défaut, permet de visualiser les composants sur la
scène tels qu’ils apparaîtront dans le contenu Flash publié, avec leur taille approximative.
L’aperçu en direct reflète les différents paramètres des composants utilisés. Pour plus
d’informations sur les paramètres de composant visibles dans l’aperçu en direct, consultez les
entrées de chaque composant dans le guide Référence du langage des composants.
Composant Button avec Aperçu en direct activé
Composant Button avec Aperçu en direct désactivé
Les composants de l’aperçu en direct ne sont pas opérationnels. Pour tester leur
fonctionnement, utilisez la commande Contrôle > Tester l’animation.
Pour activer ou désactiver l’aperçu en direct :
■
Choisissez Contrôle > Activer l’aperçu en direct. Une coche en regard de l’option indique
qu’elle est activée.
Composants de l’aperçu en direct
65
Utilisation d’un préchargement avec les
composants
Le préchargement implique le chargement de certaines des données d’un fichier SWF avant
que l’utilisateur de commence à interagir avec. Par défaut, les composants et les classes sont
paramétrés pour une exportation dans la première image du document contenant les
composants. Les composants et les classes étant les premières données à charger, vous pouvez
rencontrer des problèmes lors de l’implémentation d’une barre de progression ou lors du
chargement de l’animation. Les composants et les classes peuvent en particulier être chargés
avant la barre de progression, mais vous souhaitez que la barre de progression corresponde à la
progression de chargement de toutes les données (y compris les classes). Par conséquent, il est
recommandé de charger les classes après les autres parties du fichier SWF, mais avant d’utiliser
les composants.
Pour ce faire, lorsque vous créez un préchargement personnalisé pour une application
contenant les composants, définissez les paramètres de publication du fichier pour exporter
toutes les classes dans l’image contenant vos composants. Pour afficher une liste de tous les
composants dans les thèmes Halo et Sample qui ont leurs éléments paramétrés sur Exporter
dans la première image, reportez-vous à Modification des paramètres d’exportation, page 125.
Pour modifier l’image d’exportation de toutes vos images :
1.
Choisissez Fichier > Paramètres de publication.
2.
Sous l’onglet Flash de la boîte de dialogue Paramètres de publication, assurez-vous que la
version ActionScript est paramétrée sur ActionScript 2.0.
3.
Cliquez sur le bouton Paramètres à droite de la version ActionScript.
4.
Dans les paramètres ActionScript 2.0, changez le nombre de la zone de texte Exporter
l’image pour les classes et mettez-le dans l’image où vos composants apparaissent en
premier.
Vous ne pouvez pas utiliser n’importe quelle classe tant que la tête de lecture n’a pas atteint
l’image cible du chargement. Dans la mesure où les composants nécessitent des classes pour
leur fonctionnalité, vous devez charger des composants après l’image spécifiée pour le
chargement des classes. Si vous procédez à l’exportation de vos classes dans l’image 3, vous ne
pouvez pas exploiter ces classes tant que la tête de lecture n’a pas atteint l’image 3 et n’a pas
chargé les données.
Si vous devez précharger un fichier utilisant des composants, vous devez également les
précharger dans le fichier SWF. Pour ce faire, vous devez définir vos composants de façon à les
exporter pour une autre image dans le fichier SWF.
66
Utilisation des composants
Pour changer l’image cible de la procédure d’exportation des composants :
1.
Choisissez Fenêtre > Bibliothèque pour ouvrir le panneau Bibliothèque.
2.
Cliquez avec le bouton droit de la souris (Windows) ou tout en appuyant sur la touche
Contrôle (Macintosh) sur un composant de la bibliothèque.
3.
Sélectionnez Liaison dans le menu contextuel.
4.
Désactivez l’option Exporter dans la première image.
5.
Cliquez sur OK.
6.
Choisissez Fichier > Paramètres de publication.
7.
Sélectionnez l’onglet Flash, puis cliquez sur le bouton Paramètres.
8.
Entrez un numéro dans la zone de texte Exporter l’image pour les classes et cliquez sur OK.
Les classes se chargent dans cette image.
9.
Fermez la boîte de dialogue Paramètres de publication en cliquant sur le bouton OK.
Lorsque les composants ne se chargent pas sur la première image, vous pouvez créer une barre
de progression personnalisée pour la première image du fichier SWF. Ne référencez aucun
composant dans votre code ActionScript ou n’incluez aucun composant sur la scène pendant
le chargement des classes destinées à l’image spécifiée au cours de l’étape 7.
R E MA R Q UE
Les composants doivent être exportés après les classes ActionsScript qu’ils utilisent.
Chargement des composants
Si vous chargez des composants version 2 dans un fichier SWF ou dans le composant Loader,
il se peut qu’ils ne fonctionnent pas correctement. Ces composants comprennent : Alert,
ComboBox, DateField, Menu, MenuBar et Window.
Lors d’un appel à la méthode loadMovie() ou d’un chargement dans le composant Loader,
utilisez la propriété _lockroot. Si vous utilisez le composant Loader, ajoutez le code suivant :
myLoaderComponent.content._lockroot = true;
Si vous utilisez un clip avec appel à la méthode loadMovie(), ajoutez le code suivant :
myMovieClip._lockroot = true;
Si vous ne définissez pas _lockroot sur true dans le clip du chargeur, ce dernier peut accéder
uniquement à sa propre bibliothèque, et non à celle du clip chargé.
Chargement des composants
67
La propriété _lockroot est prise en charge par Flash Player 7. Pour plus d’informations sur
cette propriété, reportez-vous à %{_lockroot (MovieClip._lockroot property)}% dans Flash
ActionScript Language Reference (Guide de référence du langage Flash ActionScript).
Migration des composants de la version 1
vers l’architecture de la version 2
Les composants version 2 respectent plusieurs normes du Web (en matière d’événements
[www.w3.org/TR/DOM-Level-3-Events/events.html], de styles, d’instructions de lecture/
définition, etc.). Ils sont très différents des composants version 1 de Macromedia Flash MX et
des DRK antérieurs à Macromedia Flash MX 2004. Ils possèdent plusieurs API et ont été
rédigés en langage ActionScript 2. L’utilisation de composants version 1 et version 2 dans une
même application peut donc entraîner un comportement imprévisible. Pour plus
d’informations sur la mise à niveau des composants version 1 pour utiliser la gestion
d’événements, les styles de la version 2 et l’accès de lecture/définition aux propriétés au lieu
des méthodes, consultez le Chapitre 6, Création de composants, page 135.
Les applications Flash qui contiennent des composants version 1 fonctionnent correctement
dans Flash Player 6 et 7, lorsqu’elles ont été publiées pour Flash Player 6 ou Flash Player 6
(6.0.65.0). Si vous souhaitez mettre vos applications à niveau pour pouvoir les publier dans
Flash Player 7, vous devez convertir votre code pour utiliser le typage strict des données. Pour
plus d’informations, consultez la section Ecriture de fichiers de classe personnalisée du guide
Formation à ActionScript 2.0 dans Flash.
68
Utilisation des composants
CHAPITRE 4
4
Gestion des événements des
composants
Chaque composant déclenche des événements qui sont diffusés à chaque interaction de
l’utilisateur avec ce composant (par exemple, les événements click et change) ou lorsqu’une
opération importante intervient sur ce composant (par exemple, l’événement load). Pour
gérer un événement, vous rédigez du code ActionScript qui s’exécute lorsque l’événement se
produit.
Chaque composant diffuse son propre jeu d’événements. Ce jeu comprend les événements de
toutes les classes héritées par le composant. Cela signifie que tous les composants, à l’exception
de ceux de support, héritent des événements issus des classes UIObject et UIComponent car
ces dernières sont les classes de base de l’architecture version 2. Pour connaître la liste des
événements diffusés par un composant, consultez l’entrée de ce dernier et les entrées de ses
classes ancêtres dans le guide Référence du langage des composants.
Ce chapitre présente la gestion des événements des composants à travers plusieurs versions
d’une même application Macromedia Flash, appelée TipCalculator. Les fichiers FLA et SWF
sont installés avec Flash dans :
■
■
Sous Windows : le dossier C:\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\TipCalculator.
Sous Macintosh : le dossier HD/Applications/Macromedia Flash 8/Samples and
Tutorials/Samples/Components/TipCalculator.
Ce chapitre contient les sections suivantes :
Gestion des événements à l’aide d’écouteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Délégation des événements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Objet événement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Utilisation du gestionnaire d’événements on() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
69
Gestion des événements à l’aide
d’écouteurs
L’architecture des composants version 2 possède un modèle d’événement diffuseur/écouteur.
(Le diffuseur est parfois appelé dispatcher.) Il est important de bien comprendre les concepts
suivants à propos de ce modèle :
■
Tous les événements sont diffusés par l’occurrence d’une classe de composant.
(L’occurrence de composant est le diffuseur.)
■
Un écouteur peut être une fonction ou un objet. S’il s’agit d’un objet, une fonction de
rappel doit y être définie. L’écouteur gère l’événement, c’est-à-dire que la fonction de
rappel s’exécute lorsque l’événement se produit.
■
Pour associer un écouteur à un diffuseur, appelez la méthode addEventListener()
depuis le diffuseur. Utilisez la syntaxe suivante :
componentInstance.addEventListener("eventName",
listenerObjectORFunction);
■
Vous pouvez associer plusieurs écouteurs à une seule occurrence de composant.
myButton.addEventListener("click", listener1);
myButton.addEventListener("click", listener2);
■
Vous pouvez associer un seul écouteur à plusieurs occurrences de composant.
myButton.addEventListener("click", listener1);
myButton2.addEventListener("click", listener1);
■
L’objet événement est transmis à la fonction gestionnaire.
Vous pouvez utiliser l’objet événement dans le corps de la fonction pour récupérer les
informations sur le type d’événement et sur l’occurrence qui diffuse l’événement. Voir
Objet événement, page 82.
■
Un objet écouteur reste actif jusqu’à ce qu’il soit supprimé explicitement à l’aide de
EventDispatcher.removeEventListener() . Voici un exemple d’utilisation :
myComponent.removeEventListener(“change”, ListenerObj);
70
Gestion des événements des composants
Utilisation des objets écouteurs
Pour utiliser un objet écouteur, vous pouvez employer le mot-clé this pour définir l’objet
actuel comme écouteur, utiliser un objet déjà existant dans votre application ou créer un
nouvel objet.
■
Dans la plupart des cas, choisissez this.
Il est souvent plus facile d’utiliser l’objet actuel (this) comme écouteur, car son domaine
contient tous les composants devant réagir à la diffusion de l’événement.
■
Si cela s’avère plus pratique, servez-vous d’un objet existant.
Par exemple, dans une application de formulaires Flash, vous pouvez utiliser un formulaire
comme objet écouteur s’il contient les composants réagissant à l’événement. Dans ce cas,
placez le code dans une image du scénario du formulaire.
■
Créez un nouvel objet écouteur si de nombreux composants diffusent un événement, tel
que click, alors que vous voulez que seuls certains objets écouteurs réagissent.
Si vous choisissez l’objet this, définissez une fonction portant le même nom que l’événement
à gérer. La syntaxe est la suivante :
function eventName(evtObj:Object){
// Entrez votre code ici.
};
Si vous désirez utiliser un nouvel objet écouteur, commencez par le créer, définissez ensuite
une propriété portant le même nom que les événements, puis affectez-la à une fonction de
rappel qui s’exécute à la diffusion de l’événement, comme suit :
var listenerObject:Object = new Object();
listenerObject.eventName = function(evtObj:Object){
// Entrez votre code ici.
};
Pour utiliser un objet existant, utilisez la même syntaxe que pour un nouvel objet écouteur,
mais sans créer l’objet, comme suit :
existingObject.eventName = function(evtObj:Object){
// Entrez votre code ici.
};
CO NS E I L
Le paramètre evtObj est un objet généré automatiquement lors du déclenchement d’un
événement et transmis à la fonction de rappel. L’objet événement a des propriétés qui
contiennent des informations sur l’événement. Pour plus d’informations, consultez la
section Objet événement, page 82.
Gestion des événements à l’aide d’écouteurs
71
Pour finir, vous appelez la méthode addEventListener() à partir de l’occurrence de
composant qui diffuse l’événement. Cette méthode réclame deux paramètres : une chaîne
contenant le nom de l’événement et une référence à l’objet écouteur.
componentInstance.addEventListener("eventName", listenerObject);
Voici le segment de code complet, que vous pouvez copier et coller. N’oubliez pas de
remplacer tout code en italique par de vraies valeurs. Vous pouvez utiliser listenerObject et
evtObj ou tout autre identifiant légal, mais attribuez le nom de l’événement au paramètre
eventName.
var listenerObject:Object = new Object();
listenerObject.eventName = function(evtObj:Object){
// Le code placé ici s’exécute
// lors du déclenchement de l’événement.
};
componentInstance.addEventListener("eventName", listenerObject);
Le segment de code suivant utilise le mot-clé this comme objet écouteur :
function eventName(evtObj:Object){
// Le code placé ici s’exécute
// lors du déclenchement de l’événement.
}
componentInstance.addEventListener("eventName", this);
Vous pouvez appeler la méthode addEventListener() depuis n’importe quelle occurrence de
composant car elle complète (mix-in) chaque composant de la classe EventDispatcher. (Une
classe « mix-in » est une classe qui complète les fonctionnalités d’une autre classe.) Pour plus
d’informations, consultez la section EventDispatcher.addEventListener() dans Référence du
langage des composants.
Pour plus d’informations sur les événements diffusés par un composant, consultez l’entrée des
composants individuels dans le guide Référence du langage des composants. Par exemple, les
événements du composant Button sont énumérés dans la section Button (ou Aide > Référence
du langage des composants > Composant Button > Classe Button > Evénements de la classe
Button).
Pour enregistrer un objet écouteur dans un fichier Flash (FLA) :
1.
Dans Flash, choisissez Fichier > Nouveau et créez un nouveau document Flash.
2.
Faites glisser un composant Button du panneau Composants sur la scène.
3.
Dans l’inspecteur des propriétés, saisissez le nom d’occurrence myButton.
4.
Faites glisser un composant TextInput du panneau Composants sur la scène.
5.
Dans l’inspecteur des propriétés, saisissez le nom d’occurrence myText.
6.
Sélectionnez l’image 1 dans le scénario.
72
Gestion des événements des composants
7.
Choisissez Fenêtre > Actions.
8.
Dans le panneau Actions, entrez le code suivant :
var myButton:mx.controls.Button;
var myText:mx.controls.TextInput;
function click(evt){
myText.text = evt.target;
}
myButton.addEventListener("click", this);
La propriété target de l’objet événement, evt, fait référence à l’occurrence qui diffuse
l’événement. Ce code affiche la valeur de la propriété target dans le composant
TextInput.
Pour enregistrer un objet écouteur dans un fichier de classe (AS) :
1.
Ouvrez le fichier TipCalculator.fla situé dans le dossier spécifié à la section Utilisation des
composants, page 53.
2.
Ouvrez le fichier TipCalculator.as situé dans le dossier spécifié à la section Utilisation des
composants, page 53.
3.
Dans le fichier FLA, sélectionnez form1 et regardez le nom de la classe, TipCalculator, dans
l’inspecteur des propriétés.
Il s’agit du lien entre le formulaire et le fichier de classe. Le code de cette application se
trouve dans le fichier TipCalculator.as. La forme tient compte des propriétés et des
comportements définis par la classe qui lui est affectée.
4.
Dans le fichier AS, allez à la ligne 25, public function onLoad():Void.
La fonction onLoad() s’exécute lorsque le formulaire est chargé dans Flash Player. Dans le
corps de la fonction, l’occurrence de composant TextInput subtotal et les trois
occurrences de composant RadioButton, percentRadio15, percentRadio18 et
percentRadio20, appellent la méthode addEventListener() pour associer un écouteur
à un événement.
5.
Examinez maintenant la ligne 27, subtotal.addEventListener(« change », this).
Lorsque vous appelez la méthode addEventListener(), vous devez lui transmettre deux
paramètres. Le premier est une chaîne indiquant le nom de l’événement diffusé, dans ce
cas, « change ». Le second est une référence à l’objet ou à la fonction qui gère
l’événement. Dans ce cas, le paramètre est le mot-clé this, qui fait référence à une
occurrence du fichier de classe (un objet). Flash recherche ensuite dans l’objet une
fonction qui porte le nom de l’événement.
Gestion des événements à l’aide d’écouteurs
73
6.
Examinez la ligne 63, public function change(event:Object):Void.
Cette fonction s’exécute lorsque l’occurrence TextInput subtotal est modifiée.
7.
Sélectionnez le fichier TipCalculator.fla et choisissez Contrôle > Tester l’animation pour
tester le fichier.
Utilisation de la fonction de rappel handleEvent
Vous pouvez également utiliser des objets écouteurs qui prennent en charge la fonction
handleEvent. Quel que soit le nom de l’événement diffusé, la méthode handleEvent de
l’objet écouteur est appelée. Pour gérer plusieurs événements, vous devez utiliser une
instruction if...else ou switch. Par exemple, le code suivant utilise une instruction
if...else pour traiter les événements click et change :
// Définition de la fonction handleEvent
// Transfert de evt en tant que paramètre de l’objet événement
function handleEvent(evt){
// Cette instruction vérifie si l’événement était un clic.
if (evt.type == "click"){
// Cette instruction agit si l’événement était un clic.
} else if (evt.type == "change"){
// Cette instruction agit différemment si l’événement était une
modification.
}
};
//
//
//
//
Cette instruction associe l’objet écouteur à
deux occurrences de composant différentes
car la fonction est définie sur
l’objet « this », qui est l’écouteur.
instance.addEventListener("click", this);
instance2.addEventListener("change", this);
74
Gestion des événements des composants
Utilisation des fonctions d’écouteur
Contrairement à la syntaxe de handleEvent, plusieurs fonctions d’écouteur peuvent gérer
différents événements. Ainsi, au lieu des instructions de vérification if et else if dans
myHandler, il vous suffit de définir myChangeHandler pour l’événement change et
myScrollHandler pour l’événement scroll, puis de les enregistrer, comme suit :
myList.addEventListener("change", myChangeHandler);
myList.addEventListener("scroll", myScrollHandler);
Pour utiliser une fonction d’écouteur, vous devez d’abord définir une fonction :
function myFunction:Function(evtObj:Object){
// Entrez votre code ici.
}
C O N S EI L
Le paramètre evtObj est un objet généré automatiquement lors du déclenchement d’un
événement et transmis à la fonction. L’objet événement a des propriétés qui contiennent
des informations sur l’événement. Pour plus d’informations, consultez la section Objet
événement, page 82.
Vous pouvez ensuite appeler la méthode addEventListener() à partir de l’occurrence de
composant qui diffuse l’événement. Cette méthode réclame deux paramètres : une chaîne
contenant le nom de l’événement et une référence à la fonction.
componentInstance.addEventListener("eventName", myFunction);
Vous pouvez appeler la méthode addEventListener() depuis n’importe quelle occurrence de
composant car elle complète chaque composant UI de la classe EventDispatcher. Pour plus
d’informations, reportez-vous à EventDispatcher.addEventListener().
Pour plus d’informations sur les événements diffusés par un composant, consultez l’entrée de
chaque composant individuel dans le guide Référence du langage des composants.
Pour enregistrer un objet écouteur dans un fichier Flash (FLA) :
1.
Dans Flash, choisissez Fichier > Nouveau et créez un nouveau document Flash.
2.
Faites glisser un composant List du panneau Composants sur la scène.
3.
Dans l’inspecteur des propriétés, saisissez le nom d’occurrence myList.
4.
Sélectionnez l’image 1 dans le scénario.
5.
Choisissez Fenêtre > Actions.
Gestion des événements à l’aide d’écouteurs
75
6.
Dans le panneau Actions, entrez le code suivant :
// Déclaration des variables
var myList:mx.controls.List;
var myHandler:Function;
// Ajout des éléments à la liste
myList.addItem("Bird");
myList.addItem("Dog");
myList.addItem("Fish");
myList.addItem("Cat");
myList.addItem("Ape");
myList.addItem("Monkey");
// Définition de la fonction myHandler
function myHandler(eventObj:Object){
// Utilisation du paramètre eventObj
// pour capturer le type d’événement
if (eventObj.type == "change"){
trace("The list changed");
} else if (eventObj.type == "scroll"){
trace("The list was scrolled");
}
}
// Association de la fonction myHandler à myList.
// Lorsqu’un élément est sélectionné (déclenchement de l’événement
change) ou que
// la liste est parcourue, myHandler s’exécute.
myList.addEventListener("change", myHandler);
myList.addEventListener("scroll", myHandler);
R E MA R Q UE
7.
Choisissez Contrôle > Tester l’animation, puis sélectionnez un élément dans la liste et
parcourez-la pour afficher les résultats dans le panneau de sortie.
A TT EN TI ON
76
La propriété type de l’objet événement, evt, fait référence au nom de l’événement.
Dans une fonction d’écouteur, le mot-clé this fait référence à l’occurrence de
l’événement qui appelle la méthode addEventListener(), pas au scénario ni à la
classe dans laquelle la fonction est définie. Toutefois, vous pouvez utiliser la classe
Delegate pour déléguer cette fonction d’écouteur à un autre domaine. Voir
Délégation des événements, page 79. Pour voir un exemple de domaine de fonction,
consultez la section suivante.
Gestion des événements des composants
Domaine des écouteurs
Le domaine fait référence à l’objet dans lequel s’exécute une fonction. Toutes les références à
des variables dans cette fonction sont reconnues comme des propriétés de cet objet. La classe
Delegate permet de désigner le domaine d’un écouteur. Pour plus d’informations, reportezvous à Délégation des événements, page 79.
Comme nous l’avons vu précédemment, vous associez un écouteur à une occurrence de
composant en appelant la méthode addEventListener(). Cette méthode réclame deux
paramètres : une chaîne contenant le nom de l’événement et une référence à un objet ou à une
fonction. Le tableau suivant présente le domaine de chaque type de paramètre :
Type d’écouteur
Domaine
Objet
Objet écouteur.
Fonction
Occurrence de composant diffusant l’événement.
Si vous transmettez un objet à une méthode addEventListener(), la fonction de rappel
affectée à cet objet (ou celle qui est définie sur cet objet) est invoquée dans le domaine de
l’objet. Cela signifie que le mot-clé this, lorsqu’il est utilisé dans la fonction de rappel, fait
référence à l’objet écouteur, comme suit :
var lo:Object = new Object();
lo.click = function(evt){
// this fait référence à l’objet lo
trace(this);
}
myButton.addEventListener("click", lo);
Toutefois, si vous transmettez une fonction à la méthode addEventListener(), elle est
invoquée dans le domaine de l’occurrence de composant qui appelle cette méthode. Cela
signifie que le mot-clé this, lorsqu’il est utilisé dans la fonction, fait référence à l’occurrence
de composant à l’origine de la diffusion. Cela pose un problème lorsque vous définissez la
fonction dans un fichier de classe. Vous ne pouvez pas accéder aux propriétés et méthodes du
fichier de classe par les chemins prévus car this ne pointe pas vers une occurrence de la classe.
Pour résoudre ce problème, servez-vous de la classe Delegate pour déléguer la fonction au
domaine approprié. Voir Délégation des événements, page 79.
Gestion des événements à l’aide d’écouteurs
77
Le code suivant illustre le domaine d’une fonction lors de son transfert à la méthode
addEventListener() dans un fichier de classe. Pour utiliser ce code, copiez-le dans un fichier
ActionScript (AS) nommé Cart.as, puis créez un fichier Flash (FLA) avec un composant
Button, myButton et un composant DataGrid, myGrid. Sélectionnez les deux composants sur
la scène et appuyez sur la touche F8 pour les convertir en un nouveau symbole appelé Cart.
Dans les Propriétés de liaison du symbole Panier, affectez-le à la classe Cart.
class Cart extends MovieClip {
var myButton:mx.controls.Button;
var myGrid:mx.controls.DataGrid;
function myHandler(eventObj:Object){
// Utilisation du paramètre eventObj
// pour capturer le type d’événement.
if (eventObj.type == "click"){
/* Envoi de la valeur de this au panneau de sortie.
myHandler étant une fonction non définie
sur un objet écouteur, this fait référence à
l’occurrence de composant associée à myHandler
(myButton). De même, this ne faisant pas référence à une
occurrence de la classe Cart, myGrid n’est pas définie.
*/
trace("this: " + this);
trace("myGrid: " + myGrid);
}
}
// Association de la fonction myHandler à myButton
// Lorsque l’utilisateur clique sur le bouton, myHandler s’exécute.
function onLoad():Void{
myButton.addEventListener("click", myHandler);
}
}
78
Gestion des événements des composants
Délégation des événements
Vous pouvez importer la classe Delegate dans vos scripts ou vos classes pour déléguer les
événements dans des objectifs et des fonctions spécifiques (reportez-vous à Classe Delegate
dans le guide Référence du langage des composants). Pour importer la classe Delegate, utilisez la
syntaxe suivante :
import mx.utils.Delegate;
compInstance.addEventListener("eventName", Delegate.create(scopeObject,
function));
Le paramètre scopeObject désigne le domaine dans lequel le paramètre function est appelé.
Deux utilisations courantes permettent d’appeler Delegate.create() :
■
Pour distribuer le même événement à deux fonctions différentes.
Consultez la section suivante.
■
Pour appeler des fonctions dans le domaine de la classe conteneur.
Lorsque vous transmettez une fonction sous forme de paramètre à la méthode
addEventListener(), elle est invoquée dans le domaine de l’occurrence de composant
diffuseur, pas de l’objet dans lequel elle est déclarée. Voir Délégation du domaine d’une
fonction, page 81.
Délégation d’événements aux fonctions
L’appel de Delegate.create() s’avère très pratique lorsque deux de vos composants
diffusent des événements du même nom. Par exemple, dans le cas d’une case à cocher et d’un
bouton, il vous faudra utiliser l’instruction switch sur l’information obtenue de la propriété
eventObject.target pour connaître le composant qui diffuse l’événement click.
Pour utiliser le code suivant, placez une case à cocher nommée myCheckBox_chb et un bouton
nommé myButton_btn sur la scène. Sélectionnez les deux occurrences et appuyez sur la
touche F8 pour créer un nouveau symbole. Cliquez sur Avancé si la boîte de dialogue est en
mode de base et sélectionnez Exporter pour ActionScript. Saisissez Cart dans la zone de texte
Classe AS 2.0. Dans l’inspecteur des propriétés, définissez le nom de l’occurrence pour le
nouveau symbole. Le symbole est à présent associé à la classe Cart et une occurrence du
symbole devient une occurrence de cette classe.
import mx.controls.Button;
import mx.controls.CheckBox;
class Cart {
var myCheckBox_chb:CheckBox;
var myButton_btn:Button;
Délégation des événements
79
function onLoad() {
myCheckBox_chb.addEventListener("click", this);
myButton_btn.addEventListener("click", this);
}
function click(eventObj:Object) {
switch(eventObj.target) {
case myButton_btn:
// Envoi du nom de l’occurrence diffuseur
// et du type d’événement au panneau de sortie
trace(eventObj.target + ": " + eventObj.type);
break;
case myCheckBox_chb:
trace(eventObj.target + ": " + eventObj.type);
break;
}
}
}
Le code suivant est le même fichier de classe (Cart.as) modifié pour utiliser la fonction
Delegate :
import mx.utils.Delegate;
import mx.controls.Button;
import mx.controls.CheckBox;
class Cart {
var myCheckBox_chb:CheckBox;
var myButton_btn:Button;
function onLoad() {
myCheckBox_chb.addEventListener("click", Delegate.create(this,
chb_onClick));
myButton_btn.addEventListener("click", Delegate.create(this,
btn_onClick));
}
// Deux fonctions distinctes gèrent les événements
function chb_onClick(eventObj:Object) {
// Envoi du nom de l’occurrence diffuseur
// et du type d’événement au panneau de sortie
trace(eventObj.target + ": " + eventObj.type);
// Envoi du chemin absolu du symbole
// que vous avez associé à la classe Cart
// dans le fichier FLA au panneau de sortie.
trace(this)
}
function btn_onClick(eventObj:Object) {
trace(eventObj.target + ": " + eventObj.type);
}
}
80
Gestion des événements des composants
Délégation du domaine d’une fonction
La méthode addEventListener() requiert deux paramètres : le nom d’un événement et une
référence à un écouteur. L’écouteur peut être un objet ou une fonction. Si vous transmettez un
objet, la fonction de rappel affectée à l’objet est invoquée dans le domaine de celui-ci.
Toutefois, si vous transmettez une fonction, cette dernière est invoquée dans le domaine de
l’occurrence de composant qui appelle la méthode addEventListener(). (Pour plus
d’informations, consultez la section Domaine des écouteurs, page 77.)
La fonction étant invoquée dans le domaine de l’occurrence du diffuseur, le mot-clé this
présent dans le corps de la fonction pointe vers l’occurrence du diffuseur, et non vers la classe
qui contient la fonction. Vous ne pouvez donc pas accéder aux propriétés et aux méthodes de
la classe qui contient la fonction. Pour déléguer le domaine d’une fonction à la classe
conteneur et accéder ainsi aux propriétés et méthodes de cette dernière, utilisez la classe
Delegate.
L’exemple suivant utilise la même approche que la section précédente, avec une variation du
fichier de classe Cart.as :
import mx.controls.Button;
import mx.controls.CheckBox;
class Cart {
var myCheckBox_chb:CheckBox;
var myButton_btn:Button;
// Définition d’une variable pour un accès
// à partir de la fonction chb_onClick
var i:Number = 10
function onLoad() {
myCheckBox_chb.addEventListener("click", chb_onClick);
}
function chb_onClick(eventObj:Object) {
// Vous vous attendez à pouvoir accéder
// à la variable i et à la sortie 10.
// Toutefois, l’envoi est indéfini
// vers le panneau de sortie car
// la fonction n’est pas limitée au domaine
// de l’occurrence Cart où i est défini.
trace(i);
}
}
Délégation des événements
81
Pour accéder aux propriétés et méthodes de la classe Cart, appelez Delegate.create() en
tant que second paramètre de addEventListener(), comme suit :
import mx.utils.Delegate;
import mx.controls.Button;
import mx.controls.CheckBox;
class Cart {
var myCheckBox_chb:CheckBox;
var myButton_btn:Button;
// Définition d’une variable pour un accès
// à partir de la fonction chb_onClick
var i:Number = 10
function onLoad() {
myCheckBox_chb.addEventListener("click", Delegate.create(this,
chb_onClick));
}
function chb_onClick(eventObj:Object) {
// Envoie 10 au panneau de sortie
// car la fonction est limitée au domaine
// de l’occurrence Cart
trace(i);
}
}
Objet événement
L’objet événement est une occurrence de la classe d’objet ActionScript. Le tableau suivant
présente ses propriétés, contenant les informations relatives à l’événement.
Propriété
Description
type
Chaîne contenant le nom de l’événement.
target
Référence à l’occurrence de composant qui émet l’événement.
Lorsqu’un événement possède d’autres propriétés, elles apparaissent dans l’entrée de
l’événement dans le Dictionnaire des composants.
L’objet événement est automatiquement généré lors du déclenchement d’un événement et
transmis à la fonction de rappel de l’objet écouteur ou à la fonction d’écouteur.
82
Gestion des événements des composants
Vous pouvez l’utiliser à l’intérieur de la fonction pour connaître le nom de l’événement diffusé
ou le nom d’occurrence du composant qui a diffusé l’événement. A partir du nom de
l’occurrence, vous pouvez accéder à d’autres propriétés du composant. Le code suivant, par
exemple, utilise la propriété target de l’objet événement objEvt pour accéder à la propriété
label de l’occurrence myButton et envoie la valeur au panneau de sortie :
var myButton:mx.controls.Button;
var listener:Object;
listener = new Object();
listener.click = function(evtObj){
trace("The " + evtObj.target.label + " button was clicked");
}
myButton.addEventListener("click", listener);
Utilisation du gestionnaire
d’événements on()
Vous pouvez affecter le gestionnaire d’événements on() à une occurrence de composant,
comme vous affectez un gestionnaire à un bouton ou à un clip. Un gestionnaire d’événement
on() peut être utile pour effectuer un simple test, mais pour toutes les applications, utilisez
plutôt des écouteurs d’événement. Pour plus d’informations, reportez-vous à Gestion des
événements à l’aide d’écouteurs, page 70.
Lorsque vous utilisez le mot clé this dans un gestionnaire on() directement associé à un
composant (affecté au composant instance du panneau Actions), this fait référence à
l’occurence du composant. Par exemple, le code suivant, joint directement à l’occurrence de
composant Button myButton, envoie "_level0.myButton" au panneau de sortie :
on(click){
trace(this);
}
Pour utiliser le gestionnaire d’événements on() :
1.
Faites glisser un composant d’interface utilisateur sur la scène.
Par exemple, faites glisser un composant Bouton vers la scène.
2.
Sélectionnez le composant sur la scène et ouvrez le panneau Actions.
Utilisation du gestionnaire d’événements on()
83
3.
Ajoutez le gestionnaire on() au panneau Actions sous le format :
on(event){
//your statements go here
}
Par exemple :
on(click){
trace(this);
}
Flash exécute le code à l’intérieur su gestionnaire on() lorsque l’événement du
gestionnaire on() se produit (dans ce cas, un seul clic).
4.
84
Sélectionnez Contrôle > Tester l’animation et cliquez sur le bouton pour voir la sortie.
Gestion des événements des composants
CHAPITRE 5
5
Personnalisation des
composants
Si vous utilisez les mêmes composants dans des applications différentes, il est possible que
vous souhaitiez modifier leur aspect. Vous pouvez personnaliser l’aspect des composants à
l’aide des trois approches suivantes, de façon individuelle ou en les combinant :
Styles Les composants d’interface utilisateur (IU) possèdent des propriétés de style
définissant l’apparence de certains aspects d’un composant. Chaque composant comporte un
ensemble de propriétés de style modifiables et tous les aspects visuels d’un composant ne
peuvent pas être changés en définissant un style. Pour plus d’informations, reportez-vous à
Utilisation de styles pour personnaliser la couleur et le texte des composants, page 86.
Une enveloppe comprend la collection de symboles constituant l’affichage
graphique d’un composant. L’application d’une enveloppe est le processus mis en œuvre pour
changer l’aspect d’un composant en modifiant ou en remplaçant ses graphiques d’origine.
Une enveloppe peut correspondre à un petit objet, comme l’extrémité d’une bordure ou un
coin, ou à un objet composite comme l’image complète d’un bouton dans son état relevé (qui
indique que personne n’a appuyé dessus). Une enveloppe peut également être un symbole sans
graphique, qui contient du code traçant une partie du composant. Certains aspects d’un
composant qui ne peuvent pas être définis au moyen de ses propriétés de style peuvent l’être
en modifiant l’enveloppe. Pour plus d’informations, reportez-vous à A propos de l’application
d’enveloppes aux composants, page 101.
Enveloppes
Thèmes Un thème est une collection à la fois de styles et d’enveloppes que vous pouvez
enregistrer en tant que fichier FLA et appliquer à un autre document. Pour plus
d’informations, reportez-vous à Présentation des thèmes, page 116.
Ce chapitre contient les sections suivantes :
Utilisation de styles pour personnaliser la couleur et le texte des composants . . . 86
A propos de l’application d’enveloppes aux composants . . . . . . . . . . . . . . . . . . . . . .101
Présentation des thèmes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Combinaison de l’application d’enveloppes et de styles pour personnaliser un
composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
85
Utilisation de styles pour personnaliser la
couleur et le texte des composants
Flash fournit des propriétés de style que vous pouvez modifier pour chaque composant
d’interface utilisateur (IU). La documentation de chaque composant spécifique comporte un
tableau qui répertorie les styles modifiables pour ce composant (par exemple, vous pouvez voir
un tableau de styles pour le composant Accordion dans Utilisation de styles avec le composant
Accordion du guide Référence du langage des composants). De plus, les composants d’interface
utilisateur (IU) héritent des méthodes setStyle() et getStyle() de la classe UIObject (voir
UIObject.setStyle() et UIObject.getStyle()). Pour une occurrence de composant, vous
pouvez utiliser les méthodes setStyle() et getStyle() pour définir et obtenir des valeurs de
propriétés de style, comme indiqué plus tard dans la section Définition de styles pour
l’occurrence d’un composant, page 89.
R EM A R QU E
Vous ne pouvez pas définir de styles pour les composants de support.
Utilisation de déclarations de style et de thèmes
Dans un domaine plus large, les styles sont organisés dans des déclarations de style dans
lesquelles vous pouvez contrôler les valeurs de propriétés de styles sur plusieurs occurrences de
composant. Une déclaration de style est un objet créé par la classe CSSStyleDeclaration et ses
propriétés sont les paramètres de style que vous pouvez affecter à des composants. Les
déclarations de style dans ActionScript sont modélisées une fois que les « feuilles de style en
cascade » (CSS) ont affecté les pages HTML. Pour les pages HTML, vous pouvez créer un
fichier de feuille de style qui définit des propriétés de style pour le contenu dans un groupe de
pages HTML. Avec des composants, vous pouvez créer un objet de déclaration de style et y
ajouter des propriétés de style afin de contrôler l’aspect des composants dans un document
Flash.
86
Personnalisation des composants
De plus, les déclarations de style sont organisées en thèmes. Flash offre deux thèmes visuels
pour les composants : Halo (HaloTheme.fla) et Sample (SampleTheme.fla). Un thème est un
ensemble de styles et de graphiques qui déterminent l’apparence des composants dans un
document. Chaque thème fournit des styles pour les composants. Les styles utilisés par chaque
composant dépendent en partie du thème du document concerné. Certains styles, par
exemple defaultIcon, sont employés par les composants associés quel que soit le thème
appliqué au document. D’autres, par exemple themeColor et symbolBackgroundColor, ne
sont utilisés par les composants que si le thème correspondant est également employé. Par
exemple, themeColor n’est employé que si le thème Halo l’est également, et
symbolBackgroundColor si le thème Sample est utilisé. Pour déterminer les propriétés de
style applicables à un composant, vous devez connaître le thème qui lui est affecté. Les
tableaux de style de chaque composant du guide Référence du langage des composants précisent
si les propriétés de chaque style s’appliquent à un ou aux deux thèmes fournis. (Pour plus
d’informations, consultez la section Présentation des thèmes, page 116.)
Présentation des paramètres de style
Lorsque vous utilisez des styles et des déclarations de style, vous pouvez définir des styles de
différentes façons (aux niveaux global, thème, classe, déclaration de style ou propriété de
style). Et certaines propriétés de style peuvent être héritées d’un composant parent (par
exemple, un panneau parent Accordion peut hériter d’un traitement de police du composant
Accordion). Voici quelques points-clés relatifs au comportement de style :
Les propriétés de style que vous pouvez définir sur un composant
particulier sont déterminées par le thème actuel. Par défaut, les composants Flash sont conçus
pour utiliser le thème Halo mais Flash fournit également le thème Sample. Par conséquent,
lorsque vous lisez un tableau de propriétés de style (comme celui du composant Button dans
la section Utilisation de styles avec le composant Button du guide Référence du langage des
composants ), recherchez le thème qui prend en charge le style souhaité. Le tableau indique les
thèmes Halo, Sample ou les deux (ce qui signifie que les deux thèmes supportent la propriété
du style). Pour modifier le thème actuel, voir Passage d’un thème à l’autre, page 117.
Dépendance de thème
Vous ne pouvez pas définir l’héritage dans ActionScript. Un enfant de composant
est défini pour hériter d’un style du composant parent ou non.
Héritage
Feuilles de style globales Les déclarations de style dans Flash ne prennent pas en charge la
« mise en cascade » pour des documents Flash, contrairement à CSS pour des documents
HTML. Tous les objets de déclaration de feuille de style sont définis au niveau de l’application
(global).
Utilisation de styles pour personnaliser la couleur et le texte des composants
87
Si un style de composant est défini de plusieurs façons (par exemple,
si textColor est défini au niveau global et au niveau de l’occurrence de composant), Flash
utilise le premier style qu’il rencontre selon l’ordre répertorié dans Utilisation de styles globaux,
personnalisés et de classe dans le même document, page 97.
Caractère prioritaire
Définition de styles
L’existence de propriétés de style, leur organisation au sein de déclarations de style et
l’organisation plus large des déclarations de style et des graphiques en thèmes vous permet de
personnaliser un composant de différentes manières :
■
Définir des styles pour une occurrence de composant.
Vous pouvez modifier les propriétés de couleur et de texte d’une seule occurrence de
composant. Cette méthode est efficace dans certaines situations, mais elle s’avère
laborieuse si vous devez définir des propriétés individuelles pour chacun des composants
d’un document.
Pour plus d’informations, reportez-vous à Définition de styles pour l’occurrence d’un
composant, page 89.
■
Ajuster la déclaration de style globale qui définit les styles de tous les composants d’un
document.
Pour appliquer le même aspect à l’ensemble du document, créez des styles sur la
déclaration de style globale.
Pour plus d’informations, reportez-vous à Définition de styles globaux, page 91.
■
Créer des déclarations de style personnalisées et les appliquer à plusieurs occurrences de
composant.
Vous pouvez faire en sorte que des groupes de composants partagent un même style dans
un document. Pour cela, créez des déclarations de style personnalisées à appliquer aux
composants que vous désignez.
Pour plus d’informations, reportez-vous à Définition de styles personnalisés pour des groupes
de composants, page 92.
■
Créer des déclarations de style de classe par défaut.
Vous pouvez définir une déclaration de style de classe par défaut pour que toutes les
occurrences d’une classe partagent le même aspect par défaut.
Pour plus d’informations, reportez-vous à Définition de styles pour une classe de composants,
page 94.
88
Personnalisation des composants
■
Utiliser des styles hérités pour définir les styles des composants d’une partie d’un
document.
Les composants contenus héritent des valeurs des propriétés de style définies sur ces
conteneurs.
Pour plus d’informations, reportez-vous à Définition de styles hérités sur un conteneur,
page 95.
Flash ne présente pas les modifications apportées aux propriétés de style lorsque vous affichez
des composants sur la scène via la fonction Aperçu en direct. Pour plus d’informations,
reportez-vous à Composants de l’aperçu en direct, page 65.
Définition de styles pour l’occurrence d’un
composant
Vous pouvez rédiger du code ActionScript pour définir et appliquer des propriétés de style à
toute occurrence de composant. Les méthodes UIObject.setStyle() et
UIObject.getStyle() peuvent être appelées directement à partir de n’importe quel
composant d’interface utilisateur. La syntaxe suivante définit une propriété et une valeur pour
l’occurrence d’un composant :
instanceName.setStyle("propertyName", value);
Par exemple, le code suivant définit les couleurs de contraste d’une occurrence de bouton
appelée myButton et utilisant le thème Halo :
myButton.setStyle("themeColor", "haloBlue");
R EM A R QU E
Si la valeur est une chaîne, elle doit être mise entre guillemets.
Vous pouvez également accéder aux styles directement sous forme de propriétés (par exemple
myButton.color = 0xFF00FF).
Utilisation de styles pour personnaliser la couleur et le texte des composants
89
Les propriétés de style définies pour l’occurrence d’un composant via setStyle() sont
prioritaires et remplacent tous les autres paramètres de style basés sur une déclaration de style
ou un thème. Néanmoins, plus vous définissez de propriétés en utilisant setStyle() sur une
seule occurrence de composant, plus le rendu du composant est lent au moment de
l’exécution. Vous pouvez accélérer le rendu d’un composant personnalisé avec ActionScript
qui définit les propriétés de style pendant la création de l’occurrence de composant à l’aide de
UIObject.createClassObject() du guide Référence du langage des composants et en plaçant
les paramètres de style dans le paramètre initObject. Par exemple, avec un composant
ComboBox dans la bibliothèque de documents actuelle, le code suivant crée une occurrence
de liste déroulante appelée my_cb et définit le texte dans la liste déroulante sur italique et
aligné à droite :
createClassObject(mx.controls.ComboBox, "my_cb", 1, {fontStyle:"italic",
textAlign:"right"});
my_cb.addItem({data:1, label:"One"});
R EM A R QU E
Pour modifier plusieurs propriétés ou les propriétés de plusieurs occurrences d’un
composant, créez un style personnalisé. Le rendu d’une occurrence de composant qui
utilise un style personnalisé pour plusieurs propriétés sera plus rapide qu’une occurrence
de composant avec plusieurs appels setStyle(). Pour plus d’informations, reportezvous à Définition de styles personnalisés pour des groupes de composants, page 92.
Pour définir ou modifier une propriété d’une seule occurrence de composant
utilisant le thème Halo :
1.
Sélectionnez l’occurrence de composant sur la scène.
2.
Dans l’inspecteur des propriétés, nommez l’occurrence myComponent.
3.
Ouvrez le panneau Actions et choisissez Scène 1, puis Calque 1 : Image 1.
4.
Saisissez le code suivant pour appliquer la couleur orange à l’occurrence :
myComponent.setStyle("themeColor", "haloOrange");
5.
Choisissez Contrôle > Tester l’animation pour visualiser les modifications.
Pour obtenir la liste des styles supportés par un composant particulier, consultez son
entrée dans le guide Référence du langage des composants.
90
Personnalisation des composants
Pour créer une occurrence de composant et définir plusieurs propriétés
simultanément à l’aide d’ActionScript :
1.
Faites glisser un composant vers la bibliothèque.
2.
Ouvrez le panneau Actions et choisissez Scène 1, puis Calque 1 : Image 1.
3.
Saisissez la syntaxe suivante pour créer une occurrence du composant et définir ses
propriétés :
createClassObject(className, "instance_name", depth, {style:"setting",
style:"setting"});
Donc, par exemple, avec un composant Button dans la bibliothèque, le code ActionScript
suivant crée une occurrence de bouton my_button à la profondeur 1 avec les styles de texte
définis sur violet et en italique :
createClassObject(mx.controls.Button, "my_button", 1, {label:"Hello",
color:"0x9900CC", fontStyle:"italic"});
Pour plus d’informations, consultez la section UIObject.createClassObject().
4.
Choisissez Contrôle > Tester l’animation pour visualiser les modifications.
Pour obtenir la liste des styles supportés par un composant particulier, consultez son
entrée dans le guide Référence du langage des composants .
Définition de styles globaux
Par défaut, tous les composants adhèrent à une déclaration de style globale jusqu’à ce qu’une
autre déclaration de style soit associée au composant (comme dans Définition de styles
personnalisés pour des groupes de composants, page 92). La déclaration de style global est affectée
à tous les composants Flash de l’architecture des composants Macromedia version 2. L’objet
_global possède une propriété style (_global.style). Il s’agit d’une occurrence de
CSSStyleDeclaration qui agit comme déclaration de style globale. Si vous modifiez la valeur
d’une propriété de style sur la déclaration de style globale, la modification s’applique à tous les
composants de votre document Flash.
A TTE NTI ON
Certains styles sont définis sur l’objet CSSStyleDeclaration d’une classe de composants
(par exemple, le style backgroundColor des composants TextArea et TextInput). La
déclaration de style de classe étant prioritaire par rapport à celle de style global lors de la
détermination des valeurs, la définition du style backgroundColor sur la déclaration de
style global n’a aucun effet sur les composants TextArea et TextInput. Pour plus
d’informations sur le caractère prioritaire des styles, consultez la section Utilisation de
styles globaux, personnalisés et de classe dans le même document, page 97. Pour plus
d’informations sur la modification d’un objet CSSStyleDeclaration d’une classe de
composants, consultez la section Définition de styles pour une classe de composants,
page 94.
Utilisation de styles pour personnaliser la couleur et le texte des composants
91
Pour modifier une ou plusieurs propriétés de la déclaration de style global :
1.
Assurez-vous que le document contient au moins une occurrence de composant.
Pour plus d’informations, reportez-vous à Ajout de composants aux documents Flash,
page 54.
2.
Dans le scénario, sélectionnez une image dans laquelle (ou avant laquelle) le composant
apparaît.
3.
Dans le panneau Actions, insérez du code semblable à l’exemple suivant pour modifier les
propriétés dans la déclaration de style global. Il suffit de répertorier les propriétés dont vous
souhaitez modifier les valeurs, comme dans l’exemple suivant :
_global.style.setStyle("color", 0xCC6699);
_global.style.setStyle("themeColor", "haloBlue")
_global.style.setStyle("fontSize",16);
_global.style.setStyle("fontFamily" , "_serif");
4.
Choisissez Contrôle > Tester l’animation pour visualiser les modifications.
Définition de styles personnalisés pour des groupes
de composants
Vous pouvez créer des déclarations de style personnalisées pour définir un jeu unique de
propriétés pour des groupes de composants dans votre document Flash. Outre la propriété
style de l’objet _global (décrite dans la section Définition de styles globaux, page 91), qui
détermine la déclaration de style par défaut pour un document Flash entier, l’objet _global
possède également une propriété styles qui est une liste des déclarations de style
personnalisées disponibles. Par conséquent, vous pouvez créer une déclaration de style comme
nouvelle occurrence de l’objet CSSStyleDeclaration, lui attribuer un nom de style
personnalisé et la placer dans la liste _global.styles. Ensuite, vous spécifiez les propriétés et
les valeurs pour le style et affectez le nom du style aux occurrences de composant qui doivent
partager le même aspect.
N’oubliez pas que, lorsque vous affectez le nom de style à une occurrence de composant, ce
dernier répond uniquement aux propriétés de style qu’il supporte. Pour obtenir la liste des
propriétés de style supportées par chacun des composants, consultez leurs entrées respectives
dans le guide Référence du langage des composants.
Pour modifier un format de style personnalisé, utilisez la syntaxe suivante :
_global.styles.CustomStyleName.setStyle(propertyName, propertyValue);
Les paramètres de style personnalisés ont priorité sur les paramètres de classe, hérités et de
style global. Pour obtenir la liste des caractères prioritaires des styles, consultez la section
Utilisation de styles globaux, personnalisés et de classe dans le même document, page 97.
92
Personnalisation des composants
Pour créer une déclaration de style personnalisée pour un groupe de
composants :
1.
Ajoutez au moins un composant sur la scène.
Pour plus d’informations, reportez-vous à Ajout de composants aux documents Flash,
page 54.
Cet exemple utilise trois composants de bouton portant les noms d’occurrence a, b et c.
Si vous utilisez des composants différents, donnez-leur des noms d’occurrence dans
l’inspecteur des propriétés et utilisez ces noms à l’étape 8.
2.
Dans le scénario, sélectionnez une image dans laquelle (ou avant laquelle) le composant
apparaît.
3.
Ouvrez le panneau Actions.
4.
Ajoutez l’instruction d’importation suivante de façon à avoir accès à la fonction
constructeur permettant de créer une nouvelle déclaration de style depuis la classe
CSSStyleDeclaration :
import mx.styles.CSSStyleDeclaration;
5.
Utilisez la syntaxe suivante pour créer une occurrence de l’objet CSSStyleDeclaration et
définir le nouveau format de style personnalisé :
var new_style:Object = new CSSStyleDeclaration();
6.
Nommez votre déclaration de style (« myStyle », par exemple) sur la liste _global.styles
des déclarations de style personnalisées et identifiez l’objet contenant toutes les propriétés
pour votre nouvelle déclaration de style.
_global.styles.myStyle = new_style;
7.
Utilisez la méthode setStyle() (héritée de la classe UIObject) pour ajouter des propriétés
à l’objet new_style, qui sont à leur tour associées à la déclaration de style personnalisée
myStyle :
new_style.setStyle("fontFamily", "_serif");
new_style.setStyle("fontSize", 14);
new_style.setStyle("fontWeight", "bold");
new_style.setStyle("textDecoration", "underline");
new_style.setStyle("color", 0x666699);
8.
Dans la même fenêtre de script, utilisez la syntaxe suivante pour définir la propriété
styleName de trois composants spécifiques sur la déclaration de style personnalisée :
a.setStyle("styleName", "myStyle");
b.setStyle("styleName", "myStyle");
c.setStyle("styleName", "myStyle");
Utilisation de styles pour personnaliser la couleur et le texte des composants
93
Vous pouvez également accéder aux styles de la déclaration personnalisée à l’aide des méthodes
setStyle() et getStyle() via sa propriété globale styleName. Par exemple, le code suivant
définit le style backgroundColor sur la déclaration de style newStyle :
_global.styles.myStyle.setStyle("themeColor", "haloOrange");
En revanche, les étapes 5 et 6 ont associé l’occurence new_style à la déclaration de style afin
que vous puissiez utiliser la syntaxe la plus courte, telle que
new_style.setStyle("themeColor", "haloOrange").
Pour plus d’informations sur les méthodes setStyle() et getStyle(), consultez les sections
et UIObject.getStyle().
UIObject.setStyle()
Définition de styles pour une classe de composants
Vous pouvez créer une déclaration de style de classe pour n’importe quelle classe de
composants (Button, CheckBox, etc.). Elle définira des styles par défaut pour toutes les
occurrences de cette classe. Vous devez créer la déclaration de style avant de créer les
occurrences. Certains composants, comme TextArea et TextInput, ont des déclarations de
style de classe prédéfinies par défaut car leurs propriétés borderStyle et backgroundColor
doivent être personnalisées.
A TT EN TI ON
Lorsque vous remplacez une feuille de style de classe, assurez-vous d’ajouter tous les
styles désirés de l’ancienne feuille de style, sinon ils seront écrasés.
Le code suivant vérifie d’abord si le thème actuel possède une déclaration de style pour
CheckBox et en crée une si ce n’est pas le cas. Le code utilise ensuite la méthode setStyle()
pour définir une propriété de style pour la déclaration de style CheckBox (dans ce cas,
« color » définit la couleur du texte d’étiquette des cases à cocher sur bleu) :
if (_global.styles.CheckBox == undefined) {
_global.styles.CheckBox = new mx.styles.CSSStyleDeclaration();
}
_global.styles.CheckBox.setStyle("color", 0x0000FF);
Pour obtenir un tableau des propriétés de style que vous pouvez définir sur le composant
CheckBox, consultez la section Utilisation des styles avec le composant CheckBox du guide
Référence du langage des composants.
Les paramètres de style personnalisés ont priorité sur les paramètres de style hérités et globaux.
Pour obtenir la liste des caractères prioritaires des styles, consultez la section Utilisation de
styles globaux, personnalisés et de classe dans le même document, page 97.
94
Personnalisation des composants
Définition de styles hérités sur un conteneur
Un style hérité est un style dont la valeur provient de celle des composants parents de la
hiérarchie MovieClip du document. Lorsqu’un style de couleur ou de texte n’est pas défini au
niveau d’une occurrence, d’une classe ou personnalisé, Flash recherche sa valeur dans la
hiérarchie MovieClip. Ainsi, lorsque vous définissez des styles pour un composant conteneur,
les autres composants contenus héritent de ces paramètres de style.
Les styles suivants sont des styles hérités :
■
fontFamily
■
fontSize
■
fontStyle
■
fontWeight
■
textAlign
■
textIndent
■
Tous les styles de couleur à valeur simple (par exemple, themeColor est un style hérité,
mais pas alternatingRowColors)
Le gestionnaire de styles indique à Flash si un style hérite de sa valeur. Des styles
supplémentaires peuvent également être ajoutés au moment de l’exécution sous forme de
styles hérités. Pour plus d’informations, consultez la section Classe StyleManager dans
Référence du langage des composants.
R E MA R Q UE
Une différence majeure entre la mise en place de styles pour des composants Flash et
de feuilles de style en cascade pour des pages HTML réside dans le fait que la valeur
inherit CSS n’est pas supportée pour les composants Flash. Les styles sont hérités ou
non par conception de composant.
Les styles hérités ont priorité sur les styles globaux. Pour obtenir la liste des caractères
prioritaires des styles, consultez la section Utilisation de styles globaux, personnalisés et de classe
dans le même document, page 97.
L’exemple suivant démontre comment vous pouvez utiliser des styles hérités avec un
composant Accordion, qui est disponible avec Flash Professionnel 8. (La fonction d’héritage
de styles est prise en charge à la fois par Flash Basic 8 et Flash Professionnel 8.)
Utilisation de styles pour personnaliser la couleur et le texte des composants
95
Pour créer un composant Accordion avec des styles hérités par les
composants dans les panneaux Accordion individuels :
1.
Ouvrez un nouveau fichier FLA.
2.
Faites glisser un composant Accordion du panneau Composants vers la scène.
3.
Nommez et dimensionnez le composant Accordion dans l’inspecteur des propriétés. Pour
cet exemple, entrez le nom d’occurrence accordion.
4.
Faites glisser un composant TextInput et un composant Button du panneau Composants
vers la bibliothèque.
Lorsque vous faites glisser les composants vers la bibliothèque, votre script peut les utiliser
à l’exécution.
5.
Ajoutez le code ActionScript suivant à la première image du scénario :
var section1 = accordion.createChild(mx.core.View, "section1", {label:
"First Section"});
var section2 = accordion.createChild(mx.core.View, "section2", {label:
"Second Section"});
var input1 = section1.createChild(mx.controls.TextInput, "input1");
var button1 = section1.createChild(mx.controls.Button, "button1");
input1.text = "Text Input";
button1.label = "Button";
button1.move(0, input1.height + 10);
var input2 = section2.createChild(mx.controls.TextInput, "input2");
var button2 = section2.createChild(mx.controls.Button, "button2");
input2.text = "Text Input";
button2.label = "Button";
button2.move(0, input2.height + 10);
Le code ci-dessus ajoute deux enfants au composant Accordion et charge chacun d’eux
avec un contrôle TextInput et Button, utilisé dans cet exemple pour illustrer l’héritage des
styles.
6.
Choisissez Contrôle > Tester l’animation pour examiner le document avant l’ajout des
styles hérités.
7.
Ajoutez le code ActionScript suivant à la fin du script dans la première image :
accordion.setStyle("fontStyle", "italic");
8.
Choisissez Contrôle > Tester l’animation pour visualiser les modifications.
Remarquez que le paramètre fontStyle du composant Accordion affecte non seulement le
texte d’Accordion lui-même mais également le texte associé aux composants TextInput et
Button à l’intérieur du composant Accordion.
96
Personnalisation des composants
Utilisation de styles globaux, personnalisés et de
classe dans le même document
Si vous définissez un style à un seul emplacement du document, Flash se sert de cette
définition pour connaître la valeur d’une propriété. Un document Flash peut cependant
posséder plusieurs paramètres de style : propriétés définies directement dans les occurrences de
composant, déclarations de style personnalisées, déclarations de style de classe par défaut,
styles hérités et déclaration de style global. Dans ce cas, Flash détermine la valeur d’une
propriété en recherchant sa définition dans tous ces emplacements, en respectant un ordre
spécifique.
Flash recherche les styles dans l’ordre suivant, jusqu’à la détection d’une valeur :
1.
Flash cherche une propriété de style dans l’occurrence du composant.
2.
Flash examine la propriété styleName de l’occurrence pour voir si une déclaration de style
personnalisée lui a été affectée.
3.
Flash recherche la propriété dans une déclaration de style de classe par défaut.
4.
Si le style fait partie des styles hérités, Flash recherche la valeur héritée dans la hiérarchie
apparentée.
5.
Flash recherche le style dans la déclaration de style global.
6.
Si la propriété n’est toujours pas définie, elle prend la valeur undefined.
Propriétés des styles de couleur
Les propriétés de style de couleur diffèrent de celles des autres styles. Le nom de toutes les
propriétés de couleur se termine par « Color », par exemple backgroundColor,
disabledColor et color. Une fois les propriétés de style de couleur modifiées, la couleur
change instantanément dans l’occurrence et dans toutes les occurrences enfants apparentées.
Toutes les autres modifications des propriétés de style ne font que marquer l’objet pour
indiquer qu’il doit être retracé et que les modifications ne seront appliquées qu’à l’image
suivante.
La valeur d’une propriété de style de couleur peut être un chiffre, une chaîne ou un objet. S’il
s’agit d’un chiffre, il représente la valeur RVB de la couleur au format hexadécimal
(0xRRGGBB). Si la valeur est une chaîne, il doit s’agir d’un nom de couleur.
Utilisation de styles pour personnaliser la couleur et le texte des composants
97
Ces noms sont des chaînes qui correspondent aux couleurs couramment utilisées. Vous
pouvez ajouter de nouveaux noms de couleur à l’aide du gestionnaire de styles (voir la section
Classe StyleManager du guide Référence du langage des composants). Le tableau suivant
répertorie les noms de couleur par défaut :
Nom de couleur
Valeur
black (noir)
0x000000
white (blanc)
0xFFFFFF
red (rouge)
0xFF0000
green (vert)
0x00FF00
blue (bleu)
0x0000FF
magenta
0xFF00FF
yellow (jaune)
0xFFFF00
cyan
0x00FFFF
haloGreen
0x80FF4D
haloBlue
0x2BF5F5
haloOrange
0xFFC200
R EM A R QU E
Si le nom de couleur n’est pas défini, le composant risque de ne pas être correctement
dessiné.
Vous pouvez utiliser tout identifiant ActionScript valide pour créer vos propres noms de
couleur (par exemple « WindowText » ou « ButtonText »). Pour définir de nouvelles
couleurs, utilisez le gestionnaire de styles, comme suit :
mx.styles.StyleManager.registerColorName("special_blue", 0x0066ff);
La plupart des composants ne peuvent pas traiter un objet en tant que valeur d’une propriété
de style de couleur. Cependant, certains d’entre eux peuvent traiter des objets de couleur qui
représentent des dégradés ou autres combinaisons. Pour plus d’informations, consultez la
section « Utilisation des styles » des entrées de composant respectives dans le guide Référence
du langage des composants.
98
Personnalisation des composants
Vous pouvez utiliser des déclarations de style de classe et des noms de couleur pour contrôler
facilement les couleurs du texte et des symboles à l’écran. Par exemple, si vous souhaitez une
configuration d’affichage qui ressemble à Microsoft Windows, définissez des noms de couleur
tels que ButtonText et WindowText et des déclarations de style de classe telles que Button,
CheckBox et Window.
R EM A R QU E
Certains composants fournissent des propriétés de style correspondant à des tableaux
de couleurs, par exemple alternatingRowColors. Ces styles doivent être définis sous
forme de tableau de valeurs RVB numériques, pas par des noms de couleur.
Personnalisation des animations de composants
Plusieurs composants, tels que Accordion, ComboBox et Tree, offre une animation de
transition entre les différents états des composants, par exemple lors du passage d’un enfant
Accordion à un autre, du développement d’une liste déroulante ComboBox et du
développement et de la réduction de dossiers Tree. En outre, les composants présentent une
animation pour la sélection et la désélection d’un élément, par exemple des lignes dans une
liste.
Les styles suivants vous permettent de contrôler l’apparence de ces animations :
Style d’animation
Description
openDuration
Durée de la transition de l’accélération d’ouverture des composants
Accordion, ComboBox et Tree, en millisecondes. La valeur par
défaut est 250.
openEasing
Référence à une fonction d’interpolation qui contrôle l’animation des
états transitoires dans les composants Accordion, ComboBox et
Tree. L’équation par défaut utilise une formule sine in/out.
popupDuration
Durée de la transition lorsqu’un menu s’ouvre dans le composant
Menu, en millisecondes. La valeur par défaut est 150. Remarquez,
toutefois, que l’animation utilise toujours l’équation sine in/out par
défaut.
selectionDuration
Durée de la transition dans les composants ComboBox, DataGrid,
List et Tree pour passer d’un état normal à l’état sélectionné et
inversement, en millisecondes. La valeur par défaut est 200.
selectionEasing
Référence à une fonction d’interpolation qui contrôle l’animation de
sélection pour les composants ComboBox, DataGrid, List et Tree.
Ce style ne s’applique qu’à la transition d’un état normal à un état
sélectionné. L’équation par défaut utilise une formule sine in/out.
Utilisation de styles pour personnaliser la couleur et le texte des composants
99
Le paquet mx.transtions.easing fournit six classes de contrôle de l’accélération :
Classe
Description
d’accélération
Back
S’étend au-delà de la plage de transition à l’une ou aux deux extrémités
pour donner un léger effet de débordement.
Bounce
Donne un effet de rebond à toute la plage de transition, à l’une ou aux
deux extrémités. Le nombre de rebonds dépend de la durée : plus elle est
longue, plus il y a de rebonds.
Elastic
Donne un effet élastique qui sort de la plage de transition à l’une ou aux
deux extrémités. Le taux d’élasticité n’est pas affecté par la durée.
None
Donne un mouvement régulier du début à la fin, sans effet, ralentissement
ni accélération. Cette transition est également appelée transition linéaire.
Regular
Donne un mouvement ralenti à l’une ou aux deux extrémités pour produire
un effet d’accélération, de ralentissement ou les deux.
Strong
Donne un effet encore plus ralenti à l’une ou aux deux extrémités. Cet effet
est similaire à l’effet Regular, mais en plus prononcé.
Chacune des classes du paquet mx.transitions.easing fournit les trois méthodes d’accélération
suivantes :
Méthode
d’accélération
Description
easeIn
Produit un effet d’accélération au début de la transition.
easeOut
Produit un effet d’accélération à la fin de la transition.
easeInOut
Produit un effet d’accélération au début et à la fin de la transition.
Les méthodes d’accélération étant des méthodes statiques de classes d’accélération, il est
inutile de les instancier. Les méthodes sont utilisées dans des appels de setStyle(), comme
dans l’exemple suivant.
import mx.transitions.easing.*;
trace("_global.styles.Accordion = " + _global.styles.Accordion);
_global.styles.Accordion.setStyle("openDuration", 1500);
_global.styles.Accordion.setStyle("openEasing", Bounce.easeOut);
R E MA R Q UE
100
L’équation par défaut utilisée par toutes les transitions n’est pas disponible dans les
classes d’accélération répertoriées ci-dessus. Pour spécifier qu’un composant doit
utiliser la méthode d’accélération par défaut après la définition d’une autre méthode
d’accélération, appelez setStyle(« openEasing », null).
Personnalisation des composants
Pour plus d’informations, consultez la section Application des méthodes d’accélération aux
composants dans le guide Référence du langage des composants.
Récupération des valeurs de propriétés de style
Pour récupérer une valeur de propriété de style, utilisez UIObject.getStyle(). Chaque
composant correspondant à une sous-classe de UIObject (c’est-à-dire tous les composants
version 2 à l’exception de ceux de support) hérite de la méthode getStyle(). Cela signifie
que vous pouvez appeler getStyle() depuis n’importe quelle occurrence de composant,
comme vous le faites pour setStyle().
Le code suivant obtient la valeur du style themeColor et l’affecte à la variable oldStyle :
var myCheckBox:mx.controls.CheckBox;
var oldFontSize:Number
oldFontSize = myCheckBox.getStyle("fontSize");
trace(oldFontSize);
A propos de l’application d’enveloppes
aux composants
Les enveloppes sont des symboles de clip utilisés par les composants pour constituer leur
apparence visuelle. La plupart des enveloppes contiennent des formes représentant l’aspect du
composant. Certaines enveloppes contiennent uniquement du code ActionScript qui dessine
le composant dans le document.
Les composants version 2 sont des clips compilés, ce qui signifie que vous ne pourrez pas les
visualiser dans la bibliothèque. Toutefois, l’installation Flash inclut des fichiers FLA contenant
toutes les enveloppes des composants. Ces fichiers FLA sont appelés des thèmes. Tous les
thèmes ont des aspects et des comportements différents, mais contiennent tous des enveloppes
ayant les mêmes noms de symbole et les mêmes identifiants de liaison. Cela permet de faire
glisser un thème sur la scène du document pour en modifier l’aspect. Les fichiers FLA de
thème sont également utilisés pour modifier les enveloppes des composants. Les enveloppes
sont situées dans le dossier Thèmes, dans le panneau Bibliothèque de tous les fichiers FLA de
thème. (Pour plus d’informations sur les thèmes, consultez la section Présentation des thèmes,
page 116.)
A propos de l’application d’enveloppes aux composants
101
Chaque composant comprend un grand nombre d’enveloppes. Par exemple, la flèche vers le
bas du sous-composant ScrollBar est formée de quatre enveloppes :
ScrollDownArrowDisabled, ScrollDownArrowDown, ScrollDownArrowOver et
ScrollDownArrowUp. Le composant ScrollBar n’utilise pas moins de 13 symboles
d’enveloppe différents.
Certains composants partagent des enveloppes. Par exemple, ceux qui utilisent des barres de
défilement (comme ComboBox, List et ScrollPane) partagent les enveloppes du dossier
ScrollBar Skins. Pour changer l’aspect des composants, vous pouvez modifier les enveloppes
existantes et en créer de nouvelles.
Le fichier .AS associé à chaque classe de composants contient du code qui charge des
enveloppes spécifiques pour le composant. Chaque enveloppe de composant correspond à une
propriété d’enveloppe affectée à un identifiant de liaison du symbole d’une enveloppe. Par
exemple, l’état enfoncé (bas) de la flèche bas du composant ScrollBar porte le nom de
propriété d’enveloppe downArrowDownName. La valeur par défaut de la propriété
downArrowDownName est « ScrollDownArrowDown », ce qui correspond à l’identifiant de
liaison du symbole d’enveloppe présent dans le fichier FLA du thème. Vous pouvez modifier
les enveloppes existantes et les appliquer à tous les composants qui les utilisent. Pour ce faire,
modifiez le symbole de l’enveloppe et conservez l’identifiant de liaison existant. Vous pouvez
également créer de nouvelles enveloppes et les appliquer à des occurrences de composant
spécifiques en définissant leurs propriétés pour chaque occurrence. Il n’est pas nécessaire de
modifier le fichier .AS du composant pour changer les propriétés de son enveloppe ; vous
pouvez passer les valeurs des propriétés de l’enveloppe à la fonction de constructeur du
composant lors de la création d’un composant dans votre document.
Les propriétés d’enveloppe de chaque composant sont répertoriées sous leurs entrées
respectives dans le Dictionnaire des composants. Par exemple, les propriétés d’enveloppe du
composant Button sont situées à l’emplacement suivant : Référence du langage des
composants > Composant Button > Personnalisation du composant Button > Utilisation des
enveloppes avec le composant Button.
Pour appliquer une enveloppe à un composant en fonction de vos besoins, choisissez l’une des
méthodes suivantes. Ces approches sont présentées dans l’ordre croissant de difficulté.
■
Pour modifier les enveloppes associées à toutes les occurrences d’un composant particulier
dans un seul document, copiez et modifiez les éléments d’enveloppes individuels. (Voir
Modification des enveloppes des composants dans un document, page 103).
Cette méthode d’enveloppe est conseillée aux débutants car elle ne nécessite pas la
rédaction d’un script.
102
Personnalisation des composants
■
Pour remplacer toutes les enveloppes d’un document par un nouveau jeu (avec tous les
types de composant partageant le même aspect), appliquez un thème. (Voir la section
Présentation des thèmes, page 116.)
Cette méthode d’application d’enveloppe est conseillée pour obtenir un aspect cohérent
pour tous les composants de plusieurs documents.
■
Pour lier la couleur d’un élément d’enveloppe à une propriété de style, insérez du code
ActionScript dans l’enveloppe afin de l’enregistrer en tant qu’élément d’enveloppe de
couleur. (Voir Liaison d’une couleur d’enveloppe aux styles, page 106).
■
Pour utiliser des enveloppes différentes pour plusieurs occurrences du même composant,
créez de nouvelles enveloppes et définissez leurs propriétés. (Voir Création de nouvelles
enveloppes de composants, page 105 et Application de nouvelles enveloppes à un composant,
page 108.)
■
Pour modifier les enveloppes dans un sous-composant (tel qu’une barre de défilement
dans un composant List), sous-classez le composant. (Voir la section Application de
nouvelles enveloppes à un sous-composant, page 110.)
■
Pour modifier les enveloppes d’un sous-composant qui ne sont pas directement accessibles
à partir du composant principal (par exemple, un composant List dans un composant
ComboBox), remplacez les propriétés des enveloppes dans le prototype. (Voir la section
Modification des propriétés des enveloppes dans un sous-composant, page 114.)
Modification des enveloppes des composants dans
un document
Pour modifier les enveloppes associées à toutes les occurrences d’un composant particulier
d’un seul document, copiez les symboles des enveloppes du thème dans le document et
modifiez les graphiques selon vos besoins.
La procédure ci-dessous est très proche de la création et de l’application d’un nouveau thème
(voir Présentation des thèmes, page 116). La principale différence est que cette procédure décrit
la copie des symboles directement depuis le thème déjà utilisé dans un seul document et ne
modifie qu’un petit nombre d’enveloppes parmi toutes celles disponibles. Elle convient bien
lorsque vos modifications ne concernent qu’un seul document et quelques composants
seulement. Si les enveloppes modifiées doivent être partagées par plusieurs documents ou
comprennent des modifications de plusieurs composants, il peut s’avérer plus simple de
modifier les enveloppes si vous créez un nouveau thème.
Vous pouvez consulter en ligne l’article sur l’application d’enveloppes avancée dans le Centre
des développeurs Macromedia à l’adresse www.macromedia.com/devnet/mx/flash/articles/
skinning_2004.html.
A propos de l’application d’enveloppes aux composants
103
Pour modifier des enveloppes de composants dans un document :
1.
Si vous avez déjà appliqué le thème Sample à un document, passez à l’étape 5.
2.
Choisissez Fichier > Importer > Ouvrir une bibliothèque externe et sélectionnez le fichier
SampleTheme.fla.
Ce fichier est stocké dans le dossier Configuration au niveau de l’application. Pour
connaître son emplacement exact dans votre système d’exploitation, consultez la section
Présentation des thèmes, page 116.
3.
Dans le panneau Bibliothèque du thème, choisissez Flash UIComponents 2/Themes/
MMDefault et faites glisser le dossier Assets de tous les composants de votre document vers
la bibliothèque.
Par exemple, faites glisser le dossier RadioButton Assets vers la bibliothèque
ThemeApply.fla.
4.
Si vous avez déposé des dossiers Assets de composants individuels dans la bibliothèque,
assurez-vous que le symbole Assets de chaque composant est défini sur Exporter dans la
première image.
Par exemple, le dossier Assets du composant RadioButton est appelé RadioButton Assets.
Son symbole est appelé RadioButtonAssets et contient tous les symboles des éléments
individuels. Si vous activez l’option Exporter dans la première image pour le symbole
RadioButtonAssets, tous les symboles d’éléments individuels seront exportés dans la
première image.
5.
Double-cliquez sur le symbole de l’enveloppe à modifier pour l’ouvrir en mode de
modification de symbole.
Par exemple, ouvrez le symbole States/RadioFalseDisabled.
6.
Modifiez le symbole ou supprimez les graphiques et créez-en de nouveaux.
Vous pouvez choisir Affichage > Zoom avant pour agrandir la représentation. Lors de la
modification d’une enveloppe, vous devez conserver le point d’alignement pour qu’elle
s’affiche correctement. Le coin supérieur gauche de tous les symboles modifiés doit se
trouver à (0,0).
Par exemple, appliquez la couleur gris clair au cercle intérieur.
7.
104
Lorsque vous avez terminé de modifier le symbole de l’enveloppe, cliquez sur le bouton de
retour, figurant dans la partie gauche de la barre d’informations en haut de la scène, pour
revenir en mode d’édition de document.
Personnalisation des composants
8.
Répétez les étapes 5 à 7 jusqu’à ce que vous ayez modifié toutes les enveloppes voulues.
R E MA R Q UE
9.
L’aperçu en direct des composants sur la scène ne reflète pas les enveloppes
modifiées.
Choisissez Contrôle > Tester l’animation.
Dans cet exemple, assurez-vous d’avoir une occurrence RadioButton sur la scène et
définissez sa propriété enabled sur false dans le panneau Actions pour visualiser la
nouvelle apparence de l’occurrence RadioButton désactivée.
Création de nouvelles enveloppes de composants
Si vous voulez utiliser une enveloppe particulière pour l’occurrence d’un composant et une
autre pour une autre occurrence du même composant, ouvrez un fichier FLA de thème et
créez un nouveau symbole d’enveloppe. Les composants sont conçus de manière à faciliter
l’utilisation de différentes enveloppes pour différentes occurrences.
Pour créer une enveloppe :
1.
Choisissez Fichier > Ouvrir et ouvrez le fichier FLA de thème à utiliser comme modèle.
2.
Choisissez Fichier > Enregistrer sous, puis sélectionnez un nom unique, tel que
MyTheme.fla.
3.
Choisissez les enveloppes à modifier (dans cet exemple, RadioTrueUp).
Les enveloppes sont situées dans le dossier Themes/MMDefault/Composant Assets (dans
cet exemple, Themes/MMDefault/RadioButton Assets/States).
4.
Choisissez Dupliquer dans le menu des options de la bibliothèque (ou en cliquant du
bouton droit sur le symbole) et donnez un nom unique au symbole, tel que
MyRadioTrueUp.
5.
Cliquez sur Avancé dans la boîte de dialogue Propriétés du symbole et activez l’option
Exporter pour ActionScript.
Un identifiant de liaison correspondant au nom du symbole est saisi automatiquement.
6.
Double-cliquez sur la nouvelle enveloppe dans la bibliothèque pour l’ouvrir en mode de
modification de symbole.
A propos de l’application d’enveloppes aux composants
105
7.
Modifiez le clip ou supprimez-le pour en créer un nouveau.
Vous pouvez choisir Affichage > Zoom avant pour agrandir la représentation. Lors de la
modification d’une enveloppe, vous devez conserver le point d’alignement pour qu’elle
s’affiche correctement. Le coin supérieur gauche de tous les symboles modifiés doit se
trouver à (0,0).
8.
Lorsque vous avez terminé de modifier le symbole de l’enveloppe, cliquez sur le bouton de
retour, figurant dans la partie gauche de la barre d’informations en haut de la scène, pour
revenir en mode d’édition de document.
9.
Choisissez Fichier > Enregistrer, mais ne fermez pas le fichier MonTheme.fla. Vous devez
maintenant créer un document dans lequel l’enveloppe modifiée sera appliquée à un
composant.
Pour plus d’informations, consultez la section Application de nouvelles enveloppes à un
composant, page 108, Application de nouvelles enveloppes à un sous-composant, page 110 ou
Modification des propriétés des enveloppes dans un sous-composant, page 114.
R E MA R Q UE
Flash ne présente pas les modifications apportées aux enveloppes des composants
lorsque vous affichez ces derniers sur la scène via la fonction Aperçu en direct.
Liaison d’une couleur d’enveloppe aux styles
Les composants version 2 simplifient la liaison entre un élément visuel d’enveloppe et un jeu
de style défini sur le composant qui utilise l’enveloppe. Pour enregistrer une occurrence de clip
ou un élément d’enveloppe complet dans un style, ajoutez du code ActionScript dans le
scénario de l’enveloppe pour appeler
mx.skins.ColoredSkinElement.setColorStyle(targetMovieClip, styleName).
Pour relier une enveloppe à une propriété de style :
1.
Si vous avez déjà appliqué le thème Sample à un document, passez à l’étape 5.
2.
Choisissez Fichier > Importer > Ouvrir une bibliothèque externe et sélectionnez le fichier
SampleTheme.fla.
Ce fichier est stocké dans le dossier Configuration au niveau de l’application. Pour
connaître son emplacement exact dans votre système d’exploitation, consultez la section
Présentation des thèmes, page 116.
106
Personnalisation des composants
3.
Dans le panneau Bibliothèque du thème, choisissez Flash UI Components 2/Themes/
MMDefault et faites glisser le dossier Assets de tous les composants de votre document vers
la bibliothèque.
Par exemple, faites glisser le dossier RadioButton Assets vers la bibliothèque cible.
4.
Si vous avez déposé des dossiers Assets de composants individuels dans la bibliothèque,
assurez-vous que le symbole Assets de chaque composant est défini sur Exporter dans la
première image.
Par exemple, le dossier Assets du composant RadioButton est appelé RadioButton Assets.
Son symbole est appelé RadioButtonAssets et contient tous les symboles des éléments
individuels. Si vous activez l’option Exporter dans la première image pour le symbole
RadioButtonAssets, tous les symboles d’éléments individuels seront exportés dans la
première image.
5.
Double-cliquez sur le symbole de l’enveloppe à modifier pour l’ouvrir en mode de
modification de symbole.
Par exemple, ouvrez le symbole States/RadioFalseDisabled.
6.
Si l’élément à colorer est un symbole graphique et non une occurrence de clip, choisissez
Modifier > Convertir en symbole pour le convertir en occurrence de clip.
Pour cet exemple, transformez le graphique central, correspondant à une occurrence du
symbole graphique RadioShape1, en symbole de clip et nommez-le Inner Circle. Il n’est
pas nécessaire de sélectionner Exporter pour ActionScript.
Il est conseillé, mais pas obligatoire, de déplacer le symbole de clip nouvellement créé dans
le dossier Eléments des actifs de composant modifiés.
7.
Si vous avez converti un symbole graphique en occurrence de clip à l’étape précédente,
donnez-lui un nom pouvant être référencé dans le code ActionScript.
Pour cet exemple, entrez le nom d’occurrence innerCircle.
8.
Ajoutez du code ActionScript pour enregistrer l’élément d’enveloppe ou l’occurrence de
clip qu’il contient en tant qu’élément d’enveloppe de couleur.
Par exemple, ajoutez le code suivant dans le scénario de l’élément d’enveloppe.
mx.skins.ColoredSkinElement.setColorStyle(innerCircle,
"symbolBackgroundDisabledColor");
Dans cet exemple, vous utilisez une couleur qui correspond déjà à un nom de style existant
dans le style Sample. Dans la mesure du possible, il est préférable d’utiliser des noms de
style correspondant aux normes CSS officielles ou aux styles fournis par les thèmes Halo et
Sample.
A propos de l’application d’enveloppes aux composants
107
9.
Répétez les étapes 5 à 8 jusqu’à ce que vous ayez modifié toutes les enveloppes voulues.
Dans cet exemple, répétez la procédure pour l’enveloppe RadioTrueDisabled, mais au lieu
de convertir le graphique existant en clip, supprimez-le et faites glisser le symbole
innerCircle existant vers l’élément d’enveloppe RadioTrueDisabled.
10. Lorsque vous avez terminé de modifier le symbole de l’enveloppe, cliquez sur le bouton de
retour, figurant dans la partie gauche de la barre d’informations en haut de la scène, pour
revenir en mode d’édition de document.
11.
Faites glisser une occurrence du composant sur la scène.
Pour cet exemple, déposez deux composants RadioButton sur la scène, définissez-en un
sur sélectionné, puis utilisez ActionScript pour les définir tous deux sur désactivé pour
visualiser les modifications.
12. Ajoutez
du code ActionScript au document pour définir la nouvelle propriété de style sur
les occurrences du composant ou au niveau global.
Pour cet exemple, définissez la propriété au niveau global, comme suit :
_global.style.setStyle("symbolBackgroundDisabledColor", 0xD9D9D9);
13.
Sélectionnez Contrôle > Tester l’animation.
Application de nouvelles enveloppes à un composant
Une fois que vous avez créé une enveloppe, vous devez l’appliquer au composant d’un
document. Vous pouvez utiliser la méthode createClassObject() pour créer
dynamiquement les occurrences d’un composant ou les placer manuellement sur la scène. Il
existe deux moyens d’appliquer des enveloppes aux occurrences de composant, selon la
manière dont vous ajoutez les composants à un document.
Pour créer dynamiquement un composant et appliquer une nouvelle
enveloppe :
1.
Choisissez Fichier > Nouveau pour créer un document Flash.
2.
Choisissez Fichier > Enregistrer et donnez-lui un nom unique, tel que
DynamicSkinning.fla.
3.
Faites glisser les composants du panneau Composants vers la bibliothèque, y compris le
composant dont vous avez modifié l’enveloppe (dans cet exemple, RadioButton).
Cette action permet d’ajouter les symboles dans la bibliothèque, mais elle ne permet pas
de les rendre visibles dans le document.
108
Personnalisation des composants
4.
Faites glisser MyRadioTrueUp et tous les autres symboles personnalisés du fichier
MyTheme.fla vers la bibliothèque de DynamicSkinning.fla.
Cette action permet d’ajouter les symboles dans la bibliothèque, mais elle ne permet pas
de les rendre visibles dans le document.
5.
Ouvrez le panneau Actions et saisissez ce qui suit sur l’image 1 :
import mx.controls.RadioButton;
createClassObject(RadioButton, "myRadio", 0,
{trueUpIcon:"MyRadioTrueUp", label: "My Radio Button"});
6.
Sélectionnez Contrôle > Tester l’animation.
Pour ajouter dynamiquement un composant sur la scène et appliquer une
nouvelle enveloppe :
1.
Choisissez Fichier > Nouveau pour créer un document Flash.
2.
Choisissez Fichier > Enregistrer et donnez-lui un nom unique, tel que ManualSkinning.fla.
3.
Faites glisser les composants du panneau Composants vers la scène, y compris celui dont
vous avez modifié l’enveloppe (dans cet exemple, RadioButton).
4.
Faites glisser MyRadioTrueUp et tous les autres symboles personnalisés du fichier
MyTheme.fla vers la bibliothèque de ManualSkinning.fla.
Cette action permet d’ajouter les symboles dans la bibliothèque, mais elle ne permet pas
de les rendre visibles dans le document.
5.
Sélectionnez le composant RadioButton sur la scène et ouvrez le panneau Actions.
6.
Joignez le code suivant à l’occurrence RadioButton :
onClipEvent(initialize){
trueUpIcon = "MyRadioTrueUp";
}
7.
Sélectionnez Contrôle > Tester l’animation.
A propos de l’application d’enveloppes aux composants
109
Application de nouvelles enveloppes à un
sous-composant
Dans certaines situations, vous souhaiterez modifier les enveloppes d’un sous-composant dans
un composant, mais les propriétés des enveloppes ne sont pas directement accessibles (par
exemple il n’existe aucun moyen direct de modifier les enveloppes de la barre de défilement
d’un composant List). Le code suivant vous permet d’accéder aux enveloppes des barres de
défilement. Toutes les barres de défilement créées après l’exécution de ce code auront aussi les
nouvelles enveloppes.
Si un composant est constitué de sous-composants, ceux-ci sont identifiés dans l’entrée du
composant, dans le guide Référence du langage des composants.
Pour appliquer une nouvelle enveloppe à un sous-composant :
1.
Suivez la procédure de la section Création de nouvelles enveloppes de composants, page 105,
mais en modifiant cette fois l’enveloppe d’une barre de défilement. Pour cet exemple,
modifiez l’enveloppe ScrollDownArrowDown et donnez-lui le nouveau nom
MyScrollDownArrowDown.
2.
Choisissez Fichier > Nouveau pour créer un document Flash.
3.
Choisissez Fichier > Enregistrer et donnez-lui un nom unique tel que
SubcomponentProject.fla.
4.
Faites glisser le composant List du panneau Composants jusqu’à la bibliothèque.
Cette action permet d’ajouter le composant dans le panneau Bibliothèque, mais elle ne
permet pas de le rendre visible dans le document.
5.
Faites glisser MyScrollDownArrowDown et tous les autres symboles modifiés du fichier
MyTheme.fla vers la bibliothèque de SubcomponentProject.fla.
Cette opération permet d’ajouter le composant au panneau Bibliothèque, sans qu’il soit
visible dans le document.
110
Personnalisation des composants
6.
Effectuez l’une des opérations suivantes :
■
Pour modifier toutes les barres de défilement d’un document, saisissez le code suivant
dans le panneau Actions, sur l’image 1 du scénario :
import mx.controls.List;
import mx.controls.scrollClasses.ScrollBar;
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
Vous pouvez saisir le code suivant dans l’image 1 pour créer une liste de manière
dynamique :
createClassObject(List, "myListBox", 0, {dataProvider:
["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});
Vous pouvez également faire glisser un composant List de la bibliothèque vers la scène.
■
Pour modifier une barre de défilement spécifique dans un document, saisissez le code
suivant dans le panneau Actions, sur l’image 1 du scénario :
import mx.controls.List
import mx.controls.scrollClasses.ScrollBar
var oldName = ScrollBar.prototype.downArrowDownName;
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
createClassObject(List, "myList1", 0, {dataProvider: ["AL","AR","AZ",
"CA","HI","ID", "KA","LA","MA"]});
myList1.redraw(true);
ScrollBar.prototype.downArrowDownName = oldName;
R E MA R QU E
7.
Définissez suffisamment de données pour que les barres de défilement
apparaissent ou définissez la propriété vScrollPolicy sur true.
Choisissez Contrôle > Tester l’animation.
Vous pouvez également définir les enveloppes des sous-composants pour tous les composants
d’un document en définissant la propriété de l’enveloppe sur l’objet prototype du
composant, dans la section #initclip d’un symbole d’enveloppe.
A propos de l’application d’enveloppes aux composants
111
Pour utiliser #initclip afin d’appliquer une enveloppe modifiée à tous les
composants d’un document :
1.
Suivez la procédure de la section Création de nouvelles enveloppes de composants, page 105,
mais en modifiant cette fois l’enveloppe d’une barre de défilement. Pour cet exemple,
modifiez l’enveloppe ScrollDownArrowDown et donnez-lui le nouveau nom
MyScrollDownArrowDown.
2.
Choisissez Fichier > Nouveau pour créer un document Flash. Enregistrez-le sous un nom
unique tel que SkinsInitExample.fla.
3.
Choisissez le symbole MyScrollDownArrowDown dans la bibliothèque de l’exemple de
bibliothèque de thème modifié et faites-le glisser vers la bibliothèque de
SkinsInitExample.fla.
Cette opération permet d’ajouter le symbole à la bibliothèque, sans qu’il soit visible sur la
scène.
4.
Choisissez MyScrollDownArrowDown dans la bibliothèque SkinsInitExample.fla et
sélectionnez Liaison dans le menu d’options.
5.
Activez la case à cocher Exporter pour ActionScript. Cliquez sur OK.
L’option Exporter dans la première image doit être automatiquement sélectionnée ; si ce
n’est pas le cas, faites-le.
6.
Double-cliquez sur MyScrollDownArrowDown dans la bibliothèque pour l’ouvrir en
mode de modification de symbole.
7.
Saisissez le code suivant dans l’image 1 du symbole MyScrollDownArrowDown :
#initclip 10
import mx.controls.scrollClasses.ScrollBar;
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
#endinitclip
8.
Effectuez l’une des opérations suivantes pour ajouter un composant List au document :
■
■
Faites glisser un composant List du panneau Composants sur la scène. Saisissez
suffisamment de paramètres Etiquette pour que la barre de défilement verticale
apparaisse.
Faites glisser un composant List du panneau Composants sur la bibliothèque. Saisissez
le code suivant sur l’image 1 du scénario principal de SkinsInitExample.fla :
createClassObject(mx.controls.List, "myListBox1", 0, {dataProvider:
["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});
R EM A R QU E
112
Ajoutez suffisamment de données pour que la barre de défilement verticale
apparaisse ou bien définissez vScrollPolicy sur true.
Personnalisation des composants
L’exemple suivant explique comment appliquer une enveloppe à un élément se trouvant déjà
sur la scène. Cet exemple applique uniquement l’enveloppe aux barres de défilement des
composants List ; celles des composants TextArea ou ScrollPane ne seront pas enveloppées.
Pour utiliser #initclip afin d’appliquer une enveloppe modifiée à des
composants spécifiques d’un document :
1.
Suivez la procédure de la section Modification des enveloppes des composants dans un
document, page 103, mais en modifiant cette fois l’enveloppe d’une barre de défilement.
Pour cet exemple, modifiez l’enveloppe ScrollDownArrowDown et donnez-lui le nouveau
nom MyScrollDownArrowDown.
2.
Choisissez Fichier > Nouveau pour créer un document Flash.
3.
Choisissez Fichier > Enregistrer et donnez-lui un nom unique tel que MyVScrollTest.fla.
4.
Faites glisser MyScrollDownArrowDown de la bibliothèque de thème vers la bibliothèque
MyVScrollTest.fla.
5.
Choisissez Insertion > Nouveau symbole et donnez-lui un nom unique, tel que
MyVScrollBar.
6.
Activez la case à cocher Exporter pour ActionScript. Cliquez sur OK.
L’option Exporter dans la première image doit être automatiquement sélectionnée ; si ce
n’est pas le cas, faites-le.
7.
Saisissez le code suivant dans l’image 1 du symbole MyVScrollBar :
#initclip 10
import MyVScrollBar
Object.registerClass("VScrollBar", MyVScrollBar);
#endinitclip
8.
Faites glisser un composant List du panneau Composants sur la scène.
9.
Dans l’inspecteur des propriétés, saisissez le nombre de paramètres Etiquette nécessaires
pour faire apparaître la barre de défilement verticale.
10. Choisissez
11.
Fichier > Enregistrer.
Choisissez Fichier > Nouveau et créez un fichier ActionScript.
A propos de l’application d’enveloppes aux composants
113
12. Saisissez
le code suivant :
import mx.controls.VScrollBar
import mx.controls.List
class MyVScrollBar extends VScrollBar{
function init():Void{
if (_parent instanceof List){
downArrowDownName = "MyScrollDownArrowDown";
}
super.init();
}
}
13.
Choisissez Fichier > Enregistrer et enregistrez le fichier sous MyVScrollBar.as.
14. Cliquez
sur un espace vide de la scène puis, dans l’inspecteur des propriétés, cliquez sur le
bouton Paramètres de publication.
15. Cliquez
sur le bouton Paramètres de la version ActionScript.
16.
Cliquez sur le bouton Ajouter un nouveau chemin (+) pour ajouter un nouveau chemin de
classe et sélectionnez le bouton Cible pour rechercher l’emplacement du fichier
MyVScrollBar.as sur votre disque dur.
17.
Choisissez Contrôle > Tester l’animation.
Modification des propriétés des enveloppes dans un
sous-composant
Si un composant ne prend pas directement en charge les variables d’enveloppe, vous pouvez
créer une sous-classe et remplacer ses enveloppes. Par exemple, le composant ComboBox ne
gère pas directement l’application d’enveloppes à son menu déroulant car il utilise un
composant List comme menu déroulant.
Si un composant est constitué de sous-composants, ceux-ci sont identifiés dans l’entrée du
composant, dans le guide Référence du langage des composants.
Pour appliquer une enveloppe à un sous-composant :
1.
Suivez la procédure de la section Modification des enveloppes des composants dans un
document, page 103, mais en modifiant cette fois l’enveloppe d’une barre de défilement.
Pour cet exemple, modifiez l’enveloppe ScrollDownArrowDown et donnez-lui le nouveau
nom MyScrollDownArrowDown.
2.
Choisissez Fichier > Nouveau pour créer un document Flash.
3.
Choisissez Fichier > Enregistrer et donnez-lui un nom unique tel que MyComboTest.fla.
114
Personnalisation des composants
4.
Faites glisser MyScrollDownArrowDown de la bibliothèque de thème vers la bibliothèque
MyComboTest.fla.
Cette action permet d’ajouter le symbole à la bibliothèque, mais pas de le rendre visible
sur la scène.
5.
Choisissez Insertion > Nouveau symbole et donnez-lui un nom unique, tel que
MyComboBox.
6.
Activez la case à cocher Exporter pour ActionScript et cliquez sur OK.
L’option Exporter dans la première image doit être automatiquement sélectionnée ; si ce
n’est pas le cas, faites-le.
7.
Saisissez le code suivant dans le panneau Actions, sur l’image 1 du symbole MyComboBox :
#initclip 10
import MyComboBox
Object.registerClass("ComboBox", MyComboBox);
#endinitclip
8.
Lorsque vous avez terminé de modifier le symbole, cliquez sur le bouton de retour figurant
dans la partie gauche de la barre d’informations en haut de la scène pour revenir en mode
d’édition de document.
9.
Faites glisser un composant ComboBox sur la scène.
10. Dans
l’inspecteur des propriétés, saisissez le nombre de paramètres Etiquette nécessaires
pour faire apparaître la barre de défilement verticale.
11.
Choisissez Fichier > Enregistrer.
12. Choisissez
13.
Fichier > Nouveau et créez un fichier ActionScript.
Saisissez le code suivant :
import mx.controls.ComboBox
import mx.controls.scrollClasses.ScrollBar
class MyComboBox extends ComboBox{
function getDropdown():Object{
var oldName = ScrollBar.prototype.downArrowDownName;
ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";
var r = super.getDropdown();
ScrollBar.prototype.downArrowDownName = oldName;
return r;
}
}
14. Choisissez
15. Revenez
16.
Fichier > Enregistrer et enregistrez le fichier sous MyComboBox.as.
au fichier MyComboTest.fla.
Cliquez sur un espace vide de la scène puis, dans l’inspecteur des propriétés, cliquez sur le
bouton Paramètres de publication.
A propos de l’application d’enveloppes aux composants
115
17.
Cliquez sur le bouton Paramètres de la version ActionScript.
18.
Cliquez sur le bouton Ajouter un nouveau chemin (+) pour ajouter un nouveau chemin de
classe et sélectionnez le bouton Cible pour rechercher l’emplacement du fichier
MyComboBox.as sur votre disque dur.
19. Choisissez
Contrôle > Tester l’animation.
Présentation des thèmes
Les thèmes sont des collections de styles et d’enveloppes. Le thème par défaut pour Flash est
Halo (HaloTheme.fla). Ce thème Halo offre à vos applications une apparence cohérente,
agréable et claire qui sera appréciée par vos utilisateurs. Flash inclut des thèmes
supplémentaires comme Sample (SampleTheme.fla). Ce dernier offre un exemple d’utilisation
d’autres styles pour la personnalisation de vos applications. (Le thème Halo n’utilise pas tous
les styles inclus dans le thème Sample.) Dans une installation par défaut, les fichiers de thème
sont situés dans les dossiers suivants :
■
Sous Windows : C:\Program Files\Macromedia\Flash
8\langue\Configuration\ComponentsFLA\
■
Sous Macintosh : HD/Applications/Macromedia Flash 8/Configuration/
ComponentFLA/
Vous pouvez créer de nouveaux thèmes et les appliquer à un document pour modifier l’aspect
et le comportement de tous les composants. Par exemple, vous pouvez créer des thèmes
reproduisant l’apparence du système d’exploitation natif.
Les composants utilisent des enveloppes (symboles de graphiques ou de clips) pour afficher
leurs apparences. Le fichier .AS associé à chaque composant contient du code qui charge des
enveloppes spécifiques pour le composant. Pour créer un thème, il vous suffit de copier le
thème Halo ou Sample et de modifier les graphiques des enveloppes.
Un thème peut également contenir un nouveau jeu de valeurs de style par défaut. Vous devez
écrire du code ActionScript pour créer une déclaration de style global et des déclarations de
style supplémentaires. Pour plus d’informations, reportez-vous à Modification des valeurs de
propriétés de style par défaut d’un thème, page 121.
116
Personnalisation des composants
Passage d’un thème à l’autre
Macromedia Flash installe deux thèmes : Halo et Sample. Vous remarquerez que les
informations de référence de composant pour chaque composant contiennent un tableau des
propriétés de style que vous pouvez définir pour l’un des thèmes (ou les deux). Par
conséquent, lorsque vous lisez un tableau de propriétés de style (comme celui du composant
Button dans la section Utilisation de styles avec le composant Button du guide Référence du
langage des composants ), recherchez le thème qui prend en charge le style souhaité. Le tableau
indique les thèmes Halo, Sample ou les deux (ce qui signifie que les deux thèmes supportent la
propriété du style).
Le thème Halo est le thème par défaut pour les composants. Par conséquent, si vous souhaitez
utiliser le thème Sample, vous devez passer du thème actuel Halo au thème Sample.
Pour passer au thème Sample :
1.
Choisissez Fichier > Ouvrir et ouvrez le document qui utilise des composants version 2
dans Flash ou choisissez Fichier > Nouveau et créez un document qui utilise des
composants version 2.
2.
Choisissez Fichier > Importer > Ouvrir une bibliothèque externe et sélectionnez le fichier
SampleTheme.fla à appliquer à votre document.
Ce fichier est stocké dans le dossier Configuration au niveau de l’application. Pour
connaître son emplacement exact dans votre système d’exploitation, consultez la section
Présentation des thèmes, page 116.
Présentation des thèmes
117
3.
Dans le panneau Bibliothèque du thème SampleTheme.fla, choisissez Flash UI
Components 2/Themes/MMDefault et faites glisser le dossier Assets de tous les
composants de votre document vers le panneau Bibliothèque de votre document Flash.
Par exemple, faites glisser le dossier RadioButton Assets vers la bibliothèque.
Si vous ne savez pas exactement quels composants sont présents dans le document, faites
glisser le clip du thème Sample entier sur la scène. Les enveloppes sont automatiquement
affectées aux composants du document.
R EM A R QU E
118
L’aperçu en direct des composants sur la scène ne reflète pas le nouveau thème.
Personnalisation des composants
4.
Si vous déposez des dossiers Assets de composants individuels dans le panneau Bibliothèque
de votre document, assurez-vous que le symbole Assets de chaque composant est défini sur
Exporter dans la première image.
Par exemple, le dossier Assets du composant RadioButton est appelé RadioButton Assets.
Ouvrez le dossier RadioButtonAssets. Un symbole de clip appelé RadioButtonAssets
apparaîtra. Le symbole RadioButtonAssets contient tous les symboles des éléments
individuels.
Cliquez avec le bouton droit (Windows) ou avec la touche Contrôle enfoncée (Macintosh)
sur le symbole RadioButtonAssets dans la bibliothèque de votre document et choisissez
l’option de menu Liaison. Activez la case à cocher Exporter dans la première image de
façon à ce que tous les symboles des éléments individuels soient exportés également dans
la première image. Cliquez ensuite sur OK pour enregistrer les paramètres.
5.
Choisissez Contrôle > Tester l’animation pour visualiser le document avec son nouveau
thème.
Présentation des thèmes
119
Création d’un thème
Si vous ne voulez pas utiliser le thème Halo ou le thème Sample, vous pouvez les modifier
pour créer un nouveau thème.
Certaines enveloppes ont une taille prédéfinie dans les thèmes. Vous pouvez en augmenter ou
en réduire la taille. Les composants seront alors automatiquement redimensionnés à leur
nouvelle taille. Les autres enveloppes se composent de plusieurs éléments, certains statiques et
d’autres extensibles.
Certaines enveloppes (par exemple, RectBorder et ButtonSkin) utilisent l’API de dessin
ActionScript pour tracer leurs graphiques car elle est plus efficace en matière de taille et de
performances. Vous pouvez partir du code ActionScript contenu dans ces enveloppes pour les
adapter à vos besoins.
Pour obtenir une liste des enveloppes supportées par chaque composant et ses propriétés,
reportez-vous au guide Référence du langage des composants.
Pour créer un thème :
1.
Sélectionnez le fichier FLA correspondant au thème à utiliser comme modèle et faites-en
une copie.
Donnez un nom unique à la copie, par exemple MyTheme.fla.
2.
Choisissez Fichier > Ouvrir MyTheme.fla dans Flash.
3.
Choisissez Fenêtre > Bibliothèque pour ouvrir la bibliothèque si ce n’est pas déjà fait.
4.
Double-cliquez sur le symbole de l’enveloppe à modifier pour l’ouvrir en mode de
modification de symbole.
Les enveloppes sont situées dans le dossier Flash UI Components 2/Themes/MMDefault/
Composant Assets (cet exemple utilise RadioButton Assets).
5.
Modifiez le symbole ou supprimez les graphiques et créez-en de nouveaux.
Vous pouvez choisir Affichage > Zoom avant pour agrandir la représentation. Lors de la
modification d’une enveloppe, vous devez conserver le point d’alignement pour qu’elle
s’affiche correctement. Le coin supérieur gauche de tous les symboles modifiés doit se
trouver à (0,0).
Par exemple, ouvrez l’élément States/RadioFalseDisabled et appliquez la couleur gris clair
au cercle intérieur.
6.
Lorsque vous avez terminé de modifier le symbole de l’enveloppe, cliquez sur le bouton de
retour, figurant dans la partie gauche de la barre d’informations en haut de la scène, pour
revenir en mode d’édition de document.
7.
Répétez les étapes 4 à 6 jusqu’à ce que vous ayez modifié toutes les enveloppes voulues.
120
Personnalisation des composants
8.
Appliquez MyTheme.fla à un document selon la procédure décrite ultérieurement dans ce
chapitre. (Voir la section Application d’un nouveau thème à un document, page 122.)
Modification des valeurs de propriétés de style par
défaut d’un thème
Les valeurs de propriétés de style par défaut sont fournies pour chaque thème dans une classe
appelée Default. Pour modifier les paramètres par défaut d’un thème personnalisé, créez une
nouvelle classe ActionScript appelée Default dans un paquet approprié pour votre thème et
modifiez-en les valeurs par défaut selon vos besoins.
Pour modifier les valeurs de style par défaut d’un thème :
1.
Créez un nouveau dossier pour votre thème à l’emplacement First Run/Classes/mx/skins.
Appelez-le myTheme par exemple.
2.
Copiez une classe Defaults existante dans le dossier de votre nouveau thème.
Par exemple, copiez mx/skins/halo/Defaults.as dans mx/skins/myTheme/Defaults.as.
3.
Ouvrez la nouvelle classe Defaults dans un éditeur ActionScript.
Les utilisateurs de Flash Professionnel 8 peuvent ouvrir le fichier dans Flash. Vous pouvez
également l’ouvrir dans le Bloc-notes de Windows ou dans SimpleText sous Macintosh.
4.
Modifiez la déclaration de classe de manière à refléter le nouveau paquet.
Par exemple, notre nouvelle déclaration de classe est class
mx.skins.myTheme.Defaults.
5.
Au besoin, modifiez les paramètres de style.
Par exemple, changez la couleur des composants désactivés par défaut en rouge foncé.
o.disabledColor = 0x663333;
6.
Enregistrez le fichier de classe Defaults modifié.
7.
Copiez une classe FocusRect existante du thème source dans votre thème personnalisé.
Par exemple, copiez mx/skins/halo/FocusRect.as dans mx/skins/myTheme/FocusRect.as.
8.
Ouvrez la nouvelle classe FocusRect dans un éditeur ActionScript.
9.
Dirigez toutes les références au paquet du thème source vers le paquet du nouveau thème.
Par exemple, changez toutes les occurrences de "halo" en "myTheme".
10. Enregistrez
11.
le fichier FocusRect modifié.
Ouvrez le fichier FLA de votre thème personnalisé.
Cet exemple utilise le fichier MyTheme.fla.
Présentation des thèmes
121
12. Ouvrez
la bibliothèque (Fenêtre > Bibliothèque) et localisez le symbole Defaults.
Dans cet exemple, il s’agit de Flash UI Components 2/Themes/MMDefault/Defaults.
13.
Modifiez les propriétés du symbole Default.
14. Changez
le paramètre Classe AS 2.0 en fonction de votre nouveau paquet.
Pour l’exemple de classe, il s’agit de mx.skins.myTheme.Defaults.
15. Cliquez
16.
sur OK.
Localisez le symbole FocusRect.
Dans cet exemple, il s’agit de Flash UI Components 2/Themes/MMDefault/FocusRect.
17.
Modifiez les propriétés du symbole FocusRect.
18.
Changez le paramètre Classe AS 2.0 en fonction de votre nouveau paquet.
Pour l’exemple de classe, il s’agit de mx.skins.myTheme.FocusRect.
19. Cliquez
sur OK.
20.Appliquez
le thème personnalisé à un document selon la procédure de la section suivante.
N’oubliez pas d’inclure les symboles Defaults et FocusRect lorsque vous faites glisser des
éléments de votre thème personnalisé vers le document cible.
Dans cet exemple, vous avez utilisé un nouveau thème pour personnaliser la couleur du texte
des composants désactivés. Cette personnalisation particulière, qui consiste à modifier une
seule valeur de propriété de style par défaut, aurait été plus simple via l’application de styles,
comme le décrit la section Utilisation de styles pour personnaliser la couleur et le texte des
composants, page 86. L’utilisation d’un nouveau thème pour personnaliser les valeurs par
défaut convient bien pour la personnalisation de nombreuses propriétés de style ou lorsque
vous créez déjà un nouveau thème pour personnaliser les graphiques des composants.
Application d’un nouveau thème à un document
Pour appliquer un nouveau thème à un document, ouvrez un fichier FLA de thème en tant
que bibliothèque externe et faites glisser le dossier Thème de la bibliothèque externe sur la
scène. Les étapes suivantes expliquent la procédure en détail, en supposant que vous avez déjà
un nouveau thème (pour plus d’informations, consultez la section Création d’un thème,
page 120).
122
Personnalisation des composants
Pour appliquer un thème à un document :
1.
Choisissez Fichier > Ouvrir et ouvrez le document qui utilise des composants version 2
dans Flash ou choisissez Fichier > Nouveau et créez un document qui utilise des
composants version 2.
2.
Choisissez Fichier > Importer > Ouvrir une bibliothèque externe, puis sélectionnez le
fichier FLA du thème à appliquer à votre document.
3.
Dans le panneau Bibliothèque du thème, choisissez Flash UI Components 2/Themes/
MMDefault et faites glisser le dossier Assets de tous les composants à utiliser vers la
bibliothèque de votre document.
Par exemple, faites glisser le dossier RadioButton Assets vers la bibliothèque.
Si vous n’êtes pas sûr des composants qui se trouvent dans le document, faites glisser tout
le clip du thème (par exemple, pour SampleTheme.fla, le clip principal du thème est Flash
UI Components 2 > SampleTheme) sur la scène. Les enveloppes sont automatiquement
affectées aux composants du document.
R EM A R QU E
L’aperçu en direct des composants sur la scène ne reflète pas le nouveau thème.
Présentation des thèmes
123
4.
Si vous avez déposé des dossiers Assets de composants individuels sur la bibliothèque
ThemeApply.fla, assurez-vous que le symbole Assets de chaque composant est défini sur
Exporter dans la première image.
Par exemple, le dossier Assets du composant RadioButton est appelé RadioButton Assets.
Son symbole est appelé RadioButtonAssets et contient tous les symboles des éléments
individuels. Si vous activez l’option Exporter dans la première image pour le symbole
RadioButtonAssets, tous les symboles d’éléments individuels seront exportés dans la
première image.
5.
124
Choisissez Contrôle > Tester l’animation pour visualiser le nouveau thème appliqué.
Personnalisation des composants
Modification des paramètres d’exportation
Lorsque vous appliquez le thème Sample ou Halo à votre document, de nombreux éléments
d’enveloppe sont définis pour être exportés dans la première image afin qu’ils soient
immédiatement disponibles pour les composants lors de la lecture. Cependant, si vous
modifiez les paramètres d’exportation de la publication (Fichier > Paramètres de publication >
onglet Flash > bouton Paramètres de la version ActionScript > Exporter l’image pour les
classes) de votre fichier FLA vers une image après la première image, vous devez également
modifier les paramètres d’exportation des éléments des thèmes Sample et Halo. Pour ce faire,
vous devez ouvrir les éléments de composants suivants dans votre bibliothèque de documents
et désactiver la case à cocher Exporter dans la première image (cliquez avec le bouton droit de
la souris sur > Liaison > Exporter dans la première image) :
Sample, thème
■
Flash UI Components 2/Base Classes/UIObject
■
Flash UI Components 2/Themes/MMDefault/Defaults
■
Flash UI Components 2/Base Classes/UIObjectExtensions
■
Flash UI Components 2/Border Classes/BoundingBox
■
Flash UI Components 2/SampleTheme
■
Flash UI Components 2/Themes/MMDefault/Button Assets/Elements/ButtonIcon
■
■
■
■
Flash UI Components 2/Themes/MMDefault/DateChooser Assets/ Elements/
Arrows/cal_disabledArrow
Flash UI Components 2/Themes/MMDefault/FocusRect
Flash UI Components 2/Themes/MMDefault/Window Assets/ States/
CloseButtonOver
Flash UI Components 2/Themes/MMDefault/Accordion Assets/
AccordionHeaderSkin
■
Flash UI Components 2/Themes/MMDefault/Alert Assets/AlertAssets
■
Flash UI Components 2/Themes/MMDefault/Border Classes/Border
■
Flash UI Components 2/Themes/MMDefault/Border Classes/CustomBorder
■
Flash UI Components 2/Themes/MMDefault/Border Classes/RectBorder
■
Flash UI Components 2/Themes/MMDefault/Button Assets/ActivatorSkin
■
Flash UI Components 2/Themes/MMDefault/Button Assets/ButtonSkin
Présentation des thèmes
125
Halo, thème
■
Flash UI Components 2/Base Classes/UIObject
■
Flash UI Components 2/Themes/MMDefault/Defaults
■
Flash UI Components 2/Base Classes/UIObjectExtensions
■
Flash UI Components 2/Component Assets/BoundingBox
■
Flash UI Components 2/HaloTheme
■
■
Flash UI Components 2/Themes/MMDefault/Alert Assets/AlertAssets
■
Flash UI Components 2/Themes/MMDefault/Border Classes/Border
■
Flash UI Components 2/Themes/MMDefault/Border Classes/CustomBorder
■
Flash UI Components 2/Themes/MMDefault/Border Classes/RectBorder
■
Flash UI Components 2/Themes/MMDefault/Button Assets/ActivatorSkin
■
Flash UI Components 2/Themes/MMDefault/Button Assets/ButtonSkin
■
Flash UI Components 2/Themes/MMDefault/Button Assets/Elements/ButtonIcon
■
Flash UI Components 2/Themes/MMDefault/CheckBox Assets/Elements/
CheckThemeColor1
■
Flash UI Components 2/Themes/MMDefault/CheckBox Assets/CheckBoxAssets
■
Flash UI Components 2/Themes/MMDefault/ComboBox Assets/ComboBoxAssets
■
Flash UI Components 2/Themes/MMDefault/DataGrid Assets/DataGridAssets
■
Flash UI Components 2/Themes/MMDefault/DateChooser Assets/
DateChooserAssets
■
Flash UI Components 2/Themes/MMDefault/FocusRect
■
Flash UI Components 2/Themes/MMDefault/Menu Assets/MenuAssets
■
Flash UI Components 2/Themes/MMDefault/MenuBar Assets/MenuBarAssets
■
Flash UI Components 2/Themes/MMDefault/ProgressBar Assets/ProgressBarAssets
■
■
■
126
Flash UI Components 2/Themes/MMDefault/Accordion Assets/
AccordionHeaderSkin
Flash UI Components 2/Themes/MMDefault/RadioButton Assets/Elements/
RadioThemeColor1
Flash UI Components 2/Themes/MMDefault/RadioButton Assets/Elements/
RadioThemeColor2
Flash UI Components 2/Themes/MMDefault/RadioButton Assets/
RadioButtonAssets
■
Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/HScrollBarAssets
■
Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/ScrollBarAssets
Personnalisation des composants
■
■
Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/VScrollBarAssets
Flash UI Components 2/Themes/MMDefault/Stepper Assets/Elements/
StepThemeColor1
■
Flash UI Components 2/Themes/MMDefault/Stepper Assets/NumericStepperAssets
■
Flash UI Components 2/Themes/MMDefault/Tree Assets/TreeAssets
■
Flash UI Components 2/Themes/MMDefault/Window Assets/Window Assets
Combinaison de l’application
d’enveloppes et de styles pour
personnaliser un composant
Dans cette section, vous allez personnaliser une occurence de composant combo box en
utilisant des styles, des thèmes et des paramètres d’application d’enveloppes. Les procédures
montrent comment combiner l’application d’enveloppes aux paramètres de style afin de créer
une présentation unique pour un composant.
Création d’une occurrence de composant sur la
scène
La première partie de cet exercice nécessite que vous créiez une occurence ComboBox pour la
personnalisation.
Pour créer l’occurence ComboBox :
1.
Faites glisser un composant ComboBox sur la scène.
2.
Dans le panneau de propriétés, nommez l’occurrence my_cb.
3.
Dans la première image du scénario principal, ajoutez le composant ActionScript suivant
(vérifiez que vous l’ajoutez à l’image et non au composant lui-même ; le panneau d’actions
indique « Actions - Image » dans la barre de titre) :
my_cb.addItem({data:1, label:"One"});
my_cb.addItem({data:2, label:"Two"});
4.
Sélectionnez Contrôle > Tester l’animation pour afficher la combo box avec le style par
défaut et l’application d’enveloppe à partir du thème Halo.
Combinaison de l’application d’enveloppes et de styles pour personnaliser un composant
127
Création de la déclaration de style
Maintenant, vous devez créer une déclaration de style et affecter des styles à la déclaration de
style. Une fois que vous avez tous les styles que vous souhaitez dans la déclaration de style,
vous pouvez affecter le nom du nouveau style à l’occurence combo box.
Pour créer une déclaration de style et lui donner un nom :
1.
Dans la première image du scénario principal, ajoutez la ligne suivante au début de votre
composant ActionScript (conformément à une convention de codage, vous devez placer
toutes les instructions d’importation au début de votre ActionScript) :
import mx.styles.CSSStyleDeclaration;
2.
Sur la ligne suivante, nommez la nouvelle déclaration de style et ajoutez-la aux définitions
de style globales :
var new_style:Object = new CSSStyleDeclaration();
_global.styles.myStyle = new_style;
Une fois que vous avez affecté une nouvelle déclaration de style à la feuille de style _global,
vous pouvez associer les paramètres de style individuels à la déclaration de style
new_style. Pour plus d’informations sur la création d’une feuille de style pour les groupes
de composants, au lieu des définitions de styles pour une seule occurence, reportez-vous à
Définition de styles personnalisés pour des groupes de composants, page 92).
3.
Associez certains paramètres de style à la déclaration de style new_style. Les paramètres de
style suivants comprennent les définitions de style disponibles dans le composant
ComboBox (reportez-vous à la sectionUtilisation de styles avec le composant ComboBox du
guide Référence du langage des composants pour obtenir une liste complète) ainsi que les
styles de la classe RectBorder, car le composant ComboBox utilise la classe RectBorder :
new_style.setStyle("textAlign", "right");
new_style.setStyle("selectionColor", "white");
new_style.setStyle("useRollOver", false);
// borderStyle from RectBorder class
new_style.setStyle("borderStyle", "none");
128
Personnalisation des composants
Affectation des définitions de style au composant
combo box
Vous avez à ce stade une déclaration de style contenant une variété de styles, mais vous devez
affecter de manière explicite le nom du style à l’occurence du composant. Vous pouvez affecter
cette nouvelle déclaration du style à toute occurence de composant de votre document en
opérant de la manière suivante. Ajoutez la ligne suivante après les instructions addItem()
pour my_cb (selon une convention de codage, vous devez conserver ensemble toutes vos
instructions de création combo box) :
my_cb.setStyle("styleName", "myStyle");
Le code ActionScript associé à la première image du scénario principal doit être :
import mx.styles.CSSStyleDeclaration;
var new_style:Object = new CSSStyleDeclaration();
_global.styles.myStyle = new_style;
new_style.setStyle("textAlign", "right");
new_style.setStyle("selectionColor", "white");
new_style.setStyle("useRollOver", false);
// borderStyle from RectBorder class
new_style.setStyle("borderStyle", "none");
my_cb.addItem({data:1, label:"One"});
my_cb.addItem({data:2, label:"Two"});
my_cb.setStyle("styleName", "myStyle");
Choisissez Contrôle > Tester l’animation pour voir la zone combo stylée :
Combinaison de l’application d’enveloppes et de styles pour personnaliser un composant
129
Modification du thème combo box
Chaque composant de l’interface utilisateur liste les propriétés de style que vous pouvez
définir pour ce composant (par exemple, toutes les propriétés de style que vous pouvez définir
pour un composant ComboBox sont listées dans la section Personnalisation du composant
ComboBox du guide Référence du langage des composants). Dans le tableau des propriétés de
style, une colonne intitulée « Thème » indique quel thème installé supporte chaque propriété
de style. Toutes les propriétés de style ne sont pas supportées par tous les thèmes installés. Le
thème par défaut pour tous les composants d’interface utilisateur est le thème Halo. Lorsque
vous changez le thème en thème Sample, vous pouvez utiliser un autre ensemble de propriétés
de style (certaines propriétés ne sont peut-être plus disponibles si elles sont listées comme
propriétés Halo uniquement).
Pour changer le thème du composant stylé :
1.
Sélectionnez Fichier > Importer > Ouvrir une bibliothèque externe et sélectionnez
SampleTheme.fla pour ouvrir la bibliothèque de thèmes Sample dans Flash.
Ce fichier est stocké dans le dossier Configuration au niveau de l’application :
■
■
2.
Sous Windows : C:\Program Files\Macromedia\Flash
8\langue\Configuration\ComponentsFLA\
Sous Macintosh : HD/Applications/Macromedia Flash 8/Configuration/
ComponentFLA/
Faites glisser le clip principal SampleTheme (Flash UI Components 2 > SampleTheme) de
la bibliothèque SampleTheme vers votre bibliothèque de documents.
Le composant ComboBox est une combinaison de plusieurs composants et classes et
requiert des éléments des autres composants et des éléments comme les éléments Border et
ScrollBar. La manière la plus simple de vérifier que vous avez tous les éléments d’un thème
dont vous avez besoin consiste à faire glisser tous les éléments du thème vers votre
bibliothèque.
3.
130
Sélectionnez Contrôle > Tester l’animation pour voir la zone combo stylée :
Personnalisation des composants
Modification des éléments de l’enveloppe combo box
Pour changer l’apparence d’un composant, modifiez graphiquement les enveloppes
comprenant le composant. Pour modifier les enveloppes, ouvrez les éléments graphiques du
composant à partir du thème actuel et modifiez les symboles de ce composant. Macromedia
conseille cette approche car elle permet de ne pas supprimer ou ajouter de symboles dont
d’autres composants pourraient avoir besoin ; cette approche modifie l’apparence d’un
symbole d’enveloppe de composant existant.
R EM A R QU E
Il est possible, mais non conseillé, de modifier les fichiers de la classe source pour un
composant de sorte qu’il utilise les symboles avec différents noms et différentes
enveloppes. Vous pouvez également modifier de manière programmée ActionScript
dans un symbole d’enveloppe (pour obtenir un exemple de symboles ActionScript et
d’enveloppe personnalisés, reportez-vous à la section Personnalisation du composant
Accordion (Flash Professionnel uniquement) du guide Référence du langage des
composants). Cependant, puisque plusieurs composants, y compris le composant
ComboBox, partagent des éléments avec d’autres composants, le fait de modifier les
fichiers sources ou de changer les noms de symboles d’enveloppes peut avoir des
résultats inattendus.
Lorsque vous modifiez un symbole d’enveloppe de composant :
■
Toutes les occurences de ce composant utilisent les nouvelles enveloppes (mais pas les
styles personnalisés à moins que vous n’associez de manière explicite les styles aux
occurences) et certains composants dépendants de ce composant utilisent les nouvelles
enveloppes.
■
Si vous affectez un nouveau thème une fois que vous avez modifié vos enveloppes de
composant, assurez-vous que vous n’écrasez pas les enveloppes "modifiées" existantes (une
boîte de dialogue vous demande si vous souhaitez écraser les enveloppes et vous donne la
possibilité d’empêcher Flash d’écraser les enveloppes).
Dans cette section, vous continuez à utiliser le composant combo box de la section précédente
(voir Modification du thème combo box, page 130). Les étapes suivantes permettent de changer
l’apparence de la flèche allant vers le bas qui permet d’ouvrir le menu the combo box. Cette
flèche se transforme en cercle.
Combinaison de l’application d’enveloppes et de styles pour personnaliser un composant
131
Pour modifier le symbole de la flèche allant vers le bas du composant combo
box :
1.
Dans votre bibliothèque de documents, ouvrez les éléments ComboBox pour voir les clips
correspondant aux enveloppes du bouton ouvrant et fermant l’occurence combo box lors
de l’exécution. Plus spécialement, ouvrez le dossier Themes > MMDefault > ComboBox
Assets > States de votre bibliothèque de documents.
Le dossier States contient quatre clips : ComboDownArrowDisabled,
ComboDownArrowDown, ComboDownArrowOver et ComboDownArrowUp. Ces
quatre symboles sont composés d’autres symboles. De plus, les quatre utilisent le même
symbole pour la flèche allant vers le bas (triangle), appelée SymDownArrow.
2.
Double-cliquez sur le symbole ComboDownArrowDown pour le modifier.
Vous pouvez faire un zoom avant, jusqu’à 800 %, pour afficher les détails du bouton.
3.
Double-cliquez sur la flèche allant vers le bas (triangle noir) pour la modifier.
R EM A R QU E
4.
132
Vérifiez que vous avez sélectionné le symbole SymDownArrow de sorte que vous ne
pouvez supprimer que la forme à l’intérieur du clip et non le symbole du clip luimême.
Supprimez la flèche allant vers le bas sélectionnée (triangle noir et non tout le clip) sur la
scène.
Personnalisation des composants
5.
Tout en modifiant SymDownArrow, tracez un cercle à l’endroit où se trouvait la flèche
allant vers le bas.
Pour rendre la modification plus claire, pensez à tracer un cercle de couleur claire, bleu par
exemple, d’environ 4 pixels x 4 pixels et avec une coordonnée x de 0 et une coordonnée y
de -1 pour qu’il soit centré.
6.
Sélectionnez Contrôle > Tester l’animation pour voir la zone combo enveloppée :
Dans votre bibliothèque de documents, si vous sélectionnez ComboDownArrowOver et
ComboDownArrowUp, vous constatez qu’ils possèdent également le cercle bleu au lieu du
triangle noir, car ils utilisent également SymDownArrow pour le symbol de la flèche allant
vers le bas.
Combinaison de l’application d’enveloppes et de styles pour personnaliser un composant
133
134
Personnalisation des composants
CHAPITRE 6
6
Création de composants
Ce chapitre indique comment créer votre propre composant et le préparer pour la
distribution.
Ce chapitre contient les sections suivantes :
Fichiers source de composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Présentation de la structure du composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Création de votre premier composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Sélection d’une classe parent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Création d’un clip de composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Création du fichier de classe ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Incorporation de composants existants dans votre composant . . . . . . . . . . . . . . . 186
Exportation et distribution d’un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Etapes finales dans le développement du composant . . . . . . . . . . . . . . . . . . . . . . . 200
Fichiers source de composant
Les composants disponibles dans le panneau Composants sont des clips SWC compilés au
préalable. Le document Flash source (FLA) contenant les graphiques et les fichiers de classe
ActionScript (AS) contenant le code pour ces composants ont également été fournis. Vous
pouvez donc les utiliser lors de la création de vos composants personnalisés. Les fichiers source
des composants de la version 2 sont installés avec Macromedia Flash. Il peut être utile d’ouvrir
et de lire certains de ces fichiers et d’essayer de comprendre comment ils sont structurés avant
de créer vos propres composants. Le composant RadioButton est un bon exemple de
composant plus simple que vous pouvez consulter en premier. Tous les composants sont des
symboles dans la bibliothèque de StandardComponents.fla. Chaque symbole est lié à une
classe ActionScript. Ils se trouvent aux emplacements suivants :
135
■
Code source de fichier FLA
■
■
■
Sous Windows : C:\Program Files\Macromedia\Flash
8\langue\Configuration\ComponentsFLA\StandardComponents.fla.
Sous Macintosh : DD/Applications/Macromedia Flash 8/Configuration/
ComponentFLA/StandardComponents.fla
ActionScript, fichier de classe
■
■
Sous Windows : C:\Program Files\Macromedia\Flash 8\language\First
Run\Classes\mx
Sous Macintosh : DD/Applications/Macromedia Flash 8/First Run/Classes/mx
Présentation de la structure du
composant
Un composant est constitué d’un fichier Flash (FLA) et d’un fichier ActionScript (AS). Il
existe d’autres fichiers (par exemple, une icône et un fichier de débogage .swd) que vous
pouvez créer et préparer en option avec votre composant, mais tous les composants exigent un
fichier FLA et un fichier ActionScript. Une fois que vous avez terminé de développer votre
composant, vous l’exportez en tant que fichier SWC.
Un fichier Flash (FLA), un fichier ActionScript (AS) et un fichier SWC
Le fichier FLA contient un symbole de clip qui doit être lié au fichier AS à la fois dans la boîte
de dialogue Propriétés de liaison et la boîte de dialogue Définition du composant.
136
Création de composants
Le symbole du clip possède deux images et deux calques. Le premier calque est un calque
Actions ayant une fonction globale stop() sur l’image 1. Le second calque est un calque
Actifs avec deux images-clés : L’image 1 contient un cadre de délimitation ; l’image 2 contient
tous les autres éléments, y compris les graphiques et les classes de base utilisés par le
composant.
Le code ActionScript définissant les propriétés et les méthodes pour le composant se trouve
dans un fichier de classe ActionScript séparé. Ce fichier de classe déclare également les classes
étendues par le composant, le cas échéant. Le nom du fichier de classe AS est le nom du
composant, plus l’extension .as. Par exemple, MyComponent.as contient le code source du
composant MyComponent.
Il peut être utile d’enregistrer les fichiers FLA et AS du composant dans le même dossier et de
leur attribuer le même nom. Si le fichier AS n’est pas enregistré dans le même dossier, vous
devez vérifier que le dossier est dans le chemin de classe pour que le fichier FLA puisse le
trouver. Pour plus d’informations sur le chemin de classe, consultez Classes dans Formation à
ActionScript 2.0 dans Flash.
Présentation de la structure du composant
137
Création de votre premier composant
Dans cette section, vous allez créer un composant Dial. Les fichiers de composant terminés,
Dial.fla, Dial.as et DialAssets.fla, se trouvent dans le dossier des exemples sur vote ordinateur :
■
■
Sous Windows : le dossier C:\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\DialComponent.
Sous Macintosh : le dossier HD/Applications/Macromedia Flash 8/Samples and
Tutorials/Samples/Components/DialComponent.
Le composant Dial est un potentiomètre, comme celui utilisé pour mesurer la différence de
potentiel possible. Un utilisateur peut cliquer sur l’aiguille et la faire glisser pour changer sa
position. L’API pour le composant Dial a une propriété, value, que vous pouvez utiliser pour
obtenir et définir la position de l’aiguille.
Cette section vous indique les étapes à suivre pour créer un composant. Ces procédures sont
présentées de manière plus détaillée dans les sections suivantes (y compris Sélection d’une classe
parent, page 148, Création d’un clip de composant, page 151, Création du fichier de classe
ActionScript, page 156 et Exportation et distribution d’un composant, page 197).Cette section
contient les rubriques suivantes :
■
Création du fichier Dial Flash (FLA), page 138
■
Création du fichier de classe Dial, page 141
■
Test et exportation du composant Dial, page 145
Création du fichier Dial Flash (FLA)
Les premières étapes de création d’un composant comprennent la création du clip du
composant dans un fichier de document FLA.
Pour créer le fichier Dial FLA :
1.
Dans Flash, choisissez Fichier > Nouveau et créez un document.
2.
Choisissez Fichier > Enregistrer sous et enregistrez le fichier sous le nom Dial.fla.
Vous pouvez lui donner n’importe quel nom mais il est plus pratique de lui donner le
même nom que le composant.
3.
Sélectionnez Insertion > Nouveau symbole. Le composant lui-même est créé en tant que
nouveau symbole MovieClip qui sera disponible dans la bibliothèque.
Nommez le composant Dial et affectez-lui le clip de comportement.
4.
138
Si la section Liaison de la boîte de dialogue Créer un symbole n’est pas ouverte, cliquez sur
le bouton Avancé.
Création de composants
5.
Dans la zone Liaison, sélectionnez Exporter pour ActionScript et désélectionnez Exporter
dans la première image.
6.
Dans la zone de texte Identifiant, entrez un identifiant de liaison tel que Dial_ID.
7.
Dans la zone de texte Classe AS 2.0, entrez Dial. Cette valeur est le nom de la classe du
composant. Si la classe se trouve dans un paquet (mx.controls.Button, par exemple), entrez
le nom complet du paquet.
8.
Cliquez sur OK.
Flash bascule en mode d’édition de symbole.
9.
Insérez un nouveau calque. Nommez le calque supérieur Actions et le calque inférieur
Actifs.
10. Sélectionnez
l’image 2 dans le calque Actifs et insérez une image-clé (F6).
Il s’agit de la structure du clip du composant : un calque Actions et un calque Assets. Le
calque Actions a 1 image-clé et le calque Actifs a 2 images-clés.
11.
Sélectionnez Image 1 dans le calque Actions et ouvrez le panneau Actions (F9). Entrez une
fonction globale stop();.
Ceci empêche le clip de passer à l’image 2.
12. Sélectionnez
Fichier > Importer > Ouvrir une bibliothèque externe et choisissez le fichier
StandardComponents.fla depuis le dossier Configuration//ComponentFLA. Exemple :
■
■
Sous Windows : C:\Program Files\Macromedia\Flash
8\langue\Configuration\ComponentsFLA\StandardComponents.fla.
Sous Macintosh : DD/Applications/Macromedia Flash 8/Configuration/
ComponentFLA/StandardComponents.fla
R E MA R QU E
Pour plus d’informations sur les emplacements des dossiers, consultez la section
Dossiers de configuration installés avec Flash dans le guide Bien démarrer avec
Flash Lite.
Création de votre premier composant
139
13.
Dial étend la classe de base UIComponent ; par conséquent, vous devez faire glisser
une occurrence de UIComponent vers le document Dial. Dans la bibliothèque
StandardComponents.fla, recherchez le clip UIComponent dans le dossier suivant :
Flash UI Components 2 > Base Classes > FUIObject Subclasses et faites-le glisser
dans la bibliothèque Dial.fla.
Les dépendances d’actifs sont automatiquement copiées dans la bibliothèque Dial avec
UIComponent.
R EM A R QU E
Lorsque vous faites glisser UIComponent dans la bibliothèque Dial, la hiérarchie des
dossiers dans la bibliothèque Dial est modifiée. Si vous envisagez d’utiliser de
nouveau votre bibliothèque ou de l’utiliser avec d’autres groupes de composants
(tels que les composants de la version 2), vous devez restructurer la hiérarchie des
dossiers en fonction de la bibliothèque StandardComponents.fla de façon à ce
qu’elle soit organisée correctement et que vous évitiez les symboles dupliqués.
14. Dans
le calque Actifs, sélectionnez Image 2 et faites glisser une occurrence de
UIComponent sur la scène.
15. Fermez
16.
Choisissez Fichier > Importer > Ouvrir une bibliothèque externe et sélectionnez le fichier
DialAssets.fla.
■
■
17.
la bibliothèque StandardComponents.fla.
Sous Windows : C:\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\DialComponent\DialAssets.fla.
Sous Macintosh : DD/Applications/Macromedia Flash 8/Samples and Tutorials/
Samples/Components/DialComponent/DialAssets.fla
Dans le calque Actifs, sélectionnez Image 2 et faites glisser une occurrence du clip DialFinal
depuis la bibliothèque DialAssets vers la scène.
Tous les actifs du composant sont ajoutés dans l’image 2 du calque Actifs. Etant donné
qu’il existe une fonction globale stop() sur l’image 1 du calque Actions, les actifs dans
l’image 2 ne seront pas visibles car ils sont organisés sur la scène.
Vous ajoutez des actifs à l’image 2 pour deux raisons :
■
■
140
Pour que tous les actifs et les sous-actifs soient automatiquement copiés dans la
bibliothèque et instanciés dynamiquement (dans le cas de DialFinal) ou pour accéder à
leurs méthodes, propriétés et événements (dans le cas de UIComponent).
Le fait de placer les actifs dans une image permet de s’assurer qu’ils seront chargés avec
plus de soin lorsque l’animation est transmise, par conséquent, vous n’êtes pas obligé
de paramétrer les éléments de la bibliothèque pour les exporter dans la première image.
Cette approche empêche une pointe initiale de transfert de données lors du
téléchargement.
Création de composants
18.
Fermez la bibliothèque DialAssets.fla.
19. Dans
le calque Actifs, sélectionnez Image 1. Faites glisser le clip BoundingBox depuis la
bibliothèque (dossier Flash UI Components 2 > Component Assets) vers la scène. Nommez
l’occurence BoundingBox boundingBox_mc. Utilisez le panneau d’informations pour
définir à la fois la hauteur et la largeur du clip DialFinal sur 250 pixels et les coordonnées
x, y sur 0, 0.
L’occurrence de BoundingBox est utilisée pour créer l’aperçu en direct du composant et le
redimensionnement pendant la programmation. Vous devez dimensionner le cadre de
délimitation de façon à ce qu’il puisse inclure tous les éléments graphiques dans votre
composant.
R EM A R QU E
Si vous étendez un composant (y compris un composant de la version 2), vous
devez conserver les noms d’occurrence utilisés par ce composant car son code y
fera référence. Par exemple, si vous incluez un composant de la version 2 qui utilise
déjà le nom d’occurrence boundingBox_mc, vous ne devez pas le renommer. Pour
vos noms d’occurrence, vous pouvez utiliser des noms uniques ne provoquant pas
de conflit avec des noms existants dans le même domaine.
20.Sélectionnez le clip Dial dans la bibliothèque et sélectionnez le menu contextuel Définition
du composant à partir de la bibliothèque (Windows : clic droit ; Mac : Ctrl + clic).
21. Dans
la zone de texte Classe AS 2.0, entrez Dial.
Cette valeur est le nom de la classe ActionScript. Si la classe est dans un paquet, la valeur
est le paquet complet (mx.controls.CheckBox, par exemple).
22.Cliquez
sur OK.
23.Enregistrez
le fichier.
Création du fichier de classe Dial
Maintenant, vous devez créer le fichier de classe Dial comme un nouveau fichier ActionScript.
Pour créer le fichier de classe Dial :
1.
Dans Flash, sélectionnez Fichier > Nouveau, puis sélectionnez Fichier ActionScript.
2.
Sélectionnez Fichier > Enregistrer sous et enregistrez le fichier sous Dial.as dans le même
dossier que le fichier Dial.fla.
R EM A R QU E
Vous pouvez utiliser un éditeur de texte pour enregistrer le fichier Dial.as.
Création de votre premier composant
141
3.
Vous pouvez copier ou taper le code de classe ActionScript du composant Dial suivant dans
votre nouveau fichier Dial.as. Tapez le code au lieu de le copier pour vous familiariser
rapidement avec chaque élément du code du composant.
Lisez les commentaires dans le code pour une description de chaque section. (Pour des
informations détaillées sur les éléments d’un fichier de classe de composant, reportez-vous
à la section Présentation d’un fichier de classe de composant, page 157.
// Importation du paquet pour référencer
// la classe directement.
import mx.core.UIComponent;
// Balise de métadonnées Event
[Event("change")]
class Dial extends UIComponent
{
// Les composants doivent les déclarer pour être des
// composants à proprement parler dans la structure des composants.
static var symbolName:String = "Dial";
static var symbolOwner:Object = Dial;
var className:String = "Dial";
// Les clips needle et dial qui sont
// la représentation graphique du composant
private var needle:MovieClip;
private var dial:MovieClip;
private var boundingBox_mc:MovieClip;
// La variable du membre privé « __value » est publiquement
// accessible via des méthodes lecture/définition implicites,
// La mise à jour de cette propriété met à jour la position de
l’aiguille
// lorsque la valeur est définie.
private var __value:Number = 0;
// Cet indicateur est défini lorsque l’utilisateur fait glisser
// l’aiguille avec la souris et est ensuite effacé.
private var dragging:Boolean = false;
// Constructeur ;
// Lorsque cela est nécessaire pour toutes les classes, les composants
v2 exigent que
// le constructeur soit vide avec des arguments zéro.
// L’initialisation a lieu dans une méthode d’initialisation requise
init()
// une fois que l’occurrence de classe a été construite.
function Dial() {
}
// Code d’initialisation :
142
Création de composants
// La méthode d’initialisation init() est requise pour les composants
v2. Elle doit également
// à son tour, appeler sa méthode init() de classe parent avec
super.init().
// La méthode d’initialisation init() est requise pour les composants
étendant UIComponent.
function init():Void {
super.init();
useHandCursor = false;
boundingBox_mc._visible = false;
boundingBox_mc._width = 0;
boundingBox_mc._height = 0;
}
// Créez des objets enfants nécessaires au démarrage :
// La méthode createChildren() est requise pour les composants
// étendant UIComponent.
public function createChildren():Void {
dial = createObject("DialFinal", "dial", 10);
size();
}
// La méthode de dessin draw() est requise pour les composants v2.
// Elle est invoquée une fois que le composant a été
// invalidé par une personne appelant invalidate().
// Ceci est mieux que de redessiner depuis la fonction set()
// pour value, car s’il existe d’autres propriétés, il est
// préférable de rassembler les modifications dans un nouveau dessin,
plutôt
// que de les faire toutes individuellement. Cette approche fournit
// davantage d’efficacité et une meilleure centralisation du code.
function draw():Void {
super.draw();
dial.needle._rotation = value;
}
// La méthode de dimensionnement size() est invoquée lorsque la taille
du composant
// change. Il s’agit d’une opportunité pour redimensionner les
enfants,
// et les graphiques de dial et de l’aiguille.
// La méthode de dimensionnement size() est requise pour les
composants étendant UIComponent.
function size():Void {
super.size();
dial._width = width;
dial._height = height;
// L’aiguille est retracée si nécessaire.
invalidate();
}
Création de votre premier composant
143
// Il s’agit de la lecture/définition pour la propriété value.
// Les métadonnées [Inspectable] font apparaître la propriété
// dans l’inspecteur des propriétés. Il s’agit d’une lecture/
définition
// pour vous permettre d’appeler invalidate et forcer le composant
// à se redessiner lorsque la valeur est modifiée.
[Bindable]
[ChangeEvent("change")]
[Inspectable(defaultValue=0)]
function set value (val:Number)
{
__value = val;
invalidate();
}
function get value ():Number
{
return twoDigits(__value);
}
function twoDigits(x:Number):Number
{
return (Math.round(x * 100) / 100);
}
// Indique au composant de s’attendre à des clics de souris
function onPress()
{
beginDrag();
}
// Lorsque vous appuyez sur le composant Dial, l’indicateur de
déplacement est défini.
// Des fonctions de rappel sont affectées aux événements de souris.
function beginDrag()
{
dragging = true;
onMouseMove = mouseMoveHandler;
onMouseUp = mouseUpHandler;
}
// Supprimez les événements de souris lorsque le déplacement est
terminé
// et effacez l’indicateur.
function mouseUpHandler()
{
dragging = false;
delete onMouseMove;
delete onMouseUp;
144
Création de composants
}
function mouseMoveHandler()
{
// Calculez l’angle
if (dragging) {
var x:Number = _xmouse - width/2;
var y:Number = _ymouse - height/2;
var oldValue:Number = value;
var newValue:Number = 90+180/Math.PI*Math.atan2(y, x);
if (newValue<0) {
newValue += 360;
}
if (oldValue != newValue) {
value = newValue;
dispatchEvent( {type:"change"} );
}
}
}
}
Test et exportation du composant Dial
Vous avez créé le fichier Flash qui contient les éléments graphiques, les classes de base et le
fichier de classe qui contient toutes les fonctionnalités du composant Dial. Vous devez
maintenant tester le composant.
Testez si possible le composant en travaillant, surtout lorsque vous écrivez le fichier de classe.
La manière la plus rapide de tester le composant en travaillant est de convertir ce dernier en
un clip compilé et de l’utiliser dans le fichier FLA du composant.
Une fois que vous avez complètement terminé un composant, exportez-le en tant que fichier
SWC. Pour plus d’informations, reportez-vous à Exportation et distribution d’un composant,
page 197.
Création de votre premier composant
145
Pour tester le composant Dial :
1.
Dans le fichier Dial.fla, sélectionnez le composant Dial dans la bibliothèque, ouvrez le
menu contextuel Bibliothèque (Windows : clic droit ; Mac : Ctrl + clic) et sélectionnez
Convertir en clip compilé.
Un clip compilé est ajouté à la bibliothèque avec le nom Dial SWF.
R E MA R Q UE
Si vous avez déjà créé un clip compilé (par exemple, si vous effectuez le test pour la
deuxième ou troisième fois), une boîte de dialogue Résoudre les conflits de
bibliothèque apparaît. Choisissez Remplacer les éléments existants pour ajouter la
nouvelle version au document.
2.
Faites glisser Dial SWF sur la scène sur le scénario principal.
3.
Vous pouvez le redimensionner et définir sa propriété value dans l’inspecteur des propriétés
ou l’inspecteur des composants. Lorsque vous définissez sa propriété value, la position de
l’aiguille change en conséquence.
4.
Pour tester la propriété value lors de l’exécution, donnez au dial le nom d’occurrence dial
et ajoutez le code suivant à l’image 1 sur le scénario principal :
// position du champ de texte
var textXPos:Number = dial.width/2 + dial.x
var textYPos:Number = dial.height/2 + dial.y;
// création d’un champ de texte dans lequel afficher la valeur dial.value
createTextField("dialValue", 10, textXPos, textYPos, 100, 20);
// création d’un écouteur pour gérer l’événement change
function change(evt){
// placement de la propriété value dans le champ de texte
// chaque fois que l’aiguille bouge
dialValue.text = dial.value;
}
dial.addEventListener("change", this);
5.
146
Choisissez Contrôle > Tester l’animation pour tester le composant dans Flash Player.
Création de composants
Pour exporter le composant Dial :
1.
Dans le fichier Dial.fla, sélectionnez le composant Dial dans la bibliothèque, ouvrez le
menu contextuel Bibliothèque (Windows : clic droit ; Mac : Ctrl + clic) et sélectionnez
Exporter le fichier SWC.
2.
Sélectionnez un emplacement pour enregistrer le fichier SWC.
Si vous l’enregistrez dans le dossier Composants dans le dossier de configuration au niveau
de l’utilisateur, vous pouvez recharger le panneau Composants sans redémarrer Flash et le
composant apparaît dans le panneau.
R E MA R Q UE
Pour plus d’informations sur les emplacements des dossiers, consultez la section
Dossiers de configuration installés avec Flash dans le guide Utilisation de Flash.
Le composant Dial terminé
Création de votre premier composant
147
Sélection d’une classe parent
La première chose à décider lorsque vous créez un composant est si vous souhaitez étendre
l’une des classes de la version 2. Si vous souhaitez étendre une classe de la version 2, vous
pouvez étendre soit une classe de composants (par exemple, Button, CheckBox, ComboBox,
List, etc.) soit l’une des classes de base, UIObject ou UIComponent. Toutes les classes de
composants (excepté les composants Media) étendent les classes de base; si vous étendez une
classe de composant, la classe hérite automatiquement des classes de base également.
Les deux classes de base fournissent des fonctions communes pour les composants. En
étendant ces classes, votre composant commence par un jeu de base de méthodes, de
propriétés et d’événements.
Vous n’êtes pas obligé d’établir de sous-classe UIObject ou UIComponent ou tout autre classe
dans la structure de la version 2. Même si vos classes de composants héritent directement de la
classe MovieClip, vous pouvez utiliser de nombreuses fonctions de composant puissantes :
exporter vers un fichier SWC ou un clip compilé, utiliser l’aperçu en direct intégré, afficher les
propriétés d’inspection, etc. Néanmoins, si vous souhaitez utiliser vos composants avec les
composants de la version 2 de Macromedia et utiliser les classes Manager, vous devez étendre
UIObject ou UIComponent.
Le tableau suivant répertorie brièvement les classes de base de la version 2 :
Classe de base
Etend
mx.core.UIObject
MovieClip UIObject est la classe de base de tous les objets
graphiques. Elle peut être dotée d’une forme, se dessiner et
être invisible.
UIObject fournit les fonctionnalités suivantes :
• Modification de styles
• Gestion d’événements
• Redimensionnement par mise à l’échelle
mx.core.UIComponent UIObject
148
Création de composants
Description
UIComponent est la classe de base de tous les
composants.
UIComponent fournit les fonctionnalités suivantes :
• Création de la navigation du focus
• Création d’un système de tabulation
• Activation et désactivation des composants
• Redimensionnement des composants
• Gestion des événements de bas niveau de saisie au
clavier et de la souris
Présentation de la classe UIObject
Les composants basés sur la version 2 de l’architecture des composants Macromedia sont basés
sur la classe UIObject, qui est une sous-classe de la classe MovieClip. La classe MovieClip est
la classe de base de toutes les classes de Flash représentant des objets visuels à l’écran.
UIObject ajoute des méthodes qui vous permettent de gérer des styles et des événements. Il
publie des événements à ses écouteurs juste avant le dessin (l’événement draw est l’équivalent
de l’événement MovieClip.onEnterFrame), lors du chargement et du déchargement (load et
unload), lorsque la disposition est modifiée (move , resize) et lorsqu’il est masqué ou affiché
(hide et reveal).
UIObject fournit des variables en lecture seule différentes permettant de déterminer la
position et la taille d’un composant (width, height, x, y) et les méthodes move() et
setSize() pour modifier la position et la taille d’un objet.
La Classe UIObject met en place les éléments suivants :
■
Styles
■
Evénements
■
Redimensionnement par mise à l’échelle
Présentation de la classe UIComponent
La classe UIComponent est une sous-classe de UIObject (reportez-vous à Classe
UIComponent dans le guide Référence du langage des composants). Elle constitue la classe de
base de tous les composants gérant une interaction avec l’utilisateur (action de la souris et
saisie clavier). La classe UIComponent permet aux composants d’effectuer les opérations
suivantes :
■
Recevoir le focus et la saisie au clavier
■
Activer et désactiver des composants
■
Redimensionner en fonction de la disposition
Sélection d’une classe parent
149
A propos de l’extension d’autres classes de la
version 2
Vous pouvez étendre une classe pour faciliter la construction d’un composant ; vous n’êtes pas
obligé d’étendre directement la classe UIObject ou UIComponent. Si vous étendez toute
autre classe de composant de la version 2 (excepté les composants Media), vous étendez
UIObject et UIComponent par défaut. Toutes les classes répertoriées dans le dictionnaire des
composants peuvent être étendues pour créer une nouvelle classe de composant.
Par exemple, si vous souhaitez créer un composant qui se comporte presque comme un
composant Button, vous pouvez étendre la classe Button au lieu d’en recréer toutes les
fonctionnalités à partir des classes de base.
La figure suivante illustre la hiérarchie des composants de la version 2 :
Hiérarchie des composants de la version 2
Une version FlashPaper de ce fichier est disponible dans le répertoire d’installation Flash dans
cet emplacement : Flash 8\Samples and Tutorials\Samples\Components\arch_diagram.swf.
150
Création de composants
A propos de l’extension de la classe MovieClip
Vous pouvez choisir de ne pas étendre une classe de la version 2 et faire en sorte que votre
composant hérite directement de la classe ActionScript MovieClip. Néanmoins, si vous
souhaitez utiliser une fonctionnalité UIObject et UIComponent, vous devez la créer vousmême. Vous pouvez ouvrir les classes UIObject et UIComponent (FirstRun/classes/mx/core)
pour savoir comment elles ont été créées.
Création d’un clip de composant
Pour créer un composant, vous devez créer un symbole de clip et le lier au fichier de classe du
composant.
Le clip possède deux images et deux calques. Le premier calque est un calque Actions ayant
une fonction globale stop() sur l’image 1. Le second calque est un calque Actifs avec deux
images-clés. L’image 1 contient un cadre de délimitation ou un graphique servant d’espaces
réservés pour le document. L’image 2 contient tous les autres actifs (y compris les graphiques
et les classes de base) utilisés par le composant.
Insertion d’un nouveau symbole de clip
Tous les composants sont des objets MovieClip. Pour créer un composant, vous devez d’abord
insérer un nouveau symbole dans un nouveau fichier FLA.
Pour ajouter un nouveau symbole de composant :
1.
Dans Flash, créez un document Flash vierge.
2.
Sélectionnez Insertion > Nouveau symbole.
La boîte de dialogue Créer un nouveau symbole s’affiche.
3.
Saisissez un nom de symbole. Attribuez un nom au composant en commençant chaque
mot par une majuscule (par exemple, MyComponent).
4.
Sélectionnez le comportement Clip.
5.
Cliquez sur le bouton Avancé pour afficher les paramètres avancés.
6.
Sélectionnez Exporter pour ActionScript et désélectionnez Exporter dans la première
image.
7.
Saisissez un identificateur de liaison.
Création d’un clip de composant
151
8.
Dans la zone de texte Classe AS2.0, entrez le chemin entièrement qualifié de la classe
ActionScript2.0.
Le nom de classe doit être identique au nom du composant qui apparaît dans le panneau
Composants. Par exemple, la classe du composant Button est mx.controls.Button.
R E MA R Q UE
N’incluez pas l’extension du fichier. La zone de texte Classe AS 2.0 désigne
l’emplacement du paquet de la classe, pas le nom du fichier dans le système de
fichiers.
Si le fichier ActionScript est dans un paquet, vous devez inclure le nom de ce dernier.
Cette valeur peut être relative au chemin de classe ou être un chemin de paquet absolu
(par exemple, mypackage.MyComponent).
9.
En règle générale, vous devez désélectionner l’option Exporter dans la première image, qui
est sélectionnée par défaut. Pour plus d’informations, reportez-vous à Liste de contrôle de
développement des composants, page 202.
10. Cliquez
sur OK.
Flash ajoute le symbole à la bibliothèque et passe en mode d’édition de symbole. Dans ce
mode, le nom du symbole apparaît au-dessus de l’angle supérieur gauche de la scène et une
mire indique le point d’alignement du symbole.
Modification du clip
Une fois le symbole créé et ses liaisons définies, vous pouvez déterminer les actifs du
composant dans le scénario du symbole.
Un symbole de composant doit avoir deux calques. Cette section décrit les calques à insérer et
ce qu’il faut y ajouter.
Pour modifier le clip :
1.
Renommez le calque 1 Actions et sélectionnez l’image 1.
2.
Ouvrez le panneau Actions et ajoutez une fonction stop(), comme suit :
stop();
N’ajoutez pas d’actif graphique à cette image.
3.
Ajoutez un calque nommé Actifs.
4.
Sur le calque Actifs, sélectionnez l’image 2 et insérez une image-clé vierge.
Ce calque est maintenant constitué de deux images-clés vierges.
152
Création de composants
5.
Effectuez l’une des opérations suivantes :
■
■
6.
Si le composant a des actifs visuels qui définissent le cadre de délimitation, faites glisser
les symboles dans l’image 1 et organisez-les en conséquence.
Si votre composant crée tous ses actifs visuels lors de l’exécution, faites glisser un
symbole BoundingBox sur la scène dans l’image 1, dimensionnez-le correctement et
nommez l’occurrence boundingBox_mc. Le symbole se trouve dans la bibliothèque
du StandardComponents.fla dans le dossier Configuration/ComponentFLA.
Si vous étendez un composant existant, placez une occurrence de ce dernier et toute autre
classe de base dans l’image 2 du calque Actifs.
Pour ce faire, sélectionnez le symbole dans le panneau Composants et faites-le glisser sur la
scène. Si vous étendez une classe de base, ouvrez StandardComponents.fla dans le dossier
Configuration/ComponentFLA et faites glisser la classe de la bibliothèque à la scène.
R EM A R QU E
Lorsque vous faites glisser UIComponent dans la bibliothèque des composants, la
hiérarchie des dossiers dans la bibliothèque est modifiée. Si vous envisagez d’utiliser
de nouveau votre bibliothèque ou de l’utiliser avec d’autres groupes de composants
(tels que les composants de la version 2), vous devez restructurer la hiérarchie des
dossiers en fonction de la bibliothèque StandardComponents.fla de façon à ce
qu’elle soit organisée correctement et que vous évitiez les symboles dupliqués.
Création d’un clip de composant
153
7.
Ajoutez les actifs graphiques utilisés par ce composant à l’image 2 du calque Actifs de votre
composant.
Tous les actifs utilisés par un composant (qu’il s’agisse d’un autre composant ou
d’éléments tels que des bitmaps) doivent posséder une occurrence placée dans la seconde
image du calque Actifs.
8.
Votre symbole fini a l’aspect suivant :
boundingBox_mc
Définition du clip comme composant
Le symbole de clip doit être lié à un fichier de classe ActionScript dans la boîte de dialogue
Définition du composant. Ceci permet à Flash de savoir où se trouvent les balises de
métadonnées du composant. (Pour plus d’informations sur les balises des métadonnées,
consultez la section Ajout de métadonnées de composant, page 162.) Vous pouvez également
choisir d’autres options dans la boîte de dialogue Définition du composant.
Pour définir un clip comme composant :
1.
Sélectionnez le clip dans la bibliothèque et sélectionnez le menu contextuel Définition du
composant à partir de la bibliothèque (Windows : clic droit ; Mac : Ctrl + clic).
2.
Vous devez entrer une classe AS 2.0.
Si la classe fait partie d’un paquet, entrez le nom complet de ce dernier.
154
Création de composants
3.
Définissez d’autres options dans la boîte de dialogue Définition du composant, le cas
échéant :
■
Cliquez sur le bouton Plus (+) pour définir des paramètres.
Ceci est facultatif. La meilleure façon est d’utiliser la balise d’inspection des
métadonnées dans le fichier de classe du composant pour spécifier des paramètres.
Lorsqu’une classe ActionScript 2.0 n’est pas spécifiée, définissez ici les paramètres pour
le composant.
■
Spécifiez une interface utilisateur personnalisée.
Il s’agit d’un fichier SWF qui est lu dans l’inspecteur des composants. Vous pouvez
l’intégrer dans le fichier FLA du composant ou localiser un SWF externe.
■
Spécifiez un aperçu en direct.
Il s’agit d’un fichier SWF intégré ou externe. Vous n’êtes pas obligé de spécifier
d’aperçu en direct ici ; vous pouvez ajouter un cadre de délimitation au clip de
composant et Flash en crée un pour vous. Voir Création d’un clip de composant,
page 151.
■
Entrez une description.
Le champ Description était déconseillé dans Flash MX 2004 car le panneau Référence
a été supprimé. Ce champ est fourni pour la compatibilité ascendante lorsque vous
enregistrez des fichiers FLA au format Flash MX.
■
Sélectionnez une icône.
Cette option spécifie un fichier PNG à utiliser comme icône pour le
composant. Si vous définissez une balise de métadonnées IconFile dans le
fichier de classe ActionScript 2.0 (ceci est recommandé), ce champ est ignoré.
■
Sélectionnez ou désélectionnez Les paramètres sont verrouillés dans les occurrences.
Lorsque cette option est désélectionnée, les utilisateurs peuvent ajouter des paramètres
à chaque occurrence de composant qui diffère des paramètres du composant.
Généralement, vous devez sélectionner ce paramètre. Cette option permet d’assurer
une compatibilité ascendante avec Flash MX.
■
Spécifiez une info-bulle qui apparaît dans le panneau Composants.
Création d’un clip de composant
155
Création du fichier de classe ActionScript
Tous les symboles de composant sont liés à un fichier de classe ActionScript 2.0. (Pour plus
d’informations sur la liaison, consultez la section Création d’un clip de composant, page 151.)
Pour modifier des fichiers de classe ActionScript, vous pouvez utiliser Flash, un éditeur de
texte ou un environnement de développement intégré (IDE - Integrated Development
Environment).
La classe ActionScript externe étend une autre classe (que la classe soit un composant de la
version 2, une classe de base de la version 2 ou la classe ActionScript MovieClip). Vous devez
étendre la classe qui crée la fonctionnalité la plus semblable au composant que vous souhaitez
créer. Vous pouvez hériter (étendre) d’une seule classe. ActionScript 2.0 n’autorise pas les
héritages multiples.
Exemple simple d’un fichier de classe de composant
L’exemple suivant présente un fichier de classe appelé MyComponent.as. Pour créer ce
composant, vous devez lier ce fichier au clip du composant dans Flash.
Cet exemple contient un jeu minimal d’importations, de méthodes et de déclarations pour un
composant, MyComponent, qui hérite de la classe UIComponent. Le fichier
MyComponents.as est enregistré dans le dossier myPackage.
[Event("eventName")]
// Importation de paquets.
import mx.core.UIObject;
// Déclaration de la classe et extension de la classe parent.
class mypackage.MyComponent extends UIObject {
// Identification du nom de symbole auquel cette classe est liée.
static var symbolName:String = "mypackage.MyComponent";
// Identification du nom de paquet avec tous ses qualificatifs du
propriétaire du symbole.
static var symbolOwner:Object = Object(mypackage.MyComponent);
// Indication de la variable className.
var className:String = "MyComponent";
// Définition d’un constructeur vide.
function MyComponent() {
}
// Appel de la méthode d’initialisation init() du parent.
156
Création de composants
// Masquage du cadre de délimitation --il est utilisé
// uniquement pendant la programmation.
function init():Void {
super.init();
boundingBox_mc.width = 0;
boundingBox_mc.height = 0;
boundingBox_mc.visible = false;
}
function createChildren():Void{
// Appel de createClassObject pour créer des sous-objets.
size();
invalidate();
}
function size(){
// Ecriture du code pour gérer le dimensionnement.
super.size();
invalidate();
}
function draw(){
// Ecriture du code pour gérer la représentation visuelle.
super.draw();
}
}
Présentation d’un fichier de classe de composant
La procédure ci-dessous est une procédure générale décrivant comment créer un fichier
ActionScript pour une classe de composant. Selon le type de composant que vous créez,
certaines étapes peuvent être superflues.
Pour écrire un fichier de classe de composant :
1.
(Facultatif) Importez des classes. (Voir Importation de classes, page 159).
Ceci vous permet de faire référence à des classes sans écrire le paquet (par exemple, Button
au lieu de mx.controls.Button).
2.
Définissez la classe à l’aide du mot-clé class ; utilisez le mot-clé extend pour étendre une
classe parent. (Voir Définition de la classe et de sa superclasse, page 159).
3.
Définissez les variables symbolName, symbolOwner et className. (Voir Identification des
noms de la classe, du symbole et du propriétaire, page 159).
Ces variables sont nécessaires uniquement dans les composants de la version 2.
Création du fichier de classe ActionScript
157
4.
Définissez les variables de membre. (Voir Définition de variables, page 160).
Celles-ci peuvent être utilisées dans les méthodes de lecture/définition.
5.
Définissez une fonction constructeur. (Voir A propos de la fonction constructeur, page 177).
6.
Définissez une méthode init(). (Voir Définition de la méthode init(), page 175).
Cette méthode est appelée lorsque la classe est créée si la classe étend UIComponent. Si la
classe étend MovieClip, appelez cette méthode de la fonction constructeur.
7.
Définissez une méthode createChildren(). (Voir Définition de la méthode
createChildren(), page 175).
Cette méthode est appelée lorsque la classe est créée si la classe étend UIComponent. Si la
classe étend MovieClip, appelez cette méthode de la fonction constructeur.
8.
Définissez une méthode size(). (Voir Définition de la méthode size(), page 178).
Cette méthode est appelée lorsque la classe est créée si la classe étend UIComponent. De
plus, cette méthode est appelée lorsque l’aperçu en direct du composant est redimensionné
pendant la programmation.
9.
Définissez une méthode draw(). (Voir Présentation de l’invalidation, page 179).
Cette méthode est appelée lorsque le composant est invalidé, si la classe étend
UIComponent.
une balise et une déclaration de métadonnées. (Voir Ajout de métadonnées de
composant, page 162).
10. Ajoutez
Lorsque vous ajoutez la balise et la déclaration, les propriétés de lecture/définition
apparaissent dans l’inspecteur des propriétés et l’inspecteur des composants dans Flash.
11.
Définissez des méthode de lecture/définition. (Voir Utilisation des méthodes de lecture/
définition pour définir des paramètres, page 161).
12. (Facultatif)
Créez des variables pour chacun des éléments d’enveloppe/de liaison utilisé
dans le composant. (Voir Présentation de l’affectation d’enveloppes, page 182).
Cela permet aux utilisateurs de définir un élément d’enveloppe différent en modifiant un
paramètre du composant.
158
Création de composants
Importation de classes
Vous pouvez importer des fichiers de classe pour éviter de devoir écrire des noms de classe avec
tous leurs qualificatifs dans votre code. Le code est ainsi plus concis et plus facile à lire. Pour
importer une classe, utilisez l’instruction import en haut du fichier de classe, comme suit :
import mx.core.UIObject;
import mx.core.ScrollView;
import mx.core.ext.UIObjectExtensions;
class MyComponent extends UIComponent{
Vous pouvez également utiliser le caractère générique (*) pour importer toutes les classes dans
un paquet donné. Par exemple, l’instruction suivante importe toutes les classes dans le paquet
mx.core :
import mx.core.*;
Si une classe importée n’est pas utilisée dans un script, la classe n’est pas incluse dans le
pseudo-code binaire résultant du fichier SWF. Ainsi, l’importation d’un paquet entier avec un
caractère générique ne crée pas de fichier SWF trop volumineux.
Définition de la classe et de sa superclasse
Un fichier de classe de composant est défini comme tout fichier de classe. Utilisez le mot-clé
class pour indiquer le nom de classe. Le nom de classe doit également être le nom du fichier
de classe. Utilisez le mot-clé extends pour indiquer la superclasse. Pour plus d’informations,
consultez le Chapitre 6, Ecriture de fichiers de classe personnalisée du guide Formation à
ActionScript 2.0 dans Flash.
class MyComponentName extends UIComponent{
}
Identification des noms de la classe, du symbole et du
propriétaire
Pour aider Flash à localiser les classes ActionScript et les paquets appropriés et à préserver
l’affectation des noms du composant, vous devez définir les variables symbolName,
symbolOwner et className dans le fichier de classe ActionScript de votre composant.
La variable symbolOwner est une référence Object qui fait référence à un symbole. Si le
composant est sa propre variable symbolOwner ou si la variable symbolOwner a été importée,
il n’est pas obligé d’avoir tous les qualificatifs.
Création du fichier de classe ActionScript
159
Le tableau suivant répertorie ces variables :
Variable
Type
Description
symbolName
Chaîne
Le nom de la classe ActionScript (par exemple, ComboBox).
Ce nom doit correspondre à l’identificateur de liaison du symbole.
Cette variable doit être statique.
symbolOwner
Object
Le nom de classe avec tous ses qualificatifs (par exemple,
mypackage.MyComponent).
N’utilisez pas de points d’interrogation autour de la valeur
symbolOwner car il s’agit d’un type de données Objet.
Ce nom doit correspondre à la classe AS 2.0 dans la boîte de
dialogue Propriétés de liaison.
Cette variable est utilisée dans l’appel interne à la méthode
createClassObject().
Cette variable doit être statique.
className
Chaîne
Le nom de la classe du composant. Il n’inclut pas le nom du paquet
et n’a pas de paramètre correspondant dans l’environnement de
développement Flash.
Vous pouvez utiliser la valeur de cette variable lorsque vous
définissez les propriétés de style.
L’exemple suivant ajoute les variables symbolName, symbolOwner et className à la classe
MyButton :
class MyButton extends mx.controls.Button {
static var symbolName:String = "MyButton";
static var symbolOwner = myPackage.MyButton;
var className:String = "MyButton";
}
Définition de variables
L’exemple de code suivant est issu du fichier Button.as (mx.controls.Button). Il définit une
variable, btnOffset, à utiliser dans le fichier de classe. Il définit également les variables
__label et __labelPlacement. Les deux dernières variables sont précédées d’un double trait
de soulignement pour empêcher les conflits de noms lorsqu’elles sont utilisées dans des
méthodes de lecture/définition puis comme propriétés et paramètres dans le composant. Pour
plus d’informations, consultez Utilisation des méthodes de lecture/définition pour définir des
paramètres, page 161 du guide Formation à ActionScript 2.0 dans Flash.
/**
* Nombre utilisé pour décaler l’étiquette et/ou l’icône lorsque le bouton
est enfoncé.
*/
var btnOffset:Number = 0;
160
Création de composants
/**
*@private
* Texte qui apparaît dans l’étiquette si aucune valeur n’est définie.
*/
var __label:String = "default value";
/**
*@private
* placement de l’étiquette par défaut
*/
var __labelPlacement:String = "right";
Utilisation des méthodes de lecture/définition pour
définir des paramètres
La méthode la plus simple pour définir un paramètre de composant consiste à ajouter une
variable de membre rendant le paramètre "inspectable". Vous pouvez pour cela utiliser le label
Inspectable dans l’inspecteur de composants ou ajouter la variable Inspectable de la manière
suivante :
[Inspectable(defaultValue="strawberry")]
public var flavorStr:String;
Néanmoins, si le code qui emploie un composant modifie la propriété flavorStr, le
composant doit généralement effectuer une action pour se mettre à jour en réponse au
changement de propriété. Par exemple, si la propriété flavorStr est définie sur
cherry(cerise), le composant peut se redessiner avec une image de cerise au lieu de l’image
de fraise par défaut.
Pour des variables de membre normales, le composant n’est pas automatiquement notifié du
fait que la valeur de la variable de membre a été modifiée.
Les méthodes de lecture/définition sont un moyen simple permettant de détecter les
changements apportés à des propriétés de composant. Au lieu de déclarer une variable
normale avec var, déclarez les méthodes de lecture/définition de la façon suivante :
private var __flavorStr:String = "strawberry";
[Inspectable(defaultValue="strawberry")]
public function get flavorStr():String{
return __flavorStr;
}
public function set flavorStr(newFlavor:String) {
__flavorStr = newFlavor;
invalidate();
}
Création du fichier de classe ActionScript
161
L’appel invalidate() fait que le composant est retracé avec le nouveau goût. Il s’agit de
l’avantage d’utiliser les méthodes de lecture/définition pour la propriété flavorStr au lieu
d’une variable de membre normale. Voir Définition de la méthode draw(), page 178.
Tenez compte des points suivants lorsque vous définissez des méthodes de lecture/définition :
■
Faites précéder le nom de la méthode de get ou set, suivi d’un espace et du nom de la
propriété.
■
La variable qui stocke la valeur de propriété ne peut pas avoir le même nom que la
méthode get ou set. En outre, il est d’usage de précéder les noms des variables de méthode
de lecture et de définition par deux traits de soulignement.
Les lectures et les définitions sont généralement utilisées en conjonction avec des balises afin
de définir des propriétés visibles dans les inspecteurs des propriétés et des composants.
Pour plus d’informations sur les méthodes de lecture/définition, reportez-vous à Présentation
des méthodes de lecture et définition du guide Formation à ActionScript 2.0 dans Flash.
Ajout de métadonnées de composant
Vous pouvez ajouter des balises de métadonnées de composant dans vos fichiers de classe
ActionScript externes pour fournir des informations au compilateur sur les paramètres de
composant, les propriétés de liaison des données et les événements. Les balises de
métadonnées sont utilisées dans l’environnement de programmation Flash à des fins très
variées.
Les balises de métadonnées peuvent être utilisées dans les fichiers de classe ActionScript
externes uniquement. Vous ne pouvez pas les utiliser dans des fichiers FLA.
Les métadonnées sont associées à une déclaration de classe ou un champ de données
individuel. Si la valeur d’un attribut est une chaîne, vous devez faire apparaître cet attribut
entre guillemets.
Les instructions de métadonnées sont liées à la ligne suivante du fichier ActionScript. Lorsque
vous définissez la propriété d’un composant, ajoutez la balise des métadonnées à la ligne
précédant la déclaration des propriétés. La seule exception est la balise de métadonnées Event.
Lorsque vous définissez des événements de composant, ajoutez la balise des métadonnées hors
de la définition de la classe, de sorte que l’événement soit lié à la classe entière.
Dans l’exemple suivant, les balises Inspectable s’appliquent aux paramètres flavorStr,
flavorStr et shapeStr :
[Inspectable(defaultValue="strawberry")]
public var flavorStr:String;
[Inspectable(defaultValue="blue")]
public var colorStr:String;
162
Création de composants
[Inspectable(defaultValue="circular")]
public var shapeStr:String;
Dans l’inspecteur des propriétés et dans l’onglet Paramètres de l’inspecteur des composants,
Flash affiche tous ces paramètres sous le type Chaîne.
Balises de métadonnées
Le tableau suivant répertorie les balises de métadonnées que vous pouvez utiliser dans les
fichiers de classe ActionScript :
Balise
Description
Inspectable
Expose une propriété dans l’inspecteur des composants et l’inspecteur
des propriétés. Voir Présentation de la balise Inspectable, page 164.
InspectableList
Identifie les sous-ensembles de propriétés d’inspection à inclure dans
l’inspecteur des propriétés et l’inspecteur des composants. Si vous
n’ajoutez pas d’attribut InspectableList à votre classe de composant,
tous les paramètres d’inspection s’affichent dans l’inspecteur des
propriétés. Voir Présentation de la balise InspectableList, page 166.
Event
Définit l’événement d’un composant. Voir Présentation de la balise
Event, page 166.
Bindable
Révèle une propriété dans l’onglet Liaisons de l’inspecteur des
composants. Voir Présentation de la balise Bindable, page 167.
ChangeEvent
Identifie un événement provoquant la liaison des données. Voir
Présentation de la balise ChangeEvent, page 169.
Collection
Identifie un attribut collection exposé dans l’inspecteur des
composants. Voir Présentation de la balise Collection, page 170.
IconFile
Indique le nom de fichier de l’icône représentant ce composant dans le
panneau Composants. Voir Présentation de la balise IconFile, page 171.
ComponentTask
Définit le nom d’un ou plusieurs fichiers JSFL associés pour exécuter
des tâches dans l’environnement de programmation. Voir Présentation
de la balise ComponentTask, page 171.
Les sections suivantes décrivent les balises de métadonnées de composant plus en détail.
Création du fichier de classe ActionScript
163
Présentation de la balise Inspectable
Vous utilisez la balise Inspectable pour spécifier les paramètres (d’inspection) modifiables par
l’utilisateur qui apparaissent dans l’inspecteur des composants et l’inspecteur des propriétés.
Vous pouvez ainsi conserver les propriétés d’inspection et le code ActionScript sous-jacent
dans un même emplacement. Pour afficher les propriétés d’un composant, faites glisser une
occurrence du composant sur la scène et sélectionnez l’onglet Paramètres dans l’inspecteur des
composants.
Les paramètres Collection sont également des paramètres d’inspection. Pour plus
d’informations, reportez-vous à Présentation de la balise Collection, page 170.
La figure suivante illustre l’onglet Paramètres de l’inspecteur des composants pour le
composant DateChooser :
Vous pouvez également afficher un sous-ensemble des propriétés du composant dans l’onglet
Paramètres de l’inspecteur des propriétés.
Flash utilise la balise Inspectable pour déterminer les paramètres à révéler dans
l’environnement de programmation. La syntaxe de cette balise est la suivante :
[Inspectable(value_type=value[,attribute=value,...])]
property_declaration name:type;
L’exemple suivant définit le paramètre enabled comme pouvant être inspecté :
[Inspectable(defaultValue=true, verbose=1, category="Other")]
var enabled:Boolean;
164
Création de composants
La balise Inspectable accepte également les attributs espacés, comme dans l’exemple suivant :
[Inspectable("danger", 1, true, maybe)]
L’instruction de métadonnées doit être placée juste devant la déclaration de variable de la
propriété à laquelle elle doit être liée.
Le tableau suivant répertorie les attributs de la balise Inspectable :
Attribut
Type
Description
defaultValue
Chaîne ou
Nombre
(Facultatif) Une valeur par défaut pour la propriété
d’inspection.
enumeration
String
(Facultatif) Spécifie une liste délimitée par des virgules de
valeurs légales pour la propriété.
listOffset
Number
(Facultatif) Ajouté pour une rétrocompatibilité avec les
composants Flash MX. Utilisé comme index par défaut dans
une valeur List.
name
String
(Facultatif) Un nom d’affichage pour la propriété. Par
exemple, Font Width. S’il n’est pas spécifié, utilisez le nom
de la propriété, par exemple _fontWidth.
type
String
(Facultatif) Spécifie le type. S’il n’est pas disponible, utilisez
le type de la propriété. Les valeurs suivantes sont valides :
• Array
• Boolean
• Color
• Font Name
• List
• Number
• Object
• String
variable
String
(Facultatif) Ajouté pour une rétrocompatibilité avec les
composants Flash MX. Indique la variable à laquelle le
paramètre est lié.
verbose
Number
(Facultatif) Une propriété d’inspection ayant l’attribut
verbose défini sur 1 n’apparaît pas dans l’inspecteur des
propriétés mais apparaît dans l’inspecteur des composants.
Il est généralement utilisé pour les propriétés qui ne sont pas
souvent modifiées.
Aucun de ces attributs n’est requis ; vous pouvez utiliser Inspectable comme étiquette de
métadonnées.
Création du fichier de classe ActionScript
165
Toutes les propriétés de la superclasse qui sont marquées Inspectable peuvent
automatiquement être inspectées dans la classe en cours. Utilisez la balise InspectableList si
vous souhaitez masquer certaines de ces propriétés pour la classe en cours.
Présentation de la balise InspectableList
Utilisez la balise InspectableList pour spécifier le sous-ensemble de propriétés d’inspection à
afficher dans l’inspecteur des propriétés. Utilisez InspectableList de pair avec Inspectable afin
de pouvoir masquer les attributs hérités pour les composants sous-classés. Si vous n’ajoutez pas
de balise InspectableList à votre classe de composant, tous les paramètres d’inspection, y
compris ceux des classes parents du composant, s’affichent dans l’inspecteur des propriétés.
La syntaxe de InspectableList se présente comme suit :
[InspectableList("attribute1"[,...])]
// définition de classe
La balise InspectableList doit être placée juste devant la définition de classe parce qu’elle
s’applique à la classe entière.
L’exemple suivant permet d’afficher les propriétés flavorStr et colorStr dans l’inspecteur
des propriétés, mais exclut toutes les autres propriétés d’inspection de la classe parent :
[InspectableList("flavorStr","colorStr")]
class BlackDot extends DotParent {
[Inspectable(defaultValue="strawberry")]
public var flavorStr:String;
[Inspectable(defaultValue="blue")]
public var colorStr:String;
...
}
Présentation de la balise Event
Utilisez la balise Event pour définir les événements émis par le composant.
Cette balise a la syntaxe suivante :
[Event("event_name")]
Par exemple, le code suivant définit un événement click :
[Event("click")]
Ajoutez les instructions Event hors de la définition de classe dans le fichier ActionScript, de
sorte que les événements soient liés à la classe et non à un membre particulier de cette
dernière.
L’exemple suivant illustre les métadonnées Event pour la classe UIObject, qui gère les
événements resize, move et draw :
...
166
Création de composants
import mx.events.UIEvent;
[Event("resize")]
[Event("move")]
[Event("draw")]
class mx.core.UIObject extends MovieClip {
...
}
Pour diffuser une occurrence particulière, appelez la méthode dispatchEvent().
Voir Utilisation de la méthode dispatchEvent(), page 180.
Présentation de la balise Bindable
La liaison des données connecte les composants les uns aux autres. La liaison des données
visuelles s’effectue via l’onglet Liaisons de l’inspecteur des composants. Cet onglet permet
d’ajouter, de visualiser et de supprimer les liaisons d’un composant.
Bien que la liaison de données soit possible avec tous les composants, son objectif principal est
de connecter les composants de l’interface utilisateur aux sources de données externes telles
que des services Web et des documents XML. Ces sources de données sont disponibles
comme composants, avec des propriétés qui peuvent être liées à d’autres propriétés de
composant.
Utilisez la balise Bindable avant une propriété dans une classe ActionScript pour que la
propriété apparaisse dans l’onglet Liaisons de l’inspecteur des composants. Vous pouvez
déclarer une propriété à l’aide de var ou des méthodes de lecture/définition. Si une propriété
possède à la fois une méthode de lecture et de définition, il vous suffit d’appliquer la balise
Bindable à l’une d’entre elles.
La balise Bindable a la syntaxe suivante :
[Bindable "readonly"|"writeonly",type="datatype"]
Les deux attributs sont facultatifs.
L’exemple suivant définit la variable flavorStr comme une propriété accessible via l’onglet
Liaisons de l’inspecteur des composants :
[Bindable]
public var flavorStr:String = "strawberry";
Création du fichier de classe ActionScript
167
La balise Bindable utilise trois options spécifiant le type d’accès à la propriété, ainsi que le type
de données de cette propriété. Le tableau suivant répertorie ces options :
Option
Description
readonly
Indique que lorsque vous créez des liaisons dans l’inspecteur des
composants, vous pouvez créer uniquement des liaisons qui utilisent cette
propriété comme source. Néanmoins, si vous utilisez ActionScript pour
créer des liaisons, il n’y a aucune restriction.
[Bindable("readonly")]
writeonly
Indique que lorsque vous créez des liaisons dans l’inspecteur des
composants, cette propriété peut être utilisée uniquement comme
destination d’une liaison. Néanmoins, si vous utilisez ActionScript pour
créer des liaisons, il n’y a aucune restriction.
[Bindable("writeonly")]
type="datatype"
Indique le type que la liaison de données utilise pour la propriété. Le reste
de Flash utilise le type déclaré.
Si vous ne spécifiez pas cette option, la liaison des données utilise le type
de données de la propriété, tel qu’il est déclaré dans le code ActionScript.
Dans l’exemple suivant, la liaison des données considère x comme type
DataProvider, même s’il est réellement type Objet :
[Bindable(type=« DataProvider »)]
var x: Object;
Toutes les propriétés de tous les composants peuvent participer à la liaison des données. La
balise Bindable contrôle uniquement les propriétés disponibles pour la liaison dans
l’inspecteur des composants. Si une propriété n’est pas précédée de la balise Bindable, vous
pouvez encore l’utiliser pour la liaison des données mais vous devez créer les liaisons à l’aide
d’ActionScript.
La balise Bindable est requise lorsque vous utilisez la balise ChangeEvent.
Pour plus d’informations sur la création de liaison de données dans l’environnement de
programmation de Flash, reportez-vous à Liaison des données (Flash Professionnel uniquement)
dans le guide Utilisation de Flash.
168
Création de composants
Présentation de la balise ChangeEvent
La balise ChangeEvent indique à la liaison des données que le composant générera un
événement chaque fois que la valeur d’une propriété spécifique changera. En réponse à
l’événement, la liaison des données exécute toute liaison ayant cette propriété comme source.
Le composant génère l’événement uniquement si vous rédigez le code ActionScript approprié
dans le composant. L’événement doit être inclus dans la liste des métadonnées Event déclarées
par la classe.
Vous pouvez déclarer une propriété à l’aide de var ou des méthodes de lecture/définition.
Si une propriété possède à la fois une méthode de lecture et de définition, il vous suffit
d’appliquer la balise ChangeEvent à l’une d’entre elles.
La balise ChangeEvent a la syntaxe suivante :
[Bindable]
[ChangeEvent("event")]
property_declaration or getter/setter function
Dans l’exemple suivant, le composant génère l’événement change lorsque la valeur de la
propriété de liaison flavorStr est modifiée :
[Bindable]
[ChangeEvent("change")]
public var flavorStr:String;
Lorsque l’événement spécifié dans les métadonnées a lieu, Flash notifie les liaisons que la
propriété a été modifiée.
Vous pouvez enregistrer plusieurs événements dans la balise, comme dans l’exemple suivant :
[ChangeEvent("change1", "change2", "change3")]
Chacun de ces événements indique une modification apportée à la propriété. Tous n’ont pas
besoin d’avoir lieu pour indiquer une modification.
Création du fichier de classe ActionScript
169
Présentation de la balise Collection
Utilisez la balise Collection pour décrire un tableau d’objets qui peuvent être modifiés en tant
que collection d’éléments dans la boîte de dialogue Valeurs pendant la programmation. Le
type des objets est identifié par l’attribut collectionItem. Une propriété collection contient
une série d’éléments de collection que vous définissez dans une classe séparée. Cette classe est
mx.utils.CollectionImpl ou une sous-classe de cette classe. Vous accédez aux objets individuels
à l’aide des méthodes de la classe identifiée par l’attribut collectionClass.
Une propriété de collection dans l’inspecteur des composants et la boîte de dialogue Valeurs qui
apparaît lorsque vous cliquez sur l’icône en forme de loupe.
La syntaxe de la balise Collection est la suivante :
[Collection (name=”name”, variable="varname",
collectionClass="mx.utils.CollectionImpl",
collectionItem="coll-item-classname", identifier="string")]
public var varname:mx.utils.Collection;
Le tableau suivant répertorie les attributs de la balise Collection :
Attribut
Type
Description
name
String
(Obligatoire) Nom qui apparaît dans l’inspecteur des composants
pour la collection.
variable
String
(Obligatoire) Variable ActionScript qui pointe vers l’objet
Collection sous-jacent (par exemple, vous pouvez nommer un
paramètre Collection Columns mais l’attribut variable sousjacent peut être __columns).
170
Création de composants
Attribut
Type
collectionClass String
Description
(Obligatoire) Spécifie le type de classe à instancier pour la
propriété de collection. Il s’agit généralement de
mx.utils.CollectionImpl mais il peut également s’agir d’une
classe qui étend mx.utils.CollectionImpl.
collectionItem
String
(Obligatoire) Spécifie la classe des éléments à stocker dans la
collection. Cette classe comprend ses propres propriétés
d’inspection exposées au moyen des métadonnées.
identifier
String
(Obligatoire) Spécifie le nom d’une propriété d’inspection dans la
classe des éléments de collection que Flash MX utilise comme
identificateur par défaut lorsque l’utilisateur ajoute un nouvel
élément de collection dans la boîte de dialogue Valeurs. Chaque
fois qu’un utilisateur crée un nouvel élément de collection, Flash
MX définit le nom de l’élément sur identifier plus un index unique
(par exemple, si identifier=name, la boîte de dialogue Valeurs
affiche name0, name1, name2, etc.).
Pour plus d’informations, reportez-vous à Propriétés de collection, page 203.
Présentation de la balise IconFile
Vous pouvez ajouter une icône représentant votre composant dans le panneau Composants de
l’environnement de programmation de Flash. Pour plus d’informations, reportez-vous à Ajout
d’une icône, page 201.
Présentation de la balise ComponentTask
Vous pouvez définir un ou plusieurs fichiers Flash JavaScript (JSFL) pour exécuter les tâches
pour votre composant à partir de l’environnement de programmation Flash. Utilisez la balise
ComponentTask pour définir cette association entre votre composant et son fichier JSFL et
pour associer à tous les fichiers supplémentaires requis un fichier JSFL. Les fichiers JSFL
interagissent avec l’interface API JavaScript dans l’environnement de programmation
Macromedia Flash.
R EM A R QU E
Les fichiers de tâche JSFL et les fichiers de dépendance requis déclarés avec la balise
ComponentTask doivent se trouver dans le même dossier que votre fichier de
composant FLA lorsque vous exportez votre composant sous forme de fichier SWC.
Création du fichier de classe ActionScript
171
La balise ComponentTask a la syntaxe suivante :
[ComponentTask [taskName,taskFile [,otherFile[,…]]]
Les attributs taskName et taskFile sont requis. L’attribut otherFile est facultatif
L’exemple suivant associe SetUp.jsfl et AddNewSymbol.jsfl avec la classe de composant
appelée myComponent. AddNewSymbol.jsfl requiert un fichier testXML.xml et est spécifié
dans l’attribut otherFile.
[ComponentTask("Do Some Setup","SetUp.jsfl")]
[ComponentTask("Add a new Symbol","AddNewSymbol.jsfl","testXML.xml")]
class myComponent{
//...
}
Le tableau suivant répertorie les attributs de la balise ComponentTask :
Attribut
Type
Description
taskName
String
(obligatoire) Nom de la tâche sous forme de chaîne. Ce nom
apparaît dans le menu contextuel des tâches qui apparaît sous
l’onglet Schéma de l’inspecteur des composants.
taskFile
String
(obligatoire) Nom du fichier JSFL qui implémente les tâches dans
l’environnement de programmation. Le fichier doit se trouver dans
le même dossier que votre composant FLA lorsque vous exportez
votre composant sous la forme d’un fichier SWC.
otherFile
String
(facultatif) Un ou plusieurs noms de fichiers requis par le fichier
JSFL comme un fichier XML. Le(s) fichier(s) doi(ven)t se trouver
dans le même dossier que votre composant FLA lorsque vous
exportez votre composant sous la forme d’un fichier SWC.
Définition des paramètres de composant
Lorsque vous construisez un composant, vous pouvez ajouter des paramètres pour en définir
l’aspect et le comportement. Les paramètres les plus couramment utilisés apparaissent comme
paramètres de programmation dans l’inspecteur des composants et l’inspecteur des propriétés.
Vous pouvez également définir tous les paramètres d’inspection et de collection avec
ActionScript. Vous définissez ces propriétés dans le fichier de classe de composant à l’aide de la
balise Inspectable (voir Présentation de la balise Inspectable, page 164).
L’exemple suivant définit plusieurs paramètres de composant dans le fichier de classe JellyBean
et les affiche avec la balise Inspectable dans l’inspecteur des composants :
class JellyBean{
// un paramètre de chaîne
[Inspectable(defaultValue="strawberry")]
public var flavorStr:String;
172
Création de composants
// un paramètre de liste de chaînes
[Inspectable(enumeration="sour,sweet,juicy,rotten",defaultValue="sweet")
]
public var flavorType:String;
// un paramètre de tableau
[Inspectable(name="Flavors", defaultValue="strawberry,grape,orange",
verbose=1, category="Fruits")]
var flavorList:Array;
// un paramètre d’objet
[Inspectable(defaultValue="belly:flop,jelly:drop")]
public var jellyObject:Object;
// un paramètre de couleur
[Inspectable(defaultValue="#ffffff")]
public var jellyColor:Color;
// une définition
[Inspectable(defaultValue="default text")]
function set text(t:String)
}
Vous pouvez utiliser l’un des types suivants pour les paramètres :
■
Array
■
Object
■
List
■
String
■
Number
■
Boolean
■
Font Name
■
Color
R EM A R QU E
La classe JellyBean est un exemple théorique. Pour visualiser un exemple réel,
examinez le fichier de classe Button.as installé avec Flash dans le répertoire
langueFirst Run/Classes/mx/controls.
Création du fichier de classe ActionScript
173
A propos des fonctions principales
Vous devez définir cinq fonctions dans le fichier de classe de composant : init(),
createChildren(), la fonction de constructeur draw() et size(). Lorsqu’un composant
étend UIComponent, les cinq fonctions du fichier de classe sont appelées dans l’ordre suivant:
■
init()
Une initialisation a lieu au cours de l’appel de la fonction init(). Par exemple, les variables
de membres d’occurence peuvent alors être définies et le cadre de délimitation du
composant peut être masqué.
Une fois que la fonction init() est appelée, les propriétés width et height sont
automatiquement définies. Voir Définition de la méthode init(), page 175.
■
createChildren()
Appelé lorsqu’une image apparaît dans le scénario. Pendant ce temps, l’utilisateur peut
appeler des méthodes et des propriétés pour configurer le composant. Tous les sous-objets
que le composant a besoin de créer sont créés dans la fonction createChildren(). Voir
Définition de la méthode createChildren(), page 175.
■
Fonction constructeur
Appelé pour créer une occurence du composant. La fonction de constructeur de
composant reste généralement vide afin d’empêcher les conflits d’initialisation. Voir A
propos de la fonction constructeur, page 177.
■
draw()
Tous les éléments visuels du composant qui sont créés ou modifiées de manière
programmée doivent apparaître dans la fonction draw. Voir Définition de la méthode
draw(), page 178.
■
size()
Cette fonction est appelée dès qu’un composant est redimensionné lors de l’exécution et
que les propriétés de largeur et de hauteur du composant sont mises à jour. Les sousobjets du composant peuvent être redimensionnés ou déplacés par rapport aux propriétés
mises à jour de largeur et de hauteur du composant dans la fonction size(). Voir
Définition de la méthode size(), page 178.
Ces fonctions de composant principales sont décrites de manière détaillée dans les sections cidessous.
174
Création de composants
Définition de la méthode init()
Flash appelle la méthode init() lorsque la classe est créée. Cette méthode est appelée une
seule fois lorsqu’un composant est instancié.
Utilisez la méthode init() pour effectuer les opérations suivantes :
■
Appeler super.init().
Ceci est obligatoire.
■
Rendre boundingBox_mc invisible.
boundingBox_mc.width = 0;
boundingBox_mc.height = 0;
boundingBox_mc.visible = false;
■
Créer des variables de membre d’occurrence.
Les paramètres width, height et clip ne sont pas correctement définis tant que cette
méthode n’est pas appelée.
La méthode init() est appelée depuis le constructeur de UIObject et par conséquent, le flux
de contrôle remonte la chaîne des constructeurs jusqu’à atteindre UIObject. Le constructeur
de UIObject appelle la méthode init() définie sur la sous-classe la moins élevée. Chaque
implémentation de init() doit appeler super.init() de façon à ce que sa classe de base
puisse terminer l’initialisation. Si vous mettez en place une méthode init() et que vous
n’appelez pas super.init(), la méthode ()init n’est appelée sur aucune classe de base. Par
conséquent, il se peut qu’elles ne soient jamais dans un état utilisable.
Définition de la méthode createChildren()
Les composants mettent en place la méthode createChildren() pour créer des sous-objets
(d’autres composants, par exemple) dans le composant. Au lieu d’appeler le constructeur du
sous-objet dans la méthode createChildren(), appelez createClassObject() ou
createObject() pour instancier un sous-objet de votre composant.
Il peut être utile d’appeler size() dans la méthode createChildren() pour vous assurer que
tous les enfants sont définis sur la taille correcte initialement. Appelez également
invalidate() dans la méthode createChildren() pour actualiser l’écran. (Pour plus
d’informations, consultez la section Présentation de l’invalidation, page 179.)
La méthode createClassObject() possède la syntaxe suivante :
createClassObject(className, instanceName, depth, initObject)
Création du fichier de classe ActionScript
175
Le tableau suivant répertorie les paramètres :
Paramètre
Type
Description
className
Object
Le nom de la classe.
instanceName
String
Le nom de l’occurrence.
depth
Number
La profondeur de l’occurrence.
initObject
Object
Un objet qui contient des propriétés
d’initialisation.
Pour appeler createClassObject(), vous devez savoir qui sont les enfants car vous devez
spécifier le nom et le type de l’objet, ainsi que tout paramètre d’initialisation dans l’appel à
createClassObject().
L’exemple suivant appelle createClassObject() pour créer un objet Button à utiliser dans
un composant :
up_mc.createClassObject(mx.controls.Button, "submit_btn", 1);
Vous définissez des propriétés dans l’appel à createClassObject() en les ajoutant comme
partie du paramètre initObject. L’exemple suivant définit la valeur de la propriété label :
form.createClassObject(mx.controls.CheckBox, "cb", 0, {label:"Check
this"});
L’exemple suivant crée des composants TextInput et SimpleButton :
function createChildren():Void {
if (text_mc == undefined)
createClassObject(TextInput, "text_mc", 0, { preferredWidth: 80,
editable:false });
text_mc.addEventListener("change", this);
text_mc.addEventListener("focusOut", this);
if (mode_mc == undefined)
createClassObject(SimpleButton, "mode_mc", 1, { falseUpSkin:
modeUpSkinName, falseOverSkin: modeOverSkinName, falseDownSkin:
modeDownSkinName });
mode_mc.addEventListener("click", this);
size()
invalidate()
}
176
Création de composants
A propos de la fonction constructeur
Une fonction de constructeur se reconnaît à son nom : il est identique au nom de la classe du
composant. Par exemple, le code suivant indique la fonction constructeur du composant
ScrollBar :
function ScrollBar() {
}
Dans ce cas, lorsqu’un nouveau composant ScrollBar est instancié, le constructeur
ScrollBar() est appelé.
Généralement, les constructeurs de composant doivent être vides. La définition des propriétés
d’un constructeur peut entraîner l’écrasement des valeurs par défaut, selon l’ordre des appels
d’initialisation.
Si votre composant étend UIComponent ou UIObject, Flash appelle automatiquement les
méthodes init(), createChildren() et size() et vous pouvez laisser votre fonction
constructeur vide, comme indiqué ici :
class MyComponent extends UIComponent{
...
// il s’agit de la fonction constructeur
function MyComponent(){
}
}
Tous les composants de la version 2 doivent définir une fonction init() qui est appelée une
fois que le constructeur a été appelé. Vous devez placer le code d’initialisation dans la fonction
init() du composant. Pour plus d’informations, consultez la section suivante.
Si votre composant étend MovieClip, vous pouvez appeler une méthode init(), une
méthode createChildren() et une méthode qui dessine votre composant depuis la fonction
constructeur, comme indiqué dans l’exemple de code suivant :
class MyComponent extends MovieClip{
...
function MyComponent(){
init()
}
function init():Void{
createChildren();
layout();
}
...
}
Pour plus d’informations sur les constructeurs, consultez la section Ecriture de la fonction
constructeur du guide Formation à ActionScript 2.0 dans Flash.
Création du fichier de classe ActionScript
177
Définition de la méthode draw()
Vous pouvez rédiger du code dans la méthode draw() pour créer ou modifier les éléments
visuels d’un composant. En d’autres termes, dans la méthode draw(), un composant se
dessine en fonction de ses variables d’état. Depuis la dernière fois que la méthode draw() a été
appelée, plusieurs propriétés ou méthodes peuvent avoir été appelées et vous devriez tenter de
toutes les représenter dans le corps de draw().
Cependant, n’appelez pas la méthode draw() directement. A la place, appelez la méthode
invalidate() de façon à mettre en file d’attente et à gérer dans un lot les appels à draw().
Cette approche est plus efficace et centralise le code. (Pour plus d’informations, consultez la
section Présentation de l’invalidation, page 179.)
Dans la méthode draw(), vous pouvez utiliser des appels à l’API de dessin de Flash pour
tracer des bordures, des règles et d’autres éléments graphiques. Vous pouvez également définir
des valeurs de propriété et des méthodes d’appel. Vous pouvez également appeler la méthode
clear() pour supprimer les objets visibles.
Dans l’exemple suivant issu du composant Dial (voir Création de votre premier composant,
page 138), la méthode draw() définit la rotation de l’aiguille sur la propriété value :
function draw():Void {
super.draw();
dial.needle._rotation = value;
}
Définition de la méthode size()
Lorsqu’un composant est redimensionné lors de l’exécution à l’aide de la méthode
componentInstance.setSize() , la fonction size() est invoquée et les propriétés width et
height lui sont transmises. Vous pouvez utiliser la méthode size() dans le fichier de classe
du composant pour positionner le contenu du composant.
Au minimum, la méthode size() doit appeler la méthode size() de la superclasse
(super.size()).
Dans l’exemple suivant issu du composant Dial (voir Création de votre premier composant,
page 138), la méthode size() utilise les paramètres width et height pour redimensionner le
clip dial :
function size():Void {
super.size();
dial._width = width;
dial._height = height;
invalidate();
}
178
Création de composants
Appelez la méthode invalidate() dans la méthode size() pour baliser le composant pour
qu’il soit retracé au lieu d’appeler directement la méthode draw(). Pour plus d’informations,
consultez la section suivante.
Présentation de l’invalidation
Macromedia recommande qu’un composant ne se mette pas à jour lui-même immédiatement
dans la plupart des cas mais qu’il enregistre une copie de la nouvelle valeur de propriété, qu’il
définisse un indicateur mettant en évidence le changement et qu’il appelle la méthode
invalidate(). (Cette méthode indique que seuls les éléments visuels de l’objet ont changé
mais que la taille et la position des sous-objets sont restées intactes. Cette méthode appelle la
méthode draw().)
Vous devez appeler une méthode d’invalidation au moins une fois au moment de
l’instanciation de votre composant. Effectuez cette opération dans la méthode
createChildren() ou layoutChildren().
Distribution d’événements
Si vous souhaitez que votre composant diffuse des événements différents de ceux qu’il hérite
d’une classe parent, vous devez appeler la méthode dispatchEvent() dans le fichier de classe
du composant.
La méthode dispatchEvent() est définie dans la classe mx.events.EventDispatcher et tous les
composants qui étendent UIObject en héritent. (Voir Classe EventDispatcher dans le guide
Référence du langage des composants.)
Vous devez également ajouter une balise de métadonnées Event en haut du fichier de classe
pour chaque nouvel événement. Pour plus d’informations, reportez-vous à Présentation de la
balise Event, page 166.
R EM A R QU E
Pour plus d’informations sur la gestion des événements de composant dans une
application Flash, consultez le Chapitre 4, Gestion des événements des composants,
page 69.
Création du fichier de classe ActionScript
179
Utilisation de la méthode dispatchEvent()
Dans le corps du fichier de classe ActionScript de votre composant, vous diffusez des
événements à l’aide de la méthode dispatchEvent(). La méthode dispatchEvent()
possède la syntaxe suivante :
dispatchEvent(eventObj)
Le paramètre eventObj est un objet ActionScript qui décrit l’événement (reportez-vous à
l’exemple décrit plus loin dans cette section).
Vous devez déclarer la méthode dispatchEvent() dans votre code avant de l’appeler, comme
indiqué ci-dessous :
private var dispatchEvent:Function;
Vous devez également créer un objet événement à transmettre à dispatchEvent(). L’objet
événement contient des informations sur l’événement que l’écouteur peut utiliser pour gérer
l’événement.
Vous pouvez construire un objet événement explicitement avant de distribuer l’événement,
comme dans l’exemple suivant :
var eventObj = new Object();
eventObj.type = "myEvent";
eventObj.target = this;
dispatchEvent(eventObj);
Vous pouvez également utiliser une syntaxe raccourcie qui définit la valeur de la propriété
type et la propriété target et distribue l’événement sur une seule ligne :
ancestorSlide.dispatchEvent({type:"revealChild", target:this});
Dans l’exemple précédent, la propriété target n’a pas besoin d’être définie, puisqu’elle est
implicite.
La description de chaque événement dans la documentation de Flash 8 indique les propriétés
d’événements qui sont facultatives et celles qui sont obligatoires. Par exemple, l’événement
ScrollBar.scroll prend une propriété detail en plus des propriétés type et target. Pour
plus d’informations, reportez-vous aux descriptions d’événements du guide Référence du
langage des composants.
180
Création de composants
Evénements courants
Le tableau suivant répertorie les événements courants diffusés par différentes classes. Chaque
composant doit diffuser ces événements s’ils sont pertinents. Cette liste n’est pas exhaustive,
elle recense uniquement les événements susceptibles d’être réutilisés par d’autres composants.
Même si certains événements ne spécifient aucun paramètre, ils possèdent tous un paramètre
implicite, à savoir une référence à l’objet diffusant l’événement.
Evénement
Utilisation
click
Utilisé par le composant Button ou chaque fois qu’un clic de souris n’a pas
d’autre signification.
change
Utilisé par List, ComboBox et d’autres composants de saisie de texte.
scroll
Utilisé par ScrollBar et par d’autres commandes activant le défilement
(« butoirs » de défilement dans un menu contextuel).
En outre, en raison de l’héritage des classes de base, tous les composants diffusent les
événements suivants :
Evénement
UIComponent
Description
load
Le composant crée ou charge ses sous-objets.
unload
Le composant décharge ses sous-objets.
focusIn
Le composant a le focus de saisie. Certains composants équivalents
HTML (ListBox, ComboBox, Button, Text) peuvent également diffuser
un focus, mais tous diffusent DOMFocusIn.
focusOut
Le composant a perdu le focus de saisie.
move
Le composant a été déplacé vers un nouvel emplacement.
resize
Le composant a été redimensionné.
Le tableau suivant répertorie les événements de touche courants :
Evénements Description
de touche
keyDown
Une touche est enfoncée. La propriété code contient le code de touche et la
propriété ascii contient le code ASCII de la touche enfoncée. Ne vérifiez pas
avec l’objet Key de bas niveau ; il se peut que l’objet Key n’ait pas généré
l’événement.
keyUp
Une touche est relâchée.
Création du fichier de classe ActionScript
181
Présentation de l’affectation d’enveloppes
Un composant d’interface utilisateur est entièrement composé de clips associés. Ceci signifie
que tous les actifs d’un composant d’interface utilisateur peuvent être externes au clip de
composant d’interface utilisateur et être utilisés par d’autres composants. Par exemple, si votre
composant à besoin de faire appel à des cases à cocher, vous pouvez réutiliser les actifs de
composants CheckBox existants.
Le composant CheckBox utilise un clip séparé pour représenter chacun de ses états (FalseUp,
FalseDown, Disabled, Selected, etc.). Vous pouvez cependant associer des clips personnalisés,
appelés enveloppes, à ces états. Lors de l’exécution, les clips nouveaux et anciens sont exportés
dans le fichier SWF. Les anciens états deviennent simplement invisibles et cèdent la place aux
nouveaux clips. La capacité à changer d’enveloppe lors de la programmation et de l’exécution
s’appelle réhabillage.
Pour réhabiller des composants, créez une variable pour chaque élément d’enveloppe (symbole
de clip) utilisé dans le composant et définissez-la sur l’ID de liaison du symbole. Ceci permet
aux développeurs de définir un élément d’enveloppe différent en modifiant un seul paramètre
dans le composant, comme indiqué ici:
var falseUpIcon = "mySkin";
L’exemple suivant illustre les variables d’enveloppe pour les différents états du composant
CheckBox :
var
var
var
var
var
var
var
var
var
var
var
var
var
var
var
var
182
falseUpSkin:String = "";
falseDownSkin:String = "";
falseOverSkin:String = ""
falseDisabledSkin:String = "";
trueUpSkin:String = "";
trueDownSkin:String = "";
trueOverSkin:String = "";
trueDisabledSkin:String = "";
falseUpIcon:String = "CheckFalseUp";
falseDownIcon:String = "CheckFalseDown";
falseOverIcon:String = "CheckFalseOver";
falseDisabledIcon:String = "CheckFalseDisabled";
trueUpIcon:String = "CheckTrueUp";
trueDownIcon:String = "CheckTrueDown";
trueOverIcon:String = "CheckTrueOver";
trueDisabledIcon:String = "CheckTrueDisabled";
Création de composants
Présentation des styles
Vous pouvez utiliser des styles pour enregistrer tous les graphiques dans votre composant avec
une classe et faire en sorte que cette dernière contrôle les couleurs des graphiques lors de
l’exécution. Aucun code spécial n’est requis pour prendre en charge les styles lors de la mise en
œuvre de composants. Les styles sont mis en œuvre exclusivement dans les classes (UIObject
et UIComponent) et les enveloppes de base.
Pour ajouter un nouveau style à un composant, appelez getStyle(styleName) dans la classe
de composant. Si le style a été défini sur une occurrence, sur une feuille de style personnalisée
ou sur la feuille de style globale, la valeur est récupérée. Si ce n’est pas le cas, vous devez peutêtre installer une valeur par défaut pour le style sur la feuille de style globale.
Pour plus d’informations sur les styles, consultez la section Utilisation de styles pour
personnaliser la couleur et le texte des composants, page 86.
Enregistrement d’enveloppes dans des styles
L’exemple suivant crée un composant appelé Shape. Ce composant affiche une forme qui est
l’une des deux enveloppes : un cercle ou un carré. Les enveloppes sont enregistrées dans le
style themeColor.
Pour enregistrer une enveloppe dans un style :
1.
Créez un fichier ActionScript et copiez-y le code suivant :
import mx.core.UIComponent;
class Shape extends UIComponent{
static var symbolName:String = "Shape";
static var symbolOwner:Object = Shape;
var className:String = "Shape";
var themeShape:String = "circle_skin"
function Shape(){
}
function init(Void):Void{
super.init();
}
function createChildren():Void{
setSkin(1, themeShape);
super.createChildren();
}
}
Création du fichier de classe ActionScript
183
2.
Enregistrez le fichier sous Shape.as.
3.
Créez un document Flash et enregistrez-le sous Shape.fla dans le même dossier que
Shape.as.
4.
Tracez un cercle sur la scène, sélectionnez-le et appuyez sur F8 pour le convertir en clip.
Donnez au cercle le nom et l’identificateur de liaison circle_skin.
5.
Ouvrez le clip circle_skin et placez le code ActionScript suivant sur l’image 1 pour
enregistrer le symbole avec le nom de style themeColor :
mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");
6.
Créez un clip pour le composant.
Nommez le clip et l’identifiant de liaison Shape.
7.
Créez deux calques. Placez une fonction stop() dans la première image du premier calque.
Placez le symbole circle_skin dans la seconde image.
Il s’agit du clip du composant. Pour plus d’informations, reportez-vous à Création d’un clip
de composant, page 151.
8.
Ouvrez StandardComponents.fla comme bibliothèque externe et faites glisser le clip
UIComponent sur la scène sur la seconde image du clip Shape (avec circle_skin).
9.
Fermez StandardComponents.fla.
10. Sélectionnez
le clip Shape dans la bibliothèque et sélectionnez le menu
contextuel Définition du composant à partir de la bibliothèque (Windows :
clic droit, Mac : Ctrl + clic), puis entrez le nom de la classe AS 2.0 Shape.
11.
Testez le clip avec le composant Shape sur la scène.
Pour changer les couleurs, définissez le style sur l’occurrence. Le code suivant change en
rouge la couleur d’un composant Shape avec le nom d’occurrence shape :
shape.setStyle("themeColor",0xff0000);
12. Tracez
un carré sur la scène et convertissez-le en un clip.
Donnez-lui le nom de liaison square_skin et vérifiez que la case à cocher Exporter dans la
première image est activée.
R E MA R QU E
184
Etant donné que le clip n’est pas placé dans le composant, l’option Exporter dans la
première image doit être sélectionnée pour que l’enveloppe soit disponible avant
l’initialisation.
Création de composants
13.
Ouvrez le clip square_skin et placez le code ActionScript suivant sur l’image 1 pour
enregistrer le symbole avec le nom de style themeColor :
mx.skins.ColoredSkinElement.setColorStyle(this, "themeColor");
14. Placez
le code suivant sur l’occurrence du composant Shape sur la scène dans le scénario
principal :
onClipEvent(initialize){
themeShape = "square_skin";
}
15. Testez
le clip avec Shape sur la scène. Un carré rouge devrait s’afficher.
Enregistrement d’un nouveau nom de style
Si vous avez créé un nom de style et qu’il s’agit d’un style de couleur, ajoutez-le dans l’objet
colorStyles du fichier StyleManager.as (First Run\Classes\mx\styles\StyleManager.as). Cet
exemple ajoute le style shapeColor :
// initialisation du jeu de styles de couleur hérités
static var colorStyles:Object =
{
barColor: true,
trackColor: true,
borderColor: true,
buttonColor: true,
color: true,
dateHeaderColor: true,
dateRollOverColor: true,
disabledColor: true,
fillColor: true,
highlightColor: true,
scrollTrackColor: true,
selectedDateColor: true,
shadowColor: true,
strokeColor: true,
symbolBackgroundColor: true,
symbolBackgroundDisabledColor: true,
symbolBackgroundPressedColor: true,
symbolColor: true,
symbolDisabledColor: true,
themeColor:true,
todayIndicatorColor: true,
shadowCapColor:true,
borderCapColor:true,
focusColor:true,
shapeColor:true
};
Création du fichier de classe ActionScript
185
Enregistrez le nouveau nom de style dans les enveloppes de cercle et de carré sur l’image 1 de
chaque clip d’enveloppe, comme suit :
mx.skins.ColoredSkinElement.setColorStyle(this, "shapeColor");
La couleur peut être modifiée avec le nouveau nom de style en définissant le style sur
l’occurrence, comme indiqué ici :
shape.setStyle("shapeColor",0x00ff00);
Incorporation de composants existants
dans votre composant
Dans cette section, vous allez créer un composant LogIn simple qui incorpore des composants
Label, TextInput et Button. Ce didacticiel démontre comment des composants existants sont
incorporés dans de nouveaux composants en ajoutant leurs symboles de bibliothèque non
compilés Flash (FLA). Les fichiers de composant terminés, LogIn.fla, LogIn.as et LogIn.swf,
se trouvent dans le dossier des exemples sur vote disque dur :
■
■
Sous Windows : le dossier C:\Program Files\Macromedia\Flash 8\Samples and
Tutorials\Samples\Components\Login.
Sous Macintosh : le dossier DD/Applications/Macromedia Flash 8/Samples and
Tutorials/Samples/Components/Login.
Le composant LogIn fournit une interface permettant de saisir un nom et un mot de passe.
L’API pour LogIn possède deux propriétés, name et password pour définir et obtenir les
valeurs de chaîne dans les champs TextInput du nom et du mot de passe. Le composant LogIn
distribuera également un événement click lorsque l’utilisateur cliquera sur un bouton intitulé
LogIn.
■
Création du fichier LogIn Flash (FLA), page 187
■
Fichier de classe LogIn, page 190
■
Test et exportation du composant LogIn, page 194
186
Création de composants
Création du fichier LogIn Flash (FLA)
Commencez par créer un fichier Flash (FLA) qui contiendra notre symbole de composant.
Pour créer le fichier LogIn FLA :
1.
Dans Flash, choisissez Fichier > Nouveau et créez un document.
2.
Choisissez Fichier > Enregistrer sous et enregistrez le fichier sous le nom LogIn.fla.
3.
Sélectionnez Insertion > Nouveau symbole. Nommez-le LogIn, puis sélectionnez le bouton
radio du type de clip.
Si la section Liaison de la boîte de dialogue Créer un symbole n’est pas ouverte, cliquez sur
le bouton Avancé.
4.
Sélectionnez Exporter pour ActionScript et désélectionnez Exporter dans la première
image.
5.
Saisissez un identificateur de liaison.
L’identifiant de liaison par défaut est LogIn. Dans les étapes restantes, il est supposé que
vous avez utilisé la valeur par défaut.
6.
Saisissez LogIn dans la zone de texte Classe AS 2.0. Cette valeur est le nom de la classe du
composant.
Si la classe se trouve dans un paquet, entrez le nom complet du paquet. Par exemple,
mx.controls.CheckBox indique la classe CheckBox du paquet mx.controls.
7.
Cliquez sur OK.
Flash s’ouvre en mode Modifier le symbole.
8.
Insérez un nouveau calque. Nommez le calque supérieur Actions et le calque inférieur
Actifs.
9.
Sélectionnez l’image 2 dans le calque Actifs et insérez une image-clé (F6).
Il s’agit de la structure du clip du composant : un calque Actions et un calque Assets. Le
calque Actions a 1 image-clé et le calque Actifs a 2 images-clés.
10. Sélectionnez Image 1 dans le calque Actions et ouvrez le panneau Actions (F9). Entrez une
fonction globale stop().
Ceci empêche le clip de passer à l’image 2.
Incorporation de composants existants dans votre composant
187
11.
Sélectionnez Fichier > Importer > Ouvrir une bibliothèque externe et choisissez le fichier
StandardComponents.fla depuis le dossier Configuration//ComponentFLA.
■
■
Sous Windows : \Program Files\Macromedia\Flash
8\langue\Configuration\ComponentFLA\StandardComponents.fla.
Sous Macintosh : DD/Applications/Macromedia Flash 8/Configuration/
ComponentFLA/StandardComponents.fla
R EM A R QU E
Pour plus d’informations sur les emplacements des dossiers, consultez la section
« Dossiers Configuration installés avec Flash » du guide Utilisation de Flash.
12. Sélectionnez
l’image2 dans le calque Actifs. Dans la bibliothèque
StandardComponents.fla, recherchez le dossier Flash UI Components 2. Faites glisser un
symbole de composant Button, Label et TextInput dans l’image 2 du calque Actifs.
Les dépendances d’actifs pour ces composants sont automatiquement copiées dans votre
bibliothèque LogIn.fla.
Tous les actifs du composant sont ajoutés dans l’image 2 du calque Actifs. Etant donné
qu’il existe une fonction globale stop() sur l’image 1 du calque Actions, les actifs dans
l’image 2 ne seront pas visibles car ils sont organisés sur la scène.
Vous ajoutez des actifs à l’image 2 pour deux raisons :
■
188
Pour que tous les actifs soient automatiquement copiés dans la bibliothèque et
instanciés dynamiquement et pour accéder à leurs méthodes, propriétés et événements.
Création de composants
■
Le fait de placer les actifs dans une image permet de s’assurer qu’ils seront chargés avec
plus de soin lorsque l’animation est transmise, par conséquent, vous n’êtes pas obligé
de paramétrer les actifs de la bibliothèque pour les exporter avant la première image.
Cette méthode empêche une pointe initiale de transfert de données pouvant entraîner
des retards de téléchargement ou de longues pauses.
Opération de glissement d’un symbole de composant Button de la bibliothèque dans
StandardComponents.fla vers l’image 2 du calque Actifs de LogIn.fla
13.
Fermez la bibliothèque StandardComponents.fla.
14. Dans
le calque Actifs, sélectionnez Image 1. Faites glisser le clip BoundingBox depuis la
bibliothèque LogIn.fla (dans le dossier Component Assets) vers la scène.
15. Nommez
l’occurence BoundingBox boundingBox_mc.
Incorporation de composants existants dans votre composant
189
16.
Utilisez le panneau Infos pour le redimensionner BoundingBox en fonction de la taille du
clip LogInFinal (340, 150) et positionnez-le à 0, 0.
L’occurrence de BoundingBox est utilisée pour créer l’aperçu en direct du composant et
pour permettre à l’utilisateur de gérer le redimensionnement du composant pendant la
programmation. Vous devez dimensionner le cadre de délimitation de façon à ce qu’il
puisse inclure tous les éléments graphiques dans votre composant.
R E MA R Q U E
Si vous étendez un composant (y compris un composant de la version 2), vous
devez conserver les noms d’occurrence utilisés par ce composant car son code y
fera référence. Par exemple, si vous incluez un composant de la version 2 qui utilise
déjà le nom d’occurrence boundingBox_mc, ne le renommez pas. Pour vos
composants, vous pouvez choisir des noms uniques d’occurence ne provoquant pas
de conflit avec des noms existants dans le même domaine.
17.
Sélectionnez le clip LogIn dans la bibliothèque et sélectionnez Définition du composant
dans le menu contextuel Bibliothèque (Windows : clic droit, Mac : Ctrl + clic).
18.
Dans la zone de texte Classe AS 2.0, entrez LogIn.
Cette valeur est le nom de la classe ActionScript. Si la classe est dans un paquet, la valeur
est le paquet complet. Par exemple, mx.controls.CheckBox indique la classe CheckBox du
paquet mx.controls.
19. Cliquez
sur OK.
20.Enregistrez
le fichier.
Fichier de classe LogIn
Le code suivant correspond à la classe ActionScript pour le composant LogIn. Lisez les
commentaires dans le code pour une description de chaque section. (Pour des informations
détaillées sur les éléments d’un fichier de classe de composant, reportez-vous à la section
Présentation d’un fichier de classe de composant, page 157.
Pour créer ce fichier, vous pouvez créer un fichier ActionScript dans Flash ou utiliser un autre
éditeur de texte. Enregistrez le fichier sous le nom LogIn.as dans le même dossier que le fichier
LogIn.fla.
Vous pouvez copier ou taper le code de classe ActionScript du composant LogIn suivant dans
votre nouveau fichier LogIn.as. Tapez le code au lieu de le copier pour vous familiariser
rapidement avec chaque élément du code du composant.
/* Importez les paquets pour qu’ils puissent être référencés
à partir de cette classe directement. */
import mx.core.UIComponent;
import mx.controls.Label;
import mx.controls.TextInput;
190
Création de composants
import mx.controls.Button;
// Balise de métadonnées Event
[Event("change")]
[Event("click")]
class LogIn extends UIComponent
{
/* Les composants doivent déclarer ces variables de membre pour être des
composants à proprement parler dans la structure des composants. */
static var symbolName:String = "LogIn";
static var symbolOwner:Object = LogIn;
var className:String = "LogIn";
// La représentation graphique du composant.
private var name_label:MovieClip;
private var password_label:MovieClip;
private var name_ti:MovieClip;
private var password_ti:MovieClip;
private var login_btn:MovieClip;
private var boundingBox_mc:MovieClip;
private var startDepth:Number = 10;
/* Variables de membre privées disponibles publiquement via lecture/
définition.
Elles représentent les valeurs de chaîne InputText du nom et du mot de
passe. */
private var __name:String;
private var __password:String;
/* Constructeur :
Lorsque cela est nécessaire pour toutes les classes, les composants v2
exigent que
le constructeur soit vide avec des arguments zéro.
L’initialisation a lieu dans une méthode d’initialisation requise
une fois que l’occurrence de classe a été construite. */
function LogIn() {
}
/* Code d’initialisation :
La méthode d’initialisation est requise pour les composants v2. Elle
doit également
à son tour, appeler sa méthode init() de classe parent avec
super.init().
La méthode d’initialisation est requise pour les composants étendant
UIComponent. */
function init():Void {
super.init();
boundingBox_mc._visible = false;
boundingBox_mc._width = 0;
boundingBox_mc._height = 0;
Incorporation de composants existants dans votre composant
191
}
/* Créez des objets enfants nécessaires au démarrage :
La méthode createChildren est requise pour les composants
étendant UIComponent. */
public function createChildren():Void {
name_label = createObject("Label", "name_label", this.startDepth++);
name_label.text = "Name:";
name_label._width = 200;
name_label._x = 20;
name_label._y = 10;
name_ti = createObject("TextInput", "name_ti",
this.startDepth++,{_width:200,_heigh:22,_x:20,_y:30});
name_ti.html = false;
name_ti.text = __name;
name_ti.tabIndex = 1;
/* Définissez ce champ de saisie de texte pour qu’il ait le focus.
Remarque : Vérifiez que vous avez sélectionné Contrôle > Désactiver les
raccourcis clavier
dans le Débogueur Flash car si ce n’est pas le cas,
le focus risque de ne pas être défini lors du test. */
name_ti.setFocus();
name_label = createObject("Label", "password_label",
this.startDepth++,{_width:200,_heigh:22,_x:20,_y:60});
name_label.text = "Password:";
password_ti = createObject("TextInput", "password_ti",
this.startDepth++,{_width:200,_heigh:22,_x:20,_y:80});
password_ti.html = false;
password_ti.text = __password;
password_ti.password = true;
password_ti.tabIndex = 2;
login_btn = createObject("Button", "login_btn",
this.startDepth++,{_width:80,_heigh:22,_x:240,_y:80});
login_btn.label = "LogIn";
login_btn.tabIndex = 3;
login_btn.addEventListener("click", this);
size();
}
/* La méthode de dessin est requise pour les composants v2.
Elle est invoquée une fois que le composant a été
invalidé par une personne appelant invalidate().
Ceci rassemble les modifications dans un nouveau dessin, plutôt
que de les faire toutes individuellement. Cette approche fournit
192
Création de composants
davantage d’efficacité et une meilleure centralisation du code. */
function draw():Void {
super.draw();
}
/* La méthode de dimensionnement est invoquée lorsque la taille du
composant
change. Il s’agit d’une opportunité pour redimensionner les enfants,
La méthode de dimensionnement est requise pour les composants étendant
UIComponent. */
function size():Void {
super.size();
// Provoquez un retraçage au cas où cela serait nécessaire.
invalidate();
}
/* Gestionnaire d’événement :
Appelé par le bouton LogIn lorsqu’il reçoit un clic de souris.
Etant donné que nous souhaitons que cet événement soit accessible en
dehors du domaine de
ce composant, l’événement click est distribué à l’aide de
dispatchEvent. */
public function click(evt){
// Mise à jour des variables de membre avec le contenu du champ de
saisie.
__name = name_ti.text;
__password = password_ti.text;
// Distribuez un événement click lorsque le bouton en déclenche un.
dispatchEvent({type:"click"});
}
/* Il s’agit de la lecture/définition pour la propriété name.
Les métadonnées [Inspectable] font apparaître la propriété
dans l’inspecteur des propriétés et permet de définir
une valeur par défaut. En utilisant une lecture/définition, vous
pouvez appeler invalidate
et forcer le composant à se redessiner lorsque la valeur est modifiée.
*/
[Bindable]
[ChangeEvent("change")]
[Inspectable(defaultValue="")]
function set name(val:String){
__name = val;
invalidate();
}
function get name():String{
return(__name);
}
Incorporation de composants existants dans votre composant
193
[Bindable]
[ChangeEvent("change")]
[Inspectable(defaultValue="")]
function set password(val:String){
__password=val;
invalidate();
}
function get password():String{
return(__password);
}
}
Test et exportation du composant LogIn
Vous avez créé le fichier Flash qui contient les éléments graphiques, les classes de base et le
fichier de classe qui contient toutes les fonctionnalités du composant LogIn. Vous devez
maintenant tester le composant.
Testez si possible le composant en travaillant, surtout lorsque vous écrivez le fichier de classe.
La manière la plus rapide de tester le composant en travaillant est de convertir ce dernier en
un clip compilé et de l’utiliser dans le fichier FLA du composant.
Une fois que vous avez complètement terminé de créer un composant, exportez-le en tant que
fichier SWC. Pour plus d’informations, reportez-vous à Exportation et distribution d’un
composant, page 197.
Pour tester le composant LogIn :
1.
Dans le fichier LogIn.fla, sélectionnez le clip LogIn dans la bibliothèque et choisissez
Convertir en clip compilé dans le menu contextuel Bibliothèque (Windows : clic droit,
Mac : Ctrl + clic).
Un clip compilé est ajouté à la bibliothèque avec le nom LogIn SWF. Vous compiler le clip
pour le tester uniquement. Sinon, vous devez suivre les instructions ci-dessous de cette
section pour exporter le clip LogIn.
R EM A R QU E
194
Si vous avez déjà créé un clip compilé (par exemple, si vous effectuez le test pour la
deuxième ou troisième fois), une boîte de dialogue Résoudre les conflits de
bibliothèque apparaît. Choisissez Remplacer les éléments existants pour ajouter la
nouvelle version au document.
Création de composants
2.
Faites glisser LogIn SWF vers la scène dans l’image 1 du scénario principal (vérifiez que
vous êtes dans le scénario principal, scène 1, et non dans le scénario du clip).
Vous pouvez définir la propriété de nom et de mot de passe sous l’onglet Paramètres ou
l’inspecteur des composants. C’est utile si vous souhaitez que le texte par défaut tel que
“Entrez votre nom ici” apparaisse avant que l’utilisateur n’ait saisi quoi que ce soit.
Lorsque vous définissez sa propriété de nom et/ou de mot de passe, le texte par défaut dans
les sous-composants InputText de nom et de mot de passe changera en conséquence à
l’exécution.
Pour tester la propriété value lors de l’exécution, nommez l’occurrence LogIn sur la scène
myLogin et ajoutez le code suivant à l’image 1 sur le scénario principal :
// Crée une zone de texte dans laquelle vous pouvez afficher les valeurs
login.
createTextField("myLoginValues",10,10,10,340,40)
myLoginValues.border = true;
// Gestionnaire d’événements pour l’événement click distribué de
l’occurrence du composant login.
function click(evt){
/* Voici où se déroule l’authentification.
Par exemple, le nom et le mot de passe sont transférés vers un service
Web qui authentifie le nom et le mot de passe et retourne un ID de
session et/ou des rôles d’autorisation affectés à l’utilisateur. */
myLoginValues.text = "Processing...\r";
myLoginValues.text += "Name: " + myLogin.name + " Password: " +
myLogin.password;
}
myLogin.addEventListener("click",this);
3.
Choisissez Contrôle > Tester l’animation pour tester le composant dans Flash Player.
R EMA R Q U E
Si vous testez ce composant dans votre document d’origine, vous voyez un message
d’avertissement indiquant qu’il y a le même identifiant de liaison pour deux symboles. Le
composant fonctionne toujours. En pratique, vous voyez le nouveau composant dans
un autre document, auquel cas l’identifiant lié doit être unique.
Incorporation de composants existants dans votre composant
195
Pour exporter le composant LogIn :
1.
Dans le fichier LogIn.fla, sélectionnez le clip LogIn dans la bibliothèque et choisissez
Définition de composant dans le menu contextuel Bibliothèque (Windows : clic droit,
Mac : Ctrl + clic).
2.
Contrôlez l’affichage dans le panneau Composants.
3.
Cliquez sur OK.
4.
Dans le fichier LogIn.fla, sélectionnez à nouveau le clip LogIn dans la bibliothèque et
choisissez Exporter le fichier SWC dans le menu contextuel Bibliothèque (Windows : clic
droit, Mac : Ctrl + clic).
5.
Sélectionnez un emplacement pour enregistrer le fichier SWC.
Si vous l’enregistrez dans le dossier Composants dans le dossier de configuration au niveau
de l’utilisateur, vous pouvez recharger le panneau Composants sans redémarrer Flash et le
composant apparaît dans le panneau Composants.
R EM A R QU E
Pour plus d’informations sur les emplacements des dossiers, consultez la section
Dossiers de configuration installés avec Flash dans le guide Bien démarrer avec Flash
Lite.
Le composant LogIn terminé
196
Création de composants
Exportation et distribution d’un
composant
Flash exporte les composants comme paquets de composants (fichiers SWC). Les composants
peuvent être distribués sous la forme de fichiers SWC ou de fichiers FLA. (Reportez-vous à
l’article sur Macromedia DevNet à l’adresse www.macromedia.com/fr/support/flash/
applications/creating_comps/creating_comps09.html pour plus d’informations sur la
distribution d’un composant sous la forme d’un fichier FLA.)
La meilleure façon de distribuer un composant est de l’exporter an tant que fichier SWC car
les fichiers SWC contiennent tous les fichiers ActionScript, SWF et d’autres fichiers facultatifs
nécessaires pour utiliser le composant. Les fichiers SWC sont également utiles si vous
travaillez simultanément sur un composant et l’application qui l’utilise.
Les fichiers SWC peuvent servir à distribuer des composants à utiliser dans Macromedia Flash
8, Macromedia Dreamweaver MX 2004 et Macromedia Director MX 2004.
Que vous développiez un composant pour une tierce personne ou pour vous-même, le test des
fichiers SWC fait partie du développement du composant. Par exemple, des problèmes
peuvent se produire dans le fichier SWC d’un composant et non dans le fichier FLA.
Cette section décrit un fichier SWC et explique comment importer et exporter des
fichiers SWC dans Flash.
Présentation des fichiers SWC
Un fichier SWC est semblable à un fichier compressé (compressé et développé à l’aide d’un
format d’archivage PKZIP) généré par l’outil de programmation Flash.
Le tableau suivant présente le contenu d’un fichier SWC :
Fichier
Description
catalog.xml
(Requis) Recense le contenu du paquet de composants et de ses composants
individuels, et sert de répertoire aux autres fichiers du fichier SWC.
Si vous créez le composant avec Flash Professionnel 8, le code source est
Fichiers
ActionScript constitué d’un ou plusieurs fichiers ActionScript contenant une déclaration de
classe pour le composant.
(AS)
Le compilateur utilise le code source pour vérifier le type lorsqu’un composant
est étendu. Le fichier AS n’est pas compilé par l’outil de programmation car le
pseudo-code binaire compilé est déjà dans le fichier SWF d’implémentation.
Le code source peut contenir des définitions de classe intrinsèques ne
contenant aucun corps de fonction ; ces dernières sont fournies uniquement
pour la vérification du type.
Exportation et distribution d’un composant
197
Fichier
Description
Fichiers
SWF
(Requis) Fichiers SWF qui mettent en œuvre les composants. Un ou plusieurs
composants peuvent être définis dans un seul fichier SWF. Si le composant
est créé avec Flash 8, un seul composant est exporté par fichier SWF.
Fichiers SW
F d’aperçu
en direct
(Facultatif) S’ils sont spécifiés, ces fichiers sont utilisés pour l’aperçu en direct
dans l’outil de programmation. S’ils ne le sont pas, les fichiers SWF qui
mettent en place le composant sont utilisés pour l’aperçu en direct à la place.
Le fichier SWF d’aperçu en direct peut être ignoré dans la plupart des classes.
Il doit être inclus uniquement si l’aspect du composant dépend de données
dynamiques (par exemple, un champ de saisie indiquant le résultat d’un appel
de service Web).
Fichier SWD (Facultatif) Un fichier SWD correspondant au fichier SWF de mise en place
qui vous permet de déboguer le fichier SWF. Le nom de fichier est toujours
identique à celui du fichier SWF, seule l’extension.swd diffère.
Fichier PNG
(Facultatif) Un fichier PNG contenant l’icône 18 x 18 de 8 bits par pixel, utilisé
pour afficher une icône de composant dans les interfaces utilisateur de l’outil
de programmation. Une icône par défaut s’affiche si aucune icône n’est
fournie. (Voir la section Ajout d’une icône, page 201.)
Fichier SWF (Facultatif) Un fichier SWF que vous utilisez comme inspecteur des propriétés
personnalisé dans l’outil de programmation. S’il n’est pas spécifié, l’inspecteur
de
l’inspecteur des propriétés par défaut s’affiche.
des
propriétés
Vous pouvez également inclure d’autres fichiers dans le fichier SWC généré dans
l’environnement Flash. Par exemple, vous voudrez peut-être inclure un fichier Lisez-moi ou le
fichier FLA si vous voulez que les utilisateurs aient accès au code source du composant. Pour
ajouter des fichiers supplémentaires, utilisez Macromedia Extension Manager (accédez au site
www.macromedia.com/fr/exchange/em_download/).
Les fichiers SWC sont développés dans un seul répertoire, chaque composant doit donc avoir
un nom de fichier unique afin d’éviter tout conflit.
198
Création de composants
Exportation de fichiers SWC
Flash permet d’exporter des fichiers SWC en exportant un clip sous forme de fichier SWC.
Lors de l’exportation d’un fichier SWC, Flash signale les erreurs de compilation, comme si
vous testiez une application Flash.
Il existe deux raisons pour exporter un fichier SWC :
■
Pour distribuer un composant terminé
■
Pour effectuer un test pendant le développement
Exportation d’un fichier SWC pour un composant terminé
Vous pouvez exporter des composants en tant que fichiers SWC qui contiennent tous les
fichiers ActionScript, SWF et d’autres fichiers facultatifs nécessaires pour utiliser le
composant.
Pour exporter un fichier SWC pour un composant terminé :
1.
Sélectionnez le clip du composant dans la bibliothèque Flash.
2.
Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur Ctrl + clic pour ouvrir
le menu contextuel Bibliothèque.
3.
Sélectionnez Exporter le fichier SWC dans le menu contextuel Bibliothèque.
4.
Enregistrez le fichier SWC.
Test d’un SWC pendant le développement
A différentes étapes du développement, il est utile d’exporter le composant sous la forme d’un
SWC et de le tester dans une application. Si vous exportez le SWC dans le dossier
Composants du dossier Configuration au niveau de l’utilisateur, vous pouvez recharger le
panneau Composants sans quitter ni redémarrer Flash.
Pour tester un SWC pendant le développement :
1.
Sélectionnez le clip du composant dans la bibliothèque Flash.
2.
Cliquez avec le bouton droit de la souris (Windows) ou appuyez sur Ctrl + clic pour ouvrir
le menu contextuel Bibliothèque.
3.
Sélectionnez Exporter le fichier SWC dans le menu contextuel Bibliothèque.
4.
Localisez le dossier Composants dans votre dossier Configuration au niveau de l’utilisateur.
Exportation et distribution d’un composant
199
Configuration/Composants
R E MA R Q UE
Pour plus d’informations sur l’emplacement du dossier, consultez la section Dossiers
de configuration installés avec Flash dans le guide Bien démarrer avec Flash Lite.
5.
Enregistrez le fichier SWC.
6.
Dans le menu d’options du panneau Composants, choisissez Recharger.
Le composant apparaît dans le panneau Composant.
7.
Faites glisser le composant du panneau Composant dans un document.
Importation de fichiers SWC de composant dans
Flash
Lorsque vous distribuez vos composants à d’autres développeurs, vous pouvez inclure les
instructions suivantes afin de leur permettre de les installer et de les utiliser immédiatement.
Pour importer un fichier SWC :
1.
Copiez le fichier SWC dans le répertoire Configuration/Components.
2.
Redémarrez Flash.
L’icône du composant doit s’afficher dans le panneau Composants.
Etapes finales dans le développement du
composant
Une fois que vous avez créé et préparé le composant pour la mise en paquet, vous pouvez
ajouter une icône et une info-bulle. Pour vérifier que vous avez exécuté toutes les étapes
nécessaires, vous pouvez également faire référence à la section Liste de contrôle de développement
des composants, page 202.
200
Création de composants
Ajout d’une icône
Vous pouvez ajouter une icône représentant votre composant dans le panneau Composants de
l’environnement de programmation de Flash.
Pour ajouter une icône à votre composant :
1.
Créez une image
mesurant 18 pixels et enregistrez-la au format PNG. L’image doit être de 8 bits, avec une
transparence alpha ; le pixel supérieur gauche doit être transparent afin de prendre en
charge les masques.
2.
Ajoutez la définition suivante au fichier de classe ActionScript de votre composant avant la
définition de classe :
[IconFile("component_name.png")]
3.
Ajoutez l’image au répertoire contenant le fichier FLA. Lors de l’exportation du
fichier SWC, Flash inclut l’image au niveau racine de l’archive.
Ajout d’une info-bulle
Les info-bulles s’affichent lorsqu’un utilisateur passe sa souris sur le nom ou l’icône d’un
composant dans le panneau Composants dans l’environnement de programmation de Flash.
Vous définissez une info-bulle dans la boîte de dialogue Définition du composant. Vous
pouvez accéder à cette boîte de dialogue à partir du menu d’option Bibliothèque (Windows :
clic droit, Mac : Ctrl + clic) du fichier FLA du composant.
Pour ajouter une info-bulle dans la boîte de dialogue Définition du composant :
1.
Avec le fichier FLA de votre composant ouvert dans Flash, vérifiez que la bibliothèque est
visible (Window > menu Bibliothèque).
2.
Cliquez sur le menu d’option Bibliothèque (Windows : clic droit, Mac : Ctrl + clic).
Le menu d’options de la bibliothèque se trouve à droite de la barre de titre de la
bibliothèque et apparaît sous la forme d’une icône de 3lignes et d’un triangle orienté vers
le bas.
3.
Sélectionnez l’option Définition du composant.
4.
Dans la boîte de dialogue Définition du composant, sous Options, sélectionnez Afficher
dans le panneau Composants.
La zone Texte d’info-bulle devient modifiable.
5.
Saisissez le texte d’info-bulle pour votre composant dans la zone Texte d’info-bulle.
6.
Cliquez sur OK pour enregistrer les changements.
Etapes finales dans le développement du composant
201
Liste de contrôle de développement des composants
Lorsque vous créez un composant, suivez les conseils ci-dessous :
■
Minimisez la taille du fichier autant que possible.
■
Généralisez la fonctionnalité de votre composant afin d’optimiser son potentiel
d’utilisation.
■
Utilisez la classe RectBorder (mx.skins.halo.RectBorder) plutôt que des éléments
graphiques pour dessiner les bordures autours des objets. (Voir Classe RectBorder dans le
guide Référence du langage des composants.)
■
Utilisez le réhabillage basé sur des balises.
■
Définissez les variables symbolName, symbolOwner et className.
■
Définissez un état initial. Les propriétés de style étant désormais sur l’objet, vous pouvez
définir les paramètres initiaux des styles et des propriétés, de sorte que votre code
d’initialisation doive les définir lors de la construction de l’objet uniquement si
l’utilisateur remplace l’état par défaut.
■
Lors de la définition du symbole, sélectionnez l’option Exporter dans la première image
uniquement si cela est nécessaire. Flash charge le composant juste avant son utilisation
dans l’application Flash ; si cette option est sélectionnée, Flash précharge le composant
dans la première image de son parent. Il est inutile de précharger le composant dans la
première image sur le Web, car le composant est chargé avant le préchargement, ce qui
rend l’utilisation du préchargement superflue.
■
Evitez d’utiliser plusieurs clips d’image (excepté pour le calque Actifs à deux images).
■
Mettez toujours en place les méthodes init() et size() et appelez Super.init() et
Super.size() respectivement mais ne les surchargez pas.
■
Evitez les références absolues, du type _root.myVariable.
■
Utilisez createClassObject() au lieu de attachMovie().
■
Utilisez invalidate() et invalidateStyle() pour invoquer la méthode draw() au lieu
d’appeler explicitement draw().
■
Lorsque vous incorporez des composants Flash dans votre composant, utilisez leurs
symboles de film non compilés qui se trouvent dans la bibliothèque du fichier
StandardComponents.fla à partir du dossier Configuration/ComponentFLA.
202
Création de composants
CHAPITRE 7
7
Propriétés de collection
Lorsque vous créez un composant personnalisé dans Macromedia Flash, vous pouvez rendre
les valeurs de propriété disponibles pour la modification par l’utilisateur. Ces propriétés sont
appelées propriétés de collection. Les valeurs de propriétés peuvent être modifiées par
l’utilisateur dans la boîte de dialogue Valeurs (ouverte à partir d’une zone de texte sous l’onglet
Paramètres pour votre composant).
Les composants comprennent généralement la fonctionnalité pour une tâche spécifique, tout
en restant flexible pour une gamme d’exigences de l’utilisateur du composant. Pour qu’un
composant soit flexible, les propriétés du composant doivent l’être également (en d’autres
termes, pour certains composants, les propriétés elles-mêmes peuvent être modifiées par
l’utilisateur du composant, de même que les valeurs de propriété).
Les propriétés de collection vous permettent de créer un nombre indéterminé de propriétés
modifiables dans un modèle d’objet. Flash propose une classe Collection vous permettant de
gérer ces propriétés grâce à l’inspecteur des composants.
203
La classe Collection est une classe d’aide utilisée pour gérer un groupe d’objets apparentés
appelés éléments de collection. Si vous définissez une propriété de votre composant comme un
élément de collection et la mettez à disposition des utilisateurs au moyen de l’inspecteur des
composants, ils peuvent ajouter, supprimer et modifier les éléments de collection dans la boîte
de dialogue Valeurs pendant la programmation.
Vous définissez des collections et des éléments de collection de la façon suivante :
■
Définissez une propriété de collection à l’aide de la balise des métadonnées Collection
dans un fichier ActionScript de composant. Pour plus d’informations, reportez-vous à
Présentation de la balise Collection, page 170.
■
Définissez un élément de collection comme classe dans un fichier ActionScript séparé qui
contient ses propres propriétés d’inspection.
Dans Flash, les collections vous aident à gérer des groupes d’éléments apparentés par
programmation. (Dans les versions précédentes de Flash, les auteurs de composants géraient
des groupes d’éléments apparentés au moyen de plusieurs tableaux synchronisés par
programmation).
Outre la boîte de dialogue Valeurs, Flash fournit les interfaces Collection et Iterator pour gérer
les valeurs et les occurrences de Collection par programmation. VoirInterface Collection (Flash
Professionnel uniquement) et Interface Iterator (Flash Professionnel uniquement) dans Référence
du langage des composants.
204
Propriétés de collection
Ce chapitre contient les sections suivantes :
Définition d’une propriété de collection. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Exemple de collection simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Définition de la classe pour un élément de collection. . . . . . . . . . . . . . . . . . . . . . . . 208
Accès aux informations de collection par programmation . . . . . . . . . . . . . . . . . . . 209
Exportation de composants ayant des collections dans des fichiers SWC. . . . . . . 211
Utilisation d’un composant ayant une propriété de collection . . . . . . . . . . . . . . . . . 212
Définition d’une propriété de collection
Vous définissez une propriété de collection à l’aide de la balise Collection dans un fichier
ActionScript de composant. Pour plus d’informations, reportez-vous à Présentation de la balise
Collection, page 170.
R E MA R QU E
Dans cette section, il est supposé que vous savez créer des composants et des
propriétés de composant d’inspection.
Pour définir une propriété de collection :
1.
Créez un fichier FLA pour votre composant. Voir Création d’un clip de composant,
page 151.
2.
Créez une classe ActionScript. Voir Création du fichier de classe ActionScript, page 156.
3.
Dans la classe ActionScript, insérez une balise de métadonnées Collection. Pour plus
d’informations, reportez-vous à Présentation de la balise Collection, page 170.
4.
Définissez les méthodes get et set pour la collection dans le fichier ActionScript du
composant.
5.
Ajoutez les classes d’utilitaires à votre fichier FLA en sélectionnant Fenêtre > Bibliothèques
communes > Classes et en faisant glisser UtilsClasses dans la bibliothèque du composant.
UtilsClasses contient le paquet mx.utils.* pour l’interface Collection.
R E MA R QU E
6.
Etant donné que UtilsClasses est associé au fichier FLA et non à la classe
ActionScript, Flash envoie des erreurs de compilateur lorsque vous vérifiez la
syntaxe lors de l’affichage de la classe ActionScript du composant.
Codez une classe qui contient les propriétés de l’élément de collection.
Voir Définition de la classe pour un élément de collection, page 208.
Définition d’une propriété de collection
205
Exemple de collection simple
L’exemple suivant présente un fichier de classe de composant appelé MyShelf.as. Il contient
une propriété de collection et un jeu minimal d’importations, de méthodes et de déclarations
pour un composant héritant de la classe UIObject.
Si vous importez mx.utils.* dans cet exemple, les noms de classe issus de mx.utils ne sont plus
obligés d’avoir tous les qualificatifs. Par exemple, mx.utils.Collection peut être écrit sous la
forme Collection.
import mx.utils.*;
// déclaration de classe standard
class MyShelf extends mx.core.UIObject
{
// variables nécessaires pour toutes les classes
static var symbolName:String = "MyShelf";
static var symbolOwner:Object = Object(MyShelf);
var className:String = "MyShelf";
// les attributs et la balise de métadonnées Collection
[Collection(variable="myCompactDiscs",name="My Compact
Discs",collectionClass="mx.utils.CollectionImpl",
collectionItem="CompactDisc", identifier="Title")]
// obtention et définition des méthodes pour la collection
public function get MyCompactDiscs():mx.utils.Collection
{
return myCompactDiscs;
}
public function set MyCompactDiscs(myCDs:mx.utils.Collection):Void
{
myCompactDiscs = myCDs;
}
// membre de classe privé
private var myCompactDiscs:mx.utils.Collection;
// Vous devez coder une référence sur la classe de l’élément de collection
// pour que le compilateur l’inclue en tant que dépendance
// dans le SWC
private var collItem:CompactDisc;
// Vous devez coder une référence sur la classe mx.utils.CollectionImpl
// pour que le compilateur l’inclue en tant que dépendance
// dans le SWC
private var coll:mx.utils.CollectionImpl;
// méthodes nécessaires pour toutes les classes
function init(Void):Void {
206
Propriétés de collection
super.init();
}
function size(Void):Void {
super.size();
}
}
Pour créer un fichier FLA accompagnant cette classe dans le but d’effectuer
des tests :
1.
Dans Flash, choisissez Fichier > Nouveau et créez un document Flash.
2.
Sélectionnez Insertion > Nouveau symbole. Donnez-lui le nom, l’identificateur de liaison
et le nom de classe AS 2.0 MyShelf.
3.
Désélectionnez Exporter dans la première image et cliquez sur OK.
4.
Sélectionnez le symbole MyShelf dans la bibliothèque et choisissez Définition du
composant dans le menu d’options Bibliothèque. Entrez le nom de classe ActionScript 2.0
MyShelf.
5.
Sélectionnez Fenêtre > Bibliothèques communes > Classes et faites glisser UtilClasses vers
la bibliothèque de MyShelf.fla.
6.
Dans le scénario du symbole MyShelf, nommez un calque Actifs. Créez un autre calque et
nommez-le Actions.
7.
Placez une fonction stop() sur l’image 1 du calque Actions.
8.
Sélectionnez l’image 2 du calque Actifs et sélectionnez Insertion > Scénario > Image-clé.
9.
Ouvrez StandardComponents.fla dans le dossier Configuration/ComponentFLA et faites
glisser une occurrence de UIObject sur la scène de MyShelf dans l’image 2 du calque Actifs.
Vous devez inclure UIObject dans le fichier FLA du composant car, comme vous avez pu
le constater dans le fichier de classe ci-dessus, MyShelf étend UIObject.
10. Dans
l’image 1 du calque Actifs, dessinez une étagère.
Il peut s’agir d’un simple rectangle (représentation visuelle du composant MyShelf à
utiliser pour l’apprentissage).
Exemple de collection simple
207
11.
Sélectionnez le clip MyShelf dans la bibliothèque puis choisissez Convertir en clip compilé.
Ceci vous permet de faire glisser le fichier MyShelf SWF (le clip compilé qui est ajouté à la
bibliothèque) vers le fichier MyShelf.fla pour tester le composant. Chaque fois que vous
recompilez le composant, une boîte de dialogue Résoudre les conflits de bibliothèque
apparaît car il existe déjà une version antérieure du composant dans la bibliothèque.
Remplacez les éléments existants.
R E MA R Q U E
Vous devez avoir créé la classe CompactDisc ; autrement, vous obtenez des erreurs
du compilateur lors de la conversion d’un clip compilé.
Définition de la classe pour un élément de
collection
Vous codez les propriétés pour un élément de collection dans une classe ActionScript séparée,
que vous définissez de la façon suivante :
■
Définissez la classe de telle façon qu’elle n’étende ni UIObject ni UIComponent.
■
Définissez toutes le propriétés à l’aide de la balise d’inspection.
■
Définissez toutes les propriétés en tant que variables. N’utilisez pas les méthodes get et
set (lecture/définition).
L’exemple simple suivant concerne un fichier de classe d’élément de collection appelé
CompactDisc.as.
class CompactDisc{
[Inspectable(type="String", defaultValue="Title")]
var title:String;
[Inspectable(type="String", defaultValue="Artist")]
var artist:String;
}
Pour visualiser le fichier de classe CompactDisc.as, consultez la section Exemple de collection
simple, page 206.
208
Propriétés de collection
Accès aux informations de collection par
programmation
Flash fournit un accès par programme aux données de collection au moyen des interfaces
Collection et Iterator. L’interface Collection vous permet d’ajouter, de modifier et de
supprimer des éléments dans une collection. L’interface Iterator vous permet de passer en
boucle sur les élément dans une collection.
Il existe deux scénarios dans lesquels vous utilisez les interfaces Collection et Iterator :
■
Accès aux informations de collection dans un fichier (AS) de classe de composant, page 209
■
Accès aux éléments de collection lors de l’exécution dans une application Flash, page 210
Les développeurs expérimentés peuvent également créer, renseigner, accéder et supprimer des
collections par programmation. Pour plus d’informations, reportez-vous à la section Interface
Collection (Flash Professionnel uniquement) du guide Référence du langage des composants.
Accès aux informations de collection dans un fichier
(AS) de classe de composant
Dans un fichier de classe de composant, vous pouvez rédiger du code qui interagit avec des
éléments de collection définis pendant la programmation ou lors de l’exécution.
Pour accéder aux informations d’élément de collection dans un fichier de classe de composant,
utilisez l’une des approches suivantes.
■
La balise Collection inclut un attribut variable pour lequel vous spécifiez une variable de
type mx.utils.Collection. Utilisez cette dernière pour accéder à la collection, comme
indiqué dans cet exemple :
[Collection(name="LinkButtons", variable="__linkButtons",
collectionClass="mx.utils.CollectionImpl", collectionItem="ButtonC",
identifier="ButtonLabel")]
public var __linkButtons:mx.utils.Collection;
■
Accédez à une interface d’itérateur pour les éléments de collection en appelant la méthode
Collection.getIterator(), comme indiqué dans cet exemple :
var itr:mx.utils.Iterator = __linkButtons.getIterator();
Accès aux informations de collection par programmation
209
■
Utilisez l’interface Iterator pour parcourir les éléments de la collection. La méthode
Iterator.next() renvoie un objet. Par conséquent, vous devez définir le type de votre
élément de collection, comme indiqué dans cet exemple :
while (itr.hasNext()) {
var button:ButtonC = ButtonC(itr.next());
...
}
■
Accédez aux propriétés d’élément de collection, selon votre application, comme indiqué
dans cet exemple :
item.label =
button.ButtonLabel;
if (button.ButtonLink != undefined) {
item.data = button.ButtonLink;
}
else {
item.enabled = false;
}
Accès aux éléments de collection lors de l’exécution
dans une application Flash
Si une application Flash utilise un composant ayant une propriété de collection, vous pouvez
accéder à cette dernière lors de l’exécution. Cet exemple ajoute plusieurs éléments à une
propriété de collection à l’aide de la boîte de dialogue Valeurs et les affiche lors de l’exécution
au moyen des API Collection et Iterator.
Pour accéder aux éléments de collection lors de l’exécution :
1.
Ouvrez le fichier MyShelf.fla que vous avez créé précédemment.
Voir Exemple de collection simple, page 206.
Cet exemple se base sur le composant MyShelf et la collection CompactDisc.
2.
Ouvrez le panneau Bibliothèque, faites glisser le composant sur la scène et donnez-lui un
nom d’occurrence.
Cet exemple utilise le nom d’occurrence myShelf.
3.
Sélectionnez le composant, ouvrez l’inspecteur des composants et affichez l’onglet
Paramètres. Cliquez sur la ligne qui contient la propriété de collection et sur l’icône en
forme de loupe située à droite de la ligne. Flash affiche la boîte de dialogue Valeurs.
4.
Utilisez la boîte de dialogue Valeurs pour entrer des valeurs dans la propriété de collection.
210
Propriétés de collection
5.
Après avoir sélectionné le composant sur la scène, ouvrez le panneau Actions et entrez le
code suivant (qui doit être associé au composant) :
onClipEvent (mouseDown) {
import mx.utils.Collection;
import mx.utils.Iterator;
var myColl:mx.utils.Collection;
myColl = _parent.myShelf.MyCompactDiscs;
var itr:mx.utils.Iterator = myColl.getIterator();
while (itr.hasNext()) {
var cd:CompactDisc = CompactDisc(itr.next());
var title:String = cd.Title;
var artist:String = cd.Artist;
trace("Title: " + title + " Artist: " + artist);
}
}
Pour accéder à une collection, utilisez la syntaxe componentName.collectionVariable ;
pour accéder à un itérateur et parcourir les éléments de collection, utilisez
componentName.collectionVariable.getIterator().
6.
Sélectionnez Contrôle > Tester l’animation et cliquez sur l’étagère pour visualiser les
données de collection dans le panneau Sortie.
Exportation de composants ayant des
collections dans des fichiers SWC
Lorsque vous distribuez un composant qui possède une collection, le fichier SWC doit
contenir les fichiers dépendants suivants :
■
Interface Collection
■
Classe d’implémentation de collection
■
Classe d’élément de collection
■
Interface Iterator
Votre code utilise généralement les interfaces Collection et Iterator et les marque comme
classes dépendantes. Flash inclut automatiquement des fichiers dépendants dans le fichier
SWC et le fichier SWF de sortie.
Cependant, la classe d’implémentation de collection (mx.utils.CollectionImpl) et la classe
d’élément de collection propre au composant ne sont pas automatiquement incluses dans le
fichier SWC.
Exportation de composants ayant des collections dans des fichiers SWC
211
Pour inclure la classe d’implémentation de collection et la classe d’élément de collection dans
le fichier SWC, vous définissez des variables privées dans le fichier ActionScript de votre
composant, comme l’indique l’exemple suivant :
// classe d’élément de collection
private var collItem:CompactDisc;
// classe d’implémentation de collection
private var coll:mx.utils.CollectionImpl;
Pour plus d’informations sur les fichiers SWC, reportez-vous à Présentation des fichiers SWC,
page 197.
Utilisation d’un composant ayant une
propriété de collection
Lorsque vous utilisez un composant qui inclut une propriété de collection, vous utilisez
généralement la boîte de dialogue Valeurs pour établir les éléments dans la collection.
Pour utiliser un composant ayant une propriété de collection :
1.
Ajoutez le composant sur la scène.
2.
Dans l’inspecteur des propriétés, nommez l’occurrence du composant.
3.
Ouvrez l’inspecteur des composants et affichez l’onglet Paramètres.
4.
Cliquez sur la ligne qui contient la propriété de collection et sur l’icône en forme de loupe
située à droite de la ligne.
Flash affiche la boîte de dialogue Valeurs.
5.
Cliquez sur le bouton Ajouter (+) et définissez un élément de collection.
6.
Cliquez sur Ajouter (+), Supprimer (-) et sur les boutons fléchés pour ajouter, modifier et
supprimer des éléments de collection.
7.
Cliquez sur OK.
Pour plus d’informations sur l’accès à une collection par programmation, consultez la section
Accès aux éléments de collection lors de l’exécution dans une application Flash, page 210.
212
Propriétés de collection
Index
A
à 9 découpes non supportée 20
accessibilité 22
ActionScript, fichier de classe 156
aperçu des composants 65
Aperçu en direct, fonction 65
B
balise Collection 170
balise ComponentTask
JavaScript (JSFL) 171
Balise de métadonnées Event 166
balises. Voir métadonnées
bibliothèque
clips compilés 58
panneau Bibliothèque 58
StandardComponents 152
bibliothèque StandardComponents 152
boîte de dialogue Valeurs 204
C
Catégorie WebService (didacticiel) 30
chargement, composants 67
classe
classe parent, sélection d'une 148
création. Voir création de composants
définition 159
extension 150
importation 159
UIComponent 149
UIObject 149
Classe Delegate (didacticiel) 79
Classe DepthManager, présentation 64
Classe FocusManager, création de la navigation du
focus pour 63
classe MovieClip, extension 151
classe UIComponent
présentation 149
classe UIObject
présentation 149
classes
héritage des composants 19
référencement (didacticiel) 27
className, variable 159
clips
création 151
définition d'un composant 154
clips compilés
panneau Bibliothèque 58
présentation 21
colonnes
ajout (didacticiel) 34
components
creating subobjects 175
composant Dial 138, 186
composant TextInput (didacticiel) 43
composant, exportation 197
composants 156
ActionScript, classe 156
ajout à l'exécution 56
ajout aux documents Flash 54
aperçu 65
architecture 18
avec collection, exemple de fichier de classe 206
catégories, descriptions 17
chargement 67
classe parent, sélection d'une 148
classe, extension d'une 150
classe, présentation d'une 157
className, variable 159
213
clip, création d'un 151
clip, modification d'un 152
création d'un composant, exemple de 138, 186
définition de la méthode draw() 178
définition de la méthode init() 175
définition de la méthode size() 178
des éditions Flash MX 12
enregistrement d'enveloppes dans des styles 183
enveloppe, affectation d'une 182
événement courant 181
événement, distribution d'un 180
événements 69
exportation d'un composant sous la forme SWC
199
exportation de fichiers SWC 199
exportation et distribution 197
fichier de classe, exemple de 156
fichier SWC, test 199
fichier SWC, importation d'un 200
fichiers source 135
héritage 19
icône, ajout d'une 201
info-bulle, ajout d'une 201
installation 12
invalidation, à propos de 179
liste de contrôle du développement 202
métadonnée, balise
métadonnées, étiquette ComponentTask 171
méthodes de lecture/définition implicites 161
nom de symbole, sélection d'un 159
paramètre, définition d'un 172
préchargement 66
prise en charge de Flash Player 18
structure de 136
style 183
suppression 62
symbolOwner, variable 159
utilisation dans une application (didacticiel) 23
variable, définition d'une 160
voir également les entrées de chaque composant
composants DataSet, liaison au composant
XMLConnector et DataGrid (didacticiell) 31
composants de la version 2
avantages 16
Flash Player 18
héritage 19
composants version 1, mise à niveau 68
Composants, panneau 54
214
Index
configuration système requise pour les composants 8
conseils de code, déclenchement 63
conventions typographiques 9
couleurs
définition de propriétés de style 97
personnalisation 86
createClassObject() method 175
CSSStyleDeclaration 91, 92
D
DataGrid, composant
ajout de colonnes (didacticiel) 34
liaison au composant DataSet (tutorial) 31
déclarations de style
classe par défaut 94
définition de classe 94
global 91
personnaliser 92
déclarations de style global 91
defaultPushButton, propriété 64
diffuseur 70
dispatcher (diffuseur d'événement) 70
distribution d'événements 180
documentation
guide de terminologie 9
présentation 8
E
écouteurs
avec occurrences de composant (didacticiel)
domaine 77
fonctions 75
objets 71
présentation 70
utilisation avec des composants (didacticiel) 35
écouteurs d'événement. Voir écouteurs
éditions Flash MX et composants disponibles 12
élément de collection 208
enveloppe
création de variables pour 182
enveloppes
application à des sous-composants 110
application aux composants 108
identifiants de liaison
modification 105
voir également les entrées de chaque composant
enveloppes, application aux composants 101
enveloppes, propriétés
définition 102
modification dans le prototype 114
événement
courant 181
distribution 180
métadonnée 166
événements
délégation de domaine 79
fonctions du gestionnaire 69
objet événement 82
présentation 69
Voir également les entrées de chaque composant
extension de classes 150
F
feuilles de style
classe 86
personnalisées 86
feuilles de style des classes 86
fichier de classe
exemple 156, 206
présentation 157
fichier de classe de composant. Voir fichier de classe.
fichier SWC
exportation 199
fichier, format de 197
importation 200
test 199
fichier SWC, test 199
Flash JavaScript (JSFL), balise ComponentTask 171
Flash Player
composants 18
prise en charge 68
FlashType non supportée 20
fonctions du gestionnaire 69
G
gestionnaire d'événement on() 83
grilles de données. Voir DataGrid, composant
grilles. Voir DataGrid, composant
H
I
icône, pour un composant 201
identifiants de liaison des enveloppes 102
inspecteur de composants
définition des paramètres 59
onglet Liaisons 32
inspecteur des propriétés 59
installation des composants 12
instruction d'importation 159
L
Label, composant
didacticiel 43
Lecteur d'écrans, accessibilité 22
liaison des données, avec fichier XML (didacticiel) 31
Liaisons, onglet dans l'exemple d'application
(didacticiel) 32
M
meilleures pratiques pour le développement du
composant 202
métadonnée
balise ComponentTask 171
balises, liste de 163
Collection, balise 170
Event, balise 166
Inspectable, balise 164
présentation
méthode draw(), définition 178
méthode init(), définition 175
méthode invalidate() 179
méthode size(), définition 178
méthodes de lecture/définition implicites 161
mise à niveau des composants version 1 68
mise en cache de bitmaps non supportée 20
mot-clé de la classe 159
mot-clé de la superclasse 159
O
occurrences
déclarations de style 86
définition de styles 89
Halo, thème 116
handleEvent, fonction de rappel 74
héritage, composants de la version 2 19
Index
215
P
paquets 18
paramètre d'inspection 164
paramètre de composant
définition 172
inspection 164
paramètres des composants
affichage 59
définition 59
présentation 59
Voir également les entrées de chaque composant
paramètres. Voir paramètres des composants
personnalisation
text 86
personnalisation de la couleur et du texte, utilisation
des feuilles de style 86
préchargement de composants 66
propriété de collection
classe, définition 208
composant, exportation 211
définition 205
exemple 206
par programmation, accès 209
utilisation 212
propriétés de style, couleur 97
prototype 114
public ciblé de ce document 8
styles
définition 86
définition globale 91
définition personnalisée 92
définition pour l'occurrence 89
détermination de la priorité 97
présentation 86
utilisation (didacticiel) 30
voir également les entrées de chaque composant
subobjects, creating 175
suppression de composants 62
SWC, fichier
propriété de collection, exportation d'une 211
SWC, fichiers
clips compilés 21
présentation 21
T
tabulation 63
terminologie de la documentation 9
texte d'info-bulle, ajout d'un 201
texte, personnalisation 86
thèmes
application 122
création 120
présentation 116
types de données, définition pour les occurrences
(didacticiel) 29
R
ressources supplémentaires Macromedia 9
U
S
UIComponent, classe
héritage des composants 19
Sample, thème 116
ScrollPane, composant
didacticiel 43
sélection d'une classe parent 148
service Web, connexion à (didacticiel) 30
sous-classes, utilisation pour remplacer les enveloppes
114
sous-composants, application d'enveloppes 110
style
création de composants 183
216
Index
V
variable symbolName 159
variable symbolOwner 159
variables, définition 160
X
XMLConnector, composant
chargement d'un fichier XML externe (didacticiel)
34
définition du schéma (didacticiel) 32
liaison au composant DataSet (didacticiel) 31
">