canvas教程

《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析

字号+ 作者:H5之家 来源:H5之家 2017-07-09 14:03 我要评论( )

《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析,注:1:如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书。 2

正文

注:1:如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书。   2:FLASH CC 2015 在文中直接简称为CC。   3:以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其他正在运行的软件快捷冲突。     4:bolg中为了节约篇幅以及阅读体验,不重要的图我就不贴出来了   5:我教程里使用的是 FLASH CC 2015 中文版 (15.0.0.173)   6:强烈建议不要装绿色精简版,因为他可能导致你的软件使用过程出现未知问题   7:速成班 请参看我另一系列教程 FLASH CC 2015 CANVAS (x)这类标题名的文章(不推荐) -----------------------↑↑↑↑↑↑以上的注意真的很重要哦,真的!↑↑↑↑↑↑-------------------------------

1、导出canvas动画

1.1 导出一个简单的canvas动画:

启动软件,新建一个 HTML5 canvas项目,我们保存它为 test.fla。

可以看到和 传统FLASH SWF动画项目一模一样的UI界面,也有时间轴、属性面板。(如果你不熟悉软件的操作,请参看本文最上的注意第1条)

我们任意创建一个简单动画,Ctrl+Enter测试一下。动画在浏览器中直接打开了(如果看不到,请使用先进浏览器 例如chrome)

可以看到CC自动生成的test.html中自动生成了这些内容。如果你有前端开发基础,相信很容易看明白!看不明白也无所谓,继续!

test.js文件我们暂时不用去理会它。

3.1导出一个含有位图图片、音频的动画

插入了一张奶牛的图片,以及一小段音效,发布测试

其中你可以看到有几段 这样的代码,如果需要使用(建议)相对路径,请在CC的发布设置里 更改设置如下:

发布后,我们在test.fla文件夹中看到:多了一个libs的文件夹

而test.html对应的地方也发生的变化

<script src="libs/easeljs-0.8.1.min.js"></script> <script src="libs/tweenjs-0.6.1.min.js"></script> <script src="libs/movieclip-0.8.1.min.js"></script> <script src="libs/preloadjs-0.6.1.min.js"></script> <script src="libs/soundjs-0.6.1.min.js"></script>

这样你就能和你们的前端进行愉快的“玩耍”了!

本文 源码下载:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评