A new version means a new syntax, new file and most importantly, new features. It’s also worth noting that the JS file was compressed, so if I recall correctly, you’re saving a few KB this version.

Check it out here: http://code.google.com/p/swfobject/

I will have a tutorial up some time this week simplifying the details on how to use it.

This article will deal with why you shouldn’t use SWFObject to integrate your Flash piece into your website. If you’re interested in having a look at the original article where I highly recommend SWFObject as being part of all Flash Developer’s toolkit, click here.

In brief, SWFObject is a Javascript file that allows you to easily insert your SWF file into your webpage. It avoids the debacle in Internet Explorer where you “Click to activate and use this control“. It makes Flash more usable and more attractive because there are no longer any foreign or worry-some warnings for the user.

Adobe CS3 Accommodates This Problem

Adobe Dreamweaver CS3 and Flash CS3 already insert the required code to bypass the problem described in the introduction paragraph. Why should we worry about a problem that’s already fixed. If they’re taking care of all the nitty gritties, why download 3rd party scripts?

Adobe takes care of making the directory and throwing in the Javascript file. I don’t have to copy and paste SWFObject.js, make sure I have it in the right directory, read it in as code, etc.

If It Doesn’t Work, I Won’t Know Why

Adobe CS3′s solution will always work and takes care of auto-detection and errors I might make. If SWFObject goes wrong, there’s not much I can do apart from commenting on blogs and posting on forums. That could mean days until I find a solution.

Quality

Adobe’s solution likely had more research and people working on this fix to get the best results. When you really look at the code, they took everything into consideration including visitors with Javascript disabled.

One Less CSS Element

SWFObject requires you to make a CSS element for your SWF file to target. That’s an extra element you need to make sure functions correctly. CS3′s code lets you plunk your SWF without any hassles from CSS.

That’s everything I can think of, does anyone have anything else to add?

Search Engine Spiders + Flash = Bad

When a Search Engine spider (a bot on the internet that searches for websites and their content) comes across your website, it seems your website similarly to if you visited your website and viewed the HTML source. If your site is composed simply of a CSS stylesheet, a title tag and a flash file, that’s not much information to give to a Search Engine. Search Engines feed off website information and if it’s not given to them, you’re the one that loses.

Sure, you can say that being found on Google (or any other Search Engine) isn’t important to you, but when someone might have seen your portfolio in an interview and forgot your website URL, they might avoid the phone call and search you up on Google. If you’re not up there at the top, simply because you didn’t feel like dedicating the time to creating alternate, spiderable content, that’s too bad. Someone else might end up getting the design contract.

Making a Flash Alternate

The last thing a spider cares about is how pretty your site looks. That should be the last thing on your mind.

Thankfully, SWFObject makes it very easy to implement alternate non-Flash content. Briefly, how SWFObject works is that if the Flash Player requirement is met, it displays the Adobe Flash file in a DIV you specified, if not, the original DIV contents is left intact. What a perfect opportunity! You can download SWFObject at deconcept and/or look at past articles.

I Can’t Fit Flash Alt Content on One Page

Of course you can’t. Look at the approach I took. My portfolio site (made in Adobe Flash) is composed of three main sections: Home, Portfolio and Contact. What I did was I started with three pages: index.html, portfolio.html and contact.html.

In each of those pages, I litterally Copied & Pasted the content from my Flash file. Now that I have the content completed, I threw in links that help link to and from each page so that Search Engine spiders can follow the links and accumulate content.

One thing to keep in mind, if for some reason someone search Patrick Burt Contact on Google and ended up at the Contact page, I inserted my portfolio site on each HTML file I created so that a stranger would never have to bear the unformatted text.

What about Search Engine Optimization?

Search Engine Optimization, is a giant topic all to itself. If you’re looking on more information on Search Engine Optimizing your Flash site’s alternate content, I’ve written a few articles about it. For some quick tips: stick your name in the TITLE tag, stick it in the H1 tag, and use it in the body copy.

Good luck.

If you have no idea what SWFObject is, you can find an article here. Chances are, if you use SWFObject and you care about having a site that validates, you will come across this very minor problem. If you’re new to validation, don’t worry. This isn’t something to get all ruffled about. It’s simply means your SWFObject code is one step away from perfection.

The Problem

The problem is that SWFObject is creating a field similar to style=”". This will never validate.

Note: You will never see this by hitting View Source simply because Javascript (the language in which SWFObject is created) is executed by your browser after seeing the HTML source; whereas languages like PHP and ASP generate HTML source before your browser retrieves it.

The Solution

It’s good to know that the solution to this validation problem is a quick fix. If you open your swfobject.js file. In there, you’ll have to modify the two longest lines, they start with:

swfNode = ‘<embed type=”application/x-shockwave-flash”
swfNode = ‘<object id=”‘+ this.getAttribute(‘id’)

Further down both these lines you will have to remove:

” style=”‘+ this.getAttribute(‘style’) +’

What this does is prevent SWFObject from ever writing style=”" code (you’re going to use a div container anyway, no big loss). Not a character after, not a character before. Take off starting at the double quote, and take off the single quote.

If you’re still looking for them, both instances are located on lines 89 and 101. Also, if it seemed like you tried everything and something went bonkers. You can click here to download the fixed SWFObject.
Now if you’re having problems getting your site to Validate, it won’t be SWFObject.

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.