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;

   }

   }

   }

   
   

   发布测试如图：

   

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