《网页设计与制作》.

Presentation on theme: "《网页设计与制作》."— Presentation transcript:

1 《网页设计与制作》

2 第10章 Flash动画的制作 实例导入：制作FLASH MTV Flash 概述 Flash的基本功能 Flash应用基础
10.1 实例导入：制作FLASH MTV 10.2 Flash 概述 10.3 Flash的基本功能 10.4 Flash应用基础 10.5 综合实例：制作FLASH MTV

3 　　Flash是当前最流行的交互式矢量动画制作软件，用它制作出来的Flash动画具有极丰富的表现力。Flash可以制作导航按钮、具有声音效果的动画、动画横幅、MTV以及整个Flash站点。例如：知名站点可口可乐，如图所示。 【本章学习目的】 本章通过多个Flash实例进行由浅入深的讲解，重点介绍了矢量图的制作、特效文本处理、添加Flash声音以及ActionScipt的初步应用，通过本章的学习，掌握如何处理矢量图形、制作矢量动画，掌握如何添加声音、使用动作控制Flash内容和集成Flash影片，了解ActionScript脚本语言创建交互界面。

4

5 10.1 实例导入：制作FLASH MTV 【例10.1】利用Flash技术制作图文声并茂的FLASH MTV，如图所示。 主要涉及到以下知识点： 进行画面布局； 制作运动渐变和形状渐变； 制作按钮； 载入其它的swf文件； 添加ActionScript脚本语言创建交互界面； 集成Flash影片。

6

7 10.2 Flash 概述 10.2.1 FLASH的工作界面 1.“启动”界面

8

9 2. 操作界面 主要由“菜单”栏、工具箱、时间轴、舞台、“属性”面板、集成工作面板等构成，如图所示。

10 10.2.2 Flash的基本操作 对于Flash文档编辑和操作主要有以下几个方面： 1. 新建文档
选择“文件” 菜单｜“新建”命令，或按下快捷键Ctrl+N，或单击“启动”界面中创建新项目中的“Flash文档”。 2. 打开文档 选择“文件” 菜单｜“打开”命令，或使用快捷键Ctrl+O，或单击启动界面中打开最近项目中的某个文档或“打开”。 3. 保存文档 选择“文件”菜单｜“保存”命令，或使用快捷键Ctrl+S。文档在编辑过程中要及时保存，Flash文档的扩展名为*.fla。 4. 发布影片 制作好的Flash动画最终要发布出来或者嵌入到网页中。Flash软件支持多种能够在网页中播放的文件格式。

11 10.3 Flash的基本功能 Flash的基本功能主要包括：绘图和填充、文字处理、创建动画元件和实例、使用动作控制内容、添加声音和集成电影等。

12 10.3.1 绘图和填充 Flash提供了多种绘图和填充工具，可以用来绘制直线、形状和路径以及编辑操作。 1.笔触与填充
绘图和填充 Flash提供了多种绘图和填充工具，可以用来绘制直线、形状和路径以及编辑操作。 　　1.笔触与填充 单击某个“绘图”工具时，在“属性”面板中可设置形状或路径的笔触和填充。如果需要更多的填充效果，选择“窗口”菜单｜“混色器”命令，在“混色器”面板中可选择类型。

13 2. 绘制基本几何形状 在Flash中使用“直线”工具绘制直线，使用“椭圆”工具绘制椭圆，使用“矩形”工具绘制矩形，使用“多角星形”工具绘制多边形或星形。 （1）绘制直线：单击“直线”工具，在“属性”面板中设置笔触颜色、笔触高度、笔触样式。按住Shift键，绘制呈倾斜度为45°倍数的直线。 （2）绘制椭圆：单击“椭圆”工具，在“属性”面板中设置笔触和填充颜色。在舞台上拖动鼠标左键绘制椭圆，按下Shift键绘制正圆形，按下Alt键以当前点为圆心绘制圆形，快捷键可组合使用。 （3）绘制矩形：单击“矩形”工具，在“属性”面板中设置笔触和填充颜色，在舞台上拖动鼠标左键绘制矩形形状，按下Shift键绘制正方形，按下Alt键以当前点为中心绘制矩形，快捷键可组合使用。 （4）绘制“多边形”工具，单击“多角星形”工具，在“属性”面板中设置笔触和填充颜色，单击“选项”按钮，弹出“工具设置”对话框，设置样式（选择多边形和星形）、边数和星形顶点大小。

