I remember trying this a while back with Flex Builder 2 after reading Stefan Richter’s article and never being able to get it working properly. You couldn’t use the FLVPlayback swc directly, you had to compile out of Flash first with a wrapper MovieClip and you still had issues with the skin scaling properly.
I decided to try it again a couple of weeks ago with Flex Builder 3 and having complete success. You can use the FLVPlayback swc directly in Flex Builder now. I’m not sure if Flex Builder 3 or an update to the FLVPlayback component made a difference or if I’ve just gotten better at Flex. Either way, I wanted to document it for everyone.
Its actually rather simple and requires just a few steps:
- Create a new Flex project.
- Copy the FLVPlaybackAS3.swc from your Flash CS3 directory (under Configuration/Components/Video) and add it to your libs directory in your Flex project.
- In your main application mxml file, create a UIComponent and give it an id of “container”. This id can be anything you want, just remember it for below.
-
Add a Script tag and listen for the creationComplete event on the application. Within the Script tag, add the following:
12345678910111213141516import fl.video.VideoScaleMode;import fl.video.FLVPlayback;private function creationCompleteHandler():void{var playback:FLVPlayback = new FLVPlayback();playback.width = 320;playback.height = 240;container.addChild( playback );playback.play( "assets/video/video.flv" );playback.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;playback.skin = "assets/skin/SkinOverAllNoCaption.swf";playback.skinAutoHide = true;}Make sure you change the references to the video and skin to the correct directories and files in your project.
That’s it!
Yep… it really is easy now. This is great. Especially since there still isn’t a good video component in Flex.
You can use the FLVPlayback swc directly, you don’t need to create a wrapper in Flash first, and no skinning issues when resizing. I’ve also tested and fullscreen works perfectly too.
As a note, you can also use the source code for the FLVPlayback directly as well. You just have to make a few tweaks to the code directly to handle references to Flash’s live preview for the component. Because of the tweaks, I would highly suggest copying the files into your project and editing them there rather than editing the originals in your Flash application directory.
Follow the steps above, but replace step 2 with the following.
- Copy the fl package from your Flash CS3 directory (under Configuration/Component Source/ActionScript 3.0/FLVPlayback) and add it to your src directory in your Flex project.
- Create a new class in the fl.video directory called Icon. The class is fine with an empty constructor, its just used to stop a compile error.
-
Open fl.video.FLVPlayback and add an if statement around lines 874 – 876:
123456if( boundingBox_mc ){boundingBox_mc.visible = false;removeChild(boundingBox_mc);boundingBox_mc = null;} - For good measure, add a void return to the set skinScaleMaximum method. This will stop a compiler warning.
There you have it. You are now able to compile and use the FLVPlayback component from Flex Builder directly with either the swc or the component source.
well , thanks for your document ,
but when I follow your steps and complie，
I get action script error! can you tell what’s wrong ?
Hey Rain,
Can you tell me what ActionScript error you are getting?
Hey Mark,
Thank you very much for this guide.
When I listen for the “complete” event to switch video’s, I get a small pause inbetween the two, or I get a glitch in the sound…
Do you have any idea how this can be fixed so two video’s flow seamlessly into eachother both video and audio?
Thanks!
Followed procedure 1 for using swc exactly and got:
Error #1034: Type Coercion failed: cannot convert fl.video::FLVPlayback@74e7221 to mx.core.IUIComponent.
Thank you for the thorough advice. I have tried various methods of bringing the FLVPlayback component into a flex 3 Actionscript only project. The Copy the fl package from your Flash CS3 directory method is the best one yet. It compiled and played perfectly. I still have some size issues with defining the player size and scale as my content is 16:9 or wide screen. Flex seems to compile all swfs to 100% of the HTML wrapper. If you have advice on that it would just be like frosting on the cake
I found the answer to my question on defining the swf size.
Apparently you can define the size,background color and framerate of the swf by adding a meta tag like so
package {
import fl.video.*;
import flash.display.*;
import flash.events.*;
[SWF(width=856,height=512,backgroundColor=”#333333″,framrate=30)]
public class player extends MovieClip{ class constructor …
Still one question though, how did you figure out you needed an Icon class and the bounding box fix? Just so I can import other classes directly and track down the errors
hey rain_jr,
use the following to get around the type coercion problem:
var spriteWrapper:UIComponent = new UIComponent(); container.addChild(spriteWrapper); spriteWrapper.addChild(playback);
-JG
aweonao
this is not working , you should try it before posting
It’s weird that a one liner doesn’t work:
container.addChild((new UIComponent()).addChild(playback));
instead of:
var spriteWrapper:UIComponent = new UIComponent(); container.addChild(spriteWrapper); spriteWrapper.addChild(playback);
It doesn’t seem to work for me 🙁
Could you provide a zip file of your project so i could try to get it working?
Your bes bet is to use the Flex compenent kit from flash. It resolves all the IUIComponent issues with using this directly in flex.
The other option would be to edit the FLVplayback source and implement the IUIComponent interface…but that would be pretty long. If you do it Let me know.
It Works
Thank You Very Much