Chapter 19 - Macromedia Flash:
Building Interactive Animations
Outline
19.1
19.2
19.3
Introduction
Flash Movie Development
Learning Flash with Hands-on Examples
19.3.1 Creating a Shape With the Oval Tool
19.3.2 Adding Text to a Button
19.3.3 Converting a Shape into a Symbol
19.3.4 Editing Button Symbols
19.3.5 Adding Keyframes
19.3.6 Adding Sound to a Button
19.3.7 Verifying Changes with Test Movie
19.3.8 Adding Layers to a Movie
19.3.9 Animating Text with Tweening
19.3.10 Adding a Text Field
19.3.11 Adding ActionScript
 2001 Prentice Hall, Inc. All rights reserved.
1
Chapter 19 - Macromedia® Flash™:
Building Interactive Animations
Outline
19.4
19.5
19.6
19.7
19.8
19.9
Creating a Projector (.exe) File With Publish
Manually Embedding a Flash Movie in a Web Page
Creating Special Effects with Flash
19.6.1 Importing and Manipulating Bitmaps
19.6.2 Create an Advertisement Banner with Masking
19.6.3 Adding Online Help to Forms
Creating a Web-Site Introduction
ActionScript
Internet and World Wide Web Resources
 2001 Prentice Hall, Inc. All rights reserved.
2
3
19.1 Introduction
• Macromedia Flash 5
– Multimedia
• Integrate audio, video, animation, graphics and user
interactivity
– Produce Macromedia Flash files (movies)
• Embed movies in Web pages
• Create standalone applications
– ActionScript
• Macromedia Flash scripting language
• Enables interactivity
 2001 Prentice Hall, Inc. All rights reserved.
4
19.1 Introduction
• Flash Player Plug-in
– Required to view Macromedia Flash movies
• Bundled with recent versions of browser software (IE and
Netscape)
• Download
– www.macromedia.com/support/flash/player/flash_deployment_readme
– Standalone player
– Embed in Web page
• Install Macromedia Flash 5
– 30 day trial download
• www.macromedia.com/software/flash/productinfo/systemreqs
• Includes latest version of Flash Player plug-in and standalone
Flash player
 2001 Prentice Hall, Inc. All rights reserved.
5
19.1 Introduction
• System requirements
– Macromedia Flash 5 is a processor-intensive application
• www.macromedia.com/software/flash/productinfo/systemreqs
 2001 Prentice Hall, Inc. All rights reserved.
6
19.2 Macromedia Flash Movie Development
• Opening the program
– Creates a new file called Movie 1
• Development Environment
– Stage
• White are where movie is developed
– Timeline
• Represents time lapse
• Divided into increments called frames
– Moments in time
 2001 Prentice Hall, Inc. All rights reserved.
7
19.2 Macromedia Flash Movie Development
Fig. 19.1 Macromedia Flash 5 development environment. (Courtesy of Macromedia, Inc.)
Toolbox
Layers
Zoom percentage
 2001 Prentice Hall, Inc. All rights reserved.
Main menu
Stage
Timeline
Frames
Panel windows
Panels
8
19.2 Macromedia Flash Movie Development
• Development Environment
– Toolbox
• Each tool has a specific function
• Active tool
• Tool options
– Change tool function
 2001 Prentice Hall, Inc. All rights reserved.
9
19.2 Macromedia Flash Movie Development
Fig. 19.2 Macromedia Flash 5 Toolbox. (Courtesy of Macromedia, Inc.)
Arrow tool
Line tool
Pen tool
Oval tool
Pencil tool
Ink bottle tool
Dropper tool
Hand tool
Subselect tool
Lasso tool
Text tool
Rectangle tool
Brush tool
Paint bucket tool
Eraser tool
Zoom tool
Stroke color
Fill color
Tool Options
 2001 Prentice Hall, Inc. All rights reserved.
10
19.2 Macromedia Flash Movie Development
• Development Environment
– Panels windows
• Panels
– Frequently used movie options
– Modify size, shape, color, alignment, effects
– Arrange anywhere in development environment
• Save Panel Layout
– Window > Save Panel Layout…
• Press Tab to hide all panels
• Restore default panel layout
– Window > Restore Panel Layout
• Open specific panels
– Window > Panel Sets
 2001 Prentice Hall, Inc. All rights reserved.
11
19.2 Macromedia Flash Movie Development
Fig. 19.3 Macromedia Flash 5 panels. (Courtesy of Macromedia, Inc.)
Info
Instance
Transform
Effect
Stroke
Frame
 2001 Prentice Hall, Inc. All rights reserved.
