這種組件區(qū)別于SWC組件,和CS3自帶的組件一樣能夠雙擊進(jìn)入組件里面編輯.
//應(yīng)該是CS3新增加的一種組件形態(tài)，以制作一個(gè)MyButton組件為例子.

分如下幾個(gè)步驟:

• 1、首先創(chuàng)建一空白的ActionScript3.0的flash文檔,然后保存文件命名為:"FLA_ComponentX".//名稱可以任意.
• 2、CTRL+F8,新建一空白剪輯,取名為"Avatar",進(jìn)入編輯,第一真上我們畫一矩形框(Stroke style我們選擇"hairline",最細(xì)的線條),不用填充,一定要記得設(shè)置坐標(biāo)為(0,0),位置固定的.
• 3、CTRL+F8,繼續(xù)新建個(gè)空白剪輯,取名為"NormalSkin",點(diǎn)開高級(jí)設(shè)置,把"導(dǎo)出ActionScript","導(dǎo)出到第一真"兩項(xiàng)打勾,class中填入"NormalSkin",最后把"啟動(dòng)9-scale縮放的引導(dǎo)線"選項(xiàng)打勾,最后確定,進(jìn)入編輯,畫一填充圓角矩形,設(shè)置顏色為灰色,擺放位置(0,0),可以拖動(dòng)9-scale縮放的引導(dǎo)線,如圖對(duì)齊,作用是讓圓角矩形進(jìn)行所放的時(shí)候保持四個(gè)定位的角不變形,這個(gè)矩形用來(lái)做按鈕的普通模式的皮膚.
• 4、CTRL+F8,繼續(xù)新建個(gè)空白剪輯,同上,取名為"OverSkin",點(diǎn)開高級(jí)設(shè)置,把"導(dǎo)出ActionScript","導(dǎo)出到第一真"兩項(xiàng)打勾,class中填入"OverSkin",最后把"啟動(dòng)9-scale縮放的引導(dǎo)線"選項(xiàng)打勾,最后確定,進(jìn)入輯,畫一填充圓角矩形,設(shè)置顏色為紅色,擺放位置(0,0),這個(gè)矩形用來(lái)做按鈕的鼠標(biāo)經(jīng)過模式的皮膚.
• 5、CTRL+F8,新建個(gè)空白剪輯(這下我們建立的就是最終的按鈕組件,上面建立的都是這按鈕的組成部分),取名為"MyButton",點(diǎn)開高級(jí)設(shè)置,把"導(dǎo)出ActionScript","導(dǎo)出到第一真"兩項(xiàng)打勾,class中填入"MyButton",然后確定,進(jìn)入編輯,第一層取名為"avatar",然后第一真上我們從庫(kù)中把"Avatar"元件拖放到場(chǎng)景中,放置到(0,0)位置,這一真的內(nèi)容在我們最后運(yùn)行組件的時(shí)候是看不到的,作用主要是用來(lái)控制整個(gè)組件的寬高.然后我們新建立一層,取名"skins",在第二真上我們把庫(kù)中的"NormalSkin"和"OverSkin"組件拖進(jìn)來(lái),位置可以隨意擺放,這上面的元件是我們將來(lái)使用組件的時(shí)候，雙擊進(jìn)入能夠進(jìn)行設(shè)置的.
• 6、點(diǎn)中庫(kù)中的"MyButton"元件,右鍵菜單中選"Component Definition"(組件定義)選項(xiàng),會(huì)進(jìn)入一窗口,把類名填上"MyButton",再把"diaplay in Components panel"選項(xiàng)打上鉤,"Tool tiptext"中填入組件名稱,我這里填"MyButton".這里還有設(shè)置組件的preview(預(yù)覽)效果還有圖標(biāo)等,其他內(nèi)容大家可根據(jù)需要自行設(shè)置.
• 7、到這步,我們會(huì)發(fā)現(xiàn)還缺少一個(gè)外部的自定義組件的代碼,也就是上面"MyButton"元件連接的"MyButton"類.由于類中導(dǎo)入了組件類,所以我們要設(shè)置FLASH CS3的classPath(類路徑),選編輯-->參數(shù)設(shè)置-->ActionScript-->ActionScript3.0,添加一新的類搜索路徑,我這里為"D:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface"
  

?

//大家根據(jù)各自情況來(lái)設(shè)置好路徑,新建ActionScript文檔,填入如下代碼:

/************MyButton.as**************/

