.
用 an 2023 做个影片剪辑动画
.

.
库中的影片剪辑 元件
.

.
点击 影片剪辑 鼠标右键菜单
生成纹理贴图集（一个图放不完素材会自动生成多个图直到放完素材）
不像上面的 导出 Sprite 表 只能导出一个图（适合少量动画）
.

.
如图，单个素材的大小为 285 x 400
下面的图像尺寸 512 x 512 不足以放置多个素材
所以会导出多个图
.

.
图像尺寸 2048 x 2048 足以放置全部素材
说以只会导出一个图 因为一个图够用了
不够用才会生成多个图
.

.
导出会生成一个 ro 文件夹，里面是图集和数据文件
可以拿这些图集和数据文件做精灵动画
.

.
创建一个加载器来加载资源文件
.

.
let queue = new createjs.LoadQueue();
queue.on("complete", handleComplete);
.
queue.loadManifest([
{ src: "./ro/Animation.json", id: "j1" },
{ src: "./ro/spritemap1.json", id: "j2" },
{ src: "./ro/spritemap1.png", id: "png" }
]);
.
加载完成事件，获取每一帧的 x y w h f rx ry
并用这些数据创建 精灵表 实现 精灵动画
.

.
function handleComplete() {
let json1 = queue.getResult("j1");
let json2 = queue.getResult("j2");
.
let frame = []
.
for (let b = 0; b < json2.ATLAS.SPRITES.length; b++) {
frame.push([
json2.ATLAS.SPRITES[b].SPRITE.x,
json2.ATLAS.SPRITES[b].SPRITE.y,
json2.ATLAS.SPRITES[b].SPRITE.w,
json2.ATLAS.SPRITES[b].SPRITE.h,
0,
-json1.AN.TL.L[0].FR[b].E[0].ASI.M3D[12],
-json1.AN.TL.L[0].FR[b].E[0].ASI.M3D[13]
])
}
.
let spriteSheet = new createjs.SpriteSheet({
images: [queue.getResult("png")],
frames: frame,
animations: {
//动画...
}
});
.
let animation = new createjs.Sprite(spriteSheet)
animation.x = 200
animation.y = 200
stage.addChild(animation)
.
animation.on("tick", () => {
animation.rotation++
})
}
.

.
生成 纹理贴图集（可以导出多张图，直到素材完全导出）
生成 Sprite 表（只能导出一张图，适合少量动画）
另外 an h5 项目也可以导出多张图 直到素材完全导出
另外 推荐 Zoe（可以将 SWF 动画转成 精灵表）
.