Flash CS 自定义组件

2012年的时候，做了一些研究，可以后来没有去整理，没有去用到项目里头，现在把这些东西都放出来纪念一下，也给有需要的人作为参考。

基本知识：

Flash使用基本知识与ActionScript 3.0的基本知识

原理说明：

本项目的组件是扩展自flash cs自带的fl-component，对相关的类进行扩展，或者将其皮肤换成自定义皮肤。

注意事项：

开发自定义组件之前，记得要对myComponent.fla和myComponentShim.fla进行版本管理。

开发流程

1. 打开myComponent.fla，在其中新建一个元件，选择类型为影片剪辑，选择导出为ActionScript，填入类名，如下图：

2. 按照填入的类名，新建元件类对齐进行编辑，如果想对现有的组件进行扩展，那么直接继承现有组件的类作为基类即可；如果要新增一种类型的组件，建议扩展UIComponent。这样可以享受UIComponent组件的StyleManager和FocusManager带来的便利；

3. 完成自定义类后打开自定义组件的属性面板，点击类后面的钩钩按钮以测试是否可以检查到组件对应的类。如果检查不到的话，说明组件的类放错位置了。

4. 双击进入自定义组件，开始对自定义组件进行编辑。

5. 重命名默认的第一层为avatar，这里用来存放组件的avatar形象，在这里(0,0)位置画一个无填充，有边框的形状以代替自定义组件显示在舞台上的avatar，记住，尺寸一定要和元件将来显示到舞台的尺寸一致，如下图：

6. 将自定义组件需要的素材导入到库中，新建一个文件夹，将导入的素材做成影片剪辑元件，并导出，影片剪辑的命名规则：自定义组件名+状态名+”_Skin:”，特别注意的是取消这些影片剪辑在第一帧导出的选项，如下图：

7. 新增一层，名为assets，新增第二帧，第一帧保持为空白帧，将自定义组件会用到的所有皮肤都拉到这里来如下：

8. 新增一层，名为asset name，这一层主要作用是描述asset层里面的元件信息，这层记得设置为引导层，如下图：

9. 新增一层，名为component shim，这里主要放置的是库里面的componentShim文件的，稍后具体说明

完成以上步骤后，组件有了一个初步的雏形，接下来的部分需要完成的工作是：

制作组件的自定义参数

制作组件的livePreview

制作组件的ComponentShim

自定义参数

首先需要完善组件的自定义类，如果要让组件在flash里面直接设置他的相关参数，就需要用到Inspectable原标签，在自定义参数的setter或者getter上面添加Inspectable标签即可；

完善了自定义组件类之后，调出组件定义面板，将自定义组件类的完整路径填入到类标签后面的文本域中，在下面的编辑帧文本域中填写2以确保组件在第二帧进行编辑，点击确定之后，IDE需要一点响应时间去对组件类进行解析，解析完成之后重新打开组件定义面板就会发现添加了Inspectable标签的参数都出现在上面的参数面板里面，打开组件检查器的时候，里面也有这些参数；

后续更新组件自定义类的时候，都需要在这里点击一下确定以进行更新；

制作livePreview

 

制作livePreview有两种方法：

方法1. 在库中右键点击自定义组件，选择导出为swc，使用解压缩工具对swc进行解压缩，然后你会得到一个library.swf的文件，将其更名为xxxPreview.swf，xxx是你的自定义组件的名字。

方法2. 新建一个xxxPreview.fla文件，为这个文档写一个文档类，文档类一定要继承fl.livepreview.LivePreviewParent，并且文档类一定要有一个public setSize(width:Number,height:Number):void方法，如下：

package com.good.controls{

import fl.livepreview.LivePreviewParent;

public class CloseButtonPreview extends LivePreviewParent{

public function setSize(width:Number,height:Number):void{

}

}

}

.fla的尺寸设置为自定义组件的大小尺寸，之后调试影片就生成的xxxPreview.swf即为自定义组件的Preview，如下：

制作好preview.swf之后，在库中打开自定义组件的组件定义面板，设置实时预览，在弹出的实时预览对话框中选择.fla文件中嵌入的.swf文件的实时预览，然后在下面填上完整的xxxPreview.swf名字，点击确定即可。

制作ComponentShim

新建一个fla文件，命名为ComponentShim.fla（本项目的为myComponentShim.fla），如果自定义组件有用到fl组件的内容，记得将fl的componentShim拖进来，在库中新建一个组件，类名链接到新增的自定义组件的类名，如下：

在库中新增一个影片剪辑，名为xxxComponent Shim，导出类名设置为自定义组件类的包的相关目录下，然后将此元件导出为影片剪辑，将导出的影片剪辑复制到自定义组件的文件夹当中,替换默认的 componentShim文件，如下：

然后分别去每个自定义组件里面的component shim层更新component shim，将新的component shim拖到舞台上的10,10位置即可。

将新建的自定义组件的fla放到Flash CS 的安装目录下的：

Comman/Configuration/Components/目录下就可以了。

打开Flash CS，打开组件面板，选择重新加载就可以更新新组件了。

新增2012-06-28：

自定义组件类的写法注意点

1. 如果是扩展当前已有的组件，可以参考组件的继承树，选择适当的父类进行继承；如果是创建新的组件，则直接继承UIComponent即可；
2. 为了使自定义的皮肤生效，需要override getStyleDefinition方法，这个方法是用来取得皮肤数据的。当前的做法是在类里面定义一个私有的静态变量defaultStyles存放自定义皮肤的状态与名称，在getStyleDefinition里面直接返回UIComponent.megerStyle(defaultStyles);

有两个关键的方法需要注意：configUI()与draw()，draw方法里面一般是用来失效模式的渲染，cofigUI里面一般用来处理持久性的东西，例如LabelButton的textField的添加就是在configUI里面进行的。

Sample下载