开源相册cat-album1.14 | Catfly猫脸爬格子-廖湘宁的博客企业库|免费b2b网站

cat-album1.14早应该推出了，这几天我在外休假，所以放慢了开发的速度。
最终cat-album1.14版基本实现了原先计划的功能，播放效果分离出来这一功能我打算还是放到下一个版本来实现吧。

另外从1.14这个版本开始，我把cat-album的主类名修改为：AlbumLite
因为我相信简单的才是{zh0}的。

cat-album类包下载：

cat-album原代码下载：

cat-album示例下载：CatAlbum1.14-demo.rar

cat-album版本历史：

cat-album1.14有作了如下更新：
1. skin的ui到程序之间的映射机制
2. 播放器只保留核心的图片播放，转场，相框与动画效果功能，其它如缩略图区域，控制区域，播放框，功能条全部砍掉，或者分离出去成为公用的类供开发者自己调用，不再是相册自身包含的部分。
3. 相册的类文件都在com.monboo包下。这个包中包含album,display,media,utils几个包，相册自身的类文件在album包中，而display,media,utils包中的类文件都是可供开发者调用的公用类。media下有Music类，display下有ControlBar与ThumbRoll两个类。

cat-album1.14参考：
coming soon…

下面我们通过制作一个包含图片播放区，控制区，缩略图区，播放框的完整相册来了解一下如何利用cat-album开发相册。

一 . 皮肤文件

新版相册全部基于全新的皮肤映射机制，所以先来制作皮肤文件。

皮肤的文档类需要继承Skin类，它在com.monboo.skin包下面。代码：


package {
	import flash.display.Sprite;
	import com.monboo.Skin;

	public class CatSkin extends Skin {

		public function CatSkin() {
			addClass(ThumbUI,"ThumbUI");
			addClass(ThumbDrag,"ThumbDrag");
			addClass(CtrlUI,"CtrlUI");
			addClass(PlayerBoxUI,"PlayerBoxUI");
		}
	}
}

在继承了Skin类的皮肤文件的文档类中，我们可以使用的最简单的方法就是addClass

通过addClass(cl:Class,cName:String)方法可以设置绑定类cl:Class与用来获取这个类的名字cName:String。这样在这个皮肤文件被加载后，就可以简单的通过albumSkin.$c(cName:String)方法来获取皮肤文件中的类。如，
var thumbDrag:Class = albumSkin.$c(“ThumbDrag”) as Class;

这样的皮肤文件，大部分设计师都能制作，而且只需要少量简单的代码就能设置好皮肤映射。

这里是这个示例的皮肤文件：

二 . 由相册数据生成相册

相册数据前面的版本中详细介绍过，这里再贴一下示例代码供练习使用


