Accessibility

Flash Article

 

Creating and Playing Flash Video Files Through Progressive Download


Mike Downey

Mike Downey

www.markme.com/md

Created:
15 April 2004
User Level:
Beginner

Note: This article describes legacy techniques in Flash video. To learn about the latest best practices for working with video in newer versions in Flash, please read the Flash Video Learning Guide and the most recent articles posted in the Flash Video Developer 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:

  1. In your video-editing software, select Export.
  2. Select the Macromedia Flash Video format.
  3. Customize the video settings, as shown in the dialog box below.
Flash Video (FLV) Exporter

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.

Start Screen

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.

Properties inspector

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.

MediaPlayback Component

Figure 4. MediaPlayback component

Now the Stage should look something like this:

MediaPlayback Component

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

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.

Publishing Your Flash Movie

Figure 7. Publishing your Flash movie


 

Select Publish from the File menu.

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 has been immersed in web technologies since the early days of Macromedia Flash. Since joining Macromedia he has strived to share this passion with customers all over the world. As an experienced instructor, presenter, and developer, Mike has met with thousands of Macromedia's talented 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. With all of the cutting-edge, emotional, thought-provoking work being developed with Macromedia software every day, Mike consistently reminds people that this is only the beginning.

Mike maintains a weblog devoted to Flash-related topics at www.markme.com/md.