转载请保持文章完整性!
本文链接地址:http://blog.desizen.com/4lone/553.html
主页:joel's blog
这个例子进行的是Tourdeflex:UI Controls:Other Controls:HSlider and VSlider
文中用到的图片下载地址:点此下载,下载后整个images文件夹放到src目录即可.其实只是用到了几个图片.
简介:
The Slider class is the base class for the Flex slider controls. The slider controls let users select a value by moving a slider thumb between the end points of the slider track. The current value of the slider is determined by the relative location of the thumb between the end points of the slider, corresponding to the slider’s minimum and maximum values. The Slider class is subclassed by HSlider and VSlider.
例子:
HSlider:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html"> <mx:Script > <![CDATA[ private var imageWidth:Number = 0; private var imageHeight:Number = 0; private function changeSize():void { boxImage.width = (imageWidth*hSlider.value)/100; boxImage.height = (imageHeight*hSlider.value)/100; } private function smoothImage(ev:Event):void{ //set image smoothing so image looks better when transformed. var bmp:Bitmap = ev.target.content as Bitmap; bmp.smoothing = true; imageWidth=boxImage.width; imageHeight=boxImage.height; } ]]> </mx:Script> <mx:Style> HSlider{ 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"> <mx:Image id="boxImage" source="@Embed('images/backpack.jpg')" creationComplete="smoothImage(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="changeSize()" /> </mx:Panel> </mx:Application>
VSlider:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0"> <mx:Script > <![CDATA[ private var imageWidth:Number = 0; private var imageHeight:Number = 0; private function changeSize():void { boxImage.width = (imageWidth*hSlider.value)/100; boxImage.height = (imageHeight*hSlider.value)/100; } private function smoothImage(ev:Event):void{ //set image smoothing so image looks better when transformed. var bmp:Bitmap = ev.target.content as Bitmap; bmp.smoothing = true; imageWidth=boxImage.width imageHeight=boxImage.height; } ]]> </mx:Script> <mx:Style> VSlider{ color:#323232; } </mx:Style> <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"> <mx:VSlider id="hSlider" minimum="10" maximum="100" value="100" dataTipPlacement="top" tickColor="0x323232" snapInterval="1" tickInterval="10" labels="['10%','100%']" allowTrackClick="true" liveDragging="true" change="changeSize()" /> <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="boxImage" source="@Embed('images/boots.jpg')" creationComplete="smoothImage(event);" /> </mx:VBox> </mx:Panel> </mx:Application>
标签：FLEX, Slider, TourDeFlex, 例子
