HOT FIX!
Active Content Issues With Internet Explorer
Skill level: Intermediate
Programs used: Any HTML editor or notepad
Attachments: active_content_fix.zip
Have you noticed anything unusual about the way active content (Flash, Shockwave, Adobe Acrobat) is displaying and functioning in Internet Explorer lately?
Back in February 2006, Microsoft released an optional update for their Internet Explorer browsers that requires users to click on active content before being able to interact with same. From a designer's standpoint this is not nearly as big a deal as the ugly border that now appears around a flash element upon mouse over.
Functionally, however, it does create problems for flash buttons and other clickable items as the initial "click" only activates the active content but the intended result from clicking the item is not achieved until there is a second click (the first to "activate" the interactive element and the second to actually navigate to the intended destination).
Fortunately, our friends at Adobe have created a fix for us!
The easiest way to fix pages with active content (Flash, in the case of this tutorial) is to upgrade to Dreamweaver 8.0.2 (or greater). When you open a page in DW8, the software scans your document for any instances of active content. If active content is found in the document, you will be prompted in the following manner:
Clicking "yes" to the above prompt will cause Dreamweaver to do the following:
1. Dreamweaver will encase your <embed> tags with <noscript> tags.
2. <script> tags will be added that enable the functioning of the active content through JavaScript functions located in an external file
3. Dreamweaver will create this external JavaScript file for you (AC_RunActiveContent.js) and place it in the "Scripts" folder in the root which it creates for you as well.
This is the easy way. But what if you don't have Dreamweaver 8.0.2 or greater? It's still not overly complicated but takes a little thought and attention to detail. I'll guide you below.
1. First, download the zip file we have made for you here.
2. Place the .js file you downloaded in a directory on your website ("scripts," for example)
3. Place the following code within the <head> tag of your document:
<script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>
4. Adjust the line of code above where [path] = the name of the directory where you placed your .js file in step 2.
5. Encase your current flash code with <noscript> tags, as such:
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="760" height="550">
<param name="movie" value="my/flash/movie.swf">
<param name="quality" value="high">
<embed src=" my/flash/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="550">
</embed>
</object>
</noscript>
So far, so good! Here is where a little thought and attention to detail comes into play. You now need to put into use the JavaScript file we downloaded and placed into a directory on your server. Here's what you need to do:
6. Call your JavaScript function and replace all instances of your <object> and <embed> tags, including the <param> tags, with the appropriate function calls as such:
<script type="text/javascript">
AC_FL_RunContent (
'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash .cab#version=6,0,29,0',
'width','760',
'height','550',
'movie','my/flash/movie',
'quality','high',
'src','my/flash/movie',
'pluginspage','http://www.macromedia.com/go/getflashplayer'
);
</script>
IMPORTANT NOTES:
• All arguments must be in name/value pairs
• If you do not have an even number of items, you made a mistake classid and mimeType are inserted automatically – you do not need to insert them in your script. If they need to be altered do so in your AC_ RunActiveContent.js doc and NOT in your HTML doc.
• In your code at the 'movie' and 'src' arguments, do NOT include the file extension of your active content (.swf) – it will not work if you include it.
One more example that puts it all together and shows what it looks like when you use more <param> tags:
<script type="text/javascript">
AC_FL_RunContent (
'codebase','http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0',
'width','734',
'height','29',
'id','tuner',
'name','tuner',
'align','middle',
'allowScriptAccess','sameDomain',
'movie','flash/tuner',
'quality','high',
'bgcolor','#121212',
'src','flash/tuner',
'pluginspage','http://www.macromedia.com/go/getflashplayer'
);
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="734" height="29" id="tuner" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash/tuner.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#121212" />
<embed src="flash/tuner.swf" quality="high" bgcolor="#121212" width="734" height="29" name="tuner" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>
That's all there is to it! If you've been befuddled by that annoying IE "fix" this will restore your sanity in no time at all.
Enjoy!
