《网页设计与制作教程》-第十五章讲稿

第十五章Flash初步Flash与Fireworks和Dreamweaver并称为网页三剑客。Flash是一款专业化的网页动画设计和制作工具，开发人员应用Flash可以创建出所需的网页动画、网络游戏和各种基于数据驱动的应用程序。Flash已经成为主流的网页动画开发工具。15.1Flash8的概述Flash是运用矢量图技术实现交互动画的软件，可以将图片、声音和视频融合到一起制作一个精美的交互式动画，动画小巧，非常适合在互联网上传输。FLASH二维动画采用了矢量图和流媒体技术，因此，调整动画大小不会影响到图像质量。15.1Flash8的概述使用矢量图制作的动画或影片占用存储空间较小，便于嵌入到网页里。Flash提供强大的绘图和编辑图形的功能，再结合强大的补间动画功能可以快速地制作出精美的网页动画。15.1Flash8的概述ActionScript是设计Flash应用程序的脚本语言，通过ActionScript可以设计各种复杂度的交互性应用程序，可以对各种Flash对象进行操作和控制，例如图像、影片剪辑和按钮等。使用Flash创建的动画文档扩展名为“.fla”，Flash文档主要包括舞台、时间轴、库面板和ActionScript。15.1Flash8的概述使用Flash创作完成一个动画之后，可以将动画导出，Flash会创建一个扩展名为“.swf”的动画文件。导出成功后，可以使用FlashPlayer或Web浏览器中的Flash播放器插件播放SWF文件，或者将其制作成独立的应用程序进行播放。15.1.1Flash8的特点Flash8在继承早期版本优点的基础上，进行了较大的改进，在很大程度上提高了动画交互性和灵活性。Flash8还提供了功能强大的ActionScript动作脚本，并且还增加了对组件的支持，更加方便了用户的使用。15.1.1Flash8的特点与其它动画软件相比Flash软件的特点如下：

Flash是一种交互的矢量动画

为适应网络应用技术的发展，Flash提供一种全新的交互式动画技术，使用Flash可以将图片、声音和视频融合到一起制作一个精美的交互式动画，例如，网络游戏和各种应用程序。Flash通过ActionScript动作脚本技术实现各种交互行为处理，并且Flash提供了事件响应处理机制来实现交互性，它可以对各种事件作出反应。例如：单击鼠标事件、释放鼠标事件、键盘动作等。15.1.1Flash8的特点流式播放技术

Flash采用了矢量图和流媒体技术制作和传输动画，动画文件占用空间小，非常适合在互联网上传输，也可以通过在线的形式欣赏动画。。15.1.1Flash8的特点FLV（FlashVideo）是目前最为流行的网络视频格式，Youtube、土豆、56网、六间房等大型视频类网站主要采用的格式。FLV具有影像版权保护功能，良好的跨平台兼容性以及播放器广泛性和易获取性。15.1.1Flash8的特点强大的多媒体功能

Flash将音乐、动画、声效、交互方式融合在一起，能够创作出许多令人叹为观止的动画效果。Flash可以添加MP3格式的音乐，在增强音乐效果的同时文件却没有明显增大。通过ActionScript动作脚本技术实现灵活的交互界面，使Flash能适应更多的网络应用程序设计需求。与Dreamweaver良好的结合性，使Flash创作的动画可以直接嵌入网页的任一位置，既方便又快捷。15.2Flash8的操作环境Flash8提供了一个良好的“可视化”的动画编辑环境，可以同时对多个Flash文档进行管理，在Flash开发环境的右侧是常用的功能面板组，设计者可以对面板进行个性化的分组管理。15.2.1Flash8工作界面简介Flash8开发界面主要包括菜单栏、绘图工具栏、时间轴、舞台、层管理面板、属性面板和功能面板组，如图15-1所示。

图15-1Flash8工作界面15.2.1Flash8工作界面简介菜单栏Flash菜单栏又称主工具栏，几乎所有的操作都可以通过菜单命令来完成。Flash8的菜单栏主要包括10个菜单项，分别是文件、编辑、视图、插入、修改、文本、命令、控制、窗口和帮助。15.2.1Flash8工作界面简介执行菜单中的命令有以下几种方法：

通常使用鼠标单击的方法打开菜单项执行相应的命令。

通过组合键打开菜单项，有些菜单项的后面都有一个括号括起来的大写字母（例如，文件菜单后面的括号内为F），表示Alt键与括号中的字母组合可以打开相应的菜单项。15.2.1Flash8工作界面简介通过快捷键打开菜单项，有些菜单项后面显示有快捷键，按下该快捷键即可执行此项菜单的命令。

有些菜单项后面显示有黑色向右三角标志，表示此菜单项包含子菜单。

