Disclaimer : This stuff is experimental, I just started playing with it. It seems to work but is not extensively tested. I hope you’ll shoot comments, advices, ideas about using this technique and possibly improving it.
I have been working on a project for which the client required a flash intro (not that I like that but hey it’s business, sometimes you have to compromise).
Since I had never embedded a flash movie into a web page (usually, I advise against those), I had asked some help about the skip intro method, and Kudolink posted a really
smart method to do just that (using the template switcher, you should check it out !).
I did not yet implement that part, but I was after an another way to avoid redirecting the user to a new page at the end of the movie. I thought... well, there is AJAX, wouldn’t it be nice to have the movie load into one of those Box thingy (GreyBox, ThickBox, iBox....). At first I was not so optimistic about that, since most of those Box thing load when you click a link. That’s when I found
LITBox, and better yet
LITBOx w/Flash.
Now this already was interresting, I had a Box able to load a flash movie. But still, the sample code were similar to those on the author’s blog, like
this one. Meaning you had to click a link to view the movie. I wanted to have it launch on load. Luckily, LITBOX is "basically a few modifications of Thickbox made into a Prototype class based off of the Scriptaculous". A class ? Hmmm, would that mean using
Boby’s method could apply to the LITBox ? Well : yes !
You can see it there. (Edit : Actually you can’t anymore, client’s choice
I’ll put up another demo when I get the time...)
It’s a first draft and I will have to make sure it degrades OK but the basics is there.
Here is the call :
<script type="text/javascript"><!-- // --><![CDATA[
/* Observe when page loads and run the "init" function */
Event.observe(window, 'load', init, false);
/* When page is loaded, this function is called */
function init()
{
new LITBox('[(site_url)]assets/flash/intro-sworld.swf',{type: 'flash', draggable: false, height:387, width:648, flashheight:357, flashwidth:648, overlay:true, resizable:false});
}
// ]]>
</script>
I thought I would share