【将web进行到底之长大在线系列教程】(四) === 第三章 FLASH动画制作

第三章 FLASH动画制作

3.1 概述

Flash是美国Macromedia公司所设计的一种二维动画软件。现在，Flash已经被Adobe公司购买,用于设计和编辑Flash文档，以及Flash Player，用于播放Flash文档。Flash是Macromedia提出的“富因特网应用”（RIA）概念的实现平台。
Flash开发软件有两种：
designer（设计者）一般运用Flash软件；而developers（开发者）则一般运用Flex软件。
解析工具：
闪客精灵，专门用来解析SWF文件，能将SWF还原为FLA的专业Flash全面解析工具。
脚本语言ActionScript：
ActionScript是Flash的脚本语言，通过ActionScript才能在Flash中创作具有很强交互性的动画，而该语言的最新版本是ActionScript3.0。因为2.0与3.0差别较大，所以建议初学者直接学习3.0。
* 学习Flash的目的
大家知道，HTML语言的功能十分有限，无法达到人们的预期设计，以实现令人耳目一新的动态效果，在这种情况下，各种脚本语言应运而生，使得网页设计更加多样化。然而，程序设计总是不能很好地普及，因为它要求一定的编程能力，而人们更需要一种既简单直观又功能强大的动画设计工具，而Flash的出现正好满足了这种需求。
* Flash的特点
（1）使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载。 （2）通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。 （3）把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。 （4）强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION可以实现交互性，使Flash具有更大的设计自由度，另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。

3.2 Flash软件使用
目前flash软件最新版本是Flash CS 4，下面是flash mx 2004的界面（与CS4差别不大）：

* 基本界面

1 舞台：就是工作区，最主要的可编辑区域。在这里可以直接绘图，或者导入外部图形文件进行安排编辑，再把各个独立的帧合成在一起，以生成电影作品。
2 时间轴：用它可以调整电影的播放速度，并把不同的图形作品放在不同图层的相应帧里，以安排电影内容播放的顺序。
3 工具箱：放置了可供图形和文本编辑的各种工具，用这些工具可以绘图，选取，喷涂，修改以及编排文字，还有些工具可以改变查看工作区的方式。在选择了某一工具时，其所对应的修改器(Modifier)也会在工具条下面的位置出现，修改器的作用是改变相应工具对图形处理的效果。
4 标准工具栏：列出了大部分最常用的文件操作，打印，剪贴板，撤消和重做，修改器以及控制舞台放大比例的图标和选项，便于进行更为快捷的操作。
5 库面板：用以存放可以重复使用的称为符号的元素。符号的类型包括有图片(Graphics)，按钮(Button)
和电影片断(Movie Clip)。其调用的快捷键为Ctrl-L。

* 工具栏

