June 29, 2003
The Matrix Effect - By Popular Demand

Occasionally I check my Requests page which displays what keywords people where searching for when they came to my pages. It turns out that unknowingly Quasimondo has become #1 result for matrix effect swf. I don't know how that evolved, but on the other hand I don't want to disappoint those who came here in search of enlightenment. So as it's a slow day anyway I did a little research what free tutorials and .fla files there are that give you the needed effect. It looks like lots of them are pretty old and from the first Matrix Movie, but I think the 3D stuff which was applied to the type cascades in Reloaded are too overwhelming for Flash anyway.

In order to compare the results with the original effect you could have a look at the Matrix Website. Or check out this poster that features the type effect very prominent. You can also see that it's made out of reversed numbers and japanese katakana chars. You can see that the lines get brighter and hav more glow towards the bottom. The original effect was created by Animal Logic and they explain some details about it one their site. I've also found a very detailed tutorial on how to build the effect in Adobe AfterEffects - perhaps that helps you if you want to bulild it yourself.

So here's what you can expect:

  • SitePoint offers a tutorial, but I would see that only as a starting point, as the effect is not 100% convincing. I don't remember 0s and 1s in the movie. Rating: 4/10

  • Frank Baumgartner has a ZIP file containing a Flash 5 .fla for download. He also just does zeros and ones instead of reversed Katakana, but the lighting and motion are going in the right direction. Bonus points for the slight glow. The amount of cascades is a bit thin, but I think that's a decision for performance. The colors are too blue for my taste. Rating: 6/10

  • On Kirupa you'll find a .fla by Ilyas Usal. No Katakana but random letters. The layering and fading are going in the right direction - no glow here which could improve the appearance. The colorscheme seems quite right. Rating: 6/10

  • FlashAdvisor - BTW a site I've never hear of before - has a download by Martin Selva. Again it's just 0s and 1s, no fading, no glow and the dribbling it's too fast in my eyes. Rating: 3/10

  • Of course FlashKit has a whole bunch of "Matrix" movies ready for download:

    • David Sandell's is okay, but I miss the layering and the gradients are not the real thing, but hey, it's Flash 4. Rating: 5/10
    • Den Ivanov disappoints me here. That's not really Matrix, that's more a slotmachine. Rating: 2/10
    • Damaso Navarro - well, only numbers, and if you remove their logo, the amount of streams is a bit low. Rating: 5/10
    • In Jiminy Boy's version you see what happens if you use a lot of streams simultaneosly: it gets slow. That first lit letter is fine, but I miss the fading here. Rating 6/10
    • Gregory Hoddy claims he's got the real Matrix screen, but I say: spacing's too wide, there's no fading and it's getting too slow. Rating 4/10
    • Jorge Ledezma - I like the different speeds, but I do not like the grid-like positioning of the letters. Rating: 5/10
    • ~Steve-o - no,no,no. That's not it. Rating: 2/10
    • Brian Nail does it the grid way so there's no layering. The glow on the first letter is a bit too much, but I think this one could be worked on. Rating 6/10
    • Matthias Kannengiesser's version almost brings my computer to a halt. We get just 1s and 0s and no glow. Rating 5/10
    • The Tanjian calls hist creation "Binary Waterfall" which is a nice title. Unfortunately the programming is not. Rating 3/10
    • Devon Lawler makes a quite good impresssion. Speed seems okay, there is layering and the lettering and coloring are also closer to the original than others. Rating 8/10
    • But also Scott Rauscher does a good job. Rating 8/10
    • Now is that Katakana I see here? Etienne Semon seems to be the only one who
      s got that detail correct. And the gradient is also well chosen. No bad I say. Rating 8/10
    • The loop is too obvious on Mario Mata's version. Rating 4/10

Did I miss your version? Well, just add it to the comments.

Posted at June 29, 2003 03:39 PM | Further reading
Comments

Well, in terms of eye candy, my version sucks. But it is totally ActionScript based. Just paste the code in Flash and export (make sure to use a black bg):

http://www.onrelease.org/jonas/unsorted/matrix_effect.html

Posted by: Jonas Galvez on June 29, 2003 10:30 PM

John Grden's example is nice. http://www.acmewebworks.com/matrix/MatrixCode.html
with FLA -> http://www.acmewebworks.com/matrix/MatrixCode.fla

Glen Rhodes has one as his preloader for his site...
http://www.glenrhodes.com/

/from the FlashMacromedia discussion list

Posted by: Nathan on June 30, 2003 04:28 PM

