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. Animate 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>Create 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.

Create a Bouncing Ball Animation

What Can Be Tweened with a Shape Tween?

You can tween between different shapes and thus the intermediate frames will have a shape that is neither the opening shape nor the ending shape, but something in between. You can also tween size, position (as in the bouncing ball example) and color.

"Creating Shape Tweens" - 5 minute Hoonuit video - in Section D, The Basics of Animation, in Adobe Animate CC 2018 - Basics course. (currently there are no videos for Animate 2019 or 2020) Hoonuit videos can be accessed through https://www.nvcc.edu/ithd/students/hoonuit.html. In Hoonuit, do a search for the course title.

Shape Hints

Shape hints can be used to affect what the in-between frames look like. To see this, we will to do the tween between shapes that have different shape. For example you can use a oval from one frame and a rectangle for another, or two brush strokes that are different. 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 both the beginning and ending frame of the tween. One can repeat this process to add additional shape hints. One can remove shape hints by right-clicking on them.

"Adding shape hints" - 3 minute video - in Section D, the Basics of Animation, in Adobe Animate CC 2018 - Basics course.

Multiple Tweens at the Same Time

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.

The command Modify > Timeline > Distribute to Layers distributes the content to different layers. The command Modify > Timeline > Distribute to Keyframes distributes the content to successive keyframes which it creates. For example, suppose you want to display a ball in different places in several frames. Rather than using onionskinning to position the ball in a particular frame relative to its positioning in adjacent frames, one can, as suggested by a Fall 2018 student, place them all in the same frame and then use Modify > Timeline > Distribute to Keyframes.

Symbols and Instances

The use of symbols is key to keeping the file size (download time) of Animate 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. Thus they perform a similar function that external stylesheets do for web pages or variables do in programming languages..

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

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, click on the < icon above the Stage at the far left, to the left of the name of the symbol, to return to "Scene 1" of the main Timeline and then one can drag the icon of 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 < icon, one returns to the main Timeline and any changes to the symbol are reflected in all instances of 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.

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 30 frames, to see the entire animation in the symbol will require 29 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. For example, if you create a bouncing ball animation within the symbol and then drag three instances of this onto the Stage, you can select each instance and set the First Property to determine the point within the animation that that instance of the symbol will start at. Thus you can specify different starting points for each instance.

Revised: March 23, 2020. Comments to Bill Pegram, bill@billpegram.com