The "Full browser screen" Flash project with tweening

"Full screen" or "full browser screen" Flash websites became a standard on the web now. And it's actually very easy to create such a website as Action Scripts 3 provides us with RESIZE event to track size changes of the Flash Player window or the internet browser. Actually, all we need to do is just adjust x and y properties of our display object or resize any background to fit the resized window.

HERE you can see an examle of a "full browser" Flash project.
Remember to resize the browser window to see the actual effect.

I have placed three MovieClips, called leftBox_mc, middleBox_mc and rightBox_mc on the stage of my project. Aim was to keep the leftBox on the top left corner of the scene, the middleBox in the middle and the rightBox on the bottom right corner. I also wanted to animate movement of middleBox, so it would respond to the resize event with slight delay.

First step is to declare from action script that we don't want any scaling and that the 0,0 coordinates are in the left top corner of the stage. Then we set the listener for RESIZE event and the handling function that will adjust the Movie Clips positions. We will use tweening to change the middleBox position.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.events.Event;
import fl.transitions.TweenEvent;
 
public class FullBrowser extends MovieClip
{
   var myTweenX, myTweenY:Tween;
 
   public function FullBrowser()
   {
      //no scalling and 0,0 coordinates in the top left corner
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
 
      //listening for resize
      stage.addEventListener(Event.RESIZE, resizeMe);
 
      //call the handler function as a first thing to set the stage
      resizeMe(null);
   }
 
   public function resizeMe(e:Event):void
   {
      //left box will be always placed on the left top corner
      leftBox_mc.x = 0;
      leftBox_mc.y = 0;
 
      //right box will be always placed on the right bottom corner
      rightBox_mc.x = stage.stageWidth - rightBox_mc.width;
      rightBox_mc.y = stage.stageHeight - rightBox_mc.height;
 
      //middle box will be animated to the middle of 
      //the screen at the time of any window resizing
      myTweenX = new Tween(middleBox_mc, "x", Strong.easeIn, middleBox_mc.x, 
                     stage.stageWidth / 2 - middleBox_mc.width / 2, 1, true);
      myTweenY = new Tween(middleBox_mc, "y", Strong.easeIn, middleBox_mc.y, 
                     stage.stageHeight / 2 - middleBox_mc.height / 2, 1, true);
   }
}
 

Now if you compiled your project and resized the Flash Player window, you probably also noticed that the Movie Clips changed their positions on the screen. So this is what we wanted. The next step is to publish your project along with html file that will display your flash project in full browser size (Publish Settings -> HTML -> Dimension - percentage 100%):

When opening just created website in the browser, you probably noticed that actually there is still border around the embedded Flash. To get rid of that, just add the cCSS stylesheet to the HTML and reset the body margins, paddings and borders as below:

1
2
3

body {
  margin: 0px; padding: 0px; border: 0px;  
}