1.  2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 19 - Macromedia Flash: Building Interactive Animations Outline 19.1 Introduction 19.2 Flash Movie Development 19.3 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

2.  2001 Prentice Hall, Inc. All rights reserved. 2 Chapter 19 - Macromedia® Flash™: Building Interactive Animations Outline 19.4 Creating a Projector (.exe) File With Publish 19.5 Manually Embedding a Flash Movie in a Web Page 19.6 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 19.7 Creating a Web-Site Introduction 19.8 ActionScript 19.9 Internet and World Wide Web Resources

3.  2001 Prentice Hall, Inc. All rights reserved. 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.  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_readmewww.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.  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

6.  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

7.  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.) TimelineToolboxLayers Panel windows Main menuFrames StageZoom percentagePanels

8.  2001 Prentice Hall, Inc. All rights reserved. 8 19.2 Macromedia Flash Movie Development Development Environment –Toolbox Each tool has a specific function Active tool Tool options –Change tool function

9.  2001 Prentice Hall, Inc. All rights reserved. 9 19.2 Macromedia Flash Movie Development 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 Fig. 19.2 Macromedia Flash 5 Toolbox. (Courtesy of Macromedia, Inc.)

10.  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

11.  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.) InfoTransformStrokeFillSwatchesMixer InstanceEffectFrameSoundParagraphCharacterText Options

12.  2001 Prentice Hall, Inc. All rights reserved. 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.  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

14.  2001 Prentice Hall, Inc. All rights reserved. 14 19.3 Learning Macromedia Flash with Hands-on Examples Background Color Fig. 19.4 Macromedia Flash 5 Movie Properties dialog. (Courtesy of Macromedia, Inc.) Color selection eyedropper Hexadecimal color notation New background color Fig. 19.5 Selecting a background color. (Courtesy of Macromedia, Inc.)

15.  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

16.  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

17.  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

18.  2001 Prentice Hall, Inc. All rights reserved. 18 19.3.1 Creating a Shape With the Oval Tool Stroke color Fill color Swap stroke and fill colors Default 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.  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

20.  2001 Prentice Hall, Inc. All rights reserved. 20 19.3.1 Creating a Shape With the Oval Tool Fig. 19.8Making multiple selections with the arrow tool. (Courtesy of Macromedia, Inc.) Selection width Selection height Color Cursor location Selection location Fig. 19.9 Modifying the size of a shape with the Info panel. (Courtesy of Macromedia, Inc.)

21.  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

22.  2001 Prentice Hall, Inc. All rights reserved. 22 19.3.1 Creating a Shape With the Oval Tool Gradient fills Red radial gradient fill Fig. 19.10 Choosing a gradient fill. (Courtesy of Macromedia, Inc.)

23.  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

24.  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

25.  2001 Prentice Hall, Inc. All rights reserved. 25 19.3.2 Adding Text to a Button Font Font height Font tracking Character position Linked URL BoldItalic 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.  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

27.  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

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

29.  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

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

31.  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

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

33.  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

34.  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

35.  2001 Prentice Hall, Inc. All rights reserved. 35 19.3.4 Editing Button Symbols Active symbol Return to main scene Keyframe Current frame Zoom percentage Edit symbols Button states Edit scene Fig. 19.17Modifying button states with a button’s editing stage. (Courtesy of Macromedia, Inc.)

36.  2001 Prentice Hall, Inc. All rights reserved. 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.  2001 Prentice Hall, Inc. All rights reserved. 37 19.3.5 Adding Keyframes Insert Keyframe Selected Over frame Frame options Fig. 19.18 Inserting a keyframe. (Courtesy of Macromedia, Inc.)

38.  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)www.flashkit.com –Muinar (www.sounds.muinar.com)www.sounds.muinar.com

39.  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

40.  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

41.  2001 Prentice Hall, Inc. All rights reserved. 41 19.3.6 Adding Sound to a Button Sound Sync Sound added to the Down frame Fig. 19.19 Adding sound to a button. (Courtesy of Macromedia, Inc.)

42.  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

43.  2001 Prentice Hall, Inc. All rights reserved. 43 19.3.6 Adding Sound to a Button Sound name Compression Sample Rate Preprocessing Sound clip size and compression Fig. 19.20 Optimizing sound with the Sound Properties dialog. (Courtesy of Macromedia, Inc.)

44.  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

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

46.  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

47.  2001 Prentice Hall, Inc. All rights reserved. 47 19.3.8 Adding Layers to a Movie Rename a layer Insert a new layer Delete layer Fig. 19.22 Renaming a layer. (Courtesy of Macromedia, Inc.) Left justify Center justify Left margin Indentation Right justify Full justify Right 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.  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

49.  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

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

51.  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

