Monday, May 28, 2007

Internet Explorer Fun: What's the Deal with the Box Around My Flash?

This is an old topic, but since this blog is general to multimedia and many who are reading this blog are part of my Alternative Learning Environments class (GED 578), I thought I'd give you a little bit of knowledge from my end of the table in development. You may be wondering "what is that box that appears around my Flash movies when I view them in Internet Explorer?" Yes, I'm sure this has driven endless hours of insanity into your life as an Educational Multimedia student, and I am going to take some freedom to drive that insanity out of you.

So what is it? Well to keep a long story short the box around your flash movies is caused by a solution to the way ActiveX objects are handled in IE for embedding multimedia that came out of a $500 million dollar lawsuit on Microsoft by a company named EOLAS. I'll leave the details to the CNET article for you to read rather than rewriting what's already been written. What I want to focus on instead is showing you different work-arounds that have been created in the development community for avoiding this click-and-activate box that appears around embedded media.

There are currently two very popular methods to this problem and one not so popular that I believe to be a very strong solution. These are:
1. SWFObject (aka FlashObject) - the most widely used solution
2. UFO - second most popular solution
3. ObjectSwap - not so popular solution but probably one of the easiset to implement

Let me start with the SWFObject solution. SWFObject, formerly known as FlashObject, is a small javascript file that you use to do the embedding of your Flash movie into your HTML web page. Then you use a small amount of script to do the embedding of your flash movie as in the following example:

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

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

As you may have noticed in the example above, SWFObject allows for a number of additional paraameters to control the way your movie is embedded. In fact this also allows you to use flashvars in the same manner so you don't lose any features from the original embedding methods. Please visit the SWFObject website for full documentation.

The second method, UFO, which stands for Unobtrusive Flash Objects, also uses javascript to embed your movie and might be your solution of choice if you're a strong supporter of W3C standards. You simply include a javascript file, usually called UFO.js and use a script similar to the following to embed the movie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Unobtrusive Flash Objects (UFO) | Sample page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="ufo.js"></script>
<script type="text/javascript">
var FO = { movie:"swf/myMovie.swf", width:"300", height:"120",
majorversion:"6", build:"40" };
UFO.create(FO, "ufoDemo");
</script>
</head>
<body>
<div id="ufoDemo">
<p>Replacement content</p>
</div>
</body>
</html>

You can see the the code is very similar and minor differences are the way you tell the method what ID element to use for writing the code into. As with the previous method please visit the UFO site for full details on how to use the method.

For the third method, ObjectSwap, this is the newest method out of the three and may help you fix your files in a much easier method. This may be the method of choice for you if you don't want to deal too much with writing too much code or dealing with javascript. This method can be as simple as including the ObjectSwap javascript file into your HTML files and that is it. The javascript method will read through your HTML file and replace all your embed and object tags with it's own fixing all embeded objects in web pages. One thing I like about this method is that you only have to do it once in the head section of your HTML file and vuala! Here is an example of all you would have to write in your HTML page:

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

... and that's it, ObjectSwap will do the rest for you. Of course their are other things to consider for different situations but for the most part this will work. For more details visit the website for this method by clicking here, and you can thank me later!

Your welcome and Happy Flashing!

No comments: