Journal
CSS, Flash and XHTML
27 October 2005 › 19 comments
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 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.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Ryan Campbell
I haven’t played around with the Flash/JavaScript integration toolkit much, but it may be possible to build on this some more. Instead of just having a static loading page with no animation, use the toolkit to receive the percentage currently loaded. Make your own JavaScript/CSS progress bar, and update it through the DOM. Sounds good in theory, but I’m not sure of the specifics. Maybe someone can confirm if it is possible.
#2 Nathan Smith
I’m not sure how / if that would work, but it sounds like it should. That would be really cool, because you could use JavaScript to determine if there was an
object(assuming Flash) on the page, and it could automatically assign a loading screen to each animation accordingly. I hope that is possible, as it’d be some sweet implimentation of AJAX (another buzz word)!#3 Pascal
I just want to say that I find it a brilliant way to navigate through your portfolio. Clean and simple and it gives a good impression of your design skills. Very nice.
#4 sryo
i’ve fiddled with loading screens for my sites some time ago, the simplest way i found was with window.onload, so it’d be for the whole page.
#5 Yannick
Nice work Nathan! If/when I have to use a bit of flash for a project then this technique I’m sure will come in handy. What Ryan suggested also sounds good.
I also digg the new portfolio. :)
#6 Wesley Walser
Nice article, Flash’s transparency support is great for things like this.
Also note: premium linkage from Mr. Snook
#7 Elliot Swan
Nice work.
You should be able to do similar stuff for any image (not just flash). For example you’d have javascript prefetch the image, while you have your loading background placed behind it, so it shows while the image is loading. I’m in the process of redoing my portfolio, and I’ve been planning on implementing a similar trick.
#8 John Bedard
I’m thinking you could put a little more content in that background image, perhaps a blurb of text about your design philosophy or maybe a montage (I hate the word collage) of some of your best work. Then when the flash movie is done loading, the first keyframe has a stop with a button that appears floating in the corner that says, “Continue…” or “Loading complete” or even “Go!” Depending on all the different combinations of variables (connection speed, file size, user reading speed, etc.), the user can continue reading or viewing the CSS placeholder image and proceed at his/her convenience. Mostly I’m thinking this would be handy in the case of text in your background image, not so much a sampling of images.
But then again maybe I’m getting too close to the dreaded and oft criticized splash screen that always seems to be paraded out as one of the things wrong with Flash.
#9 Cody Lindley
One should consider the limitations of the transparent technique… : – )
Just Keeping you honest Nate.
Limitations:
While this effect may seem very useful, there are a great deal of limitations and incompatibilities that might make you re-consider your decision to use this effect:
* The following browsers currently support windowless mode:
Windows and Mac OS X
– Internet Explorer 3 or higher (Windows)
– Internet Explorer 5.1 and 5.2 (Macintosh)
– Netscape 7.0
– Mozilla 1.0 or higher
– AOL
– CompuServe
* Most versions of Internet Explorer running on a Macintosh system will not display the animation properly.
* Mac Classic is not supported for this feature. Transparent backgrounds are also not possible in a Flash standalone projector.
* Making the animation transparent will display anything below the empty spaces of an animation, but the Flash animation will still be stacked higher than any surrounding object. Therefore, creating JavaScript/DHTML menus that go below the Flash animation will not be possible.
* If windowless mode is used, performance can be affected to some degree. If fastest performance is a top priority, you may consider other design options.
#10 Nathan Smith
John: That’s an excellent suggestion! I’ll look into doing something like that. That would be pretty cool I think. I was considering maybe putting the instructions for navigating the portfolio as a background image, but I think that would keep it from being accessible to blind users. Then again, there’s no way for them to appreciate the Flash presentation as it is. Still, I think though, that nothing too crucial should be placed as text in the background image.
Cody: Why do you have to rain on my parade? I think I’m okay with these acceptable limitations of
wmode. I don’t mind alienating the twelve people that still use Mac IE 5. I figure, if they’re Mac users they should be smart enough to be using Safari anyways. Plus, Mac IE doesn’t come pre-installed anymore, as of the OSX Tiger release. By the way – Good point about the JavaScript loader not working as a back layer! Re: performance, it works well enough.#11 Cody Lindley
Like I said, just keeping you honest. I’m sure you would do the same for me.
#12 Richard
I don’t know about the javascript communication. I’m guessing the idea would be to use Flash’s getBytesLoaded() and getBytesTotal() to pass information, but if the movie doesn’t play until fully loaded, how is it going to run Actionscript to get that info or pass it on?
Performance can go way down with a transparent window, especially for people with older versions of the plug-in and/or those on a Mac. I recently had a project where the performance increased at least 50% by converting it from using a transparent background to no transparent background.
#13 Nathan Smith
Richard, that’s the problem I was trying to get around – the need for the Flash movie to start to display as the loading screen shows. As far as performance, check out my portfolio section, and let me know if it lags too much. For this case, I don’t think that there is enough animation to really make a difference. But, I could be wrong.
#14 Johan Sundström
Ooo, shiny! This really is purity, standards excellence, pragmatism and terseness, all in one tiny little package. Thanks for the tip! I had never imagined Flash could be so neatly integrated with the classic web at such a low cost.
#15 Nathan Smith
Johan: You’re welcome. I’m like you, and prefer the simplest and easiest solution to most web problems. I knew there had to be some better way to do a loading screen, other than having to add additional stuff to a flash file, so I did some searching around, and figured out that there’s this easy way to add transparency via HTML.
#16 Geoff
You could use FlashObject to embed the Flash movie – that would let your pages validate, and it will do plugin detection for you, too.
Also it’s really easy to build your flash movies in a way so that there isn’t really any time between the page loading and your preloader showing up.
So the performance tradeoff for using wmode=transparent (it’s even worse on OS X) isn’t really worth it in most cases.
#17 Nathan Smith
Geoff: I didn’t realize
wmodesupport was so bad on OSX. I’ll have to check it out when / if I get a Mac Mini. It’s odd that it causes problems, as I consider that to be the superior of the two OS’s, when compared alongside Windows.#18 julie
I am Facing a problem that … Ihave created a Gif animation in Adobe Imageready . I want to use that Gif animation as a background image. And I want to place some data table on it. But I am getting it local system succesfully. But On Server (online) I am not able to get that gif animation. So please help me If you can.
And also one more thing I was tryied With Falsh SWF also Nut I din’t got it. Please help me if you can by both ways.
#19 Nathan Smith
Julie: I would check and make sure that you are not referencing a local file. If your
a hrefbegins withC:\then you are linking to your background GIF incorrectly. Make sure that it is a relative link, so that it works when you have uploaded it to the server. The same goes for the Flash file, link it correctly.