Flash CS3制作Fla形式的組件

2020-07-17 13:20:04

字體：大中小

供稿：網(wǎng)友

　　本文為大家介紹如何制作Flash CS3中的[*.fla]形式的的組件(Component)。這種組件和SWC組件不同，它和CS3自帶的組件一樣能夠雙擊進(jìn)入組件里面編輯，是Flash CS3新增加的一種組件形態(tài)。下面我們制作一個(gè)MyButton組件為例子。

　　制作步驟:
　　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è)矩形用來做按鈕的普通模式的皮膚.
　　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è)矩形用來做按鈕的鼠標(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í)候是看不到的，作用主要是用來控制整個(gè)組件的寬高.然后我們新建立一層，取名"skins"，在第二幀上我們把庫(kù)中的"NormalSkin"和"OverSkin"組件拖進(jìn)來，位置可以隨意擺放，這上面的元件是我們將來使用組件的時(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è)置。

Flash CS3制作Fla形式的組件_武林網(wǎng)VeVB.COm轉(zhuǎn)載

Flash CS3制作Fla形式的組件_武林網(wǎng)VeVB.COm轉(zhuǎn)載

　　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ù)各自情況設(shè)置好路徑，新建ActionScript文檔，填入如下代碼:
　　/************MyButton.as**************/
package{
importflash.display.*;
importflash.events.*;
importflash.system.ApplicationDomain;
importfl.core.UIComponent;
publicclassMyButtonextendsUIComponent{
privatevarnowSkin:MovieClip;
privatevarthisDomain:ApplicationDomain;
publicfunctionMyButton(){
super();
trace("MyButton");
}
overrideprotectedfunctiondraw():void{
if(nowSkin==null){
thisDomain=loaderInfo.applicationDomain;
varclassDef
try{
classDef=thisDomain.getDefinition(getNormalSkinName());}
catch(e:ReferenceError){
trace("沒有在庫(kù)中找到相關(guān)的類!")
return;
}
nowSkin=newclassDefasMovieClip;
nowSkin.addEventListener(MouseEvent.MOUSE_OVER，mouseOverHandler);
addChild(nowSkin);
}
nowSkin.width=width;
nowSkin.height=height;
}
protectedfunctionmouseOverHandler(e:MouseEvent):void{
trace("over");
removeChild(nowSkin);
varclassDef=thisDomain.getDefinition(getOverSkinName());
nowSkin=newclassDefasMovieClip;
addChild(nowSkin);
nowSkin.addEventListener(MouseEvent.MOUSE_OUT，mouseOutHandler);
draw();
}
protectedfunctionmouseOutHandler(e:MouseEvent):void{
trace("out");
removeChild(nowSkin);
varclassDef=thisDomain.getDefinition(getNormalSkinName());
nowSkin=newclassDefasMovieClip;
addChild(nowSkin);
nowSkin.addEventListener(MouseEvent.MOUSE_OVER，mouseOverHandler);
draw();
}
protectedfunctiongetNormalSkinName():String{
return"NormalSkin";
}
protectedfunctiongetOverSkinName():String{
return"OverSkin";
}

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

上一頁(yè)12 下一頁(yè) 閱讀全文

上一篇：通過實(shí)例學(xué)習(xí)Flash AS3.0――案例四

下一篇：通過實(shí)例學(xué)習(xí)Flash AS3.0――案例五