zoukankan      html  css  js  c++  java
  • 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(Number,height:Number):void方法,如下:

    package com.good.controls{

    import fl.livepreview.LivePreviewParent;

    public class CloseButtonPreview extends LivePreviewParent{

               public function setSize(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下载

  • 相关阅读:
    HTTP代理浅说
    基于互联网内容的中文分词小实验
    spring、spring mvc、mybatis框架整合基本知识
    数据结构中缀表达式转后缀表达式以及后缀转中缀表达式
    后缀表达式与中缀表达式互转的理论知识【转】
    jquery的ajax与spring mvc对接注意事项
    Linux centos7下安装配置redis及Redis desktop Manager工具连接注意事项
    Spring事务异常回滚,捕获异常不抛出就不会回滚
    webapp 慎用setInterval、setTimeout
    javascript中String 对象slice 和substring 区别
  • 原文地址:https://www.cnblogs.com/adoontheway/p/4312731.html
Copyright © 2011-2022 走看看