The Matrix Special Effects	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: The Matrix Special Effects

Full Version: This is a shortened click by click version of a: Full Length Tutorial

Free Flash Tutorial

The aim of this tutorial is to learn how to create some Matrix special effects in Flash using simple ActionScript programming. 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

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. Go to: Modify > Document (Ctrl J)
6. Set the size to: 450 x 300 px
7. Set the background color to: Black

Step Two: Creating Random Characters

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. In the Properties Inspector give the Text Box the Variable Name (Var): myLetter
14. Return to the Selection Tool:
15. If the Info Panel is closed, open it: Window > Info (Ctrl I)
16. With your Text Box still selected set the registration to: Center
17. Set the X & Y Both to Zero: 0
18. If the Timeline is not visible go to: Window > Timeline (Ctrl+Alt+T)
19. In the Timeline select: Frame 1
20. If the Actions Panel is closed, open it: Window > Actions (F9)
21. If Script Assist is on, Switch it off:
22. Type (or copy & paste) the following actions:

x = random (255);
this.myLetter = chr (x) ;

Step Three: Creating a Shining Background Sphere:

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

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. If the Library Panel is closed, open it: Window > Library (F11)
10. Drag from the Library an instance of the Characters MC into Frame 2: Characters
11. If the Info Panel is closed, open it: Window > Info (Ctrl I)
12. With your Movie Clip still selected set the registration to: Center
13. Set the both X & Y co-ordinates to Zero: 0
14. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
15. Set the Color Brightness to minus 50: Color > Brightness -50%.
16. With Frame 2 still selected go to: Insert > Timeline > Create Motion Tween
17. Select: Frame 4
18. Insert a Keyframe: Insert > Timeline > Keyframe (F6)
19. Set the Color Brightness to zero: Color > Brightness 0%.
    
20. Select: Frame 15
21. Insert a Keyframe: Insert > Timeline > Keyframe (F6)
22. Set the Color Brightness to minus 100: Color > Brightness -100%.

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. In the Timeline lock the Character Layer:
3. In the Timeline insert a new layer: Insert Layer
4. Name the Layer: Sphere
5. Drag the Sphere layer under the original Character layer: Drag Layer to bottom
6. Select Frame 2 of the Sphere Layer: Insert > Timeline > Blank Keyframe (F7)
7. If the Library Panel is closed, open it: Window > Library (F11)
8. Drag from the Library an instance of the Sphere MC into Frame 2: Sphere
9. In the Property Inspector set the both X & Y co-ordinates to Zero: 0
10. With Frame 2 still selected go to: Insert > Timeline > Create Motion Tween
11. Reselect the Sphere by clicking on it: Select Sphere
12. Set the Color Brightness to minus 100: Color > Brightness -100%.
    
13. Select Frame 4 and go to: Insert > Timeline > Keyframe (F6)
14. Reselect the Sphere by clicking on it: Select Sphere
15. Set the Color Brightness to minus 50: Color > Brightness -50%.
    
16. Select Frame 15 and go to: Insert > Timeline > Keyframe (F6)
17. Reselect the Sphere by clicking on it: Select Sphere
18. Set the Color Brightness to minus 100: Color > Brightness -100%.
19. To test your Movie Clip, go to your Keyboard press: Enter

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

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:

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]++;
}

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

gotoAndPlay(2);

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

    Your Movie is done! For an explanation of the ActionScript see the full tutorial: Step Eight

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

Full Version of this: Tutorial