Flash CS5 用户自定义Button组件
Flash CS5 用户自定义Button组件
2010年12月24日
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分别为:Sel,Nml,Dis,Act
保存,生成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 error handler
* @param event
* @return none
*/
private function ioErrorHandler(event:IOErrorEvent):void {
initStatus = INIT_STATE_ERROR;
dispatchEvent(new SWFClassLibraryEvent(SWFClassLibraryEvent.LOAD_ERR OR));
//DebugLog.printTrace(_swfFileName + " class loaded error");
}
/**
* security error handler
* @param event
* @return none
*/
private function securityErrorHandler(event:IOErrorEvent):void {
initStatus = INIT_STATE_ERROR;
dispatchEvent(new SWFClassLibraryEvent(SWFClassLibraryEvent.LOAD_ERR OR));
//DebugLog.printTrace(_swfFileName + " class loaded error");
}
/*--------------method------------------*/
/**
* get class from swf file name
* @param className
* @return Class instance
*/
public function getClass(className:String):Class {
if (initStatus != INIT_STATE_FINISH) {
return null;
}
try {
return loader.contentLoaderInfo.applicationDomain.getDefi nition(className) as Class;
}catch (e:ReferenceError) {
DebugLog.printFatal(className + " definition not found in " + _swfFileName);
return null;
}
return null;
}
/**
* check if have the defined class
* @param className
* @return have true;else false
*/
public function hasClass(className:String):Boolean {
if (initStatus != INIT_STATE_FINISH) {
return false;
}
return loader.contentLoaderInfo.applicationDomain.hasDefi nition(className);
}
/**
* delete instance
* @param event
* @return none
*/
public function deleteInstance():void {
if (usedCounter-- 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) 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的值就可以了。
猜你喜欢
转载自ldi543lc.iteye.com/blog/1359565
今日推荐
周排行