有些菜单项后面显示有“…”标志，表示点击此菜单项会打开一个对话框。

15.2.1Flash8工作界面简介绘图工具栏

Flash绘图工具栏里提供了用于绘制和编辑的各种工具，绘图工具主要分为四部分：工具区、查看区、颜色区和选项区。

15.2.1Flash8工作界面简介工具区

工具区中各按钮的名称和功能如下：

“选择”工具主要用于选取和移动对象，也可以改变对象边缘，鼠标移动到图形边缘图标变为时，可以拖曳鼠标使图形变形。

“部分选取“工具主要用于选取对象，可以局部修改图形边缘，鼠标移动到图形边缘图标变为时，选中图形上节点，可以拖曳鼠标使图形发生局部变形。

15.2.1Flash8工作界面简介“任意变形“工具主要对图形进行缩放、扭曲和旋转变形。

“填充变形“工具主要向封闭区域填充渐变色，并调整渐变色范围和形状。

“线条“工具主要用于绘制各种直线。

“套索”工具主要用于选择一个不规则区域。

“钢笔”工具主要用于绘制精确、光滑的曲线，并可以调整曲线曲率。15.2.1Flash8工作界面简介“文本”工具主要用于添加文本信息。

“椭圆”工具主要用于绘制椭圆和圆。

“矩形”工具主要用于绘制矩形和正方形。

“铅笔”工具主要用于绘制出比较柔和的曲线，绘制的曲线可以作为图形的轮廓线。

“刷子”工具主要用于绘制各种曲线。15.2.1Flash8工作界面简介“墨水瓶”工具主要是对图形轮廓线的颜色进行填充。

“颜料桶”工具主要用于封闭区域的颜色填充。

“滴管”工具主要用于将舞台中已有对象的一些绘图属性赋予当前绘图工具。

“橡皮擦”工具主要用于擦除已经绘制的对象，可以对橡皮擦的形状进行修改。

15.2.1Flash8工作界面简介查看区

“手形”工具主要用于移动场景画面，以便更好地观察所有场景内对象。

“缩放”工具主要用于改变舞台画面的显示比例。选定该按钮后单击舞台将会增大显示比例，按下Alt键的同时单击舞台，将缩小显示比例。

15.2.1Flash8工作界面简介颜色区

“笔触颜色”工具主要用于调整图形边框线条的颜色。

“填充色”工具主要用于设置所绘制的闭合区域的填充色。

“基本设置”工具主要用于设置默认颜色、不绘制边框、不填充和交换色彩。

15.2.1Flash8工作界面简介选项区

选项区主要用于设置当前选定绘图工具的属性，选定的绘制工具不同，选项区中显示的内容也不同，可以在选项区对选中的绘图工具的属性进行修改。例如，选定“刷子”工具后，选项区如图15-2所示：

图15-2选项区15.2.1Flash8工作界面简介舞台和场景

舞台是设计开发动画的工作区域，创建一个新的Flash文档，工作区内白色的矩形区域就是舞台。Flash将当前编辑的动画内容的整个区域称为场景，用户可以在整个场景内进行图形的绘制和编辑工作。在Flash中，用来制作动画的区域被称为舞台（默认情况下的白色部分），将舞台周围的灰色区域称为工作区，舞台和工作区域共同组成一个场景。

15.2.1Flash8工作界面简介时间轴窗口

时间轴是控制Flash动画播放顺序的关键工具，也是进行动画创作和内容编排的主要场所，既是一个时序控制工具，又是一个动画场景管理工具。时间轴是处理帧和层的主要工具，帧、层和时间轴是动画的主要组成部分，如图15-3所示时间轴。图15-3时间轴15.2.1Flash8工作界面简介时间轴由若干帧序列、信息栏以及一些工具按钮组成，主要用来设置动画的执行效果。信息栏显示当前帧的帧频率以及预计播放时间。图15-3所示信息栏中的数据“1”表示当前帧为第一帧，“18.0fps”表示帧频率，即18帧/秒，也就是动画的播放速度，“0.0s”表示预计播放时间。

15.2.1Flash8工作界面简介时间轴控制区上各按钮的作用如下：

“帧居中”按钮表示当前帧在控制区窗口居中显示。

“绘图纸外观”按钮表示显示所有帧中的所有内容。

“绘图纸外观轮廓”按钮表示除当前帧以外，其余帧上的内容只显示对象的轮廓。

“编辑多个帧”按钮表示可以同时编辑时间轴上的多个帧中的内容。

“修改绘图纸标记”按钮表示在多个绘图纸标记里选择一个。15.2.1Flash8工作界面简介图层面板

