Amen is an industrial informatics engineer. he studied the first four years of his education in Faculty of Engineering in Lebanon. He went to France to Continue his studies by doing the fifth year of engineering and the master TIS (Technologie Information et Système) in the same time at UTC (Université de Technologie de Compiègne). He also work as a freelancer in flash development field. He is always interessted in the new multimedia technologies.
Time: 30 minutes
Difficulty Level: Intermediate
Requirements: Flash 6+
in this tutorial you will learn how to create two classes which will be handy to apply a tint to a moviclip and also lear how to animate a tint over a movieclip.
In this tutorial we will learn how to dynamically animate the color of a movieclip as it called Applying a tint to the movie clip, although with flash 8 we can use the ColorTransform Class which can make what we intend to do but those classes are developed from a while so I created this tutorial based on this files.
We will create 2 class:
1. BindColor Class which will provide 3 useful functions
a. BindColorTo Static function that bind a color to a movie clip instance
b. colorToRGB Static function that retrieve an RGBColor Object from a color number
c. getRGBFrom Static function that retrieve an RGBColor Object from a movieclip
2. RGBColor a Class which can be attached to a movieclip instance
a. attachTo attach the RGBObject to a movieclip.
b. bindTo this function bind the color of the RGBObject to a movieclip instance.
c. red proprety that indicate the red value of the RGBColor object
d. blue proprety that indicate the blue value of the RGBColor object
e. green proprety that indicate the green value of the RGBColor object
f. color proprety that indicate the color value of the RGBColor object
so for if we need to change a color of a movie clip we create an RGBColor object and bind it to the target movie clip.
But if we want to animate the color from on to another we create an empty RGBColor object, attach it to the movie clip instance and then we tween the red, green, blue properties of the RGBColor and we will achieve what we want.
Result
Let’s start with the RGBColor class on the next page
In the RGBColor class you will find four propreties which will interact with the setter of each one a function that is called refreshColor will be called to update the display of the attached mc to the object IF non is attached nothing happens. Lets examine the class:
Class
[as]import com.core.BindColor;/**
* ...
* @author Amen Kamaleldine
*/
class com.core.RGBColor {
//Private Variables
private var _red:Number;
private var _green:Number;
private var _blue:Number;
private var _color:Number;
//currently attached MovieClip
private var mc:MovieClip;
/**
* Constructor
* @param red
* @param green
* @param blue
*/
public function RGBColor(red:Number,green:Number,blue:Number) {
this.red = (red==undefined)?0:red;
this.green = (green==undefined)?0:green;
this.blue = (blue==undefined)?0:blue;
}
/**
* gets the red value
*/
public function get red():Number { return _red; }
/**
* sets the red value
*/
public function set red(value:Number):Void {
_red = value;
//update the displayed color of the attached MC
refreshColor();
}
/**
* gets the green value
*/
public function get green():Number { return _green; }
/**
* sets the green value
*/
public function set green(value:Number):Void {
_green = value;
//update the displayed color of the attached MC
refreshColor();
}
/**
* gets the blue color
*/
public function get blue():Number { return _blue; }
/**
* sets the blue color
*/
public function set blue(value:Number):Void {
_blue = value;
refreshColor();
}
/**
* gets the color number of the attached Movie clip
*/
public function get color():Number {
_color=BindColor.getColorFrom(mc);
return _color;
}
/**
* sets the color of the attached movie clip
*/
public function set color(value:Number):Void {
_color = value;
var rgb:RGBColor = BindColor.colorToRGB(value);
this._red = rgb.red;
this._green = rgb.green;
this._blue = rgb.blue;
refreshColor();
}
/**
* attach the RGBColor object to a mc
* @param mc
*/
public function attachTo(mc:MovieClip) {
var rgb:RGBColor = BindColor.getRGBFrom(mc);
this._red = rgb.red;
this._green = rgb.green;
this._blue = rgb.blue;
this.mc = mc;
}
/**
//* bind the RGBColor object to a mc instance
* @param mc
*/
public function bindTo(mc:MovieClip) {
BindColor.bindColorTo(this, mc);
}
/**
* update the current color of the movieclip
*/
private function refreshColor() {
BindColor.bindColorTo(this, mc);
}
}[/as]
The class is well explained and it can be used directly to any movie clip instance
[as]//declare an rgbColor object for the movieclip backgroun
var rgbColor:RGBColor = new RGBColor();
//attach it to the mc
rgbColor.attachTo(my_mc);
//and this to the text mc
rgbColor.red=255;
rgbColor.green=0;
rgbColor.blue=0;
//the MC will turn to Red
//or you can just call
rgbColor.color=0xFF0000;[/as]
On the Next page we will examine the BindColor Class.
In this class we will create some useful public static function to handle the color of a movieclip with the RGBColor Class. the class code is below so let's take a look.
Class
[as]
import com.core.RGBColor;
*Class
* @author Amen Kamaleldine
*/ class com.core.BindColor {
/**
* Retrieve an RGBColor from a color number
* @param color
* @return
*/
public static function colorToRGB(color:Number):RGBColor {
var colorObj:Object = getRGB(color);
return new RGBColor(colorObj.r,colorObj.g,getRGB.b );
}
/**
* Retrieve an rgb object
* @param color
* @return Object
*/
private static function getRGB(color:Number):Object {
//Description
// XX XX XX
// red green blue
//shift left by 16 bit( 4 x 4 ) the color to get the red value
var r = color >> 16;
//get the 00 XX XX no red
var aux = color-(r << 16);
//get the green by shifting 8 bit
var g = aux >> 8;
// and the blue by substracting the aux from the green value
var b = aux - (g << 8);
//Example
/**
* XXYYZZ
* red is 0000XX
* green is 0000YY
* blue is 0000ZZ
* first step is transforming XXYYZZ to 0000XX
* the substracting XX0000 from XXYYZZ
* we ll have aux=00YYZZ
* then shit 8 bit to the right
* will got the green 0000YY
* and for the blue is the 00YYZZ substract 00YY00
*/
return ({r:r, g:g, b:b});
}
/**
* gets an RGBColor Object from a movie Clip
* @param mc
* @return
*/
public static function getRGBFrom(mc:MovieClip):RGBColor{
var current_color = getColorFrom(mc);
return colorToRGB(current_color);
}
/**
* gets the color of a movieclip
* @param mc
* @return
*/
public static function getColorFrom(mc:MovieClip):Number{
var mc_color:Color = new Color(mc);
var current_color=mc_color.getRGB();
return current_color;
}
/**
* bind an RGBColor to a movie clip
* @param rgbColor
* @param mc
*/
public static function bindColorTo(rgbColor:RGBColor, mc:MovieClip):Void {
var mc_color:Color = new Color(mc);
var mc_colorTransform:Object = { ra: 0, rb: rgbColor.red, ga: 0, gb: rgbColor.green, ba: 0, bb: rgbColor.blue, aa: 100, ab: 0 };
mc_color.setTransform(mc_colorTransform);
}
}
[/as]
So to bind an RGBColor to a movieclip we call BindColor.bindColorTo(RGBColor,MovieClip);
Lets examine how now we can animate the tint on the next page
Script
[as]
import com.core.*;
//declare an rgbColor object for the movieclip backgroun
var rgbColor:RGBColor = new RGBColor();
//and another one for the text
var textRGBColor:RGBColor = new RGBColor();
//attach it to the mc
rgbColor.attachTo(my_mc);
//and this to the text mc
textRGBColor.attachTo(tintText);
//function to perform the tweening of a property of an object
//--------function used to all effects-------------
function tween(_mc, easeType, type, begin, end, time, bool, mcf, functionToCall, param) {
var myTween;
myTween = new mx.transitions.Tween(_mc, type, easeType, begin, end, time, bool);
myTween.functionToCall = functionToCall;
myTween.param = param;
myTween.mcf = mcf;
myTween.onMotionFinished = function() {
this.mcf[functionToCall](this.param);
};
return myTween;
}
//Animate the tint
function randomTint() {
var max = 255;
var time = 1.2;
//change the red green blue values of the textRGBColoer
tween(textRGBColor, mx.transitions.easing.Regular.easeOut, 'red', textRGBColor.red, random(max), time, true);
tween(textRGBColor, mx.transitions.easing.Regular.easeOut, 'green', textRGBColor.green, random(max), time, true);
tween(textRGBColor, mx.transitions.easing.Regular.easeOut, 'blue', textRGBColor.blue, random(max), time, true);
tween(rgbColor, mx.transitions.easing.Regular.easeOut, 'red', rgbColor.red, random(max), time, true);
tween(rgbColor, mx.transitions.easing.Regular.easeOut, 'green', rgbColor.green, random(max), time, true);
tween(rgbColor, mx.transitions.easing.Regular.easeOut, 'blue', rgbColor.blue, random(max), time, true,this,'randomTint');
}
randomTint();
[/as]
And thats it after last tween is done we recall the randomTint function to animate to some new Values.
Thanks for reading, and if you have any questions the forums is always opened for you ;)
Amen.