1、 线条工具：用鼠标单击【线条工具】，移动鼠标到舞台上，按住鼠标并拖动，松开鼠标，一条直线就画好了，用【线条工具】能画出许多风格各异的线条来。打开【属性】面板，在其中，我们可以定义直线的颜色、粗细和样式。
2、 椭圆工具：在工具箱中选择【椭圆工具】，将鼠标移动到场景中，拖动鼠标可绘制出椭圆(按住shift 键可绘制圆形)。在【属性】面板中可以设定填充的颜色及外框笔触的颜色、粗细和样式.
3、 矩形工具：还可以绘制出圆角的矩形。【矩形工具】中“圆角矩形”的角度可以这样设定：选择【矩形工具】后，单击工具箱下边的【圆角矩形半径】按钮，也可以用鼠标双击工具箱中的【矩形工具】，弹出【矩形设置】对话框。
4、 铅笔工具：【铅笔工具】的颜色、粗细、样式定义和【线条工具】一样，在它的附属选项里有三种模
式。
伸直模式：在伸直模式下画的线条，它把线条转成接近形状的直线。
平滑模式：把线条转换成接近形状的平滑曲线。
墨水模式：不加修饰，完全保持鼠标轨迹的形状。
5、颜料桶工具：其中，【不封闭空隙】表示要填充的区域必须在完全封闭的状态下才能进行填充；【封闭小空隙】表示要填充的区域在小缺口的状态下可以进行填充；【封闭中等空隙】表示要填充的区域在中等大小缺口状态下进行填充；【封闭大空隙】表示要填充的区域在较大缺口状态下也能填充。
6、刷子工具：
（1）标准绘画：不管是线条还是填色范围，只要是画笔经过的地方，都变成了画笔的颜色。
（2）颜料填充：它只影响了填色的内容，不会遮盖住线条，
（3）后面绘画：无论你怎么画，它都在图像的后方，不会影响前景图像，
（4）颜料选择：先用画笔抹几下，丝毫不起作用。这是因为我们没有选择范围。用【选择工具】选中叶片的一块，再选择【刷子工具】进行绘制，此时可看到选择区域被涂上所选的 颜色。
（5）内部绘画：在绘画时，画笔的起点必须是在轮廓线以内，而且画笔的范围也只作用在轮廓线以内，
7、钢笔工具与部分选取工具：
可以绘制直线和曲线。
示例：现在我们来练习画一条波浪线，为了让大家容易理解，先执行【视图】|【网格】|【显示网格】命令
“部分选取工具”：拖动手柄可以改变曲线的形状。按住Alt键并拖动手柄，可以不影响另一个手柄。拖动节点可以改变节点的位置
8、橡皮擦工具：
标准擦除：擦除同一层上的笔触和填充。
擦除填色：只擦除填充，不影响笔触。
擦除线条：只擦除笔触，不影响填充。
擦除所选填充：只擦除当前选定的填充，并不影响笔触（不管笔触是否被选中）。以这种模式使用【橡皮擦工具】之前，请选择要擦除的填充。
内部擦除：只擦除橡皮擦笔触开始处的填充。如果从空白点开始擦除，则不会擦除任何内容。以这种模式使用橡皮擦并不影响笔触。
9、墨水瓶工具：为填充色描边。
10、填充变形工具： 选择【椭圆工具】，设置【填充色】为无，按住Shift键，在舞台上绘制出一个空心的正圆。
执行【窗口】|【混色器】命令，打开【混色器】面板，在其中选择填充类型为【放射状】，在颜色条下，单击左端的色标，设置为浅紫色（#D9C8FD），单击右端的色标，设置为深紫色（#5407E4），选择【颜料桶工具】，单击圆的中心略偏下的地方，将刚设置的渐变色填充到圆中，成为按钮下方的高光色。
在工具箱中选择【选择工具】，单击圆的外边框，将其选中，按键盘上的Delete键，将它删除。现在的高光色太圆太大，我们使用【填充变形工具】对其进行调整。
（1）线形 （2）放射状
-19-
11、滴管工具：滴管工具用于提取与绘制图形中的线条或填充色具有相同属性的图形以及位图中的各种RGB颜色，
12、选择工具：
（1）可以单独或全部选中图形中的线条与填充色，
（2）修改对象形状
13、套索工具： 用于选取任意范围中的线条与填充色。 魔术棒属性 设置相近颜色值的范围
14、任意变形工具：用于对图形进行放大、缩小、拉伸、压缩、旋转和扭曲等方面的操作 。
（1）旋转与倾斜：旋转
用于改变图形角度。当光标移动到图形边角的锚点外侧时，变成如左图所示的样子，单击并拖拽鼠标，可以看到旋转的图形轮廓线，
倾斜
用于改变图形形状。当光标移动到图形锚点之间的直线时，
（2）缩放图形：
改变图形的纵横比，分为任意缩放与等比例缩放两种。
以中心点为中心缩放图形
按住Alt键的同时单击并拖拽鼠标，即可以中心点为中心调整图形纵横比 。
以中心点为中心等比例缩放图形
按住Shift+Alt键的同时单击并拖拽鼠标，即可以中心点为中心等比例缩放图形。
到这里就把flash的基本操作介绍完成，建议初学者网上观看FIF视频教程，将视频中的一些简单实例照做一遍。
3.3 Flex软件使用
Flex是通过java或者.net等非Flash途径，解释.mxml文件组织components，并生成相应得.swf文件。运用Flash是完全可以做到flex的效果的，为什么还需要flex呢？这里面有两个原因：1：为了迎合更多的developers（开发者）。Flash天生是为了designer（设计者）设计的，界面还有flash的动画概念和程序开发人员格格不入，为了吸引更多的jsp/asp/php等程序员，Macromedia推出了Flex，用非常简单的.mxml来描述界面给jsp/asp/php程序人员使用.(x/d)html非常相似，而且mxml更加规范化、标准化。
* Flex与Flash的关系
首先，Flash并非只是一个单纯的矢量动画创作工具，而是一个凭借脚本语言ActionScript在功能和定位上不断演变的网络应用开发工具。早在Flash MX的时候就已经成为macroemdia 推广RIA战略的工具。但是毕竟Flash最初的定位是面向美术动画设计师的矢量动画创作工具，并不适合传统的开发人员。于是Flex成为开发者们的首选。
-20-
Flex和Flash都以ActionScript作为其核心编程语言，并被编译成swf文件运行于Flashplayer虚拟机里。因此Flex也继承了Flash在表示层上先天性的美感、除了视觉上的舒适感外，还天生具备方便的矢量图形、动画和媒体处理接口。
* 什么是RIA
传统网络程序的开发是基于页面的、服务器端数据传递的模式，把网络程序的表现层建立于HTML页面之上，而HTML是适合于文本的，传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了。而富互联网应用（Rich Internet Applications，缩写为RIA）的出现就是为了解决这个问题。
富互联网应用程序是下一代的将桌面应用程序的交互式用户体验与传统的WEB应用的部署灵活性和成本分析结合起来的网络应用程序。富互联网应用程序中的富客户技术通过提供可承载已编译客户端应用程序（以文件形式，用HTTP传递）的运行环境，客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器，这是一种安全、可升级、具有良好适应性的新的面向服务模型，这种模型由采用的WEB服务所驱动。结合了声音、视频和实时对话的综合通信技术，使富互联网应用程序（RIA）具有前所未有的网上用户体验。
* Flex软件安装
下面介绍的是flex 2.0的安装
Flex提供2种安装模式：
（1）独立安装，不需要第三方软件支持。