Sound
Fill
Mixer
Character
Swatches
Paragraph
Text Options
12
19.3 Learning Macromedia Flash with
Hands-on Examples
• Build CEO Assistant 1.0
–
–
–
–
Interactive, animated button
Produces random string when user presses
Animated title
Open new file
• File > New
– Save file with new name
• File > Save As
• .fla file extension
– Specific to Macromedia Flash editable movies
 2001 Prentice Hall, Inc. All rights reserved.
13
19.3 Learning Macromedia Flash with
Hands-on Examples
• Movie Properties
– Open Movie Properties dialog
• Modify > Movie… OR
• Right Click Stage, select Movie Properties
– Properties
• Frame Rate
– Movie speed
– Pocket PC (5-12 frames per second)
• Dimensions
– Movie size
• Background Color
– Stage color
 2001 Prentice Hall, Inc. All rights reserved.
14
19.3 Learning Macromedia Flash with
Hands-on Examples
Fig. 19.4 Macromedia Flash 5 Movie Properties dialog. (Courtesy of Macromedia, Inc.)
Background Color
Fig. 19.5 Selecting a background color. (Courtesy of Macromedia, Inc.)
New background color
Hexadecimal color notation
Color selection eyedropper
 2001 Prentice Hall, Inc. All rights reserved.
15
19.3.1 Creating a Shape with the Oval Tool
• Graphics
– Vector
• Created with mathematical equations
• Define size, shape and color
• Better portability
– Raster
• Areas of colored pixels
• Render photographs and color detail better
 2001 Prentice Hall, Inc. All rights reserved.
16
19.3.1 Creating a Shape with the Oval Tool
• Macromedia Flash graphics
– Created with vectors
• Fill
– Interior color
– Color selected in toolbox
• Stroke
– Border color
– Color selected in toolbox
 2001 Prentice Hall, Inc. All rights reserved.
17
19.3.1 Creating a Shape with the Oval Tool
• Drawing a shape
– Click and drag with shape tool
• Hold down Shift key to constrain proportions
• Keyframes
– Points of change
– Inserted automatically when a shape is drawn in empty
frame
 2001 Prentice Hall, Inc. All rights reserved.
18
19.3.1 Creating a Shape With the Oval Tool
Fig. 19.6 Setting the fill and stroke colors. (Courtesy of Macromedia, Inc.)
Stroke color
No stroke or fill
Default colors (black and white)
Fill color
Swap stroke and fill colors
Fig. 19.7 Keyframe added to the timeline. (Courtesy of Macromedia, Inc.)
Keyframe
 2001 Prentice Hall, Inc. All rights reserved.
19
19.3.1 Creating a Shape With the Oval Tool
• Editing shape colors
– Arrow tool
• Click to select fill or stroke individually
• Use Shift key to select fill and stroke simultaneously
• Info panel
– Window > Panel > Info
– Change size of selected shape
– Constrained aspect ratio
 2001 Prentice Hall, Inc. All rights reserved.
20
19.3.1 Creating a Shape With the Oval Tool
Fig. 19.8
Making multiple selections with the arrow tool. (Courtesy of Macromedia, Inc.)
Fig. 19.9 Modifying the size of a shape with the Info panel. (Courtesy of Macromedia, Inc.)
Selection width
Selection location
Selection height
Cursor location
Color
 2001 Prentice Hall, Inc. All rights reserved.
21
19.3.1 Creating a Shape With the Oval Tool
• Modify color
– Gradient fill
• Gradual progression of color
– Radial
– Linear
– Edit with the Fill panel
 2001 Prentice Hall, Inc. All rights reserved.
22
19.3.1 Creating a Shape With the Oval Tool
Fig. 19.10 Choosing a gradient fill. (Courtesy of Macromedia, Inc.)
Red radial gradient fill
Gradient fills
 2001 Prentice Hall, Inc. All rights reserved.
23
19.3.2 Adding Text to a Button
• Creating a button title
– Text tool
• Click and type to create text
– Text
• Edit with the Character panel
– Window > Panel > Character
– Change font face, size, weight, color and spacing
 2001 Prentice Hall, Inc. All rights reserved.
24
19.3.2 Adding Text to a Button
• Creating a button title
– Text
• Text strings are grouped objects
– Size, shape and color of individual letters cannot be edited
using vector tools
• Ungroup
– Modify > Ungroup
– Text that has been ungrouped cannot be edited with the
text tool or Character panel
• Regroup/group
– Modify > Group
 2001 Prentice Hall, Inc. All rights reserved.
25
19.3.2 Adding Text to a Button
Fig. 19.11 Setting the font face, size, weight and color with the Character panel. (Courtesy of Macromedia, Inc.)
Font
Text (fill) color
Font height
Font kerning
Font tracking
Character position
Linked URL
Bold
Italic
Fig. 19.12 Adding text to the button. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
26
19.3.3 Converting a Shape into a Symbol
• Movie Structure
– Parent movie (scene)
• Contains all symbols, graphics, sounds etc.
• Main editing stage
– Symbol
• Reusable elements in movies
– Graphics, buttons, movie clips
– Separate editing stage from parent movie
• Instances
– Multiple appearances of the same symbol
– Saves time and reduces file size
 2001 Prentice Hall, Inc. All rights reserved.
27
19.3.3 Converting a Shape into a Symbol
• Converting shapes into symbols
– Select items (text, fill and stroke) with arrow tool
– Once converted into symbol, items are treated as one
– Insert > Convert to Symbol or press F8
• Symbol Properties dialog
– Symbol name (must be unique)
– Behavior
• Movie Clip
– Recurring animations
• Button
– Button actions (rollovers etc.)
• Graphic
– Static images
 2001 Prentice Hall, Inc. All rights reserved.
28
19.3.3 Converting a Shape into a Symbol
Fig. 19.13 Selecting an object with the arrow tool. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
29
19.3.3 Converting a Shape into a Symbol
• Library panel
– Stores symbols
– Window > Library or Ctrl + L
– Use to create multiple instances
• Drag and drop from Library panel to stage
 2001 Prentice Hall, Inc. All rights reserved.
30
19.3.3 Converting a Shape into a Symbol
Fig. 19.14 Creating a new symbol with the Symbol Properties dialog. (Courtesy of Macromedia, Inc.)
Fig. 19.15 Library panel. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
31
19.3.3 Converting a Shape into a Symbol
• Movie Explorer
– Window > Movie Explorer or
– Right click stage and select Movie Explorer…
– Shows relationship between parent movie and symbols
 2001 Prentice Hall, Inc. All rights reserved.
32
19.3.4 Editing Button Symbols
Fig. 19.16 Movie Explorer for ceoassist.fla. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
33
19.3.4 Editing Button Symbols
• Editing button symbol
– Symbol contents cannot be edited in parent movie
– Must use symbol editing stage
• Access by double clicking symbol in parent movie or
• Press edit symbols button and select symbol name
 2001 Prentice Hall, Inc. All rights reserved.
34
19.3.4 Editing Button Symbols
• Editing button symbol, cont.
– Button states
• Use to create button effects (rollovers, click sounds etc.)
• Up
– Button default state before it is clicked
• Over
– When mouse rolls over button
– Cannot use with wireless devices
• Down
– When mouse or input device clicks/taps button
– Add sound to this state to create click sound
• Hit
– Defines button’s tap/click sensitive area
– Add keyframes to button states to create effects
 2001 Prentice Hall, Inc. All rights reserved.
35
19.3.4 Editing Button Symbols
Fig. 19.17
Modifying button states with a button’s editing stage. (Courtesy of Macromedia, Inc.)
Return to main scene
Active symbol
Edit scene
Edit symbols
Current frame
Keyframe
Zoom percentage
 2001 Prentice Hall, Inc. All rights reserved.
Button states
36
19.3.5 Adding Keyframes
• Keyframes
– Determine changing points in timeline
• Appear gray with black dot in timeline
– Add keyframe to timeline
• Right click frame and select Insert Keyframe OR
• Select frame and press F6
– Add keyframe to over frame to create rollover
• Select button in over frame and change fill color
• Changing color in this state does not affect other states
 2001 Prentice Hall, Inc. All rights reserved.
37
19.3.5 Adding Keyframes
Fig. 19.18 Inserting a keyframe. (Courtesy of Macromedia, Inc.)
Selected Over frame
Frame options
Insert Keyframe
 2001 Prentice Hall, Inc. All rights reserved.
38
19.3.6 Adding Sound to a Button
• Sound added to button
– To up state
• Plays when button is not clicked
– To over state
• Plays when mouse rolls over button’s hit area
– To down state
• Plays when user clicks button
• Free download sounds
– FlashKit (www.flashkit.com)
– Muinar (www.sounds.muinar.com)
 2001 Prentice Hall, Inc. All rights reserved.
39
19.3.6 Adding Sound to a Button
• Import sound files into Macromedia Flash
– File formats
• Windows Waveform (WAV)
• Audio Interchange File Format (AIFF)
– Mac only
• MPEG layer 3 (MP3)
– Import from file
• File > Import then select audio file
• Adds sound to movie library
 2001 Prentice Hall, Inc. All rights reserved.
40
19.3.6 Adding Sound to a Button
• Add sound to button
– Select over frame
– Open Sound panel
•
•
•
•
Window > Panel Sets > Sound
Select file name from Sound drop-down list
SYNC
EVENT
 2001 Prentice Hall, Inc. All rights reserved.
