1

2 Project Objectives Use guides and rulers for precise page layoutOVERVIEW Project Objectives Use guides and rulers for precise page layout Import bitmap images Convert a bitmap image to a vector drawing Create film-style effects by using motion tweens Macromedia Studio Step-by-Step

3 Project Objectives (continued)OVERVIEW Project Objectives (continued) Add sound and adjust sound properties Apply graphic filters Create and modify buttons Add ActionScript to buttons for navigation Macromedia Studio Step-by-Step

4 Project Objectives (continued)OVERVIEW Project Objectives (continued) Organize a Flash document by using folders Test the performance and usability of a Flash document Create and apply a mask Make rich media content accessible Macromedia Studio Step-by-Step

5 Overview Digital storytelling: online narrativesSome uses for digital stories Provide information Sell products Digital stories are like films Flash features supporting digital stories User controls, such as play and rewind Accessibility for broad participation Macromedia Studio Step-by-Step

6 The Assignment Produce an online documentaryINTRODUCTION The Assignment Produce an online documentary Subject: an amusement park Use design document/storyboard to: Set document properties Organize document elements Import and modify photographs Create camera moves and transitions Add a logo and welcome title screen Create navigation elements Macromedia Studio Step-by-Step

7 Digital Documentary Design DocumentINTRODUCTION Digital Documentary Design Document Review project design document Note elements needed for start-up Macromedia Studio Step-by-Step

8 FIGURE 1: Design documentINTRODUCTION FIGURE 1: Design document Macromedia Studio Step-by-Step

9 Project Storyboards Review project storyboardINTRODUCTION Project Storyboards Review project storyboard Note elements needed for start-up Macromedia Studio Step-by-Step

10 INTRODUCTION FIGURE 2: Storyboard Macromedia Studio Step-by-Step

11 INTRODUCTION Project 2 Lessons Lesson 1: Preparing the Timeline and Stage for New Content Lesson 2: Importing and Working with Bitmap Graphics Lesson 3: Creating Film-Style Effects Macromedia Studio Step-by-Step

12 Project 2 Lessons (continued)INTRODUCTION Project 2 Lessons (continued) Lesson 4: Working with Sound Lesson 5: Creating Titles by Using Text and Graphic Filters Lesson 6: Adding Navigation Elements Macromedia Studio Step-by-Step

13 Project 2 Lessons (continued)INTRODUCTION Project 2 Lessons (continued) Lesson 7: Adding Buttons for Navigation Lesson 8: Testing and Revising a Flash Document Lesson 9: Improving Accessibility and Usability Macromedia Studio Step-by-Step

14 Lesson 1 Objectives Create and save a new documentTurn rulers on and off Set guides for positioning content Add frames to extend the Timeline Macromedia Studio Step-by-Step

15 Lesson 1 Introduction Setup Paradise Beach Boardwalk movieSet document properties Extend the Timeline Create guides for positioning objects Document properties in storyboard Stage size Frame rate Estimated duration of the movie Macromedia Studio Step-by-Step

