Flash - Simple Animations

I followed the Getting Started tutorial - it worked perfectly ... but I obviously did not understand it.

I spent over 4 hours just trying to get a really simple animation to work.

I did not just try to do this from memory - as I worked, I re-read the tutorial many times.

For the discussions below, I am ignoring sounds and other functions that can be attached to frames.

Statement of the Problem

I wanted to create a simple movie

Draw a wide rectangle with a vertical gradient - the gradient makes the top look different from the bottom
In the first sequence, the rectangle gets narrower
Next, a black line is drawn around the rectangle
Then the rectangle is rotated 90 degrees and the gradient becomes a single color

Just creating the gradient was a major problem ... and has its own page.

Timeline

Above the Stage is the timeline. This is used to create and manage both layers and frames.

In general, animations should contain multiple layers

It helps to keep different parts of a drawing separate
Each layer can be animated independent of the others
The top layers are shown over (drawn on top of) the lower layers

There is no explicit rule on how many layers to use - just fake it if it seems logical.

tweens

Both objects and "movie clips" can be animated via tweens

Images are attached to keyframes.

You can simulate motion by making every frame a keyframe and placing a unique image on each. This is time consuming and inefficient. Flash allows you to place multiple undefined frames between the keyframes and then to define a tween to automatically animate your movie.

This is a perfect example of why the built-in help is worthless - I typed in tween and got about 1,000 returns (about 25 returns per scroll and 40 clicks of the scroll bar to see them all). I think they want you to read them all. Note that the search returned all instances of tween, tweened, and between (give me a break).

keyframes

Flash animations are built on frames ... but only keyframes can contain user defined images.

When you start a new animation (a flash file - *.fla), Flash starts with a single empty keyframe in Layer 1 of the Timeline. A keyframe is indicated with a circle - if nothing is attached to the keyframe, then the circle is empty ... when you draw something on the Stage (canvas), the circle is filled.

A sequence is the number of frames that a given tween (collection of images) will render - it contains all the frames between 2 keyframes. Each sequence starts with a circle and ends with a rectangle. The "keyframe" is the frame that contains the circle.

To delete a frame, or a keyframe, right click and select

Select from menu
Remove frame This will remove all the highlighted (selected) frames
Clear keyframe Remove the instance of the highlighted (selected) keyframe. This option is greyed out unless a keyframe is selected.

Note: When working with frames - do not use the delete key. Hey, it makes sense to click on a frame and remove it via the Delete key. However, in Flash, the delete key removes every thing drawn on the frame - not the frame itself.

Select from menu
Remove frame	This will remove all the highlighted (selected) frames
Clear keyframe	Remove the instance of the highlighted (selected) keyframe. This option is greyed out unless a keyframe is selected.

Note:	When working with frames - do not use the delete key. Hey, it makes sense to click on a frame and remove it via the Delete key. However, in Flash, the delete key removes every thing drawn on the frame - not the frame itself.

If you click and drag, you will highlight (select) multiple frames. Control and Shift can be used to extend a selection.

Delete, copy, move frames: The first click selects one or more frames. After you release the mouse button, the cursor changes to a gray box - if you click and drag, the selected frames will be moved. If you hold down the Alt key, you will copy the frames (instead of moving them).

Note - Though this is really simple, it took several hours to figure it out - can we say "user hostile".

Simple Example

The tutorial says that you should always animate symbols, not graphics. Graphics appear only on the canvas ... symbols have an instance in the Library. Later on, the tutorial says to only animate Movie Clip Symbols - not Graphic symbols (which can also appear in the Library). (OK, I am still confused.)

Select the Rectangle tool from the palette
Depress the Object Drawing button (circle with a square around it) - It has a white border around it when depressed, gray when up.
When you draw a rectangle, the outline and the colored insides are normally drawn as 2 separate objects. In this case, the 2 objects can be moved independently. Depressing this button will generate a single object.
Draw a rectangle
On the Tool palette, click on the Select tool (the top arrow)
Select the rectangle
Right click the rectangle and select Convert to Symbol... (F8)
In the dialog box, give it a name, set the Type to Movie clip, and Click OK. That will place the object in the Library.
In the dialog box, there is a graphic with 9 small squares. The selected square indicates the point controlled by the 3:06 AM 12/12/2007x and y values in the Property frame. This point is displayed as a small plus sign when the object is selected. I have never found a way to edit this, except to create a new object by using Convert to Symbol... again.

Movie Clips

Movie clips contain their own timelines.

Create an object, right click it, select Convert to Symbol..., select Movie clip, and select OK.

Notes

Each animated object must be on its own layer

Use Onion Skin to view all the frames between the markers at the same time

Author: Robert Clemenzi - clemenzi@cpcug.org