Fluidflash

Their is nothing wrong with a nice header graphic. Clients, designers and customers alike love them. But I often see them used as an excuse for fixed width designs. Well no more I say (unless, of course you have a perfectly good reason for a fixed width design in which case you dont really need this technique.)

The plan was simple. Find a way of incorporating flash headers into sites using liquid or elastic designs in much the same way you might use lots of sliding doors background-image goodness.

And all it takes is a snippet of actionscript goodness:

Stage.scaleMode = "noScale" 
Stage.align = "TL" 
var width
var height
function resizeEvent ( ) {
    width = Stage.width
    height = Stage.height
    dimensions.text    = 
       'width : ' + width+ '
        height : ' + height
    topRight._x = width
    bottomLeft._y = height
    bottomRight._y = height
    bottomRight._x = width
}
resizeEvent ( )
var stageListener = new Object ( );
stageListener.onResize = resizeEvent
Stage.addListener ( stageListener );

Download example

Comments

  1. I’d be interested to know what kind of problems you’ve come across using liquid designs like this. While mine have been largely problem-free, when I came to implement a photo-gallery with a scrolling feature in the liquid layout, the scrolling functionality failed. Can’t understand it.

    Giles - 19th April 2007

  2. friend, this has saved my bacon. you rock. keep it up.

    teneb - 25th January 2008

  3. do you have an actionscript 3.0 version of it.. heres my webfolio.. http://reinalynben.com planning to replace it with a flash version this late march..

    rlyn - 21st February 2008

  4. Thanks alott!!

    Diego - 26th June 2008

Comments are now closed.