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.
44 thoughts on “Elastic Flash with scrollbars”
Comments are closed.
oh wow, its really good for me, because i am also working on it so it is really helpfull for me.
I’m trying to use your files by replacing the swf. file to the one i created, but it doesn’t show anything. Help
@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?
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!
@James – yes if you could please email your files: jonathan [at] f6design [dot] com
freaking awesome!!! I’ve been trying to find this for 2 hours.
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.
Holy. Freaking. Crap.
I <3 U
This changes everything!!!!!
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!
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
I don’t understand the difference between the static and dynamic html files.
Can someone explain it to me?
@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.
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).
That’s an actionscript issue. You just need to call your resize function when the movie loads.
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?
@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.
Thank you so much, i’ve tried swfforcesize then swffit but yours is the best limpid and powerful !
Olivier from France
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 ?
thanks
it really great ,i had try other full browser flash ,but not good as your.
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?!
@Perr – Don’t forget to update your stylesheet too:
#flashContent {
overflow: hidden;
}
Well, it worked!
I didn’t know this trick tip before!
Thanks a lot !!!
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!
@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.
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!
Hmm sorry, the formatting is gone when I pasted the codes above. Here is the screenshot instead:
http://imgur.com/xmsHd.png
@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.
This works great! Thank you so much Jonathan!
Hi Jonathan,
Stunning bit of script btw! But I have run into a slight problem. When I am using swf object i constantly get the…
“We have detected that you do not have the Flash Player plugin required to view this website.
Download the latest Flash Player for free! It takes just a few minutes to download and install.”
…error message. I am assuming that this error stems from swf object so could you please advise me how to set this up without swf objet and using Flash’s default embedding.
Many thanks
@Alan – Normally that would happen if you are using a Flash Player older than the required version specified in the SWFObject constructor, e.g. in the following example the upgrade message will be displayed if the user has no Flash Player, or a version older than 8:
swfobject.embedSWF(“main.swf”, “flashmovie”, “100%”, “100%”, “8”, false, flashvars, params, attributes, swfobjectCallback);
Sorry, but I don’t have any plans to modify FlashScaler to work without SWFObject .
I love you guys, this is just awesome…
Hey Jonathan, this helps me out a lot. So close….. but is there a way to have a maximum size, as well? Thanks again.
@David – How would you want a maximum size be implemented? I don’t think I can see how it would be desirable, or even possible…
Many, many thanks for this bro. I have been searching forever for a script like this.
cheers@ Jonathan
Thank you for sharing this information about scalable flash scrollbar. I found it very needful for me. Thanks
I’m also having any issue with Firefox. IE is money, but I’m getting an endless request to update / install flash for firefox.
Any help? I have updated to just shy of current 10.2 Beta that’s out in labs right now, so I really don’t get it.
Embeded published flash file is requesting 10.
I changed your script from 8 to 10.
Changed the c to capital C as some have stated above. None of this seems to get Flash site running in firefox.
Thank you so much for this script it’s wicked.
-CD
Ahh, Dynamic did the trick. Thanks again…Absoutely BEAUTIFUL script!
-CD
Jonathan – this is a wonderful script. Thank you so much for making it available to the public. I noticed you wrote this a couple years ago though, should it work on newer browsers? I noticed Safari 5.0.2 cannot detect the plugin. Is this an issue with your script or SWFObject? I don’t care too much about Safari (we are making a non-Flash site for all that Apple crap) but I wanted to know if I have somehow messed something up. Any help would be appreciated. Thanks again for being so generous.
I should mention I am using the Dynamic version.
@Jefro I just tested the two demos on this page in Safari 5.05 for PC, and they worked OK. Do the demos work for you? If they do then it must be a problem with the way you’ve configured the script in your web page.
I have no idea what was wrong so I just started over with your demo files. I’m a total JS noob and never would have figured this out on my own. I’m sorry to hear you’re done with Flash but I look forward to seeing what you cook up using other technologies. Thanks again!
@Jefro I’m pleased you got it working :)
Hi,
Great job, thanks for sharing!!!
One quick question. On Mac Safari (5.1.3) if the swf content higher than the screen the browser scroll appears but doesn’t move. Do you have any experience like that?
cs
@csongor I hadn’t noticed the bug you describe, but I no longer do any Flash development and it’s been a long time since I used this script myself. Sorry!
been looking for a script like this for a while,great share,thankyou