《《人机界面设计》实验指导书三.docx》由会员分享，可在线阅读，更多相关《《人机界面设计》实验指导书三.docx（27页珍藏版）》请在三一办公上搜索。
1、人机界面设计实验指导书丰艳青岛科技大学信息科学技术学院实验三Flash 8动画制作一、实验目的及要求：（1）了解二维动画艺术设计的基础知识及其工具软件。（2）了解关于Flash二维动画艺术设计的基础知识。（3）掌握Flash 8中特效文字的制作。（4）掌握补间动画、引导动画和遮罩动画的制作。二、实验平台：操作系统：Windows XP以上版本实验环境：Microsoft Visio Professional 2003 版三、实验内容：1、本实验中，我们以Micromedia Flash Professional 8中文简体版（简称Flash）为 工作环境，来学习Flash动画的制作原理和方法。
2、首先要熟悉该软件的工作环境，具体包括： 场景舞台、绘图工具箱、时间轴、库面板、属性面板。2、学习制作各种特效文字。3、学习制作补间动画。4、学习制作引导动画。5、学习制作遮罩动画。四、实验步骤：1、熟悉Flash8的工作环境利用绘图工具箱在场景面板中绘制各种图形，并利用属性面板设定属性，并将绘制的图 形生成“图形元件”，观察“库面板”中的变化。利用“文件”菜单下的“导入”，可以将硬盘上的图形图像资源导入进“库”。2、绘图线条工具/J ：按住shift键拖动可以绘制倾斜45度倍数的线条。椭圆工具 ：按住shift键拖动可以绘制圆。矩形工具，：按住shift键拖动可以绘制正方形。通过单击圆角矩形并
3、输入一个角半径值 即可绘制圆角矩形。当角半径值为0时，则创建的是矩形。多角星形工具*：使用矩形工具绘制多角星形。多角星形工具是矩形工具的附属工具。 左键单击并按住矩形工具，弹出“矩形工具/多角星形工具”切换卡，选择“多角星形工具”。 可以利用多角星形工具属性栏中的选项对话框，设置绘制的样式，边数和星形顶点的深度o多角星形工具/九 1竺舟m第触提弟缩放：一般自定忍计.企角：端点:接宣缝,选项变形工具 ：变形某对象时，先使用选择工具选择待变形的对象。变形工具移动到对象边角时指针变为，可以同时改变对象的宽度和高度。变形工具移动到对象的左右变线中部指针变为时，可以改变对象的宽度。变形工具移动到对象的上
4、下边线中部指针变为时，可以改变对象的高度。变形工具移动到对象边线指针变为时，可以改变对象的倾斜角度。变形工具移动到对象边角外指针变为时，可以旋转对象。墨水瓶工具,：更改线条或者形状轮廓的笔触颜色、宽度和样式。颜料桶工具 :更改填充区域的颜色。填充变形工具：应用渐变效果，渐变是由某种颜色过渡到另一种颜色的变化过程。拖动中心校点,司以改变渐变中心一f可以改变萌变角度o可以改变渐变的区域范围铅笔工具：铅笔工具有3种绘图模式：伸直：适于绘制规则线条，并且绘制的线条会分段转换成与直线、圆、椭圆和矩形等规 则线条中最接近的线条平滑：适于绘制平滑曲线，将曲线的抖动部分忽略墨水瓶：徒手模式，适用于绘制接近徒手
5、画出的线条钢笔工具：使用钢笔工具能够绘制多节点曲线，并能够增加和删除曲线上的节点。通过锚点的控制可以准确地绘制直线和平滑曲线。使用方法：1. 选取工具箱中的钢笔工具2. 在场景中单击鼠标后放开，设定第一个点位置，然后在另一点单击，则两点自动连 成直线3. 在场景中单击并拖动控制手柄，松开鼠标，然后在另一点单击并拖动控制手柄以调 整曲线，则绘制一条曲线，两点的控制手柄与曲线相切4. 按下Ctrl键，然后单击，或者直接单击曲线，当鼠标移动到曲线上时，在光标右下角将出现一个“+”号，单击曲线，可以增加一个锚点5. 当鼠标移动到锚点上，在鼠标的右下角出现一个“一”号，单击，即可删除该锚点。使用钢笔工具
6、绘制曲线笔刷工具：使用笔刷工具可以产生毛笔画出来的效果，可以对绘制的图形上色，还可以创造出许多特殊的效果。笔刷工具五种工作模式：标准绘画：笔刷画出来的图线覆盖先画的图线和背景颜色。图（a）为原有图形，图（b） 为使用标准绘画模式绘制线条后的效果图。颜料填充：笔刷只能在空白和原有的颜色填充区域画线，原有图线将被保留，透过笔刷 颜色显示出来，如图（c）所示。后面绘画：笔刷在空白区域画线，而其线条和图形将保留原状态不变，如图d）所示。颜料选择：笔刷将填充选择的部分，所以在填充前必须先选择一个图形区域。内部绘画：笔刷画出的线条只能在起始点所在的图形区域内有效，如果起始点在空白区 域，那么只能在空白区域
7、内画线，现有图形区域将不受影响。(a)(b)(c)(d)(e)(f)3、特效文字的制作（1）填充文字：制作步骤如下：（1） 新建一个Flash文档。选择【文件】I【新建】命令，或按快捷键Ctrl+N，新建一 个Flash文档。（2）设置文档属性。选择【修改】I【文档】命令，或按快捷键Crl+J，弹出【文档属 性】对话框，在【标题】文本框中输入“位图填充文字效果”将【尺寸】设置为400X300 像素，其他保持不变。(3) 选择工具栏中的文本工具，在【属性】面板中将字体设置为“Arial Black”，【大 小】设置为96,【字间距】设置为10,在舞台中创建文本“FLASH”。(4) 选择工具栏中
8、的选择工具，选中创建的文本对象，单击菜单栏中的【修改】|【分 离】命令，或按快捷键Ctrl+B，文本框就会被分离成单个字符。再按一次快捷键Ctrl+B， 这时的文本对象就被转换成矢量图形(5) 导入位图。选择菜单栏中的【窗口】|【混色器】命令，打开【混色器】面板， 在【类型】下拉列表中选择位图填充方式，这时将弹出【导入到库】对话框。(6) 当选择了一幅或多幅位图以后，此时的【混色器】面板如图3-21所示。在保证矢 量图形被选中的前提下，在【混色器】面板中选择要填充的位图。(7) 此时矢量图形(文字)即会被选中的位图所填充。(8) 保存影片。选择【文件】I【保存】命令，或按快捷键Ctrl+S保存
9、影片。(9) 测试影片。选择【控制】|【测试影片】命令，或按快捷键Ctrl+Enter测试影片。(2) 空心字：制作步骤如下：(1) 新建一个Flash文档。选择【文件】I【新建】命令，或按快捷键Ctrl+N，新建 一个Flash文档。(2) 设置文档属性。选择【修改】I【文档】命令，或按快捷键Crl+J，弹出【文档属 性】对话框，在【标题】文本框中输入“空心字”，其他保持不变。(3) 选择工具栏中的文本工具，在【属性】面板中将字体设置为“Arial Black” ,【大 小】设置为96,【字间距】设置为10，在舞台中创建文本“FLASH”。(4) 仿照上例，通过两次【修改】I【分离】命令，或
10、连按两次快捷键Ctrl+B，将文 本对象转换成矢量图形。(5) 在工具栏中，选择【墨水瓶工具】，并设定好【墨水瓶】属性：【笔触颜色】蓝色； 【笔触高度】5；【笔触样式】实线。(6) 用鼠标点一下舞台中文字的边线，文字的外围就被蓝颜色框住了。(7) 依次单击其它字母(8) 选择工具栏中的【选择工具】，选中舞台中文字中间的黑色部分(可按住键盘上的 Shift键连续选择)。按键盘上的【Delete】键去除选中的部分，留下文字的外框。完成本例。(9) 保存影片。选择【文件】I【保存】命令，或按快捷键【Ctrl+S】保存影片。(10) 测试影片。选择【控制】I【测试影片】命令，或按快捷键【Ctrl+En
11、ter】。(3) 发光字的制作：(利用滤镜)(1) 新建一个Flash文档。选择【文件】I【新建】命令，或按快捷键【Ctrl+N】，新 建一个Flash文档。(2) 设置文档属性。选择【修改】I【文档】命令，或按快捷键【Ctrl+J】，弹出【文 档属性】对话框，在【标题】文本框中输入“发光字效果”，将【尺寸】设置为450X300 像素，【背景】设置为黑色，【颜色代码】#000000，其他保持不变。(3) 选择工具栏中的文本工具，在【属性】面板中将字体设置为“Arial Black” ,【大 小】设置为96,【字间距】设置为10，【颜色】任意，在舞台中创建文本“FLASH”。(4) 添加投影滤镜
12、。单击属性面板中的【滤镜】标签，打开滤镜面板。单击【添加滤 镜】按钮，从弹出的下拉菜单中选择投影滤镜。在【滤镜】属性面板中将【角度】设置为 210，【距离】设置为1，其他保持不变。(5) 添加渐变发光滤镜。在滤镜面板中单击添加滤镜按钮，从弹出的下拉菜单中选择 渐变发光滤镜。将【模糊X】和【模糊Y】值设置为10,【品质】设置为中，【角度设置为 196】【距离】设置为-2。（6）将【类型】设置为整个，然后在渐变定义栏中为滤镜添加4个指针。从左数第二 个开始，把指针颜色分别设置为淡黄色（#FFFFCC）、黄色（#FFFF00）、蓝色（#0066FF）、浅 蓝色（#00FFFF）、深蓝色（#00006
13、6）。（7）在滤镜面板中单击【添加滤镜】按钮，从弹出的下拉菜单中选择模糊滤镜。将【模 糊X】和【模糊Y】值设置为2,【品质】保持不变。（8）选择【文件】I保存】命令，或按快捷键【Ctrl+S】保存影片。（9） 测试影片。选择【控制】|【测试影片】命令，或按快捷键【Ctrl+Enter】。4、制作第一个简单动画：弹跳的小球步骤一：新建一个Flash文档。步骤二：在图层1（更名：背景）的第一帧处，设置小球运行的背景。步骤三：增加一个图层（更名：小球），在第1帧处，制作一个小球（转换成图形元件）。步骤四：在第30帧处（或其他帧），插入关键帧，并将小球在舞台上移动到合适的位置。步骤五：在第60帧处，插
14、入一关键帧，并将小球拖加原处。步骤六：在第1帧与第30帧之间创建补间动画；在第3 0帧与第6 0帧处创建补间动 画。步骤七：在背景图层的第60帧处，按F5,将其延长至60帧处。步骤八：Ctrl+Enter （测试影片）进行影片测试5、补间动画的制作Flash的补间动画分为两种：动作补间动画与形状补间动画。上述实验4-弹跳的小球， 就是利用“动作补间动画”实现的。而我们经常见到的变形动画，则是利用“形状补间动画” 来实现的。动作补间动画与形状补间动画有很多地方相似，但是它们的根本区别在于：形状补间动 画所实现的是某一对象从一个形状到另一个形状的渐变。待变形的对象一定不能是元件，如 果待变形的对象
15、已经是元件，则首先要利用“修改”菜单下的“分离”，将元件打散。1. 动作补间动画的概念（1）动作补间动画的概念在Flash的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间 点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flash根据二者之间的帧的 值创建的动画被称为动作变形动画。（2）构成动作补间动画的元素构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等等，除了元件，其 他元素包括文本都不能创建补间动画的，其他的位图、文本等等都必须要转换成元件才行， 只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。（3）动作补间动画在时间帧面板上的表现
16、动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个 长长的箭头，如图3-4-1所示。图3-4-1动作补间动画在时间帧上的表现（4）形状补间动画和动作补间动画的区别形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧，二者 之间的区别如下表所示。区别之处动作补间动画形状补间动画在时间轴上的表现淡紫色背景加长箭头淡绿色背景加长箭头组成元素影片剪辑、图形元件、按钮完成的作用实现一个元件的大小、位置、 颜色、透明等的变化。形状，如果使用图形元件、按钮、文字，则必先打散 再变形。实现二个形状之间的变化，或一个形状的大小、位置、 颜色等的变化。5）创建动作补间动
17、画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只 能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开 始帧，在【属性面板】上单击【补间】旁边的“小三角，在弹出的菜单中选择【动作】或 单击右键，在弹出的菜单中选择【新建补间动画】，就建立了 “动作补间动画”。2. 动作补间动画的属性面板在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图3-4-2所示。图3-4-2动作补间动画属性面板（1）“简单”选项在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入具体的数值，补间动作动画 效果会以下面的设置作出相应的变化：在1到-10
18、0的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。在 1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。默认情况 下，补间帧之间的变化速率是不变的。（2）“旋转”选项有四个选择，选择“无”（默认设置）禁止元件旋转；选择“自动”可以使元件在需要 最小动作的方向上旋转对象一次；选择“顺时针”或“逆时针”，并在后面输入数字，可使 元件在运动时顺时针或逆时针旋转相应的圈数。练习：制作一个在地面上向前滚动的皮球。(要点：在前后两个关键帧中，分别设定皮球的 两个不同位置；利用属性面板中“旋转”设置皮球的自转)1. 形状补间动画的概念(1) 形状补间动画的概念在Flash
19、的时间帧面板上，在一个时间点(关键帧)绘制一个形状，然后在另一个时间 点(关键帧)更改该形状或绘制另一个形状，Flash根据二者之间的帧的值或形状来创建的 动画被称为“形状补间动画”。(2) 构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的 灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形 状，如果使用图形元件、按钮、文字，则必先“打散”再变形。(3) 形状补间动画在时间帧面板上的表现形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一 个长长的箭头，如图3-3-1所示。图3-3-1形状补间动
20、画在时间帧面板上的标记(4) 创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形 状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状， 再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】， 此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕。2. 形状补间动画的属性面板Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后，点击时间帧，【属性】面板如图3-3-2所示。图3-3-2形状补间动画【属性】面板形状补间动画的【属性】面板上只有二
21、个参数：(1) “简单”选项在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入具体的数值，形状补间动画 会随之发生相应的变化。在1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。默认 情况下，补间帧之间的变化速率是不变的。（2）“混合”选项“混合”选项中有二项供选择：“角形”选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角 和直线的混合形状。“分布式”选项：创建的动画中间形状比较平滑和不规则。至此，“形状补间动画”的相关知识大家都已经有所了解。A、下面制作一个简单的动画来说明
22、创建形状补间动画的方法，步骤如下：（1）新建Flash文件，然后设置影片的属性，包括背景色和屏幕大小（2）在时间轴窗口选择当前图层，然后单击选择一空白单元格，按F6键，建立起始关 键帧。如果是第一帧，可省去此操作（3）选择工具箱中的工具绘制图形，作为补间形状的起始图形。在本例中，选用椭圆 工具在工作区左侧画一个圆形，并填充颜色（4）在起始帧后的某一帧插入空白关键帧，作为变形的下一个关键帧。本例中，在15 帧的地方插入一个空白关键帧（5）在新的关键帧中绘制图形，作为变形后的形状。本例中，选用矩形工具，画一个 正方形，并填充颜色（6）选择关键帧，调整图形的位置（7）在两个关键帧中任选一帧，单击后，
23、在帧“属性”面板中选择“形状”补间（8）在30帧的地方插入关键帧，然后选择直线工具绘制一个三角形，并填充颜色（9）在15帧和30帧间建立形状补间动画形状变形的过程如下图：B、，下面制作一个运动补间动画（摇摆的时钟），步骤如下：1）绘制一个圆，再绘制一条垂直的直线作为钟摆的支杆；2）同时选中圆和直线，将其转换为“图形元件”，命名为“钟摆”；3）利用变形工具将钟摆的重心拖动到整个图形的上方正中间处，如下图所示;4) 利用补间动作动画，制作来回摇摆的动画效果。备注：本动画效果的关键，是首先利用工具箱的“任意变形工具”改变图形的重心。6、引导层动画的制作引导层就是设定运动对象运动的某一路径(路线)，在
24、引导层中画好运动路径(引导线)， 在被引导层(引导层的下一层)中使运动物体与路径相吸附在一起(用鼠标点中运动物体的 中心移动)。下面我们就来制作一个简单的引导线动画。动画效果如下图所示：制作步骤：(1) .选择【文件】一【新建】命令，或按快捷键Ctrl】+【N】，新建一个Flash文档。(2) .设置文档属性。选择【修改】一【文档】命令，或按快捷键【Ctrl】+【J】，弹出 “文档属性”对话框，在【标题】文本框中输入“引导线动画”，将【尺寸】设置为400X300像素，其他保持不变。(3) .在【图层】面板中双击“图层1”，将“图层1”名称改为“小球”，按【Enter 确认。(4) .添加运动引
25、导层。单击时间轴窗口左下角的“添加运动引导层”按钮，这样就为 “小球”层添加了一个运动引导层。(5) .选中“小球”层的第一帧，然后选择工具栏中的【椭圆】工具，做如下设置【笔 触颜色】设置为“无”，【填充色】设置如下图。(6) .设置完毕后，在舞台中按住键盘上的【Shift】键，利用【椭圆】工具绘制一个大 小适中的正圆。并调整到适当的位置。(7) .选择工具栏中的【选择】工具，选中舞台中的小球，单击菜单栏中的【修改】一 【转换为元件】命令，或者按键盘上的【F8】键，在弹出的“转换为元件”对话框中，将元件命名为“小球”，【类型】设置为图形。(8) .绘制引导线。单击运动引导层第一帧，选择工具栏中
26、的【铅笔】工具，设置为【平 滑】模式。在舞台上任意画出小球的运动轨迹(引导线)。(9) .移动小球至引导线的开始点。选择工具栏中的【选择】工具，在【选项】工具栏 中单击磁铁图标11开启“贴紧至对象”功能。选择“小球”层的第一帧，将小球移动至 引导线的开始点。(在移动过程中可以看到小球元件的中间多了一个圆点，而且这个圆点总 是自动吸附到引导线上，这是Flash中一个特殊的辅助功能贴紧至对象，在创建按路径 运动的运动动画时一定要确保此功能“贴紧至对象”是打开的，否则对象将不会按照预定的 路径运动)。(10) .插入关键帧。同时选中“小球”层和“引导”层的第40帧(可借助键盘上的【Ctrl】 键连续
27、选择)，按【F6】插入关键帧。(11) .移动小球至引导线的结束点。利用【选择】工具，选择“小球”层的第40帧， 将小球移动至引导线的结束点。(12) .创建运动补间动画。选择“小球”层的第140帧中的任意一帧，在“帧”属性 面板上的【补间】下拉列表中选择【动画】选项，设置其为【补间动画1(14) .选择【文件】一【保存】命令，或按快捷键【Ctrl】+【S】保存影片。(15) .选择【控制】一【测试影片】命令，或按快捷键【Ctrl】+【Enter】测试影片。扩展练习题目：在上述操作基础之上，大家可以考虑利用引导线功能，制作太阳、地球、 月亮之间运动关系模拟的简单动画。动画效果如下：制作步骤如课
28、件ppt所示。（备注：该动画效果完成后，只有在菜单“控制”-“测试影片”选项中，才可以看到 影片剪辑元件和大场景同时运动的效果，而在菜单“控制”-“播放”选项中，观察不到影 片剪辑元件内的运动效果。）7、遮罩动画的制作遮罩，就是将物体的某一部分遮住。遮罩图层的效果是：遮罩图层下面的图层被遮罩，该图层中的内容只有在遮罩层中的填 充区域下的部分才可见，而遮罩层中的任何部分都是透明的。在遮罩层中，位图、渐变填充 区域和线条等都是无效的。制作简单遮罩动画：探照灯效果。步骤：1）打开Flash 8，新建一个Flash文档，设置影片尺寸为“400pxX200px”，背景颜色为 “黑色”，帧频为“12”。2
29、）单击插入图层按钮，建立两个图层，分别命名为：遮罩层和被遮罩层，遮罩层在上， 被遮罩层在下。3）选择工具箱中的文本工具，在文本工具的属性面板中设置文本的属性：字体为“宋 体”，字号为“96”，颜色为：“红色。4）单击被遮罩层的第1帧，用鼠标在场景中拖出一个文本框，在其中输入文字遮 罩动画，适当调整文本的位置。5）单击遮罩层的第1帧，选择工具箱中的椭圆工具，设置填充色为绿色。按住Shift键， 用椭圆工具在场景中画一个绿色的圆，调整圆的大小和文本一样高，调整圆的位置，将它放 在文字的左边。6）单击被遮罩层的第50帧，单击鼠标右键，从弹出的快捷菜单选择【插入帧】命令。7）单击遮罩层的第50帧，单击
30、鼠标右键，从弹出的快捷菜单选择【插入关键帧】命令， 选择工具箱中的箭头工具，将圆拖到文字的右边。8）选中遮罩层的第1帧，单击鼠标右键，从弹出的快捷菜单中选择【创建补间动画】 命令，设置遮罩层中的圆的补间为动画补间。9）在遮罩层名称框上单击鼠标右键，从弹出的快捷菜单中选择【遮罩层】命令，这时 将看不到场景中的对象，遮罩层和被遮罩层自动被锁定。10）按【Ctrl】+【Enter】键预览动画效果。扩展练习题目：彩闪文字。动画效果如下:步骤/方法:1. 启动Flash，依次点击【文件】|【新建】|【新建文档】。2. 点击【修改】|【文档】，将尺寸修改为350宽，150高。背景颜色改为粉红色。3. 进入
31、工作区，首先编辑图层一。绘制一矩形，填充颜色为线性多色填充，如下图：4. 在第40帧插入关键帧。选中第40帧，将舞台中的彩色矩形水平向右移动一定距离， 如下图：5. 在第1和第40帧之间，插入补间动画。6. 点击插入新图层按钮，插入图层2。在该图层的第一帧中写入“春意盎然”四个字， 如下图：7. 将“春意盎然”四个字通过两次“分离”变成离散点；8. 选中“春意盎然”四个字，点击菜单【修改】|【形状】|【将线条转换为填充】；9. 右键点击图层2的第40帧，选择“插入帧”。10. 右键单击帧面板中的图层2,点击【遮罩层】。11. 此时基本完成。点击【控制】|【测试影片】，查看动画效果。扩展练习题目
32、：红星闪闪。动画效果如下:知识提要：将线条转化为填充创建遮罩动画使用变形面板任意变形工具中“注册点”的应用学 习使用橡皮工具中的“水笼头”工具和擦除线条。（1）创建新文档1、设置影片文档属性执行【文件】I【新建】命令，在弹出的面板中选择【常规】I【Flash文档】选项后，点 击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*400象素，【背 景色】为黑色。（在教程中，我们为了更好的显示场景中的内容，背景色设为了深蓝色）如 图3-5-3所示。图3-5-3文档【属性】面板(2)创建元件1、创建“闪光线条”元件执行【插入】I【新建元件】命令，新建一个图形元件，名称为“闪光线条”
33、。选择工具 栏上的直线工具，在场景中画一直线，在【属性】面板上作如图3-5-5设置。图3-5-5闪光线条的【属性】面板参数设置2、创建“闪光线条组合”元件执行【插入】I【新建元件】命令，新建一个图形元件，名称为“闪光线条组合”如图 3-5-6所示。图3-5-6创建闪光线条元件从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在X轴上的位置为 -200，Y轴为20。然后单击工具栏上的任意变形工具，此时元件的中心会出现一个小白点， 它就是对象的“注册点”，用鼠标左键按住它，拖到场景的中心处松手。图3-5-7中的“1”显示的是注册点在元件的中心时的情形，“2”显示的是注册点已拖 到场景中心时
34、的情形。然后执行【窗口】I【设计面板】I【变形】命令，打开变形面板，选中【旋转】，角度为15 度，连续按下【复制并应用变形】按钮，在场景中复制出的效果如图3-5-8所示。图3-5-8变形面板及复制好的元件在时间轴的关键帧上点一下，选中全部图形，执行【修改】I【分散】命令，把线条打 散，再执行【修改】I【形状】I【将线条转化为填充】命令，将线条转变为形状。3、创建“闪光”元件执行【插入】I【新建元件】命令，新建一个影片剪辑，名称为“闪光”，如图3-5-9所 示。图3-5-9创建“闪光”元件单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组合”的元件拖 到场景中，对齐中心点，复制此元
35、件，在第30帧处加关键帧，再回到第1帧中建立补间动 作动画，【属性】面板上设置顺时针旋转一周。然后新建一层，在第1帧中执行【编辑】I【粘贴到当前位置】命令，使二层中的“闪 光线条组合”完全重合，再执行【修改】I【变形】I【水平翻转】命令，让复制过来的线条 和第一层的线条方向相反，在场景中形成交叉的图形。在第30帧处建立关键帧，在第1帧中建立动作补间动画，【属性】面板上设置逆时针旋 转一周，最后将此层设为遮罩层，如图3-5-10所示。图中显示的是“闪光”元件的时间轴 面板和各图层中的动画设置。图3-5-10 “闪光”元件编辑界面4、创建“红星”元件执行【插入】I【新建元件】命令，新建一个图形元件
36、，名称为“红星。我们要在这个 元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图3-5-11中的 “1-9 ”的数字表示这九个步骤。图3-5-11红星的九步画法第一步，按住shift键，从场景中心向上画一根黄色的线条，如图3-5-11中的“1”所示。第二步，选择工具箱中的任意变形工具，在画好的线条上点一下，这里，线条的中心出 现一个白色的小园点，我们叫它“注册点”。如图3-5-11中的“2”所示。第三步，鼠标左键按住这个小白点，拖到线条的最下端，这是因为我们要让线条要以下 端为中心旋转复制。如图3-5-11中“3”所示。第四步，执行【窗口】1【设计面板】I【变形】，打开变形面
37、板，各参数设置如图3-5-12。图3-5-12变形面板按下【复制并应用变形】按钮四次，就会在场景中每隔72度复制出一根线条，五个线 条的顶端构成五角星的五个顶点。如图3-5-11中的“4”所示。第五步，用绿色线条分别连接五根线条的顶端，五角星的模样已经出来了，如图3-5-11 中“5”所示。第六步，用白色线条分别连接五角星中心和上一步连线的中点，如图3-5-11中“6”所 示。第七步，选择工具栏上的橡皮工具，在工具栏下面的选项中选择“水笼头”工具，在 多余的线段上点一下，去除线段，修整好的五角星如图3-5-11中的“7”所示。第八步，用油漆筒工具给五角星上色，每个角的左右颜色可略有区别，增加立
38、体感，如 图3-5-11中的“8”所示。第九步：再选择橡皮工具，点开旁边的小三角，在“擦除线条”前打勾，如图3-5-13 所示。图3-5-13擦除线条用橡皮工具擦去红星上的线条，一颗漂亮的红星就做成了，如图3-2-11中“9”所示。技巧：在Flash8.0中，还可以用更简单的方法画红星，选择工具栏上的多角星形工具， 如图 3-5-14。图3-5-15多角星形工具选项设置面板-图3-5-14多角星形工具-（3）创建动画回到主场景中，把“闪光”元件拖入第二层，新建二层，第三层中拖入“红星”元件， 在场景的下方写下白色的“闪客启航电影制片厂”的文字，完成后的时间帧面板及场景如图图3-5-16时间轴及
39、场景3-5-16 所示。按Ctrl+Enter组合键，测试动画。此时，你欣赏着自己亲手做的“闪闪红星”动画，心 中再回想一下“遮罩”在动画中的作用，是否已经感受到“遮罩”这一功能的神奇？8、按钮元件的简单制作制作步骤如课件ppt所示。9、在FLASH中如何使用按钮控制音乐播放？1）导入声音到舞台或者你想要的帧.2）选中库中的声音文件，单击鼠标右键，在弹出的菜单中选择“链接.”将会弹出一 个链接的对话框，请勾选“为动作脚本导出”和“在第一桢导出”选项，并输入一个标识符 （也就是声音文件的名字）：mysound （名字可任意写），单击确定.3）回到主舞台，选中时间轴的第一桢，按F9打开动作面板。现
40、在我们要创建一个新 的声音对象，并且连接到库里的声音。用来控制声音。输入以下脚本：music = new Sound（）;/创建一个名字叫music的声音对象。music.attachSound（mysound）;/将这个声音对象与库里的标识符为“ mysound”的声音连接。4) 现在需要在舞台上放置两个按钮分别控制声音的播放与停止。选择“窗口”- “公 用库” “按钮”，打开flash为我们设置的公用按钮元件库，再将Circle Buttons中的Play 按钮和Stop按钮拖放到舞台上。或者你自己制作按钮.5) 此时，舞台上将有播放和停止两个按钮，选中Play按钮，打开动作面板，输入以下
41、 脚本：on (release) (music.start();/播放声音选中Stop按钮，输入以下脚本：on (release) (music.stop();/停止播放声音9、综合实例：海底世界海底是很多人向往的神秘世界，今天，我们就用Flash来试着描绘这个世界。这个实例 中包括了补间运动动画、补间形状动画、遮罩动画、引导路径动画等四种动画形式，制作上 要比前面几课中的实例难度大一些，不过，它能综合复习前面学过的内容，操作原理也是我 们熟悉的，相信你一定能顺利完成这个实例，其运行效果如下图所示。图海底世界知识提要：1、综合应用四种动画形式2、创建透明水泡3、创建多层遮罩制作步骤：(1) 创
42、建影片文档新建一个影片文档，舞台尺寸设置为450*300象素，【背景色】设置为深蓝色，如图 3_6_20 所示。(2) 创建元件本例中的元件较前面的实例要多一些，我们把它们分成“水泡部分”、“海底部分”、 “游鱼部分”三个部分来叙述。先来创建和水泡有关的部分。1、创建“单个水泡”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“单个水泡”。先在场 景中画一个无边的园，颜色任意，大小为30*30，再设置混色器面板的参数，四个调节手柄 全为白色，Alpha值从左向右依次为100%、40%、10%、100%，如图3-6-21所示，用油 漆筒工具在画好的圆的中心偏左上的地方点一下，如对填充
43、的颜色不满意，可以用填充 变形工具进行调整。2、创建“一个水泡及引导线”元件执行【插入】|【新建元件】命令，新建影片剪辑，名称为“一个水泡及引导线”。点 击添加引导层按钮田添加一个引导层，在此层中用铅笔工具参.从场景的中心向上画一 条曲线并在第60帧处加普通帧。在其下的被引导层的第一帧，拖入库中的名为“单个水泡” 的元件，放在引导线的下端，在第60帧加关键帧，把“单个水泡”元件移到引导线的上端 并设置Alpha值为50%，如图3-6-22所示。3、创建“成堆的水泡”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“成堆的水泡”。从库 里拖入数个“一个水泡及引导线”元件，任意改变大小
44、位置，图3-6-23仅供参考。图)4、创建“鱼及引导线”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“鱼及引导线”。此元 件只有引导层和被引导层二层，点击时间轴面板上的添加引导层图标，新建引导层，在 引导层中用铅笔工具 画一条曲线作鱼儿游动时的路径，在被引导层中执行【文件】|【导 入到场景】命令，将本实例中的名为“鱼”的元件导入到场景中，在第1帧及第100帧中分 别置于引导线的两端，在第一帧中建立补间运动动画，在【属性】面板上的【路径调整】、 【同步】、【对齐】三项前均打勾，如图3-6-25所示。图3-6-25鱼及引导线下面我们来创建海底实例中“水波荡漾”效果所需的元件。5、创
45、建“海底”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“海底”。选择第一帧， 然后再执行【文件】|【导入到场景】命令，将本实例中的名为“海底.bmp”的图片导入到 场景中。6、创建“遮罩矩形”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“遮罩矩形”。在场景 中画一个500*4的无边矩形，因为“遮罩层”中的图形在播放时不会显示，所以颜色任意。复制并粘贴这个矩形，向下移一点位置，使其变成二个，再复制并粘贴这二个矩形，再 向下移一点位置，使其变为四个，如此循环，直至创建出一个500*540的矩形，如图3-6-26 所示。7、创建“水波效就完成了，里面有二-4水波荡漾的
46、效果是作却很简单，只用三层执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“水波效果”，如图3-6-27 所示。图3-6-27创建“水波效果”元件先把最下面图层作为当前编辑图层，从库里拖入名为“海底”的图形元件，在【属性】 面板上设置元件的X值为0，Y值为0，在时间帧上点一下右键，在弹出菜单中选择【复制 帧】，在第100帧加普通帧。然后新建一个图层，在这层的第一帧上点一下右键，在弹出菜单中选择【粘贴帧】，就 把刚才的元件粘到第二层里了，在【属性】面板上设置此元件的X值为0，Y值为1，Alpha 值为80%，在第100帧加普通帧。注意：这里是一个技巧：第二层图片与第一层图片的位置差决定水波荡漾的大小！位置 差越大，水波越大，其Alpha值的大小决定水波的清晰程度，Alpha值越大，水波越清晰， 反之越模糊。图3-6-28是第一层和第二层中两张图片在X, Y轴的位置的不同的对比。变化才行这样，才能产生水的流动感。新建一层，在第1帧上拖入库中名为“遮罩矩形”的元件，注意下面的边缘对着“海底 图片”的下边缘。在第100帧上加关键帧，拖动“遮罩矩形”，使其上边缘对着“海底图片” 的上边缘，在第1帧创建补间动作动画。如图3-6-29所示。图3-6-29遮罩层中矩形元件的位置至此，这个动画所需的
