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
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.
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
method to easily display Flash animations without the hassle of having to have
your users click first.
Let's get started:
- Unzip your recently downloaded flashobject.zip file to
the same location as your HTML page that will display your Flash animation:
- 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:
- Copy and paste the generated code into the location in your
HTML file you want your animation to be displayed.
- 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:
While most browsers will cache multiple calls to the same file
(flashobject.js), some may not depending on what your site's caching settings
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:
765px; height: 58px">
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!
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
Did you enjoy reading this and found it useful? If so, please share it with
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.