14 3. 绘制曲线 用“钢笔”工具 可以绘制直线、光滑的曲线和任意形状的图形。单击“钢笔”工具，在舞台上单击可创建一个节点，连续单击可创建折线。在舞台上单击并拖动鼠标可创建曲线，用“部分选取”工具选中节点，出现一个控制柄，拖动控制柄，控制柄的长度和方向决定曲线的弯曲程度。

15 4. 用“铅笔”工具绘图 使用“铅笔”工具，绘画的方式与使用真实铅笔大致相同。要在绘画时平滑或伸直线条和形状，您可以给“铅笔”工具选择一种绘画模式。在“工具”面板的“选项”区域，选择一种相应“铅笔”工具功能键。 5.用“笔刷”工具绘图 “笔刷”工具 能绘制出笔刷般的笔触，就像您在涂色一样。使用“刷子”工具功能键选择刷子大小和形状。

16 6. 对象的操作 选取对象：单击“选择”工具，单击舞台上的任意对象，选中对象，按下shift键可同时选中多个对象，或按住鼠标左键，在舞台上绘制一个矩形区域，选中某个图形的一部分。 调节直线和节点位置：选中对象后，当“选择”工具靠近图形某条边线时，“选择”工具的箭头处出现一条曲线 ，拖动边线变成曲线。当“选择”工具靠近某个节点，“选择”工具的箭头处出现两条相交的直线 ，可拖动节点，改变节点的位置。 移动节点：用“部分选择”工具，单击节点，拖动。 角点、曲线点之间的转换：角点转换为曲线点：单击角点，按住Alt键拖动。曲线点转换为角点：单击“钢笔”工具，靠近曲线点，钢笔工具显示为 ，单击该曲线点。 添加节点：单击“钢笔”工具，靠近线段要添加节点的位置，这时指针会显示为 ，单击。 删除节点：单击“钢笔”工具，靠近节点的位置，这时指针会显示为 ，单击。 调节路径：单击“部分选择”工具，单击节点，调节控制柄的长度和方向可调节曲线。

17 7. 缩放和旋转对象 选中对象，缩放和旋转对象，常用的方法有三种： 方法一：单击“任意变形”工具 ，选择工具箱下方的“选项区域”相应功能键：旋转与倾斜 、缩放 、扭曲 和封套 ，可对图形进行变形。 8. 辅助工具的使用 在绘图过程中，为了精确，常会用到辅助绘图工具，例如：“缩放”工具 、“手形”工具 、网络、标尺、辅助线等。还可选择“视图”菜单中“网络”、“标尺”、“辅助线”命令。

18 9.排列、对齐、组合和取消组合 排列：选中对象，选择“修改”菜单｜“排列”选项｜某种排列命令，改变对象的层叠顺序。 对齐：选中多个对象，选择“窗口”菜单｜“对齐”命令，打开“对齐”面板，然后单击对齐方式某个按钮。 组合和取消组合：使用“组合”命令，可将多个元素作为一个对象来处理。选中多个对象，选择“修改”菜单｜“组合”命令，多个对象组合为一组。选中一组对象，选择“修改”菜单｜“取消组合”命令，恢复为多个单个对象。

