Introduction to Animation

Flash's original use was for lightweight animation. With all the scripting abilities available today, Flash is still widely used for web-based animation and is preferred over other vector based animation programs. The simplest method to create animation is in the traditional manner, frame-by-frame. Just like Snow White or the flipbook you made in elementary school years ago, animation is based on a series of images displayed in rapid succession. In a frame-by-frame methodology, the artist creates a new picture, or frame, to create a sequence.

In Flash you will use keyframes to define a sequence. A keyframe is a frame that artwork or actions can be placed on. It represents a change in the timeline verses a normal frame, which is just space & time on the timeline. You can insert keyframes on the timeline by highlighting the frame you want to add a keyframe to and choosing Insert>Keyframe. If artwork existed on a keyframe prior to the spot you inserted it at, the artwork will be copied onto the new keyframe. If the prior keyframe was blank, then the new keyframe will be also. You will see that you can also insert blank Keyframes. These will always be blank regardless of what was on the timeline prior to its location.

To create a basic animation you can place artwork in frame 1. After doing so, highlight frame 2 and insert a keyframe. This will place a copy of frame 1's artwork on frame 2. You can then move your artwork slightly making it appear to move over time. Repeating this process will create a classic frame-by-frame animation sequence.

You can delay movement on your timeline or give the illusion of something freezing by increasing the amount of time in-between where elements are displayed on the stage. By inserting frames, the time that elements are seen can be drawn out. You can insert a frame by choosing Insert>Frame. This will place a space on the timeline. The more frames that are placed after a keyframe, the more time will pass before the next change is seen.

You can also make elements blink or disappear instantly by inserting a blank keyframe after the artwork. A series of keyframes with artwork and blank keyframes will give the appearance of something blinking on and off.

Animating with Motion Tweens

One of the elements that makes Flash such an easy to use program is the Motion Tween. Motion Tweens (short for in-between) are definitions for symbols that allow Flash to change an element on the stage over time automatically. This is accomplished by defining a beginning point and an end point for the transition. Flash then calculates the change for the amount of frames in-between them and gradually changes the element. For example, if you wanted to move something across the screen from left to right all you would have to do is define two keyframes. One frame would be the beginning point for the object and the other would be the end point for the object. You would then create a motion tween and Flash would draw all the individual frames for you over time.

When creating a motion tween it's important to remember that you need to tween a symbol that has been defined in the library. Although it's possible to create tweens without symbols, you may get unwanted results without using one. In addition, symbols are easy to edit and change out at later times.

To create a Motion Tween you first need a symbol to tween. These can be any of the three types we mentioned earlier, but for this first example lets use a graphic symbol. Start a new document. Choose Insert>Insert New Symbol. Type in a name and select Graphic for the behavior. Click ok. Once on the symbol's timeline, draw some artwork that you can animate across the screen. When you finish, return to the main timeline by choosing the back arrow in the info bar above the stage.

Open your library by choosing Window>Library. You will see your symbol. Drag the graphic from the library to the stage and place it to the left. Move down the timeline some to frame 30 or so. Highlight the grid spot at 30 and choose Insert>Keyframe. This will place a copy of the earlier keyframe on the currently highlighted frame. On frame 30, drag the graphic on the stage and relocate it to the right side of the stage. You have now defined both the beginning and the end points for the tween. You can see the two positions by scrubbing the playhead above the timeline from frame 29 to 30. You will see a sudden jump from one frame to the next.

To complete the motion tween highlight frame 1 and choose Insert>Motion Tween. This will produce a blue shade in-between the two keyframes and a solid arrow. If the arrow is dashed something went wrong and you should try again.

Motion tweens have several options. With frame 1 selected, look at the properties inspector. You will see several options including easing. Easing allows you to offset the movement speed from beginning to end or visa versa from -100 to 100. The default is 0 and moving it one way will make the object appear to speed up, while the other will make the object appear to slow down. Experiment with these options to see the results.