Create a Random Animated Color Text Effect
October 3rd, 2009 in Flash | 13 CommentsThis 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.
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.
var timer:Timer = new Timer(100,0); 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.
var current:int = 0;
function changeColor(e:Event):void{
var mc:MovieClip = getChildAt(current) as MovieClip;
var myColorTransform : ColorTransform = mc.transform.colorTransform;
myColorTransform.color= Math.random() * 0xffffff;
mc.transform.colorTransform = myColorTransform;
if(current == numChildren -1)
current = 0;
else
current ++;
}
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.
var timer:Timer = new Timer(100, 0);
var current:int = 0;
timer.addEventListener(TimerEvent.TIMER, changeColor);
timer.start();
function changeColor(e:Event):void{
var mc:MovieClip = getChildAt(current) as MovieClip;
var myColorTransform : ColorTransform = mc.transform.colorTransform;
myColorTransform.color= Math.random() * 0xffffff;
mc.transform.colorTransform = myColorTransform;
if(current == numChildren -1)
current = 0;
else
current ++;
}
Oct 5th, 2009
How to add background in a Random Animated Color Text Effect.
Thanks!
Oct 5th, 2009
gooood
Oct 9th, 2009
Like it!
Nov 1st, 2009
[...] Create a Random Animated Color Text Effect [...]
Nov 11th, 2009
Whats the text font used? I like it!
Nov 26th, 2009
[...] Create a Random Animated Color Text Effect [...]
Mar 8th, 2010
very good animation
Apr 5th, 2010
nice
Apr 9th, 2010
wonderfull
Jun 6th, 2010
Great Tut! Awesome style!
Apr 14th, 2011
[...] Create a Random Animated Color Text Effect [...]
Aug 31st, 2011
This code uses all mc’s, but my project only requires the text to randomly generate colors how do I fix this?
Sep 21st, 2011
woot! a tutorial that actually works!
awesomeness