Tutorial details:
Written by: Peter Strømberg
Time: 25 minutes
Difficulty Level: Intermediate
Requirements: Flash MX
Topics Covered: How to replicate the HTML Frameset look within Flash.
Assumed knowledge: Variables, Paths, Objects, Methods, Text Formatting, etc.

This tutorial is an introduction to the Stage and Text objects. First take a look at this web page and try re-scaling the browser window. A simple HTML frameset, right? Wrong! It’s a 100% Flash MX creation. This is a simple example of the type of functionality and browser adaptability made possible by the Stage and Text objects, new to Flash MX.

Before jumping into the code let’s build all the necessary MovieClips (or you could just download this FLA file). If you'd rather just dissect the finished movie download this FLA.

We need a double-arrow cursor, a ‘piece’ of frame border and a ‘document’ clip to contain the content of each frame


Notice the centre point of each clip. The cursor has its reference point in the centre. The top of the frame border graphic is aligned to its reference point and the Document Clip has its reference point in the top left-hand corner. This is important for the way the clips are scaled.

The frame border is actually a button Symbol inside a MovieClip (MC), and the Document is a plain square MC with instance name bg (background) inside another MC.

The size of the background MC inside the document MC is not important as it will be scaled dynamically. The other elements have been traced from an IE browser window to look and feel like standard HTML.

Right then, now let’s dive into the Actionscript.

First, in order to use the Stage object we need to set the movies scale mode to “noScale”. This can be achieved in the HTML, but as we’ll be previewing in Flash we can write it straight into our Flash file. Create a layer and name it “actions”. Select the first frame and open the actions panel if not already open. Add the following code;

//start-up properties;
Stage.scaleMode = "noScale";
Stage.align = "TL";
_quality = "LOW";

The stage alignment "TL" stands for top-left. This will keep the movie aligned to the top left corner of the browser window making calculations easier. I’ve set the quality to "LOW" to increase the performance and to prevent anti-aliasing, giving a convincing HTML-look.

Now the movie is set-up, add a new layer for the frame borders. Drag the frame border MC onto the stage. Make a layer for the cursors and one for the document clips.

The Stage should look something like this, with one document clip aligned to the top left corner, the other aligned to the top edge of the movie (y position is not important as it will be set dynamically) the cursor should be in a layer above all the other layers and the frame border layer is sandwiched in the middle.

Let's name the instances. I’ve used the following names:

borderV – the vertical frame border
cursorV – the double-arrow cursor
leftDoc – the left-hand document
rightDoc – the left-hand document

Now the clever stuff, turn the page...