LAlex devblog v6 - SuperColor : Gestion des effets de couleur en AS2 - Commentaires

SuperColor : Gestion des effets de couleur en AS2 - yoy

yoy — Mon, 12 Jul 2004 21:13:45 +0000

euh désolé de t'avoir froissé ... mais c'était sur le ton de la rigolade...
apres le fait que ce soit pas un espace de support, t'inquietes pas, je suis au courant... ya deja eu des commentaires à ce sujet... et puis ta premiere réponse etait suffisament claire. je donné juste mon avis sur le nom de la méthode yoyo...

pas de quoi >> MERCI

SuperColor : Gestion des effets de couleur en AS2 - LAlex

LAlex — Mon, 12 Jul 2004 09:24:30 +0000

yoy > Eh oh, va pas le prendre comme ca ... :\ Je précise quand-même que ce blog n'est pas une espace de support ... Il suffit de lire le code qui est suffisamment simple pour être compréhensible ! :o

Explication :
La méthode yoyo() se contente d'inverser le début et la fin du tween, et de relancer le Tween. Donc pour le 1er onMotionFinished : à la fin du tween (aller), je lance le yoyo, et j'initialise le onMotionFinished pour qu'à la fin du 2eme Tween (retour), il ré-inverse le sens du tween, et l'arrête, puis ré-initialise le onMotionFinished comme il était au début (pour l'aller suivant)...

Pas de quoi !

SuperColor : Gestion des effets de couleur en AS2 - yoy

yoy — Mon, 12 Jul 2004 00:31:44 +0000

A ca te fait rire... po moi! en faite, je trouve pas ca forcement logique puisque un yoyo c'est aller-retour... m'enfin!!!

SuperColor : Gestion des effets de couleur en AS2 - LAlex

LAlex — Sat, 10 Jul 2004 14:48:43 +0000

pourquoi il y est deux fois ... pour finir le yoyo ?La réponse est dans la question !

SuperColor : Gestion des effets de couleur en AS2 - yoy

yoy — Sat, 10 Jul 2004 13:14:03 +0000

ui, c'est tout a fait ca.... apres bien sur c'est pas forcement très dynamique (meme sans parler de POO) mais c'est faisable je pense mais sans avoir l'effet paramétrable ...
@Lalex : je comprends pas ta gestion d'evenement pour le onMotionFinished ... pourquoi il y est deux fois ... pour finir le yoyo ?

SuperColor : Gestion des effets de couleur en AS2 - _Seb

_Seb — Sat, 10 Jul 2004 12:12:30 +0000

pour faire cette effet en "animation", tu n'as besoin que deux images clés.
Et tu utilises l'interpolation de mouvement avec une teinte sur la deuxième image et une accélératon à 100.
Donc le poids de ton swf n'est lié qu'à une seule image (jpg) et deux images clés (keyframe)
Je penses ce que yoy voulait dire à ekameleon.
A+

SuperColor : Gestion des effets de couleur en AS2 - ekameleon

ekameleon — Wed, 07 Jul 2004 12:33:19 +0000

toutes les images clés sur ta scène pendant une interpolations sont transformées en une image intermédiaire avec une nouvelle position etc... donc tu as autant d'image que tu as d'images clé dans ton swf....
Pour une interpolation qui utilise une penner par exemple, tu gères seulement des calculs sur des valeurs numériques et ensuite tu appliques la valeur numérique sur une propriété du clip .... donc il y a qu'un seul clip et donc une seule image clé.
De toute façon il y a pas photo, suffit de faire de la POO et du développement un peu avancé en flash pour voir la différence, mais il ne faut surtout pas parler sans avoir essayé
bye

SuperColor : Gestion des effets de couleur en AS2 - yoy

yoy — Wed, 07 Jul 2004 09:04:20 +0000

eka >> tu aurais une exemple de différence de poids ... est ce que c'est réellement significatif ?
parce qu'une interpo sur un symbole(image), c'est pas vas vachement lourd, non ?
et le code... ca pese aussi sont poid...
a+

SuperColor : Gestion des effets de couleur en AS2 - ekameleon

ekameleon — Tue, 06 Jul 2004 12:27:50 +0000

Autre grosse différence c'est le poid de ton animation ... lol
On peut bien entendu imaginer tout faire image par image aussi ... en faisant toutes les images dans imageReady et photoshop .. et ensuite on les importe toutes dans flash .... chacun ses gouts
Pas mal

SuperColor : Gestion des effets de couleur en AS2 - LAlex

LAlex — Tue, 06 Jul 2004 11:26:12 +0000

Oui, en effet, rien de plus facile que de faire une interpolation avec une équation exponentielle pour l'interpolation directement dans Flash en dynamique sur des images chargées depuis l'estérieur !

Merci pour ta brillante contribution dd !

SuperColor : Gestion des effets de couleur en AS2 - dd

dd — Tue, 06 Jul 2004 11:09:13 +0000

ouai super ça sert à quoi??

200 ligne de code , pour faire le meme effet qu une interpolation de mouvement avec une luminosité qui augmente sur un clip ?

SuperColor : Gestion des effets de couleur en AS2 - fred

fred — Sat, 26 Jun 2004 21:23:36 +0000

Moi aussi me dit qq chose
Hihi, et voila la façon dont vous l'avez programmé alors....

SuperColor : Gestion des effets de couleur en AS2 - [NikO]

[NikO] — Sat, 26 Jun 2004 13:16:21 +0000

Pour ma part, en as1, j'avais fait cela avec les tween proto de zeh http://www.fatorcaos.com.br/ :
demo : http://niko.informatif.org/flash/colorfx2.swf
article : http://niko.informatif.org/index.php/2003/12/05/25-EffetsDeCouleurs

SuperColor : Gestion des effets de couleur en AS2 - Francis Bourre

Francis Bourre — Fri, 25 Jun 2004 11:37:48 +0000

Sympa LAlex, merci de partager ce portage

SuperColor : Gestion des effets de couleur en AS2 - ekameleon

ekameleon — Fri, 25 Jun 2004 08:42:47 +0000

moi je l'ai fait pour aller vite dans certaines situation sinon en effet vaut mieux soit faire une méthode qui hérite de la première, soit une autre méthode qui utilise la première qui hérite de MovieClip par exemple
bye

SuperColor : Gestion des effets de couleur en AS2 - LAlex

LAlex — Fri, 25 Jun 2004 07:21:46 +0000

yoy > Tu as raison sur le fait d'intégrer le Tween à la classe, je ne pense pas non plus que ce soit l'idéal ! C'est pour ça que je ne l'ai pas fait ...

++ ^^

SuperColor : Gestion des effets de couleur en AS2 - Timothee Groleau

Timothee Groleau — Thu, 24 Jun 2004 18:45:37 +0000

Hehe, pas mal :)! Et pour ceux qui sont encore sous MX, il y a le bon vieux dynColorTween de Tatsuo Kato:
http://www.tatsuokato.com/flash/dynColorTweenMX.html

