Flash Tips and Best Practices for Designers: Animation

For designers, a huge part of Flash’s appeal lies in its ability to let users add motion and interactivity to just about anything. For most new users, the real Wow! factor comes when they first figure out how to bring things to life using the Flash timeline and ActionScript.

Today we will look at how we can make the most of the tools Flash throws at us for adding animation to our symbols. This can be quite a dense topic to cover given how much the application has grown as a multimedia powerhouse since its early days, but I will try and keep things concise and approachable. For more in-depth coverage, feel free to check out other tutorials on Activetuts+ and I’m sure you will find what you are looking for.

Although this post was written for Flash Professional CS5, most of the tips should work just fine in older versions. I will try and make it a point to highlight wherever something is very specific to the latest version of Flash.

Jargon Busting…

Before we get into the details, let’s take a few minutes to go over some of the jargon we will refer to here. Since most Flash newbies come with very little or no exposure to the concept of moving images, some of these concepts can be a bit daunting to get hold of. It’s best that we cover them upfront before diving deep into the practical aspects of animation and interactivity in Flash.

WTH is FPS?

FPS (or frame rate), very simply, refers to the number of frames rendered every second. Any moving image – animation or video – is a series of still images, projected one after another at a very high speed, causing the illusion of motion. If you have seen a movie reel from the time when they actually used film to shoot videos, you will see that it is simply a strip with a lot of still pictures. How fast the film projector runs through them is what is called FPS.

The default FPS in earlier versions of Flash was 12, which has now been bumped up to 24 over the last couple of versions. This could be because because Flash has progressed from being a pure vector animation tool to the preferred mode of playing videos on the web. Since videos need to play at a minimum of 24 fps to run smoothly, the Flash container also needs to play catch-up. Also, the Flash player has improved drastically now and can render much higher volumes of data needed to play at higher fps without taking a performance hit.

Shape vs Motion tween

Taken directly from the cel animation books, tweening (short for betweening) is the method used to create interim frames between two key frames. For example, if I were to animate a character’s hand going from it’s regular position to pointing to something, I would draw the first and last positions, and then draw the frames in between to simulate motion. How many frames go between the two key frames is defined by the frame rate of the animation and the time in which you need the motion to be completed. Slower movements mean more tween frames, and vice versa.

Flash makes it easy for us by drawing the tween frames itself, unlike what you would do in a traditional hand-drawn animation. Since CS4, there are three distinctly different ways to tween – shape, classic and motion tween. Let’s understand each one a bit:

Shape tween: The most basic type of tween, although you probably won’t be using this too much. You start with a shape and transform it over time. Unless both shapes are not complex and are very similar to each other, you’re probably going to need a lot of practice to get this to work. You can add shape hints to force certain points on a shape to behave during the transformation.

Classic tween: Up until version CS3, this was the primary tweening method in Flash, one that was as loved by everyone as it was hated. You basically take a symbol and modify its properties between keyframes – like size, position, color effect, etc. Since the method depends on two distinct states – one on each keyframe – editing an animated symbol can be quite a tedious task. Something as simple as moving the symbol around needs you to select the symbol on each keyframe and move it exactly the same amount.

Motion tween: By far the biggest upgrade to Flash’s animation capabilities, the motion tween brings After Effects’ much loved motion editor to Flash. The biggest change between the old and the new method is that motion tween is now object-based rather than timeline-based as in the old method. You apply tweens to symbols, with fine control over pretty much any physical aspect of the object through the motion editor panel. Sure, you still apply motion on the timeline, but it is now possible to select a symbol, move it and have its animation carried with it.

Easing

We know that when a ball drops in the real world, its speed is not always the same. It picks up speed as it approaches the ground, then bounces at approximately the same speed and slows down as it reaches the summit where it heads back towards the ground. When you animate objects in Flash, they will transform at an even pace by default. If you’ve been wondering why your animated text entering and exiting the stage feels flat, this is the reason. With easing, you can basically tell Flash to have the motion accelerate or decelerate without having to tweak the position manually at each frame.

New Motion Tween Goodness

One of the biggest issues with old motion tween in Flash – something I didn’t realize till I saw the new one – was that the animation was predominantly timeline-based. You created a keyframe on a layer, placed a symbol on it, added another keyframe a few frames away and modified the symbol. In essence, you were dealing with two distinct instances of a symbol. Moving one made no real different to the instance in the next keyframe. Sure, we all went through hell trying to reposition elements after animating them, but that’s just how Flash played its cards.

Then with CS4 came the motion editor, and things changed forever. Unfortunately, the motion editor is not exactly the best understood part of Flash even after one and a half version increments. Let me take a few moments then and discuss some interesting tidbits about how this thing works, and how you can make it work for you.

Two ways to animate

You can now edit your symbols in two distinct ways to initiate an animation – from inside the motion editor, or directly on the stage like the old days. Each physical parameter of the selected symbol – like x & y co-ordinates, scale, color effects, filters, etc. – is now listed as a row in the motion editor. Simply move to a point in the timeline and change the parameter, and a a keyframe is generated for that parameter. If you like the traditional, visual way of animating things, simply go to a frame and edit the symbol on the stage.

What’s important to understand is that keyframes are now added per parameter, so if you only moved the instance on stage, there will be a keyframe only for the X and/or Y co-ordinates in the motion editor. This provides an immensely broad range of control over animation – something that was impossible to achieve in the older versions of Flash.

