FTE（Flash Text Engine）和TLF（Text Layout Framework）。它们的强大自不必多说，可去该文章提供的网址查看，或者直接看这个Demo。但是，在Flex与Flash中有对应的组件可以使用么？FTE和TLF是什么关系？

关系

TLF是建立在FTE的基础上的。或者说TLF在FTE的基础上实现了“高级功能”。直接使用FTE是很难受的，连Adobe都这样说：

“FTE 提供对文本度量、格式和双向文本的复杂控制的低级别支持。尽管可以使用 FTE 创建和管理简单的文本元素，但设计 FTE 的主要目的在于为开发人员创建文本处理组件提供基础。”

请注意加粗的部分。Adobe认为FTE并不适合做文本处理。因此，Adobe又做了TLF，并且将TLF整合到了Flex SDK 4.0（Gumbo）中。但TLF同样不是组件。不过TLF已经可以将需要显示的文本输入到DisplayObject当中，并加入了对选择文本、编辑文本、快捷键、事件的支持，虽然仍不能直接支持滚动条（配合事件和滚动条组件是可以支持的），但这已经前进了一大步，更方便我们使用了。

那我们就基于TLF来开发么？不是。我需要的是像Flash或者Flex中的TextArea组件一样来简单的使用TLF。为了实现我这个美好的愿望，Adobe针对Flash CS4制作了Text Layout Component组件，针对Flex的组件则包含在新的spark包中。

下载Text Layout Component：

Text Layout Component (1.5 MiB, 435 hits)

Text Layout Component 使用范例 (6.5 MiB, 517 hits)

说到这里，这个关系就比较顺了。TLF就是FTE的扩展，这个扩展其实还是代码层面多些。而Text Layout Component和spark中的相关组件又是TLF的扩展，它们才是真正的组件级别的应用。

Text Layout Framework ：新功能

1. 支持复杂文字

尽管TextField很好用，而且占用内存很少，在flash player 10 中用它来显示少量静态文本是一个不错的选择，但是web设计师们十分渴望一个更加高级的排版控件，因此我们选择了Text Layout Framework。

Text Layout Framework是一组支持复杂文字和高级排版方式的Actionscript 3库，其布局特性在TextField类中是没有的的。

复杂文字的支持不仅包括从左到右显示和编辑文字的能力，而且要支持从左到右和从右到左的混合排版文字，例如阿拉伯文和希伯来文。该框架不仅支持中文，日文，韩文的垂文本布局，同样支持tate-chu-yoko（TCY Elements），即将横向文字块嵌入到垂直的文本流中。

目前支持以下文字：

• 拉丁文（英语、西班牙语、法语、越南语）
• 希腊文、西里尔文、亚美尼亚、格鲁吉亚语、埃塞俄比亚语
• 阿拉伯语、希伯来语
• 中文、日文和韩文
• 孟加拉语、果鲁穆奇语、马拉雅拉姆语、泰卢固语、泰米尔语、古吉拉特语、奥里亚语、卡纳达语、藏语
• Tifinagh, Yi, Cherokee, Canadian Syllabics, Deseret, Shavian, Vai, Tagalog, Hanunoo, Buhid, Tagbanwa

2. 高级排版和布局功能

高级排版的支持和布局特性包括：

• 高级的文本样式：连字（印刷）， typographic case, digit case, and digit width；
• 高级的文本布局控制：字间距，锚定位（tracking），行间距，上标（superscript），下标（subscript），基线移位；
• 多列文字，每一列作为一个文本容器；
• 两个挨着的文本容器支持文本连续的选择；
• inline的图形，嵌入到文本流中被当做文本一样处理（这个是图文混排的基础）；
• Support for tabs

详细的描述和例子，请到这里Text Layout Component for Flash CS4 Professional Overview。

3. 需要Flash Player 10的支持

Text Layout Framework需要Flash Player10或者更新的版本，因为它是基于Flash player 10的新文本引擎（FTE）。FTE用过flash.text.engine包访问，这个包是Flash Player 10 API的一部分。Flash Player API，提供了对文本引擎底层的访问能力，这意味着一些任务需要大量的代买。当一个API提供如此底层的访问时，它通常会提供一个像Text Layout Framework这样的高层框架，来封装一些简单的API，这同样也提供了一个合适的框架，将FIE底层的API的基本功能组织成一个比较简单适用的系统。和FTE不同的是，Text Layout Framework没有被build进Flash Player。而且，他是一个用Actionscript 3.0写的独立的组件，在Flash CS 4和Flex Gumbo中同样适用。尽管它是设计成灾Flash CS4和Flex Gumbo中使用的，但它并不依赖于它们。例如，如果你在使用Flash CS 4，你有两种方法是用Text Layout Framework.。如果你喜欢拖拽text组件到舞台上，你可以使用新的Flash CS4 TextLayout组件，他是基于Text Layout Framework专门用Flash CS4的。需要澄清的是，TextLayout组件是专用于Flash CS4，是基于Text Layout Framework但并不是它的一部分。如果你喜欢在代码中用as3直接使用Text Layout Framework，你同样可以，只要你确定Text Layout Framework的库文件在正确的路径下。如果你使用Flex Gumbo，你同样有两个选择。你既可以使用基于Text Layout Framework的FxTextArea组件，或者直接在代码中使用Text Layout Framework。另外，由于Flex 3.2已经支持Flash Palyer 10，你可以在Flex 3.2中直接使用Text Layout Framework。

Text Layout Framework ：架构

1. Text Layout Framework的结构

Text Layout Framework 包括三个分离的组件•textLayout_core.swc•textLayout_conversion.swc•textLayout_edit.swctextLayout_core组件 (hereinafter the “core component”) 是框架的核心组件，它处理文本的存储，文本容器的建立以及文本的显示。离开了textLayout_core你将无法使用Text Layout Framework。这个组件就顺理成章的包括着组成该框架的主要代码。textLayout_conversion组件(hereinafter the “conversion component”) 是用来将文本导入和导出框架的。如果你想使用没有直接编译进SWF文件的文本，这个组件是必须的。textLayout_edit组件 (hereinafter the “edit component”) 是用来编辑存储在core component中文本的组件。如果你想使用文本的编辑和选择功能，这个组件是必须的。所有组成框架的类都在flashx.textLayout包下。例如，处理文本存储的类在flashx.textLayout.containers包下。flashx.textLayout一共有10个子包，随着你逐渐了解Text Layout Framework的结构，你将越来越多的感受到它们的意义。

Text Layout Framework 包括三个分离的组件

• textLayout_core.swc
• textLayout_conversion.swc
• textLayout_edit.swc

textLayout_core组件 (hereinafter the “core component”) 是框架的核心组件，它处理文本的存储，文本容器的建立以及文本的显示。离开了textLayout_core你将无法使用Text Layout Framework。这个组件就顺理成章的包括着组成该框架的主要代码。

textLayout_conversion组件(hereinafter the “conversion component”) 是用来将文本导入和导出框架的。如果你想使用没有直接编译进SWF文件的文本，这个组件是必须的。

textLayout_edit组件 (hereinafter the “edit component”) 是用来编辑存储在core component中文本的组件。如果你想使用文本的编辑和选择功能，这个组件是必须的。

所有组成框架的类都在flashx.textLayout包下。例如，处理文本存储的类在flashx.textLayout.containers包下。flashx.textLayout一共有10个子包，随着你逐渐了解Text Layout Framework的结构，你将越来越多的感受到它们的意义。

