• home
  • forum
  • my
  • kt
  • download
  • Letter and Number Rain

    Author: 2008-10-11 15:49:33 From:

    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.

    Free Flash Tutorials, Actionscript, Letter and Number Rain

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

    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.

    this.letter.text = _root.letter_array[index];
    Set the textbox to the character on the letter_array.

    _x = Math.round(Math.random() * 540) + 5 _y = Math.round(Math.random() * -20) - 10;
    Random coordinate from this Movie Clip.

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

    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.

    _alpha = ran + 10; _xscale = _yscale = ran;
    Set the alpha and the scale.

    speed = Math.round(Math.random() * 5) + 10;
    This variable is the random falling speed; it ranges from 10 to 15.

    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.

    onClipEvent(enterFrame) {
    On every frame.

    _y += speed;

    Change the position of the Movie Clip with the speed.


    _rotation += rotSpeed

    Rotate left or right.

    speed += gravity;

    Increase the speed by the gravity.

    if(_y > 410) { this.removeMovieClip(); }

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

    } var i = 0;

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

    setInterval(nLetter, 70);

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

    Parameters for the setInterval:

    setInterval(function name, milliseconds, parameters);

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

    function nLetter() { duplicateMovieClip(letterMC, "letter" + i, 10 + i);

    Duplicate the "letterMC" Movie Clip.

    i++ }

    Increase "i" by 1.

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

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (78)
      Drawing (32)
      Tips and Techniques (47)
      Dynamic Content (31)
      Tricks (8)
      Games (97)
      Utilities (21)
      Getting Started (91)
      Video (24)
      Interactivity (43)
      Web Design (29)

    New

    Hot