【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5，入门教程

目的：动画设计师用Adobe Animate CC做好动画素材，发布好之后，交给程序员写交互代码；在WebStorm之类的ide里操纵 Animate 里面的变量，class等。

 

前提环境：

①安装好Adobe Animate CC

②安装好WebStorm，或者Sublime Text 2，Visual Studio Code之类的编程ide

③有个HTML5 动画（canvas 项目）

视频教程：

链接：https://pan.baidu.com/s/13nqBcH9HAa3RSFOiH-QzYg 
提取码：45wl 

 

图文教程：

流程：

1、把动画文件从 Adobe Animate里发布出来，后有一堆文件

 

2、然后把发布后的文件拷贝到你在WebStorm新建的web项目文件夹里，就可以了，没有像以前flash cs和flash builder搭配的复杂，不需要在Adobe Animate里填写类路径。

 

主要有以下点要点：

一、如何让库中的MC动画，在html中加载，显示出来

1、新建一个view类，然后在这个类里面建一个变量 back = animate 库中的 page，然后把 back加载到view类里，代码如下图

 

2、把view类加载到舞台上，代码如下图

 

二、如何在js中控制，新建，获取MC里的变量等等

1、如下图

 

三、animate里发出事件，WebStorm里如何接收

1、首先是 animate 里发出事件，如图

2、然后是 WebStorm 里接收 事件并处理，如图

 

四、自适应

1、animate cc 提供了自适应和舞台居中的功能，具体设置如下图红框：

当然自适应，居中，缩放填充的功能，根据你自己项目需求选择。

 

五、预加载设置

动画较大，初始打开的时候会白屏很久，这时候选择预加载器，可以有个加载loading，当做过渡，具体如下图红框：

 

 

 

六、本例DEMO的完整代码

下载链接：链接：http://pan.baidu.com/s/1boXnAlL 密码：2cbj

 

PS：目前用 adobe animate发布的文件中，mcTest.html这个文件暂时就没有作用了，现在用我新建的index.html 这个文件来代替，

等我以后再摸索看看，是否可以直接用mcTest.html。