2. Text Layout Framework的架构

理解Model-View-Controller (MVC)设计模式将帮助你更好的理解Text Layout Framework的架构。虽然Text Layout Framework并没有严格的遵守MVC设计模式，但它和MVC如此地接近，以至于理解了MVC将很容易地理解Text Layout Framework的架构。

MVC设计模式主张将代码按功能分离成三个不同的模块。第一个模块是模型层，不仅包括原始数据，而且包括访问数据的规则。第二个模块是视图层，处理数据的呈现。第三个模块是控制层，处理用户和视图之间的交互，把用户的行为（如选择或者编辑内容），传送到命令中来盖面模型层中的数据。通常在一个框架中只有一个模型，但是可以有很多视图和控制器。

Text Layout Framework的模型层主要定义在elements包中，包括存储文本的数据结构的类和接口。conversion类同样可以认为是模型层的一部分，它包含将数据导入和导出的规则。

Text Layout Framework的视图层包括三个包，它们使Flash Player呈现文本变得很简单。factory包提供了显示静态文本的简单方式。container包含了定义显示动态文本容器的类和接口。compose包定义了在容器中定位和显示动态文本的技术。

Text Layout Framework的控制层包含了两个处理用户与模型层交互的包。edit和operations包定义了用来编辑模型中文本的类。

Text Layout Framework的核心与转换组件见：使用AS3中的FTE与TLF来渲染文本二

• 2010年02月28日 -- as3四种方法实现文本居中 (0)

LightCharts是一个轻量级的flex线状图表库。

背景
LightCharts是因为我的一个项目制作的，需要追踪股票市场的众多信息。开始我使用 AdobeFlex的图表库，但是我发现使用 Adobe Flex提供的图表，表现起来很糟糕。随着数据量的增加，需要的时间也要相应的增加。当然，这并不一定是由于Adobe的编码不够优良造成的。他们的库需要包含各种个样的功能来处理不同的需求，所以它们显的很重。我不需要更多的功能，仅仅需要数据的灵活显示。
我搜索网上的第三方图表库，我发现了Keith Peters做的一套漂亮的组件库叫做 Minimal Comps。Keith的库很轻量是一个不错的选择，但是MinimalComps是建立在flash环境下的不是为flex准备的，最主要的问题还是组件的生命周期问题。
他的代码给了我灵感，所以我决定使用它作为我的模型，按照我需要的方式修改。

特点
这个图表组件库有许多新特点和一些新的对象类，包括显示增强和数据交互。例如数据的序列类可以再图形上显示多条线。该工具的架构可以通过创建插件的形式增加数据的处理，而不需要改变任何图表的基类。所以，线状图表类的子类可以有不同的显示方式和特征。我的项目包含了两个图表的例子一个是MACD（指数平滑异同移动平均线）另一个是随机线。
备注：这些例子只是教你如何从基类中扩展你需要的类，而不是教你计算MACS和随机图表的值，至于它们的计算公式可以在网上找到。

演示截图

在演示的截图里你可以看到许多特点：

• 三种不同的图表（标准，MACD和随机）显示不同的背景包括图像，透明度，线条的颜色，和值得范围。
• 在第一个图表上，有一个十字线当鼠标经过的时候会有数字出现，所有的图表都有这样的功能。
• 在第一个和第二个图表上有一个自定义的工具叫DotDisplayTool，它是在数据序列的结尾处显示的小点。DotDisplayTool是一个非交互是插件的例子。
• 在第二个和第三个图表上有一个自定义工具叫做LinearDrawTool，它允许你在数据上根据起始和终止位置绘制直线并显示图表的值。LinearDrawTool是一个交互插件的例子。

示例与源代码

从后面的链接查看示例：LightCharts live demo

源代码遵循MIT license，请从这里下载

• 2010年04月22日 -- 我最想转载的air电子书帖【由airia网整理与提供下载】 (1)

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

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

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


先用皮肤的文档类继承Skin类，skin类继承了Sprite类，所以不用担心文档类需要继承Sprite的问题
皮肤文件端：

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,"VolumeControl");
addUI("VolumeControl","vControl");
addMap("soundLine","vControl.volumUp.soundLine");

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

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

注：

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

• 2010年08月29日 -- flash开发中提高性能方法的整理 (1)
• 2010年08月18日 -- 小s：盛大游戏麻球网上线 Flash独立游戏开发者的曙光 (0)
• 2010年08月18日 -- 腾讯博客：Flash Mini Game 盈利平台出现 (0)
• 2010年08月18日 -- 谈熠：做自己心仪的游戏发布给1亿个人 (1)
• 2010年08月18日 -- 猫粮：独立游戏开发者春天 (0)
• 2010年08月18日 -- 马鉴：盛大Mochi发布面向中国Flash游戏开发者的游戏平台 (0)

• 2010年08月18日 -- 製作一個類似Blockage的遊戲【天地会译林军】 (1)
• 2010年07月26日 -- 开发与上传麻球游戏教程（n神版） (1)

• 2009年12月15日 -- 频繁点击检测类：ClickCheck (1)
• 2010年02月28日 -- as3四种方法实现文本居中 (0)
• 2009年11月22日 -- wp-swfobject为博客嵌入flash (3)
• 2010年07月9日 -- 麻球开发者反馈答复（7月2日） (0)
• 2010年07月25日 -- 7月18华东flash技术峰会上麻球宣传演讲 (2)
• 2010年02月2日 -- 如果人比机械廉价 (0)

下面是制作转场文件时的文件结构，我把所有的单个的转场动画的swf文件全放在assets文件夹中。

一. 在转场制作文件的文档类中， Embed所有的转场文件，并把所有的类存放在_transArr数组中。

[Embed(source="./assets/trans1.swf")]
public var trans1:Class;

[Embed(source="./assets/trans2.swf")]
public var trans2:Class;

[Embed(source="./assets/trans3.swf")]
public var trans3:Class;

[Embed(source="./assets/trans4.swf")]
public var trans4:Class;

[Embed(source="./assets/trans5.swf")]
public var trans5:Class;

[Embed(source="./assets/trans6.swf")]
public var trans6:Class;
......
private var _transArr:Array=new Array(trans1,trans2,trans3,trans4,trans5,trans6,......);

二. 在转场文件中有一个公共方法getTransition(n:Number=0):MovieClip，相册对象加载并设置转场文件后，就通过getTransition方法返回一个转场的MovieClip对象。

public function getTransition(n:Number=0):MovieClip {
        var trans:MovieClip  = new _transArr[n]();
        return trans;
}

转场示例文件：transition.rar

三. 给相册设置转场的时候，需要在相册中加载最终编译好的transition.swf文件，
最后在加载完成的方法中把加载的transition对象通过相册的setTransition(tansArr:Array,tranSwf:Object)方法，就完成了对相册转场的设置。
tansArr中存放的是每一张图片对应的转场编号，
tranSwf是编号对应的转场影片剪辑。

var __tranSwf:Class;
var tranSwf:Object;
var transUrl:String = "./transition/albumTransition.swf";
loadTransition();

