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. 协作开发流程

创建动画

1. 使用 Adobe Animate CC 设计和制作动画

   • 设计图形、设置时间轴、添加补间动画等。
   • 在 Animate CC 中，你可以使用“HTML5 Canvas”作为导出目标。

2. 导出 HTML5 Canvas

   • 在 Adobe Animate CC 中，选择“文件” > “导出” > “导出动画”，并选择 HTML5 Canvas 格式。此时，Animate CC 将生成包含动画的 HTML 文件以及相关的 JavaScript 文件。

3. 理解导出的代码

   • Animate CC 会生成一个包含 createjs 库的 JavaScript 文件，通常是 createjs.min.js 和与动画相关的 JS 文件。
   • 这些 JS 文件负责在 Canvas 上绘制和控制动画。

4. 加载 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>

舞台

打开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);
});