Published on September 9, 2005

Tutorial details:
Written by: Peter Strømberg [email:webmaster@cv-e.com]
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.

Page 1 of 3

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;

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

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...

Page 2 of 3

Let’s set up a Listener object. Listeners are also new to MX. This one simply “listens” for changes in the Stage size via the onResize method and whenever it “hears” one it executes a function I’ve called myFrameAdjust

[as]myAlignment = new Object();
Stage.addListener(myAlignment);
myAlignment.onResize = function() {
myFrameAdjust();
};
[/as]

In the function, myFrameAdjust we can write all the things we want to happen when the browser window is adjusted. We could write all the adjustments in the onResize method, but we will want to trigger the same adjustments from other events so let’s make a separate function.

[as]function myFrameAdjust() {
        //stretch frameborder to bottom of the Stage;
        _root.borderV._height=Stage.height;
        //re-scale lefthand doc background to fill frame;
        _root.leftDoc.bg._height=Stage.height;
        _root.leftDoc.bg._width=_root.borderV._x;
        //re-scale righthand doc background to fill frame;
        _root.rightDoc.bg._height=Stage.height;
        _root.rightDoc.bg._width=Stage.height-_root.borderV._x;
        _root.rightDoc._x=_root.borderV._x;
}
[/as]

OK, that looks like a lot of code, but it should all be quite straight forward. Both the leftDoc background and the rightDoc background are stretched to the full height of the browser window, as is the frame border. Notice that the Stage objects height attribute is written without an underscore. I assume this is because height is a read-only attribute for the Stage Object whereas _height can be set for MovieClips.

[as]Stage.height
LeftDoc._height [/as]

The widths are calculated as the distance from 0 to the frameborder (left-hand side) and the distance from the frameborder to the right-hand side of the stage (Total Stage width minus frame border _x position).

Finally the right-hand doc is moved on the x axis to align with frame border.

We’ll now add colour to the background so we can see the effect more clearly.

[as]// Set frame colours
leftColor = new Color("_root.leftDoc.bg");
leftColor.setRGB(0xCCCC99);
rightColor = new Color("_root.rightDoc.bg");
rightColor.setRGB(0x99CCFF);
[/as]

In HTML we can express the width of frames as percentages of the page width. The Stage Object makes this possible in Flash too, although we have to work out our own percentages.

Add this line to the start-up properties

[as]widthPercent=40;
[/as]

We’ll use this to set the initial position of the frameborder.

Add this line as the first line of the myFrameAdjust function.

[as]function myFrameAdjust() {
_root.borderV._x = (Stage.height/100)*widthPercent;
...}
[/as]

Stage.height/100 gives us 1% of the stage width, then we simply multiply by 40.

myFrameAdjust may and may not be called when you preview your movie. To make sure it is called on startup simply add the line

[as]myFrameAdjust();
[/as]

to the end of your script page.

Test the movie and re-scale the window, either in Flash or in a browser. The two sides of the frame border should maintain thier size ratio, 40:60

Next we’ll make the frame border draggable.

If you edit the frameborder (edit in place) it should contain a button symbol. Add these actions to the button

[as]on (press) {
        startDrag(this, false, 0, 0, Stage.height, 0);
        _root.myMouseDown = true;
}
on (release, releaseOutside) {
        stopDrag();
        _root.myMouseDown = false;
        _root.myFrameAdjust();
}
[/as]

Now you should be able to click on the frame border and drag it from side-to-side, but not up and down and when you release it, it will snap back to it’s original position, as onRelease triggers the myFrameAdjust function.

There's more over the page...

Page 3 of 3

The background’s are not resized. We need to trigger myFrameAdjust continually while we drag the border, and if we don’t want it to snap back to it’s start position onRelease we need to also change the widthPercent to reflect the new position.

The myMouseDown Boolean will be used to prevent the function being triggered when the frameborder isn’t being dragged, to save on CPU, as follows.

[as]this.onEnterFrame = function() {
        if (_root.myMouseDown) {
                _root.widthPercent = _root._xmouse/(Stage.height/100);
                myFrameAdjust();
        }
        _root.cursorV._x = _root._xmouse;
        _root.cursorV._y = _root._ymouse;

};
[/as]

