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);
        }
        public function get _blueOffset():Number {
                return getBlueOffset();
        }
}

::Télécharger SuperColor.zip::

Un des aspects pas pratiques de la classe Color est l'impossibilité de que l'on a de récupérer le clip ciblé par cet objet. J'ai donc un peu modifié ma classe SuperColor afin qu'elle contienne une méthode qui renvoie une référence au clip affecté par les changements de couleurs :
/**
 * Super Color
 * extended Color class
 *
 * -----------------------------------
 *
 * Based on <a href="http://www.robertpenner.com/">Robert PENNER</a> Color Toolkit v1.2
 *
 * Properties
 *
 *   _brightness
 *   _brightOffset
 *   _negative
 *
 *   _rgb
 *   _rgbStr
 *   _red
 *   _green
 *   _blue
 *
 *   _redPercent
 *   _greenPercent
 *   _bluePercent
 *
 *   _redOffset
 *   _greenOffset
 *   _blueOffset
 *
 * Methods
 *
 *   getTarget()
 *
 *   setRGBStr()
 *   getRGBStr()
 *   setRGB2()
 *   getRGB2()
 *   reset()
 *
 *   setBrightness()
 *   getBrightness()
 *   setBrightOffset()
 *   getBrightOffset()
 *
 *   setTint()
 *   getTint()
 *   setTint2()
 *   getTint2()
 *   setTintOffset()
 *   getTintOffset()
 *
 *   getNegative()
 *   setNegative()
 *   invert()
 *
 *   setRed()
 *   getRed()
 *   setGreen()
 *   getGreen()
 *   setBlue()
 *   getBlue()
 *
 *   setRedPercent()
 *   getRedPercent()
 *   setGreenPercent()
 *   getGreenPercent()
 *   setBluePercent()
 *   getBluePercent()
 *
 *   setRedOffset()
 *   getRedOffset()
 *   setGreenOffset()
 *   getGreenOffset()
 *   setBlueOffset()
 *   getBlueOffset()
 *
 * @version 0.2
 * @author <a href="http://www.lalex.com/">LAlex</a>
 * @since 05/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
         */
        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
         */
        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
         */
        function setBrightOffset(val:Number) {
                var trans:Object = getTransform();
                with (trans) {
                        rb = gb = bb = val;
                }
                setTransform(trans);
        }
        /**
         * @return Brightness set with setBrightOffset
         * @see setBrightOffset
         */
        function getBrightOffset():Number {
                return getTransform().rb;
        }


                // ----------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 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 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();
        }
        /**
         * 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);
        }
        public function get _blueOffset():Number {
                return getBlueOffset();
        }
}
Vous pouvez donc télécharger cette mise à jour si le coeur vous en dit, qui en plus corrige un ch'tit bug qui s'était glissé sur la propriété _blueOffset ! Cette classe inaugure aussi le fait que je n'utiliserais plus le this systématique dans mes classes.

::Télécharger SuperColor.zip::

Un aspect singulier des interfaces face à l'héritage est que le compilateur de Flash MX 2004 ne se contente pas de vérifier si une classe implémente l'interface, mais il vérifie aussi que les méthodes devant être implémentées le sont ...

Pour etre plus clair, j'ai découvert cela en faisant des tests en réimplémentant ma bibliothèque sur les matrices. Ma classe Matrix hérite d'un classe Grid. Cette classe Grid possède une méthode clone(). J'ai voulu créer une interface IClonable pour m'assurer qu'une matrice puisse être clonée, et ayant oublié de créer la méthode, je me suis rendu compte que le compilateur laissait passer malgré tout ... :o En fait, cette méthode existe déjà dans Grid, alors que Grid n'implémente pas IClonable !

Voici le code que le compilateur laisse passer :/*
 * interface IClonable
 */
interface net.lalex.interfaces.IClonable {
        public function clone():Object;
}
/*
 * classe Grid
 */
class net.lalex.data.Grid extends Array {
        // Plein de code ...
        // Retourner un clone de la grille
        public function clone():Object {
                var ret:Grid = new Grid(_gridWidth, _gridHeight);
                ret.copyFrom(this);
                return ret;
        }
        // Copy les éléments d'une autre grille
        public function copyFrom(g:Grid):Void {
                // Code
        }
}
/*
 * classe Matrix
 */
class net.lalex.maths.Matrix extends net.lalex.data.Grid implements net.lalex.interfaces.IClonable {
        // Aucune méthode 'clone()'
}
Normal allez-vous me dire ? Oui, en effet. Mais je ne pensais pas que le compilateur allait si loin. Ca ne m'arrange pas en fait, car j'aurais bien voulu forcer la classe Matrix à surcharger la méthode clone() ...

