<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" backgroundColor="0x000000" width="500" height="350"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:image="obecto.component.image.*" 
    viewSourceURL="srcview/index.html">
    
    <mx:Style>
        .sliderLabel {
            color: #FFFFFF;
        }
    </mx:Style>
    
    <mx:Script>
        <![CDATA[
            import caurina.transitions.Tweener;
            
            private function moveImage() : void 
            {
                Tweener.addTween(image, {x: moveSlider.value, time: 2.5});
            }
            
            private function zoomImage() : void 
            {
                Tweener.addTween(image, {scaleX: zoomSlider.value, scaleY: zoomSlider.value, time: 2.5});
            }
        ]]>
    </mx:Script>
    
    <mx:ArrayCollection id="dataProvider">
        <mx:Object label="BSG Viper (1024x768)" data="asset/bsg-viper1024x768.jpg"/>
        <mx:Object label="BSG Viper (1023x767)" data="asset/bsg-viper1023x767.jpg"/>
        <mx:Object label="Ornaments (946x836)" data="asset/ornaments946x836.gif"/>
        <mx:Object label="Ornaments (946x837)" data="asset/ornaments946x837.gif"/>
    </mx:ArrayCollection>
    
    <image:SmoothImage id="image" scaleX="0.1" scaleY="0.1" source="{selectedImage.selectedItem.data}"/>
    
    <mx:ComboBox id="selectedImage" top="10" right="10" dataProvider="{dataProvider}"/>
    
    <mx:HSlider id="zoomSlider" horizontalCenter="0" bottom="50" width="400"
        minimum="0" maximum="1" value="0.05"
        dataTipPlacement="top"
        snapInterval="0.1"
        labelStyleName="sliderLabel"
        labels="['Zoom 0%', Zoom 100%]"
        liveDragging="true"
        change="zoomImage();"/>
    
    <mx:HSlider id="moveSlider" horizontalCenter="0" bottom="20" width="400"
        minimum="0" maximum="600" value="0"
        dataTipPlacement="top"
        snapInterval="10"
        labelStyleName="sliderLabel"
        labels="['x=0', x=400]"
        liveDragging="true"
        change="moveImage();"/>
    
</mx:Application>