Egalement, pour l'expliquer à la manière de craps_youpla... faire de la poo, c'est "encapsuler" les données pour n'avoir plus qu'a instancier un objet et l'utiliser, plutôt que d'avoir une tonne de code sur ta timeline.
Mais ça va aussi bien plus loin. Il y a beaucoup de "design patterns" applicables en orienté objet, et c'est là toute la force de cette manière de programmer... c'est relativement simple de faire une classe, de l'instancier et de l'utiliser, puis de dire "yeah, je fais de la poo".
En réalité, la poo va beaucoup plus loin dans l'assemblage d'objets. La délégation, le MVC, l'Observer, le Singleton, le ServiceLocator couplé au pattern Command pour l'exécution de commandes vers le serveur, etc... Il y a plein de subtilités qui sont assez complexes au premier abord, mais très intéressantes à implémenter lorsqu'on les a compris.
Pour ce qui est du linkage de classes avec la bibliothèque, il existe 2 méthodes : soit tu hérite ta classe de MovieClip, soit tu fais de la composition. J'ai ma préférence pour la composition, car l'héritage nécessite d'aller toucher aux éléments de la librairie. développant en général avec mtasc (et swfmill pour générer les librairies), il est plus difficile de faire cette liaison par héritage.
La composition se distingue par la chose suivante : c'est une classe à laquelle on passe en paramètre au constructeur le "parent", le movieClip qui va l'héberger.
A partir du parent, on va faire un "createEmptyMovieClip" pour créer un nouveau mc qui correspondra à l'élément de base de la classe.
On manipule ensuite ce mc grace aux méthodes de la classe. ça implique que "this" ne correspond pas au mc mais à la classe elle-même, lorsqu'on code. Mais mis à part ce détail, ça revient à peu près au même que de développer par héritage.
Voici un exemple basique de composition (basique... bon, il est déjà un peu long, mais y a les commentaires avec...) :
Code :
- import mx.events.EventDispatcher;
- import com.bourre.commands.Delegate;
- [Event( 'press' )]
- // --------------------------------------------------------------------------------
- /**
- * @class HaircolorButton
- * @author titouille
- * @version 0.1
- * @date 11.08.2006
- * @description <p>Design HaircolorButton</p>
- */
- class ch.titouille.controls.HaircolorButton
- {
- // --------------------------------------------------------------------------------
- // VARIABLES DECLARATIONS
- /**
- */
- public static var SymbolName:String = "ch.titouille.controls.HaircolorButton";
- public static var SymbolOwner = ch.titouille.controls.HaircolorButton;
- private static var isSymbolLinked = Object.registerClass('__Packages.ch.titouille.controls.HaircolorButton', SymbolOwner);
- private var nColor:Number;
- private var nH:Number;
- private var nW:Number;
- // --------------------------------------------------------------------------------
- // CONTROLS DECLARATIONS
- /**
- */
- private var _targetMC:MovieClip;
- // --------------------------------------------------------------------------------
- // FUNCTIONS DECLARATION
- // --------------------------------------------------------------------------------
- // --------------------------------------------------------------------------------
- /**
- * @var dispatchEvent:Function to broadcast event from EventDispatcher
- * @var addEventListener:Function to add listener on component
- * @var removeEventListener:Function to remove listener on component
- */
- public var dispatchEvent :Function;
- public var addEventListener :Function;
- public var removeEventListener :Function;
- public var removeMovieClip :Function;
- private static var eventDispatcherInitialized = EventDispatcher.initialize(HaircolorButton.prototype);
- // --------------------------------------------------------------------------------
- // EVENTS DECLARATIONS
- // --------------------------------------------------------------------------------
- /**
- */
- // --------------------------------------------------------------------------------
- // CONSTRUCTOR
- // --------------------------------------------------------------------------------
- /**
- * @constructor
- */
- function HaircolorButton( instanceName:String, target:MovieClip, depth:Number, props:Object, mcProps:Object )
- {
- _targetMC = target.createEmptyMovieClip( instanceName, depth );
- _targetMC.gotoAndStop(1);
- for( var val:String in props )
- this[val] = props[val];
- init( mcProps );
- }
- // --------------------------------------------------------------------------------
- // --------------------------------------------------------------------------------
- // INITIALISATION AND BASE METHODS
- // --------------------------------------------------------------------------------
- /**
- * initialize the control
- *
- * @param props:Object properties to add to the control
- * @return Void
- */
- private function init( props ):Void
- {
- for( var val:String in props )
- this[val] = props[val];
- _targetMC.focusEnabled = true;
- _targetMC._focusrect = true;
- createChildren();
- }
- // --------------------------------------------------------------------------------
- /**
- * initialize the control
- *
- * @param props:Object properties to add to the control
- * @return Void
- */
- private function createChildren()
- {
- colorElement();
- _targetMC.onPress = Delegate.create( this, press );
- }
- // --------------------------------------------------------------------------------
- /**
- * move the control to the x:y positions
- *
- * @param x:Number x position
- * @param y:Number y position
- * @return Void
- */
- public function move( x:Number, y:Number ):Void
- {
- _targetMC._x = x;
- _targetMC._y = y;
- }
- // --------------------------------------------------------------------------------
- // GETTER / SETTER
- // --------------------------------------------------------------------------------
- /**
- * set visibility
- *
- * @param state:Boolean state of property
- * @return Void
- */
- public function setVisible( state:Boolean ):Void
- {
- _targetMC._visible = state;
- }
- // --------------------------------------------------------------------------------
- /**
- * get visibility
- *
- * @return Boolean
- */
- public function getVisible():Boolean
- {
- return _targetMC._visible;
- }
- // --------------------------------------------------------------------------------
- /**
- * get color
- *
- * @return Number
- */
- public function getColor():Number
- {
- return nColor;
- }
- // --------------------------------------------------------------------------------
- // HANDLERS
- // --------------------------------------------------------------------------------
- /**
- * press handler
- *
- * @return Void
- */
- private function press():Void
- {
- dispatchEvent( { type:'press', color:nColor } );
- }
- // --------------------------------------------------------------------------------
- // DRAW METHODS
- // --------------------------------------------------------------------------------
- /**
- * draw rect in movieClip
- *
- * @return Void
- */
- private function colorElement():Void
- {
- with( _targetMC )
- {
- beginFill( nColor, 100 );
- moveTo( 0, 0 );
- lineTo( nW, 0 );
- lineTo( nW, nH );
- lineTo( 0, nH );
- lineTo( 0, 0 );
- endFill();
- }
- }
- }
|
En fait, c'est un bouton paramétrable au niveau de la couleur, la largeur et la hauteur.
Dans ma classe principale, je n'ai plus qu'a faire :
Code :
- var myNewHairColorButton:HaircolorButton = new HaircolorButton( 'myNewHairColorButton', _level0, 10, { nW:100, nH:50, nColor:0xff0000 }, {} );
|
et mon bouton est créé. Je peux ensuite utiliser la méthode "move( x, y )" pour le déplacer.
Dans mon cas, je passe 2 objets dans le constructeur. Le premier peut contenir des valeurs de variables internes à la classe (nW, nH, nColor), le second peut contenir des valeurs de propriétés du movieClip qui sert d'instance principale à ma classe. J'aurai pu y passer des propriétés tels que _x, _y, _xscale, _yscale, etc...
Ainsi, tout le code de mon bouton est dans une classe, et lorsque je veux créer un nouveau bouton, je n'ai plus qu'a l'instancier.
Le code est relativement simple, je n'ai pas voulu compliquer... Mais on pourrait imaginer :
- rajouter une valeur par défaut à la propriété nColor (voir la section déclaration de variables) :
Code :
- private var nColor:Number = 0x00ff00;
|
- rajouter une méthode "setColor( color:Number )" qui permette de recoloriser le carré après son instanciation : (voir la section getters/setters) Il faudrai d'abord rajouter la ligne
en début de méthode colorElement, puis rajouter la méthode suivante :
Code :
- public function setColor( color:Number ):Void
- {
- nColor = color;
- colorElement();
- }
|
Ensuite, on n'aurai plus qu'a appeler :
Code :
- myNewHairColorButton.setColor( 0xff00ff );
|
pour modifier la couleur du bouton.
Je pourrais également aller puiser des éléments dans la bibliothèque à coups d'attachMovie pour rattacher des graphiques en vue de personnaliser mon bouton. Les possibilités sont multiples.
Et il est intéressant de regarder la méthode "press" qui utilise l'eventDispatcher afin de générer un évenement lorsqu'on presse sur le bouton.
Cet évenement peut être intercepté dans la scène principale en utilisant les mêmes méthodes que les composants V2 :
Code :
- myNewHairColorButton.addEventListener( 'press', new Delegate( this, pressColorButton ) );
- function pressColorButton( evt:Object ):Void
- {
- trace( evt.color ); // récupération de la couleur, passée dans la classe via la méthode dispatchEvent
- }
|
La gestion d'évenement est intégrée via l'eventDispatcher, donc on a tout ce qu'il faut pour faire du travail propre.
Voilà, en espérant que ça soit compréhensible, lol
a++