[AS3编程教学]Flash组件按钮的使用详解

本篇教程我们详细讲述flash自带的组件按钮的使用方法，包括按钮的创建，属性设置，事件侦听等。

我们打开flash软件，新建一个空的flash文档，并按下Ctrl+F7,打开组件窗口。

按钮的创建有两种方法，一种是动态创建，即用代码生成按钮;另一种是手动创建，即我们拖一个按钮在舞台上，并给它实例名。首先我们手动创建，拖动一个Button在舞台上，并取名为：btnTest0

接下来我们设置按钮上面的文字内容，设置方法同样有两种，一种手动设置，另一种动态设置。首先我们手动设置，在属性面板找到“组件参数”项目，看到下面有个label属性，我们在后面的输入框中填上“码国测试按钮1”字样,按下回车，发现按钮已经变成了你设置的名字：

按下Ctrl+Enter测试，一个按钮已经设置完成：

下面我们再手动添加一个按钮，命名为btnTest1,这次我们打算自动创建按钮的名字为“袭掩测试按钮2”。为了便于识别，我重新对了位置，并添加了说明文字：

我们新建一个文档类，组建函数有个label属性用来设置按钮内容，所以我们在构造函数里写上 btnTest1.label= "测试按钮2",然后发布测试，便可看到按钮名字设置牺艺温成功：

package

{

import flash.display.Sprite;

/**

* 组件按钮使用

* @author Tiger

* 2012/3/12 13:34

*/

public class UseButton extends Sprite

{

public function UseButton()

{

btnTest1.label = "测试按钮2";

}

}

}

下面我们接着动态创建一个按钮，动态设置它的名字。我在舞台上先写下提示文字“自动创建-自动创建名字”，然后代码中创建这个按钮：

package

{

import flash.display.Sprite;

import fl.controls.Button;

/**

* 组件按钮使用

* @author Tiger

* 2012/3/12 13:34

*/

public class UseButton extends Sprite

{

private var btnTest2:Button;

public function UseButton()

{

btnTest1.label = "测试按钮2";

btnTest2 = new Button();

btnTest2.x = 297;

btnTest2.y = 133;

btnTest2.label = "测试按钮3";

this.addChild(btnTest2);

}

}

}

发布运行后，便可看到一个按钮被创建出来了。

在使用按钮进行事件监听之前，我们看看这三个按钮，发现文字太小了，几乎看不清楚，这个可以设置吗？当然可以，我们要使用TextFormat对象来完成这个设置，我们将第三个按钮的文字设成微软雅黑红色14号字，代码如下：

public function UseButton()

{

btnTest1.label = "测试按钮2";

btnTest2 = new Button();

btnTest2.move(297, 133);

btnTest2.setSize(100, 30);

btnTest2.label = "测试按钮3";

this.addChild(btnTest2);

var mForMat:TextFormat = new TextFormat();

mForMat.align = TextFieldAutoSize.CENTER;

mForMat.font = "微软雅黑";

mForMat.color = 0xFF0000;

mForMat.size = 14;

btnTest2.setStyle("textFormat", mForMat);

}

发布后效果如图所示：

接下来我们给第三个按钮写一个单机事件，每次单击后让第一个按钮向右移动5个像素，第二个按钮向左移动5个像素。完整代码如下：

package

{

import flash.display.Sprite;

import fl.controls.Button;

import flash.events.MouseEvent;

import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;

/**

* 组件按钮使用

* @author Tiger

* 2012/3/12 13:34

*/

public class UseButton extends Sprite

{

private var btnTest2:Button;

public function UseButton()

{

btnTest1.label = "测试按钮2";

btnTest2 = new Button();

btnTest2.move(297, 133);

btnTest2.setSize(100, 30);

btnTest2.label = "测试按钮3";

this.addChild(btnTest2);

var mForMat:TextFormat = new TextFormat();

mForMat.align = TextFieldAutoSize.CENTER;

mForMat.font = "微软雅黑";

mForMat.color = 0xFF0000;

mForMat.size = 14;

btnTest2.setStyle("textFormat", mForMat);

//事件侦听

btnTest2.addEventListener(MouseEvent.CLICK, clickBtnTest2);

}

private function clickBtnTest2(e:MouseEvent):void

{

btnTest0.x += 10;

btnTest1.x -= 10;

}

}

}

发布测试如图：

组件按钮的使用和制作完毕。

不要试图在不将组件资源拖入库里的情况下，试图直接在舞台上动态创建按钮，因为按钮需要资源，库里没有资源是无法创建的。

务必记得文档类要关联到属性面板的“类”输入框那里，否则代码不起作用，动态创建无法实现。