Pour les besoins d'un développement, j'ai eu besoin de faire une transition de type "fondu vers le blanc", qui donne un effet des plus esthétiques. Je me suis servi pour cela d'une classe qui hérite de color, et implémente des méthodes permettant de manipuler la luminosité, et d'autres paramètres liés à la couleur d'un clip. J'ai utilisé pour cela l'ensemble de fonctions développées par Robert PENNER, qu'il expose dans son livre, mais en AS1.

J'ai donc repris ses fonctions pour les intégrer dans une classe AS2, qui contient également des propriétés "virtuelles" créées avec des getter/setter. Cela permet d'utiliser facilement les Tween dessus, et donc de créer des interpolations de luminosité trés facilement. Cliquez sur l'image pour voir un petit exemple.

Le code de l'animation que vous voyez est on ne peux plus simple :// Importation des classes
import com.lalex.movieclip.SuperColor;
import mx.transitions.Tween;
import mx.transitions.easing.Regular;
// Objet SuperColor
var myCol:SuperColor = new SuperColor(image);
// Objet Tween
var myTw:Tween = new Tween(myCol, "_brightOffset", Regular.easeInOut, 0, 255, 2, true);
myTw.stop();
// Evenements du Tween
var twEvent:Object = new Object();
myTw.addListener(twEvent);
var onMF = function(tw:Tween) {
        tw.yoyo();
        this.onMotionFinished = function(tw:Tween) {
                tw.yoyo();
                tw.stop();
                this.onMotionFinished = onMF;
        }
}
twEvent.onMotionFinished = onMF;
// Evenements sur l'image
image.onRelease = function() {
        myTw.start();
}
image.onRollOver = function() {
        click._visible = false;
}

::Télécharger SuperColor.zip::

Je corrige actuellement les soumissions de concurrents des Actionscript Awards, menés à Singapour. Une des contraintes étant le nombre de lignes de code (60 lignes max.), des développeurs ont déployé des trésors d'ingéniosité pour économiser des lignes d'instructions ! Ce qui complique évidemment la compréhension de ce qu'est sensé faire le code, et ainsi ne simplifie pas mon travail de correcteur !

L'ensemble de ces pratiques n'est évidemment pas à conseiller !!! Etant donné que même si le code fonctionne quand-même, le lisibilité s'en trouve fortement réduite. Je ne les donne ici que par curiosité intellectuelle pour ceux qui voudraient se lancer dans ce type de contest.

Tout d'abord, il n'y a pas suffisamment de personnes qui savent que les commandes createEmptyMovieClip() et duplicateMovieClip() retournent une référence sur le clip crée (ou dupliqué). Il ets donc possible de récupérer cet objet nouvellement créé sur la même ligne. De même, l'argument objetInit peut se révéler trés utile dans cette course aux lignes :var mc = _root.monClipOriginal.duplicateMovieClip("monClone", _root.getNextHighestDepth(), {_x: 100, _y: 200, _alpha:50}); Ensuite, il existe l'éternel instruction ternaire qui remplace quasi-systématiquement le if. Bien évidemment, les if imbriqués deviennent des ? imbriqués ! var myVar = (this._x > 10 ? 10 : 20);
// Equivalent de
var myVar;
if (this._x > 10) {
   myVar = 10;
} else {
   myVar = 20;
} Penchons-nous maintenant sur l'opérateur d'affectation qu'est '='. En effet, une instrcution d'affectation retourne la valeur qui vient d'être affectée. Ainsi, il est possible d'affecter la même valeur à plusieurs valeurs d'un coup. monClip._xscale = monClip._yscale = 50; Pour info, c'est pour cette raison que lorsqu'on crée un setter dans une classe, son utilisation fait appel au getter correspondant (plus d'infos chez petepx) Si on combine plusieurs astuces, on peut obtenir le code pour créer une ombre par exemple (en supposant que la profondeur en dessous du clip visé est vide)// Si, si, il s'agit d'une seule ligne de code !
(color = new Color(mc = monClip.duplicateMovieClip(monClip._name + "_shadow", monClip.getDepth()-1, {_x : monClip._x + 10, _y: monClip._y + 10, _alpha: 50}))).setRGB(0);
// Le clip d'ombre est dans mc
trace(mc); Mais le truc qui m'a le plus surpris, parce que je n'y avais pas pensé une seule seconde, c'est l'utilisation de la virgule. En effet, la virgule est souvent utilisée conjointement à l'instruction var pour déclarer plusieurs variables d'un coup... mais l'on peut l'utiliser dans bien d'autres situations : // Utilisation "normale"
var maVar = 10, monAutreVar = 20;
// Utilisation détournée
(mc = _root.createEmptyMovieClip("newclip", 10)), mc._alpha=15;

