Adding video to a web page

This tutorial teaches you how to publish videos on web pages in FLV format. You'll use Adobe Media Encoder, Adobe Dreamweaver CS4, and Adobe Flash CS4 Professional to complete the tutorial.

Videos you create with your video camera (or receive from family, friends, or colleagues) initially are in a format that is determined by the camera or by a video editing software application such as Adobe Premiere Pro CS4. These original video files aren't designed for delivery over the Internet. They're usually very large, because they're designed for delivery on a DVD or other medium. To be delivered successfully over the Internet, these files must be converted to a format that your website visitors can easily download and view. Flash and Dreamweaver have all the tools needed to accomplish this task, and nearly all Internet users have Flash Player, the software they'll need to view your videos.

In this tutorial you learn how to accomplish the following two critical tasks in creating and posting a video on a website:

• You'll use Adobe Media Encoder to convert your original video to an FLV file, a compressed format that's suitable for delivery over the web.
• You'll then use Dreamweaver to add the resulting video file to a web page.

In an optional step, you'll use Flash to create a more advanced video presentation. You'll add a title screen, and then create a cross-fade between the title screen and the video. Finally, you'll publish the Flash presentation with an advanced HTML page that supports full-screen video display, and integrate the result into an existing web page in Dreamweaver.

Installing the sample files

Before you start the tutorial, download and extract the contents of homewebsite.zip anywhere on your hard disk. This archive file contains a folder named that contains these assets:

• Starter website files, including two web pages whose designs have space for video display.
• A sample AVI video file named AtTheWaterPark.avi that you'll convert for use on a website.

Adobe Media Encoder uses a process known as encoding to compress an original video file into a format that's suitable for delivery over the web. In this part of the tutorial you'll learn how to accomplish the following tasks:

• Open Adobe Media Encoder
• Select a video file that you want to encode for the web
• Configure and complete the encoding process to produce an FLV file for your website

Using Adobe Media Encoder

You can open Adobe Media Encoder from the Windows Start menu, or from the Applications folder on Mac OS X.

Note: You can also start Adobe Media Encoder from within certain Creative Suite applications, including Flash and Adobe Premiere Pro.

It takes time to encode video files. The amount of time required depends on the size of the video, the format you're encoding, and your computer's available resources. Adobe Media Encoder lets you add multiple original video files to an encoding queue, configure each of the encoding jobs individually, and then start the queue. The encoding jobs are then executed one at a time until they're all completed.

Follow these steps to add the original video file to the encoding queue:

1. Choose File > Add in Adobe Media Encoder.
2. Navigate to the sample website's Video folder.
3. Select the AtTheWaterPark.avi file.

Note: You can also drag video files from Windows Explorer (Windows) or the Finder (Mac OS X) into the queue.

The video file is added to the encoding queue.

Selecting an output format

After adding a video file to the queue, you then select an output format. Adobe Media Encoder allows you to output video in these formats (see Figure 1):

• Adobe FLV | F4V for use with Adobe Flash Player
• H.264 for use with Apple iPod, 3GPP mobile phones, Sony PSP, and other devices

If you've installed Adobe Premiere Pro, you'll also see additional options, including:

• H.264 Blu-ray
• MPEG-1 for use in CD-ROM authoring (Windows only)
• MPEG-2 for use in DVD authoring (Windows only)
• Windows Media (Windows only)
• Apple QuickTime (Windows users must have QuickTime Player installed to encode videos in the QuickTime format.)

Follow these steps to select an output format suitable for use with Flash Player:

1. Click the button in the Format column.
2. Select FLV | F4V.

Adobe Media Encoder offers a number of predefined configurations known as presets that include multiple settings in frequently used combinations. Follow these steps to select a preset:

1. Click the button in the Preset column.
2. Select FLV – Web Medium (Flash 8 and Higher), as shown in Figure 2.

When you select the Web Medium preset, the resulting video defaults to 360 pixels wide x 264 pixels high. Other default sizes include:

• Web Large (640 pixels × 480 pixels)
• Web Small (328 pixels × 240 pixels)
• Web Modem (164 pixels × 120 pixels)

Using custom export settings

After selecting a preset, you can customize your settings. Follow these steps to open the Export Settings dialog box:

1. Click in the encoding queue to select the AtTheWaterPark.avi file.
2. Choose Edit > Export Settings.

   When the Export Settings dialog box appears, it might only display the currently selected Preset, the Output Name, and a summary of currently selected options. If those are the only options you see, you need to expand the available settings.

