Full Page Flash (2)

… CONTINUED FROM PART ONE

As you probally saw in the last part of the tutorial, the background wasn’t behaving the way we would like.
So let’s fix that.

We’re going to tackle 3 things:

It’s going to look like this when we’re done.

The removal of the border is going to take a little change in the html page that holds the swf file. Open the html file and add zero value to all the MARGINS:

body bgcolor=”#ffffff” MARGINWIDTH=”0″ MARGINHEIGHT=”0″ LEFTMARGIN=”0″ RIGHTMARGIN=”0″ TOPMARGIN=”0″ BOTTOMMARGIN=”0″

Don’t forget to disable the HTML creation under the PUBLISH SETTINGS after you do that or else Flash will write over your customization.

Now we’re going to force the background to fill the entire browser window. If you have a different background to mine, convert it to a movie clip, give it an instance name of backGroundMC. Let’s go back to the first frame in the actionscript.
Here’s what we have so far:

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
Stage.align = “TL”;
Stage.scaleMode = “noScale”;
//
stop();
//
tweenMC._x = Stage.width/2;
tweenMC._y = Stage.height/2;
//
var myListener:Object = new Object();
myListener.onResize = function() {
new Tween(tweenMC, “_x”, Strong.easeInOut, tweenMC._x, Stage.width/2, 2, true);
new Tween(tweenMC, “_y”, Strong.easeInOut, tweenMC._y, Stage.height/2, 2, true);
};
Stage.addListener(myListener);

TIP: Make sure all your movie clips are placed on the zero axis of the main timeline.

As you can see the backGroundMC isn’t mentioned at all. I want the background to start out filling the window, so to the set-up actions I’ll add these two lines of code:

backGroundMC._width = Stage.width;
backGroundMC._height = Stage.height;

Explained thus: Make the width of my movie clip with the name backGroundMC, the same as the stage (which we called out to 100% in the publish settings), so it’s the same as the browser window. Same for height.

These 2 lines of code will need to go into our script twice. Once to establish the start position of the MC and the second, when the user resizes the window.

Next let’s delete some code and change the position of ‘tweenMC’ on the stage. I’m going to place the bottom right hand corner of the tweenMC movie clip on the top left hand corner of the stage. So it begins life off stage and flies in to the center. Then delete these two lines of code the first time they appear in the actionscript.

tweenMC._x = Stage.width/2;
tweenMC._y = Stage.height/2;

Now your actionscript looks like this:

import mx.transitions.Tween;
import mx.transitions.easing.*;
//
Stage.align = “TL”;
Stage.scaleMode = “noScale”;
//
stop();
//
var myListener:Object = new Object();
myListener.onResize = makeAdjustment;
//
Stage.addListener(myListener);
function makeAdjustment():Void {
new Tween(tweenMC, “_x”, Strong.easeInOut, tweenMC._x, Stage.width/2, 2, true);
new Tween(tweenMC, “_y”, Strong.easeInOut, tweenMC._y, Stage.height/2, 2, true);
backGroundMC._width = Stage.width;
backGroundMC._height = Stage.height;
};
makeAdjustment();

Here is the .fla we just worked on… with full comments.

Coming soon, I’m going to tackle dynamic moving using bitmap fonts, then I’ll be getting creative with what we’ve learned, while adding a few more tricks.