/**
** 这里是直接把数据写在flash文件中，可以通过获取html页面参数，也可以通过xml文件获取数据
** 字符串值没有时，需赋值为""
**/
var albumData:Object = new Object();
albumData["albumName"] ="超级动感的美女";
albumData["imgUrlArr"] = ['http://img01.p2v.tudou.com/108/253/100328014258_28412.jpg','http://img01.p2v.tudou.com/17/256/100328014300_722431.jpg','http://img01.p2v.tudou.com/150/179/100328014259_123314.jpg','http://img01.p2v.tudou.com/194/140/100328014259_405643.jpg','http://img01.p2v.tudou.com/195/131/100328014259_212354.jpg','http://img01.p2v.tudou.com/161/222/100328014259_311005.jpg','http://img01.p2v.tudou.com/192/226/100328014259_513761.jpg','http://img01.p2v.tudou.com/234/90/100328014300_624473.jpg','http://img01.p2v.tudou.com/248/169/100328014300_803752.jpg','http://img01.p2v.tudou.com/172/159/100328014300_917406.jpg','http://img01.p2v.tudou.com/211/94/100328014403_30045.jpg','http://img01.p2v.tudou.com/108/142/100328014403_121997.jpg','http://img01.p2v.tudou.com/4/175/100328014403_217518.jpg','http://img01.p2v.tudou.com/183/31/100328014404_300062.jpg','http://img01.p2v.tudou.com/160/52/100328014404_419379.jpg','http://img01.p2v.tudou.com/227/49/100328014404_502576.jpg','http://img01.p2v.tudou.com/229/162/100328014405_604833.jpg','http://img01.p2v.tudou.com/155/113/100328014405_728944.jpg','http://img01.p2v.tudou.com/146/36/100328014405_811555.jpg','http://img01.p2v.tudou.com/50/21/100328014405_921364.jpg','http://img01.p2v.tudou.com/93/55/100328014546_9782.jpg','http://img01.p2v.tudou.com/82/118/100328014546_121461.jpg','http://img01.p2v.tudou.com/38/218/100328014546_215257.jpg','http://img01.p2v.tudou.com/159/184/100328014546_320183.jpg','http://img01.p2v.tudou.com/194/44/100328014547_430123.jpg','http://img01.p2v.tudou.com/115/158/100328014547_511389.jpg','http://img01.p2v.tudou.com/51/153/100328014547_626840.jpg','http://img01.p2v.tudou.com/171/222/100328014548_705245.jpg','http://img01.p2v.tudou.com/149/227/100328014548_828898.jpg','http://img01.p2v.tudou.com/207/93/100328014629_29276.jpg','http://img01.p2v.tudou.com/235/75/100328014630_106314.jpg','http://img01.p2v.tudou.com/8/251/100328014630_329722.jpg','http://img01.p2v.tudou.com/191/159/100328014631_400030.jpg'];
albumData["textArr"] = ['这是谁呢','谁说这张照片不好看','','','','挺好看的','','','','','我们喜欢这张','','','再来一张吧','','','','哈哈','','','','','','','','','品质新空间','http://hi.baidu.com/999ting','http://hi.baidu.com/999ting','http://hi.baidu.com/999ting','http://hi.baidu.com/999ting','http://hi.baidu.com/999ting','http://hi.baidu.com/999ting'
];
albumData["transArr"] = [1,9,9,1,10,13,12,10,1,11,4,17,1,12,10,9,11,1,10,1,4,4,4,4,1,9,10,1,12,13,9,11,12];
albumData["photoFrameUrl"] = "";
albumData["animationUrl"] = "";
albumData["musicUrl"] = "http://aud01.p2v.tudou.com/185/161/100329010952_6304.mp3";

生成相册，我们需要import几个类，再写几个全局变量


import com.monboo.display.ThumbRoll;
import com.monboo.display.ControlBar;

var thumbRoll:ThumbRoll;
var controlBar:ControlBar
var albumPlayer:AlbumLite;

然后加载皮肤


/********
** load skin
*********/
var albumSkin:Object;
var __albumSkin:Class;
var skinUrl:String="./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();

	createAlbum(albumSkin);

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

详细的生成相册的方法在createAlbum(albumSkin:Object)函数中。
首先我们获取皮肤中已经做好映射的类


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;

下面是相册播放框


//create PlayerBox
var playerBox:Sprite = new playerBoxUI();
addChild(playerBox);

下面是相册核心abumplayer


//create albumPlayer
albumPlayer = new AlbumLite(albumData);
albumPlayer.addEventListener("updateAlbum",updateAlbum);
albumPlayer.gotoStop = false;
albumPlayer.imageX = 6;
albumPlayer.imageY = 6;
albumPlayer.imageWidth = 484;
albumPlayer.imageHeight = 349;
addChild(albumPlayer);

下面是相册缩略图
相信用过我的翻页类与拖动翻页类，就很容易使用ThumbRoll类。


//create thumbRoll
var thumbvars:Object = {childMargin:11,childPad:6,childWidth:52,childHeight:40,pageNum:8};
thumbRoll = new ThumbRoll(albumData["imgUrlArr"],thumbDrag,thumbUI,thumbvars,"x");
thumbRoll.addEventListener("gotoImage",gotoImage);
addChild(thumbRoll);
thumbRoll.dragY = 50;
thumbRoll.y = 405;

下面是相册控制区


//create controlBar
controlBar = new ControlBar(ctrlUI,albumPlayer);
addChild(controlBar);
controlBar.x = (albumPlayer.width-controlBar.width)/2
controlBar.y = 375;

下面是两个事件函数


function updateAlbum(e:Event):void{
	if(thumbRoll){thumbRoll.updateThumb(albumPlayer.current);}
	if(controlBar){controlBar.updateControl();}
}
function gotoImage(e:Event):void{
	albumPlayer.gotoImage(thumbRoll.current);
}

示例源文件下载：

2010年04月8日 -- (2)
2010年04月19日 -- (4)
2010年04月8日 -- (2)
2010年04月8日 -- (2)

Leave a Reply