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. origin at Note the green motion path. 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 deselect and drag which Flash to top edge assigns a letter now go to end keyframe. deselect and repeat for Flash has drag, on success bottom of added hint turns green square matching hint
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
Recommend
More recommend
