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.
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!
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.
discuss this topic to forum