3. Click the Advanced Mode button (see Figure 3).

The Export Settings dialog box has five tabs in advanced mode:

• Filters
• Format
• Video
• Audio
• Others

In this article, I describe settings that have critical effects on both the size of the resulting video file, and on which version of Flash Player is needed to view it. For detailed descriptions of all available custom settings, see the Adobe Media Encoder online Help.

Selecting an output format

In the Format tab, shown in Figure 4, you set the Multiplexing option to either FLV or F4V. (Multiplexing means that the encoding process integrates video and audio channels into a single stream.)

Depending on your selection of codec (explained in the next section), an FLV file requires either Flash Player 7 or later, or Flash Player 8 or later. An F4V file, which is an H.264 video for Flash Player, requires Flash Player 9,0,115 or later.

To decide which versions of Flash Player your video requires, it's helpful to know the approximate penetration (the percentage of computer users who have installed a particular version or later) of different Flash Player versions. For more information, see Flash Player Version Penetration on the Adobe website.

For example, as of September 2008 (the most recent survey at the time this article was written), approximately 90% of computer users in the United States and Canada had installed Flash Player 9,0,115 or later and were, therefore, able to view F4V files without having to install additional software. In contrast, over 99% of users had installed Flash Player 7 or later, and over 98% had installed Flash Player 8 or later. In this tutorial, you'll create video requiring Flash Player 8 or later to reach a larger audience than is available with the newer video standard.

Follow these steps to review the format setting:

1. Click the Format tab.
2. Verify that Multiplexing is set to FLV.

Setting video options

The Video tab includes options that affect the size and performance of the resulting video file. You first select a codec, as shown in Figure 5.

A codec is a software application that encodes and decodes a video file. Adobe Media Encoder includes the following codecs for creating FLV files:

• Sorenson Spark creates FLV files that have lower quality and larger file size, but can be viewed with Flash Player 7.
• On2 VP6 creates FLV files that can be viewed with Flash Player 8 and later. These files have a higher quality and smaller file size. FLV files created with this codec also support alpha channels for composite video, such as videos that are shot with a green screen or other neutral background, and delivered with background transparency.

Note: When you select the F4V format, Adobe Media Encoder uses the MainConcept H.264 Video codec.

Follow these steps to select a video codec:

1. Click the Video tab.
2. Select On2 VP6.

The video's display size has a direct effect on the resulting file size: a smaller display size requires a smaller video file, and a larger display size requires a larger video file. You can customize the display size, but you should always constrain the height and width to make sure the video's aspect ratio (ratio of width to height) doesn't change.

The video's bitrate also has an effect on quality and file size. A higher bitrate results in higher quality and a larger file.

Follow these steps to customize the video size and bitrate:

1. Select Resize Video.
2. Select Constrain Width/Height (see Figure 5).
3. Click the underlined number next to Frame Width [Pixels] and change it to 400, and then press the Tab key. You should see that Frame Height [pixels] changes automatically to 293.
4. Scroll down to the Bitrate Settings section. Note that the Bitrate is set to a default of 600, and the estimated file size (displayed in the control bar near the Cancel and OK buttons) is 1 MB.

Setting audio options

The Audio tab, shown in Figure 6, allows you to select an audio codec and set its associated options.

FLV files created with Sorenson Spark or On2 VP6 always use the MPEG Layer 3 (MP3) audio codec. These audio encoding options are available for the MP3 codec:

• Output Channels can be set to Mono or Stereo. If your audio uses a single channel (for example, if it was recorded with a single microphone), selecting Mono can reduce the file size. If your audio was recorded in stereo, retain that setting to deliver a good audio experience.
• Bitrate determines the quality of the audio. As with video bitrate, a higher audio bitrate results in a larger file and better quality. If your audio is made up of human voices or other nonmusical sounds, you might be able to reduce the bitrate (for example, to 48 kbps) without significantly losing audio quality; if it includes high-quality music, use a higher bitrate.

Follow these steps to check your audio settings:

1. Click the Audio tab.
2. Check that Output Channels is set to Stereo.
3. Check that Bitrate [kbps] is set to 96.
4. Click OK to close the Export Settings dialog box.

Creating the video file

After setting your video output configurations, follow these steps to select the location and name of the resulting video file in the list of video files:

