Flash Tutorial: Matrix Special Effects

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - The Matrix Special Effects

 

Free Flash Tutorial

 

The aim of this tutorial is to learn how to create some Matrix special effects in Flash using Motion Tweens and ActionScript. There are two variations in this animation. Both take their inspiration from the films The Matrix & The Matrix Reloaded. The first is the dropping letters and the second has an added background. See the examples of these two Matrix Film animations below:

Example: Download the Flash file Int 143a

 

Example: Download the Flash file Int 143b

Click by Click: If you would like to view this tutorial without all the notes: Click by Click


Step One: Setting Up the Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. If the General Tab is not selected, select it:
  3. Select Flash Document:
  4. Click: OK
  5. Now it is time to set the Documents size and color.

  6. Go to: Modify > Document (Ctrl J)
  7. Set the size to: 450 x 300 px
  8. Set the background color to: Black
  9. Tip: Occasionally setting a documents background color to black can make it more difficult to build a Movie. This is because typing and drawing tools are often set to black as default and when you use them you can't see what you are doing. If this is a problem set your background color to an alternative like dark gray and re-set back to black when you are ready.


Step Two: Creating Random Characters

In this example I will create a single Movie Clip that will generate random characters generated with ActionScript.

Note: If you did not want random characters but wanted a specific set of characters like: A, B & C you would create three Movie Clips each with one of the specified letters. You would then leave out the ActionScript that generates the random characters as described at the end of this step.

  1. Create a new Movie Clip Symbol: Insert > New Symbol (Ctrl + F8)
  2. Name the Movie Clip as: Characters
  3. Click: OK

  4. Select the Text Tool:
  5. If the Property Inspector is closed, open it: Window Properties > Properties (Ctrl F3)
  6. Select: Dynamic Text
  7. Select a standard type face such as: Verdana
  8. Set the Font size to: 12
  9. Set the color to green: 00CC00
  10. For style select: Bold
  11. For paragraph style select: Align Centre
  12. Type a single letter in the center of the Stage: A
  13. Note: In fact it is not necessary to type anything in the text box as random letters will be assigned via the ActionScript. I just find text boxes are easier to manage if they have something typed in them. The letter makes it easier to see what you are doing.

  14. In the Properties Inspector give the Text Box the Variable Name (Var): myLetter
  15. The text is set to Dynamic Text and has a Variable Name (not an Instance Name):


    Your Property Inspector should look similar to this.

  16. Return to the Selection Tool:
  17. If the Info Panel is closed, open it: Window > Info (Ctrl I)
  18. With your Text Box still selected set the registration to: Center
  19. Set the X & Y Both to Zero: 0
  20. Your Text Box should now be dead centre of the Stage:

  21. If the Timeline is not visible go to: Window > Timeline (Ctrl+Alt+T)
  22. In the Timeline select: Frame 1
  23. If the Actions Panel is closed, open it: Window > Actions (F9)
  24. If Script Assist is on, Switch it off:

    Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

  25. Type (or copy & paste) the following actions:
  26. x = random (255);
    this.myLetter = chr (x) ;


The ActionScript Explained: The random(255) function will generate a number between 0 and 255 in a random order. The chr(x) is used to convert the number into the corresponding ASCII character (letters, numbers & symbols). This random generation of characters is what then sent to the text box called letter which is what you just created.


Step Three: Creating a Shining Background Sphere:

The next thing to do is to create a Movie Clip that will be used as a shining sphere that will glow behind the letters:


The green sphere will be used as a background to the letters.

  1. Create a new Movie Clip Symbol: Insert > New Symbol (Ctrl + F8)
  2. Name the Movie Clip as: Sphere
  3. Click: OK

  4. Select the: Oval Tool
  5. Draw a: Circle
  6. Return to the standard Selection tool:
  7. Select the outline of the circle and: Delete Stroke (outline)
  8. In the Info Panel set both the width & height to: 25
  9. In the Info Panel set the registration to: Center
  10. Set the both X & Y co-ordinates to Zero: 0
  11. In the Property Inspector set the circles fill and select a green: Gradient Fill


Step Four: Animating the Random Characters - Foreground