package{
import flash.display.*;
import flash.events.*;
import flash.system.ApplicationDomain;
import fl.core.UIComponent;
public class MyButton extends UIComponent {
? private var nowSkin:MovieClip;
? private var thisDomain:ApplicationDomain;
? public function MyButton() {
?? super();
?? trace("MyButton");
? }
? override protected function draw():void {
?? if (nowSkin==null) {
??? thisDomain=loaderInfo.applicationDomain;
??? var classDef
??? try{
??? classDef=thisDomain.getDefinition(getNormalSkinName());}
??? catch(e:ReferenceError){
???? trace("沒有在庫(kù)中找到相關(guān)的類!")
???? return;
???? }
??? nowSkin=new classDef as MovieClip;
??? nowSkin.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
??? addChild(nowSkin);
?? }
?? nowSkin.width=width;
?? nowSkin.height=height;
? }
? protected function mouseOverHandler(e:MouseEvent):void{
?? trace("over");
?? removeChild(nowSkin);
?? var classDef=thisDomain.getDefinition(getOverSkinName());
?? nowSkin=new classDef as MovieClip;
?? addChild(nowSkin);
?? nowSkin.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
?? draw();
? }
? protected function mouseOutHandler(e:MouseEvent):void{
?? trace("out");
?? removeChild(nowSkin);
?? var classDef=thisDomain.getDefinition(getNormalSkinName());
?? nowSkin=new classDef as MovieClip;
?? addChild(nowSkin);
?? nowSkin.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
?? draw();
? }
? protected function getNormalSkinName():String {
?? return "NormalSkin";
? }
? protected function getOverSkinName():String {
?? return "OverSkin";
? }
}
}

/********************************************************/

代碼的作用對(duì)我們建立的按鈕組件進(jìn)行一些設(shè)置,我這里只簡(jiǎn)單設(shè)置了鼠標(biāo)經(jīng)過和離開.接著保存,名為"MyButto.as",位于我們上面建立的"FLA_ComponentX.fla"同目錄下.

• 8、到這里其實(shí)還沒有結(jié)束,我們還需要制作一個(gè)"ComponentShim"的組件,這個(gè)組件的作用是把外部的自定義組件代碼編譯成一個(gè)影片剪輯.那怎么建立這個(gè)"ComponentShim"組件呢,很簡(jiǎn)單,創(chuàng)建一空白的ActionScript3.0的flash文檔,CTRL+F8建立一空白剪輯,設(shè)置名稱為"MyButton",點(diǎn)開高級(jí)設(shè)置,把"導(dǎo)出ActionScript","導(dǎo)出到第一真"兩項(xiàng)打勾,class中填入"MyButton",CTRL+F8再建立一空白剪輯,設(shè)置名稱為"ComponentShim source",點(diǎn)開高級(jí)設(shè)置,把"導(dǎo)出ActionScript","導(dǎo)出到第一真"兩項(xiàng)打勾,class中填入"ComponentShim",確定,進(jìn)入編輯,把庫(kù)中的"MyButton"元件拖放到場(chǎng)景中.然后點(diǎn)中庫(kù)中的"ComponentShim source"右鍵彈出菜單選"Convert to Compiled Clip"選項(xiàng),這時(shí)候庫(kù)中就會(huì)生成一個(gè)"ComponentShim source"的組件,前面會(huì)有組件圖標(biāo),我們把這個(gè)組件的名稱改為"ComponentShim".
  這樣"ComponentShim"組件就制作完成.
• 9、切回"FLA_ComponentX.fla",繼續(xù)在"MyButton"元件的第2真上新建一層,取名為"ComponentShim",然后將剛才庫(kù)中的"ComponentShim"組件拖到這層的第2真上.
• 10、最后CTRL+S,保存,這樣fla形態(tài)的組件就制作完畢,關(guān)閉整個(gè)Flash軟件.
• 11、把"FLA_ComponentX.fla"文件復(fù)制到以下路徑:"D:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components\"//這里大家也根據(jù)各自情況設(shè)置.
• 12、我們?cè)俅未蜷_flash軟件,新建3.0空白文檔,選出組件選擇面板,會(huì)發(fā)現(xiàn)多了一個(gè)FLA_ComponentX組件包,點(diǎn)下會(huì)下劃出"MyButton"的組件,現(xiàn)在我們可把組件拖到場(chǎng)景上觀看效果.
  

/*********************************************************/
總算大功告成,發(fā)現(xiàn)做組件還真是麻煩.打字打得手麻了,不知道說(shuō)明白了沒有,關(guān)于這部分有不清楚的可以跟帖咨詢.最后的"FLA_ComponentX.fla"文件提供下載,大家放置到上面說(shuō)的路徑下看效果吧~
相關(guān)的圖片:

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/morrispan/archive/2010/10/20/1856232.html

總結(jié)

以上是生活随笔為你收集整理的FLASH CS3中的FLA形式组件制作教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。