Ce tutoriel est tiré du livre Flash for Interactive Simulation", de Jonathan Kaye and David Castillo, à paraître en novembre 2002. et traduit par l’équipe de Flash-France
Il vous montrera comment :
mettre en application les nouvelles instructions Action Script, comme #initclip et registerClass, créer un composant simple avec un icône personnalisé, aussi bien qu’à utiliser de nouvelles méthodes comme "addProperty" pour protéger mieux votre code et "_targetInstanceName", toucher aux mécanismes qui autorisent l’héritage des composants fabriquer une interface personnalisée pour le panneau de propriétés créer un aperçu rapide du composant Bien qu’il soit possible de terminer ce tutoriel en utilisant le mode normal du panneau d’action, nous recommandons fortement d’utiliser le mode expert pour entrer les actions.
Qu’est-ce qu’un composant ? Les fonctions ont des paramètres qui permettent de personnaliser les actions qu’elle va exécuter. De la même manière les clips peuvent être paramétrés pour personnaliser les animations, en définissant des variables (ou des propriétés) qu’ils contiennent à partir de l’extérieur du clip avant ou pendant l’exécution de l’animation, comme les valeurs minimales ou maximales d’un cadran. Par conséquent un clip peut-être conçu comme une animation paramétrable.
Flash 5 a introduit les SmartClips comme moyen de créer des animations paramétrables. Les composants Fash MX représentent la génération suivante des smartClips. Les SmartClips permettent directement la création de bouts d’animations réutilisables et qui fonctionnent de manière efficace. Les limitations des smartClips toutefois, étaient qu’ils ne permettaient pas de rentrer dans la structure orientée objet du programme ActionScript. L’amélioration principale des composants Fash MX est d’intégrer le concept du smartClip dans cette structure.
Afin d’améliorer les capacités des smartClips à définir une interface personnalisée (dans "l’inspecteur de propriété") pour les paramètres, les Composants permettent maintenant un aperçu rapide, une option créée par le développeur qui permet à l’utilisateur de voir dans l’environnement de travail ce à quoi va ressembler le composant lorsqu’il sera actif.
Pour montrer comment créer un composant personnalisé, nous allons construire un composant simple de triangle isocèle qui aura les propriétés suivantes : base, hauteur, couleur, et un indicateur booléen qui autorisera ou non le remplissage. Il aura également des méthodes permettant d’extraire ou de définir ces propriétés aussi bien que l’aire.
Vue d’ensemble Un composant commence avec un clip. Nous allons tout d’abord définir un triangle à l’intérieur de ce clip, puis écrire l’ActionScript à l’intérieur de ce clip pour la Classe "triangle", ses propriétés et ses méthodes. Il faut alors associer le clip avec cette classe. Quand le composant est placé dans l’animation, le constructeur de la classe est appelé. Le triangle est très simple, nous n’avons donc pas besoin d’animation visuelle complexe. Le triangle a une base, une hauteur, et une couleur (propriété) une valeur booléenne qui définit si oui ou non la teinte est appliquée de même que des méthodes qui permettent de lire ou de définir ces valeurs. Les méthodes accèdent aux propriétés pour manipuler les objets graphiques.
Étape 1. Création du MC (movie Clip) triangle Sélectionner le triangle, ouvrir le panneau "Aligner", sélectionner "vers la scène" et aligner le triangle avec le centre (horizontalement) et le bas (verticalement). Nous l’alignons sur le centre de la base ainsi quand nous placerons le composant sur la scène, nous savons que la base restera en position quand nous modifierons la taille de la base et sa hauteur. Votre écran devrait ressembler à cela :
Etape 2. Définition de la classe Triangle Maintenant, nous allons créer la classe triangle. A l’intérieur du clip, ajouter un nouveau calque et appelez le "définitions". Ouvrez le panneau d’action à la première image clé et entrez le code suivant :
#initclip function TriangleClass () this.cobj = new Color(this) ; this.update() ;
// permettre à la classe triangle d’hériter des propriétés des clips TriangleClass.prototype = new MovieClip() ;
// Mettre à jour le dessin du triangle pour les propriétés de taille et et les valeur de couleur. TriangleClass.prototype.update = function () if (this.appliquerTeinte) this.cobj.setRGB(this.tcouleur) ; this._xscale = 10 * this.tbase ; this._yscale = 10 * this.thauteur ;
// Lier la classe avec le nom du paramètre d’exportation du movie clip Object.registerClass("FTriangle", TriangleClass) ; #endinitclip
Vous venez juste de définir la classe du composant ! Prenons le temps de jeter un coup d’oeil aux instructions que nous venons d’utiliser pour cela.
#initclip Avancé
Quelques malicieux parmi vous pourrait se demander ce qui se produirait si vous mettiez quelque chose d’autre qu’une méthode, un constructeur, ou un registerClass dans des pragmas #initclip. La réponse est qu’elle sera évaluée au niveau _ root, et " this" se rapportera alors au _root.
Cela signifie que vous pouvez vous référer au composant seulement par des définitions de méthode, ainsi vous devez éviter la tentation d’utiliser un rapport comme " this.myProp = 5 ; " pour essayer de placer une propriété à l’extérieur du constructeur ou d’une méthode.
Vous devez introduire ce rapport dans le constructeur ou dans une Méthode.. Cela va aussi bien pour les gestionnaires définissants les événement, tels que « onEnterFrame » ou « onPress ». Si vous voulez définir ces événements pour votre composant, ils doivent être définis comme cela :
myComponentClass.prototype.onEnterFrame = function () ...
ou bien à l’intérieur du constructeur ou des méthodes :
function myComponentClass () ... this.onEnterFrame = function () ... ...
Quoique les approches soient fonctionnellement équivalentes, le premier est plus efficace si vous voulez qu’il s’applique à la classe entière parce qu’il définit la méthode une fois pour la classe, tandis que le dernier définit la méthode pour chaque instance de myComponentClass.
#initclip et #endinitclip FlashMX a deux nouvelles instructions (’pragmas’),#initclip et #endinitclip qui sont utilisées pour définir des composants. Quand vous fabriquez un composant, vous définissez un constructeur pour la classe, definissez toutesles méthodes, et ensuite enregistrez la classe avec un clip.
Les règles de compilation #initclip et #endinitclip sont utilisées pour marquer un bloc de code lors de sa définition et de son enregistrement. Le code à l’intérieur de ses "pragmas" est exécuté seulement une fois pendant le déroulement de l’animation et cela indépendamment du nombre d’instance du composant utilisé dans l’animation. le code à l’intérieur des "pragmas" est utilisé avant tous les codes utilisés à l’intérieur du clip. Cela vous permet de vous référer aux méthodes de la classe immédiatement quand le clip est placé, faisant tombé une limitation de flash 5 qui nécessitait d’attendre au moins une image avant que les méthodes deviennent disponibles.
Note :les pragmas #initclip/#endinitclip sont réellement uniquement utile pour définir des composants. À première vue, ils peuvent sembler construits comme s’ils devaient travailler pour évaluer un bloc de code sur n’importe quelle ligne de temps (timeline), mais ce n’est pas ce qu’ils font.
Le constructeur de la classe triangle function TriangleClass ()
Cela définit le constructor du composant triangle. Quand Flash crée le composant, il appelle le constructor et exécute les actions. Les propriétés (tbase et thauteur) sont automatiquement définies par défaut (nous verrons comment plus tard).
Définir un héritage des propriétés et des méthodes des Clip. TriangleClass.prototype = new MovieClip() ;
Quand vous publiez une instruction pour connecter la définition de classe au clip, Flash réassigne le type clip au type de la classe que nous avons défini. Toutefois, nous voulons toujours que le clip se comporte comme un clip, donc nous avons à définir notre nouvelle classe pour qu’elle hérite des méthodes et propriétés des clips. Par conséquent, les instructions ci-dessus autorisent l’héritage et ainsi nous pouvons utiliser toutes les méthodes et propriétés des clips avec notre composant.
Il est impératif que ces instructions suivent immédiatement après le constructeur et avant toute méthode définie pour la classe.
Sous-programme de mise à jour du triangle. TriangleClass.prototype.update = function ()
Cette méthode trace le triangle aux valeurs actuelles de base et de taille. Il contrôle d’abord pour voir si nous sommes censés appliquer la teinte au triangle, et, si oui, lui applique la teinte. La propriété "applyTint " est une valeur vraie ou fausse qui nous indique si oui ou non on doit appliquer la teinte. Cependant, une fois qu’une teinte a été appliquée, elle ne peut pas être retirée, seulement modifiée avec une autre couleur. C’est une limitation de notre stratégie de programmation, qui a été gardée aussi simple que possible pour des raisons didactiques. Dans cet exemple, nous multiplions par 10 plutôt que 100 parce que nous plaçons initialement le triangle à une largeur et à une taille de 10.
Lions la classe avec le clip : Object.registerClass("FTriangle", TriangleClass) ;
C’est l’instruction essentielle qui joint la classe (TriangleClass) avec le movie clip identifié par l’identifiant de liaison "FTriangle". Dans l’étape 6, nous nommerons ce composant avec cet identifiant de liaison.
Etape 3. Définition des méthodes de lecture et d’écriture des propriétés de la classe Triangle C’est le moment de définir les autres méthodes dont nous avons besoin pour ce composant, pour les nommer : celles qui gèrent la définition et l’accès au valeur de : base, hauteur et teinte. Nous allons aussi ajouter une méthode qui calcul l’aire d’un triangle. Pour les routines d’attributions de valeurs ( setProperty ) nous devons redessiner le triangle une fois les valeurs passées. Pour la lecture des valeurs nous renverrons simplement la valeur voulue. Ajouter les méthodes suivantes avec le même bloc : #initclip / #endinitclip ( où vous vouler après l’instruction d’héritage de l’objet MovieClip ) :
TriangleClass.prototype.setBase = function (b) this.tbase = b ; this.update() ;
TriangleClass.prototype.getBase = function () return (this.tbase) ;
TriangleClass.prototype.setHauteur = function (h) this.thauteur = h ; this.update() ;
TriangleClass.prototype.getHauteur = function () return (this.thauteur) ;
TriangleClass.prototype.setTeinte = function (c) this.tcouleur = c ; this.update() ;
TriangleClass.prototype.activerTeinte = function () this.appliquerTeinte = true ; this.update() ;
TriangleClass.prototype.getAire = function () return (0.5 * this.tbase * this.thauteur) ;
Etape 4. Définition des propriétés du composant Triangle Il est maintenant temps de définir les paramètres du composant dans la fenêtre de définition des composants. Ouvrez la librairie et cherchez-y le Clip Composant Triangle.. Ouvrez la fenêtre de définition de Composant ( click droit sur PC , CTRL+click sous MAC ) et choisissez "Définition du Composant...".
Dans cette fenêtre vous allez entrer les paramètres de votre composant. Le + et le - en haut de cet écran vous permettent d’ajouter ou d’enlever des propriétés. Par défaut, les propriétés ajoutées ont la valeur "defaultValue" et sont de type String. Flash MX vous permet de définir des propriétés de types : Default, Array, Object, List, String, Number, Boolean, Font Name et Color. Il y a 4 colonnes dans ce tableau : la première, Nom, est le texte que vous souhaitez voir dans l’inspecteur de propriété des composants. Le nom peut contenir des espaces, des charactères alpahnumérique et de la ponctuation. Il est important de définir un titre décrivant bien le paramètre dans cette colonne.
La deuxième colonne, Variable, est le nom de la propriété utilisée dans le script du composant. Ce nom de variable ne peut pas avoir de ponctuations ou d’espace ( sauf des _ ). Avoir à la fois un nom et une variable vous permet d’avoir : 1 nom bien descriptif pour les utilisateurs du script, et un nom court pour utiliser dans vos scripts.
Note : Si vous remplissez la colonne Variable mais pas la Colonne nom, Flash met le Nom de variable dans l’inspecteur de propriété. Si vous faites l’inverse vous devrez alors utiliser ce que vous avez mis dans votre colonne Nom comme nom de variable dans vos scripts.
La troisème colonne, Valeur, est la valeur par défaut de la propriété. La dernière colonne est le type du paramètre, vous pourrez choisir cela en cliquant sur la liste déroulante :
Nom Variable Valeur Type Longuer de la Base tbase 10 Number Hauteur thauteur 10 Number Teinte tcouleur 0 Color Appliquer Teinte appliquerTeinte false Boolean
Comme nous n’avons pas encore d’Interface Utilisateur ou de Prévisualitation définit pour le composant laisser ces 2 lignes vide. Si vous voulez tapper une description pour aider les utilisateurs à comprendre la fonction de votre composant, appuyez sur le bouton Définir à droite de la boite Description. Dans la fenêtre Description, choisissez "Décription Textuelle" et entrez la description dans la zone de saisie. L’autre option est de créer une description formattée pour la panneau Référence ( " La description fait partie du panneau Référence ). Pour cela, regardez la documentation Flash ou le site : Flash MX developper pour avoir des informations sur comment créer une description de composant présente dans la panneau Référence.
Choisissez un icône pour votre composant en cliquant ( et en gardant enfoncer le bouton ) sur l’icone placé en-dessous du labal Description. Dans une prochaine étape nous allons vous montrer comment définir un icône personnel.
Sous cette zone se trouve deux options : Bloquer ou non les valeurs de paramètres dans les instances ( ce qui veut dire qu’un utilisateur peut ou ne peut pas ajouter des paramètres quand le composant a été placé sur la scène ), et Afficher ou non le composant dans le panneaux Composants. Note : Si vous cocher "Afficher dans la panneau Composant", le composant ne s’ajoutera pas automatiquement dans la panneau composant. Nous verrons cela par la suite. Cliquer sur OK pour continuer.
Etape 5. Définir un icone personnalisé Flash MX vous permet de définir votre propre icone pour réprésenter votre composant, et qui le représentera dans la librairie, l’explorateur d’animation et le panneau composant, vous pouvez aussi définir l’icône par défaut...
Dans un programme d’édition d’image comme photoshop ou fireworks, créé une image de 24x20 ( en GIF JPEG ou PNG ) pour réprésenter votre composant. Importer le graphique dans la librairie ( Fichier > Importer dans la librairie ). Flash liera alors l’icône avec le composant si vous donnez le même nom à votre icône qu’à votre composant, et que vous le placez dans le dossier de la librairie appellé FCustomIcons ( créez ce dossier dans votre librairie si vous ne l’avez pas déjà ).
Si vous fermez et rouvrez la librairie vous verrez l’icône à gauche du nom de votre Composant.
Etape 6. Définir les propriétés du Symbole Si vous ne l’avez pas encore fait, fermez le Clip et retournez sur la scène principale. Le Clip restera dans votre librairie ;). Vous allez maintenant réaliser le Lien en faisant bouton droit ( win ) ou Pomme+Click ( mac ) sur le composant Triangle dans la librairie, et choisissez "Propriété".
Si l’écran qui s’ouvre n’est composé que du haut de la capture d’écran ci-dessus alors cliquez sur le bouton "Avancé". Dans l’espace marqué Identifiant ( sous Liaison ), entrez l’identifiant que nous avons défini pour le composant triangle : FTriangle pour "Flash Triangle". Cocher Exporter pour ActionScript et laissez vide les autres. Cela dit à Flash d’empaqueter le composant par défaut dans tous les films utilisant le composant. Comme vous n’avez pas coché "Exporter sur la première image" Flash chargera le composant juste avant de l’utiliser. Si vous cochez Exporter sur... Flash le chargera directement sur la première image de l’animation. La raison pour laquelle nous ne chargeons pas cela sur la première frame est que cela pause des problèmes d’utilisation sur internet ( pas pratique d’attendre le chargement de tous les composants avant de voir un film Flash ). De plus, votre composant serait chargé avant votre preloader ce qui n’est tout de même pas très pratique ;). Les 2 autres options se réfèrent à la création de composants pouvant être partagés durant l’éxécution. Vous pourrez en apprendre plus à ce sujet en lisant la documentation Flash.
Etape 7. Tester le Triangle Nous sommes maintenant prêt à tester le nouveau composant. Ouvrez la librairie et placez une instance sur votre scène. Si vous tester le film ( Control > Tester Animation ) , vous verrez un triangle avec une base et une hauteur de 10. Sortez de la fenêtre de test et nous allons voir comment on peut modifier ces propriétés.
Vous pouvez examiner et changer les propriétés du composant en passant par la fenêtre des propriétés ( comme nous l’avons fait tout à l’heure ). Vous pouvez changer les valeurs en cliquant sur la colonne Valeur et en tapant la nouvelle valeur que vous voulez. Quand vous l ’aurez fait, retester l’animation et vous verrez que le triangle a bien les nouvelles propriétés.
Etape 8. Tester le Composant, Installer dans le panneau composant Avant d’installer le composant, nous vous recommandons de placer le clip du composant dans un nouveau dossier de votre librairie qui aura le nom de votre composant ainsi que tous les autres éléments de bibliothèque utilisés par votre composant. Cela permettra aux gens qui utiliseront votre composant d’avoir après l’ajout un répertoire et un seul s’ajoutant dans leur librairie.
L’endroit ou votre composant sera stocké dépend de votre Système d’exploitation. Les composants sont en effet stockés dans un dossier personnel de l’utilisateur de la machine. Voici quelques exemples : Windows 2000 et XP C:Documents and SettingsUserApplication DataMacromediaFlash MXConfigurationComponents Windows 98 et ME C:WindowsApplication DataMacromediaFlash MXConfigurationComponents Windows NT C:WinNTProfilesUserApplication DataMacromediaFlash MXConfiguration MAC OS X Hard Drive:Users:Library:Application Support:Macromedia:FlashMX:Configuration:Components Mac OS 9.x (multi-utilisateur) Hard Drive:Users:User:Documents:Macromedia :FlashMX:Configuration:Components :
Vous serez certainement plus à l’aise en mettant votre composant dans le pannel Composant et en le glisssant simplement sur la scène plutôt que d’utiliser une librarie. La meilleure installation consiste à utiliser l’Extension Manager ( de Macromedia ), mais pour le moment tout ce dont vous avez besoin est de placer le .fla de votre composant dans le répertoire de vos composants ( voir les exemples ci-dessus .... ), Flash installera alors votre composant automatiquement à chaque démarrage.
Voici quelques trucs à vérifier si vous ne voyez pas votre composant dans le pannel Composant ( accessible par Windows > Composants ). Le pannel Composant est appellé dans Flash par défaut : Flash UI Composants. A coté de ce titre il y a une liste déroulante, cliquez dessus, et regardez si le nom de fichier que vous avez sauvez apparait ici. Si oui, choisissez-le et votre composant apparaitra dans la boite. Si votre composant est dans la liste mais qu’il ne veut pas apparaître dans le pannel vous avez probablement oublié de cocher la case "Afficher le composant dans le pannel" dans la fenêtre de définition du composant ( Etape 4 ). Si le nom de fichier n’est pas dans la liste c’est que vous n’avez pas mis votre .fla dans le bon dossier. Si vous avez à changer le code mieux vaut enlever le fichier existant des dossiers spéciaux et travailler sur une copie séparée avant de remettre le .fla dans le dossier des composants.
Etape 9. Améliorer l’implémentation avec Object.addPropertyInsulating Nous avons créé le composant triangle en essayant de coder proprement, nous avons défini des méthodes setBase, getBase etc... pour accéder aux variables internes de l’objet depuis l’extérieur. De cette façon si nous changeons l’organisation interne du composant nous aurons à changer seulement getBase et setBase et nous ne casserons pas le code de tous les gens ayant développé des animations avec l’ancienne version. Cependant, Flash n’as pas la possibilité de déclarer des variables publiques ( public ) et privée ( private ) comme en C++ ou en JAVA par exemple ... Malheureusement celà veut dire que les développeurs peuvent accéder et modifier des variables internes aux instances qu’ils ne sont pas censés toucher ( principe fondamental de POO ).
La nouvelle méthode addProperty vous permet de définir une propriété qui, quand on y accède appelle une méthode pour calculer la valeur plutôt que de garder une variable réelle en mémoire. Par exemple, nous pouvons définir une propriété appelée"base" qui utilise setBase et getBase pour gérer ses écritures ( changement de valeur ) et lecture ( récupération de la valeur ). Quand à l’extérieur du composant on veut accéder à base ou à hauteur nous savons que nous pouvons utiliser les fonctions que nous avons developpées à cet effet. Mais, si nous changeons l’implémentation interne ( avec addProperty ) nous aurons seulement à modifier les fonctions d’accès et tous les codes construis avec le composant continueront de fonctionner !
Voici le code à ajouter entre #initclip/#endinitclip (après getBase et setBase ) :
TriangleClass.prototype.addProperty("base", TriangleClass.prototype.getBase, TriangleClass.prototype.setBase) ;
La méthode addPRoperty prend trois arguments : le nom ( entre " " ) de la nouvelle propriété, la méthode à utiliser pour accéder à la valeur de la propriété, la méthode pour mettre une nouvelle valeur dans la propriété. La fonction get... doit retourner la valeur, la fonction set doit accepter un argument qui est la nouvelle valeur. Les fonctions font tous les calculs nécessaires pour produire la valeur de la propriété. Par exemple la propriété "Aire" :
TriangleClass.prototype.addProperty("aire", TriangleClass.prototype.getAire, null) ;
Comme vous pouvez le voir dans ce code, nous ne stoquons pas réellement l’aire du triangle, à la place nous calculons l’aire quand on veut accéder à la propriété aire. Depuis l’utilisateur, cela ne change rien si la propriété aire est une vrai variable ou une valeur calculée.
Pour finir, nous définissons aussi la propriété hauteur :
TriangleClass.prototype.addProperty("hauteur", TriangleClass.prototype.getHauteur, TriangleClass.prototype.setHauteur) ; Supposez qu’un développer créé une instance de votre composant triangle appellé "tri0". Le développeur sait maintenant que les propriétés sont aire, base, hauteur et nous n’avons plus à nous soucier de problèmes causés par des changements futurs de notre code....
Etape 10. Introduire par programmation un triangle dans une animation La voie la plus directe pour instancier un composant triangle est de le faire glisser sur la scène à partir du panneau Composant ou, si vous avez déjà une instance sur la scène , à partir de la librairie. Cependant, vous pourriez vouloir créer dynamiquement des triangles au cours de l’animation , et vous préfèreriez ne pas avoir à créer toutes les instances possibles du début. Ceci est facilement réalisé en utilisant les méthodes soit attachMovie soit duplicateMovieClip.
Vous précisez simplement l’ "ID de lien " (Linkage ID) et Flash prend en charge le reste , par exemple :
attachMovie("FTriangle", "tri0", 10) ;
Le premier argument est l’ "ID de lien " (Linkage ID), le second est le nom du nouveau composant sur la ligne de temps ( timeline ) courante, et le troisième est la profondeur ( l’ordre ). Cette déclaration prend le composant triangle "FTriangle" de la Bibliothèque, nomme le clip "tri0", le place sur la scène aux coordonnées _x = 0, _y = 0 et met sa profondeur à 10 et appelle le constructeur TriangleClass. Les clips placés sur des profondeurs de valeur plus haute apparaissent au-dessus des clips placés sur des profondeurs inférieures.
Avant que vous ne sortiez à toute vitesse pour essayer cela, nous devons résoudre le problème qui consiste à obtenir les valeurs de paramètre dans le composant au moment de l’appel du constructeur. Si nous avons fait quelque chose comme ceci :
attachMovie("FTriangle", "tri0", 10) ; tri0.tbase = 5 ;
Il est trop tard pour que la variable tbase soit utilisée dans le constructeur. Dans notre cas, cela ne fera pas de différence , mais dans la plupart des cas ça va avoir un impact. Flash MX ne vous laisse pas douter. Il existe un paramètre final optionnel (un Objet) à attachMovie et duplicateMovieClip, que vous pouvez utiliser comme dans l’exemple suivant :
attachMovie("FTriangle", "tri0", 10, tbase : 5, thauteur : 10, tcouleur : 0x000000, appliquerTeinte : false) ;
Ce code crée un objet ( en utilisant les ) et le remplit avec tase, thauteur, tcouleur et la propriété appliquerTeinte. Flash copie toutes les propriétés provenant de cet Objet dans l’instance du composant qui est créée, avant d’appeler le constructeur du composant. De cette façon, les propriétés sont disponibles pour le constructeur au bon moment.
Terminé pour le moment ! Si vous avez suivi le tutoriel jusqu’ici, vous devriez avoir un composant triangle qui marche.
Il y a évidemment beaucoup plus de choses que vous pouvez faire avec les composants que ce que l’espace nous permet d’écrire ici, y compris l’héritage des composants (comme le composant Flash UI ), la gestion d’apparence, etc. Le meilleur moyen pour trouver plus de détails est d’examiner le code source contenu dans les Composants UI, que vous trouverez facilement dans le secteur de stockage de données indiqué à l’étape 8.
Les étapes suivantes sont :
La création d’une interface utilisateur personalisée La création d’une animation de prévisualisation temps réel Avant de commencer à créer l’interface utilisateur personnalisée et la prévisualisation temps réel, nous allons présenter une nouvelle fonction de Flash MX , _targetInstanceName, qui permet à vos composants de modifier les éléments de la scène sur lesquels le composant est placé. Nous allons également voir brièvement l’héritage de composant.
_targetInstanceName : Création de Composants qui Changent le Comportement d’Autres Éléments de la scène
Nous vous avons appris comment créer un composant indépendant, mais une des plus existante fonction introduite par les composants Flash MX est la possibilité de créer un composant qui modifie le comporatement d’autres éléments de la scène sur lesquels ils est placé. Pour ceux d’entre vous qui sont familiers avec Director, vous les connaîtrez déjà comme "comportement".
Avec cette fonction, vous pouvez faire glisser le composent sur d’autres éléments de la scène (par exemple un Clip ou un champ de texte) et faire en sorte que le composant modifie les propriétés de ces éléments. Par exemple, le composant de barre de défilement de texte que Macromedia fourni se place et se redimensionne lui-même sur tout champ de texte sur lequel il est placé, et fourni automatiquement les fonctionnalités de la barre de défilement à ce champ de texte. La propriété _targetInstanceName donne au composant le nom ( chaîne ) de l’élément de la scène sur lequel il a été placé. Pour accéder aux propriétés et méthodes de l’objet cible, vous pouvez utiliser la syntaxe suivante à partir d’une méthode d’un composant : this._parent[_targetInstanceName]. Par exemple, pour obtenir la longueur de l’object cible, vous pourriez écrire :
this._parent.[_targetInstanceName]._width
Pour rendre cette propriété disponible, vous l’incluez dans la liste des paramètres de votre composant (voir figure au-dessus). Vous allez également avoir une surprise : votre composant va "s’émanter" sur place. Quand vous glissez votre composant sur un autre élément de la scène, votre composant va s’aligner tout seul sur le coin haut-gauche de l’élément cible de la scène. C’est également un moyen commode de vérifier visuellement que le composant a été connecté avec l’objet cible. Alternativement, vous pouvez tapper le nom de l’objet cible dans l’inspecteur de propriétés. Si le composant n’est pas glissé sur un un élément de la scène, la propriété _targetInstanceName prend la valeur par défaut que vous lui avez donné quand vous avez ajouté la propriété dans la liste des propriétés du composant.
Installation de l’héritage pour composant Maintenant que vous pouvez sous-classer des Clips facilement avec des Composants et les lier à des classes définies par l’utilisateur, vous pouvez créer des hiérarchies d’animation qui partagent des éléments fondamentaux.
L’idée essentielle est que vous faites votre héritage de la classe fondamentale à partir du clip, comme nous l’avons fait avec les triangles, et ensuite les sous-classe héritent de la classe fondamentale (ou d’autres sous-classes ). Puisque vous devez définir la classe fondamentale en premier, vous devez utiliser un numéro d’ordre dans la définition de la classe fondamentale :
#initclip 0
Dans votre sous-classe, vous utilisez des numéros d’ordre plus grand que ceux de la classe parent, comme #initclip 1.Cela assure que la classe d’élément fondamentale est définie avant la sous-classe. Pour établir l’héritage, en place d’héritage de Clip, vous pouvez utiliser une déclaration comme :
MySubClass.prototype = new FoundationClass() ;
Maintenant votre sous-classe (MySubClass) aura les propriétés et les méthodes de la fondamentale (FoundationClass).
Les composants d’interface utilisateur de Macromedia, qui incluent les éléments comme la liste déroulante, les menu déroulants, la case à cocher, et bien d’autres, sont de bons exemples d’utilisation de la hiérarchie des composants. Chaque élément a des propriétés et méthodes uniques pour implémenter des comportement particuliers, mais ils partagent tous des styles fondamentaux de propriétés et méthodes comme l’état activé/désactivé, les tailles et fonts. Les designers peuvent modifier la feuille de style globale (GlobalStyleFormat) et tous les composants qu’ils dessinent à partir des éléments globaux vont changer. Vous pouvez aussi créer votre propre composant en héritant de n’importe laquelle de ces classes.
Quand vous créez le Clip pour la sous-classe, vous pouvez aussi placer le composant parent avec le clip ou introduire le composant parent par programmation avec attachMovie ou duplicateMovieClip.
Etape 11. Création de l’interface utilisateur (IU) personnalisée pour un composant Flash MX Jusqu’ici, nous avons vu comment créer un composant Flash MX personnalisé pou un triangle isocèle. Dans ce tutoriel, nous allons étendre la discussion pour montrer comment créer une interface utilisateur personnalisée.
Une interface utilisateur personnalisée est une animation Flash spéciale que vous feriez pour permettre aux utilisateurs de votre composant d’entrer les valeurs des propriétés par un moyen plus commode que le panneau de propriétés de composant par défaut, comme illustré ci-dessous :
Motivation Travaillant sur les obstacles majeurs que pourraient réprésenter la création de composants, vous vous réchauferez dans le rougeoiement des visages excités de vos designers et développeurs désirant exploiter la magie de votre composant triangle. Un groupe dont les visages ne seront bizarrement pas rougeoyant est celui des agents d’’Assurance Qualité" qui diront que maintenant que vous avez créé si facilement vos triangles isocèles pour des animation Flash les gens vont les utiliser incorrectement. En fait , ils vous diront que si la base et la hauteur sont en-dehors d’une certaine proportion, le triangle n’est plus facile à utiliser.
Le chef de l’Assurance qualité vous dira que vous devez ajouter un système de mesure "facile à utiliser" dans le composant pour prévenir les développeurs quand les triangles deviennent dangeureusement "hors-normes". Pour vous aider, elle vous donne le quotient norme-utilisateur pour les triangles isocèles :
fuqu = (base * 4.211) / height
La valeur idéale de fuqu est 4.211, et plus elle s’éloigne (à la fois plus grande ou plus petite ) de cette valeur, plus le triangle devient hors-normes. La création de triangles avec une valeur de fuqu en-dessous de 2.211 ou au-dessus de 6.211 serait même une raison de licensiement de votre société.
Votre côté altruiste vous dicte que vous devez alerter les utilisateurs de votre compoosant avant qu’ils ne fassent une erreur fatale. Vous allez créer une interface utilisateur personnalisée (IU) pour le composant triangle qui va avertir l’utilisateur si le triangle viole la politique d’entreprise, basé sur la base et la hauteur qu’ils tappent. Ca n’aidera pas les programmeurs qui vont coder le composant dynamiquement, mais ils sont déjà au-delà de cet espoir.
Création de l’interface utilisateur (IU) personnalisée Pour créer l’IU personnalisée , vous créez une nouvelle animation Flash. La nouvelle animation Flash va démarer avec l’inspecteur de propriétés régulier (les dimensions sont environ 406 x 72 pixels) ou dans le panneau de propriétés de composant ( utilisant si vous avez besoin un espace plus grand que ce qui irait dans l’inspecteur de propriété).
Vous allez devoir créer un moyen dans cette animation de retrouver les valeurs des propriétés du composant que va définir l’utilisateur , à savoir tbase, thauteur, tcouleur, et appliquerTeinte. Pour créez l’index de fuqu, vous allez ajouter un indicateur de sa valeur, avec un avertissement quand elle s’éloigne des paramètres idéaux, et une alerte quand elle s’éloigne grossièrement de ceux-ci.
L’élément clé dont vous avez besoin pour votre interface utilisateur personnalisée (IU) est une instance de clip que vous créez appelé "xch". Vous passez les valeurs à votre composant en écrivant les valeurs des propriétés de xch par l’IU personnalisée, comme xch.tabse = 20 ;
L’IU personnalisée autorisera les utilisateurs à entrer de nouvelles valeurs. Dans notre cas, l’interface va également motrer les avertissements sur la valeur de fuqu, lorsque nécessaire. Quand l’animation avec le composant triangle est testée ou publiée, Flash copie les propriétés et valeurs sur xch vers le composant qui est donc prés à s’initialiser lui-même avec les valeurs que l’utilisateur a entré.
Notez les étapes suivantes pour créer une IU personnalisée :
1. Créer une nouvelle animation et changez ses dimensions pour avoir 406 x 72.
2. Créez un clip vide en utilisant Insérer > Nouveau symbole et appelez-le "exchange". Faites-le glisser sur la scène et donnez-lui le nom d’instance "xch".
3. Créez des textes statiques pour "base","hauteur","rouge","vert","bleu","fuqu =","rapport" et "0-255", et placez-les comme dans l’illustration.
4. Maintenant, définissez les champ de texte que vous utilisez pour récupérer les valeurs des propriétés tbase et hauteur. Créez un champ de texte "base" et un champ "hauteur" (type : texte de saisie), placez-les au-dessus des textes statiques correspondants, et donnez-leur les noms d’instance "bs" et "ht" , respectivement.
5. Ensuite, définissez les textes de saisie que nous utilisons pour récupérer les couleurs de teinte. Créez 3 champs de saisie supplémentaires nommés "rc","gc" et "bc" (pour la couleur rouge, la couleur verte, et la couleur bleu), et placez-les au-dessus des textes statiques correspondants. L’utilisateur va entrer un entier entre 0 et 255 pour représenter le taux d’une couleur particulière. Les nombres en-dessous de 0 seront définis à 0 et les nombres au-dessus de 255 seront définis à 255.
6. Donc pour que l’utilisateur puissent prévisualiser la couleur, nous fesons un cadre qui montre le paramétrage actuel de la teinte. Utilisez l’outil de dessin pour créer un carré. Convertissez ce carré en Clip, et nommez l’instance "tintSq".
7. Nous pouvons utiliser un composant pré-défini de Flash, FCheckBox, pour définir lorsque l’utilisateur veut appliquer la couleur de teinte. Ouvrez le panneau de Composants et faites glisser une case à cocher à sa place sur la scène. Dans la fenêtre de propriétés, définissez le texte par "appliquez teinte ?" et sa valeur par défaut sur "false". Sous la propriété "Change Handler", entrez "tintApply".
8. Maintenant nous créons l’indicateur pour aider l’utilisateur à faire des triangles "dans les normes". Pour tenir informé l’utilisateur de la valeur de fuqu pour le nouveau triangle, créez un champ de texte dynamique, nommez-le "fuquTF", et placez-le en longueur sur le côté du texte statique "fuqu = ".
9. Ensuite, créez l’indicateur du rapport fuqu, qui dit à l’utilisateur si la valeur de fuqu est PARFAITE (4.211), ACCEPTABLE (entre 2.211 et 6.211, mais pas 4.211), MAUVAISE. Créez un nouveau clip appelé " fuqu text" avec 3 images clés. Sur l’image 1, placez un texte Statique "PARFAIT",à l’image 2 placez le texte statique "ACCEPTABLE", et à la l’image 3, placez-le texte statique "MAUVAIS !". Assurez-vous que ces textes soient alignés sur la gauche en respectant le placement des uns par rapport aux autres. A l’image 1 d’un nouveau calque (avec le nom "actions") ouvrez l’éditeur d’Actions pour l’image clé et entrez l’instruction "stop ;". Pour finir, fermer le Clip et nommez l’instance "fuquEval".
Prêt ou non , ici nous codons 10. La dernière étape est d’écrire le code pour l’IU personnalisée. Sur un nouveau calque, entrez le code suivat sur l’image 1 :
fscommand("allowscale", "false") ; // définition des valeurs par defaut des propriétés xch.tbase = 10 ; xch.thauteur = 10 ; xch.tcouleur = 0x000000 ; xch.appliquerTeinte = false ; // Initialise les champs de texte base et height bs.text = 10 ; ht.text = 10 ; compute_fuqu(10, 10) ; // Initialise le cadre de teinte et les champs de texte de couleur tsc = new Color(tintSq) ; rc.text = gc.text = bc.text = "0" ; setTintSq(0, 0, 0) ;
// Etant donné une valeur de base et de hauteur, calcule la valeur de fuqu et défini // l’indicateur de fuqu basé sur la valeur calculée function compute_fuqu (b, h) var fuqu ;
if (isNaN(b)) b = 0 ; if (isNaN(h)) h = 0 ;
fuqu = b/h * 4.211 ;
if (fuqu == 4.211) fuquEval.gotoAndStop(1) ; else if (fuqu >= 2.211 && fuqu <= 6.211) fuquEval.gotoAndStop(2) ; else fuquEval.gotoAndStop(3) ; // Défini le champ de texte qui montre la valeur de fuqu fuquTF.text = Math.round(fuqu * 1000) / 1000 ;
// Etant donné une valeur pour les couleurs rouge, vert et bleu, crée une valeur composée, // défini la teinte du cadre, et retourne la valeur de la couleur composée. function setTintSq(r, g, b) var col = r << 16 | g << 8 | b ; tsc.setRGB(col) ; return col ;
//Quand les champ de texte base et height changent, calcule à nouveau fuqu // et défini la propriété appropriée dans xch bs.onChanged = function () xch.tbase = this.text ; compute_fuqu(ParseFloat(this.text), ParseFloat(xch.thauteur)) ; ht.onChanged = function () xch.thauteur = this.text ; compute_fuqu(ParseFloat(xch.tbase), ParseFloat(this.text)) ;
// Etant donné un entier c, borne-le entre 0 et 255 function boundColor (c) if (isNaN(c)) return 0 ; if (c < 0) c = 0 ; else if (c > 255) c = 255 ; return c ;
// Quand le champ de texte de couleur change, change la couleur de teinte // et défini la propriété appropriée dans xch rc.onChanged = function () xch.tcouleur = setTintSq(boundColor(this.text), ParseInt(gc.text), ParseInt(bc.text)) ; gc.onChanged = function () xch.tcouleur = setTintSq(ParseInt(rc.text), boundColor(this.text), ParseInt(bc.text)) ; bc.onChanged = function () xch.tcouleur = setTintSq(ParseInt(rc.text), ParseInt(bc.text), boundColor(this.text)) ;
// La case à cocher (c) appèle la fonction quand l’utilisateur coche ou décoche // la case. Défini la propriété appliquerTeinte de xch convenablement. function tintApply (c) xch.appliquerTeinte = c.getValue() ;
A peu près terminé ! 11. Enregistrez l’animation sur votre disque dur , ensuite testez-la (Contrôle > tester l’animation). Ceci va créer le swf au même emplacement que votre fichier sauvegardé.
12. La dernière étapes consiste à intégrer l’IU personnalisée avec l’animation du triangle. Revenez à votre animation du triangle, ouvrez la librairie, et sélectionnez le Composant Triangle. Ouvrez la fenêtre de définition du composant, et sur la droite de l"IU personnalisée", pressez le bouton "Définir".
13. A côté de "Type" , sélectionnez "IU personnalisée avec un fichier swf inclut dans le fichier fla". L’autre option "IU personnalisée avec un fichier swf externe" vous permet de garder l’IU en dehors du triangle, ce qui est bon pour tester plutôt que pour le déployement. Avec ce paramètre, vous devez non seulement donner un chemin absolu vers le fichier, ce qui signifie que le composant sur une autre plate-forme devra ajuster ceci, mais également vous devez fournir les 2 fichiers.
14. Ensuite pour afficher, sélectionnez "Afficher dans l’inspecteur de propriété."
15. Sous "IU personnalisée fichier .swf ", pressez Parcourir pour localiser le fichier swf, ou Mise A Jour si vous avez déjà fait ça et que vous voulez recharger votre IU personnalisée.
16. Pour finir , pressez OK et quand vous sélectionnez le triangle sur la scène et que la fenêtre de propriétés est ouverte, vous allez voir votre IU personnalisée.
Faîtes attention à ça ! Quand vous éditez les propriétés d’un composant, vous devez voir l’IU personnalisée apparaître et marcher.
La dernière étape consiste à créer une prévisualisation temps réel pour le triangle.
Etape 12. Créer une prévisualisation temps réel pour un composant Flash MX Dans la dernière étape, nous allons expliquer comment créer une prévisualisatiuon temps réel, laquelle permet à l’utilisateur du composant de voir dans l’environnement de création à quoi va ressembler le composant lorsque l’animation est publiée. Tandis que le designer change des paramètres, ces changements sont transmis à un swf personnalisé exécuté dans l’environnement de création, et nous faisons ressembler le swf au composant et obéir à la définition des paramètres.
C’est une excellente fonctionnalité qui va rendre plus facile le placement des composants et la création des animations.
Motivation Il serait plus pratique que les utilisateurs puissent voir approximativement à quoi le triangle ressemblerait sur la scène pendant qu’ils définissent les propriétés du triangle. Cela les aidera à concevoir plus efficacement parce qu’ils ne gaspilleront plus de temps dans un cycle d’ajustement des valeurs, de test de l’animation, ajustement des valeurs , test de l’animation , etc.
Flash MX possède la particularité de prévisualisation temps réel, qui fait exactement cela. Essentiellement, vous créez un swf séparé (comme l’interface utilisateur - IU ou UI en anglais - personnalisée), et vous dîtes à Flash de l’utiliser pour afficher votre composant quand il est placé sur la scène (pendant la création). Vous feriez typiquement apparaître le swf exactement comme le composant, en fonction des valeurs des propriétés.
Le triangle sur la scène est une prévisualisation temps réel que nous avons faite.
Vue d’ensemble Avec l’interface utilisateur personnalisé, vous pouvez définir les valeurs à l’intérieur de l’objet xch pour les transférer au composant. Avec la prévisualisation, vous lisez les valeurs depuis l’objet xch. Contrairement à une interface personnalisée, vous n’avez pas à créer d’objet xch pour réaliser une prévisualisation. Toutes les fois que l’utilisateur a modifié une propriété du composant, Flash appelle une fonction que vous définissez dans la prévisualisation appelée " onUpdate ". De cette façon vous savez quand il est nécessaire de mettre à jour la prévisualisation que vous affichez. Le film de prévisualisation est conçu pour visionner préalablement des caractéristiques de base du composant, telles que la couleur et la taille, plutôt que de visionner l’animation préalablement, puisque le film fonctionne seulement à une (1) image par seconde. Ceci est conçu pour ne pas ralentir l’éxécution de FlashMX.
Donc, nous ne pouvons pas employer le même code pour la teinte que nous avons fait pour le composant réel. A la place nous fesons deux triangles, un pour la vue non teintée et un pour la vue teintée. Quand les designers veulent voir la teinte, nous appliquons la teinte, montrons le triangle teinté et cachons le triangle non-teinté. Faisons maintenant un film de prévisualisation pour le composant Triangle. Avant que nous commencions, cependant, nous devons considérer en quoi la prévisualisation sera différente du composant réel. Dans la plupart des cas, ils ne seront pas différents, et il est parfaitement acceptable d’utiliser et de contrôler une instance de votre composant dans un film de prévisualisation. Dans notre situation, quand nous utilisons le vrai composant, l’activation de la teinte ne peut pas être annulé par la suite. Dans la phase de conception, cependant, nous pouvons avoir besoin de voir à quoi le triangle quand il est teinté et quand il n’est pas teinté. Par conséquent, nous ne pouvons pas utiliser le code de teinte que nous avons fait pour le vrai composant. Au lieu de cela, nous faisons deux triangles, un pour voir le triangle non-teinté et un pour voir le triangle teinté. Quand l’utilisateur veut voir le triangle teinté, nous affichons le triangle teinté, et cachons le triangle non-teinté. Et inversement.
Le processus Suivre les étapes suivantes pour créer le film.
1 - Créez une nouvelle animation (fichier). Ajuster les dimensions de cette animation de façon à ce qu’elle soit identique à celle du composant " TRIANGLE " à savoir contenu dans un carré de 10 pixels de côté.
2 - Renommez le calque en " TRIANGLE PLEIN " et dessinez sur ce calque un triangle ayant un aspect identique au composant " TRIANGLE " ( à savoir aligné sur le bas du calque et de dimensions 10 pixels de base et 10 pixels de hauteur). Transformez alors ce dessin en clip, en lui donnant comme nom " TRIANGLE GRAPHIQUE " et donnez comme nom à son occurrence " tc ". Ce triangle va nous servir de triangle non-teinté.
3 - Créez un 2ème calque au dessus du calque " TRIANGLE PLEIN " et nommez le " TRIANGLE TEINTE ", puis copiez " tc " sur ce calque et enfin changez le nom d’occurrence de " tc " en " tctint ".
Créez un 3ème calque et renommez-le " ACTIONS ". Nous y placerons notre fonction de mise à jour " update " qui va lire les propriétés du triangle et le déformer et gérer l’effet de teinte. Placez pour cela le code suivant dans l’image 1 du calque :
// // Routine appelée lorsque les propriétés du composant changent // Le triangle est redessiné sur la base des nouvelles valeurs. Si la teinte s/b est appliquée // choix du triangle tctint sinon choix de tc. function onUpdate() var ac = _root.xch.appliquerTeinte, b = _root.xch.tbase, h = _root.xch.thauteur ;
tc._xscale = 10 * b ; tc._yscale = 10 * h ; tctint._xscale = tc._xscale ; tctint._yscale = tc._yscale ;
if (ac) tc_color.setRGB(_root.xch.tcouleur) ;
tctint._visible = ac ; tc._visible = !ac ;
// Nous conservons 2 copies du triangle, tc, pour la visualization de triangle non teinté, // et tctint, pour visualisation du triangle teinté. Par défaut le triangle teinté est caché. tctint._visible = false ; // Appliquons la couleur. tc_color = new Color(tctint) ;
5 - Arrivé à ce point il serait bon de vérifier que l’option Visualisation est bien activée. Cliquez sur le menu " Contrôle " et cochez l’option " visualisation " en bas du menu si celle-ci ne l’était pas .
6 - Enregistrez votre animation et testez-la (Contrôle + Test de l’animation). Ceci va avoir pour effet de créer un fichier swf que vous pourrez utiliser pour votre composant TRIANGLE.
7 - Il nous faut maintenant établir la liaison entre le composant TRIANGLE et l’animation visualisée. Ouvrez l’animation dans laquelle vous avez défini votre composant TRIANGLE, et ouvrez sa librairie (CTRL-L). Sélectionnez votre composant TRIANGLE, et choisissez Paramètres en cliquant sur le bouton droit de la souris (Windows) ou bien CTRL-CLICK sur MAC.
8 - Trouvez la ligne ou il est écrit " VISUALISATION en TEMPS REEL " et cochez la case située à droite. Sélectionnez la ligne " animation en temps réel avec swf intégrée au fichier ". Cette opération va établir le lien entre animation en temps réel et le composant de définition .fla. Vous pouvez cependant choisir de ne pas intégrer le swf à l’ animation en temps réel. Ceci entraîne qu’il vous faudra repréciser le chemin absolue du fichier et donc réajuster ce chemin si vous utilisez des plate formes différentes sans compter qu’il faudra également distribuer les 2 fichiers.
9 - Cliquez sur OK dans la fenêtre de définition de composant. C’est terminé, tout est prêt, vous pouvez maintenant contempler votre animation avec son composant.
La fin... Ou un commencement ? Les composants sont une des nouveautés les plus intéressantes de FLASH MX. Nous espérons que ces quelques lignes vous aurons ouvert l’appétit et vous permettrons de créer les composants de vos rêves. Bonne chance dans vos travaux.
Jonathan and David
Vous pouvez télécharger les sources en cliquant ici.
Traduction Française : équipe Flash-France.
RSS 2.0