There is one more Movie Clip to build. In this Movie Clip the letters and background are combined and animated.

    Note: If you are not using random characters but specific characters such as ABC you would need to create three of these animation Movie Clips. One for each of the specified letters.

  1. Create a new Movie Clip Symbol: Insert > New Symbol (Ctrl + F8)
  2. Name the Movie Clip as: Animation
  3. Click: OK

  4. In the Timeline rename Layer 1 to: Characters
  5. In the Timeline select: Frame 1
  6. If the Actions Panel is closed, open it: Window > Actions (F9)
  7. Type (or copy & paste) the following actions:

    stop ();

  8. In the Timeline insert a Blank Keyframe: Insert > Timeline > Blank Keyframe (F7)
  9. Note: This will place a blank Keyframe in Frame 2:

  10. If the Library Panel is closed, open it: Window > Library (F11)
  11. Drag from the Library an instance of the Characters MC into Frame 2: Characters
  12. If the Info Panel is closed, open it: Window > Info (Ctrl I)
  13. With your Movie Clip still selected set the registration to: Center
  14. Set the both X & Y co-ordinates to Zero: 0
  15. Your Movie Clip is in Frame 2 and centred on Stage:

  16. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  17. Set the Color Brightness to minus 50: Color > Brightness -50%.
  18. Note: You will not be able to change the color brightness of the Instance of the Character Movie Clip unless it is still selected.


    Choose the brightness option from the various options.


    Click on the triangle next to the value and drag it down to -50%

  19. With Frame 2 still selected go to: Insert > Timeline > Create Motion Tween
  20. Select: Frame 4
  21. Insert a Keyframe: Insert > Timeline > Keyframe (F6)

  22. Frame 4 now has a Keyframe.

  23. Set the Color Brightness to zero: Color > Brightness 0%.

  24. Select: Frame 15
  25. Insert a Keyframe: Insert > Timeline > Keyframe (F6)

  26. Frame 15 now has a Keyframe.

  27. Set the Color Brightness to minus 100: Color > Brightness -100%.
  28. Note: The three instances of the Character should have the following brightness settings:

    Frames:
    2
    4
    15
    Character's Brightness:
    -50
    0
    -100

    The first part of the animation is now complete. In the next section you will place a new Layer and create the animation for the background sphere.

Step Five: Animating the Random Characters - Background

You should still be editing inside the Animation Movie Clip. You can check this by looking in the Edit Bar. It will say animation:

  1. If your Edit Bar is not visible: Window > Toolbars > Edit Bar

  2. The Edit Bar show that you are editing the Animation Movie Clip.

    Note: If you are not in Editing inside the Animation Movie Clip open the Library and double click on the Animation MC.

  3. In the Timeline lock the Character Layer:
  4. In the Timeline insert a new layer: Insert Layer
  5. Name the Layer: Sphere
  6. Drag the Sphere layer under the original Character layer: Drag Layer to bottom

  7. The new Sphere Layer is under the original Layer.

  8. Select Frame 2 of the Sphere Layer: Insert > Timeline > Blank Keyframe (F7)
  9. If the Library Panel is closed, open it: Window > Library (F11)
  10. Drag from the Library an instance of the Sphere MC into Frame 2: Sphere
  11. In the Property Inspector set the both X & Y co-ordinates to Zero: 0
  12. With Frame 2 still selected go to: Insert > Timeline > Create Motion Tween
  13. Reselect the Sphere by clicking on it: Select Sphere
  14. Set the Color Brightness to minus 100: Color > Brightness -100%.

  15. Select Frame 4 and go to: Insert > Timeline > Keyframe (F6)
  16. Reselect the Sphere by clicking on it: Select Sphere
  17. Set the Color Brightness to minus 50: Color > Brightness -50%.

  18. Select Frame 15 and go to: Insert > Timeline > Keyframe (F6)
  19. Your Timeline should now look like this:

  20. Reselect the Sphere by clicking on it: Select Sphere
  21. Set the Color Brightness to minus 100: Color > Brightness -100%.
  22. To test your Movie Clip, go to your Keyboard press: Enter

    You should see something like this:

    Note: The three instances of the Sphere & Character should have the following brightness settings:

    Frames:
    2
    4
    15
    Character's Brightness:
    -50
    0
    -100
    Sphere's Brightness:
    -100
    -50
    -100

    The animation is now complete.


Step Six: Setting up the Main Stage

  1. Return to the Main Stage by clicking on the Scene 1 Tab in the Edit Bar:
  2. If the Library Panel is closed, open it: Window > Library (F11)
  3. Drag an instance of the Animation Movie Clip to the stage: Animation
  4. In the Property Inspector give the Movie Clip an Instance Name: myCharacters

  5. The Instance Name myCharacters is done in the Property Inspector.

    Note: If you are not using random characters but specific characters such as A, B & C etc you would need to place of these animation Movie Clips on the Stage. Each Movie Clip would need it's own Instance Name such as myA myB myC etc.

  6. In the Timeline rename Layer 1 to: Animation MC
  7. Select Frame number 3 in this layer and choose Insert > Frame (F5)

  8. There are now three frames in the layer.


