HTML5:create.js与Animate cc交互介绍

一、关于HTML5制作游戏或动画的方法

1.用“css3”属性做动画(不是HTML5)

css3中的属性(旋转、缩放、倾斜、位移)也是可以做动画的,但是这只适合做一些内容比较少的,比如:鼠标经过翻转、出现线条、放大等等,但是如果碰到一个动画视频你怎么做呢!你要播放一个长达5分钟的视频,在这个视频上面加交互代码,你怎么办呢?

2.Flash2x

在很久以前是用原生的制作方法“Flash2x”,这种制作方法是最好的一种,没有之一,也是目前开发中性能 最好的。如果想知道更多关于“Flash2x”可以狠狠点击这里!

优点:制作性能高。

缺点:效率低。

3.Animate cc

Animate cc中,“A3.0”是老版的,目前最新的是"H5 canvas",这种H5 canvas制作方法,是我目前正在使用的,主要是先将动画做出来(如果你的部门没有动画制作的话,那么你得自己去学习下咯),然后通过软件渲染出来,会自动给你编译出HTML和css以及js。我们的工作就是针对js这块的编程。

优点:制作效率高。

缺点:性能不是很好。

4.还有其他制造方法,暂时不做讨论。

二、强大的“create.js”脚本

a.“create.js”介绍

无论是原生的“Flash2x”还是“Animate cc”制作方法,他们都是基于一个脚本的“create.js”,这个脚本有包含4个类库,http://www.createjs.cc/官网,可参考。

b.“create.js”的4个类库

EaselJS:    主要是处理HTML5画布

TweenJS:  调整动画,编辑HTML5和Javascript属性、提供了tweening接口。

SoundJS:  处理音频。

PreloadJS:管理和协调相关资源的加载,预先加载相关资源,例如:图片、文件、音频、数据等等。

三、如何实现create.js与Animate cc交互?

1.在实现交互之前,你必须要懂一些代码

a.舞台(S = this)、某个元件(S.元件名称)、当前帧(numframe)、等等。

2.关于实现这一块,是重点,会编制成一章一章,持续补充,请看教程2,后面有详细介绍!

a.实现点击、拖拽、选择题、更好鼠标图标等等

四、An cc,发布慢每改一次都要发布一次,这怎么解决?

1.暂时没办法,如果有解决的小伙伴可以Q我哦!

2.这边针对这种问题,我目前是,这样子的。

a.你可以下载一个编辑器

b.在软件中要插入帧的地方,写上相应的代码

c.将源文件在编辑器中打开,找到相应的js

d.用“查找”搜索到相应的帧,在相应的帧处进行修改,

e.最后页面上刷新,就可以不用发布了!

f.但是你如果要对新的帧数上,增加新的代码,你就得去软件上发布了。


阅读更多

没有更多推荐了,返回首页