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

1 1

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

CS101 Lecture 17 CS101 Lecture 17 Flash Animation: Motions Flash Animation: Motions

2 2

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

3 3

Navigating Flash Navigating Flash

The Timeline The Stage The Library Tools

4 4

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 A tween 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.

5 5

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.

6 6

Navigating Flash: The Stage Navigating Flash: The Stage

The The Stage Stage is a display of the visible region is a display of the visible region

• f the animation:
• f the animation:

7 7

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:” ”

8 8

Inserting a Keyframe Inserting a Keyframe

We insert a We insert a Keyframe Keyframe for each distinct for each distinct 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.

9 9

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 In this example, we’ ’re defining the starting point for the tween. re defining the starting point for the tween.

10 10

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 The tween fills in the frames “ “in between in between” ”. .

11 11

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… …

12 12

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.

13 13

Guided Motion Guided Motion Tweens Tweens

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

Being with Symbol Being with Symbol

14 14

Let Let’ ’s shoot some free throws s shoot some free throws… … Draw graphic, convert to movie clip. Draw graphic, convert to movie clip. Insert Insert Keyframe Keyframe at frame 48. at frame 48.

Create Motion Create Motion Tween Tween

15 15

Go back to the motion Go back to the motion’ ’s starting frame, s starting frame, and create motion and create motion tween tween: :

Move Symbol Move Symbol… …

16 16

Add Motion Guide Add Motion Guide

17 17

A A motion guide motion guide is a line that your symbol is a line that your symbol will follow during the motion will follow during the motion tween tween. . The motion guide will be on its own layer. The motion guide will be on its own layer.

Use Pencil Tool to Draw Guide Use Pencil Tool to Draw Guide

18 18

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.

Draw the Motion Line Draw the Motion Line

19 19

Note: be sure to draw motion guide on its own Note: be sure to draw motion guide on its own layer. layer. Lock layers you don Lock layers you don’ ’t want to change. t want to change.

Attach the Symbol to the Motion Attach the Symbol to the Motion

20 20

Grab the symbol by it Grab the symbol by it’ ’s s 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 KeyFrames of the motion

• f the motion

tween tween. .

Optional: adding Optional: adding spin to the ball spin to the ball

21 21

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.

Optional: a fancier motion line Optional: a fancier motion line

22 22

23 23

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

24 24

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.