19 位图操作 1. 导入位图 Flash不仅可以绘制各种形状的矢量图形，也可以导入多种格式的位图，如：JPG、GIF、PNG格式等。 选择“文件”菜单｜“导入”｜“导入到舞台”命令，直接将位图导入到舞台中，选择“导入到库”命令，则将位图导入到“库”面板中，舞台中并没有出现。 2. 使用位图填充 使用已导入的位图可以对绘制好的图形进行填充，在“混色器”面板中，单击“类型”下拉框，选择位图填充时，已导入的位图将显示在下方的列表区域中，选择某个位图。如果列表区域中没有所需的位图，单击“导入”按钮，弹出“导入到库”对话框，选择本地计算机上的位图图像，并将其添加到库中。 3. 分离位图 在舞台中导入一幅位图后，不能直接进行编辑，例如用“套索”工具去除位图的背景是无法操作的，只有分离位图后才能操作。 4. 将位图转换为矢量图 将位图转换为矢量图后，就可以将图像当作矢量进行处理。与位图相比，一般矢量图文件较小，因此有利于减少Flash文件的大小。

20 10.3.3 处理文本 在Flash中，文本和矢量图形一样是必不可少的。Flash文本的特效设计会为Flash动画增色不少。
处理文本 在Flash中，文本和矢量图形一样是必不可少的。Flash文本的特效设计会为Flash动画增色不少。 Flash文本的类型分为三种：静态文本字段、动态文本字段和输入文本字段。在Flash动画即可创建包含静态文本的文本块，即在创作文档时确定其内容和外观的文本；也可创建动态或输入文本字段。动态文本字段显示动态更新的文本，如体育得分或股票报价等；另外还可创建输入文本字段允许用户为表单、调查表或其他目的输入文本。本小节内容主要介绍静态文本的处理。 　　1. 输入文本 单击“文本”工具 ，在“属性”面板中设置文本属性，将鼠标移动到舞台上单击，出现一个文本框，光标在文本框中闪烁，输入文本，如果换行，按回车键。文本输入完成，将鼠标在文本框以外任意处单击，完成文本输入。

21 　2.设置文本属性 在输入文本前，单击“文本”工具，在“属性”面板中设置文本属性，然后再输入文本，或输入文本后，单击“选择”工具，选中文本，在“属性”面板中设置文本属性。可设置文本的字体、字号、样式、颜色以及段落的对齐方式、边距、缩进和行间距，还可为横排文本添加链接路径。

22 10.4 Flash 应用基础 使用Flash制作动画影片的流程一般是先制作动画中所需要的各种元件，然后在舞台中使用（被称为实例），进行适当的组织编排，在这个过程中可以添加声音，可以使用动作使Flash影片能够响应特定事件，从而获得交互效果，影片制作完成后，将其导出为一个可嵌入网页swf格式的文件。因此，元件是Flash中用的最多的对象。本节将通过一系列的实例介绍Flash动画的制作方法和技巧，能够掌握Flash动画制作的原理和方法，最主要的是培养创造性的设计能力。

23 场景、元件与实例 　　1. 使用场景 当Flash文件很复杂时，需要很多场景，并且每个场景中的对象可能都不同，Flash可以将多个场景中的动作组合成一个连贯的电影。swf文件中的场景将按照电影在场景检查器中所列出顺序依次播放。 添加场景：“插入”菜单｜“场景”命令。 删除场景：“插入”菜单｜“删除场景”命令。 　　2. 元件和实例 元件是存放在库中的可反复取用的图形、动画、按钮和音频。当用户创建一个元件时，元件就存储在文件的“库”面板中，“库”面板对元件进行有效地组织和管理，还可建立文件夹，将元件分类存放在文件夹中。将元件从库拖入舞台，就生成了一个实例。元件的类型：图形、影片、按钮三种。

24 图形：可反复取用的图片，用于构建动画主时间轴上的内容。一般只含有一帧静止图片。不能对它添加交互行为和声音控制。
影片剪辑：代表可反复取用的一段小动画。可独立于主时间轴进行播放。不能添加相互控制。 按钮；用于创建动画的交互控制按钮。可响应事件，添加交互动作。

25 3.创建元件 创建元件的方法比较多，下面介绍常用的三种方法。 方法一：选中场景中的对象，选择“修改”菜单｜“转换为元件”命令，或按下快捷键F8，弹出“转换为元件”对话框，输入名称，选择类型，单击“确定”按钮。 方法二：选择“插入”菜单｜“新建元件”命令，或单击“库”面板下方的“新建元件”按钮，弹出“新建元件”对话框，输入名称和选择类型，单击“确定”按钮，进入到元件的编辑界面。 方法三：Flash有一个公用库。选择“窗口”菜单｜“公用库”选项｜“学习交互或按钮或类”命令，打开“公用库”面板后，选中元件，拖入到当前文档的“库”面板中。

