ActionScript Facile | Chapitre 4 : Création du composant AS3 Button

Version imprimable

27/10/2010, 22h56
The_Pretender

ActionScript Facile | Chapitre 4 : Création du composant AS3 Button

Bonjour tout le monde,

Le Chapitre 4 aborde la partie pratique avec la création de notre premier Composant Graphique : le Button.

Découvrez le Composant AS3 Button.

Notez (lien Note - étoile juste au-dessus) et Commentez cet article via cette discussion

Bonne lecture!
29/10/2010, 20h12
camus3

très intéressant merci , notre petite agence suit tes tutos.
01/11/2010, 14h23
The_Pretender

Merci camus3 pour votre message.
Cela me fait plaisir que mes tutos vous aident et m'encouragent à en écrire d'autres.
03/11/2010, 22h40
danbo52

Sympa

Sympa, mais n'étant pas un pro du code AS3, je dis, et pour les futurs génie du langage universel, sans code:

A quand la construction d'objets informatiques (tel que ton bouton) uniquement par visu en glisser-coller des formes et propriétés à partir de bibliothèques (comme dans ta définition d'objet au sens informatique), afin de rendre accessible, productif, propre et universel l'utilisation d'un langage de construction de logiciels ET d'applications, ce que l'on trouve en partie avec les produits Adobe, et où l'on ne dirait plus C, c++, c#, java, AS3, Lisp, VB, VBA, fortran, cobol, et je ne sais quoi encore ?

Y aurait pas un jour une ch'tiote équipe de férus qui renverserait cette soupe hétérogène de langages qui ne cessent de naitre et de mourir ?
On a bien inventé l'écriture, et depuis un bon bout de temps, on arrive à utiliser ça partout dans le monde, nom d'une pipe en terre de Sienne !

Euh, faire un peu comme avec les pictogrammes pour les petits, mais adapté à des développements tels qu'on les pratique avec les langages d'aujourd'hui ?

