Using Flash media components to play video in Flex projects
Created
12 May 2008
Requirements
Prerequisite knowledge
User Level
Intermediate
Required products
- Flex Builder 3 (Download trial)
Sample files
- video_flex.zip (686 KB)
One of the things I hear a lot is that people really miss the Flash media components when they're diving into Flex. So why not use that component you love so much in your Flex projects? The Flex Component Kit for Flash CS3 has been out there for a while now and if you have all the latest updates to Flash, it's even part of your Flash CS3 authoring environment by default now. I have the feeling that people underestimate this feature and don't really appreciate the power of this yet. So I thought it was a good idea to create a little tutorial to show you how easy it is to make Flex components in Flash CS3 and in this case, how to use the Flash media components inside your Flex projects.
So we're going to create a Flex component that holds the FLVPlayback component and write a little bit of ActionScript code to make it work in Flex.
First, you need to check if your Flash CS3 authoring is up to date. If it is, your commands menu should look like this (see Figure 1):
If your Commands menu looks different, make sure you click the "Updates…" option in the Help menu to get all the latest updates.
Make a new Flash document and drag and drop the "FLVPlayback" component from the component panel to the stage (see Figure 2).
Make sure you specify an instance name for that component. I'm calling mine "MyPlayer" (see Figure 3).
Next, make a movieclip from that FLVPlayback component. I'm going to call mine "MyVideoPlayer" (see Figure 4).
When you've done that, go ahead and double-click the MyVideoPlayer movie clip. Create a new layer and draw a rectangle with the same size as your FLVPlayback component. Convert this into a movie clip and specify its instance name to "boundingBox". Once you use your component in Flex, it will not be visible. Flex will use this "boundingBox" movie clip to determine how big your component actually is.
By default, the FLVPlayback component will also show a player skin. If your FLVPlayback component isn't previewing a player skin, you can select the skin you want to use in the parameters panel. In my case, I'm going to select SkinOverAllNoFullNoCaption as my player skin (see Figure 5).
Also, check if the autoPlay parameter and the skinAutoHide parameter are set to "true".
Obviously you could also make your own player skin or even use the different button components. But in this case I want to keep it simple for demo purposes. Next you're going to add some ActionScript code to control the size and to set the source file. This may actually be a good time to save your FLA file. When you've done that, create a new ActionScript file (File > New… > ActionScript File). You're actually going to create an ActionScript class for your MyVideoPlayer MovieClip. Sadly, Flash CS3 doesn't give you the option to automatically make the class structure so you have to do that manually.
Just copy and paste this code snippet to start with:
package {
import mx.flash.UIMovieClip;
import flash.display.MovieClip;
public dynamic class MyVideoPlayer extends UIMovieClip {
public function MyVideoPlayer() {
super();
}
}
}
Go ahead and save that ActionScript file in the same folder as your FLA and name it "MyVideoPlayer.as". Now go back to your FLA and right-click the MyVideoPlayer movie clip in the Library panel and select "Linkage". You're actually going to link the class file that you just created to this movie clip (see Figure 6).
When you check the "Export for ActionScript" box, your window should automatically look like this (see Figure 7):
To verify that you saved and named everything correctly, click the "Edit class definition" icon:
This should bring you back to the ActionScript class. if it doesn't, make sure the name is correct and that you saved the ActionScript file in the same folder as your FLA file. Don't forget to click "OK" to save your linkage settings.
Now have another look at the Class structure. As you can see, we're going to extend the UIMovieClip class. This class has all the methods a normal Flex component has. That means I can automatically use getters and setters like any other Flex components have. So the first function I'm going to create is a setter function to specify the video source file url.
public function set source(MyVid:String):void{
MyPlayer.play(MyVid);
}
No rocket science here. I just tell the FLVPlayback component inside my movie clip to play the video file I will pass it. I also want to be able to size the component to whatever size I want. You could use the standard width and height setters but I'm not going to do that. I'm actually going to override these setters so I can set the width and height of the FLVPlayback component instead of the whole component. If I wouldn't do that, my player skin would become distorted and stretched. So go ahead and add these lines of code:
override public function set width(w:Number):void{
MyPlayer.width = w;
}
override public function set height(h:Number):void{
MyPlayer.height = h;
}
Your class file should now look like this:
package {
import mx.flash.UIMovieClip;
import flash.display.MovieClip;
public dynamic class MyVideoPlayer extends UIMovieClip {
public function MyVideoPlayer() {
super();
}
public function set source(MyVid:String):void{
MyPlayer.play(MyVid);
}
override public function set width(w:Number):void{
MyPlayer.width = w;
}
override public function set height(h:Number):void{
MyPlayer.height = h;
}
}
}
Now we are ready to "bake" our Flex component. Select the MyVideoPlayer movie clip in the library window and then select the "Convert Symbol to Flex Component" command in the Commands menu. Chances are Flash will give you a little popup window telling you that your frame rate doesn't match the default frame rate that Flex uses (see Figure 8).
Just go ahead and click "OK". In the Output window, Flash will ask you to publish your file:
Select File > Publish to create the SWC file for use in Flex.
Obviously, this is what you want to do next.
When you did that, Flash created a couple of files for you (see Figure 9):
The SWC file is the one we will be using in Flex. Open up Flex Builder 3 and create a new project. The first thing we need to do is to add our component to the Flex library so it knows that this is now available. In Flex Builder 3 it's as easy as just copying the SWC file into the libs folder of your project. You can even drag it in there straight from your Finder or Explorer window.
If you've done that, you also need to add the player skin you're using. This goes into the src folder. So go ahead and drag "SkinOverAllNoFullNoCaption.swf" to the src folder of your Flex project. Your project folder should now look like this (see Figure 10):
Now open the main MXML file of your project. In my case it's called "FlashFlexMarriage.mxml". If your Flex Builder is in Design view, switch to Code view. When you start typing "MyVideoPlayer", you will see that Flex Builder now knows your component and gives you codecompletion for it. When you hit Enter, the "local" namespace will be added to the application descriptor and your component will be added. Now you can add the source of your FLV.
<local:MyVideoPlayer source="http://www.helpexamples.com/flash/video/lights_short.flv"/>
Go ahead and run this project. Your video should start playing instantly.
I think it would be nicer to see this video a bit bigger and because we added the width and height setters, we can do that without distorting our player skin.
<local:MyVideoPlayer source="http://www.helpexamples.com/flash/video/lights_short.flv"
width="640" height="480" x="0" y="0" />
When you run it again, you'll see that the player skin is still proportioned in the same way.
Where to go from here
You have now successfully created a Flex component in Flash. Obviously, this is just an example and you can do so much more but I think this shows how powerful the combination of Flash and Flex can be.
Visit the Flex Developer Center and Flash Developer Center for more developer resources.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
More Like This
- Building an icon-checkbox component with Flex 3
- What's new in Flex 4.6 SDK and Flash Builder 4.6
- Introducing Adobe Flex 4.6 SDK
- Flex 3 Component Solutions excerpt: Introducing hierarchal data and components
- AdvancED Flex Application Development excerpt: Working with video
- Creating Flex components
- Creating components and enforcing separation of concerns with Flex
- Building interactive maps with Flex
- Flex 3 Component Solutions excerpt: Audio and video components
- Building a simple dashboard using Flex 3 with ILOG Elixir
