OVERVIEW

1
(No Transcript)
2
Project Objectives
OVERVIEW

• 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

3
Project Objectives (continued)
OVERVIEW

• Add sound and adjust sound properties
• Apply graphic filters
• Create and modify buttons
• Add ActionScript to buttons for navigation

4
Project Objectives (continued)
OVERVIEW

• 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

5
Overview
OVERVIEW

• Digital storytelling online narratives
• Some 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

6
The Assignment
INTRODUCTION

• 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

7
Digital Documentary Design Document
INTRODUCTION

• Review project design document
• Note elements needed for start-up

8
INTRODUCTION
FIGURE 1 Design document
9
Project Storyboards
INTRODUCTION

• Review project storyboard
• Note elements needed for start-up

10
INTRODUCTION
FIGURE 2 Storyboard
11
Project 2 Lessons
INTRODUCTION

• Lesson 1 Preparing the Timeline and Stage for
  New Content
• Lesson 2 Importing and Working with Bitmap
  Graphics
• Lesson 3 Creating Film-Style Effects

12
Project 2 Lessons (continued)
INTRODUCTION

• Lesson 4 Working with Sound
• Lesson 5 Creating Titles by Using Text and
  Graphic Filters
• Lesson 6 Adding Navigation Elements

13
Project 2 Lessons (continued)
INTRODUCTION

• Lesson 7 Adding Buttons for Navigation
• Lesson 8 Testing and Revising a Flash Document
• Lesson 9 Improving Accessibility and Usability

14
Lesson 1 Objectives
LESSON 1

• Create and save a new document
• Turn rulers on and off
• Set guides for positioning content
• Add frames to extend the Timeline

15
Lesson 1 Introduction
LESSON 1

• Setup Paradise Beach Boardwalk movie
• Set document properties
• Extend the Timeline
• Create guides for positioning objects
• Document properties in storyboard
• Stage size
• Frame rate
• Estimated duration of the movie

16
Opening a New Document and Setting Properties
LESSON 1

• 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

17
LESSON 1
FIGURE 1-2 Storyboard
18
Viewing Rulers and Setting Guides
LESSON 1

• Purposes of rulers and guides
• Identifying boundaries of Stage
• Precisely positioning objects
• Overview of tasks
• Check Rulers, Guides on View menu
• Do View-gtGuides-gtEdit Guides
• Check Show guides and Snap to guides
• Create vertical and horizontal guides
• Drag guides from left and top ruler regions

19
LESSON 1
FIGURE 1-7 Guides identify the top, bottom,
left, and right edges of the Stage
20
Extending the Timeline
LESSON 1

• 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

21
LESSON 1
FIGURE 1-8 Extending the Timeline to frame 811
22
Lesson 2 Objectives
LESSON 2

• Import bitmap images
• Add bitmap images to the Stage
• Convert a bitmap to a vector by using Trace
  Bitmap
• Organize the document by using folders

23
Lesson 2 Introduction
LESSON 2

• Optimize bitmaps before importing
• Use 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

24
Importing Bitmap Images
LESSON 2

• 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

25
LESSON 2
FIGURE 2-2 Library panel
26
Organizing the Library Panel with Folders
LESSON 2

• 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

27
Adding Bitmap Images to the Stage
LESSON 2

• 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

28
Converting a Bitmap to a Vector by Using Trace
Bitmap
LESSON 2

• 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

29
LESSON 2
FIGURE 2-8 Trace bitmap dialog box
30
LESSON 2
FIGURE 2-9 Traced bitmap
31
Organizing the Timeline with Layer Folders
LESSON 2

• 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

32
Lesson 3 Objectives
LESSON 3

• Create a variety of film-style transitions
  between images
• Simulate camera moves

33
Lesson 3 Introduction
LESSON 3

• Tell Paradise Beach Boardwalk story
• Set 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

34
Dissolving Between Images
LESSON 3

• 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

35
LESSON 3
FIGURE 3-5 The boardwalk photo appears in frame
10 as the title screen begins to fade
36
Dissolving Between Images (continued)
LESSON 3

• 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

37
LESSON 3
FIGURE 3-9 The seaside photo appears in frame 64
as the boardwalk photo begins to fade
38
Using a Color Fade to Indicate Passage of Time
LESSON 3

• 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

39
LESSON 3
FIGURE 3-17 The horses photo is centered on the
Stage
40
LESSON 3
FIGURE 3-18 The horses photo appears at frame
235 as the horses_bw photo fades
41
Creating Camera Pans, Tilts, and Zooms
LESSON 3

• 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

42
LESSON 3
FIGURE 3-22 The black horses photo is centered
vertically and aligned with the right edge of the
Stage
43
Using Wipe Transitions to Indicate Change
LESSON 3

• 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

44
LESSON 3
FIGURE 3-28 Starting position of the wipe
transition
45
Using Transitions to Set the Pace of the Story
LESSON 3

• 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

46
Simulating a Moving Camera
LESSON 3

• 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

47
LESSON 3
FIGURE 3-33 Storyboard
48
Creating a Dip to Black Transition to Indicate
Change
LESSON 3

• 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

49
LESSON 3
FIGURE 3-42 The ferris wheel will fade in from
black between frames 515 and 523
50
Creating the Conclusion
LESSON 3

• 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

51
LESSON 3
FIGURE 3-48 Traced bitmap version of the
coaster_04 image
52
LESSON 3
FIGURE 3-49 The last roller coaster will appear
as the candy begins to fade
53
Lesson 4 Objectives
LESSON 4

