4-1 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animation and Guidelines for Flash Project Design Macromedia Flash Design & Application

4-4-11OBJOBJ

Copyright 2003, Paradigm Publishing Inc.

Creating Animationand Guidelines for

Flash Project Design

Macromedia FlashMacromedia FlashDesign & ApplicationDesign & Application

4-4-22OBJOBJ


Describe the difference between frame-by-frame animation and tweened animation.

Create and edit a motion tweened animation. Distinguish between regular frames, keyframes, and

tweened frames in the Timeline. Rotate and scale a motion tween. Ease in and Ease out a motion tween. Create a motion guide to move an object along a path

other than a straight line. Change the color of an object in a motion tween. Add keyframes in a motion tween. Insert, move, copy, and delete frames and keyframes. Preview animations using scrubbing and looped

techniques. Create and edit a shape tweened animation.

Performance ObjectivesPerformance Objectives

4-4-33OBJOBJ


Add shape hints to a shape tweened animation. Change the frame rate to slow down or speed up an

animation. Create and edit a frame-by-frame animation. Use onion skin tools to view and edit multiple frames in

an animation. Change frame view options. Describe the role of scenes in a Flash movie. Insert, rename, delete, duplicate, and rearrange scenes. Define a project's goals and limiting factors. Determine the audience for a Flash movie. Describe how to research best practices for Flash

projects. List elements to be included in a flow chart and

storyboard for a movie. COMMANDS REVIEW

Performance ObjectivesPerformance Objectives

4-4-44OBJOBJ


Techniques for Creating Techniques for Creating AnimationAnimation

Techniques for Creating Techniques for Creating AnimationAnimation

-each change in the movie created in a separate keyframe

-suited to movies where the images are complex, require quick movement, or need subtle changes

-increased file size

frame-by-frame

-only two keyframes are created and then Flash

creates the frames between the start and end

objects called interpolated frames

-suited for objects which move smoothly along a

path-less file space

tweened

Animation can be created in Flash using either a frame-by-frame or tweened approach.

4-4-55OBJOBJ


Types of Tweened Types of Tweened AnimationsAnimations

Types of Tweened Types of Tweened AnimationsAnimations

MOTION TWEENSMOTION TWEENS-move a grouped object, instance, or text

block from one location to another-can change the object's position, size,

rotation, or color as it moves

SHAPE TWEENSSHAPE TWEENS-gradually transform an object from one

shape into another in a process known as morphing

4-4-66OBJOBJ


Creating a Motion Tweened Creating a Motion Tweened AnimationAnimation

Creating a Motion Tweened Creating a Motion Tweened AnimationAnimation

Create the object in thestarting keyframe and

convert the object to a symbol.

4-4-77OBJOBJ


Creating a Motion Tweened Creating a Motion Tweened Animation…/2Animation…/2


Insert a keyframe whereyou want the object to end

in the animation.-appears as a hollow dot

With the insertedkeyframe active,

move theinstance to the

ending location.

4-4-88OBJOBJ




select the starting keyframe

IInsert, Create Motion Tweennsert, Create Motion Tween-frames are shaded and a

black arrow is drawn-pointing over any ofthese shaded frames

displays Motion Tweeningin a tooltip

solid dot indicateskeyframe with

content

4-4-99OBJOBJ


Rotating and Scaling a Rotating and Scaling a Motion TweenMotion Tween

Rotating and Scaling a Rotating and Scaling a Motion TweenMotion Tween

By default, Flash scalesthe size difference between

the starting and endingobject in a motion tween.

A motion tween can rotatethe object clockwise orcounterclockwise a set

number of times betweenthe starting and endingposition on the stage.

4-4-1010OBJOBJ


Slowing Down or Speeding Slowing Down or Speeding Up a Motion TweenUp a Motion Tween

Slowing Down or Speeding Slowing Down or Speeding Up a Motion TweenUp a Motion Tween

The speed with which an object moves in a tweened

animation is constant.

The speed with which an object moves in a tweened

animation is constant.

Key a positive or negative value between 1 and 100 or drag the slider bar to accelerate

or decelerate the speed of movement.

4-4-1111OBJOBJ


Creating a Motion PathCreating a Motion PathCreating a Motion PathCreating a Motion Path

A motion guide layer can be connected to a tweened object to direct its movement along a path other than a straight line.

Orienting the tweened object to the motion path will cause the object to move relative

to the angle of the line or shape on the guide layer.

