Embedding the Brightcove player in a Flash movie

This how-to covers embedding a Brightcove player ActionScript snippet inside a Flash movie, the first step to customizing or building functionality around any Brightcove player using Adobe Flash.

Before You Begin

Before you begin, you'll need to have created a player in the console that you can embed if you want to follow along with this example. If you need help doing that read this Introduction to Brightcove Players first.

Make sure that the player's support for the ActionScript/JavaScript APIs is enabled. This is done on the "Security" tab - uncheck the box that says "Disable ActionScript/JavaScript API."

Grab and place the snippet

In the console, select the player you want to embed and press the button labeled "Get Publishing Code". In the popup, select the "Actionscript" tab and press the "Copy" button. The ActionScript Snippet will be automatically placed in your clipboard.

Open Macromedia Flash. Create a new Flash movie, select frame one, open the Actions Panel, and paste the snippet there.

This is the simplest method. Alternately you could create a movie clip and paste the snippet inside that, to aid in positioning the player, or to attach it at run time. You can place the snippet on any frame in case you want to use earlier frames for preloading, or to define functions and variables. If you are adept with Object Oriented Programming in ActionScript 2 or later you could wrap the code from the snippet in an AS2 class. The method you choose will depend on the requirements of your application.

Configure the snippet

A quick look at the structure of the snippet reveals a key element – the config object. Attached to this object are multiple properties that control how the snippet will appear when it’s loaded.

If you copied the snippet from the console, these options are pre-configured for you and are specific to that player.

However the properties can be altered to customize the player, or even load another player entirely. For more information, see Advanced config properties.

Configure the HTML embed code

At this point, we need to publish our movie so that we can make some tweaks to our enclosing html page. We can do that easily using Flash’s Publish function. Make sure both .swf and .html are set to publish.

In the html code, locate the id attribute within the object tag. If you’ve published from inside Flash, this, by default, will be set to the base name of the .swf. For example, if your swf is MyPlayer.swf, id="MyPlayer". Similarly, the embed tag will have a name attribute, such as name="MyPlayer". Now, if you look in the ActionScript Snippet you just pasted into your Actions Panel, about half way down, you are going to see a line that reads something like this:

You need to make the string "flashObj" match the id and name attributes in the html. It doesn't matter if you change the id and name attributes in the html to "flashObj", or you change the ActionScript string to match what is in the html, as long as all three contain the exact same value. So for the MyPlayer example, you would change the line in ActionScript to read:

The final step in configuring is to allow script access to the movie. This is also configured in the html embed and object tags. In both of these tags there is an attribute called "allowScriptAccess". This is set to "sameDomain" by default. You need to change this value to "always". Make sure you change it in both the embed and the object tags.

Test the player

At this point, you should be ready to test your player. If you are using Flash MX 2004 or later, you can simply test the movie in the IDE. However, additional security restrictions added to Flash 8 restrict access of external swfs loaded into local swfs. This affects the playing of video content in the player if you are testing your movie in the Flash 8 IDE. While all other functions of the player should work, you will not be able to play videos in this case. To test the video playback, publish the movie, which will create the html and .swf file, put these on your web server, and then open the movie in the browser of your choice.

Whichever method you use, the Brightcove Player should now load and your content will be available. You may need to resize the stage to fit the entire movie and make room for any additional elements you might add to your movie.

How it works

When the .swf loads, and when it encounters the code in the ActionScript Snippet, whereever you have placed that, it will execute that code. This results in an empty movie clip being created on the main timeline, into which is loaded the Brightcove Player. The name of this movie clip instance is "bcPlayer". This is your entry point into all of the methods, properties, and events of the ActionScript API.

If you have installed the Brightcove Flash Help Files, you should also get code hints when you type "bcPlayer" in the Actions Panel, and color syntax highlighting for the key words and objects of the API.

Now that you have a working player, you can start to add some functionality to it. Jump over to this How-to on ActionScript Basics.