• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1022
  • Last Modified:

How to resize and flash stage and selected movie clips or symbols with browser?

I am attaching an FLA that has a bit of actionscript regarding resizing. What I am trying to achieve is:

1. Proportionally resize the stage and symbol or movie clip (parea) as well as the symbol (border) according to the browser.

2. Have minimum/maximum resize variable? (May not be 100% necessary.)

3. The two buttons on the bottom, to stay the same (not resize) but keep position in relation to the stage resize?

I have looked at liquid flash but I don't need the stage to be set at 100%.

Any assistance would be greatly appreciated. Thank you!
  • 4
  • 2
  • 2
  • +1
4 Solutions
fscommand("allowscale", true);
the fla errors out:  full_ssp is not defined, and i'm not sure what you'd want that to be referencing.

but, you've got the basic idea.

since full_screen, for example is at 940 and the default stage width is 960, it's obviously 20px from less than the stage size, so you'd just say in your resize handler:

full_screen.x = sw - 20;

and if parea is 940 pixels wide, and the default stage width is 960, again it's 20px less wide than the new stage width, so:

parea.width = sw - 20;

if you want to put a minimum/maximum, you can do just that:

  var sw:Number = stage.stageWidth;
  var sh:Number = stage.stageHeight;
  sw = Math.min(sw, 1000); // 1000 being the largest you'd want it to go
  sw = Math.max(sw, 500); // 500 being the smallest you'd want it to go

as you can see, it's not really a coding issue - you have the code pretty much in place.  just think of the logic for each item and apply that using the above examples.
ApariAuthor Commented:
Hi moagrius,

Thank you so much for your response. I do have a question, I was thinking about it before and I don't know whether I got myself confused but:

All the examples I've seen of resizing or liquid flash seem to be based on the setting that the stage is 100% (height and width).

If the default stage is 960px x 660 for example if I was looking at it in a smaller resolution, would the stage resize to smaller than 960px x 660px. I think I'm just a little confused on the logic since most of the examples of resizing, resize an instance on a 100% stage.
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

ApariAuthor Commented:
Oh, I think I've confused myself. I was expecting that if an swf was embedded into a page say eg. at 960 x 660 if the browser was resized or viewed in a lower resolution it could resize, but if it's embedded at that size, it couldn't resize on an html page without being 100% w/h?
i hope this is for 100% x 100%
if you're talking about monitor resolution, then no - that won't trigger a resize, and even if it did, a pixel is still a pixel, so nothing would happen.

it doesn't technically have to be 100% by 100% - but it does need to be a percent (say 50% by 75%) - otherwise the flash object itself would never resize within the html document container.
If you embed a flash movie using percentages... lets just say 100% x 100% for demonstration... then the STAGE will expand according to the dimensions of the browser window.

HOWEVER! This does not mean that the objects (text, graphics) inside your flash movie will scale.  If you set scalemode = true, then the objects WILL SCALE proportionally.  If you don't set salign, then the movie will be centered.  If you set salign to tl (top left), then the movie will be scale from the top left corner.  Look at this demo site I did years ago with scalemode = true:


An important thing to notice is the stage is something like 960 x 500 (can't remember, don't have original FLA anymore).  That background graphic is LARGER than the stage, hanging off each side by about 250px or more.  The entire stage remains visible no matter what size the browser is.  All dead space is filled in by an overhanging graphics (like my example) or the background color of the stage.

Now here's an example with scalemode = false, and salign = tl:


This is another site I did years ago... and this is a complete opposite scenario from the one above.  Here, you notice that the graphics never scale... and site is centered?!  Even though I specified scalemode = tl (top left), I am using actionscript to keep the movie centered.  You will also notice that when the browser gets too small, the browser scrollbars appear.  This is done using javascript.  When you use percentages, the flash movie is ALWAYS smaller than the browser.  In this scenario,  I am dynamically setting the width and height of the SWF between percentages and fixed pixel width based on the size of the browser.  When the browser gets too small, I set the movie to a fixed pixel width... allowing the movie to become LARGER than the window... thus triggering the browser scrollbars.

I must apologize for the code in these two examples.  I was not much of a programmer back then and am not too proud to show those... but they serve as good examples.

~Ryan Wheale
OK, now to answer your question.

First off, you will want to embed your movie using percentages, set scalemode to false, and set salign to tl (top left).

1) I advise you put all your graphics and everything INSIDE parea.  Then you will need to modify your code a little bit:

parea.width = sw - parea.x * 2;
parea.height = sh - parea.y * 2;

For the border, you can use a similar syntax, except subtract an additional 50 px or so
border.width = sw - border.x * 2;
border.height = sw - border.y * 2 - 50;

Then for the buttons, you will want to do something like:
(see code below)

2) If you want to have min and max values, you will need to do that in actionscript or javascript.  A simple if/else is all you need.  I recommend javascript because you can trigger the browser scrollbars.  See my example from above to see an amateur way of doing this:

(view source)

3) See code below on how to do this.  The code is modified from the file you attached.

import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

var sbOffsetX:Number = stage.stageWidth - skip_but.x;
var sbOffsetY:Number = stage.stageHeight - skip_but.y;

var fsOffsetX:Number = stage.stageWidth - full_screen.x;
var fsOffsetY:Number = stage.stageHeight - full_screen.y;

// initialize sizing
resizeHandler (null);

function resizeHandler (event:Event):void {
  var sw:Number = stage.stageWidth;
  var sh:Number = stage.stageHeight;
  parea.width = sw - parea.x * 2;
  parea.height = sh - parea.y * 2 - 50;
  skip_but.x = sw - sbOffsetX;
  skip_but.y = sh - sbOffsetY;
  full_screen.x = sw - fsOffsetX;
  full_screen.y = sh - fsOffsetY;

Open in new window

ApariAuthor Commented:
Okay, I think I understand now.

If the swf is embedded using fixed dimensions, it won't resize.

I wasn't thinking of triggering a resolution change. I was just thinking of different browser resolutions and say for example if I have a browser window open but it is not maximised that the document stage could resize, as in become smaller (up to a certain point), and then if the window was maximised, the document stage would resize, as in become larger.

I think that's where I was getting confused, I was assuming that the stage could resize regardless of what dimension it was set at.

I do know that the depending on where objects are that a resize would affect them.

Thank you so much for all your help, it's easy to get confused if you recognise certain rules/logic.
ApariAuthor Commented:
Excellent, I feel that my question was little bit ignorant, but the Experts who assisted still took time to explain and help me understand in a professional manner.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now