Animate Some more advanced concepts More about tweening Masks

Tweening Review To create movement and changes of visual content over time, without having to manually create the content frame by frame The computer interpolates the changes between 2 keyframes Method 1: Select a frame on timeline Choose Insert > Timeline > Keyframe Method 2: Right-click (Windows) or Control-click (Mac OS) on a frame on timeline Choose Insert Keyframe

Types of Tween in Animate Classic tween (the most simple motion tween) We define keyframes and locations (used mostly for symbols) Shape tween Tweens shapes (can’t be symbols) Motion tween (we won’t use these) Animate “assists” in creating a motion path A more complex way of the classic tween, creates slightly larger files, and is a bit more difficult to manipulate Yes, both classic tween and motion tween are a form of motion tweening, with classic tween being the most simple way to handle motion tweening

Classic (Motion) Tween vs. Shape Tween Motion and Classic Tween Shape Tween Works with symbols only Works with shapes only Not changing the shapes Morphing the shapes Cannot have more than one symbol in a frame of the same layer Can have more than one shapes in a keyframe, but the result is unpredictable Can be tweened to follow a path that is drawn as a stroke Does not work with motion guide Tweened frames are colored blue (Motion tween) or purple (Classic tween) on timeline Tweened frames are colored green on timeline

Classic Tween Example A leaf is created as a Graphic symbol, and placed on the stage.

Classic Tween Example Keyframe at frame 1

Classic Tween Example Keyframe at frame 20: The leaf is repositioned, rotated, and scaled bigger.

Classic Tween Example Keyframe at frame 60: The leaf is repositioned again, rotated, and scaled smaller.

Classic Tween Example Result after applying classic tween to the keyframes: 60 frames But only 3 keyframes to specify the leaf's position, rotation, and size. The computer interpolates the positions, rotation, and size of the leaf between keyframes.

Properties of a symbol instance that can be tweened using Classic tween Position Rotation Width Height Color Opacity

Shape Tween Example Keyframe at frame 1: A shape of the letter "I" in blue

Shape Tween Example Keyframe at frame 15: A heart shape in pink

Shape Tween Example Keyframe at frame 40: A shape of the letter "U" in green

Shape Tween Example Result after applying shape tween to the keyframes: 40 frames But only 3 keyframes to specify the shapes. The computer interpolates the shapes between keyframes.

Properties of a shape that can be tweened in shape tween Position Rotation Width Height Color Opacity Shape

Troubleshooting Correct Classic or Shape tween sequence a solid-line arrow in timeline Incorrect Classic or Shape tween a dashed line in timeline Possible causes for problems Multiple symbol instances in the same keyframe Classic tween applied to shapes Shape tween applied to symbol instances A mix of symbol instances and shapes in the same keyframe

Mask Defines areas to reveal its linked layer (maskee layer) The content in a mask layer can be thought of as a hole that lets the underlying maskee layers show through.

Mask a mask original mask effect

To Create Mask Effect On the timeline, arrange the maskee layer immediately below the layer that you want to be the mask layer On the timeline, right-click (Windows) or Control-click (Mac OS) on the mask layer, and select Mask

Mask Effect Example: Spotlight Effect

Mask Effect Example: Spotlight Effect Maskee content Maskee layer

Mask Effect Example: Spotlight Effect Mask content:black circle Mask layer

Mask Effect Applied by locking the mask layer

More About Mask Effect The resulted mask effect can be seen on the stage by locking the mask layer The mask effect always shows when you do a Test Movie, with or without unlocking the mask layer Don't forget to unlock the mask layer when you want to edit the mask layer