26 4. 编辑和使用元件 编辑元件：打开“库”面板，选中某个元件，双击鼠标左键，进入到元件的编辑状态，或在舞台上双击实例，进入到元件的编辑状态。 使用元件：创建元件后，就会保存在“库”面板中，选择“窗口”菜单｜“库”命令，或按下Ctrl+L组合键或F11键，打开“库”面板，选中元件拖至舞台中。 实例的应用：元件拖放到舞台中，即称为实例，在“属性”面板中，可对实例进行相应的属性设置，例如：实例行为、大小、名称、动画播放方式、颜色等，如图所示。

27 帧与关键帧 Flash动画是由多帧组成的。帧就是动画在播放过程中，不同时间内动画内容的载体。帧分为普通帧、关键帧、空白关键帧。如图所示。 关键帧：定义了动画变化的帧，也可以说是包含了帧动作的帧。在时间轴中是一个实心的小黑点。 空白关键帧：没有内容的关键帧。在时间轴上是一个空心的小圆圈。 普通帧：又称为相同帧，与前一个关键帧的内容相同，是灰色的帧。相同帧空白关键帧关键帧过渡帧 过渡帧：两个关键帧之间定义了动画的紫蓝色的帧，它使得动画过程更流畅。 相同帧 空白关键帧 关键帧 过渡帧

28 10.4.3 图层 图层用于有效地组织电影元素，使元素之间不至于相互干扰，如图所示。 1. 图层的分类
图层 图层用于有效地组织电影元素，使元素之间不至于相互干扰，如图所示。 1. 图层的分类 普通层：当创建一个新的Flash文档后，它就包含一个普通层，它是Flash中应用最多的图层。 引导层：利用引导层可以制作沿路径运动的动画。 遮罩层：遮住下面层的内容，透过建立的矢量图形可以看见下面图层的内容。

29 2. 图层的操作 插入图层：在时间轴左下方单击“插入图层”按钮，就添加了一个普通层，单击添加引导层则添加一个引导层。 改变图层的属性：选中图层，单击鼠标右键，在弹出菜单中选择“属性”命令，弹出“属性”对话框，设置图层的属性，如图10.33所示。 插入图文件夹：将图层分类放在文件夹进行组织管理。 删除图层：不需要的图层时，单击“删除图层”按钮。 图层的显示或隐藏，单击层，单击眼睛图标位置，出现红叉，表示隐藏，黑色圆点表示显示。 图层的锁定：单击层，单击锁定层下方，出现锁的标志，表示锁定层，黑色圆点表示解锁。

30 创建动画 用户通过改变连续帧的内容来实现动画，例如穿梭移动、放大或缩小、旋转、变色、淡入淡出以及改变形状等。 有两种方法可以在Flash中创建动画序列，一种是帧并帧动画，另一种是渐变动画，又称为补间动画。渐变动画又分为形状渐变和运动渐变两种。 1.帧并帧动画 要创建帧并帧动画，必须为每一帧都定义关键帧，并且修改关键帧中的内容。如图所示。

31

32 2. 运动渐变 运动渐变，即对象在画面中移动，同时也可以改变它的大小、形状、颜色、位置等，产生旋转、动态切换画面等效果。

33 3. 沿路径移动的动画 运动引导层允许用户绘制一条曲线作为动画路径，动画中的实例、组合体或文本块将沿着这条曲线运动。用户可以将多个层链接到一个运动引导层上，使多个对象按照相同的路径运动。一个链接到运动引导层的普通层将变成被引导层。

34 4. 形状渐变 使用形状渐变可以创建和变形相类似的效果，以某个形状出现，随着时间推移，最开始的形状逐渐变形另一个形状，选择“修改”菜单｜“形状”｜“添加形状提示点”命令，控制形状渐变的效果。同时形状的位置、大小、颜色产生渐变效果。

