How to use SWFObject with a resizable Flex application

Posted on 2009-12-23
Last Modified: 2013-11-11
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?
Question by:elepil
    LVL 4

    Expert Comment

    You looking for scale="exactfit"?
    LVL 14

    Expert Comment

    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.
    LVL 14

    Expert Comment

    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.

    Author Comment

    TanLiHao, thanks again for responding.

    If you go to, 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?
    LVL 14

    Accepted Solution

    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.


    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.

    Author Closing Comment

    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.
    LVL 14

    Expert Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Suggested Solutions

    Title # Comments Views Activity
    Can't get dispatchEvent to work when parent to talk to child AS3 3 495
    YouTube Link 10 343
    flash cs6 4 329
    Action Script commands 3 203
    This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
    This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
    The goal of the tutorial is to teach the user how to how to record live broadcast.
    The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now