Adobe Animate Createjs H5
Adobe Animate CC 是 Adobe Flash 的继任者,提供了更现代的动画和互动功能。它允许用户创建动画,并导出到 HTML5 Canvas、WebGL 或 SVG 格式。CreateJS 是一个强大的 JavaScript 库,可以与 Adobe Animate CC 一起使用,帮助开发人员在 Web 上实现动画和互动功能。对于没有 Flash 基础的前端人员来说,理解这些工具的协作是很重要的。以下是一些基本概念和步骤,帮助你了解 CreateJS 与 Adobe Animate CC 的协作开发方式。
1. 理解 Adobe Animate CC
Adobe Animate CC 提供了一个图形界面来创建动画,并支持多种输出格式。其关键特点包括:
- 时间轴动画:创建逐帧动画或补间动画。
- 矢量图形:支持矢量图形和位图图形的动画。
- 互动元素:能够在动画中添加按钮、事件等互动元素。
2. 了解 CreateJS
CreateJS 是一个包含多个模块的 JavaScript 库,用于创建 HTML5 Canvas 动画。主要模块包括:
- EaselJS:用于绘制和操作 Canvas 图形。
- TweenJS:用于动画过渡。
- SoundJS:用于处理声音。
- PreloadJS:用于预加载资源。
3. 协作开发流程
创建动画
-
使用 Adobe Animate CC 设计和制作动画
- 设计图形、设置时间轴、添加补间动画等。
- 在 Animate CC 中,你可以使用“HTML5 Canvas”作为导出目标。
-
导出 HTML5 Canvas
- 在 Adobe Animate CC 中,选择“文件” > “导出” > “导出动画”,并选择 HTML5 Canvas 格式。此时,Animate CC 将生成包含动画的 HTML 文件以及相关的 JavaScript 文件。
-
理解导出的代码
- Animate CC 会生成一个包含
createjs
库的 JavaScript 文件,通常是createjs.min.js
和与动画相关的 JS 文件。 - 这些 JS 文件负责在 Canvas 上绘制和控制动画。
- Animate CC 会生成一个包含
-
加载 CreateJS 库
- 在你的 HTML 文件中,引入 CreateJS 库和 Animate CC 导出的 JavaScript 文件。例如:
htmlCopy Code
<script src="path/to/createjs.min.js"></script> <script src="path/to/your-animate-script.js"></script>
- 在你的 HTML 文件中,引入 CreateJS 库和 Animate CC 导出的 JavaScript 文件。例如:
舞台
打开AN,设置舞台的大小为 7501206,为什么不是7501334呢?因为微信浏览器的标题栏大小是128,所以1334-128=1206。
<!-- 修改viewport全局缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
/**
* 自适应函数
*/
function resize(){
if(stageWidth != document.documentElement.clientWidth || stageHeight != document.documentElement.clientHeight){
stageWidth= document.documentElement.clientWidth;
stageHeight= document.documentElement.clientHeight;
// 外部元素自适应
canvas.width= stageWidth ;
canvas.height= stageHeight;
// 内部元素自适应
stageScale = stageHeight / 1206; // 高度自适应
//stageScale = stageWidth / 750; // 宽度自适应(两者选一)
container.scaleX= stageScale;
container.scaleY= stageScale;
// 保证图片居中 (高度自适应时需要)
container.x= (stageWidth - 750*container.scaleX) / 2;
// 按钮元素页面位置固定
if(soundBtn){
soundBtn.x= stageWidth - 50;
soundBtn.y= 50;
}
}
}
/**
* 自适应函数使用方法
*/
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", function(){
resize(); // 调用自适应函数
stage.update(); // 刷新舞台
});
/**
* createjs.extend: 继承createjs.Container
* createjs.promote: 使this.Map_constructor可以调用父类的构造函数
* this.Xxx_constructor: Xxx部分要和promote中传入的参数一致
* 使用p来定义方法可以方便在构造之前重写,AN调出来的类不能继承,也不能重写
*/
var View = {};
;(function(){
function LoadingView(){
this.Map_constructor();
this.content = new lib.view1();
this.addChild(this.content);
}
var p = createjs.extend(LoadingView, createjs.Container);
p.dongzuo = function(){ /* 写方法 */ }
View.LoadingView = createjs.promote(LoadingView, "Map"); //这里的 "Map" 影响上面的 Xxx_constructor()
}());
var ss= new View.LoadingView();
ss.dongzuo();
使用面向对象的方式去调用cjs的方法:ss.content.gotoAndStop(1)
使用最简类链接的方式调用cjs的方法:ss.gotoAndStop(1)
Uncaught TypeError: Cannot read property 'getNumFrames' of undefined
这个错误是因为图片文件没有加载成功。
快速使用类链接: var loadingView= new lib.view1();
,实例化后的MC并没有没有插入舞台
mc 拖入舞台,可以使用实例名称,未拖入舞台,使用类链接
mc 实例名称: 在mc属性栏
new lib.view1().content.loadingBar.gotoAndStop(Math.floor(event.progress*99))
类链接的mc通过代码加入场景
var stage= new createjs.Stage(this.opts.canvas);
var nextPageBtn = new lib.nextPageBtn();
nextPageBtn.x= this.opts.stageWidth/2-30; // 插入舞台的X轴位置
nextPageBtn.y= this.opts.stageHeight-100; // 插入舞台的Y轴位置
stage.addChild(nextPageBtn);
createjs与AN之间的通信方式
在AN的帧上加入动作脚本dispatchEvent
data.type= "mc"
this.dispatchEvent("play")
在JS中
var data={};
var loadingView= new lib.view1(); //类链接
loadingView.addEventListener("play",function(){
alert(data.type);
});
/**
* 帧动作脚本中
*/
if(model) model.dispatchEvent("play");
/**
* JS中
*/
model = new createjs.EventDispatcher();
model.addEventListener("play",function(){
alert(data.type);
});