Sticky Footer

Sticky Footer

The sticky footer is an element that sticks to the bottom of your Flash page. Imagine a MovieClip that always stays at the bottom of the stage even when the stage is resized.

Note this recipe makes use of the Full Browser Flash recipe.

The basic ingredients for this recipe are the Event.RESIZE event and stage.stageHeight and stage.stageWidth properties.

The Event.RESIZE event is dispatched when ever the stage changes size. Adding a listener for this event you can have the handler for the event look at the new size of the stage and reposition elements on the stage.

stage.addEventListener( Event.RESIZE, resize_handler );

Setting up the art. If you have a movieClip that will position itself at the bottom of the stage, placing the registration point of this clip at the bottom of the clip makes the process easier. Since setting the y of the clip to the height of the stage align the clip at the bottom edge of the stage.

footer_mc.y = stage.stageHeight;

If the registration point is at the top of the clip you can position the clip at stage.stageHeight - clip.height.

footer_mc.y = stage.stageHeight - footer_mc.height;

In order for Flash to place elements correctly the stage.align and stage.scaleMode properties need to be set so that Flash is keeping the registration point of the stage fixed in the upper left corner and is not scaling the contents of the stage as the stage is scaled.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

The whole recipe might look like this. Assume that you have a MovieClip on the stage with the registration point aligned at the bottom of the artwork. This MovieClip is named footer_mc.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addEventListener( Event.RESIZE, on_resize );

function on_resize( e:Event ):void {
    footer_mc.y = stage.stageHeight;
}

Testing the recipe:
Testing the movie in flash. Try resizing the stage. You should see the MovieClip footer_mc move to align itself with the bottom of the stage as the stage is resized.

Anomalies:
You may notice that the motion is a little jerky when testing in Flash. Don't worry, the repositioning of the clip will be much smoother in a browser or in the Flash Player.

Details:
To position the footer at the bottom of the stage when the movie begins, you can either place the clip on the stage at the correct position on the stage. If this not possible and or you need to preposition the clip with AS, you can do that with:

footer_mc.y = stage.stageHeight;

You'll need execute this line outside of the resize handler. Since the resize handler will only be called after the stage changes size. Placing the line above on the timeline or in the Constructor of a Class will probably accomplish this. You may need to place it in handler for the ADDED_TO_STAGE event in some cases.


Sticky Footer 2: Adjustable width
The sticky footer is useful in the first configuration. But, often the stage will not only change height, it will also change in width. In many cases you will want your footer to expand to fill the width of the stage.

Scaling footer_mc is not acceptable as everything inside the footer_mc will scale with it. To keep a consistent background in the footer that can cover the width of the stage requires an extra movie clip nested within footer_mc. Imagine this arrangement:

footer_mc

back_mc

The script below sets the width of back_mc to the width of the stage whenever the stage is resized. This is the same as the code above with the addition line of code in red and the extra movieclip nested inside of footer_mc.

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addEventListener( Event.RESIZE, on_resize );

function on_resize( e:Event ):void {
    footer_mc.y = stage.stageHeight;
    footer_mc.back_mc.width = stage.stageWidth;
}

Sticky Footer 3: Add buttons to the footer
You may want to add interactive elements to the footer. This easily accomplished by adding these elements nested within the footer_mc.

In this case all buttons are added inside of footer_mc. From the main timeline or document class these buttons would accessed as:

footer_mc.button_mc


Sticky Footer Popup
The Sticky Footer recipe can be combined with the Popup footer sidebar recipe. Here the footer_mc sticks to the bottom of the stage even after it has been resized.