1、第五章 Flash 动画制作实验 5.1 Flash 文档的基本操作【相关知识】1. 动画是一门在某种介质上记录一系列单个画面,并通过一定的速率回放所有记录的画面而产生运动视觉的技术。它的基本原理与电影、电视一样,都是视觉暂留原理。2. 时间轴用于组织和控制文档内容在一定时间内播放的层数和帧数(就好比导演的剧本),它决定了各个场景的切换以及演员的出场、表演的时间顺序。3. 场景是 Flash 进行创作的主要区域,在 Flash 中无论是绘制图形还是编辑动画,都需要在该区域中进行。场景主要由舞台和工作区。舞台指编辑区中间的矩形区域。工作区指舞台周围的灰色区域。工作区放置的内容在最后生成的动画里是
2、不会显示的。一、实验目的和要求1. 熟悉 flash 工作环境。2. 掌握文档的基本操作及设置动画制作环境的方法。3. 掌握导入、导出文件的方法。4. 掌握自定义工作界面的方法。二、实验步骤1. 创建一个 Flash 文档单击【文件】【新建】菜单命令,打开【新建文档】对话框。点击【常规】选项卡,选择要创建的文档类型【Flash 文档】 ,新建一个 Flash 文档。2. 设置动画制作环境,保存文档(1)保持文档打开的情况下,单击【属性】面板中的 按钮,在弹出的颜色列表中,将鼠标移动到某一色块上,单击鼠标左键,即可将该颜色设置为动画的背景颜色。(2)单击【属性】面板中的 按钮,打开【文档属性】对
3、话框。(3)在【尺寸】栏设置【宽】为“600px” ,设置【高】为“400px” ,即可将场景设置为相应的尺寸。(4)单击【时间轴】面板右上角的 下拉列表框中的三角按钮,在弹出的下拉列表框中选择相应的显示比例如 50%。(5)单击【视图】【标尺】菜单命令, 【标尺】前出现“”标记,即可在场景左侧和上方显示标尺。(6)单击【视图】【网格】【显示网格】菜单命令,即可在场景中的舞台区域显示网格。(7)单击【视图】【辅助线】【显示辅助线】菜单命令, 【显示辅助线】前出现“”标记,此时辅助线呈可显示状态,然后在场景上方和左方按住鼠标左键向场景中拖动,拉出场景中的水平和垂直辅助线,如图 5-7 所示。(8
4、)单击【文件】【保存】菜单命令,打开【另存为】对话框。(9)在打开的【另存为】对话框的【保存在】列表框中选择文档保存的路径,在【文件名】文本框中输入文档的名称【Flash5.1-1】 ,选择【保存类型】为“Flash 8 文档(*.fla) ”,保存文档。3. 打开指定文档,导入素材(1)单击【文件】【打开】菜单命令,选择文档“Flash5.1-1” ,单击【打开】按钮打开该文档。(2)单击【文件】【导入】【导入到库】菜单命令,打开【导入到库】对话框。(3)选择要导入的素材的路径,选择导入文件的类型默认为【所有格式】 ,找到需要导入的图像“5.1-1.jpg”和“5.1-2.jpg” ,按下【
5、Ctrl】键用鼠标依次点击要打开的图片图标,单击【打开】按钮,即可将素材放入动画文档“5.1-1.fla”的库中。(4)单击【窗口】【库】菜单命令,打开【库】面板,默认显示在工作界面的右侧。(5)在【库】面板中选择位图对象“5.1-1” ,按住鼠标左键,拖动鼠标至动画文档的舞台中,释放鼠标左键,即可将位图对象放置在舞台中。4. 保存文档源文件,导出影片(1)单击【文件】【保存】菜单命令,直接文档中所做的修改保存在当前文档“Flash5.1-1.fla”中。(2)单击【文件】【导出】【导出影片】菜单命令,打开【导出影片】对话框。(3)选择影片要导出的位置,在【文件名】文本框中输入“5.1-1”
6、,选择【保存类型】为【Flash 影片(*.swf) 】 。(4)单击【保存】按钮,打开【导出 Flash Player】对话框,单击【确定】完成影片导出。【操作技巧与注意事项】1. 保存文件时默认为“.fla”格式,即 Flash 源文件格式,保留图层时间轴信息,可以再次编辑修改。导出文件时可选择导出为图像和导出为影片。导出为图像可导出当前帧中的图像;导出为影片则导出为“.swf”格式文件可以使用 Flash Player 直接播放。2. 若要对显示的网格状态进行更改,可单击【视图】【网格】【编辑网格】菜单命令,在打开的【网格】对话框中对网格进行相应的设置。实验 5.2 绘制图形【相关知识】
7、1. 矢量图形使用称作矢量的直线和曲线描述图像,矢量还包括颜色和位置属性。矢量图形与分辨率无关,这意味着它们可以显示在各种分辨率的输出设备上,而丝毫不影响品质。2. 位图图像使用在网格内排列的称作像素的彩色点来描述图像。图像由网格中每个像素的特定位置和颜色值来描述,这是用非常类似于镶嵌的方式来创建图像。3. Flash 有两种绘图模型,“ 合并绘制”模型和“对象绘制”模型,为绘制图形提供了极大的灵活性。4. 渐变是一种多色填充,即一种颜色逐渐转变为另一种颜色。Flash 可以创建两类渐变:线性渐变是沿着一根轴线(水平或垂直)改变颜色。放射状渐变从一个中心焦点向外改变颜色。一、实验目的和要求1.
8、 掌握将位图转换为矢量图的方法。2. 掌握绘制基本图形的方法。3. 掌握修改、删除对象的方法。4. 掌握为图形填充颜色的方法。二、实验步骤1. 新建一个文档,导入位图对象并将位图转换为矢量图(1)单击【文件】【新建】菜单命令,新建一个 Flash 文档 “未命名-1.fla ”。(2)单击【属性】面板中的 按钮,单击弹出的颜色列表右上角的 按钮,打开【颜色】对话框,选择深紫色。(3)单击【文件】【导入】【导入到库】菜单命令,打开【导入到库】对话框。将图像“5.2-1.jpg”导入到库中。(4)在【库】面板中选择位图对象“5.2-1” ,按住鼠标左键,拖动鼠标至动画文档的舞台中,释放鼠标左键,将
9、位图对象放置在舞台中。(5)保持位图对象被选中的状态,单击工具箱【工具】栏内任意变形工具 按钮,拖动鼠标将位图对象缩小。(6)使用选择工具 按钮选择位图对象,按下【Alt】键拖动鼠标至舞台右侧,复制位图对象。(7)保持复制后的位图对象被选中的状态,单击【修改】【位图】【转换位图为矢量图】菜单命令,打开【转换位图为矢量图】对话框,设置【颜色阀值】为“50” ,设置【最小区域】为“5 像素” 。(8)单击【确定】按钮完成位图到矢量图的转换。(9)在【时间轴】面板的图层区中,单击【图层 1】右侧的 按钮,将该图层以轮廓方式显示,此时场景中的位图只显示出该图片的形状轮廓,而矢量图除了显示其形状轮廓外,
10、还显示出了图中主要内容的轮廓以及不同色彩的填色区域。(10)在【时间轴】面板的图层区中,单击【图层 1】右侧的 按钮,将该图层重新以正常方式显示。(11)单击【时间轴】面板右上角的 下拉列表框中的三角按钮,在弹出的下拉列表框中选择相应的显示比例“400%” ,将场景以“400%”的比例显示,可以看到舞台中左侧的位图对象在放大过程中出现马赛克现象,而矢量图形除了图形放大外,没有出现任何变化。(12)单击【文件】【保存】菜单命令,将文档保存为“5.2-1.fla”,完成位图和矢量图的对比。2. 新建一个文档,绘制一个纸盒子(1)新建一个文档,单击工具箱【工具】栏内矩形工具按钮 ,单击工具箱【颜色】
11、栏内笔触颜色按钮 ,在弹出的颜色表中选择红色,颜色值为“#CC3300” 。(2)单击工具箱【颜色】栏内填充颜色按钮 ,在弹出的颜色表中单击 按钮,将填充颜色设置为“无” 。(3)将鼠标移人舞台,鼠标变成 形状,按下鼠标左键拖动鼠标绘制矩形。(4)单击工具箱【工具】栏内任意变形工具 按钮,将鼠标移入舞台,鼠标变成形状,按下鼠标左键从矩形的左上角开始向下拖动,将整个矩形选中。(5)此时矩形周围出现 8 个黑色的小方块,把鼠标指针移动到矩形的上边,按住鼠标左键不放,向右拖动鼠标。红色边线的矩形为变形前的形状,黑色边线的区域为变形后的形状。(6)保持矩形被选中的状态,单击【编辑】【复制】菜单命令,复
12、制矩形。(7)单击【编辑】【粘贴到当前位置】菜单命令,将复制的矩形粘贴在当前位置,按下键盘上的【】键,使复制的矩形垂直向下移动。(8)单击工具箱【工具】栏内直线工具 按钮,在上方矩形的顶点位置按下鼠标拖动鼠标到下方矩形的顶点位置,连接两个矩形的顶点,同样的方法将两个矩形四个顶点都连接起来。如图 5-1 所示。图 5-1 连接两个矩形(9)单击工具箱【工具】栏内选择工具按钮 ,按下【Shift】键不放的同时,选择矩形内部的线段。如图 5-2 所示,粗线部分为选中的线条。按下【Delete】键,删除选中的线条。图 5-2 选择矩形内部线条(10)单击工具箱【颜色】栏内填充颜色按钮 ,在弹出的颜色表
13、中单击红黑渐变按钮。(11)单击【窗口】【混色器】菜单命令,打开【颜色】面板,选择【填充样式】为“放射性” ,点击渐变编辑器的第一个色块,在混色器中选择红色,颜色值为“#D50000”,设置第二个色块的颜色为白色,颜色值为“#FFFFFF” 。(12)将鼠标移入舞台,单击的“立方体”前面的右下角,将该面填充颜色。(13)用鼠标单击“立方体”右侧面的左上角,给右侧面填充颜色。(14)在【混色器】面板中,设置第一个滑块颜色值为“#C19E13” ,第二个滑块的颜色不变。用鼠标单击“立方体”内部的左下角,给该面填充颜色。如图 5-3 所示。图 5-3 为立方体内部填充颜色(15)用鼠标单击“立方体”
14、内部的坐厕面的右下角,为该面填充颜色。3. 在指定的文档中编辑图形(1) )单击【文件】【打开】菜单命令,打开文档“5.2-2.fla” 。(2)单击【文件】【导入】【导入到库】菜单命令,导入素材文件“5.2-2.jpg” 。(3)单击【层】面板中【图层 1】右侧 下方的圆点,将【图层 1】锁定。(4)单击【层】面板底部【插入图层按钮】 ,插入一个新图层【图层 2】 。(5)保持【图层 2】被选中的状态,在【库】面板中选择位图对象“5.2-2” ,按住鼠标左键,拖动鼠标至动画文档的舞台中,释放鼠标左键,将位图对象放置在舞台中。(6)单击【窗口】【变形】菜单命令,打开【对齐&信息&变形】面板,选
15、择【约束】选框,设置【宽度】为“25%” ,按下键盘上【Enter】键完成变形。(7)保持位图对象“5.2-2.jpg”被选中的状态,单击【修改】【位图】【转换位图为矢量图】菜单命令,打开【转换位图为矢量图】对话框,设置【颜色阀值】为“50”,设置【最小区域】为“5 像素” 。(6)单击工具箱【工具】栏内选择工具按钮 ,按下【Shift】键不放的同时,选择矢量图形的白色部分。如图 5-4 所示。按下键盘上的【Delete】键将所选部分删除。图 5-4 选择矢量图形的白色区域(7)按下鼠标左键拖动鼠标,选择位图对象在立方体正面部分图形,如图 5-5 所示。按下【Delete】键将所选部分删除。图
16、 5-5 选择立方体正面部分的矢量图形【操作技巧与注意事项】1. 转换位图为矢量图事,在【颜色阀值】和【最小区域】文本框中输入的数字越小,则转换出的矢量图越精细,但需要处理的数据也相应的增多。2. 使用多角星形工具时,在【工具设置】对话框的【边数】文本框中只能输入 332之间的数字;在【星形顶点大小】文本框中只能输入一个介于 01 之间的数字,用于指定星形顶点的深度,数字越接近 0,创建的顶点就越深。在绘制多边形时,星形顶点的深度对多边形没有影响。3. 在【混色器】面板中拖动渐变调节滑块的位置,可调节颜色的渐变过程。还可以在渐变调节进度条上的空白区域中单击鼠标左键增加新的渐变调节滑块,以制作出
17、具有多重颜色渐变效果的渐变色。如果要删除新增的渐变调节滑块,只需按住鼠标左键,将其拖动到【混色器】面板外即可。实验 5.3 文字特效【相关知识】1. Flash 中可以创建三种类型的文本字段: 静态文本字段、动态文本字段和输入文本字段。静态文本字段显示不会动态更改字符的文本。动态文本字段显示动态更新的文本,如体育得分、股票报价或天气报告。输入文本字段使用户可以将文本输入到表单或调查表中。2. Flash 在文本块的一角显示一个手柄,用以标识该文本块的类型。3. 时间轴特效是预建的动画效果,可以使用时间轴特效在文本中轻松添加动画。4. 分离文本,即将每个字符放在一个单独的文本块中。分离文本之后,
18、就可以迅速将文本块分散到各个图层,然后分别制作每个文本块的动画。一、实验目的和要求1. 掌握输入文本及设置文本属性的方法。2. 掌握使用时间轴特效在文本中添加动画的方法。3. 掌握将文本分离的方法。4. 掌握制作基本的文字特效的方法。二、实验步骤1. 新建一个文档,输入文本并设置文本属性(1)单击【文件】【新建】菜单命令,新建一个 Flash 文档。(2)单击工具箱【工具】栏内文本工具按钮 ,在【属性】面板设置【文字类型】为“静态文本” ,在文本的【字体】下拉列表中选择“Broadway” ,设置文本【大小】为“48”,单击【文本(填充)颜色】按钮,在弹出的颜色表中选择蓝色,颜色值为“#330
19、066”,点击文字切换粗体按钮 ,将文本设置为粗体。(3)将鼠标移入工作区中,鼠标指针变成 形状,在需要输入文本的位置单击出现文本块,将鼠标移入文本块内,输入文本“Flash 8” 。(4)双击【层】面板中【图层 1】的名称,将【图层 1】名称修改为“扩展的静态文本” 。单击该层右侧 下方的圆点,将【扩展的静态文本】层锁定。(5)单击【层】面板底部【插入图层按钮】 ,插入一个新图层修改名称为“固定宽度的静态文本” 。(6)单击工具箱【工具】栏内文本工具按钮 ,在【属性】面板设置【文字类型】为“静态文本” , 【字体】为 “黑体” ,文本【大小】为“24” ,设置【文本(填充)颜色】为橙色,颜色
20、值为“#FF6600” ,点击按钮 将文本设置为粗体。将鼠标移入舞台中,按住鼠标左键不放拖动鼠标拖出一个文本输入框。(7)在文本框中输入“Flash 8 文字基础知识学习情况调查表” 。(8)将鼠标移到文本块右上角的方形手柄上,按下鼠标左键不放向右拖动鼠标,调节文本块的宽度。(9)单击【层】面板中【扩展的静态文本】层右侧 下方的圆点,解除【扩展的静态文本】层的锁定。(10)单击工具箱【工具】栏内选择工具按钮 ,点击文本“Flash 8”选择该文本,按下鼠标左键不放拖动鼠标移动该文本到舞台中间偏上的位置。点击文本“Flash 8文字基础知识”选择该文本,按下鼠标左键不放拖动鼠标移动该文本到文本“
21、Flash 8”的下方。(11)单击工具箱【工具】栏内文本工具按钮 ,在【属性】面板设置【文字类型】为“静态文本” , 【字体】为“黑体” ,文本【大小】为“24” ,设置【文本(填充)颜色】为“黑色” ,颜色值为“#000000” ,点击文字切换粗体按钮 ,取消文字粗体设置。(12)将鼠标移入舞台中,按住鼠标左键不放的同时拖动鼠标,在工作区中拖出一个文本输入框,释放鼠标。在文本框中输入文本“请输入你的学号:” 。(13)在文本“请输入你的学号:”下方,按住鼠标左键不放的同时拖动鼠标,在工作区中拖出一个文本输入框。在文本框中输入文本“请输入你的姓名:” 。(14)在文本“请输入你的学号:”下方
22、,按住鼠标左键不放的同时拖动鼠标,在工作区中拖出一个文本输入框。在文本框中输入文本“学习中遇到的问题:” 。输入完毕后的效果如图 5-6 所示。图 5-6 输入文本后的效果(15)将【扩展的静态文本】和【固定宽度的静态文本】层锁定。(16)单击【层】面板底部【插入图层按钮】 ,插入一个新图层修改图层名称为“输入文本” 。(17)单击工具箱【工具】栏内文本工具按钮 ,在【属性】面板的点击【文字类型】下拉列表选择文字类型为“输入文本” ,设置【字体】为“黑体” ,设置文本【大小】为“20” ,设置【文本(填充)颜色】为“黑色” 。点击【线条类型】下拉列表选择“单行” ,点击【在文本周围显示边框】按
23、钮 。(18)在文本“请输入你的学号:”右侧按下鼠标左键不放拖动鼠标,在工作区中拖出一个文本输入框。(19)同样的方法依次在文本“请输入你的学号:”和文本“学习中遇到的问题:”右侧拖出文本框。(20)保持文本“学习中遇到的问题:”右侧文本框激活装态下,在【属性】面板点击【线条类型】下拉列表选择“多行” 。(21)在该文本框光标闪烁处中按下【Enter】键 4 次,扩展文本块区域。(22)同时按下键盘上的【Ctrl】和【Enter】 ,进入影片测试状态,在输入文本框中输入姓名、学号和 遇到的问题。如图 5-7 所示。图 5-7 测试影片2. 在指定文档中添加时间轴特效(1)单击【文件】【打开】菜
24、单命令,打开文档“5.3-1.fla” 。(2)单击【层】面板中【扩展的静态文本】层,选中该图层上的文本对象。(3)单击【插入】【时间轴特效】【效果】【展开】菜单命令。(4)打开【展开】对话框,设置【效果持续时间】为“20”帧数,选择【展开方式】为“两者皆是” ,选择【移动方向】为从中间向两边移动,其它设置不变,单击【更新预览】按钮在预览框中查看效果。单击【确定】按钮完成【展开】效果添加。(5)单击【层】面板中【固定宽度的静态文本】层,选中该图层上的所有文本对象。(6)单击【插入】【时间轴特效】【效果】【投影】菜单命令,打开【投影】对话框。设置【阴影偏移】X 为“2 像素” ,Y 为“2 像素
25、” 。单击【确定】按钮完成【阴影】效果添加。单击【修改】【时间轴特效】【编辑】菜单命令,打开【投影】对话框可重新设置相应参数。(7)单击【层】面板中【投影 1】层,激活该层。在【时间轴】面板中该层 20 帧的位置按下【F5】键,插入帧。如图 5-8 所示。图 5-8 插入帧(8)单击【输入文本】层,激活该层。在【时间轴】面板中该层 20 帧的位置按下【F5】键,插入帧。(9)同时按下键盘上的【Ctrl】和【Enter】 ,进入影片测试状态。3. 新建一个文档,制作花朵文字(1)单击【文件】【新建】菜单命令,新建一个 Flash 文档。(2)单击工具箱【工具】栏内文本工具按钮 ,设置【文字类型】
26、为“静态文本” ,设置【字体】为“黑体” ,文本【大小】为“96” ,文本【颜色】为“黑色” ,点击文字切换粗体按钮 ,将文本设置为粗体。(3)按住鼠标左键不放的同时拖动鼠标,在工作区中拖出一个文本输入框。输入文本“花朵文字” 。(4)单击【文件】【导入】【导入到库】菜单命令,打开【导入到库】对话框。导入图像“5.3-1.jpg” 。(5)在【库】面板中选择位图对象“5.3-1” ,按住鼠标左键不放拖动鼠标至动画文档的舞台中,释放鼠标左键,将位图对象放置在舞台中。(6)保持位图对象被选中的状态,单击【修改】【分离】菜单命令,将位图对象打散。(7)单击工具箱【工具】栏内滴管工具按钮 ,将鼠标移到
27、打散后的位图对象上,鼠标指针变成 形状,单击鼠标,鼠标变成 形状,则填充颜色变成打散后的位图。(8)使用选择工具按钮 选择“花朵文字”文本,按下【Ctrl+B】键将文字分离。再次按下【Ctrl+B】 将其第次打散。(9)单击工具箱中的颜料桶工具按钮 ,将鼠标移到打散后的文本上,依次单击花朵文字的每个部分。(10)使用选择工具按钮 单击工作区域,则【属性】面板显示为文档的属性。单击【属性】面板中的 按钮,将背景修改为绿色,颜色值为“#589961” 。此时填充了位图的文字效果显现出来,如图 5-9 所示。图 5-9 填充了位图的文字(11)单击工具箱中墨水瓶工具按钮 ,在【属性】面板设置笔触颜色
28、为粉色,颜色值为“#FC9EC2” 。设置【笔触高度】为“2” 。点击【笔触类型】下拉列表,选择虚线类型。(12)移动鼠标到文字边缘,鼠标变成墨水瓶形状,依次在“花朵文字”边缘单击鼠标为文字添加粉色的虚线笔触。(13)使用选择工具按钮 单击工作区域,在【属性】面板将文档背景色修改为白色。(14)将鼠标移动到打散的位图对象附近,按下鼠标左键不放拖动鼠标将位图对象选中后,按下【Delete】键将其删除。单击【文件】【保存】菜单命令,将文档保存为“5.3-3.fla” 。【操作技巧与注意事项】1. 可以使用对其它对象进行变形的方式来变形文本块。如缩放、旋转、倾斜和翻转文本块以产生有趣的效果。将文本块当作对象进行缩放时,磅值的增减不会反映在“属性”检查器中。已变形文本块中的文本依然可以编辑,尽管严重的变形可能会使文本变得难以阅读。2. 如果处理的文档包含系统中没有安装的字体,Flash 会用系统中可用的字体来替换缺少的字体。可以选择使用系统中的哪种字体来替换缺少的字体,或者可以让 Flash 用“Flash 系统默认字体” (在 “常规首选参数”中指定)来替换缺少的字体。