空投在我怀里的博客

对技术的一些总结、分享等

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.但是你如果要对新的帧数上,增加新的代码,你就得去软件上发布了。


阅读更多
个人分类: HTML5与Animate cc交互
上一篇web前端新手入门:中国互联网的发展史
下一篇HTML5:Animate cc交互功能之跳转下一帧
想对作者说点什么? 我来说一句

Adobe Edge Animate 上下左右滑动

2015年04月09日 74KB 下载

Edge Animate CC manual

2014年09月02日 12.63MB 下载

Adobe Edge Animate CC Help PDF 英文版

2014年09月26日 6.57MB 下载

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

关闭
关闭