2. Project Objectives Encode Flash Video (FLV) files for the Web
OVERVIEW
Project Objectives
Encode Flash Video (FLV) files for the Web
Use guides to create page structure and balance
Create thumbnail buttons
Format text
Macromedia Studio Step-by-Step

3. Project Objectives (continued)
OVERVIEW
Project Objectives (continued)
Check spelling of a Flash document
Create external links
Use ActionScript to load and display content stored outside the main Flash document
Use ActionScript to display text dynamically
Macromedia Studio Step-by-Step

4. Project Objectives (continued)
OVERVIEW
Project Objectives (continued)
Expose and hide content for screen readers
Perform a technical test of a Flash document
Select publish settings and publish a document
Macromedia Studio Step-by-Step

5. Overview Video is widely used on the Internet
Flash video: an excellent teaching tool
Project scope
Use video to enhance a Web site
Add interest
Provide entertainment
Promote e-commerce
Macromedia Studio Step-by-Step

6. The Assignment Produce video gallery for surfing event
INTRODUCTION
The Assignment
Produce video gallery for surfing event
Overview of project tasks
Create Flash Video files for each clip
Publish separate SWF files for each video
Create main Flash document for gallery
Create thumbnail buttons for previews
Add and format informative text
Add a link to the client’s online store
Add onscreen directions and video captions
Macromedia Studio Step-by-Step

7. INTRODUCTION
FIGURE 1: Blue Mountain Riders Web site example showing placement of the video gallery
Macromedia Studio Step-by-Step

8. Video Gallery Design Document
INTRODUCTION
Video Gallery Design Document
Review the project design document
Note elements that help setup
Macromedia Studio Step-by-Step

9. FIGURE 2: Design document
INTRODUCTION
FIGURE 2: Design document
Macromedia Studio Step-by-Step

10. Project Storyboard Review storyboard for video gallery
INTRODUCTION
Project Storyboard
Review storyboard for video gallery
Note elements that help setup
Macromedia Studio Step-by-Step

11. INTRODUCTION
FIGURE 3: Storyboard
Macromedia Studio Step-by-Step

12. Project 3 Lessons Lesson 1: Preparing Video for the Web
INTRODUCTION
Project 3 Lessons
Lesson 1: Preparing Video for the Web
Lesson 2: Creating the Main Document for the Video Gallery
Lesson 3: Formatting Blocks of Text
Macromedia Studio Step-by-Step

13. Project 3 Lessons (continued)
INTRODUCTION
Project 3 Lessons (continued)
Lesson 4: Displaying Video Stored Outside the Flash Document
Lesson 5: Improving Accessibility and Usability
Lesson 6: Testing and Publishing the Video Gallery
Macromedia Studio Step-by-Step

14. Lesson 1 Objectives Encode Flash (FLV) video files
View the properties of the FLVPlayback component
Publish videos as SWF files
Macromedia Studio Step-by-Step

15. Lesson 1 Introduction Blue Mountain Riders Web site
Includes a video gallery
Video gallery features
Three video clips
Clips activated by thumbnail images
Lesson task
Prepare the video files for the gallery
Macromedia Studio Step-by-Step

16. Flash Video A few of the many benefits
LESSON 1
Flash Video
A few of the many benefits
Independence from third-party players
Fast downloading
Immersive and interactive experiences
Three ways to add Flash video to site
Embed video in a Flash document
Progressively download
Stream from Flash Communication Server
Macromedia Studio Step-by-Step

17. Progressive Download Method of choice in this project
LESSON 1
Progressive Download
Method of choice in this project
Important features
Flash Video (FLV) files stored externally
File plays before complete download
Overview of tasks
Encode three MOV files as FLV files
Place files in their own documents
Generate three movies
opening_day.swf, outer_reef.swf, heavy_water.swf
Macromedia Studio Step-by-Step

18. LESSON 1
FIGURE 1-1: Progressive download stores the Flash Video (FLV) files outside the main document
Macromedia Studio Step-by-Step

19. Encoding a Flash Video (FLV) File
LESSON 1
Encoding a Flash Video (FLV) File
Import MOV files into Flash document
Select properties for the video
FLV files created automatically
Overview of tasks
Set new document properties
Import opening_day.mov file
Select progressive download option
Set encoding options (see Figure 1-4)
Macromedia Studio Step-by-Step

20. FIGURE 1-4: Import Video dialog box – selecting encoding options
LESSON 1
FIGURE 1-4: Import Video dialog box – selecting encoding options
Macromedia Studio Step-by-Step

