flash-ppt4270 (1)

7/28/2019 flash-ppt4270 (1)

1/40

Introduction to

Flash Animation

CS 318

7/28/2019 flash-ppt4270 (1)

2/40

Topics

Introduction to Flash and animation

The Flash development environment

Creating Flash animationsLayers

Timelines

Creating animation

Adding sound

Publishing animations on Web pages

Using Flash to create embedded multimedia

7/28/2019 flash-ppt4270 (1)

3/40

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
http://www.business-edge.com/solutions/flash.asphttp://www.business-edge.com/solutions/flash.asp

7/28/2019 flash-ppt4270 (1)

4/40

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 toturn it off)

Overdue animation so it takes away from your site's goals
http://antoine.frostburg.edu/chem/senese/101/kits/conductivitysimulation3.htmlhttp://www.cbe.wsu.edu/~jsv/http://www.greenolive.co.uk/home.htmlhttp://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.htmlhttp://irv.cs.uwec.edu:8080/CS318/JMorrison/KAATKL/MajorProject/index.htmlhttp://www.greenolive.co.uk/home.htmlhttp://www.cbe.wsu.edu/~jsv/http://antoine.frostburg.edu/chem/senese/101/kits/conductivitysimulation3.html

7/28/2019 flash-ppt4270 (1)

5/40

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/
http://www.3cgraphics.com/http://manducatis.com/http://www.alser.co.uk/alserweb_001.htmhttp://www.kendrarenzoni.com/http://www.kendrarenzoni.com/http://www.alser.co.uk/alserweb_001.htmhttp://manducatis.com/http://www.3cgraphics.com/

7/28/2019 flash-ppt4270 (1)

6/40

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

7/28/2019 flash-ppt4270 (1)

7/40

Flash Environments

Flash authoring environment Design environment (graphics tools)

Scripting environment (create program code)

You can download a free trial version athttp://www.adobe.com/

Flash player Users must have this installed on their workstations

If not present, automatically prompted to install whenthey start your animation
http://www.adobe.com/http://www.adobe.com/

7/28/2019 flash-ppt4270 (1)

8/40

Flash Files ("Movies")

Authoring file

.fla extension

This file creates the design version of your animation Published file

.swfextension ("swiff" file)

Can't be edited

Can play on most operating systems

Fairly small files

7/28/2019 flash-ppt4270 (1)

9/40

Topics




Timelines

Creating animation

Adding sound



7/28/2019 flash-ppt4270 (1)

10/40

Flash Development Environment

Properties

panel

Toolbox

"Stage"

Other

panels

Layers Timelines

7/28/2019 flash-ppt4270 (1)

11/40

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 Webpage

LayersAllow you to separate and stack objects

All layers cover entire the stage surface Like transparent pieces of paper stacked on each otherAnimation objects move within a layer

7/28/2019 flash-ppt4270 (1)

12/40

Important Components

Timelines Every layer has a separate timeline

Timeline is broken into frames that correspond to

different times in the animationWhen 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

7/28/2019 flash-ppt4270 (1)

13/40

Topics




Timelines

Creating animation

Adding sound



7/28/2019 flash-ppt4270 (1)

14/40

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

7/28/2019 flash-ppt4270 (1)

15/40

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
http://localhost/var/www/apps/conversion/tmp/scratch_7/Flash1/MoonOverLakeNanagook_buttons.htmlhttp://localhost/var/www/apps/conversion/tmp/scratch_7/Flash1/MoonOverLakeNanagook_buttons.html

7/28/2019 flash-ppt4270 (1)

16/40

Adding a New Layer

Click Insert Layer button in the Timeline

panel

Rename the layer (double click then typenew name)

Add the content to the new layer

Layer order determines how items are

stacked on each other in movie

7/28/2019 flash-ppt4270 (1)

17/40

Working With Layers

Active layer

Hide layer

Lock layer

Insert layer Delete layer

7/28/2019 flash-ppt4270 (1)

18/40

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

7/28/2019 flash-ppt4270 (1)

19/40

Timelines Consist of layers divided into frames

Frame: location and length of time that a symbol or graphic in a layerappears Default: 12 ms/frame

An item won't appear in a movie at a particular time unless its layer has a frameat 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

7/28/2019 flash-ppt4270 (1)

20/40

TimelinesPlayhead

Frames

Keyframe

Colored area and arrow

indicates animation

7/28/2019 flash-ppt4270 (1)

21/40

A __________ specifies the

appearance of a layer at a given time.a. Timeline

b. Frame

c. Keyframe

d. Playhead

e. Stage

7/28/2019 flash-ppt4270 (1)

22/40

A __________ specifies the starting or

ending point of an animation sequence.a. Timeline

b. Frame

c. Keyframe

d. Playhead

e. Layer

7/28/2019 flash-ppt4270 (1)

23/40

A __________ specifies the

appearance and movements of one

part of a Flash movie.a. Timeline

b. Frame

c. Keyframe

d. Playhead

e. Layer

7/28/2019 flash-ppt4270 (1)

24/40

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 intoFlash (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

7/28/2019 flash-ppt4270 (1)

25/40

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 theshape to its end size, position, & properties

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

7/28/2019 flash-ppt4270 (1)

26/40

Create the

layer

Create the

keyframes

Create the

tween

Create the

initial shape

With the ending

keyframe

selected, create

the final shape

7/28/2019 flash-ppt4270 (1)

27/40

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

7/28/2019 flash-ppt4270 (1)

28/40

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)

7/28/2019 flash-ppt4270 (1)

29/40

Saving Symbols

Create a graphic in Flash then convert it toa 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

7/28/2019 flash-ppt4270 (1)

30/40

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();

7/28/2019 flash-ppt4270 (1)

31/40

Stopping an

Animation

Layer

Frame number

Command

7/28/2019 flash-ppt4270 (1)

32/40

Adding Sounds

Create a sound layer

Create a keyframe when you want the sound toplayWith target keyframe selected, drag the sound onto

the stage

7/28/2019 flash-ppt4270 (1)

33/40

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

7/28/2019 flash-ppt4270 (1)

34/40

__________ 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

7/28/2019 flash-ppt4270 (1)

35/40

Topics



Creating Flash animationsLayersTimelines

Creating animation

Adding sound

Publishing animations on Web pages Using Flash to create embedded multimedia

7/28/2019 flash-ppt4270 (1)

36/40

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

7/28/2019 flash-ppt4270 (1)

37/40

Topics



Creating Flash animationsLayersTimelines

Creating animation

Adding sound

Publishing animations on Web pages Using Flash to create embedded multimedia

7/28/2019 flash-ppt4270 (1)

38/40

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

7/28/2019 flash-ppt4270 (1)

39/40

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

7/28/2019 flash-ppt4270 (1)

40/40

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

Documents

flash-ppt4270 (1)