Yes, indeed they are great. I'd say 9/10 for both.

Posted by: Mario Klingemann on June 30, 2003 08:48 PM

Not flash, but ... a very cool matrix app that works on windows. It's open source too, so.. someone probably could reverse engineer it.http://zmatrix.sourceforge.net/

Posted by: Todd on July 1, 2003 12:01 AM

Yep but the one from Glen Rhodes is just pre-rendered effect!

Posted by: Harold on July 2, 2003 09:39 AM

Well, in that case the judges say: disqualification! Or rather: 2 points penalty!

Posted by: Mario Klingemann on July 2, 2003 10:22 AM

i've tried to generate something such matrix's original code and here's my example
[and download source]
http://www.3site.it/varie/matrix.html

Only 4 FlashMX

Posted by: andr3a[M] on July 4, 2003 11:30 PM

I just had to do make my own version:

http://www.oscartrelles.com/examples/matrix_effect.php

I have to review it, there are a couple of things that are bugging me about it, but it looks good a first try.

Posted by: Oscar Trelles on July 9, 2003 05:27 AM

Hello everyone,
First of all, I'm very honored to be in this list, there are quite a few very nice effects! I also wanted to say that the effect @ kirupa had been updated to resemble a bit more the original matrix effect.

Thanks again :)
Ilyas

Posted by: Ilyas Usal on July 28, 2003 01:29 AM

BTW - if you are looking for that Matrix Ping Pong movie take this link: http://www.ntv.co.jp/channel/kasoh/kin10.html

Posted by: Mario Klingemann on July 29, 2003 07:16 PM

Here is a link/tutorial to a Shockwave version:

http://director-online.com/buildArticle.php?id=1117

Posted by: julio on August 6, 2003 10:20 PM

BTW - Oscar's version gets 8,5/10 on my matrix jury scale.

Posted by: Mario on September 8, 2003 10:23 AM

Heres my version it uses masking and stuff enjoy
http://denacioust.sphosting.com/MATRIX.swf

Posted by: denacioust on September 19, 2003 10:40 PM

Hey take a look at my version. :-)
http://www.danesis.com/matrix.html

i hope u guys will like it.
Enjoy and please leave me a message if u have anything to say.

Posted by: dANESIS on October 12, 2003 05:05 AM

Matrix, where to find software to make it.

Posted by: Arizona DUI Law on December 4, 2003 03:19 AM

Here you have my version...

Juan Searle

Posted by: Juan Searle on December 8, 2003 03:26 PM

sorry, the url was

http://www.metroweb.es/matrix.html

Enjoy!

Posted by: Juan Searle on December 8, 2003 03:28 PM

Someone said my matrix effect was just "prerendered".

I'm afraid not. It's completely dynamic, random and realitime. It's just done with the smart use of bitmaps.

Posted by: Glen Rhodes on June 1, 2004 07:26 PM

Wow, I was searching Google and I found my name here, I'm surprised! I'm Devon Lawler. Initialy this had a 10/10 on Flash and was featured on some CD I guess, just for some background info on it ;). Anyways, just figured I'd drop in and say hello ;)

Posted by: Dark-Hawk on June 27, 2004 12:15 AM

It's my version
Enter a word in field and press OK
Don't forget to click a movie when it load

Posted by: hellas on July 14, 2004 04:01 AM

I like the versions that Glen Rhodes and Juan Searle made, but I couldn't find tutorials or .fla files for either one of them. I'd like to see more info posted.

Posted by: James on September 16, 2004 09:31 AM

WOW, I did a search on Google and found that my matrix example was posted here! very cool to be among some great Flashers!

Yeah, mine's all code, no bitmaps, just a font package ;) You can get the FLA here:

http://www.acmewebworks.com/matrix/MatrixCode.html

and here's a version where you can type in title and it'll render it like the movie titles:

http://www.acmewebworks.com/matrix/Matrix_titles_demo.html

Thanks for the comments! Very much appreciated - John

Posted by: John Grden on October 10, 2004 10:09 PM

HI

Posted by: MAULIK on March 16, 2005 12:11 PM

hi,

i just found this page and thought i'll post my flash 8 matrix example.

http://www.bherholz.com/experiments/matrix/

very ressource hungry, but differs a lot from the other entries :-)

gr, ben

Posted by: ben on October 16, 2005 11:59 PM
Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Thank you!

Most Visited Entries
Sketches, Works & Source Code
Lectures
Contact
Backlog
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german
Impressum


My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers