2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 19 - Macromedia Flash: Building Interactive Animations Outline 19.1 Introduction 19.2 Flash Movie

2001 Prentice Hall, Inc. All rights reserved.

1

Chapter 19 - Macromedia Flash: Building Interactive Animations

Outline19.1 Introduction19.2 Flash Movie Development19.3 Learning Flash with Hands-on Examples

19.3.1 Creating a Shape With the Oval Tool19.3.2 Adding Text to a Button19.3.3 Converting a Shape into a Symbol19.3.4 Editing Button Symbols19.3.5 Adding Keyframes19.3.6 Adding Sound to a Button19.3.7 Verifying Changes with Test Movie19.3.8 Adding Layers to a Movie19.3.9 Animating Text with Tweening19.3.10 Adding a Text Field19.3.11 Adding ActionScript


2

Chapter 19 - Macromedia® Flash™: Building Interactive Animations

Outline19.4 Creating a Projector (.exe) File With Publish19.5 Manually Embedding a Flash Movie in a Web Page19.6 Creating Special Effects with Flash

19.6.1 Importing and Manipulating Bitmaps19.6.2 Create an Advertisement Banner with

Masking19.6.3 Adding Online Help to Forms

19.7 Creating a Web-Site Introduction19.8 ActionScript19.9 Internet and World Wide Web Resources


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


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


5

19.1 Introduction

• System requirements– Macromedia Flash 5 is a processor-intensive application

• www.macromedia.com/software/flash/productinfo/systemreqs


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


7


Fig. 19.1 Macromedia Flash 5 development environment. (Courtesy of Macromedia, Inc.)

TimelineToolbox Layers Panel windowsMain menu Frames

StageZoom percentage Panels


8


• Development Environment – Toolbox

• Each tool has a specific function

• Active tool

• Tool options

– Change tool function


9


Arrow toolLine tool

Pen tool

Oval tool

Pencil tool

Ink bottle tool

Dropper tool

Hand tool

Subselect tool

Lasso toolText toolRectangle tool

Brush tool

Paint bucket tool

Eraser tool

Zoom tool

Stroke color

Fill color

Tool Options

Fig. 19.2 Macromedia Flash 5 Toolbox. (Courtesy of Macromedia, Inc.)


10


• 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


11


Fig. 19.3 Macromedia Flash 5 panels. (Courtesy of Macromedia, Inc.)

Info Transform Stroke Fill SwatchesMixer

Instance Effect Frame Sound ParagraphCharacter 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


13


• 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


14


Background Color

Fig. 19.4 Macromedia Flash 5 Movie Properties dialog. (Courtesy of Macromedia, Inc.)

Color selection eyedropper

Hexadecimal color notationNew background color

Fig. 19.5 Selecting a background color. (Courtesy of Macromedia, Inc.)


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


16


• Macromedia Flash graphics– Created with vectors

• Fill– Interior color– Color selected in toolbox

• Stroke– Border color– Color selected in toolbox


17


• 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


18

19.3.1 Creating a Shape With the Oval Tool

Stroke color

Fill color

Swap stroke and fill colorsDefault colors (black and white)

No stroke or fill

Fig. 19.6 Setting the fill and stroke colors. (Courtesy of Macromedia, Inc.)

Keyframe

Fig. 19.7 Keyframe added to the timeline. (Courtesy of Macromedia, Inc.)


19


• 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


20


Fig. 19.8 Making multiple selections with the arrow tool. (Courtesy of Macromedia, Inc.)

Selection width

Selection height

ColorCursor location

Selection location

Fig. 19.9 Modifying the size of a shape with the Info panel. (Courtesy of Macromedia, Inc.)


21


• Modify color– Gradient fill

• Gradual progression of color

– Radial

– Linear

– Edit with the Fill panel


22


Gradient fills

Red radial gradient fill

Fig. 19.10 Choosing a gradient fill. (Courtesy of Macromedia, Inc.)


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


24


• 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


25


Font

Font height

Font tracking

Character position

Linked URL

Bold Italic

Font kerning

Text (fill) color

Fig. 19.11 Setting the font face, size, weight and color with the Character panel. (Courtesy of Macromedia, Inc.)

Fig. 19.12 Adding text to the button. (Courtesy of Macromedia, Inc.)


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


27


• 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


28


