Basics of Flash embedding

HTML setup

First you need to include the Flashembed script on your page:

<script type="text/javascript" src="toolbox.flashembed.min.js"></script>

It is recommended that you use the minified (.min) version to reduce the download size. You can get the script here. Second, you have to have a HTML container for the object; we are using a DIV element in our example. We use an id attribute to reference this container later in the embedding.

<div id="clock"></div>

JavaScript setup

Next, we place a Flash object inside the container. This happens with this simple flashembed call:

flashembed("clock", "/media/swf/global/clock.swf");

The call must be placed after the DIV element or you must place it inside the $(document).ready() block with jQuery. That is really all you need.

CSS code

By default, the Flash object is placed inside the player container so that its width and height properties are set to 100%. This means that you can control the dimensions of the Flash object by setting the dimensions of the container. In this minimal setup we have following CSS settings:

#clock {
  width: 250px;
  height: 250px;
}

Configuring Flash objects

Here we have another Flash object and this time we pass parameters (or configuration) to it. Here is our flashembed call:

flashembed("info", "/media/swf/global/flashvars.swf", {
 
  // these properties are given for the Flash object
  name1: 'configuration value #1',
  name2: 'configuration value #2',
  name3: 'Hello World! I am changing',
});

Here is the result. The passed parameters are seen:

Configuring Flash with JSON

Flashembed has the unique feature of configuring your Flash objects with JSON. This gives you the ability to supply complex configurations directly upon embedding. JSON is a JavaScript-based syntax and is much more flexible and simpler than XML which has historically been used in Flash configuration.

Flowplayer is one example of a Flash application that accepts JSON-based configurations. Here is our flashembed call:

flashembed("player", "/media/swf/flowplayer/flowplayer-3.2.9.swf", {
 
  // "config" parameter is a complex JSON object, not just a simple value
  config: {
    clip:  {
      autoPlay: false,
      autoBuffering: true,
      url: 'http://e1h13.simplecdn.net/flowplayer/flowplayer.flv'
    }
  }
});

And here is the result:

If you are developing a Flash object and want to configure it with JSON, you can find JSON parsers for Flash from as3corelib.