FLASH CS3的FLA形式组件制作教程

/*******
讲解:春叶飘零
时间:2007.10.9
*******/
/**********如要转载,请注明出处[闪吧-AS版]**********/
#############FLASH CS3中的FLA形式组件制作教程#############

下面给大家介绍下如何制作[*.fla]形态的组件(Component),

这种组件区别于SWC组件,和CS3自带的组件一样能够双击进入组件里面编辑.

//应该是CS3新增加的一种组件形态
以制作一个MyButton组件为例子.
分如下几个步骤:
1.首先创建一空白的ActionScript3.0的flash文档,然后保存文件命名为:"FLA_ComponentX".//名称可以任意
2.CTRL+F8,新建一空白剪辑，取名为"Avatar",进入编辑,第一真上我们画一矩形框(Stroke style我们选择"hairline",最细的线条),
不用填充,一定要记得设置坐标为(0,0),位置固定的.
3.CTRL+F8,继续新建个空白剪辑,取名为"NormalSkin",点开高级设置，把"导出ActionScript","导出到第一真"两项打勾,class中填入"NormalSkin",最后把
"启动9-scale缩放的引导线"选项打勾，最后确定,进入编辑,画一填充圆角矩形,设置颜色为灰色,摆放位置(0,0),可以拖动9-scale缩放的引导线,如图对齐，
作用是让圆角矩形进行所放的时候保持四个定位的角不变形,这个矩形用来做按钮的普通模式的皮肤
4.CTRL+F8,继续新建个空白剪辑,同上，取名为"OverSkin",点开高级设置，把"导出ActionScript","导出到第一真"两项打勾,class中填入"OverSkin",最后把
"启动9-scale缩放的引导线"选项打勾，最后确定,进入编辑,画一填充圆角矩形,设置颜色为红色,摆放位置(0,0),这个矩形用来做按钮的鼠标经过模式的皮肤
5.CTRL+F8,新建个空白剪辑(这下我们建立的就是最终的按钮组件，上面建立的都是这按钮的组成部分),取名为"MyButton",点开高级设置，把"导出ActionScript",
"导出到第一真"两项打勾,class中填入"MyButton",然后确定，进入编辑,第一层取名为"avatar",然后第一真上我们从库中把"Avatar"元件拖放到场景中，
放置到(0,0)位置,这一真的内容在我们最后运行组件的时候是看不到的，作用主要是用来控制整个组件的宽高。
然后我们新建立一层，取名"skins",在第二真上我们把库中的"NormalSkin"和"OverSkin"组件拖进来,位置可以随意摆放,这上面的元件
是我们将来使用组件的时候，双击进入能够进行设置的。
6.点中库中的"MyButton"元件，右键菜单中选"Component Definition"(组件定义)选项,会进入一窗口,把类名填上"MyButton",
再把"diaplay in Components panel"选项打上钩,"Tool tiptext"中填入组件名称,我这里填"MyButton".这里还有设置组件
的preview(预览)效果还有图标等，其他内容大家可根据需要自行设置.
7.到这步，我们会发现还缺少一个外部的自定义组件的代码,也就是上面"MyButton"元件连接的"MyButton"类.
由于类中导入了组件类,所以我们要设置FLASH CS3的classPath(类路径),选编辑-->参数设置-->ActionScript-->ActionScript3.0，
添加一新的类搜索路径,我这里为
"D:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface"
//大家根据各自情况来设置好路径
新建ActionScript文档，填入如下代码:
/************MyButton.as**************/

[Copy to clipboard] [ - ]

CODE:

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("没有在库中找到相关的类!")
     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";
  }

}
}

/********************************************************/
代码的作用对我们建立的按钮组件进行一些设置,我这里只简单设置了鼠标经过和离开。
接着保存,名为"MyButto.as"，位于我们上面建立的"FLA_ComponentX.fla"同目录下.

6.到这里其实还没有结束,我们还需要制作一个"ComponentShim"的组件，这个组件的作用是把外部的自定义组件代码编译成一个影片剪辑。
那怎么建立这个"ComponentShim"组件呢，很简单,创建一空白的ActionScript3.0的flash文档,
CTRL+F8建立一空白剪辑,设置名称为"MyButton",点开高级设置，把"导出ActionScript","导出到第一真"两项打勾,class中填入"MyButton",
CTRL+F8再建立一空白剪辑,设置名称为"ComponentShim source",点开高级设置，把"导出ActionScript","导出到第一真"两项打勾,class中填入"ComponentShim",
确定,进入编辑,把库中的"MyButton"元件拖放到场景中.然后点中库中的"ComponentShim source"右键弹出菜单选"Convert to Compiled Clip"
选项,这时候库中就会生成一个"ComponentShim source"的组件，前面会有组件图标,我们把这个组件的名称改为"ComponentShim"。
这样"ComponentShim"组件就制作完成。
7.切回"FLA_ComponentX.fla",继续在"MyButton"元件的第2真上新建一层，取名为"ComponentShim",然后将刚才库中的"ComponentShim"组件拖到这层的第2真上。
8.最后CTRL+S,保存,这样fla形态的组件就制作完毕,关闭整个Flash软件.
9.把"FLA_ComponentX.fla"文件复制到以下路径:
"D:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components\"
//这里大家也根据各自情况设置.
10.我们再次打开flash软件，新建3.0空白文档,选出组件选择面板，会发现多了一个FLA_ComponentX组件包，点下会下划出
"MyButton"的组件，现在我们可把组件拖到场景上观看效果。
/*********************************************************/
总算大功告成，发现做组件还真是麻烦.打字打得手麻了，不知道说明白了没有，关于这部分有不清楚的可以跟帖咨询.

最后的"FLA_ComponentX.fla"文件提供下载，大家放置到上面说的路径下看效果吧~

相关的图片

[ 本帖最后由 ycccc8202 于 2007-10-9 17:56 编辑 ]

附件

2007-10-9 16:40

Image00005.jpg (24.49 KB)
 

2007-10-9 16:40

Image00000.jpg (22.61 KB)
 

2007-10-9 16:40

Image00002.jpg (39.48 KB)
 

2007-10-9 16:40

Image00003.jpg (15.26 KB)
 

2007-10-9 16:40

Image00004.jpg (27.61 KB)
 
 

FLA_ComponentX.rar (31.07 KB)
 

标签集: TAGS: 组件