Flash Matrix - Animated Code Effect

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 04/29/2007
Views: 239,987

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, Text Tool, and set the properties below:

Text Properties

Text properties continued:

Text Properties

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

The One

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

Embed Matrix Font

We only need the lowercase letters.

Embed Matrix Font

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

Neo

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

The One

Give the MovieClip an instance name of "the_one".

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

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.

Insert Keyframes

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

Tint

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.

Increase Scale

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

In between 1 and 10

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

Motion Tween

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.

Blue Timeline

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".

Back to Main Timeline
Flash Den

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.

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.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Web Development : Library Informational Website Phillips Public Library

Library Informational Website
New site for a recently digitized library in Maine.

Web Development : Online Booking Agent Aid Tour Management System

Online Booking Agent Aid
Manage National Actor Tours

Interactive Media : Presentation Tool Renovation Presentation

Presentation Tool
Fund Raising

Testimonials

"Our organization relies on Pixel Hive Design’s broad-based expertise in web, graphic, and database design. Simple web sites, interactive atlases, custom Google Maps applications, brochures, interpretive panels…Pixel Hive Design has helped us to deliver wide-ranging, high quality products that always exceed clients’ expectations. Max is extremely talented and a great partner."

- Stephen Engle, Director, Center for Community GIS
View More Testimonials

More Tutorials!