Fixing the Flash/Embed Issue
       by kirupa  |  19 February 2006

Due to a patent ruling, plug-ins loaded using the embed, applet, and object tags will no longer be interactive unless the user actually clicks on the plug-in object first:

[ you must click before you can interact with embedded plug-ins ]

As of this moment, only Microsoft's Internet Explorer browser is affected. Unless web developers ensure their Flash content is not loaded via the popular embed, a method provided by even Macromedia's default HTML publishing method, all visitors who are running an up-to-date version of IE will see the above "Click to activate and use this control" message when hovering over a Flash animation.

Note

All embedded plug-in content will display as usual. You simply will not be able to interact with the content unless you click on it first.

Both Microsoft and Adobe have provided useful suggestions on how to fix this issue, and in this tutorial, I will be providing instructions on how to use the FlashObject method to easily display Flash animations without the hassle of having to have your users click first.

Let's get started:

  1. Download the FlashObject JavaScript file by clicking the following link:

Download FlashObject Script

  1. Unzip your recently downloaded flashobject.zip file to the same location as your HTML page that will display your Flash animation:

  1. Now, use the following Flash script to generate the HTML tags required for displaying your animation. Enter your animation (SWF) file's path relative to your HTML file, the width of your animation, and the height of your animation and press the oversized Generate Code button:
  1. Copy and paste the generated code into the location in your HTML file you want your animation to be displayed.
  2. If you want to upload the files to your server, just make sure to upload your SWF, flashobject.js, and HTML file (if you need to). Double-check the paths to make sure your SWF and FlashObject file paths still work online.

If everything worked out, you should be able to interact with embedded Flash content without having to click on them first.

Information for Pages with Multiple Animations
First, if you are using the above Code Generator for multiple animations on your page, be sure to only keep the first appearance of the following code:

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

While most browsers will cache multiple calls to the same file (flashobject.js), some may not depending on what your site's caching settings are.

Second, according to the code, your Flash animation will be placed wherever the flashobject div tag is. If you have multiple animations using the same generated code, make sure to change the reference to something else:

<div id="flashcontent" style="width: 765px; height: 58px">
 
<script type="text/javascript">
var fo = new FlashObject("http://www.kirupa.com/swf/headerv2b.swf", "animationName", "765", "58", "8", "#FFFFFF");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent");
</script>

If you do not ensure that each FlashObject method points to a different div name/location, you will find animations with duplicate div names loading in the same place. You probably do not want that!

Need Help?

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.