Flash CS5 用户自定义Button组件

　　2010/12/24 Flash CS5 用户自定义Button Compoennts
　　今天是周五，圣诞前夕，明天是圣诞，所以就没有时间完善了。趁现在又时间，赶紧把自己制作的AS3为基础FlashCS5自定义Button组件讲解一下。
　　这个不是采用swz制作方法，而是完全使用代码控制，以制作皮肤为例。最后再在button上面增加一个Label文言显示。
　　分为两大步：
　　一画面制作
　　1.组件画面配置
　　2.Skin制作
　　二code
　　1.Button组件的类
　　2.SKin选择的类
　　另外写一个Bat文件方便copy组件到Adobe的组件目录下：
　　文件名：D:\JavaDevSpace\WorkSpace\FlashToFlash\CreateCompo net.bat
　　内容：
　　@echo off
　　:: ************ SET FILENAME *********************
　　SET CURPATH="D:\JavaDevSpace\WorkSpace\FlashToFlash\
　　SET fileName=HmiComponent.fla"
　　SET TARPATH="C:\Documents and Settings\xuyeding\Local Settings\Application Data\Adobe\Flash CS5\en_US\Configuration\Components\"
　　COPY /Y %CURPATH%%fileName% %TARPATH%
　　可以看到所以工作目录都是在D:\JavaDevSpace\WorkSpace\FlashToFlash\目录下。
　　下面开始制作了。
　　一：画面制作
　　1.在工作目录下，新建一个HmiComponent.fla文件，上面可以看到。stage属性默认就可以，下面不会用到这些的。
　　2.Ctrl + F8新建一个Symbol，Name：UserLabelButton  ，Type：MovieClip。Class：lane.hmi.components.btn.UserLabelButton
　　这个是下面主要的Code。
　　
　　3.对刚才的UserLabelButton的MC进行编辑：右击->Component difine设置如下：
　　
　　skinFileName是这次制作的讲解例子，所以大家可以只追加skinFileName一栏。
　　至此，组件制作完成了，close CS5 执行Bat文件把这个目录下的HmiComponent.fla copy到C:\Documents and Settings\xuyeding\Local Settings\Application Data\Adobe\Flash CS5\en_US\Configuration\Components\下。
　　下面制作skin：
　　工作目录：D:\JavaDevSpace\WorkSpace\FlashToFlash\下skin目录为：Design\Skin\下新建Btn_Common.fla
　　1.打开Btn_Common.fla
　　制作四个MC：如图
　　
　　分别再制作另外三个MC，最终如下图：
　　
　　四个Class分别为：Ｓｅｌ，Ｎｍｌ，Ｄｉｓ，Ａｃｔ
　　保存，生成swf文件。
　　至此所以得画面制作就都完成了，很简单吧。下面开始code
　　/*------------------------------------------------ --------------*/
　　二：code部分
　　目录如下：
　　
　　选择部分为我这次用到的src。
　　/* ------------------------------------------ */
　　SWFClassLibraryEvent.as
　　/************************************************* *****************************
　　* @file        SWFClassLibraryEvent.as
　　* @brief        SWFClassLibraryEvent
　　* @note        Copyright (C) 2009 ThinkinGall PERSONAL. All rights reserved.
　　* @author        SHSC Xuyeding
　　* @date        2009/12/20
　　* @version        1.00
　　************************************************** *****************************/
　　package lane.hmi.manager {
　　import flash.events.Event;
　　public class SWFClassLibraryEvent extends Event {
　　/** class is finish loaded */
　　public static const CLASS_LOADED:String = "classLoaded";
　　/** clas load error */
　　public static const LOAD_ERROR:String = "loadError";
　　/**
　　* Construcotr
　　* @param    type
　　*/
　　public function SWFClassLibraryEvent(type:String){
　　super(type);
　　}
　　/**
　　* clone
　　* @param    none
　　* @return    none
　　*/
　　public override function clone():Event {
　　return new SWFClassLibraryEvent(type);
　　}
　　/**
　　* to string
　　* @param    none
　　* @return    none
　　*/
　　public override function toString():String {
　　return formatToString("SWFClassLibraryEvent", "type", "bubbles", "cancelable", "eventPhase");
　　}
　　}
　　}
　　/* ------------------------------------------ */
　　SWFClassLibrary.as
　　/************************************************* *****************************
　　* @file        SWFClassLibrary.as
　　* @brief        SWFClassLibrary
　　* @note        Copyright (C) 2009 ThinkinGall PERSONAL. All rights reserved.
　　* @author        SHSC Xuyeding
　　* @date        2009/12/20
　　* @version        1.00
　　************************************************** *****************************/
　　package lane.hmi.manager {
　　import flash.display.DisplayObject;
　　import flash.display.DisplayObjectContainer;
　　import flash.display.Loader;
　　import flash.display.MovieClip;
　　import flash.events.Event;
　　import flash.events.EventDispatcher;
　　import flash.events.IOErrorEvent;
　　import flash.events.SecurityErrorEvent;
　　import flash.net.URLRequest;
　　import flash.system.System;
　　import lane.hmi.utils.DebugLog;
　　/**
　　*    SWFClassLibrary
　　*    @class    SWFClassLibrary
　　*/
　　public class SWFClassLibrary extends EventDispatcher {
　　/** self instance container*/
　　private static var mySelf:Object = new Object();
　　/** swf file name */
　　private var _swfFileName:String = null;
　　/** loader instance */
　　private var loader:Loader = null;
　　/** count */
　　private var usedCounter:int = 1;
　　/** class initialize status */
　　public var initStatus:int = INIT_STATE_NONE;
　　public static const INIT_STATE_NONE:int = 0;
　　public static const INIT_STATE_PROCESSING = 1;
　　public static const INIT_STATE_FINISH:int = 2;
　　public static const INIT_STATE_ERROR:int = -1;
　　/**
　　* Constructor
　　* @param    swfFileName:index id
　　*/
　　public function SWFClassLibrary(swfFileName:String) {
　　_swfFileName = swfFileName;
　　mySelf[swfFileName] = this;
　　}
　　/**
　　* get instance from object container
　　* @param    swfFileName:index id
　　* @return    SWFClassLibrary instance
　　*/
　　public static function getInstance(swfFileName:String):SWFClassLibrary {
　　/* if exists get instance*/
　　if (mySelf.hasOwnProperty(swfFileName)) {
　　SWFClassLibrary(mySelf[swfFileName]).usedCounter++ ;
　　return mySelf[swfFileName];
　　}
　　/* not exist new instance */
　　else {
　　return new SWFClassLibrary(swfFileName);
　　}
　　}
　　/**
　　* initialize
　　* @param    none
　　* @return    none
　　*/
　　public function initialize():void {
　　/* not none */
　　if (initStatus != INIT_STATE_NONE) {
　　return;
　　}
　　/* set processing status */
　　initStatus = INIT_STATE_PROCESSING;
　　/* load file path */
　　var urlReq:URLRequest = new URLRequest(_swfFileName);
　　loader = new Loader();
　　/* add listener */
　　loader.contentLoaderInfo.addEventListener(Event.IN IT, initHandler, false, 0, true);
　　loader.contentLoaderInfo.addEventListener(IOErrorE vent.IO_ERROR, ioErrorHandler, false, 0, true);
　　loader.contentLoaderInfo.addEventListener(Security ErrorEvent.SECURITY_ERROR, securityErrorHandler, false, 0, true);
　　//var loaderContext:LoaderContext = new LoaderContext();
　　loader.load(urlReq);
　　//DebugLog.printTrace(loader.contentLoaderInfo.loa derURL);
　　}
　　/*--------------event handler------------------*/
　　/**
　　* initialize finish handler
　　* @param    event
　　* @return    none
　　*/
　　private function initHandler(event:Event):void {
　　initStatus = INIT_STATE_FINISH;
　　if (loader.content is DisplayObjectContainer) {
　　/* time line class */
　　var mainTimeLine:DisplayObjectContainer = DisplayObjectContainer(loader.content);
　　/* stop all mc */
　　for (var i:int = 0; i skin class lib */
　　private var btnSkinLibrary:SWFClassLibrary = null;
　　/** button skin class name selector */
　　private var btnSkinSelector:ButtonSkinSelector = null;
　　/** button skin MC */
　　private var buttonSkin:MovieClip = null;
　　/**
　　* Constructor
　　*/
　　public function UserLabelButton(){
　　/* mouse down event */
　　addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);
　　/* mouse up event */
　　addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);
　　/* mouse roll out event */
　　addEventListener(MouseEvent.ROLL_OUT, mouseRollOutHandler, false, 0, true);
　　/* mouse wheel event */
　　addEventListener(MouseEvent.ROLL_OVER, mouseRollOverHandler, false, 0, true);
　　}
　　/*--------------event handler------------------*/
　　/**
　　* mouse down handler
　　* @param    event
　　*/
　　protected function mouseDownHandler(event:MouseEvent):void {
　　/* selected set */
　　buttonSelectedStatus = true;
　　return;
　　}
　　/**
　　* mouse up handler
　　* @param    event
　　*/
　　protected function mouseUpHandler(event:MouseEvent):void {
　　/* reactive set */
　　if (buttonSelectedStatus){
　　/* reactive reset */
　　buttonSelectedStatus = false;
　　/* mouse click */
　　mouseClickHandler();
　　}
　　return;
　　}
　　/**
　　* mouse roll out handler
　　* @param    event
　　*/
　　protected function mouseRollOutHandler(event:MouseEvent):void {
　　if (buttonReactStatus == true){
　　buttonReactStatus = false;
　　}
　　if (buttonSelectedStatus == true){
　　buttonSelectedStatus = false;
　　}
　　return;
　　}
　　/**
　　* mouse roll over handler
　　* @param    event
　　*/
　　protected function mouseRollOverHandler(event:MouseEvent):void {
　　/* reactive set */
　　buttonReactStatus = true;
　　return;
　　}
　　/**
　　* mouse click handler
　　* @param    event
　　*/
　　protected function mouseClickHandler():void {
　　return;
　　}
　　/*-------------sub method or method--------------*/
　　/**
　　* component size update handler
　　* @param    none
　　* @return    none
　　*/
　　override protected function updateComponentSize():void {
　　// TODO
　　}
　　/**
　　* update button component status
　　* @param    none
　　* @return    none
　　*/
　　protected function updateButtonStatus():void {
　　/* skin class is not ready */
　　if ((btnSkinLibrary == null) || (btnSkinLibrary.initStatus != SWFClassLibrary.INIT_STATE_FINISH)){
　　return;
　　}
　　btnSkinSelector = new ButtonSkinSelector(btnSkinLibrary);
　　/* get the skin class name */
　　var skinIndex = btnSkinSelector.skinIndexOf(buttonReactStatus, buttonSelectedStatus, buttonDisableStatus);
　　var strSkinClassName = btnSkinSelector.getSkinClassName(skinIndex);
　　/* set the skin class */
　　if (buttonSkin != null){
　　removeChild(buttonSkin);
　　buttonSkin = null;
　　}
　　var classReference:Class;
　　classReference = btnSkinLibrary.getClass(strSkinClassName);
　　if (classReference != null){
　　/* set skin property */
　　buttonSkin = new classReference() as MovieClip;
　　buttonSkin.width = actualWidth;
　　buttonSkin.height = actualHeight;
　　/* add skin to button */
　　addChild(buttonSkin);
　　setChildIndex(buttonSkin, 0);
　　}
　　/* TODO */
　　}
　　/**
　　* skin class load finish
　　* @param    event
　　* @return    none
　　*/
　　private function skinLoadFinishHandler(event:SWFClassLibraryEvent): void {
　　/* remove listener */
　　btnSkinLibrary.removeEventListener(SWFClassLibrary Event.CLASS_LOADED, skinLoadFinishHandler);
　　btnSkinLibrary.removeEventListener(SWFClassLibrary Event.LOAD_ERROR, skinLoadErrorHandler);
　　/* update button status */
　　updateButtonStatus();
　　}
　　/**
　　* skin class load error
　　* @param    event
　　* @return    none
　　*/
　　private function skinLoadErrorHandler(event:SWFClassLibraryEvent):v oid {
　　/* remove listener */
　　btnSkinLibrary.removeEventListener(SWFClassLibrary Event.CLASS_LOADED, skinLoadFinishHandler);
　　btnSkinLibrary.removeEventListener(SWFClassLibrary Event.LOAD_ERROR, skinLoadErrorHandler);
　　DebugLog.printFatal(event.toString());
　　}
　　/*----------------setter getter------------------*/
　　/** button skin path */
　　private var _skinFileName:String = null;
　　[Inspectable(category="General",type="String")]
　　public function get skinFileName():String {
　　return _skinFileName;
　　}
　　public function set skinFileName(value:String):void {
　　if ((value == null) || (value == "")){
　　return;
　　}
　　if (buttonSkin != null){
　　removeChild(buttonSkin);
　　buttonSkin = null;
　　_skinFileName = null;
　　btnSkinSelector = null;
　　}
　　_skinFileName = pathTokenConvert(value);
　　/* skin clear */
　　if (btnSkinLibrary != null){
　　btnSkinLibrary.removeEventListener(SWFClassLibrary Event.CLASS_LOADED, skinLoadFinishHandler);
　　btnSkinLibrary.removeEventListener(SWFClassLibrary Event.LOAD_ERROR, skinLoadErrorHandler);
　　btnSkinLibrary = null;
　　}
　　/* skin class loader */
　　btnSkinLibrary = SWFClassLibrary.getInstance(_skinFileName); // "Design/Skin/Btn_Common.swf");
　　btnSkinLibrary.addEventListener(SWFClassLibraryEve nt.CLASS_LOADED, skinLoadFinishHandler, false, 0, true);
　　btnSkinLibrary.addEventListener(SWFClassLibraryEve nt.LOAD_ERROR, skinLoadErrorHandler, false, 0, true);
　　btnSkinLibrary.initialize();
　　/* load finish */
　　if (btnSkinLibrary.initStatus == SWFClassLibrary.INIT_STATE_FINISH){
　　/* update button status */
　　updateButtonStatus();
　　}  /* load error,add listener */else {
　　btnSkinLibrary.addEventListener(SWFClassLibraryEve nt.CLASS_LOADED, skinLoadFinishHandler, false, 0, true);
　　btnSkinLibrary.addEventListener(SWFClassLibraryEve nt.LOAD_ERROR, skinLoadErrorHandler, false, 0, true);
　　btnSkinLibrary.initialize();
　　}
　　}
　　/** button reactive status */
　　private var _buttonReactStatus:Boolean = false;
　　[Inspectable]
　　public function get buttonReactStatus():Boolean {
　　return _buttonReactStatus;
　　}
　　public function set buttonReactStatus(value:Boolean):void {
　　_buttonReactStatus = value;
　　updateButtonStatus();
　　return;
　　}
　　/** button selected status */
　　private var _buttonSelectedStatus:Boolean = false;
　　[Inspectable]
　　public function get buttonSelectedStatus():Boolean {
　　return _buttonSelectedStatus;
　　}
　　public function set buttonSelectedStatus(value:Boolean):void {
　　_buttonSelectedStatus = value;
　　updateButtonStatus();
　　return;
　　}
　　/** button disable status */
　　private var _buttonDisableStatus:Boolean = false;
　　[Inspectable]
　　public function get buttonDisableStatus():Boolean {
　　return _buttonDisableStatus;
　　}
　　public function set buttonDisableStatus(value:Boolean):void {
　　_buttonDisableStatus = value;
　　updateButtonStatus();
　　return;
　　}
　　/** get button label */
　　public function get label():String {
　　return labelTextField.text;
　　}
　　/** set button label */
　　public function set label(value:String):void {
　　labelTextField.text = value;
　　return;
　　}
　　}
　　}
　　/************************************************* *****************************
　　* @file        ButtonSkinSelector.as
　　* @brief        ButtonSkinSelector
　　* @note        Copyright (C) 2009 ThinkinGall PERSONAL. All rights reserved.
　　* @author        SHSC Xuyeding
　　* @date        2009/12/13
　　* @version        1.00
　　************************************************** *****************************/
　　import lane.hmi.manager.SWFClassLibrary;
　　/**
　　*    ButtonSkinSelector
　　*    @class    ButtonSkinSelector
　　*/
　　internal class ButtonSkinSelector {
　　/** button status:normal */
　　public static const BUTTON_NORMAL:String = "Nml";
　　/** button status:reactive */
　　public static const BUTTON_REACT:String = "Act";
　　/** button status:selected */
　　public static const BUTTON_SELECTED:String = "Sel";
　　/** button status:disable */
　　public static const BUTTON_DISABLED:String = "Dis";
　　[ArrayElementType("String")]
　　private static var arrSkinStatus:Array = [BUTTON_NORMAL, BUTTON_DISABLED, BUTTON_SELECTED, BUTTON_SELECTED + BUTTON_DISABLED, BUTTON_REACT, BUTTON_REACT + BUTTON_DISABLED, BUTTON_REACT + BUTTON_SELECTED, BUTTON_REACT + BUTTON_SELECTED + BUTTON_DISABLED,];
　　/**
　　* Constructor
　　* @param    swfClassLib
　　*/
　　public function ButtonSkinSelector(swfClassLib:SWFClassLibrary){
　　createSkinStatus(swfClassLib);
　　}
　　/**
　　* index of button skin : normal,reactive,selected,disable...
　　* @param    act
　　* @param    sel
　　* @param    dis
　　* @return    (100)2:active,(110)2:active + selected,(001)2:disable
　　*/
　　public function skinIndexOf(act:Boolean, sel:Boolean, dis:Boolean):int {
　　return (act == true ? 1 : 0) skin list
　　* @param    swfClassLib
　　* @return    none
　　*/
　　private function createSkinStatus(swfClassLib:SWFClassLibrary):void {
　　var index:int = 0;
　　/* normal 000 => 1 normal */
　　index = skinIndexOf(false, false, false);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_NORMAL;
　　}
　　/* disable 001 => 1 disable */
　　index = skinIndexOf(false, false, true);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_DISABLED;
　　}
　　/* selected 010 => 2 selected */
　　index = skinIndexOf(false, true, false);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_SELECTED;
　　}
　　/* selected,disable 011 => 3 disable */
　　index = skinIndexOf(false, true, true);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_DISABLED;
　　}
　　/* active 100 => 4 active */
　　index = skinIndexOf(true, false, false);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_REACT;
　　}
　　/* active,disable 101 => 5 disable */
　　index = skinIndexOf(true, false, true);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_DISABLED;
　　}
　　/* active,selected 110 => 6 selected */
　　index = skinIndexOf(true, true, false);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_SELECTED;
　　}
　　/* active,selected,disable 111 => 7 disable */
　　index = skinIndexOf(true, true, true);
　　if (swfClassLib.hasClass(arrSkinStatus[index]) == false){
　　arrSkinStatus[index] = BUTTON_DISABLED;
　　}
　　}
　　/**
　　* get skin class name from defined array
　　* @param    index
　　* @return    skin class name
　　*/
　　public function getSkinClassName(index:int):String {
　　return arrSkinStatus[index];
　　}
　　}
　　至此code部分也完成了。
　　/* ------------------------------------------ */
　　下面可以测试了。
　　注意：
　　1.关于[Inspectable(defaultValue = "Design/Skin/Btn_Common.swf")]的使用前提是在property define 对话框中Class的设置正确，包括命名空间，这样，后台的Source的只要是定义了Inspectable的标签都会自动设置上去。
　　2.Inspectable不可以放置在属性定义头，而是放在Settergetter地方，这样才能自动找到变量名统一。
　　还是有个问题：如果所得属性都设置了，组件拉到Stage上，不改变属性的值，这样所有属性就不会再次执行了。导致属性值就获取不到了。奇怪。每次都手工设置属性随便改变一下属性panel的值就可以了。