(Continued from previous post)

2.3 Complex (Flowing/Floating) full browser Flash :
Demo

The purpose of this demo is to show you how to make object flow with the Stage (or browser width and height)

THEORY & MATH
We would create 3 MovieClip of names object1, object2 and object3 (with the origin at its upper left corner – this is important)
object1 would be an object that keeps a fixed distance with the browser (such as a background)
object2 would be an object that keeps a fixed distance with the bottom right corner (such as a decoration at the bottom of your page)
object3 would be an object that should move along with how big or small your browser is, based on the top left corner (such as your menu)

You can see the visualization in the following image (Click to view enlarged)

In this case, with a little Math, the formula for your new x and y are :
For object1, it’s obvious that its x and y remains the same :
newx = oldx
newy = oldy

For object2, it’s a little more tricky. The thing is that it should keep a fixed distance to your lower right corner
We would have this :
new x + object width + e = new stage width
=> new x = new stage width – e – object width
the same for new y : new y = new height – f – object height

For object3, your object would span depending on how big your stage is. The formula for this situation may varies greatly on how you want it to be, but I would do a simple one like this:
newx = oldx * (new width / old width)
newy = oldy * (new height / old height)

APPLY IT IN YOUR FLASH

Create your 3 shapes, convert them to MovieClip, and name them as accordingly. It can be anything, just make sure that the origin is at its upper left corner
(This is important every time your Actionscript involves x,y positions and width/height)

To modify your Flash when your stage is changed, you would need to do 2 things :

• When the user scale their browser, they’re scaling our Stage. But as you can see in previous example, items in your Stage origin would be at the center – since it is the default behavior. You would need to change it so that your Stage origin keeps its position at the upper left corner :
  

  stage.scaleMode = “noScale”;
  stage.align = “left”;

  That’s why we would add an event listener to the Stage, a function that would be called when the Stage is changed.

  stage.addEventListener(Event.RESIZE, onResizeStage);

• One important thing to note : Since we’re doing full-browser Flash, the initial Stage width and height will NOT be the same as the Stage of your Flash. That’s why, it’s needed to calculate the position the first time.
  Remember to store any data you need to access it when the stage is resized.
• Then, modify that function to move the MovieClip to where it should be, apply the Math, assign it to the object’s x and y, and you’re done.
  

  function onResizeStage(evt:Event):void{
  //This part can be put in a function to reuse
  object3.x = originalXObj3 * (stage.stageWidth / originalStageWidth);
  object3.y = originalYObj3 * (stage.stageHeight / originalStageHeight);
  object2.x = stage.stageWidth – distanceX – object2.width;
  object2.y = stage.stageHeight – distanceY – object2.height;

The factors that you may need are accessed as below :
New stage width and height : stage.stageWidth , stage.stageHeight
Your MovieClip’s width and height : objectName.width, objectName.height

3. Mixing Flash with other HTML content
Here are some tips when you mix your Flash and other HTML content :

• Flash can be embedded with transparent background. You just need to do this before the swfobject.embedSWF:
  

  params.addValue(‘wmode’,‘transparent’);

• However, the space that it occupies would still be a rectangle. In some cases when you layout the Flash that involves roll over action above HTML buttons, it could renders the others useless, even though it’s transparent. To take care of it, you may need to place the Flash behind other HTML tags that involves roll over and click with z-index in CSS.

4. Source file download for this and last post
To the folder