Glowing Text Effect with ActionScript 3

February 18, 2009 by: smonte

This tutorial is an easy one. We will create a Flash glowing text effect with a very few lines of code. We will use ActionScript 3 as usual.

Note: You need TweenMax to fully complete this tutorial.

Setting up the environment

1. Create a new document of size 300×200.

2. Type some static text to the center of the stage. Use whatever font and size you want. Use the color #FF8800 if you want the same looking glow effect as in this tutorial.

3. Next let’s break apart the letters. While the text field is selects, goto Modify -> Break Apart. You should now have a similar looking setting.

Flash Break Apart Text Field

4. Convert each of the letters to a movie clip. Name them to whatever you want, but set the registration point to the center. You should end up with the same amount of movie clips as you have letters!

Flash Letter Movie Clips

Moving to ActionScript

5. Create a new layer for ActionScript and type the following.

//Import tweenmax
import gs.*;
 
//Loop through all the letters in the stage
for (var i=0; i < numChildren; i++) {
 
        //Get a letter (movie clip) from the stage
        var mc:* = getChildAt(i);
 
        //Add an MOUSE_OVER listener for the letter
        mc.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
 
        //Tween the letter to have a white glow
        TweenMax.to(mc, 0.2 , {glowFilter:{color:0xffffff, alpha:1, blurX:10, blurY:10}});
}
 
//This function is called when the mouse is over an letter
function mouseOverHandler(e:Event):void {
 
        //Save the letter to a local variable
        var letter:MovieClip = e.target as MovieClip;
 
        //Animate the letter.
        //We call the function scaleBack() when the tween is finished
        TweenMax.to(letter, 0.8 , {scaleX: -1, glowFilter:{color:0xff8800, blurX:20, blurY:20}, onComplete: scaleBack, onCompleteParams:[letter]});
}
 
//This function is called when a letter's scaleX is -1
function scaleBack(letter:MovieClip):void {
 
        //Animate the letter back to original state
        TweenMax.to(letter, 0.2 , {scaleX: 1, glowFilter:{color:0xffffff, blurX:10, blurY:10}});
}

6. You are done, test your movie! Remember, if you have any questions, feel free to visit the forum.

Related tutorials:

Filed under: ActionScript 3 Advanced
Tags: Text effects

Comments (2)

Comments

2 Responses to “Glowing Text Effect with ActionScript 3”

kuchiki says:

November 25, 2009 at 11:13 am

Nevermind. I solved it by putting all into a movie clip and then add it onto the stage. ^o^

Log in to Reply
kuchiki says:

November 22, 2009 at 5:44 pm

Thanks the tutorial! =D
I’m a newbie and I have a small problem. I have other things on the stage besides the glowing letters. How do I make it so that the effects are only limited to those letters? I gave all those letters with same instance name and I don’t know what I need to change here.

//Loop through all the letters in the stage
for (var i=0; i < numChildren; i++) {

//Get a letter (movie clip) from the stage
var mc:* = getChildAt(i);

Log in to Reply

You must be logged in to post a comment.