swffit (formerly know as FitFlash) is a smart script that resizes your flash movie automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution.
Download swffit (released 03/27/2008) - SWFObject 2.0 Download FitFlash 2.5 (released 01/23/2008) - SWFObject 1.5Comments
Post a Comment
Powered by Comment Script
Subscribe to the RSS feed to keep in touch of new updates..
Thanks for visiting !
This script complement the essential toolkit of swfObject and swfAddress, and help the developer saving essential time.
You may consider changing the name to SWFFit or so.. if it get's too popular Adobe might ask you to change it. It happened to SWFObject (before FlashObject).
Muito obrigado! Depois posto aqui o site que fiz usando seu script.
Still super.
i never realized that it occurs.. in IE the vertical scroll appears but inactive (i don't think its a bug). in Firefox the scroll appears and is active (its a bug)..
i will try to figure out why it happens and fix it.. it could take some time cause right now im really busy..
subscribe to the RSS feed to keep in touch of new updates..
thanks for commenting..
if you want to make a site that has only horizontal scroll just ad this to your css code [ body{overflow-y: hidden !important;} ].. i've tried to change the "overflow-y" according to the window size but it made flash disappear in some firefox versions and caused another minor bugs such as if the "window size" =< (minHeight - scroll bar height) it wont make scrollbar or change the flash size to a number greater than minHeight making unnecessary scroll appear..
im really thinking there's no way to solve it.. and i don't think it is a big problem as the content keep accessible and that is the main objective of FitFlash.. keep content accessible independent of screen resolution / window size..
i never tried to adapt the code to default flash code detector.. but i've tested with different kinds of flash embeding and worked well..
Re: License
Yes, you can use it without any restriction.. and it's totally free.. but i would appreciate if you keep my credits and help me spreading it.. thanks
But it did not use it this time.
Fitflash.js is (1) ok.
I want add function (2) and (3).
(1)[hold set min size] --- resize --> browser big
(2)browser small <-- resize --- [hold set max size]
(3)[hold set min size] <-- resize --> [hold set max size]
I expect extension of the further function.
when i have some time i will implement those functionalities.. i never did it before cause i never thought that it would be useful.. i will probably just add 2 new parameters to the FitFlash function to set max width and max height and make them optional..
thanks for helping FitFlash become better..
if you want only to set a max size (like function 2 of Tanaka) set the minimum width and height to 1..
i don't know whats your problem - if you want to align the swf with maximum size to the center or just to align the flash content when flash has 100% width / height..
If your problem is just about centralize the flash content at 100% wid/hei you only have to use (inside flash) the "Stage.align" property (see flash help for parameters)..
If you want to centralize the Swf in the browser after it reaches the maximum size probably i will need to edit FitFlash code cause i think that only using css isn't possible because each time (100%, minimum size, max size) the swf have different properties..
I'm using FitFlash for more than 1 year and never needed the "max size" functionality.. probably you can reach the desired result just using the default method (only minimum size) and "Stage.align"..
I will figure a way to centralize the swf in the maximum size example but it will take some time.. thanks for your suggestion..
I have problems making this work with the new SWFObject v2.0 beta6 (http://code.google.com/p/swfobject/). It seems like for SWFObject 2.0 to work 100% height and width you have to have it set at 100%... But then flashfit isn't working correctly...
Niklas
i've tested FitFlash with the swfObject 2 beta6 now and the only thing i noticed is that only in firefox vertical scroll appears without need.. (you have to set width and height to 100% in the tag object..)
im very busy this month and i dont know when i will have time to fix it.. or if i'm gonna fix it.. since swfObject 2 is only at beta version and is supposed the have lots of bugs...
i will probably wait a non beta version of swfObject 2 to fix it.. maybe this bug will disappear in the next versions..
i also made a new example page of those functionalities..
thanks for everybody that helped with the improvement ideas..
All the best, Niklas
The site:
www.widecircle.se
I've never seen this problem happening online.. send to your friend the link for the example page ( http://fitflash.millermedeiros.com/example.html ) and see if it still happening.. also send link to other flash pages and see if they work..
Cheers..
It would be even cooler to have the possibility to use Flash Fit to set the swf container width/height dynamically through a JS function call!
i didn't understood what you meant with "possibility to use Flash Fit to set the swf container width/height dynamically through a JS function call!"...
you can call FitFlash function as many times as you want and pass new values..
you want to use FitFlash just to resize the flash and don't want it to be 100% wid/hei ?? cause the initial idea of FitFlash was just to use in flash sites that has 100% wid/hei..
i don't know what you need.. but maybe you can try using something like that: http://www.mustardlab.com/developer/flash/objectresize/ or just search in google for "resize flash" and test other techniques..
cheers..
It was a complete misunderstanding on my part and FlashFit fitted my needs perfectly!
Thanks again!
This script has been working well, however I'm nearing the end of a project and I've just found a bug that seems to appear in Mac Firefox v 2.0.0.11 (don't know about earlier versions)
It works fine in the windows Firefox v 2.0.0.11
I'm using swfObject and I've uploaded two pages for you guys to try out. The page with the error still loads the flash file and the swf loads the animation plays, it accesses a database and populates itself. But you can't see ANYTHING until you click on the page first? If you dont click you never see anything?
WITH MAC FF ERROR: http://www.goodkarmadrive.org/index2.html
WITHOUT MAC FF ERROR: http://www.goodkarmadrive.org/index3.html
test the flash with 100% wid/hei but without using FitFlash and see if it works..
if the example page doesn't work well please leave a reply here so i can check whats the problem or maybe find another solution.. - if the example page works fine just copy and paste and change only what you need..
thanks a lot
Thank you!
What causes this and can this be corrected.
It works now!
Great script Miller!
[pt-br] **Corrigido** bug que fazia o flash algumas vezes não ser carregado.
PS: I don't know if it was totally solved but i couldn't replicate the bug anymore.. so i think it was..
obs: não tenho certeza se o problema foi completamente corrigido mas não consegui reproduzi-lo novamente.. então acho que deve ter sido..
script type=\"text/javascript\" src=\"swfobject.js\">
script type=\"text/javascript\" src=\"fitflash.js\">
head>
body>
div id=\"homepage\">
You need to upgrade your Flash Player
/div>
script type=\"text/javascript\">
var so = new SWFObject(\"homepage.swf\", \"homepage\",\"100%\", \"100%\", \"6\");
so.write(\"homepage\");
FitFlash(\'homepage\')
the problem is that your flash movie has the same ID of the DIV.. it causes conflict..
use different IDs for the DIV and the flash movie..
the simplest way to avoid problems is to use the example page that comes inside the "fitflash.zip" file and just change the values you need..
cheers..
does anyone of you know if an dhow it is possible to create a div-container which lies over the flashfitted flash-movie and doens't vanish?!? when movie is loaded?
Thanx a lot.
I've download FitFlash because that's just what I needed. I dont understand english so good. Do you have a spanish version for the instructions?
Thank you!!!!!
Sylvia, yo no tengo una versión de las instrucciones en español. use la pagina de ejemplo como base e modifique solamente o que necesitas.. caso tenga dudas torna a llamarme.. puede ser en español - yo comprendo pero no sé como responder correctamente..
Lo siento por no hablar español bien.. Saludos
it should work.. cheers and good luck..
Thanks.
good luck!
Text and images display fine but shapes(done in flash) just dont display after that height, they just get cut off like they are being masked. Would love to know whats going on and how to get around it if anyone knows, surely if its a limit in place by Adobe it would be the same for all objects? I cant find any info on it anywhere!!
http://www.thinkswedish.com/blog/fi/886/The_Flash_height_problem_and_how_to_solve_it
i've seen this when they posted by coincidence.. i just had to search their blog for "flash height"..
you have some very nice works George.. i've seen some of them before at Hi-Res (http://www.hi-res.net/) website.. keep your good work!
cheers..
if you want to have a swf file with 100% width (with a minimum width of 780px) and 450px fixed height you have to set a maxHeight size = minHeight size..
it will be like this:
FitFlash ("my_flash", 780, 450, null, 450);
ps: i've set the "maxWidth" as 'null' to the flash don't have a maximum width size.. it will be always '=>' (equal or greater than) 780px..
i've added some tips in the "overview page" to help other people that may want to do the same thing.. thanks for helping me to improve this page..
good luck..
I tried to use your script. It works to an extend. I get to see my swf file but somehow it doesn't show full screen. The browser shows blank columns left and right. I don't know what else I can try. Por favor, help!!!
Aaron
Ps: http://www.crafteddreams.net/staging/sample_css
try to copy the example page and only change what you need.. probably your html file has something wrong.. i couldn't see the page..
good luck!
----
Brian,
I've deleted the file by mistake.. It's available for download again since day 24..
swffit will only work with SWFObject 2.0 and the code was optimized also.
-- pt/br --
Nova versão disponível para download. Mudei o nome de 'FitFlash' para 'swffit' para evitar problemas com a Adobe..
o swffit funcionará apenas com o SWFObject 2.0 e o código também foi otimizado.
The express install from swfobject 2.0 :
I wrote this
swfobject.useExpressInstall('flash/expressinstall.swf');
and gave me a swfobject.useExpressInstall is not a function.
any ideas?
http://code.google.com/p/swfobject/
figured it out .
And to make the example more easily testable, I restricted the size to 500x500.
As you can see- it isn't centering in the page :(.
Also, I'm not so sure it's stretching when it should?
Thanks,
David
if you want to center the flash content i suggest adding [ params.salign = "c"; ] i also recommend setting a max-size for the flash movie that way the flash content will stop stretching after reach the maximum size..
/*
attributes.id = "MainLoader";
attributes.name = "MainLoader";
// if you set a new ID to the flash you should use the same ID at the swffit function..
swffit("MainLoader", 500, 500);
*/
good luck
Thanks,
David
but what the heck am i supposed to change in the example?
my html is index.html embedding index.swf...
can i have some clear instructions for dummies please?
change what and where( example html)
add which file to my hosting directory? (swfobject.js , swffit.js)
cheers
javascript function."
Helooo.jaaaava script...!!!! told you i'm dumb.. ;)
cheers
Btw, the online example doesn't work (swf is linked wrong)
the only reason that i think it shouldn't be included in the SWFObject main source is that the most people don't need this functionality and it will increase the file size without a need..
i like a lot the concept of add-ons.. (installing only the things you need..)
here the example page is working well.. i don't know what could happened.. maybe it was a temporary problem in the server (don't know)
thanks for you msg.. cheers..
I was wondering the best way to go about have one .swf on top of another .. the top .swf works with swffit .. and scrolls :) .. and the bottom .swf does not scroll or is effected by the browser scrollbar (like a css fixed background) - i want it for a dynamic background slideshow :)
Many thanks, keep up the good work
Best,
Paul
if you want to put one SWF on top of another you have to set the "wmode" of the background SWF to "opaque" or "transparent" and set the "z-index" of the one that will be on top to a higher level.. and just set fitflash to one of them..
good luck!
I tryed with the example file. Changed the width and height to match my flash and when I resize dowbn the browser it works perfectly. BUT when the browser is big like in a 24\" screen the flash strains and make bad look.
Some solution to this?
While using Safari 3.0.4 on a Mac I notice that the SWF tries to load twice and then cancels one of the 2 loads causing the page to show the alert down in the status bar "Cancelled opening the page."
This doesn't affect the functionality of swffit in any way, but I was wondering if you may know of how to avoid the double SWF loads.
Thanks,
Jason
i don't know how to solve this problem.. have you tested without swffit ? because the only thing swffit does is setting some css attributes to the html, object and body tag.. and it also verify the browser window size.. it doesn't load the flash movie - swfobject does it..
I did narrow it down to swffit as the source of the issue, I believe.
The same issue happens with the examples on your site.
I think I found the solution although it seems bizarre.
If I comment out the line:
gEBI(ft).style.position = 'absolute';
the double loading of the SWF no longer is a problem.
I'm not sure what that line is there to accomplish
but taking it out didn't seem to hurt it in:
IE 6 and FireFox 2 on the PC
and Safari 3 and FireFox 2 on the Mac
Anyway I'll stick with the missing line for now,
I'll let you know if it causes any issues.
Thanks for the great script!
Jason
the line [ gEBI(ft).style.position = 'absolute'; ] changes the position of the flash movie to absolute.. so it can resize even if the html width/height is smaller than the flash movie size... firefox have some issues with this..
i have been very busy these days and i didn't tested if it can be removed..
thanks
Thx for the great great script, it's wonderfull!
What i was wondering; is there also a swffit AS3 script?
Thanks in advantage!
Timo
In AS3 you would call:
ExternalInterface.call("swffit","my_flash",650,600);
swffit will do the rest.
Is there any way to match the white bg when you resize a the swf to the html bg is anything other than white
I've noticed that the script always manipulates a SWF (requests it twice) even if the SWF's size doesn't need manipulating. For example, if my SWF is embedded at 100%/100% (using SWFObject 2), I assign a fixed pixel width/height as the minimum values for my SWF using swffit, and the browser window opens at a size that's *larger* than these minimum values (so that 100% is used), the SWF is requested again anyway.
What I'm getting at is this. If the SWF is embedded at 100%/100% already, it shouldn't need to be 'resized' by swffit unless the browser window is too small. This would prevent the SWF from being requested twice on window load.
Any thoughts? At this point, I've given up because I'm not sufficiently knowledgeable about js to fix the problem, so I'm hacking the history.js files to work with swfobject, since they don't appear to conflict with swffit. Sure would be nice if SWFObject, SWFAddress, SWFFit and the BrowserManager could all play nice together. Have you considered something like a SWFObjectContrib project to possibly start down that path? I think SWFFit is a great thing, and would love it if these complementary technologies could be tested more throughly together.
http://homesite.obeo.com/Viewer/Default.aspx?tourid=440931
then click on the second icon (double arrow) for virtual tour and then click on the fourth button for Full Screen. This allows for the entire browser enviroment to \"disappear\". Is there a way to do this with your tool? Thanks...
Segui as instruções e consegui colocar o scroll sem problemas. Valeu mesmo!
Agora queria saber se tem como colocar o parametro allowfullscreen (botao no .swf) e menu (clicar com o botao direito do mouse)
swfobject.embedSWF("flash_gallery.swf", "my_flash", "750", "550", "9.0.0");
swffit("my_flash",750,550);
desde já agradeço pela atenção
sorry for the delay but i was on vacation.. good luck.
var params = {wmode:"transparent"};
swfobject.embedSWF("yourmovie.swf", "yourmovie", "100%", "100%", "8", "", flashvars, params);
read the swfoobject documentation for more options: http://code.google.com/p/swfobject/wiki/documentation
read this article: http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html
and the swfobject documentation:
http://code.google.com/p/swfobject/wiki/documentation
good luck!
Edu, na documentaçao do swfobject tem os params 'menu' (true/false) e 'allowfullscreen' é só ver na documentação como que coloca parametros no swfobject.
abraço.
I have had a recent problem though, and I'm not sure when or how it cropped up, because it only recently started occurring.
In Firefox, when changing the minimum height, it's bumping the value up
from the assigned value for some reason. Here's an example and the source files:
http://www.kawarime.com/test3/test3.html
http://www.kawarime.com/test3/test3.zip
Surprisingly, this problem doesn't exist in Firefox in a local setting, only via a web server.
Any idea?
good luck..
Because my problem is;
when i useing as2 orginal component (datagrid,textarea...) then i click to swf area and mouse scroll track cant scroll page. if i click to scroll bar then mouse can scroll with scroll track wheel. what is the focus problem with as2 orginal component ? i tested without as2 componet and result no problem with scroll.
if include swfaddress.js swffit stops working
please any comments?
i am using the latest swfaddress v 2.1
thanx
Woohoo!!!!
swfobject.embedSWF("shrink_new2.swf", "my_flash", "800", "91", "8.0.0");
swffit("my_flash",800,91);
good luck
great script - thanks!
just one thing: i'm using <body scroll="auto"> in the index.html to avoid the "empty" scrollbar in IE. this is working great, but the swf isn't resize to the whole borwser width - looks like the 10 or sth pixels where the scrollbar is supposed to be, are empty ...!?
do u know this issue?
if not, maybe you could have a look ...
regards ... phil
I don't recommend using the .. You should use html{overflow:auto;} instead..
try to edit the example page that comes with the swffit.zip file.. maybe something in your html isn't right..
good luck..
and SWFObject 2.0..
to SWFAddress 2.1 work with SWFObject 2.0 you need to set an ID to the
SWF file like below..
var flashvars = {};
var params = {};
var attributes = {id: "flash"};
swfobject.embedSWF("myswf.swf", "holder", "550", "400", "8.0.0",
"expressInstall.swf", flashvars, params, attributes);
swffit('flash');
when you do that everything works just fine !! (SWFAddress and SWFFit)
ps: you have to use the same ID that you have set to the flash movie in
the swffit function..
ps2: sorry for the huge delay but I was traveling for about 1 month and
I've been very busy since I came back.
Could you provide a working example for download?
cheers!
var flashvars = {};
var params = {bgcolor: "#000000"};
var attributes = {id: "YOURswfID"};
swfobject.embedSWF("YOURswfFILE.swf", "YOURswfID", "990", "450", "9.0.0","expressInstall.swf", flashvars, params, attributes);
swffit("YOURswfID",990,450,990,450);
body{
background-color: #000000;
}
Enjoy!
Gregor