Futé tout ca non ? Si vous avez d'autres astuces du genre, ca me plairait bien de toutes les collecter, histoire de savoir jusqu'à quel point on peut être tordu à ce niveau la !!!

Il arrive parfois que l'on ai besoin que plusieurs conditions soient remplies pour executer une instruction finale. Dans le cas où une des conditions n'est pas remplie, les tests suivants ne sont plus nécessaires, et il peut être important de ne pas les tester en terme d'optimisation. Quand ces conditions sont nombreuses, on peut se retrouver avec une grosse imbrication de if ... else, qui en plus de nuire terriblement à la lisisbilité du code, augmentent la complexité de celui-ci (la compléxité d'un code se calcule entre autre avec le nombre d'instructions if imbriquées.

Il est vrai qu'une simplification pourrait consister à utiliser des ET logiques (&&) dans un ordre défini, comme je l'explique dans ce post, mais si certaines conditions doivent être succédées par un traitement, ce système ne fonctionne plus.

Le problème s'est posé à moi pour la nouvelle version de mon moteur de blog, olrs de l'ajout d'un commentaire. En effet, si le nom est vide, je n'ai pas besoin de tester le contenu du commentaire. Si le commentaire est vide, je n'ai pas besoin de tester la valididté de l'email, etc... Si l'une de ces conditions est fausse, l'enregistrement du commentaire ne doit pas se faire. Cette astuce est valable pour tout langage, je vais donc l'illustrer ici en AS2.

Voici donc le code que l'on peut s'attendre à avoir :// Test du nom
if (!this.name.length) {
   trace("Le nom est obligatoire");
} else {
   // Test du commentaire
   if (!this.comment.length) {
      trace("Le commentaire est obligatoire");
   } else {
      // Test de l'adresse email
      if (!this.isValidEmail(this.email)) {
         trace("L'adresse email saisie n'est pas valide");
      } else {
         // Enregistrement du commentaire
         this.saveComment();
      }
   }
} Evidemment, les moyens de simplifier le code sont nombreux : création d'une variable booleenne spécifiant si une erreur est survenue, stockage du message d'erreur pour n'avoir qu'une instruction trace(), etc... Mais si le code présenté ici est simple, ce n'est pas toujours le cas. Et quoi qu'il arrive, tester si une erreur est déja survenue rajoute un [i]if[/if] à chaque test de condition ... Une solution que j'ai trouvée consiste à utilise l'instruction do ... while conjugée avec break pour arrêter le traitement dés qu'une erreur est trouvée. Cela correspond en fait à un goto, que l'on rencontre dans certains langages:// Message d'erreur eventuel
var err = false;
// Première et dernière boucle
do {
   // Test du nom
   if (!this.name.length) {
      err = "Le nom est obligatoire";
      break;
   }
   // Test du commentaire
   if (!this.comment.length) {
      err = "Le commentaire est obligatoire";
      break;
   }
   // Test du mail
   if (!this.isValidEmail(this.email)) {
      err = "L'adresse email saisie n'est pas valide";
      break;
   }
   // Enregistrement du commentaire
   this.saveComment();
// Le while(false) interromps la boucle dés le premier passage
} while (false);
// S'il y a eu une erreur, on l'affiche
if (err) {
   trace(err);
}

Cet exemple présente une situation assez simple, qui est facilement optimisable d'autres manières. Mais cette utilisation du do...while peut-être bien pratique dans des situations plus complexes ...

On oublie trés souvent les possibilités étendues de la classe LoadVars, notamment son évenement onData, qui permet d'accéder au contenu brut d'un fichier chargé avec les méthodes load ou sendAndLoad. En effet, le paramètre transmis à cet évenement contient les données brutes du fichier, avant d'être analysées pour générer des propriétés dans l'objet. :o

Dans un cas "classique" d'utilisation de LoadVars, l'évenement onData recevrait donc une chaine de la forme mavar1=mavaleur1&mavar2=mavaleur2 ... mais si le fichier n'est pas formaté de cette manière, il reste tout de même possible d'accéder à son contenu !

Ainsi, il est possible de créer un lecteur de fichiers textes, tel que celui présenté ci-contre. Il va lire le contenu du fichier textfile.txt. Bien entendu, pour un affichage correct dans Flash, il faut que le fichier soit encodé en Unicode, afin de préserver les accents et autres fioritures des caractères latins.

::Télécharger textreader.zip::