<?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>