Flash People Need To Know This

As you may or may not know, because it is likely you do all your design on a Macintosh computer, Microsoft has rolled out an update that seriously cripples how Adobe Flash works in updated Internet Explorer versions. Users with Internet Explorer 7 or an updated version of Internet Explorer 6 need to be prompted before Flash objects are run in the browser. Not only are you prompted, but in Internet Explorer 7 (IE7), a disgusting border appears around all your Flash objects. (see image)

This becomes absolutely disgusting especially if you’re trying to hide the fact your flash is in a box and you’re trying to blend it into the background. For an example of a “blended” Flash object see my portfolio site. It definitely isn’t any better in Internet Explorer 6 (IE6) either:

The reason this all happened is explained in the following article. In brief, without going into nerd speak, Microsoft got into a lawsuit because how it displayed ActiveX (or Objects in our case) in its browsers was a patent infringement. The “Click to Activate” (IE7) and “Click to Run an ActiveX control on this webpage” (IE6) are bypasses that Microsoft included in their browsers.

The solution to this IE6 and IE7 problem

The trick is to not use an object tag. The people over at deconcept have developed a Javascript file that helps insert any and all Adobe Flash files on to your webpage. You can head over to this page to download it.

The general code layout is the following:
<script type=”text/javascript” src=”swfobject.js”></script>
<div id=”flashcontent”>The code replaces this text.</div>
<script type=”text/javascript”>
var myVar = new SWFObject(”movie.swf”, “mymovie”, “400″, “200″, “8″, “#336699″);
myVar.write(”flashcontent”);
</script>
So, let’s break it down:

<script type=”text/javascript” src=”swfobject.js”></script>
This loads all the code you downloaded. Be sure to have the .js file in the same directory as your .html file.

<div id=”flashcontent”>The code replaces this text.</div>
You’re creating a div container for which to insert the flash code into. Remember if the browser doesn’t support Javascript, the user will see what’s placed here. A user will also see what’s inside here if the Adobe Flash Player requirement was not met.

<script type=”text/javascript”>……</script>
This tells your .HTML file that everything between these tags is in Javascript.

var myVar = new SWFObject(”movie.swf”, “mymovie”, “400″, “200″, “8″, “#336699″);
myVar.write(”flashcontent”);
The fist line creates a new Object with the following default fields:

SWF file: movie.swf
SWF name/title: mymovie
Width: 400 (in pixels)
Height: 200 (in pixels)
Adobe Flash Version Req: 8 (this can be very detailed with numerous version numbers, eg. 8.0 or 8.0.33)
Background Color: #336699 (replaces the default white block that appears for a short second when you load the page)

The second line then inserts the “SWFObject” that was created using the parameters into the div container specified.

Additional SWFObject options

A popular option is to make your Adobe Flash SWF file transparent. If you used these in the <object> days, it looked similar to wmode=”transparent”. All you need to do is insert the following between the “var myVar” line and the “myVar.write” line.

myVar.addParam(”wmode”, “transparent”);

I just touched the absolute necessities of SWFObject, if you’re looking to learn more there’s even more documentation at the official deconcept site.

Related Posts

• 5 Reasons To Use Flash On Your Website
• 6 Reasons Not To Use Flash On Your Website
• 10 Flash Design and Development Tips Part 1