首页 > 代码库 > 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 使用图片 、滑块