|
Generally if we change color change of a movieclip from one color to another there occurs a jumping effect between two colors. To avoid this effect we can use color tweening to switch between different colors. This is useful for adding tweening effect to the color change and to set alpha property of a component dynamically while changing colors as it adds an extra smoothing effect.. Example 1. Create a .fla file. 2. Import the following actionscript file to it. 3. Execute the .fla file 4. Now on doing mouse over on the swf component you can see the color change of the swf smoothly with a tweening effect. |
package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import fl.transitions.TweenEvent;
public class ColorTweening extends MovieClip
{
private var startColor:ColorTransform; // default color, no tint
private var endColor:ColorTransform; // end change color
private var tweenColor:Tween; // tweener object sets the tweening of the movieclip
private var endTransparency:Number = 1; // sets the transparency of the color
private var tweenMC:MovieClip;
private var movieClipHt:Number = 250;
private var movieClipWt:Number = 400;
private const endColorOver:String = "0x313031"; // end color while doing mouse over
private const endColorOut:String = "0xCDFFFF"; // end color while doing mouse out
private const tweenTime:Number = 500; // tween duration
private const initColorPos:Number = 0.1; // this is the initial position of color tween
// constructure
public function ColorTweening():void
{
// create movieclip dynamically
tweenMC = new MovieClip();
tweenMC.graphics.beginFill(0xCDFFFF);
tweenMC.graphics.drawRect(0, 0, movieClipWt, movieClipHt);
tweenMC.graphics.endFill();
tweenMC.addEventListener(MouseEvent.MOUSE_OVER, changeColor);
tweenMC.addEventListener(MouseEvent.MOUSE_OUT, changeColor);
this.addChild(tweenMC);
}
// function executes when do mouse over or mouse out on the movieclip
private function changeColor(evt:MouseEvent)
{
// changes color on mouser over of the movieclip
if (evt.type == MouseEvent.MOUSE_OVER)
{
startColor = new ColorTransform(); // default color, no tint
endColor = new ColorTransform();
endColor.color = uint(endColorOver); // end color of
tweenColor = new Tween(evt.currentTarget, "", Strong.easeOut, 0, 0, initColorPos);
evt.currentTarget.transform.colorTransform = interpolateColor(startColor, endColor, initColorPos);
tweenColor = new Tween(evt.currentTarget, "", Strong.easeOut, 0, endTransparency, tweenTime);
tweenColor.addEventListener(TweenEvent.MOTION_CHANGE, tweenTransformOver);
}
//changes color on mouse out of the movieclip
else if (evt.type == MouseEvent.MOUSE_OUT)
{
startColor = new ColorTransform(); // default color, no tint
endColor = new ColorTransform();
endColor.color = uint(endColorOut); // end color
evt.currentTarget.transform.colorTransform = interpolateColor(startColor, endColor, 1);
}
}
// does the tweening
function tweenTransformOver(event:TweenEvent):void
{
var result:ColorTransform = new ColorTransform();
tweenMC.transform.colorTransform = interpolateColor(startColor, endColor, tweenColor.position);
}
// does the interpolation of color
function interpolateColor(start:ColorTransform, end:ColorTransform, currPos:Number):ColorTransform
{
var currentColor:ColorTransform = new ColorTransform();
currentColor.redMultiplier = start.redMultiplier + (end.redMultiplier - start.redMultiplier) * currPos;
currentColor.greenMultiplier = start.greenMultiplier + (end.greenMultiplier - start.greenMultiplier) * currPos;
currentColor.blueMultiplier = start.blueMultiplier + (end.blueMultiplier - start.blueMultiplier) * currPos;
currentColor.alphaMultiplier = start.alphaMultiplier + (end.alphaMultiplier - start.alphaMultiplier) * currPos;
currentColor.redOffset = start.redOffset + (end.redOffset - start.redOffset) * currPos;
currentColor.greenOffset = start.greenOffset + (end.greenOffset - start.greenOffset) * currPos;
currentColor.blueOffset = start.blueOffset + (end.blueOffset - start.blueOffset) * currPos;
currentColor.alphaOffset = start.alphaOffset + (end.alphaOffset - start.alphaOffset) * currPos;
return currentColor;
}
}
}