這篇來分享一下關於製作Flash的組件
在這兒我們練習製作一個定位用的組件
參數面版上有定位的基準點和偏移值。
組件本身也是一個 MovieClip 類別, 因為要對stage做偵聽
所以一開始要去偵聽addedToStage事件。
1.AlignComponent.as
2.先在畫面上繪製一個色塊(50x50),將其轉成MovieClip元件
同時在Class欄位填上類別路徑
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVotsstJYEvK_VCm1Ry7ChVOXKTBaeTfSac0C5-Z9BiomOXVtNnkptzvQQ7t4fAD1Gj76bVnwPiYJ38CeRlXAZsuuvsav9qiHq726VXOpmN_sBewfJm2iJE692Vydf3eTfGvnzsyYu6ss/s400/2009-12-01_151155.jpg)
3.在元件庫上選擇 Component Definition
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQqBPKGS9p694BUjMsxRuci3v1n2Iupwafuy56tGXh0bcO5qeX39xPHdiITsFw09qQw7NyGe04s9zt-bJbRkzz0M7zt_Im2KCo2cpJ0SnHIyKdL-UNp7Hj78lGqsaagBuAXmevBQnUwA/s400/2009-12-02_150820.jpg)
此時會出現 Component Definition 面版
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1BxBZPlspyekq7xRFa8hP027ipda0YzgG1KIhyphenhyphenYMtqhnqFqDVmVQbySNg0Mu0vkXKYJU55QkmKliNwJj3FI3JBU1xB85ZjSdFeoCk07-Lg9DZfxxXSf1PpWKmJWgO3TA534ZwU1-TKEw/s400/2009-12-02_150912.jpg)
4.在 as 檔設定參數
這兒的參數之後是要對映到參數面版上的
使用的tag為[Inspectable( name = "變數名", type = "類型", defaultValue = "預設值" )]
變數名稱是對映到set的變數, 可以使用的類型有List,String,Number等。
Name:面版上的說明, 跟類別裡程式碼沒任何關系, 可以打上中文
Variable:對映類別裡的參數
Value:預設值
Type:類別
同時在Class欄位也打上寫好的類別檔路徑
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRlw8mkfgy5_0tf3Hn5xypzPB77ZTbhf65u4fmMofqgbltPh96BmnacSPmkhksAlHMEs2GD8dsjZ7OGiBmOZh8N8_Eh9S-h_KBiSPozIMMtf76N-fiyOLsmoImztG-GmtUSR7aNG1KKk/s400/2009-12-02_163508.jpg)
開啟 Component Inspector面版, 點擊一下組件, 此時參數就出現了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YySfmXari_ayETKxizzEATPC_snytcjyFyPY0yntbPzDsc5a9LTcXxle1AVXN-DPDv1dvLbPxsonpXyEAwkaBP4YNxq1joJDv12Ytmbh-ncXWKjYsYe639owoGDS0DmAENqFMBDhjx4/s400/2009-12-02_152047.jpg)
SourceCodeDownload
當stage Resize時, 會發生事件, 此時就可以一起更新座標值
在這就奶老師就不寫if else判斷 align的值。
6.這時候就可以做一個元件來測試
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-A7DuPcKlsq-0U07nc-LBosmIKYyFcUJbiumzQ8fnumMiKhpARDvX3dBuICTf3mQYK-dqn7C6cw888r0c5VskOO-bn5wSG7BwhGKbBJsDHvN0UrPJItkRY8hZU0ps26uGXJh6sVhJLQ/s400/2009-12-02_152613.jpg)
7.更換livepreview元件
製作一個新的flash, 在裡面繪製圖型, 發怖成.swf檔
開啟 Component Definition面版
按下 中間的 Live preview , 右邊有個Set按扭。
第三個選項:Live Preview with .swf file embedded in .fla file
並將路徑填入
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqkAV_Jq7aA30hkPaTdnnIFcHOrkNvAJw9zui3anUNluVMve2pwrb5h8hIeWU_L9Ve07x287MXWdDkVPfwMk8evwAseFwA6ruWeEq52U0CzNB-bAqMC8RfQb5Qlt2I6hW5h_phNib1Nk/s400/2009-12-02_173312.jpg)
此時的組件就換上你的設計檔了。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeP_mYFYGDQNfganYwdhh0HkgfwZMph_YszcDHU1OO_8JFoUPq_ghlzIVozTsOwufB57SHY4l2pEXLs2L4nVN-tTBcAQMvpUEgIoCAJt-wbRkryAvU15e_XZO_7SOsH6lm4tHTNmDBZ28/s400/2009-12-02_152750.jpg)
8.更換元件庫裡的小Icon
大小:18x18, jpg或是png格式
開啟 Component Definition面版
在Description下方有個圖示按下他
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjutklb9NNHxqi5BzK4FRtH1IEAgIras7W-aY4pxRhdh3tI7nX9VB9YO1KofuEn20QaMGiGklTdcsbRzNHoZbJIsL7J1pzBF5ob6eLysJg3GFdfNrJd3JMNap0iMJ2VUFR-fWWYt5kea3I/s400/2009-12-02_153010.jpg)
選擇Custom, 找到你要放的小圖示
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Oye2iBfIDzgwiARRspt8_4LXGgieivX0g8RHSCzkdl8f4B5VZR3zE6cJxRXDAQBEouDKuCdhpD7r7QMNhKhWm17eso-eSMVOX4KUpT0qyPfovFo5ZoVDZ1dI-d4FZK8-OK0KqhXFbOU/s400/2009-12-02_153020.jpg)
完成啦
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfF22_VhfcvN7frCVyd9byoc5pJUtPwItqPAw4ORFeM0D_k1hyfFRKywjYv0WC6nj-JRP2905ammq9wgIlOQV07rq_YdUge4tVjbc216XXDsX-TTB0dz8xrMCxy6xBmUCtFusbpy1lB4/s400/2009-12-02_153048.jpg)
9.匯出SWC
在元件庫上, 找到剛剛製作好的組件, 按下右鍵, 選擇 Export SWC File
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3E_0faPAXVMuX2wDSCgOl8NAJgJ1yZUHLS0O1kG6yRd4mR5trfR9Fi1CH4tI7-h48HFQSfOTwP_A0H0WWkpFnKsAV7bQK-W3o6fFUG64kAAYwt_9SHvJdKRM2TyqoKHwVfHZd4DqXvA/s400/2009-12-02_153714.jpg)
10.包裝成mxp
到這兒我們的組件己經完成了, 接著要再包裝成mxp檔,好方便讓其他使用者安裝
包裝mxp使用的軟體是Adobe Extension Manager , 在這奶老師使用的版本為CS3
寫一份xml文件來定義mxp裡有什麼, 其副檔名為.mxi
最重要的是這段,
destination:安裝好的檔要放置到flash裡的那個資料夾下
因為是組件,所以要放到 $flash/Components下, 而tutorials資料夾名稱可以換上自己的
選擇包裝擴充功能, 將mxi包裝成mxp, 然後可以安裝mxp檔了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDDVmf56_0j4ca1RghaS82zu5Ehg16rH3bae9PjWLN4mtCx3mXHxeqWvU6v5hxof7H-fkEVtmZAnY2ixDWXkpf-g6tCRr_h4pRKrmgstpYb9S5K8uJdcG9Cg16np-QLe5ypSUJPrvIy8/s400/2009-12-02_153946.jpg)
重新啟動Flash , 在Components面版就會出現 剛剛製作好的組件, 拉到場景上就可以使用
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1zafH0_Isgpx8FFmPLTViDpZ8aWdcd_aY6BYvU9Bm1_4fKuOpKdelC2Pg1YlkdO-lq2kR67gv5yO_8cTs-CTCufM-Ts4bnpfqXLRMSNqC5wKa2sWMTHxp_ESql32jbXKuuqAWP9JNdk/s400/2009-12-02_154145.jpg)
轉貼文章請注明出處:http://milkmidi.blogspot.com/2009/12/flash.html
Source Download
在這兒我們練習製作一個定位用的組件
參數面版上有定位的基準點和偏移值。
組件本身也是一個 MovieClip 類別, 因為要對stage做偵聽
所以一開始要去偵聽addedToStage事件。
1.AlignComponent.as
package milkmidi.tutorial { import flash.display.MovieClip; import flash.events.Event; public class AlignComponent extends MovieClip{ public function AlignComponent() { addEventListener(Event.ADDED_TO_STAGE , _addedToStageHandler); addEventListener(Event.REMOVED_FROM_STAGE , _removedFromStageHandler); } private function _addedToStageHandler(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE, _addedToStageHandler); stage.addEventListener(Event.RESIZE , _resizeHandler); trace(this, "_addedToStageHandler"); _resizeHandler(); } private function _resizeHandler(e:Event = null):void { } private function _removedFromStageHandler(e:Event):void { removeEventListener(Event.REMOVED_FROM_STAGE, _removedFromStageHandler); stage.removeEventListener(Event.RESIZE , _resizeHandler); } } }
2.先在畫面上繪製一個色塊(50x50),將其轉成MovieClip元件
同時在Class欄位填上類別路徑
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVotsstJYEvK_VCm1Ry7ChVOXKTBaeTfSac0C5-Z9BiomOXVtNnkptzvQQ7t4fAD1Gj76bVnwPiYJ38CeRlXAZsuuvsav9qiHq726VXOpmN_sBewfJm2iJE692Vydf3eTfGvnzsyYu6ss/s400/2009-12-01_151155.jpg)
3.在元件庫上選擇 Component Definition
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGQqBPKGS9p694BUjMsxRuci3v1n2Iupwafuy56tGXh0bcO5qeX39xPHdiITsFw09qQw7NyGe04s9zt-bJbRkzz0M7zt_Im2KCo2cpJ0SnHIyKdL-UNp7Hj78lGqsaagBuAXmevBQnUwA/s400/2009-12-02_150820.jpg)
此時會出現 Component Definition 面版
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1BxBZPlspyekq7xRFa8hP027ipda0YzgG1KIhyphenhyphenYMtqhnqFqDVmVQbySNg0Mu0vkXKYJU55QkmKliNwJj3FI3JBU1xB85ZjSdFeoCk07-Lg9DZfxxXSf1PpWKmJWgO3TA534ZwU1-TKEw/s400/2009-12-02_150912.jpg)
4.在 as 檔設定參數
這兒的參數之後是要對映到參數面版上的
使用的tag為[Inspectable( name = "變數名", type = "類型", defaultValue = "預設值" )]
變數名稱是對映到set的變數, 可以使用的類型有List,String,Number等。
public function get align():int { return _align; } [Inspectable( name = "align", type = "List", enumeration = "9,6", defaultValue = "9" )] public function set align(value:int):void { _align = value; trace("align:" + _align); _resizeHandler(); } public function get offsetX():int { return _offsetX; } [Inspectable( name = "offsetX", type = "Number", defaultValue = "0" )] public function set offsetX(value:int):void { _offsetX = value; trace("offsetX:" + _offsetX); _resizeHandler(); }5.在面版上輸入對映的參數
Name:面版上的說明, 跟類別裡程式碼沒任何關系, 可以打上中文
Variable:對映類別裡的參數
Value:預設值
Type:類別
同時在Class欄位也打上寫好的類別檔路徑
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRlw8mkfgy5_0tf3Hn5xypzPB77ZTbhf65u4fmMofqgbltPh96BmnacSPmkhksAlHMEs2GD8dsjZ7OGiBmOZh8N8_Eh9S-h_KBiSPozIMMtf76N-fiyOLsmoImztG-GmtUSR7aNG1KKk/s400/2009-12-02_163508.jpg)
開啟 Component Inspector面版, 點擊一下組件, 此時參數就出現了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YySfmXari_ayETKxizzEATPC_snytcjyFyPY0yntbPzDsc5a9LTcXxle1AVXN-DPDv1dvLbPxsonpXyEAwkaBP4YNxq1joJDv12Ytmbh-ncXWKjYsYe639owoGDS0DmAENqFMBDhjx4/s400/2009-12-02_152047.jpg)
SourceCodeDownload
當stage Resize時, 會發生事件, 此時就可以一起更新座標值
在這就奶老師就不寫if else判斷 align的值。
private function _resizeHandler(e:Event = null):void { parent.x = stage.stageWidth + _offsetX; parent.y = 0; }
6.這時候就可以做一個元件來測試
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-A7DuPcKlsq-0U07nc-LBosmIKYyFcUJbiumzQ8fnumMiKhpARDvX3dBuICTf3mQYK-dqn7C6cw888r0c5VskOO-bn5wSG7BwhGKbBJsDHvN0UrPJItkRY8hZU0ps26uGXJh6sVhJLQ/s400/2009-12-02_152613.jpg)
7.更換livepreview元件
製作一個新的flash, 在裡面繪製圖型, 發怖成.swf檔
開啟 Component Definition面版
按下 中間的 Live preview , 右邊有個Set按扭。
第三個選項:Live Preview with .swf file embedded in .fla file
並將路徑填入
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqkAV_Jq7aA30hkPaTdnnIFcHOrkNvAJw9zui3anUNluVMve2pwrb5h8hIeWU_L9Ve07x287MXWdDkVPfwMk8evwAseFwA6ruWeEq52U0CzNB-bAqMC8RfQb5Qlt2I6hW5h_phNib1Nk/s400/2009-12-02_173312.jpg)
此時的組件就換上你的設計檔了。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeP_mYFYGDQNfganYwdhh0HkgfwZMph_YszcDHU1OO_8JFoUPq_ghlzIVozTsOwufB57SHY4l2pEXLs2L4nVN-tTBcAQMvpUEgIoCAJt-wbRkryAvU15e_XZO_7SOsH6lm4tHTNmDBZ28/s400/2009-12-02_152750.jpg)
8.更換元件庫裡的小Icon
大小:18x18, jpg或是png格式
開啟 Component Definition面版
在Description下方有個圖示按下他
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjutklb9NNHxqi5BzK4FRtH1IEAgIras7W-aY4pxRhdh3tI7nX9VB9YO1KofuEn20QaMGiGklTdcsbRzNHoZbJIsL7J1pzBF5ob6eLysJg3GFdfNrJd3JMNap0iMJ2VUFR-fWWYt5kea3I/s400/2009-12-02_153010.jpg)
選擇Custom, 找到你要放的小圖示
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Oye2iBfIDzgwiARRspt8_4LXGgieivX0g8RHSCzkdl8f4B5VZR3zE6cJxRXDAQBEouDKuCdhpD7r7QMNhKhWm17eso-eSMVOX4KUpT0qyPfovFo5ZoVDZ1dI-d4FZK8-OK0KqhXFbOU/s400/2009-12-02_153020.jpg)
完成啦
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKfF22_VhfcvN7frCVyd9byoc5pJUtPwItqPAw4ORFeM0D_k1hyfFRKywjYv0WC6nj-JRP2905ammq9wgIlOQV07rq_YdUge4tVjbc216XXDsX-TTB0dz8xrMCxy6xBmUCtFusbpy1lB4/s400/2009-12-02_153048.jpg)
9.匯出SWC
在元件庫上, 找到剛剛製作好的組件, 按下右鍵, 選擇 Export SWC File
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3E_0faPAXVMuX2wDSCgOl8NAJgJ1yZUHLS0O1kG6yRd4mR5trfR9Fi1CH4tI7-h48HFQSfOTwP_A0H0WWkpFnKsAV7bQK-W3o6fFUG64kAAYwt_9SHvJdKRM2TyqoKHwVfHZd4DqXvA/s400/2009-12-02_153714.jpg)
10.包裝成mxp
到這兒我們的組件己經完成了, 接著要再包裝成mxp檔,好方便讓其他使用者安裝
包裝mxp使用的軟體是Adobe Extension Manager , 在這奶老師使用的版本為CS3
寫一份xml文件來定義mxp裡有什麼, 其副檔名為.mxi
最重要的是這段,
略source:要包裝的檔案
destination:安裝好的檔要放置到flash裡的那個資料夾下
因為是組件,所以要放到 $flash/Components下, 而tutorials資料夾名稱可以換上自己的
選擇包裝擴充功能, 將mxi包裝成mxp, 然後可以安裝mxp檔了
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDDVmf56_0j4ca1RghaS82zu5Ehg16rH3bae9PjWLN4mtCx3mXHxeqWvU6v5hxof7H-fkEVtmZAnY2ixDWXkpf-g6tCRr_h4pRKrmgstpYb9S5K8uJdcG9Cg16np-QLe5ypSUJPrvIy8/s400/2009-12-02_153946.jpg)
重新啟動Flash , 在Components面版就會出現 剛剛製作好的組件, 拉到場景上就可以使用
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM1zafH0_Isgpx8FFmPLTViDpZ8aWdcd_aY6BYvU9Bm1_4fKuOpKdelC2Pg1YlkdO-lq2kR67gv5yO_8cTs-CTCufM-Ts4bnpfqXLRMSNqC5wKa2sWMTHxp_ESql32jbXKuuqAWP9JNdk/s400/2009-12-02_154145.jpg)
轉貼文章請注明出處:http://milkmidi.blogspot.com/2009/12/flash.html
Source Download
留言
就很快有了教學~
現在我也可以自行制作組件了~~^_^
真的感謝奶老師~~
下一篇再來補充
請問有智商低於九十的解說嗎
關於組件好像都沒有比較完整的說明...
就連Adobe自己都講得不清不楚(U)
不然會有錯誤,找不到_align,_offsetX
private var _align;
private var _offsetX:Number;
對程式語言來說,要給別人使用的變數
就一定要是 public
對程式語言來說,要給別人使用的變數
就一定要是 public