41
19.3.6 Adding Sound to a Button
Fig. 19.19 Adding sound to a button. (Courtesy of Macromedia, Inc.)
Sound
Sync
Sound added to the Down frame
 2001 Prentice Hall, Inc. All rights reserved.
42
19.3.6 Adding Sound to a Button
• Set sound properties
– Double click sound icon in Library panel
• Compression
– APDCM
– RAW
• Sample Rate
– 11 or 22 kHz
• Pre-processing
– Stereo or mono
 2001 Prentice Hall, Inc. All rights reserved.
43
19.3.6 Adding Sound to a Button
Fig. 19.20 Optimizing sound with the Sound Properties dialog. (Courtesy of Macromedia, Inc.)
Sound name
Compression
Preprocessing
Sample Rate
Sound clip size
and compression
 2001 Prentice Hall, Inc. All rights reserved.
44
19.3.7 Verifying Changes with Test Movie
• Published state
– How the movie appears on the Web
– Can be viewed on desktop computer with Flash Player
– SWF (“swiff”) file
• Embedded into Web document
• Control > Test Movie or Ctrl+Enter
• Export to Flash Player
 2001 Prentice Hall, Inc. All rights reserved.
45
19.3.7 Verifying Changes with Test Movie
Fig. 19.21 GO button in its up and over states. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
46
19.3.8 Adding Layers to a Movie
• Layers
– Organize movie elements
– Rename layer
• Double-click layer name
– Insert layer
• Insert > Insert layer or click insert layer button
– Active layer is highlighted blue
– Create layer for animated title
• Animated title
– Set alignment, size and color with Character panel
 2001 Prentice Hall, Inc. All rights reserved.
47
19.3.8 Adding Layers to a Movie
Fig. 19.22 Renaming a layer. (Courtesy of Macromedia, Inc.)
Rename a layer
Insert a new layer
Delete layer
Fig. 19.23 Setting text alignment with the Paragraph panel. (Courtesy of Macromedia, Inc.)
Center justify
Left justify
Left margin
Indentation
Right justify
Full justify
Right margin
Line spacing
Fig. 19.24 Creating a title with the text tool. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
48
19.3.9 Animating Text with Tweening
• Animation
– Title animation over a series of frames
• Animation types
– Frame-by-frame
– Tweened
• Shape
– Morphing ungrouped shapes from one into another
• Motion
– Moving grouped objects or symbols on stage
 2001 Prentice Hall, Inc. All rights reserved.
49
19.3.9 Animating Text with Tweening
• Tweened animation
– Appearance and position at beginning (frame 1)
– Appearance and position at end (frame 15)
• Insert keyframe into Frame 15
• Change title size and position
– Add motion tween to frame 1
• Right click frame 1 and select Create Motion Tween or
• Use the Frame panel
• Intermediate frames contain the image in the correct position
– Playhead
• Red highlight that indicates frame position
 2001 Prentice Hall, Inc. All rights reserved.
50
19.3.9 Animating Text with Tweening
Fig. 19.25 Adding a keyframe to create an animation. (Courtesy of Macromedia, Inc.)
Fig. 19.26 Creating a motion tween. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
51
19.3.9 Animating Text with Tweening
• Adding ActionScript to prevent looping
– Frame Actions dialog
• Right click frame 15 and select Actions or
• Select frame 15 and press Ctrl+Alt+A
• Add a stop action
– Double click Basic Actions and select Stop
• Action indicated by small a in frame 15
 2001 Prentice Hall, Inc. All rights reserved.
