《人机界面设计》实验指导书三.doc
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《《人机界面设计》实验指导书三.doc》由会员分享,可在线阅读,更多相关《《人机界面设计》实验指导书三.doc(17页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、【精品文档】如有侵权,请联系网站删除,仅供学习与交流人机界面设计实验指导书三.精品文档.人机界面设计实 验 指 导 书丰 艳青岛科技大学信息科学技术学院实验三 Flash 8动画制作一、实验目的及要求:(1)了解二维动画艺术设计的基础知识及其工具软件。(2)了解关于Flash二维动画艺术设计的基础知识。(3)掌握Flash 8中特效文字的制作。(4)掌握补间动画、引导动画和遮罩动画的制作。二、实验平台: 操作系统:Windows XP以上版本 实验环境:Microsoft Visio Professional 2003版三、实验内容:1、本实验中,我们以Micromedia Flash Pro
2、fessional 8中文简体版 (简称Flash) 为工作环境,来学习Flash动画的制作原理和方法。首先要熟悉该软件的工作环境,具体包括:场景舞台、绘图工具箱、时间轴、库面板、属性面板。2、学习制作各种特效文字。3、学习制作补间动画。4、学习制作引导动画。5、学习制作遮罩动画。四、实验步骤:1、熟悉Flash8 的工作环境利用绘图工具箱在场景面板中绘制各种图形,并利用属性面板设定属性,并将绘制的图形生成“图形元件”,观察“库面板”中的变化。利用“文件”菜单下的“导入”,可以将硬盘上的图形图像资源导入进“库”。2、绘图线条工具 :按住shift键拖动可以绘制倾斜45度倍数的线条。椭圆工具 :
3、按住shift键拖动可以绘制圆。矩形工具 :按住shift键拖动可以绘制正方形。通过单击圆角矩形并输入一个角半径值即可绘制圆角矩形。当角半径值为0时,则创建的是矩形。多角星形工具 :使用矩形工具绘制多角星形。多角星形工具是矩形工具的附属工具。左键单击并按住矩形工具,弹出“矩形工具/多角星形工具”切换卡,选择“多角星形工具”。可以利用多角星形工具属性栏中的选项对话框,设置绘制的样式,边数和星形顶点的深度 变形工具 :变形某对象时,先使用选择工具选择待变形的对象。 变形工具移动到对象边角时指针变为 ,可以同时改变对象的宽度和高度。 变形工具移动到对象的左右变线中部指针变为时 ,可以改变对象的宽度。
4、 变形工具移动到对象的上下边线中部指针变为时 ,可以改变对象的高度。 变形工具移动到对象边线指针变为时 ,可以改变对象的倾斜角度。 变形工具移动到对象边角外指针变为时 ,可以旋转对象。墨水瓶工具 :更改线条或者形状轮廓的笔触颜色、宽度和样式。颜料桶工具 :更改填充区域的颜色。 填充变形工具 :应用渐变效果,渐变是由某种颜色过渡到另一种颜色的变化过程。铅笔工具 :铅笔工具有3种绘图模式: 伸直:适于绘制规则线条,并且绘制的线条会分段转换成与直线、圆、椭圆和矩形等规则线条中最接近的线条 平滑:适于绘制平滑曲线,将曲线的抖动部分忽略 墨水瓶:徒手模式,适用于绘制接近徒手画出的线条钢笔工具 :使用钢笔
5、工具能够绘制多节点曲线,并能够增加和删除曲线上的节点。通过锚点的控制可以准确地绘制直线和平滑曲线。使用方法: 1选取工具箱中的钢笔工具2在场景中单击鼠标后放开,设定第一个点位置,然后在另一点单击,则两点自动连成直线 3在场景中单击并拖动控制手柄,松开鼠标,然后在另一点单击并拖动控制手柄以调整曲线,则绘制一条曲线,两点的控制手柄与曲线相切4按下Ctrl键,然后单击,或者直接单击曲线,当鼠标移动到曲线上时,在光标右下角将出现一个“+”号,单击曲线,可以增加一个锚点5当鼠标移动到锚点上,在鼠标的右下角出现一个“”号,单击,即可删除该锚点。使用钢笔工具绘制曲线笔刷工具 :使用笔刷工具可以产生毛笔画出来
6、的效果,可以对绘制的图形上色,还可以创造出许多特殊的效果。笔刷工具五种工作模式: 标准绘画:笔刷画出来的图线覆盖先画的图线和背景颜色。图(a)为原有图形,图(b)为使用标准绘画模式绘制线条后的效果图。 颜料填充:笔刷只能在空白和原有的颜色填充区域画线,原有图线将被保留,透过笔刷颜色显示出来,如图(c)所示。 后面绘画:笔刷在空白区域画线,而其线条和图形将保留原状态不变,如图(d)所示。 颜料选择:笔刷将填充选择的部分,所以在填充前必须先选择一个图形区域。 内部绘画:笔刷画出的线条只能在起始点所在的图形区域内有效,如果起始点在空白区域,那么只能在空白区域内画线,现有图形区域将不受影响。(a) (
7、b) (c) (d) (e) (f)3、特效文字的制作(1) 填充文字:制作步骤如下: (1)新建一个Flash文档。选择【文件】【新建】命令,或按快捷键Ctrl+N,新建一个Flash文档。(2)设置文档属性。选择【修改】【文档】命令,或按快捷键Ctrl+J,弹出【文档属性】对话框,在【标题】文本框中输入“位图填充文字效果”,将【尺寸】设置为400300像素,其他保持不变。(3)选择工具栏中的文本工具,在【属性】面板中将字体设置为“Arial Black”, 【大小】设置为96,【字间距】设置为10,在舞台中创建文本“FLASH”。(4)选择工具栏中的选择工具,选中创建的文本对象,单击菜单栏
8、中的【修改】【分离】命令,或按快捷键Ctrl+B,文本框就会被分离成单个字符。再按一次快捷键Ctrl+B,这时的文本对象就被转换成矢量图形(5)导入位图。选择菜单栏中的【窗口】【混色器】命令,打开【混色器】面板,在【类型】下拉列表中选择位图填充方式,这时将弹出【导入到库】对话框。(6)当选择了一幅或多幅位图以后,此时的【混色器】面板如图3-21所示。在保证矢量图形被选中的前提下,在【混色器】面板中选择要填充的位图。(7)此时矢量图形(文字)即会被选中的位图所填充。(8)保存影片。选择【文件】【保存】命令,或按快捷键Ctrl+S保存影片。(9)测试影片。选择【控制】【测试影片】命令,或按快捷键C
9、trl+Enter测试影片。(2) 空心字:制作步骤如下:(1) 新建一个Flash文档。选择【文件】【新建】命令,或按快捷键Ctrl+N,新建一个Flash文档。(2)设置文档属性。选择【修改】【文档】命令,或按快捷键Ctrl+J,弹出【文档属性】对话框,在【标题】文本框中输入“空心字”,其他保持不变。(3)选择工具栏中的文本工具,在【属性】面板中将字体设置为“Arial Black”, 【大小】设置为96,【字间距】设置为10,在舞台中创建文本“FLASH”。(4)仿照上例,通过两次【修改】【分离】命令,或连按两次快捷键Ctrl+B,将文本对象转换成矢量图形。(5)在工具栏中,选择【墨水瓶
10、工具】,并设定好【墨水瓶】属性:【笔触颜色】蓝色;【笔触高度】5;【笔触样式】实线。(6)用鼠标点一下舞台中文字的边线,文字的外围就被蓝颜色框住了。(7)依次单击其它字母(8)选择工具栏中的【选择工具】,选中舞台中文字中间的黑色部分(可按住键盘上的Shift键连续选择)。按键盘上的【Delete】键去除选中的部分,留下文字的外框。完成本例。(9)保存影片。选择【文件】【保存】命令,或按快捷键【Ctrl+S】保存影片。(10)测试影片。选择【控制】【测试影片】命令,或按快捷键【Ctrl+Enter】。(3) 发光字的制作:(利用滤镜)(1) 新建一个Flash文档。选择【文件】【新建】命令,或按
11、快捷键【Ctrl+N】,新建一个Flash文档。(2)设置文档属性。选择【修改】【文档】命令,或按快捷键【Ctrl+J】,弹出【文档属性】对话框,在【标题】文本框中输入“发光字效果”,将【尺寸】设置为450300像素,【背景】设置为黑色,【颜色代码】#000000,其他保持不变。(3)选择工具栏中的文本工具,在【属性】面板中将字体设置为“Arial Black”, 【大小】设置为96,【字间距】设置为10,【颜色】任意,在舞台中创建文本“FLASH”。(4)添加投影滤镜。单击属性面板中的【滤镜】标签,打开滤镜面板。单击【添加滤镜】按钮,从弹出的下拉菜单中选择投影滤镜。在【滤镜】属性面板中将【角
12、度】设置为210,【距离】设置为1,其他保持不变。(5)添加渐变发光滤镜。在滤镜面板中单击添加滤镜按钮,从弹出的下拉菜单中选择渐变发光滤镜。将【模糊X】和【模糊Y】值设置为10,【品质】设置为中,【角度设置为196】【距离】设置为-2。(6)将【类型】设置为整个,然后在渐变定义栏中为滤镜添加4个指针。从左数第二个开始,把指针颜色分别设置为淡黄色(#FFFFCC)、黄色(#FFFF00)、蓝色(#0066FF)、浅蓝色(#00FFFF)、深蓝色(#000066)。(7)在滤镜面板中单击【添加滤镜】按钮,从弹出的下拉菜单中选择模糊滤镜。将【模糊X】和【模糊Y】值设置为2,【品质】保持不变。(8)选
13、择【文件】保存】命令,或按快捷键【Ctrl+S】保存影片。(9)测试影片。选择【控制】【测试影片】命令,或按快捷键【Ctrl+Enter】。4、制作第一个简单动画:弹跳的小球 步骤一:新建一个Flash文档。步骤二:在图层(更名:背景)的第一帧处,设置小球运行的背景。步骤三:增加一个图层(更名:小球),在第帧处,制作一个小球(转换成图形元件)。步骤四:在第30帧处(或其他帧),插入关键帧,并将小球在舞台上移动到合适的位置。步骤五:在第60帧处,插入一关键帧,并将小球拖加原处。步骤六:在第帧与第30帧之间创建补间动画;在第帧与第帧处创建补间动画。步骤七:在背景图层的第60帧处,按F5,将其延长至
14、60帧处。步骤八:trlnter(测试影片)进行影片测试 5、补间动画的制作Flash的补间动画分为两种:动作补间动画与形状补间动画。上述实验4-弹跳的小球,就是利用“动作补间动画”实现的。而我们经常见到的变形动画,则是利用“形状补间动画”来实现的。动作补间动画与形状补间动画有很多地方相似,但是它们的根本区别在于:形状补间动画所实现的是某一对象从一个形状到另一个形状的渐变。待变形的对象一定不能是元件,如果待变形的对象已经是元件,则首先要利用“修改”菜单下的“分离”,将元件打散。1动作补间动画的概念 (1)动作补间动画的概念在Flash的时间帧面板上,在一个时间点(关键帧)放置一个元件,然后在另
15、一个时间点(关键帧)改变这个元件的大小、颜色、位置、透明度等等,Flash 根据二者之间的帧的值创建的动画被称为动作变形动画。(2)构成动作补间动画的元素构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮等等,除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行,只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。(3)动作补间动画在时间帧面板上的表现 动作补间动画建立后,时间帧面板的背景色变为淡紫色,在起始帧和结束帧之间有一个长长的箭头,如图3-4-1所示。图3-4-1 动作补间动画在时间帧上的表现(4)形状补间动画和动作补间动画的区
16、别 形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧,二者之间的区别如下表所示。区别之处动作补间动画形状补间动画在时间轴上的表现淡紫色背景加长箭头淡绿色背景加长箭头组成元素影片剪辑、图形元件、按钮形状,如果使用图形元件、按钮、文字,则必先打散再变形。完成的作用实现一个元件的大小、位置、颜色、透明等的变化。实现二个形状之间的变化,或一个形状的大小、位置、颜色等的变化。5)创建动作补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件,一帧中只能放一个项目,在动画要结束的地方创建或选择一个关键帧并设置该元件的属性,再单击开始帧,在【属性面板】上单击
17、【补间】旁边的“小三角”,在弹出的菜单中选择【动作】,或单击右键,在弹出的菜单中选择【新建补间动画】,就建立了“动作补间动画”。2动作补间动画的属性面板 在时间线“动作补间动画”的起始帧上单击,帧属性面板会变成如图3-4-2所示。图3-4-2动作补间动画属性面板(1)“简单”选项 在“0”边有个滑动拉杆按钮 ,单击后上下拉动滑杆或填入具体的数值,补间动作动画效果会以下面的设置作出相应的变化: 在1到 -100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速补间。 在1 到 100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。 默认情况下,补间帧之间的变化速率是不变的
18、。 (2)“旋转”选项 有四个选择,选择“无”(默认设置)禁止元件旋转;选择“自动”可以使元件在需要最小动作的方向上旋转对象一次;选择“顺时针”或“逆时针”,并在后面输入数字,可使元件在运动时顺时针或逆时针旋转相应的圈数。练习:制作一个在地面上向前滚动的皮球。(要点:在前后两个关键帧中,分别设定皮球的两个不同位置;利用属性面板中“旋转”设置皮球的自转)1形状补间动画的概念 (1)形状补间动画的概念在Flash的时间帧面板上,在一个时间点(关键帧)绘制一个形状,然后在另一个时间点(关键帧)更改该形状或绘制另一个形状,Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。(2)
19、构成形状补间动画的元素 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化,其变形的灵活性介于逐帧动画和动作补间动画二者之间,使用的元素多为用鼠标或压感笔绘制出的形状,如果使用图形元件、按钮、文字,则必先“打散”再变形。(3)形状补间动画在时间帧面板上的表现 形状补间动画建好后,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头,如图3-3-1所示。图3-3-1 形状补间动画在时间帧面板上的标记(4)创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状,一般一帧中以一个对象为好,在动画结束处创建或选择一个关键帧并设置要
20、变成的形状,再单击开始帧,在【属性】面板上单击【补间】旁边的小三角,在弹出的菜单中选择【形状】,此时,时间轴上的变化如图3-3-1所示,一个形状补间动画就创建完毕。2形状补间动画的属性面板Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后,点击时间帧,【属性】面板如图3-3-2所示。图3-3-2 形状补间动画【属性】面板形状补间动画的【属性】面板上只有二个参数:(1)“简单”选项 在“0”边有个滑动拉杆按钮 ,单击后上下拉动滑杆或填入具体的数值,形状补间动画会随之发生相应的变化。在1到 -100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速
21、度补间。 在1 到 100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。 默认情况下,补间帧之间的变化速率是不变的。 (2)“混合”选项 “混合”选项中有二项供选择:“角形”选项:创建的动画中间形状会保留有明显的角和直线,适合于具有锐化转角和直线的混合形状。“分布式”选项:创建的动画中间形状比较平滑和不规则。 至此,“形状补间动画”的相关知识大家都已经有所了解。A、下面制作一个简单的动画来说明创建形状补间动画的方法,步骤如下:(1)新建Flash文件,然后设置影片的属性,包括背景色和屏幕大小(2)在时间轴窗口选择当前图层,然后单击选择一空白单元格,按F6键,建立起始关键帧。如
22、果是第一帧,可省去此操作(3)选择工具箱中的工具绘制图形,作为补间形状的起始图形。在本例中,选用椭圆工具在工作区左侧画一个圆形,并填充颜色(4)在起始帧后的某一帧插入空白关键帧,作为变形的下一个关键帧。本例中,在15帧的地方插入一个空白关键帧(5)在新的关键帧中绘制图形,作为变形后的形状。本例中,选用矩形工具,画一个正方形,并填充颜色(6)选择关键帧,调整图形的位置(7)在两个关键帧中任选一帧,单击后,在帧“属性”面板中选择“形状”补间(8)在30帧的地方插入关键帧,然后选择直线工具绘制一个三角形,并填充颜色(9)在15帧和30帧间建立形状补间动画形状变形的过程如下图:B、,下面制作一个运动补
23、间动画(摇摆的时钟),步骤如下:1) 绘制一个圆,再绘制一条垂直的直线作为钟摆的支杆;2) 同时选中圆和直线,将其转换为“图形元件”,命名为“钟摆”;3) 利用变形工具将钟摆的重心拖动到整个图形的上方正中间处,如下图所示;4) 利用补间动作动画,制作来回摇摆的动画效果。备注:本动画效果的关键,是首先利用工具箱的“任意变形工具”改变图形的重心。6、引导层动画的制作引导层就是设定运动对象运动的某一路径(路线),在引导层中画好运动路径(引导线),在被引导层(引导层的下一层)中使运动物体与路径相吸附在一起(用鼠标点中运动物体的中心移动)。下面我们就来制作一个简单的引导线动画。动画效果如下图所示:制作步
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 人机界面设计 人机界面 设计 实验 指导书
![提示](https://www.taowenge.com/images/bang_tan.gif)
限制150内