<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="0" height="0" xmlns:Components="Components.*"
creationComplete="init()" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
[Bindable]
private var mainButtonSize:Number;
[Bindable]
private var secondRowSize:Number;
[Bindable]
private var thirdRowSize:Number;
[Bindable]
private var buttonSpacing:Number;
//this function takes the size of the component and figures out what size every image in it needs
//to be to fill the component properly.
private function init():void {
buttonSpacing = this.height * .01;
mainButtonSize = (this.height - (buttonSpacing * 6))/3.88;
secondRowSize = mainButtonSize * .80;
thirdRowSize = secondRowSize * .80;
trace(Math.floor(mainButtonSize + (secondRowSize * 2) + (thirdRowSize * 2) + (buttonSpacing * 6)));
this.width = mainButtonSize + (buttonSpacing * 2);
}
]]>
</mx:Script>
<mx:VBox backgroundColor="0xFFFFFF" height="100%" width="100%">
<mx:Image source="Valley.jpg" height="{thirdRowSize}" width="{thirdRowSize}" horizontalAlign="center" />
<mx:Image source="Valley.jpg" height="{secondRowSize}" width="{secondRowSize}" />
<mx:Image source="Valley.jpg" height="{mainButtonSize}" width="{mainButtonSize}" />
<mx:Image source="Valley.jpg" height="{secondRowSize}" width="{secondRowSize}" />
<mx:Image source="Valley.jpg" height="{thirdRowSize}" width="{thirdRowSize}" />
</mx:VBox>
</mx:Canvas>