Sujets sur : AS3
Cours ActionScript 3 ‘AS3’
Questions Nouveau Programme AS3 Formation ActionScript / Flash
Commentaires fermés sur Questions Nouveau Programme AS3 Formation ActionScript / Flash
Récemment, vous avez découvert le Programme sur 6 mois AS3 Formation.
Pour encore mieux vous aider à atteindre vos objectifs, j’ai créé un très court questionnaire.
Pouvez-vous prendre moins de 2 minutes pour apporter vos réponses svp ?
Cela m’aidera à concevoir des articles de formation adapté à vos besoins.
Merci d’avance, et restez branchés pour des news sur ce nouveau programme innovant et accessible.
Comment charger et lire des données XML en AS3 ?
Dans ce tutoriel vidéo, nous apprendre à charger et lire un fichier xml en ActionScript 3.
Et voici le résultat dans un swf :
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/03/charger-xml.swf |
Téléchargez le code source complet de l’exemple :
Télécharger “Charger et lire XML”
charger-xml.zip – Téléchargé 970 fois – 25,36 KoEt vous, comment analysez-vous vos fichiers XML en AS3 ?
Est ce que vous avez créé votre propre classe de chargement et de lecture de fichiers XML ? (comme dans Pixlib 3)
Postez votre code AS3 dans les commentaires, je suis curieux de le tester !
Démarrer avec ActionScript 3 : la classe Main
Commentaires fermés sur Démarrer avec ActionScript 3 : la classe Main
Dans cette vidéo, je vous propose de découvrir la classe de base à utiliser dans vos projets flash : la classe Main.
Celle-ci contient plusieurs fonctionnalités prêtes pour être utiliser dans vos classes ActionScript.
Voici le résultat dans un swf :
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/03/main-base.swf |
Téléchargez le code source complet de l’exemple :
Télécharger “Classe Main de base”
ex-main-base.zip – Téléchargé 694 fois – 23,90 KoTéléchargez De MonsterDebugger pour le debug de vos applications flash : le fameux trace amélioré !
Et vous, quelle classe Main utilisez-vous pour démarrer vos swf ?
Postez votre code AS3 dans les commentaires, je suis curieux de voir votre code.
[codesyntax lang= »actionscript3″ title= »La classe Main » bookmarkname= »La classe Main »]
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 |
package { import nl.demonsters.debugger.MonsterDebugger; import flash.text.TextFormat; import flash.text.TextField; import flash.events.Event; import flash.display.Sprite; public class Main extends Sprite { private var debugger:MonsterDebugger; public function Main() { // attend la fin de l'initialisation de la scène this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true); } /** * Démarrage de votre application. * */ protected function onReady(event : Event) : void { this.removeEventListener(Event.ADDED_TO_STAGE, onReady); // Init De MonsterDebugger debugger = new MonsterDebugger(this); // message de debug MonsterDebugger.trace(this, "Start Application"); // le code de notre application var oText:TextField = new TextField(); oText.width = stage.stageWidth; oText.autoSize = 'center'; oText.text = "Bienvenue sur ActionScript-Facile"; oText.y = 150; var tFormat:TextFormat = new TextFormat(); tFormat.font = "Arial"; tFormat.size = 20; tFormat.color = Math.random() * 0X00FFFFFF; oText.setTextFormat(tFormat); addChild( oText ); MonsterDebugger.trace(this, oText);// affichage dans le debug de notre objet oText } } } |
[/codesyntax]
Comment ajouter Google Analytics dans Flash en AS3 ?
Nous allons découvrir comment effectuer des mesures statistiques avec les applications Flash .
Cet article est consacré à l’implémentation de Google Analytics dans vos RIA Flash en AS3.
Qu’est ce que GA For Flash ?
Une API a été conçu en AS3 par Nickski15, Zwetan et Ekameleon. Ils ont développé cette API et l’ont mis à disposition, en Open Source, via le projet Google Analytics Tracking for Flash API (gaforflash).
Google Analytics vous permet d’analyser le traffic de votre RIA Flash pour :
- visualiser les pages vues (interfaces AS3) et leur nombre d’affichage.
- tracer des actions et des évènements.
Installation de Google Analytics
Pour implémenter GA (Google Analytics), il suffit de télécharger la dernière version sur le site Google Code. Vous pouvez télécharger :
- soit le fichier .SWC gaforflash-1.0.1.319.zip. Je vous conseille de télécharger le fichier SWC, c’est plus simple à utiliser dans vos projets AS3.
- soit le code source complet via le SVN Google Code. Lien du SVN : http://gaforflash.googlecode.com/svn/trunk/
Ensuite, vous ajoutez le fichier analytics_flash.swc dans votre application AS3 avec votre Éditeur ActionScript habituel.
Avec l’Éditeur FDT, c’est très simple. J’ai rédigé un Guide gratuit pour Développer efficacement et rapidement en ActionScript.
Utilisation de GA en AS3
Reprenons l’exemple du Chapitre : Création des Graphismes / Skins des Composants AS3 pour ajouter le Tracking Google Analytics en AS3.
Création du Tracker
Juste avant la création de votre interface Flash, vous devez initialiser le Tracker.
[codesyntax lang= »actionscript3″ title= »GoogleAnalyticsExample.as » bookmarkname= »GoogleAnalyticsExample.as »]
1 2 3 4 5 6 |
/** * Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug * Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js * */ var tracker : GATracker = new GATracker( this, "UA-983969-6", "AS3", true ); |
[/codesyntax]
Les différents paramètres à renseigner :
- Id : cette propriété permet de déclarer le Tracker dans votre application Flash.
- Account : c’est l’identifiant de votre compte Google Analytics. Un numéro du type UA-944069-6.
- Mode : cette valeur est renseignée par AS3 ou Bridge.
Le mode AS3 est utilisé lorsque vous ne contrôlez pas les pages HTML dans lesquelles votre RIA est incluse (par exemple les widgets affichés sur myspace, facebook…), ou s’il n’y a pas de suivi Google Analytics activé.
Dans la majorité des RIA Flash, le mode AS3 est utilisé.
Le mode Bridge est utilisé lorsque votre RIA est intégré dans une page Web qui contient un script de mesure Google Analytics. Ce mode est utilisé avec la classe ExternalInterface, il est donc important que le paramètre allowScriptAccess soit correctement défini (« always » ou « sameDomain »).
- Debug : cette propriété active le débug avec l’API gaforflash. Si le Débug est défini sur true, toutes les données sont affichées dans une fenêtre de débogage.
Ensuite, en fonction de votre application Flash, Google Analytics peut :
- tracker les pages vues (interfaces AS3) et leur nombre d’affichage.
- tracker des actions ou des évènements.
Suivi des pages vues
Pour suivre les interfaces affichées dans votre RIA, une seule ligne de code est nécessaire. Renseignez le nom de l’interface et son nombre d’affichage sera comptabilisé dans Google Analytics.
[codesyntax lang= »actionscript3″ title= »GoogleAnalyticsExample.as » bookmarkname= »GoogleAnalyticsExample.as »]
1 2 |
// Ce paramètre permet de traquer le nom de la page affichée ou d'une action if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ; |
[/codesyntax]
Par exemple, à chaque fois que votre application Flash est affichée, vous pouvez ajouter un trackPageview. Ou lorsqu’une interface précise est sélectionnée par l’utilisateur.
Suivi des évènements
Vous pouvez également suivre le cheminement complet de l’utilisateur dans votre RIA Flash. Cela permet d’envoyer des événements qui seront enregistrés dans GA.
Voici les 4 paramètres à définir :
- category : le nom du groupe d’événements. Dans notre exemple la category est AS3 Facile GA.
- action : le nom de l’action effectuée, cette action est associée avec une catégorie. Dans notre exemple, l’événement se nomme par le nom du Button choisit par l’utilisateur (Arc en Ciel Liste).
- label : un nom optionnel pour donner des informations supplémentaires sur la combinaison category / action. Dans une liste d’éléments de votre interface, vous pouvez préciser le type d’élément (un Button). Ou dans une playlist vidéo, vous précisez le numéro de la vidéo.
- value : un nombre non négatif, c’est une valeur optionnel qui associe un canal (ou channel) à un événement mesuré.
[codesyntax lang= »actionscript3″ title= »GoogleAnalyticsExample.as » bookmarkname= »GoogleAnalyticsExample.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3... * * category: le nom du groupe d'évènements. * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action. * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie. * value: un nombre optionnel, pour associer un channel à l'évènement traquer. * */ // l'utilisateur appuie sur le Button 'Arc en Ciel' if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button"); // ou l'utilisateur modifie la police de caractère utilisée dans la ComboBox if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox"); |
[/codesyntax]
Très facilement, vous pouvez tracker toutes les actions de l’utilisateur de votre RIA Flash :
- l’appuie sur tel ou tel élément de l’interface pour lancer un nouvel écran, ouvrir une page Web…
- lorsque l’utilisateur télécharge des fichiers pdf, zip…
- lorsque l’utilisateur visualise une vidéo, écoute un podcast, un MP3…
Tableau de Bord Google Analytics
Une fois votre application Flash paramétrée, vous pouvez visualiser les différentes statistiques dans votre Tableau de Bord Google Analytics.
Pour visualiser les statistiques sur les pages vues (interface AS3) et leurs nombre d’affichage, allez dans Contenu et Pages les plus consultées.
Pour visualiser les évènements ou actions de l’utilisateur, allez dans Suivi des évènements. Ensuite, vous pouvez choisir Catégories, Actions, Libellés…
Conclusion
Google Analytics Tracking for Flash offre des capacités de tracking infinies dans une RIA Flash en AS3.
- L’utilisation de trackPageview vous permet de mesurer le trafic de votre application Flash dans ses moindres détails.
- L’utilisation de trackEvent vous permet de mieux comprendre la manière dont vos utilisateurs réagissent à vos interfaces Flash.
gaforflash est donc un complément très intéressant pour comprendre les actions de vos utilisateurs dans vos interfaces AS3.
Ci-dessous, voici notre application Flash avec l’implémentation de Google Analytics.
Appuyez sur la touche « ESPACE » de votre clavier pour faire disparaitre / apparaitre la fenêtre de Debug GA.
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/google_analytics_exemple.swf |
Sources Commentées
- GoogleAnalyticsExample.as
[codesyntax lang= »actionscript3″ title= »GoogleAnalyticsExample.as » bookmarkname= »GoogleAnalyticsExample.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 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 |
package { import com.google.analytics.GATracker; 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; /** * Mise à jour en live des Skin Graphismes des Composants du Framework AS3 ActionScript-Facile * Implémentation de Google Analytics * * @author Matthieu */ public class GoogleAnalyticsExample extends Sprite { protected var m_comboFonts:ComboBox; protected var m_list:List; protected var m_textField:UITextField; private var tracker : GATracker; public function GoogleAnalyticsExample() { addTracker(); /** * 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 ); } /** * Ajoute Google Analytics dans votre application Flash. * */ private function addTracker() : void { /** * Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug * Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js * */ tracker = new GATracker( this, "UA-983969-6", "AS3", true ); // Ce paramètre permet de traquer le nom de la page affichée ou d'une action if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ; } /** * 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 /** * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3... * * category: le nom du groupe d'évènements. * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action. * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie. * value: un nombre optionnel, pour associer un channel à l'évènement traquer. * */ if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox"); } /** * Fonction servant à écouter les click de l'utilisateur sur le buttonHide. * On modifie le Skin de La List "Arc en Ciel Liste" * * @param e Evenement de type MouseEvent.CLICK */ private function changeSkinList(e:MouseEvent) : void { m_list.applySkin(new DefaultListSkin() ); /** * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3... * * category: le nom du groupe d'évènements. * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action. * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie. * value: un nombre optionnel, pour associer un channel à l'évènement traquer. * */ if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button"); } /** * Fonction servant à écouter les click de l'utilisateur sur le buttonHide. * On modifie le Skin de La List "Classique Liste" * * @param e Evenement de type MouseEvent.CLICK */ private function changeSkinList2(e:MouseEvent) : void { m_list.applySkin(new DefaultListSkin2() ); /** * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3... * * category: le nom du groupe d'évènements. * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action. * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie. * value: un nombre optionnel, pour associer un channel à l'évènement traquer. * */ if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Classique Liste", "Button"); } /** * 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]
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 “Google Analytics dans Flash en AS3”
Pour en savoir plus
- Les mesures statistiques au sein d’Adobe Flash à l’aide de Google Analytics Tracking for Adobe Flash
- Mise en place du composant Google Analytics dans Adobe Flash : Adobe Flash Setup
- Mise en place de Google Analytics dans Adobe Flex : Adobe Flex Setup
Remerciements
Je remercie les Développeurs AS3 pour la création de cette API AS3 : Google Analytics Tracking for Flash API (gaforflash).
Et je vous invite à découvrir leurs Projets respectifs :
- Zwetan : l’ensemble de ses Projets en ActionScript / Flex.
- Ekameleon : ses conseils et tutoriels ActionScript.
Dans les prochains tutoriels : quels sujets voulez-vous que j’aborde ?
Souhaitez des nouveaux exemples avec le code source sur l’utilisation du Framework de Composants AS3 Facile ?
Avez-vous besoin de plus d’éclaircissement sur tel ou tel Composants AS3 du Framework ? Ou préférez que j’aborde des sujets totalement différents ?
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]