animation

For creating information graphics that move, you'll want to understand animation in Flash.

Example: A House of Glass (The New York Times, 2008)

Animating in Flash is called tweening. To make something move, you apply a motion tween to the layer it's on. The Animation Basics tutorials linked below will walk you through the process step by step. Tweening can also be done with pure ActionScript (code only). That has a steeper learning curve (unless you're already skilled at programming).

Fading, brightening, dimming, changing size, and transformations are also animation.

The technique for animating in Flash changed drastically with CS4. The old way of tweening is still available, but who knows when Adobe might eliminate it? If you learned the old way, it can be a challenge to change to the new way (isn't that true of everything in life?). If you're now starting to learn Flash, just be aware that you might find old tutorials online that refer to the old way of tweening.

Have a look at five Flash animation examples (which you can download and play with). They show the current or "new" motion tween in action.

There are many projects in Flash journalism that use no animation at all -- they use programming and data, photos and audio, video and text, but no real animation. (See the Examples page.)

Animation Basics: Flash CS4 and CS5

These tutorials are brief slideshows that illustrate step by step how to create a Flash animation (using the new motion tween -- Flash CS4 and later). Each of these tutorials builds on the one(s) before it.

  1. Starting from scratch: Create a simple animation, with one symbol.
  2. Editing the motion path: After you have made an animation, you can adjust it quite easily.
  3. Animating two objects: Make two symbols move simultaneously and independently; fix common errors.
  4. Editing CS4 motion tweens: Extend, shorten, move keyframes, add new directions to the animation.
  5. Stopping the animation: Add ActionScript so that the movie does not repeat endlessly.

Script vs. Timeline

Animating directly on the Timeline is relatively easy for Flash beginners, with a little practice. If you want to move a symbol from one point to another, or rotate it, or fade an image in or out -- these are easy enough to do directly on the Timeline.

Many full-motion cartoons are animated in Flash. I was very impressed by this tutorial -- Designing and animating characters in Flash -- by the talented animator Chris Georgenes. It's not for beginners, but it can inspire you!

For great examples of full-blown animation done in Flash, see the blog Cold Hard Flash -- new videos are posted frequently.

To build controls that allow interaction with the Flash movie, you'll need ActionScript. Controls include buttons, sliding menus, and anything that is dragged.

Old Tweens vs. New Tweens

When you look at tweens on the Timeline in Flash, you can immediately see whether the tweens are old or new. The first image below shows the old tween. You'll see arrows inside the blue sections on the layers. Also, you'll see gray and blue sections together on one layer.

Image: Old tweens

The image below shows the new tween. Notice there are NO arrows. Also, you cannot mix tweens (blue sections) with non-tweens (gray) in the same layer when using the new tween.

Image: New tweens

Stay alert to this difference when you are looking at tutorials online. Instructions for the old tweens will NOT work with the new tweens.

Tutorials for Animation

Here are a few free tutorials that other people have made and that I recommend (honestly, they are the cream of the crop).

Creating a Simple Flash Document: If you are an absolute beginner -- never even opened Flash before -- this four-page intro from Adobe is just for you. For CS4, but works for CS5 too. Beginner.

Motion Tweens in Flash CS4: This is a video tutorial that repeats most of the instruction in the first one above. For CS4, but works for CS5 too. (Found at Kirupa.com.) Beginner.

Creating Symmetrical Round Objects: The example here looks like a half an orange with perfect sections showing. This is a great tutorial for someone who has already become comfortable with the basic drawing tools in Flash. You'll learn some very useful advanced techniques. (Also found at Kirupa.com.) Intermediate.

Understanding the Coordinate System in Flash: Sure, this is not sexy -- but using those X,Y coordinates in ActionScript is part of how you harness the power of Flash! Note that the tutorial shows ActionScript 2.0 (bigRectangle._x = 300;) -- but for the X,Y coordinates, ActionScript 3.0 is only slightly different, using NO underscore after the dot (bigRectangle.x = 300;). This is a very thorough tutorial, very helpful. (Found at Flash Explained.) Intermediate.

Creating Animations Using the AS3 Tween Class: Very cool visual effects done with ActionScript 3.0 instead of Timeline animation. These are not difficult if you have some ActionScript experience (beyond basic buttons) already. Intermediate / Advanced.

Lee Brimelow's tutorials at gotoAndLearn.com: These are among the most wonderful Flash tutorials anywhere, and they are all free. Many of them are advanced and/or very specific. However, if you're about at an intermediate stage of your Flash learning adventure, you really ought to watch the Flash AS3 video tutorial series. An earlier version of these (now updated for AS3) got me hooked on Lee. Intermediate / Advanced.

Importing a Logo from Photoshop: In this two-part tutorial, Ray Villalobos shows you how to prepare a fat, juicy logo in Photoshop and then use Flash to animate it with a cool blur effect (see also Part II). Ray's excellent tutorials are at Planet of the Web. Beginner.

Designing and Animating Characters in Flash: If you'd like to try some cartoon animation, this is an amazing introduction. You should be familiar with the basic drawing tools in Flash first. This tutorial has been brilliantly updated for Flash CS4. (From Adobe and Chris Georgenes, the awesome talent behind Mudbubble.) The character was created in Flash "entirely with the mouse and the rectangle and oval tools. ... using the shape tools resulted in the ultra-clean line quality I was trying to achieve." Yeah! Take that, Illustrator snobs! Intermediate.

Do you have a great tutorial to recommend? Let me know!