【原】向html5进军（2）——用flash和wallaby 制作html5动画 第一章

鉴于最近有些抓取机器和抄袭者，把标题的【原】字都复制，我不得不声明：本文为 yukon12345原创，转载请注明出处http://blog.csdn.net/yukon12345

第一章 有关Flash的基础知识

Flash是flash系列平台的统称，但我们平时很多时候把flash开发工具(flash tools)，flash运行环境（flash player runtime）和flash内容（flash content）都称为flash。下面简单介绍了下三者的概念。

直到现在，flash内容只能在部分支持flash环境的设备上观看。但联合wallaby，你可以创建基于html5的动画。使用Flash Professional来制作动画可以加快工作的完成。

作为老牌动画制作工具，Flash Professional诞生于1996年。当时的名字叫做FutureSplash。但随后便改成现在的名字。其优异的视觉效果远远超过了HTML。随后flash被广泛运用于web设计上。如今，Flash Professional作为Adobe Creative Suite（Adobe公司开发套件）产品的一部分，进化成为丰富web内容的强力工具。

Flash Professional只是flash平台家族中的一个开发工具。还有许多各式制作flash 内容的工具。它们制作的flash内容都是需要运行在名为“flash运行环境”（Flash Player runtime）中。但wallaby能够将Flash Professional的工程文件输出为HTML5，从而不需要安装插件就能运行flash制作的动画。

如果你想建立一个动画，你将遇到以下技术或格式文件：

Flash Professional

如上所述，是一个基于时间轴的动画制作工具。本书里需要CS5版本来生成HTML5。

FLA 文件

FLA文件是Flash Professional生成的工程文件。Wallaby转换就是需要用到这种扩展名为.fla的文件。

Flash Player

是运行所有flash内容的环境，也可以认为是播放器。Flash Player通常以插件形式存在于浏览器中，但也可以是一个单独的文件播放器。

目前主版本为10（10.3）

SWF

SWF文件扩展名为.swf是由Flash Professional发布生成并可以在flash player中播放的文件。但用swf文件并不能生成HTML5，不过我们还是会生成swf预览动画效果。

ActionScript

ActionScript是flash平台的脚本程序语言。AS3功能十分强大，但如果只想制作动画，你只需学几行就够了。我们这里只使用AS3制作一些简单的按钮点击控制和帧导航即可。

Yukon12345：接下来的一堆是对Flash cs5的界面和基础介绍，flash中文入门视频教程遍地，比这本书讲的易懂详细的多的去了，我也懒得翻了。只说说初学者要掌握的知识点和术语吧。具体可以谷歌之。下面文中的flash都是指Flash Professional

库 library

舞台 stage

时间轴 timeline

导入物件 importing assets

绘制形状Drawing shapes

处理图像 working with images

如果你把一张现成的图导入到flash中，无论这张图的格式是PNG,JPG，gif还是别的什么，都会变成位图。位图的是将每一个像素数据都保存，由一个一个像素颜色点来组成一幅图片。（一个像素的颜色用数个bit表示。因此叫位图）而矢量图只是包含了一些向量、颜色等数据，由计算机通过算法来计算显示出的。位图在被改变大小时，会失去原有的精度。把一张位图缩放，由于某些点的图像数据并不确切存在，flash会智能的计算可能的过渡颜色，图片会看起来变模糊。但不管怎样，过度的缩放图片将带来许多问题。

位图和形状使用须知  knowing when to use bitmaps or shapes

使用位图虽然有不少缺点，但并不是说全盘使用矢量图就是最好的。复杂的矢量图会带来较高的性能消耗。例如，如果你把一张人脸部图片转化成高精度的矢量图，可能不但会比使用位图占用字节更大，还会给CPU带来压力。播放时还会造成掉帧，闪烁之类的异常。

因此，如果你想图片效果细腻，高精度，用位图。如果想让物件变换变形什么的，用矢量图形是不错的。

如果你想既能缩放又不损失精度，可以把一张位图转换成矢量图。（flash已经提供了这个功能）但你要自己衡量矢量图的精细程度，确保让它看起来既能让人接受，又不太过复杂。

避免位图不必要的缩放 avoiding undesired scaling in bitmaps

当使用位图时，有件事必须注意。如果你缩放位图，图片的显示质量就会降低（甚至变形）。因此你必须考虑在各种分辨率和显示设备下，位图的缩放效果。

如果你锁定flash内容文件的宽高，你就不会有拉伸位图的顾虑。

如果你不固定，就要多加小心。比如你制作的背景图片分辨率是1024*768。如果在1920*1080分辨率的显示器上看，效果会非常差。因此建议你使用形状作为背景。

把物件转换成元件 converting assets to symbols

实例 instances 把库里的元件拖入舞台会生成一个实例。好比是元件的复制品。你放入多次可以生成多个实例。改变一个元件，那么这个元件的所有实例都会改变。

这样的好处是，就算你放100个实例在舞台上，生成的flash文件大小并不会增加。不过运行时会消耗一些系统资源。转化成HTML5时也是如此。

现在的电脑对处理大量复杂flash内容问题不大。但是手机等移动设备并没有太强的处理能力。如果你为手机开发flash，就必须注意优化。幸运的是，如果你懂得一些基础的计算机资源知识，就不会有这些麻烦。我们将在第三章讨论优化的细节。

关键帧 keyframes

动画补间 tweening