Flash Matrix - Animated Code Effect

var addthis_pub = 'PixelHive';

Category: Adobe Flash Tutorials
Added: 04/29/2007
Views: 240,432

The Matrix, Flash style...

How to code the Flash Matrix Effect

I'm going to show you how to code the Matrix falling code effect using Adobe Flash and Actionscript. You will be able to adjust the dimensions, the number of lines, perceived depth, fall speed and more.

By approaching the Matrix Effect with Actionscript, we can achieve a more realistic and customizable effect then one could ever hope to painstakingly Motion Tween.

Resource Needed

Download and install the Matrix Code Font created by ~lexandr. The Mac version is here.

Step 1 : Document Setup

Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 380 x 250 (You can make it any dimension)
Frame Rate: 30 fps
Background: Black

Step 2 : Creating The One

This effect is achieved using ActionScript and one MovieClip. So let's start by creating The One and then we'll code his purpose.

Select the Text Tool, , and set the properties below:

Text properties continued:

Click on Stage to create a Text Field and enter a single letter.

Since the Matrix font is uncommon; we need to embed it into the Flash Movie. Select the Text Box and click Embed...

We only need the lowercase letters.

Now go back to the text properties and give it an instance name "Neo".

With Neo selected, convert him into a MovieClip symbol.
Modify > Convert to Symbol
Name: the_one
Registration: bottom, center

Give the MovieClip an instance name of "the_one".

Step 3 : Pulsing with power

In this step we will setup the_one to pulse with power. To understand what I mean, look at my Matrix animation and watch as a white pulse of energy flows up each of the lines of code. It's a nice added touch.

With the_one Movieclip selected, wrap it inside another Movieclip:
Modify > Convert to Symbol
Name: one_pod
Registration: bottom, center
Export for ActionScript: checked
Linkage Identifier: one_pod

Double Click the Movieclip on Stage. Select frame 10 and insert a keyframe:
Insert > Timeline > Keyframe (F6)
Now insert an additional keyframe at 20.

Click frame 10 again, select the MovieClip on Stage and change the Color to "Tint" with the following settings:

With the MovieClip still selected, open the Transform Pane and increase it the scale to 125%. This will make the pulse buldge with energy as it travels up the line of code.

Now the tweening white pulse. Click in between frame 1 and 10:

In the properties pane, select "Motion" under Tween and set Easing to 100.

This will gradually slow the pulse as it reaches the brightest point.

Click between frame 10 and 20, set Tween: Motion, easing -100 IN.

Your timeline should now be all blue.

One last important thing, Click Frame 1 and open the ActionScript window
Window > Actions
Enter the single command "stop();".

We are done setting up the Movieclip, click "Scene 1" to return to the Main Timeline.

Click the MovieClip on Stage and Delete it. Don't worry, it remains in our library ready to be referenced by the Linkage Identifier "one_pod".

Step 4 : Coding the Flash Matrix

It's time to code the Matrix. The ActionScript below may look intimidating at first but, like most scripts, if you take the time to read the comments you will begin to understand how it works.

Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions

Copy & Paste the following code: ( All explained in my comments )

// ---------------------------------------------
 // The Flash Matrix - www.pixelhivedesign.com
 // ---------------------------------------------
 // Initialize variables.
 maxLines = 25;  // Maximum number of lines at once.
 minScale = 10;  // Minimum scale of a line.
 maxScale = 100; // Maximum scale of a line.
  
 // Create an empty Movieclip to hold the Matrix.
 theMatrix = createEmptyMovieClip('MatrixCode',1);
 curLines = 0; // Keeps track of the current number of lines.
 // ----------------------
 // Generating the Matrix.
 // ----------------------
 theMatrix.onEnterFrame = function(){
 // Check that the current number of lines is less than the maximum allowed.
 if(curLines <= maxLines){
   curLines++;  // Increment the number of lines.
   
   // Create a new line.
   codeLine   = this.createEmptyMovieClip('codeLine',curLines);
   
   // Generate a random scale for the line.
   // This simulates lines at different distances.
   var ranScale  = Math.round(Math.random() * (maxScale-minScale)) + minScale;
   codeLine._xscale = codeLine._yscale = ranScale;
   
   // Position the line at a random X location.
   codeLine._x     = Math.random() * Stage.width;
   
   // Determine line speed based on the distance.
   codeLine.speed  = (codeLine._xscale)/10;
   
   // ---------------------------------------------
   // Creating a line of multiple pods (characters)
   // ---------------------------------------------
   codeLine.myCodes   = []; // Array to store individual pods.
   numPods = 0;       // Number of pods.
   while(codeLine._height < Stage.height){
     numPods++;  // Increment the number of pods.
     // Attach a single pod to the line of code.
     pod = codeLine.attachMovie('one_pod','pod'+numPods,numPods);
     codeLine.myCodes.push(pod);   // store pod.
     
     // Position pod above the last one (vertical lines)
     pod._y -= (pod._height+2) * numPods;
     
     // Choose a random Matrix character.
     // Character Codes for lower case letters are between 96 & 123
     pod.the_one.Neo.text  = chr(Math.round(Math.random() * 27) + 96);
   }
   
   // ----------------------------
   // Initialize the white pulse.
   // ----------------------------
   // Store pod position to start at.
   codeLine.ind    = 0;
   // Store delay between pulses.
   codeLine.delay    = codeLines.myCodes.length; 
   
   // ------------------------------------
   // Animating each line of code.
   // ------------------------------------
   codeLine.onEnterFrame = function(){
     // -------------------------------
     // Vertical animation of the line.
     // -------------------------------
     // Every frame make the line move down by it's speed.
     this._y += this.speed;
     
     // Check if the line of code has animated off the Stage 
     if(this._y - this._height >= Stage.height) {
       // Yes, so allow an additional line to be generated.
       maxLines++;
       // Remove this line and free memory.
       this.removeMovieClip();
     }
     // ----------------------------
     // Animating the white pulse.
     // ----------------------------
     // Get next pod to affect.
     this.curCode = this.myCodes[this.ind];
     // If the pod is not currently animating, start its animation.
     if(this.curCode._currentframe == 1) this.curCode.play();
     // Check if we have reached the end of the line.
     if(this.ind < this.myCodes.length and this.delay != 0){
       // No, then move on to next character.
       this.ind++;
       // Decrease the delay before next pulse.
       this.delay--; 
     } else {
       // Yes, then reset the character position.
       this.ind = 0;
       // Reset the delay before next pulse.
       this.delay = this.myCodes.length;
     }
   }
 }
 }
   

So that is the code behind the code of the Flash Matrix. Every frame, (30 times a second), Flash is generating the code lines, animating each line's vertical movement, sending off white pulses and removing any lines that have left the Stage.

Flash Matrix - The Falling Code Effect : Conclusion

Read and understand the Matrix Code. The techniques I used can be modified to create all new effects. Backup your .FLA file and don't be afraid to play around and see what you can do. Don't forget you can also go back and modify the_one Movieclip. Since that one MovieClip is the essence of the visuals, changing it and its pulse effect is an easy way to see dramatic changes.

var addthis_pub = 'PixelHive';

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Flash Matrix - Animated Code Effect" tutorial. View more of my tutorials here.

Flash Matrix - Animated Code Effect

The Matrix, Flash style...

How to code the Flash Matrix Effect

Resource Needed

Step 1 : Document Setup

Step 2 : Creating The One

Step 3 : Pulsing with power

Step 4 : Coding the Flash Matrix

Flash Matrix - The Falling Code Effect : Conclusion

Like My Work?

Project Sample

Testimonials

More Tutorials!