21. Publishing the Video as a SWF File
LESSON 1
Publishing the Video as a SWF File
Three buttons in the video gallery
Click button to load and play video
ActionScript must be attached
Overview of tasks
Generate SWFs for each video
Publish the SWF file (two techniques)
Publish the document
Test the movie
Macromedia Studio Step-by-Step

22. Preparing Additional Video Clips
LESSON 1
Preparing Additional Video Clips
Create two additional videos
Pairs of SWF and FLV files needed
Overview of tasks
Use Save As to create outer_reef.fla
Delete instance of FLVPlayback
Import video file named outer_reef.mov
Follow like procedure for heavy_water.fla
Import the video, heavy_water.mov
Macromedia Studio Step-by-Step

23. Lesson 2 Objectives Use guides to create page structure and balance
Create background elements
Create thumbnail buttons for selecting a video clip
Duplicate and modify thumbnail buttons
Assign instance names to buttons
Macromedia Studio Step-by-Step

24. Lesson 2 Introduction Components of video gallery Lesson tasks
Background elements and descriptions
Attributions to filmmaker and musicians
Thumbnail buttons for video selection
Lesson tasks
Set guides
Add background elements
Create thumbnail buttons
Identify and select the surfing video clips
Macromedia Studio Step-by-Step

25. Using Guides to Create Page Structure and Balance
LESSON 2
Using Guides to Create Page Structure and Balance
Guides help maintain page structure
Use guides to align objects in gallery
Overview of tasks
Open new Flash document
Set document dimensions to 500 x 380
Change the background color to dark gray
Display horizontal and vertical rulers
Add four horizontal and five vertical guides
Macromedia Studio Step-by-Step

26. Creating Background Elements
LESSON 2
Creating Background Elements
Interior of the video gallery
Rounded blue rectangular frame
Buttons, video, and captions
Still wave as a placeholder
Overview of tasks
Rename layer 1 "background“
Draw rounded blue rectangle, 440 x 300
Create a new layer, “still image”
Import wave.jpg; position and modify image
Macromedia Studio Step-by-Step

27. FIGURE 2-8: The still image is a placeholder for the video clips
LESSON 2
FIGURE 2-8: The still image is a placeholder for the video clips
Macromedia Studio Step-by-Step

28. Creating Thumbnail Buttons for Selecting Video Clips
LESSON 2
Creating Thumbnail Buttons for Selecting Video Clips
One thumbnail per video clip
Overview of tasks
Import three still images for three buttons
Create opening_day button on photo layer
Add opening_day.jpg to Stage and modify
Insert keyframe in Hit frame of photo layer
Add button_filter to filter layer; modify
Add text layer; key OPENING DAY (Up)
Macromedia Studio Step-by-Step

29. FIGURE 2-17: Position of thumbnail button text
LESSON 2
FIGURE 2-17: Position of thumbnail button text
Macromedia Studio Step-by-Step

30. Duplicating and Modifying Thumbnail Buttons
LESSON 2
Duplicating and Modifying Thumbnail Buttons
Creating additional buttons
Duplicate button
Swap still image
Replace text label
Overview of tasks
Apply Duplicate function to opening_day
Swap image for outer_reef.jpg
Change caption to OUTER REEF
Create heavy_water button in same way
Macromedia Studio Step-by-Step

31. FIGURE 2-19: Duplicate Symbol dialog box
LESSON 2
FIGURE 2-19: Duplicate Symbol dialog box
Macromedia Studio Step-by-Step

32. Adding Thumbnail Buttons to the Gallery
LESSON 2
Adding Thumbnail Buttons to the Gallery
Completing initial layout
Place copy of thumbnail on Stage
Use guides and Align panel for placement
Overview of tasks
Insert buttons layer and click frame 1
Drag three button symbols onto Stage
Position opening_day button at (45, 60)
Position other buttons as per Figure 2-24
Macromedia Studio Step-by-Step

33. FIGURE 2-24:Thumbnail buttons positioned on the Stage
LESSON 2
FIGURE 2-24:Thumbnail buttons positioned on the Stage
Macromedia Studio Step-by-Step

34. Adding Instance Names to Buttons
LESSON 2
Adding Instance Names to Buttons
Assign name to each button instance
Refer to names when using ActionScript
Overview of tasks
Go to Instance name box in inspector
Assign names for selected buttons
opening_day_bt
outer_reef_bt
heavy_water_bt
Macromedia Studio Step-by-Step

35. Lesson 3 Objectives Create flexible- and fixed-width text
Format paragraphs
Check spelling
Create external links
Macromedia Studio Step-by-Step

36. Lesson 3 Introduction Top-bottom text layer of Web site Lesson tasks
Introductory text and attributions
Lesson tasks
Create flexible-width text objects
Create fixed-width text objects
Apply paragraph formatting
Check spelling
Link text to external Web content
Macromedia Studio Step-by-Step

