Sujets sur : debug
Cours ActionScript 3 ‘debug’
10 Bonnes Pratiques en programmation ActionScript 3

La programmation ActionScript 3 est vaste, avec une multitude de concepts à connaitre.
Toutefois, voici 10 bonnes pratiques à suivre pour programmer efficacement en AS3.
Gardez-les à l’esprit pendant la phase de développement d’une application ou d’un jeu flash !
10 – Choisir des noms de variables et de fonctions explicites
Penser toujours à utiliser des noms longs et descriptifs pour vos variables et vos fonctions.
Ainsi votre code parle, en partie, de lui-même.
Prenez cet exemple :
[codesyntax lang= »actionscript3″ title= »variables et fonctions explicites » bookmarkname= »variables et fonctions explicites »]
1 2 3 4 5 6 7 8 9 10 11 12 | public function ajoutEnnemis() { var oEnnemis : Soldat; for (var i : int = 0;i < 10;i++) { oEnnemis = new Soldat(); oEnnemis.x = i * 10; oEnnemis.y = 130; addChild(oEnnemis); } } |
[/codesyntax]
Que fait ce code ? Il semble ajouter des clip Ennemis à l’écran.
Avec ce type de nommage, il sera bien plus facile de modifier ce code quelques mois plus tard.
9 – Ajoutez des commentaires
C’est très important, surtout si vous travaillez en équipe : ajouter des commentaires simples et parlants dans votre code.
Ce petit effort supplémentaire du moment vous rendra bien des services, lorsque quelques mois plus tard, vous devrez vous replonger dedans pour le modifier.
Si vous travaillez avec d’autres développeurs, ce simple conseil devient une règle impérative !
Il existe deux types de commentaires :
- les commentaires de ligne
- les commentaires de bloc.
Le commentaire de ligne est une simple remarque à la fin d’une ligne ou avant la ligne de code.
Le commentaire de bloc est un commentaire plus important, généralement d’une ou de plusieurs phrases, qui apparaît avant une fonction ou une section de code.
Voici un commentaire de ligne :
[codesyntax lang= »actionscript3″ title= »commentaire de ligne » bookmarkname= »commentaire de ligne »]
1 2 | // Init du debug MonsterDebugger MonsterDebugger.initialize(this); |
[/codesyntax]
Et voici un commentaire de type bloc :
[codesyntax lang= »actionscript3″ title= »commentaire de bloc » bookmarkname= »commentaire de bloc »]
1 2 3 4 5 6 7 8 9 | /** * Ajoute les coordonnées sur la carte. * Pour le debug et la construction de la carte. * */ private function addCoord(nVal:String, nX:Number, nY:Number) : void { // .... } |
[/codesyntax]
Il est très important que vos commentaires soient précis et concis.
8 – Choisir le type des variables correctement
Le typage adéquate des variables fait partie des facteurs qui peuvent grandement optimiser les performances de votre application.
Utilisez le type int (nombre entier) à la place de Number (nombre réel).
Par exemple, le type int est beaucoup plus rapide pour parcourir l’ensemble des éléments d’un tableau.
[codesyntax lang= »actionscript3″ title= »typer les variables » bookmarkname= »typer les variables »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* positionne des logos alignés sur les lignes et les colonnes */ const MAX_NUM:int = 333; var oLogo:BitmapData; var bitmap:Bitmap; for (var i:int = 0; i<MAX_NUM; i++) { for (var j:int = 0; j<MAX_NUM; j++) { oLogo = new LogoAS3(0,0); bitmap = new Bitmap(oLogo); bitmap.x = j * oLogo.width; bitmap.y = i * oLogo.height; addChild(bitmap) } } |
[/codesyntax]
7 – Utiliser des Sprite à la place de MovieClip
Lorsqu’il n’y a qu’une seule image utilisez toujours un Sprite ! – au lieu d’un MovieClip –
Cela permet de réduire les ressources mémoires utilisées.
Dans énormément de cas d’éléments graphiques, un simple Sprite peut remplacer votre MovieClip.
Un MovieClip sans animation, ni plusieurs images peut parfaitement être un Sprite 🙂
6 – Créer des fonctions
Si vous utilisez la même ligne de code plusieurs fois dans votre programme, il est temps de créer une fonction et d’appeler cette fonction à la place de vos lignes de code.
Par exemple, votre application contient plusieurs champs textes avec une mise en forme identique.
Plutôt que de répéter, à chaque fois, l’ensemble des lignes de code dans vos classes, pour créer votre champ texte, regroupez ces lignes dans une fonction.
Ensuite, la fonction peut prendre la forme suivante :
[codesyntax lang= »actionscript3″ title= »les fonctions » bookmarkname= »les fonctions »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /** * Permet de créer un champ texte rapidement * avec une mise en forme identique. */ private function createTxt(sTxt:String) : TextField { var txtField : TextField = new TextField(); txtField.text = sTxt; txtField.autoSize = TextFieldAutoSize.LEFT; txtField.textColor = 0x006f77; txtField.selectable = false; // définit le format par défaut du texte var format : TextFormat = new TextFormat(); format.size = 12; format.font = "Arial"; txtField.defaultTextFormat = format; return txtField; } |
[/codesyntax]
Maintenant, il vous est très facile de changer la mise en forme de l’ensemble des champs textes de votre application.
Il vous suffit de modifier un seul endroit dans votre code : votre fonction createTxt().
5 – Debugger son code petit à petit
Plutôt que de programmer toute votre application d’une traite, procédez étape par étape.
C’est à dire, programmez un comportement de votre personnage et testez-le avec un outil de debug efficace.
Une fois que votre morceau de code fonctionne comme vous le voulez – et pas avant – vous programmez la fonctionnalité suivante.
Et ainsi de suite jusqu’à la création complète de votre application flash.
4 – Détruire les objets correctement
Encore pour des raisons de performances et d’utilisation des ressources mémoires, il est important de supprimer les objets qui sont devenus inutiles.
Et il convient de les supprimer correctement.
Par exemple, si le joueur tire des balles pour tuer des ennemis, il maintient une touche enfoncée et en tir plusieurs…
Lorsque ces balles quittent la portion visible de l’écran, il est inutile de les conserver en mémoire.
Il faut donc les supprimer.
Pour supprimer complètement un objet, vous devez simplement vous débarrasser de toutes ses références et utiliser removeChild pour le retirer de la liste d’affichage.
Dans le cas des écouteurs d’évènements, comme le fait d’écouter si une touche est appuyée ou non par le joueur.
Pensez toujours à effectuer à supprimer l’écoute de l’évènement :
[codesyntax lang= »php » title= »removeEventListener » bookmarkname= »removeEventListener »]
1 2 | stage.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown); stage.removeEventListener(KeyboardEvent.KEY_UP, onKeyUp); |
[/codesyntax]
3 – Décomposer son code
Une information très importante : si vous ne savez pas comment programmer quelque chose, décomposez votre problème en étapes plus petites et poursuivez ainsi jusqu’à ce que vous puissiez trouver la solution.
Certains programmeurs oublient tout simplement cette règle se retrouvent souvent bloqués lorsqu’ils écrivent du code.
Ils se disent : Je ne sais pas comment faire pour que l’application réalise cette opération.
Le problème tient cependant uniquement au fait que l’opération n’en est pas une, mais en réalité plusieurs.
Par exemple, supposons que vous souhaitez faire pivoter une voiture lorsque le joueur appuie sur les touches directionnelles du clavier.
La solution consiste à décomposer la tâche de rotation de la voiture :
- vérifier si la touche directionnelle (gauche ou droite) est enfoncée.
- modifier la valeur de la propriété rotation du Sprite de la voiture (en fonction de la touche droite ou gauche).
La tâche de rotation du vaisseau correspond donc à quelques petites opération combinées en une seule.
Les programmeurs débutants font la même erreur à plus grande échelle. Ils pensent qu’ils ne pourront pas créer un jeu flash complet, parce que cela semble trop complexe.
Pourtant, si vous décomposez le jeu en une série d’opération de plus en plus petites (et vous occupez de ces opérations une par une), vous pourrez créer tout type de jeu.
Un jeu de voiture simple pourra ne requérir qu’une centaine d’opération, alors qu’un jeu de plateforme complexe en nécessitera plusieurs centaines. Chacune des opérations, une fois décomposée en étapes plus élémentaires, se révélera plus facile à programmer.
2 – Organiser son code
Au début c’est difficile, surtout lorsque l’on a pris de mauvaise habitudes…
Dans la mesure du possible, petit à petit, supprimez le code que vous ajoutez dans les images des MovieClips.
Dans des applications complexes, cela devient incompréhensibles, c’est brouillon et impossible à maintenir par un autre développeur.
A la place, associez vos MovieClip à des classes ou encore mieux, utilisez une architecture Model View Controler (avec PureMVC par exemple).
Commencez en douceur, en utilisant un éditeur ActionScript performant comme FDT.
FDT vous permet de séparer complètement votre code des éléments graphiques !
1 – De la pratique, de la pratique et encore de la pratique !
Le secret pour s’améliorer en programmation ActionScript, et dans les autres langages, c’est de mettre en pratique les conseils que vous lisez sur les blogs, dans des livres…
C’est uniquement par la pratique que vous allez acquérir des nouvelles compétences.
Posez des questions, et appliquez les réponses que vous recevez.
C’est une des meilleures méthodes pour progresser rapidement 😉
Les 6 Étapes Fondamentales pour Développer une Application Flash

Le thème de ce Cours AS3 aborde les 6 étapes fondamentales pour développer une application ou un jeu flash 😉
En effectuant ces étapes une par une, vous réduisez fortement le risque de bugs.
De plus, vous améliorez considérablement la robustesse et la souplesse de votre application.
Votre application flash devient ainsi beaucoup plus facilement maintenable dans le temps !
C’est parti pour la 1ère étape.
Étape 1 : Analyse du Projet
Une analyse du projet est nécessaire pour déterminer les besoins du clients. Il n’est pas forcément nécessaire d’utiliser l’artillerie lourde (UML, Merise…), c’est vraiment en fonction du projet et de sa complexité.
Le plus important est de déterminer exactement les fonctionnalités de l’application à développer pour le client. Tout simplement, rédiger un document reprenant une à une chaque demande du client, transposée en fonctionnalités. Ce document ne contient pas de technique, il est compréhensible par tout le monde.
Ce document représente le cahier des charges fonctionnel de votre projet !
Il est indispensable que le cahier des charges fonctionnel soit validé par votre client.
Cela vous évitera des désagréments par la suite : tel que le développement de fonctionnalités non prévues, une erreur d’interprétation de la demande du client…
Étape 2 : Étude Technique
Ensuite, il vous faut commencer un document qui va aborder l’aspect technique de votre application : le cahier des charges techniques.
Dans la pratique, en fonction de la complexité de l’application, vous proposerez une ligne directrice concernant les technologies à utiliser.
Par exemple, il n’est toujours opportun d’utiliser un Framework ActionScript.
Pour des applications ayant peu de fonctionnalités, d’interactions utilisateurs, le Framework PureMVC fera très bien l’affaire.
Par contre, pour une application ou un jeu flash plus évolué, avec une interaction utilisateur plus poussée et complexe, le Framework PixLib s’avère très pratique pour faciliter et accélérer le développement.
En fonction de votre étude technique, il est nécessaire de faire la part des choses : « inutile de sortir le bazooka pour tuer une mouche ».
Sur certains projets, vous pouvez vous passer complètement d’un Framework ActionScript.
Étape 3 : Diagramme de Classes
Tout dépend encore de votre projet, pour des petites applications, je vous conseille de passer directement à l’étape 4. Inutile de perdre du temps.
Pour des applications flash complexes, un diagramme de relations entre toutes les classes est particulièrement intéressant lorsque vous êtes plusieurs développeurs à intervenir. C’est également pratique pour la maintenabilité et les évolutions futures de l’application.
Sur ce diagramme, vous pouvez rajouter les principales responsabilités de vos classes : c’est à dire leurs méthodes publiques, leurs fonctions (c’est à dire ce qu’elles effectuent).
Ce diagramme de classes représente le pilier de votre application, que vous partagerez avec les autres développeurs de votre équipe.
Étape 4 : La Programmation
Et nous voilà dans le vif du sujet : la conception de votre application flash.
L’utilisation d’une stratégie de debug est indispensable avec un logiciel comme Monster Debugger, Firebug…
Il est également nécessaire de suivre les performances de votre code actionscript.
Plusieurs Éditeurs ActionScript peuvent grandement vous simplifier la programmation, comme FDT ou en FlashDevelop.
Étape 5 : La Phase de Tests
Une étape trop souvent négligée par les Développeurs, tout cela pour gagner du temps !!!
Qui au final, ce temps « gagné’ sera perdu en correction de bugs directement en Production.
Et surtout, une perte de crédibilité face à vos clients…
La phase de tests consiste à vérifier une à une l’ensemble des fonctionnalités de votre application.
Le but est de déceler les fameux bugs cachés, les pertes de performances…
Une fois que votre application fonctionne comme prévu dans votre analyse fonctionnelle, il vous reste la dernière étape 😉
Étape 6 : La Livraison
Et voila la dernière étape : la livraison de votre application flash au client 😉
Au fur et à mesure de vos différents projets, vous allez acquérir de nouvelles compétences.
Cela vous permettra de développer vos propres classes utilitaires et même un Framework adapté à vos besoins !
Et vous, comment procédez-vous pour développer vos applications flash ?
Quelle ligne directrice utilisez-vous ?
Donnez-moi votre avis dans les commentaires ci-dessous.
Classe de Sortie Debug Ultra Simple en ActionScript 3
Commentaires fermés sur Classe de Sortie Debug Ultra Simple en ActionScript 3

Sur le site de Grant Skinner, j’ai trouvé une classe de sortie debug ultra simple et pratique.
Pour afficher rapidement des valeurs, comme un trace, cette petite classe utilitaire est un bijou !
Utilisation de Out.as
Pour l’utiliser, c’est facile, il suffit de mettre la classe Out.as dans votre répertoire source (ou src).
Ensuite, il reste à affecter un champ texte de sortie à Out.textfield.
[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]
1 | Out.textField = oTextDebug; |
[/codesyntax]
Vous pouvez également spécifier le nombre maximum de caractères à conserver.
Ainsi, les anciennes trace seront automatiquement effacées au fur et à mesure de l’ajout des nouveaux.
[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]
1 | Out.maxLength = 1333; |
[/codesyntax]
Ensuite, de n’importe endroit de votre application, vous pouvez appeler Out.trace (valeur) pour effectuer un trace.
Cela affiche la valeur dans votre TextField en l’ajoutant à la fin de votre champ de texte.
Vous pouvez faire défiler le champ texte à la fin pour afficher le dernier trace.
[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]
1 2 | Out.trace("Bonjour"); Out.trace("count:", count);// Possibilité de transmettre plusieurs paramètres |
[/codesyntax]
Adapter Out.as à vos projets
Enfin, vous pouvez personnaliser le trace en fonction de votre projet.
Il suffit de remplacer Out.handler par votre propre fonction.
Par exemple, pour effectuer un format sur votre texte de trace, modifier sa couleur, ajouter des informations supplémentaires…
Vous pouvez ajouter une combinaison de touches (ctrl+d) pour afficher / masquer le trace.
Le code ci-dessous permet d’afficher le trace, uniquement si le premier paramètre est 1.
Ainsi, vous pouvez utiliser une variable, pour activer ou non la sortie trace sur Out.as.
[codesyntax lang= »actionscript3″ title= »Out.as » bookmarkname= »Out.as »]
1 2 3 4 5 6 7 8 | function log(...rest:Array):Boolean { trace("logging : "+rest.join(",")); // ... etc. // écrit dans le TextField seulement si le premier paramètre (ex. priorité debug) est > 1 return rest[0] > 1; // renvoie false pour empêcher l'écriture dans Out.textField } Out.handler = log; |
[/codesyntax]
Exemple de personnalisation de Out.as
J’ai ajouté sur Out.as la gestion de l’appuie simultanée sur les touches Ctrl et D pour afficher ou masquer le TextField de Debug.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/11/debug-simple.swf |
Télécharger le code source de Out.as
Dans le fichier ci-dessous, le code source de l’exemple avec la classe Out.as modifiée.
Télécharger “Out.as Debug simple” ex-out-debug-simple.zip – Téléchargé 828 fois – 88,25 KoSources : Grant Skinner
Comment surveiller les performances d’un code ActionScript ?
Commentaires fermés sur Comment surveiller les performances d’un code ActionScript ?

Dans ce nouveau cours ActionScript 3, nous allons découvrir une classe très utile pour surveiller les performances de notre code ActionScript 3 : Hi-ReS! Stats.
Présentation Hi-ReS! Stats
C’est une classe utilitaire très pratique pour tous développeurs ActionScript soucieux des performances de son application !
Cette classe affiche une fenêtre d’informations simple qui va vous aider à surveiller les performances de votre code.
Hi-ReS! Stats permet de voir:
- FPS Frames par seconde, le nombre de d’image par seconde.
- MS Milliseconds nécessaires pour générer une frame. Plus le chiffre est bas, mieux c’est côté performance !
- MEM Mémoire utilisée par le code. Si votre utilisation mémoire augmenter au fur et à mesure, c’est mauvais signe…
- MAX Mémoire Maximum utilisée par le code.
Contrôles : CLIQUEZ sur la moitié haute / inférieure du panneau pour augmenter ou diminuer le FPS de l’application.
Utilisation Hi-Res! Stats
Une classe très facile à implémenter, seulement 1 ligne de code 😉
[codesyntax lang= »actionscript3″ title= »Hi-ReS! Stats » bookmarkname= »Hi-ReS! Stats »]
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 | /** The Initial Developer of the Original Code is Matthieu - https://www.actionscript-facile.com Portions created by the Initial Developer are Copyright (C) 2010 the Initial Developer. All Rights Reserved. Contributor(s) : */ package { import cours.Globe; import flash.display.Sprite; import flash.events.Event; import com.demonsters.debugger.MonsterDebugger; import net.hires.debug.Stats; /** * La classe Main qui étend Sprite. * * définit le nombre d'images par secondes dans les paramètres de compilation * -default-frame-rate 10 * * */ public class Main extends Sprite { /** * Constructeur. */ 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 l'application. * définit le nombre d'images par secondes dans les paramètres de compilation * -default-frame-rate 10 * */ private function onReady(event : Event) : void { this.removeEventListener(Event.ADDED_TO_STAGE, onReady); // Init De MonsterDebugger MonsterDebugger.initialize(this); MonsterDebugger.trace(this, "Start Application"); // pour afficher les performances de notre swf addChild ( new Stats() ); var oGlobe:Globe = new Globe(); addChild(oGlobe); oGlobe.init(); } } } |
[/codesyntax]
Exemple Hi-ReS! Stats
Ci-dessous, j’ai repris la sphère Away3D du précédent cours, auquel j’ai ajouté l’indicateur de performance.
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/10/away3D-fps.swf |
Téléchargement de Hi-ReS! Stats
Et pour télécharger le code source de la classe Hi-Res! Stats, cliquez ci-dessous :
Télécharger “Hi-ReS-Stats” Hi-ReS-Stats.zip – Téléchargé 827 fois – 7,23 KoTéléchargement directement sur le site officiel.
Solution avec Monster Debugger
Pour ceux qui préfèrent, Monster Debugger offre une fenêtre de visualisation en direct des ressources mémoire consommée par votre application.
Monster Debugger affiche également le nombre de FPS de l’application (nombre d’image par seconde).
Utilisez-vous cette classe pour mesurer les performances de votre application ou une autre solution ?
Partagez votre solution dans les commentaires ci-dessous.
Compatibilité Pixlib 3.0 et Monster Debugger 3

Pour la création d’une application avec le Framework Pixlib 3.0, j’ai ajouté une petite modification concernant le debug.
Pour l’instant Pixlib est compatible uniquement avec la version 2 de Monster Debugger.
Du coup, ce n’est pas très pratique pour votre debug dans Flash !
Si comme moi, vous utilisez la version 3 de Monster Debugger, vous apprécierez surement de profiter de ces nouvelles fonctionnalités de debug avancées.
Pour cela, j’ai juste modifié 2 lignes de code dans la classe PXDeMonsterDebuggerLayout.as et le tour est joué 😉
Pixlib 3 envoie ses traces dans la console Monster Debugger 3.01 😉
Ci-dessous le code complet du Framework Pixlib 3.0 avec l’extension PixLogger modifiée.
Les 2 lignes de codes modifiées :
[codesyntax lang= »actionscript3″ title= »PXDeMonsterDebuggerLayout.as » bookmarkname= »PXDeMonsterDebuggerLayout.as »]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /** * Default De MonsterDebugger client root target. * * @default null Use the PXbApplication.getInstance().root if * defined. * * @langversion 3.0 * @playerversion Flash 10 */ public static var ROOT : Object = PXApplication.getInstance().root; // -------------------------------------------------------------------- // Private implementation // -------------------------------------------------------------------- /** * @private */ function PXDeMonsterDebuggerLayout() { CLIENT["initialize"](ROOT); initColorMap(); if (AUTO_CLEAR) onClear(); } |
[/codesyntax]
La classe PXDeMonsterDebuggerLayout.as complète :
[codesyntax lang= »actionscript3″ title= »PXDeMonsterDebuggerLayout.as » bookmarkname= »PXDeMonsterDebuggerLayout.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 | /* * Copyright the original author or authors. * * Licensed under the MOZILLA PUBLIC LICENSE, Version 1.1 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.mozilla.org/MPL/MPL-1.1.html * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package net.pixlib.log.layout { import net.pixlib.core.PXApplication; import com.demonsters.debugger.MonsterDebugger; import net.pixlib.log.PXStringifier; import net.pixlib.collections.PXHashMap; import net.pixlib.log.PXLogEvent; import net.pixlib.log.PXLogLevel; import net.pixlib.log.PXLogListener; import flash.events.Event; /** * The PXDeMonsterDebuggerLayout class provides a convenient way * to output messages through <strong>De MonsterDebugger</strong> AIR application. * * @example Basic example * <listing> * * PXDeMonsterDebuggerLayout.CLIENT = MonsterDebugger; * PXLogManager.getInstance().addLogListener(PXDeMonsterDebuggerLayout.getInstance()); * </listing> * * @example Customize De MonsterDebugger client class * <listing> * * PXDeMonsterDebuggerLayout.CLIENT = MyDeMonsterClient; * PXDeMonsterDebuggerLayout.AUTO_CLEAR = false; * * PXLogManager.getInstance().addLogListener(PXDeMonsterDebuggerLayout.getInstance()); * </listing> * * @see #CLIENT Customize De MonsterDebugger client class * @see PIXLIB_DOC/net/pixlib/log/PXLogManager.html net.pixlib.log.PXLogManager * @see PIXLIB_DOC/net/pixlib/log/PXLogListener net.pixlib.log.PXLogListener * @see PIXLIB_DOC/net/pixlib/log/PXLogLevel net.pixlib.log.PXLogLevel * @see http://www.demonsterdebugger.com De MonsterDebugger site * * @langversion 3.0 * @playerversion Flash 10 * * @author Romain Ecarnot */ final public class PXDeMonsterDebuggerLayout implements PXLogListener { // -------------------------------------------------------------------- // Private properties // -------------------------------------------------------------------- /** * @private */ private static var _oI : PXDeMonsterDebuggerLayout ; // -------------------------------------------------------------------- // Protected properties // -------------------------------------------------------------------- /** * @private * * @langversion 3.0 * @playerversion Flash 10 */ protected var mColorLevel : PXHashMap; // -------------------------------------------------------------------- // Public properties // -------------------------------------------------------------------- /** * The De MonsterDebugger client class to user. * * @default net.pixlib.log.layout.MonsterDebugger class * * @langversion 3.0 * @playerversion Flash 10 */ public static var CLIENT : Class = MonsterDebugger; /** * Default De MonsterDebugger client root target. * * @default null Use the PXbApplication.getInstance().root if * defined. * * @langversion 3.0 * @playerversion Flash 10 */ public static var ROOT : Object = PXApplication.getInstance().root; /** * Indicates if console must be cleared on connection. * * @default true * * @langversion 3.0 * @playerversion Flash 10 */ public static var AUTO_CLEAR : Boolean = true; /** * Method name in DeMonsterDebugger to trace ouput message. * * @default "trace" * * @langversion 3.0 * @playerversion Flash 10 */ public static var DEBUG_METHOD : String = "trace"; /** * Method name in DeMonsterDebugger to clear ouput messages. * * @default "clearTraces" * * @langversion 3.0 * @playerversion Flash 10 */ public static var CLEAR_METHOD : String = "clearTraces"; /** * The depth of the trace. * * @default 4 * * @langversion 3.0 * @playerversion Flash 10 */ public static var DEPTH : uint = 4; /** * Display the public methods of a Class in the output panel. * * @default false * * @langversion 3.0 * @playerversion Flash 10 */ public static var FUNCTIONS : Boolean = false; // -------------------------------------------------------------------- // Public API // -------------------------------------------------------------------- /** * Returns uniqe instance of PXDeMonsterDebuggerLayout class. * * @return Unique instance of PXDeMonsterDebuggerLayout class. * * @langversion 3.0 * @playerversion Flash 10 */ public static function getInstance() : PXDeMonsterDebuggerLayout { if (!_oI) _oI = new PXDeMonsterDebuggerLayout(); return _oI; } /** * Releases instance. * * @langversion 3.0 * @playerversion Flash 10 */ public static function release() : void { if ( PXDeMonsterDebuggerLayout._oI is PXDeMonsterDebuggerLayout ) PXDeMonsterDebuggerLayout._oI = null; } /** * Triggered when a log message has to be sent.(from the PXLogManager) * * @param event The vent containing information about the message * to log. * * @langversion 3.0 * @playerversion Flash 10 */ public function onLog(event : PXLogEvent) : void { if ( CLIENT.hasOwnProperty(DEBUG_METHOD) ) { CLIENT[ DEBUG_METHOD ](event.logTarget, event.message, mColorLevel.get(event.level), FUNCTIONS, DEPTH); } } /** * Clears console. * * @langversion 3.0 * @playerversion Flash 10 */ public function onClear(event : Event = null) : void { if ( CLIENT.hasOwnProperty(CLEAR_METHOD) ) { CLIENT[ CLEAR_METHOD ](); } } /** * Returns string representation of instance. * * @return The string representation of instance. * * @langversion 3.0 * @playerversion Flash 10 */ public function toString() : String { return PXStringifier.process(this); } // -------------------------------------------------------------------- // Protected methods // -------------------------------------------------------------------- /** * @private * * @langversion 3.0 * @playerversion Flash 10 */ protected function initColorMap() : void { mColorLevel = new PXHashMap(); mColorLevel.put(PXLogLevel.ALL, 0x666666); mColorLevel.put(PXLogLevel.DEBUG, 0x0086B3); mColorLevel.put(PXLogLevel.INFO, 0x00B32D); mColorLevel.put(PXLogLevel.WARN, 0xB38600); mColorLevel.put(PXLogLevel.ERROR, 0xB32D00); mColorLevel.put(PXLogLevel.FATAL, 0xB3002D); } // -------------------------------------------------------------------- // Private implementation // -------------------------------------------------------------------- /** * @private */ function PXDeMonsterDebuggerLayout() { CLIENT["initialize"](ROOT); initColorMap(); if (AUTO_CLEAR) onClear(); } } } |
[/codesyntax]
Téléchargement Pixlib 3.0 avec Extension PixLogger
Pour vous faciliter encore plus la tâche, ci-dessous l’archive zip complète de Pixlib 3.0 avec l’extension PixLogger compatible Monster Debugger 3.01.
Télécharger “Pixlib 3.0 avec extension PixLogger pour De Monster Debugger 3” Pixlib_3.0-extension_PixLogger-De_Monster_Debugger.zip – Téléchargé 881 fois – 673,71 KoComment debugger son code actionscript 3 avec Flash ?

Dans les articles précédents, vous avez découvert les outils pour programmer en actionscript 3. Vous connaissez également les bases de programmation AS3.
Vous concevez des applications flash de plus en plus évoluées 😉
Mais comme la majorité des développeurs (moi y compris), vous rencontrez des bugs difficiles à localiser et corriger !
Et chaque fois, vous passez des heures et des heures pour trouver ce fameux bug, qui est en fait une erreur d’inattention : l’erreur bête en somme.
En procédant à tâtons pour corriger vos applications, vous perdez un temps considérable.
Ce qu’il vous manque, c’est un outil efficace pour vous aider à « tracker » les bugs beaucoup plus rapidement.
Dans le cours vidéo de cette semaine, je vous propose de découvrir un de ces outils. Vous allez adorez 😉
Voici ce que je vais vous apprendre :
- Pourquoi utiliser Monster Debugger pour le debug de vos jeux flash.
- Comment installer Monster Debugger pour commencer le debug de votre code AS3.
- Comment effectuer du debug en live directement dans les navigateurs Firefox et Google Chrome.
- Comment debugger une application en ligne d’une façon totalement transparente pour vos visiteurs.
A la fin de cette formation, vous serez capable de trouver et corriger rapidement les bugs de vos applications flash, quelles soient en ligne ou sur le bureau (Adobe AIR).
Exemple d’application avec le debug
Ci-dessous, une démonstration de l’intégration du Monster Debugger.
Lancez Monster Debugger, puis rechargez cette page.
Et amusez-vous à changer les paramètres du swf !
1 | http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/main-base.swf |
Téléchargez le code source debug AS3
Vous trouverez l’ensemble du code source commenté pour ce cours Actionscript.
Télécharger “Debug AS3 avec Monster Debugger” ex-debug-monster-debugger.zip – Téléchargé 1033 fois – 49,97 KoLe site Monster Debugger pour télécharger et installer ce logiciel Adobe AIR.
Et vous, quel logiciels utilisez-vous pour debugger votre code Actionscript 3 ?
Partagez vos logiciels de debug dans les commentaires ci-dessous.
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é 833 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]