We can use a Javascript library to properly embed a Flash “object” on a web page, or we can simply use W3C-compliant (X)HTML markup.
The disadvantage of using a Javascript library is that we’re using Javascript. (But then again, if we use the ExternalInterface class, we’re gonna use Javascript anyway to allow communication between the movie and the web page.) One advantage of using Javascript is that in Internet Explorer version 6 and higher, the movie won’t have to be activated with a click of the mouse in order to start playing. It will start playing automatically as soon as the embedding script is run.
| Name | Link | Size | License | By | From | Ease |
|---|---|---|---|---|---|---|
| UFO | v3.20 | 11k | CC-GNU & Open Source | Bobby van der Sluis | Amsterdam | +++easy |
| SWFObject | v1.4 | 7k | MIT | Geoff Stearns | Indianapolis | +easy |
Important thing to keep in mind : The SWFObject and UFO *.js files are scripts that allow us to add one ore more Flash movies to the DOM (Document Object Model) tree, after that Document Object Model tree has been built, that is, when all the xhtml has been parsed. How do we know when the DOM tree is built ? We wait till the browser event window.onload is captured. Then, a few calls to the SWFObject or UFO Javascript library result in the dynamic insertion of a Flash movie in the document tree. We will not see any Flash movie markup when we do a View Source in the browser : we will only see a placeholder element with a specified id attribute. To examine the Flash “object” as part of the document, and as content of the “placeholder element”, we need to inspect the DOM tree. Free tools are available to inspect the DOM tree in Internet Explorer and Firefox.
The Commercial License for the IE WebDeveloper (formerly known as the IE DOM Inspector) is 79 US$ while the Non-Commercial License is 59 US$. You may download the “add-on” evaluation version and try it for 15 days, then kiss it good-bye. You may download the older version (good old IE DOM Inspector) and try it for 15 days then kiss it good-bye as well. A much better and extremely suitable alternative is to install the free beta Internet Explorer Developer Toolbar. Works in IE6 and IE7. For ever. Then click on “View DOM”.
Give the Flash “object” in the document tree a unique id attribute.
Set the Flash allowscriptaccess parameter to “always” if we are to test our web page locally. By locally, we mean NOT a server. (In Firefox, testing locally with allowscriptaccess set to “always” won’t work, due to security reasons. In Internet Explorer, if we allow “active content” to be run locally, then we will not run into any problem.) If we test the page by typing http://localhost/index.html in the browser, we are not testing locally, hence we do not require to set the allowscriptaccess parameter to “always”, and as a matter of fact we do not need to set it to anything :
For Flash movies played in Flash Player 8 or any later version, the default value for the
allowscriptaccessparameter is “sameDomain”. That means that if we do NOT set this value ourselves, the Flash player decides that the behavior of the movie is to be as if this parameter was set to “sameDomain”. If theallowscriptaccessparameter is set to “sameDomain”, or is not set to any value, Flash-Javascript communication is possible if the *.swf file and the html web page are contained in the same web root folder, that is, reside in the same “domain”.
Copy the ufo.js file in your scripts folder.
Link the file in, in the <head> of your XHTML file :
<script type="text/javascript" src="javascript/ufo.js"> </script>Create a new .js file and link it in as well.
In that Javascript file, type this code (you may already be capturing the window.onload event in another file ; in that case add a function call in the other file, and define that function here) :
var FO = { movie:"movie.swf", width:"550", height:"100", majorversion:"8", build:"0", id:"ufoElementNodeId" };
window.onload = init;
function init() {
UFO.create(FO, "ufoPlaceHolder");
}For the FO (flash object) variable, the first five parameters are required, including the build number. To use the ExternalInterface, we absolutely need to specify an additional id parameter : this will give the element node that will store the Flash movie a unique id, and we need this id to invoke ActionScript functions defined in the Flash movie. Add an allowscriptaccess parameter and set it to “always” if you’re testing locally. The parameters for the FO variable (within brackets) can be listed in any order. Other parameters can be added, such as “wmode”. UFO is a static class : in other words, don’t change that word, UFO. The second argument passed to the UFO method create() is the unique id we’ll give to the placeholder element of the Flash movie in the next step. Do not confuse 1- the element that stores the Flash movie with 2- the element that contains that element, a.k.a the placeholder element. The placeholder element has an id attribute set to “ufoPlaceHolder” in our example (you can substitute with any other value). The placeholder element can be a <div>, a <span>, or a <p>. Whereas the element that will store the Flash object is either an embed element or an object element, depending on the browser. (In Firefox and IE7, it’s an object.)
Determine the location in the XHTML file where you want your movie.swf to be inserted. Create an element (a paragraph, a div or a span), and put in that element whatever you want the browser to display if the movie cannot be loaded and played. Do not put anything else in there. If the movie can be loaded and played, all content of that element will be replaced with the Flash element (object or embed element) :
<div id="ufoPlaceHolder">
<p><a href="http://www.macromedia.com/go/getflashplayer"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get macromedia Flash Player" /></a></p>
</div>Test run your xhtml file. Is the Flash movie displayed ? Are your testing on a server, local or remote ?
Take note of the unique id you gave to the UFO Flash object. In our example, it was ufoElementNodeId.
Inspect the DOM tree.
Troubleshoot.
Take a break.
The UFO class uses a Javascript object literal notation. The advantage is that you can pass to it any number of parameters in any order : myObject = { x:1, y:2, z:3... }.
Copy the swfobject.js file to your scripts folder.
Link the file in, in the <head> of your XHTML file :
<script type="text/javascript" src="javascript/swfobject.js"> </script>Create a new .js file and link it in as well.
In that Javascript file, type this code (you may already be capturing the window.onload event in another file ; in that case add a function call in the other file, and define that function here) :
var so = new SWFObject("movie.swf", "swfObjectElementNodeId", "550", "100", "8", "#000");
window.onload = init;
function init() {
so.write("swfObjectPlaceHolder");
}The constructor of the SWFObject takes 6 arguments, and all are required. The second argument specifies a unique id for the Flash object. We will use that id to invoke ActionScript functions defined in the Flash movie. You can specify additional Flash parameters using the method addParam(). For example, if you are testing locally, you will add this line before invoking the write() method :
so.addParam("allowscriptaccess", "always");The argument that is passed to the method write() is the unique id we’ll give to the placeholder element of the Flash movie in our next step. Do not confuse 1- the element that stores the Flash movie with 2- the element that contains that element, a.k.a the placeholder element. The placeholder element has an id attribute set to “swfObjectPlaceHolder” in our example (you can substitute with any other value). The placeholder element can be a <div>, a <span>, or a <p>. Whereas the element that will store the Flash object is either an embed element or an object element, depending on the browser. (In Firefox and IE7, it’s an object.)
Determine the location in the XHTML file where you want your movie.swf to be inserted. Create an element (a paragraph, a div or a span), and put in that element whatever you want the browser to display if the movie cannot be loaded and played. Do not put anything else in there. If the movie can be loaded and played, all content of that element will be replaced with the Flash element (object or embed element) :
<div id="swfObjectPlaceHolder">
<p><a href="http://www.macromedia.com/go/getflashplayer"><img src="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" alt="Get macromedia Flash Player" style="border: none;" /></a></p>
</div>Test run your xhtml file. Is the Flash movie displayed ? Are your testing on a server, local or remote ?
Take note of the unique id you gave to the SWFObject Flash object. In our example, it was swfObjectElementNodeId.
Inspect the DOM tree.
Troubleshoot.
Take a break.
We can embed the Flash object without any embed tag, and without Javascript. The result is strict xhtml that validates :
<object type="application/x-shockwave-flash" data="movie.swf" width="550" height="100" id="flashMovieId">
<param name="movie" value="movie.swf" />
</object>The Flash movie id in this example is flashMovieId. Take note of the id you choose to give to the object element. You will need it to invoke ActionScript functions defined in the Flash movie, from your Javascript code.