Setting the width and height of a pure-ActionScript application

For a Flex project with MXML files, it is obvious how to set the width and height of the project:

<mx:Application width="300" height="200">

But for pure-ActionScript projects, it isn't so obvious. The way to do it is to use the SWF metadata attribute above the declaration of the class:

package
{
  [SWF(width="300", height="200")]
  public class MyApp extends Sprite
  {
    ...
  }
}

The values specified there are pixel sizes; in this context, you are not allowed to use percentage values such as 100%.

21 Comments so far

  1. Chris Davis on June 27th, 2006

    Thanks for the info!
    Do you know where I could find documentation on other metadata one can use in a pure ActionScript project?
    thanks!

  2. mike on June 27th, 2006

    http://livedocs.macromedia.com/labs/1/flex/00001437.html has a list of them; I think it is an oversight that [SWF] was not included there.

  3. senocular on June 27th, 2006

    Note that you can also set FPS and bg color in the SWF meta tag
    ex:
    [SWF(width="300", height="200", frameRate="18", backgroundColor="#FFFFFF")]

  4. Kevin Hoyt on June 27th, 2006

    You can also set the width, height, stage [background] color, and frame rate as a compiler argument.

  5. paul on June 28th, 2006

    Thanks for the tip!

  6. [...] The background color of the application, as specified in the backgroundColor attribute of the &lt;mx:Application&gt; tag, or, in the case of ActionScript-only projects, in the backgroundColor field of the [SWF] metadata attribute of the main application class, e.g. [SWF(backgroundColor="#ffffff")] public class MyApp extends Sprite (see this post for more information on setting the width, height, and background color of an ActionScript project). The result is in the form #rrggbb, e.g. #ffffff. This can actually be a little tricky to use, because by default, the background of a Flex app is actually a gentle gradient from one color to another; if you want the HTML background to match the background of your Flex app, you may need to fiddle with both the backgroundColor and backgroundGradientColors attributes of the &lt;mx:Application&gt; tag. [...]

  7. Adrian Parr on March 5th, 2008

    According to this blog entry by Derek Vadneau, the SWF metadata attribute should appear after any import statements.

    http://blog.madebyderek.com/archives/2007/01/12/as3-projects-and-the-swf-metadata-tag/

  8. mike on March 5th, 2008

    That’s right, Adrian. Think of the SWF metadata tag as being connected to the class declaration, in the same way that the word "public" is connected to it. It’s also similar to other metadata tags such as [Bindable], [Style], [Event], etc. — it appears immediately before the element that it is modifying.

  9. PhoenixSol on March 11th, 2008

    So I wonder how one can create a full-screen application in Pure AS3? Is there some way to determine the dimensions of the browser window in (or before) that Metadata tag? Thanks ;-)

  10. mike on March 11th, 2008

    PhoenixSol, just go ahead and make a Pure AS3 app; it will start out at 100% of the size of the browser (because the HTML will have <object> and <embed> tags with width=100% height=100%).

  11. PhoenixSol on March 11th, 2008

    Oh, duh; Thanks Mike!

  12. [...] mikemo » Setting the width and height of a pure-ActionScript application [...]

  13. Erin on May 27th, 2008

    Thanks!

  14. James on May 29th, 2008

    Wow. I searched for a while to figure out why my [swf] metadata wasn’t working! has to go on the line before the package declaration. Of course just like [bindable] before variable declarations. Wow that isn’t that obvious though, naughty Adobe, it isn’t in the O’Reilly book or the Flex2 training book.

  15. grabek on October 29th, 2008

    how about width=100%??/ it says "no!"

  16. dayg on November 14th, 2008

    Thanks Mike!

  17. sj314 on December 27th, 2008

    Metadata SWF attribute is hardcoded – what about programmatically set size? Something like stage.width=xxx,

  18. mike on December 30th, 2008

    sj314, I haven’t tried, but off the top of my head, I’m thinking the way to do that is to have some JavaScript code that changes the "width" and "height" attributes of the object and embed tags. So, I would probably use the Flex AJAX Bridge to communicate with JavaScript that is in the HTML that contains your SWF, and have some JavaScript that changes the width and height.

  19. Jack on April 29th, 2009

    Awesome, thanks mike

  20. [...] Setting the width and height of a pure-ActionScript application Posted June 27, 2006 [...]

  21. Eric on November 19th, 2009

    Dont forget
    [SWF(percentWidth="100", percentHeight='100', backgroundColor='#000000')]

Leave a reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word