function loadTransition():void {
	 var loadTrans:Loader = new Loader();
	 var transContext:LoaderContext = new LoaderContext();
	 transContext.checkPolicyFile=true;
	 transContext.applicationDomain=new ApplicationDomain(ApplicationDomain.currentDomain);
	 loadTrans.load(new URLRequest(transUrl),transContext);
	 loadTrans.contentLoaderInfo.addEventListener(Event.COMPLETE,transitionLoadedFun);
}
function transitionLoadedFun(e:Event):void {
	 __tranSwf=e.target.applicationDomain.getDefinition("AlbumTransition") as Class;
	 tranSwf = new __tranSwf();

	 albumPlayer.setTransition(albumData["transArr"],tranSwf);
	 trace("[Transition loaded successfully!]");
}

• 2010年04月8日 -- 如何给cat-album制作与设置皮肤 (2)
• 2010年04月8日 -- 如何给cat-album准备数据【album的数据模型】 (2)
• 2010年04月8日 -- cat-album开源相册播放器 (2)
• 2010年05月12日 -- 开源相册cat-album1.14【albumlite】 (1)

下面是制作皮肤文件时的文件结构

示例[无设置皮肤]：

你可以下载修改这个皮肤文件：albumSkin.rar，
在AlbumPlayer对象上设置这个文件为皮肤文件。这样皮肤文件就与相册分离了。
示例[有设置皮肤]：

加载与设置相册皮肤的方法如下：

var albumPlayer:AlbumPlayer=new AlbumPlayer(albumData);
addChild(albumPlayer);

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

	albumSkin = new __albumSkin();

	albumPlayer.setAlbumSkin(albumSkin);
	trace("[Skin loaded successfully!]");
}

这个皮肤文件的结构是这样的：

播放框区域 ：蓝框区域
图片区域 ：红框区域
环绕功能条区域 ：黄框区域
控制面板 ：紫框区域

通过修改下面几个元件中的界面达到换皮肤的目的：

换播放框界面，修改 [ PlayerSkin ] 元件

换环绕功能条，修改 [ AroundBar ] 元件

换控制按钮，修改 [ ControlPanle ] 元件

其中音量控制面板，需要修改 [ VolumeCotrol ] 元件，具体修改方式如下：
音量拖动点：

静音切换按钮：

音量显示条修改 [ VolumeUp ] 元件：方便修改把不同颜色的显示条错开，修改好后再重叠起来。

• 2010年04月19日 -- 为cat-album制作与设置转场 (4)
• 2010年04月8日 -- 如何给cat-album准备数据【album的数据模型】 (2)
• 2010年04月8日 -- cat-album开源相册播放器 (2)
• 2010年05月12日 -- 开源相册cat-album1.14【albumlite】 (1)
• 2010年03月15日 -- 外调皮肤的几种方法【从加载的swf文件中获取皮肤】 (0)

var albumPlayer:AlbumPlayer=new AlbumPlayer(albumData);
addChild(albumPlayer);

这个albumData对象的数据结构如下：
var albumData:Object = new Object();
albumData["albumName"] ：相册名
albumData["imgUrlArr"]：每张图片地址的数组
albumData["textArr"]：每张图片对应的文字内容的数组
albumData["textProperty"]：图片文字的文本属性对象
albumData["transArr"]：每张图片对应的转场编号的数组
albumData["photoFrameUrl"]：相框文件地址
albumData["animationUrl"]：动画效果文件地址
albumData["musicUrl"]：音乐文件地址

/**
** 这里是直接把数据写在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";

其中albumData["textProperty"]这个数据元素是可选的，没有就是默认文本属性。要设置的话，只有三种文本属性可自定义，按如下访求来设置文本属性。

textProperty.fontColor = "0xffffff";
textProperty.fontSize = 15;
textProperty.fontBg = "0x000000";

• 2010年04月19日 -- 为cat-album制作与设置转场 (4)
• 2010年04月8日 -- 如何给cat-album制作与设置皮肤 (2)
• 2010年04月8日 -- cat-album开源相册播放器 (2)
• 2010年05月12日 -- 开源相册cat-album1.14【albumlite】 (1)

cat-album原代码下载：CatAlbum1.13.rar

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

cat-album版本历史：http://www.xncat.com/cat-album-version

新版相册已出：开源相册cat-album1.14

License : albumlite-license

cat-album是一款开源相册程序，最新的版本是1.13

cat-album是从相册程序的开发过程中演变而来的。它对相册的皮肤，数据与播放控制进行了很好的分离，从而方便了在cat-album的基础上进行自定义开发。cat-album的核心只是一个图片播放区域和自动播放功能，只要准备好相册数据（参看cat-album数据模型），实例化一个AlbumPlayer对象，把数据对象作为唯一必须的参数写入AlbumPlayer对象，一个最基本的相册就生成了。

当然cat-album不只这样简单，它提供了丰富的功能：

可以设置外调皮肤文件(参看为cat-album制作与设置皮肤) ，
可以加入转场效果(参看为cat-album制作设置转场)，
可以添加缩略图导航功能(参看cat-album缩略图模块)，
可以从外部访问相册(参看从外部访问cat-album)的公共控制方法来实现对相册的控制。

目前catAlbum只有一种图片播放效果：当前图片渐隐，然后播放转场同时下一张图片放大进入的效果，在未来的版本中，将把图片播放效果分离出来，作为插件提供下载，从而实现丰富多样的相册图片播放效果。

cat-album可以用来做什么（以下例子是用cat-album模仿开发，体验原本的相册与轮播器请去官网）

–用于开发flash相册

声明：示例中所使用的相册数据是土豆网公开相册图片内容，如遇版权内容请联系我更换图片rman@live.cn
如何用catAlbum开发qq相册

声明：示例中所使用的相册数据是土豆网公开相册图片内容，如遇版权内容请联系我更换图片rman@live.cn
如何用catAlbum开发21cn相册

–用于开发图片轮播放器

声明：示例中所使用的相册数据是土豆网公开相册图片内容，如遇版权内容请联系我更换图片rman@live.cn
如何用catAlbum开发pptv图片轮播器

cat-album程序的API介绍

设置皮肤的方法

 setAlbumSkin(skin:Object)
/**
* setAlbumSkin方法可以在皮肤文件加载成功后，把皮肤对象设置为albumPlayer的皮肤文件
* @param skin 是一个Object，皮肤swf文件要按提供的示例文件制作，
* 皮肤文件中需要提供返回各皮肤模块的公共方法，以让相册获取相应的模块。
* @example 下面例子是外调皮肤文件，并把加载到的皮肤设置与albumPlayer的皮肤。
*
*	var albumSkin:Object;
*	var __albumSkin:Class;
*	var skinUrl:String = "./skin/albumSkin.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));
*		loadSkin.contentLoaderInfo.addEventListener(Event.COMPLETE,skinLoadedFunc);
*	}
*	function skinLoadedFunc(e:Event):void {
*		__albumSkin=e.target.applicationDomain.getDefinition("AlbumSkin") as Class;
*
*		albumSkin = new __albumSkin();
*		albumPlayer.setAlbumSkin(albumSkin);
*		trace("[Skin loaded successfully!]");
*	}
*
* @return void
**/

设置转场的方法

 setTransition(tansArr:Array,tranSwf:Object)