4-4-1212OBJOBJ


Steps to Create a Motion Guide Steps to Create a Motion Guide Path for a Tweened ObjectPath for a Tweened Object

Steps to Create a Motion Guide Steps to Create a Motion Guide Path for a Tweened ObjectPath for a Tweened Object

Make active the layercontaining the tweened object.

use drawing tools todraw a path

Connect the tweened object to the beginning of the pathby selecting the object and then dragging its center point

to the beginning of the line.

click Add Motion Guide

lock the motionguide layer

Connect the tweened object to the end of the pathby dragging its center point to the end of the line.

ORORIInsert, nsert, MMotion Guideotion Guide

4-4-1313OBJOBJ


Play the Movie in Flash Play the Movie in Flash Player FormatPlayer Format

Play the Movie in Flash Play the Movie in Flash Player FormatPlayer Format

Exports the document in swf format and then previews the animation in a Flash

Player window.

CControl, Test ontrol, Test MMovie or Ctrl + Enterovie or Ctrl + Enter

Notice the motionguide line is not

displayed.

4-4-1414OBJOBJ


Orienting the Object toOrienting the Object tothe Paththe Path

Orienting the Object toOrienting the Object tothe Paththe Path

Select to orient the object to the motion guide.e.g. cars entering the loop of a roller coaster

turn upside down when the loop curves

4-4-1515OBJOBJ


Creating a Tween to Change Creating a Tween to Change the Color of an Instancethe Color of an Instance

Creating a Tween to Change Creating a Tween to Change the Color of an Instancethe Color of an Instance

Change the color of a symbolinstance using these options.

Gradually changes the color of the tweened object.

4-4-1616OBJOBJ


Inserting a Keyframe in a Inserting a Keyframe in a Motion TweenMotion Tween

Inserting a Keyframe in a Inserting a Keyframe in a Motion TweenMotion Tween

IInsert, nsert, KKeyframeeyframe

Inserting a keyframe between the starting and ending keyframes of an existing motion tween causes

Flash to create back-to-back motion tweens.

4-4-1717OBJOBJ


Selecting FramesSelecting FramesSelecting FramesSelecting Frames

Hold down the Shift key and click the mouse to select the range of frames adjacent to the current frame.

Hold down the Ctrl key and click the mouse to select nonadjacent frames.

Frames can also be selected by dragging the mouse across the frame boxes.

Selected frames withinan existing animation

display in black.

4-4-1818OBJOBJ


Inserting and Removing Inserting and Removing FramesFrames

Inserting and Removing Inserting and Removing FramesFrames

INSERTING FRAMESINSERTING FRAMES-lengthens the duration of a movie

-IInsert, nsert, FFrame or F5rame or F5

REMOVING FRAMESREMOVING FRAMES-deletes the selected frames including all

content associated with the frames-IInsert, Rnsert, Reemove Frames or Shift + F5move Frames or Shift + F5

4-4-1919OBJOBJ


Clearing FramesClearing FramesClearing FramesClearing Frames

-removes a selected frame's content but leaves

the frame box intact- a cleared frame is

converted to a blank keyframe

Edit, Clear Frames orAlt + Backspace

4-4-2020OBJOBJ


Moving FramesMoving FramesMoving FramesMoving Frames

Select ending framesin all layers and thendrag right to increaselength of animation.

4-4-2121OBJOBJ


Copying FramesCopying FramesCopying FramesCopying Frames

duplicates contentwithin an animation

EEdit, Cdit, Coopy Frames or Ctrl + Alt + Cpy Frames or Ctrl + Alt + C

EEdit, Paste dit, Paste FFrames or Ctrl + Alt + Vrames or Ctrl + Alt + V

4-4-2222OBJOBJ


Previewing AnimationsPreviewing AnimationsPreviewing AnimationsPreviewing Animations

CControl, ontrol, PPlay or Enterlay or Enter

Previews the animation once and then stops.

CControl, ontrol, LLoop Playbackoop Playback

Previews the animation over and over again.

CControl, ontrol, SStop or Entertop or Enter

Stops playing the animation.

4-4-2323OBJOBJ


ScrubbingScrubbingScrubbingScrubbing

A technique used to preview a movie by dragging the playhead back and forth.

4-4-2424OBJOBJ


Using the ControllerUsing the ControllerUsing the ControllerUsing the Controller

WWindow, Tindow, Tooolbars, Colbars, Coontrollerntroller

Stop