Step Seven: The ActionScript

  1. Insert a new layer Insert > Timeline > Layer
  2. Name the layer: Actions
  3. Select Frame 1 of the: Actions Layer
  4. If the Actions Panel is closed, open it: Window > Actions (F9)
  5. Type (or copy & paste) the following actions:

    var SSX = 30;
    var SSY = 30;
    var XSPACING = 20;
    var YSPACING = 20;
    var spans = new Array(SSX);
    for (y=0; y < SSY; y++) {
       for (x=0; x < SSY; x++) {
          var n = y * SSX + x;
       if ((((x*5 ^ y*3)) & 3) == 0) {
          duplicateMovieClip("myCharacters", "c"+n, n);

    /* Only add the following code (by removing the "//") if you have created individual MCs for specific letters such as A, B, C & D etc. Note the first Instance Name would go in the line above instead of: myCharacters The rest of the go in the lines below. Change my Instance Names to match yours. */

    // } else if ((((x*5 ^ y*3)) & 4) == 0) {
    // duplicateMovieClip("myMC_B", "c"+n, n);

    /* If you have more MCs, repeat the two lines of code as necessary incrementing the count like this:  */

    // } else if ((((x*5 ^ y*3)) & 5) == 0) {
    // duplicateMovieClip("myMC_C", "c"+n, n);

    /* Your very last MCs Instance Name would go in the line below instead of:
    myCharacters  */

          } else {
             duplicateMovieClip("myCharacters", "c"+n, n);
          }
          with (this["c"+n]) {
             _x = x*XSPACING+XSPACING;
             _y = y*YSPACING;
         }
       }
    }
    for (x=0; x<SSX; x++) {
       y = Math.random()*SSY*8;
       spans[x] = -(int(y));
    }

  6. Select Frame 2 of the: Actions Layer
  7. Insert a blank Keyframe: Insert > Timeline > Blank Keyframe (F7)
  8. With Frame 2 still selected type (or copy & paste) the following actions:
  9. for (x=0; x<SSX; x++) {
       if (spans(x)>=0) {
          n = spans[x]*SSX+x;
          this["c"+n].gotoAndPlay(2);
          if (spans[x]>=SSY) {
             n = Math.random()*SSY*8;
             n = int(n);
             spans[x] = -n;
          }
       }
       spans[x]++;
    }

  10. Select Frame 3 of the: Actions Layer
  11. Insert a blank Keyframe: Insert > Timeline > Blank Keyframe (F7)
  12. With Frame 3 still selected type (or copy & paste) the following actions:
  13. gotoAndPlay(2);

  14. Test your Movie: Control > Test Movie (Ctrl Enter)

    Your Movie is done! In the next section the ActionScript is explained.


Step Eight: The ActionScript Explained - Frame 1

Although some knowledge of actionscript is required the author and editors have tried to explain each function and it's implication in the script sequentially. For further assistance you can view the Reference panel (Shift + F1) to learn more about the ActionScript and it's syntax.


var SSX = 30;
var SSY = 30;
var XSPACING = 20;
var YSPACING = 20;

The above statements create four constants. The constants XSPACING and YSPACING are used for maintaining the minimum distance between adjacent alphabets. There would be XSPACING number or columns and YSPACING number or rows in your Movie.


var spans = new Array(SSX);

Creates an array named span with provision for SSX number of variables in it. The array will be empty at this point of time when the script is first executed.


