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!

32 Responses to FOTD 23: Flash 8 – Flash Video Playback

  1. Jack says:

    Team Macromedia member Tom Green face is on ever single topic about this “new” flash video stuff :)AAAArggg does MM not got some nice looking women working on the office? Maybe her video is better to use in this pics

  2. Only because Tom’s truly all OVER this Flash video ‘stuff’, Jack- he knows Flash video like the back of his hand (and ironically, he’s actually talking about Dreamweaver in the video file I used, not Flash).I wasn’t really trying to make a swimsuit video with this post, though… sorry ;-)

  3. JUan says:

    i want to learn how to create a game

  4. ‘Creating a game’ is a pretty big topic, Juan- but I’d recommend starting with getting a strong grip on the Flash (8) interactivity and engineering model at the Macromedia Developer Center:http://www.macromedia.com/devnet/flash/Or just do a Google search on ‘create flash game’ and you’ll get a ton of pointers back. Hope this helps!

  5. Zach says:

    How do you change the content path in Action Script? I have the FLVPlayback component on my stage and I want to have buttons that pull .flv files and import them into the FLVPlayback component on the next frame. example in progress http://www.fremontfilms.com/new

  6. Hey, Zach-Basically you import the FLVPlayback class and set the contentPath somewhat like the following (where myVideo is the instance name of the FLVPlayback component on the stage:import mx.video.*;myVideo.contentPath = “path/to/newfile.flv”;IIRC, setting the contentPath this way will override what you have set in the Property Inspector.Hope this helps out!(you can also refer to the FLVPlayback component documentation at the LiveDocs site here, in case you’re interested…)

  7. Ya Tom Green knows his Flash video, mad nice guy too, great tutorial aswell.

  8. Brad says:

    I have a working FLV Custom Playback Seekbar assigned to a working FLV Playback Component. After a blank keyframe on the timeline acts to remove both the movie and the seekbar, the seekbar arrow (indicating where the viewer is during the movie playback) remains visible on the stage. Is there any way to remove it, other than loading a new movie into Level 0?

  9. Hm- I see what you’re talking about, and although it hasn’t popped up in my own hackings yet, this does seem like it could be a glitch worth reporting. I’m just swapping in a new movie/dereferencing the current one to get around it for now as well. Make sure to send in a user bug report here to help add weight, of course:http://www.macromedia.com/go/wish/

  10. Tom says:

    I would like to use the FLV Playback component but have the video start at 1 second in rather than the very beginning of the clip. I’ve used Actionscript (netStream method) before to set the Seek to 1 second before playing but I’m not sure how to do the same thing when using the FLV Playback component.

  11. Check the Flash 8 Components Language Reference for the FLVPlayback component’s API, in particular the FLVPlayback.seek() method. That will let you place the playhead at any millisecond-level position as needed thru AS.Barring that, you could also potentially set a cue point 1 second in, and ‘preroll’ the video to it before starting playback.Curious though- why not just trim the 1 second off the front of the video to begin with? Seems like if you’re not showing that range of video, then it’s wasted frames/bandwidth/coding. Unless there’s a logical/project reason for coding around this, I’d just trim the head of the video clip off and reencode the FLV…

  12. brandon brimberry says:

    I like the post.What actionscript do I need to insert if I want to tell the user the video is loading?thanksbrandon

  13. srinivas says:

    this tutorial works on local but when i uplaod to my webspace server it doesnt work…

  14. Brandon- sorry, the DW feature does not support preloaders or ‘loading bars’. You’ll have to create your own SWF player in Flash Pro (using the FLVPlayback component or Video class) if you want custom functionality like preloaders, subtitles, etc. Just check the Flash Pro/Actionscript 2 docs in Flash Pro for all the specifics on this.Srinivas – check the URLs in your HTML page to make sure they’re not local filesystem URLs, which is the leading cause of these types of errors on your remote server (particularly if you didn’t create the page within a defined DW site). You could also try pointing to an absolute URL for your skin/FLV files in the HTML page (i.e. http://yoursite/file.flv, etc.) as opposed to relative URLs (/video/file.flv or ../video/file.flv) if your server acts strangely with relative/root-relative URLs.As you haven’t given a URL to reference the problem, I have no idea what’s going on in your site myself- but if the suggestion above doesn’t work I’d log a tech support ticket (http://www.macromedia.com/support/dreamweaver/) and look into the error directly with a tech – sorry, but I don’t have a ton of free time for debugging outside the suggestions above. Hope that helps out!

  15. tony says:

    Great post, i gave it a try and i noticed that the seek bar is disabled and the arrow doesnt appear under it to show the video progress. anyone know why this is? or am i missing something in the component inspector?

  16. Are you using the built-in skins or the FLVPlayback component with no skin and binding custom controls to it? If the former (and the video actually plays back), make sure you’ve got the component dimensions set correctly – but it’s very hard to guess at what’s wrong given the info I’ve got to go on from your post… it may be helpful if you post the SWF/FLA to look at.If you’re binding the controls to a raw FLVPlayback component, then make sure you’re using the right syntax in your Actionscript. Posting a snippet of code may help.

  17. jayzon says:

    i got the same problem with the seek bar, i am not using any skin for FLV playback component, it all works well except the seek bar.the arrow disappears after the video begins to play, disabling to seek the flv contents.i haven’t put any other action script except the script above and adding a stop button with code:myVideo.stopButton = myStopButton;the stop button works well so i guess the problem is not there..if you want to check my .fla and the swf here are the URLs:SWF: http://dikkiscybercafe.dyndns.org/FLV_Videos/index.htmlFLA:http://dikkiscybercafe.dyndns.org/FLV_Videos/test.flathanks and more power

  18. Hey, Jayzon- thanks, an example FLA really helps. I can definitely see what you and the previous poster are seeing now, and your Actionscript/FLA look normal at first glance. I’ll dig around and see if I can figure out what’s happening and post back here if I’ve got a solution/prognosis (although am travelling now, so it may be slow- warning). Thx!

  19. jayzon says:

    upon browsing more articles on Flash 8’s seekbar component i came across a tutorial on FLV Playback here:http://www.macromedia.com/devnet/flash/articles/custom_flvcomp_print.htmlthat says:”If you’re using a SeekBar component with an older FLV file, it’s possible that the FLV file does not contain the metadata needed to power the SeekBar component and percentage functionality. If this is the case, you can resolve the issue by manually entering a totalTime value into the FLVPlayback parameters”after reading this tutorial i tried putting an input number on totalTIme value on the FLV Playback parameter and the seekbar works well…now we see the problem is the flv encoding, my question now is what software i (and others) can use to put metadata into the flv videos? does Flash 8 video Encoder doesn’t have this? because all my flv videos were converted here?thanks for a FLASH responce..anyway i also wanna share another fla and swf (if still needed) which i edited, putting a time parameter, you can see it here:FLA: http://dikkiscybercafe.dyndns.org/FLV_Videos/test2.flaSWF: http://dikkiscybercafe.dyndns.org/FLV_Videos/test2.swfnote that these links are on my local harddisk powered by a webserver, my computer operates 9:00am to 12:00am everyday, Philippine time so there is an 9 hour off on these files.:-)

  20. Hey, Jayzon- thanks, I’m surprised that little trick was buried in a DevCenter article and not in the docs! Goes to show you can even teach an old dog new tricks, eh? ;-)I just checked this out with an older FLV file created for Flash 7/MX 2004 a few years ago, and sure enough I get the same results, and they resolve once I entered a totalTime param as a default. Nice catch!

  21. Say I wanted to be able to tack on FLV skins to an MP3 player I’m building, how would I go about it?Inspecting the debug variables it looks like mx.video.UIManager is closely integrated with the skin. I’m guessing I’d have to pretty much write my own UIManager?

  22. You mean use the FLVPlayback skins for a home-grown MP3 player? Seems like a lot of unnecessary work- I’d honestly just roll your own components (or use the visual styles from the FLVPlayback skins for buttons/etc) if you’re just using audio. The skins are bound pretty tightly to the FLVPlayback component, so yep- you’d likely have to write your own manager, too.If you want to dig more into the skins’ implementation, check out the skin FLA files themselves in “(Flash Application directory)/Configuration/SkinFLA/*”, but I’d make copies before you start your hackery. HTH…

  23. jayzon says:

    lol.. thanks also for the tip, its really amazing since i am only a begginer :D

  24. Neil says:

    I’ve set up a custom skin using your instructions (thanks very much, by the way), but I want to use the same skin in several other flash applications. How do you publish a skin so that it can be accessed via the “Custom Skin URL”?

  25. Hi, Neil-You should be able to just move the Player (streaming or progressive) and Skin SWFs from your local project directory to a ‘common’ directory on your web server (these will be created by default in the same directory as your current project’s SWF/HTML output), then use that remote URL on your server as the Custom Skin URL property for each successive FLV project you publish.

  26. Jason says:

    Hello,Great tutorial. I am having some problem using the SeekBar, VolumeBar, and a ComboBox in the same FLA.If I use just the SeekBar and the VolumeBar, both work. Or if I just use one of them (SeekBar OR VolumeBar) without the other and the ComboBox, they work. However, if I try and use all three, either the the SeekBar or the VolumeBar stops working, depending on which order they were added.Anyone else run into this problem?

  27. jane Wulf says:

    Thanks for the tutorials. I think Zach asked this question but I didn’t understand the answer.i have a seven short videos.I have one FLVPlayback component with an instance name myPlayer.I want to create seven seperate buttons which, when clicked, will make each video play within the one myPlayer component.I could do this in FlashMX by adding simple actionscript to each button (myPlayer.setMedia(“http://www.myURL.com/videos/video1.flv” and etc. for each button)seems like this should be obvious, but i can’t find anything about it on any of the online guides and tutorials.thanksJane

  28. Miles says:

    I am trying to do streaming video from a regular web server with a Flash file encapsulated in an html web page. It doesn’t work. Check it out at:http://students.uwf.edu/tmg16/myVideo/Oz.htmlFile Names:Oz.html (references Oz.swf)Oz.swf (references the flv file below)Oz.fla (source)Osmosis_00012.flvThe problem may be this…when I try to set the contentPath in the swf file to:http://students.uwf.edu/tmg16/myVideo/Osmosis_00012.flvI get a “Failed to load FLV etc” message. Any idea why this is not working?Miles

  29. Kyle Doris says:

    hey guys… i’m having a problem with the seekbar component to my site (please excuse the lack of a preload script, just wait for a second for all the layers to load up, the total size of the swf is 900k)www.downeffect.com/v2.htmlif you go to dementrovisioin, start one of the movies and then click on the next… notice how the instance of the seekbar sorta “holds” it’s place from the previous movie you viewed. this is rather frustrating. my seekbar is just multiple instances for each movie, and each movie resides on a different frame of the scene. each instance is targeted to the coorsponding movie. when you move between the frames, this seems to happen. am i approaching this just completely wrong?thanks much-kd

  30. Roy says:

    Question:Is there a way to clear the cache of a local drive when flv file ends for progressive download.Is there a way to make a flv video go full screen depending on user moniter settings or do you have to just right the fixed settings in the flv player. Is there a place I can learn more about that as I’m still learning how to make basic stuff .Can you preload a flv file then play the file requested, preload would be a commerical advertising my site.Thanks yo!

  31. Miles – if all the files are on the same server, use a relative URL and not an absolute URL for the FLV path (i.e. just the filename, if they’re all in the same directory).Kyle- did you already fix/change this? I’m only seeing a load bar, not a seek bar, for the movies- and it seems to reset OK between FLVs. Looks good to me!Roy- set the FLV target path to null to purge the component. I see no reason why you couldn’t preload a FLV and play it back afterwards, or go full screen (no FLV-specific tricks with either, you’d just need to code it up in AS- full screen is just a Player mode anyway).

  32. jer says:

    I’ve been trying to figure out a problem when I publish a Flash 8 file with FLV videos and using the stock playback control: When published locally (on my machine), the control works normally. When published to the webserver, the controls no longer appear. Any ideas?