Flash Concepts

Flash is a sophisticated, deeply complex application, but there is much that even a newbie to the program can do. However, some basic concepts and terms should be understood first.

Symbols

When we create with Flash, we are creating parts that we call Symbols, that we animate in a project timeline.

There are three kinds of symbols:

Graphic symbols can consist of a single still image, or series of images saved to the frames in that symbol's timeline.

Movie symbols can be self-contained animations, or containers that can be used to load external flash files into an active flash movie.

Button symbols display a rollover effect and can, as the name implies, be used as interface elements.

A simple example where all three symbols are used: A flash movie contains a flash button. If we edit the file, we see the button occuples frame one of the project's timeline.

If we Edit the button we can see that it consists of four frames; Up, Over, Down, and Hit.

Each state of the button is a keyframe containing a graphic or movie symbol. Example: The up state might have a graphic symbol of a pushbutton. The over and down state might have flashing effects added to the button art with movie symbols.

The Timeline

is made up of frames, or increments of time, where we can create animated effects by changing position, scale, or color of a symbol from one frame to the next. When the movie is played back at normal speed, we see movement.

Motion Tweening

If we place our button on the stage, in the first keyframe of the scene's timeline, and then add another keyframe at frame 24 (right-click for 'insert keyframe'), we've duplicated the contents of the first keyframe. This keyframe will appear as a black dot.

Select the duplicate keyframe in the timeline. Click and drag the button symbol in that keyframe to a new position. Then right-click in between the keyframes in the timeline, and choose 'insert Motion Tween' from the popup menu.

The box will turn violet and an arrow will appear between the keyframes.

This creates a straight motion path. Flash 'tweens' the beginning and end keyframes to create the roughly two second animation. (Flash's default frame rate is 12 frames per second)

Modifying the tween

We can insert more keyframes to the middle or end of this tween, and reposition, scale, or otherwise change the button symbol in those new keyframes. This will recalculate the tweens to fit the new sequence in the timeline.

Using a Motion Guide

We can also create a curved path between keyframes by right-clicking on the layer containing the object to be animated, and adding a Motion Guide layer. Select the first frame in that layer, and use the pencil tool (set to smooth) to draw a pathway for the object to follow. Select the keyframes at each end of the tween, and position the object's centerpoint on top of the line you drew. You should see the object 'stick' to the line as it moves between keyframes.

Easing

Easing is how we make motions look more natural, and create the illusion that we are seeing real physics at play, such as gravity.

For example, a bouncing ball will speed up as it falls, but slow as it reaches the top of its bounce.

As expressed on a timeline, we would first create a ball, and make it a graphic symbol. Then we would drag that to one side of our stage, and add a keyframe at about frame 30. Select that last keyframe, then the ball on the stage. Move it to the other side of the stage. Right-click between the two keyframes and add a motion tween. Add keyframes to the midde of the tween and move the ball on each keyframe so that a jagged bounce is created. Add a Guide Layer and a smoother path to improve the animation. See example

Select keyframes where the ball is at the top of its bounce, and add a 100% Ease In. On the keyframes where the ball is making contact with the 'floor', use 100% Ease Out. See example

Change the keyframe positions in the timeline to modify the timing. Be sure to modify your document's frame rate if you wish first (default is 12 fps, more than 30 fps is not recommended).