Syndicate

Feed
Home

STEP 1 of 3 : Preparation time

Saturday, 13 Jan 2007 — Caroline Schnapp

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.

Some well-known Javascript libraries to embed Flash “objects”

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”.

To be able to use the ExternalInterface “API”, we need to :

  1. Give the Flash “object” in the document tree a unique id attribute.

  2. 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 allowscriptaccess parameter 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 the allowscriptaccess parameter 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”.

Using ufo.js in 10 steps

  1. Copy the ufo.js file in your scripts folder.

  2. Link the file in, in the <head> of your XHTML file :

    <script type="text/javascript" src="javascript/ufo.js"> </script>

  3. Create a new .js file and link it in as well.

  4. 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.)

  5. 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>

  6. Test run your xhtml file. Is the Flash movie displayed ? Are your testing on a server, local or remote ?

  7. Take note of the unique id you gave to the UFO Flash object. In our example, it was ufoElementNodeId.

  8. Inspect the DOM tree.

  9. Troubleshoot.

  10. 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... }.

Using swfobject.js in 10 steps

  1. Copy the swfobject.js file to your scripts folder.

  2. Link the file in, in the <head> of your XHTML file :

    <script type="text/javascript" src="javascript/swfobject.js"> </script>

  3. Create a new .js file and link it in as well.

  4. 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.)

  5. 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>

  6. Test run your xhtml file. Is the Flash movie displayed ? Are your testing on a server, local or remote ?

  7. Take note of the unique id you gave to the SWFObject Flash object. In our example, it was swfObjectElementNodeId.

  8. Inspect the DOM tree.

  9. Troubleshoot.

  10. Take a break.

Using W3C-compliant XHTML markup to embed a Flash object

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.

Browse this article

up
Last edited by Caroline Schnapp about 15 years ago.
| | | | | | | |

Printer-friendly version | Login to post comments | 31620 reads

Comments

Thu, 2007-03-15 07:22 — Dicky (not verified)

Implementing this in Drupal

Your steps appear straight forward but for someone still getting to grips with Drupal how would you go about adding script to the head of your page?

I'm looking to add flash movies to the content of certain pages but without adding the javascript to the head of these pages the movies won't load. Help!

Thu, 2007-03-15 09:39 — Caroline Schnapp

In Drupal 4.7 or Drupal 5?

In Drupal 4.7.x, you have to invoke the php function drupal_add_js() to link in a javascript file. Then you have to use the javascript function addLoadEvent(func) to add some javascript code to execute when the web page is loaded (i.e. the DOM tree is built), what I refer to when I talk about windown.onload. Finally, you use the php function drupal_call_js() to output script tags on the page. Where do we call these functions? drupal_add_js() is what the swfobject_api module does, as far as I can tell. As far as the 2 other functions... I think they can be invoked from a node or block content, any node, and any block.

If you do not wish to use a module just to link in a script to your web page, you can do it by hand in your template file template.php file. You will find that file in your theme folder. For example, in Drupal 4.7:

  1. Copy the file 'swfobject.js' in your drupal 'misc' folder.

  2. Add the following line to your 'template.php' file:

    drupal_add_js('misc/swfobject.js');

Here is some documentation for us both to read : How to use Javascript in Drupal 4.7.x. In the same place in the handbooks (i.e. under Module Development) there is documentation on how to use Javascript in Drupal 5. Drupal 5 makes use of the third-party library jquery.js.

Thu, 2007-03-15 09:48 — Caroline Schnapp

My own experience

I'm looking to add flash movies to the content of certain pages but without adding the javascript to the head of these pages the movies won't load. Help!

Whenever I have added Flash movies to Drupal nodes, I have not used any javascript. Hence I did not run into any difficulty. I use plain and valid xhtml to embed my movies, that is, I do NOT use any embed tags. I do not use any module. I will certainly look into this whole issue of Flash movies in Drupal to write the 4th page of this article. I tested the contributed module swfobject once and was able to use it to insert a Flash movie in a block, and I was able to use Flash's ExternalInterface with that particular movie. I did this just to test things out, and it worked.

Thu, 2007-03-15 12:17 — Dicky (not verified)

Using valid xhtml to embed movie

I have tried and failed using xhtml to embed my movie, no doubt you're thinking what's up with this guy?!

I have taken the code you gave. In Administer mode I edited a page and added the code, with my file name for the swf, to the body section but with no effect? Am I adding it in the correct place? Is it a matter of getting this code right?

Thu, 2007-03-15 17:16 — Caroline Schnapp

hold on

with my file name for the swf

That's not enough. It probably has to do with the path to the file... can you copy and paste the exact code here? You can send your code also in a "private message", I will definately test it. Do these 2 things, if you want! => send me the code you use to embed your Flash movie and tell me where you put your Flash movie, in your Drupal install folder structure. All that in a private message, if you prefer :)

As a quick way to fix the problem, you could try this:

  1. Put your Flash movie in your files folder, in a subfolder called flash.

  2. Use this for your path:

    "<?php print base_path(); ?>files/flash/movie.swf"

And set your input format to php.

Fri, 2007-03-16 13:57 — Caroline Schnapp

Use an absolute path

You can do a View Source on the above movie to see the XHTML.

The code here is :

<div><object type="application/x-shockwave-flash" data="/files/swf/bag_cached.swf" width="150" height="150" id="flashMovieId">
<param name="movie" value="/files/swf/bag_cached.swf" />
</object></div>

Don't forget to USE the FULL HTML input format because you don't want your Drupal filter to strip your object tags! :)

Notice how the path (specified in object:data and in param:value) starts with a slash. You can write absolute paths, or you can use some php : print base_path();... given that you set your input format to php, just the way I have explained in my last comment.

<div><object type="application/x-shockwave-flash" data="<?php print base_path(); ?>files/swf/bag_cached.swf" width="150" height="150" id="flashMovieId">
<param name="movie" value="<?php print base_path(); ?>files/swf/bag_cached.swf" />
</object></div>

Tue, 2013-03-05 10:49 — e-papierosy (not verified)

The Commercial License for

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 http://e-papierossy.com.pl/en/e-papierosy/67-e-papierosy-gombit-134577.html 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
http://e-papierossy.com.pl/en/e-papierosy/120-e-papierosy-gambit-77890.html much better and extremely suitable alternative is to install the free beta http://e-papierossy.com.pl/en/e-papierosy/70-e-papierosy-gombit-54246.html Internet Explorer Developer Toolbar. Works in IE6 and IE7. For ever. Then click on “View DOM”.

Fri, 2007-03-16 15:22 — GraceInSideOut (not verified)

:) Hello! I have no idea

:) Hello! I have no idea what you're talking about but HEY GIRL! Shouts Out from California!

Fri, 2007-03-16 18:35 — Caroline Schnapp

Hey girl...

Shouts out from Montréal LOL...
And... you think we know what we're talking about here..? Pffff... don't presume.

Tue, 2007-03-20 05:17 — Dicky (not verified)

Input format

Thanks for your help Caroline, your code works perfectly now I have changed the input format to Full html instead of Filtered html! A schoolboy error.

Ta
Dicky

Fri, 2007-07-27 22:55 — Anonymous (not verified)

sorry, but the 2 JS

sorry,
but the 2 JS libraries you talk about are NOT w3c compatible, they modify the DOM structure of the document using the innerHTML property, and NOT by adding childNodes (because it just doesn't work on Internet Explorer....)

Tue, 2012-06-19 04:06 — Rajasthan Tours (not verified)

very easy point.

I find that man strives to meet the needs of his audience. Similar ideas are popular amongst my friends. Your thoughts could be a fine college essay help in some days and they will be well assessed.

Thu, 2012-11-22 08:02 — property Mallorca (not verified)

I will follow your steps and

I will follow your steps and for sure I will have excellent results.

Thu, 2013-05-09 19:58 — Click here (not verified)

I recently need to point out

I recently need to point out I am simply novice to running a Javascripts and also truthfully loved your web site. Probably I am desire to take a note of your site . An individual definitely come with excellent articles and reviews. Respect with regard to sharing with us your blog.

Mon, 2013-05-13 22:52 — topiary (not verified)

http://topiarysg.com

preparation is always good. Hedges Park Condo, Topiary EC, Twin Fountains Woodlands