/**
* setTransitionMask方法可以在转场文件加载成功后，把转场对象设置为albumPlayer的转场文件
* @param tansArr 每张图片对应的转场编号，这是一个数组
* @param tranSwf 是一个Object，转场swf文件中需要包含返回每一种转场效果对象的公共方法
* @example 下面例子是外调转场文件，并把加载到的转场设置与albumPlayer的转场。
*
*	var __tranSwf:Class;
*	var tranSwf:Object;
*	var transUrl:String = "./transition/albumTransition.swf";
*	loadTransition();
*
*	function loadTransition():void {
*		var loadTrans:Loader = new Loader();
*		var transContext:LoaderContext = new LoaderContext();
*		transContext.checkPolicyFile=true;
*		transContext.applicationDomain=new ApplicationDomain(ApplicationDomain.currentDomain);
*		loadTrans.load(new URLRequest(transUrl),transContext);
*		loadTrans.contentLoaderInfo.addEventListener(Event.COMPLETE,transitionLoadedFun);
*	}
*	function transitionLoadedFun(e:Event):void {
*		__tranSwf=e.target.applicationDomain.getDefinition("AlbumTransition") as Class;
*		tranSwf = new __tranSwf();
*
*		albumPlayer.setTransition(albumData["transArr"],tranSwf);
*		trace("[Transition loaded successfully!]");
*	}
*
* @return void
**/

获取相册信息的只读属性

autoState:Boolean 相册自动播放状态
title:String 相册标题
total:int 相册总图片数
current:int 相册当前图片序号
page:int 相册当前缩略图分页数
totalPage:int 相册总缩略图分页数
text:String 相册当前图片的文字内容

侦听相册事件

 updateAlbum事件
//这个事件可以在切换图片时，实时更新相册当前图片数，缩略图分页数，图片文字
var albumPlayer:AlbumPlayer=new AlbumPlayer(albumData);
albumPlayer.addEventListener("updateAlbum",updateAlbum);
function updateAlbum(e:Event):void{
        cPanel_top.imgtxt.text = (albumPlayer.current+1)+"/"+(albumPlayer.total+1);
        cPanel_bottom.pagetxt.text = albumPlayer.page+"/"+albumPlayer.totalPage;
}

syncAutoState事件
//这个事件可以在自动播放状态切换时，实时更新自动播放按钮ui状态
var albumPlayer:AlbumPlayer=new AlbumPlayer(albumData);
albumPlayer.addEventListener("syncAutoState",syncAutoState);
function syncAutoState(e:Event):void{
        if(albumPlayer.autoState){
                autoPlayBtn.gotoAndStop(2);
        }else{
                autoPlayBtn.gotoAndStop(1);
        }
}

registThumbModule方法注册生成缩略图导航功能

registThumbModule(prePageBtn:Sprite=null,nextPageBtn:Sprite=null,dragBar:Sprite=null):void
/**
* registThumbModule方法用于添加缩略图导航模块。如果你有使用外调皮肤，就不能再使用这个方法，
* 可以在外调皮肤中修改翻页与拖动按钮的外观，然后设置albumPlayer.thumbEnabled=true，打开albumPlayer的缩略图模块即可。
* @param prePageBtn 用于缩略图导航翻页，上一页按钮
* @param nextPageBtn 用于缩略图导航翻页，下一页按钮
* @param dragBar 用于拖拽缩略图翻滚的拖动按钮，
如果不需要拖动功能请不用传入dragBar参数，并设置相册对象的属性thumbDragEnabled = false;
* @return void
**/

全屏ui控制方法

public function fullScreenShow(showMap:Array):void
/**
* 把只在全屏时显示的内容，面板或功能条放在showMap数组中，使用showMap作为参数执行fullScreenShow，
* 那么这些显示对象就会在全屏的时候显示出来，退出全屏状态时则消失。
* @param showMap
* @return void
**/

public function fullScreenPark(parkMap:Array):void
/**
* 把全屏与退出全屏时都显示，但全屏时停靠在屏幕的”top”,”right”,”bottom”,”left”四种位置上，
* 把相关设置做成对象，把每一个对象放在parkMap中，使用parkMap作为参数执行fullScreenPark。
* 每个对象的书写格式：parkMap = [{target:cPanel_top,align:"top",offset:0,pad:cPanel_top.height},
* {target:cPanel_bottom,align:"bottom",offset:0,pad:cPanel_bottom.height}]
* 其中offset可以设置为直接的数字也可以设置为”right”,”center”,”left”,”top”,”bottom”
* @param parkMap
* @return void
**/

public function fullScreenHide(hideMap:Array):void
/**
* 把只在进入全屏时消失的内容，面板或功能条放在hideMap数组中，使用hideMap作为参数执行fullScreenHide，
* 那么这些显示对象就会在进入全屏状态时消失，退出全屏的时候显示出来。
* @param hideMap
* @return void
**/

相册控制方法

next():void 下一张图片
pre():void 上一张图片
play()void 开始自动播放
stop():void 停止自动播放
first():void 第一张图片
last():void 最后一张图片
prePage():void 缩略图翻到前一页
nextPage():void 缩略图翻到后一页
firstPage():void 缩略图翻到第一页
lastPage():void 缩略图翻到最后一页
goto(n:int):void 指定到第几张(注：此方法不可在相册第一张图片加载显示出来之前执行)
mute(state:Boolean):void 静音
setVolume(n:Number):void 设置音量
fullScreen():void 全屏
openEffect(state:Boolean):void 打开动画与相框效果

设置模块位置的属性：
各模块是指区域参看为catAlbum设置皮肤

设置图片区域位置
imageX:Number
imageY:Number
设置播放框区域位置
playerX:Number
playerY:Number
设置控制面板区域位置
cPanelX:Number
cPanelY:Number
设置缩略图导航区域位置
thumbX:Number
thumbY:Number
设置播放框环绕功能条区域位置
aroundBarX:Number
aroundBarY:Number
设置相册图片的文字内容区域位置
albumTextX:Number
albumTextY:Number
设置相册标题区域位置
titleX:Number
titleY:Number

设置是否自动播放，自动播放间隔

autoPlay:Boolean 设置是否自动播放
autoTime:Number 设置自动播放间隔

设置切换图片时是否中断自动播放，切换图片是否放大进入

gotoStop:Boolean 设置切换图片时是否中断自动播放
scaleIn:Boolean 设置切换图片是否放大进入

附：与缩略图导航相关的属性

设置整个缩略图区域位置
thumbX:Number
thumbY:Number

设置每张缩略区的内外边距与边线的borderSize
thumbMargin:Number 内边距
thumbPad:Number 外边距
thumbBorder:Number 边线粗细

设置每张缩略图的高宽
thumbWidth:Number
thumbHeight:Number

每张缩略图背景区域的色与透明度
thumbBgColor:uint
thumbBgAlpha:Number

每张缩略图图片区域的背景色与透明度（这个图片背景不包括缩略图内边距与边线区域）
thumbImgBgColor:uint
thumbImgBgAlpha:Number

当前图片边的边线色与透明度
thumbCurrentColor:uint
thumbCurrentAlpha:Number

thumbDirection:String 缩略图是水平走向还是垂直走向可设置为”x”或”y”
pageNum:int 每页缩略图的总缩略图数
thumbDragEnabled:Boolean 是否开启缩略图拖拽翻动功能

• 2010年05月12日 -- 开源相册cat-album1.14【albumlite】 (1)
• 2010年04月19日 -- 为cat-album制作与设置转场 (4)
• 2010年04月8日 -- 如何给cat-album制作与设置皮肤 (2)
• 2010年04月8日 -- 如何给cat-album准备数据【album的数据模型】 (2)

