Flash Matrix - Animated Code Effect

Category: Adobe Flash Tutorials
Added: 04/29/2007
Views: 249,330
Category: Adobe Flash Tutorials
Added: 04/29/2007
Views: 249,330
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.
Download and install the Matrix Code Font created by ~lexandr. The Mac version is here.
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
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".
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".
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 )
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.
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.
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.
University Departmental Website
College Website Redesign
"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