（2）插件安装，Flex Builder 2.0将作为Eclipse的一个插件进行安装，当然你必须先安装Eclipse，而且必须是3.1或更高版本。Eclipse是一个开源的应用程序框架，可以到官方站点http://www.eclipse.org/下载最新版本。

安装完成后，进入到Flex Builder的安装目录C:\Program Files\Adobe\Flex Builder 2（这里假定
你安装在C盘），会看到一个名为“Flex SDK 2”的文件夹，里面存放了Flex 2最核心的内容。其中bin和lib文件夹分别存放了Flex的编译程序和编译器的运行库文件；frameworks里面就是Flex framework的内容，包含了所有的ActionScript源文件，如果你想深入了解Flex 2 Framework的构架，这里是一定不能错过的。sample里面是大量的Flex实例程序源代码，有简单的组件运用例子，也有大型的项目开发，内容丰富，不管是新手还是有一定经验的开发者，都可以从这些例子中获益。
* Flex软件使用

编辑区工具条标示当前处于“Design”模式，右边依次显示了两个按钮和两个下拉框，用来帮助我们更好地调节视图，如下。

编辑区工具条标示当前处于“Source”模式时，切换到代码视图，如下图。请注意各个面板的变化。左侧项目导航面板显示了项目的文件结构，在这里我们可以直观地浏览到当前项目的树型文件结构。双击其中的MXML文件或AS文件，就可以在右边的编辑区打开文件进行编辑。
组件面板和代码结构面板默认集合在同一个区域面板中。在设计模式下，组件面板被自动激活，当切换到代码模式时，代码结构面板会取代组件面板，列出当前编辑文件的代码结构。如果是MXML文件，会显示该文件中所有的组件；如果是ActionScript文件，则列出该对象的属性和方法。代码结构面板将当前编辑文件的结构自动解析。
属性面板只适用于设计视图模式。它会列出当前编辑区被选对象的所有属性，例如对象的位置、长宽、
颜色、ID名称、对齐方式等等。通过属性面板，可以快速地改变物体的属性，控制物体的位置、布局方式等等。