1. Click the name of the file in the Output File column.
2. Make sure that AtTheWaterPark.flv is listed in the Save As text box, and that the Video folder for the sample website is listed in the Location text box.
3. Click Save.
4. Click Start Queue to create the new video file.

The amount of time required to create the file depends on the video's display size and other settings. Your computer's processing speed and other resources also have an effect on how long it takes to complete the encoding task.

The Status column shows the current status of each video in the queue. It displays "Encoding" when the video is being encoded, and a check mark when the process is complete (see Figure 7).

After the encoding is complete, you can select the encoding job and click Duplicate to revise and reuse your settings, or click Remove if you're done with that video.

Follow these steps to remove the encoding job from the queue:

1. Select the AtTheWaterPark.avi file in the queue.
2. Click Remove to remove the job from the queue.
3. Click Yes in the dialog box that appears to confirm you want to remove the video from the queue.
4. Close Adobe Media Encoder.

Previewing the video in Adobe Media Player

You can preview the resulting video file with the free Adobe Media Player. Adobe Media Player is installed with all editions of Creative Suite 4, and can also be downloaded and installed separately from the Adobe website.

Adobe Media Player can play many video formats, including FLV files. The application is associated with the .flv file extension during installation, so FLV files should open automatically when you double-click or otherwise try to open them.

Follow these steps to open and preview the video file you created:

1. Open Windows Explorer (Windows) or the Finder (Mac OS X).
2. Navigate to the Video folder under the sample website root folder and locate the AtTheWaterPark.flv file.
3. Double-click the file to open it.

   The video should open in Adobe Media Player and start to play automatically (see Figure 8).

4. Close Adobe Media Player.

Dreamweaver CS4 includes a feature that allows you to integrate an FLV file into an existing web page. All you need is an FLV file with its display size set to a height and width that are appropriate for your web page design.

In this section of the tutorial, you'll accomplish the following tasks:

• Create a Dreamweaver site to manage the website assets (web pages, CSS and JavaScript files, and video)
• Generate required HTML and JavaScript code to integrate an FLV file into an existing web page
• Identify site assets that should be uploaded to the remote site so your website visitors can view your video

Creating a Dreamweaver site

Before adding a video to a web page, you should define a Dreamweaver site that manages all of the website's assets. If you're already familiar with the process of defining a site in Dreamweaver, you'll find that there aren't any special steps when adding video. You set these categories and options in the site definition:

• Local Info
  • Location on disk
  • Application server settings
  • Any other settings that define how you manage the local site
• Cloaking (to prevent certain files from being uploaded to the remote site)
  • A list of file extensions that will be automatically cloaked

You won't configure Remote Info in this tutorial, but you would typically configure this information to indicate how files will be uploaded to the remote site. For information about configuring a remote site, see Set up a remote folder in Dreamweaver online Help.

Follow these steps to define a site in Dreamweaver:

1. Open Dreamweaver CS4.
2. Choose Site > New Site.
3. In the Site Definition dialog box, click the Advanced tab (see Figure 9).

4. Enter Home Website with Video as the Site Name.
5. Set the Local root folder to the root folder of the website files you extracted to your local hard disk. In Windows, the folder might be C:/sites/homewebsite; in Mac OS X it might be /Users/[username]/Sites/homewebsite.
6. Click Cloaking in the category list.
7. Select the Cloak Files Ending With option (see Figure 10). Note that the .fla file extension is already listed.

8. Click in the file extensions list and add .avi.
9. Click OK to save your new Site definition.

   You should see the website's files displayed in the Files panel.

10. In the Files panel, double-click the videopage1.htm file.
11. Choose View > Design to see its visual presentation.

As shown in Figure 11, the web page includes a headline, a navigation section on the left, and a bit of text indicating where the video should be inserted.

Progressive download versus video streaming

Dreamweaver can generate code and files for delivering video to the web browser in two different ways: progressive download and video streaming.

Progressive download means that Flash Player downloads the FLV file from the web server, in the same way a browser downloads an image file. When a website visitor navigates to the page that hosts the video, Flash Player starts to download the video file from the website. When enough of the video file has been downloaded, it starts to play—and while it's playing, the remainder of the video file is downloaded in the background.

Progressive download has the advantage of simplicity:

• No special software is required on the server other than the web server itself, such as Apache or IIS.
• To deploy the video, you simply upload it to the remote site along with other website assets.

