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 pages

Use

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
http://www.cbe.wsu.edu/~jsv/

Create subtle special effects or transitions

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

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

Flash Development Environment

Toolbox Layers Timelines Other panels

"Stage"

Properties panel

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

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

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 properties

Size Background

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 layer Sounds 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

Hide layer Lock layer

Active 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 properties

Similar

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

Timelines
Playhead Keyframe

Frames

Colored area and arrow indicates animation

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

a.
b. c. d. e.

Timeline Frame Keyframe Playhead Stage

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

a.
b. c. d. e.

Timeline Frame Keyframe Playhead Layer

A __________ specifies the appearance and movements of one part of a Flash movie.
a.
b. c. d. e.

Timeline Frame Keyframe Playhead 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 the layer Create the keyframes Create the initial shape With the ending keyframe selected, create the final shape

Create the tween

Creating a Motion Tween

Same as shape tweening, but uses a symbol rather than a shape

Allows

you to use bitmaps Can 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
Graphics (can't be shape tweened) Movie clips (self-contained animation within a movie) Buttons (Up, Down, Over, OverWhileDown states)

Types of symbols:

Saving Symbols

Create a graphic in Flash then convert it to a symbol

Right-click

the graphic Convert to symbol

Import an existing graphic into a Flash symbol library

File

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
Command

Frame number Layer

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.
b. c. d. e.

Shape, symbol Motion, shape Shape, motion Symbol, shape None of the above

__________ tweens can be used to morph one vector image into another.
a.
b. c. d.

Shape Motion Both a and b None of the above

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

Publishing

Save distribution files

File Publish Preview Flash or HTML File Publish Settings to view file types .swf, .html, .gif, etc. Select desired settings File Publish to actually save files

to preview

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

Dreamweaver, Insert Media - Flash

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

Using Flash to Create Embedded Multimedia

You can embed audio and video files in Flash documents and then publish them on Web pages
Advantages:

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