Note: You don’t need to explicitly create a keyframe anymore. Just move to a frame, change something about the instance and a keyframe is automatically generated for that parameter alone. For a lot of people, this is a bit of a cultural change; something they find very difficult to get used to. Although you can still manually create a keyframe, I’ve found that unnecessary for the most part.

Finer control over easing

Instead of the single input field and an ‘Edit’ button, you now get an entire row dedicated to easing in the new motion editor. A dotted line spanning all frames of a tween makes it super-easy to see how the easing is working. The included presets are a good way to get started. A curved line means the speed of the animation is gradually increasing or decreasing. A straight line means consistent, even pace. You can create as many eases as you want, and assign different ones to each parameter. Remember that the easing needs to be explicitly assigned to each set of parameters. Unless you do that, your animation will continue to be the same flat movement.

Once you’ve got a hang of how the easing works with the presets, it’s time to get adventurous and try the ‘Custom’ option. What you get here, is a red solid line instead of the dotted one, indicating that you can edit it. Go to a frame and create a keyframe in the ‘Custom’ easing row to add a bezier node in the timeline. You can then use the node handles to edit the curver as you wish.

Quick Tip: If you are not too sure about how easing works but would like to instantly take your animations up several notches, use this rule that I typically go with myself – appearing elements (anything coming into the frame or on stage) work best with a positive ‘Simple (Medium)’ easing at ’50′, while disappearing elements work best with the same easing at ‘-50′. This makes the overall animation feel much smoother and consistent. As a rule, I use easing on virtually anything that moves in my animations.

Motion path editing

When you move an object over time using motion tween, a line appears from the symbol’s registration point showing the start and end point of the movement as well as each of the frames. A seemingly hidden feature here is the fact that this path is like any other line in Flash. You can use the selection and pen tools to modify it the way you would any other path. Click & drag anywhere but the ends of the path (while it is not selected) to convert it to a curve. You can then use the sub-selection tool to edit the bezier handles on the nodes for finer control. Every time you add a keyframe in the motion path, a new bezier curve gets added to the path, which you can then edit as you need it.

Quick & easy pseudo-3D animation

If 3D in Flash is what you have always been craving for, but haven’t had the heart to play around the the 3D frameworks like papervision, here’s a quick and dirty way to fake 3D movement in Flash. You can use the new 3D Rotation tool along with the motion editor to make objects rotate in 3 dimensions for that added jazz.

3D rotation does not feature in the motion editor unless you actually use it on an object. To do so, select the 3D Rotation Tool, select your object and click & drag one of the three colored lines that appear. Each of the three lines represent an axis – green is Y, red is X and blue is Z. X & Y are typically the ones that will make your object look like it is rotating in 3D space. Get it to the position you want, go to the end of the motion tween and move rotate it again. Add a ‘Bounce’ ease for some extra spice.

Reverse the animation for more predictable results

My typical animation workflow is to create a composite of the key frames in an animation, and then add motion to each object as necessary. For anything that needs to slide in from outside the stage on the left, this means I need to move the object out on the first frame, reduce the alpha, go to the last frame, move it back to where I wanted and increase the alpha to 100%. This is how it has always been really, so I never bothered with it so much till one fine morning when I discovered "reverse keyframes". The idea is stupid simple really, but worth countless hours if you animate stuff in and out of the stage every day.

Here’s how it works. Once you have your composite in place, simply animate the opposite of the effect you need. Start from the final position of the object, and animate it going out towards the left. Include everything you need to make the animation perfect – alpha, blur, et al. Then, simply right-click the tween and click ‘reverse keyframes’, and voila! You have your slide in from left animation just as you need it to be.

Copy & paste in motion

Perhaps the biggest time saver for me since I started using the motion editor in Flash, has been ability to apply motion to an object, copy it and paste it for all other similar ones. This makes most sense when you have a bunch of objects moving in or out in a similar fashion – a bullet list, for example. Once you have applied a tween to one of the list items (assuming each one is a single movieclip on its own layer, of course), right-click the tween and select ‘Copy Motion’. Then simply select the first keyframes of all the other list items, right-click and select ‘Paste Motion’. You can then modify each one individually if necessary.

Miscellaneous Animation Tips

Here are some quick tips to save time, energy and a few frames when dealing with animation in Flash:

• If you have a bunch of movieclips on a layer that you would like to animate individually, the first thing to do is to place them on separate layers. The next time you need to do this, select them all and press Shift+Ctrl+D. Flash will do the dirty work of placing them all on individual layers and will even name the layers to match each movieclip.
• When making things appear on screen, set the Alpha value of the first frame to 5% instead of 0. This way you can see a faint version of the object to be able to select and manipulate it. Since it will anyways go from 5% to 100% in a matter of a few frames, the effect on the final animation is hardly even visible.
• If you have elements appearing on screen, staying for a while and then disappearing, animate the appearance with a motion tween, then add a static keyframe on the next frame for the the duration than it will stay on screen. Copy the appearance motion, paste it at the end and reverse frames to have the element disappear the same way it appeared.

Conclusion

That brings us to the end of another chapter in the Flash Tips and Best Practices for Designers. If you used Flash a few years ago and have recently come back to it, you will no doubt appreciate the huge leap it has taken over the years as a professional grade animation tool. I hope these tips will help you grapple with some of the newer, surprisingly rarely documented tools and features. Have more tips and tricks to share? Let’s hear about them in the comments.