37. Creating Flexible- and Fixed-Width Text
LESSON 3
Creating Flexible- and Fixed-Width Text
Requirement for descriptive text
Fits between guides at 30 and 470 pixels
Use fixed-width text to contain size
Overview of tasks
Insert a new layer, top-bottom text
Key description in gray area near top
Add attribution to gray area near bottom
Macromedia Studio Step-by-Step

38. FIGURE 3-4: Fixed-width text
LESSON 3
FIGURE 3-4: Fixed-width text
Macromedia Studio Step-by-Step

39. Formatting Paragraphs of Text
LESSON 3
Formatting Paragraphs of Text
Add white space for readability
Apply formatting to an entire paragraph
Overview of tasks
Select text at the top of the gallery
Click Edit format options on inspector
Format Options dialog box opens
Change Line spacing to 3 pt
Macromedia Studio Step-by-Step

40. Checking Spelling Spell-check document before publishing
LESSON 3
Checking Spelling
Spell-check document before publishing
Specify spelling options prior to first use
Overview of tasks
Open the Text menu
Click Spelling Setup to view options
Verify dictionaries selected
Check Macromedia and American English options
Reopen Text menu
Click Check Spelling to run spell check
Macromedia Studio Step-by-Step

41. Creating External Links
LESSON 3
Creating External Links
Video gallery links to client’s online store
Overview of tasks
Create text advertising store in the top area
Convert text to button symbol, store_link
Enhance Over and Hit states
Return to Timeline, expand Actions panel
Navigate to Browser/Network, click getURL
Add parameters: Macromedia URL, _blank
Macromedia Studio Step-by-Step

42. FIGURE 3-11: Position of the store link text
LESSON 3
FIGURE 3-11: Position of the store link text
Macromedia Studio Step-by-Step

43. LESSON 3
FIGURE 3-13: Completed ActionScript linking the button to an external Web site
Macromedia Studio Step-by-Step

44. LESSON 4
Lesson 4 Objectives
Create a movie clip for loading and displaying video
Link buttons to external video by using ActionScript
Add comments to identify ActionScript
Macromedia Studio Step-by-Step

45. Lesson 4 Introduction Two basic actions in Video Gallery
Viewer clicks one of three thumbnails
One of three movies is loaded
Each SWF file has an FLVPlayback
FlVPlayback plays one of FLV files
Lesson tasks
Create video holder movie clip symbol
Add ActionScript to coordinate loading
Macromedia Studio Step-by-Step

46. Creating a Movie Clip Used to Load and Display Video
LESSON 4
Creating a Movie Clip Used to Load and Display Video
Goal: create movie clip symbol, vholder
Overview of tasks
Insert a new layer named video
Insert new movie clip symbol, vholder
Go to Timeline, drag vfholder to Stage
Position vholder at (155, 60)
Enter vholder_mc in Instance Name box
Macromedia Studio Step-by-Step

47. LESSON 4
FIGURE 4-3: The vholder movie clip symbol is represented by a small circle with a crosshair
Macromedia Studio Step-by-Step

48. Linking Buttons to External Video by Using ActionScript
LESSON 4
Linking Buttons to External Video by Using ActionScript
Overview of tasks
Insert a new layer, “actions”
Add stop action in frame 1
Insert onRelease method
Associate action with opening_day_bt
Define loading action
Adapt code for other two buttons
Macromedia Studio Step-by-Step

49. FIGURE 4-7: Adding ActionScript by using the Script pane
LESSON 4
FIGURE 4-7: Adding ActionScript by using the Script pane
Macromedia Studio Step-by-Step

50. FIGURE 4-11: Completed ActionScript for all three thumbnail buttons
LESSON 4
FIGURE 4-11: Completed ActionScript for all three thumbnail buttons
Macromedia Studio Step-by-Step

