DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

Every wondered how to create Matrix-like animation where the letters and numbers are falling from above? Well, this tutorial is not just about Matrix-like animation. It is more advanced than that. The letters and numbers that are falling also fall in random speed and they are spinning. More like rain actually. Hope you like it.

First create a new document and a new Movie Clip.

Inside the Movie Clip draw a new dynamic text box, instance "letter". You don?t need to link a variable to it as we are not going to use that method to change the text.

You can change the color and the size to anything.

Now drag the Movie Clip to the stage with the instance name "letterMC" and paste the actions for the main timeline:

Code: Select all
var letter_array = new Array("A", "B", "C", ?, "Z",?);


This is the array of character that will appear on the rain; you can add as many characters as you want, for example: "#", "?", "9", "5", etc.

Open the actions for the Movie Clip instance and paste:

Code: Select all
onClipEvent(load)
{
//random between 0 and the length of the character?s array minus 1.
var index = Math.round(Math.random() * _root.letter_array.length - 1)

//the text that appears on the textbox is equal to the index in the array
this.letter.text = _root.letter_array[index];

//random x between 5 and 545
_x = Math.round(Math.random() * 540) + 5

//random y between -30 and -10
_y = Math.round(Math.random() * -20) - 10;

//the gravity used to make the rain
var gravity = 0.2;

//random number for the scale and the alpha
var ran = Math.round(Math.random() * 50) + 50;

//alpha is ran + 10
_alpha = ran + 10;

//scale the Movie Clip in both x an y using ran
_xscale = _yscale = ran;

//starting speed between 10 and 15, increases with the gravity
speed = Math.round(Math.random() * 5) + 10;

//this is the speed that will make the letter rotate left or right.
//The speed will range from -3 to 3 so if its negative the Movie Clip will
//rotate to the left and if its positive rotate to the right.
rotSpeed = Math.round(Math.random() * 6) - 3;
}

onClipEvent(enterFrame)
{
//Make the Movie Clip go down
_y += speed;

//rotates the Movie Clip left or right
_rotation += rotSpeed

//speed increasing with the gravity
speed += gravity;

if(_y > 410)
{
//if the Movie Clip is out of the screen, remove it.
this.removeMovieClip();
}
}


If you run the movie now you will see only one letter falling, so we need to create more of that.

Add this code for the main timeline:

Code: Select all
var letter_array = new Array(?);

//to create unique names later
var i = 0;

//this functions call another function inside it("nLetter") when
//the interval(70 milliseconds) happens
setInterval(nLetter, 70);

//will be called be "setInterval" after every 70 ms
function nLetter()
{
//duplicate the letterMC
duplicateMovieClip(letterMC, "letter" + i, 10 + i);

//increases i by 1
i++
}


Test your code now (Ctrl + Enter), it should work like the picture in the beginning of this tutorial.

Code Explanation

Code: Select all
onClipEvent(load)
{
var index = Math.round(Math.random() * _root.letter_array.length - 1)


Random index for the array of characters available, this element on that index will be the character for this Movie Clip.

Code: Select all
this.letter.text = _root.letter_array[index];


Set the textbox to the character on the letter_array.

Code: Select all
_x = Math.round(Math.random() * 540) + 5;
_y = Math.round(Math.random() * -20) - 10;


Random coordinate from this Movie Clip.

Code: Select all
var gravity = 0.2;


In every frame we will increase the speed by this variable so it acts as gravity.

Code: Select all
var ran = Math.round(Math.random() * 50) + 50;


Random value between 50 and 100; will be used for the alpha and scale of this Movie Clip.

Code: Select all
_alpha = ran + 10;
_xscale = _yscale = ran;


Set the alpha and the scale.

Code: Select all
speed = Math.round(Math.random() * 5) + 10;


This variable is the random falling speed; it ranges from 10 to 15.

Code: Select all
rotSpeed = Math.round(Math.random() * 6) - 3;


Rotating speed between -3 and 3; if it?s negative the Movie Clip will rotate to the left and positive to the right.

Code: Select all
onClipEvent(enterFrame)
{


On every frame.

Code: Select all
_y += speed;


Change the position of the Movie Clip with the speed.

Code: Select all
_rotation += rotSpeed;


Rotate left or right.

Code: Select all
speed += gravity;


Increase the speed by the gravity.

Code: Select all
if(_y > 410)
{
this.removeMovieClip();
}


If the Movie Clip is over the limit of the screen, remove it.

Code: Select all
}
var i = 0;


Variable used just to make unique names and depths for new Movie Clips.

Code: Select all
setInterval(nLetter, 70);


This function calls the function "nLetter" every 70 milliseconds.

Parameters for the setInterval:

Code: Select all
setInterval(function name, milliseconds, parameters);


"parameters" is optional, it's the parameters for the function you are calling.

Code: Select all
function nLetter()
{
duplicateMovieClip(letterMC, "letter" + i, 10 + i);


Duplicate the "letterMC" Movie Clip.

Code: Select all
i++
}


Increase "i" by 1.

That's all the tutorial for now. Hope this will help you in your learning, thanks!