图层面板用于控制和管理Flash动画中的图层，与时间轴结合可以对不同图层的时间轴进行管理。图层面板上各按钮的作用如下：

“插入图层”按钮表示增加一个新图层。

“添加运动引导层”按钮表示增加一个引导层。

“插入图层文件夹”按钮表示增加一个图层文件夹。

“删除图层”按钮表示删除选定层。

“显示/隐藏所有图层”按钮表示显示或隐藏所有的图层。

“锁定/解除锁定所有图层”按钮表示锁定或解锁所有图层。

“显示/隐藏图层轮廓”按钮表示显示或隐藏图层的所有轮廓。15.2.1Flash8工作界面简介属性面板

Flash通过属性面板来对相关属性进行设置和编辑。属性面板由“属性”选项卡，“滤镜”选项卡以及“参数”选项卡组成。如图15-4所示可以单击标签切换到“滤镜”面板或“参数”面板。

图15-4属性面板15.2.1Flash8工作界面简介图库面板

Flash将图形、影片剪辑和按钮都制作成元件，这样可以重复使用元件，并且对元件进行修改时引用元件的动画会自动修改。Flash将这些重复利用的元件放到库里，就是元件库，库面板可以对库内的元件进行管理。Flash包含库和外部库，库存储的元件只能用于当前动画，而外部库可以应用于多个动画。Flash支持将图形、按钮和影片剪辑导入到当前库中。【例15-1】制作了一个蓝色小球元件存储于元件库中，元件库如图15-5所示。

图15-5库面板15.2.1Flash8工作界面简介颜色面板

Flash颜色面板主要实现对笔触和填充颜色的管理，“颜色”面板由“混色器”选项卡和“颜色样本”选项卡两部分组合而成。“混色器”面板主要用于修改和编辑笔触颜色、填充色以及多色渐变填充色，“颜色样本”面板主要用于显示和选择作为样板的颜色，如图15-6所示。

图15-6颜色面板15.3Flash8中的几个基本概念学习Flash之前必须要掌握几个基本的概念：帧、图层、元件和库，它们是设计Flash动画的基本元素。15.3.1帧帧是构成Flash动画的基本单位，Flash动画就是连续的播放帧画面形成动画效果，Flash的帧就相当于电影胶片中的一个画面。图15-7Flash帧与时间轴15.3.1帧帧的分类

Flash根据帧在动画中所起的作用，将其分为：“静态帧”和“关键帧”，静态帧包括普通帧和过渡帧。

15.3.1帧静态帧：

静态帧是延续前一个关键帧上的内容，不能对其内容进行编辑操作。当普通帧前面的关键帧发生变化时，普通帧内容随之变化。过渡帧是两个关键帧之间的帧，它们是起始关键帧到结束关键帧中动作变化的过渡部分，过渡帧的内容同时受到起始帧和终止帧的影响。15.3.1帧关键帧

Flash中的关键帧是定义一个动画的起始帧和终止帧，在起始帧与终止帧之间Flash可以自动生成过渡帧。如果关键帧中没有添加任何对象，将其称为空白关键帧。15.3.2帧的操作插入帧

创建一个新的Flash文档时，Flash时间轴上的帧，除第一帧之外，其它帧内没有任何对象，将其称为“空白帧”。

15.3.2帧的操作删除帧Flash删除帧时，首先选中需要删除的帧，点击“右键”菜单，执行“删除帧”命令，即可将其删除。如图15-8所示。

图15-8删除帧15.3.2帧的操作插入关键帧需要插入关键帧时，在空白帧或静态帧上点击“右键”菜单，执行“插入关键帧”命令，即可插入一个关键帧，关键帧用实心圆点表示，背景为灰色。15.3.2帧的操作插入空白关键帧需要插入空白关键帧时，在空白帧或静态帧上点击“右键”菜单，执行“插入空白关键帧”命令，即可插入一个空白关键帧。空白关键帧用空心圆点表示，背景为白色。15.3.2帧的操作清除关键帧在需要清除的关键帧上点击“右键”菜单，执行“清除关键帧”命令，即可将该关键帧清除。清除关键帧后，关键帧后面的静态帧的内容也会随之消失，变为空白帧。15.3.3图层图层可以看成是一个透明的画布，设计者可以在透明画布上绘制各种图层对象，图层按照一定顺序相互重叠就可以显示整体的内容。15.3.3图层Flash将动画分为多个图层，每个图层的动画相互独立，修改图层中的动画或对象时不会影响到其它图层中的动画和对象，提高了动画编辑的灵活性。

