Search Safe Flash Intro

Among design professionals, Flash intros are not popular. Even so, sometimes a client will insist. I had this very situation recently.

I made the argument that it was bad for usability. No avail, working in a visual medium, they were very concerned with making a visual impact. I made the argument that it would be bad for search engines. No avail, the client was only concerned with visitors already familiar with the company.

Having failed to convince the client not to have a Flash intro on their site, I was left with figuring out how to best accomplish their request. I couldn't do anything about the usability (the intro did include a "skip intro" button though). The search engine problem, however, seemed like something that I should be able to solve.

The basic problem is that once a Flash intro has played, it forwards the user to the real home page. This act of forwarding the user either means that a search engine won't see the home page or it risks having the search engine mark the site as spamming the search engine.

To avoid this, I decided that I would have to replace the Flash movie with the HTML for the page once it was done playing instead of redirecting the user to another page. I also needed to make sure that users without JavaScript and Flash (including search engines) would get the home page directly.

The solution to this problem seemed obvious. SWFObject will replace the contents of an HTML element with a Flash movie if (and only if) the user has JavaScript enabled and has the appropriate version of the Flash Player installed.

Replacing the "body" element, however, doesn't really work (at least not universally). Replacing an element with styling works, but the styling remains. So, the page must have a top-level element with no styling for SWFObject to replace.

In my case, I gave this element an id of "toptop". So, I used the following JavaScript to load the movie (called from the window.onload event). 

function loadMovie() {
  var soIntro = new SWFObject(swfIntro, "intro-movie", "800", "800", 6, "#000000");
  preHTML = document.getElementById("toptop").innerHTML;
  soIntro.write("toptop");
}

Note the following line:
preHTML = document.getElementById("toptop").innerHTML;

This is because I need the HTML from before I load the Flash movie so that I can replace it when I unload the movie later. Note also that I did not use a "var" keyword with the variable. It needs to be available outside of this function.

Once the movie is done playing, it needs to unload itself and display the home page. To do this, I edited the Flash movie to call a JavaScript function to unload the movie:

getURL("javascript:unloadMovie()");

This calls a JavaScript function called "unloadMovie" that is on the page:

function unloadMovie() {
  document.getElementById("toptop").innerHTML = preHTML;
}

This loads the element with the HTML that it had before the Flash movie was loaded into it. Note that it loads only the HTML. If you have any set-up that you normally run on the window.load event, you will need to run it again here.

I only want the intro to play for the first visit to the home page for a browser session. In order to do that, I am going to use a cookie.

So, above my call to the function that loads the Flash movie, I add this JavaScript:

showIntro = <cfif isDefined("Cookie.ViewedFlashIntro")>false<cfelse>true</cfif>;

Note that while this uses ColdFusion, it would be just as easy to do in any other language.

Now I revise the JavaScript that loads the page to the following:

function loadMovie() {
  var soIntro = new SWFObject(swfIntro, "intro-movie", "800", "800", 6, "#000000");
  if ( showIntro ) {
    preHTML = document.getElementById("toptop").innerHTML;
    soIntro.write("toptop");
  }
}

After I set the showIntro variable in JavaScript, I need to make sure to set the cookie:

<cfif NOT isDefined("Cookie.ViewedFlashIntro")><!--- Set cookie if not yet set --->
  <cfcookie name="ViewedFlashIntro" value="#now()#">
</cfif>

Again, this could easily be done in any language. 

The end result of this effort is that the Flash movie loads only for users with Flash player installed and JavaScript running. This allows the site to have a Flash intro running without preventing it from being indexed by search engines or viewed by users without Flash player installed.

I set this up so that it would only play for the first visit to the home page (if it is the first page viewed on the site). Using this technique, however, I could have set it up so that the intro would play before the first page that a user visits, regardless of what page that is.

My forethought paid off as it was only a few weeks later that the client decided that they did, in fact, care about being reached by search engines. Fortunately, the site was already successully being indexed.

The next time that you have a client insist on a Flash intro, you can use the approach to ensure that the site is still indexed by search engines (and easily accessible for users without Flash and JavaScript running).