Posts Tagged interpolateColor

My new friend setTint

I played around today with a method named setTint from the fl.motion.Color class. At first I was a bit confused because this method doesn’t return anything contrarily to the interpolateColor method which returns a color in hexadecimal. You have to use setTint in this way:

1
2
3
4
5
import fl.motion.Color;
import flash.geom.ColorTransform;
var ct:Color = new Color();
ct.setTint(0xFF0000, 0.5);
mc.transform.colorTransform = ct;

With mc being the displayObject you want it applied on. setTint can be pretty useful for setting a tint on a bitmap and it can also be used with tweens in the same way I used the interpolateColor in a previous post.

, , , ,

5 Comments


Tweening colors using Color.interpolateColor

I have been looking for a long time for a way to tween colors in Flash and while browsing around I came across the Color class and the interpolateColor method. I then wanted to see how it worked. It is not that obvious so here is the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import fl.motion.Color;
import flash.events.*;
import flash.geom.ColorTransform;
 
var simpleSprite:Sprite = new Sprite();
simpleSprite.x = 100;
simpleSprite.y = 100;
simpleSprite.graphics.lineStyle();
simpleSprite.graphics.beginFill(0xff0000);
simpleSprite.graphics.drawRect(0,0,200,100);
addChild(simpleSprite);
 
// Get access to the ColorTransform instance associated with our sprite.
var colorInfo:ColorTransform = simpleSprite.transform.colorTransform;
// This function is called when the stage is clicked.
function makeBlue(event:MouseEvent):void
{
  var tempMovie:Sprite = new Sprite();
  var alphaOver:Tween = new Tween(tempMovie, "alpha", Strong.easeOut,0, 1, 8, true);
  alphaOver.addEventListener(TweenEvent.MOTION_CHANGE, tweenToBlue);
}
function tweenToBlue(event:TweenEvent):void{
  // apply the change to the display object
  colorInfo.color = Color.interpolateColor(0xff0000, 0x003399, event.position);
  simpleSprite.transform.colorTransform = colorInfo;
}
stage.addEventListener(MouseEvent.CLICK, makeBlue);

The first block of code is to import all that is needed to do our Tweening. The two classes that are of importance are the fl.motion.Color and flash.geom.ColorTransform.

In the second block of code, I create the Sprite that I will do the tweening on and draw a red rectangle in it using the graphics.drawRect method.

After that, it’s the listening function to the mouse event CLICK on the stage. This function create a new Sprite that will never be displayed. Its sole purpose will be to use its properties to do our Tween. Then we create our Tween as we would normally and we add a listener for the MOTION_CHANGE event.

All the good stuff happens in the next function; tweenToBlue. It is here that we use the static method interpolateColor of the Color class. We use the event’s position to give us the place where the Tween is at. That is why in our Tween as to have the start parameter as to be 0 and the end parameter as to be 1. We than apply to colorTransform to our Sprite.

, , ,

5 Comments