WEB DEVELOPMENT BLOG

The Web Development Blog has moved to http://www.heidicool.com/blog/. Please visit me there to read the latest entries and to update your bookmarks and RSS feeds.

April 19, 2007

Embedding Flash Objects for Internet Explorer

Last week a colleague wrote to ask why she had to push a button to see her Web site and why it was loading so slowly. I took a look at the site, and had my usual reaction. "It looks fine in Firefox, let me check Internet Explorer."

When I checked in Explorer I saw just what she meant. Her site uses Flash, and due to a lawsuit between Microsoft and Eolas, Internet Explorer no longer processes <object>, <embed> or <applet> in the way that it used to. Now instead of using <object> to embed a Flash file, you need to use javascript in order for Internet Explorer users to load the content automatically. While this isn't a particularly new problem—it's been around for about a year—it's the kind of thing you might not notice unless you use Internet Explorer on a regular basis.

If you are currently using the old method to embed flash files, and you have Internet Explorer users who visit your site, you may want to consider using one of the new javascript methods. I've experimented with a few and found the SWFObject script to be the easiest to implement. If you have a better method, please share it in the comments section below.

Using SWFObject to embed Adobe Flash Content

While all the instructions and files you need are available on the SWFObject Web site, I thought it might be useful to give a quick overview of the process here.

1. Download SWFObject 1.5, extract the files from the zip file and place swobject.js in your Web site directory.
2. In Dreamweaver or your preferred editor, open the html file that includes your Flash content.
3. Add <script type="text/javascript" src="swfobject.js"></script> within the head tags of your file, making sure to specify the correct path to swfobject.js
4. Replace the code you are currently using to embed your Flash file with
   
   <div id="flashcontent">
   <img src="http://blog.case.edu/webdev/2007/04/19/active.jpg" width="180" height="300" alt="animation" /> </div>
   
   <script type="text/javascript">
   // <![CDATA[
   
   var so = new SWFObject("http://blog.case.edu/webdev/2007/04/19/active.swf", "sotester", "180", "300", "7", "#93a530");
   so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
   so.addParam("scale", "noscale");
   so.write("flashcontent");
   
   // ]]>
   </script>
   
   
   The newly created <div> is used to hold the content that will be shown to users who don't have Flash enabled in their browser, while the script information tells the browser what file to get and what parameters to implement.
5. Edit this content to specify the correct paths to your image and swf files, width and height of the elements, version of Flash you are using, etc. For illustrative purposes I've kept the above example fairly simple. It's the same code I'm using to embed the animation on this page. For your purposes you may want to include additional parameters.
6. Upload your files and test in Internet Explorer and your usual browser.

That's pretty much it. To learn more about the process or to customize it for your particular needs visit the SWFObject Web site.

Activex Resources

• Activating ActiveX Controls (Microsoft Developers Network)
• Active Content Developer Center (Adobe)
• Active Content FAQs (Adobe)
• Active Content Update: Before and after examples of the JavaScript solution (Adobe)
• Active Content Update: Preparing your website to handle the Microsoft changes to Internet Explorer(Adobe)
• Loading Interactive Controls Externally (Microsoft Developers Network)
• SWFObject: Javascript Flash Player detection and embed script

Stumble It!

Posted by: Heidi Cool April 19, 2007 04:02 PM | Category: Heidi's Entries , How-to , Tips and Tricks , XHTML

Posted by: hac4 (Heidi Cool) April 19, 2007 04:02 PM | Comments (8) | Trackback

© 2004-2008 Heidi Cool • Kevin Adams • Case Western Reserve University