Shape Tweens

Creating a Bouncing Ball Animation by Hand

  1. Use the Oval Tool to draw an oval in frame 1, holding down the shift key to constrain it to a circle
  2. Hit F6 (Insert Keyframe) - this copies over the content of frame 1 to frame 2
  3. Click on the Selection tool and then double click the oval on the stage - you double click so as to select both the fill and the stroke
  4. Use the mouse to drag the ball down a little or use the arrow key - the arrow key moves it one pixel; holding down the shift key when you hit the arrow key moves it 10 pixels
  5. Repeat steps 2-4 for as many frames as you like.

Create a Bouncing Ball Animation with a Shape Tween

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 can create 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.

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. Hoonuit videos can be accessed my logging into your myNova acccount - it will be one of the tiles, just like Canvas. In Hoonuit, do a search for Animate 2018 (this video isn't found in the Hoonuit Animate 2019 course)

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 a different shape (e.g. an oval and a rectangle, or two different brush strokes). For example put one brush stroke in frame 1, then hit F7 (Insert Blank Keyframe in a later frame, say frame 30. Do a shape tween as before. 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 the Hoonuit 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. For example, create four shapes in one frame in one 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 an object in different places in several frames. Rather than using onion skinning to position the object in a particular frame relative to its positioning in adjacent frames, one can, as suggested by a Fall 2018 student, select the object, and then copy and paste the object elsewhere on the stage multiple times, and then select them all and 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 select the shape and 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 left arrow 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 keeps 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 left arrow 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: February 25, 2021. Comments to Bill Pegram, bill@billpegram.com