Sortant tout juste d'un développement utilisant des composants Macromedia à profusion, j'ai pas la même occasion eu l'opportunité de commencer à fréquenter le model évenementiel de ceux-ci, introduit par la classe EventDispatcher ... En effet, jusqu'à aujourd'hui, j'étais assez satisfait des services de AsBroadcaster (d'ailleurs, je ne trouve toujours pas d'utilité à la classe BroadcasterMX, offrant exactement la même chose mais en AS, donc moins performant) ...

Il ne m'a pas fallu longtemps pour me rendre compte de l'interêt de ce nouveau système, que ce soit en terme d'externalisation de l'interception des événements (même si c'était déjà possible avant), de performance acrues du fait de la diffusion propre à chaque évenement, mais aussi et surtout de souplesse grâce à la délégation d'évenement. D'ailleurs, je suis bien fan de la classe EventDelegate à mon sens bien plus élégante que Delegate, fourni avec la MAJ 7.2 de Flash.

J'ai donc suivi la voie tracée par Grant Skinner, qui propose ses classes XML2 et LoadVars2, utilisant EventDispatcher, en créant ma classe fille de l'illustre Tween de Penner (maintenant intégrée à la distribution de Flash MX 2004 en tant que mx.transitions.Tween), qui utilise dorénavant EventDispatcher.

Deux petits avantages mineurs amenés aussi par cette version sont qu'on ne peut du coup plus utiliser les méthodes "old-school" directement avec l'objet Tween, qui sont devenues des membres privés, forcant à externaliser le code sous forme d'écouteurs, et également le typage fort des paramètres du constructeur ... En gros, ca oblige un peu plus à faire les choses correctement

Exemple d'utilisation :import com.lalex.animation.Tween2;
import com.robertpenner.easing.Expo;
var tw:Tween2 = new Tween2(myClip, "_x", Expo.easeOut, 100, 300, 32);
var listen:Object = {};
listen.motionChanged = function(e:Object) {
   trace("Clip position : " + e.position);
}
tw.addEventListener("motionChanged", listen);
On peut imaginer que les "classes" (?) telles que Mouse; Stage ou Keyboard pourraient être remplacées par leur "version 2" assez facilement (sans héritage celle-là par contre), mais cela mérite des tests : je ne suis pas persuadé des performances prodiguées par des évenements qui interviennent aussi souvent ... :o

::Télécharger Tween2.zip::

Pour continuer dans la série des 0.1, voici aujourd'hui une classe que je termine tout juste, servant à gérer le positionnement et la taille de clips dans des animations Flash plein écran. En effet, alors qu'il est maintenant possible de créer des site Flash occupant la totalité d'une fenêtre grâce à la classe Stage, trés peu de site l'utilisent ...

J'ai donc crée ce set de classe afin de faciliter la gestion des clips dans cette situation précise. On peut ainsi décider de la position d'un clip et de son alignement sur la scène, ainsi que sa taille. Il est ainsi possible de profiter presque de la même souplesse qu'offre HTML pour des applications qui pourraient ainsi occuper la totalité de la surface de l'animation.

Voici un exemple d'utilisation:import com.lalex.stage.StageManager;
import com.lalex.movieclip.SuperClip;
var stageMgr:StageManager = StageManager.getInstance();
// Alignement en haut à gauche, sans marge, de largeur 100%, hauteur inchangée
stageMgr.addElement(new SuperClip(_root.taskbar), {align:"left,top", margin:0, size:"100%,none"});
// Aligné à droite, avec une marge (à droite) de 10px
stageMgr.addElement(new SuperClip(_root.rightMenu), {align:"right", margin:10});
// Aligné en bas avec une marge (verticale) de 5% de la hauteur de l'anim
stageMgr.addElement(new SuperClip(_root.footer), {align:"bottom", margin:"none,5%"});
Bien qu'il manque encore des fonctionnalités ou des options de positionnement, StageManager est dors et déjà utilisable, et la classe SuperClip devrait donner naissance à une fonctionnalité similaire aux méthodes de positionnement de Stéphan Guénette.

L'utilisation de la composition dans SuperClip permet ainsi de gérer des clips dont le redimensionnement devrait se faire de manière spécifique, comme des composants par exemple. Il suffirait alors de créer une classe qui implémente l'interface IClip. Bref, en créant la classe appropriée, vous pouvez gérer virtuellement tout objet qui s'affiche à l'écran.

::Télécharger StageManager.zip::

On vient de me faire remarquer que la dernière version du color_toolkit de Robert PENNER permet également de gérer le contraste d'un clip. Je me suis donc empressé de rajouter ces fonctionnalités à ma classe SuperColor qui passe pour l'occasion en version 0.3.

J'en ai également profité pour modifier le nom du package : en effet, avec un nom de domaine comme www.lalex.com, il est plus logique de garder com.lalex en nom de package ... même si le coté commercial ne me plait pas vraiment ! :o

/**
 * Super Color
 * extended Color class
 *
 * -----------------------------------
 *
 * Based on <a href="http://www.robertpenner.com/">Robert PENNER</a> Color Toolkit v1.3
 *
 * Properties
 *
 *   _brightness
 *   _brightOffset
 *   _contrast
 *   _negative
 *
 *   _rgb
 *   _rgbStr
 *   _red
 *   _green
 *   _blue
 *
 *   _redPercent
 *   _greenPercent
 *   _bluePercent
 *
 *   _redOffset
 *   _greenOffset
 *   _blueOffset
 *
 * Methods
 *
 *   getTarget()
 *
 *   setRGBStr()
 *   getRGBStr()
 *   setRGB2()
 *   getRGB2()
 *   reset()
 *
 *   setBrightness()
 *   getBrightness()
 *   setBrightOffset()
 *   getBrightOffset()
 *       setContrast()
 *   getContrast()
 *
 *   getNegative()
 *   setNegative()
 *   invert()
 *
 *   setTint()
 *   getTint()
 *   setTint2()
 *   getTint2()
 *   setTintOffset()
 *   getTintOffset()
 *
 *   setRed()
 *   getRed()
 *   setGreen()
 *   getGreen()
 *   setBlue()
 *   getBlue()
 *
 *   setRedPercent()
 *   getRedPercent()
 *   setGreenPercent()
 *   getGreenPercent()
 *   setBluePercent()
 *   getBluePercent()
 *
 *   setRedOffset()
 *   getRedOffset()
 *   setGreenOffset()
 *   getGreenOffset()
 *   setBlueOffset()
 *   getBlueOffset()
 *
 * @version 0.3
 * @author <a href="http://www.lalex.com/">LAlex</a>
 * @since 19/08/2004
 */
class com.lalex.movieclip.SuperColor extends Color {
        private var _targetMC:MovieClip;
        /**
         * Constructor
         * @param clip Clip to apply the color
         */
        function SuperColor(clip:MovieClip) {
                super(clip);
                _targetMC = clip;
        }
        /**
         * Returns affected clip
         * @return Targeted MovieClip
         */
        public function getTarget():MovieClip {
                return _targetMC;
        }
                // ----------o RGB


        /**
         * Set an RGB value from an hexadecimal string
         * @param hexStr Hexadecimal value string
         */
        public function setRGBStr(hexStr:String) {
                // grab the last six characters of the string
                hexStr = hexStr.substr (-6, 6);
                setRGB (parseInt (hexStr, 16));
        }
        /**
         * Get the RGB value as a string
         * @return Hexadecimal value string
         */
        public function getRGBStr():String {
                var hexStr:String = getRGB().toString(16);
                // fill in zeroes as needed
                var toFill:Number = 6 - hexStr.length;
                while (toFill--) hexStr = "0" + hexStr;
                return hexStr.toUpperCase();
        }
        /**
         * Set red, green, and blue with normal numbers
         * @param r Red value between 0 and 255
         * @param g Greeb value between 0 and 255
         * @param b Blue value between 0 and 255
         */
        public function setRGB2(r:Number, g:Number, b:Number) {
                setRGB (r << 16 | g << 8 | b);
        } // Branden Hall - <a href="http://www.figleaf.com">www.figleaf.com</a>
        /**
         * @return Object with r, g, and b properties
         */
        public function getRGB2():Object {
                var t = getTransform();
                return {r:t.rb, g:t.gb, b:t.bb};
        }
        /**
         * Reset the color object to normal
         */
        public function reset() : Void {
                setTransform ({ra:100, ga:100, ba:100, rb:0, gb:0, bb:0});
        }


                // ----------o Brightness


        /**     
         * Brighten just like Property Inspector of MovieClip
         * @param val Brightness between -100 and 100
         */
        public function setBrightness(val:Number) {
                var trans:Object = getTransform();
                with (trans) {
                        ra = ga = ba =  100 - Math.abs(val);
                        rb = gb = bb = (val > 0) ? val * (256/100) : 0;
                }
                setTransform(trans);
        }
        /**
         * @return Brightness set with setBrightness
         * @see setBrightness
         */
        public function getBrightness():Number {
                var trans:Object = getTransform();
                with (trans) {
                        return rb ? 100 - ra : ra - 100;
                }
        }
        /**
         * Set brightness offset
         * @param val Offset between -255 and 255
         */
        public function setBrightOffset(val:Number) {
                var trans:Object = getTransform();
                with (trans) {
                        rb = gb = bb = val;
                }
                setTransform(trans);
        }
        /**
         * @return Brightness set with setBrightOffset
         * @see setBrightOffset
         */
        public function getBrightOffset():Number {
                return getTransform().rb;
        }


                // ----------o Contrast
        /**
         * Set contrast
         * @param val Percent between -100 and 100
         */
        public function setContrast(val:Number) {
                var trans:Object = {};
                trans.ra = trans.ga = trans.ba = val;
                trans.rb = trans.gb = trans.bb = 128 - (128/100 * val);
                setTransform(trans);
        }
        /**
         * @return Contrast set with setContrast
         * @see setContrast
         */
        public function getContrast():Number {
            return getTransform().ra;
        }
                // ----------o Negative and invert

        /**
         * Produce a negative image of the normal appearance
         * @param percent Between 0 and 100
         */
        public function setNegative(percent:Number) {
            var t:Object = {};
            t.ra = t.ga = t.ba = 100 - 2 * percent;
            t.rb = t.gb = t.bb = percent * (255/100);
            setTransform (t);
        }
        /**
         * @return Negative percentage
         * @see setNegative
         */
        public function getNegative():Number {
            return getTransform().rb * (100/255);
        }
        /**
         * Invert the current color values
         */
        public function invert() {
                var trans:Object = getTransform();
                with (trans) {
                        ra = -ra;
                        ga = -ga;
                        ba = -ba;
                        rb = 255 - rb;
                        gb = 255 - gb;
                        bb = 255 - bb;
                }
                setTransform (trans);
        }


                // ----------o Tint


        /**
         * Tint with a color just like Property Inspector
         * @param r Red value between 0 and 255
         * @param g Greeb value between 0 and 255
         * @param b Blue value between 0 and 255
         * @param percent Between 0 and 100
         */
        public function setTint(r:Number, g:Number, b:Number, percent:Number) {
                var ratio = percent / 100;
                var trans = {rb:r*ratio, gb:g*ratio, bb:b*ratio};
                trans.ra = trans.ga = trans.ba = 100 - percent;
                setTransform (trans);
        }
        /**
         * @return tint object containing r, g, b, and percent properties
         * @see setTint
         */
        public function getTint():Object {
                var trans:Object = getTransform();
                var tint:Object = {percent: 100 - trans.ra};
                var ratio:Number = 100 / tint.percent;
                tint.r = trans.rb * ratio;
                tint.g = trans.gb * ratio;
                tint.b = trans.bb * ratio;
                return tint;
        }
        /**
         * tint with a color - alternate approach
         * @param rgb Color number between 0 and 0xFFFFFF
         * @param percent Between 0 and 100
         */
        public function setTint2(rgb:Number, percent:Number) {
                var r:Number = (rgb >> 16) ;
                var g:Number = (rgb >> <img src="http://common.lalex.com/themes/devblog/smilies/icon_cool.gif" alt="8)" class="smiley" /> & 0xFF;
                var b:Number = rgb & 0xFF;
                var ratio:Number = percent / 100;
                var trans:Object = {rb:r*ratio, gb:g*ratio, bb:b*ratio};
                trans.ra = trans.ga = trans.ba = 100 - percent;
                setTransform (trans);
        }
        /**
         * @return a tint object containing rgb (a 0xFFFFFF number) and percent properties
         * @see setTint2
         */
        public function getTint2():Object {
                var trans:Object = getTransform();
                var tint:Object = {percent: 100 - trans.ra};
                var ratio:Number = 100 / tint.percent;
                tint.rgb = (trans.rb*ratio)<<16 | (trans.gb*ratio)<<8 | trans.bb*ratio;
                return tint;
        }


                // ----------o Tint offset


        /**
         * @param r Red value between 0 and 255
         * @param g Greeb value between 0 and 255
         * @param b Blue value between 0 and 255
         */
        public function setTintOffset(r:Number, g:Number, b:Number) {
                var trans:Object = getTransform();
                with (trans) {
                        rb = r;
                        gb = g;
                        bb = b;
                }
                setTransform (trans);
        }
        /**
         * @return Object containing r, g, b properties
         * @see setTintOffset
         */
        public function getTintOffset():Object {
                var t:Object = getTransform();
                return {r:t.rb, g:t.gb, b:t.bb};
        }


                // ----------o Color values

        /**
         * Set red value
         * @param amount Between 0 and 255
         */
        public function setRed(amount:Number) {
                var t = getTransform();
                setRGB (amount << 16 | t.gb << 8 | t.bb);
        }
        /**
         * Get red value
         * @return Value between 0 and 255
         * @see setRed
         */
        public function getRed():Number {
                return getTransform().rb;
        }
        /**
         * Set green value
         * @param amount Between 0 and 255
         */
        public function setGreen(amount:Number) {
                var t = getTransform();
                setRGB (t.rb << 16 | amount << 8 | t.bb);
        }
        /**
         * Get green value
         * @return Value between 0 and 255
         * @see setGreen
         */
        public function getGreen():Number {
                return getTransform().gb;
        }
        /**
         * Set blue value
         * @param amount Between 0 and 255
         */
        public function setBlue(amount:Number) {
                var t = getTransform();
                setRGB (t.rb << 16 | t.gb << 8 | amount);
        }
        /**
         * Get blue value
         * @return Value between 0 and 255
         * @see setBlue
         */
        public function getBlue():Number {
                return getTransform().bb;
        }


                // ----------o Color percentages

        /**
         * Set red percentage
         * @param percent Between -100 and 100
         */
        public function setRedPercent(percent:Number) {
                var trans:Object = getTransform();
                trans.ra = percent;
                setTransform (trans);
        }
        /**
         * Get red percentage
         * @return Value between -100 and 100
         * @see setRedPercent
         */
        public function getRedPercent():Number {
                return getTransform().ra;
        }
        /**
         * Set green percentage
         * @param percent Between -100 and 100
         */
        public function setGreenPercent(percent:Number) {
                var trans:Object = getTransform();
                trans.ga = percent;
                setTransform (trans);
        }
        /**
         * Get green percentage
         * @return Value between -100 and 100
         * @see setGreenPercent
         */
        public function getGreenPercent():Number {
                return getTransform().ga;
        }
        /**
         * Set blue percentage
         * @param percent Between -100 and 100
         */
        public function setBluePercent(percent:Number) {
                var trans:Object = getTransform();
                trans.ba = percent;
                setTransform (trans);
        }
        /**
         * Get blue percentage
         * @return Value between -100 and 100
         * @see setBluePercent
         */
        public function getBluePercent():Number {
                return getTransform().ba;
        }


                // ----------o Color offsets

        /**
         * Set red offset
         * @param offset Between -255 and 255
         */
        public function setRedOffset(offset:Number) {
                var trans:Object = getTransform();
                trans.rb = offset;
                setTransform (trans);
        }
        /**
         * Get red offset
         * @return Value between -255 and 255
         * @see setRedOffset
         */
        public function getRedOffset():Number {
                return getTransform().rb;
        }
        /**
         * Set green offset
         * @param offset Between -255 and 255
         */
        public function setGreenOffset(offset:Number) {
                var trans:Object = getTransform();
                trans.gb = offset;
                setTransform (trans);
        }
        /**
         * Get green offset
         * @return Value between -255 and 255
         * @see setGreenOffset
         */
        public function getGreenOffset():Number {
                return getTransform().gb;
        }
        /**
         * Set blue offset
         * @param offset Between -255 and 255
         */
        public function setBlueOffset(offset:Number) {
                var trans:Object = getTransform();
                trans.bb = offset;
                setTransform (trans);
        }
        /**
         * Get blue offset
         * @return Value between -255 and 255
         * @see setBlueOffset
         */
        public function getBlueOffset():Number {
                return getTransform().bb;
        }

                // ----------o Getter/Setter

        /**
         * RGB value
         * @type Number
         */
        function set _rgb(val:Number) {
                setRGB(val);
        }
        function get _rgb():Number {
                return getRGB();
        }
        /**
         * RGB value
         * @type String
         */
        function set _rgbStr(val:String) {
                setRGBStr(val);
        }
        function get _rgbStr():String {
                return getRGBStr();
        }
        /**
         * Brightness value
         * @type Number
         */
        function set _brightness(b:Number) {
                setBrightness(b);
        }
        function get _brightness():Number {
                return getBrightness();
        }
        /**
         * Brightness offset
         * @type Number
         */
        function set _brightOffset (b:Number) {
                setBrightOffset(b);
        }
        public function get _brightOffset():Number {
                return getBrightOffset();
        }
        /**
         * Contrast
         * @type Number
         */
        function set _contrast (c:Number) {
                setContrast(c);
        }
        public function get _contrast():Number {
                return getContrast();
        }
        /**
         * Negative percentage
         * @type Number
         */
        public function set _negative(p:Number) {
                setNegative(p);
        }
        public function get _negative():Number {
                return getNegative();
        }
        /**
         * Red value
         * @type Number
         */
        public function set _red(v:Number) {
                setRed(v);
        }
        public function get _red():Number {
                return getRed();
        }
        /**
         * Green value
         * @type Number
         */
        public function set _green(v:Number) {
                setGreen(v);
        }
        public function get _green():Number {
                return getGreen();
        }
        /**
         * Blue value
         * @type Number
         */
        public function set _blue(v:Number) {
                setBlue(v);
        }
        public function get _blue():Number {
                return getBlue();
        }
        /**
         * Red percentage
         * @type Number
         */
        public function set _redPercent(v:Number) {
                setRedPercent(v);
        }
        public function get _redPercent():Number {
                return getRedPercent();
        }
        /**
         * Green percentage
         * @type Number
         */
        public function set _greenPercent(v:Number) {
                setGreenPercent(v);
        }
        public function get _greenPercent():Number {
                return getGreenPercent();
        }
        /**
         * Blue percentage
         * @type Number
         */
        public function set _bluePercent(v:Number) {
                setBluePercent(v);
        }
        public function get _bluePercent():Number {
                return getBluePercent();
        }
        /**
         * Red offset
         * @type Number
         */
        public function set _redOffset(v:Number) {
                setRedOffset(v);
        }
        public function get _redOffset():Number {
                return getRedOffset();
        }
        /**
         * Green offset
         * @type Number
         */
        public function set _greenOffset(v:Number) {
                setGreenOffset(v);
        }
        public function get _greenOffset():Number {
                return getGreenOffset();
        }
        /**
         * Blue offset
         * @type Number
         */
        public function set _blueOffset(v:Number) {
                setBlueOffset(v);
        }
  &nbs