A little tip… making a centered experience site. Noscale FTW!

Chad Udell
Posted on October 30, 2008 Category: Discover

A little tip… making a centered experience site. Noscale FTW!

Ah, those pesky placement parameters and CSS attributes that make the perfect publish for a Flash movie an elusive thing. You know the deal. You want an experience site look and feel. Lots of Flash, centered on screen. You don’t want the art to get distorted. You don’t want the art scaling up and filling the window looking childish or crappy. You want the art to stay centered on screen, vertically and horizontally. This isn’t quite as easy as it sounds.

We at the Iona Group recently put up a simple splash page/stealth screen/signup form at doctumlearning.com. Go check it out, and if you are interested in eLearning development, sign up, or contact me… Anyway… It’s a simple Flash movie. Smallish dimensions, and we wanted it to stay that way. So how do we put it in a webpage so it can appear to stretch and span the screen? Here you go…

Placed it on stage with a NOSCALE value for the scale parameter. Beyond that… We set the height and width to a percentage rather than an absolute pixel value. Now, set the “salign” paramter to “lt” to anchor the movie to the left and top of the browser window. After the HTML is ready, it’s time to get the CSS ready…

Here it is:

html, body{
   height:100%;
}

We set the html and body to 100%. That’s it. HTML and CSS in place, then it’s time to get the Flash ready. It may vary a little depending on the look you are going for, but here are the basics… Create your art. Animation, etc. Put all of it in one container movieclip. Mine is called “art”… Here is what the Actionscript looks like to keep it centered on the stage.

//import the needed classses
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
 
// double check and set the align paramters. just being overly safe.
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
 
//turn off the arts visibility
art.visible = false;
 
//add the listeners for the activitation and resize of the stage.
stage.addEventListener(Event.ACTIVATE, activateHandler);
stage.addEventListener(Event.RESIZE, resizeHandler);
 
// on activate, turn on the art's visiblity and set the position in the center of the stage size.
function activateHandler(event:Event):void {
  art.x = stage.stageWidth/2;
  art.y = stage.stageHeight/2;
  art.visible = true;
}
 
// on resize, turn on the art's visiblity and set the position in the center of the stage size.
function resizeHandler(event:Event):void {
   art.x = stage.stageWidth/2;
   art.y = stage.stageHeight/2;
}

That’s it. Hope this helps you. Know any other cool tips on how to position or scale Flash content in the browser? Let me know.

Leave a Reply