flash可以导出canvas动画，大大缩短制作动画所需要的时间。它是一个可视化IDE，可以让我们写少很多代码。做出来的动画，可以更加精确。同时，可以通用使用帧脚本中的 Javascript，为资源添加交互性。

新建HTML5 Canvas项目

舞台设置

舞台大小修改为：600x600 (这里可以根据设计稿调整所需要的舞台大小)

帧频

是指每秒钟放映或显示的帧或图像的数量，这个数值设置越大，动画越快，但同时也是性能消耗大户。这里我们设置为36

导入资源

文件 > 导入 > 导入到库

布局

快捷键Ctrl + L或者窗口菜单下 > 库

从资源库中把资源拖到舞台进去,通过移动拖拽的形式进行布局

图形与影片剪辑

我们可以将单独的动画，放到一个独立的影片剪辑里，这样可以更好的控制动画。几个独立的剪片剪辑，可以组成一个完整的动画。

当我们把图片从资源库拖到舞台时，它这个时候，只是普通的位图，并不能做补帧动画，所以我们必须把它转换成元件。

  • 图形由矢量图或者是位图组成。
  • 影片剪辑包含在动画影片中的影片片段，有自己的时间轴和属性。具有交互性，是用途最广、功能最多的部分。

下面制作以飘动的钱，做个例子说明

选择位图，右键 > 转换为元件，这个时候，弹出一个对话窗口，我们首先选择“影片剪辑”，保存。双击进入刚才创始的影片剪辑，这个时候，由于刚才我们只是把位图转成了影片剪辑，但实际上，它里面，仍然是一个位图，所以并不能做动画操作。所以我们需要在影片剪辑里，把图片转换了“图形”。

时间轴

上面已经把图片转成图形元件，所以我们现在需要时间轴某个地方中插入关键帧。这里我们在30,60帧处插入关键帧。然后在30帧处，移动元件的位置，然后在每个关键帧的中间右键，选择“创建传统补间”。速度可以通过删除或者增加两个关键帧的补间动画时间长度来控制。

动作播放控制

如果我们希望动画可以连续从头再播放，可以在动画的最后一帧插入一个空白关键帧，打开动作面板，然后写上

1
 
this.gotoAndPlay(0)

即可回到第一帧重新播放，如果希望停止动画，则

1
 
this.stop();

如果希望跳到某帧去播放

1
 
this.gotoAndPlay(n)

如果希望跳到某帧并停止

1
 
this.gotoAndStop(n)

发布

文件 > 发布设置

文件输出

  • 循环时间轴(表示是否循环整个动画)
  • 覆盖HTML(第一次发布时可以选上，如果对html有修改，记得把这个选项去掉,否则会对文件进行覆盖操作)

资源导出选项

  • 图像(是否导出雪碧图)
  • javascript命名空间(基本上不需要修改)，这几个属于全局变量，可以在发布后的js文件中再修改。

生成html

最终会生成一个html文件和一个js文件

生成的html文件

  • 框架自带的preloadjs,可以轻松管理资源预加载，它提供了相关api可以进行loading等操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 

<html>
<head>
<meta charset="UTF-8">
<title>peopletitle>

<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="people.js">script>

<script>
var canvas, stage, exportRoot;

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var loader = new createjs.LoadQueue(false);
	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.people();

	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="600" height="620" style="background-color:#FFFFFF">canvas>
body>
html>

生成的js文件

  • 生成的动画配置及脚本都在这个js文件里面，如果需要，可以手动修改相关数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
	width: 600,
	height: 620,
	fps: 36,
	color: "#FFFFFF",
	manifest: [
		{src:"images/bigband.png", id:"bigband"},
		{src:"images/Bitmap1.png", id:"Bitmap1"},
		{src:"images/body.png", id:"body"},
		{src:"images/eye1.png", id:"eye1"},
		{src:"images/eye2.png", id:"eye2"},
		{src:"images/face1.png", id:"face1"},
		{src:"images/face2.png", id:"face2"},
		{src:"images/face3.png", id:"face3"},
		{src:"images/hair.png", id:"hair"},
		{src:"images/hand2.png", id:"hand2"},
		{src:"images/hand3.png", id:"hand3"},
		{src:"images/hand4.png", id:"hand4"},
		{src:"images/index30.png", id:"index30"},
		{src:"images/index302.png", id:"index302"},
		{src:"images/index40.png", id:"index40"},
		{src:"images/index5.png", id:"index5"},
		{src:"images/shadow.png", id:"shadow"}
	]
};



// symbols:



(lib.bigband = function() {
	this.initialize(img.bigband);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,295,538);


(lib.Bitmap1 = function() {
	this.initialize(img.Bitmap1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,543,577);


(lib.body = function() {
	this.initialize(img.body);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,521,242);


(lib.eye1 = function() {
	this.initialize(img.eye1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,73,58);


(lib.eye2 = function() {
	this.initialize(img.eye2);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,72,35);


(lib.face1 = function() {
	this.initialize(img.face1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,297,368);



...

// stage content:



(lib.people = function() {
	this.initialize();

	// people
	this.instance = new lib.peoplemc();
	this.instance.setTransform(295,312.5);

	// qpmask (mask)
	var mask = new cjs.Shape();
	mask._off = true;
	mask.graphics.p("EgpUgqAMBU1AAAMAAABaIMhU1AAAg");
	mask.setTransform(278.5,308.1);

	// qp
	this.instance_1 = new lib.qpmc();
	this.instance_1.setTransform(291.5,263.5);

	this.instance_1.mask = mask;

	this.addChild(this.instance_1,this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(263,31.5,617,905.5);

})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});
var lib, images, createjs, ss;

附上最终效果

点我看效果

Flash Canvas
Web开发
感谢您的阅读，本文由 凹凸实验室 版权所有。如若转载，请注明出处：凹凸实验室（ https://aotu.io/notes/2015/11/02/flash-canvas/）
上次更新：2019-04-20 19:28:31