【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 项目)

流程:

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

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

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

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

主要有以下点要点:

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

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

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

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

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

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

1、如下图

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

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

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

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

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

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

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

四、自适应

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

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

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

五、预加载设置

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

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

六、本例DEMO的完整代码

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

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

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

上一篇:android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)


下一篇:Swift 二维码扫描 简单实现