Flash CS5 用户自定义Button的属性
其实主要就是下面这关键字的使用了 有这个生成的SWC组件在程序中调用的时候就可以在属性中显示出来了
1.关于[Inspectable(defaultValue = "Design/Skin/Btn_Common.swf")]的使用前提是在property define 对话框中Class的设置正确，包括命名空间，这样，后台的Source的只要是定义了Inspectable的标签都会自动设置上去。
2.Inspectable不可以放置在属性定义头，而是放在Settergetter地方，这样才能自动找到变量名统一。
原谅地址 http://gzg844cz.iteye.com/blog/1578926
还是有个问题：如果所得属性都设置了，组件拉到Stage上，不改变属性的值，这样所有属性就不会再次执行了。导致属性值就获取不到了。奇怪。每次都手工设置属性随便改变一下属性panel的值就可以了。
这个不是采用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的值就可以了。