Manuel du propriétaire | MACROMEDIA FLASH 8-UTILISATION DES COMPOSANTS Manuel utilisateur
Ajouter à Mes manuels216 Des pages
▼
Scroll to page 2
of
216
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