Billups Design

Recently at Billups Design we built a fully functional HTML replica of a client’s flash site and were puzzled as to the latest and best practices for integrating that HTML site with the existing Flash site to ensure the greatest usability and SEO results. We had a few options that came to mind first.

1. A splash page to allow the user to choose the HTML Site or the Flash Site.
2. A separate directory for the HTML Site to live that only Google would see.
3. A flash detection that would redirect the user to the HTML site if it didn’t have Flash, Google included.

None of these options were ideal. A splash page is a usability nightmare and putting the HTML site in a separate directory would still hurt users coming from Google results as the search engines would most definitely just send them to the HTML site, which defeats the purpose of having a Flash site in the first place. So instead we took some inspiration from Damien Bianchi at Adobe.com and put the HTML and Flash in the same directory using tricks to serve up the appropriate Flash content that cooresponded to each HTML page.

1. A splash page to allow the user to choose the HTML Site or the Flash Site.
2. A separate directory for the HTML Site to live that only Google would see.
3. A flash detection that would redirect the user to the HTML site if it didn’t have Flash, Google included.
4. Flash detection to serve up the SWF or the HTML in the same page.

Creating the HTML Site.

There were two goals in creating the HTML site.

1. Improve SEO Results
2. Have a Good User Experience Fallback for Users Without Flash

For the first goal it was just a matter of adding an HTML page to correspond to each “page” in the Flash version of the site. The HTML uses all static content, rather than pulling the content from the XML files the Flash version uses, so search engines won’t have any trouble reading it. We also took care to use the best practices for SEO HTML markup. That is, we used the appropriate heading tags, alt tags on images, etc.

The second goal was a little trickier. Flash is a great platform for smooth animations and unorthodox layouts. Thus, replicating its strenghts with HTML/CSS/Javascript can be a bit tricky. We put to use jQuery, a javascript framework, to make it a bit easier and reduce the heavy lifting of coding the advanced animations and DOM manipulation ourselves. We added in some various jQuery plugins like JScrollPane, jQuery Color Animations, and some other smaller ones to allow us to really replicate some of the cool things the Flash site did. Once it was all said and done we had a pretty good replica that forces you to look twice and even caught some people around the office here off guard at determining if the site if Flash or not. Once we knew it was hard to tell we figured we had created a pretty comparable user experience in HTML.

Adding the Flash SWF to the HTML Site.

Once the HTML Site was completed we had to add the SWF of the Flash Site to each HTML page. We wanted the site to have the HTML be static and the flash to replace it if the user had it installed. So we used SWFobject 2.0 to detect if the appropriate Flash version was installed and SWFobject replaced the container div of the HTML with the SWF file. Voila, we have all the benefits of HTML SEO with all the benefits of Flash. Now all we had to do was get the SWF to load the appropriate “page” depending on which HTML page it was on.

Adding FlashVars to Load the Appropriate Page and SWF Address

Since the Flash SWF loads on the homepage by default we had to find a way to tell the SWF that it wasn’t on the index.html page, but it was, for example, on the contact.html page. We added some simple FlashVars to each page with SWFobject to communicate with the SWF what page it was on. They looked something like this,

Hey everyone, it’s Ryan ….I secretly hacked in to Steve’s account and am posting in his newest blog. I’m kidding, as was the case with our Flash / HTML website integration, we’re gonna tag team this blog post like the Legion of Doom. I’ll help to shed some light on how we got our flash and HTML to play nicely together.

As Steve mentioned, we  used flashVars to pass in a page value (or string if you want to be exact). What we were really trying to accomplish was coming up with a universal link, that could be used outisde of the website, to funnel people in (regardless of what technology they may or may not have). We simply check the users machine for flash with swfObject and then serve them the best available technology (flash or HTML).  If it was flash, we used the flashVars string to help flag the correct page to  be displayed. I’m sure you’re sitting there thinking, how? Well it’s your lucky day, I’m about to explain how we went about accomplishing that.

