Skip to main content

Adding Flash that links to an external site

It should be so simple.

All you want to do is embed a Flash file in one of your pages. You want it to display properly in IE and Firefox (sorry, Opera!), and you also want a new window to open when the user clicks the link.

Seems easy, but there are a few problems that you'll probably encounter:

  • The classic way of embedding Flash is not standards-compliant
  • IE displays this crappy tooltip over the Flash file that reads "Click to activate and use this control", which forces your users to click your Flash file just to see it ... not cool
  • Pop-up blockers are blocking your link

Happily, there is one easy solution to all of these problems: SWFObject.

Solution

Here's what you do:

  1. Get the SWFObject script and upload it to your web server.
  2. On your page, within <head>, link to the script:

    <script type="text/javascript" src="js/swfobject.js"></script> 
  3. Create a <div> to hold your Flash file:
    <div id="flashContainer"></div>
  4. Enclose alternate content within your div, so that people who don't have Flash will still see something. For example:
    <div id="flashContainer">
      <img src="aRegularPicture.png" alt="Cute puppy" 
           width="300" height="280" />
    </div>
  5. Somewhere after the above block of code, create a new SWFObject as follows, changing the variables as necessary:
    <script type="text/javascript">
      var so = new SWFObject("path/to/flash.swf", "mymovie", "400", "200", 
                             "8", "#FFFFFF");
      so.addParam("wmode", "transparent");
      so.write("flashContainer");
    </script>
    

    The parameters are pretty self-explanatory, but a few notes:

    • The first numeric value is width, followed by height
    • After height comes the minimum Flash version the file supports ("8" above)
    • The last value is the background color

    The author of SWFObject, Geoff Stearns, has done a perfectly fine job explaining these parameters, and also has a few examples.

And that's it!

Some notes:

  • The line where we set the wmode to transparent is what keeps the pop-up blockers from blocking our link. The user Nutrox on the Ultrashock Forums has posted a lengthy description of why this works.
  • If you really want to do this the right way, you shouln't just plop the SWFObject creation code into your page. Nor should you call the script using the onload event handler, like this:
    <body onload="insertFlash("flashContainer");" > // BAD!

    Instead, use a separate script to add an onload event listener. The easiest way to do this is with jQuery (use the .ready() function, which totally rules).