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

原创 2018年04月15日 14:20:25

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


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

前提环境: ①安装好Adobe Animate CC ②安装好WebStorm,或者Sublime Text 2,Visual Studio Code之类的编程ide 流程:...
  • arvin0
  • arvin0
  • 2016-07-26 11:03:51
  • 16901

教你一招让你高效搞定高品质的H5交互动画

一般在H5开发流程中,都是交互动画设计师利用Animate cc(即原来的Flash)把动画的原型设计出来,然后交付给UI部门进行开发实现效果。而做过动画开发的UI都知道搞动画开发是较为耗时费力的,而...
  • yylurex
  • yylurex
  • 2017-05-08 15:58:12
  • 3215

Adobe Animate CC 在图形中添加交互性代码

最近在研究HTML Canvas,涉及到Adobe Animate CC的使用,看了一下官方文档,很繁琐,下面简单的总结了一下在图形中添加交互性代码的方法。AnimateCC在图形中添加交互性代码的方...
  • qq_36173194
  • qq_36173194
  • 2018-03-03 15:51:24
  • 158

html5动画制作工具Adobe Edge Animate

由于本人工作需要,需要做一些ipad杂志,杂志里需要一些动态效果,ipad不兼容flash,所以html5,css3在ipad动画特效中是一个很好的解决方案。偶尔接触到adobe新推出的 Edge A...
  • just_do_it2009
  • just_do_it2009
  • 2013-04-23 10:19:00
  • 2032

Adobe Animate:创建HTML5动画01软件基本问题

目前用的是Adobe Edge Animate cc 2015版 ,刚刚接触记录一些简单的操作步骤。 Adobe Edge Animate中文操作手册 :http://www.docin.com/...
  • ymc_webpack
  • ymc_webpack
  • 2017-02-17 09:48:30
  • 386

HTML5:Animate cc交互功能之全屏化

1.实现效果图,如下:点击进入:全屏再点击退出:全屏2.代码如下:a.对webkit、moz、ms等浏览器做个兼容处理 function fulls_btn_h(e) { var isFu...
  • wrk2466836002
  • wrk2466836002
  • 2018-04-16 14:45:05
  • 12

Adobe Animate CC 2017经典教程(epub版-高清文字-kindle)

  • 2017年11月07日 17:01
  • 30.83MB
  • 下载

Edge Animate轻松制作HTML5动画教程及源码

  • 2015年11月21日 13:37
  • 8.12MB
  • 下载

Animate CC 2018绿色中文版 32位&64位(附破解文件)

点击下载Animate CC 2018绿色中文版 Animate CC 2018中文版(原Adobe Flash Professional CC)是一款二维动画设计软件,适用于网页、数位出版、多媒体...
  • chenjiajunlkj
  • chenjiajunlkj
  • 2018-01-19 11:45:52
  • 377

Adobe 系列软件通用破解方式(animate cc,Photoshop cc,Flash cc)等

破解之前准备工作: ①:安装好 试用版的 Adobe软件 ②:下载好破解软件: adobe.snr.patch-painter,下载地址:链接:http://pan.baidu.com/s/1i5PP...
  • arvin0
  • arvin0
  • 2016-07-26 10:18:51
  • 5851
收藏助手
不良信息举报
您举报文章:HTML5:create.js与Animate cc交互介绍
举报原因:
原因补充:

(最多只允许输入30个字)