README.md

MovieClip (MC) 又称之为 "影片剪辑"，是Egret中提供的一种动画解决方案。实际上 MC 所实现的功能就是播放序列帧动画。

实现一个动画效果时，可以把原有的动画制作成为能够被 Egret 识别的动画格式。然后将这些制作好的资源进行加载，最后播放。

1.制作 MovieClip 动画资源

Egret 提供三种方式制作 Egret 动画资源文件：

• 使用 TextureMerger 将 swf 或者 gif 文件转换成 Egret 动画资源文件。具体使用方法请查看：TextureMerger 使用说明

• 使用 DragonBones Pro 制作帧动画。

• Egret 为Flash提供了一个插件，这个插件可以将Flash中的动画导出为能够被Egret播放的动画文件。插件安装和使用方法请查看： MovieClip Plug-in

2.资源约定

MovieClip 需要一对 json 配置文件和一个纹理集图片。比如 abc.json 和 abc.png 。

• 配置文件约定了各个字段标识的用途，
• 纹理集图片为 MovieClip 所使用的图片集。

2.1.配置解析

{
	"mc": {
		"run": {
			"frameRate": 24,
			"events": [
				{
					"name": "@fall",
					"frame": 6
				}
			],
			"labels": [
                {
                    "end": 8,
                    "name": "start",
                    "frame": 2
                }
            ],
			"frames": [
				{
					"res": "19236B52",
					"x": 6,
					"y": 13,
					"duration": 3
				}
			]
		}
	},
	"file": "abc.png",
	"res": {
		"19236B52": {
			"x": 111,
			"y": 1,
			"w": 108,
			"h": 131
		}
	}
}

• mc：MovieClip 所拥有的动作，比如这里的 run。
  • run：一个动作名称，可以有多个。
    • frameRate：播放的帧率。
    • events：在某一帧下触发的事件。
    • labels：标签，标记当前标签所持续的帧的情况。
    • frames：当前动作的所有帧数据。
• file：图集名称。
• res：纹理集数据。

2.2.资源配置

在Egret的资源配置文件（默认为 default.res.json）中，应该有如下配置：

"resources":
    [
         {"name":"abc.json","type":"json","url":"assets/abc.json"}
        ,{"name":"abc.png","type":"image","url":"assets/abc.png"}
        ......
    ]

3.使用

3.1.创建

egret 的 MovieClip 采用工厂模式，MovieClip 工厂类为： MovieClipDataFactory。

一个 MovieClip 工厂类对应一个MC资源合集。比如资源文件为 abc.json 和 abc.png。那么我们就可以在程序中把其解析到一个 MovieClip 工厂类：

var data = RES.getRes("abc.json");
var txtr = RES.getRes("abc.png");
var mcFactory:egret.MovieClipDataFactory = new egret.MovieClipDataFactory( data, txtr );

3.2.获取动作

比如上面的的 run，则在程序中解析该 MovieClip 的方法为：

var mc1:egret.MovieClip = new egret.MovieClip( mcFactory.generateMovieClipData( "run" ) );

3.3.播放

• 帧标签播放

  如果在 MovieClip run 中有名为 "start" 的帧标签，从这里播放 3 次，代码即为：

this.addChild( mc1 );
mc1.gotoAndPlay( "start" ,3);

• 帧数播放 比如要从第3帧播放，代码为：

mc1.gotoAndPlay( 3 );

注意：为了避免可能的内存泄漏问题，MovieClip只有被加到显示列表上之后才能被正确的播放!

4.事件

4.1帧标签事件

比如在第动画的第 6 帧有一个 "fall" 帧事件标签，可以为动画增加监听获取这个消息

mc1.addEventListener(egret.MovieClipEvent.FRAME_LABEL,（e:egret.MovieClipEvent）=>{
	console.log(e.type,e.frameLabel, mc1.currentFrame);//frame_label @fall 6
},this);

4.2.完成事件

比如要播放 3 次动画，每当动画循环播放完成一次，会调用一次 egret.Event.LOOP_COMPLETE 事件。3 次动画播放完后，会调用 egret.Event.COMPLETE 事件。

this.mc1.addEventListener(egret.Event.LOOP_COMPLETE, (e:egret.Event)=>{
	console.log(e.type);//输出3次
}, this);
this.mc1.addEventListener(egret.Event.COMPLETE, (e:egret.Event)=>{
	console.log(e.type);//1次
}, this);