Personnellement, quand je vois ce que tu fais, je n'analyse même pas le code, je le pique, en copier coller pour usage. Et pourtant, je me suis assez cassé les dents pour réaliser en AS la mécanique calculée d'une coupe de moteur avec pistons, vilbrequin, bielle, arbres à cames, soupaes et tout le tintouin, et de type wankel (plus fastoche), et de machines de déformation du métal (et j'en passe), pour ceux qui voient ce que c'est. La, les lignes de codes deviennent démentent.

En tous les cas, bravo !
05/11/2010, 00h53
Lorenzo77

salut,

parfait, le code et les explications sont très clairs, c'est agréable :D

j'aurais des questions :
pourquoi utiliser lastParent ?
les méthodes hide/show sont réellement utile ?

j'ai remarqué une "bizarrerie" :

si l'occurrence du bouton est effacé par un removeChild, la méthode destroy() n'est jamais appelé et tous les écouteurs de UIComponent restent actifs (augmentation mémoire+ressources).
il faudrait rajouter le destroy() dans l'évènement Event.REMOVED_FROM_STAGE au niveau du UIComponent pour pouvoir effacer complètement le composant.
05/11/2010, 18h38
The_Pretender

Salut Lorenzo,

Les méthodes hide / show sont très pratiques pour faire apparaitre / disparaitre des composants de la displaylist (ou affichage sur votre interface) tout en conservant une référence vers l'objet créé.

Cela permet de toujours manipuler une instance du composant, tout en le masquant ou non, en fonction des interactions de l'utilisateur.
Et puis ainsi, il n'y a pas besoin de créer une nouvelle instance du composant à chaque fois.

Citation:

si l'occurrence du bouton est effacé par un removeChild, la méthode destroy() n'est jamais appelé et tous les écouteurs de UIComponent restent actifs (augmentation mémoire+ressources).
il faudrait rajouter le destroy() dans l'évènement Event.REMOVED_FROM_STAGE au niveau du UIComponent pour pouvoir effacer complètement le composant.

Effectivement, c'est une excellente remarque. Merci!
A priori, ta solution est intéressante. Toutefois, pour détruire proprement un Composant du Framework ActionScript Facile, il est fortement conseillé d'utiliser les méthodes prévues à cet effet (destroy() ).

Citation:

Envoyé par The_Pretender

Les méthodes hide / show sont très pratiques pour faire apparaitre / disparaitre des composants de la displaylist (ou affichage sur votre interface) tout en conservant une référence vers l'objet créé.

ben normalement on a toujours une référence vers l'occurence .. ex :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var bt:Bouton = new Bouton();// la référence vers l'occurence
this.addChild(bt);// l'afficher
this.removeChild(bt);// l'enlever (le cacher)
this.addChild(bt);// l'afficher encore une fois vu que la référence "bt" existe toujours
 
/**
* le parent peut être trouvé sans avoir besoin de lastParent :
* car la propriété "parent" fait partie de DisplayObject
*/
try{
    (bt.parent).removeChild(bt);
}catch(){}

voila ce que j'ai fait pour mes composants, j'ai juste effacé toutes les méthodes statiques et le Dictionnary :

Code:

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
/* ----------------------------------------------------------------------------
*
*                            classe ComposantBase v1.0
*
* Lorenzo
*
*
* AS >= 3.0
* package commun Flash et Flex
 ------------------------------------------------------------------------------- */
package classes {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.Dictionary;
 
 
 
	/**
	 * @author Lorenzo
	 * 
	 * La classe mere pour tous les composants visuels
	 * 
	 * @example
	 * <listing version="3.0">
	 * </listing>
	 * 
	 * @see
	 */
	public class ComposantBase extends Sprite{
		// -----------------------------------------------------------------------------------
		// DECLARATIONS
		// -----------------------------------------------------------------------------------
 
		// ----------------------------- Parametres utilisateur ------------------------------
 
 
		// -------------------------------- Parametres classe --------------------------------
		// total des occurences de cette classe
		// a repeter dans tous les classes filles
		private static var totalOccurence:uint = 0;
 
		// indique si l'occurence du composant est dans la liste d'affichage
		//INFO: sera utile dans tous les setter pour savoir s'il faut marqueur le composant pour une re-création
		protected var _surScene:Boolean = false;
 
		// Indique s'il faut faire un trace() dans chaque méthode pour indiquer le cheminement des scripts
		public static var DEBUG:Boolean = false;
 
 
		// ----------------------------------- Évenements ------------------------------------
 
		/** 
		 * Propagé quand la construction visuel est fini.
		 * @eventType flash.events.Event.COMPLETE
		 */
		[Event(name = "complete", type = "flash.events.Event.COMPLETE")]
 
 
 
		// -----------------------------------------------------------------------------------
		// CONSTRUCTEUR
		// -----------------------------------------------------------------------------------
 
		/**
		 * Constructeur de ComposantBase
		 */
		public function ComposantBase() {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> ComposantBase()");
			super();
			this.addEventListener(Event.ADDED_TO_STAGE, this.evtThisAddedToStage, false, 0, true);
			this.addEventListener(Event.REMOVED_FROM_STAGE, this.evtThisRemovedFromStage, false, 0, true);
			// a repeter dans tous les classes filles
			this.name = "ComposantBase" + totalOccurence;
			ComposantBase.totalOccurence++;
		}
 
 
 
		// -----------------------------------------------------------------------------------
		// METHODES STATIQUES
		// -----------------------------------------------------------------------------------
 
 
 
		// -----------------------------------------------------------------------------------
		// METHODES PRIVATE
		// -----------------------------------------------------------------------------------
 
		/**
		 * Lancer la recréation de l'occurence.
		 */
		private function lanceurRecreation(ev:Event = null):void {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> lanceurRecreation()");
			if( this._surScene == false ){
				return;
			}
 
			this.dessiner();
 
			this.removeEventListener(Event.ENTER_FRAME, lanceurRecreation);
			this.dispatchEvent(new Event(Event.COMPLETE));
		}
 
 
 
		// -----------------------------------------------------------------------------------
		// METHODES PROTECTED
		// -----------------------------------------------------------------------------------
 
		/**
		 * Marquage de l'occurence comme devant être re-crée.
		 * //INFO: Cette méthode doit être executé dans les "setter" (lorsque qu'une propriété est modifié de l'extérieur).
		 * //INFO: les modifications des propriétés par la classe ne doivent pas passer par les setters pour des raisons de performances
		 */
		protected function marqueurRecreation():void {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> marqueurRecreation()");
			this.addEventListener(Event.ENTER_FRAME, lanceurRecreation);
		}
 
		/**
		 * Dessiner la représentation visuel de l'occurence.
		 * Les classes enfants doivent étendre cette méthode.
		 */
		protected function dessiner(ev:Event = null):void {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> dessiner()");
		}
 
		/**
		 * Detruire le composant et son contenu (removeChild() + effacement evenements).
		 * l'occurence ne peut plus être ajouté à la liste d'affichage aprés execution de cette méthode
		 * Les classes enfants doivent étendre cette méthode pour y effacer leurs évenements + destruction références.
		 */
		protected function detruire():void {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> detruire()");
			while (this.numChildren > 0) {
				this.removeChildAt(0);
			}
			this.graphics.clear();
 
			this.removeEventListener(Event.ENTER_FRAME, lanceurRecreation);
			this.removeEventListener(Event.ADDED_TO_STAGE, evtThisAddedToStage);
			this.removeEventListener(Event.REMOVED_FROM_STAGE, evtThisRemovedFromStage);
		}
 
 
 
		// -----------------------------------------------------------------------------------
		// METHODES PUPLIQUES
		// -----------------------------------------------------------------------------------
 
		/**
		 * Représentation sous forme de chaîne de l’occurence.
		 */
		public override function toString():String {
			return  "lol.controle.ComposantBase : name=" + this.name;
		}
 
 
 
		// -----------------------------------------------------------------------------------
		// EVENEMENTS
		// -----------------------------------------------------------------------------------
 
		// ----------------- gestion de l'occurence dans la liste d'affichage ----------------
		protected function evtThisAddedToStage(ev:Event = null):void {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> evtThisAddedToStage()");
			this._surScene = true;
			this.dessiner();
		}
		protected function evtThisRemovedFromStage(ev:Event = null):void {
			if ( DEBUG ) trace("lol.controle.ComposantBase -> evtThisRemovedFromStage()");
			this._surScene = false;
			this.detruire();
		}
 
 
 
		// -----------------------------------------------------------------------------------
		// GET/SET
		// -----------------------------------------------------------------------------------
 
	}
}

si tu te demandes ce que viennent faire les méthodes "marqueurRecreation" et "lanceurRecreation", la réponse ici : http://web.codeur.free.fr/index.php/...-performances/

08/11/2010, 23h02
The_Pretender

Merci Lorenzo pour le partage de ta classe Mère AS3.

C'est très intéressant de visualiser une autre façon de programmer des Composants en AS3.

Comme ça les développeurs AS3 auront un exemple supplémentaire pour les aider.

Ton astuce pour augmenter les performances lors de la modification des propriétés d'un composant est très astucieuse:ccool:

J'ai remarqué des trace() dans ton code.
Pour le Debug de mes RIA Flash en ligne, j'utilise l’extension Firebug sous Firefox.
Et pour l'AS3 : Flash Thunderbolt : Logging ActionScript projects using Firebug within Firefox!

J'ai posté un tutoriel abordant le debug en ligne dans Flash.
02/03/2011, 11h29
Fryck

Salut,

J'ai 2 petites questions :

Est-on obligé de créer les classes (vide) des Skins du genre créer une classe ButtonOverSkin dans (par exemple) com.toto.skin.button ? car j'ai une erreur "Variable non définie com.toto.skin.button.ButtonOverSkin" dans DefaultButtonSkin.as.

J'ai créée un ui.fla avec mes 3 composants graphiques correspondant aux 3 états, chacun linkés sur leur classes respectives com.toto.skin.button.ButtonOverSkin, com.toto.skin.button.ButtonDownSkin, com.toto.skin.button.ButtonUpSkin.

Exporté dans l'image 1, et héritant de flash.display.Sprite

comme ça ne marché pas j'ai créer ces classes vide, en me disant que le compilateur allait trouver dans le ui.swc les elements graphiques à instancier, mais visiblement non, car j'ai testé un addChild( new com.toto.skin.button.ButtonOverSkin() ) et rien à l'affichage.

Merci d'avance ;)
02/03/2011, 13h07
The_Pretender

Bonjour Fryck,

Je t'invite à consulter ce tutoriel qui détaille la création des Skins : Création du Graphisme des Composants AS3 Facile
02/03/2011, 17h52
Fryck

Oui, c'est juste que je n'étais pas dans le même ApplicationDomain, car je chargé un swf externe... c'est sur que si les assets sont sotckés dans le même flash "principal" cela fonctionne.

En fait je désire, avoir un SWF dédié au skin, où les designers peuvent éventuellement "s'amuser" dessus.
Mon application à un Preloader, il se charge l'application principal, mais aussi les assets, donc le SWF en question, mais je sais pas comment accèder aux ressources de SWF skin via l'application chargé dynamiquement.

Il te suffit de compiler tes graphismes dans un swf.
Ensuite ton application principale charge ce swf de graphismes.

ET tu as accès à tes graphismes directement en AS3.

Ainsi les graphistes peuvent recompiler seulement les graphismes.swf sans toucher à l'application principale pour mettre à jour l'ensemble des graphismes de ton application.

Voici rapidement le code à utiliser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var oLoader:Loader = new Loader();
 
			oLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler );
			oLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler );
 
			// chargement de librairies partagées
			var sLib:String = "ui.swf?r = "+Math.random()*28;
			var file:URLRequest =  new URLRequest(sLib);
			Logger.debug ("swf library : " + sLib);
 
			var context:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
			oLoader.load(file, context);

Puis

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
LoaderInfo(event.target).removeEventListener(Event.COMPLETE, completeHandler);
 
			// affichage des images de la bibliothèque partagée
			var oBackClass1:Class = getDefinitionByName("green")  as  Class;
			var oBack1:Bitmap = new Bitmap( new oBackClass1() );
			addChild( oBack1 );
 
			var oBackClass2:Class = getDefinitionByName("ile")  as  Class;
			var oBack2:Bitmap = new Bitmap( new oBackClass2() );
			oBack2.x = 250;
			oBack2.y = 250;
			addChild( oBack2 );
 
			var oBackClass3:Class = getDefinitionByName("plage")  as  Class;
			var oBack3:Bitmap = new Bitmap( new oBackClass3() );
			oBack3.x = 550;
			oBack3.y = 550;
			addChild( oBack3 );

Pour information, tout ceci est expliqué en détails dans le programme de Formation AS3 Facile, avec plusieurs autres concepts de bases indispensables à maitriser en AS3.

02/04/2011, 18h20
billclinton

super tuto !
je commence flex et je me retrouve sur un projet existant qui est entièrement codé en procédural et code spaghetti
je savais pas que l'on pouvait faire des objets en actionscript donc je vais reprendre les idées ;)