While we’re writing an onEnterFrame method we can make the double-arrow follow the cursor. Now we just need to show/hide the mouse and our cursor. For that we’ll add to the button actions within the frameborder.

[as]on (rollOver, dragOver) {
        _root.cursorV._visible = 1;
        Mouse.hide();
}
on (rollOut, dragOut) {
        _root.cursorV._visible = 0;
        Mouse.show();
}
[/as]

And hide the cursor in the first frame of the movie

[as]_root.cursorV._visible = 0;
[/as]

The Text Object allows us to create scalable text fields on-the-fly.

Add the following code to the first frame to create a text field in each Doc.

[as]//Set up page margins
myLeftmargin = 10;
myTopMargin = 10;
//create a text format. A text format can be applied to a text field
myTextFormat = new TextFormat();
//Many attributes of the text can be specified.
myTextFormat.size = 16;
myTextFormat.font = "_sans";
myTextFormat.color = 0xFFFFFF;
//An alternative text format
myTextRight = new TextFormat();
//If you use an exotic font, be sure to export it with your movie
myTextRight.font = "_sans";
myTextRight.align = "right";
//Create a text field in the lefthand doc
_root.leftDoc.createTextField("theText", 1, myleftMargin, myTopMargin,
_root.leftDoc.bg._width-(2*_root.myLeftMargin), 100);
_root.leftDoc.theText.wordWrap = true;
_root.leftDoc.theText.html = true;
_root.leftDoc.theText.htmlText = "This is a right justified text that wraps to fit the
window in the same way as HTML in a framesetFlash can accept the following HTML tags:
ItalicBoldUnderlineSize and Colour
Linebreakand Links <A HREF=\"http://www.cv-e.com\">My Home
Page</A>NOTE: Text style tags in HTML are ignored if the styleis set
explicitly in Flash via the TextFormat object.";
_root.leftDoc.theText.autoSize = true;
_root.leftDoc.theText.setTextFormat(myTextRight);
//Create a text field in the righthand doc
_root.rightDoc.createTextField("theText", 1, myleftMargin, myTopMargin,
_root.rightDoc.bg._width-(2*_root.myLeftMargin), 100);
_root.rightDoc.theText.wordWrap = true;
_root.rightDoc.theText.html = true;
_root.rightDoc.theText.htmlText = "This is a left justified text that wraps to fit
the window in the same way as HTML in a framesetAdjust the frame width and see how the
text conforms to the window size.There's no scrollbar in this version, so at some point
the text won't fit in the window boundries";
_root.rightDoc.theText.autoSize = true;
_root.rightDoc.theText.setTextFormat(myTextFormat);
//Set up the stage when the movie first opens
myFrameAdjust();
[/as]

Quite a mouthful, but I believe the comments explain what’s going on.

The most important line as far as our HTML-style frameset goes is

[as]_root.leftDoc.theText.autoSize = true;
[/as]

as this is what enables the text field to change size to accommodate the frameset.

Before you test it and find it doesn’t work, you need to add the following two lines to myFrameAdjust so that the text fields scale along with their document backgrounds.

[as]_root.rightDoc.theText._width = Stage.height-borderV._x-(2*_root.myLeftMargin);
_root.leftDoc.theText._width = borderV._x-(2*_root.myLeftMargin);
[/as]

I’ll cover the text object more thoroughly in another tutorial.

That’s about it. Just for fun here’s an example with a horizontal frame border as well and its FLA

I hope this tutorial has given you an incite into some new possibilities in MX, and maybe at the same time heightened your appreciation of the built-in functionality HTML offers. It’s taken over 70 lines of code here just to simulate a couple of HTML’s powerful, yet deceptively simple features in Flash MX.

This tutorial and all materials are Copyright © Peter Strømberg [email:webmaster@cv-e.com] 2002 and may not be reproduced without the permission of the author.(Just ask him [email:webmaster@cv-e.com], he'll probably say yes ;o)