Falling Bits Animation

February 6, 2009 by: smonte

In this tutorial, I’ll show you how to create bits that are falling out of the screen. All animation is done via ActionScript 3.0, so no timeline animation will be included.

Setting up the environment

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

2. Create a dynamic text field. Type in a number, eg. 1.

3. Give it an instance name of “myText”. Set the font to 15.

4. Click the Embed button and embed the numerals.

embed numerals

5. Convert the text field into a movieclip. Name it “numberInsideMC”. Set the registration point to the top left corner.

6. Give the movie clip an instance name of “numberInside”.

7. Convert the “numberInsideMC” into a movie clip (just click it and press F8). Give the new movie clip a name “myNumberMC”. Set the registration point to the top left corner.

8. Linkage the “myNumberMC” to a class called “BitNumber”.

linkage

Moving into ActionScript 3.0

9. In the main timeline, create a new layer for ActionScript. Type the following.

//This array will contain all the numbers seen on stage
var numbers:Array = new Array();
 
//We want 8 rows
for (var i=0; i < 8; i++) {
 
        //We want 21 columns
        for (var j=0; j < 21; j++) {
 
                //Create a new BitNumber
                var myNumber:BitNumber = new BitNumber();
 
                //Assign a starting position
                myNumber.x = myNumber.width * j;
                myNumber.y = myNumber.height * i;
 
                //Give it a random speed (2-7 pixels per frame)
                myNumber.speedY = Math.random() * 5 + 2;
 
                //Add the number to the stage
                addChild (myNumber);
 
                //Add the number to the array
                numbers.push (myNumber);
 
        }
}
 
//Add ENTER_FRAME so we can animate the numbers (move them down)
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
 
/* This function is repsonsible for moving the numbers down the stage. The alpha animation is done inside of the myNumberMC movieclip. */
function enterFrameHandler (e:Event):void {
 
        //Loop through the numbers
        for (var i = 0; i < numbers.length; i++) {
 
                //Update the y position
                numbers[i].y += numbers[i].speedY;
 
                //If the BitNumber is below the stage, move it up again
                if (numbers[i].y > stage.stageHeight) {
                        numbers[i].y = 0;
                }
        }
}

10. We are almost done, but we still need to add some code inside of our myNumberMC movie clip. Double click the myNumberMC and create a new layer for ActionScript.

11. Type the following in the actions panel.

//This variable tells us should we increase the alpha
var increaseAlpha:Boolean;
 
//We want the number to be invisible at the beginning
numberInside.alpha = 0;
 
//Calculate a random timer delay (how often we increase the alpha)
var timerDelay:Number = Math.random() * 4000 + 2000;
 
//Create and start a timer
var timer:Timer = new Timer(timerDelay, 0);
timer.addEventListener (TimerEvent.TIMER, timerHandler);
timer.start ();
 
//Add ENTER_FRAME so we can animate the alpha change
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
 
/* Timer calls this function. Timer delay defines how often this is called. */
function timerHandler (e:Event):void {
 
        //Update the increaseAlpha value
        increaseAlpha = true;
 
        //Calculate a random number (0 or 1)
        var newNumber:int = Math.floor(Math.random() * 2);
 
        //If the random number is 1, we insert "1" into the text box
        if (newNumber == 1) {
                numberInside.myText.text = "1";
        }
        //Else we insert "0" into the text box
        else {
                numberInside.myText.text = "0";
        }
}
 
//This function animates the alpha
function enterFrameHandler (e:Event):void {
 
        //Increase the alpha if increaseAlpha is true
        if (increaseAlpha == true) {
                numberInside.alpha += 0.02;
        }
 
        //Else we want to decrease the alpha
        else {
                numberInside.alpha -= 0.02;
        }
 
        //We don't want the alpha to be over one, so we assign increaseAlpha to be false
        if (numberInside.alpha > 1) {
                increaseAlpha = false;
        }
        //If the alpha is negative, set it to zero
        if(numberInside.alpha < 0) {
                numberInside.alpha = 0;
        }
}

12. Go back to your main timeline and remove the myNumberMC from the stage. Your stage should now be empty.

13. Test your movie!

I hope you enjoyed this tutorial and learned something from it. If you have any questions concerning this tutorial, please visit the forum.

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

Related tutorials:

  1. ActionScript 3 Timer Class
  2. Image Mask Animation
  3. Mask Animation with ActionScript 3
  4. Creating Random Lines with Animation
  5. Random Boxes Text Effect with ActionScript 3

Comments

2 Responses to “Falling Bits Animation”
  1. Dodge Holls says:

    Really nice tutorial, helped me learn quite a bit with this. Thank you.

    Log in to Reply
  2. sofia says:

    thank you for the tutorial

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.