Sujets sur : Framework AS3
Développer un player audio Flash avec Pixlib [partie 2]
Commentaires fermés sur Développer un player audio Flash avec Pixlib [partie 2]
Dans la deuxième partie de ce tutoriel vidéo, vous allez découvrir les classes importantes de Pixlib.
Cet exemple de Player Audio basé sur Pixlib regroupe quelques unes des fonctionnalités utilisées les plus souvent.
Et voici le résultat dans un swf :
|
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf |
Téléchargez le code source complet de l’exemple
Renseignez votre email pour télécharger le code source complet de l’exemple.
Les classes sont commentées pour vous aider au maximum.
Découvrir les Artistes de l’Album écouté
L’album que vous écoutez provient du site jamendo.fr.
Écoutez et téléchargez l’album Saturnine Song
Avez-vous besoin d’informations supplémentaires sur Pixlib 3 ?
Si vous avez d’autres questions sur Pixlib, posez-les dans les commentaires ci-dessous.
Je rédigerais un nouveau tutoriel pour répondre à toutes vos questions.
Découvrez Pixlib Flash Plateform Framework.
Je tiens à remercier Michael Barbero pour toutes ses explications et ses conseils avisés. Visitez son site : http://www.deja-vue.net/blog/
Développer un player audio Flash avec Pixlib [partie 1]
Dans ce tutoriel vidéo, vous allez apprendre à développer votre première application avec Pixlib.
Cet exemple de Player Audio basé sur Pixlib regroupe quelques unes des fonctionnalités utilisées les plus souvent.
Et voici le résultat dans un swf :
|
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf |
Téléchargez le code source complet de l’exemple
Renseignez votre email pour télécharger le code source complet de l’exemple.
Les classes sont commentées pour vous aider au maximum.
Découvrir les Artistes de l’Album écouté
L’album que vous écoutez provient du site jamendo.fr.
Écoutez et téléchargez l’album Saturnine Song
Et vous, avez-vous des exemples Pixlib en AS3 ?
Postez votre code AS3 dans les commentaires, je suis curieux de le découvrir !
Le tutoriel vidéo sur Pixlib étant très court, posez-vos questions s’il reste des fonctionnalités incomprises.
Découvrez Pixlib Flash Plateform Framework.
Je tiens à remercier Michael Barbero pour toutes ses explications et ses conseils avisés. Visitez son site : http://www.deja-vue.net/blog/
Rendez-vous la semaine prochaine pour la suite de ce tutoriel video Pixlib.
Les 5 bonnes raisons d’utiliser un Framework ActionScript Flash
Commentaires fermés sur Les 5 bonnes raisons d’utiliser un Framework ActionScript Flash
Tout d’abord, un framework c’est quoi ? Quel est son utilité ?
Un framework est un outil qui permet de structurer et d’architecturer un projet flash.
Il apporte également des facilités de programmation avec des fonctionnalités pré-intégrées, prêtes à être utilisées.
Les 5 bonnes raisons d’utiliser un Framework ActionScript
N°5
Un framework, digne de ce nom, impose une architecture efficace avec une approche MVC (ou IOC) , une arborescence des fichiers type et une manière de penser l’application.
N°4
Un Framework donne une organisation pour structurer correctement une application. Avec un gain de temps très important dans le développement (inutile de recoder certaines fonctionnalités). Il donne également des conventions de nommage des fichiers ainsi que des conventions de nommage du code.
N°3
Un framework fournit tout un panel d’outils pour répondre aux besoins récurrents d’un projet.
Par exemple, le Framework Pixlib intègre nativement :
- Le pattern MVC, plus particulièrement MVFC (Modèle, Vue, Front, Controller).
- Le pattern IOC (Inversion Of Control).
- Le chargement des swf, graphismes, animations, polices de caractères…
- Le chargement et le décodage des fichiers xml (structure sous forme d’objects).
- Des raccourcis de fonction, implémentation automatique des fonctionnalités récurrentes (flashvars, variables dans l’url – GET -, etc…).
- Et plein d’autres classes facilitant la vie du développeur ActionScript.
N°2
En s’appuyant sur un framework, le développeur peut se concentrer sur l’architecture de son application, l’analyse, les fonctionnalités…
Tout le reste sera géré par le framework (les chargements, organisation du code…).
La sécurité est gérée nativement, les classes de manipulation des données sont générée à la volée, l’architecture MVC est déjà prête à être utilisée…
Le framework permet donc de démarrer tout de suite. Et surtout, sans réinventer la roue à chaque fois puisque le framework fournit des outils prêts à l’emploi.
Une application qui s’appuie sur framework possède une maintenabilité et évolutivité beaucoup plus aisée. La pérénité de l’application flash est donc assurée.
N°1
Le plus grand avantage d’un framework : c’est qu’il permet à une équipe de développement de travailler facilement sur le même projet.
En effet, le framework impose une architecture bien définie donc tous les développeurs sont hébitués aux mêmes mêmes règles.
Donc ils sauront tous comment se répérer dans le projet, savoir comment il fonctionne, où ils doivent trouver tel ou tel bout de code…
Pour un prestataire professionnel, c’est d’autant plus un avantage car si son équipe travaille sur un framework donné et qu’il cherche à recruter un nouveau développeur, alors il pourra en trouver facilement sur le marché, et il sera prêt à démarrer sur les projets de l’entreprise car il connaîtra déjà le fonctionnement interne du framework.
L’utilisation d’un Framework
Utiliser un framework pour ses projets flash apporte surtout beaucoup de plaisir à développer.
En effet, il est possible de se concentrer directement sur les fonctionnalités de l’application à développer sans avoir à se soucier à redévelopper des fonctions fastidieuses comme le remoting, l’analyse xml…
Le but d’un framework, c’est aussi de pouvoir se faire plaisir en développant.
Retrouvez les frameworks que j’utilise quotidiennement dans mes développements AS3 et AS2.
Et vous, préférez-vous recoder à chaque fois l’ensemble du code de votre application ?
Ou alors, peut être utilisez-vous des frameworks personnels ?
Partagez les via les commentaires ci-dessous. J’aimerais bien les tester dans un projet flash.
Comment accélérer votre programmation ActionScript Flash ?
Dans cet article, nous allons découvrir quelques unes des stratégies utilisées pour accélérer votre développement d’applications flash.
Découverte des Frameworks ActionScript
Tout d’abord, quel est l‘utilité d’un Framework ActionScript ?
Que contient-il ? A quoi sert-il ?
Un Framework ActionScript simplifie la vie du développeur, dans le sens, où il contient des fonctionnalités prêtes à l’emploi.
C’est à dire qu’un ensemble de classes s’occupent de telle ou telle fonctionnalité. Ainsi, vous n’avez pas besoin de la recoder à chaque fois. En instanciant les classes, avec les paramètres adéquats, vous implémentez la fonctionnalité dans votre code ActionScript.
Par exemple, Google Analytics For Flash permet très simplement d’ajouter le tracking de vos visiteurs dans une application flash.
D’autres Frameworks ActionScript, beaucoup plus complets, accélère grandement le développement d’une application flash complexe.
En effet plusieurs Framework ActionScript intègrent un ou plusieurs modèles de conception afin de faciliter l’utilisation de ceux-ci dans vos projets flash.
Notamment, le Framework PureMVC qui possèdent plusieurs modèles de conception, facilement utilisable pour construire une application.
Les Frameworks ActionScript à connaitre
Plusieurs Développeurs ActionScript talentueux partagent avec la Communauté Adobe Flash leurs Frameworks. Ils utilisent quotidiennement ces Frameworks pour leurs projets flash.
Les Frameworks que je vous présentent possèdent un support très réactif et sont régulièrement mis à jour, pour :
- intégrer des nouvelles fonctionnalités.
- l’amélioration des performances.
- intégrer les « features » des nouvelles versions du Player Flash.
- implémenter les demandes des utilisateurs.
Ci-dessous, la liste des Frameworks que j’utilise en fonction des projets flash sur lesquels je suis amené à travailler.
Pixlib 3.0 Flash Plateform Framework
C’est mon framework préféré. En ce moment, j’apprends à l’utiliser pour en comprendre le fonctionnement et les subtilités.
S’il n’y avait qu’un seul framework AS3 à choisir, ce serait celui ci !
Il est très complet et développé par une équipe d’experts Adobe Flash très talentueux.
Les prochains tutoriel vidéo seront accès sur la découverte et l’utilisation des fonctionnalités de Pixlib 3.0.
Lisez l’article consacré à la présentation de Pixlib 3.0 pour en savoir plus.
PureMVC
Un framework très accessible pour les débutants. PureMVC est une implémentation du pattern Modèle Vue Contrôleur.
L’objectif du Framework PureMVC est de vous aider à séparer votre application en trois parties bien distinctess :
- le modèle.
- la vue.
- le contrôleur.
Cette séparation, ainsi que le degré et le sens de couplage employé pour les faire collaborer est indispensable pour construire et maintenir des applications évolutives.
Lisez la présentation du Framework PureMVC, accompagné d’un exemple ActionScript pour découvrir son utilisation.
Vegas AS2 / AS3
Un framework que j’ai découvert en même temps que l’AS3.
Vegas est un Framework très complet, il contient tout un panel de classes permettant de développer des applications flash très complexes. Avec ces extensions LunAS, PEGAS, KronOS, ASGard et CalistA, l’auteur Ekameleon a réalisé un travail formidable pour faciliter le développement Flash.
Le framework Vegas est compatible AS3 et AS2 !
Voici un tutoriel pour installer la dernière version de Vegas. Voici le lien direct vers le répertoire SVN de Google Code.
Ekameleon a rédigé plusieurs tutoriels pour apprendre à utiliser Vegas.
Le support en français est assuré sur le Google Group Vegas.
Voici la liste, non exhaustive, des fonctionnalités implémentées dans Vegas :
- ADT (Abstract Data Type) libraries (queue, map, collections, stack, bag, iterator, etc.)
- Gestion avancée du modèle évènementiel basé sur Dom2/3 avec l’implémentation du design pattern FrontController.
- Implémentation du pattern IoC (Inversion Of Control).
- Gestion de la localisation et des interfaces multi-langues.
- Implémentation des design pattern MVC, Visitor, Command, Observer, etc.
- Gestion avancée du debug ‘logging’.
- Des outils de dessins, couleurs, géométrie.
- Gestion avancée avec un moteur de tâches, processus, séquences, batch etc.
- Ajout d’un moteur complet de Transition (tweens, etc.)
- Des outils pour les interfaces utilisateurs.
- Gestion avancée du réseau et des outils remoting.
La documentation en ligne est très pratique pour utiliser les fonctionnalités de Vegas.
Le framework Vegas est complété de plusieurs extensions. Celles-ci peuvent s’avèrer très utiles en fonction de vos projets flash.
LunAS
L’extension LunAS est un framework intégre des composants pour construire des interfaces graphiques :
- La gestion des textes : label, input, textarea.
- Tous les types de boutons.
- Plusieurs types de container.
- Des scrollbars.
- etc…
Pour avoir une meilleurs idée des possiblités de LunAS , je vous conseille d’installer les sources LunAS via SVN. Il ya plusieurs exemples pratiques pour apprendre à utiliser cette extension.
CalistA
Cette extension contient plusieurs classes de cryptage Action Script. Attention, certaines classes sont en cours de développement dans la version AS3 (cryptage TEA).
Possiblités de cryptage offertes par CalistA :
- MD5.
- SHA1.
- TEA (en cours de portage AS3).
- Base64.
- Base8.
- LZW : compression / décompression des chaines de caractères.
Il y a également les extensions AST’r et NinjAS à découvrir.
Pixlib AS2
Pour l’AS2, Pixlib est le premier framework actionscript que j’ai découvert. Ma programmation AS2 a fait un bond en avant gigantesque grâce à l’utilisation de Pixlib.
Le framework Pixlib est conçu pour apporter à votre programmation AS2 :
- gestion des évènements poussés.
- gestion du logging.
- chargements des données de tout type.
- gestion des objets vidéos et sons.
- possibilité d’effectuer des transitions.
- gestion de la structure des données. Analyse simplifiée et rapide des fichiers XML.
- implémentation de plusieurs Design Pattern (Model View Controler, Singleton, Observer…).
La mailing-list contient une mine d’informations pour apprendre à utiliser ce framework.
Vous pouvez télécharger la dernière version de Pixlib AS2 sur le répertoire SVN. Note : le répertoire SVN étant hors service, j’ai rajouté en téléchargement Pixlib version AS2 ci-dessous.
Télécharger “Pixlib version AS2”
Pixlib-AS2.zip – Téléchargé 677 fois – 480,57 KoLa documentation de l’ensemble des classes est disponible sur le site Geturl.
Le site Geturl contient également plusieurs tutoriels très utiles pour appréhender les subtilités de Pixlib. Et un autre tutoriel qui permet de comprendre les bases du framework Pixlib.
PixIoC AS2
Vous serez surement intéressés par PixIoC qui est une extension de Pixlib AS2.
Cette extension est basée sur le design pattern Inversion Of Control. Elle permet de construire votre application à partir d’un fichier xml. Ce fichier xml contient les classes à instancier, les méthodes à utiliser… tout pour créer votre application flash.
Vous pouvez télécharger la dernière version de PixIoC.
Conclusion
Je vous encourage vivement à prendre le temps d’apprendre à utiliser ces Frameworks ActionScript. Votre programmation flash s’en ressentira. Et vous serez plus à même de concevoir des projets flash de plus en plus robustes et évolutifs.
Pour vous aider, je vais publier des tutoriels en vidéos accompagnés d’exemples d’implémentation pour chacun de ces frameworks.
Et vous, quel est le framework que vous utilisez le plus en souvent en AS3, AS2 ?
En AS2, j’utilise Pixlib et en AS3 Vegas et depuis peu Pixlib 3.0.
Sur quel framework souhaitez-vous des tutoriels en priorité ?
Dites moi cela via les commentaires ci-dessous. Merci.
Pixlib 3.0 Flash Platform Framework
Qu’est ce donc Pixlib 3.0 ?
Présentation du Framework Pixlib 3.0
C’est un framework ActionScript 3 pour Flash Player 10 très très performant. Pixlib permet de concevoir des applications flash avec des outils très pratiques.
Etant un fervent utilisateur de Pixlib pour AS2, je vous conseille fortement d’apprendre à utiliser Pixlib 3.0.
Cette version dispose d’une nouvelle architecture / noyau. Elle fonctionne avec un système d’extensions.
Et elle est plus rapide et robuste ainsi que complètement documentée !
Romain Ecarnot a repris les rênes du projet Pixlib pour vous proposer cette nouvelle version.
Sur le site officiel, vous pourrez télécharger :
- le framework complet et des extensiosns.
- son code source.
- accéder à la Team Pixlib pour un support.
- des tutoriels.
- et consulter la documentation.
Fonctionnalités du Framework Pixlib 3.0
- MVC+FC, PixLib est basée sur le pattern Model View Controler avec un FrontController.
- Logging, Les logs / debug de vos projets pourront s’interfacer avec la plupart des sytèmes de logging (avec l’extensiob PixLogger).
- Abstraction et couplage faible permettant d’avoir une base générique et d’implémenter par la suite des comportements très concrets (par exemple pour le remoting avec le package net.pixlib.services et son extension PixService).
- L’utilisation de Command, soit au sein d’un MVC, soit dans un cadre plus générique, avec des séquenceurs ou autres managers.
- Une Loading API permettant de charger tout type d’élément avec une abstraction totale.
- La gestion du pattern IOC avec l’extension PixIOC.
Conclusion
La Team Pixlib propose des services de consulting, formations et développement.
De mon côté, je m’attaque à la programmation AS3 en utilisant ce fabuleux Framework Pixlib 3.0.
Dans quelques temps, je vous présenterais mes applications conçues avec Pixlib. Et également accompagnées de tutoriels vidéos.
Et vous, que pensez-vous de Pixlib 3.0?
Est ce que vous l’utilisez pour la création de vos projets flash ?
Ou utilisez vous un autre framework ? Lequel ?
Sinon, le votre, fait maison ?
Comment utiliser PureMVC avec Flash / ActionScript ?
Dans ce tutoriel vidéo, je vous explique comment créer des applications Flash robustes et évolutives.
Nous allons découvrir ensemble l’utilisation du Framework PureMVC pour développer en ActionScript plus simplement et efficacement « sans prise de tête ».
Voici les liens dont je parle dans la vidéo :
- Le Framework PureMVC
- L’Éditeur ActionScript très performant qui simplifie le développement Flash : FDT pour Flash Developer Tools.
- Téléchargez le mode d’emploi détaillé pour apprendre à utiliser FDT.
- L’Éditeur ActionScript FlashDevelop.
- L’Éditeur ActionScript SEPY.
Exemple avec PureMVC et le Framework AS3 Facile
|
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/01/puremvc_exemple.swf |
Téléchargement du code source ActionScript
Vous trouverez ci-dessous un exemple complet et commenté en ActionScript. Cette application Flash utilise le Framework PureMVC et le Framework de Composants AS3 Facile.
Télécharger “Application Flash PureMVC / AS3 Facile”
puremvc_framework_actionscript-facile.zip – Téléchargé 937 fois – 127,65 KoEt vous, quel Framework ActionScript utilisez-vous pour faciliter votre programmation d’applications Flash ?
Dites-moi le nom de votre Framework préféré juste en dessous.
Il existe par exemple les Frameworks : Vegas, GAIA Framework, Spring, Lowra, PalmER…
Comment Personnaliser les Graphismes des Composants AS3 Facile ?
Ce tutoriel vous explique 2 fonctionnalités intéressantes du Framework de Composants AS3 Facile :
- La création des skins / graphismes des composants AS3 Facile.
- Le changement de skin / graphisme « en live » pendant l’exécution de l’application Flash.
I – Conception du Graphisme d’un Composant AS3
Comme nous l’avons étudié dans le Chapitre 3 – Les fonctionnalités d’une Bibliothèque de Composants AS3, chaque composant est personnalisable graphiquement.
Pour personnaliser un composant, il y a 2 étapes :
- Créer la classe de Skin pour le composant.
- Créer les graphismes dans un fichier fla (MoviesClip, images, dessin vectoriel…).
Création des classes Skins
La 1ère étape est la création de la classe de Skin pour le composant choisi.
Cette classe de « graphisme » étend la classe Skin du Framework AS3 Facile. Elle contient également la configuration des graphismes du fla qui seront utilisés. Appelons là DefaultComponentSkin.as.
Pour chaque élément du composant, nous créons une classe graphique (1 movieclip ou 1 sprite par exemple). Chaque graphismes du fla correspond à un élément du composant.
Le graphisme de l’élément est ensuite associé à une constante de la classe du composant.
Tous les composants possèdent des constantes de Skin.
Ci dessous, un exemple illustrant mes explications.
Pour le composant Button, dans le code source de cette classe, il y a 3 constantes :
[codesyntax lang= »actionscript3″ title= »Button.as » bookmarkname= »Button.as »]
|
1 2 3 |
static public const BUTTON_UP_SKIN:String = "BUTTON_UP_SKIN"; static public const BUTTON_DOWN_SKIN:String = "BUTTON_DOWN_SKIN"; static public const BUTTON_OVER_SKIN:String = "BUTTON_OVER_SKIN"; |
[/codesyntax]
Le composant ComboBox possède des constantes supplémentaires, il est beaucoup plus complet.
[codesyntax lang= »actionscript3″ title= »ComboBox.as » bookmarkname= »ComboBox.as »]
|
1 2 3 4 5 6 7 8 9 10 |
/** * On définit les constantes de skin */ public static const COMBOBOX_BUTTON_OVER_SKIN:String = 'COMBOBOX_BUTTON_OVER_SKIN'; public static const COMBOBOX_BUTTON_UP_SKIN:String = 'COMBOBOX_BUTTON_UP_SKIN'; public static const COMBOBOX_BUTTON_DOWN_SKIN:String = 'COMBOBOX_BUTTON_DOWN_SKIN'; public static const COMBOBOX_ELEMENT_OVER_SKIN:String = 'COMBOBOX_ELEMENT_OVER_SKIN'; public static const COMBOBOX_ELEMENT_UP_SKIN:String = 'COMBOBOX_ELEMENT_UP_SKIN'; public static const COMBOBOX_ELEMENT_DOWN_SKIN:String = 'COMBOBOX_ELEMENT_DOWN_SKIN'; |
[/codesyntax]
Puis, dans la classe DefaultComponentSkin.as, il suffit d’affecter chaque constante du composant à l’élément graphique du fla.
Voici 2 exemples de Skin différents pour le composant Button :
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
package com.as3facileexemple.skin.classic { // Import des classes gérant la partie graphique du composant dans le fla (movieclip) // Provient de ui.swc (créé avec la compilation de UI.fla) import com.as3facile.skin.button.ButtonDownSkin; import com.as3facile.skin.button.ButtonOverSkin; import com.as3facile.skin.button.ButtonUpSkin; import com.actionscriptfacile.skin.Skin; import com.actionscriptfacile.ui.button.Button; /** * Définition du skin utilisé pour un composant Button * * @author Matthieu */ public class DefaultButtonSkin extends Skin { public function DefaultButtonSkin() { // Affectation de chaque élément du bouton à un skin setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin );// élément du bouton, classe graphique (movieclip) associée setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin ); setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin2.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultButtonSkin2.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
package com.as3facileexemple.skin.classic { // Import des classes gérant la partie graphique du composant dans le fla (movieclip) // Provient de ui.swc (créé avec la compilation de UI.fla) import com.as3facile.skin.button.ButtonDownSkin2; import com.as3facile.skin.button.ButtonOverSkin2; import com.as3facile.skin.button.ButtonUpSkin2; import com.actionscriptfacile.skin.Skin; import com.actionscriptfacile.ui.button.Button; /** * Définition du skin utilisé pour un composant Button * * @author Matthieu */ public class DefaultButtonSkin2 extends Skin { public function DefaultButtonSkin2() { // Affectation de chaque élément du bouton à un skin setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin2 );// élément du bouton, classe graphique (movieclip) associée setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin2 ); setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin2 ); } } } |
[/codesyntax]
En fonction de l’interface de votre application flash, il est tout à fait possible d’utiliser la même classe DefaultComponentSkin.as pour la création de plusieurs intances du composant Button sur la scène. Cela signifie que tous les Button de votre application Flash possèderont un graphisme identique.
Ou vous pouvez affecter une classe de Skin différente pour chaque instance de votre composant Button sur la scène. Dans ce cas, chaque Button de votre application flash aura un rendu graphique complètement différent.
La classe DefaultComponentSkin.as est plus ou moins importante suivant le composant utilisé.
Ci-dessous un exemple de Skin pour le composant ComboBox (composée d’une Scrollbar et d’une List).
[codesyntax lang= »actionscript3″ title= »DefaultComboBoxSkin.as » bookmarkname= »DefaultComboBoxSkin.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
package com.as3facileexemple.skin.classic { import com.actionscriptfacile.ui.scroll.components.ScrollDownButton; import com.actionscriptfacile.ui.scroll.components.ScrollUpButton; import com.actionscriptfacile.ui.scroll.components.ScrollerButton; import com.actionscriptfacile.skin.Skin; import com.actionscriptfacile.ui.combo.ComboBox; import com.actionscriptfacile.ui.list.List; import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar; // Import des classes gérant la partie graphique du composant dans le fla (movieclip) // Provient de ui.swc (créé avec la compilation de UI.fla) import com.as3facile.skin.combo.ComboBoxButtonDownSkin; import com.as3facile.skin.combo.ComboBoxButtonOverSkin; import com.as3facile.skin.combo.ComboBoxButtonSkin; import com.as3facile.skin.combo.ComboBoxElementDownSkin; import com.as3facile.skin.combo.ComboBoxElementOverSkin; import com.as3facile.skin.combo.ComboBoxElementSkin; import com.as3facile.skin.list.ListBackgroundSkin; import com.as3facile.skin.scroll.ScrollBarBackgroundSkin; import com.as3facile.skin.scroll.ScrollBottomButtonSkin; import com.as3facile.skin.scroll.ScrollUpButtonSkin; import com.as3facile.skin.scroll.ScrollerButtonSkin; import com.as3facile.skin.scroll.ScrollerButtonDownSkin; import com.as3facile.skin.scroll.ScrollerButtonOverSkin; import com.as3facile.skin.scroll.ScrollUpButtonDownSkin; import com.as3facile.skin.scroll.ScrollUpButtonOverSkin; import com.as3facile.skin.scroll.ScrollBottomButtonDownSkin; import com.as3facile.skin.scroll.ScrollBottomButtonOverSkin; /** * Définition du skin utilisé pour un composant ComboBox * * @author Matthieu */ public class DefaultComboBoxSkin extends Skin { public function DefaultComboBoxSkin() { setSkin( ComboBox.COMBOBOX_BUTTON_DOWN_SKIN , ComboBoxButtonDownSkin ); setSkin( ComboBox.COMBOBOX_BUTTON_OVER_SKIN, ComboBoxButtonOverSkin ); setSkin( ComboBox.COMBOBOX_BUTTON_UP_SKIN , ComboBoxButtonSkin ); setSkin( ComboBox.COMBOBOX_ELEMENT_DOWN_SKIN , ComboBoxElementDownSkin ); setSkin( ComboBox.COMBOBOX_ELEMENT_OVER_SKIN, ComboBoxElementOverSkin ); setSkin( ComboBox.COMBOBOX_ELEMENT_UP_SKIN , ComboBoxElementSkin ); setSkin( List.LIST_BACKGROUND_SKIN, ListBackgroundSkin ); // background setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin ); //scroller setSkin( ScrollerButton.SCROLLER_VERTICAL_DOWN_SKIN, ScrollerButtonDownSkin ); setSkin( ScrollerButton.SCROLLER_VERTICAL_OVER_SKIN, ScrollerButtonOverSkin ); setSkin( ScrollerButton.SCROLLER_VERTICAL_UP_SKIN, ScrollerButtonSkin ); // scroll up setSkin( ScrollUpButton.SCROLLUP_VERTICAL_DOWN_SKIN, ScrollUpButtonDownSkin ); setSkin( ScrollUpButton.SCROLLUP_VERTICAL_OVER_SKIN, ScrollUpButtonOverSkin ); setSkin( ScrollUpButton.SCROLLUP_VERTICAL_UP_SKIN, ScrollUpButtonSkin ); // scroll down setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_DOWN_SKIN, ScrollBottomButtonDownSkin ); setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_OVER_SKIN, ScrollBottomButtonOverSkin ); setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_UP_SKIN, ScrollBottomButtonSkin ); } } } |
[/codesyntax]
Création des graphismes
En fonction du composant (Button, List, ComboBox), vous devez créer un fichier fla avec un ou plusieurs éléments graphiques (sprite, MovieClip, images et / ou animation).
Pour connaitre le nom des classes / MovieClip à créer pour le composant sélectionné, il suffit de regarder la classe DefaultComponentSkin.as que vous venez juste de créer. Elle contient les noms des classes MovieClip du fla.
Par exemple, la création des éléments graphiques du fla du composant ScrollBar implique d’utiliser les noms suivants:
- ScrollBarBackgroundSkin
- ScrollerButtonDownSkin
- ScrollerButtonOverSkin
- ScrollerButtonSkin
- ScrollUpButtonDownSkin
- ScrollUpButtonOverSkin
- ScrollUpButtonSkin
- ScrollBottomButtonDownSkin
- ScrollBottomButtonOverSkin
- ScrollBottomButtonSkin
Effectivement, la classe DefaultVerticalScrollbarSkin.as associe les noms ci-dessus aux constantes de la classe VerticalScrollBar.
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
package com.as3facileexemple.skin.classic { import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar; import com.actionscriptfacile.ui.scroll.components.ScrollDownButton; import com.actionscriptfacile.ui.scroll.components.ScrollUpButton; import com.actionscriptfacile.ui.scroll.components.ScrollerButton; import com.actionscriptfacile.skin.Skin; // Import des classes gérant la partie graphique du composant dans le fla (movieclip) // Provient de ui.swc (créé avec la compilation de UI.fla) import com.as3facile.skin.scroll.ScrollBarBackgroundSkin; import com.as3facile.skin.scroll.ScrollBottomButtonSkin; import com.as3facile.skin.scroll.ScrollUpButtonSkin; import com.as3facile.skin.scroll.ScrollerButtonSkin; import com.as3facile.skin.scroll.ScrollerButtonDownSkin; import com.as3facile.skin.scroll.ScrollerButtonOverSkin; import com.as3facile.skin.scroll.ScrollUpButtonDownSkin; import com.as3facile.skin.scroll.ScrollUpButtonOverSkin; import com.as3facile.skin.scroll.ScrollBottomButtonDownSkin; import com.as3facile.skin.scroll.ScrollBottomButtonOverSkin; /** * Définition du skin utilisé pour un composant VerticalScrollBar * * @author Matthieu */ public class DefaultVerticalScrollBarSkin extends Skin { public function DefaultVerticalScrollBarSkin() { // background setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin ); //scroller setSkin( ScrollerButton.SCROLLER_VERTICAL_DOWN_SKIN, ScrollerButtonDownSkin ); setSkin( ScrollerButton.SCROLLER_VERTICAL_OVER_SKIN, ScrollerButtonOverSkin ); setSkin( ScrollerButton.SCROLLER_VERTICAL_UP_SKIN, ScrollerButtonSkin ); // scroll up setSkin( ScrollUpButton.SCROLLUP_VERTICAL_DOWN_SKIN, ScrollUpButtonDownSkin ); setSkin( ScrollUpButton.SCROLLUP_VERTICAL_OVER_SKIN, ScrollUpButtonOverSkin ); setSkin( ScrollUpButton.SCROLLUP_VERTICAL_UP_SKIN, ScrollUpButtonSkin ); // scroll down setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_DOWN_SKIN, ScrollBottomButtonDownSkin ); setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_OVER_SKIN, ScrollBottomButtonOverSkin ); setSkin( ScrollDownButton.SCROLLDOWN_VERTICAL_UP_SKIN, ScrollBottomButtonSkin ); } } } |
[/codesyntax]
Ensuite, il vous reste à créer le fla avec les classes correspondantes.
Par exemple, pour créer le Skin du composant Button, il est nécessaire de créer 3 MovieClip (ou sprite) différents. 1 MovieClip par état du bouton (survolé, appuyé, normal).
Pensez-bien à paramétrer les propriétés de chacun des MovieClip :
- Cochez la case Export For ActionScript
- Cochez la case Export in frame 1
- La Class : permet d’utiliser le graphisme du composant dans votre code AS3. C’est le nom de votre classe (associée à la constante du composante) utilisée dans la classe qui étend Skin.as, dans cet article : DefaultComponentSkin.as.
- La Base Class : permet de définir les propriétés de votre graphisme / composant disponible pour votre code AS3. Cela peut être Sprite ou MovieClip par exemple.
Une copie d’écran pour illustrer mes explications :
Propriétés des Sprite dans Adobe Flash
Les graphismes définis dans le fla sont très basiques. Libre à vous d’insérer des images, des animations, des dessins vestoriels plus créatifs et recherchés.
Il y a énormément de possibilités pour personnaliser les composants du Framework Actionscript-Facile. Vous pouvez utiliser des images png, jpg, des animations, des dessins vectoriels…
Le principe des créations des skins est identique pour chacun des composants. Il y a plus ou moins de MovieClip à créer suivant les états graphiques possibles du composant.
Ensuite, une fois le fla créé, vous pouvez l’exporter soit au format swc ou au format swf. C’est en fonction de la maniète dont vous souhaitez utiliser les MovieClip avec votre code AS3.
Pour cet exemple, nous allons exporter le fla au format swc pour intégrer directement les classes graphiques avec l’éditeur AS3 de notre choix.
Pour développer simplement en ActionScript, je vous conseille l’Éditeur FDT PowerFlasher : l’essayer, c’est l’adopter.
II – Utilisation des Composants
Tous les composants du Framework ActionScript-Facile s’utilisent de la même façon.
Ils possèdent tous des fonctionnalités identiques :
- personnalisation graphiques de chaque éléments du composant ActionScript.
- possibilité de l’afficher ou non dans la DisplayList.
- interaction possible du composant avec l’utilisateur.
La 1ère étape consiste à créer une nouvelle instance de notre composant. Par exemple pour un Button, il sufffit d’écrire le code suivant :
[codesyntax lang= »actionscript3″ title= »Button.as » bookmarkname= »Button.as »]
|
1 |
var button:Button = new Button(); |
[/codesyntax]
2ème étape : en fonction du composant utilisé, vous définissez ses paramètres propres. Ci dessous, la création d’un composant Button et d’une liste.
[codesyntax lang= »actionscript3″ title= »List.as » bookmarkname= »List.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// création un objet de type Button var button:Button = new Button(); // définition du texte button.label = 'Button Component'; // création d'une liste var list:List = new List(); // définition de la taille de la List list.resize( 230, 150 ); // ajout de plusieurs éléments dans la liste for ( var i:int = 0; i < 35; i++ ) { list.addElement( getListElement(i+1) ); } |
[/codesyntax]
La 3ème étape consiste à affecter à notre composant le skin que nous lui avons conçu.
Un simple button.applySkin( new DefaultButtonSkin() ); met à jour le graphisme de notre composant.
Ou list.applySkin( new DefaultListSkin() ); pour le composant List.
En route pour la 4ème étape!
Il nous reste à positionner notre composant sur la scène et à l’afficher. Bien évidemment, il est possible de paramétrer les options de notre composant : modifier sa taille, le style de son texte…
[codesyntax lang= »actionscript3″ title= »Exemple.as » bookmarkname= »Exemple.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// ajout à la displaylsit addChild( button ); // définition de sa taille en 150 * 30 pixels button.resize( 150, 30 ); // définition de la position du button sur la scène button.x = 60; button.y = 60; button.labelField.alignCenter(); // centre le texte button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte // détermination de la position de la List list.x = 30; list.y = 30; // affichage - ajout à la displaylist addChild( list ); // ajout des marges au contenu de la liste list.margins = new UIMargins( 5, 5, 5, 5 ) |
[/codesyntax]
La 5ème et dernière étape est plus ou moins compliquée en fonction de l’application flash que vous crééz.
Vous avez la possibilité d’écouter les actions de l’utilisateur.
En fonction des intéractions de l’utilisateur, votre application flash peut :
- afficher / masquer telle ou telle partie de l’interface,
- modifier le titre d’un élément
- inviter l’utilisateur à effectuer une action dans votre application
- etc…
Ci-dessous le code source complet d’utilisation des composants que nous venons de créer.
[codesyntax lang= »actionscript3″ title= »DeveloppezExample.as » bookmarkname= »DeveloppezExample.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 |
package { import flash.events.MouseEvent; import flash.display.Shape; import flash.display.Sprite; import flash.events.Event; import flash.text.Font; import com.as3facileexemple.skin.classic.DefaultListSkin; import com.as3facileexemple.skin.classic.DefaultButtonSkin; import com.as3facileexemple.skin.classic.DefaultButtonSkin2; import com.as3facileexemple.skin.classic.DefaultListSkin2; import com.as3facileexemple.skin.classic.DefaultComboBoxSkin; import com.actionscriptfacile.ui.button.Button; import com.actionscriptfacile.ui.list.List; import com.actionscriptfacile.ui.utils.UIMargins; import com.actionscriptfacile.ui.combo.element.ComboBoxElement; import com.actionscriptfacile.ui.combo.ComboBox; import com.actionscriptfacile.ui.text.UITextField; /** * Exemple d'utilisation du Framework de composants AS3 ActionScript-Facile * * @author Matthieu */ public class DeveloppezExample extends Sprite { protected var m_comboFonts:ComboBox; protected var m_list:List; protected var m_textField:UITextField; public function DeveloppezExample() { /** * On construit les boutons */ var buttonHide:Button = new Button(); // définition du texte buttonHide.label = 'Arc en Ciel Liste'; // Application de la skin par défaut // [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ] buttonHide.applySkin( new DefaultButtonSkin() ); // on écoute les changements qui interviennent sur le bouton buttonHide.addEventListener(MouseEvent.CLICK, changeSkinList ); // ajout à la displaylist addChild( buttonHide ); // définition de sa taille en 150 * 30 pixels buttonHide.resize( 150, 30 ); // définition de la position du button sur la scène buttonHide.x = 10; buttonHide.y = 220; // acccès au composant de type UITextField (labelField) buttonHide.labelField.alignCenter(); // centre le texte buttonHide.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte buttonHide.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonHide.labelField.changeFormat("font", "Arial");// changement de la police du texte var buttonShow:Button = new Button(); // définition du texte buttonShow.label = 'Classique Liste'; // Application de la skin par défaut // [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ] buttonShow.applySkin( new DefaultButtonSkin2() ); // on écoute les changements qui interviennent sur le bouton buttonShow.addEventListener(MouseEvent.CLICK, changeSkinList2 ); // ajout à la displaylist addChild( buttonShow ); // définition de sa taille en 150 * 30 pixels buttonShow.resize( 150, 30 ); // définition de la position du button sur la scène buttonShow.x = buttonHide.x; buttonShow.y = buttonHide.y + buttonShow.height + 10; // acccès au composant de type UITextField (labelField) buttonShow.labelField.alignCenter(); // centre le texte buttonShow.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte buttonShow.labelField.changeFormat("size", 14);// changement de la taille de la police du texte buttonShow.labelField.changeFormat("font", "Arial");// changement de la police du texte /** * On construit la liste */ m_list = new List(); // Application de la skin par défaut // [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ] m_list.applySkin( new DefaultListSkin2() ); // définition de la taille de la List m_list.resize( 230, 150 ); // ajout de plusieurs éléments dans la liste for ( var i:int = 0; i < 35; i++ ) { m_list.addElement( getListElement(i+1) ); } // détermination de la position de la List m_list.x = 200; m_list.y = buttonHide.y; // ajout des marges au contenu de la liste m_list.margins = new UIMargins( 5, 10, 5, 5 ); // affichage - ajout à la displaylist addChild( m_list ); /** * On construit la combobox */ m_comboFonts = new ComboBox(); m_comboFonts.applySkin( new DefaultComboBoxSkin() ); // on écoute les changements qui interviennent dans la combobox m_comboFonts.addEventListener(Event.CHANGE, changeHandler ); m_comboFonts.resize( 300, 70 ); m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste /** * Définition du format du Titre de la ComboBox. * * Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre Titre */ m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true); m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true); m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true); m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true); m_comboFonts.currentElement.labelField.alignCenter(); // on ajoute tous les noms de polices autorisées comme élément de la combobox var fonts:Array = Font.enumerateFonts( true ); var boxElement:ComboBoxElement; for each ( var font:Font in fonts ) { boxElement = m_comboFonts.addElement( font.fontName, font.fontName ); boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte } /** * On construit un UITextField */ m_textField = new UITextField(); m_textField.text = 'Développez avec fun :)'; m_textField.x = m_textField.y = 5; m_textField.width = m_textField.maxWidth = 390; m_textField.height = m_textField.maxHeight = 30; m_textField.changeFormat("size", 20);// changement de la taille de la police du texte m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur m_comboFonts.y = m_textField.y + m_textField.height; m_comboFonts.x = 20; addChild( m_comboFonts ); addChild( m_textField ); } /** * Fonction servant à écouter le changement de police au sein de la combobox. * On applique la police à l'UITextField que l'on a crée et placé sur la * scène. * * @param e Evenement de type MouseEvent.CLICK */ private function changeHandler(e:Event):void { m_textField.font = m_comboFonts.currentLabel; m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur } /** * Fonction servant à écouter les click de l'utilisateur sur le buttonHide. * On modifie le Skin de La List. * * @param e Evenement de type MouseEvent.CLICK */ private function changeSkinList(e:MouseEvent) : void { m_list.applySkin(new DefaultListSkin() ); } /** * Fonction servant à écouter les click de l'utilisateur sur le buttonHide. * On modifie le Skin de La List. * * @param e Evenement de type MouseEvent.CLICK */ private function changeSkinList2(e:MouseEvent) : void { m_list.applySkin(new DefaultListSkin2() ); } /** * Création des éléments du composant List */ private function getListElement(id:Number):Sprite { // création de l'élément var oElement:Sprite = new Sprite(); // ajout d'un fond avec une couleur aléatoire var shp:Shape = new Shape(); var color:int = Math.random() * 0X00FFFFFF; shp.graphics.beginFill( color ); shp.graphics.drawRect( 0, 0, 200, 30 ); shp.graphics.endFill(); // ajout d'un texte var oTxt:UITextField = new UITextField(); // définition de la taille du texte oTxt.height = oTxt.maxHeight = 25; oTxt.width = oTxt.maxWidth = 195; oTxt.text = "Élément "+id; oTxt.selectable = false; oTxt.changeFormat("color", 0xffffff);// changement de la couleur du texte oTxt.changeFormat("size", 14);// changement de la taille de la police du texte oTxt.changeFormat("font", "Arial");// changement de la police du texte oTxt.alignCenter(); oTxt.background = false; oTxt.backgroundColor = 0xff33ff; // ajout à la displaylist (le fond et le texte) de l'élément oElement.addChild(shp); oElement.addChild(oTxt); return oElement; } } } |
[/codesyntax]
III – Conclusion
Nous venons donc de découvrir la création de Skin / graphismes pour les composants AS3 Facile.
L’application Flash ci-dessous montre une démonstration du changement de graphisme en live.
|
1 |
http://bonus.actionscript-facile.com/wp-content/uploads/2011/10/developpez_exemple.swf |
Évolutions des fonctionnalités
C’est à vous de créer des applications totalement réutilisables pour vos différents sites.
Par exemple, vous concevez un livre d’or avec des graphismes s’accordant à la charte du site de votre client.
Vous pouvez réutiliser la même application, juste en modifiant totalement le graphisme des composants pour votre nouveau client. Le fichier application.swf reste identique.
Et avec le chargement des bibliothèques partagées (avec des graphismes stockés dans swf externes), vous n’avez même plus besoin de recompiler votre application Flash !
C’est génial, le temps que vous pouvez gagner pour vous concentrer sur le visuel, les besoins en terme d’image pour vos clients.
Sources commentées
- DeveloppezExample.as
- com.actionscriptfacile.ui.button.Button.as
- com.actionscriptfacile.ui.list.List.as
- com.actionscriptfacile.ui.utils.UIMargins.as
- com.actionscriptfacile.ui.combo.element.ComboBoxElement.as
- com.actionscriptfacile.ui.combo.ComboBox.as
- com.actionscriptfacile.ui.text.UITextField.as
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.
Vous pouvez télécharger le fichier zip :
Télécharger “Changement de Skin en live”
Une question : quels Graphismes avez-vous créés pour les Composants AS3 Facile ?
Postez-vos exemples dans les commentaires ci-dessous.
Je mettrais en téléchargement (avec un lien vers votre site) les graphismes les plus sympathiques.
Je serais ravi de voir vos applications, postez les avec vos commentaires ci -dessous 🙂
Création d’un Mini Flex avec les Composants AS3 Facile
Et voici un article Bonus qui montre une autre facette du Framework AS3 Facile!
La création d’une Application avec les Composants AS3 Facile. Cet exemple Flash utilise un fichier xml pour la construction des Composants ActionScript.
I – CDCF et CDCT
Pour une fois, nous allons déroger à la règle.
En effet, cette fois-ci il n’y aura aucun cahier des charges techniques ni de cahier des charges fonctionnels.
Pourquoi me direz-vous ?
Eh bien tout simplement parce que nous n’allons pas développer une application flash destinée à être utilisé telle quelle en production.
Le contexte d’apprentissage de cet article est plus du domaine de la Recherche & Développement.
La fameuse R&D!
II – Mini Flex
Place à la pratique, au code !
Nous allons concevoir un mini Flex.
C’est à dire que nous allons coder une classe de document. Cette classe va nous permettre de créer des interfaces, à l’aide d’un fichier XML chargé dynamiquement.
Cela consiste à développer un parseur qui :
- Va analyser notre XML de configuration.
- En déduire ce qu’il doit créer et comment.
Le code en lui-même reste simple, je vous laisse donc le découvrir.
Sachez cependant qu’il est loin d’être terminé.
En effet, seul le composant Button est implémenté.
Je vous encourage vivement à continuer, en implémentant tous les composants que nous avons développés précédemment.
Debug dans Flash avec Firefox / Google Chrome
Vous remarquerez sans doute que j’ai ajouté dans la classe MiniFlexExample.as un système de debug d’application.
Cet ensemble de classes fonctionne avec Firefox pour effectuer un affichage – debug (ou trace) de votre application en ligne.
Cette fonctionnalité est indispensable pour les RIA Flash 🙂
Il vous suffit de :
- installer l’extension Firebug sous Firefox ou GoogleChrome.
- de télécharger Flash Thunderbolt : Logging ActionScript projects using Firebug within Firefox!
Ensuite dans votre code ActionScript, vous n’avez plus qu’à utiliser la syntaxe suivante pour afficher le message, les variables que vous souhaitez.
[codesyntax lang= »actionscript3″ title= »ThunderBolt’s Logger.as » bookmarkname= »ThunderBolt’s Logger.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import org.osflash.thunderbolt.Logger; var myNumber: int = 5; var myString: String = "Lorem ipsum"; Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString); // some log objects var myNumber: int = 5; var myString: String = "Lorem ipsum"; // INFO log level Logger.info ("Just an info message"); // DEBUG log level Logger.debug ("A debug log ", myString); // WARN log level Logger.warn ("A warn message", myNumber); // ERROR log level Logger.error ("An error log ", myString); |
[/codesyntax]
Conclusion
Voilà, cette fois-ci tout est fini !
Notre mini application Flex en action :
|
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/miniflex_exemple.swf |
Évolutions des fonctionnalités
Je vous propose de continuer à développer ce mini-flex pour :
- intégrer les autres composants d’ActionScript-Facile.
- ajouter des fonctionnalités propres à vos besoins.
- l’utiliser comme modèle pour créer vos applications. Évidemment, il est nécessaire, voir indispensable, de concevoir une analyse beaucoup plus complète et structurée.
Le début de la programmation AS3 Facile
Ne perdez pas de vue que ce n’est que le début.
En effet, notre librairie est loin d’être complète, je vous encourage vivement à l’enrichir et à l’améliorer.
J’ai pris beaucoup de plaisir à être votre guide tout au long de ces 10 articles et j’espère que leur lecture vous aura aidé.
Sources commentées
- MiniFlexExample.as
- bin/interface.xml
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.
Vous pouvez télécharger le fichier zip :
Télécharger “Mini Flex Framework AS3 Facile”
Comment utilisez-vous les Composants AS3 Facile ?
Je serais ravi de consulter les Applications Flash que vous avez développés avec le Framework AS3 Facile.
Postez-les dans les commentaires juste en dessous, je les rajouterais prochainement dans un article!
[codesyntax lang= »actionscript3″ title= »MiniFlexExample.as » bookmarkname= »MiniFlexExample.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
package { import flash.events.MouseEvent; import com.actionscriptfacile.skin.ISkin; import flash.utils.getDefinitionByName; import org.osflash.thunderbolt.Logger; import com.as3facileexemple.skin.classic.DefaultButtonSkin; import com.as3facileexemple.skin.classic.DefaultButtonSkin2; import com.actionscriptfacile.ui.button.Button; import com.actionscriptfacile.ui.UIComponent; import flash.display.Sprite; import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField; import flash.utils.Dictionary; /** * Exemple de Mini Flex avec les composants graphiques ActionScript-Facile. * * @author Matthieu */ public class MiniFlexExample extends Sprite { private var m_correspTable:Dictionary;// création d'une table de correspondance. /* * Permet de forcer l'inclusion des classes de Skin Button dans le swf */ public static var linkages:Array = [DefaultButtonSkin, DefaultButtonSkin2, MouseEvent.CLICK]; public function MiniFlexExample() { Logger.debug ("info a="+Math.random()*28); // debug de l'application avec l'extension firefox Firebug // chargement le fichier XML var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE, completeHandler ); loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler ); var file:URLRequest = new URLRequest('interface.xml?a='+Math.random()*28); loader.load(file ); } private function errorHandler(e:IOErrorEvent):void { // gestion des erreurs var loader:URLLoader = e.target as URLLoader; loader.removeEventListener(Event.COMPLETE, completeHandler ); loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler ); var text:TextField = addChild( new TextField() ) as TextField; text.width = stage.stageWidth; text.autoSize = 'center'; text.text = "Erreur : "+e.text; } private function completeHandler(e:Event):void { // récupération des données puis transmission de celles-ci à la méthode parseInterface var loader:URLLoader = e.target as URLLoader; loader.removeEventListener(Event.COMPLETE, completeHandler ); loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler ); parseInterface( new XML( loader.data ) ); } /** * Analyse du fichier xml et construction de l'interface. * */ private function parseInterface( p_interface:XML ):void { // on référence le composant button dans la table de correspondance m_correspTable = new Dictionary(); m_correspTable['button'] = buildButton;// appel automatique de la méthode de construction d'un Button var component:UIComponent; var func:Function; XML.ignoreComments = true; XML.ignoreWhitespace = true; XML.ignoreProcessingInstructions = true; for each ( var xml:XML in p_interface.children() ) { // on cherche la fonction de parsing du composant func = m_correspTable[ xml.name() ] as Function; // si on ne la trouve pas on continue if ( func == null ) continue; // sinon on l'éxécute component = func( xml ) as UIComponent;// création du composant // on écoute les changements qui interviennent sur le composant component.addEventListener(MouseEvent.CLICK, updateLabel ); // et on ajoute le composant à la scène addChild ( component ); } } /** * Modifie la label du Button * */ private function updateLabel(e:MouseEvent): void { var oButton:Button = e.target as Button; oButton.label = "N° " + Math.ceil(Math.random()*28); Logger.debug ("updateLabel : "+oButton.label); } /** * fonction permettant de construire un composant button * */ private function buildButton( p_xml:XML ):Button { var prop:XML; var l_labelField:XML; var l_labelsList:XMLList = p_xml.child('labelField'); var l_component:Button = new Button(); var parameters:Array = new Array(); var parameter:XML; var method:Function; // on regarde si l'objet labelField est défini dans le XML if ( l_labelsList.length() > 0 ) { // si oui on le récupère l_labelField = l_labelsList[0]; } // récupère le skin du fichier xml et l'applique au composant var definition:Class = getDefinitionByName(p_xml.attribute('skin') ) as Class; l_component.applySkin( new definition() as ISkin); Logger.debug ("p_xml : "+p_xml.attribute('skin')); l_component.resize( Number ( p_xml.attribute('width') ), Number ( p_xml.attribute('height') ) ); for each( prop in p_xml.attributes() ) { // on a déjà défini le width et le height if ( prop.name() == "width" || prop.name() == "height" ) continue; // on vérifie que la propriété existe avant de lui appliquer la valeur définit dans le XML if ( l_component.hasOwnProperty( new String( prop.name() ) ) ) { l_component[ new String( prop.name() ) ] = prop.valueOf(); } } // si le labelField est défini if ( l_labelField != null ) { // on boucle sur ses propriétés for each( prop in l_labelField.attributes() ) { // on regarde si la propriété existe et le cas échéant on lui applique la valeur if ( l_component.labelField.hasOwnProperty( new String( prop.name() ) ) ) { l_component.labelField[new String( prop.name() )] = prop.valueOf(); } } for each( prop in l_labelField.children() ) { // on regarde si le noeud est un appel de méthode if ( prop.name() == "callMethod" ) { if ( l_component.labelField.hasOwnProperty( prop.attribute('name').toString() ) ) { // on récupère les paramètres parameters = new Array(); for each( parameter in prop.children() ) { parameters.push( parameter.valueOf() ); } method = l_component.labelField[prop.attribute('name').toString()] as Function; if ( method != null ) { // et on appelle la méthode method.apply( this, parameters ); } } } } } return l_component;// renvoie une référence vers le composant créé } } } |
[/codesyntax]
[codesyntax lang= »xml » title= »interface.xml » bookmarkname= »interface.xml »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?xml version="1.0" encoding="utf-8" ?> <data> <button x = "20" y = "100" width = "100" height = "20" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"> <labelField text = "Un Bouton" font = "Arial" textColor = "0XFFFFFF"> <callMethod name="changeFormat"> <parameter>size</parameter> <parameter>16</parameter> </callMethod> </labelField> </button> <button x = "20" y = "20" width = "50" height = "30" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"> <labelField text = "N 3" font = "Arial" textColor = "0XFFFFFF"> <callMethod name="changeFormat"> <parameter>size</parameter> <parameter>16</parameter> </callMethod> <callMethod name="alignCenter" /> </labelField> </button> <button x = "100" y = "50" width = "150" height = "40" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin2"> <labelField text = "Mon long bouton" font = "Arial" textColor = "0XFFFFFF"> <callMethod name="changeLetterFormat"> <parameter>0</parameter> <parameter>size</parameter> <parameter>30</parameter> </callMethod> <callMethod name="changeLetterFormat"> <parameter>2</parameter> <parameter>size</parameter> <parameter>30</parameter> </callMethod> <callMethod name="alignLeft" /> </labelField> </button> </data> |
[/codesyntax]
Développement Facile