这一届的场地感觉比上次更大了，而且包下两层楼，二楼方便大家吃点心水果或休息，三楼就是演讲大厅。主办方真是挺用心，我们都应该谢谢谈熠，Y.boy，还有妖子以及他们的团队。

我昨天晚上困了没有立即写文章，沉积了一下今天借着记忆写一下昨天的见闻，相信这样写出来的都是给我印象深刻的点滴。

照片来了：

第一个演讲的是mochimedia来的代表。他的演讲全程都用英语，好在他的演讲简洁明了，大屏幕的的演讲稿也都清晰的表达出了他演讲的目的，相信读惯了英文技术文档的开发者理解起来应该没什么问题。没想到后来的提问阶段现场也很热烈，大部分都能使用英文跟这位嘉宾交流，看来天下开发者使用的都是共同的“语言”，时刻都处在国际环境中。

黄炎中给我们介绍了一种别样的方式来存取简单数据，以大量减少对象数量，挺有启发的。结果引起现场有开发者质疑减少了对象的数量却打乱了数据在缓存中的结构，增加了读取同一对象的不同属性时的cpu负担。现场争论相当激烈，其实不同的的数据存取结构利弊之争历来是有的。我觉得大家可以在自己的项目中灵活判断，是减少内存还是减少cpu负担，大家视自己的需要应变才是最好的。

有两位嘉宾分别向大家详细介绍了pv3d与常见的物理引擎，都蛮有意思的，其中孙总给我印象蛮深的，他是一个很可爱，很谦逊的人。一上来便说自己不是很懂，是个拿来主义。其实我们每一个人无不都是在拿来，并消化成自己的养分，我们哪一天成长了，高大了那也都是因为站在了巨人的肩膀上。

徐总嘛，一上来就放炸弹：他列出了几种常见的框架，问我们有多少人用过这些框架，问完后，丢一句话给我们“这些框架都是丑陋的！”，我个人平时因为喜欢拿常用的框架来学习设计模式，所以我只能认同徐总一半的话。老实说，我细读pureMVC的代码后，我觉得这个框架写得很美，何来丑陋一说呢？

自由与约束是对立统一的。像pureMVC这个框架总共没几个类，只是提供了一个外观类，还有几个代理，中介，命令类。你可以很自由的使用这个框架，可以在command类中访问proxy类或mediator类，也可以在另两种类中访问其它两种类。你也可以不用这个框架，只在自己的项目中使用外观，代理，中介者，观察者，命令模式。whatever！自由意味着灵活，却也意味着迷茫。为了达到解藕的目的，又得约束自己的代码。如果你想要三层解藕，就不要随便在不同层中去访问别的层，如果你想要view层中的不同模块解藕，就不要在某个模块的mediator中访问其它模块的mediator。

我的观点是，我们可以不使用框架，但是我们应该从优秀的框架中学到许多设计模式的精髓。不应该在不合适的项目与不适宜的情况下使用框架。

为等寂寞哥（寂寞火山）的演讲我一直在抬头看星星，无限期盼中。可是今天的演讲他排在最后，“压抑”到最后，火山终于喷发了！火山哥说“在他的职业生涯中，百分之70的时候在跟cpu战斗”，然后话刚说完，他又跟他的笔记本电脑战斗上了。火山要给我们做cpu性能测试，他的老爷电脑看得大家胆战心惊。火山的演讲生动有趣，火山本人也很有范，很风趣。他用简单例子细致的解说，把鼠标事件中绘制与重绘的深层道理说得很明了。

——“寂寞火山，有你我们不再寂寞！”。

活动中我一直跟小s吧主坐在一起，今天才知道原来我们两是湖南，衡阳的老乡。活动结束后，我拉着火山与小s合了个影，晚上传上来！

• 2010年07月31日 -- 在麻球做着快乐而有趣的工作【关注大脸猫的新浪围脖】 (0)
• 2010年07月9日 -- 麻球网【MochiMedia】世界最大的在线游戏网络 (0)
• 2010年02月26日 -- 我的FLASH情结2010——浅谈FLASH WEB GAME与创业【转:寂寞火山】 (2)

查看文档可以看到，从InteractiveObject这个抽象基类开始有这个属性。

所以DisplayObjectContainer, SimpleButton, TextField 这些显示对象都可以你都可以设置它们的 contextMenu属性，来隐藏你不需要的默认菜单项，和添加自定义的菜单项。

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();
DisplayObjectContainer.contextMenu = my_menu;

这是最简单隐藏所有默认菜单项的方法（“设置” 与 “关于”两项除外 ）。

如果你不想一次隐藏所有项，也可以一项项设置哪些项隐藏。

var my_menu:ContextMenu = new ContextMenu();
my_menu.builtInItems.forwardAndBack = false;
my_menu.builtInItems.loop = false;
my_menu.builtInItems.play = false;
my_menu.builtInItems.print = false;
my_menu.builtInItems.quality = false;
my_menu.builtInItems.rewind = false;
my_menu.builtInItems.save = false;
my_menu.builtInItems.zoom = false;
DisplayObjectContainer.contextMenu = my_menu;

那么可不可以完全隐藏所有菜单项呢？目前我还没有找到这样的方法，只看到这样一段话：

If you test your movie now you should see that your default zoom and playback settings are gone from your context menu. You should note that certain items such as Settings and About cannot be removed from the context menu. Some additional commands for debugging cannot also be removed either while testing in the Flash authoring tool.

添加自己的菜单项，就用下面的方法：

var my_menu:ContextMenu = new ContextMenu();
my_menu.hideBuiltInItems();

var my_blog:ContextMenuItem= new ContextMenuItem("猫脸爬格子");
var my_email:ContextMenuItem = new ContextMenuItem("rman@live.cn");
var my_copyright:ContextMenuItem = new ContextMenuItem("Copyright - 2009");
my_menu.customItems.push(my_blog,my_email,my_copyright);

DisplayObjectContainer.contextMenu = my_menu;

每一个ContextMenuItem对象除了菜单文字外，还有两个属性比较有用。

enabled : Boolean 指示指定的菜单项处于启用状态还是禁用状态（能否点击）。

separatorBefore : Boolean 指示指定的菜单项上方是否显示分隔条。

my_copyright.enabled = false;
my_copyright.separatorBefore = true;

为ContextMenuItem对象添加menuItemSelect 事件：ContextMenuEvent.MENU_ITEM_SELECT

var url:String;
my_blog.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);
my_email.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, openLink);
function openLink(e:ContextMenuEvent):void{
    switch(e.currentTarget.caption){
        case 猫脸爬格子:
        url = "www.xncat.com";
        break;
        case rman@live.cn:
        url = "www.xncat.com/email";
        break;
    }
    navigateToURL(new URLRequest(url));
}

有网友写了个ContextMenuPlus类，可以很方便的处理以上各菜单定制功能。

• 2010年01月24日 -- 中国flash开发者交流会上演讲完成了 (6)
• 2010年01月3日 -- Flash开发者交流会[上海浦东•1月24•WebGame]-Flash和网络游戏开发 (0)
• 2010年01月29日 -- cat风格的loading文件技术分析 (2)
• 2009年11月24日 -- 折耳猫就是这个样子 (0)
• 2010年01月9日 -- flash四格广告[土豆背景广告] (0)
• 2010年06月23日 -- LoaderMax-【greensock又出重量级产品】 (3)

如果要把flash cs中的UI与动画添加到flex与eclipse项目中，常用的方法有两种：

