CS101 Lecture 20 Flash Animation: Tweening Aaron Stevens 11 March - - PDF document

1

Aaron Stevens

11 March 2011

CS101 Lecture 20 Flash Animation: Tweening Overview/Questions

–What’s in a tween?

• Beginning - what and where
• Ending - what and where
• Duration - how long
• That’s it

–If only it were that simple. Sometimes it is. But Flash does to you as well as for you.

Many kinds of tweens - don’t mix!

• Motion
• Shape
• Gradients
• Bone

Multiple properties can be tweened such as location, size, rotation and color

Symbols vs Shapes

• What you have determines how you

tween.

• If you have mismatched components

you’ll break the tween.

note dotted line, should be solid with arrow head

Motion tweens work on symbols

There are 3 type of symbols:

–Movie Clips –Buttons –Graphics

We’ll focus on “Movie Clips”

How to Get Movie Clips

• Roll your own
• Borrow them

– Grab a file from the web or camera – File, Import, Import to Stage – Edit if desired – Modify -> Convert to Symbol (F8)

registration is point

• f X and Y

Position on the stage. Note, origin is upper left, so Y value increases as you move down the stage. Can only read properties at keyframes not tweened frames.

Properties panel is your friend

My First Tween

• Add a movie clip to the stage
• It will be in frame 1 of Layer 1
• Flash gives you a keyframe
• Extend timeline to some frame (F5)
• Right click on frame before end, choose create

motion tween (timeline changes)

• Go to late frame and move the symbol
• This automagically creates a keyframe marked by

small black diamond

new keyframe

• rigin at

keyframe 1

The car skids

• nto the stage.

Note the green motion path. Auto keyframe marked by small black diamond not black circle

Semiautomagic Tweening

motion path current position frame rate movie length

Controlling your Animation

By default tweens loop indefinitely. Add delay between repetitions by adding blank frames at end.

We can move motion tween vertically and horizontally simply by selecting and dragging it.

Select the tween path - it will become a solid dark

• line. Move mouse pointer over until you see 4 way

arrow, then drag. If you don’t like the result use Crtl

• r Cmd Z.

We can also transform shape of path: Deselect path, e.g. click off stage. Mouse over path at point you want to bend until you see a curve under the mouse pointer. You can then move that vertex.

Bend Tweens to Your Will

curved path

extended timeline to pause between reps

Control Bezier Curve

• You can manipulate the Bezier curve of the

tween path.

• Change to the subselection tool (2nd arrow)
• Click on an endpoint of the path
• Bezier handles appear, can change path
• Works like pen tool

Curvy if not groovy

Bezier handles

• ff stage

More control with Easing

Lets you modulate speed of tween to speed up or slow down for a more natural effect. Think about why you’d want to do this.

More Easing

• By default, tweens are of constant speed
• Can change this with easing
• Out = slows down toward end
• In = faster toward end
• select a point in the tween
• in the properties panel, easing defaults to 0
• drag to the right to ease out and the left to ease in
• More types of easing available via motion editor or

ActionScript

Working with Layers

Effects such as motion tween or shape tween apply to all movie clips on a frame. To do multiple motions, use multiple layers. (example in class) add layer button

18

Drawing your own Symbols

Example: bouncing ball

– Use Oval tool to draw the ball – Set the color – Convert to MovieClip – Add Keyframe(s) down the timeline – Create motion tween

19

Convert an object to a Symbol

After creating the shape, we convert it to a “Movie clip” symbol, which is stored in the “library:”

Shape vs. Motion Tweens

• Shape tweens don’t use symbols
• Layer has arrow between keyframes
• Can tween color
• Motion tweens must use symbols
• Layer has no arrow between keyframes

Shape Tween Example

Draw a shape, add keyframe at 60, make a shape tween…

Morphing Shapes

Consider a shape tween:

Keeping in Shape

Shape tweens don’t always behave as expected. We have to give Flash hints on how to do it. Suppose we want a square to morph into a circle.

The square appears to rotate, which is not what we told it to do.

Shape hinting to the rescue

Select square in keyframe 1

shape hint to which Flash assigns a letter deselect and drag to top edge now go to end keyframe. Flash has added matching hint deselect and drag, on success hint turns green repeat for bottom of square

25

What You Learned Today

– Motion Tweens and Shape Tweens – Shapes vs. Symbols – Movie Clips – Motion Guide, Easing – Shape Hints

Announcements and To Do List

– HW08 flash text animation due WED 3/23 – Readings:

• General about Flash:

http://www.mediacollege.com/adobe/flash/

• Flash tutorial:

http://www.w3schools.com/Flash/default.asp

– You might want to download the 30-day trial version of Flash CS5: http://www.adobe.com/go/tryflash