• Import sound to the document library
• Add sound to the Timeline
• Edit sound properties
• Control sound with ActionScript

54
Lesson 4 Introduction
LESSON 4

• Importance of sound
• Adds 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

55
Importing Sound to the Document Library
LESSON 4

• 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

56
Adding Narration to the Timeline
LESSON 4

• 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

57
LESSON 4
FIGURE 4-5 A sound is represented by an audio
waveform
58
Adding Music and Sound Effects
LESSON 4

• 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

59
Adjusting Audio Levels and Fading Sound
LESSON 4

• 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

60
LESSON 4
FIGURE 4-12 Positioning markers in the Edit
Envelope dialog box
61
Adjusting Audio Compression Settings
LESSON 4

• 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

62
Controlling Sound with ActionScript
LESSON 4

• 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-gtTimeline Control
• Add stopAllSounds to script pane

63
Lesson 5 Objectives
LESSON 5

• Create and format titles
• Apply graphic filters to text
• Animate text with graphic filters

64
Lesson 5 Introduction
LESSON 5

• Paradise Beach Boardwalk logo
• Part 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

65
Creating and Formatting the Welcome Title
LESSON 5

• 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

66
Applying Graphic Filters
LESSON 5

• 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-gt Drop Shadow
• Apply settings
• Ensure shadow strength is set to 36

67
Animating the Welcome Title
LESSON 5

• 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

68
Adding the Logo
LESSON 5

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

69
Lesson 6 Objectives
LESSON 6

• Draw control panel elements
• Use animation to provide visual feedback to the
  viewer

70
Lesson 6 Introduction
LESSON 6

• Five parts of navigation
• welcome 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

71
Creating a Background for the Navigation Bar
LESSON 6

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

72
LESSON 6
FIGURE 6-4 Positioning the rectangle by using
the Property inspector
73
Providing Visual Feedback for Navigation
LESSON 6

• 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
• 64 - 73, 199 - 208, 343 - 352, 505 - 514, 703 -
  712

74
LESSON 6
FIGURE 6-17 The moving ball identifies the
current chapter
75
Lesson 7 Objectives
LESSON 7

• Create button symbols
• Duplicate and modify button symbols
• Add frame labels for navigation
• Control buttons and the Timeline with
  ActionScript

76
Lesson 7 Introduction
LESSON 7

• Buttons perform actions based on event
• Four 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

77
LESSON 7
FIGURE 7-1 Sample button states
78
Creating Button Symbols
LESSON 7

• 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

79
LESSON 7
FIGURE 7-10 The Over state defines what the
button looks like when rolling over the button
80
LESSON 7
FIGURE 7-13 The button text should be size 7 and
as close to the button as possible
81
Duplicating and Modifying Button Symbols
LESSON 7

• 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

82
Previewing Buttons on the Stage
LESSON 7

• 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

83
LESSON 7
FIGURE 7-17 Main control buttons positioned on
the Stage
84
Creating Invisible Buttons
LESSON 7

• 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

85
LESSON 7
FIGURE 7-25 When the viewer rolls over a chapter
title, a thin underline appears
86
Adding Frame Labels for Navigation
LESSON 7

• 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

87
Controlling Buttons and the Timeline with
ActionScript
LESSON 7

• 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

88
LESSON 7
FIGURE 7-29 Adding the on action to the script
pane
89
LESSON 7
FIGURE 7-32 Completed ActionScript for the Play
button
90
Lesson 8 Objectives
LESSON 8

• Preview a Flash document in a Web browser
• Test download performance of a Flash document
• Create and apply a mask layer

91
Lesson 8 Introduction
LESSON 8

• Paradise Beach Boardwalk movie
• Available as link on clients 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

92
Testing Playback in a Browser
LESSON 8

• 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

93
Testing Download Performance
LESSON 8

• Connection speeds anticipated
• 128 Kilobytes per second (Kbps)
• Overview of tasks
• Open Control menu
• Click Test Movie to create SWF file
• Navigate to View-gtDownload Settings
• Enter DSL (32.6 KB/s) to test on slower system
• Click Simulate Download on View menu
• Track download with Bandwidth Profiler

94
LESSON 8
FIGURE 8-1 Selecting an Internet connection
speed for download test
95
Creating and Applying a Mask Layer
LESSON 8

• 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

96
LESSON 8
FIGURE 8-3 Aligning the mask shape to the center
of the Stage
97
LESSON 8
FIGURE 8-6 All layers in the Images Titles
folder are masked
98
Lesson 9 Objectives
LESSON 9

• Add captions for audio narration
• Insert hints for navigation
• Expose and hide content for screen readers
• Add scenes to a Flash document.
• Create a preloader

99
Lesson 9 Introduction
LESSON 9

• Paradise Beach Boardwalk movie
• Functions 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

100
Adding Captions
LESSON 9

• 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

101
Adding an Onscreen Hint for Navigation
LESSON 9

• 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

102
Exposing Content to Screen Readers
LESSON 9

• 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

103
LESSON 9
FIGURE 9-8 Accessibility panel for Play button
104
Hiding Objects from Screen Readers
LESSON 9

• 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

105
LESSON 9
FIGURE 9-10 Hiding an instance of the welcome
title from screen readers
106
Creating a Preloader
LESSON 9

• 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

107
LESSON 9
FIGURE 9-14 Loading message
108
LESSON 9
FIGURE 9-17 Completed ActionScript for the
preloader
109
Summarizing Project 2
SUMMARY

• A digital documentary was produced
• Guides design document and storyboard
• Film-style techniques were developed
• User-friendly navigation was created
• Document was made accessible