Upload
ronny72
View
17.164
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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
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
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
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 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
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 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
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 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…