[RESOLVED] Can an image have a dynamic scaleX?

[Upchurch]

I'm trying to put together a header, in an HBox, composed of three images: a right end cap, a left end cap, and the header graphic. The Flex piece scales to the size of the browser it is in, so I would like the header graphic to also scale so that the header goes the entire length of the display area. I have the HBox width set to "100%" and Image tags for all three graphics in the proper order. No problems there. I've set the width for the header image to 100% so that both of the end caps are in the proper place. I can even set the scaleX to make the header image stretch larger than it normally is.

What I can't do is get the scaleX to change dynamically to fit the current screen size. For example,

<mx:HBox width="100%" height="49" id="header" horizontalGap="0">
	<mx:Image source="img/header_left.jpg" />
	<mx:Image source="img/header.jpg" width="100%" scaleX="100%" />
	<mx:Image source="img/header_right.jpg" />
</mx:HBox>

doesn't do the job.

Is there a simple way to do this or do I need to detect the display width in ActionScript and reset the scaleX property every time the display width changes?

[gsb]

Instead of the 'scaleX' and 'width' in the image tag, try using the 'left' and 'right' tags where you set 'left' to the width of "img/header_left.jpg" and 'right' to the width of "img/header_right.jpg" ...

[Upchurch]

Instead of the 'scaleX' and 'width' in the image tag, try using the 'left' and 'right' tags where you set 'left' to the width of "img/header_left.jpg" and 'right' to the width of "img/header_right.jpg" ...

Never worked with left/right before. Could you be more specific?

[gsb]

That is specific.
<mx:Image left="123" right="456" ... />

Try the help files for more.

[Upchurch]

That is specific.
<mx:Image left="123" right="456" ... />

Try the help files for more.

Unfortunately, that's still a static number. I will check the help files, thanks.

[Upchurch]

Here's how to do it:

<mx:HBox width="100%" height="49" id="header" horizontalGap="0"  resize="adjustBar()">
	<mx:Image source="img/header_left.jpg" />
	<mx:Image source="img/header.jpg" id="bar" />
	<mx:Image source="img/header_right.jpg" />
</mx:HBox>

...


<mx:Script>
	<![CDATA[
		private function adjustBar():void
		{
			bar.scaleX = this.width - 250;
		}
	]]>
</mx:Script>

Where header.jpg is a 1 pixel wide image, the HBox is meant to stretch the entire width of the swf, and header_left.jpg and header_right.jpg have a total width less than 250 pixels.

Since bar is only 1 pixel wide, a scaleX multiplier is equivalent to stretching the image to that width in pixels. It becomes a trivial matter to calculate how much shorter than the total width of the stage the bar needs to be and subtracting that from the multiplier.

Be careful that the bar does not push the HBox (or whatever container you are using) out past the viewable portion of the state. At that point, the multiplier increases in quantized jumps (don't ask me why) and you can never expand the browser window to see the end of your swf.