Flash (ppt)

Introduction to Flash Animation

CS 318

Topics Introduction to Flash and animation The Flash development environment Creating Flash animations

Layers Timelines Creating animation Adding sound

Publishing animations on Web pages Using Flash to create embedded multimedia

What is Flash?

Defacto standard for creating complex animation sequences in Web pagesUse animated GIFs for simple animation,

Flash for more complex sequences Example flash sequence

Appropriate Use of Animation Do use animation to:

Explain abstract concepts Chemistry simulation

Create subtle special effects or transitions http://www.cbe.wsu.edu/~jsv/

Add creativity/playfulness to a site http://www.greenolive.co.uk/home.html

Explain a series of events or a process that follows a specific timeline Draw attention to a detail in a picture by making it move

http://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.html

Don't: Use animation just for the sake of doing it Force a user sit through a set sequence (always provide an exit or way to turn it

off) Overdue animation so it takes away from your site's goals

Critical Analysis of Animation

Poor animation examples: http://www.3cgraphics.com/ http://manducatis.com/ http://www.alser.co.uk/alserweb_001.htm

What do you think of splash screens that users must click before entering a site?Example: http://www.kendrarenzoni.com/

What Can a Flash Animation Include? Vector-based graphics

Has the ability to "tween" Automatically generates fill-in frames between a beginning and an

ending image

Bitmap-based graphics Can be moved & rotated

Embedded fonts Can be moved, resized, skewed, rotated, recolored

Sound Can synchronize sounds with animation frames

Flash Environments

Flash authoring environment Design environment (graphics tools) Scripting environment (create program code) You can download a free trial version at

http://www.adobe.com/ Flash player

Users must have this installed on their workstations If not present, automatically prompted to install when

they start your animation

Flash Files ("Movies")

Authoring file .fla extension This file creates the design version of your animation

Published file .swf extension ("swiff" file) Can't be edited Can play on most operating systems Fairly small files




Flash Development Environment

Propertiespanel

Toolbox

"Stage"

Otherpanels

Layers Timelines

Important Components

Stage: where the action takes place Be sure to set the stage dimensions before you do

any development This determines the animation's size on your Web

page Layers

Allow you to separate and stack objects All layers cover entire the stage surface

Like transparent pieces of paper stacked on each other Animation objects move within a layer

Important Components

Timelines Every layer has a separate timeline Timeline is broken into frames that correspond to

different times in the animation When you select a frame, the stage shows what will

appear in that layer at that time The playhead shows the current frame that is playing




Creating a Flash Movie

Design the movie on paper Determine the size

Height and width in pixels Create the Flash file and configure the

stage propertiesSizeBackground color

Designing a Flash Movie

Design layers Items that stay static throughout the movie go

in a Background layer Items that have independent movements each

go in their own layerSounds go in a separate layer

Layer analysis: Moon Over Lake Nanagook

Adding a New Layer

Click Insert Layer button in the Timeline panel

Rename the layer (double click then type new name)

Add the content to the new layer Layer order determines how items are

stacked on each other in movie

Working With Layers

Active layer

Hide layerLock layer

Insert layer Delete layer

Drawing With Flash

Make sure to select the correct layer Draw the item and position it on the stage

To select an item and its outline, double-click it...

Configure its propertiesSimilar to Fireworks

Timelines Consist of layers divided into frames

Frame: location and length of time that a symbol or graphic in a layer appears

Default: 12 ms/frame An item won't appear in a movie at a particular time unless its layer has a frame

at that time

Playhead Indicates the current frame displaying on the stage

Keyframe Frame that defines an object at a given point in time Used to define animation starting and ending points

Empty circle – keyframe with no content Filled circle – keyframe with content

When you make a new layer, it automatically has a keyframe in Frame 1

TimelinesPlayhead

Frames

Keyframe

Colored area and arrowindicates animation

A __________ specifies the appearance of a layer at a given time.

a. Timeline

b. Frame

c. Keyframe

d. Playhead

e. Stage

A __________ specifies the starting or ending point of an animation sequence.

a. Timeline

b. Frame

c. Keyframe

d. Playhead

e. Layer

A __________ specifies the appearance and movements of one part of a Flash movie.a. Timeline

b. Frame

c. Keyframe

d. Playhead

e. Layer

Creating Flash Animation Types of animation:

Shape: uses shapes you create in Flash Can change shape position and/or properties Creates straight-line animation between a start position and an

end position Can only be used with vector images

Motion: uses symbols you create or import into Flash (bitmaps)

Can create straight-line animation between a start position and an end position

Can change the position or rotation of a symbol Can "kind of" make a symbol morph into a different symbol

Creating a Shape Animation Create a new layer

Draw the shape at the start position Create a keyframe at the start time Create a keyframe at the end time

With the end keyframe selected, modify the shape to its end size, position, & properties

Select any frame between the beginning and ending keyframes and then create a "tween"

Create thelayer

Create thekeyframes

Create thetween

Create theinitial shape

With the endingkeyframeselected, create the final shape

Creating a Motion Tween

Same as shape tweening, but uses a symbol rather than a shapeAllows you to use bitmapsCan be moved, resized, rotated, morphed to a

different symbol

Symbols Symbol: reusable object

Save an animation image as a symbols This saves file space because the symbol is only saved once

Types of symbols: Graphics (can't be shape tweened) Movie clips (self-contained animation within a movie) Buttons (Up, Down, Over, OverWhileDown states)

Saving Symbols

Create a graphic in Flash then convert it to a symbolRight-click the graphic – Convert to symbol

Import an existing graphic into a Flash symbol libraryFile – Import – Import to Library

To view your symbol library: Window - Library

Stopping an Animation

By default, animations play continuously when published

To configure an animation to play once:Select the frame in which you want the

animation to stop, right-click, click Actions In the ActionScript window, type stop();

Stopping an Animation

Layer

Frame number

Command

Adding Sounds

Create a sound layer Create a keyframe when you want the sound to

play With target keyframe selected, drag the sound onto

the stage

You use a __________ tween to animate vector images, and a __________ tween to animate bitmaps.a. Shape, symbol

b. Motion, shape

c. Shape, motion

d. Symbol, shape

e. None of the above

__________ tweens can be used to morph one vector image into another.

a. Shape

b. Motion

c. Both a and b

d. None of the above




Publishing

Save distribution files File – Publish Preview – Flash or HTML to preview File – Publish Settings to view file types

.swf, .html, .gif, etc. Select desired settings

File – Publish to actually save files

Use HTML to create a new HTML document Use Flash (.swf) file to insert into an existing

HTML document In Dreamweaver, Insert – Media - Flash




Using Flash to Create Embedded Multimedia You can embed audio and video files in

Flash documents and then publish them on Web pagesAdvantages:

Most people have a Flash player installed on their computer

Gives you more control over object's appearance

Creating Embedded Flash Audio Import the audio file to a Flash document Create a timeline to stop the audio You can also create buttons to start and

stop it, and add commands so it doesn't automatically play…

Creating Embedded Flash Video File – Import – Import Video You can import either a file or a URL to a

streaming server You can also create buttons to start and

stop it, and add commands so it doesn't automatically play…

Flash (ppt)

Documents

layer lock layer

animation frames

animation objects

separate layer layer

new layer layer order

simple animation

overdue animation

layer sounds