51. Adding Comments to Identify ActionScript
LESSON 4
Adding Comments to Identify ActionScript
Comments convey meaning of code
Two ways to add comments
Add two forward slashes (//) and then text
Select Comment action
Enter comment in the Script Assist pane
Overview of tasks
Add comment preceding button actions
Test movie
Macromedia Studio Step-by-Step

52. FIGURE 4-12: Comments are gray and begin with two forward slashes
LESSON 4
FIGURE 4-12: Comments are gray and begin with two forward slashes
Macromedia Studio Step-by-Step

53. Lesson 5 Objectives Create dynamic text
Use ActionScript to display onscreen directions
Use ActionScript to display video captions
Expose and hide content for screen readers
Macromedia Studio Step-by-Step

54. Lesson 5 Introduction Blue Mountain Rider's target audience
Broad, including people with disabilities
Goals: increase usability, accessibility
Lesson tasks
Expose the movie to a screen reader
Add dynamic text
Displays onscreen directions and video captions
Use ActionScript to display different text as needed
Macromedia Studio Step-by-Step

55. Creating Dynamic Text Fields
LESSON 5
Creating Dynamic Text Fields
Dynamic text displays external data
Two instances used in video gallery
Dynamic text directions to viewer
Video captions
Overview of tasks
Insert directions and captions layers
Add instructions, direction.txt., to directions
Add caption box, captions.txt, to captions
Macromedia Studio Step-by-Step

56. FIGURE 5-4: Position of the directions text
LESSON 5
FIGURE 5-4: Position of the directions text
Macromedia Studio Step-by-Step

57. LESSON 5
FIGURE 5-9: Position of the dynamic text field that displays video captions
Macromedia Studio Step-by-Step

58. Using ActionScript to Display Onscreen Directions
LESSON 5
Using ActionScript to Display Onscreen Directions
Two strings passed to directions.txt
Directions for loading a video
Message indicating video is loading
ActionScript controls display of text
Overview of tasks
Define two string variables
Assign instructions_str to directions.txt.text
Change assignment in three button actions
Macromedia Studio Step-by-Step

59. FIGURE 5-12: Variable and Value
LESSON 5
FIGURE 5-12: Variable and Value
Macromedia Studio Step-by-Step

60. FIGURE 5-14: ActionScript for all three thumbnail buttons
LESSON 5
FIGURE 5-14: ActionScript for all three thumbnail buttons
Macromedia Studio Step-by-Step

61. Using ActionScript to Display Video Captions
LESSON 5
Using ActionScript to Display Video Captions
Arrays store elements of same type
Array value identified by an index
Overview of tasks
Store three strings in array, captions_arr
Captions for the three video clips
Add assignment to each button action
captions_txt.text = captions_arr[index]
index varies from 0 to 2
Macromedia Studio Step-by-Step

62. FIGURE 5-16: Completed ActionScript for all three thumbnail buttons
LESSON 5
FIGURE 5-16: Completed ActionScript for all three thumbnail buttons
Macromedia Studio Step-by-Step

63. Exposing the Video Gallery to Screen Readers
LESSON 5
Exposing the Video Gallery to Screen Readers
Elements to identify: buttons and text
Screen reader recognizes dynamic text
Directions/captions automatically exposed
Use Accessibility panel for thumbnails
Overview of tasks
Make entire document accessible
Make each button accessible
Macromedia Studio Step-by-Step

64. Hiding Objects from Screen Readers
LESSON 5
Hiding Objects from Screen Readers
Hide vholder movie clip symbol
Spoken description not needed
Overview of tasks
Open the Accessibility panel
Click frame 1 of the video layer
Select vholder movie clip symbol
Deselect Make object accessible option
Macromedia Studio Step-by-Step

65. Lesson 6 Objectives Perform a content review Perform a technical test
Publish the video gallery
Macromedia Studio Step-by-Step

66. Lesson 6 Introduction Perform a content review
Test the gallery
Refer to design specifications
Look for any discrepancies
Check files for technical accuracy
Publish gallery after tests passed
Prepare files for hosting on client’s site
Macromedia Studio Step-by-Step

67. Performing a Content Review
LESSON 6
Performing a Content Review
Overview of tasks
Open the Control menu
Click Test Movie
Evaluate gallery against Table 6-1
Macromedia Studio Step-by-Step

68. LESSON 6
Macromedia Studio Step-by-Step

69. Performing a Technical Test
LESSON 6
Performing a Technical Test
Test the video gallery locally
Open the document in the Flash Player
Test each button and link
Ensure eight files in Video_gallery folder
Evaluate gallery against Table 6-2
Macromedia Studio Step-by-Step

70. LESSON 6
Macromedia Studio Step-by-Step

71. Publishing the Video Gallery
LESSON 6
Publishing the Video Gallery
Video gallery added to existing page
Generate the video_gallery.swf file only
Publish files to the same directory
Overview of tasks
Open Publish Settings dialog box
Deselect HTML
Key video_gallery.swf in File text box
Click Flash tab, adjust JPEG quality to 60
Click Publish to conclude the process
Macromedia Studio Step-by-Step

72. Summarizing Project 3 Video gallery was implemented
SUMMARY
Summarizing Project 3
Video gallery was implemented
Flash Video (FLV) files were encoded
ActionScript used to load and play files
ActionScript used with dynamic text
Flash document was made accessible
Macromedia Studio Step-by-Step