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 | Timeline | tweens | keyframes | Simple Example | Movie Clips


Statement of the Problem

I wanted to create a simple movie 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

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.

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.)


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
URL: http:// cpcug.org / user / clemenzi / technical / Languages / Flash / SimpleAnimations.html