Integrating the SWF and the HTML

The more and more I think about how Flash interfaces with the page and how things are changing in regards to how the SWF is presented within the mark-up, the more I think there has to be a better way of creating a unified experience that is reliable and simple.

How to Break it

Let’s say, for the sake of argument, that you have just started using SWFObject, and you have been experimenting with sending the Flash file dynamic variables based on what preferences the user has set in their respective browser. So what happens to your well designed and implemented SWF file if it gets indexed and someone links directly to it? Well, unless you’ve thought it through and added defaults to those variables being passed to the Flash interface – it breaks. Then the user moves on. Not exactly what you want out of your website right? Unless you’re a loon, you want people to actually view your website. So why make it so easy it for the site to be broken?

As a general rule, I think it’s because most folks don’t consider their website to be an application – which by nature, should be able to stand-alone. Right? Well, it is, and it should be considered as such. Furthermore, if you prefer that your Flash site be viewed at a specific size, within its designed environment, then why not just make it mandatory? Here’s an example. Look at the Zippo Hot Tour site, it’s a good, solid design that fits nicely in the page and screen. The graphics are tight, well optimized for its size, etc… And yes, I created this site, so I am partial. Now take a look at the SWF, opened in your browser. Exaggerate it by opening your browser full screen. Everything starts to fall apart. The graphics look like butt, and the only things that hold up are the vectors. Not at all what I have intended – right? That’s exactly what I mean. This is only partially a good example, since the site still functions – but you get the gist.

The fix

This isn’t anything mind-numbingly difficult either – but it is important. I use the SWFObject code exclusively on every Flash site I develop now. You should too – it rocks! So use it. The reason I mention this is because it is the best way to ensure your Flash site is accessibly in a seamless fashion to your viewers, and after all – that’s the whole idea; to create a immersive experience online. here’s the code from the Hot Tour site:

<div id="ZHTmainFile"></div>
                    <!– For FLASH CONTENT –>
                    <script type="text/javascript">
                        // <![CDATA[
                        
                            var so = new SWFObject("media/mainUI.swf", "Zippo Hot Tour – Where the Fans Choose the Bands", "750", "550", "7", "#000000");
                            so.addParam("quality", "high");
                            so.addParam("wmode", "opaque");
                            so.addParam("allowScriptAccess", "crossDomain");
                            so.write("ZHTmainFile");
                        
                        // ]]>
                    </script>

Pretty straight forward, nothing fancy. Now what I will add to create the feature to keep the display of the file limited to within its designed page is this:

so.addVariable("displayedInPage", "true");

After adding that to the SWFObject code, all you have to do is create a small function to check if that is true or false:

var displayLocation = this.displayedInPage;
this.checkLocale(this.displayLocation);

function checkLocale(inPage):Void{
    if (inPage != "true"){
        getURL("http://www.whatever.com","_self");
    }
}

That’s the easiest way to do it. And then your SWF file will always be displayed how you designed it be displayed. I know there are far more complex ways, and maybe even better ways to accomplish this – but this is a start. The nice thing about this feature is that the user doesn’t even really know what is going on behind the scenes. No new browser is opened, it doesn’t throw an error – all they know is that the site works and looks great.

Exactly.

It’s the little details that really make a site great. This is one of those details that is overlooked, and can go a long way to making the site feel complete.

%d bloggers like this: