This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

Flash Course 2: The Timeline

The timeline is one of the most basic tools in Flash. While mostly associated with amateur to intermediate Flash developers because of its ease of us, it's easily of the most underestimated and undervalued. Many things that can be done on the timeline can be done with Actionscript; however, the notion that you should do everything with Actionscript if possible is a giant misconception. There are instances where timeline animation is more appropriate than programmed animation, and vice versa; more on this in the coming weeks.

First, let's go through a very quick primer on animation. If you're familiar with any other software that makes use of an implied or literal timeline—cel animation, film editing, audio production, 3D animation, even WYSIWYG DHTML sliders—you'll pick this up in no time.

Wikipedia defines animation as the illusion of motion created by the consecutive display of images of static elements. Your vision and brain take care of the rest. Because you see the images fast enough, your brain forces you to accept that what you're seeing is one continuous motion instead of a series of separate images. Understanding this concept will help you to get around the limitations of the software. By taking advantage of this, you can trick the viewer into believing something that's not actually happening. This is the mark of a skilled animator.

The Anatomy of a Vector

All graphics created in Flash are vector, not raster. Try to think of raster as coordinate-based and vector as formula-based. In terms of a Cartesian plane, when you create a raster graphic, your computer says to your screen, “The pixel at x-coordinate ‘1’ and y-coordinate ‘1’ has a hex value of FFFFFF. The pixel at x-coordinate ‘2’ and y-coordinate ‘1’ has…” and so on. As you’ve probably guessed, the more complex your graphic is, or the bigger the graphic is, the more information the computer has to communicate to the screen, which is the inherent downside of the raster format. Also, scaling becomes a major issue. Up-scaling requires the computer to interpolate a graphic and “guess”—for lack of a better word—how pixels relate in a larger form. Down-scaling requires the computer to delete certain pixels, but, again, it all boils down to algorithmic guess work.

With a vector, however, graphics as described as a formula or equation. To create a 10 × 10 red circle in the top left of your screen, your computer says to the screen, “Using the point (5,5), fill every unit within a 5-unit radius with hex color #FF0000.” Scaling in vector becomes more of a non-issue, since the computer only has to change one variable in the equation. To scale the circle to 200% of its size, the instructions for the radius size changes from 5-units to 10-units. The more complex the graphic, the more complicated the equation used to describe it. Obviously, certain lectures can be so detailed that their equations rival an equivalent image done in raster. It's clear that each format has benefits as well as disadvantages.

Let's go back to the way raster images communicate to the screen. That's just for a still image. Now imagine changing that image once per frame. For one second of animation, that's communicating a lot of data about 30 times. You start to see why animating in raster is less than desirable.

Animating a vector is much more desirable. Again, you only have to change one variable in the same equation per frame. Going back to the Cartesian plane example, if you want to move a circle horizontally across the screen, you could use the same equation for the shape and only change the x-coordinate every frame. It's a much more friendly system to work with, not to mention much less processor-intensive and keeps file sizes low.

Tweening

In traditional animation, there exist 2 very important roles: a lead animator and an in-betweener. A lead animator's job is to establish the look of the scene and illustrate key steps in the sequence; the in-betweener fills in the gaps. For instance, if an image sequence features a ball moving from the left of the screen to the right of the screen, the lead animator might draw 2 frames: the ball on the left and the ball on the right. The in-betweener then draws every other frame.

In a sense, you're the lead animator and Flash is the in-betweener. In most Flash animation, you only have to tell Flash what key points you'd like and Flash will do the rest. While this isn't an absolute rule, it does apply to scaling, movement, opacity, color, and rotation. Here are some examples of each.

The process of creating interpolated animation is called tweening, and the physical chunk of interpolated animation (on the timeline) is called a tween.

Easing

“The devil is in the details” is an almost always accurate quote, and easing is no exception. Easing is a subtle way to tweak tweening. By default, it is set to 0 when you create a tween. Flash allows a range of easing from -100 (full ease in) to 100 (full ease out). A tween basically defines a constant incremental change; easing allows you to change the increment, although the animation still takes place over the same amount of time. Ease out causes deceleration towards the end of the animation; ease in causes acceleration towards the end of the animation. As movement is the most clear visual way to understand these differences, take a look at this side-by-side comparison.

Wrapping up

This has been a long one, but I hope it's been beneficial. The goal of this article (like the rest of the series) is not to show you how to do things in Flash; you can open up the help files for that or look through millions of online tutorials. However, by understanding why things work the way they do, you'll be fully equipped to execute the process, not only in Flash, but in whatever the next vector-based animation tool comes out to be. You'll also be aware of why certain techniques are appropriate in some situations over others.

Next up: Actionscript.

Comments

Jacob said:

Wow. Thanks so much for this article. I'm sick of reading books that try to explain a concept by saying
"move your mouse towards the middle of the screen, click twice, and do the hokey pokey; ok, now you know all about the timeline in flash!"

This article is so much more informative. (Showing how Flash relates to normal animation...etc.) Explaining "why" instead of "how" is much more useful to me. Thanks again.

Posted on May 20, 2006 12:22 AM

Sorry: comments are closed.