As you’ve probably figured out, the swf files Catalyst generates are a fixed size. Even if you set the size of the swf manually when you embed it, the content you created in Catalyst will remain the same size. But, with a little tweaking in Builder, you can make your swf scale to fit the width and height you set for it.
Look! It’s the same swf at three different sizes!
Here’s what you’ll need:
- Flash Catalyst and Flash Builder
- A Flash Catalyst Project you’d like to scale
Here’s what to do:
- Save your project out and import it into Builder (In Builder: File > Import FXP). Choose your FXP under Import Project > File > Browse. The default settings should be fine for your import.
- Open up Main.mxml. You can find it in the package explorer (left panel) under project name > src > (default package) > Main.mxml.
- You should see the MXML markup used to create your application. We are going to modify the top level <Application> tag.
- Remove the width and height attributes on the Application tag.
- Add the following attribute: preinitialize=”systemManager.stage.scaleMode=’showAll’”
- Choose Project > Export Release Build to publish a version of your swf. By default, this goes in the “bin-release” folder in your Builder project.
- When you embed the swf in a web page, set its dimensions to make it scale.
That’s all there is to it. There are some alternative scale modes, such as exact fit, which does not maintain the aspect ratio show all does. You can read up on those in the ActionScript Documentation on StageScaleMode.
[Update] This is an older article for Catalyst CS5. I would highly suggest checking out resizability in the new “Panini” version of Catalyst available over on Adobe Labs.