<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/26/positioning-items-in-flex-using-a-constraint-based-layout/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Number id="HORIZONTAL_MAX">
		{int((canvas.width - image.width) / 2)}
	</mx:Number>
	<mx:Number id="VERTICAL_MAX">
		{int((canvas.height - image.height) / 2)}
	</mx:Number>	

	<mx:ApplicationControlBar dock="true">
		<mx:Form>
			<mx:FormItem label="horizontalCenter:"
					direction="horizontal">
				<mx:HSlider id="hSlider"
						minimum="{-HORIZONTAL_MAX}"
						maximum="{HORIZONTAL_MAX}"
						liveDragging="true"
						snapInterval="1"
						dataTipPrecision="0" />
				<mx:Label text="{hSlider.value}" />
			</mx:FormItem>
			<mx:FormItem label="verticalCenter:"
					direction="horizontal">
				<mx:HSlider id="vSlider"
						minimum="{-VERTICAL_MAX}"
						maximum="{VERTICAL_MAX}"
						liveDragging="true"
						snapInterval="1"
						dataTipPrecision="0" />
				<mx:Label text="{vSlider.value}" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:Canvas id="canvas"
			backgroundColor="black"
			backgroundAlpha="0.2"
			width="100%"
			height="100%">
		<mx:Image id="image"
				source="assets/bug.png"
				verticalCenter="{vSlider.value}"
				horizontalCenter="{hSlider.value}" />
	</mx:Canvas>

</mx:Application>