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的值就可以了。
发表评论
-
il中间语言-张银-博客园
2012-01-20 11:34 868il中间语言-张银-博客园 2012年01月14日 一、 ... -
2011年安徽省公务员考试行测真题(3)
2012-01-20 11:34 6832011年安徽省公务员考试 ... -
数学 3,4
2012-01-20 11:34 738数学 3,4 17小时前 2012届同心圆梦专题卷数 ... -
2010-07-26
2012-01-19 16:25 6192010-07-26 2010年07月26日 最近不少网 ... -
相关推荐
2012-01-19 16:25 510相关推荐 2010年12月07日 因为矢量图的表现力毕 ... -
javascript try catch捕获异常
2012-01-19 16:25 973javascript try catch捕获异常 2011年 ... -
怎么将javascript异常信息输出
2012-01-19 16:25 711怎么将javascript异常信息 ... -
小学生评语
2012-01-17 06:09 593小学生评语 2011年01月18日 陈柳柳:想到你,浮现 ... -
也谈小学作文教学策略
2012-01-17 06:09 616也谈小学作文教学策略 2011年05月28日 也谈小学作 ... -
改革作文评估方法,解放小学语文教师
2012-01-17 06:09 610改革作文评估方法,解放小学语文教师 2010年07月13日 ... -
提高小学作文实效性的思考
2012-01-17 06:09 624提高小学作文实效性的思考 2010年11月17日 摘要: ... -
小学二年级操行评语1
2012-01-17 06:09 787小学二年级操行评语1 2 ... -
神马都是浮云
2012-01-16 04:50 549神马都是浮云 2011年02月20日 曾以为爱情最为坚定 ... -
神马都是浮云,但也要用心去活!
2012-01-16 04:50 554神马都是浮云,但也要用心去活! 2012年01月11日 ... -
神马爱情?全是浮云
2012-01-16 04:50 577神马爱情?全是浮云 2011年12月24日 神马爱情、你 ... -
神马爱上了浮云。
2012-01-16 04:50 601神马爱上了浮云。 2012 ... -
神马都是浮云
2012-01-16 04:50 546神马都是浮云 2012年01月14日 ...
相关推荐
adobe flash cs5 的汉化问题一直没得到解决,此文件 完美汉化flash cs5
FLASH CS5中文帮助文档,给大家分享一下,有需要的来拿哦......
flash cs5简体中文官方教程,全面详细的介绍了flash cs5的功能及使用方法
flash cs5 help中文帮助文件
flex 和 flash cs5集合的mp3播放器
flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助文件flash cs5帮助...
Flash CS5动画设计与制作实例教程中的案列。有素材,效果。 章节如下: 第1章 VI设计 第2章 动画设计 第3章 电子相册 第4章 广告设计 第5章 MTV制作 第6章 电子阅读物 第7章 动画片 第8章 游戏制作 第9章 网站应用 ...
Adobe Flash CS5中文版经典教程 本书由Adobe公司的专家编写,是Adobe Flash CS5软件的官方指定培训教材。
Flash CS5制作网站动画
Adobe创意大学flash cs5配套PPT
flash cs5 讲义,讲述flash cs5 的操作过程
adobe flash cs5 中文翻译API.chm
分享最新的flash cs5帮助文档CHM版
flash cs5中文版基础教程.pdf
flash cs5 中文帮助文件 flash cs5 中文帮助文件 flash cs5 中文帮助文件
DW FLASH cs5 破解DW FLASH cs5 破解DW FLASH cs5 破解DW FLASH cs5 破解
flash cs5 extending 中文版,不用说了吧。非常的实用。呵呵
本书全面、系统地介绍了Flash CS5的基本操作方法和网页动画的制作技巧,包括FlashCS5基础入门、图形的绘制与编辑、对象的编辑与修饰、文本的编辑、外部素材的应用、元件和库、基本动画的制作、层与高级动画、声音...
最新flash cs5 与开发帮助pdf,AS3.0高级帮助
Adobe Flash CS5 官方教程,来自官方的教程