1、网页设计与制作,第10章 Flash动画的制作,实例导入：制作FLASH MTV,10.1,Flash 概述,10.2,Flash的基本功能,10.3,Flash应用基础,10.4,综合实例：制作FLASH MTV,10.5,Flash是当前最流行的交互式矢量动画制作软件，用它制作出来的Flash动画具有极丰富的表现力。Flash可以制作导航按钮、具有声音效果的动画、动画横幅、MTV以及整个Flash站点。例如：知名站点可口可乐，如图所示。【本章学习目的】 本章通过多个Flash实例进行由浅入深的讲解，重点介绍了矢量图的制作、特效文本处理、添加Flash声音以及ActionScipt的初步应用
2、，通过本章的学习，掌握如何处理矢量图形、制作矢量动画，掌握如何添加声音、使用动作控制Flash内容和集成Flash影片，了解ActionScript脚本语言创建交互界面。,10.1实例导入：制作FLASH MTV,【例10.1】利用Flash技术制作图文声并茂的FLASH MTV，如图所示。 主要涉及到以下知识点：进行画面布局；制作运动渐变和形状渐变；制作按钮；载入其它的swf文件；添加ActionScript脚本语言创建交互界面；集成Flash影片。,10.2Flash 概述,10.2.1 FLASH的工作界面1.“启动”界面在启动Flash 8.0时，出现“启动”界面，使用“启动”界面用户
3、可以快速完成最常用的操作，如图所示。,2. 操作界面 主要由“菜单”栏、工具箱、时间轴、舞台、“属性”面板、集成工作面板等构成，如图所示。,10.2.2Flash的基本操作,对于Flash文档编辑和操作主要有以下几个方面： 1. 新建文档 选择“文件” 菜单“新建”命令，或按下快捷键Ctrl+N，或单击“启动”界面中创建新项目中的“Flash文档”。 2. 打开文档 选择“文件” 菜单“打开”命令，或使用快捷键Ctrl+O，或单击启动界面中打开最近项目中的某个文档或“打开”。 3. 保存文档 选择“文件”菜单“保存”命令，或使用快捷键Ctrl+S。文档在编辑过程中要及时保存，Flash文档的扩
4、展名为*.fla。 4. 发布影片 制作好的Flash动画最终要发布出来或者嵌入到网页中。Flash软件支持多种能够在网页中播放的文件格式。,10.3Flash的基本功能,Flash的基本功能主要包括：绘图和填充、文字处理、创建动画元件和实例、使用动作控制内容、添加声音和集成电影等。,10.3.1绘图和填充,Flash提供了多种绘图和填充工具，可以用来绘制直线、形状和路径以及编辑操作。1.笔触与填充 单击某个“绘图”工具时，在“属性”面板中可设置形状或路径的笔触和填充。如果需要更多的填充效果，选择“窗口”菜单“混色器”命令，在“混色器”面板中可选择类型。,2. 绘制基本几何形状 在Flash中
5、使用“直线”工具绘制直线，使用“椭圆”工具绘制椭圆，使用“矩形”工具绘制矩形，使用“多角星形”工具绘制多边形或星形。 （1）绘制直线：单击“直线”工具，在“属性”面板中设置笔触颜色、笔触高度、笔触样式。按住Shift键，绘制呈倾斜度为45倍数的直线。 （2）绘制椭圆：单击“椭圆”工具，在“属性”面板中设置笔触和填充颜色。在舞台上拖动鼠标左键绘制椭圆，按下Shift键绘制正圆形，按下Alt键以当前点为圆心绘制圆形，快捷键可组合使用。 （3）绘制矩形：单击“矩形”工具，在“属性”面板中设置笔触和填充颜色，在舞台上拖动鼠标左键绘制矩形形状，按下Shift键绘制正方形，按下Alt键以当前点为中心绘制矩
6、形，快捷键可组合使用。 （4）绘制“多边形”工具，单击“多角星形”工具，在“属性”面板中设置笔触和填充颜色，单击“选项”按钮，弹出“工具设置”对话框，设置样式（选择多边形和星形）、边数和星形顶点大小。,3. 绘制曲线 用“钢笔”工具 可以绘制直线、光滑的曲线和任意形状的图形。单击“钢笔”工具，在舞台上单击可创建一个节点，连续单击可创建折线。在舞台上单击并拖动鼠标可创建曲线，用“部分选取”工具选中节点，出现一个控制柄，拖动控制柄，控制柄的长度和方向决定曲线的弯曲程度。,4. 用“铅笔”工具绘图 使用“铅笔”工具，绘画的方式与使用真实铅笔大致相同。要在绘画时平滑或伸直线条和形状，您可以给“铅笔”工
7、具选择一种绘画模式。在“工具”面板的“选项”区域，选择一种相应“铅笔”工具功能键。 5.用“笔刷”工具绘图 “笔刷”工具 能绘制出笔刷般的笔触，就像您在涂色一样。使用“刷子”工具功能键选择刷子大小和形状。,6. 对象的操作选取对象：单击“选择”工具，单击舞台上的任意对象，选中对象，按下shift键可同时选中多个对象，或按住鼠标左键，在舞台上绘制一个矩形区域，选中某个图形的一部分。调节直线和节点位置：选中对象后，当“选择”工具靠近图形某条边线时，“选择”工具的箭头处出现一条曲线 ，拖动边线变成曲线。当“选择”工具靠近某个节点，“选择”工具的箭头处出现两条相交的直线 ，可拖动节点，改变节点的位置。
8、移动节点：用“部分选择”工具，单击节点，拖动。角点、曲线点之间的转换：角点转换为曲线点：单击角点，按住Alt键拖动。曲线点转换为角点：单击“钢笔”工具，靠近曲线点，钢笔工具显示为 ，单击该曲线点。添加节点：单击“钢笔”工具，靠近线段要添加节点的位置，这时指针会显示为 ，单击。删除节点：单击“钢笔”工具，靠近节点的位置，这时指针会显示为 ，单击。调节路径：单击“部分选择”工具，单击节点，调节控制柄的长度和方向可调节曲线。,7.缩放和旋转对象 选中对象，缩放和旋转对象，常用的方法有三种： 方法一：单击“任意变形”工具 ，选择工具箱下方的“选项区域”相应功能键：旋转与倾斜 、缩放 、扭曲 和封套 ，
9、可对图形进行变形。 8.辅助工具的使用 在绘图过程中，为了精确，常会用到辅助绘图工具，例如：“缩放”工具 、“手形”工具 、网络、标尺、辅助线等。还可选择“视图”菜单中“网络”、“标尺”、“辅助线”命令。,9.排列、对齐、组合和取消组合 排列：选中对象，选择“修改”菜单“排列”选项某种排列命令，改变对象的层叠顺序。 对齐：选中多个对象，选择“窗口”菜单“对齐”命令，打开“对齐”面板，然后单击对齐方式某个按钮。 组合和取消组合：使用“组合”命令，可将多个元素作为一个对象来处理。选中多个对象，选择“修改”菜单“组合”命令，多个对象组合为一组。选中一组对象，选择“修改”菜单“取消组合”命令，恢复为多
10、个单个对象。,10.3.2位图操作,1. 导入位图 Flash不仅可以绘制各种形状的矢量图形，也可以导入多种格式的位图，如：JPG、GIF、PNG格式等。 选择“文件”菜单“导入”“导入到舞台”命令，直接将位图导入到舞台中，选择“导入到库”命令，则将位图导入到“库”面板中，舞台中并没有出现。 2. 使用位图填充 使用已导入的位图可以对绘制好的图形进行填充，在“混色器”面板中，单击“类型”下拉框，选择位图填充时，已导入的位图将显示在下方的列表区域中，选择某个位图。如果列表区域中没有所需的位图，单击“导入”按钮，弹出“导入到库”对话框，选择本地计算机上的位图图像，并将其添加到库中。 3. 分离位图
11、 在舞台中导入一幅位图后，不能直接进行编辑，例如用“套索”工具去除位图的背景是无法操作的，只有分离位图后才能操作。 4. 将位图转换为矢量图 将位图转换为矢量图后，就可以将图像当作矢量进行处理。与位图相比，一般矢量图文件较小，因此有利于减少Flash文件的大小。,10.3.3处理文本,在Flash中，文本和矢量图形一样是必不可少的。Flash文本的特效设计会为Flash动画增色不少。 Flash文本的类型分为三种：静态文本字段、动态文本字段和输入文本字段。在Flash动画即可创建包含静态文本的文本块，即在创作文档时确定其内容和外观的文本；也可创建动态或输入文本字段。动态文本字段显示动态更新的文
12、本，如体育得分或股票报价等；另外还可创建输入文本字段允许用户为表单、调查表或其他目的输入文本。本小节内容主要介绍静态文本的处理。1.输入文本 单击“文本”工具 ，在“属性”面板中设置文本属性，将鼠标移动到舞台上单击，出现一个文本框，光标在文本框中闪烁，输入文本，如果换行，按回车键。文本输入完成，将鼠标在文本框以外任意处单击，完成文本输入。,2.设置文本属性 在输入文本前，单击“文本”工具，在“属性”面板中设置文本属性，然后再输入文本，或输入文本后，单击“选择”工具，选中文本，在“属性”面板中设置文本属性。可设置文本的字体、字号、样式、颜色以及段落的对齐方式、边距、缩进和行间距，还可为横排文本添
13、加链接路径。,10.4 Flash 应用基础,使用Flash制作动画影片的流程一般是先制作动画中所需要的各种元件，然后在舞台中使用（被称为实例），进行适当的组织编排，在这个过程中可以添加声音，可以使用动作使Flash影片能够响应特定事件，从而获得交互效果，影片制作完成后，将其导出为一个可嵌入网页swf格式的文件。因此，元件是Flash中用的最多的对象。本节将通过一系列的实例介绍Flash动画的制作方法和技巧，能够掌握Flash动画制作的原理和方法，最主要的是培养创造性的设计能力。,10.4.1场景、元件与实例,1.使用场景 当Flash文件很复杂时，需要很多场景，并且每个场景中的对象可能都不同
14、，Flash可以将多个场景中的动作组合成一个连贯的电影。swf文件中的场景将按照电影在场景检查器中所列出顺序依次播放。 添加场景：“插入”菜单“场景”命令。 删除场景：“插入”菜单“删除场景”命令。2.元件和实例 元件是存放在库中的可反复取用的图形、动画、按钮和音频。当用户创建一个元件时，元件就存储在文件的“库”面板中，“库”面板对元件进行有效地组织和管理，还可建立文件夹，将元件分类存放在文件夹中。将元件从库拖入舞台，就生成了一个实例。元件的类型：图形、影片、按钮三种。,图形：可反复取用的图片，用于构建动画主时间轴上的内容。一般只含有一帧静止图片。不能对它添加交互行为和声音控制。影片剪辑：代表
15、可反复取用的一段小动画。可独立于主时间轴进行播放。不能添加相互控制。按钮；用于创建动画的交互控制按钮。可响应事件，添加交互动作。,3.创建元件创建元件的方法比较多，下面介绍常用的三种方法。方法一：选中场景中的对象，选择“修改”菜单“转换为元件”命令，或按下快捷键F8，弹出“转换为元件”对话框，输入名称，选择类型，单击“确定”按钮。方法二：选择“插入”菜单“新建元件”命令，或单击“库”面板下方的“新建元件”按钮，弹出“新建元件”对话框，输入名称和选择类型，单击“确定”按钮，进入到元件的编辑界面。方法三：Flash有一个公用库。选择“窗口”菜单“公用库”选项“学习交互或按钮或类”命令，打开“公用库
16、”面板后，选中元件，拖入到当前文档的“库”面板中。,4. 编辑和使用元件 编辑元件：打开“库”面板，选中某个元件，双击鼠标左键，进入到元件的编辑状态，或在舞台上双击实例，进入到元件的编辑状态。 使用元件：创建元件后，就会保存在“库”面板中，选择“窗口”菜单“库”命令，或按下Ctrl+L组合键或F11键，打开“库”面板，选中元件拖至舞台中。 实例的应用：元件拖放到舞台中，即称为实例，在“属性”面板中，可对实例进行相应的属性设置，例如：实例行为、大小、名称、动画播放方式、颜色等，如图所示。,10.4.2帧与关键帧,Flash动画是由多帧组成的。帧就是动画在播放过程中，不同时间内动画内容的载体。帧分
17、为普通帧、关键帧、空白关键帧。如图所示。关键帧：定义了动画变化的帧，也可以说是包含了帧动作的帧。在时间轴中是一个实心的小黑点。空白关键帧：没有内容的关键帧。在时间轴上是一个空心的小圆圈。普通帧：又称为相同帧，与前一个关键帧的内容相同，是灰色的帧。相同帧空白关键帧关键帧过渡帧过渡帧：两个关键帧之间定义了动画的紫蓝色的帧，它使得动画过程更流畅。,10.4.3图层,图层用于有效地组织电影元素，使元素之间不至于相互干扰，如图所示。 1. 图层的分类普通层：当创建一个新的Flash文档后，它就包含一个普通层，它是Flash中应用最多的图层。引导层：利用引导层可以制作沿路径运动的动画。遮罩层：遮住下面层的
18、内容，透过建立的矢量图形可以看见下面图层的内容。,2. 图层的操作插入图层：在时间轴左下方单击“插入图层”按钮，就添加了一个普通层，单击添加引导层则添加一个引导层。改变图层的属性：选中图层，单击鼠标右键，在弹出菜单中选择“属性”命令，弹出“属性”对话框，设置图层的属性，如图10.33所示。插入图文件夹：将图层分类放在文件夹进行组织管理。删除图层：不需要的图层时，单击“删除图层”按钮。图层的显示或隐藏，单击层，单击眼睛图标位置，出现红叉，表示隐藏，黑色圆点表示显示。图层的锁定：单击层，单击锁定层下方，出现锁的标志，表示锁定层，黑色圆点表示解锁。,10.4.4创建动画,用户通过改变连续帧的内容来实
19、现动画，例如穿梭移动、放大或缩小、旋转、变色、淡入淡出以及改变形状等。 有两种方法可以在Flash中创建动画序列，一种是帧并帧动画，另一种是渐变动画，又称为补间动画。渐变动画又分为形状渐变和运动渐变两种。 1.帧并帧动画 要创建帧并帧动画，必须为每一帧都定义关键帧，并且修改关键帧中的内容。如图所示。,2. 运动渐变 运动渐变，即对象在画面中移动，同时也可以改变它的大小、形状、颜色、位置等，产生旋转、动态切换画面等效果。,3. 沿路径移动的动画 运动引导层允许用户绘制一条曲线作为动画路径，动画中的实例、组合体或文本块将沿着这条曲线运动。用户可以将多个层链接到一个运动引导层上，使多个对象按照相同的
20、路径运动。一个链接到运动引导层的普通层将变成被引导层。,4.形状渐变 使用形状渐变可以创建和变形相类似的效果，以某个形状出现，随着时间推移，最开始的形状逐渐变形另一个形状，选择“修改”菜单“形状”“添加形状提示点”命令，控制形状渐变的效果。同时形状的位置、大小、颜色产生渐变效果。,5. 使用遮罩层制作动画 遮罩层就是将下面的层全部遮住，然后通过在遮罩层中添加形状，形状类似于洞，透过洞看到下面层的内容，链接到遮罩层的普通层就是被遮罩层。利用“遮罩”效果，可以制作许多特效，如：水波、万花筒、放大镜、望远镜、探照灯等。,6. 按钮的制作 按钮可以显示不同的图像或动画，分别响应不同的鼠标状态，这样，当
21、用户使用鼠标产生单击、按下或悬停在按钮之上等动作时，按钮都会有不同的显示效果。要使按钮在电影中产生交互，可将按钮符号的实例放置在舞台上，然后给实例分配动作。,7. 为动画添加声音 在Flash中有两种类型的声音：事件声音和音频流。事件声音必须完全下载后才能开始播放，除非明确停止，它将一直连续播放。音频流在前几帧下载了足够的数据后就开始播放；音频流可以通过和时间轴同步以便在Web站点上播放。 事件声音一般用于按钮或者是固定动作中的声音。而音频流一般应用于背景音乐、MTV的制作。 导入声音文件的格式一般有：WAV（仅限 Windows）、AIFF（仅限 Macintosh）、MP3（Windows
22、 或 Macintosh）等，还可设置声音的效果属性可以创造更优美的音效。,8. 有关声音属性的设置在“属性”面板中，单击“声音”下拉列表中选择声音文件。从“效果”下拉框中选择效果选项：无：不对声音文件应用效果。选择此选项将删除以前应用的效果。左声道右声道：只在左声道或右声道中播放声音。从左到右淡出从右到左淡出：会将声音从一个声道切换到另一个声道。淡入：在声音的持续时间内逐渐增加音量。淡出：在声音的持续时间内逐渐减小音量。自定义：允许使用“编辑封套”创建自定义的声音淡入和淡出点。,从同步下拉列表中选择同步选项： 事件：会将声音和一个事件的发生过程同步起来。事件声音在显示其起始关键帧时开始播放，
23、并独立于时间轴完整播放，即使 SWF 文件停止播放也会继续。当播放发布的SWF文件时，事件声音混合在一起。开始：与事件选项的功能相近，但是如果声音已经在播放，则新声音实例不会播放。停止：使指定的声音静音。,流：同步声音，以便在Web站点上播放。Flash 强制动画和音频流同步。与事件声音不同，音频流的播放时间绝对不会比帧的播放时间长。当发布SWF文件时，音频流混合在一起。为“重复”输入一个值，以指定声音应循环的次数，或者选择“循环”以连续重复声音。对于音频流不建议循环播放。利用“声音编辑控件”编辑声音在Flash中可以对声音进行一些简单的编辑，比如控制声音的播放音量、改变声音开始播放和停止播放
24、的位置等。单击“属性”面板中效果右侧的“编辑”按钮，弹出“编辑封套”对话框，如图所示，在此对话框中编辑声音。,10.4.5Flash动画中的交互控制,在Flash 8.0中，借助于ActionScript来实现程序化的交互动画。如：网络游戏、动态网站等。动作面板介绍 用ActionScript进行编程需要用到“动作”面板，“动作”面板是专业编写脚本程序的开发环境。选择“窗口”菜单“动作”命令，或单击快捷键F9，打开“动作”面板，动作面板由两部分组成：左侧是一个“动作”工具箱，每个动作脚本语言元素在工具箱中都有一个对应的条目，右侧为“脚本”窗格，是输入代码的区域，如图所示。单击左侧下方的箭头，显
25、示脚本导航器。单击右侧“脚步助手”按钮，显示隐藏代码提示。,2. 动作脚本基本元素分号动作脚本语句以分号；结束，例如：Stop();大括号动作脚本有时需要将几行代码组合到块中。这就需要使用大括号。用户可以在与开始代码同一行或下一行上放置一个开始大括号。如：On(release) getURL(“index1.htm”,”_blank”);,3.ActionScript基本语句（1）时间轴控制命令打开“动作”面板，单击全局函数时间轴控制，可以看到9条命令。Gotoandstop和gotoandplay命令gotoandplay(scene,frame)：将播放磁头转到指定场景中指定帧并从该帧开始
26、播放。Scene：场景的名称，frame：播放磁头将转到的帧的编号或标签。gotoandstop(scene,frame)：将播放磁头转到指定场景中指定帧并从该帧停止播放。stopallSounds命令在不停止播放磁头的情况下停止当前正在播放的所有声音。格式为：stopallSounds()，括号中无参数。Stop和Play命令Play()播放命令，无参数。stop()停止播放命令，无参数。,（2）浏览器网络命令打开“动作”面板，单击全局函数浏览器网络，可以看到9条命令。fscommand命令使swf与其它应用程序互相传达命令。格式为：fscommand(“command”,”paramete
27、rs”)，如：fscommand动作设置Flash Player播放器，释放按钮时，将SWF文件放大到整个显示器屏幕大小。on(release) fscommand(“fullscreen”,true);getURL命令用于建立网页的超级链接，格式为：getURL(url,窗口,”方法”)，例如单击某个按钮链接到新浪网on (press) getURL(http:/, _blank);loadMovie命令用于加载外部的SWF文件或JPG图像文件。格式为：loadMovie(url,目标, 方法)，例如：on(press)loadMovie(“products.swf”,1);,10.5综合实
28、例：制作FLASH MTV,本小节讲解【例10.1】Flash MTV的制作过程，通过单击按钮实现播放不同的影片画面和歌曲。实例中综合了图形、文本动画的制作，添加声音文件，利用ActionScript脚本语言实现动画交互，浏览者可以随心所欲地点听自己喜欢的歌曲。,本 章 小 结本章主要介绍了Flash软件的使用。使用Flash创建文本、编辑位图和矢量图形、处理Flash文本特效。使用Flash创建形状渐变动画和运动渐变动画。为Flash文件添加声音效果，利用Flash动作面板，制作交互动画。,本章练习题1. 选择题（1）可以放置文档的所有可视资源，其中包括文本、图像、视频和影片的是（ ）。A舞
29、台 B时间轴 C菜单栏 D工具面板 （2）对渐变色填充或位图图像填充进行变形操作，需使用的工具（ ）。A任意变形工具 B填充变形工具 C油漆桶工具 D墨水瓶工具（3）使用“选择”工具，放在一个矩形线条上时会变成一个（ ）。A方形箭头 B带圆弧线的箭头 C带弯角的箭头 D空白箭头2. 简答题Flash文档的扩展名是什么？导出默认的Flash影片的扩展名是什么？Flash动画的原理是什么？制作Flash动画的关键在哪里？Flash动画分为哪几种？有什么样区别？什么是元件实例？元件与实例的区别和联系是什么？遮罩层的作用是什么？引导层的作用是什么？,上 机 实 训1. 背景知识根据本章所学的Flash
30、的基本知识，同时结合Fireworks的相关知识以及本教材中所讲过的页面布局和修饰的技巧，还要注意色彩制作过程中的应用等。2. 实训准备工作将相应的Flash的样图、素材，如：音频、视频、位图等文件，发送到学生主机中，以供学生参考使用。3. 实训要求（1）制作形状渐变动画要求：根据给定素材，利用形状渐变制作动画效果。（2）制作运动渐变动画要求：根据给定的素材制作蝴蝶在花丛中左飞右飞的效果。（3）制作沿路径运动动画要求：利用运动引导层的功能和逐帧动画的效果，制作光束书写文字的效果。（4）制作利用遮罩层的动画要求：利用遮罩层的功能制作霓光灯效果。（5）制作MTV动画要求：设计画面，添加声音，利用交互动作，制作流畅的Flash MTV。4.课时安排：8课时。,
