Sliders (HSlider , VSlider)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#874040, #874040]">   

   

    <mx:Script >

        <![CDATA[

            private var himageWidth:Number = 0;

            private var himageHeight:Number = 0;

            private function hchangeSize():void

            {

               

                hBoxImage.width = (himageWidth*hSlider.value)/100;

                hBoxImage.height = (himageHeight*hSlider.value)/100;

            }

            private function hsmoothImage(ev:Event):void{

                //set image smoothing so image looks better when transformed.

                var hbmp:Bitmap = ev.target.content as Bitmap;

                hbmp.smoothing = true;

               

                himageWidth=hBoxImage.width;

                himageHeight=hBoxImage.height;

            }

           

            private var vimageWidth:Number = 0;

            private var vimageHeight:Number = 0;

            private function vchangeSize():void

            {

                vBoxImage.width = (vimageWidth*vSlider.value)/100;

                vBoxImage.height = (vimageHeight*vSlider.value)/100;

            }

            private function vsmoothImage(ev:Event):void{

                //set image smoothing so image looks better when transformed.

                var vbmp:Bitmap = ev.target.content as Bitmap;

                vbmp.smoothing = true;

               

                vimageWidth=vBoxImage.width

                vimageHeight=vBoxImage.height;

            }

  

        ]]>

    </mx:Script>

    <mx:Style>

        HSlider{

            color:#323232;

        }

        VSlider{

            color:#323232;

        }

    </mx:Style>

   

    <mx:Panel title="HSlider Control" layout="vertical" height="240" color="0xffffff" borderAlpha="0.15" horizontalScrollPolicy="off"

         verticalScrollPolicy="off" paddingTop="2" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" verticalAlign="bottom" x="10" y="10">

       

         <mx:Image id="hBoxImage" source="@Embed('backpack.jpg')" creationComplete="hsmoothImage(event);" />

        

         <mx:Label width="100%" color="0x323232"

           text="Drag the slider to resize the image."/>

          

        <mx:HSlider id="hSlider" minimum="10" maximum="100" value="100" dataTipPlacement="top" tickColor="0x323232"

            snapInterval="1" tickInterval="10" labels="['10%','100%']" allowTrackClick="true"

            liveDragging="true" change="hchangeSize()" />

           

    </mx:Panel>

     <mx:Panel title="VSlider Control" layout="horizontal" width="400" color="0xffffff" borderAlpha="0.15"

         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center" verticalAlign="bottom" x="262" y="10">

        

        <mx:VSlider id="vSlider" minimum="10" maximum="100" value="100" dataTipPlacement="top" tickColor="0x323232"

            snapInterval="1" tickInterval="10" labels="['10%','100%']" allowTrackClick="true"

            liveDragging="true" change="vchangeSize()" />

          

        <mx:VBox width="100%" height="160" borderColor="0xACACAC" borderThickness="1" borderStyle="solid" horizontalAlign="center"

              verticalAlign="middle" paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5" horizontalGap="50" >

           

            <mx:Label width="100%" color="0x323232" textAlign="center"

           text="Drag the slider to resize the image."/>

           

           

             <mx:Image id="vBoxImage" source="@Embed('boots.jpg')" creationComplete="vsmoothImage(event);" />

        </mx:VBox>

    </mx:Panel>

</mx:Application>