为flash程序制作皮肤【皮肤映射类Skin】

为flash程序制作皮肤【皮肤映射类Skin】

skin类是一个为了更方便的访问皮肤中的对象而设计的类文件。

在flash中每次都要很麻烦的用getChildAt或getChildByName一层一层的来访问皮肤中的元件，这里设计了一种更简洁的方式来获得设计人员制作的flash文件中的元件或绑定类。
只要继承Skin类并作一些简单的设置就可以用$()方法直接获得某个ui元件,$c()获得某个绑定类,$u获得包含多个ui元件的ui模块。
我通过一个示例文件来详细讲述skin类中的几种用法。

示例文件从这里下载：skin-sample

我们先来看看示例皮肤文件中的类绑定截图

package {
	import flash.display.Sprite;
	import com.monboo.skin.Skin;
	public class CatSkin extends Skin {
		public function CatSkin() {
		}
	}
}

再在文档类的构造方法中定义皮肤中提供的对象。

通过三种方法定义皮肤中的对象
public function addClass(cl:Class,cName:String):void
addClass定义绑定类
public function addUI(cName:String,uName:String):void
addUI定义显示对象模块
public function addMap(mapName:String,path:String):void
addMap定义显示对象模块某层级的对象的访问映射

最后在加载皮肤的应用程序端访问皮肤中的对象：

/********
** load skin
*********/
var albumSkin:Object;
var __albumSkin:Class;
var skinUrl:String="http://www.xncat.com/wp-content/uploads/2010/05/catSkin.swf";
loadSkin();

function loadSkin():void {
	var loadSkin:Loader = new Loader();
	var context:LoaderContext = new LoaderContext();
	context.checkPolicyFile=true;
	context.applicationDomain=new ApplicationDomain(ApplicationDomain.currentDomain);
	loadSkin.load(new URLRequest(skinUrl),context);
	loadSkin.contentLoaderInfo.addEventListener(Event.COMPLETE,skinLoadedFunc);
}
function skinLoadedFunc(e:Event):void {
	__albumSkin=e.target.applicationDomain.getDefinition("CatSkin") as Class;
	albumSkin = new __albumSkin();

	trace("[Skin loaded successfully!]");
}

主要有三种访问皮肤内容的方法
1 . 访问皮肤中的类
例如我们要获得皮肤中的CtrlUI,PlayerBoxUI,ThumDrag,ThumbUI几个类，从而实现在皮肤文件加载完成后，可以方便的得到这些类的引用，这种情况适用方法1.
皮肤文件端：
public function addClass(cl:Class,cName:String)
cl:Class参数：在皮肤文件中的绑定类
cName:String参数：加载皮肤后获得这个绑定类的名称

addClass(ThumbUI,"ThumbUI");
addClass(ThumbDrag,"ThumbDrag");
addClass(CtrlUI,"CtrlUI");
addClass(PlayerBoxUI,"PlayerBoxUI");

加载皮肤的应用程序端：
public function $c(cName:String):Class
cName:String参数：加载皮肤后获得这个绑定类的名称

var thumbDrag:Class = albumSkin.$c("ThumbDrag") as Class;
var thumbUI:Class = albumSkin.$c("ThumbUI") as Class;
var ctrlUI:Class = albumSkin.$c("CtrlUI") as Class;
var playerBoxUI:Class = albumSkin.$c("PlayerBoxUI") as Class;

2 . 访问皮肤中的显示对象模块
比如我们要访问皮肤文件中一个实例化的显示模块volumeControl，它里面有比较复杂的显示对象层级，有比较多的按钮对象，我把为了方便把这个模块绑定成一个类，在应用程序端只需要获得这个模块实例，并addChild到显示列表中就行了。
皮肤文件端：
public function addUI(cName:String,uName:String):void
cName:String参数：加载皮肤后获得这个模块绑定类的名称
uName:String参数：在皮肤文件中模块的实例名

addClass(VolumeControl,"VolumeControl");
addUI("VolumeControl","vControl");

加载皮肤的应用程序端：
public function $u(uName:String):Sprite{
uName:String参数：在皮肤文件中模块的实例名

addChild(albumSkin.$c("vControl"));

3 . 访问皮肤中的 显示对象模块中的某一个ui
当我们获得了某个显示对象模块后，如何访问它里面比较复杂的显示对象层级，就可以用到这第三种方法了。
皮肤文件端：
public function addMap(mapName:String,path:String):void
mapName:String参数：映射名，通过这个名称可以获得某一个层级的显示对象
path:String参数：映射路径，如vControl.volumUp.soundLine

addClass(VolumeControl,"vControl");
addMap("soundLine","vControl.volumUp.soundLine");

加载皮肤的应用程序端：
public function $(mapName:String):Sprite
mapName:String参数：映射名，通过这个名称可以获得某一个层级的显示对象

var soundLine:Sprite = albumSkin.$("soundLine"));

注：

你可以把皮肤ui分离成一个独立的皮肤文件用于应用程序加载，也可以不分离把皮肤ui跟应用程序位于同一文件。如果是分离的话，你得在加载成功后的方法中获取皮肤中的对象，如果不分离的话，可以直接访问皮肤中的对象。