One of the things I hear a lot is that people really miss the Flash media components when they’re diving in to Flex. So why not use that component you love so much in your Flex projects? “The Flex component kit for Flash” 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 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 to make it work in Flex. Let me know if this was useful for you.

First thing you need to check is that your Flash CS3 authoring is up to date. If it is, your commands menu should look like this:

If your Commands menu looks different, make sure you click the “Updates…” option in the Help menu to get all the latest updates or download the commands from http://www.adobe.com/go/flex3_cs3_swfkit

Make a new Flash document and drag and drop the “FLVPlayback” component from the component panel to the stage.

Make sure you specify an instance name for that component. I’m calling mine “MyPlayer”.

Next, make a movieclip from that FLVPlayback component. I’m going to call mine “MyVideoPlayer”.

When you’ve done that, go ahead and double click on the MyVideoPlayer movieclip. Create a new layer and draw a rectangle with the same size as your FLVPlayback component. Convert this in to a movieclip and specify it’s instance name to “boundingBox”. Once we use our component in Flex, it will not be visible. Flex will use this “boundingBox” movieclip 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.

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 we’re going to add some ActionScript 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). We’re actually going to create an ActionScript class for our 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 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 AS file in the same folder as your FLA and name it “MyVideoPlayer.as”. Now go back to your FLA and right-click on the MyVideoPlayer movieclip in the Library panel and select “Linkage”. We’re actually going to link the class file that we just created to this movieclip.

When you tick the “Export for ActionScript” box, your window should automatically look like this:

To verify that you saved and named everything correctly, click on 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 AS 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 component has. 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 movieclip 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 playerskin 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 movieclip 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 framerate doesn’t match the default framerate that Flex uses.

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:

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 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 in to 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, we also need to add the player skin we’re using. This goes in to 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:

Now open your projects main MXML file. 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.

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 playerskin.

When you run it again, you’ll see that the playerskin is still proportioned in the same way.

Tadaaa! 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.

For your convenience, I’ve also included the the sources for this project. You can download them here.