Full Page Flash (1)

THIS IS A TUTORIAL ON HOW TO BUILD A FULL PAGE FLASH

This is what the first step looks like.
Resize the window to see the effect.
Later we’ll fix all the obvious things wrong with the file.

STEP ONE

Open Flash™ and create a new document. Build 3 layers.
Like this…

In the first frame of your actions layer you start with these two lines of code:

Stage.scaleMode = "noscale";
Stage.align = "TL";

The first line will prevent the content of your movie from scaling when the browser window is scaled.

The second makes sure that the content of your SWF is always aligned at: TOP LEFT. There are other abbreviations: C, T, B, BL, TR, TL and BR

Check under ‘Stage.align’ in the REFERENCE INFO for more information.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

SECOND STEP

Create a MovieClip with an instance of tweenMC.
In my movie this is the MC with the slogan in it.
Create a background MovieClip with an instance of backGroundMC.
Mine has the red to blue gradient.

For now we’ll center ‘tweenMC’ with these lines of code:

stop();
tweenMC._x = Stage.width/2;
tweenMC._y = Stage.height/2;

Stop; (’cause we always need a stop)
tweenMC’s x position is the same as the width of the stage, divided by 2;
Same for the y position;

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

THIRD STEP

We’re going to build a Listener and attach it to the MovieClip “tweenMC”

Stage.addListener(tweenMC);

ABOVE the last piece of code were going to call a function:

tweenMC.onResize = function() {
this._x = Stage.width/2;
this._y = Stage.height/2;
};

When window is resized… do this to the tweenMC MovieClip
Make mc’s middle point the same as the width of the stage divided by 2
Same for the y axis

FINAL CODE:

Stage.align = "TL";
Stage.scaleMode = "noScale";
//
stop();
//
tweenMC._x = Stage.width/2;
tweenMC._y = Stage.height/2;
//
tweenMC.onResize = function() {
this._x = Stage.width/2;
this._y = Stage.height/2;
};
//
Stage.addListener(tweenMC);

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

FOURTH STEP

All done with code, now we’re going to change the PUBLISH SETTINGS, under FILE.

Go into the HTML portion of the settings:
Change DIMENSIONS to PERCENT
WIDTH to 100
HEIGHT to 100
Leave SCALE as DEFAULT for now.
Later we’ll change it for another effect.

Cool we’re done! There are a lot of other ways to write this code above. This is just one.
For now here is the .fla we just worked on… with full comments.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Now you understand the basics, I’m going to write the code another way as well as add some new elements and tricks. In the last example the MovieClip instantly changed it’s position as we resized the window. There is also a way to delay or smooth-out the shift in position.

EASING

Luckily for us many truly great actionscripters have done all the hard work and created actionscript tweening classes. If you have downloaded any of these feel free to use them instead of the one built into Flash which I’m going to use.

dianimation

tweener

fuse

sandy

animationpackage

Just google these names and you’ll come up with something.
Also check out Jen De Haan’s blog on this subject.
If you decide to make a career out of tweens.

Here it is in action.

Above all the other code we have… Let’s wake up the ‘tween class’, and ask to borrow the easing feature.

import mx.transitions.Tween;
import mx.transitions.easing.*;


NOTE: This code might not be necessary depending on your version of Flash.

Now I’m going to rewrite the ‘function’ code, so select
tweenMC.onResize = function() { and everything below it and delete.

We’re going to create a new listener, again, but this time we’ll call it up as a variable and leave it as an empty object.

var myListener:Object = new Object();

Tell the new listener object what to listen out for, and when it hears it… to do this…
myListener.onResize = function() {


Now comes the meat and potatoes. Basically both lines are the same, so I’ll just talk about one. We’re asking the actionscript class to create one of it’s specialty items a ‘new Tween’.
Then(Attach it to our MovieClip instance, using this axis, Strong.easeInOut, the start point is the position of tweenMC’s current position, the destination is the width of the stage divided by 2, speed = 2, do you want to use seconds? True (False would specify frames);

NOTE : The Strong.easeInOut part is a function contained in my particular tweenAS I loaded in the first two lines of code. Check to see which functions are contained in your tween engine.

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);


Then we just give it the authorization with:

Stage.addListener(myListener);


FINAL CODE:

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);

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

NOW ON TO PART 2