Flashmx2004系列教程〈二〉UI组件-button compoents

01.版本1.0组件与版本2.0组件的区别

你现在一定已经听说过FLASHMX2004的组件有一个新的结构与MX不同（如果你还没听说过你可以先查看FLASHMX2004系列教程<一>—基础）2004发布了21个Ui组件，有许多与以前的看起来相似，还有一些是新增加的。在这篇教程中我们将介绍每个组件的具体用法。

除此之外还有媒体组件和数据连接组件。这两部分会在后面的文章相继介绍。

虽然每个组件都有个自的属性和方法。但从AS2结构出发都有共同特点。与版本1在结构上只有一些小的不同。

在组件结构上最大的不同是事件模式。在版本1中是通过使用setClickHandler()来调动函数控制事件，而在版本2.0中全部使用你事先分别指定的广播事件。

另一大不同就是在组件的外观上。我们会在单独的教程中介绍它的用法。

要想学好组件，最好的办法就是使用它。那就快随我们一起看看是组件是如何工作的。

02.Button componets 按钮组件

在所有组件中.按钮组件可能是最简单的组件了.从FLASHMX开始它走过一段较长的路.现在它不是使用setClickHandler()函数通过属性面板来定义CLIK事件.取代它的是我们需要一个Listener Objet侦听对象,使用addEventListener 方式注册一个侦听对象以用来侦听click事件.下面的示例中我们将展示如何应用.它看起来实际上比听着更简单.

1.新建一个文件CTRL+NEW--->FLASH文档

2.将button组件拖至场景中.

3.将包含按钮这一层改为button(这一种好的习性.特别是在较大的项目时)

4.打开属性面板.将实例命名为myButton.这个名称将用于在Action中引用.将label改写为surpise!

5.现在这个按钮当我点击时还没有任何作用.要相让它起作用我们必须为它加入代码.(如果你不会或根本不想亲自加入代码你也可以使用它自带的行为面板).

创新一个新层取名为action.在第一帧中加入如下代码:

   myButtonListener = new Object();
   myButtonListener.click = function() {
   trace("You clicked the button! welcome to egoldy flashblog!");
};
myButton.addEventListener("click", myButtonListener);

6.现在测试你的影片点击按钮你就会看见输出窗口中出现的输出信息了.

这个范例中的代码其实很容易理解,首先你要创建一个对象做为你的侦听器.它知所以称为侦听器是因为要用它来侦听事件.要想侦听事件你必须要注册侦听器.使用addEventListener()方式来实现注册.第一要点是你要指出你所要侦听的事件名称.你也不用担心有多少事件名称你不了解.FLASH的帮助中有所有的事件内容.要想了解它打开帮助面板.选择使用组件-->组件.选择BUTTON类你就可以找到相应的事件类型了.

注意在其它组件中.你可侦听多个事件通过多个侦听器.

在2.0版中的按钮组件.你可以象在mx中一样任意的修改你的按钮标签.除此之外你还可使用ICON.如下:

1.仍打开我们上边刚做的文件.

2.首先你需要一个ICON图像文件.你可以使用PNG格式做一个透明背景的图片.

如此例准备了一个放大镜图片.将图像导入.

3.选中图像.按下F8转换为MOVIECLIP.并且命名为search icon

4.为了让按钮组件知道哪个MC是它要用来做ICON的.我们必须为ICON MC创建一个链接Id.创建的方法很简单.打开库面板选中search icon影片剪辑右击-->链接.

5.在打开的链接面板中.在ID处命名ID为:searchIcon同时确保导出为ACTION被选中.

6.最后你要告知BUTTON使用ICON.只需要在第一帧的最上方一行加入一行代码:

myBotton.icon=searchIcon;

7.测试影片.好消息是ICON显示出来了.坏的是不能自动伸缩大小.

8.改变第一帧上脚本以使ICON适应按钮的大小.如下你码:

           myButton.icon = "searchIcon";

           myButton.setSize(120, 35);
          myButton.label = " Search!"

           myButtonListener = new Object();
           myButtonListener.click = function ()
           {
              trace ("Ah, you have found!");
           }

           myButton.addEventListener("click", myButtonListener );

9.测试影片.现在的样子看起来好多了.上面的代码中你可以通过SETSIZE()设置大小.通过属性label设置名称.另外注意.MM不提供对ICON和LABEL之间空格间距的设置.到目前最好的解决方法是在制作ICON图像时注意设好间隔或用第三方软件.

Zhlw.com - 中华龙网