Downsides to using progressive download include the following:

• You can't authenticate users, manage or report the amount of video that's being downloaded, or reduce the amount of bandwidth available to individual users.
• Video files are cached on the website visitor's computer by the web browser. As a result, a website visitor is able to locate and save the video file from her web browser's cache. For this reason, it's difficult to restrict distribution of your video files when they're delivered with progressive download.

Video streaming means that Flash Player makes a connection to a server-based application known as a streaming server. The video content is then delivered as a stream. As information is received, it's presented and then discarded from memory, and is never saved to the website visitor's disk.

Video streaming has the following advantages:

• Video playback can start instantly, instead of having to wait until a certain amount of video has been downloaded.
• You can authenticate users and only allow them access to videos to which they've been granted rights.
• Bandwidth can be allocated individually based on the current website visitor and video.
• Video files aren't saved to the browser's cache, so distribution can be controlled.

If you plan to stream large amounts of video, you can manage your own streaming server with Adobe Flash Media Streaming Server. This software offers smooth streaming to Flash Player, Adobe Media Player, and to mobile phones with Adobe Flash Lite 3 software.If you don't want to create your own streaming server, you can instead subscribe to a streaming service that offers shared streaming accounts (similar to a shared website account offered by an ISP). Refer to the Adobe website for a list of Flash Video Streaming Service (FVSS) providers.

In this tutorial, you'll use progressive download to deliver the video to the browser.

Adding the video file to the web page

When you add a video file to a web page, Dreamweaver adds a Flash presentation to the page downloads and plays the video (referred to here as the video player). The page should have a region with enough room to display the video, plus some additional space for the video player. The sample page that's included with this tutorial has a display region (a <div> element with an id of mainContent) with enough space for content that's up to 450 pixels wide. Since the FLV file you created was 400 pixels wide, it will fit with room to spare.

Follow these steps to add the video to the web page:

1. In Design view, select the text "Place Video Here."
2. Press Delete to delete the selected text.
3. Choose Insert > Media > FLV.
4. In the Insert FLV dialog box set the Video type to Progressive Download Video (see Figure 12).

5. Click Browse.
6. In the Select FLV dialog box, navigate to the website's Video folder.
7. Select the AtTheWaterPark.flv file.
8. Check that the URL is set to video/AtTheWaterPark.flv and Relative To: is set to Document.
9. Click OK.
10. Set the Skin to Halo Skin 3.
11. Click Detect Size. Dreamweaver should detect the video display size of 400 × 293 and set Total with skin to 422 × 344.
12. Select Auto Play to cause the video to play automatically when the web page is loaded into the browser.
13. Select Auto Rewind to cause the video rewind to the start when it finishes playing.
14. Click OK to add the video to the web page.
15. Save the changes to the web page.
16. When you save your changes, Dreamweaver displays a dialog box informing you that it's added files to the site to support video download and display. Click OK when prompted to copy dependent files. The following files must be uploaded to the remote site for the video to play correctly:
    • FLVPlayer_Progressive.swf displays the video. (If you use video streaming, this file is named FLVPlayer_Streaming.swf.)
    • A "skinning" SWF file determines the appearance and functionality of the video player. Halo Skin 3 is defined in a file named Halo_Skin_3.swf.
    • Scripts/expressInstall.swf manages an upgrade to the required version of Flash Player for website visitors who have at least Flash Player 6,0,65 but not the required version.
    • Scripts/swfobject_modified.js contains JavaScript code that's used to load Flash Player.

Previewing the video with Live view

Dreamweaver CS4 has a new feature named Live view that allows you to see what a page will look like without having to start an external browser.

Follow these steps to preview the video with Live view:

1. Verify that you are viewing the web page in Design view. The video region initially appears as a gray rectangle with a blue border and tab labeled SWF: FLVPlayer.
2. Choose View > Live View (or click Live View on the Document toolbar) to preview the page (see Figure 13). The video should start to play immediately.

3. Choose View > Live View again to return to Design view.

That's it—you've created a video file that's suitable for delivery over the web and added it to a web page. The next section is optional, but it will show you how to enhance your video by wrapping it in a Flash presentation and adding some nice effects.

You can use Flash to create an advanced presentation that combines your video with title screens, cross-fades and other visual effects, and interactivity. Flash can also generate advanced HTML code that supports full-screen video display.

In this part of the tutorial, you'll accomplish the following tasks:

• Create a new Flash document
• Add an FLV file to the Flash document for playback
• Add a title screen that's displayed before the video appears
• Create a cross-fade between the title screen and the video
• Publish the Flash content with an option that supports full-screen video display
• Add the completed Flash content to a web page in Dreamweaver

Creating a Flash document

The first step is to create a Flash document. The source version of a Flash document always has a file extension of .fla. After publishing the document, the resulting presentation has a file extension of .swf.

Follow these steps to create a new Flash document:

1. Open Flash CS4 Professional.
2. Choose Window > Workspace > Designer. You should see the Timeline at the top, the Tools and Properties panel on the left, and the Library, Align, and Color panels on the right.
3. Choose File > New.
4. In the New Document dialog box, shown in Figure 14, select Flash File (ActionScript 3.0) and click OK.

5. Choose File > Save As.
6. In the dialog box that appears, navigate to your website's root folder.
7. Save the file as waterparkvideo.fla. Click Save.

Adding video to the Flash document

The Flash document uses layers to organize the presentation's visual elements. A new Flash document has a single default layer named Layer 1. You'll use the default layer to display the video, and create additional layers to display the title screen and create ActionScript code. Follow these steps to rename the default layer and add a video player component in the layer's first frame:

1. Locate the Timeline panel. If you don't see the Timeline, choose Window > Timeline.
2. Double-click the Layer 1 label. A text input control appears that allows you to rename the layer.
3. Type a new layer name of video and press Enter (Windows) or Return (Mac OS X).
4. Select the cell in frame 1 of the video layer (see Figure 15).

5. Choose File > Import > Import Video.
6. In the first screen of the Import Video wizard, shown in Figure 16, click Browse.

7. Navigate to the website's Video folder.
8. Select the FLV file you created, AtTheWaterPark.flv, and click Open.
9. Click Next (Windows) or Continue (Mac OS X).
10. On the Skinning screen, shown in Figure 17, select the skinning SWF file SkinUnderPlayStopSeekFullVol.swf.

11. Click the color selector and select a color of #47ABCB.
12. Click Next (Windows) or Continue (Mac OS X).
13. Read the information on the Finish Video Import screen, and then click Finish.

When the video import process is complete, the Flash document shows a video player component in the center of the screen.

In the next step, you'll resize the Flash document to display the component:

1. Choose Modify > Document.
2. Set the Match option to Contents (see Figure 18).

3. Click OK.

   Note: When you match the Flash document's size to its contents, the new size matches the video playback component but doesn't leave room for the playback controls. You'll fix this in the next step.

4. Press Ctrl+Enter (Windows) or Cmd+Return (Mac OS X) to test the presentation.

You should see that the video is played, but the player's controls aren't displayed.

1. Close the Flash Player window to return to the authoring environment.
2. Choose Modify > Document.
3. Change the document height from 293 to 333, adding 40 pixels of vertical space for the video playback controls.
4. Click OK.
5. Test the presentation again. You should see that the video player component and its controls are now displayed correctly.
6. Save your changes.

Adding a title screen

Flash allows you to integrate multiple visual elements. In this section, you'll add a title screen at the beginning of the Flash presentation that then cross-fades into the video.

1. Click the name of the existing video layer in the timeline.
2. Choose Insert > Timeline > Layer to add a new layer.
3. Double-click the new layer name, Layer 2, and rename it titlescreen.
4. Right-click/Ctrl-click the new layer and choose Lock Others. This ensures that new content will be added to the only unlocked layer.
5. Select the cell in frame 1 of the titlescreen layer.
6. In the Tools panel click the Rectangle tool (see Figure 19).

7. In the Properties panel, set the Stroke color to none, and the Fill color to black.

   Tip: If you don't see the Properties panel, choose Window > Properties.

8. Drag from the top-left corner of the document to the lower-right corner to create a rectangle.
9. Click the Selection tool in the Tools panel.
10. Double-click anywhere in the new shape to select it.
11. Set the following properties in the Position and Size section of the Properties panel:
    • X: 0
    • Y: 0
    • Width: 400M
    • Height: 333
12. Press Esc to deselect the shape.
13. Click the Text tool in the Tools panel.
14. Set the following properties in the Character section of the Properties panel:
    • Type: Static Text
    • Family: Georgia
    • Style: Regular
    • Size: 72 pt
    • Letter spacing: 0.0
    • Color: White
    • Auto kern: selected
    • Anti-alias: Anti-alias for readability
