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:
import 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:
if( 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.
What a great app!
Woopra is a real-time web tracking application that’s currently in beta.
I’ve only been playing with it for a few minutes (since I received my confirmation) and am already loving it.
Its basically Google Analytics except with the incredible addition of being live. On top of all of this, it has a great design and is extremely user friendly.
Woopra allows you to sit and watch people log on and off of your site. Track them in real-time as they switch pages and interact with your site. What’s even crazier is you can even initiate a conversation with any visitor. For all you know, I’m watching you right now. Rockwell was right in being paranoid.
Like I said, I’m just getting into it, but so far I’m leaning towards this being my web analysis app of choice.