for (y=0; y < SSY; y++) {
for (x=0; x < SSX; x++) {

Starts two for loops with one nested inside the other. A for loop consists of three parameters and statements to be executed within the curly braces {}. The first parameter is the initial condition, the second one being a expression which when true the statements have to be executed and finally the increment parameter that states in what steps the variable must be increased each time the loop is executed. Two new variables x and y are implicitly declared within the loop. The inner loop is executed SSX number of times and the outer loop is executed SSY number of times. But actually the inner loop is executed SSX * SSY number of times (30*30=900 times) since it is nested within the outer loop.


n = y*SSX+x;

Creates an integer n from the mathematical relation. This number is used to name the Movie Clips when they are duplicated in the next stage as well as to set depth for the Movie Clips. It takes a value ranging from 0 to 899.


if ((((x*5 ^ y*3)) & 3) == 0) {
duplicateMovieClip("myCharacters", "c"+n, n);

Evaluates the function(x*5 ^ y*3) first and then performs a 32-bit bitwise comparison of the result with the number '3', i.e. checks whether the result of the mathematical expression is equal to '3'. If the condition is false '0' is the result of comparison and when it is true '1' is the result of the comparison. This result is compared again with '0'. If(x*5 ^ y*3) is not equal to '3' the statements within the curly braces are executed, otherwise the following statements are evaluated.

The duplicateMovieClip creates an instance of a Movie Clip while the Movie is playing. The Movie Clip to be duplicated is mentioned (name of the instance of a Movie Clip) in the first parameter of the function within quotes. The new duplicated Movie Clip will be named according to the second parameter in the function and set at a depth specified in the third parameter for the function. The depth level is a stacking order for duplicated Movie Clips. This stacking order is much like the stacking order of layers in the Timeline; Movie Clips with a lower depth level are hidden under clips with a higher stacking order. You must assign each duplicated Movie Clip a unique depth level to prevent it from replacing Movies on occupied depths. Since n is unique for each value of x and y the depth and name of each Movie Clip is unique. The Movie Clips are named as c0, c1, c2, up to c899 when n takes the value from 0 to 899. The '+' symbol joins the alphabet "c" with the integer n to name the Movie Clip.


/* Only add the following code (by removing the "//") if you have created individual MCs for specific letters such as A, B, C & D etc. Note the first Instance Name would go in the line above instead of: myCharacters The rest of the go in the lines below. Change my Instance Names to match yours. */

// } else if ((((x*5 ^ y*3)) & 4) == 0) {
// duplicateMovieClip("myMC_B", "c"+n, n);

/* If you have more MCs, repeat the two lines of code as necessary incrementing the count like this:  */

// } else if ((((x*5 ^ y*3)) & 5) == 0) {
// duplicateMovieClip("myMC_C", "c"+n, n);

/* Your very last MCs Instance Name would go in the line below instead of:
myCharacters  */

You only need the code above if you are using several Movie Clips each with their own Instance name. You use the code by removing the double slash // comment tags at the beginning of the lines. This script is similar in functioning as stated above except the fact that it us used to generate Movie Clips of other instances as named. The algebraic expression is used as a random function to choose between the different Movie Clips and duplicate them. If you are good at algebra you can design your own expression to choose the Movie Clips to be duplicated.


else {
duplicateMovieClip("myCharacters", "c"+n, n);
}

The last option of the if .. else statement is shown above. The Movie Clip mentioned here will be duplicated by default if all other expressions turn out to be false since there is no expression to be evaluated here.


with (this["c"+n]) {
_x = x*XSPACING+XSPACING;
_y = y*YSPACING;
}

The above script allows you to specify an object (such as a Movie Clip) and evaluate expressions and actions pertaining to that object. This prevents you from having to repeatedly write the object's name or the path to the object. The statement this["c"+n] allows you to refer to the most recent Movie Clip that you duplicated and renamed. The _x and _y are x and y co-ordinates of the Movie Clip, i.e. the position of the Movie Clip in the screen. These are set to a new value so that no two Movie Clips overlap each other.


for (x=0; x < SSX; x++) {
y = Math.random()*SSY*8;
spans[x] = -(int(y));
}

The above loops generates a value for the variable y from the expression Math.random()*SSY*8 and stores these values in the array spans. The function Math.random() randomly generates a number 'n' where 0 < n < 1. The range of values y can take is 0 < y < 240 including fractions. The fractions are rounded off to the nearest integer using the int function.

The entire script in the first frame is executed only once. The Movie Clips are duplicated and placed in appropriate positions in the screen but are invisible, since in all Movie Clips the first frame was a blank keyframe with the stop(); function that would pause the Movie Clips in that frame. It was only in the second frame of each Movie Clip that the text was visible. The Movie would appear as shown below if the first frame of each Movie Clip had the stop(); function in the frame where the text first appears (instead of a blank keyframe).

Example: Download the Flash file Int 143b

 

Step Nine: The ActionScript Explained - Frame 2

The ActionScript in the second Keyframe of the actions Layer is aimed at randomly choosing which Movie Clip to play so that the special effects is achieved.


for ( x=0; x < SSX; x++ ) {
if ( spans(x) >= 0 ) {

The above script starts a for loop with the variable x and the following statements are executed 30 times whenever the Play Head is transferred to frame number two. The if statement checks whether the spans array is empty or has variables. The spans array was filled with negative integers with some actionscript in the previous frame (frame number 1). So the if statement would always return a true value and the following statements will be executed.


n = spans[x]*SSX + x;
this[ "c" + n ].gotoAndPlay(2);

The first line generates a value for n from the algebraic expression spans[x]*SSX + x. Since spans array was filled with negative integers the value of n will be negative and in the range -1 to -7140 initially. The spans[x]++ statement at the end (of the script in this frame) would increment (make it less negative, i.e. -20 would become -19) the value by one at a time for each member in the array (corresponding to the value of x). Eventually after few loops the value becomes positive. A positive value of a member in the spans array will create a positive value for n in the following loops. This positive value of n is used to point to one of the duplicated Movie Clips in the next line of the script. The script this[ "c" + n ].gotoAndPlay(2) will start the Movie Clip pointed by "c" + n from the second frame. The Motion Tween where either the brightness or alpha property was varied in the corresponding Movie Clip will be played. This line of script though executed every time will create an effect in the screen only when the value of n is positive and between 0 and 899 (since the duplicated Movie Clips were named c0,c1,c2....c898,c899 in the ActionScript in frame one).


if ( spans[x] >= SSY ) {
n = Math.random() * SSY * 8 ;
n = int(n);
spans[x] = -n ;
}

The above script is used to check the value of each element in the spans array so that the value of n determined from expression n = spans[x]*SSX + x is below 900 and the previous line this[ "c" + n ].gotoAndPlay(2) will refer to a valid Movie Clip that is present in the Movie. The value n keeps increasing due to increases in the value of the elements in the spans array. The values are generated once again similar to last the few lines in the previous frame.


spans[x]++;

This is the last statement inside the for loop in frame number 2. This statement increases the value if each element pointed in the array by one. The values of these elements directly affect the value of n which in turn chooses which Movie Clip is to be played.


Step Ten: The ActionScript Explained - Frame 3 & Notes

gotoAndPlay(2);

This makes the above script loop so that the Play Head on the Main Stage continually goes back one space. Thus the script in Frame 2 is looped infinitely and Movie Clips are selected and played in a random order.


Illustration of ActionScript

Consider that we have reached the end of Frame 1 and all the Movie Clips have been duplicated and placed in appropriate positions. The spans array would have been filled with negative integers. Let us assume it has the following elements in it :

spans[]={-51,-118,-120,-173,-230,-83,-205,-207,-185,-210,-143,-11,-68,-73,-93,-126,-214,-83,-53,-144,-188,-65,-89,-55,-203,-26,-96,-204,-52,-168}

Note: The magnitude alone of all the elements are below 240.

When the for loop is completely executed once, x would have taken the value from 0 to 29. The corresponding changes are tabulated below.

x spans[x] n=spans[x] * SSX + x spans[x]++
0 -51 -1530 -50
1 -118 -3539 -117
2 -120 -3838 -119
3 -173 -5187 -172
4 -230 -6896 -229
5 -83 -2485 -82
6 -205 -6144 -204
7 -207 -6203 -206
8 -185 -5542 -184
9 -210 -6291 -209
10 -143 -4280 -142
11 -11 -319 -10
12 -68 -2028 -67
.. .. .. ..
.. .. .. ..
.. .. .. ..
25 -26 -755 -25
26 -96 -2854 -95
27 -204 -6093 -203
28 -52 -1532 -51
29 -168 -5011 -167

It is clear from the above table that spans[11] will first become positive. At this time the value of n would be 11. So the Movie Clip c11 will be played. The x and y co-ordinates of this Movie Clip would be (x=360, y=0) on the screen (the point (0, 0) is the top left corner in the screen). In the following loops Movie Clips c41 (360, 25), c71 (360, 50), c101 (360, 75), c131 (360, 100).... etc in the same column (as x-coordinate remains the same) are played. In the interval between two successive clips being played, the variable x in the loop cycles through other values and Movie Clips in other columns may be played to create the special effects.

End of the Tutorial

I hope this tutorial will have helped you to create the Matrix special effects background. When you use your Movie Clips with this background be sure to set the depth of your Movie Clip at a suitable value so that it appears before the falling letters and not behind them. And remember to use normal fonts so that all the numbers from 0 to 255 have a corresponding character.

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


50949 visitors to this page since 11 May 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.