Random Boxes Text Effect with ActionScript 3

February 16, 2009 by: smonte

In 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.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

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.

Flash text

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.

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Related tutorials:

  1. Creating a Shake Effect
  2. Rotating Mouse Trail with ActionScript 3
  3. Glowing Text Effect with ActionScript 3
  4. Random Mask Circles on Image
  5. 3D Tunnel Around Text



Filed under: ActionScript 3 Advanced
Tags:

Comments

10 Responses to “Random Boxes Text Effect with ActionScript 3”
  1. ryan says:

    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

  2. cwo says:

    Thanks for quick responding. It worked beautifully now. Thanks again for putting up this nice tutorial.

  3. smonte says:

    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).

  4. cwo says:

    Hi, It looks like we miss the external class file “MyRectangle.as”, doesn’t it? Please advise. Thanks alot.

  5. Krille says:

    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] = @

  6. Myra says:

    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!

    • ryan says:

      i have the same problem and cannot fix it. i thought it didn’t work but its just behind the image

    • ryan says:

      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**

  7. Norman says:

    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.

  8. coraguo says:

    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.

Leave a Reply

You must be logged in to post a comment.