16 February 2009
This tutorial is designed for users who have some experience with managing websites in Dreamweaver, including creating a new site and configuring it to upload files to a production web server. For more information on these tasks, see Working with Dreamweaver sites.
You do not need any experience with Flash or Adobe Media Encoder. The tutorial uses a sample video file that was created in Adobe Premiere Pro CS4, but it does not require any use or knowledge of this product.
Note: This tutorial was written for Creative Suite 4. Although the screenshots may differ from what you see on your screen, the content is still valid for Creative Suite 5.
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:
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.
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:
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:
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:
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.
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):
If you've installed Adobe Premiere Pro, you'll also see additional options, including:
Follow these steps to select an output format suitable for use with Flash Player:
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:
When you select the Web Medium preset, the resulting video defaults to 360 pixels wide x 264 pixels high. Other default sizes include:
After selecting a preset, you can customize your settings. Follow these steps to open the Export Settings dialog box:
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.
The Export Settings dialog box has five tabs in advanced mode:
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.
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:
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:
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:
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:
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:
Follow these steps to check your audio settings:
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:
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:
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:
The video should open in Adobe Media Player and start to play automatically (see Figure 8).
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:
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:
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:
You should see the website's files displayed in the Files panel.
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.
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:
Downsides to using progressive download include the following:
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:
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.
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:
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:
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:
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:
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:
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:
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.
You should see that the video is played, but the player's controls aren't displayed.
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.
Tip: If you don't see the Properties panel, choose Window > Properties.
Tip: If you don't see the Align panel, choose Window > Align.
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.
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.
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:
Note: Depending on your screen resolution, you might need to scroll the timeline to the right to see frame 95.
Tip: You can also drag the end of the motion tween to frame 95 to extend its duration.
Note: You might see that Alpha is set to 0 automatically when you select it.
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).
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.
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.
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:
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:
stop() command stops the timeline from looping back to frame 1. The next line of code starts video playback.
You should see that the Flash presentation doesn't loop, and the video starts to play only in the last frame of the timeline.
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.
When you published the presentation, Flash created the following files in the website's root folder:
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:
You should see that Dreamweaver changes to Split view to show the newly inserted HTML code.
<iframe src="waterparkvideo.html" height="353" width="420" frameborder="0" scrolling="0"<>/iframe>
Next, preview the page in an external browser to full screen video display.
Congratulations! You've successfully created an advanced video presentation and added it to your web page.
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.