CSS, Flash, and XHTML

— Topic: css

Buzz-Words?

No really, there is a good reason for the title of this post (not just doing SEO). I recently redid my portfolio section and in so doing, fumbled upon something I think is pretty cool. I've never been a big fan of Flash loading screens. I think that is because subconsciously, I know that designing and coding the loading screen adds additional loading time, as well as file-size. For simple flash animations, I opt to just leave this out altogether.

However, it's still beneficial to give your audience something to look at, even if it's just the word "Loading," so that they know something is happening, and there's not supposed to be a gaping hole in your design. That's where CSS comes in. If you are on a slow connection, you will notice that there is a "loading screen" on my portfolio page. This is accomplished not via Flash, but with a CSS background.

Flash + CSS background?

Yes, that's correct. Technically, the *.swf file is a movie, so how can we have a background? Well, that's the beauty of Flash. Because it's designed to handle vectors and PNG's so well, it also supports transparency. This can be handled with a simple value="transparent" added to the Flash param.

Now, if you're a web-standards purist, you're still thinking "So what, XHTML validation will go straight down the tube, so there's really no point." Hold on there amigo, because that's not really true. By using the object tag and not embed, we can pass the Flash animation to standards-compliant browsers, and it works just as expected. In IE6(Yuck!) though, this will cause the movie not to play until fully loaded (thus, not showing your precious loading screen).

But, we're talking about small Flash movies here. Plus, you shouldn't be designing huge animations anyways, if you actually care about the end-user. So, the problem of no loading screen due to the movie not playing until fully loaded is eliminated. We just serve the user a CSS teaser for them to stare at until the movie starts, and here's how it's done…

XHTML:

<p class="loading">
	<object type="application/x-shockwave-flash" data="/flash/movie.swf" width="450" height="340">
		<param name="movie" value="/flash/movie.swf" />
		<param name="wmode" value="transparent" />
		<param name="menu" value="false" />
	</object>
</p>

CSS:

p.loading {
	background: url(/img/loading.gif) no-repeat center center;
}

So there you have it folks, a simple headache-free way to let people know that their movies are on the way. The great thing about this method is, you can re-use your loading method across an entire site, or even several times on the same page. So, the next time you're dreading doing Flash for a client that just won't take "no" for an answer, save yourself some time and just add some lean XHTML and a CSS loading screen instead.

Me, elsewhere