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

  • 相关阅读:
    什么是webview
    juqery.fn.extend和jquery.extend
    LeetCode
    5. Longest Palindromic Substring
    42. Trapping Rain Water
    11. Container With Most Water
    621. Task Scheduler
    49. Group Anagrams
    739. Daily Temperatures
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/adoontheway/p/4312731.html
Copyright © 2011-2022 走看看