Fig. 19.13 Selecting an object with the arrow tool. (Courtesy of Macromedia, Inc.)


29


• Library panel– Stores symbols

– Window > Library or Ctrl + L

– Use to create multiple instances• Drag and drop from Library panel to stage


30


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.)


31


• Movie Explorer– Window > Movie Explorer or

– Right click stage and select Movie Explorer…– Shows relationship between parent movie and symbols


32

19.3.4 Editing Button SymbolsFig. 19.16 Movie Explorer for ceoassist.fla. (Courtesy of Macromedia, Inc.)


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


34


• 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


35


Active symbol

Return to main scene

Keyframe

Current frame

Zoom percentage

Edit symbols

Button states

Edit scene

Fig. 19.17 Modifying button states with a button’s editing stage. (Courtesy of Macromedia, Inc.)


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


37

19.3.5 Adding Keyframes

Insert Keyframe

Selected Over frame

Frame options

Fig. 19.18 Inserting a keyframe. (Courtesy of Macromedia, Inc.)


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)


39


• 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


40


• Add sound to button– Select over frame

– Open Sound panel• Window > Panel Sets > Sound• Select file name from Sound drop-down list

• SYNC• EVENT


41


Sound

Sync

Sound added to the Down frame

Fig. 19.19 Adding sound to a button. (Courtesy of Macromedia, Inc.)


42


• Set sound properties– Double click sound icon in Library panel

• Compression

– APDCM

– RAW

• Sample Rate

– 11 or 22 kHz

• Pre-processing

– Stereo or mono


43


Sound name

Compression

Sample Rate

Preprocessing

Sound clip sizeand compression

Fig. 19.20 Optimizing sound with the Sound Properties dialog. (Courtesy of Macromedia, Inc.)


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


45

19.3.7 Verifying Changes with Test Movie

Fig. 19.21 GO button in its up and over states. (Courtesy of Macromedia, Inc.)


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


47

19.3.8 Adding Layers to a Movie

Rename a layer

Insert a new layerDelete layer

Fig. 19.22 Renaming a layer. (Courtesy of Macromedia, Inc.)

Left justify

Center justify

Left marginIndentation

Right justify

Full justifyRight margin

Line spacing

Fig. 19.23 Setting text alignment with the Paragraph panel. (Courtesy of Macromedia, Inc.)

Fig. 19.24 Creating a title with the text tool. (Courtesy of Macromedia, Inc.)


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


49


• 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


50


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.)


51


• 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


52


Basic Actions

Add new itemto the script

Actions menuStop action

Movie Explorer

Delete selected action

Action added to a frame

ActionScript window

Action appliedto a frame

Fig. 19.27 Adding ActionScript to a frame with the Frame Actions dialog. (Courtesy of Macromedia, Inc.)

Fig. 19.28 Moving a keyframe.(Courtesy of Macromedia, Inc.)


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


54

19.3.10 Adding a Text Field

Text type

Variablename

Border and BackgroundLine type

Fig. 19.29 Creating a dynamic text field with the Text Options panel. (Courtesy of Macromedia, Inc.)

Fig. 19.30 Creating a text field. (Courtesy of Macromedia, Inc.)


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> = “”;}


56


• 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);}


57


Add action

Fig. 19.31 Adding an action to a button with the Object Actions dialog. (Courtesy of Macromedia, Inc.)


58


• 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>) { }

}


59


• 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> ) { }}


60


• 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


61


• 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!"; }}


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


63

19.4 Creating a Projector (.exe) File With Publish

Windows Executable (.exe)Macromedia Flash (.fla)Flash Player movie (.swf)

Fig. 19.32 Published Macromedia Flash files.


6419.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


6519.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.

Outline66

Ceoassist.html

Embeds ceoassist.swf so it can be rendered within a Web browser.

1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4 5 6 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 10 <head>11 <title>Adding Flash to your Web site</title>12 </head>13 14 <body>15 16 17 18 19 20 21 22 <object classid = 23 "clsid:D27CDB6E-AE6D-11cf-96B8-4445540000" 24 codebase = "http://active.macromedia.com/flash5/cabs25 /swflash.cab#version=5,0,0,0">26 <param name = "Movie" value = "ceoassist.swf" />27 28 29 30 31 32

object element used to embed a Macromedia Flash movie for IE. Calls ActiveX control.