1. 可以把UI与动画输出为swc文件，在项目中调用；

2. 在flex中，可以embed需要的UI元素或动画。

这两种方法调用起来简单，但是更新UI与动画的时候，就比较麻烦，需要重新输出UI与动画，再重新编译项目。

如果再遇到需要在线更换皮肤，就更行不通了。 外调皮肤可以解决上面的问题，外调皮肤也有两个简单的方案。

*加载到子域

var albumSkin:Object;
var __albumSkin:Class;
var url:String;

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

	albumSkin = new __albumSkin();

	dispatchEvent(new Event("skinLoaded"));
	trace("[Skin loaded successfully!]");
}

*执行加载进来的swf中的方法

var skin:Sprite;
var loader:Loader = new Loader();
loader.load(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
private function completeHandler(e:Event):void {
	skin = e.target["content"].getSkin();
}

也可以参看一下这篇文章，请得比较深一点：AS3应用程序模块化开发与ApplicationDomain

• 2010年04月8日 -- 如何给cat-album制作与设置皮肤 (2)

var picLoad:Loader = new Loader();
picLoad.load(new URLRequest(picUrl));
picLoad.contentLoaderInfo.addEventListener(Event.COMPLETE,newLoadedFun);
private function newLoadedFun(e:Event):void{
	var bt:Bitmap = new Bitmap(e.target.loader.content["bitmapData"]);
	bt.smoothing = true;
	picContent.addChild(bt);
}

在创建Bitmap时参数中设置：
new Bitmap(e.target.loader.content["bitmapData"],”auto”,true)

var picLoad:Loader = new Loader();
picLoad.load(new URLRequest(picUrl));
picLoad.contentLoaderInfo.addEventListener(Event.COMPLETE,newLoadedFun);
private function newLoadedFun(e:Event):void{
	picContent.addChild(new Bitmap(e.target.loader.content["bitmapData"],"auto",true));
}

• 2010年02月12日 -- 图片的旋转，移动与缩放类TransformPic【带控制切换按钮】 (2)

此类只需要把图片对象作为参数传入，就可以实现对图片的移动编辑操作，因为默认的编辑状态就是移动状态。

var t:TransformPic = new TransformPic(picmc);
addChild(t);

另外还可以分别依次传入参数：移动，旋转，缩放状态切换按钮。

var t:TransformPic = new TransformPic(picmc,movebt,scalebt,rotatebt);
addChild(t);

在开发这个类的时候，有两个难点：
1. 缩放的中心点，如何改变图片的注册点到我们指定的坐标点；
2. 旋转的中心点，修改注册点同上。

网上有很多方案，但都不是很完美，会引各种不便，而yahoo的as类库中有一个修改对象注册点的类：DynamicRegistration.as
这个类很简单，我们需要用到里面的两个方法：

//旋转需要传入要修改到的坐标点，与旋转的角度数
DynamicRegistration.rotate(picMc,p,ro);
//缩放需要传入要修改到的坐标点，与x轴的缩放比，与y轴的缩放比
DynamicRegistration.scale(picMc,p,1+sc*0.01,1+sc*0.01);

下面是完整的类与示例原文件下载：

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.geom.Point;
	import com.yahoo.astra.utils.DynamicRegistration;

	/**
	 * @author robin@tudou / email:xnliao@tudou.com
	 * @version creat:
	 */
	public class TransformPic extends Sprite {
		private var picMc:Sprite;
		private var moveBt:Sprite;
		private var scaleBt:Sprite;
		private var rotateBt:Sprite;

		private var transPlane:Sprite;
		private var transBtMc:Sprite;

		private var oldy:Number;
		private var nowx:Number;
		private var vy:Number=0;
		private var sc:int=0;
		private var ro:int=0;
		private var p:Point;

		public function TransformPic($picMc:Sprite,$moveBt:Sprite = null,$scaleBt:Sprite = null,$rotateBt:Sprite = null) {
			//用于编辑的图片，与此图片的中心点
			picMc=$picMc;
			p = new Point(picMc.width/2,picMc.height/2);

			//用于侦测鼠标操作编辑动作的按钮
			transPlane=makeArea(picMc.width,picMc.height,0.2);
			addChild(transPlane);
			transPlane.x = picMc.x;
			transPlane.y = picMc.y;

			//切换编辑状态的按钮
			transBtMc = new Sprite();
			addChild(transBtMc);
			if($moveBt){moveBt=$moveBt;transBtMc.addChild(moveBt);}
			if($scaleBt){scaleBt=$scaleBt;transBtMc.addChild(scaleBt);}
			if($rotateBt){rotateBt=$rotateBt;transBtMc.addChild(rotateBt);}

			addEvent();
			tomove(null);
		}

		private function addEvent():void {
			if(moveBt){this.moveBt.addEventListener(MouseEvent.CLICK, tomove);}
			if(scaleBt){this.scaleBt.addEventListener(MouseEvent.CLICK, toscale);}
			if(rotateBt){this.rotateBt.addEventListener(MouseEvent.CLICK, torotate);}
			transPlane.addEventListener(MouseEvent.MOUSE_OUT, transout);
		}
		private function transout(e:MouseEvent):void {
			picMc.stopDrag();
			transPlane.removeEventListener(MouseEvent.MOUSE_MOVE, scalehd);
			transPlane.removeEventListener(MouseEvent.MOUSE_MOVE, rotatehd);
		}
		private function tomove(e:MouseEvent):void {
			transformType("move");
		}
		private function toscale(e:MouseEvent):void {
			transformType("scale");
		}
		private function torotate(e:MouseEvent):void {
			transformType("rotate");
		}

		//move
		private function toDrag(e:Event):void {
			picMc.startDrag();
		}
		private function toStopDrag(e:Event):void {
			picMc.stopDrag();
		}

		//scale
		private function scaleon(e:MouseEvent):void {
			transPlane.addEventListener(MouseEvent.MOUSE_MOVE, scalehd);
			oldy=mouseY;
		}
		private function scaleoff(e:MouseEvent):void {
			transPlane.removeEventListener(MouseEvent.MOUSE_MOVE, scalehd);
		}
		private function scalehd(e:MouseEvent):void {
			e.updateAfterEvent();
			vy=transPlane.mouseY-oldy;
			oldy=transPlane.mouseY;

			if (vy>0) {
				if (sc < -90) {
					sc = -91;
				} else {
					sc--;
				}
			}
			if (vy<0) {
 				if (sc>200) {
					sc=201;
				} else {
					sc++;
				}
			}
			DynamicRegistration.scale(picMc,p,1+sc*0.01,1+sc*0.01);
		}

		//rotate
		private function rotateon(e:MouseEvent):void {
			transPlane.addEventListener(MouseEvent.MOUSE_MOVE, rotatehd);
			oldy=mouseY;
		}
		private function rotateoff(e:MouseEvent):void {
			transPlane.removeEventListener(MouseEvent.MOUSE_MOVE, rotatehd);
		}
		private function rotatehd(e:MouseEvent):void {
			e.updateAfterEvent();
			vy=transPlane.mouseY-oldy;
			oldy=transPlane.mouseY;
			nowx=transPlane.mouseX;

			if (nowx<transPlane.width/2){
                                 if (vy>0) {
					if (ro < -180) {
					ro = -181;
					} else {
					ro--;
					}
				}
				if (vy<0) {
 					if (ro>180) {
						ro=181;
					} else {
						ro++;
					}
				}
			} else {
				if (vy<0) {
					if (ro < -180) {
 					ro = -181;
 					} else {
 					ro--;
 					}
				}
 				if (vy>0) {
					if (ro>180) {
						ro=181;
					} else {
						ro++;
					}
				}
			}
			DynamicRegistration.rotate(picMc,p,ro);
		}

		/**************************************
		** makeArea
		** 一些辅助方法
		***************************************/
		public function makeArea(w:uint,h:uint,alpha:Number= 0.5):Sprite {

			var area:Sprite=new Sprite  ;
			area.alpha=alpha;
			area.graphics.beginFill(0x000000,1);
			area.graphics.drawRect(0,0,w,h);
			area.graphics.endFill();
			return area;

		}
		private function transformType(type:String):void{
			transPlane.removeEventListener(MouseEvent.MOUSE_DOWN, toDrag);
			transPlane.removeEventListener(MouseEvent.MOUSE_UP, toStopDrag);
			transPlane.removeEventListener(MouseEvent.MOUSE_DOWN, scaleon);
			transPlane.removeEventListener(MouseEvent.MOUSE_UP, scaleoff);
			transPlane.removeEventListener(MouseEvent.MOUSE_DOWN, rotateon);
			transPlane.removeEventListener(MouseEvent.MOUSE_UP, rotateoff);

			if(type == "move"){
				transPlane.addEventListener(MouseEvent.MOUSE_DOWN, toDrag);
				transPlane.addEventListener(MouseEvent.MOUSE_UP, toStopDrag);
			}else if(type == "scale"){
				transPlane.addEventListener(MouseEvent.MOUSE_DOWN, scaleon);
				transPlane.addEventListener(MouseEvent.MOUSE_UP, scaleoff);
			}else if(type == "rotate"){
				transPlane.addEventListener(MouseEvent.MOUSE_DOWN, rotateon);
				transPlane.addEventListener(MouseEvent.MOUSE_UP, rotateoff);
			}
		}

	}
}

