Overview/Questions Overview/Questions Review: creating flash - PDF document

CS101 Lecture 17 CS101 Lecture 17 Flash Animation: Motions Flash Animation: Motions Aaron Stevens Aaron Stevens (with special thanks to Raphael (with special thanks to Raphael Arar Arar and and Panagiotis Papapetrou Panagiotis Papapetrou) ) 25 February 2009 25 February 2009 1 1 Overview/Questions Overview/Questions – Review: creating flash project, motion – Review: creating flash project, motion tween tween – Creating shapes, animation – Creating shapes, animation – Guiding the motion of an animation – Guiding the motion of an animation 2 2

Navigating Flash Navigating Flash The Timeline The Stage The Library Tools 3 3 Example: a bouncing ball Example: a bouncing ball To create this example we need: To create this example we need: – A shape to manipulate A shape to manipulate – – Some keyframes on the timeline Some keyframes on the timeline – – Some motion tweens Some motion tweens – A tween A tween is what happens is what happens “ “in between in between” ” two discrete points. In flash, a tween is a two discrete points. In flash, a tween is a motion or shape change. motion or shape change. 4 4

Drawing A Shape Drawing A Shape To create a shape, use the shape tool: To create a shape, use the shape tool: Draw the shape as you would in Photoshop. Draw the shape as you would in Photoshop. 5 5 Navigating Flash: The Stage Navigating Flash: The Stage The Stage Stage is a display of the visible region is a display of the visible region The of the animation: of the animation: 6 6

Convert an object to a Symbol Convert an object to a Symbol After creating the shape, we convert it to a After creating the shape, we convert it to a “ “Movie clip Movie clip” ” symbol symbol, which is stored in the , which is stored in the “library: “ library:” ” 7 7 Inserting a Keyframe Inserting a Keyframe We insert a Keyframe Keyframe for each distinct for each distinct We insert a endpoint of a movement. endpoint of a movement. Right-click on the timeline to insert a keyframe. Right-click on the timeline to insert a keyframe. 8 8

Creating a Motion Tween Creating a Motion Tween Right-click on timeline to create motion Right-click on timeline to create motion tween for a given layer. tween for a given layer. In this example, we’ ’re defining the starting point for the tween. re defining the starting point for the tween. In this example, we 9 9 Define the Tween Endpoint Define the Tween Endpoint Note: the timeline is showing frame 25. Note: the timeline is showing frame 25. We move the shape to its frame 25 position. We move the shape to its frame 25 position. The tween fills in the frames “ “in between in between” ”. . The tween fills in the frames 10 10

Testing the Tween Testing the Tween To test the animation between the two To test the animation between the two keyframes, drag the red square on the keyframes, drag the red square on the timeline. timeline. Repeat the keyframe/tween process as Repeat the keyframe/tween process as many times as you like… … many times as you like 11 11 Testing the Movie… … Testing the Movie Bring up the movie in a Flash Viewer window. Bring up the movie in a Flash Viewer window. Note/recall: SWF, HTML, etc. Note/recall: SWF, HTML, etc. 12 12

Guided Motion Tweens Tweens Guided Motion The basic motion The basic motion tweens tweens we we’ ’ve created ve created are linear. A are linear. A guided motion guided motion tween tween can can follow any path we choose. follow any path we choose. – Begin with a movie clip (e.g. text or shape) – Begin with a movie clip (e.g. text or shape) – Create a basic motion – Create a basic motion tween tween – Create a motion guide layer Create a motion guide layer – – Tie the movie clip to the motion guide Tie the movie clip to the motion guide – 13 13 Being with Symbol Being with Symbol Let’ ’s shoot some free throws s shoot some free throws… … Let Draw graphic, convert to movie clip. Draw graphic, convert to movie clip. Insert Keyframe Keyframe at frame 48. at frame 48. Insert 14 14

Create Motion Tween Tween Create Motion Go back to the motion Go back to the motion’ ’s starting frame, s starting frame, and create motion tween and create motion tween: : 15 15 Move Symbol… Move Symbol … 16 16

Add Motion Guide Add Motion Guide A A motion guide motion guide is a line that your symbol is a line that your symbol will follow during the motion tween will follow during the motion tween. . The motion guide will be on its own layer. The motion guide will be on its own layer. 17 17 Use Pencil Tool to Draw Guide Use Pencil Tool to Draw Guide Draw the motion line with the pencil tool. Draw the motion line with the pencil tool. Set the drawing to be a smooth line. Set the drawing to be a smooth line. 18 18

Draw the Motion Line Draw the Motion Line Note: be sure to draw motion guide on its own Note: be sure to draw motion guide on its own layer. Lock layers you don Lock layers you don’ ’t want to change. t want to change. layer. 19 19 Attach the Symbol to the Motion Attach the Symbol to the Motion Grab the symbol by it’ ’s s Grab the symbol by it registration point registration point (the (the little circle in the center), little circle in the center), and snap it to the motion and snap it to the motion line. line. Do at start and end Do at start and end KeyFrames of the motion of the motion KeyFrames tween tween. . 20 20

Optional: adding spin to the ball spin to the ball Optional: adding A symbol can itself be animated, with its A symbol can itself be animated, with its animation running animation running at the same time as it at the same time as it’ ’s s movements. movements. Edit the symbol, Edit the symbol, use free transfer use free transfer to rotate. to rotate. 21 21 Optional: a fancier motion line Optional: a fancier motion line 22 22

Take-Away Points Take-Away Points – Timeline, Stage, Frames, – Timeline, Stage, Frames, Keyframes Keyframes – Library, Symbols – Library, Symbols – Motion Motion Tweens Tweens – – Motion Guide, Registration Points Motion Guide, Registration Points – – Editing a Symbol – Editing a Symbol 23 23 Student To Dos Student To Dos – Readings: – Readings:  Flash CS3 tutorial: (all week) Flash CS3 tutorial: (all week)  http://www.adobe.com/designcenter/flash/articles/flacs3_createfla.html http://www.adobe.com/designcenter/flash/articles/flacs3_createfla.html  Motion guide tutorial: (today) Motion guide tutorial: (today)  http://flashexplained.com/animation/flash-cs3-animation-basics-motion-guide/ – Quiz 3 is on Friday 2/27 – Quiz 3 is on Friday 2/27  Covers number systems, binary math, characters, Covers number systems, binary math, characters,  compression, images, audio and video data. compression, images, audio and video data. 24 24