In the previous article Knowing When It’s Safe To Talk To Flash From JavaScript we saw how to call Flash from JavaScript.
We embedded the Flash movie directly into the page, however there are times when we may want to insert the movie dynamically using JavaScript. How can we do this?
Well it turns out fairly easily, especially if we use one of the modern JavaScript framework libraries like jQuery.
jQuery is very extendable, and has a powerful plugin based architecture. Thankfully someone has done the hard work for us and written a plugin to handle the embedding of Flash. Take a look at the jQuery.flash plugin.
How do we use it, well first we need to add the two libraries to the page, jQuery and jQuery.flash.
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
In our page body, we’ll add a bit of HTML that will have it’s content replaced by the Flash movie.
<-- the content of the following div will be replaced. -->
<div id="example">Flash here</div>
Now let’s add the JavaScript that will replace the div’s content. We’ll wrap it inside jQuery’s ready function to make sure everything we need is in place. This is a better version of the window.onload function we saw in the previous article that waits until the page can be manipulated, and not until everythting has been downloaded.
$(document).ready(function() {
$('#example').flash(
{
src: 'test.swf',
height: 1,
width: 1,
flashvars: {onLoad: 'flashLoaded'}
},
{ version: 8}
);
});
This creates the object or embed as necessary, and loads the movie “test.swf”, with a height and width of 1 pixel and the flashvars parameters we saw in the previous article. In this case, the onLoad parameter has a value of flashLoaded, the name of the function we want to call when the flash has loaded and is ready to execute. There is also a parameter saying the minimum version of the Flash player we need, let’s use version 8 here.
Now when the page is loaded, the <div> block will be replaced with the flash movie, and this in turn will call our callback function flashLoaded.
Update: Using Mootools
Mootools is another excellent JavaScript framework library, and it has Flash support built into it’s core using the Swiff class.
For Mootools, firstly we need to make sure it’s loaded.
<!-- load the mootools library -->
<script type="text/javascript" src="mootools.js"></script>
Now we’ll wrap our Swiff object creation in Mootools domready event. This is the equivilant to what we did earlier in jQuery with the ready event.
window.addEvent('domready', function() {
var flash = new Swiff('test.swf', {
container: $('example'),
width: 1,
height: 1,
callBacks: {
onLoad: flashLoaded
}
});
});
Here we’re creating a new Swiff object, and telling it to place the flash object / embed tag it creates inside the div with the id of example like we did with the jQuery example. We specify the height and width both of 1 pixel and setup the callback.
As you can see, Mootools specifically calls this a callback unlike jQuery’s flashvars. They mean the same thing here, so we say the onLoad callback function in the Flash movie’s ActionScript will call the local JavaScript function flashLoaded.