URL of rendering mechanism specified by the classid attribute codebase attribute is base path for URL specified by classid attribute

2001 Prentice Hall, Inc.All rights reserved.

Outline67

Ceoassist.html

33 <embed src = "ceoassist.swf" plug-inspage = 34 "http://www.macromedia.com/shockwave/download/35 index.cgi?P1_Prod_Version=ShockwaveFlash">36 </embed>37 38 <noembed> 39 This Web site contains the CEO Assistant 1.0 40 Flash movie. You must have the Flash Player 41 plug-in to view the Flash movie.42 </noembed> 43 44 </object>45 46 </body>47 </html>

embed element calls Netscape plug-in. Must be within <object> tags

PLUGINSPACE tells user where to get Netscape plugin for the Macromedia Flash Player if it is not already installed

noembed element contains alternative content for users who cannot view the Macromedia Flash movie


68

19.6 Creating Special Effects with Macromedia Flash

• Advanced Macromedia Flash techniques– Importing bitmaps

– Masking

– Shape tweening

– Hyperlinking

– Triggered animations

– Preloading animation


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


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


71


anchor

Fig. 19.34 Resizing an image with the move tool scale option. (Courtesy of Macromedia, Inc.)


72


• 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


73


• 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


74


Rainbow gradient fill

No stroke

Fig. 19.35 Creating the Circle graphic. (Courtesy of Macromedia, Inc.)


75


• 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.


76


Masking layer

Maskedlayer

Locked for editing

Fig. 19.36 Creating a mask layer. (Courtesy of Macromedia, Inc.)


77


Fig. 19.37 Completed banner.


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


79


Line-spacingadjustment

Right justify

Fig. 19.38 Adjusting the line spacing with the Paragraph panel. (Courtesy of Macromedia, Inc.)


80


• 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


81

19.6.3 Adding Online Help to FormsFig. 19.39 Creating a rectangle with rounded corners. (Courtesy of Macromedia.)


82

19.6.3 Adding Online Help to FormsFig. 19.40 Creating multiple instances of a symbol with the Library panel. (Courtesy of Macromedia, Inc.)


83



• 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


84



• 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


85


Center alignmentRegistration selection

Fig. 19.41 Centering an image on the stage with the Info panel. (Courtesy of Macromedia, Inc.)

Fig. 19.42 Creating a shape tween. (Courtesy of Macromedia, Inc.)


86



• 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


87

19.6.3 Adding Online Help to FormsFig. 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.)


88

19.6.3 Adding Online Help to FormsFig. 19.45 Duplicating movie clip symbols with the Library panel. (Courtesy of Macromedia, Inc.)

Current symbol

Symbols to edit

Edit scene Edit symbols


89



• 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


90


Deleting a letter from each subsequent frame

Frames for animation

Fig. 19.46 Creating a frame-by-frame animation. (Courtesy of Macromedia, Inc.)


91



• Place movie clip symbols in parent movie in correct frame (2,3 or 4) so that animation plays when user presses help button


92

19.6.3 Adding Online Help to FormsFig. 19.47 Bug2Bug.com help form. (Courtesy of Macromedia, Inc.)


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


94

19.7 Creating a Web-Site IntroductionFig. 19.48 Creating a rotating object with the motion tween Rotate option. (Courtesy of Macromedia, Inc.)

Fig. 19.49 Inserted movie clips.

TimesRotate


95


• 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


96


Fill typeGradient range

Gradient preview

Inner color

Gradient color swatchOuter color

Save gradient

Fig. 19.50 Changing gradient colors with the Fill panel. (Courtesy of Macromedia, Inc.)

Click and drag to remove a color

Resulting gradient

Fig. 19.51 Adding an intermediate color to a gradient. (Courtesy of Macromedia, Inc.)


97


• 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


98


• 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” );}


99


• 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


100


• 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


101


Hit stateUp state

Fig. 19.52 Defining a button’s hit area.

Rotating counter-clockwise

Text hyper-linked buttons

Fig. 19.53 Creating an animation to preload images.


102

19.8 ActionScriptAction Description

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.


103

19.8 ActionScript

Action Description

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.

Documents

2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 19 - Macromedia Flash: Building Interactive Animations Outline 19.1 Introduction 19.2 Flash Movie