Integrating Video in a Flash Movie

CATEGORIES: Flash, Tutorials | Cyndy Cashman | October 07, 2005

Want to integrate video in your Flash movie? You have two choices. You can embed the video in your Flash document, or keep progressively download it into a SWF file using from a FLV (Flash Video) file. In this tutorial you’ll learn to use the Media Playback Component to display a FLV file in a Flash movie.

STEP 1: Creating Flash Video

There are several ways you can create FLV files. Both Flash MX 2004 standard and Professional allow you to export video as an FLV. If you own Flash MX Professional, you can use the Flash Video Exporter plug-in that came with the Flash installer. The exporter works with a variety of video-editing and encoding programs such as QuickTime Pro. The third, and best way is to use Sorenson Squeeze. This third-party product uses a 2-pass compression which usually creates a higher quality video and smaller file size than the first two options.

The following instructions are for creating FLV via the standard and professional versions of Flash MX 2004. This method creates the poorest quality of video, but is available to all MX 2004 users.

First, create a new folder, then create and save a new Flash document. Next, choose File > Import > Import to Library. Locate the QuickTime movie you wish to import. The video Wizard will open. Click Import. Click the Embed video in Macromedia Flash document radio button. Click the Next button. Click the Import the entire video radio button. Click the Next button.

STEP 2: Creating Flash Video, cont.

The next two screens allow you to customize how you want to compress your video. From the Compression profile menu choose DSL/Cable 256 kbs. Choose Create a new profile from the Advanced settings menu. In the Encoding Advanced settings screen set the scale for the video. In the example, I set the Scale to 60%. Then click the Next button. Enter a name and description for the new preference in the next screen. Click the Next button. You will return to the Encoding screen, click the Finish button.

STEP 3: Creating Flash Video, cont.

Once the video has been imported it will appear in the Library. Open the Library. Right-click or Ctrl + click the video Symbol. Choose Properties from the context menu. The Embedded Video Properties dialog window will open. Click the Export button.

STEP 4: Creating Flash Video, cont.

In the Save As window enter a name for the video. Save the video in same folder as your Flash document. Click Save. After the video is saved, the Embedded Video Properties window will reappear. Click OK. Delete your movie from the Library.

STEP 5: Adding the MediaPlayback Component

Open the Components panel by choosing Window > Development Panels > Components. Drag the MediaPlayback component onto the Stage.

STEP 6: Setting the MediaPlayback properties and parameters

Select the MediaPlayback instance on the Stage. In the Properties inspector enter Video in the Instance name field. Enter the dimensions of your video in the width and height field.

STEP 7: Setting the MediaPlayback parameters

Click the Parameters tab in the Properties inspector. Click the Launch Component Inspector button. The Component Inspector panel will open.

STEP 8: Setting the MediaPlayback parameters

Click the FLV radio button. Choose the Frame Rate for the playback of the video from the FPS menu. Enter the name of the FLV file in the URL field. If you saved your FLV file outside of the folder containing your Flash document, you must specify the path. Check the following:

Automatically Play
Use Preferred Media Size
Control Placement: Bottom
Control Visibility: On

STEP 9: Test/Publish your movie.

Choose Control > Test Movie, or Command + return to publish your movie. The movie will automatically begin to play. You can use the controls to pause, start and rewind your movie. Pretty simple! Now lets add a little magic and make the controller only appear when you roll over the video.

STEP 10: Changing the MediaPlayback parameters

Return to your Flash document. In the MediaPlayback Component inspector, uncheck Automatically Play and change the Control Visibility Setting to Auto. Test your movie. Roll your mouse over the video and the the controller will appear. Press play, and roll your mouse off the controller. The video will continue playing and the controller will disappear.

Share This

No Comments

No comments yet.

Sorry, the comment form is closed at this time.

Featured Partner

From our Partners