Rewind

Step Back Play

Step Forward

Go To End

4-4-2525OBJOBJ


Creating a Shape Tweened Creating a Shape Tweened AnimationAnimation

Creating a Shape Tweened Creating a Shape Tweened AnimationAnimation

Create a shape tweenedanimation from the

Interpolate drop-down list.

Select morph type tointerpolate the frames ina smooth fashion or by

maintaining cornersand straight lines.

The object must be ungrouped so that Flash cancalculate the vectors that transform the shape.

4-4-2626OBJOBJ


Using Shape HintsUsing Shape HintsUsing Shape HintsUsing Shape Hints

Corresponding markers placed on the start and end objects that control how the shape is interpolated.

-mapping

Flash labels corresponding markers with lowercase alphabetic letters.

4-4-2727OBJOBJ


Adding Shape HintsAdding Shape HintsAdding Shape HintsAdding Shape Hints

MModify, Shaodify, Shappe, e, AAdd Shape Hint or Ctrl + Shift + Hdd Shape Hint or Ctrl + Shift + H

A red circle with a lowercase letter is inserted inthe middle of the object. Drag to the locationwhere you want to map your first point. Themarker will not change color to yellow until thecorresponding marker on the end object ismapped to a valid point.

Click the ending keyframe and drag the markerto the point which you want to correlate withthe marker on the starting object.

Markers need to be placed on theoutside edges of a shape.

4-4-2828OBJOBJ


Viewing and Removing Viewing and Removing Shape HintsShape Hints

Viewing and Removing Viewing and Removing Shape HintsShape Hints

VView, Show Shiew, Show Shaape Hints or Ctrl + Alt + Hpe Hints or Ctrl + Alt + H

-toggles on or off the display of shape hints

MModify, Shaodify, Shappe, Re, Reemove All Hintsmove All Hints

-deletes all markers from the objects

Drag individual shape hint off the stage.Drag individual shape hint off the stage.

-automatically deletes corresponding marker

4-4-2929OBJOBJ


Adjusting the Frame RateAdjusting the Frame Ratefor Animationsfor Animations

Adjusting the Frame RateAdjusting the Frame Ratefor Animationsfor Animations

MModify, odify, DDocument or Ctrl + Jocument or Ctrl + J

Complex animations can play back at variable rates dependent on the processing speed of the

computer.

Complex animations can play back at variable rates dependent on the processing speed of the

computer.

adjust frame rate-default is 12 fps

-higher fps settingincreases the file size

4-4-3030OBJOBJ


Creating Frame-by-Frame Creating Frame-by-Frame AnimationsAnimations

Creating Frame-by-Frame Creating Frame-by-Frame AnimationsAnimations

IInsert, nsert, BBlank Keyframelank Keyframe

Frame-by-frame animations are built by inserting keyframes at each change in

content.

-clears the stage of content from the

previous keyframe

IInsert, Clensert, Cleaar Keyframer Keyframeor Shift + F6or Shift + F6

-removes the frame's keyframe

status and associated content

4-4-3131OBJOBJ


Creating Frame-by-Frame Creating Frame-by-Frame Animations…/2Animations…/2

Creating Frame-by-Frame Creating Frame-by-Frame Animations…/2Animations…/2

Automatically creates a keyframe span includes frames from the starting keyframe to the

frame immediately left of the next keyframe Frames between keyframes are shaded gray

motion tweened frames are shaded light blue shape tweened frames are shaded light green

Keyframes can be created by converting regular frames to keyframes

4-4-3232OBJOBJ


Onion Skin ViewOnion Skin ViewOnion Skin ViewOnion Skin View

-displays the position of objects on more than one frame on the stage

-can provide a better insight into an animation's movements

hidden or lockedlayers do not

display

displays currentframe in colorwhile adjacent

frames are dimmed

4-4-3333OBJOBJ


Viewing Onion Skinned Viewing Onion Skinned Frames as OutlinesFrames as Outlines

Viewing Onion Skinned Viewing Onion Skinned Frames as OutlinesFrames as Outlines

-displays the objects with the dimmed frames in Outline mode

4-4-3434OBJOBJ


Editing in Onion Skin ViewEditing in Onion Skin ViewEditing in Onion Skin ViewEditing in Onion Skin View

Start and EndOnion Skin markers

-can be dragged left or rightto increase or decrease the

span of onion skinned frames

Any of the sailboats can bemoved to a new position in

Edit Multiple Frames

