Sujets sur : flash png de la bibliotheque dans as3
Cours ActionScript 3 ‘flash png de la bibliotheque dans as3’
Quelles sont les Fonctionnalités d’une Bibliothèque de Composants ActionScript 3 ?
Dans ce tutoriel, nous allons enfin aborder la pratique!
Nous allons développer les fonctionnalités de base de notre Bibliothèque de Composants AS3.
Comme nous l’avons précédemment (Chapitre 2 : Comment créer des Composants AS3 ?), nous commençons déjà par décrire ces fonctionnalités au sein d’un Cahier des Charges Fonctionnels (CDCF).
I – Cahier Des Charges Fonctionnel d’une Bibliothèque de Composants AS3
Nous avons déjà clairement défini dans le « Chapitre 1 : Pourquoi créer des Composants Graphiques en AS3 ?« , les Composants Graphiques.
Voici le résumé d’un Composant Graphiques en AS3 :
“Un composant est un élément qui apporte une interaction avec l’utilisateur, il est possible de le faire apparaître ou disparaître à volonté et il se doit d’être personnalisable au niveau de l’apparence.”
C’est une description courte, qui résume au niveau fonctionnel, ce que doit être composant graphique.
Les points importants d’un composant :
- Le composant doit apporter une interaction avec l’utilisateur, il s’agira donc bien entendu d’un objet graphique.
- Il est possible de le faire apparaître et disparaître à volonté : en effet, un composant doit pouvoir être supprimé et ajouté à la display list (la liste d’affichage) sans aucun effort.
- Il doit être personnalisable au niveau de l’apparence : notre composant devra pouvoir changer de style graphique, et ce, de la manière la plus simple qui soit.
Notre CDCF (Cahier des Charges Fonctionnels) est certes un peu court, toutefois, nous n’avons pas besoin de plus de précisions, celles-ci seront données dans le CDCT (Cahier des Charges Techniques).
II – Cahier Des Charges Techniques d’une Bibliothèque de Composants AS3
C’est la partie la plus intéressante, la description technique des fonctionnalités communes à l’ensemble de nos composants. Commençons sans plus tarder en reprenant le CDCT (Cahier des Charges Techniques).
Le composant apporte une interaction avec l’utilisateur
Notre classe de base sera donc un objet graphique, nous choisissons d’étendre la classe graphique de base flash.display.Sprite.
Possibilité de le faire apparaître ou disparaître volonté
En as3, nous pouvons manipuler la liste d’affichage ( aussi appelée display list ) avec les méthodes classiques de chaque objet graphique. Cependant, nous allons ajouter quelques fonctionnalités supplémentaires.
- Une méthode hide, qui nous permettra de “cacher” notre objet graphique en le supprimant de la display list, tout en sauvegardant son ancien objet parent dans une propriété “lastParent”.
- Un getter lastParent qui nous permettra de récupérer le dernier parent du composant.
- Une méthode show qui nous permettra de rajouter notre objet graphique à la display list de son lastParent.
Avec ces fonctionnalités communes à tous les composants, nous pouvons cacher / supprimer et montrer / ajouter un objet à la display list de manière extrêmement simplifiée, avec une seule méthode.
Personnalisable au niveau de l’apparence
Les composants doivent pouvoir être customisables, en anglais nous appelons cela le “skin” ( skin = peau ).
Ainsi, nous allons donc créer un objet “Skin” qui permet d’associer des valeurs de constantes à des noms de classes.
Nous enverrons ensuite cet objet “Skin” à une méthode nommée “applySkin”, définie dans une interface Iskinnable. Cette interface sera implémentée par tous nos composants.
Ajout de quelques fonctionnalités supplémentaires :
- Une méthode destroy, qui permet de détruire proprement notre composant.
- Une méthode resize, qui permet de redimensionner proprement notre composant.
- Une méthode onAdded qui s’exécute lorsque le composant sera ajouté à la display list d’un objet graphique, pour le premier.
- Une méthode onAddedToStage qui s’exécute lorsque le composant ou son parent sera ajouté à la displaylist du stage. Pour simplifier, cette méthode est appelée dès que la propriété stage du composant est disponible.
- Une méthode onRemoved qui s’exécute lorsque le composant est enlevé de la display list de son parent.
- Une méthode onRemovedFromStage qui s’exécute lorsque le composant est enlevé de la displaylist du stage.
- Un getter / setter de type Tooltip, nous reviendrons sur ce point plus tard, lorsque nous aborderons le chapitre relatif au composant Tooltip.
- Nous redévelopperons également le comportement d’un évènement bien pratique qui a disparu lors du passage à l’as3. L’évènement onReleaseOutside, qui s’éxécute lorsque l’utilisateur relâche le clic gauche de la souris en dehors de l’objet dans lequel a été capturé le mouseDown.
Conclusion
Nous disposons désormais des bases essentielles pour coder nos différents composants, ceux-ci hériteront tous de la classe UIComponent.
Dans le prochain chapitre, nous allons attaquer notre premier vrai composant : le bouton.
Sources commentées
- com.actionscriptfacile.skin.ISkinnable
- com.actionscriptfacile.skin.Skin
- com.actionscriptfacile.skin.ISkin
- com.actionscriptfacile.ui.IComponent
- com.actionscriptfacile.ui.UIComponent
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.
Et vous, quelles sont les Fonctionnalités Communes à tous les Composants AS3 que vous souhaiteriez ?
Avez-vous d’autres idées ? Des fonctionnalités auxquelles je n’aurais pas pensé ?
Dites-moi cela dans les commentaires ci-dessous.
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.ISkinnable » bookmarkname= »com.actionscriptfacile.skin.ISkinnable »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.actionscriptfacile.skin { import com.actionscriptfacile.skin.ISkin; public interface ISkinnable { function applySkin( p_skin:ISkin ):void; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.Skin » bookmarkname= »com.actionscriptfacile.skin.Skin »]
|
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 |
package com.actionscriptfacile.skin { import com.actionscriptfacile.skin.ISkin; import flash.utils.Dictionary; import flash.utils.getDefinitionByName; import flash.utils.getQualifiedClassName; public class Skin implements ISkin { private var m_data:Dictionary; public function Skin() { m_data = new Dictionary(); } public function setSkin( p_skinName:String, p_skinDefinition:Class ):void { m_data[ p_skinName ] = p_skinDefinition; } public function getSkin(p_skinName:String) :Class { return m_data[ p_skinName ]; } public function clone():ISkin { var definition:Class = getDefinitionByName( getQualifiedClassName( this ) ) as Class; var skin:ISkin = new definition() as ISkin; skin.setSkins( m_data ); return skin; } public function setSkins(p_skins:Dictionary):void{ m_data = p_skins; } public function getSkins():Dictionary { return m_data; } public function destroy():void { m_data = null; delete this; } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.ISkin » bookmarkname= »com.actionscriptfacile.skin.ISkin »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
package com.actionscriptfacile.skin { import flash.utils.Dictionary; public interface ISkin { function setSkin( p_skinName:String, p_skinDefinition:Class ):void; function getSkin( p_skinName:String ):Class; function setSkins( p_skins:Dictionary ):void; function getSkins():Dictionary; function clone():ISkin; function destroy():void; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.IComponent » bookmarkname= »com.actionscriptfacile.ui.IComponent »]
|
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 |
package com.actionscriptfacile.ui { import com.actionscriptfacile.skin.ISkinnable; import flash.display.DisplayObjectContainer; import com.actionscriptfacile.ui.tooltip.Tooltip; public interface IComponent extends ISkinnable { function destroy():void; function hide():void; function show():void; function onAdded():void; function onRemoved():void; function onAddedToStage():void; function onRemovedFromStage():void; function resize( p_width:Number , p_height:Number ):void; function set tooltip( p_toolTip:Tooltip ):void; function get tooltip():Tooltip; function get lastParent():DisplayObjectContainer; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.UIComponent » bookmarkname= »com.actionscriptfacile.ui.UIComponent »]
|
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 |
package com.actionscriptfacile.ui { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.tooltip.Tooltip; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import flash.display.Sprite; import flash.events.Event; import com.actionscriptfacile.ui.IComponent; import flash.events.MouseEvent; /** * Classe de base de tous les composants * @author Matthieu */ public class UIComponent extends Sprite implements IComponent { private var m_lastParent:DisplayObjectContainer; // Le dernier parent connu de l'objet private var m_tooltip:Tooltip; // Un objet de type Tooltip static public const RELEASE_OUTSIDE:String = 'RELEASE_OUTSIDE'; // Constante utilisée pour les addEventListener /** * Constructeur */ public function UIComponent() { m_lastParent = null; m_tooltip = null; addEventListener( Event.ADDED, addedHandler ); addEventListener( Event.ADDED_TO_STAGE, addedHandler ); addEventListener( Event.REMOVED, removeHandler ); addEventListener( Event.REMOVED_FROM_STAGE, removeHandler ); addEventListener( MouseEvent.MOUSE_DOWN, downUpHandler ); addEventListener( MouseEvent.ROLL_OVER, overOutHandler ); addEventListener( MouseEvent.ROLL_OUT, overOutHandler ); } // events listeners /** * * Cette méthode est utilisée est utilisée pour afficher / cacher le tooltip si celui-ci est défini. * * @param e Un objet de type MouseEvent */ private function overOutHandler(e:MouseEvent):void { if ( m_tooltip == null ) { return; } if ( e.type == MouseEvent.ROLL_OUT ) { m_tooltip.hide(); } else { m_tooltip.show(); } } /** * @private utilisée pour détecter les RELEASE OUTSIDE * @param e */ private function downUpHandler(e:MouseEvent):void { if ( e.type == MouseEvent.MOUSE_DOWN ) { /* * Si on appuie sur le click de la souris alors on cherche à détecter le moment * ou on la relachera que l'on soit sur l'objet ou non. * * */ stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler ); stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler, true ); } else { /* * Si la souris est relâchée, nous n'avons plus besoin d'écouter les événements adéquats. * Nous vérifions ensuite que la souris ne se trouvait pas sur le composant à ce moment là et on dispatch un évenement. * */ stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler ); stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true ); if ( ! hitTestPoint( e.stageX, e.stageY , false ) ) { dispatchEvent( new Event( RELEASE_OUTSIDE, true, true ) ); } } } /** * * Détecte les évenements de type Event.ADDED et Event.ADDED_TO_STAGE et se charge d'appeller les méthodes onAdded ou onAddedToStage. * * @param e évenement de type Event */ private function addedHandler( e:Event ):void { if ( parent != null ) { m_lastParent = parent; } if ( e.type == Event.ADDED ) { onAdded(); } else { onAddedToStage(); } } /** * * Détecte les évenements de type Event.REMOVED et Event.REMOVED_FROM_STAGE et se charge d'appeller les méthodes onRemoved ou onRemovedFromStage. * * @param e évenement de type Event */ private function removeHandler( e:Event ):void { if ( parent != null ) { m_lastParent = parent; } if ( e.type == Event.REMOVED ) { onRemoved(); } else { onRemovedFromStage(); } } // fonctions publiques /** * Détruit proprement le composant */ public function destroy():void { // on cherche à sortir de la display list du parent if ( parent != null && parent.contains( this ) ) { parent.removeChild( this ); } // on supprime proprement tout les objets de note display list while ( numChildren > 0 ) { var child:DisplayObject = removeChildAt( 0 ); child = null; } // on passe la propriété lastParent à null m_lastParent = null; // Enfin, on détruit tout les event listeners removeEventListener( Event.ADDED, addedHandler ); removeEventListener( Event.ADDED_TO_STAGE, addedHandler ); removeEventListener( Event.REMOVED, removeHandler ); removeEventListener( Event.REMOVED_FROM_STAGE, removeHandler ); removeEventListener( MouseEvent.MOUSE_DOWN, downUpHandler ); removeEventListener( MouseEvent.ROLL_OVER, overOutHandler ); removeEventListener( MouseEvent.ROLL_OUT, overOutHandler ); stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler ); stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true ); delete this; } /** * Supprime le composant de la display list de son lastParent */ public function hide():void { if ( parent != null && parent.contains( this ) ) { m_lastParent = parent; parent.removeChild( this ); } } /** * Ajoute le composant à la display list de son lastParent */ public function show():void { visible = true; if ( m_lastParent == null ) return; m_lastParent.addChild( this ); } // fonctions destinées à être overridées /** * Est éxécutée lorsque le composant est ajouté à la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override. */ public function onAdded():void { } /** * Est éxécutée lorsque le composant est supprimé de la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override. */ public function onRemoved():void { } /** * Est éxécutée lorsque le composant est ajouté à la display list du stage, cette méthode prend tout sens dans le cas d'un override. */ public function onAddedToStage():void { } /** * Est éxécutée lorsque le composant est supprimé de la display list du stage, , cette méthode prend tout sens dans le cas d'un override. */ public function onRemovedFromStage():void { } /** * Fonction qui sert à sert à réceptionner et appliquer une skin au composant, cette méthode prend tout son sens dans le cas d'un override. * * @param p_skin Objet qui implémente l'interface ISkin @see */ public function applySkin(p_skin:ISkin):void { } /** * Fonction qui sert à sert à changer la taille d'un composant de manière propre, cette méthode prend tout son sens dans le cas d'un override. * * @param p_width nouvelle largeur du composant * @param p_height nouvelle hauteur du composant */ public function resize(p_width:Number, p_height:Number):void { } // getters / setters /** * Définit un objet de type Tooltip */ public function set tooltip(p_toolTip:Tooltip):void { m_tooltip = addChild( p_toolTip ) as Tooltip; m_tooltip.hide(); } /** * Retourne le tooltip du composant */ public function get tooltip():Tooltip { return m_tooltip; } /** * Renvoie le dernier parent du composant. */ public function get lastParent():DisplayObjectContainer{ return m_lastParent; } } } |
[/codesyntax]
Développement Facile