keyline2.jpg

Animate in After Effects, export to FLV with an alpha channel, Actionscript playback in Flash with a tweening class.

keyline2.jpg

Update Feb 19/08: Lee Brimlow offers a great step-by-step tutorial in his popular tutorial site goToAndLearn.com

keyline2.jpg

ufc80.jpg

UFC 80 Rapid Fire created by Red Interactive Agency

keyline2.jpg

As with all my tips and advice I’m assuming your at least an intermediate designer, your client wants maximum impact and the target audience has reasonable connections.

keyline2.jpg

AE has the visual intuitiveness of using a timeline and keyframes to animate, combined with the power of Plug-ins.

  • Use AE for transitions and button rollovers then render them as an FLV with an alpha channel.
  • Once you’re happy with your animation, import the FLV into the timeline and control it’s playback using the “_frame” property of your preferred tweening prototype. I use Tweener and it makes me happy. You get twice the use out of the FLV because you can then play it backward. You could even play to a specific point in the FLV, so if you wanted your button rollOut animation to look different than your rollOver, you could create one FLV animation of the rollOver and rollOut, when the user mouses over the button you play the animation to a mid-point, then when they rollOut you animate to the end automatically moving the playhead back to frame 1 using Tweeners “onComplete” function.

keyline2.jpg

Why use After Effects animation instead of doing it all in Flash?

  • 3d Layers. AE has 3D layers that allow you to manipulate graphics along the Z (depth) axis. This opens up a whole new range of animation possibilities.
  • True Motion Blur. In AE you can create a true motion blur that follows a graphic to whatever angle, position or rotation it animates to. More realistic.
  • Image Distortion. In AE you can manipulate images in a way that’s not possible in Flash. You can control warping, lighting and masking effects to the pixel.
  • Using footage as masks. You can import live action video, play with the contrast and use it to reveal graphics. In UFC 78 Validation we used footage of ink flowing into water to unmask the fighters and content area.
  • Incorporating 3d. If you’ve been following my articles you know that I feel 3d is an asset that should be in every designers arsenal. AE runs side-by-side with any 3d modeling program.
  • Plug-ins. Plug-ins are what make After Effects so special, with them you can create broadcast quality bitmap effects that aren’t traditionally seen on the web. Fantastic example from a site done by a friend of mine here at Red, UFC 71, click on “the story” and watch how the website basically… explodes.

keyline2.jpg

Why FLV instead of PNG sequence?

  • Sometimes PNGs are more appropriate, but with an FLV you can set the compression of the animation to match it’s intended use. Usually the last rendered frame of an FLV is much clearer than the previous frames in the sequence. You might want to use PNGs for a button rollover and an FLV for a page build.

keyline2.jpg

The only downside with using AE for a beginner is, you have to experiment. Very rarely will you jump in and just nail the look you want right away. Using Plug-ins can be even more tedious because there’s so many to choose from and each can have dozens of different settings to tinker with. If you’re searching for an effect that you only know you’ll like once-you-see-it, it’s not uncommon to spend an entire day playing, only to be no closer to your goal.

Time behind the wheel is the only answer to this. Unfortunately your resident AE specialist can’t just sit down with you for 15 minutes and show you the ins and outs. It’s the kind of thing you just have to discover for yourself.

keyline2.jpg