CS101 Lecture 20 Flash Animation: Tweening Overview/Questions

CS101 Lecture 20 Flash Animation: Tweening

Aaron Stevens 11 March 2011 1

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 of X and Y

Properties panel is your friend 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.

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

Semiautomagic Tweening The car skids onto the stage. Note the green motion path.

origin at keyframe 1

motion path

Auto keyframe marked by small black diamond not black circle

new keyframe

Controlling your Animation

current position frame rate movie length

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 or 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 off stage

Bezier handles

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

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 18

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

19

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 now go to end keyframe. Flash has added matching hint

deselect and drag to top edge deselect and drag, on success hint turns green

repeat for bottom of square

What You Learned Today – Motion Tweens and Shape Tweens – Shapes vs. Symbols – Movie Clips – Motion Guide, Easing – Shape Hints

25

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