• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 595
  • Last Modified:

How to use SWFObject with a resizable Flex application

My Flex application's mx:Application's width and height are set to 100%, so it's a resizable application.

How do I use SWFObject for a resizable Flex application?
  • 4
  • 2
1 Solution
You looking for scale="exactfit"?
Here's what the documentation says:

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn) has five required and five optional arguments: swfUrl (String, required) specifies the URL of your SWF
id (String, required) specifies the id of the HTML element (containing your alternative content) you would like to have replaced by your Flash content
width (String, required) specifies the width of your SWF
height (String, required) specifies the height of your SWF
version (String, required) specifies the Flash player version your SWF is published for (format is: "major.minor.release" or "major")
expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activates Adobe express install. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310x137px.
flashvars (Object, optional) specifies your flashvars with name:value pairs  
params (Object, optional) specifies your nested object element params with name:value pairs  
attributes (Object, optional) specifies your object's attributes with name:value pairs
callbackFn (JavaScript function, optional) can be used to define a callback function that is called on both success or failure of embedding a SWF file (see API documentation)

So just set the width and height to "100%" in the embedding of SWF.

An example will be

swfobject.embedSWF("bj.swf", "bj", "100%", "100%", "6.0.0");

I gave the version as 6.0.0 because I do not know the version you published the SWF for, I didn't bother to check but you should change it to the published version.
You should take a look at the documentation if you haven't


There are also the api documentation too, you should check it out

Look at the main page:


There is the FAQ, the API documentation and few other things you can check out.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

elepilAuthor Commented:
TanLiHao, thanks again for responding.

If you go to http://www.pilby.us/bj/bj2.html, you will see my problem. (NOTE that it's bj2.html this time, not bj.html).

When you view the source, notice I put 100% for both width and height and height. The width works correctly, but the height is not, and I'm not sure why. Any insights?
Ah yes, I faced a problem with this before and thought it was a bug. One of the members asked me this question but luckily he didn't need to use the height as "100%". Therefore I didn't bother to find out the issue.

Now that you need that, I went to check out why.

Luckily, swfobject had documented this.

See http://code.google.com/p/swfobject/wiki/faq

Question 1 is your issue, it explains clearly what happened.

Then there are example pages to help you on achieving the fullscreen effect.

The easiest way is just adding

<style type="text/css" media="screen">
                  html, body, #myContent      { height:100%; }
                  body                                    { margin:0; padding:0; overflow:hidden; }
                  #myAlternativeContent            { /* style alt content */ }

to the head.

You should take a look at all of the three example pages shown and choose which is the one you want to use.
elepilAuthor Commented:
You would think that the creator(s) of SWFObject should've realized this issue even at the very early stages of testing. Granted that this is not the fault of SWFObject (since it operates within the constraints, limitations and flaws of Flash Player and/or the browser, this issue should not be in a FAQ but part of its main documentation.

Once gain, your solution worked, TanLiHao. I thank you very much for your time and effort spent helping me.
Yes I agree that it should have been part of the main documentation as many people would like to have fullscreen applications. Nevertheless, at least they put it in the FAQ.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now