【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里发布出来,后有一堆文件
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。
【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5,入门教程的更多相关文章
- Adobe Edge Animate CC 不再开发更新!
Adobe Edge Animate CC停止开发更新! http://blogs.adobe.com/edge/2015/11/30/update-about-edge-tools-services ...
- adobe edge animate 和 adobe animate cc 有啥区别?
经常有人问这两款软件的区别,每次都要打字好烦,特此总结发帖如下: 一.首先各自软件介绍 ①adobe edge animate 是adobe公司早期推出的一款网页互动工具.通过HTML+CSS+Jav ...
- Adobe Audition CC 2017 (10.0)安装教程
Adobe Audition CC 2017 (10.0)安装教程 注:下载地址在文章末尾 第一步:首先请将电脑的网络断开,很简单:禁用本地连接或者拔掉网线,这样就可以免除登录Creative Clo ...
- 推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
- Apple Watch开发快速入门教程
Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本A ...
- 游戏控制杆OUYA游戏开发快速入门教程
游戏控制杆OUYA游戏开发快速入门教程 1.2.2 游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4 游戏控制杆各个角度的 ...
- Python开发的入门教程(一)-数据类型、变量
介绍 Python第一门课程,是Python开发的入门教程,将介绍Python语言的特点和适用范围,Python基本的数据类型,条件判断和循环,函数,以及Python特有的切片和列表生成式. Pyth ...
- MSP430 LaunchPad开发板入门教程集合
MSP-EXP430G2开发板是德州仪器提供的开发工具,也称为LaunchPad,用于学习和练习如何使用其微控制器产品.该开发板属于MSP430 Value Line系列,我们可以对所有MSP430系 ...
- 微信公众号开发系统入门教程(公众号注册、开发环境搭建、access_token管理、Demo实现、natapp外网穿透)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/a1786223749/article/ ...
随机推荐
- 一个RESTful+MySQL程序
前言 本章内容适合初学者(本人也是初学者). 上一章内容(http://www.cnblogs.com/vanezkw/p/6414392.html)是在浏览器中显示Hello World,今天我们要 ...
- 【Scala】Scala之Classes and Properties
一.前言 前面学习了控制结构,下面学习Scala的Class和Properties. 二.Class&Properties 尽管Scala和Java很类似,但是对类的定义.类构造函数.字段可见 ...
- JLOI2015 解题报告
JLOI2015 真的不愧是NOI出题组出的,题目难度够吊.不过每一道都是结论题和乱搞题真的很不好玩... T1:[JLOI2015]有意义的字符串 首先贴下popoqqq的blog吧 感性的认识就是 ...
- 分别用C/C++实现栈
用C语言的方式实现栈: #include <stdio.h> #include<stdlib.h> #include<assert.h> struct Link { ...
- 更新几篇之前写在公众号上的文章:线性可分时SVM理论推导;关联分析做捆绑销售和推荐;分词、去停用词和画词云
适合阅读人群:有一定的数学基础. 这几篇文章是16年写的,之前发布在个人公众号上,公众号现已弃用.回过头来再看这几篇文章,发现写的过于稚嫩,思考也不全面,这说明我又进步了,但还是作为学习笔记记在这里了 ...
- 从项目经理的角度看.net的MVC中Razor语法真的很垃圾.
我们知道,Razor语法中我们可以直接使用@if(){}等代码段,这使得.net程序员在写模版时更容易了. 对比如下: 语法名称 Razor 语法 Web Forms 等效语法 代码块(服务端) @{ ...
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(五)讲一下maven
github地址,点这里. 项目效展示,点这里.账号:admin 密码:123456 下一篇文章开始,所有的项目源码都是与maven整合后的代码了,所以这一篇讲一讲maven. 1.简单介绍 我们看一 ...
- 网络性能测试工具Iperf/Jperf解读
Iperf 是一个网络性能测试工具.Iperf 可以测试TCP 和UDP 带宽质量.Iperf 可以测量最大TCP 带宽,具有多种参数和UDP 特性. Iperf 可以报告带宽,延时抖动和数据包丢失. ...
- 超出区域文字显示为省略号或者剪切效果——CSS的生僻操作
每门语言总有那么一些不太常用,却又不可或缺的语法操作.下面说一下,在HTML文件中,如何设置用 "省略号" 和 "剪切" 代替大量文字的效果. 以下是HTML的 ...
- sql语句,实践证明了某种情况下not in的效率高于not exists
只要百度not in和not exists,清一色的not exists的效率优于not in,毕竟not exists只是去强调是否返回结果集,只是一个bool值,而not in是返回一个结果集,是 ...