<?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:Style>
        Form {
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 0;
            paddingBottom: 0;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function sliderLeft_change(evt:SliderEvent):void {
                image.setStyle("left", sliderLeft.value);
                image.setStyle("right", NaN);
                sliderRight.value = 0;
            }

            private function sliderRight_change(evt:SliderEvent):void {
                image.setStyle("right", sliderRight.value);
                image.setStyle("left", NaN);
                sliderLeft.value = 0;
            }

            private function sliderTop_change(evt:SliderEvent):void {
                image.setStyle("top", sliderTop.value);
                image.setStyle("bottom", NaN);
                sliderBottom.value = 0;
            }

            private function sliderBottom_change(evt:SliderEvent):void {
                image.setStyle("bottom", sliderBottom.value);
                image.setStyle("top", NaN);
                sliderTop.value = 0;
            }
        ]]>
    </mx:Script>

    <mx:Number id="MAX_WIDTH">{canvas.width - image.width}</mx:Number>
    <mx:Number id="MAX_HEIGHT">{canvas.height - image.height}</mx:Number>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="left:" direction="horizontal">
                <mx:HSlider id="sliderLeft"
                        minimum="0"
                        maximum="{MAX_WIDTH}"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderLeft_change(event);" />
                <mx:Label text="{sliderLeft.value}" />
            </mx:FormItem>
            <mx:FormItem label="right:" direction="horizontal">
                <mx:HSlider id="sliderRight"
                        minimum="0"
                        maximum="{MAX_WIDTH}"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderRight_change(event);" />
                <mx:Label text="{sliderRight.value}" />
            </mx:FormItem>
            <mx:FormItem label="top:" direction="horizontal">
                <mx:HSlider id="sliderTop"
                        minimum="0"
                        maximum="{MAX_HEIGHT}"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderTop_change(event);" />
                <mx:Label text="{sliderTop.value}" />
            </mx:FormItem>
            <mx:FormItem label="bottom:" direction="horizontal">
                <mx:HSlider id="sliderBottom"
                        minimum="0"
                        maximum="{MAX_HEIGHT}"
                        liveDragging="true"
                        snapInterval="1"
                        dataTipPrecision="0"
                        showTrackHighlight="true"
                        change="sliderBottom_change(event);" />
                <mx:Label text="{sliderBottom.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Canvas id="canvas" width="100%" height="100%">
        <mx:Image id="image"
                source="assets/bug.png"/>
    </mx:Canvas>

</mx:Application>