Click Modify Onion Markersto choose options controlling

the number of frames displayed

4-4-3535OBJOBJ


Changing Frame View Changing Frame View OptionsOptions

Changing Frame View Changing Frame View OptionsOptions

Frames in the Timeline can be displayed with

different width and height options by

clicking the Frame View button at the top right of

the Timeline panel.

4-4-3636OBJOBJ


Changing Frame View Changing Frame View Options…/2Options…/2


Small frames

Medium frames

Large frames

4-4-3737OBJOBJ




Preview frames

Preview InContext frames

4-4-3838OBJOBJ


Centering a Frame within the Centering a Frame within the Timeline PanelTimeline Panel

Centering a Frame within the Centering a Frame within the Timeline PanelTimeline Panel

-centers the active frame within the Timeline window

-useful for large movies

4-4-3939OBJOBJ


Organizing Animations Using Organizing Animations Using ScenesScenes

Organizing Animations Using Organizing Animations Using ScenesScenes

Scenes are an organizational tool for larger, more complex movies to organize content into manageable

sections

Each scene is created and edited in a separate Timeline and stage

4-4-4040OBJOBJ


Working with ScenesWorking with ScenesWorking with ScenesWorking with Scenes

WWindow, Scindow, Sceene or Shift + F2ne or Shift + F2

Delete scene

Add sceneDuplicate scene

OROR

IInsert, nsert, RRemove Sceneemove SceneIInsert, nsert, SScenecene

4-4-4141OBJOBJ


Navigating ScenesNavigating ScenesNavigating ScenesNavigating Scenes

ORORclick a scene name

click the Edit Scene buttonand click a scene name

4-4-4242OBJOBJ


Guidelines forGuidelines forFlash Project DesignFlash Project Design

Guidelines forGuidelines forFlash Project DesignFlash Project Design

Understanding the scope of the process will complement your technical skills allows you to put the production process in

perspective The Role of Communication

needs must be clearly communicated and understood by all team members

clear communication is essential for completion of a successful project

4-4-4343OBJOBJ


Defining the Goals and Defining the Goals and Limiting FactorsLimiting Factors

Defining the Goals and Defining the Goals and Limiting FactorsLimiting Factors

An understanding of the expected outcomes from the movie is the first step in the process What is the movie's purpose? Is the movie intended to inform or entertain

the end user? Should the movie promote a bias towards a

product or service? What is the main message that is to be

portrayed?

4-4-4444OBJOBJ


Defining the Goals and Defining the Goals and Limiting Factors…/2Limiting Factors…/2

Defining the Goals and Defining the Goals and Limiting Factors…/2Limiting Factors…/2

Determine if there are any limiting factors What is the project schedule? What is the project budget? How will the content be delivered? Are we starting from scratch or does the client

have existing material that can be reused or re-engineered?

Are graphics required that cannot be done in Flash?

Is sound or video required? Has the client presented any design guidelines? What are the specifications for the Web site in

which the movie will be incorporated? Are there any copyright issues that have to be

resolved?

4-4-4545OBJOBJ


Determining the AudienceDetermining the AudienceDetermining the AudienceDetermining the Audience

Audience-centered design involves researching: Demographics of expected audience. Audience expectations for a Web site or

multimedia package for the product or service that is being represented.

Presence of a bias or other preconception about the subject matter.

4-4-4646OBJOBJ


Researching Best Practices Researching Best Practices for Flashfor Flash

Researching Best Practices Researching Best Practices for Flashfor Flash

Spend time surfing the Web sites of successful organizations who serve the target audience What was the element that held your interest? Was the surfing experience intuitive? How much interactivity was included? What colors were used and did the colors

create a sense of harmony? What properties were used for the text? How much graphical content was incorporated

and how was it used? Did the movie take too long to download? Was there a method with which users could

turn the sound on or off? What would you improve at the site?

4-4-4747OBJOBJ


Creating a Flow Chart and Creating a Flow Chart and StoryboardStoryboard

Creating a Flow Chart and Creating a Flow Chart and StoryboardStoryboard

A flow chart is a dynamic document that visually maps the movie in sequence designed to show the logical progression of the

content Storyboarding a project includes details and

specifications on document properties, each individual frame and its objects including graphics, colors, fonts, position, sound, and video represents the master script with enough

information so that anyone could take over the project

Flash projects are usually divided up among group members based on expertise

A Flash project is usually part of a larger Web design strategy

