Chapter 5:
Creating Special Effects
© 2010 Delmar, Cengage Learning
Chapter 5 Lessons
1.
2.
3.
4.
5.
Create a mask effect
Add sound
Add video
Create an animated navigation bar
Create character animations using inverse
kinematics
6. Create 3D effects
© 2010 Delmar Cengage Learning
Special Effects
• Special effects can add variety and interest to a
movie
• Spotlight
– Highlighting an area, or revealing part of the
stage
• Sound Effects
• Animated Navigation Bar
– Causes a drop down menu when the user
rolls over a button
© 2010 Delmar Cengage Learning
Understanding Mask Layers
• A mask layer allows you to cover up objects
on another layer(s), and create a window
through which you can view various objects
on the other layer
• Moving the window around can give you a
spotlight effect
© 2010 Delmar Cengage Learning
Understanding Mask Layers
• You need at least two layers
– Mask layer contains the window object
through which you view objects on the
layer below
– The masked layer is the second layer
which contains the objects that are viewed
through the window
© 2010 Delmar Cengage Learning
The Masking Process
• Select masked layer containing objects to be
revealed
• Insert new “Mask” layer above
• Draw a filled shape
– Flash ignores bitmaps, gradients, transparencies
• Select the new layer and open Layer Properties
Dialog box
• Select the original layer and open the Layer
Properties dialog box after selecting the Layer
command on the Modify menu, and then choose
Masked.
© 2010 Delmar Cengage Learning
The Masking Process
• Lock both layers
• Mask additional layers by dragging layers
beneath the mask layer
• To unmask a layer, drag it above the mask
layer, or select and declare it normal through
Layer Properties
© 2010 Delmar Cengage Learning
Fig. 1: A Mask Layer with a Window
Mask layer with window
(the filled circle)
Mask layer before
applying mask
Masked layer after
applying mask; you only
see what appears through
the window
© 2010 Delmar Cengage Learning
Fig. 4: The Completed Layer
Properties Dialog Box
Your color
may vary
Lock
selected
© 2010 Delmar Cengage Learning
Incorporating Animation and Sound
• Sound adds impact to Flash movies
• Quick process
– Import a sound file into the Flash movie
– Create a new layer
– Select the desired frame and drag the
sound symbol onto the stage
– Multiple sounds may go on each layer
© 2010 Delmar Cengage Learning
Fig. 5: Wave Patter Displayed
on a Sound Layer
© 2010 Delmar Cengage Learning
Fig. 6: Sound Effect Options in
the Property Panel
© 2010 Delmar Cengage Learning
Managing Sound
• The Properties panel allows you to
synchronize sound and add basic effects
like fades
• Preview sounds in the Library
© 2010 Delmar Cengage Learning
Sound Formats
• Flash supports
– WAV (Windows Only)
– AIFF (Macintosh Only)
– MP3(Windows and Macintosh)
– With QuickTime 4, Flash accepts
additional sound formats
© 2010 Delmar Cengage Learning
Fig. 8: Timeline for the Button
with the Sound Layer
Sound wave pattern appears
in the selected frame
© 2010 Delmar Cengage Learning
Incorporating Video
• Flash
– Allows you to import several video file
formats
• Video content
– Can be embedded directly into a Flash
document
• Progressively downloaded or streamed
• Embedded video
– Becomes part of a SWF file
© 2010 Delmar Cengage Learning
Adding Video
• Process for embedding video
– Import video file
– Make changes to settings
– Place video on stage
– Add desired controls
© 2010 Delmar Cengage Learning
Adding Video
• Progressive downloading
– Can use ActionScript to load an external FLV file
into a SWF file
• FLV file
– Flash video file created by
• Importing a video file into a Flash document
• Then exporting it as a FLV file
– Resides outside of SWF file
© 2010 Delmar Cengage Learning
Fig. 9: Embedded Video
Play button
Stop button Video placeholder
© 2010 Delmar Cengage Learning
Adobe Media Encoder
• Converts various video file formats, such as
.mov, .avi, and .mpeg, to the FLV (Flash
Video) format so the videos can be used
with Flash.
• Can choose the size of the placeholder the
video will play in, to edit the video, and to
insert cue points that can be used to
synchronize the video with animations and
sound
© 2010 Delmar Cengage Learning
Using the Import Video Wizard
• Import Video Wizard
– Used to import video files into Flash
documents
– Step-by-step process
• Leads you through a series of windows
that allow you to select the file to be
imported
© 2010 Delmar Cengage Learning
Fig. 11: Import Video Wizard
© 2010 Delmar Cengage Learning
Fig. 13: Using ActionScript to
Assign a Play Action to a Button
Script Assist on
Play button selected
© 2010 Delmar Cengage Learning
Fig. 14: Completed Properties
Panel
© 2010 Delmar Cengage Learning
Understanding Animated
Navigation Bars
• Provides user with many options without
cluttering the screen
• Allows the user to go quickly to another
location without navigation
• Provides consistency in function and
appearance
© 2010 Delmar Cengage Learning
Create an Animated Navigation Bar
• The Process
– Create a navigation bar
– Position the drop-down buttons
– Add the animated mask
– Assign actions to the drop down buttons
– Assign a rollover action to the Navigation
bar button
– Create an invisible button
© 2010 Delmar Cengage Learning
Fig. 15: Navigation Bar with
Drop Down Menus
© 2010 Delmar Cengage Learning
Using Frame Labels
• Frame labels can be used in ActionScript
code
• Assign a label to a frame as an identifier
• If you insert frames into the timeline, the
label adjusts to the frames
• The descriptive labels help you identify
frames
© 2010 Delmar Cengage Learning
Fig. 16: A Button Assigned a
Roll Over Action
When the user rolls over the blue button with the pointer, a script
is executed that causes the drop-down menu to disappear
© 2010 Delmar Cengage Learning
Fig. 18: Positioning the Buttons
Make sure the button
borders overlap
© 2010 Delmar Cengage Learning
Fig. 25: Actions Panel
Frame label
b_event button
gotoAndPlay(“eventsMenu”);
symbol indicating the
action will be
assigned to the
button
© 2010 Delmar Cengage Learning
Understanding Inverse Kinematics
• Allows you to create a single image and add a
structure to the image that can be used to animate
the various parts of the image
– creating an articulated structure of bones that
allow you to link the parts of an image.
– Once the bone structure is created, you can
animate the image by changing the position of
any of its parts.
– The bone structure causes the related parts to
animate in a natural way.
© 2010 Delmar Cengage Learning
Creating the Bone Structure
• Can be applied to a single drawn shape,
often applied to an image made up of
several drawings
• Each drawing converted to a graphic symbol
or movie clip symbol and then assembled to
make the desired image
© 2010 Delmar Cengage Learning
Creating the Bone Structure
• Use the Bone tool to create the bone
structure, called the armature
– Click and drag the Bone tool pointer to link
one part of the image to another.
– Continue adding bones to the structure
until all parts of the image are linked.
– The bones in an armature are connected
to each other in a parent-child hierarchy
© 2010 Delmar Cengage Learning
Fig. 28: Before/After the Bone
Structure Is Added
© 2010 Delmar Cengage Learning
Fig. 29: Moving the Foot Moves
Other Parts of the Leg
© 2010 Delmar Cengage Learning
Animating the IK Object
• As you create the bone structure, a layer
named Armature_1 is added to the Timeline,
and the image with the bone structure is
placed in frame 1 on the layer.
• This new layer is called a pose layer.
• Each pose layer can contain only one
armature and its associated image.
• Animating the image is done on this layer.
© 2010 Delmar Cengage Learning
Animating the IK Object
• When animating using inverse kinematics,
you simply specify the start and end
positions of the image.
• Flash interpolates the position of the parts of
the image for the in-between frames.
• Creating a Pose:
– You can insert a keyframe in any frame
after frame 1 on the Armature_1 layer and
then change the position of one or more
of the bones.
© 2010 Delmar Cengage Learning
Creating a Movie Clip with an IK
Object
• Movie clips provide a great deal of flexibility
when animating IK objects.
• You can change properties such as the color
effect and
• You can nest one movie clip within another.
• You can apply a motion tween to a movie
clip.
© 2010 Delmar Cengage Learning
Runtime Feature
• Flash provides a runtime feature for manipulation of
an IK object.
– Click a frame on the Armature layer
– Then use the Properties panel to set the Type to
Runtime.
• The runtime feature only works with IK structures
connected to drawn shapes or movie clip symbols,
not graphic or button symbols.
• Only one pose can used.
© 2010 Delmar Cengage Learning
Fig. 36: Positioning the Left Arm
and Left Foot
Right leg
© 2010 Delmar Cengage Learning
Fig. 37: Positioning the Left Arm
and Left Leg
Right leg
© 2010 Delmar Cengage Learning
Fig. 39: Increasing the Length of
the Tween Span
© 2010 Delmar Cengage Learning
Fig. 41: The Completed
Armature Structure
© 2010 Delmar Cengage Learning
Create 3D Effects
• Flash allows you to create 3D effects by
manipulating objects in 3D space on the Stage.
• Any position on the Stage can be specified by x and
y coordinates.
• In 3D space there is also a z axis that represents
depth.
• Flash provides two tools, 3D Translation and 3D
Rotation that can be used to move and rotate
objects using all three axes.
© 2010 Delmar Cengage Learning
The 3D Tools
• The 3D tools are available on the Tools
panel.
• By default the 3D Rotation tool is displayed
on the Tools panel.
• To access the 3D Translation tool, click and
hold the 3D Rotation tool to open the menu.
© 2010 Delmar Cengage Learning
Creating 3D Effects
• Create a movie clip (only movie clips can have 3D
effects applied to them).
• Place the movie clip on the Stage.
• Click it with either of the 3D tools.
– X, Y, and Z appear on top of the object, as shown
– Each has its own color: red (X), green (Y), and
blue (Z).
– The X and Y axes have arrows and the Z axis is
represented by a dot.
© 2010 Delmar Cengage Learning
Fig. 43: The 3D Translation Tool
© 2010 Delmar Cengage Learning
Fig. 44: The 3D Rotation Tool
© 2010 Delmar Cengage Learning
Chapter 5 Summary
1.
2.
3.
4.
5.
Create a mask effect
Add sound
Add video
Create an animated navigation bar
Create character animations using inverse
kinematics
6. Create 3D effects
© 2010 Delmar Cengage Learning