This is a message.

Basics of Flash embedding

Minimal Flash embedding setup

Here you have a simple Flash object. Below the object you can see how it is placed on the page:

standalone demo

HTML setup

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

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

HTML

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>

HTML

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");

JavaScript

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;
}

CSS

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',
});

JavaScript

Here is the result. The passed parameters are seen:

standalone demo

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.7.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'
}
}
});

JavaScript

And here is the result:

standalone demo

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