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 2.3.3 (released 01/18/2010) – NEW!Download swffit 2.4 beta (released 01/18/2010) – NEW!
View the change log to know what changed.
Why?
swffit was made to improve accessibility of your flash website.
It was made because each user uses a different screen resolution and resizes the browser window at custom sizes.. when you set the flash size to 100% width and/or height (full bleed) the browser won’t generate scrollbars and maybe an important content will be hidden for the user.
What it does?
swffit automatically resizes your flash to 100% width and 100% height (full bleed) when your browser window is greater than the minimum desired size and resizes flash to the minimum desired size when the browser window is smaller… It can also resize the flash movie to a maximum size if the browser window size is greater than the maximum size…
How do i use it?
Include the swffit.js Javascript file, then just call one simple javascript function.
Example:
<script type="text/javascript" src="swffit.js"></script>
<script type="text/javascript">
<!–
swffit.fit("my_flash", 1000, 590);
//–>
</script>
Public Methods:
fit():void
Set the object that will be resized and configure the desired size and parameters.
swffit.fit(‘flashID’, minWid, minHei, maxWid, maxHei, hCenter, vCenter);
flashID:String – The ID of the flash object/embed tag.
minWid:Number (optional since v2.3) – Minimum desired width (px) for your flash, default value is the value used in swfobject.
minHei:Number (optiona since v2.3) – Minimum desired height (px) for your flash, default value is the value used in swfobject.
maxWid:Number (optional) – Maximum desired width (px or null).
maxHei:Number (optional) – Maximum desired height (px or null).
hCenter:Boolean (optional) – Sets if the flash will be centered horizontally after reach maximum size, default value is true.
vCenter:Boolean (optional) – Sets if the flash will be centered vertically after reach maximum size, default value is true.
configure():void
Configure the desired properties values.
It’s the better and easiest way to change only the desired properties (you can change as many properties as you want at the same time)
swffit.configure(prop);
prop:Object – Object containing the desired properties that needs to be changed { target, minWid, minHei, maxWid, maxHei, hCenter, vCenter }.
Available Properties:
target:String (optional) – The ID of the flash movie.
minWid:Number (optional) – Minimum desired width (px).
minHei:Number (optional) – Minimum desired height (px).
maxWid:Number (optional) – Maximum desired width (px or null).
maxHei:Number (optional) – Maximum desired height (px or null).
hCenter:Boolean (optional) – Sets if the flash will be centered horizontally after reach maximum size, default value is true.
vCenter:Boolean (optional) – Sets if the flash will be centered vertically after reach maximum size, default value is true.
Example:
swffit.configure({minWid: 800, maxHei: 450, vCenter: false});
stopFit():void
Stop resizing the flash movie.
swffit.stopFit(width, height);
width:Number/String/null (optional) – Desired width (px or % or null) for your flash. Default value is ‘100%’.
height:Number/String/null (optional) – Desired height (px or % or null) for your flash. Default value is ‘100%’.
startFit():void
Start fitting the flash movie.
swffit.startFit();
Used after calling the "stopFit" method or after changing any public javascript properties.
addResizeEvent():void
Add a javascript function to the onresize event queue.
swffit.addResizeEvent(function);
function:Function – Function that will be fired every time the window is resized.
removeResizeEvent():void
Remove javascript onresize event.
swffit.removeResizeEvent(function);
function:Function – Function that will be removed from the onresize event queue.
getValueOf():*
Return the value of the desired property.
swffit.getValueOf(‘property’);
property:String – Desired property name.
@return:* – Desired property value (String, Number or Boolean).
obs: This method isn’t public in the Actionscript Class.
showScrollH():void
Show horizontal scrollbar.
swffit.showScrollH();
IMPORTANT! – Should be called before swfobject.embedSWF or it will reload the flash file.
obs: This method doesn’t exist in the Actionscript Class.
showScrollV():void
Show vertical scrollbar.
swffit.showScrollV();
IMPORTANT! – Should be called before swfobject.embedSWF or it will reload the flash file.
obs: This method doesn’t exist in the Actionscript Class.
getScrollTop():int
Return the document scroll top property.
swffit.getScrollTop();
@return:int – The number of pixels until the top of the document.
obs: This method is only available for version 2.4+.
getScrollLeft():int
Return the document scroll left property.
swffit.getScrollLeft();
@return:int – The number of pixels until the left of the document.
obs: This method is only available for version 2.4+.
Public Properties (AS Class only):
obs: These properties are only public in the Actionscript Class.
target:String
The ID of the flash movie.
SWFFit.target = t;
t:String – The ID of the flash object/embed tag.
minWid:int
Minimum Width.
SWFFit.minWid = w;
w:int – Minimum desired width (px).
minHei:int
Minimum Height.
SWFFit.minHei = h;
h:int – Minimum desired height (px).
maxWid:int
Maximum Width.
SWFFit.maxWid = w;
w:int – Maximum desired width (px).
maxHei:int
Maximum Height.
SWFFit.maxHei = h;
h:int – Maximum desired height (px).
hCenter:Boolean
Horizontal Centered.
SWFFit.hCenter = c;
c:Boolean – Sets if the flash movie will be centered horizontally after reach maximum size, default value is true.
vCenter:Boolean
Vertical Centered.
SWFFit.vCenter = c;
c:Boolean – Sets if the flash movie will be centered vertically after reach maximum size, default value is true.
Events (AS Class only):
SWFFitEvent.CHANGE
Change event. Dispatched every time a property changes.
SWFFitEvent.CHANGE = "change";
SWFFitEvent.START_FIT
Start Fit event. Dispatched every time the SWFFit.startFit method is called.
SWFFitEvent.START_FIT = "startFit";
SWFFitEvent.STOP_FIT
Stop Fit event. Dispatched every time the SWFFit.stopFit method is called.
SWFFitEvent.STOP_FIT = "stopFit";
obs: All events are only available in the Actionscript Class and are only dispatched when you change the properties or call the methods using the AS class.
Tips:
If you want to set only ‘minWid’ or ‘minHei’ set the other as 1..
If you want to set a max size for only one axis (‘maxWid’ or ‘maxHei’) set the other one as null.
Always set ‘maxWid’ to a value greater than ‘minWid’ or swffit won’t work properly..
Copy the example page that comes with the swffit.zip file and just change what you need, this is the easiest way to avoid bugs.
The Actionscript Class have all the methods of the Javascript "Class", the only differences are: the AS class is called ‘SWFFit’ instead of ‘swffit’, the ‘getValueOf()’ method isn’t public in the AS class and all the javascript properties aren’t public.
Example Pages
The example files are currently using the version 2.4 beta.
- Basic Example Page (Dynamic Publishing)
- Basic Example Page – Static (Static Publishing)
- Basic Example Page with SWFAddress (Dynamic Publishing)
- Example Page With Maximum Size – Centered (Dynamic Publishing)
- Example Page With Maximum Size – Centered Horizontally (Dynamic)
- Example Page With Maximum Size – Not Centered (Dynamic Publishing)
- Example Page With Vertical Scrollbar (Dynamic Publishing)
Ps: To learn the differences between swfobject Static and Dynamic Publishing read the SWFObject Documentation
Ps2: To learn more about SWFAddress visit the SWFAddress website. I’ve made the example page only because some people can’t make it work together with swffit and SWFObject 2. The only things I’ve changed from the original SWFAddress example page was the HTML file and also deleted the photos to reduce filesize.
Is it crossbrowser?
I’ve tested it on mac (safari, firefox, opera, mozilla) and pc (ie, firefox, opera, safari, netscape, chrome) and worked well.. I think it should work in every modern browser that supports javascript..
Download
Download the latest version of swffit. You can use it for whatever you want with no restrictions just keep the credits in the swffit.js file. This software is released under the MIT License
Download swffit 2.3.3 (released 01/18/2010)Download swffit 2.4 beta (released 01/18/2010)
To download previous versions of swffit and FitFlash visit the google code project page. To know what changed view the change log.
If you want to fork or contribute visit the swffit repository on github.
I recommend
I recommend using always the most recent version.
Why I’ve changed the name from FitFlash to swffit?
I’ve changed the name from FitFlash to swffit because Simuraiadvised me to change it since Adobe asked Geoff Stearns to change FlashObject name to SWFObject (due to legal/trademark reasons) and also because now it only works with swfobject 2 that from now is also written in lowercase.
Thanks
Thanks to everybody that helped me with ideas to improve swffit,Shaun Tinney for the swffit.com domain register and also the ones that helped me spreading it allover the web.. Here is some of them:Ajaxian, PHPSpot, Zeh, Bildirgec, Best Flash Animation Site,Developer0000, Xyberneticos and many more…
Who made it and Why he did?
swffit was made by Miller Medeiros. I had the idea when i was making my own portfolio in July/2006 and wanted to use the flash with 100% width and 100% height. By that time i didn’t found any script that can do what swffit does and i decided to code it by myself..