35 5. 使用遮罩层制作动画 遮罩层就是将下面的层全部遮住，然后通过在遮罩层中添加形状，形状类似于洞，透过洞看到下面层的内容，链接到遮罩层的普通层就是被遮罩层。利用“遮罩”效果，可以制作许多特效，如：水波、万花筒、放大镜、望远镜、探照灯等。

36 　　6. 按钮的制作 按钮可以显示不同的图像或动画，分别响应不同的鼠标状态，这样，当用户使用鼠标产生单击、按下或悬停在按钮之上等动作时，按钮都会有不同的显示效果。要使按钮在电影中产生交互，可将按钮符号的实例放置在舞台上，然后给实例分配动作。

37 7. 为动画添加声音 在Flash中有两种类型的声音：事件声音和音频流。事件声音必须完全下载后才能开始播放，除非明确停止，它将一直连续播放。音频流在前几帧下载了足够的数据后就开始播放；音频流可以通过和时间轴同步以便在Web站点上播放。 事件声音一般用于按钮或者是固定动作中的声音。而音频流一般应用于背景音乐、MTV的制作。 导入声音文件的格式一般有：WAV（仅限 Windows）、AIFF（仅限 Macintosh）、MP3（Windows 或 Macintosh）等，还可设置声音的效果属性可以创造更优美的音效。

38 8. 有关声音属性的设置 在“属性”面板中，单击“声音”下拉列表中选择声音文件。 从“效果”下拉框中选择效果选项： 无：不对声音文件应用效果。选择此选项将删除以前应用的效果。 左声道／右声道：只在左声道或右声道中播放声音。 从左到右淡出／从右到左淡出：会将声音从一个声道切换到另一个声道。 淡入：在声音的持续时间内逐渐增加音量。 淡出：在声音的持续时间内逐渐减小音量。 自定义：允许使用“编辑封套”创建自定义的声音淡入和淡出点。

39 从同步下拉列表中选择同步选项： 事件：会将声音和一个事件的发生过程同步起来。事件声音在显示其起始关键帧时开始播放，并独立于时间轴完整播放，即使 SWF 文件停止播放也会继续。当播放发布的SWF文件时，事件声音混合在一起。 开始：与事件选项的功能相近，但是如果声音已经在播放，则新声音实例不会播放。 停止：使指定的声音静音。

40 流：同步声音，以便在Web站点上播放。Flash 强制动画和音频流同步。与事件声音不同，音频流的播放时间绝对不会比帧的播放时间长。当发布SWF文件时，音频流混合在一起。
为“重复”输入一个值，以指定声音应循环的次数，或者选择“循环”以连续重复声音。对于音频流不建议循环播放。 利用“声音编辑控件”编辑声音 在Flash中可以对声音进行一些简单的编辑，比如控制声音的播放音量、改变声音开始播放和停止播放的位置等。 单击“属性”面板中效果右侧的“编辑”按钮，弹出“编辑封套”对话框，如图所示，在此对话框中编辑声音。

41

42 Flash动画中的交互控制 在Flash 8.0中，借助于ActionScript来实现程序化的交互动画。如：网络游戏、动态网站等。 动作面板介绍 用ActionScript进行编程需要用到“动作”面板，“动作”面板是专业编写脚本程序的开发环境。选择“窗口”菜单｜“动作”命令，或单击快捷键F9，打开“动作”面板，动作面板由两部分组成：左侧是一个“动作”工具箱，每个动作脚本语言元素在工具箱中都有一个对应的条目，右侧为“脚本”窗格，是输入代码的区域，如图所示。单击左侧下方的箭头，显示脚本导航器。单击右侧“脚步助手”按钮，显示／隐藏代码提示。

43

44 2. 动作脚本基本元素 分号 动作脚本语句以分号；结束，例如： Stop(); 大括号 动作脚本有时需要将几行代码组合到块中。这就需要使用大括号｛｝。用户可以在与开始代码同一行或下一行上放置一个开始大括号。如： On(release) { getURL(“index1.htm”,”_blank”); }

