Create a Random Animated Color Text Effect

Create a Random Animated Color Text Effect
October 3rd, 2009 in Flash

This actionscript 3 tutorial shows you how to create a Random Animated Color Text Effect. Over time each letter changes its color one after the other.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as randomColorText.fla.

2. Rename “layer 1″ to “letters”. Select the Text tool and type your static text on the stage. Set the text properties as you like.
With the text still selected, select in the top menu Modify>Break apart to break your text into separate letters.
Convert each letter to a movie clip. No need to give them instance names.

3. Create a new “actions” layer and open the actions panel.
First declare a Timer variable and set its delay property as you like. Here we choose 100 ms. Next add a TIMER event listener that will be handled by the changeColor function.
view source
print?
1.var timer:Timer = new Timer(100,0);
2.
3.timer.addEventListener(TimerEvent.TIMER, changeColor)

4. In the changeColor function, we need to retrieve the current letter which we want to change its color.
To do so, first declare just after the Timer, a current variable as an int and initialize it to 0.
In the function we can now get the current letter.
Next create a ColorTransform object. Then set its color to a random one and apply it to the current movie clip letter.
Finally, we increment the current variable unless we get the last letter and this case, reset to 0.
view source
print?
01.var current:int = 0;
02.
03.function changeColor(e:Event):void{
04. var mc:MovieClip = getChildAt(current) as MovieClip;
05. var myColorTransform : ColorTransform = mc.transform.colorTransform;
06. myColorTransform.color= Math.random() * 0xffffff;
07. mc.transform.colorTransform = myColorTransform;
08. if(current == numChildren -1)
09. current = 0;
10. else
11. current ++;
12.}

5. Finally, don’t forget to start the timer by calling the start() method.
Here’s the final code, test your movie to see it in action.
view source
print?
01.var timer:Timer = new Timer(100, 0);
02.var current:int = 0;
03.
04.timer.addEventListener(TimerEvent.TIMER, changeColor);
05.timer.start();
06.
07.function changeColor(e:Event):void{
08. var mc:MovieClip = getChildAt(current) as MovieClip;
09. var myColorTransform : ColorTransform = mc.transform.colorTransform;
10. myColorTransform.color= Math.random() * 0xffffff;
11. mc.transform.colorTransform = myColorTransform;
12. if(current == numChildren -1)
13. current = 0;
14. else
15. current ++;
16.}