第1章 Flash网站基础知识
随着因特网的飞速发展，网站已经成为当今社会中企业形象推广和市场营销的重要平台，也成为个人展示的重要空间，越来越多的企业和个人都在因特网上建立了自己的网站。自己制作的网站如何在众多的网站中脱颖而出，也成为很多设计者在设计制作网站时首先需要考虑的问题。因为Flash有很好的动画表现能力，界面直观、形态生动，受到越来越多的设计者的喜欢。Flash网站与传统网站相比，具有生动的动画和良好的交互式操作等特征，给每一位访问者带来一种切身的访问感受，使浏览者在浏览的过程中自然而然地融入到网站中。基于Flash网站的众多优点，Flash网站也得到了飞速的发展，它们已经成为因特网中一种非常重要的网站类型。
学习目的：
* 了解 Flash 的发展历史
* 理解 Flash 动画与Flash 网站的区别
* 熟悉 Flash 网站的分类
* 熟练掌握 Flash 网站的制作流程
1.1 Flash的发展历史
1996年，一个名为FutureSplash Animator 1.0的小软件由一家名为FutureWave Software的小软件公司推出。这个FutureSplash Animator 1.0就是传说中的Flash1.0。而这家FutureWave Software公司后来被Macromedia公司收购，成为了Macromedia著名的Flash开发部。
一年后，Flash 2.0推出，但是并没有引起人们的关注。直到1998年Flash 3.0的推出才真正让Flash获得了应有的重视，这要感谢网络在这几年的迅速普及和网络速度的提高，以及网络内容的丰富，人们对视觉效果的追求让Flash得到了充分的认识和肯定。
经过了1999年过渡性质的Flash 4.0后，2000年Macromedia推出了酝酿已久的具有里程碑意义的Flash 5.0。在Flash 5.0中首次引入了完整的脚本语言——ActionScript 1.0，这是Flash迈向面向对象的开发环境领域的第一步。
2002年推出的Flash MX，从传统Flash的角度看，它似乎只是Flash 5.0的一个增强，但随着Flash MX到来的还有两个Flash服务器商产品—Flash Communication Server MX和Flash Remoting MX。Flash Communication Server MX是一个基于服务器平台，用于创建和部署令人眼花缭乱的Web音频和视频的应用产品，例如视频点播（VOD）、可视聊天和实时协同应用等。Flash Remoting MX用于在Flash和Web服务器之间建立连接，通过强大易用的编程模块，可以很容易地把Flash内容与Java、.NET及ColdFusion应用结合起来创建复杂丰富的Web应用。
2004年，Macromedia推出了Flash MX2004。自Flash 5.0开始，Macromedia就已经将Flash的发展方向更多地移向了多媒体和Web应用开发领域，而不再仅仅局限于交互式动画制作的范围。如果说Flash 5.0是Flash步入面向对象开发环境的第一个里程碑，那么，Flash MX2004就是Flash作为面向对象开发环境的第二个里程碑。
Flash 8是Macromedia于2006年推出的版本，Flash 8提供了两种版本:Macromedia Flash Basic 8和Macromedia Flash Professional 8。Flash Professional 8是当时业界最为先进的创作环境，用于创建交互式网站、数字体验和移动内容，是业界创建高级交互内容的首选软件。Flash Basic 8是Flash Profeddional 8的一个子集，包括设计简单运动图形并实现交互性以发送给Flash Player所需的所有核心功能，非常适合临时用户，是用于创建Flash动画的经济型创作工具。
2006年Macromedia公司被Adobe公司收购，Flash 8也成为Macromedia公司推出的最后一个版本。2007年，Adobe公司推出了全新的Flash CS3，增加了全新的功能，包括对Photoshop和Illustrator文件的本地支持，以及复制和移动等功能，并且整合了ActionScript 3.0脚本语言开发，Flash CS3的功能更加强大。
1.2 Flash动画与Flash网站的区别
目前网站中的Flash动画非常多，用途也非常广，但是相对于Flash网站来说，两者之间还是有很多不同。抛开制作方式的不同，Flash网站和制作普通的Flash动画有以下3点不同。
（1）制作思路
普通Flash动画都是制作在一个独立的Flash文件中，制作的动画效果随着时间轴的变化或场景的交替变化即可；Flash网站制作则更需要整体的把握，通过不同文件的切换和控制来实现全Flash网站的动态效果，要求制作者有明确的思路和良好的制作习惯。
（2）文件播放流程
普通Flash动画通常需要将所有的文件放在一个文件内，在观看效果时必须等文件下载完毕才可以开始播放。但Flash网站是通过若干个文件结合在一起，在时间流上更符合Flash软件产品的特性。文件可以做得比较小，通过陆续载入其他文件的方式，除了更适合在因特网上传播，同时还避免了访问者因等待时间过长而放弃浏览的事情发生。
（3）文档结构
Flash动画的场景、动画过程及内容都在一个文件内，而Flash网站的文件由若干个文件构成，并且可以随发展的需要继续扩展。Flash网站的文件动画分别在各自对应的文件内。通过Action的导入和跳转控制实现动画效果，由于同时可以加载多个SWF文件，它们将重叠在一起显示在屏幕上。
1.3 Flash网站的分类
随着Flash版本的不断更新，功能也日益完善，越来越多的网站开始将网站制作成Flash整站的形式。Flash的网站效果比较漂亮，也具有很强的交互性。但是，由于Flash的局限性，这样的网站只适合内容不是很多的中小型网站，对于数据较多的大型综合性网站就不适合了。
1．商业类Flash网站
商业类Flash网站主要以电子商务和宣传产品为主，这样的网站大多都是以网上购物为基础的。所以，设计应该更加人性化，更加方便浏览者的浏览。因此在设计上就应该避免烦琐的操作。这种网站在用色上应该遵循和谐统一的原则，给人以整体的美感。如图1-1所示的商业类网站。
图1-1 商业类Flash网站
2．企业类Flash网站
企业类Flash网站动画的制作要突出该公司的特色，所以在进行设计和制作时可以尽量规则一些，给人以庄重的感觉，动画制作得较为规整而且朴实，突出该公司的精神主旨，以及该公司的主营业务和服务宗旨。如图1-2所示的企业类网站。
图1-2 企业类Flash网站
3．科技类Flash网站
现在的科技正向着以人为本的方向发展，科技类的网站给人的整体感觉简单而不失华丽、平淡而不失神奇。这类网站大多是以简单的页面设计和复杂的动画效果来吸引浏览者，而且这类网站的设计也都比较新奇，给人以另类的感觉，因此会让人留下深刻的印象。如图1-3所示的科技类网站。
图1-3 科技类Flash网站
4．娱乐类Flash网站
娱乐类网站动画制作中，网站栏目较多，为了突出俱乐部的特色，可以将动画页面绘制得较精美，动画制作得较炫目，并综合利用多种动画类型。如图1-4所示的娱乐类网站。
图1-4 娱乐类Flash网站
5．休闲类Flash网站
休闲成为了时代的热潮，因此休闲类的网站也接踵而至。这些休闲类的网站大多数都是以轻松活泼、亲近自然为主，用色主要以轻松欢快的颜色为主色调，给人以舒适、放松的感觉，而且网站的整体效果也比较简单，这样即使不进行烦琐的操作也可以找到想要的资料。如图1-5所示的休闲类网站。
图1-5 休闲类Flash网站
6．餐饮类Flash网站
餐饮类的网站主要以暖色调和中性色为主，并且配以美食图片，这样会使浏览者感到一种对美食的渴望，这就是此类网站的目的。对于比较大型的餐饮企业来说，都有自己的品牌，在网站中主要宣传自己的品牌和新研发的产品，以及宣传各种树立自己品牌形象的活动。如图1-6所示的餐饮类网站。
图1-6 餐饮类Flash网站
1.4 Flash网站的制作流程
要制作一个好的Flash网站，一定要突出以下3个要素:创意、设计、交互。当然，一个良好的网站规划也是相当重要的。Flash网站规划的基本思路是:根据已有的创意，有效地将设计与交互结合起来，设计与交互均为创意服务，同时三者又是相辅相成、紧密统一的。
1.4.1 Flash网站结构规划
在前面提到一个好的网站除了取决于3个重要的要素外，还取决于一个重要的不可缺少的因素——网站规划。Flash网站规划的基本思路是指根据已有的创意，有效地将设计与交互结合起来，设计与交互均为创意服务，同时三者又是相辅相承、紧密统一的。
Flash网站的结构和流程与HTML基本相似，但略有不同。相同的是它们都要有基本元素，如Logo、导航和内容等；不同点是可以通过一定的技术手段使Flash的结构变化万千，例如在表面上看到的Flash页面中可能只有一个Logo，也可能只有一个图形导航而已，但实际上通过鼠标的mouseRollOver和mouseRollOut交互，会将其他元素在变化中呈现出来。
1.4.2 Flash网站场景规划
为了达到Flash网站的最佳观赏效果，通常在载入Flash内容时都需要一个预载（Loading）过程。可能大家都知道SWF文件本身就是一种流式播放（边下载边播放），但对于当前国内的带宽较小、播放速度较慢的状况来说，制作预载动画还是很有必要的。您可以等动画完全下载完成后再对动画进行播放。同时这也是Flash网站的一个基本流程，如果有片头则先预载Flash信息片头动画，然后预载主场景；如果没有片头则直接预载主场景。通常情况下主场景中的内容是比较多的，不可能一次将所有的内容载入。一般的原则是当点击相关的链接时，需要的内容才被载入进来。图1-7所示的就是动画的预载动画效果，下载完成后的页面效果如图1-8所示。
图1-7 动画预载效果
图1-8 动画载入后的效果
说到主动画，其实指的是Flash网站的首页面。对于Flash的首页面而言，最关键的往往是页面的结构设置，要有清晰的栏目划分和完美的动画效果，能够给浏览者一个良好的第一印象。图1-9所示的就是场景主动画效果。
图1-9 主场景动画效果
制作完主页面后，接下来是各栏目的制作，也就是二级页面的制作。首先，所有的二级页面的风格要与主页面保持一致，不要为了追求动画效果而忽略了整个网站的协调。其次是二级页面的出场方式和出场位置，根据不同的网站类型及网络速度，选中不同的出场方式和出场位置。图1-10所示的就是二级栏目动画效果。
图1-10 二级栏目动画效果
1.4.3 Flash素材准备
Flash作品到目前为止还是以矢量素材为主，它具有体积小、任意缩放都不会影响画面质量等特点。但是由于Flash功能的日益成熟，越来越多的色彩丰富的位图图像也加入到Flash动画制作中了，色彩鲜艳的位图图像为Flash动画增色不少，但位图体积过大的问题也影响了动画的下载和播放，所以在Flash动画制作过程中使用位图时，常常会把位图转换为矢量图，以减小位图的体积。下面来介绍将位图转换为矢量图的方法。
1．导入位图
执行【文件】→【新建】命令，弹出“新建文档”对话框，新建一个Flash文档，执行【文件】→【导入】→【导入到舞台】命令，弹出“导入”对话框，选择需要导入的素材图像文件，如图1-11所示。单击【打开】按钮，即可以将选中的素材图像导入到Flash文档舞台中，如图1-12所示。
图1-11 “导入”对话框
图1-12 将图像导入到舞台中
提示：除了可以将图像素材或其他文件导入到舞台中，还可以执行【文件】→【导入】→【导入到库】命令，将素材图像或其他文件导入到“库”面板中，再从“库”面板中拖入到场景中进行处理。
2．批量导入位图
在Flash动画中常常会制作如书本翻动和烟花爆发等效果，如果利用Flash本身的动画制作方法，很难表现得完美。所以常常会使用一系列位图的制作方法。当准备好的位图素材为一系列图像时，并且文件名字都是连接的。执行【文件】→【导入】→【导入到舞台】命令时，会弹出图1-13所示的提示对话框，单击【是】按钮，则会将相关联的一系列位图全部一次性导入到场景中，并按顺序排列到时间轴上。效果如图1-14所示，时间轴效果如图1-15所示。
图1-13 提示对话框
图1-14 导入位图素材
图1-15 “时间轴”效果
3．将位图转换为失量图
选中舞台中刚刚导入的位图素材图像，执行【修改】→【位图】→【转换位图为矢量图】命令，弹出“转换位图为矢量图”对话框，如图1-16所示。采用默认设置，单击【确定】按钮，完成“转换位图为失量图”对话框的设置，将位图转换为失量图，效果如图1-17所示。
图1-16 “转换位图为失量图”对话框
图1-17 将位图转换为失量图
在“转换位图为失量图”对话框中有以下选项可以进行设置。
颜色阈值:图像的转换是比较像素的过程。在比较两个像素时，如果RGB的颜色值的差异小于颜色阈值，则可以认为这两个像素是相同的颜色，因此，颜色阈值越高，颜色数量则越少。可以输入一个介于0~500之间的整数值。
最小区域:用于设置在指定像素颜色时要考虑的周围像素的数量。可以输入一个介于1~1000之间的整数值，数值越小效果也越清晰，但是转换的速度也越慢。
曲线拟合:它是决定生成的矢量图的轮廓和区域的粘合程度。在“曲线拟合”下拉列表中选择一个选项，用于确定图形轮廓的平滑程度。
角阈值:可选择一个选项，以确定是保留锐边还是进行平滑处理。
1.4.4 分别制作各部分动画
网站基本规划完成后，就可以开始制作了。一般按照从外到内的顺序制作，也就是按从主页到二级页面再到多级页面的顺序来制作。制作动画需要准备各种素材。素材按照使用方法也可以分为内部素材和外部素材。内部素材一般指的是制作到Flash动画内部的素材；而外部素材往往是通过一些通信方法载入Flash动画的素材。所载入内容大致有以下几种格式。
* SWF文件
将外部内容生成较小的SWF文件。它的优点是使用的ActionScript可能要少一些，易于控制；缺点是不易于更新，每次需要更新时，都要将源文件打开再修改里面的内容。通常使用的方法是用MovieClip.loadMoive()来载入SWF文件。
* TXT文件
网站的多数文本内容都可以以外部的文本进行导入。它的优点是易于更新，只需要修改后台的TXT文本就可以达到更新的目的；缺点是加入图像或调整图像大小时比较复杂。通常可以使用loadVar()来载入外部动态文本。
* XML文件
将网站的内容以XML格式载入。其优点是方便更新，并且能够方便地与其他数据库通信，甚至可以将整个网站全部使用结合XML的方式规划成动态站点，例如常见的新闻、留言板和图片库等。通常使用XML类来载入XML文件。
* MP3文件
在制作Flash网站时，一定少不了背景音乐及各种音效。普遍的做法是将音乐文件内置到Flash文件中，不过还是建议使用外部载入的形式。这种音效大多是MP3格式的，用做载入的两种类型是下载播放和流式播放。如果音乐文件较大，就可以使用流式播放形式，也可以使用sound()内置类。
* FLV文件
在Flash中使用视频的话，最好选用FLV格式的视频文件，因为这种文件格式与Flash配合起来最贴切，可以实现如RM等流式播放的方式。目前很多的视频网站使用的都是FLV格式的视频文件。
在进行网站制作时有一个这样的原则:如果能通过外部载入的就使用外部载入的方式。这样做的目的是尽可能地减小文件的大小，而且又方便日后对网站内容进行更新。
1.4.5 整合动画
整合动画时有很多需要注意的地方。
1．注意所有子文件的长、宽属性
Flash网站从画面层次来看，非常类似Photoshop的层结构，可以把每个子场景看做一个层文件，子文件是在背景的长、宽范围内出现的。为了方便定位，可以让子文件与主场景保持统一的长、宽比例，这样非常便于版面安排，否则就必须用setProperty语句小心控制它们的位置。
2．发布文件时注意将html选项发布为透明模式
需要将每个子文件发布为透明模式。原因是不能让子文件带有背景底色，由于子文件的长、宽比例与主场景基本是一致的，如果子文件带有底色，就会遮盖主场景的内容。设置方法:在发布设置里勾选“html”选项，在html面板里选择“windows mode:Transparent Windowless”。
3．使用文本导入
注意文本文件开头的内容必须是“与文本框属性中Var定义名相同的字符串=正文”。另外需要导入文本的SWF文件与被导入的TXT文本文件最好在同一目录内。
4．导入元素的层级关系
对于Flash网站场景的层级关系，可以从立体的Z轴的角度来看。所谓的Z轴在Flash中可以理解为图层的层级关系。在最底层是_root，它为图层1，向上一层为图层2，依此类推。
1.5 本章小结
本章主要介绍了Flash网站的相关基础知识，包括Flash的发展历史、Flash动画与Flash网站的区别、Flash网站的分类及Flash网站的制作流程。本章主要讲解的是关于Flash网站的基础概念，读者只有在熟悉了Flash网站的相关基础概念，对Flash网站有了更深入的认识后，才能够在后面的学习中更加深入地理解Flash网站的制作。
1.6 课后练习
一、选择题
1．（ ）年，一个名为FutureSplash Animator 1.0的小软件由一家名为FutureWave Software的小软件公司推出。
（A）1886年
（B）1986年
（C）1996年
（D）2006年
2．（ ）年，Macromedia公司被Adobe公司收购，Flash 8也成为Macromedia公司推出的最后一个版本。
（A）1886年
（B）1986年
（C）1996年
（D）2006年
3．（ ），Adobe公司推出了全新的Flash CS3，增加了全新的功能，包括对Photoshop和Illustrator文件的本地支持，以及复制、移动等功能，并且整合了ActionScript 3.0脚本语言开发，Flash CS3的功能更加强大。
（A）1887年
（B）1987年
（C）1997年
（D）2007年
4．默认的Flash影片帧频是多少？（ ）
（A）10
（B）12
（C）15
（D）24
二、填空题
1．Flash动画与Flash网站的区别是______________。
2．Flash网站大体可分为______________几类。
3．________________推出了________________。自Flash 5.0开始，Macromedia就已经将Flash的发展方向更多地移向了多媒体和Web应用开发领域，而不再仅仅局限于交互式动画制作的范围。