<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.SliderEvent;
			import utils.DefaultValues;
			import utils.ImageResizer;			
 
			public function doChangeSize(event:SliderEvent):void{
				// get the value of the hSlider, round it and divide by 100 for consistency
				var multiplier:Number = Math.round(hSlider.value) / 100;
				//trace(multiplier);
				// new height, width, x, and y for image
				img.width = DefaultValues.maxImageWidth * multiplier;
				img.height = DefaultValues.maxImageHeight * multiplier;				
				img.x = ImageResizer.calcX(container.x,container.width,img.width);
				img.y = ImageResizer.calcY(container.y,container.height,img.height);
 
				// to avoid a "jump in position", find out where the full image's x,y coords are when the slider is
				// at 100% and place the image at those coords within it's parent container
				trace(img.x + " " + img.y);
			}
		]]>
	</mx:Script>
 
	<mx:Canvas width="500" horizontalScrollPolicy="off" verticalScrollPolicy="off" height="500" id="container">
		<mx:Image id="img" source="@Embed('assets/images/pxl_white_logo.jpg')" x="161" y="199"/>
		<mx:HSlider id="hSlider"
			minimum="0" maximum="100" 
			tickColor="black" 
			value="100"
			liveDragging="true" 
			thumbDrag="doChangeSize(event)" width="339" x="80" y="335" 
			showTrackHighlight="true" 
			themeColor="#ff8c00"/>
	</mx:Canvas>
 
</mx:Application>

package utils
{
	import utils.DefaultValues;
 
	public class ImageResizer {
		/**
		 *  Calculate your new center registration point. calcX wants x, containerWidth, and w.
		 *  Those are your image's parent container x, and width, and then your image's width.
		 *
		 * */
		public static function calcX (x:Number,containerWidth:Number,w:Number) : Number {
			// half of image's parent containers width
			var newRegX:Number = Math.round((w / 2));
			// parent container's x minus your new registration X
			var newX:Number = Math.round(x - newRegX);
			// value for the default parent container's width divided by 2
			var center:Number = Math.round(DefaultValues.innerCanvasWidth/2);
			// return your new centered X
			return Math.round(newX += center);
		}
		public static function calcY (y:Number,containerHeight:Number,h:Number) : Number {
			var newRegY:Number = Math.round(h / 2);
			var newY:Number = Math.round(y - newRegY);
			var center:Number = Math.round(containerHeight / 2);
			return Math.round(newY += center);
		}
	}
}

package utils {
 
	public final class DefaultValues {
 
		public static const innerCanvasWidth:int = 500;// width of your image's parent container
		public static const maxImageHeight:int=102;//height of full image
		public static const maxImageWidth:int=177;//width of full image
	}
}