《使用图片滑块》PPT课件.ppt
9.1 使用图片,如果需要在页面中显示图片，可以使用Flex的图片控件（Image Control），如图所示。Flex的图片组件支持常用的图片格式，包括GIF、JPEG、PNG、SVG和SWF格式。,9.1.1 图片来源,在图片控件中，支持3种图片来源：本地文件、远程文件和内置文件。1.本地文件本地文件即Flex运行的本地文件目录中的图片。使用这类图片时，可以使用完整的文件地址，或者相对文件地址，例如图9.1的图片位于C盘的Documents and SettingsuserMy DocumentsMy Pictures中，则图片地址为C:Documents and SettingsuserMy DocumentsMy Picturesa.jpg。2.远程文件远程文件指不在本地文件系统上的文件。在Flex中，可以通过HTTP协议获得远程机器上的图片资源。例如http:/10.1.1.1:8080/flex/source/a.jpg。3.内置文件内置文件指加载在页面中的文件。应用文件编译后，图片做为页面SWF的一部分内容。与上面2种图片来源不同，使用内置文件，可以更快的获得图片，从而更迅速的显示页面。内置文件有自己的标识符“Embed”。例如：Embed(source=logo.jpg)指向与应用文件同级目录下logo.jpg。,9.1.2 创建图片控件,图片控件的标签为。图片控件的主要属性为图片的地址，即source属性。在使用图片控件时，只需在需要的地方插入，设置source属性即可。上面的代码使用的是本地文件模式。,9.2 使用滑块,滑块控件（Slider Control）提供了一种动态选择数值的方式，如图所示。在google提供的地图功能中，常可以见到缩放地图大小的滑块，通过拖动滑块改变地图的大小。,9.2.1 滑块控件标签,滑块控件分为2种：水平滑块控件（HSlider Conrtrol）和垂直滑块控件（VSlider Control）。水平滑块控件对应的MXML标签为。垂直滑块控件对应的为，由于二者基本类似，这里以水平滑块为例介绍控件的属性。在水平滑块控件中，坐标的显示、控件的标签名称等都是依靠控件的属性定义的。水平滑块的常用属性如表所示。,9.2.2 滑块控件的事件,在用户拖动滑块选择相应的数值时，滑块控件会发生的相应的事件。根据用户的操作，控件发生的事件如下所示。change：当用户拖动滑块，滑块所指数值发生改变时发生的事件。当livingDragging属性为true时，用户拖动滑块，随着数值的不断改变，不断地触发该事件，为false时，只有滑块停止时才发生该事件。thumbDrag：当用户拖动滑块时发生该事件。该事件总是与thumbPress一起发生的。thumbPress：当用户鼠标单击滑块，滑块呈被单击状态时发生该事件。用户只有单击滑块才可以拖动滑块。thumbRelease：当thumbPress事件发生后，用户松开鼠标，滑块成未单击状态时，触发该事件。上述所有事件的事件对象类型均为。,9.2.3 创建滑块控件,创建滑块控件时，首先要根据页面需求，在垂直滑块和水平滑块控件中选择合适的控件。确定滑块控件的类型后，使用或者标签，在界面合适的位置插入滑块。最后根据实际的要求定义滑块相应的属性和事件处理。下面以垂直滑块控件为例，利用上一节的图片控件介绍如何创建滑块控件。图为利用滑块控件缩放图片的例子，该图是最初图片没有缩放的状态，在拖动滑块后，放大图片如图所示。,9.3 播放视频,视频文件在网络上流行很久了。在很多网站中，都有播放视频的功能，例如播放新闻、电影预告等。在Flex中同样提供了视频控件（VideoDisplay Control）播放图像和声音。视频控件如图中按钮上面的显示区域所示。,9.3.1 视频控件标签,视频控件对应的MXML标签为，该控件的常用属性如表所示。,9.3.2 视频控件的事件,在影片下载完毕、播放状态改变以及其他时，控件都会触发相应的事件，如下所示。close：但影片下载完毕或者播放完毕时发生该事件。complete：当playhead到达影片末尾时发生该事件。cuePoint：当cuePoint等于playhead时间时，发生该事件。playheadUpdate：每0.25秒触发一次该事件。在影片暂停或停止时该事件不触发。progress：影片加载完必前，该事件一直被触发。ready：当影片下载完毕可以播放时触发该事件。rewind：当影片播放完毕跳转为第一帧时触发该事件。stateChange：当影片状态改变时触发该事件。上述的事件中，cuePoint 的事件对象类型为：。progress事件对象类型为，其他均为。,9.3.3 创建视频控件,创建视频控件时，只需在需要的地方插入控件标签，定义相应的属性及方法即可。定义了三个操作按钮实现FLV的播放、暂停、停止功能。图的代码如下所示。,