状态面板列出当前编辑文件的状态列表。State（状态）在Flex中是个特殊的对象，定义了组件在执行某个任务时的特定视图。比如，用户在登录前和登录后，状态不同，因此对应的视图也不同。

工具条如下图：

Flex功能非常强大，使用起来其实并不难，可以参照flex帮助文档。
* 创建flex程序
1，建立flex工程
与vc相似，需要先建立工程，我们可以使用Flex Builder 2.0创建三种类型的项目：
（1）Flex 2项目，基于Flex Framework。这是主要内容，下文所涉及的实例都是使用这种形式创建的程序项目。
-23-
（2）ActionScript 3.0项目，仅仅是使用ActionScript，而不运用Flex Framework来编写纯代码的程序。这里不使用MXML语言来描述界面，所有的界面由ActionScript来动态绘制。Flex Builder仅仅编辑、调试、编译代码，来生成SWF文件。由于没有Flash IDE中的绘图、编辑等可视编辑工具，这种开发方式对开发者的要求较高。
（3）Flex库项目，创建自己的库文件，将Flex组件或其他资源封装在一起，形成一个SWC文件，Flex Framework就被封装为一个SWC文件。封装成SWC文件的好处是可以在任何地方使用。

在菜单中选择File -> New -> Flex Project，会出现一个对话框，如下图

·Basic
一般配置，适用于常见的以HTTP方式或Web Service等进行数据传送，比如加载XML文件、PHP程序、ASP程序、连接Web Service等等。
·ColdFusion Flash Remoting Service
专门用于和ColdFusion服务端进行Flash Remoting方式的通信。
·Flex Data Services
用于和Flex Data Services（以下简称FDS）通信。FDS是Flex 2系列中的一个服务器端产品，提供了对Java对象的直接访问、实时通信等功能。
选择第一种配置，点击Next按钮之后，出现如下图的对话框，设置项目名称和项目文件的存放路径。设定后再点击Next 按钮。

最后一步，配置程序的一些源代码和运行库环境，如下图所示，包括主程序文件、源文件路径。当使用了外部库文件时要在这里添加库文件的路径，以及输出的SWF和HTML文件路径等等。主程序文件一般以项目名称命名，加上后缀mxml。它是整个项目的入口，也是最后生成的SWF文件的基础。

保持默认状态，不用更改，直接点击Finish，就完成了项目的创建。随后Flex Builder自动生成所有的基本文件，包括主程序文件、项目的库文件配置、HTML页面模板等等。

这时候在Flex Builder左侧的项目导航视图中，可以看到当前所有项目的文件结构

