Elastic Flash with scrollbars
In the past couple of years it has been common for Flash developers to design elastic sites, rather than sites with fixed dimensions. These elastic sites fill the browser window, and content is positioned programatically on the stage according to the size of the viewport. The trouble with this approach is that because the width and height of the embedded Flash swf are set to 100%, the browser will never display scrollbars. If the user sizes their browser window too small then content will begin to disappear off screen. Due to the lack of scrollbars, this hidden content is inaccessible to the user.
By writing a small JavaScript function that is triggered when the window is resized, we can overcome this restriction. When the window size is detected to be smaller than a minimum width/height specified by the designer, the Flash movie will stop scaling, and scrollbars will be forced to appear.
FlashScaler class
I have written a JavaScript class that takes care of resizing the Flash movie. FlashScaler is designed to integrate nicely with the SWFObject method of Flash embedding, though it will work fine without SWFObject too. With a sprinkling of CSS applied to your HTML document it will work just dandy in any modern browser. So far I have tested in:
- Firefox
- Internet Explorer 5+
- Netscape 8
- Opera 9
- Safari 1.3
UPDATE: FlashScaler is confirmed to work with SWFObject 2. The demo and download below now use SWFObject 2.1.
Demo
See FlashScaler in action (SWFObject static publishing example)
See FlashScaler in action (SWFObject dynamic publishing example)
Download
The download pack contains all of the files used in the FlashScaler demo. If you take a look at the HTML, Flash and CSS files included in the pack it shouldn’t be hard to figure out how it all fits together. Feel free to use my FlashScaler class in any of your personal or commercial projects.
Comments
Add a comment
Comments are moderated, so your comment will not appear on the site immediately.
1jackdavid
oh wow, its really good for me, because i am also working on it so it is really helpfull for me.
2James
I’m trying to use your files by replacing the swf. file to the one i created, but it doesn’t show anything. Help
3Jonathan
@James - OK, first things first. Can you confirm that the demo runs after you download it to your local machine and extract it. ie: it runs using my main.swf file?
After that, can you confirm that when you swap your swf for mine that your swf is named main.swf?
Can you also please tell me your web browser, operating system, and version of Flash you have published to?
4James
Hello Jonathan,
Thank you so much for the fast response, I’ve been looking for this for my site and it was hard to find.
I downloaded your demo and uploaded into my server and it doesn’t work. Also the Demo doesn’t run on my computer. However your online demo works well and its viewable on all my computers.
I didn’t swap the .swf’s. i just changed the name on the script to my .swf . Should i have not done that?
As far as browser: I test all my file on the latest PC/Mac computers. Im running Flash 8 and have the latest Flash Player.
If you like i can email you my file’s!
5Jonathan
@James - yes if you could please email your files: jonathan [at] f6design [dot] com
6matt
freaking awesome!!! I’ve been trying to find this for 2 hours.
7Jonathan
One of my readers, René, asked me if FlashScaler works with SWFObject 2. Yes, it does, with a few tweaks. The demo and download above now include working examples using SWFObject 2.1.
I think it is worth pointing out that FlashScaler is not in any way dependant on SWFObject. I use SWFObject for Flash detection and embedding because it is the industry standard, but if you prefer to embed your Flash movies by another method, FlashScaler will still work just fine.
8Brian
Holy. Freaking. Crap.
I <3 U
This changes everything!!!!!