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

• Use the Oval Tool to draw an oval in the frame 1, holding down the shift key to constrain it to a circle.
• Select a later frame in the same layer, say frame 15, and hit F6 (Insert Keyframe) - This copies over the content from frame 1 to this frame.
• Select another later frame in the same layer, say frame 30, and hit F6 again. This again copies over the content from frame 15 to this frame.
• Put your cursor in this layer anywhere between Frame 1 and 15 and choose Insert>Create Shape Tween, or do this by right clicking
• Repeat this for some frame between Frame 15 and 30.
• If you play the animation now, you will not see any movement because the ball is in the same location in frame 1, 15, and 30 and hence in the intervening frames created by the tween.
• Click on frame 15. This will select everything on the Stage in this frame, i.e. the ball. Click on the ball and drag it down. If you play the animation now, you will have a bouncing ball. Instead of creating the tweens first and then moving the ball, you can move the ball and then create the tweens. Either way works.

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 video - Section D, The Basics of Animation, in Adobe Animate CC 2018 - Basics course. Infobase Learning Cloud can be accessed my logging into your myNova acccount - it will be one of the tiles, just like Canvas. Within Infobase, do a search for Animate 2018 (this video isn't found in their 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. Draw a brush stroke in this frame. 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 Infobase Learning Cloud - 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 rectangles 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.

• You should then appropriately name the created layers by clicking on an object in the Timeline which will select the corresponding layer.
• To copy the content from frame 1 of each of the newly-created layers to a later frame, you can drag down in this later frame, and then press F6 (Add Keyframe). Thus you can do this in one operation rather than repeating it for each layer.
• To modify the shape of the artwork in a frame in a layer, you can select the Free Transform Tool (which is second from the top).
• You can apply a tween across multiple layers by dragging through the layers and then creating the tween. The tween can be applied before or after using the Free Transform Tool.

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 (and 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 and functions do in programming languages..

Workflow - One can create a shape in the main Timeline, select it 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. A symbol is created in the library and an instance of the symbol is placed 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: March 19, 2023. Comments to Bill Pegram, bill@billpegram.com