Frame, Timeline and Vector Animation. Purposes of Animation Capture viewers attention –exampleexample Explain a system or process –exampleexample Set.

Frame, Timeline and Vector Animation

Purposes of Animation

• Capture viewers attention– example

• Explain a system or process– example

• Set a mood or on-screen environment– Example

• Entertain– Example

• NOT TO INTERFERE OR ANNOY

Three Applications for Creating Animations

1.Dreamweaver2.Photoshop3.Flash

Frame Animation

• Displays a series of still images, or frames, at a certain rate to give the impression of motion.

• Can be created Photoshop and special GIF animation software.

Duplicate Layer

Merge Layers

Save for the Web -> GIF format -> Check Animate Box

Animate object on constant background

Vector Animation

• More complex and used to move an object along a path, or vector

• Objects defined by mathematical equations rather than drawn

• “Flash” is a popular software for vector animation

Flash Animation

Example Project

Flash Workspace

File -> Import to Library

Creating shape tweens: www.adobe.com/go/vid0124

Creating motion tweens: www.adobe.com/go/vid0125

Flash Tutorials

See my tutorials for how to “Publish” your Flash Animation as

A “shockwave” a .swf file format.

Do not try to put the .fla format file on your web page. This format can only be read by Flash.

1, Click in the cell where you wantYour Flash animation and select “Plugin”

Adding Your Flash Animation to your Web Page

2. Select the .swf file published in M:\Home from Flash

The Flash object will appear like this but not play until viewedIn the browser

•Produce Flash Movie -- Minimum acceptable for credit:

•Author present for Peer Review at start of class•Movie available for Peer Review•There is a working link from WebEx Page to the movie•A “story” at least 10 seconds long – 120 frames at 12 fps•Background image•At least one motion tween•At least one shape tween or morph•Includes GIF animation•Movie (and Gif) stops at end•Contains sound

The Following Slides AddressAnimation in Dreamweaver

Timeline Animation with Dreamweaver

Window -> Timelines

Frames (horiz) Layers (vert)

Insert -> Layer (AP Div)

Modify -> Timeline -> Add Object to Timeline

Timeline Frames

Layer may contain Live text, Image text or picture

Frame rate, autoplay, loop

Adding Motion to a Layer

Keyframes

Inserting Keyframes

Modify -> Timeline -> Add Keyframe

Record Layer MotionModify -> Timeline -> Record Path of Layer

Dreamweaver Timeline examples

Reveal

Pool Balls