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.
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.
Browser compatibility
The current version has been tested in the following browsers but probably works in older browsers too:
- Firefox 3+
- Internet Explorer 6+
- Safari 3 (Mac), Safari 4 (PC)
- Chrome 4
- Opera 9
Previous versions of FlashScaler have been confirmed to work in Firefox 1, Safari 1.3, and IE5, and Netscape 8, so it is safe to say that FlashScaler works in any modern browser.
Changelog
v1.1, 04 March 2010:
I have updated FlashScaler to take advantage of the callback feature introduced in SWFObject 2.2. Now, when Flash detection fails, FlashScaler is disabled.
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!!!!!
9Rod
Jonathan, what a big help. We we’re managing this ok with a similar use of css implementation, but when we switched to swfobject 2, it just didn’t quite work. This works great though thanks alot!
10Thomas James Thorstensson
After an hour of looking for ANYONE out there that done this with 2.1 swfobject , I found it!
Great work! Keep it up!
Thomas
11gadz
I don’t understand the difference between the static and dynamic html files.
Can someone explain it to me?
12Jonathan
@gadz: You can read about the pros and cons of each method in the swfobject documentation: http://code.google.com/p/swfobject/wiki/documentation
In short, static embedding uses more standards compliant markup, whereas dynamic embedding avoids the “click to activate” issue in Internet Explorer, and is comparable to the way previous versions of swfobject worked.
If you are unsure, I would recommend using dynamic embedding.
13gadz
Thank you Jonathan.
Really great script by the way! The only problem I’m having is getting the fullscreen flash to center on page load, although perhaps it is an actionscript issue (I already have it to center on resize).
14Jonathan
That’s an actionscript issue. You just need to call your resize function when the movie loads.
15Isabel
This is really great, it was easy to setup and works like a charm. I do have one question: I noticed that when I enlarge the window quickly, there is a lag until the swf is resized and I get this white space for half a second or so. Is there anything that can be done about it?
16Jonathan
@Isabel – The lag you are describing occurs while the web browser redraws the Flash movie. I’m afraid there is nothing you do about that, and it would occur whether you were using my FlashScaler script or not.
17Olivier
Thank you so much, i’ve tried swfforcesize then swffit but yours is the best limpid and powerful !
Olivier from France
18Daniel
Hi,
That’s an awesome script!
Thank You Very Much!
but i’ve some issue with firefox, it does not show my flash movie,
it does show yours but not mine,
what maybe the reasons for that ?
19tang
thanks
it really great ,i had try other full browser flash ,but not good as your.
20Perr
Hi,
This is a really great script!
But I found one thing that really weird in my Safari/FireFox/Chrome browser on my Mac !
As the demo files used below code, everything is fine:
scale = new FlashScaler(“flashcontent”,760,420);
The according DIV of course has to have a same id name: “flashcontent”.
However, if I capitalized both the C in “flashcontent”(changed to: “flashCotent”),
both the vertical and horizontal scrollbar appeared!
That’s really weird ~
Which means we can’t use Capital Letters in this situation…
Is this a bug or something?!
21Jonathan
@Perr – Don’t forget to update your stylesheet too:
#flashContent {
overflow: hidden;
}
22Perr
Well, it worked!
I didn’t know this trick tip before!
Thanks a lot !!!
23Flashie
Hi, Flashscaler works great on the SWF content. However my site has a pretty long alternate HTML content and I am unable to scroll when viewing the alternate content. I am using swfobject too. Please help, thanks!
24Jonathan
@Flashie – To be honest this isn’t usually a problem I encounter because I keep my alternative content very short. I do show expanded content to search engines, which I display below the flashcontent div.
But here’s how you would do it:
1. Replace js/swfobject.js with the latest version
2. Change the swfobject embed call to add a callback, and create a callback function that modifies the overflow property of the flashcontent div on failure:
function swfobjectCallback(e) {
if (e.success==false){
document.getElementById(“flashcontent”).style.overflow =”auto”;
}
}
swfobject.embedSWF(“main.swf”, “flashmovie”, “100%”, “100%”, “8″, false, flashvars, params, attributes, swfobjectCallback);
The reason that you need to upgrade swfobject is because callbacks were not added until v2.2. And the only change to the embed call is the addition of the last parameter, which is the name of the callback function.
25Flashie
Hi Jonathan,
Many thanks for the quick reply. I tried your method and it partially worked – the scrollbar now appears. However, when I resize the window smaller, there’s an extra scrollbar appearing. The second scrollbar seems to be from the original SWF/Flashscaler.
Here’s some of the lines I used:
============
var flashvars = {};
var params = { scale:’noScale’, salign:’lt’, menu:’false’ };
var attributes = { id:’flaObject’, name:’flaObject’ };
function swfobjectCallback(e) {
if (e.success==false){
document.getElementById(“flashcontent”).style.overflow =”auto”;
}
}
swfobject.embedSWF(“main.swf”, “noflash”, “100%”, “100%”, “10.0.0″, false, flashvars, params, attributes, swfobjectCallback);
========body html========
Long HTML content here…….
scale = new FlashScaler(“flashcontent”,800,675);
==============
FYI I also use SWFMacmousewheel and tested this on Mac FF/Safari.
I am not an HTML/JS coder so any help is appreciated. Thanks!
26Flashie
Hmm sorry, the formatting is gone when I pasted the codes above. Here is the screenshot instead:
http://imgur.com/xmsHd.png
27Jonathan
@Flashie – I have updated FlashScaler to solve this problem. Please download the lastest version. FlashScaler now has a disable() method, which is called when SWFObject Flash detection fails.
28Flashie
This works great! Thank you so much Jonathan!