第09章 使用图片、滑块、.ppt

1、第9章 使用图片、滑块、视频,在现在的用户界面中，更多的使用到图片、视频等多媒体元素，丰富界面的内容。Flex中也提供了相应的控件显示图片和图片。并且针对图片和视频的操作特性，提供了滑块控件，与图片和视频控件结合，操纵这些控件的外观、行为等、本章介绍Flex中的图片、视频、滑块控件。,9.1 使用图片,如果需要在页面中显示图片，可以使用Flex的图片控件（Image Control），如图所示。Flex的图片组件支持常用的图片格式，包括GIF、JPEG、PNG、SVG和SWF格式。,9.1.1 图片来源,在图片控件中，支持3种图片来源：本地文件、远程文件和内置文件。 1.本地文件 本地文件即F

2、lex运行的本地文件目录中的图片。使用这类图片时，可以使用完整的文件地址，或者相对文件地址，例如图9.1的图片位于C盘的Documents and SettingsuserMy DocumentsMy Pictures中，则图片地址为C:Documents and SettingsuserMy DocumentsMy Picturesa.jpg。 2.远程文件 远程文件指不在本地文件系统上的文件。在Flex中，可以通过HTTP协议获得远程机器上的图片资源。例如:8080/flex/source/a.jpg。 3.内置文件 内置文件指加载在页面中的文件。应用文件编译后

3、，图片做为页面SWF的一部分内容。与上面2种图片来源不同，使用内置文件，可以更快的获得图片，从而更迅速的显示页面。内置文件有自己的标识符“Embed”。例如：Embed(source=logo.jpg)指向与应用文件同级目录下logo.jpg。,9.1.2 创建图片控件,图片控件的标签为。图片控件的主要属性为图片的地址，即source属性。在使用图片控件时，只需在需要的地方插入，设置source属性即可。 上面的代码使用的是本地文件模式。,9.2 使用滑块,滑块控件（Slider Control）提供了一种动态选择数值的方式，如图所示。在google提供的地图功能中，常可以见到缩放地图大小的滑

4、块，通过拖动滑块改变地图的大小。,9.2.1 滑块控件标签,滑块控件分为2种：水平滑块控件（HSlider Conrtrol）和垂直滑块控件（VSlider Control）。水平滑块控件对应的MXML标签为。垂直滑块控件对应的为，由于二者基本类似，这里以水平滑块为例介绍控件的属性。 在水平滑块控件中，坐标的显示、控件的标签名称等都是依靠控件的属性定义的。水平滑块的常用属性如表所示。,9.2.2 滑块控件的事件,在用户拖动滑块选择相应的数值时，滑块控件会发生的相应的事件。根据用户的操作，控件发生的事件如下所示。 change：当用户拖动滑块，滑块所指数值发生改变时发生的事件。当livingDr

5、agging属性为true时，用户拖动滑块，随着数值的不断改变，不断地触发该事件，为false时，只有滑块停止时才发生该事件。 thumbDrag：当用户拖动滑块时发生该事件。该事件总是与thumbPress一起发生的。 thumbPress：当用户鼠标单击滑块，滑块呈被单击状态时发生该事件。用户只有单击滑块才可以拖动滑块。 thumbRelease：当thumbPress事件发生后，用户松开鼠标，滑块成未单击状态时，触发该事件。 上述所有事件的事件对象类型均为mx.events.SliderEvent。,9.2.3 创建滑块控件,创建滑块控件时，首先要根据页面需求，在垂直滑块和水平滑块控件中

6、选择合适的控件。确定滑块控件的类型后，使用或者标签，在界面合适的位置插入滑块。最后根据实际的要求定义滑块相应的属性和事件处理。 下面以垂直滑块控件为例，利用上一节的图片控件介绍如何创建滑块控件。图为利用滑块控件缩放图片的例子，该图是最初图片没有缩放的状态，在拖动滑块后，放大图片如图所示。,9.3 播放视频,视频文件在网络上流行很久了。在很多网站中，都有播放视频的功能，例如播放新闻、电影预告等。在Flex中同样提供了视频控件（VideoDisplay Control）播放图像和声音。视频控件如图中按钮上面的显示区域所示。,9.3.1 视频控件标签,视频控件对应的MXML标签为，该控件的常用属性如

7、表所示。,9.3.2 视频控件的事件,在影片下载完毕、播放状态改变以及其他时，控件都会触发相应的事件，如下所示。 close：但影片下载完毕或者播放完毕时发生该事件。 complete：当playhead到达影片末尾时发生该事件。 cuePoint：当cuePoint等于playhead时间时，发生该事件。 playheadUpdate：每0.25秒触发一次该事件。在影片暂停或停止时该事件不触发。 progress：影片加载完必前，该事件一直被触发。 ready：当影片下载完毕可以播放时触发该事件。 rewind：当影片播放完毕跳转为第一帧时触发该事件。 stateChange：当影片状态改变时触发该事件。 上述的事件中，cuePoint 的事件对象类型为：mx.events.CuePointEgress事件对象类型为flash.events.ProgressEve