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. 組件按鈕的使用和製作完畢。