Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Integration

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

ADC program

Additional resources

Mike Downey

Get an e-mail update of new articles

Created:: 15 April 2004
User Level:: Beginner
Products:: Flash

Creating and Playing Flash Video Files Through Progressive Download

Note: This article describes legacy techniques in Adobe Flash for generating web video. To learn about the latest best practices for working with video in newer versions in Flash, please read the Video Learning Guide for Flash and the most recent articles posted in the Video Technology Center.

In this brief tutorial you will learn how to build a simple Macromedia Flash video project in just five easy steps.

Step 1: Exporting Your Video

Macromedia Flash MX Professional 2004 includes the Flash Video (FLV) Exporter, a plug-in for professional video-editing applications. The FLV Exporter gives you a quick and simple solution for outputting your video projects to the Flash Video (FLV) format.

After installing the FLV Exporter, you can export directly to the Macromedia Flash Video format from your video-editing software as follows:

In your video-editing software, select Export.
Select the Macromedia Flash Video format.
Customize the video settings, as shown in the dialog box below.

Figure 1. Flash Video (FLV) Exporter

After creating your FLV file, you can use the Flash authoring environment to build a rich interface for playing your video in the browser.

Step 2: Creating a New Flash Document

Start by launching Macromedia Flash MX Professional 2004. Once the application has started, you will see the Macromedia Flash Start page. For this example, click Flash Document in the Create New section to launch a new Flash document.

Figure 2. Macromedia Flash Start page

Note: You can also create a new Flash document by selecting New from the File menu.

After creating your new Flash document, you'll want to set the properties of your movie. You can do so by opening the Property inspector. (Select Window > Properties.) With the Stage selected, you can use the Property inspector to set the dimensions, frame rate, and background color of the Flash movie. The dimensions of the Stage will be the dimensions of the Flash movie when you embed it in your HTML web page.

Figure 3. Properties inspector

Note: Here you see the Stage dimensions set to 400 x 400 pixels, the background color set to blue, and the movie's frame rate set to 15 frames per second (fps). Also note that, when streaming an FLV file to Macromedia Flash Player, your Flash movie's frame rate does not have to match the frame rate of the video in the FLV file.

Step 3: Adding the MediaPlayback Component

Now that you've configured your Stage you're almost done. You need to add the MediaPlayback component to your Stage. This component displays your video and its controls. Open the Components panel (Window > Development Panels > Components), select the MediaPlayback component from the Media Components group, and drag it onto the Stage.

Figure 4. MediaPlayback component

Now the Stage should look something like this:

Figure 5. MediaPlayback component

Note: You can adjust the dimensions of the MediaPlayback component in the Property inspector, or you can use the Free Transform tool in the toolbar.

Step 4: Configuring the MediaPlayback Component

Figure 6. Configuring the MediaPlayback component

Configuring the Media Playback component is very simple and straightforward.

First, select the component instance on the Stage. Then, open the Component Inspector panel (Window > Development Panels > Component Inspector).

In the Component Inspector panel, you can set all of the parameters to stream your video into the Flash movie.

For this example, all you have to enter is the path to the FLV file, located on your web server. Enter this path in the URL field, using either an absolute path (http://www.mysite.com/flvs/myMovie.flv) or a relative path (flvs/myMovie.flv).

You can also set other options such as forcing your video to begin playing automatically, repositioning your playback controls relative to the video rectangle, and so on.

Step 5: Publishing Your Flash Movie

Once you have successfully entered the path to your FLV file, save your file. You can now test your work by selecting Test Movie from the Control menu.

Note: If you saved your FLV file to the same folder as your Flash movie (FLA file), you can simply enter the name of your FLV file in the URL field of the Component Inspector panel and test your project locally.

Figure 7. Publishing your Flash movie

Figure 8. Selecting Publish from the File menu.

If you are pleased with your results, you are ready to publish you movie for posting on the web. Select Publish from the File menu.

Flash generates a SWF file (the Flash file type for published movies) and an accompanying HTML template.

Now you're ready to post your finished video project on the web—all in five easy steps!

Flash Video Resources

For those interested in learning more advanced control of Flash Video, I recommend these online resources and tutorials:

Learn the Basics

Flash Documentation: Import and Edit Video (Download PDF, www.macromedia.com/go/videodocs

Macromedia Flash MX 2004 and Video white paper (Download PDF, 1020K)
www.macromedia.com/go/videowhitepaper

More Resources

See some great examples of Flash Video at
www.macromedia.com/go/fvg

Flash Video Developer Center
www.macromedia.com/devnet/flash/video.html

Flash Developer Center
www.macromedia.com/devnet/flash/

Integrating Video into Macromedia Flash
www.macromedia.com/go/integratingvideo

Flash Video Templates and Tutorials
www.macromedia.com/go/videotemplates

Learn how to use Flash Video Streaming Service:
www.vitalstream.com/macromedia/streaming-tools.html

About the author

Mike Downey has been immersed in web technologies since the early days of Macromedia Flash. As an experienced instructor, presenter, and developer, he has met with thousands of customers through field and online live seminars, on-demand seminars, conferences, and trade shows. The most exciting part of his job is the constant reminder of the opportunity for innovation and effectiveness on the web.

A–C

D–H

I–Z