15.3.3图层新建的Flash文档会自动生成一个图层，如图15-9所示。使用图层编辑面板中的“插入”图层按钮可以添加新的图层，通过图层编辑面板可以隐藏、锁定或重新排列图层。可以使用图层编辑面板中的“插入图层文件夹”按钮来创建图层文件夹，将图层分类的放到不同图层文件夹中进行组织和管理，并且可以展开和折叠图层文件夹。

图15-9Flash图层15.3.3图层创建图层

使用图层编辑面板中的插入图层按钮可以添加新的图层。如图15-10所示，创建了3个图层，在图层名称上双击可修改图层的名称。图15-10创建图层15.3.3图层删除图层

Flash删除图层时，首先选中要删除的图层，然后选择图层编辑面板中的“删除”图层按钮，即可删除选中图层。

15.3.3图层创建图层文件夹

Flash创建图层文件夹时，首先选中创建图层文件夹下面的图层或图层文件夹，然后选择图层编辑面板中的“插入图层文件夹”按钮，就可以在选定图层或图层文件夹上面插入一个新的图层文件夹。15.3.3图层隐藏图层

Flash动画设计过程中，有时为了编辑方便——防止其它图层的视觉干扰，需要暂时将一些图层的对象隐藏起来，图层被隐藏后，其中的对象在设计场景里处于不可见状态。

15.3.3图层锁定图层

Flash设计动画时，为了防止修改图层中对象时，影响其它图层的内容，需要暂时将不需要修改的图层设置为锁定状态。这样就可以实现多个图层的内容独立编辑的功能。15.3.4元件Flash制作动画时，将组成动画的若干元素分别设置为元件，每个元件相互独立。修改Flash动画时只对指定的元件进行修改，Flash以模块化设计的方式制作和编辑Flash动画。15.3.4元件图形元件

图形元件就是将Flash设计的或导入的图形和图像转换为独立的和可重用的元件。Flash创建元件的方法有两种：直接创建图形元件和将图形或图像转换为图形元件。

15.3.4元件直接创建图形元件

创建图形元件时，选择菜单栏的【插入】→【新建元件】命令，弹出【创建新元件】对话框，并选择“类型”单选按钮为“图形”，并在“名称”文本框中输入元件的名称，如图15-11所示。制作的图形元件并没有出现在工作区中，它被自动地保存在元件“库”中，如图15-12所示。

图15-11创建元件图15-12元件库15.3.4元件图形转换为图形元件

将图形转换为图形元件时，首先要在设计场景选中要转换为元件的图形，然后选择菜单栏的【修改】→【转换为元件】命令，弹出【转换元件】对话框，并选择“类型”单选按钮为“图形”，并在“名称”文本框中输入元件的名称。如图15-13所示。

图15-13图形转换为元件15.3.4元件影片剪辑元件

制作影片剪辑时，选择菜单栏的【插入】→【新建元件】命令，弹出“创建新元件”对话框，在“类别”单选按钮中选择“影片剪辑”，在“名称”文本框输入影片剪辑元件的名称。如图15-14所示。

图15-14影片剪辑元件15.3.4元件按钮元件

Flash提供按钮制作功能，按钮是动画中实现交互性的主要元件。制作按钮元件时，选择菜单栏的【插入】→【新建元件】命令，弹出“创建新元件”对话框，在“类别”单选按钮中选择“按钮”，在“名称”文本框输入按钮元件的名称。如图15-15所示。

图15-15创建按钮元件15.3.5库Flash库用于存储各种类型的元件，库中的元件可以重复使用，简化了动画设计，并且不会增加Flash动画的大小。Flash提供了“库”面板对库中的元件进行管理，选择菜单栏中的【窗口】→【库】命令，在右侧功能面板组区域弹出库面板。如图15-16所示。

图15-16导入元件到库15.4制作第一个Flash动画Flash动画根据实现方法来分，可以分为逐帧动画和补间动画。逐帧动画就是动画的每一帧的内容都由动画设计者来完成，因此动画比较自然生动，但制作效率较低。15.4.1逐帧动画【例15-3】制作了一个企鹅走路的逐帧动画，如图15-17所示。

图15-17逐帧动画15.4.1逐帧动画创建影片文档新建Flash文档，选择菜单栏的【文件】→【新建】命令，在弹出的新建文档对话框中选择【常规】→【Flash文档】选项后，点击【确定】按钮，新建一个Flash文档如图15-18所示。

图15-18创建新文档15.4.1逐帧动画创建动画绘制图层1的第1帧

首先选择图层1第1帧，点击菜单栏的【文件】→【导入】→【导入到舞台】命令，选择位图图像first.bmp并导入，如图15-19所示。

绘制图层1的第2帧

首先选择图层1第2帧，点击鼠标右键，选择【插入空白关键帧】，在时间轴上产生第2帧，然后点击菜单栏的【文件】→【导入