52.  2001 Prentice Hall, Inc. All rights reserved. 52 19.3.9 Animating Text with Tweening Basic Actions Add new item to the script Actions menu Stop action Movie Explorer Action added to a frame ActionScript window Action applied to 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.  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

54.  2001 Prentice Hall, Inc. All rights reserved. 54 19.3.10 Adding a Text Field Text type Variable name 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.  2001 Prentice Hall, Inc. All rights reserved. 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) { = “”; }

56.  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); }

57.  2001 Prentice Hall, Inc. All rights reserved. 57 19.3.11 Adding ActionScript Add action Fig. 19.31 Adding an action to a button with the Object Actions dialog. (Courtesy of Macromedia, Inc.)

58.  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 ( ) { } }

59.  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 ( ) { } else if ( ) { } else if ( ) { } else if ( ) { } }

60.  2001 Prentice Hall, Inc. All rights reserved. 60 19.3.11 Adding ActionScript Object Actions dialog, cont. –Set condition Change first 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.  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!"; } }

62.  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

63.  2001 Prentice Hall, Inc. All rights reserved. 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.

64.  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 – tag Calls Flash Player ActiveX control in IE – tag Calls Flash Player plug-in for Netscape Communicator Must be within tag

65.  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 tag –Provides alternative content to users without the plug-in –Contained within the tag –Can contain HTML or XHTML tags within it

66.  2001 Prentice Hall, Inc. All rights reserved. Outline 66 Ceoassist.html Embeds c eoassist.swf so it can be rendered within a Web browser. 1 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 9 10 11 Adding Flash to your Web site 12 13 14 15 16 17 18 19 20 21 22 <object classid = 23 "clsid:D27CDB6E-AE6D-11cf-96B8-4445540000" 24 codebase = "http://active.macromedia.com/flash5/cabs 25 /swflash.cab#version=5,0,0,0"> 26 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

67.  2001 Prentice Hall, Inc. All rights reserved. Outline 67 Ceoassist.html 33 <embed src = "ceoassist.swf" plug-inspage = 34 "http://www.macromedia.com/shockwave/download/ 35 index.cgi?P1_Prod_Version=ShockwaveFlash"> 36 37 38 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 43 44 45 46 47 embed element calls Netscape plug-in. Must be within 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.  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

69.  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

70.  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

71.  2001 Prentice Hall, Inc. All rights reserved. 71 19.6.2 Create an Advertisement Banner with Masking anchor Fig. 19.34 Resizing an image with the move tool scale option. (Courtesy of Macromedia, Inc.)

72.  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

73.  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

74.  2001 Prentice Hall, Inc. All rights reserved. 74 19.6.2 Create an Advertisement Banner with Masking Rainbow gradient fill No stroke Fig. 19.35 Creating the Circle graphic. (Courtesy of Macromedia, Inc.)

75.  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.

76.  2001 Prentice Hall, Inc. All rights reserved. 76 19.6.2 Create an Advertisement Banner with Masking Masking layer Masked layer Locked for editing Fig. 19.36 Creating a mask layer. (Courtesy of Macromedia, Inc.)

77.  2001 Prentice Hall, Inc. All rights reserved. 77 19.6.2 Create an Advertisement Banner with Masking Fig. 19.37 Completed banner.

78.  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

79.  2001 Prentice Hall, Inc. All rights reserved. 79 19.6.3 Adding Online Help to Forms Line-spacing adjustment Right justify Fig. 19.38 Adjusting the line spacing with the Paragraph panel. (Courtesy of Macromedia, Inc.)

80.  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

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

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

83.  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

84.  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

85.  2001 Prentice Hall, Inc. All rights reserved. 85 19.6.3 Adding Online Help to Forms Center alignment Registration 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.  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

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

88.  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.) Current symbol Symbols to edit Edit sceneEdit symbols

89.  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

90.  2001 Prentice Hall, Inc. All rights reserved. 90 19.6.3 Adding Online Help to Forms Deleting a letter from each subsequent frame Frames for animation Fig. 19.46 Creating a frame-by-frame animation. (Courtesy of Macromedia, Inc.)

91.  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

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

93.  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

94.  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.) Fig. 19.49 Inserted movie clips. Times Rotate

95.  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

96.  2001 Prentice Hall, Inc. All rights reserved. 96 19.7 Creating a Web-Site Introduction Fill type Gradient range Gradient preview Inner color Gradient color swatch Outer 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.  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

98.  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.comhttp://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.  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

100.  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

101.  2001 Prentice Hall, Inc. All rights reserved. 101 19.7 Creating a Web-Site Introduction Hit state Up 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.  2001 Prentice Hall, Inc. All rights reserved. 102 19.8 ActionScript

103.  2001 Prentice Hall, Inc. All rights reserved. 103 19.8 ActionScript