Introduction - FX in Flash

The purpose of this site is simply to help out Flash animators in the area of FX animation, I hope to update it every two weeks. Comments and critiques are welcome, and valuable resources will all be available and updated on the sidebar under LINKS and DOWNLOADS with actual FX samples and archives of reference materials.

Since I use a Mac, I currently prefer Flash 8, since it's not any different from the CS3 version, any files I make available for download (as well as all my screen captures) will be in Flash 8. I might eventually convert to the new CS4 - despite the fact it no longer renders in Quicktime format, which I personally find VERY annoying and has prevented me in upgrading thus far (sorry everyone), I enjoy the fast and easy video file rendering process to make quick tests for review, maybe someday.

To start off, I've been using Flash for broadcast animation for 10 years now. I basically got into FX simply because not many animators at the studio I was in wanted to bother with it. Either because it was often very difficult or very time consuming, so I got thrust into producing FX animation out of necessity.

A couple years ago, I began teaching part-time Flash classes to some 2nd year Animation Students at a college just outside of town, so as I was trying to dig up some examples to show them for my next workshop How To Create Basic Flash Effects, when I came upon the old Tron episode I had directed in 2002 - this was one of the first times I had to deal with actually designing FX for a particularly effects-heavy episode.


Back in early 2003, (in the middle of our 2nd season of Olliver's Adventures) we wrote a script about Ollie getting sucked into his PC to fight an evil computer virus, little did anyone know that we wrote this as an excuse to just do our own TRON-APPRECIATION EPISODE!
Above are a few model sheets, Scott and I worked on them a bit, but Jeff did most of them.

Here's a few short scene clips with no audio:

The background art needed lots of FX animation as well, lots of glowing lines and lights in particular. It was one of the animation team's favorite episode to work on, and the story artist practically killed himself designing and boarding this entire 7 minute epic in just 4 weeks. Compared to any other episode at the time we spent twice as much time in layout and FX animation for this one. Jeff Knott on Character/Prop Designs & Storyboards, Fraser Hallett & Jeff Knott on Background designs, Scott MacDonald created final model sheets, along with Sean Garnier and Jake Macher who designed some killer special effects, using nothing but Flash 4.

A few BG samples as well:

The craziest story about this episode is that this was the official "LOST EPISODE" for this series. Every animated series that goes for multiple seasons seem to have one, this was ours. This episode could ONLY be seen on Teletoon, Canada's Animation Network. All international versions aired a completely new and alternate 7-minute short in place of this one (which we later had to produce). So it would seem only Canadian viewers got to see this special episode.

Here's some Flash files of very simple alpha channel, masks, and color gradient combinations used to create some simple FX tests to just test and see if it would work.
Sample 1
Sample 2
Sample 3

Since over 100 scenes had the character costumes with the Tron glows on them, instructions were made for the Clean-up department as to how to easily mass-produce the FX, these were eventually changed and revised for a nicer and more efficient radial-gradient-alpha overlay, but was later used for many of the lightsaber-style glows for all the backgrounds in 'computer land'.

Below are some early tests we did to figure out how the back-lit effect would work. Along with other test shots to see what colors and transparencies would work best. For the most part, just early experiments to see which method was most practical to use. Flash did not have any glow filters at the time like it does now, so the frame by frame soften-edges technique was the key. It had it's share of glitches, but we'd work around them or hid them as best as we could. For some teleportations, color streaks, and energy beam FX, a system of a dozen overlapping & tweening gradients was all that was needed to create the desired look.

See the materialization effect in slo-mo here:

So this is hopefully the beginning of a large archive of Flash FX tutorials for anyone interested, I hope you all enjoy them.