15. Set the following properties in the Paragraph section of the Properties panel:
    • Format: centered
    • Spacing: horizontal: 0.0, vertical: 2.0
16. Click anywhere in the document to create a new text object.
17. Type the words At the and press Enter (Windows) or Return (Mac OS X).
18. Type the words Water Park.
19. Press Esc to finish entering text, but leave the text object selected.
20. Go to the Align panel.

    Tip: If you don't see the Align panel, choose Window > Align.

21. Verify that the To Stage button is selected.
22. Click the Align horizontal center button.
23. Click the Align vertical center button.

You should see that the text object is centered horizontally and vertically.

To make the cross-fade easier to implement, you'll now group the background rectangle and the text as a single object, known as a library symbol. You'll then be able to fade them out together.

1. Press Ctrl+A (Windows) or Cmd+A (Mac OS X) to select all objects in the current layer.
2. Choose Modify > Convert To Symbol to create a library symbol containing the layer's objects.
3. In the Convert To Symbol dialog box enter mcTitle in the Name text box and make sure that the Type is set to Movie Clip (see Figure 21).

4. Click OK. The new symbol is added to the Library panel, and the rectangle and text objects that were selected on the stage are now a single object, known as a symbol instance.
5. Save your changes.

If you test the Flash presentation at this point (and you have your computer's volume turned on), you'll hear that the movie is playing, but you won't be able to see it. This is because the title screen is hiding the video. In the next section, you'll add a cross-fade between the title screen and the video.

Adding a cross-fade effect

In Flash, you can use a motion tween to add animation to a layer. Motion tweening is used to change position, size, and other visual characteristics of a symbol instance over a period of time.

For more information about motion tweens, see Motion Tweens in Flash Help.

Follow these steps to cross-fade from the title screen to the video after a delay of 3 seconds:

1. Select the cell in frame 1 of the titlescreen layer.
2. Choose Insert > Motion Tween. The motion tween is initially created with a time span of 24 frames (1 second).
3. Click in frame 95 of the titlescreen layer.

   Note: Depending on your screen resolution, you might need to scroll the timeline to the right to see frame 95.

4. Choose Insert > Timeline > Frame to extend the motion tween to just under 4 seconds.

   Tip: You can also drag the end of the motion tween to frame 95 to extend its duration.

5. Verify that the cell in frame 95 of the titlescreen layer is selected.
6. Press the V key to use the Selection tool.
7. Click the title card symbol instance in the presentation.
8. In the Color Effect section of the Properties panel set the Style to Alpha (see Figure 22).

9. Set the Alpha property, which affects transparency, to 0 (fully transparent).

   Note: You might see that Alpha is set to 0 automatically when you select it.

10. Click in frame 72 of the titlescreen layer.
11. Click the title card symbol again to select it.
12. In the Properties panel, set the Alpha property to 100%.

    A dot in frame 72 of the timeline's titlescreen layer indicates that a change is applied to the symbol in this frame. The title screen is now completely visible for 3 seconds (until frame 72), and then fades out from frame 72 to frame 95 (just under 1 second).

13. Click in frame 96 of the video layer.
14. Choose Insert > Timeline > Frame to extend the video layer to the end of the Flash presentation.

    Note: The video is still displayed in frame 96, after the title screen is removed from the presentation, allowing the website visitor to interact with the video player's playback controls.

15. Save and test the Flash presentation.

The title screen now fades out after a delay of 3 seconds, but the presentation then loops to the beginning and starts again. Also, the video plays at the beginning of the presentation, rather than waiting until the cross-fade is complete. You'll fix these issues in the next section.

Controlling the Timeline and video playback

At this point, the video plays automatically when the Flash presentation loads, and the presentation itself loops continuously. Follow these steps to prevent video playback from starting at the beginning of the presentation:

1. Right-click/Ctrl-click on the video layer and select Lock Others.
2. Right-click/Ctrl-click on the video layer and select Hide Others.
3. Select the cell in frame 1 of the video layer.
4. Click to select the video player component.
5. Choose Window > Component Inspector to view the component's properties.
6. In the Component Inspector panel set the component's autoPlay property to False (see Figure 23).

7. Close the Component Inspector panel.

You'll use a bit of ActionScript 3 code to prevent the presentation from looping continuously, and to play the video when the cross-fade is complete. ActionScript 3 is a programming language that's based on the ECMAScript standard (the same standard on which JavaScript is based). For more information about ActionScript 3, see Programming Adobe ActionScript 3.0 for Adobe Flash on the Adobe website.

The best practice for Flash documents is to place all ActionScript code in a single layer, usually named actions. You first assign an instance name to any object you want to control with ActionScript code, such as the video player component. You then create a keyframe (a marker where a particular action or event occurs), and add the ActionScript code you want to execute in that frame.

Follow these steps to add ActionScript to the Flash presentation's final frame:

1. Select the video component again.
2. In the Properties panel, shown in Figure 24, click the <Instance Name> text control.
3. Enter videoplayer.

4. Click the titlescreen layer in the timeline.
5. Choose Insert > Timeline > Layer.
6. Rename the new layer actions.
7. Click in frame 96 of the actions layer.
8. Choose Insert > Timeline > Keyframe to add a new keyframe.
9. Choose Window > Actions to open the Actions panel.
10. Add the following code into the Actions panel:

Note: The stop() command stops the timeline from looping back to frame 1. The next line of code starts video playback.

11. Close the Actions panel and save your changes.
12. Test the Flash presentation again.

You should see that the Flash presentation doesn't loop, and the video starts to play only in the last frame of the timeline.

Publishing the Flash presentation

Flash CS4 allows you to generate HTML code that supports full-screen video display. Full-screen video requires Flash Player 9,0,28 or later, so it's a good idea to configure your presentation to check the website visitor's browser environment and make sure they have the required software.

Follow these steps to configure your Flash document and publish both the Flash presentation and a supporting HTML page.

1. Choose File > Publish Settings.
2. Click the Flash tab, shown in Figure 25.

3. Set the Player option to Flash Player 9.
4. Click the HTML tab, shown in Figure 26.

5. Set the Template option to Flash Only – Allow Full Screen.
6. Select Detect Flash Version.
7. Set the required version to 9,0,28 (note that each numeric value is entered in its own text box).
8. Set all other options to match the values shown in Figure 26.
9. Click Publish to generate the Flash presentation and its supporting files.
10. Click OK to close the Publish Settings dialog box.
11. Save your changes.
12. Choose File > Publish Preview > HTML to preview the presentation in a browser.
13. When the video starts playing, click the Full Screen button in the video player component (see Figure 27). The video should expand to full-screen.

14. Press Esc to return to the browser presentation.
15. Close the browser.

Adding the Flash presentation to an existing web page

When you published the presentation, Flash created the following files in the website's root folder:

• waterparkvideo.swf: The completed Flash presentation
• waterparkvideo.html: The HTML "wrapper" file, with support for full-screen video display
• SkinUnderPlayStopSeekFullVol.swf: The "skinning" SWF file that determines the visual presentation of the video player component

These files, along with the FLV file, must be uploaded to your remote site to let your website visitors view the presentation.

In the next step, you'll integrate the Flash presentation into an existing web page. You'll use an HTML <iframe> element that embeds a web page inside another page. This will allow you to use the HTML code that was generated by Flash without having to do too much copying and pasting.

Follow these steps to add the Flash presentation to the web page:

1. In Dreamweaver, open videopage2.htm in Design view.
2. Select the text Place Video Here and press Delete.
3. Choose Insert > HTML > Frames > IFrame.

   You should see that Dreamweaver changes to Split view to show the newly inserted HTML code.

4. In the code, modify the <iframe> code as follows:

5. Save your changes.

   Next, preview the page in an external browser to full screen video display.

6. Choose File > Preview In Browser.
7. Select a web browser.
8. After the web page has opened in the browser and the video has started to play, click the Full Screen button to expand the video to full screen.
9. Press Esc to return to the browser view.
10. Close the browser.

Congratulations! You've successfully created an advanced video presentation and added it to your web page.

Where to go from here

There are many other resources for learning about creating and integrating video for the web. For example, some users encounter an issue with web server configuration. If you deploy your website on a web server that you've set up yourself, often the MIME type is not set up correctly for FLV and the videos will not play. For a solution to this issue, see Adding .FLV MIME Type in IIS.

If you're interested in creating your own videos, check out Adobe Creative Suite 4 Production Premium, which includes Adobe Premiere Pro, After Effects, Soundbooth, and other products that make it easy to create video that's fun and interesting.