· “bin”文件夹：用来存放程序编译后输出的SWF和HTML等一系列文件。如果项目中使用了XML文件、图片、样式表等其他资源，也会包括在里面。
· “html-template”文件夹：里面是生成HTML页面的文件模板，包括检测用户浏览器Flash播放器插件版本号的JS脚本文件和一个自动下载最新Flash播放器插件的SWF文件。
· HelloWorld.mxml即为这个项目的主程序文件。（双击此文件进行编辑）
* 编译和运行
程序编写完毕，下面来编译运行这个项目。首先确认选中了当前项目，或者选中了项目中的程序文件，点击工具条中的编译或运行图标，开始编译。状态栏的进度条提示Flex Builder正在工作，如果程序有错误，将中止编译动作，并在错误面板中列出错误信息。如果没有问题，编译结束后Flex Builder自动打开一个新的浏览器窗口，来浏览HTML页面。这个HTML页面嵌入了生成的SWF文件。
最后，生成的SWF文件被放在项目的bin文件中，且文件与项目同名。
3.4 动画制作实例
* Flex下制作MP3播放器

这是我以前写的一个MP3播放器，代码有些粗糙，加入数据库可以实现歌曲的添加和删除功能

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="11"
applicationComplete="load()">
<mx:ApplicationControlBar dock="true">
<mx:Label text="辉洒_xxh flash 音乐播放器" />
<mx:Button label="上一首" x="150" click="n-=1,nextS(n)" />
<mx:Button label="下一首" x="210" click="n+=1,nextS(n)" />
<mx:Button label="stop" x="100" click="myC.stop()"/>
</mx:ApplicationControlBar>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.media.*;
import flash.net.URLRequest;
private var mp3_url:String;
private var myS:Sound;
private var myurl:URLRequest;
private var myC:SoundChannel;
public var n:Number = 1;
private function load():void
{
if( mp3_list.selectedItem == null )
{
mp3_url = "http://www.zsktv.com/fangcang/2007/3/200732245826.mp3";
} 
else
{
mp3_url = String( mp3_list.selectedItem );
}
play( );
}
private function play( ):void
{
myurl = new URLRequest( mp3_url );
myS = new Sound( myurl );
if( myC!=null )
{
myC.stop();
}
myC = myS.play();
}
public function nextS(n:Number):void
{
switch(n)
{
case 1:mp3_url=song1.toString(); break;
case 2:mp3_url=song2.toString(); break;
case 3:mp3_url=song3.valueOf();break;
case 4:mp3_url=song4.valueOf();break;
default : Alert.show( "已经是最后一首了" );
}
trace(n,mp3_url);
if( n>0&&n<5 )
{
play();
}
}
]]>
</mx:Script>
<mx:List id="mp3_list" change="load()" x="10" width="100" visible="false">
<mx:Array>
<mx:String id="song1">http://www.zsktv.com/fangcang/2007/3/200732245826.mp3</mx:String>
<mx:String id="song4">http://www.5dog.com/ad/做我的爱人.mp3</mx:String>
<mx:String id="song2">http://www.arisky.cn/userdirectory/lynnlynn99/jukebox/17010.mp3</mx:String>
<mx:String id="song3">http://www4.uc999.com/jwt/music/images/Lalala%20love%20song.mp3</mx:String>
</mx:Array>
</mx:List>
</mx:Application>

Flash读取xml
xml结构非常简单，基本可以被所有语言读取数据，所以很多时候它是可以作为数据库来使用的，这里介绍flash读取xml其实就是将xml作为数据库来使用。
test.xml

<?xml version="1.0" encoding="utf-8"?>（注释：最好使用utf-8编码）
<root>
<body>
<id>1</id>
<name>YUOL</name>
</body>
</root>

test.fla

var myXml:XML = new XML();
var xml_url:String = "test.xml";
var myXmlUrl:URLRequest = new URLRequest(xml_url);
var myLoader:URLLoader = new URLLoader(myXmlUrl);
myLoader.addEventListener("complete", xmlLoaded);
function xmlLoaded(event:Event):void
{
myXml =new XML(myLoader.data);
//处理XML对象的函数： trace(myXml.childNodes[0]); trace(myXml.childNodes[0].nodeName); trace(myXml.childNodes[0].childNodes[0].attributes.name); trace(myXml.childNodes[0].childNodes[0].childNodes[0].nodeValue);
}