Random Boxes Text Effect with ActionScript 3
February 16, 2009 by: smonteIn this tutorial I will show you how you can create a simple Flash text effect when the mouse hovers over the text. This is quite easy to accomplish with a little help from ActionScript 3.
Setting up the environment
1. Create a new Flash document of size 250×250.
2. First, create a static text field and type some text in it (e.g. FlashMyMind). Position the text in the center of the stage.
3. Convert the text field to a movie clip. Name it “My Text” and set the registration point to the top left corner. My movie clip ended up looking the following.
4. Give the movie clip an instance name of “myText“.
5. Now draw a rectangle of size 10×10 to the stage. Use some stroke e.g. 2 pixels. The colors won’t matter since we will manipulate it with ActionScript 3.
6. Convert the rectangle to a movie clip. Name it “My Rectangle” and set the registration to the center.
7. Linkage the movie clip to a class named “MyRectangle“. If you don’t know how to linkage movie clips, please see step 4 from the External Classes tutorial.
8. Remove the rectangle movie clip from the stage.
Moving to ActionScript 3
9. Create a new layer for ActionScript and type the following.
//We use a timer to create the rectangles when the mouse is over the text. //This timer will send an event every 0.02 seconds. var timer:Timer = new Timer(20, 0); timer.addEventListener(TimerEvent.TIMER, createRectangle); //We want to know wheter the mouse is over the text or not var mouseOverText:Boolean = false; //Make the text look like a button (hand cursor appears on mouse hover) myText.buttonMode = true; //Listen when the mouse is over the text myText.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); //Listen when the mouse moves out from the text myText.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); //This function is called when the mouse is over the text function mouseOverHandler(e:Event):void { //Start the timer timer.start(); } //This function is called when the mouse moves out from the text function mouseOutHandler(e:Event):void { //Reset the timer timer.reset(); } //This function is called every 0.02 seconds when the timer is running function createRectangle(e:Event):void { //Create a new rectangle var rectangle:MyRectangle = new MyRectangle(); //Assign a random x position to the rectangle rectangle.x = myText.x + Math.random() * myText.width; //Assign the y position to the rectangle rectangle.y = myText.y + myText.height / 2; //Assign a random scale for the rectangle rectangle.scaleX = rectangle.scaleY = Math.random() * 2; //Assign a random x and y speed for the rectangle rectangle.xspeed = Math.random() * 10 - 5; rectangle.yspeed = Math.random() * 10 - 5; //Assign a random alpha speed (how fast the rectangle disappears) rectangle.alphaSpeed = -(Math.random() * 0.1); //Assign a random scale speed rectangle.scaleSpeed = Math.random() * 0.05; //Assign a random color for the rectangle var colorInfo:ColorTransform = rectangle.transform.colorTransform; colorInfo.color = 0xffffff * Math.random(); rectangle.transform.colorTransform = colorInfo; //We don't want to catch any mouse events from the rectangle rectangle.mouseEnabled = false; //Add ENTER_FRAME listener for the rectangle rectangle.addEventListener(Event.ENTER_FRAME, animate); //Add the rectangle to the stage. //We add it to index zero because we want the rectangle to stay behind the text. addChildAt(rectangle,0); } //This function is called in each frame function animate(e:Event):void { //Save the rectangle to a local variable var rectangle:MyRectangle = (MyRectangle)(e.target); //Update its position rectangle.x += rectangle.xspeed; rectangle.y += rectangle.yspeed; //Update the alpha rectangle.alpha += rectangle.alphaSpeed; //Update the scale rectangle.scaleX += rectangle.scaleSpeed; rectangle.scaleY += rectangle.scaleSpeed; //Assign a random rotation for the rectangle rectangle.rotation = Math.random() * 256; //Remove the rectangle from the stage if alpha is below 0 if(rectangle.alpha < 0) { rectangle.removeEventListener(Event.ENTER_FRAME, animate); removeChild(rectangle); } }
10. That’s it, test your Flash movie! Remember, if you have any questions don’t hesitate to ask them in the forum.
Related tutorials:
Comments
10 Responses to “Random Boxes Text Effect with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
i have a site that is 1024 x 768. if i try to move my text beyond 250×250, it epic fails. MASSIVE errors. is there anyway to move it without getting errors
Thanks for quick responding. It worked beautifully now. Thanks again for putting up this nice tutorial.
Hey,
There is no “MyRectangle.as” file, we don’t need it because Flash will create that for us. It seems that you’re only missing step #7 (linkage).
Hi, It looks like we miss the external class file “MyRectangle.as”, doesn’t it? Please advise. Thanks alot.
Hi!
Very nice tutorial, but I can’t get it to work :S
Can someone mail me the finished .fla file?
Thanks!
//Christian
Email:
christian.p92[at]hotmail.com
[at] = @
Hi,
Thanks for this tutorial, its brilliant!
It works perfectly, however, when I place an image, etc…on the stage the rectangles appear behind image.
Any suggestions?
I tried messing with the code and I put the rectangle and code on the top 2 frames – but no luck!
i have the same problem and cannot fix it. i thought it didn’t work but its just behind the image
i have solved the problem.
at this line
//We add it to index zero because we want the rectangle to stay behind the text.
addChildAt(rectangle,0);
**change the 0 to a higher number. i put 5 and that made it go above the text**
I did something similar using javascript and wrote about it on my blog.
http://2kno.com/norman/uncategorized/adding-animation-to-a-logo/
I did it this way so that the design could spread around the whole page.
Hi, I just tried your examples, but I wondered why there was an error saying that the \scaleSpeed\ was undefined.
Could you please tell me if I made some mistake or missed importing some package?
I’m a newbie of flash and AS, sorry for inconvenienced
Thanks.