52
19.3.9 Animating Text with Tweening
Fig. 19.27 Adding ActionScript to a frame with the Frame Actions dialog. (Courtesy of Macromedia, Inc.)
Dele te selec ted ac tion
Movie Explorer
Add new item
to the script
Basic Actions
Action added to a frame
Actions menu
Stop action
ActionScript window
Action applied
to a frame
Fig. 19.28 Moving a keyframe.(Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
53
19.3.10 Adding a Text Field
• Text field options
– Dynamic
• Text that can be changed by outside variables
– Static
• Text that remains unchanged
– Input
• Text that is input by the user
• Establishing text field settings
– Text Options panel
• Window > Panel > Text Options
– Set variable name
– Draw text field with text tool
 2001 Prentice Hall, Inc. All rights reserved.
54
19.3.10 Adding a Text Field
Fig. 19.29 Creating a dynamic text field with the Text Options panel. (Courtesy of Macromedia, Inc.)
Text type
Line type
Variable
name
Fig. 19.30 Creating a text field. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
Bo rde r a nd
Ba c kground
55
19.3.11 Adding ActionScript
• Add to button symbol
– Button symbol will change text in text field
• Object Actions dialog
– Right click button symbol in parent movie, select Actions
– Add action which performs function when user presses
button
• on
– Change on (release) to on (press)
– Add action which sets a variable when on function is
performed
• Set Variable
– on (press) {
<not set yet> = “”;
}
 2001 Prentice Hall, Inc. All rights reserved.
56
19.3.11 Adding ActionScript
• Object Actions dialog, cont.
– Change variable name
– Add function which sets variable equal to random number
between 1 and 5
• random
– on (press) {
randomNumber = random (5);
}
 2001 Prentice Hall, Inc. All rights reserved.
57
19.3.11 Adding ActionScript
Fig. 19.31 Adding an action to a button with the Object Actions dialog. (Courtesy of Macromedia, Inc.)
Add action
 2001 Prentice Hall, Inc. All rights reserved.
58
19.3.11 Adding ActionScript
• Object Actions dialog, cont.
– Add a conditional statement which sets text field variable
equal to text string depending on variable randomNumber
value
• if
– on (press) {
randomNumber =random(5);
if (<not set yet>) {
}
}
 2001 Prentice Hall, Inc. All rights reserved.
59
19.3.11 Adding ActionScript
• Object Actions dialog, cont.
– Nested if statements (one for each condition)
• else if
– on ( press ) {
randomNumber = random ( 5 );
if ( randomNumber == 0 ) {
} else if ( <not set yet> ) {
} else if ( <not set yet> ) {
} else if ( <not set yet> ) {
} else if ( <not set yet> ) {
}
}
 2001 Prentice Hall, Inc. All rights reserved.
60
19.3.11 Adding ActionScript
• Object Actions dialog, cont.
– Set condition
• Change first <not set yet> into
– randomNumber == 1
• Do the same for each else if statement increasing value by
1
• Set the value of text field variable for each statement
 2001 Prentice Hall, Inc. All rights reserved.
61
19.3.11 Adding ActionScript
• Final script
– on ( press ) {
randomNumber = random ( 5 )
if ( randomNumber == 0 ) {
advicefield = "Hire Someone!";
} else if ( randomNumber == 1 ) {
advicefield = "Buy a Yacht!";
} else if ( randomNumber == 2 ) {
advicefield = "Buy Stock!";
} else if ( randomNumber == 3 ) {
advicefield = "Go Golfing!";
} else {
advicefield = "Hold A Meeting!";
}
}
 2001 Prentice Hall, Inc. All rights reserved.
62
19.4 Creating a Projector (.exe) File With
Publish
• Publishing Macromedia Flash movies
– Similar to exporting in other applications
– Creating a Windows Projector EXE standalone application
– Publish Settings dialog
• File > Publish Settings…
• Select output formats
– Flash (SWF)
– Windows Projector (EXE)
• Flash settings
– Versions
– Sound optimization
 2001 Prentice Hall, Inc. All rights reserved.
63
19.4 Creating a Projector (.exe) File With
Publish
Fig. 19.32 Published Macromedia Flash files.
Windows Executable (.exe)
Macromedia Flash (.fla)
Flash Player movie (.swf)
 2001 Prentice Hall, Inc. All rights reserved.
64
19.5 Manually Embedding a Macromedia
Flash Movie in a Web Page
• Embed SWF into HTML or XHTML document
– Browser compatibility
• Any browser with the Flash Player plug-in displays
Macromedia Flash movies the same
• Use two tags to embed SWF file for different browsers
– <object> tag
• Calls Flash Player ActiveX control in IE
– <embed> tag
• Calls Flash Player plug-in for Netscape
Communicator
• Must be within <object> tag
 2001 Prentice Hall, Inc. All rights reserved.
65
19.5 Manually Embedding a Macromedia
Flash Movie in a Web Page
• Embed SWF into HTML or XHTML document
– Browser compatibility
• <noembed> tag
– Provides alternative content to users without the plug-in
– Contained within the <embed> tag
– Can contain HTML or XHTML tags within it
 2001 Prentice Hall, Inc. All rights reserved.
66
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ceoassist.html
<!-- Fig. 19.33: ceoassist.html
-->
<!-- Embedding a Flash movie into a Web site -->
<html xmlns = "http://www.w3.org/1999/xhtml">
Embeds ceoassist.swf
so it can be rendered within
a Web browser.
<head>
<title>Adding Flash to your Web site</title>
</head>
<body>
<!-<!-<!-<!-<!--
Outline
object element used to
embed
a Macromedia Flash
URL
of rendering
the following object tag tells the
movie forspecified
IE.-->
Callsby
ActiveX
mechanism
isthe
base
Microsoft Internet Explorer codebase
browser to attribute
-->
control.
classid
attribute
play the Flash movie and where
pathto
forfind
URL-->
specified by
the Flash Player plug-in if it is not -->
classid attribute
installed
-->
<object classid =
"clsid:D27CDB6E-AE6D-11cf-96B8-4445540000"
codebase = "http://active.macromedia.com/flash5/cabs
/swflash.cab#version=5,0,0,0">
<param name = "Movie" value = "ceoassist.swf" />
<!-<!-<!-<!--
the following embed tag tells the Netscape
Navigator browser to play the Flash movie
and where to find the Flash Player plug-in
if it is not installed
-->
-->
-->
-->
 2001 Prentice Hall, Inc.
All rights reserved.
67
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<embed src = "ceoassist.swf" plug-inspage =
"http://www.macromedia.com/shockwave/download/
index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
PLUGINSPACE
embed
tells user
element
where
calls
to get
<noembed>
This Web site contains
the CEO
Assistant
1.0
Netscape
plugin
Netscape
for the Macromedia
plug-in.
Must be
Flash movie. You must have the Flash
Player
<object>
tags
Flash Player ifwithin
it is not
already installed
plug-in to view the Flash movie.
</noembed>
</object>
</body>
</html>
Outline
Ceoassist.html
noembed element contains alternative
content for users who cannot view the
Macromedia Flash movie
 2001 Prentice Hall, Inc.
All rights reserved.
68
19.6 Creating Special Effects with
Macromedia Flash
• Advanced Macromedia Flash techniques
–
–
–
–
–
–
Importing bitmaps
Masking
Shape tweening
Hyperlinking
Triggered animations
Preloading animation
 2001 Prentice Hall, Inc. All rights reserved.
69
19.6.1 Importing and Manipulating Bitmaps
• Import raster (bitmapped) image
– May be photograph or graphic
• created with a graphics application
– Photoshop, Paint Shop Pro, Freehand, Illustrator etc.
– File > Import
– Convert imported image to editable graphic
• Select image
– Modify > Break Apart
• Edit or create original graphics
– Eraser tool
– Paintbrush tool
– Lasso tool
– Tool options
 2001 Prentice Hall, Inc. All rights reserved.
70
19.6.2 Create an Advertisement Banner with
Masking
• Advertising Banner
– Imported bitmapped graphic
• Scale with arrow tool scale option
– Title
– Animation
– Masking
• Hides items in layers beneath
• In shape of title to mask animation
 2001 Prentice Hall, Inc. All rights reserved.
71
19.6.2 Create an Advertisement Banner with
Masking
Fig. 19.34 Resizing an image with the move tool scale option. (Courtesy of Macromedia, Inc.)
anchor
 2001 Prentice Hall, Inc. All rights reserved.
72
19.6.2 Create an Advertisement Banner with
Masking
• Advertising Banner, cont.
– Title
• Create in frame 1 of top layer
– Becomes the mask
• Copy frame and paste into frame 1 of bottom layer
– Visible through the mask
 2001 Prentice Hall, Inc. All rights reserved.
73
19.6.2 Create an Advertisement Banner with
Masking
• Advertising Banner, cont.
– Masked animation
• Circle filled with rainbow linear gradient that moves from left
side to right side of stage
• Create circle with no stroke/border
• Convert to graphic symbol
• Animation
– Frame 1 (left side)
– Frame 20 (right side)
– Frame 40 (left side)
– Motion tween at frame 1 and at frame 20
 2001 Prentice Hall, Inc. All rights reserved.
74
19.6.2 Create an Advertisement Banner with
Masking
Fig. 19.35 Creating the Circle graphic. (Courtesy of Macromedia, Inc.)
Rainbow
gradient fill
No stroke
 2001 Prentice Hall, Inc. All rights reserved.
75
19.6.2 Create an Advertisement Banner with
Masking
• Advertising Banner, cont.
– Masking
• Turn top layer into mask
– Right click top layer and select Mask
• Mask is not visible in final movie
• Only animation, beneath the mask and the title in the bottom
layer.
 2001 Prentice Hall, Inc. All rights reserved.
76
19.6.2 Create an Advertisement Banner with
Masking
Fig. 19.36 Creating a mask layer. (Courtesy of Macromedia, Inc.)
Masking Masked
layer
layer
Locked for editing
 2001 Prentice Hall, Inc. All rights reserved.
77
19.6.2 Create an Advertisement Banner with
Masking
Fig. 19.37 Completed banner.
 2001 Prentice Hall, Inc. All rights reserved.
78
19.6.3 Adding Online Help to Forms
• Adding interactivity
– Online help to forms
• Help buttons
– Trigger animations which provide information to user
– Form
• Title
• Form field captions
– Adjust line spacing
 2001 Prentice Hall, Inc. All rights reserved.
79
19.6.3 Adding Online Help to Forms
Fig. 19.38 Adjusting the line spacing with the Paragraph panel. (Courtesy of Macromedia, Inc.)
Right justify
Line-spacing
adjustment
 2001 Prentice Hall, Inc. All rights reserved.
80
19.6.3 Adding Online Help to Forms
• Adding interactivity, cont.
– Form, cont.
• Form field
– Create rectangle shape with rounded corners
• Rectangle tool option
• Double click option to set corner radius
– Convert to graphic symbol that can be reused throughout
movie
• Place an instance next to each form caption
 2001 Prentice Hall, Inc. All rights reserved.
81
19.6.3 Adding Online Help to Forms
Fig. 19.39 Creating a rectangle with rounded corners. (Courtesy of Macromedia.)
 2001 Prentice Hall, Inc. All rights reserved.
82
19.6.3 Adding Online Help to Forms
Fig. 19.40 Creating multiple instances of a symbol with the Library panel. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
83
19.6.3 Adding Online Help to Forms
• Adding interactivity, cont.
– Form, cont.
• Help button
– One instance next to each form field
• Button ActionScript
– on (release) {
gotoAndStop(2);
}
– Frame number (2) increases by one for each button
• Frame contains the movie clip help animation
 2001 Prentice Hall, Inc. All rights reserved.
84
19.6.3 Adding Online Help to Forms
• Adding interactivity, cont.
– Form, cont.
• Help animation
– New movie clip
– Shape tween
• Dot (frame 1) > line (frame 5) > rectangle (frame 10)
• Use Info panel to change size and shape and
alignment
• Add shape tween to frame 1 and 5 using Frame panel
 2001 Prentice Hall, Inc. All rights reserved.
85
19.6.3 Adding Online Help to Forms
Fig. 19.41 Centering an image on the stage with the Info panel. (Courtesy of Macromedia, Inc.)
Registration selection
Center alignment
Fig. 19.42 Creating a shape tween. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
86
19.6.3 Adding Online Help to Forms
• Adding interactivity, cont.
– Form, cont.
• Help animation
– Instance of form field symbol in new layer
– Create shape tween animation with form field symbol
• Use Transform panel to modify the symbol size
• Scale factor
• 0% (frame 10) > 150% (frame 20) > 100% (frame 25)
– Add help text to new layer
• Duplicate movie clip symbol using Library panel
– one for each help button
 2001 Prentice Hall, Inc. All rights reserved.
87
19.6.3 Adding Online Help to Forms
Fig. 19.43 Adding the field symbol to the nameWindow movie clip. (Courtesy of Macromedia, Inc.)
Fig. 19.44 Creating an animation with the form field symbol. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
88
19.6.3 Adding Online Help to Forms
Fig. 19.45 Duplicating movie clip symbols with the Library panel. (Courtesy of Macromedia, Inc.)
Edit scene
Edit symbols
Symbols to edit
Current symbol
 2001 Prentice Hall, Inc. All rights reserved.
89
19.6.3 Adding Online Help to Forms
• Adding interactivity, cont.
– Form, cont.
• Movie clip symbol
– Frame by frame animation for form field
• Simulates typing action
• Create in new layer
• Text field, add one more letter in each consecutive
keyframe
• Repeat for all three movie clips
– Modify help text in each movie clip symbol
 2001 Prentice Hall, Inc. All rights reserved.
90
19.6.3 Adding Online Help to Forms
Fig. 19.46 Creating a frame-by-frame animation. (Courtesy of Macromedia, Inc.)
Deleting a letter
from each
subsequent frame
Frames for animation
 2001 Prentice Hall, Inc. All rights reserved.
91
19.6.3 Adding Online Help to Forms
• Adding interactivity, cont.
– Form, cont.
• Place movie clip symbols in parent movie in correct frame (2,3
or 4) so that animation plays when user presses help button
 2001 Prentice Hall, Inc. All rights reserved.
92
19.6.3 Adding Online Help to Forms
Fig. 19.47 Bug2Bug.com help form. (Courtesy of Macromedia, Inc.)
 2001 Prentice Hall, Inc. All rights reserved.
93
19.7 Creating a Web-Site Introduction
• Web site introduction
–
–
–
–
Used to pre-load larger items into movie
Reduces delay
Maintains user interest
Many methods to create
• Use ActionScript to pause movie until all items are loaded
• ActionScript method
– First create items which are preloaded
• Movie clip symbols which contain animations
• Motion tween rotate option
– Three rotating books
• Add symbols to frame 2 each in its own new layer
 2001 Prentice Hall, Inc. All rights reserved.
94
19.7 Creating a Web-Site Introduction
Fig. 19.48 Creating a rotating object with the motion tween Rotate option. (Courtesy of Macromedia, Inc.)
Times
Rotate
Fig. 19.49 Inserted movie clips.
 2001 Prentice Hall, Inc. All rights reserved.
95
19.7 Creating a Web-Site Introduction
• ActionScript method, cont.
– Preloading animation
• Place in frame 1 of its own layer
• Create as movie clip symbol
• Shape tween radial gradients
– Create radial gradient and modify with Fill panel
– Insert keyframes in frame 7 and 14
– Modify gradient in frame 7
– Add shape tween to frame 1 and 7
 2001 Prentice Hall, Inc. All rights reserved.
96
19.7 Creating a Web-Site Introduction
Fig. 19.50 Changing gradient colors with the Fill panel. (Courtesy of Macromedia, Inc.)
Fill type
Gradient range
Gradient preview
Gradient color swatch
Outer color
Inner color
Save gradient
Fig. 19.51 Adding an intermediate color to a gradient. (Courtesy of Macromedia, Inc.)
Resulting gradient
Click and drag to remove a color
 2001 Prentice Hall, Inc. All rights reserved.
97
19.7 Creating a Web-Site Introduction
• ActionScript method, cont.
– Preloading animation
• Add button symbol to animation
– allows user to skip over loading to final site
– Create as text
• Modify hit state to include spaces between letters
 2001 Prentice Hall, Inc. All rights reserved.
98
19.7 Creating a Web-Site Introduction
• ActionScript method, cont.
– Preloading animation, cont.
• Add getURL action to button
– Hyperlinks button to another site
– URL: http://www.websitename.com
– Target
• Blank, loads URL into new window
• Self, loads URL into current window
– on ( release ) {
getURL ( “http://www.websitename.com”,
“_blank” );
}
 2001 Prentice Hall, Inc. All rights reserved.
99
19.7 Creating a Web-Site Introduction
• ActionScript method, cont.
– Parent movie
• Add ActionScript to loading movie clip
– onClipEvent (enterFrame)
• Specifies playhead position
– if conditional statement which tests if all frames are
loaded
• onClipEvent (enterFrame) {
if (_framesloaded > 2 && _framesloaded ==
_current frame)
}
• Tests if the number of frames loaded is greater than the
frame which contains the loaded objects (frame 2) AND
• If the number of frames loaded is equal to the current frame
 2001 Prentice Hall, Inc. All rights reserved.
100
19.7 Creating a Web-Site Introduction
• ActionScript method, cont.
– Parent movie, cont.
• Add ActionScript to loading movie clip, cont.
– goto action tells the movie to skip to frame and play or
skip to frame and stop
• onClipEvent ( enterFrame ) {
if ( _framesloaded > 2 && _framesloaded ==
_current frame)
{gotoAndPlay ("Scene 1", 2);}
}
• Skips to frame 2 and plays loaded objects
– Add stop action to frame 2
• Stops movie after animations have played
 2001 Prentice Hall, Inc. All rights reserved.
101
19.7 Creating a Web-Site Introduction
Fig. 19.52 Defining a button’s hit area.
Hit state
Up state
Fig. 19.53 Creating an animation to preload images.
Text hyper-linked buttons
Rotating counter-clockwise
 2001 Prentice Hall, Inc. All rights reserved.
102
19.8 ActionScript
Ac tio n
De sc rip tio n
goto
Jump to a frame or scene in another part of the movie.
play
Start a movie at certain points at which the movie may have
been stopped.
stop
Stop a movie.
toggleHighQuality
Turn anti-aliasing on and off. By turning it off, the movie is able
to play faster, but renders with rough edges.
stopAllSounds
Stop the soundtrack without affecting the movie.
getURL
Load a URL into a new or existing browser window.
FSCommand
Insert JavaScript or other scripting languages into a Flash
movie.
loadMovie/
unloadMovie
Load an SWF into the Flash Player from the current movie. Can
also load another movie into the current movie.
ifFrameLoaded
Check whether certain frames have been loaded.
onClipEvent
Assigns actions to a movie clip based on specific events. The
events include load, unLoad, enterFrame , Mouse up,
Mouse down, key up, key down and data.
 2001 Prentice Hall, Inc. All rights reserved.
103
19.8 ActionScript
Ac tio n
De sc rip tio n
on
Assign actions such as Press, Release and RollOver to a
button.
if
Set up condition statements that run only when that condition is
true.
while/do while
Run a collection of statements while a condition statement is
true.
call
Give multiple buttons or frames the same action.
setProperty
Change the attributes of a movie clip while the movie plays.
setVariable
Assign a value to a variable within a Flash movie.
duplicate /
removeMovieClip
Dynamically add or remove a movie clip to or from a movie.
start/stopDrag
Move a movie clip while the movie is running.
trace
Display programming notes or variable values while testing a
movie.
// (comment)
Keep track of personal notes in a frame or action for future
reference.
 2001 Prentice Hall, Inc. All rights reserved.