This article describes how to embed a BC3 player into a Flex 3 application. As you will see, there are some minor but important extra steps to take compared to doing this in Flash CS3. Working with Adobe Flex Builder 3 is assumed, but this code can be compiled with the open source SDK as well.

Step One: Preparing a Flex Project

We’ll start with a new Flex project. For this example, we’ll be embedding the BC3 Player into a Flex Custom Component. The advantage of this being that you can just drag and drop this component into other Flex projects as a complete reusable template.

This means we’ll be adding two items to the empty project, as shown here:

• The Brightcove Player class code generated by the BC3 publishing module. This file must be called BrightcovePlayer.as
• A Custom Component called BrightcovePlayerContainer derived from Canvas.

Step Two: Get the Publisher Code

This step is identical to Flash CS3 integration. Grab the code to embed a player from the Brightcove 3 Beta Publishing module. You want to get the ActionScript publishing code, just copy it to your clipboard and paste it into the Flex BrightcovePlayer.as file.

The publishing code defines an ActionScript class that needs to be placed in an external ActionScript file, and imported into your project. With the class imported, you can create a new Brightcove player and add event listeners.

Step Three: Creating the Custom Component

Now add the following code to your custom BrightcovePlayerContainer component:

		<!--[CDATA[
			import mx.core.UIComponent;
			import flash.system.Security;
 
			public var player:BrightcovePlayer;
			public var mPlayer:Object;
			public var mContent:Object;
			public var mExp:Object;
 
		    private function onCreationComplete() : void
		    {
		      Security.allowDomain("*");
 
		      player = new BrightcovePlayer();
		      player.addEventListener("templateLoaded", templateLoaded);
 
		      var ref : UIComponent = new UIComponent();
		      addChild( ref );
		      ref.addChild( player );
		    }		
 
		    private function templateLoaded(evt:Event):void
		    {
			   trace ("template Load");
			   mPlayer = player.getModule("videoPlayer");
			   mContent = player.getModule("content");
			   mExp = player.getModule("experience");
		    }
 
		]]-->

Let’s go over the parts, shall we?

The component is based on a Flex Canvas and calls the onCreationComplete()function when being created.

The BrightcovePlayer.as file is already part of the project so we do not need to import it. We are however importing two other libraries:

import mx.core.UIComponent;
import flash.system.Security;

The UIComponent library will be used to embed the dynamically created BC3 Player into our custom component, as shown here:

player = new BrightcovePlayer();
…
var ref : UIComponent = new UIComponent();
addChild( ref );
ref.addChild( player );

To avoid security error messages during testing, you can add this line:

Security.allowDomain("*");

And to obtain references to the BC3 Player components, add an event listener for template load completion:

player.addEventListener("templateLoaded", templateLoaded);

and the corresponding event handler function:

private function templateLoaded(evt:Event):void
{
mPlayer = player.getModule("videoPlayer");
mContent = player.getModule("content");
mExp = player.getModule("experience");
}

Step Four: Adjusting the HTML Code

Before compiling and running the code, there’s just one more thing to do: you probably want to adjust some of the code in the HTML template of the Flex Project’s index.template.html file.

This file controls what the Flex SWF file can and cannot do through the SWF environment parameters. The suggested adjustments are:

• Set allowScriptAccess to always, at least for testing. It will avoid those sandbox violation error messages.
• Add allowFullScreen with a value of true for your BC Player to be able to switch to Full Screen mode.

This entry was posted on Friday, August 29th, 2008 at 10:02 am and is filed under Brightcove, Flex.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.