16 Opening a New Document and Setting PropertiesLESSON 1 Opening a New Document and Setting Properties Overview of tasks Open a new Flash document Set document properties Example: Background color is blue (#336699) Use other values shown in Figure 1-2 Note increase in frame rate to 18 fps Accommodated by most computers Provides for smooth animation and effects Macromedia Studio Step-by-Step

17 LESSON 1 FIGURE 1-2: Storyboard Macromedia Studio Step-by-Step

18 Viewing Rulers and Setting GuidesLESSON 1 Viewing Rulers and Setting Guides Purposes of rulers and guides Identifying boundaries of Stage Precisely positioning objects Overview of tasks Check Rulers, Guides on View menu Do View->Guides->Edit Guides Check Show guides and Snap to guides Create vertical and horizontal guides Drag guides from left and top ruler regions Macromedia Studio Step-by-Step

19 LESSON 1 FIGURE 1-7: Guides identify the top, bottom, left, and right edges of the Stage Macromedia Studio Step-by-Step

20 Extending the TimelineLESSON 1 Extending the Timeline Movie length: about 45 seconds Add frames needed to play movie Frame no. = 18 fps x 45 s = 810 frames Overview of tasks Scroll on Timeline to furthest right position Insert a frame on the Timeline Drag the frame to frame 811 Accounts for playhead starting at frame 1 Macromedia Studio Step-by-Step

21 FIGURE 1-8: Extending the Timeline to frame 811LESSON 1 FIGURE 1-8: Extending the Timeline to frame 811 Macromedia Studio Step-by-Step

22 Lesson 2 Objectives Import bitmap imagesAdd bitmap images to the Stage Convert a bitmap to a vector by using Trace Bitmap Organize the document by using folders Macromedia Studio Step-by-Step

23 Lesson 2 Introduction Optimize bitmaps before importingUse Macromedia Fireworks Use Trace Bitmap to manipulate bitmap Lesson tasks Import collection of photographs Paradise Beach Boardwalk attractions Create a background for the opening title Trace a copy of the photograph Macromedia Studio Step-by-Step

24 Importing Bitmap ImagesLESSON 2 Importing Bitmap Images Import a series of photographs Photos have been prepared before import Storyboard provided guidelines Overview of tasks Open the Import to Library dialog box Navigate to the project Photos folder Select and add the 11 image files Macromedia Studio Step-by-Step

25 FIGURE 2-2: Library panelLESSON 2 FIGURE 2-2: Library panel Macromedia Studio Step-by-Step

26 Organizing the Library Panel with FoldersLESSON 2 Organizing the Library Panel with Folders Organize the document library Sort objects into related folders Overview of tasks Go to Library panel Click the New Folder button Key Bitmap Images as folder name Drag imported images into the folder Macromedia Studio Step-by-Step

27 Adding Bitmap Images to the StageLESSON 2 Adding Bitmap Images to the Stage Start of Paradise Beach Boardwalk Long (distant) shot of the amusement park Overview of tasks Rename Layer 1 to "boardwalk“ Drag copy of boardwalk to Stage (frame 1) Center photo horizontally and vertically Macromedia Studio Step-by-Step

28 Converting a Bitmap to a Vector by Using Trace BitmapLESSON 2 Converting a Bitmap to a Vector by Using Trace Bitmap Background for the opening title screen Traced version of boardwalk (a vector) Movie transitions from vector to bitmap Overview of tasks Copy photo on frame 1 of boardwalk layer Add a new layer above, title screen Paste image in place on frame 1 Apply Trace Bitmap to copied image Macromedia Studio Step-by-Step

29 FIGURE 2-8: Trace bitmap dialog boxLESSON 2 FIGURE 2-8: Trace bitmap dialog box Macromedia Studio Step-by-Step

30 FIGURE 2-9: Traced bitmapLESSON 2 FIGURE 2-9: Traced bitmap Macromedia Studio Step-by-Step

31 Organizing the Timeline with Layer FoldersLESSON 2 Organizing the Timeline with Layer Folders Use Paradise Beach Boardwalk layers Create folders for various components Images and titles Sounds Control elements in separate Overview of tasks Click title screen layer on Timeline Insert a new folder, Images & Titles Macromedia Studio Step-by-Step

32 LESSON 3 Lesson 3 Objectives Create a variety of film-style transitions between images Simulate camera moves Macromedia Studio Step-by-Step

33 Lesson 3 Introduction Tell Paradise Beach Boardwalk story Lesson tasksSet the pace of a movie Indicate the passage of time Indicate changes in the story Lesson tasks Implement different transitions Dissolves, color fades, and wipes Moving camera simulation Panning, tilting, and zooming Fading to black Macromedia Studio Step-by-Step

34 Dissolving Between ImagesLESSON 3 Dissolving Between Images Dissolve transition (cross fade) One image fades in, another fades out Goal 1: transition from vector to bitmap Overview of tasks Convert traced image to symbol Create motion tween (frame 10 to 46) Alpha value on frame 46 is changed to 0 Go to boardwalk layer Convert original bitmap to a symbol Drag keyframe from frame 1 to 10 Macromedia Studio Step-by-Step

35 LESSON 3 FIGURE 3-5: The boardwalk photo appears in frame 10 as the title screen begins to fade Macromedia Studio Step-by-Step

36 Dissolving Between Images (continued)LESSON 3 Dissolving Between Images (continued) Goal 2: create another dissolve Transition: introduction to seaside photo Overview of tasks Go to boardwalk layer Create fade out from frames 64 to 73 Add layer below boardwalk, “seaside” Fade seaside image from frames 64 to 74 Fade out seaside image from 199 to 208 Macromedia Studio Step-by-Step

37 LESSON 3 FIGURE 3-9: The seaside photo appears in frame 64 as the boardwalk photo begins to fade Macromedia Studio Step-by-Step

38 Using a Color Fade to Indicate Passage of TimeLESSON 3 Using a Color Fade to Indicate Passage of Time Dissolve between two versions of photo Overview of tasks Add "horses bw" layer below seaside layer Fade in horses_bw from 199 to 209 Fade out horses_bw from 235 to 244 Add “horses color” layer below horses bw Fade in color image between 235 and 244 Fade out horses between 271 and 281 Macromedia Studio Step-by-Step

39 FIGURE 3-17: The horses photo is centered on the StageLESSON 3 FIGURE 3-17: The horses photo is centered on the Stage Macromedia Studio Step-by-Step

40 LESSON 3 FIGURE 3-18: The horses photo appears at frame 235 as the horses_bw photo fades Macromedia Studio Step-by-Step

41 Creating Camera Pans, Tilts, and ZoomsLESSON 3 Creating Camera Pans, Tilts, and Zooms Camera moves manipulate image view Panning from left to right Tilting the camera up and down vertically Zooming in and out Overview of tasks Create “black horses” layer below horses Fade in black_horses from 217 to 282 Go to frame 325, change width to 550 Tween from frame 289 to 325 for zoom out Macromedia Studio Step-by-Step

42 LESSON 3 FIGURE 3-22: The black horses photo is centered vertically and aligned with the right edge of the Stage Macromedia Studio Step-by-Step

43 Using Wipe Transitions to Indicate ChangeLESSON 3 Using Wipe Transitions to Indicate Change Wipe transition: image slides into view Paradise Beach Boardwalk wipe 1902 Roller coaster wipes 1845 carousel Overview of tasks Create coaster 1 layer Add instance of coaster_01 at frame 343 Rotate photo and reposition at frame 352 Create motion tween from 343 and 352 Macromedia Studio Step-by-Step

44 FIGURE 3-28: Starting position of the wipe transitionLESSON 3 FIGURE 3-28: Starting position of the wipe transition Macromedia Studio Step-by-Step

45 Using Transitions to Set the Pace of the StoryLESSON 3 Using Transitions to Set the Pace of the Story Mix transitions to vary mood and pacing Use cut for quick scene change Example: link three roller coaster images Overview of tasks Insert new layers, coaster 2 and coaster 3 Add coaster_02 at frame 397 of coaster 2 Add coaster_03 at frame 443 of coaster 3 Macromedia Studio Step-by-Step

46 Simulating a Moving CameraLESSON 3 Simulating a Moving Camera Goal: ride on virtual roller coaster Overview of tasks Go to frame 442 of coaster 2 layer Align top edge of photo to edge of Stage Create tween from 397 and 442 for climb Go to frame 496 of coaster 3 layer Rotate image slightly, select frame 443 Reduce image size to 60%, align to bottom Create tween from 443 to 496 for descent Macromedia Studio Step-by-Step

47 LESSON 3 FIGURE 3-33: Storyboard Macromedia Studio Step-by-Step

48 Creating a Dip to Black Transition to Indicate ChangeLESSON 3 Creating a Dip to Black Transition to Indicate Change Dip cues audience to scene change Use dip to black for final introduction Overview of tasks Go to coaster 3 layer Change brightness at frame 514 to -100% Create motion tween from 496 to 514 Add ferris wheel layer, insert ferris image Change brightness at 515 to -100% Fade in ferris wheel from 515 to 523 Macromedia Studio Step-by-Step

49 LESSON 3 FIGURE 3-42: The ferris wheel will fade in from black between frames 515 and 523 Macromedia Studio Step-by-Step

50 Creating the ConclusionLESSON 3 Creating the Conclusion Use dissolves describing modern park End story on traced bitmap of park Overview of tasks Fade ferris image from 568 to 577 Insert candy and coaster 4 layers Fade in candy image from 568 to 577 Fade out candy image from 667 and 676 Insert coaster_04 image, convert to vector Fade in coaster_04 from 667 to 677 Dip to black between 721 and 757 Macromedia Studio Step-by-Step

51 FIGURE 3-48: Traced bitmap version of the coaster_04 imageLESSON 3 FIGURE 3-48: Traced bitmap version of the coaster_04 image Macromedia Studio Step-by-Step

52 LESSON 3 FIGURE 3-49: The last roller coaster will appear as the candy begins to fade Macromedia Studio Step-by-Step

53 Lesson 4 Objectives Import sound to the document libraryAdd sound to the Timeline Edit sound properties Control sound with ActionScript Macromedia Studio Step-by-Step

54 Lesson 4 Introduction Importance of soundAdds drama Stirs emotions Improves communication Add sound to Timeline or buttons Lesson tasks Narrate Paradise Beach Boardwalk movie Re-create ambient sounds Add carousel music Macromedia Studio Step-by-Step

55 Importing Sound to the Document LibraryLESSON 4 Importing Sound to the Document Library Flash supports many sound formats Examples: WAV and MP3 7 sound files to be added to project Overview of tasks Open the Import to Library dialog box Navigate to the Sounds folder Select seven files for import Macromedia Studio Step-by-Step

56 Adding Narration to the TimelineLESSON 4 Adding Narration to the Timeline Periods: 1845, 1902, 1924, Today Four audio clips match periods Overview of tasks Insert Sound Layer Folder, add “narration” Drag 1845.wave to frame 73 Click Stream from Sync pop-up menu Select 1902.wav for frame 208 Select 1924.wav for frame 352 Select today.wav for frame 514 Macromedia Studio Step-by-Step

57 FIGURE 4-5: A sound is represented by an audio waveformLESSON 4 FIGURE 4-5: A sound is represented by an audio waveform Macromedia Studio Step-by-Step

58 Adding Music and Sound EffectsLESSON 4 Adding Music and Sound Effects Sounds that bring boardwalk to life Carousel music Ambient sounds; e.g., roller coaster noise Overview of tasks Add music and sound fx layers Add files to appropriate keyframes Frame 11 on music layer: carousel.wav Frame 352 on sound fx layer : coaster1.wav Frame 658 on sound fx layer. coaster2.wav Macromedia Studio Step-by-Step

59 Adjusting Audio Levels and Fading SoundLESSON 4 Adjusting Audio Levels and Fading Sound Balance overlapping sounds Fade out music before narration Fade out roller coaster before dip Overview of tasks Click 11 on music layer, Edit on inspector Select Frames in Edit Envelope dialog box Drag two markers from frame 65 to 90 Go to frame 352 on sound fx layer Select Fade out from Effect menu Macromedia Studio Step-by-Step

60 FIGURE 4-12: Positioning markers in the Edit Envelope dialog boxLESSON 4 FIGURE 4-12: Positioning markers in the Edit Envelope dialog box Macromedia Studio Step-by-Step

61 Adjusting Audio Compression SettingsLESSON 4 Adjusting Audio Compression Settings Balance sound quality against file size Adjust the audio compression settings Overview of tasks Open the File menu Click Publish Settings Select Flash tab, click Set Select MP3 on Compression pop-up menu Select 56 kbps on Bit rate pop-up menu Macromedia Studio Step-by-Step

62 Controlling Sound with ActionScriptLESSON 4 Controlling Sound with ActionScript Avoid overlap of event with new sound Goal: add a stopAllSounds action Overview of tasks Add “action” layer above Sounds layer At keyframe 10, expand Actions panel Go to Global Functions->Timeline Control Add stopAllSounds to script pane Macromedia Studio Step-by-Step

63 Lesson 5 Objectives Create and format titlesApply graphic filters to text Animate text with graphic filters Macromedia Studio Step-by-Step

64 Lesson 5 Introduction Paradise Beach Boardwalk logo Lesson tasksPart of welcome title Lesson tasks Combine logo and text into movie clip symbol Add a drop shadow Animate movie clip Add persistent instance of logo Macromedia Studio Step-by-Step

65 Creating and Formatting the Welcome TitleLESSON 5 Creating and Formatting the Welcome Title Welcome title is over traced bitmap Overview of tasks Import pb_logo.swf file Insert “welcome title” layer Insert movie clip symbol, welcome_title Drag logo onto Stage and add text Add welcome_title to the Stage Macromedia Studio Step-by-Step

66 Applying Graphic FiltersLESSON 5 Applying Graphic Filters Drop shadow is a graphic filter Apply drop shadow to welcome_title Overview of tasks Select welcome title on Stage Click Filters on Property inspector Click Add Filter-> Drop Shadow Apply settings Ensure shadow strength is set to 36% Macromedia Studio Step-by-Step

67 Animating the Welcome TitleLESSON 5 Animating the Welcome Title Title moves from left to right Overview of tasks Go to welcome title layer Insert keyframes at frames 10 and 19 Drag instance of welcome_title to frame 1 Create two motion tweens: 1-10, 10-19 Add stop action to frame 10 on actions layer Macromedia Studio Step-by-Step

68 Adding the Logo Events following click of Play buttonLESSON 5 Adding the Logo Events following click of Play button Movie begins Welcome title moves out of view Static logo then appears Overview of tasks Insert “logo” layer, keyframe at frame 20 Drag instance of pb_logo.swf to Stage Reduce size to 60%, set (X, Y) to (20, 312) Macromedia Studio Step-by-Step

69 Lesson 6 Objectives Draw control panel elementsUse animation to provide visual feedback to the viewer Macromedia Studio Step-by-Step

70 Lesson 6 Introduction Five parts of navigation: Lesson taskswelcome title, 1845, 1902, 1924, Today Lesson tasks Create the historic timeline for movie Ensure current chapter is highlighted Enable ball to slide along historic timeline Macromedia Studio Step-by-Step

71 Creating a Background for the Navigation BarLESSON 6 Creating a Background for the Navigation Bar Make control panel semitransparent Overview of tasks Add “background” layer Click frame 1 on background layer Add black rectangle, 550 x 68 Set Alpha value for color to 45% Position rectangle to (0, 268) Macromedia Studio Step-by-Step

72 FIGURE 6-4: Positioning the rectangle by using the Property inspectorLESSON 6 FIGURE 6-4: Positioning the rectangle by using the Property inspector Macromedia Studio Step-by-Step

73 Providing Visual Feedback for NavigationLESSON 6 Providing Visual Feedback for Navigation Three elements provide visual feedback Overview of tasks Add folder named controls Draw historical timeline for four periods Add orange/yellow highlights for periods Draw ball as white-light brown circle Create motion tweens to move ball , , , , Macromedia Studio Step-by-Step

74 FIGURE 6-17: The moving ball identifies the current chapterLESSON 6 FIGURE 6-17: The moving ball identifies the current chapter Macromedia Studio Step-by-Step

75 Lesson 7 Objectives Create button symbolsDuplicate and modify button symbols Add frame labels for navigation Control buttons and the Timeline with ActionScript Macromedia Studio Step-by-Step

76 Lesson 7 Introduction Buttons perform actions based on eventFour button states: Up, Over, Down, Hit Creating a button Open new button symbol Add graphics and/or text to each state Preview instance on Stage Use ActionScript to make button react Lesson task: create navigation controls Macromedia Studio Step-by-Step

77 FIGURE 7-1: Sample button statesLESSON 7 FIGURE 7-1: Sample button states Macromedia Studio Step-by-Step

78 Creating Button SymbolsLESSON 7 Creating Button Symbols Create Play button Use Play as template for Pause, Rewind Overview of tasks Insert a new button symbol named play Rename new layer, “button background” Draw dark gray rectangle, 24 x 20 Insert keyframe in Hit state Add icons to button for Over, Down states Add the text Play above the button Macromedia Studio Step-by-Step

79 LESSON 7 FIGURE 7-10: The Over state defines what the button looks like when rolling over the button Macromedia Studio Step-by-Step

80 LESSON 7 FIGURE 7-13: The button text should be size 7 and as close to the button as possible Macromedia Studio Step-by-Step

81 Duplicating and Modifying Button SymbolsLESSON 7 Duplicating and Modifying Button Symbols Duplicate Play to make Pause, Rewind Overview of tasks Click play button symbol Select Duplicate for Duplicate Symbol box Name duplicated button "pause" Revise descriptive text, swap icons Follow similar procedure for Rewind Flip icons so they point to the left Macromedia Studio Step-by-Step

82 Previewing Buttons on the StageLESSON 7 Previewing Buttons on the Stage Add Play, Pause, Rewind to Stage Enable buttons to preview four states Overview of tasks Insert a new layer named “buttons” Click frame 1 on the buttons layer Add play, pause, rewind below TODAY Enable buttons for testing Macromedia Studio Step-by-Step

83 FIGURE 7-17: Main control buttons positioned on the StageLESSON 7 FIGURE 7-17: Main control buttons positioned on the Stage Macromedia Studio Step-by-Step

84 Creating Invisible ButtonsLESSON 7 Creating Invisible Buttons Buttons navigating movie chapters Up states are invisible Underlines appear with mouse near title Overview of tasks Create new button symbol named invisible Insert keyframes in Over and Hit states Draw yellow/orange rectangle, 100 x 25 Revise rectangle dimensions to 40 x 2 (Hit) Place invisible buttons over chapter titles Macromedia Studio Step-by-Step

85 LESSON 7 FIGURE 7-25: When the viewer rolls over a chapter title, a thin underline appears Macromedia Studio Step-by-Step

86 Adding Frame Labels for NavigationLESSON 7 Adding Frame Labels for Navigation Identify start, welcome title, chapters Simplifies button programming Overview of tasks Use Frame Label to add text in labels layer Frame 1: start Frame 10: welcome Frame 73: 1845 Frame 208: 1902 Frame 352: 1924 Frame 514: today Macromedia Studio Step-by-Step

87 Controlling Buttons and the Timeline with ActionScriptLESSON 7 Controlling Buttons and the Timeline with ActionScript Overview of tasks Select Play and expand Actions panel Program Play button Add on action by navigating from left pane Associate Play with Enter (Windows) or Return (Mac) Include play ( ) action within on action Other buttons to program Pause, Rewind, invisible chapter buttons Macromedia Studio Step-by-Step

88 FIGURE 7-29: Adding the on action to the script paneLESSON 7 FIGURE 7-29: Adding the on action to the script pane Macromedia Studio Step-by-Step

89 FIGURE 7-32: Completed ActionScript for the Play buttonLESSON 7 FIGURE 7-32: Completed ActionScript for the Play button Macromedia Studio Step-by-Step

90 Lesson 8 Objectives Preview a Flash document in a Web browserTest download performance of a Flash document Create and apply a mask layer Macromedia Studio Step-by-Step

91 Lesson 8 Introduction Paradise Beach Boardwalk movie Lesson tasksAvailable as link on client’s Web site Will launch in its own window Plays in viewer's Web browser Lesson tasks Preview the document Test the download performance Apply mask to hide content beyond Stage Macromedia Studio Step-by-Step

92 Testing Playback in a BrowserLESSON 8 Testing Playback in a Browser View Paradise Beach Boardwalk movie Overview of tasks Use Publish Preview to play movie Test document in various browsers Compare final project to design criteria Test navigation buttons, timing, transitions Macromedia Studio Step-by-Step

93 Testing Download PerformanceLESSON 8 Testing Download Performance Connection speeds anticipated 128 Kilobytes per second (Kbps) Overview of tasks Open Control menu Click Test Movie to create SWF file Navigate to View->Download Settings Enter DSL (32.6 KB/s) to test on slower system Click Simulate Download on View menu Track download with Bandwidth Profiler Macromedia Studio Step-by-Step

94 FIGURE 8-1: Selecting an Internet connection speed for download testLESSON 8 FIGURE 8-1: Selecting an Internet connection speed for download test Macromedia Studio Step-by-Step

95 Creating and Applying a Mask LayerLESSON 8 Creating and Applying a Mask Layer Hide objects extending beyond Stage Apply mask layer to crop movie Overview of tasks Create “mask” layer logo layer Draw green rectangle, 550 x 340 Align panel horizontally and vertically Select Mask option (Layers Properties) Subordinate other layers to Mask layer Macromedia Studio Step-by-Step

96 FIGURE 8-3: Aligning the mask shape to the center of the StageLESSON 8 FIGURE 8-3: Aligning the mask shape to the center of the Stage Macromedia Studio Step-by-Step

97 FIGURE 8-6: All layers in the Images & Titles folder are maskedLESSON 8 FIGURE 8-6: All layers in the Images & Titles folder are masked Macromedia Studio Step-by-Step

98 Lesson 9 Objectives Add captions for audio narrationInsert hints for navigation Expose and hide content for screen readers Add scenes to a Flash document. Create a preloader Macromedia Studio Step-by-Step

99 Lesson 9 Introduction Paradise Beach Boardwalk movie Lesson tasksFunctions with or without sound Should be accessible to screen reader Lesson tasks Add onscreen text captions Add instructions for playing movie Identify elements for screen readers Create the preloader Macromedia Studio Step-by-Step

100 Adding Captions Provide accessibility to visually impairedLESSON 9 Adding Captions Provide accessibility to visually impaired Overview of tasks Add two new layers: caption box, caption Add caption boxes and special text Frame 73: The Boardwalk dates back to 1845 Frame 208: Built in 1902, the classic carousel continues to draw visitors of ALL ages Frame 352: The wooden roller coaster, which was opened in 1924, was and still is the star attraction Frame 514: Today the Boardwalk is a popular destination. Classic rides, candy shops, carnival games, and fun for all. Fade out captions at the end of movie Macromedia Studio Step-by-Step

101 Adding an Onscreen Hint for NavigationLESSON 9 Adding an Onscreen Hint for Navigation Add instructions for the Play button Overview of tasks Go to keyframe 10 of caption layer Add text to the left of the button: “Click the PLAY button to begin” Text specifications: Arial white, size 10, Letter spacing .5 Macromedia Studio Step-by-Step

102 Exposing Content to Screen ReadersLESSON 9 Exposing Content to Screen Readers Screen reader detects certain content Examples: Play button and welcome title Overview of Tasks Open Accessibility panel, select Play Complete form (see Figure 9-8 following) Use similar procedures for Pause, Rewind Expose welcome title to screen reader Macromedia Studio Step-by-Step

103 FIGURE 9-8: Accessibility panel for Play buttonLESSON 9 FIGURE 9-8: Accessibility panel for Play button Macromedia Studio Step-by-Step

104 Hiding Objects from Screen ReadersLESSON 9 Hiding Objects from Screen Readers Objects to hide: Two instances of welcome title movie clip Invisible chapter buttons, their text labels Chapter highlights, and caption text Overview of tasks Keep Accessibility panel open Select first object to hide Deselect Make object accessible option Follow procedure for all other objects Macromedia Studio Step-by-Step

105 LESSON 9 FIGURE 9-10: Hiding an instance of the welcome title from screen readers Macromedia Studio Step-by-Step

106 Creating a Preloader Monitor download progressLESSON 9 Creating a Preloader Monitor download progress Informs viewer when can play Overview of tasks Add a new scene named preloader Stack preloader above scene 1 Add loop message text to first layer Add actions layer Add ActionScript to monitor SWF file Macromedia Studio Step-by-Step

107 FIGURE 9-14: Loading messageLESSON 9 FIGURE 9-14: Loading message Macromedia Studio Step-by-Step

108 FIGURE 9-17: Completed ActionScript for the preloaderLESSON 9 FIGURE 9-17: Completed ActionScript for the preloader Macromedia Studio Step-by-Step

109 Summarizing Project 2 A digital documentary was producedSUMMARY Summarizing Project 2 A digital documentary was produced Guides: design document and storyboard Film-style techniques were developed User-friendly navigation was created Document was made accessible Macromedia Studio Step-by-Step