4-4-4848OBJOBJ


Commands ReviewCommands Review

How do you add a scene?

IInsert, nsert, SScenecene

4-4-4949OBJOBJ



How do you add shape hints?

MModify, Shaodify, Shappe, e, AAdd Shape Hintdd Shape Hintor Ctrl + Shift + Hor Ctrl + Shift + H

4-4-5050OBJOBJ



How do you clear frames?

-removes a selected frame's content but leaves

the frame box intact- a cleared frame is

converted to a blank keyframe

Edit, Clear Frames orAlt + Backspace

4-4-5151OBJOBJ



How do you clear a keyframe?

IInsert, Clensert, Cleaar Keyframer Keyframeor Shift + F6or Shift + F6

-removes the frame's keyframe

status and associated content

4-4-5252OBJOBJ



How do you copy frames?

EEdit, Cdit, Coopy Frames or Ctrl + Alt + Cpy Frames or Ctrl + Alt + C

4-4-5353OBJOBJ



How do you display the Controller toolbar?

WWindow, Tindow, Tooolbars, Colbars, Coontrollerntroller

4-4-5454OBJOBJ



How do you create a motion tween?

IInsert, Create Motion Tweennsert, Create Motion Tween

4-4-5555OBJOBJ



How do you cut frames?

EEdit, Cut Frames or Ctrl + Alt + Xdit, Cut Frames or Ctrl + Alt + X

4-4-5656OBJOBJ



How do you display the document properties dialog box?

MModify, odify, DDocument or Ctrl + Jocument or Ctrl + J

4-4-5757OBJOBJ



How do you insert a blank keyframe?

IInsert, nsert, BBlank Keyframelank Keyframe

-clears the stage of content from the

previous keyframe

4-4-5858OBJOBJ



How do you insert a frame?

INSERTING FRAMESINSERTING FRAMES-lengthens the duration of a movie

-IInsert, nsert, FFrame or F5rame or F5

4-4-5959OBJOBJ



How do you insert a keyframe?

IInsert, nsert, KKeyframeeyframe

Inserting a keyframe between the starting and ending keyframes of an existing motion tween causes

Flash to create back-to-back motion tweens.

4-4-6060OBJOBJ



How do you insert a motion guide?

IInsert, nsert, MMotion Guideotion Guide

4-4-6161OBJOBJ



How do you loop the playback of a movie?

CControl, ontrol, LLoop Playbackoop Playback

Previews the animation over and over again.

4-4-6262OBJOBJ



How do you paste frames?

EEdit, Paste dit, Paste FFrames or Ctrl + Alt + Vrames or Ctrl + Alt + V

4-4-6363OBJOBJ



How do you access the Paste in Place feature?

EEdit, Paste idit, Paste inn Place or Ctrl + Shift + V Place or Ctrl + Shift + V

4-4-6464OBJOBJ



How do you play a movie?

CControl, ontrol, PPlay or Enterlay or Enter

Previews the animation once and then stops.

4-4-6565OBJOBJ



How do you play a movie in Flash Player format?

CControl, Test ontrol, Test MMovie or Ctrl + Enterovie or Ctrl + Enter

4-4-6666OBJOBJ



How do you remove frames?

REMOVING FRAMESREMOVING FRAMES-deletes the selected frames including all

content associated with the frames-IInsert, Rnsert, Reemove Frames or Shift + F5move Frames or Shift + F5

4-4-6767OBJOBJ



How do you remove a scene?

IInsert, nsert, RRemove Sceneemove Scene

4-4-6868OBJOBJ



How do you remove shape hints?

MModify, Shaodify, Shappe, Re, Reemove All Hintsmove All Hints-deletes all markers from the objects

4-4-6969OBJOBJ



How do you stop the playback of a looped movie?

CControl, ontrol, SStop or Entertop or Enter

Stops playing the animation.

4-4-7070OBJOBJ



How do you view shape hints?

VView, Show Shiew, Show Shaape Hints or Ctrl + Alt + Hpe Hints or Ctrl + Alt + H-toggles on or off the display of shape hints

4-4-7171OBJOBJ



How do you display the Scene panel?

WWindow, Scindow, Sceene or Shift + F2ne or Shift + F2

4-4-7272OBJOBJ


Adding Sound, Video, and Basic Interactivity

with Buttons

Coming NextComing Next

Documents

4-1 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animation and Guidelines for Flash Project Design Macromedia Flash Design & Application