Using Video, and Flash Components, and Printing Flash Content Tutorial 9 Using Video, and Flash Components, and Printing Flash Content

Objectives Learn the basics of using digital video as it relates to Flash Import video into a Flash document Use Flash components Prepare Flash content for printing

Working with Video Video: another multimedia element used in Flash Video adds appeal and excitement to a Web site Basic terms: frame size, frame rate, file size Flash provides a wizard to help you add video files Recommendations regarding the use of videos Start the import process with quality source files Favor source files in a digital format Edit video with a program such as Adobe Premiere®

Video Frame Rate and Frame Size Frame rate: number of frames played each second Total number of frames: video length x frame rate Example: 10-second video at 30 fps requires 300 frames Considerations when setting the frame rate Higher frame rates improve quality, but increase file size Greater motion in a scene demands a higher frame rate Capability of client computer and connection speed File size factors: frame rate, frame size, video length

Video Compression and Decompression Files can be compressed by removing redundant data Two types of compression Temporal: compresses interframes surrounding keyframes Spatial: compresses each frame (intraframe) independently Compressed video must be decompressed before play Codec: a video compressor/decompresser program On2 VP6 codec used when publishing to Flash Player 8 Sorensen Spark codec used for publishing to Flash Player 7

Delivering Video Encoding: process of compressing a video Three methods used to encode video for delivery Embedded: video directly imported into Flash document Progressive: video converted into separate FLV file Streaming: video converted into separate FLV file Special requirements for video streaming Must use Flash Player 7 or greater to view the video Web server running Macromedia Flash Media Server

Importing Video Open Video Import wizard Path to wizard: File  Import  Import Video Select Video: first screen in Video Import Wizard Use dialog box to specify the location of the video file Press Next to advance to Deployment options Deployment: relates to Web server and delivery mode Selecting first three options leads to Encoding and Skinning Selecting fourth option leads to Embedding and Encoding Fifth option results in use of QuickTime plug-in

Deployment Options

Skinning Options

Importing Video (continued) First four deployment options result in library entries FLV instance is indicated by an FLVPlayback entry Embedded video is signified by an embedded video icon Using an imported video Use process similar to that for movie clips and buttons You may need to extend the Timeline to place video frames Recommendation: put video inside movie clip symbol Video instance can be modified with ActionScript

Library Panel

Adding Video to the Jackson’s Sports Web Site Objective: add two video clips of a basketball game Overview of procedure for importing video clips Create individual FLA documents for each clip Import videos for progressive downloading Use Flash 8 - Medium Quality (400 kps) encoding Use MojaveExternalPlaySeekMute.swf skin Name and publish SWF files Modify Videos.fla to play the videos, publish SWF file Add Videos page to Jackson’s Sports Web site

Selecting Video Quality Settings

Video Clip Loaded into Movie Clip Instance

Using Flash Components Components: prebuilt movie clips (.swc extension) Components are located in the Component panel Tools used to change component parameters Property inspector or the Component Inspector panel Two external sources of components Flash Exchange Web site and www.flashfoundry.com Compile a component using ExportSWCFile Add a component by dragging an instance to Stage

Flash User Interface Components

Using the ProgressBar and Loader Components ProgressBar component Receives progress information from other components Displays a progress bar and percentage of file loaded Using ProgressBar with the Loader component SWF file is loaded into the Loader instance ProgressBar detects content change in the Loader ProgressBar displays information Loader parameters: autoload, contentPath, scaleContent

Sample ProgressBar Component

ProgressBar Parameters

Creating a Different Version of the Videos Page Objective: add a preloader using components Overview of tasks Create an instance of the Loader component Create two buttons providing a choice of two clips Add ActionScript to buttons to control which clip loads Use the ProgressBar to show progress of load operation Register an event listener with instance of video loader Write functions listener uses to show/hide ProgressBar

ProgressBar Instance and Parameters

Frame ActionScript Code

Using the ScrollPane Component Displays movie clips, SWF or JPG files in scrollable area Objective: add ScrollPane to new Photos page Overview of tasks Add Scrollpane and Loader components to Photos page Create thumbnails movie clip with buttons that load photos Establish a link between ScrollPane and movie clip

Scrollpane Component Example

Revised Photos Page

Creating Printable Content Two basic tools used to print a Flash Web Site The Web Browser’s Print command The Flash Player’s Print command, if available Web browser’s Print often truncates a document Flash Player Print accessed from context menu User can specify current frame or all frames be printed Alternative: program special printing options Example: make specific frames available for printing

Flash Player Context Menu

Controlling Printing print () format: print (target,“bounding box”); target: specifies location of frames to print bounding box: determines how much of Stage to print Options for bounding box: bmovie, bframe, bmax printAsBitmap(): works like the print () function Used when print contains transparency or color effects One script: on(release){ print(ball_mc, “bframe”); } Print area determined by content in frames of ball_mc

Bounding Box

Creating a Coupons Page for Jackson’s Web Site Objective: load and print coupons Overview of tasks Create buttons on Coupons page to load coupon SWF files Add empty movie clip to hold coupon SWF files Include a button visitor can click to print a coupon Create printable coupons in separate FLA and SWF files Add ActionScript code to make all buttons operational Add Coupons page to Jackson’s Sports Web site

Final Coupon Page Loaded in Main Web Site