views:

1910

answers:

3

My girlfriend is a graphic designer who is currently working on a website. She doesn't know any HTML or CSS and is only familiar with Flash, so she's building the entire website in Flash. It should be noted that I am developer and have close to 0 experience with HTML, CSS or Flash either.

Work is progressing nicely, but after I helped her deploy the site (through File->Publish), we ran into some issues. She built the .swf movie at 1000x750 pixels. After inspection of the resulting website at my 24" monitor at 1920x1200, things looked really pixelated (the movie uses images, not vector graphics). No problem! I figured we should just disable scaling in Flash's publish options and we'd be good.

However, disabling scaling apparently introduced the new problem that the movie could now no longer be properly viewed at computers running low (<=1024x768) resolutions.

I guess the behavior we're looking for is to only scale down the movie to fit the viewing computer's resolution/browser window, but not scale up. Flash (CS4) does not seem to include this as an option in its publish options though. Are there any simple methods to enable such behavior?

+1  A: 

There's no built-in option for what you're describing, but it's easily achieved with scripting, either from within Flash or on the JavaScript side. I'll put a code snippet at the end of the answer that ought to get you off and running.

First, however, let me suggest what you probably ought to do instead. Think of what happens when a user comes along who (regardless of monitor size) doesn't have their browser fullscreen. If you implement as you describe, they'll see your site at an arbitrarily small size, depending on how their browser is sized, and quite possibly see something small enough to be illegible and/or unusable.

Now sure, you could deal with that by further implementing a minimum size below which the Flash stops scaling, but then you're starting to do a lot of second-guessing about how users will want to see your site. Instead, it behooves you to ask, what would a user with a small monitor (or a small browser window) expect the site to do? And the answer to that is, show the site full-size and add scrollbars. And for my money, that's what your site should do.

So in your HTML (or in Flash's HTML export settings) embed your SWF into a 1000x750 container. This will keep the SWF from scaling for anyone - on your monitor you'll see the unscaled site centered (or top-left aligned or whatever) within the window, and on smaller monitors you'll see the whole site unscaled, with browser scrollbars.

At the end of the day, you have to realize that even though Flash content scales inherently, most web sites are made up of text and images, which don't. Even though you can scale down at runtime, it's usually not what the user expects and it usually doesn't make the site look good.


Now as promised, here's a snippet of Flash AS3 code that ought to give you enough head start to do anything you like with scaling. This ought to give you the desired effect, if you've published your Flash into a container that takes up the entire browser window, with the scalemode set to "no scale".

// perform initial size check
checkStageSize();

// register to re-check when stage size changes
stage.addEventListener( Event.RESIZE, onResize, false, 0, true );
function onResize( e:Event ) {
    checkStageSize();
}

// do the scaling here
function checkStageSize():void {
    var wid:Number = stage.stageWidth;
    var hi:Number = stage.stageHeight;
    var needToScaleDown:Boolean = (wid < 550); // or some other test
    if ( needToScaleDown ) {
        var scale:Number = wid/550;
        someContent.scaleX = someContent.scaleY = scale;
    } else {
        someContent.scaleX = someContent.scaleY = 1;
    }
}

This supposes that "someContent" refers to a container holding everything you want to scale, with its registration point at the stage's origin (upper-left corner). There's no easy way to automatically scale the whole movie, so you'll want to place your content in a container movie clip and scale that instead.

Feel free to put the snippet above in a frame action on the stage, change "someContent" to refer to a container you can scale, and play around with it. But I really think you'll wind up deciding that it's more usable to just show the site unscaled.

fenomas
A: 

Finally an answer I can truly get behind! Thanks for the insight Fenomas. I've been beating myself up about the sizing issue and you nailed it.

I'm in the process of transitioning to AS3 but currently have a site built in Flash 8 / AS2 of course.

Can you tell me the changes to the AS3 code to make the AS2 code do the same?

CR
A: 

I tried using the code on my website, but I keep getting error messages saying that the property of: someContent isn't defined. I'm still new to AS3 and was wondering if you could help me.

Thanks

Lindsay