示例原文件下载

• 2010年02月28日 -- 无锯齿缩放图片【缩放时对位图进行平滑处理】 (1)

1. 翻到这一页，才开始对这页中的缩略图进行加载；
2. 每翻到一页，先要对这页进行判断，如果是已经加载过的页，就不重复执行加载操作。

所以我做了四个数组：
loadedPage ：用来存入已经加载的页码
_thumArr ：里面存着所有缩略图的url
ldArr ：存入每一页的图片加载器
picnumArr ：存入每一页的图片序号

主要解决的几个问题：
要求出每个分页的图片数：

//这里求出每一个分页的最大图片数。如果图片总数小于设置的每页图片数，那k等于图片总数
//如果图片总数大于设置的每页图片数，只在最后一页k等于图片总数除每页图片数的余,其它页k等于每页图片数
var k:Number;
if(_thumArr.length>pageNum){
	if(n == Math.ceil(_thumArr.length/pageNum)-1){
		k = _thumArr.length%pageNum;
	}else{
		k= pageNum;
	}
}else{
	k =_thumArr.length;
}

要得出加载的这个分页中的各图片序号，才能知道这些图片的url：

//启动此页中的图片加载器，求出各图片的url地址进行加载
//图片序号：pageNum*n+i
//图片url：_thumArr[pageNum*n+i]
for(var i:uint=0; i<k; i++){
	var ld:ImageLoader = new ImageLoader();
	ld.load(_thumArr[pageNum*n+i],lcontex);
	ld.addEventListener(Event.COMPLETE,loadedFun);
	......
}

最后我loaderPage的详细方法，传入的参数为当前翻到的页码
。

private function loaderPage(n:Number):void{
	//如果这个分页页码不在已完成加载的页码数组中
	//就将对这页的所有图片内容进行加载，否则就不重复执行加载操作了。
	if(loadedPage.indexOf(n) == -1){

		//ldArr数组用来保存图片加载器，picnumArr用来保存图片序号
		//每次到新的分页都需要清空这两个数组
		ldArr = new Array();
		picnumArr = new Array();

		//这里求出每一个分页的最大图片数。如果图片总数小于设置的每页图片数，那k等于图片总数
		//如果图片总数大于设置的每页图片数，只在最后一页k等于图片总数除每页图片数的余,其它页k等于每页图片数
		var k:Number;
		if(_thumArr.length>pageNum){
			if(n == Math.ceil(_thumArr.length/pageNum)-1){
				k = _thumArr.length%pageNum;
			}else{
				k= pageNum;
			}
		}else{
			k =_thumArr.length;
		}

		//启动此页中的图片加载器，求出各图片的url地址进行加载
		//图片序号：pageNum*n+i
		//图片url：_thumArr[pageNum*n+i]
		for(var i:uint=0; i<k; i++){
			var ld:ImageLoader = new ImageLoader();
			ld.load(_thumArr[pageNum*n+i],lcontex);
			ld.addEventListener(Event.COMPLETE,loadedFun);

			ldArr.push(ld);
			picnumArr.push(pageNum*n+i);
		}
		//已经完成加载的页码，加入完成加载页码数组
		loadedPage.push(n);
	}
}

• 2010年02月2日 -- 水平与垂直滚屏类RollPage (2)
• 2010年05月5日 -- dragRoll拖动翻页类【rollPage的黄金搭档】 (1)
• 2010年04月25日 -- 滚屏翻页类新版本rollPage2 (3)

这个类很好用，它可以完成多个内容的分页，滚屏与翻页功能。垂直或水平翻滚都可以，而且会自动计算是否到达第一页或者最后一页。
看看这个例子，我经常用到这个类。

先来看看它有哪些参数：
RollPage($pageMc:Sprite,$vars:Object,$aix:String=”x”)
$pageMc:Sprite ：把所有内容都放在这个容器中，如多个图片或者各分页内容
$vars:Object ：这个对象会接收五个参数

$vars["totalNum"]：总内容个数，比如总共多少张图片
$vars["pageNum"]：设定每而或每屏显示多少个内容，比如每页显示几张图片
$vars["childPad"]：设置每个内容之间的间隔距离
$vars["childWidth"]：设置每个内容的高度
$vars["childHeight"]：设置每个内容的宽度

$aix:String ：设置为垂直还是水平翻滚

使用这个类的方法：

rollPage类使用注意：
//所有的图片都在vImageMc中，
//vImageMc在别的容器中，必须保证vImageMc的x,y坐标都为0

var pageRoll:RollPage=new RollPage(vImageMc,{totalNum:12,pageNum:5,childWidth:100,childHeight:75,childPad:15});

//左右按钮
left.buttonMode=right.buttonMode=true;
left.addEventListener(MouseEvent.CLICK, function (e:MouseEvent):void{pageRoll.toRoll(pageRoll.page-1);});
right.addEventListener(MouseEvent.CLICK, function (e:MouseEvent):void{pageRoll.toRoll(pageRoll.page+1);});

每页中的内容如何排列，可以看看《加载图片(读取xml,json数据)并进行阵列》

实例文件下载:rollPage.rar

完整的类文件：