45 　　3. ActionScript基本语句 （1）时间轴控制命令 打开“动作”面板，单击全局函数｜时间轴控制，可以看到9条命令。 Gotoandstop和gotoandplay命令 gotoandplay(scene,frame)：将播放磁头转到指定场景中指定帧并从该帧开始播放。Scene：场景的名称，frame：播放磁头将转到的帧的编号或标签。 gotoandstop(scene,frame)：将播放磁头转到指定场景中指定帧并从该帧停止播放。 stopallSounds命令 在不停止播放磁头的情况下停止当前正在播放的所有声音。格式为：stopallSounds()，括号中无参数。  Stop和Play命令 Play()播放命令，无参数。 stop()停止播放命令，无参数。

46 （2）浏览器／网络命令 打开“动作”面板，单击全局函数｜浏览器／网络，可以看到9条命令。 fscommand命令 使swf与其它应用程序互相传达命令。格式为：fscommand(“command”,”parameters”)，如：fscommand动作设置Flash Player播放器，释放按钮时，将SWF文件放大到整个显示器屏幕大小。 on(release) { fscommand(“fullscreen”,true); } getURL命令 用于建立网页的超级链接，格式为：getURL(url[,窗口][,”方法”])，例如单击某个按钮链接到新浪网 on (press) { getURL(" "_blank");  loadMovie命令 用于加载外部的SWF文件或JPG图像文件。格式为：loadMovie(url[,目标][, 方法])，例如： on(press){ loadMovie(“products.swf”,1);

47 10.5 综合实例：制作FLASH MTV 本小节讲解【例10.1】Flash MTV的制作过程，通过单击按钮实现播放不同的影片画面和歌曲。实例中综合了图形、文本动画的制作，添加声音文件，利用ActionScript脚本语言实现动画交互，浏览者可以随心所欲地点听自己喜欢的歌曲。

48 本 章 小 结 本章主要介绍了Flash软件的使用。 使用Flash创建文本、编辑位图和矢量图形、处理Flash文本特效。

49 本章练习题 1. 选择题 （1）可以放置文档的所有可视资源，其中包括文本、图像、视频和影片的是（ ）。
（1）可以放置文档的所有可视资源，其中包括文本、图像、视频和影片的是（ ）。 A．舞台 B．时间轴 C．菜单栏 D．工具面板 （2）对渐变色填充或位图图像填充进行变形操作，需使用的工具（ ）。 A．任意变形工具 B．填充变形工具 C．油漆桶工具 D．墨水瓶工具 （3）使用“选择”工具，放在一个矩形线条上时会变成一个（ ）。 A．方形箭头 B．带圆弧线的箭头 C．带弯角的箭头 D．空白箭头 2. 简答题 Flash文档的扩展名是什么？导出默认的Flash影片的扩展名是什么？ Flash动画的原理是什么？制作Flash动画的关键在哪里？ Flash动画分为哪几种？有什么样区别？ 什么是元件实例？元件与实例的区别和联系是什么？ 遮罩层的作用是什么？引导层的作用是什么？

50 上 机 实 训 1. 背景知识 　　根据本章所学的Flash的基本知识，同时结合Fireworks的相关知识以及本教材中所讲过的页面布局和修饰的技巧，还要注意色彩制作过程中的应用等。 2. 实训准备工作 　　将相应的Flash的样图、素材，如：音频、视频、位图等文件，发送到学生主机中，以供学生参考使用。 3. 实训要求 （1）制作形状渐变动画 要求：根据给定素材，利用形状渐变制作动画效果。 （2）制作运动渐变动画 要求：根据给定的素材制作蝴蝶在花丛中左飞右飞的效果。 （3）制作沿路径运动动画 要求：利用运动引导层的功能和逐帧动画的效果，制作光束书写文字的效果。 （4）制作利用遮罩层的动画 要求：利用遮罩层的功能制作霓光灯效果。 （5）制作MTV动画 要求：设计画面，添加声音，利用交互动作，制作流畅的Flash MTV。 4.课时安排：8课时。