目的:动画设计师用Adobe Animate CC做好动画素材,发布好之后,交给程序员写交互代码;在WebStorm之类的ide里操纵 Animate 里面的变量,class等。
前提环境:
①安装好Adobe Animate CC
②安装好WebStorm,或者Sublime Text 2,Visual Studio Code之类的编程ide
③有个HTML5 动画(canvas 项目)
流程:
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。