FOTD 23: Flash 8 – Flash Video Playback

In recent FOTDs I’ve covered encoding videos in Flash, both individually and in batch via the standalone encoder, but today we’re going to actually do something with your FLV file- using the new FLV Playback component in Flash 8. If you’ve been holding out on integrating video assets into your sites and RIAs, then you really owe it to yourself to explore the possibilities with Studio 8. It’s just too darn easy to ignore now.


I’m going to assume that we’re starting this FOTD with a FLV file created either via the Flash 8 Video Import Wizard or Batch Encoder, or directly exported from an NLE/compositing application. Either way, I’ve got this ‘talking head’ video on hand I want to integrate quickly into a Flash movie. Let’s look both at how you can quickly do this with the new FLV Playback component in Flash 8, as well as a very basic implementation with custom UI components and ActionScript- to give you an idea as to how much ‘work’ is really involved to get a FLV file playing in Flash 8.First up- let’s use the FLV playback component to embed a video clip into our Flash movie. Open up the Components panel (“Windows > Components” menu, FYI), open up the “FLV Playback – Player 8″ category, and witness the shiny new FLVPlayback component. We’ll just drag it to the stage, and rename the instance to ‘myVideo’ in the Property Inspector.

component_stage.jpg
Adding the FLVPlayback component to the Stage

Now- just switch to the ‘Parameters’ tab of the Property Inspector, scroll down to the ‘contentPath’ parameter, and click the magnifying glass icon to point the Playback component to your FLV file as so:

content_path.jpg
Specifying the FLV file’s contentPath

… you can also scroll down to the ‘skin’ parameter and click the magnifying glass icon to choose one of the available preset controller ‘skins’ in the component’s Parameters (complete with preview):

select_skin.jpg
Selecting a skin for the FLVPlayback component

And after all that really hard work, just hit “Test Movie” – or publish your SWF – and you’re done. One drag/drop of a component, two parameter updates, publish a SWF… that’s all it takes to include FLV video clips in your Flash movies!(FYI, that’s our very own Team Macromedia member Tom Green waxing philosophic about Dreamweaver 8’s new features…)

video_skin_ui.jpg
The final video player/clip

Now what if you want to create your own interface for the playback controls- for example if you were embedding this video into a larger multimedia piece? The FLV Playback component doesn’t require the preset skins- as it’s nearly as easy to bind custom playback controls to match your layout/design as well. You’ll find the custom UI components in the Component panel as well- under the “FLV Playback Custom UI” component category:

ui_components.jpg
The FLV Playback Custom UI components

To use them, just set up the FLV Playback component as described above, but leave out the step where you specify a player skin in the Property Inspector (after all, you’ll be creating your own now). Then, drag out the components you need to the stage – where you want them to appear – and make sure to name each instance uniquely (and somewhat logically) in the Property Inspector so they can be accessed via ActionScript. Here’s a basic layout using a Seek Bar, Play/Pause Button, Forward Button, Back Button, and Volume Bar:

video_custom_ui.jpg

… and the only coding required to bind these 5 custom UI components to the Playback component are these 5 lines of ActionScript:

actions_panel.jpg
Binding UI Components to an FLV Playback component

The ‘myVideo’ parameter, as you’ll recall, is the FLV Playback component we started with, and I’m simply assigning each of my new UI controls (by their instance name) to the myVideo component’s respective functions. Place the playback component and point it at an FLV file, position the UI controls on the stage, bind them to the playback component, hit “Publish”- and you’re done. Even the custom UI route is dead simple.And there you have it- two easy ways to embed Flash video into your Flash 8 projects with varying degrees of control (and there’s even more, should you dive into the ActionScript side of the equation). Best get your video clips ready for Flash 8 ASAP- and don’t forget to swing back by tomorrow for FOTD 24!