Upload
cicero
View
31
Download
0
Tags:
Embed Size (px)
DESCRIPTION
The Web Warrior Guide to Web Design Technologies. Chapter 8 Flash: Part II. Objectives. Learn how frames and layers are used in a document’s Timeline to create animations Learn how symbols are stored in a document’s library Create animations including frame-by-frame and tweened animations - PowerPoint PPT Presentation
Citation preview
Chapter 8
Flash: Part II
The Web Warrior Guide to Web Design Technologies
Objectives
• Learn how frames and layers are used in a document’s Timeline to create animations
• Learn how symbols are stored in a document’s library
• Create animations including frame-by-frame and tweened animations
• Create a mask layer and a motion guide layer• Create buttons with simple actions and sounds
Using the Timeline, Frames, and Layers
Using the Timeline, Frames, and Layers
• The Timeline is used to control and coordinate the frames and layers that make up a Flash document
• A frame represents a particular instant in time and contains the content of the Stage at that instant– each frame may contain different images or different states of
the same image – each frame is displayed in succession, creating the appearance
of movement– keyframes contain content that has changed from a previous
frame – the frame rate determines how many frames are displayed each
second
Using the Timeline, Frames, and Layers
• Layers are used to organize the various graphic objects such as shapes, lines, and text that are part of a document – each row within the Timeline represents one
layer– each document starts with one layer
• more layers may be added as needed• modifying the content on one layer will not affect
the content on other layers
Using the Timeline, Frames, and Layers
• To extend the length of an animation you add more frames to a layer
• Playhead– the playhead moves along the Timeline
header indicating which frame is currently being displayed
• Scrubbing– testing an animation by dragging the playhead
back and forth through the frames
Using the Timeline to Test an Animation
• Document vs. Movie– a document is the file you edit to create the
animation; it is saved as a .FLA file – a movie is a published document; it is saved
as a .SWF file and played by the Flash Player plug-in
– the Flash Player comes installed with most new computers and can also be downloaded from the Macromedia Web site
Using the Timeline to Test an Animation
• Other elements of the Timeline– Eye column: display or hide the contents of a layer– Lock column: lock or unlock a layer; the contents of a locked layer
cannot be changed– Outline column: display the contents of a layer in an outline format
Using the Timeline to Test an Animation
Understanding Symbols and the Library
• A symbol is a graphic element with special properties• Symbols are used to create certain types of animations
and to add interactive elements to a document; there are three types of symbols– Movie clip symbols
• contain their own Timeline and operate independently of the Timeline of the document in which they appear
– Graphic symbols • can be either static images or animated images• they operate in sync with the Timeline of the document in which they
appear – Button symbols
• have their own four-frame Timeline • may be used to make the published movie interactive
The Library• Symbols are stored in a document’s library • The library also stores imported bitmap images and sounds• The Library panel is used to access, organize, and modify symbols
in a document’s library
Symbol preview
Symbols
Options menu control
New symbol button
Properties icon
Delete icon
Symbol Instances
• To use a symbol on the Stage you drag a copy of it from the Library panel
• Instance– an instance is a copy of a symbol– you can have multiple instances of a symbol– the symbol is stored only once regardless of
the number of instances created
Editing a Symbol
• You can edit a symbol by placing it in symbol-editing mode
• Changes made to a symbol are applied to all instances of that symbol
• Changes made to an instance of a symbol do not affect the symbol or other instances of that same symbol
Animation
• Animation is accomplished by changing the content of the Stage from one frame to the next and then displaying this content one frame at a time
• Types of animation– Frame-by-frame animation– Tweened animation
Frame-by-Frame Animation
• In a frame-by-frame animation you create the content for each frame – some of the content can be repeated in each frame – the content in other frames can be slightly modified to
create the perception of movement– frame-by-frame animations are usually used to build
more complex animations – frame-by-frame animations tend to produce larger
sized files
Tweened Animation
• In a tweened animation, Flash creates the in-between frames (hence, the term “tweened”)– content created based on the content of the starting
and ending frames – tweening is the process Flash uses to create the
individual frames – easier and quicker to create than a frame-by-frame
animation – you only to need to create the content for two frames,
the one at the beginning of the animation and the one at the end
Tweened Animation
• There are two types of tweened animations– Motion tweens
• used to create animations in which an object changes its position, rotates, changes in color, or fades in or out
– Shape tweens • used to change a shape over time
Creating a Motion Tweened Animation
• Create an object in the first frame of the animation • Convert the object to a symbol
Objectin first frame
Symbolcreated
Creating a Motion Tweened Animation
• Create a keyframe in the frame where the animation will end and move the object to a different position or change its properties
Keyframe
Objectrepositioned
Creating a Motion Tweened Animation
• Instruct Flash to create a motion tweened animation starting in the first frame– additional frames are created that contain the different states of the
object as it transitions between the first and last frame
Motion tweens
Creating a Motion Tweened Animation
• Adjust the motion tween using the Property inspector– set the rotate to CW or CCW and specify how many
times to rotate– set the Ease value to control how fast the object starts
or ends within the animation sequence• Change the object’s Brightness Amount to make
it fade in or out– the Brightness Amount affects the relative lightness or
darkness of an object• An object’s Alpha Amount can also be used to
create a fade effect
Creating a Shape Tweened Animation
• Create an object in the first frame of the animation • Do not convert the object to a symbol • Create a keyframe in the frame where the animation will
end and change the shape of the object • Use the Property inspector to instruct Flash to create a
shape tweened animation starting in the first frame• Text can also be used in a shape tween but it must first
be converted to fills using the Break Apart command
Special Layers
• Guide layer– can serve as a guide as you draw– example: a guide layer with a diagonal line which can be used
as a guide to align graphic elements– the contents of a guide layer are not displayed in the final movie
• Motion guide layer – a special kind of guide layer that provides a path for an object to
follow when it is used in a motion tween– useful when you want to animate an object to move along an
irregular path• draw the path with a tool such as the Pencil tool in the guide layer
Special Layers
• Mask layer– contains a graphic object, such as an oval
shape, through which the contents of one or more underlying layers will show
– the content of the underlying layers is only visible when the mask layer’s graphic object is over it
Special Layers
• Mask layer example– text will only be visible when the circle is over it
Mask layer
Masked layer
Special Layers
• Motion guide layer– provides a path for an object to follow– draw a path in the motion guide layer using a
tool such as the Pencil tool– create a motion tween of an object in the
guided layer which is below the motion guide layer
– the object in the guided layer follows the path in the motion guide layer
Special Layers
• Motion guide layer example– object will follow path in the motion guide layer
Motion guide layer
Guided layer
Using Buttons, Actions, and Sounds
• Buttons– provide an interactive element to a movie– buttons are symbols with the Button behavior– button symbols have a Timeline consisting of
only four frames • each frame represents a state of the button
Using Buttons, Actions, and Sounds
• Each button has four frames in its Timeline – Up frame contains the button’s normal state– Over frame contains the content that shows what the button will look like
when the mouse pointer is moved over it– Down frame contains the content that shows the button’s appearance
when it is clicked– Hit frame does not affect the appearance of the button; it represents the
clickable area of the button
Four button frames
Using Buttons, Actions, and Sounds
• Actions– code elements of ActionScript, Flash’s
programming language– Flash provides many preprogrammed actions
that you can access through the Actions panel– the Actions toolbox, located on the left side of
the Actions panel, contains a list of folders that represent different action categories
Using Buttons, Actions, and Sounds
• Actions panel– double-click a specific action to enter its code into the script
pane on the right side of the Actions panel– add actions to button instances and not to button symbols
Script pane
Action codeActions
Using Buttons, Actions, and Sounds
• Adding Sounds– add sound effects to buttons or add sounds that play
during certain frames– sounds cannot be created within Flash– import sounds using the Import command from the
File menu• sound files formats that can be imported
– WAV, MP3, or AIF
– a sound from a different document’s library can be dragged to the current document
– sounds reside in the document’s library
Using Buttons, Actions, and Sounds
• Adding Sounds– to add a sound from the library to a specific
frame in your document• create a new layer• select the layer’s frame where the sound will play • use the Sound drop-down list in the Property
inspector to select the sound• the frame where the sound will play must be a
keyframe
Using Buttons, Actions, and Sounds
• Adding Sounds– to add a sound effect to a button
• edit the button instance• select the button’s frame where the sound will play • drag the sound from the Library panel to the Stage
or select the sound using the Property inspector
Using Buttons, Actions, and Sounds
• Adding Sounds– the Sounds library contains sounds that can be added
to a document
Using Buttons, Actions, and Sounds
• Button sound effect example– a sound can be added to a button’s Down frame– the sound will play when the button is clicked
Waveform of sound added to Down frame
Using Buttons, Actions, and Sounds
• Adding Sounds– a background sound can be added to a document – place a background sound in a keyframe
Waveform of backgroundsound added at Frame 1
Publishing Your Movie
• Publishing – publish a document in order to distribute it for
use on the Web– a published movie will play within an HTML
page– use the Publish Settings dialog box to specify
how to publish a document – click Publish to create the necessary files,
such as the .swf and .html files
Publishing Your Movie
• Select the file types in the Publish Settings dialog box• The filenames for the published files can also be
changed
Select file typesto publish
Filenames used when movie is published
Summary
• Animations can be created by placing different states of an image in different frames and then displaying the frames one after another
• A document’s frames are coordinated by the Timeline– the Timeline’s playhead indicates which frame is
currently being displayed• Layers are used to organize the images,
animations, and other objects that make up a document– special types of layers include guide layers and mask
layers
Summary
• Types of animations include – frame-by-frame: create the content for each frame – tweened: create the content for the beginning and
ending frames and Flash creates the in-between frames
• Types of tweened animations– motion tweened animations are used to make an
object move, rotate, or change in size or color – shape tweened animations are used to make an
object change its shape
Summary
• Objects used in motion tweened animations must be converted to symbols
• Symbols are stored and organized in a document’s library– instances or copies of a symbol are created on the
Stage– multiple instances can be created of the same symbol– an instance’s properties can be changed without
affecting the symbol or other instances of the same symbol
Summary
• Buttons are symbols with their own four-frame Timeline; buttons allow user interaction– rollover effects as well as sound effects can be added
to buttons– actions are added to buttons to control a movie
• A document is published to make it available on the Web– movies published for the Web have the .swf file
extension– Flash creates the necessary HTML to play the movie
in a browser