Flex学习笔记_06 使用组件处理数据和交互_03控件的实例应用

 

3. 控件的实例应用

 

3.1 制作一个简单的涂鸦板

详细的程序代码请下载附件中的DrawPaper.rar

 

在程序中分别定义了3给view组件来显示界面。

TopHeader.mxml 定义了菜单工具条，2级菜单。

在ITME_CLICK监听函数中，判断用户点击的菜单项是否为二级菜单。如果是，则将点击项XML节点的data属性传递出去：dispatchEvent(new TopMenuEvent(event.item.@data)); 

这样TopHeader 负责把这些用户动作传递出去，真正处理工作则交给主程序来进行。

 

PenControl.mxml 使用colorPicker 颜色拾起组件 和 HSlider 滑块选择组件，分别控制画笔颜色和线条粗细。

changeColor 用来监听颜色拾起组件的改变事件：

dispatchEvent(new PenEvent("color",pen_color.selectedColor));

处理HSlider 组件使用了同样的方式，只是动作类型为“linesize”

HSlider的snapInterval 代表每拖动一格时增加或减少的值。

 

Paper.mxml 画布部分，涂鸦板的核心部分。

所有的动作都是有鼠标触发。在初始化时，添加了MOUSE_DOWN 、MOUSE_UP 、MOUSE_MOVE 事件的监听，同时用 isPressed 来记录鼠标的状态。按下时为true，否则false。

myPaper 的 graphics 属性，代表 Graphics 对象。继承于Object，是可视化对象用于处理图行绘制的内置对象，不能直接创建，只能通过可视化对象的graphics 属性来访问。提供了多种矢量方法。

比如，画线函数 lineTo， 之前需要用 lineStyle 设置线条的粗细和颜色。

lineStyl(

  thickness:Number,  线条的粗细

  color:uint = 0,  颜色

  alpha:Number = 1.0,  透明度

  pixelHinting:Boolean = false,

  scaleMode:String = "normal",

  caps:String = null,

  joints:String = null,

  miterLimit:Number = 3

)

 

moveTo(x:Number, y:Number) 将画笔位置移到新的坐标。就是从这里开始画线。

lineTo(x:Number, y:Number) 从当前位置作直线到目标坐标。就是画线画到这里结束。

 

Graphics的clear 方法可以清空在运行期间使用AS绘制的图像内容。

 

 

3.2 制作一个外部图片加载器

详细的程序代码请下载附件中的PicView.rar

 

使用 SWFLoader 控件来实现图片加载，并配合 ProgressBar 控件显示加载进度。

SWFLoader 可以加载swf、jpg、png等多种格式的文件。

aotoLoad 属性表示指定了图片地址后是否自动加载，true：自动加载，false：需要调用load 方法执行加载动作。

scaleContent 属性表示当加载完成后，是否放缩控件的尺寸来适应图片的尺寸，true：保持图片尺寸，false：自适应控件的大小。

 

ProgressBar 控件是一个线性的进度条显示器，

source 属性指明依附的对象。这个对象必须可以自行检测加载进度并派发process 事件 和 completed 事件。

source 和 mode 相关，mode 表明 工作方式，默认 "event" ，ProgressBar 将通过侦听上面两个事件来获得加载进度。可选的还有：

"polled"  对象必须有getBytesLoaded() 和 getBytesTotal() 两个函数。

 "manual" 手动设置进度，并要设置进度条的最大和最小值。

toolTip 属性 是所有可视化组件的公有属性，表示提示文字。

 

Event.INIT  图片加载完，并且完成组件内容的初始化后触发该事件。

 

3.3 制作一款FLV视频播放器

详细的程序代码请下载附件中的VideoPlayer.rar

 

利用 VideoDisplay 控件来实现FLV播放器。

aotoPlay 属性表示在指定了视频文件路径后是否自动播放。

source 属性 指定视频路径。

VideoEvent 包含了所有和视频相关的时间的类型定义，其中COMPLETE事件中视频文件播放完毕时触发。

play()：开始播放，playing 属性变为true。如果之前调用过pause 方法暂停了播放，则接着播放。

stop()： 停止播放，并重置播放位置为0，palying为false。

pause()： 暂停播放，playing 为false，直到调用play 恢复播放。

playing 属性可以让我们时刻了解视频的状态。