《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画，文件结构浅析
注：：如果你对 FLASH 这个软件操作不够熟悉，建议你可以先看看FLASH动画之类的书。 ：FLASH CC 在文中直接简称为CC。 ：以下所以文章中所说的快捷键 如果你按了不起作用，请检查是否有其他正在运行的软件快捷冲突。 ：bolg中为了节约篇幅以及阅读体验，不重要的图我就不贴出来了 ：我教程里使用的是 FLASH CC 中文版 （15.0.0.173） ：强烈建议不要装绿色精简版，因为他可能导致你的软件使用过程出现未知问题 ：速成班 请参看我另一系列教程 FLASH CC CANVAS （x）这类标题名的文章（不推荐） -----------------------↑↑↑↑↑↑以上的注意真的很重要哦，真的！↑↑↑↑↑↑-------------------------------
1、导出canvas动画
1.1 导出一个简单的canvas动画：
启动软件，新建一个 HTML5 canvas项目，我们保存它为 test.fla。
可以看到和 传统FLASH SWF动画项目一模一样的UI界面，也有时间轴、属性面板。（如果你不熟悉软件的操作，请参看本文最上的注意第1条）
我们任意创建一个简单动画，Ctrl+Enter测试一下。动画在浏览器中直接打开了（如果看不到，请使用先进浏览器 例如chrome）
注:如果你的元件使用了滤镜 那么该元件的动画将不会被渲染。（类似这样的提示CC会在你发布动画的时候在“输出面板”提示）
1.2 导出动画的文件结构
我们打开我们test.fla的目录，如下：
我们直接运行test.html，也能直接看到我们发布的动画。（如果看不到，请先按1.1中所说的“创建一个简单的动画”）
FLASH SWF项目我们导出后直接是一个SWF文件。这里变成了test.html 和test.js 两个文件。（如果你是banner动画制作职位，或者你发布的动画需要合并到网站里。你应该将这2个文件都交给前端开发者。）
我们先打开test.html如下： （我用的 dreamweaver）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title> <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="test.js"></script> <script>
var canvas, stage, exportRoot; function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.test(); stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update(); createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head> <body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="480" height="320" style="background-color:#FFFFFF"></canvas>
</body>
</html>
可以看到CC自动生成的test.html中自动生成了这些内容。如果你有前端开发基础，相信很容易看明白！看不明白也无所谓，继续！
test.js文件我们暂时不用去理会它。
3.1导出一个含有位图图片、音频的动画
插入了一张奶牛的图片,以及一小段音效，发布测试
test.fla的文件夹里发生了些变化
除了test.fla 其他都动画运行所需要的文件。
我们再看test.html也发生了变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title> <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.6.1.min.js"></script>
<script src="test.js"></script> <script>
var canvas, stage, exportRoot; function init() {
canvas = document.getElementById("canvas");
images = images||{}; var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
} function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
} function handleComplete(evt) {
exportRoot = new lib.test(); stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update(); createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
} function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head> <body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="480" height="320" style="background-color:#FFFFFF"></canvas>
</body>
</html>
其中你可以看到有几段 http://code.createjs.com 这样的代码，如果需要使用（建议）相对路径，请在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>
这样你就能和你们的前端进行愉快的“玩耍”了！
本文 源码下载：
http://pan.baidu.com/s/1mgqysy8
《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画，文件结构浅析的更多相关文章
- FLASH CC 2015 CANVAS （七）总结
FLASH CC 2015 CANVAS (一至七)确切来说是自己在摸索学习过程中而写.所以定为“开荒教程”. 去年年底转战H5,半年中一直非常忙也不敢用CC来做项目,担心有BUG或者无法实现需求,所 ...
- Adobe Photoshop CC 2015安装激活教程
Adobe Photoshop CC 2015安装激活教程(附序列号) Adobe Photoshop CC 2015是Adobe针对旗下的创意云Creative Cloud 套装推出了2015年年度 ...
- 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门
注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...
- 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互（点击、触摸）事件
注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...
- FLASH CC 2015 CANVAS （六）如何像FLASH那样实现场景(多canvas)
注意 此系列贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新. swf 项目中,我们可以很容易在一个fla文档里创建多场景.也可以通过多个fla文件发布多个s ...
- FLASH CC 2015 CANVAS （五）loading的制作
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的lo ...
- FLASH CC 2015 CANVAS （二）html中写JS调用flash中的元件、函数、变量
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...
- FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...
- FLASH CC 2015 CANVAS （三） flash中写JS调用html中JS的函数，变量
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...
随机推荐
- php删除多重数组对象属性，重新赋值的方法
php删除多重数组对象属性,重新赋值的方法 实例:sphinx搜索出来的结果,要去掉某个属性值:$cl = new SphinxClient ();$query = $cl->Query ( $ ...
- ASP.NET MVC下的四种验证编程方式【转】
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...
- JSONArray.fromObject()注入处理日期Date格式
package jsonDateProcess; import java.sql.Date; import java.text.SimpleDateFormat; import java.util.L ...
- [Android新手区] SQLite 操作详解--SQL语法
该文章完全摘自转自:北大青鸟[Android新手区] SQLite 操作详解--SQL语法 :http://home.bdqn.cn/thread-49363-1-1.html SQLite库可以解 ...
- Jython安装步骤
1.下载安装包 2.执行安装 Java -jar [此处是下载的jython jar包名],或者双击jar包夜可以 3.配置环境变量 新增JYTHON_THOME的环境变量,并设置为安装路径. 配置c ...
- 11、Jsp加强/EL表达式/jsp标签
1 Jsp基础回顾 Jsp基础 1)Jsp的执行过程 tomcat服务器完成:jsp文件->翻译成java文件->编译成class字节码文件-> 构造类对象-> 调用方法 to ...
- Python代码项目目录规范v1.0
程序目录规范:bin # 存放可执行程序 xxxx.py # 程序主程序(入口文件)config # 存放配置信息 settings.py # 全局配置文件(可能暂时未应用)db # 存放数据文件 c ...
- git 本地分支与远程分支关联的一种方法
github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pull origin dev 本地分支与远程分支相关联 在本地 ...
- 减少GC开销的措施
程序的运行会直接影响系统环境的变化,从而影响GC的触发.若不针对GC的特点进行设计和编码,就会出现内存驻留等一系列负面影响.为了避免这些影响,基本的原则就是尽可能地减少垃圾和减少GC过程中的开销.具体 ...
- ACM题目————中缀表达式转后缀
题目描述 我们熟悉的表达式如a+b.a+b*(c+d)等都属于中缀表达式.中缀表达式就是(对于双目运算符来说)操作符在两个操作数中间:num1 operand num2.同理,后缀表达式就是操作符在两 ...