Flash, Flex and ActionScript tutorials – flashadvanced

Today I will show you one of the must know techniques in Flash. We will be using ActionScript 3 to fill the whole browser window with a background pattern. Also, I will show you how to center your content on the stage. So, what we want to do is when we resize the browser, the content is centered and the background pattern is not scaled. Let’s get started!

1. First of all, choose a background pattern from this website: www.squidfingers.com. Download the .zip file. Unzip the file and open a new Flash CS3 document. Save it as tile.fla. Import the pattern GIF by clicking File -> Import -> Import to Library.

2. Go to the Library panel, select the background pattern and linkage it to a class named myBitmapImage:

3. Create a Movie Clip that you want to center. Set the registration point to center and give it an instance name “cont”.

4. We are ready for ActionScript. Create new layer called “actions” and open the Actions panel.

//centering the content by default
cont.x = stage.stageWidth / 2;
cont.y = stage.stageHeight / 2;

//new pattern instance
var bg:myBitmapImage = new myBitmapImage(0,0);
//bitmap data
var tile:BitmapData = new BitmapData(100, 100, false, 0);
//rectangle which represents the stage
var rectPattern:Sprite;

function initStage():void
{
	//setting the scaling and the alignment of the stage
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   //we call the onStageResize function on a resize event
   stage.addEventListener(Event.RESIZE, onStageResize);

   //function for filling the background
   fillBG();
}
function fillBG():void
{
   //first we have to draw our bitmap image from library
   tile.draw(bg, new Matrix());
   //matrix that is used for beginBitmapFill function
   var matrix:Matrix = new Matrix();
   rectPattern = new Sprite();
   rectPattern.graphics.lineStyle();
   //beginBitmapFill method, fisrst we have to put bitmap data and second is matrix with value 0
   rectPattern.graphics.beginBitmapFill(tile, matrix);
   rectPattern.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    //displaying rectangle rectDrawing
   addChild(rectPattern);
   //setting the child index to zero so the background is always behind the other objects on stage
   setChildIndex(rectPattern, 0);
}

function onStageResize(e:Event):void
{
   //repeat fill background function to fill resized stage
   fillBG();
   //always aligned at center of the stage
   cont.x = stage.stageWidth / 2;
   cont.y = stage.stageHeight / 2;
}

//init the stage
initStage();

5. One of the last things to do is to set the publish settings. Go to File -> Publish Settings and choose HTML. Under “Dimensions” choose “Percent”:

6. The last thing to do is to publish the movie into a HTML page. So, once again go to File -> Publish Preview -> HTML. Your movie is already published in the directory where you saved your movie. Open the HTML file with a text editor and paste these lines of css code just before the opening tag:

<style>
body{margin: 0px; padding: 0px}
</style>

We are ready. Everything fits perfect now. Enjoy!