# Formatting when using images

**URL:** <https://forum.kirupa.com/t/formatting-when-using-images/262826>\
**Category:** flash\
**Created:** [June 10, 2008, 11:18am UTC](https://forum.kirupa.com/t/formatting-when-using-images/262826 "2008-06-10T11:18:43Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![goodhorse](https://avatars.discourse-cdn.com/v4/letter/g/f0a364/32.png) [@goodhorse](https://forum.kirupa.com/u/goodhorse)\
**Post date:** [June 10, 2008, 11:18am UTC](https://forum.kirupa.com/t/formatting-when-using-images/262826/1 "2008-06-10T11:18:43Z")

</div>

Hi there, I’m having problems formatting Flash for websites. I wanted the space to be filled depending on how big a monitor the user had, but when I do this the images stretch and look awful. Have a look at this website: [http://www.elmwood.co.uk/flash/?#](http://www.elmwood.co.uk/flash/?#)

No scroll bars, yet on different monitors, it looks great, big or small. The space is completely filled with no borders or anything. Does anyone know what they’ve done to create that page format? Any help is hugely appreciated, cheers.

---

<div class="post-metadata">

**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\
**Post date:** [June 10, 2008, 3:12pm UTC](https://forum.kirupa.com/t/formatting-when-using-images/262826/2 "2008-06-10T15:12:44Z")

</div>

Your example is an oversized site that is centered in the Window.  
What you are probably looking for is called “liquid GUI”.

Here’s the code I’m using for my latest project.  
Here’s an example:[[COLOR=“Blue”][U]http://www.byrographics.com/AS3/byroSite/byrographicsSite.html[/U][/COLOR]](http://www.byrographics.com/AS3/byroSite/byrographicsSite.html)  
Resize the window and notice that the menu, header, and footer remain anchored to their respective positions on the screen, regardless of the browser size.

```auto
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);

function resizeHandler(event:Event=null):void {
	var sw:Number = stage.stageWidth;
	var sh:Number = stage.stageHeight;

	footer.x = sw/2;
	footer.y = sh - footer.height/2;

	buttonBar.x = sw/2;
	buttonBar.y = 0 + buttonBar.height/2;
	buttonBar.width = footer.width = sw;

	buttonGroup.x = 0 + buttonGroup.width/2;
	buttonGroup.y = sh/2;
	buttonLabels.x = buttonGroup.x;
	buttonLabels.y = buttonGroup.y;

	sidebar.graphics.beginBitmapFill(new paper(0, 0));
	sidebar.graphics.drawRect(-10, 0, buttonGroup.width, sh);
	sidebar.graphics.endFill();

	pageGroup.x = sw/2;
	pageGroup.y = sh/2;
}

resizeHandler();

```