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