首页 > 代码库 > Flex 使用图片 、滑块
Flex 使用图片 、滑块
一. 图片
如果需要在页面中显示图片，可以使用Flex的图片空间（Image Control）。Flex的图片组件支持常用的图片格式，包括GIF,JPEG,PNG,SVG和SWF格式。
1.图片来源
a. 本地文件：即Flex运行的本地文件目录中的图片。使用这类图片时，可以使用完整的文件地址，或者相对文件地址。
b. 远程文件:即不在本地文件系统上的文件.在Flex中，可以通过HTTP协议获得远程机器上的图片资源。
c. 内置文件：即加载在页面中的文件。应用文件编译后，图片作为页面SWF的一部分内容。使用内置文件，可以更快地获得图片，从而更迅速地显示页面。内置文件有自己的标识符"@Embed"。例如:@Embed(source=‘logo.jpg‘)指向与应用文件同级目录下logo.jpg。
2.创建图片控件
图片控件的标签:<mx:Image>。主要属性：图片的地址，即source属性。
<mx:Panel title="图片控制例子" width="149" horizontalAlign="center">
<mx:Image x="174" y="136"
source="file:///c|/Documents and Settings/hj/1111.jpg">
</mx:Image>
</mx:Panel>
二. 使用滑块
滑块控件中包含的元素：
滑块：控件中可拖动的部分，呈三角状。
滑轨：滑块滑动的直线部分。
坐标点：沿滑轨平均分布的数值。
滑轨标签：在滑轨起点和终点。
数值说明：当鼠标停留在滑块上时，显示滑块所在的数值。
1.滑块控件标签
滑块控件分为两种：水平滑块空间（HSlider Control）和垂直滑块控件(VSlider Control)。对应的MXML标签分别为:<mx:HSlider>和<mx:VSlider>.
2.滑块控件的事件
change:当用户拖动滑块，滑块所指数值发生改变时发生事件。当livingDragging属性为true时，用户拖动滑块，随着数值的不断改变，不断地触发该事件，为false时，只有滑块停止时才发生该事件。
thumbDrag：当用户拖动滑块时发生该事件。该事件总是与thumbPress一起发生。
thumbPress：当用户鼠标点击滑块，滑块呈被单击状态时发生该事件。用户只有单击滑块才可以拖动滑块。
thumbRelease：当thumbPress事件发生后，用户松开鼠标，滑块成未单击状态时，触发该事件。
上述所有事件的事件对象类型均为 mx.events.SliderEvent.
3.创建滑块控件
1 <?xml version="1.0" encoding="utf-8"?> 2 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 3 xmlns:s="library://ns.adobe.com/flex/spark" 4 xmlns:mx="library://ns.adobe.com/flex/mx"> 5 <fx:Declarations> 6 <!-- 将非可视元素（例如服务、值对象）放在此处 --> 7 </fx:Declarations> 8 <fx:Script> 9 <![CDATA[10 public var w:Number = 174;11 public var h:Number = 143;12 private function changeSize():void{13 14 var n:Number = slider1.value;15 image1.width = w*n;16 image1.height = h*n;17 }18 ]]>19 </fx:Script>20 21 <mx:Panel title="滑块控件例子" width="399" height="312" layout="horizontal" >22 <mx:HBox width="41" height="265">23 <!--创建滑块-->24 <mx:VSlider id="slider1" labels="[1,2]" tickInterval="0.1"25 minimum="1" maximum="2" change="changeSize()" height="100%"/>26 </mx:HBox>27 <mx:VBox width="327" height="100%" horizontalAlign="center">28 <mx:Label text="拖动滑块改变图片大小"/>29 <mx:Image width="174" height="143" id="image1">30 <mx:source>31 @Embed(source=‘a03.jpg‘)32 </mx:source>33 </mx:Image> 34 </mx:VBox>35 36 </mx:Panel>37 </s:WindowedApplication>
Flex 使用图片 、滑块