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

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

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

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

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

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

6、我们新建一个文档类，组建函数有个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";}}}

7、下面我们接着动态创建一个按钮，动态设置它的名字。我在舞台上先写下提示文字“自动创建-自动创建名字”，然后代码中创建这个按钮：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);}}}发布运行后，便可看到一个按钮被创建出来了。

8、在使用按钮进行事件监听之前，我们看看这三个按钮，发现文字太小了，几乎看不清楚，这个可以设置吗？当然可以，我们要使用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);}发布后效果如图所示：

9、接下来我们给第三个按钮写一个单机事件，每次单击后让第一个按钮向右移动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;}}}发布测试如图：

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