ANIMATION USING FLASH


Summary Sheet 1
Instructor: Barbara Lattanzi
rev. 2.29.04

FRAMES IN FLASH

Even though the Flash timeline appears to be divided up into frames, it is really only labeled with frame numbers (at the top). It is important to realize the Frames do not "exist" on the Flash timeline until you put them there with menu command:

INSERT > FRAME

Think of the Flash timeline like an egg carton that you are putting eggs into. You put eggs into the egg carton by starting on the left and filling up each slot from left to right. With an egg carton you may have only 6 slots for each row, but with Flash you have unlimited cells to put Frames into. And you have an unlimited number of rows, or "Layers".

Rule of thumb:

PUT SOME EGGS INTO THE CARTON BEFORE YOU PUT YOUR GRAPHIC CHICKS INTO THE EGGS. In other words, make some frames before you put your graphics into those frames.

Once you have Frames inserted then you can start to fill those Frames with the egg carton equivalent of baby chicks inside the eggs (okay, we are not going to eat those eggs!). That is, you can start filling the Frames with graphics, texts, etc.

FLASH TIMELINE

Rule of thumb:

EGGS GO INTO THE CARTON IN CONSECUTIVE ORDER...

FLASH ADDS INSERTED FRAMES FROM LEFT TO RIGHT ON THE TIMELINE IN CONSECUTIVE ORDER STARTING WITH FRAME 1.

The timeline will only let you put Frames into the cells in consecutive cell order. (You can contrast this to how audio editing software lets you put sound clips wherever you want on the timeline, without any fuss...you just put your cursor wherever you want to paste in the sound. But Flash does not perform this way.)

In other words, you can insert Frames into cells 1 through 30. But you canNOT then skip some cells and insert Frames into, for example, cells 50 through 60. Flash abhors such a vacuum that would be created in cells 31 through 49. So at the same time as it gives you Frames in cells 50-60, it automatically inserts Frames into those in-between slots too, creating a continuous Frame-Span.

Remember that the Timeline is linear. Frames are added into slots in a linear way starting with slot 1 and continuing in consecutive slots. You can insert as many Frames as you need, any time you want, while you are building up your animation.

FRAME-SPANS

As you insert Frames into the cells you are adding to the first Frame-Span. A Span of Frames are indicated on the Timeline as a Frame on the left identified with a circle and a Frame on the right identified with a square.

Note:
Clicking on and dragging the last Frame of a Frame-Span does 2 things:

--it extends the number of Frames inserted in a Flash Layer
--it creates a new Frame-Span

HOW CAN YOU EDIT FRAMES AND FRAME-SPANS?

You can NOT copy-cut-paste Frames in the same way that you copy-cut-paste text in a word processor program or audioclips in an audio editor program.

Rule of thumb:

TO REALLY REALLY REALLY GET RID OF A FRAME, USE COMMAND:

INSERT > REMOVE FRAME

Think of it like this:

If you use the Insert menu command to add Frames, then use it again to delete Frames.
("What the INSERT command has given, the INSERT command may take away.")

INSERT > ADD FRAME
INSERT > REMOVE FRAME

WHAT ABOUT THE EDIT MENU COMMANDS?

These commands only apply to whatever Graphics (appearing on the stage) or other Multimedia elements that are "inside" of your Frames. (Remember the metaphor of Frames as eggs that contain something - baby chicks, yolks, etc. The point is that Frames are containers.)

  • EDIT> COPY (copy a Graphic or multimedia element on the stage)
  • EDIT > CUT (cut a Graphic or multimedia element on the stage)
  • EDIT > PASTE (paste a Graphic or multimedia element on the stage)

These commands apply to the handling of Frames, with whatever graphics or other elements the Frames contain:

  • EDIT > COPY FRAME
    (copy one or more Frames or a whole Frame Span with whatever Graphic or multimedia elements contained within it/them)
  • EDIT > CUT FRAME
    (remove one or more Frames or a whole Frame Span with whatever Graphics are contained within it/them. But since the cell-slots that hold the Frames are not actually being excised and "removed", a empty blank Frame or Frame Span is inserted instead with its own Keyframe.)
  • EDIT > PASTE FRAME
    (paste one or more Frames or a whole Frame Span. The Frames can contain any Graphic or multimedia element obtained using the Copy Frame command)


TYPES OF FRAMES

Rule of thumb:

NOT ALL FRAMES ARE CREATED EQUAL.

KEYFRAMES ARE OF KEY IMPORTANCE.

Even before you start putting graphics into your Frames, those empty Frames have important identifying characteristics. A Frame is either:

-- a Frame
or
-- a Keyframe

A Keyframe is identified on the Timeline as a Frame with a circle inside it.

Later, when you create animated graphics you will work with a 3rd type of Frame that works in coordination with Keyframes, called:

-- a Tween frame

TWEENING

Tweening is the process that used to be done manually in film animation, but is done automatically in Flash. TWEENING is the process of transitioning the properties that change from Keyframe to Keyframe.

KEY FRAME

A Keyframe is the special Frame that begins any Frame Span. It holds all the data that defines any property or characteristic of graphics and other things that go into the particular Layer of the Flash animation at a particular point on the Timeline.

So, if you have a graphic starting on Frame 35, then the Keyframe holds the data of its location on the Stage, the size of the graphic, its shape and color, etc.

How do regular Frames know how to display a graphic that you have placed in a Keyframe?

The regular Frames just look at the Keyframe and copy its graphic data info.

KEY FRAME MAGIC

If there are 2 Keyframes in a Frame Span, then the graphic that starts on Keyframe 1 must get TWEENED based on the data of both Keyframes.

EXAMPLE:
There is a blue square in Keyframe 1. Keyframe 1 holds the data that defines the size and placement of the blue square.
The Frame Span is a certain length on the timeline. This length determines how long the blue square appears on the stage.
However, the Frame Span has a 2nd Keyframe placed at the end of the Frame Span using the command:

INSERT > KEYFRAME

The 2nd Keyframe, because it is a Keyframe and not an ordinary Frame, also holds the data that defines the size and placement of the blue square. If the 2nd Keyframe has a DIFFERENT size or placement, then MAGIC!

This means that the size and placement of the graphic can be animated between the 2 Keyframes by changing its size and placement across time.

"KEYFRAMING" IS A METHOD OF DEFINING THE STARTING AND ENDING POINTS FOR CHANGES IN PROPERTIES OF GRAPHIC IMAGES. "KEY FRAMING" - IN COMBINATION WITH "TWEENING" - IS A FUNDAMENTAL METHOD FOR ANIMATING GRAPHIC IMAGES.
-----------

FLASH ANIMATION USING KEYFRAMES AND TWEENING IN 5 STEPS:

  1. Place cursor in a slot somewhere in the Timeline.
    Go to menu:
    INSERT > FRAME (A Keyframe is automatically inserted in the first frame of the Frame Span).
  2. Use Library to drag a graphic symbol onto the stage.
  3. Place cursor within the Frame Span.
    Go to Property Window:
    Select the type of TWEEN in the list of options:
    --shape
    --motion
    (Recapping the definition of "tweening": TWEENING is the process that used to be done manually in film animation, but is done automatically in Flash. TWEENING is the process of transitioning the properties that change from Keyframe to Keyframe.)
  4. Place cursor at location where you want a 2nd Keyframe.
    Go to menu:
    INSERT > KEYFRAME
  5. Place cursor on timeline at the location of the 2nd Keyframe.
    Go to the stage and adjust the placement or size or shape of your graphic.
    Note that the computer will then automatically "tween" your animation.