For those familiar with swfAddress, this code should look familiar to you…..

*****just as a note, the code plug in we’re working with isn’t friends with the ampersand. && should simply be ‘&&’. I’m sure most of you caught it but I just wanted to point it out to avoid any confusion. It should be ……. if (_currentframe == 2 && value == ”).

If the current frame = 2 and the swfAddress JS is suppying a blank value, it just forwards you on to the next frame (which is the homepage). If it’s value is defined, it skips to that page. Easy enough right? Well, the dilemma was how could we get this to flag what page we wanted with a flashVars value without disrupting how the function would work throughout the site? If you haven’t noticed already, that SWFAddress.onChange function only appears once in your flash code and the flash platform allows you to “re-use” it by simply making a basic call to it ….like:

The function on frame 2 sends the ‘about’ value through the onChange function and spits the user out on to the about page. If we wanted to modify that main function, we could be doing (and did on several occasions ) some unforeseen damage to how the swfAddress will / would be able to function (beyond the home page). Obviously, we didn’t want that to be the solution for our end product. This really became one of those situations where it was just inevitable that we would really over think it before coming to a final conclusion. After a few random trial experiments, we unscrunched our foreheads, started laughing and realized how insanely simple this actually was to accomplish. So what was the solution?

We added a new key frame to the timeline (inbetween the swfAddress.onChange function and the home page). Well, it wasn’t THAT simple. Instead of just forwarding the site on to the home page after it went through that conditional check (if it had a blank value), we just ran it through a sifter so to speak. If it had a blank value, I wrote a switch statement that would match the HTML page’s flashVars value to it’s intended page inside the flash movie. When it flagged a match, it changed the swf address value and forwarded it on to the desired page (i.e. if the flashVars value was ‘contact’, we forwarded it to the contact page). Here’s an example of what I’m talking about…..

The reason this works is that there’s only one occasion where the functions if / else statement forwards on to the next frame? Anyone have a guess? When the page is initially loaded (aka doesn’t have a swfAddress value). Any other time it bumps down in to the else portion of the conditional, drops it’s page value off at the coat check and gets forwarded on to that specific page inside the flash movie by swfAddress (like it would if someone pressed a button inside the movie). The only time our function will ever be triggered is when the page is loaded and that’s exactly how we wanted it to be. Any other time the frame is skipped over by the function on the previous key frame.

Hopefully that all made sense. Here’s the listed steps if you got lost:

1.) Express a flashVars value in your HTML. In our case, we used a string of letters.
2.) Use swfObject to check for flash.
3.) Use swfAddress to generate unique deep links.
4.) Add in a new keyframe between the sfwAddress value check function keyframe and the homepage keyframe.
5.) Write a switch statement on your new keyframe that takes the flashVars value and matches it to it’s existing page in the flash movie.
6.) Test, test, test.

Aside from the listed steps / examples, one place I would guess people will get hung up on is getting the added function / switch statement to move on to the home page (if that’s the desired effect). There are several ways you can accomplish it, so don’t over think it. I chose to just make the default state in the switch statement a play(); command.

Easy enough right? You could also supply the index.html page with a flashVars value of “home” or “index” and check for it specifically. Either way works, so use which ever one you prefer.

If you have any specific questions, post them in a comment and we’ll try to get back to you. As always happy flashing!

Last 5 posts by steve

• Why 2010 is Going to be a Great Year for HTML/CSS Developers - February 5th, 2010
• Being a More Efficient Web Designer - October 18th, 2009
• Taming Firefox's Button Element - October 5th, 2009
• Getting Your Pages Ready for IE8 - May 5th, 2009
• Review: MacRabbit's Espresso - April 14th, 2009

This entry was posted on Friday, May 1st, 2009 at 12:03 pm and is filed under Code, Tutorials, Usability.Tags: AS3, Flash, HTML, search engine optimization, seo, swf object, swfAddress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.