Making a Catalyst Swf Scalable
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.
July 21st, 2010 - 12:46
Sorry for the noob question, but how do I embed the swf?
July 22nd, 2010 - 13:45
Catalyst doesn’t embed swfs in 1.0. If you want to embed a swf, you will have to take your project over to Builder and embed it there.
July 29th, 2010 - 11:30
also sorry for the noob question, but how do you embed the swf in builder?
July 30th, 2010 - 12:59
For this particular tutorial, you don’t have to embed a swf. You are going to modify the MXML which gets compiled to your final swf.
If you are interested in embedding assets in a Flex project, or embedding your final swf in a web page, then that’s a different beast altogether.
August 6th, 2010 - 11:55
it crops my file and than resizes it, depending on Html embedded size, WHY?
August 10th, 2010 - 14:43
Same is happen to me, its cropping and not fitting
August 16th, 2010 - 05:05
Same here. The swf is scalled to 200% and then cropped to fit in the window. This solution doesn’t work anymore or the instruction is missing crucial information.
September 10th, 2010 - 12:55
also getting the 200% and cropping…arrggg.
September 21st, 2010 - 19:13
Same here, the swf is cropped and not scaled to proportion in the window. Anyone found a solution to this?
October 18th, 2010 - 06:52
Anyone have a solution to scale?
October 31st, 2010 - 12:28
I not delete width and height attributes. And it works in fullscreen mode.
November 30th, 2010 - 10:32
I figured it out!! go to the design page on Flash builder, after you changed the Main.mxml code… there’s a square with a blue border, smaller than your swf, probably.. then just manually change the size of that square (that i assume , is the size of the stage) to the size of your swf. It automatically centers your swf. And that’s it, it scales perfectly!
January 25th, 2011 - 15:08
Thank you for the tip, it was what I needed!
January 26th, 2011 - 11:25
Diogo, I did exactly what you did and keeps happening the same… Any suggestion?
March 16th, 2011 - 18:01
Anyone got the solution?
March 17th, 2011 - 16:36
This article was written for Catalyst CS5. In the new preview version over on Adobe labs, there is a more intuitive scaling feature that I would suggest checking out. As evidenced by the number of comments in this post, the scalemode way of doing things can be very finicky.
April 26th, 2011 - 00:38
does any1 know if this issue is fixed in cs5.5?
April 28th, 2011 - 22:54
Hi there. I’d suggest using constraints in Catalyst CS 5.5 / Panini.
August 16th, 2011 - 15:00
hi there, i recently got CS5.5 and found that the constraints method doesn’t really fit my needs!
I wanted my whole application to be scalable, while with constraints you can achieve an application with fixed-size components arranging in the available space, thus possibly overlapping!
so i tried the code described here, but i got this http://www.noisefuel.net/fbbuild/Main.html
wich is probably the same thing everyone is getting; a working resizable application, but with a fixed 200% or so proportion to the browser’s window!
i didn’t find the blue square Diogo said, if someone could post a screenshot would be great!
thanks for the comments and thanks for this forum!
nF.
August 18th, 2011 - 18:11
If you want something to take up all the available space, you just need to set the left, right, top, and bottom constraints. If you’re seing items move as you describe, you’ve probably only set one of (left, right) and (top, bottom). Constraints work by pinching an item to the bounds of its container, so they’re flexible enough to resize your entire application, or to just shift items around and your application resizes.
August 30th, 2011 - 04:21
how do i set the ENTIRE APPLICATION’s constraints? i can only select components at a time to set their constraints
thanks again!
nF.
September 4th, 2011 - 23:31
I’m trialing 5.5 jsut to fix this rezing thing and it just doesn’t work. The suction cups dont seem rezize/rescale components at all. They only allow you to postion elements relative to your canvas. So my background seemed to scale up, but my buttons/scrollbars etc remain small with all four constraints on. Even worse, some images did scale up but blew out exponentally – so they might have started out at 2% of the screen, but ended up swamping the browser!
Another thing, I got an interactive project in 5.0 to run at fullscreen by running the Main swf in the run local folder, going fullscreen, then hitting zoom in. THis wont resize to fit different aspect ratio, but a lot better than a tiny prototype. BUT in 5.5, published swfs are just a white screen! So all the work i did on my latest 5.5 project is unusable.
As good as catalyst is for designers like me, if it can’t auto scale to fit a browser window, it is of very limited use.
September 8th, 2011 - 14:48
Actually, it works. But the width and height attributes are needed. You need to set them at the exact dimensions of the original file.
Here’s how the relevant portion looks on my working example:
preinitialize=”systemManager.stage.scaleMode=’showAll’”
preloaderChromeColor=”#FFFFFF”
width=”960″
height=”805″>
Also, I have removed the fc:previewHeight and fc:previewWidth attributes.
October 12th, 2011 - 02:42
hi, first of all thanks for all the great advice
so my project had a tiling background and the project was centered in it, horizontally and vertically. the method Cooperone wrote works, but it removes my background and it cancels vertical centering. now the project is centered horizontally in a single colored background. the original method does as everyone else says, it scales the project up dramatically.
so how can I center the project vertically, too, and how can I retain my original tiling background?
thanks