How to build a dynamic resize-able Flash player

Question

Morning stackers! So my question today isn't dealing with any code, but how to go about this the correct way from the start. I have a video player built to a static size (max: 800x600) which I'll have to re-code every time I need it to be a different size.

What I need it to do in the near future is dynamically resize itself and all the elements inside of it based on 1 width variable that it will received either from HTML or XML.

Now to me there are 2 ways to go about this:

• Start with the smallest size possible and resize upwards, but I'm unsure of how the Flash movie will actually expand upwards as of right now.
• Or 2, start with the largest size possible (in this case 800x600) and size everything down.

Step 1, I think seems to be the better way to go about this (ala YouTube style), but Step 2 also seems like it could be the easier way? A friend of mine mentioned that I should go with the larger size and have elements resize in each class, then fix to the upper left hand corner. However for the player to fit inside of certain div columns on sites, blogs whatever he said that there will have to be an HTML/CSS side of this... meaning that the div containing the resized flash player will have to cover up the areas of the Flash movie that are not to be shown? Is that possible to put a 800x600 flash movie into a div that smaller then 800 pixels wide? And cover it up with another div?

Anyways, my mission is to be able to have a dynamically sized player like this:

Thoughts? Recommendations? Best practices for this before I start?

Answer 1

You're making this way too complicated on yourself. What you're trying to accomplish is a simple full width and height layout aligned to the top left with no scaling. First you need to tell flash exactly that with these two lines at the top of frame one or in the constructor of you document class:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align =  StageAlign.TOP_LEFT;

then you just need to position your display objects using the width and height values you pass in to your swf. Starting big or starting small don't really have anything to do with it since you're really trying to make it dimension agnostic. You're going to have to make layout decisions built into your code that are triggered by various dimension combinations.

Answer 2

Adding to greg's response, have a look at the "resize" event from the stage object. Then, stage.stageWidth and stage.stageHeight will give you the actual height and width of your swf, so you can position and scale your assets accordingly. A typical way of doing this from the document class constructor is this:

public function Main() {
  if(stage) {
    addedToStage(null);
  }else {
    addEventListener(Event.ADDED_TO_STAGE, addedToStage);
  }
}
function addedToStage(e) {
  stage.scaleMode = StageScaleMode.NO_SCALE;
  stage.align =  StageAlign.TOP_LEFT;
  stage.addEventListener(Event.RESIZE, resize);
  resize(null);
}
function resize(e) {
  var W:uint=stage.stageWidth;
  var H:uint=stage.stageHeight;
  mysprite1.x=W-mysprite.width;
  mysprite2.height=H;
  //etc...
}

Answer 3

Because also the html wrapper should be resized, maybe this helps: http://blog.sebastian-martens.de/2010/06/resize-flash-application-container/

cheers.