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

Filed under Flash, Work by Chad | 13 comments

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

Posted on October 2, 2008

13 comments

1. Savvas Malamas Oct 3

   hello there.In order to keep the content(art) centralized you should use stage.stageWidth / 2 – art.width / 2 and do the same for the height property on the resize listener.

2. Chad Oct 3

   Savvas,
   You are correct… I forgot to mention in my post why I didn’t use that in my resize listener… I have my art symbol registered with the registration point in the exact center of the movie clip. I usually do that, rather than let the top left corner of a mvie clip be the registartion point. This allows me to do better scale operations,etc. But, yeah, withouth centering your art clip, you need that “- art.width / 2″ as mentioned.

3. Savvas Malamas Oct 3

   ok nice post and really useful, take care

4. chad Oct 3

   n/p! thanks for dropping by.

5. Mircea Oct 8

   Very nice signup page!

6. Alex Oct 9

   Thanks for the great tips. What you said is true. It is not easy to make it on the middle. However it is very important to do so to make visitors feel that the site is professional and trustworthy.

   A site that is not well design is mostly going to be perceived as a site that is created by some colleague fresh grads without any business experience or some company that is trying to cut cost.

   I realized websites from the members of Site Build It have this kind of problems. It just doesn’t feel right to buy products or services from them.

7. Ron Oct 11

   Thanks for the information I was looking around for some info on flash and found this blog very helpful thanks again.

8. John Oct 12

   Wow! This tip is cool. Thanks for posting. It might be useful for me. My blog is having some alignment problems. I’m gonna look how to make some changes on it too!

9. Hybridlab Jan 5

   Hey there,

   like what youre saying. Im doing an mphil on this sort of thing and work like to ask you some questions if that is cool?

10. Hybridlab Jan 6

    Thanks

11. Brian Apr 1

    I think depending on what you’re doing, site design is very important. If you’re providing a service or trying to represent yourself in a professional manner, its the way to go.

    If on the other hand you’re just trying to convey information, like a computer tech blog or a ‘how to blog’, then I don’t think its that important.

    Of course with an information website like yours though, that is about design and dev work, you would be crazy if you didn’t have great design like you have here.

    Thanks for the pointers, I’m going to try and use them on my other, more pretty blog.

12. ASP Scripts Jun 13

    This is a very helpful tip. Thanks for sharing. I am still learning flash.

13. matt Sep 20

    Thank you for this post, it has helped me out with my blogs!

Leave a reply