码迷,mamicode.com
首页 > 其他好文 > 详细

Flash CS 自定义组件

时间:2015-03-04 12:37:04      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:

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下载

Flash CS 自定义组件

标签:

原文地址:http://www.cnblogs.com/adoontheway/p/4312731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!