Shape Tweens

When animation was done by hand, the experienced animators would draw the artwork for the "key frames" and the less-experienced animators (also known as "tweeners") would then draw the frames in-between the key frames. Flash creates the in-between frames automatically through tweens. To create a shape tween, one places artwork in the same layer in keyframes that will be the beginning and ending frames of the tween, then one clicks in the Timeline anywhere between the beginning and ending frames of the tween, and select Insert>Shape Tween. Alternatively, one can right click in the timeline between the opening and closing frames you want for the tween and then select Create Shape Tween. If a dotted line appears in the timeline, there is a problem with the tween.

Shape hints can be used to affect what the in-between frames look like. Put the cursor at the keyframe which is the beginning of the tween. Then choose Modify>Shape>Add Shape Hint. One then drags the shape hint (a red circle with a letter in it) to the appropriate position in the beginning and ending frame of the tween. One can repeat this process to add additional shape hints. (to access an Atomic Learning video on this subject, go to https://www.student.nvcc.edu/store/atomic/ and enter your Blackboard username and password, then click on Atomic Learning Video B3)

To do multiple tweens at the same time in the main Timeline, each tween must be in its own layer. To get the artwork for each tween in a separate layer, one can either create the artwork in separate layers or create the several shapes in the same layer (making sure the shapes do not overlap), and then click on the layer to select it and the appropriate frame to select all the shapes in the layer, and then choose Modify>Timeline>Distribute to Layers.

Symbols and Instances

The use of symbols is key to keeping the file size (download time) of Flash movies small. Symbols also allow you to make updates to objects across your entire project by editing just one object rather than each instance (occurrence) of that object.

Workflow - One can create a shape in the main Timeline, select it and drag it to the lower half of the Library panel. Alternatively, instead of dragging, one can choose Modify>Convert to Symbol or just press F8. Any of these actions will result in the display of a dialog box asking what the symbol type is (choose Graphic for now). Use descriptive names for symbols, just like for layers. Any of the actions above will result in the creation of a symbol which is placed in the library, and the creation of an instance of this symbol on the Stage to replace the shape originally created. Alternatively, if one knows one wants to create a symbol, one can select Insert>New Symbol on the menu or click the Insert>New Symbol button at the bottom left of the Library panel.

To place an instance of the symbol onto the Stage, one can drag the symbol from the Library onto the Stage, which keep the symbol in the Library and places an instance of the symbol on the Stage.

To edit a symbol, one can double click the icon next to the symbol name in the Library or one can double click an instance of the symbol on the Stage (termed "editing in place"). The latter allows you to edit the symbol while viewing the rest of the objects on the Stage. When editing the symbol, the name of the symbol will appear to the right of the Scene (by default Scene 1). This allows you to determine that you are editing the symbol, not something on the Stage in the main Timeline. If one clicks on the Scene designation, one returns to the main Timeline and any changes to the symbol are reflected in all instances of the symbol.

The symbol has its own timeline so one can do an animation (frame-by-frame or tween) inside of the symbol. If one then places an instance of the symbol on the Stage in the main Timeline, the animation inside of a graphic symbol will play only to the extent that there are sufficient frames in the main Timeline after the occurrence of the instance of the symbol. Thus if the graphic symbol has 24 frames, to see the entire animation in the symbol will require 23 frames in the main Timeline after the frame in which the instance of the symbol is placed. If one needs to extend the main Timeline, this would normally be done by inserting frames (F5). Through the First property in the Looping section of the Property Inspector for the instance of the graphic symbol containing the animation in the main Timeline, one can also designate the starting frame of the animation inside the symbol.

While all instances of a symbol will be updated to reflect changes in the symbol, any instance of the symbol can be changed in some ways (e.g. position, size and shape transformations, color), without affecting the symbol and thus not all instances of the symbol need to look look alike although the artwork in the symbol will be common to all instances of the symbol.

Revised: November 17, 2015. Comments to Bill Pegram, bill@billpegram.com