In this tutorial you will learn how to create a fullpage and fullscreen flash website and how to dinamically allign all the elements on the stage.

Click here to see a sample of the movie.

You will need two very easy to use javascript files:
- SWF Object to embed the swf file on your page. Download it here.
- SWF Fit that resizes your flash movie automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Download it here.

1. First we will create the scene with all the elements we need.
More exactly we will draw 9 shapes that will represent the 9 areas of the stage which we will align. Convert all of these into movie clips (select each one and press F8):
- Top Left (set name to top_left)
- Middle Left (set name to middle_left)
- Bottom Left (set name to bottom_left)
- Middle Top (set name to middle_top)
- Center (set name to center)
- Middle Bottom (set name to middle_bottom)
- Top Right (set name to top_right)
- Middle Right (set name to top_right)
-Bottom Right (set name to top_right)

Don't forget to also name the instance not just the symbol (see below).

3. The first part of code that we will tell the flash player to keep the size of all the elements the same regardless of the screen size. By default the stage will scale up to fill the screen and we don't want that to happend.

var swfStage:Stage = this.stage;
swfStage.scaleMode = StageScaleMode.NO_SCALE;
swfStage.align = StageAlign.TOP;

4. Next we will import some flash libraries required for the cool elastic movement effect when repositioning the stage elements.

import flash.events.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

5. Next we will create a variable that will tract the state of the stage (fullscreen of normal)

var screenCheck:Boolean = false;

6. We will add a listener for a click event to the center movie clip that will switch the stage to full screen.

center.addEventListener(MouseEvent.CLICK, fullScreenUP);

7. Now we will create a tween function to align the stage elements. This function will move the target movie clip (TweenMC) to the TargetX and TargetY coordonates using an Elastic.easeInOut movement.

function positionMc(TweenMC:MovieClip,TargetX:Number,TargetY:Number):void {
    var tween_handler_1 = new Tween(TweenMC,"x",Elastic.easeInOut,TweenMC.x,TargetX,1,true);
    var tween_handler_2 = new Tween(TweenMC,"y",Elastic.easeInOut,TweenMC.y,TargetY,1,true);
}

8. We will run this fuction on all the satge elements for the initial positionig on the stage. I have arranged the elements so they leave a 20 px border all arround. You can changed this to your needs. Also 550 is the stage width I used. You will have to change this as well if it is different.

positionMc(top_left,((stage.stageWidth-550)/2*-1)+20,20);
positionMc(middle_left,((stage.stageWidth-550)/2*-1)+20,stage.stageHeight/2-middle_left.height/2);
positionMc(bottom_left,((stage.stageWidth-550)/2*-1)+20,stage.stageHeight-bottom_left.height-20);
positionMc(middle_top,stage.stageWidth/2-middle_top.width/2-(stage.stageWidth-550)/2,20);
positionMc(center,stage.stageWidth/2-center.width/2-(stage.stageWidth-550)/2,stage.stageHeight/2-center.height/2);
positionMc(middle_bottom,stage.stageWidth/2-center.width/2-(stage.stageWidth-550)/2,stage.stageHeight-bottom_left.height-20);
positionMc(top_right,stage.stageWidth-top_right.width-20-(stage.stageWidth-550)/2,20);
positionMc(middle_right,stage.stageWidth-middle_right.width-20-(stage.stageWidth-550)/2,stage.stageHeight/2-middle_right.height/2);
positionMc(bottom_right,stage.stageWidth-bottom_right.width-20-(stage.stageWidth-550)/2,stage.stageHeight-bottom_right.height-20);

9. Now we will add an event listener for when the stage is resized and the function for it that has the same code as just above to position all the elements.

stage.addEventListener(Event.RESIZE,fullScreenCenter);

function fullScreenCenter(e:Event):void {
   positionMc(top_left,((stage.stageWidth-550)/2*-1)+20,20);
   positionMc(middle_left,((stage.stageWidth-550)/2*-1)+20,stage.stageHeight/2-middle_left.height/2);
   positionMc(bottom_left,((stage.stageWidth-550)/2*-1)+20,stage.stageHeight-bottom_left.height-20);
   positionMc(middle_top,stage.stageWidth/2-middle_top.width/2-(stage.stageWidth-550)/2,20);
   positionMc(center,stage.stageWidth/2-center.width/2-(stage.stageWidth-550)/2,stage.stageHeight/2-center.height/2);
   positionMc(middle_bottom,stage.stageWidth/2-center.width/2-(stage.stageWidth-550)/2,stage.stageHeight-bottom_left.height-20);
   positionMc(top_right,stage.stageWidth-top_right.width-20-(stage.stageWidth-550)/2,20);
   positionMc(middle_right,stage.stageWidth-middle_right.width-20-(stage.stageWidth-550)/2,stage.stageHeight/2-middle_right.height/2);
   positionMc(bottom_right,stage.stageWidth-bottom_right.width-20-(stage.stageWidth-550)/2,stage.stageHeight-bottom_right.height-20);
}

10. Finally we will add the function that will toggle the fullscreen mode.

function fullScreenUP(event:MouseEvent):void {
   if (screenCheck == false) {
      stage.displayState = StageDisplayState.FULL_SCREEN;
      screenCheck = true;
   } else {
      stage.displayState = StageDisplayState.NORMAL;
      screenCheck = false;
   }
}