Flash 5 ActionScript for Artists || Stephen Hartzog || Stanford University Digital Art Center, Winter 2002

Nesting Timelines & Looping Animations   f5a4a.WEEK.01.DAY.02 = 2002.January.11.Friday

Assignment:
Create a movie that is composed of multiple, nested, asynchronous, animated timelines.
Due: Monday, January 14

Concepts:
The action of independent parts: By composing the whole out of Instances with their own timelines, we can give a degree of independence to the motion of the parts.
Simple nonlinear appearance: When you use multiple looping timelines with different numbers of frames, they parts are not clearly synchronized. In fact, the animation will repeat, but it may take so long to get back to the initial state that the identity is not apparent.
Minimize size; Maximize effects: Reuse Symbols as much as possible. One Symbol can take on many appearances. Example: A Instance of a Symbol that consists of a simple square shape can be scaled, colored, and rotated once it is placed in the timeline of another Symbol.
Nesting and Inheritance: Symbol inside a Symbol inside a Symbol ... Tween within Tween within Tween ... A Tween applied to the outermost container will also affect the elements it contains; the effects are inherited. Example, if you have a set of nested dolls and you throw the biggest one, the ones inside go flying with it, their positions remain the same relative to the biggest doll.
You can already see where the language is going. This kind of relationship is called Parent/Child; changes applied to parents are inherited by children. You can also see where the metaphor begins to fail; for most of a normal lifetime, a child does not live inside of its parent; arguably, children require TWO parents.
Parameters:
The nesting of TWEENED Timelines should be at least three levels deep. You should also use multiple Tweens in the same Symbol.
Does not have to be representational, but this may help you to conceive and execute it.
Create all of the elements of your movie with Flash's drawing tools.
Method:
1. Create a Movie Clip Symbol with an animation using tweening, e.g., a finger wagging.
2. Put an Instance of the first into a second Symbol, e.g., use it as a finger on a hand Shape.
3. Put an Instance of the second Symbol in a third Symbol and apply a Motion Tween, e.g., a hand waving.
Result: a hand that waves, with fingers wagging independently.
You can put an Instance of the moving hand in an arm Symbol, then make a moving arm Symbol ...
All projects will be evaluated on the basis of technique, concept and aesthetics.
To View Your Work
Menu Bar || Control >> Test Movie
Notice that this generates a .swf file in the folder where the .fla source file is saved
ENTER
This will play the current timeline that you are viewing, but it will not show nested Tweens
What you DON'T see right away:
You should almost NEVER draw directly on the main Stage! Use Instances of Symbols wherever possible.
Reason #1: You can reuse items from the Library without increasing the size of your movie.
Reason #2: You can control Instances with ActionScript.


LIBRARY

shortcut*
Menu Bar || Window >> Library CTRL + L
SYMBOL shortcut
Menu Bar || Insert >> New Symbol... CTRL + F8
Library Window || Options >> New Symbol...
or, click the plus icon at the bottom of the Library Window
If you did draw directly on the stage and now want to turn your artwork into a Symbol, select the artwork then choose:
Menu Bar || Insert >> Convert to Symbol ...
This process will leave the artwork on stage, but it will now be an Instance of a Symbol added to the Library
F8
You will be prompted to enter a library name for the Symbol (and to choose the Symbol "Behavior", which will usually be "Movie Clip", sometimes "Button", NEVER "Graphic" (which is just a one frame Movie Clip).
* shortcut commands are given for Windows platform only.

INSTANCE

Drag a Symbol from the Library to the Stage
Copy & Paste or Alt + Drag a Symbol that's already on Stage.

FRAME

shortcut context menu
Menu Bar || Insert >> Frame F5 Right-click
on a frame in
the timeline
to access a
context menu
with one or more frames selected:
Menu Bar || Insert >> Remove Frames
SHIFT + F5
KEYFRAME shortcut
Menu Bar || Insert >> Keyframe F6
Menu Bar || Insert >> Blank Keyframe F7
with one or more frames selected:
Menu Bar || Insert >> Remove Keyframe
SHIFT + F6
Keyframes are where changes occur in the Timeline.


TWEENING
A TWEEN interpolates the changes between Keyframes. To apply a TWEEN select a Keyframe, then SHIFT + click a contiguous Keyframe. You can Right-click the selected Frames to bring up the context menu and select "Create Motion Tween".
There are TWO KINDS of Tweening: Shape Tweening and Motion Tweening.
In general, Shape Tweens are applied to things drawn directly on stage; Motion Tweens are applied to Instances of Symbols.
Note that you can make more changes in your Keyframes after a TWEEN is applied.
You can have more than one Tweened object in a Symbol's Timeline, but they need to be on different layers.

MOTION TWEEN

Frame Panel || Tweening >> Motion
Motion Tweens can be applied to an Instance of Symbols to interpolate changes in shape, color, rotation ...
Note that changes made to an Instance do not affect the original Symbol in the Library.

SHAPE TWEEN

Frame Panel || Tweening >> Shape
Shape Tweens can be applied to morph between any images drawn directly on the stage in a Timeline.

FRAME PANEL

Menu Bar || Window >> Panels >> Frame   [CTRL + F]
You can only apply Tweens from the Frame Panel.
Tools for controlling changes in BOTH Shape & Motion Tweens
Simply change the location of an element in a Keyframe
change it's position or size through the Info Panel:
Menu Bar || Window >> Panels >> Info [CTRL + ALT + I]
Menu Bar || Window >> Panels >> Transform
Menu Bar || Modify >> Transform
Context Menu: Right-click an element
SEE ALSO: Onion Skinning
Motion Tween ONLY Tools
Menu Bar || Window >> Panels >> Effect
A variety of menus are available in the Effect Panel for changing color and transparency.
SEE ALSO: Motion Guides
Shape Tween ONLY Tools
Any of the drawing tools in the TOOLBOX (& their Options)
Menu Bar || Modify >> Smooth | Straighten | Optimize | Shape
Menu Bar || Window >> Panels >> Color | Fill | Stroke | Mixer | Swatches
Shape Hints

After Shape Tweening is applied you can add Shape Hints to control the morphing.
Menu Bar || Modify >> Transform >> Add Shape Hint    [CTRL + SHIFT + H]
Menu Bar || Modify >> Transform >> Remove Shape Hint    [select and DELETE]
Menu Bar || View >> Shape Hints    [ CTRL + ALT + H]
also: Right-click on a Shape Hint for Context Menu

TEXT as Image

Menu Bar || Modify >> Break Apart   [CTRL + B]
"Break Apart" turns text into image, separates it from the font equation, allowing you to apply Shape Tweening;
also used to free an instance from it's library symbol.
To set the initial appearance of Text, use the Character Panel:
Menu Bar || Window >> Panels >> Character
HELP REFERENCES
Flash Program Other
Menu Bar || Help >> Using Flash [F1]
see entries:
"Drawing"
"Working with Color"
"Working with Objects"
"Using Symbols and Instances"
"Creating Animation"

Menu Bar || Help >> Lessons ...
see: especially, the numbered ones

Use the Flash Help Search Tool

Flash 5 Bible
Parts I and II,
Chapters 1 - 6; 8-11; e.g.,
"Chapter 2: Exploring the Interface: Panels, Settings, and More"

Look for keywords in indices and tables of contents of other books.

Do Google searches on keywords.

Use the class list of links to Flash Tutorials by Category

Flash 5 ActionScript for Artists || Stephen Hartzog || Stanford University Digital Art Center, Winter 2002