SuperColor : Gestion des effets de couleur en AS2 - yoy

yoy — Thu, 24 Jun 2004 18:29:38 +0000

salut,
en voyant vos deux implementations d'outils Color , je me demander si d'un point de vue design OO il etait bien d'integrer des méthodes de Tween ? et si cela est propre (toujours d'un point de vue OO ).
en tout cas c'est marrant moi quand j'avais du faire ca... j'avais etendu color pour les methodes *RGBStr et puis apres pour le lien avec les clip j'avais utilisés les bon vieux prototypes pas vraiment propre en OO mais bon, c'etait un premier pas
en tout merci de faire partager ca... je vais pouvior me remettre le nez dedans et essayer de faire un petit menage dans mes classes...
bye

SuperColor : Gestion des effets de couleur en AS2 - ekameleon

ekameleon — Thu, 24 Jun 2004 12:45:10 +0000

oups.. j'ai oublié de bien fermer ma balise xcuse

SuperColor : Gestion des effets de couleur en AS2 - ekameleon

ekameleon — Thu, 24 Jun 2004 12:44:05 +0000

Pour ma part (sur la mienne) j'ai ajouté 2 méthodes tweenProperty et tweenRGB qui me servent bien à l'usage :

/* ------------- ColorTool v1.0 AS2 Juin 18, 2004 Auteur : ekameleon (c) 2003 Robert Penner - Use freely, giving credit where possible. Color methods : reset() invert() setRGB2() getRGB2() setTint() getTint() setTint2() getTint2() setTintOffset() getTintOffset() setRedOffset() getRedOffset() setGreenOffset() getGreenOffset() setBlueOffset() getBlueOffset() tweenProperty (prop, begin, end, duree, equation) tweenRGB ( __r, __g, __b, duree, equation) Color Event onMotionChanged invoqué pendant un changement de couleur avec les méthodes tweenProperty et tweenRGB onMotionFinished invoqué à la fin d'un changement de couleur avec les méthodes tweenProperty et tweenRGB Color Getter/Setter Properties : _RGBStr red green bue brightness brightOffset contrast negative redPercent greenPercent bluePercent Classe basée sur le livre : Robert Penner's Programming Macromedia Flash MX <a href="http://www.robertpenner.com/profmx" rel="nofollow">http://www.robertpenner.com/profmx</a> <a href="http://www.amazon.com/exec/obidos/ASIN/0072223561/robertpennerc-20" rel="nofollow">http://www.amazon.com/exec/obidos/ASIN/0072223561/robertpennerc-20</a> ------------- */ import mx.transitions.BroadcasterMX ; import mx.transitions.Tween ; import mx.transitions.easing.* ; class com.eka.color.ColorTool extends Color { static private var __initBroadcaster = BroadcasterMX.initialize (Color.prototype); // -----o Public Properties public var addListener:Function ; public var removeListener:Function ; public var broadcastMessage:Function ; public var onColorChanged:Function ; public var onColorTweened:Function ; public var onMotionChanged:Function ; public var onMotionFinished:Function ; // -----o Private Properties private var _listeners:Array; // -----o Constructor public function ColorTool (mc:MovieClip) { super (mc) ; this._listeners = []; this.addListener (this); } // -----o Private Methods private function limit (value:Number, min, max) : Number { if (value>max) return max ; if (value<-100) return min ; return value ; } // ----- solid color - Color methods public function set _RGBStr (hexStr:String) : Void { // prend en compte les 6 derniers caractères de la chaine hexStr = hexStr.substr (-6, 6); this.setRGB (parseInt (hexStr, 16)); } public function get _RGBStr () : String { var hexStr = this.getRGB().toString(16); // fill in zeroes as needed var toFill = 6 - hexStr.length; while (toFill--) hexStr = "0" + hexStr; return hexStr.toUpperCase(); } // ----- set red, green, and blue with normal numbers - r, g, b between 0 and 255 public function setRGB2 (r, g, b) : Void { this.setRGB (r << 16 | g << 8 | b); } // Branden Hall - <a href="http://www.figleaf.com" rel="nofollow">www.figleaf.com</a> // ----- returns an object with r, g, and b properties public function getRGB2 () : Object { var t = this.getTransform(); return {r:t.rb, g:t.gb, b:t.bb} ; } // ----- reset the color object to normal public function reset () : Void { this.setTransform ({ra:100, ga:100, ba:100, rb:0, gb:0, bb:0}) ; } // ----- tint - Color methods // tint with a color just like Property Inspector // r, g, b between 0 and 255; percent between 0 and 100 public function setTint (r, g, b, percent) : Void { var ratio = percent / 100; var trans = {rb:r*ratio, gb:g*ratio, bb:b*ratio}; trans.ra = trans.ga = trans.ba = 100 - percent; this.setTransform (trans); } // returns a tint object containing r, g, b, and percent properties public function getTint () : Object { var trans = this.getTransform(); var tint = {percent: 100 - trans.ra}; var ratio = 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 // rgb a color number between 0 and 0xFFFFFF; percent between 0 and 100 public function setTint2 (rgb, percent) : Void { var r = (rgb >> 16) ; var g = (rgb >> <img src="http://common.lalex.com/themes/devblog/smilies/icon_cool.gif" alt="8)" class="smiley" /> & 0xFF; var b = rgb & 0xFF; var ratio = percent / 100; var trans = {rb:r*ratio, gb:g*ratio, bb:b*ratio}; trans.ra = trans.ga = trans.ba = 100 - percent; this.setTransform (trans); } // returns a tint object containing rgb (a 0xFFFFFF number) and percent properties public function getTint2 () : Object { var trans = this.getTransform(); var tint = {percent: 100 - trans.ra}; var ratio = 100 / tint.percent; tint.rgb = (trans.rb*ratio)<<16 | (trans.gb*ratio)<<8 | trans.bb*ratio; return tint; } // ----- tint offset - Color methods // r, g, b between -255 and 255 public function setTintOffset (r, g, b) : Void { var trans = this.getTransform(); with (trans) { rb = r; gb = g; bb = b; } this.setTransform (trans); } public function getTintOffset () : Object { var t = this.getTransform(); return {r:t.rb, g:t.gb, b:t.bb}; } // ----- color inversion - Color methods // inverse les couleurs public function invert () : Void { var trans = this.getTransform(); with (trans) { ra = -ra; ga = -ga; ba = -ba; rb = 255 - rb; gb = 255 - gb; bb = 255 - bb; } this.setTransform (trans); } // ----o Getter/Setter Properties // ----- brightness // luminosité, même effet que l'inspecteur de propriété // pourcentage entre -100 and 100 public function set brightness (bright:Number) { bright = limit (bright, -100, 100) ; var trans = this.getTransform(); with (trans) { ra = ga = ba = 100 - Math.abs (bright); // color percent rb = gb = bb = (bright > 0) ? bright * (256/100) : 0; // color offset } this.setTransform (trans); } public function get brightness () { var trans = this.getTransform(); with (trans) return rb ? 100 - ra : ra - 100; } // ----- contrast // ajuste le contraste // pourcentage entre -100 and 100 public function set contrast (percent) { percent = limit (percent, -100, 100) ; var t = {}; t.ra = t.ga = t.ba = percent; t.rb = t.gb = t.bb = 128 - (128/100 * percent); this.setTransform(t); } public function get contrast () { return this.getTransform().ra } // ----- brightOffset - Color methods // offset between -255 and 255 public function set brightOffset (offset) { offset = limit (offset, -255, 255) ; var trans = this.getTransform() with (trans) rb = gb = bb = offset; this.setTransform (trans); } public function get brightOffset () { return this.getTransform().rb } // produit une image négative. public function set negative (percent:Number) : Void{ percent = limit (percent, -100, 100) ; var t = {}; t.ra = t.ga = t.ba = 100 - 2 * percent; t.rb = t.gb = t.bb = percent * (255/100); this.setTransform (t); } public function get negative () { return this.getTransform().rb * (100 / 255); } // ----- solid color - Color methods public function set red (amount) { var t = this.getTransform(); this.setRGB (amount << 16 | t.gb << 8 | t.bb); } public function get red () { return this.getTransform().rb; } public function set green (amount) { var t = this.getTransform(); this.setRGB (t.rb << 16 | amount << 8 | t.bb); } public function get green () { return this.getTransform().gb; } public function set blue (amount) { var t = this.getTransform(); this.setRGB (t.rb << 16 | t.gb << 8 | amount); } public function get blue () { return this.getTransform().bb; } // ----- color percent - Color methods ====== public function set redPercent (percent) { percent = limit (percent, -100, 100) ; var trans = this.getTransform(); trans.ra = percent; this.setTransform (trans); } public function get redPercent () { return this.getTransform().ra; } public function set greenPercent (percent) { percent = limit (percent, -100, 100) ; var trans = this.getTransform(); trans.ga = percent; this.setTransform (trans); } public function get greenPercent () { return this.getTransform().ga; } public function set bluePercent (percent) { percent = limit (percent, -100, 100) ; var trans = this.getTransform(); trans.ba = percent; this.setTransform (trans); } public function get bluePercent () { return this.getTransform().ba; } // ----- color offset - Color methods public function set redOffset (offset) { var trans = this.getTransform(); trans.rb = offset; this.setTransform (trans); } public function get redOffset () { return this.getTransform().rb; } public function set greenOffset (offset) { var trans = this.getTransform(); trans.gb = offset; this.setTransform (trans); } public function get greenOffset () { return this.getTransform().gb; } public function set blueOffset (offset) { var trans = this.getTransform(); trans.bb = offset; this.setTransform (trans); } public function get blueOffset () { return this.getTransform().bb; } // ----- Tween FX : tweenProperty() , twenRGB() public function tweenProperty (prop:String, begin:Number, end:Number, duree:Number, equation:Function) { begin = Math.round (begin) ; end = Math.round (end) ; var m = new Tween ( this ,prop , equation || Regular.easeOut , begin , end, duree) ; m.addListener (this) ; this.onMotionChanged = function () { this.broadcastMessage ("onColorChanged") } this.onMotionFinished = function () { m.removeListener (this) ; this.broadcastMessage ("onColorTweened") ; } } public function tweenRGB ( __r, __g, __b, duree, equation) { var m:Tween ; m = new Tween ( this , "red" , equation || Regular.easeOut , red , __r, duree || 18) ; m = new Tween ( this , "green" , equation || Regular.easeOut , green , __g, duree || 18) ; m = new Tween ( this , "blue" , equation || Regular.easeOut , blue , __b, duree || 18) ; m.addListener (this) ; this.onMotionChanged = function () { this.broadcastMessage ("onColorChanged") ; } this.onMotionFinished = function () { m.removeListener (this) ; this.broadcastMessage ("onColorTweened") ; } } } Exemple d'utilisation : import com.eka.color.* ; import mx.transitions.easing.* ; var c:ColorTool = new ColorTool (mc) ; c.tweenProperty ("brightness", 100, 0, 24, Bounce.easeOut ) ; c.onColorTweened = function () { trace ("fin de l'effet") ; } // pour changer une couleur unie sur un clip mc.onPress = function () { var c:ColorTool = new ColorTool(mc) ; c.red = 24 ; c.blue = 48 ; c.green = 242 ; c.tweenRGB ( 220, 120, 50, 24, Bounce.easeOut ) ; c.onColorChanged = function () { trace (mc + " change de couleur") ; } c.onColorTweened = function () { c.tweenRGB ( 125, 125, 30, 24, Bounce.easeOut ) ; } }
bye