package {
	import flash.display.Sprite;
	import com.gs.TweenLite;

	/**
	 * @author robin
	 */
	public class RollPage {
		private var pageMc:Sprite;
		private var vars:Object;
		private var aix:String;
		private var pageNum:uint=1;

		private var childNum:uint;
		private var pageChild:uint;
		private var spanLength:uint;
		private var childWidth:uint;
		private var childHeight:uint;
		private var childPad:uint;

		public function RollPage($pageMc:Sprite,$vars:Object,$aix:String="x") {
			pageMc=$pageMc;
			vars=$vars;
			aix=$aix;

			childNum=$vars["totalNum"];
			pageChild=$vars["pageNum"];
			childPad=$vars["childPad"];

			childWidth=$vars["childWidth"];
			childHeight=$vars["childHeight"];

			var mask:Sprite;
			if ($aix=="x") {
				spanLength = (childWidth+childPad)*pageChild;
				mask=makeArea(spanLength,childHeight);
			} else if ($aix == "y") {
				spanLength = (childHeight+childPad)*pageChild;
				mask=makeArea(childWidth,spanLength);
			}

			var pageParent:Sprite=pageMc.parent as Sprite;

			pageParent.addChild(mask);
			mask.x=pageMc.x;
			mask.y=pageMc.y;
			pageMc.mask=mask;
		}

		public function toRoll($pageNum:uint):void {

			if ($pageNum<=0) { 				trace("firepage"); 			} else if ($pageNum > Math.ceil(childNum/pageChild)) {
				trace("endpage");
			} else {
				if (aix=="x") {
					TweenLite.to(pageMc,.5,{x:-($pageNum-1)*spanLength});
				} else if (aix == "y") {
					TweenLite.to(pageMc,.5,{y:-($pageNum-1)*spanLength});
				}
				pageNum=$pageNum;
			}

		}

		public function set page(num:uint):void {
			this.pageNum=num;
		}
		public function get page():uint {
			return this.pageNum;
		}
		private function makeArea(w:uint,h:uint,alpha:Number= 0.5):Sprite {
			var area:Sprite=new Sprite  ;
			area.alpha=alpha;
			area.graphics.beginFill(0x000000,1);
			area.graphics.drawRect(0,0,w,h);
			area.graphics.endFill();
			return area;
		}
	}
}

• 2010年05月5日 -- dragRoll拖动翻页类【rollPage的黄金搭档】 (1)
• 2010年02月7日 -- 制作滚屏与翻页时分页加载的方法 (0)
• 2010年06月22日 -- 看看dragRoll与rollPage是如何搭档【ThumbRoll类】 (0)
• 2010年04月25日 -- 滚屏翻页类新版本rollPage2 (3)

• 2009年12月3日 -- 叫兽：魔术记 (0)
• 2010年08月29日 -- flash开发中提高性能方法的整理 (1)
• 2010年04月27日 -- 出炉一个联动广告【nike土豆大看板广告】 (2)
• 2010年04月20日 -- Flash字体嵌入方法总结—(2)ActionScript基础篇【转载kevincao】 (0)
• 2010年02月9日 -- 包强虎年贺岁–快板书贺新年 (1)
• 2010年09月8日 -- as3term——ActionScript 3的最终版本发布【转】 (1)

这个loading会根据自己src中的参数获得需要加载进来的flash地址

src="/wp-content/uploads/catflyLD2.swf?swf=/wp-content/uploads/2010/01/LinkVideo2.swf"

下划线的部分就是被加载的flash的地址。在as中通过如下方法来获取src中的变量值：

var paramObj:Object=LoaderInfo(root.loaderInfo).parameters;

//----
if (paramObj["swf"]) {
	initSwf();
} else {
	alertErr();
}

//----
function initSwf():void {
	var swfUrl:String=paramObj["swf"];
	//var swfUrl:String="football.swf";
	loader.load(new URLRequest(swfUrl));
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
	loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
	loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
}

根据要加载的flash的尺寸自动更改loading动画的比例并居中显示
首先说明，我所有的loading中的背景与动画效果包括文本都在一个叫“loadMc”的影片剪辑中。

//为了保证正常变形，先指定舞台对齐方式与缩放模式
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;

//应用山寨版changesize方法（下面的方法很原始，学过数学的人都看得明白）
changesize(loadMc,loadMc.width,loadMc.height);
function changesize(mc:Sprite, w:uint, h:uint):void {
	if (w/h>stage.stageWidth/stage.stageHeight) {
		mc.width=stage.stageWidth;
		mc.height = stage.stageWidth/(w/h);
	} else if (w/h <= stage.stageWidth/stage.stageHeight) {
		mc.width=w/h*stage.stageHeight;
		mc.height=stage.stageHeight;
	} else if (w/h == stage.stageWidth/stage.stageHeight) {
		mc.width=stage.stageWidth;
		mc.height=stage.stageHeight;
	}
	mc.x = (stage.stageWidth-mc.width)/2;
	mc.y = (stage.stageHeight-mc.height)/2;
}

//也可以应用非山寨版changesize方法
function changesize(mc:Sprite, w:uint, h:uint):void {
	var bigPicWidth:Number = stage.stageWidth;
	var bigPicHeight:Number = stage.stageHeight;
	if (w/h>bigPicWidth/bigPicHeight) {
		mc.scaleX=mc.scaleY=bigPicWidth/mc.width;
	} else if (w/h < bigPicWidth/bigPicHeight) {
		mc.scaleX=mc.scaleY=bigPicHeight/mc.height;
	} else if (w/h == bigPicWidth/bigPicHeight) {
		mc.width=bigPicWidth;
		mc.height=bigPicHeight;
	}
	mc.x = (stage.stageWidth-mc.width)/2;
	mc.y = (stage.stageHeight-mc.height)/2;
}

一般来说，上面功能满足大部分需要loading的体验了。
至于，根据被加载flash中要求的必须条件获取被加载swf中的警告文字显示在loading中，并由警告附带的属性决定是否画面停留在loading状态，不显示被加载的swf，直到客户端满足必要条件。

这个需要在被加载的flash中实现相关接口，也需要从loading中去访问被加载的flash中的方法与属于，我打算另写一个文章来好好介绍一下如何实现这种能抛出警告，并控制loading完是停留还是跳过loading的加载方式。

• 2010年01月28日 -- flash文件都配上了cat风格的loading啦！ (2)
• 2010年01月29日 -- 一个喜气的动画，虎虎生威 (0)
• 2009年12月9日 -- flash加载，合并与分散的原则与技巧 (1)

• 2010年01月29日 -- cat风格的loading文件技术分析 (2)
• 2010年01月28日 -- flash文件都配上了cat风格的loading啦！ (2)
• 2009年12月9日 -- flash加载，合并与分散的原则与技巧 (1)

1. 这个loading会根据自己src中的参数获得需要加载进来的flash地址；
2. 它还会根据要加载的flash的尺寸自动更改loading动画的比例并居中显示；
3. 而且它还会根据被加载flash中要求的必须条件获取被加载swf中的警告文字显示在loading中，并由警告附带的属性决定是否画面停留在loading状态，不显示被加载的swf，直到客户端满足必要条件，如：摄像头。

从src中获取被加载swf

loading动画自适应被加载swf尺寸

输出被加载swf中提示的警告，或根据警告属性不显示被加载swf

只是个小东西，希望带来更好的用户体验！

• 2010年01月29日 -- cat风格的loading文件技术分析 (2)
• 2010年01月29日 -- 一个喜气的动画，虎虎生威 (0)
• 2009年12月9日 -- flash加载，合并与分散的原则与技巧 (1)