《多媒体课件制作实例教程》（葛伟版）全套PPT电子课件教案-第5章多媒体课件中简单动画的制作.ppt

第5章 多媒体课件中简单动画的制作,5.1 课件动画的制作实例 5.2 课件动画的过渡效果 5.3 暂停运行的画面,5.1 课件动画的制作实例,authorware的“移动”图标能够用非常方便的方法制作出简单、便捷的动画效果。“移动”图标不具备其他三维动画制作软件的复杂功能，它不能改变动画对象的大小、形状、方向等属性。“移动”图标所具有的基本运动形式是基于路径的运动，就是指图片、文本等移动对象只能以指定的速度，沿着指定的路径运动。,authorware“移动”图标提供了五种动画方式，这五种动画方式分别为： 指向固定点：两点之间的动画方式。 指向固定直线上的某点：点沿直线移动到路径终点的动画方式。 指向固定区域内的某点：点到指定区域的动画方式。 指向固定路径的终点：沿任意路径到终点的动画方式。 指向固定路径上的任意点：沿任意路径到指定点的动画方式。,实例一 指向固定点“小狗找骨头” 指向固定点的移动是authorware动画方式中最简单的一种。在下面的例子中，要让一只小狗从窗口的左上角移动到窗口的右下角骨头所在的位置。 (1) 新建一个文件，并命名为“小狗找骨头”，然后存盘。 (2) 向流程线上拖放一个“显示”图标，命名为“背景”。双击该图标导入一幅准备好的背景图，这里的背景是一块骨头。把图片置于窗口的右下角，如图5.1所示。,图5.1 背景图,(3) 拖一个“显示”图标到“背景”图标的下面，命名为“小狗”，双击“小狗”图标导入一幅小狗的图片。利用绘图工具箱的“选择/移动”按钮 选中小狗图片，调整好图片的大小，并将其拖放到演示窗口的左上角。 (4) 回到流程线上，将一个“移动”图标放到“小狗”图标的下面，取名为“寻找”。双击“寻找”图标，打开移动图标属性对话框，如图5.2所示。,图5.2 移动图标属性对话框,(5) 从对话框中的类型栏中选取“指向固定点”动画方式，如图5.2所示。 (6) 在移动选项卡的时间文本输入框中输入小狗在整个路程中的移动时间，authorware默认的移动时间为1秒。如果觉得不够直接的话，可打开“计时”下拉列表框将其设置为“速率”方式，然后输入适当的数值。由于本例中动画对象只有一只小狗，因此，不需要对“层”和“执行方式”两个选项进行设置。选项最后的设置情况如图5.2所示。,(7) 设置版面布局选项卡。根据“单击对象进行移动”的提示，用鼠标单击处在编辑窗口左上角的小狗的图片。此时，“单击对象进行移动”变成“拖动对象到目的地”，根据这一提示，用鼠标将小狗的图片拖到窗口的右下角后松开。其它选项设置如图5.3所示。,图5.3 版面布局的设置,(8) 程序编写完毕，单击工具栏上的“运行”按钮 ，小狗就会从演示窗口的左上角跑到演示窗口的右下角，如图5.4所示。,图5.4 “小狗找骨头”的演示,接下来具体讲解图5.2中的移动图标属性对话框。在对话框最上方的文本框内可确定或更改“移动”图标的标题。打开“类型”栏的下拉列表，读者可以看到authorware提供的五种动画方式，如图5.5所示。 “移动”图标属性对话框有“移动”和“版面布局”两个选项卡，下面对它们加以介绍。,图5.5 五种动画方式,1“移动”选项卡 “移动”选项卡如图5.2所示，其中包含如下内容： “层”栏：用来设置动画对象移动的所在的层。层在authorware中是一个很重要的概念，简单地说，就像几张白纸叠在一起，在上层纸上的内容能够被看到，下层的被上层的挡住。这里用1、2、3等阿拉伯数字来进行多层的设置，数字越大，层次越靠上。利用层可以做出很好的动画效果，例如，将太阳设置在海水的下层，那么就可以做出太阳从海水中升起来的效果了。,“计时”栏：用来设置被移动对象的移动速度，它有两种设置方式。 时间（秒）：固定时间长度，即完成全部动作所需的时间，在下面的文本框中可以输入对象移动的时间，单位是秒。 速率（秒/英寸）：恒定速率，即多少秒移动一英寸距离，因此数值越大，速度越小。 如果对移动和其他事件的同步要求比较高时，可以用固定时间长度方式；如果对移动的速度要求比较高时，可以用恒定速度方式。,“执行方式”栏：用来设置多个对象运动的方式，它也有两种设置方式。 等待直到完成：在这种方式下，系统要等到“移动”图标执行结束后才继续执行后面的程序。 同时：同步执行，即在“移动”图标开始执行时，系统将同步执行流程线后面的程序。,2“版面布局”选项卡 “版面布局”选项卡如图5.3所示，该选项卡可以设置对象的动画过程和动画方式，共包含如下内容：, authorware对动画制作显示的标题提示。用户可以在选定动画方式后按照提示进行操作，这在上例中已经用到。首先是 “单击对象进行移动”，用户可以根据提示来单击演示窗口中的对象以选择执行动画的对象。在选择了要移动的对象后，“单击对象进行移动”将变为“拖动对象到目的地”，提示用户拖动对象到移动的目的地。,“对象”栏：指明选中的被移动对象所在的“显示”图标的名称。 “目的地”栏：表示被移动对象所要运动到的终点的绝对坐标，可以手动输入确定的坐标，也可以直接用鼠标拖动被移动对象到终点，这时在此栏中会自动显示出终点的坐标位置。,图5.6 当前动画方式,另外，在“移动”图标属性对话框的左上角还显示着当前动画方式的内容，如图5.6所示，表示两点之间的动画。 “移动”图标属性对话框的左下角还有一个 按钮，单点此按钮，可以预览动画的效果。,图5.6 当前动画方式,实例二 指向固定直线上的某点“小馋嘴偷水果” 上例是两点之间的动画，制作比较简单，只要设置移动对象的起始点和终点即可。下面将要讲到的是指向固定直线上的某点的动画。与上例不同的是，移动对象的目标点是一条直线，也就是说，移动图标只能控制对象沿直线上的各个点运动。,在本节的例子中，将要制作一个用键盘控制图片移动到指定点的程序，读者可以结合此实例来学习这种动画制作方式。 (1) 新建一个文件，命名为“小馋嘴偷水果”并存盘，然后拖动一个“显示”图标到流程线上，命名为“小馋嘴”，双击该图标并导入准备好的“小馋嘴”的图片。可以在图标上按鼠标右键，并选择“预览”命令来查看，如图5.7所示。,图5.7 预览显示图标,(2) 拖动一个“显示”图标到“小馋嘴”图标的下面，命名为“水果篮”。双击该图标并导入各种水果的图片，然后点击绘图工具箱中的“文本”按钮。在水果的左侧输入数字1、2、3、4，它们分别代表各种水果(如图5.8所示)。在这个程序中，用户就是要通过从键盘上输入这些号码来控制“小馋嘴”来到相应的水果旁。,图5.8 演示窗口的效果,(3) 在“水果栏”图标的下面放入一个“交互”图标，取名为“输入水果号码”。在“交互”图标的右下方放入一个“移动”图标，取名为“动画”，这时屏幕上将弹出一个“响应类型”对话框，将其类型设为“文本输入”，如图5.9所示。,图5.9 “响应类型”对话框,(4) 双击“移动”图标，打开如图5.10所示的“属性：移动图标”对话框。在“类型”栏下拉列表框中选择“指向固定直线上的某点”动画方式。,图5.10 “属性：移动图标”对话框,(5) 调出“版面布局”选项卡，按照标题“单击对象进行移动”的提示，拖动“小馋嘴”到苹果的右侧。这个位置就是按下键盘“1”键后，“小馋嘴”所应到达的位置，如图5.11所示。,图5.11 设置“小馋嘴”的第一个位置,(6) 在对话框的标题栏变为“seect end to define end position”时，是提示用户把所选图片移动到终点位置。此时，首先选择“结束点”选项，然后用鼠标把 “小馋嘴”拖到终点位置，即葡萄的旁边，如图5.12所示。,图5.12 设置终点位置,当设置好了目标直线的两个端点后，在图5.12中的“出发点”和“结束点”两栏中，它们对应的位置分别为0和100，而在水果篮旁边设置的是14，因此，还要更改它们的数值，如图5.13所示，分别将它们更改为1和4。,图5.13 设置出发点和结束点数值,至于具体移动到什么位置，将由“目的地”栏的数值来确定。 (7) 用鼠标单击“目的地”栏，然后在文本框中输入x:=numentry。其中，numentry是一个系统变量，它可以将键盘上输入的字符存储起来，然后将该字符输送给变量x，此处设置的新变量x就是用来接收键盘上输入的字符的。至此设计完毕。,这时读者会发现，“移动”选项卡中的“执行方式”栏多了一个“永久”选项，如图5.14所示。前两个选项的作用和前面一样，而“永久”就是指移动动作执行完毕后，当定义对象移动位置的变量发生改变时，每次程序执行到这个“移动”图标时，就会自动移动对象到新的位置。,图5.14 执行方式中的“永久”项,读者还会发现，选项卡中还增添了一个“超出范围”选项，即当“目的地”的数值不在出发点和结束点值的范围内时所应采取的方式，它有三个选项： 循环：当“目的地”值超出范围，则对象会以出发点和结束点之间值为周期，超出周期则重新开始。如出发点和结束点分别为1和4，而“目的地”值为7，则对象会移动并停留在7 4=3处；若“目的地”值为13，对象还是停留在1处。,在结束点停止：当“目的地”的值小于1，则取1，大于4则取4；如值为-3时，对象会移动并停留在1处；为9时，停留在4处。 到过去的结束点：选中这个选项时，程序不会限制对象移动的范围，对象将以出发点和结束点的值为比例，移动到目的地实际的位置。,实例三 指向固定区域内的某点“移动棋子” 将对象移动到固定区域内的某点与上例介绍的将对象移到固定直线上的某点的区别实际上仅在于前一种类似于建立了一个一维的坐标系，而本例动画则是建立一个二维坐标系，以使对象得以在整个屏幕内进行移动。,(1) 新建一个文件，命名为“移动棋子”并存盘，然后拖动一个“显示”图标到流程线上，命名为“棋盘”。双击打开，使之处于编辑状态，并利用绘图工具箱中的直线工具制作一个棋盘格，如图5.15所示。 (2) 拖动一个“显示”图标到流程线上，并命名为“棋子”，利用椭圆工具制作一个棋子，如图5.16所示。,图5.15 制作“棋盘”,图5.16 制作“棋子”,(3) 向流程线上拖放一个名为“移动棋子”的“移动”图标，双击该图标，打开移动图标属性对话框。在类型下拉列表框中选择“指向固定区域内的某点”，其它选项为默认值，如图5.17所示。,图5.17 设置移动图标属性,(4) 接下来设置移动方式。单击“版面布局”选项卡，从中选择“出发点”栏，这时会出现“拖动对象到起始位置”的提示，移动棋子到棋盘的左上角；再选择“结束点”栏，出现“拖动对象到结束位置”的提示，移动棋子到棋盘的右下角。此时，将出现一个以出发点为左上角，以结束点为右下角的矩形框，这就是所谓的“固定区域”，如图5.18所示（为了便于观察，这里隐藏了棋盘）。,图5.18 设置移动区域,authorware系统默认出发点的坐标为(0，0)，结束点的坐标为(100，100)，因此棋盘的左上角坐标为(0，0)，右下角坐标为(100，100)。根据等分原则可以计算出棋盘上每一个交点的坐标；而“目的地”栏的值即为被移动对象所要移动到的目标位置的坐标。例如， 开发人员想让棋子向右和向下移动两格，即移动到(50，50)，则在“目的地”栏中输入(50，50)即可，如图5.19所示。,图5.19 设置移动目的地,出发点和结束点的值可以根据实际情况修改，例如定位平面不是正方形时，为了统一坐标，可以使x与y取不同的值，因为base和end都是使用相对坐标。 读者可以看到属性对话框的移动选项卡中也有“超出范围”栏，它也有三个选项，意思及用法与“指向固定直线上的某点”方式差不多，这里不再赘述。,实例四 指向固定路径的终点“蝶恋花” 这种动画方式与实例二所讲的“指向固定直线上的某点”动画方式有一个共同的特点，都是使被移动对象运动到固定的目标点。不同的是前面是沿着直线运动，而这里是沿着设定的路径运动，这个路径可以是曲线和折线，而且可以对路径进行编辑。,本例是要让一只小蝴蝶绕着一朵小花打转，其操作步骤如下： (1) 新建一个文件，命名为“蝶恋花”并存盘。然后在流 程线上拖放一个“显示”图标，命名为“花”，双击该图标进入其演示窗口，导入一幅小花的图片，创建背景。 (2) 在“花”图标后放置一个“显示”图标，取名为“蝶”，双击打开。导入蝴蝶图片，并双击绘图工具箱的“选择/移动”按钮。在弹出的叠放方式中选择“透明”，如图5.20所示。,图5.20 调整图形对象“蝴蝶”,(3) 在“蝶”的下方流程线上拖放一个“移动”图标，命名为“飞行”。双击“飞行”图标，弹出移动图标属性对话框。单击“蝴蝶”对象，在类型下拉列表中按图5.21所示进行设置：选择“指向固定路径的终点”选项；在“计时”栏的下一个文本框中输入“5”，表示移动时间为5秒钟；在“移动时”栏中输入true，使蝴蝶不停地围绕花转动。,图5.21 设置移动图标属性,(4) 单击“版面布局”选项卡标签，然后根据提示用鼠标拖动“蝴蝶”，创建一条环形的路径，如图5.22所示。,图5.22 创建环形路径,(5) 至此完成程序编写，读者可以通过执行工具栏上的“运行”按钮查看运行效果。,实例五 指向固定路径上的任意点“投篮” 本节将利用“投篮”这个实例来讲解如何使用“指向固定路径上的任意点”的动画方式。 (1) 新建一个文件，命名为“投篮”并存盘。向流程线上拖放一个“显示”图标，命名为“投手”，导入一张投篮者的图片。拖动一个“显示”图标放在“投手”图标的下面，命名为“篮框”，导入篮框图片，将一个“显示”图标放在“篮框”下面，命名为“篮球”并导入篮球图片。将所有这些图片的叠放方式都为透明，如图5.23所示。,图5.23 调整图片对象,(2) 在“篮球”图标下面放入一个“移动”图标，命名为“投篮”。双击打开移动图标属性对话框，设置类型为“指向固定路径上的任意点”，计时方式设为“速率（秒/英寸），并在下一栏中输入0.2，如图5.24所示。,图5.24 移动图标属性,(3) 设置移动方式。打开“版面布局”选项卡，然后根据标题提示来创建路径，注意这里的路径应尽量符合篮球的实际飞行轨迹。 首先用鼠标点选一下“篮球”对象，此时出现三角标记，为了让路径变得更平滑，可以双击三角标记，让折线变成平滑的曲线，同时三角形标记也变成了圆圈形标记，然后即可设计飞行轨迹，如图5.25所示。 (4) 图5.26为本例的设计窗口图，程序编写完毕，您可试着运行一下，以观察效果。,图5.25 设置篮球轨迹,图5.26 设计流程图,5.2 课件动画的过渡效果,authorware中“擦除”图标的基本功能是用其擦掉程序中无用的画面。利用“擦除”图标的这一功能，可以为动画添加不同的过渡效果，下面通过具体实例进行讲解。,实例 应用“擦除”图标添加过渡效果“可爱小狗” “擦除”图标与“显示”图标相辅相成，在一般情况下，后面图标中的内容会将前面的内容覆盖掉，但有时会发生图文对象重叠显示的现象，因此，“擦除”图标就显得非常必要。使用“擦除”图标后，与未使用擦除效果时画面的一闪而过的感觉完全不一样，此点在插图的更替和背景的转换中是非常需要的。在课件制作中运用一定数量的“擦除”图标会使作品增色不少。,在下面的例子中，将在切换各种小狗图片的过程使用“擦除”图标。 (1) 新建一个文件，命名为“可爱小狗”并存盘。在流程线上分别放置两个“显示”图标，取名为“图1”和“图2”，然后分别导入两张不同的小狗图片，并将两幅图调整成一样大小且位置相同。 (2) 拖动一个“擦除”图标放到“图1”图标的后面，命名为“擦除”，创作窗口如图5.27所示。,图5.27 设计窗口及演示窗口,(3) 双击“擦除”图标，弹出其属性对话框。 (4) 用鼠标单击编辑窗口中要擦除的对象，即图1中的小狗，如图5.28所示。,图5.28 选择擦除图标,可以选择一个或多个图标来被一个擦除图标作用，在这里可以选择是要擦除图标还是要保留图标。单击左下角的 按钮可以预览效果。 (5) 选择“擦除”选项卡，单击“过渡”选项右侧的按钮，弹出“擦除模式”对话框，在左侧的“分类”栏中选择“其他方式”；在右侧的“转换”栏中选择“随机竖线展示”，如图5.29所示。 在“周期”栏中输入0.5，表示过渡效果持续时间为0.5秒钟；在“平滑”栏中输入2，表示过渡的平滑性，数值越小越光滑。最后擦除效果如图5.30所示。,(6) 编程完毕。运行程序，则首先显示图1，然后是擦除过程，再显示图2。 同样，还可在流程线上的图2后再放一个“擦除”图标，读者可以尝试用不同的擦除过渡效果来擦除图2。,图5.29 选择擦除效果,图5.30 擦除效果,5.3 暂停运行的画面,在多媒体作品设计过程中，为了能使作品具有更好的交互性，有时需要程序在运行过程中有所停顿。比如多个显示图标顺序排列时，为了能清楚地展现每幅画面的内容，需要在每幅画面之间有所停顿。authorware提供了“等待”图标来实现这一功能。,authorware中的“等待”图标既可以中止程序的演示进程，等待用户与计算机进行交互，以进行下一步程序，也可以等待指定时间，以便让用户能够有充分的时间浏览显示内容，经过一段时间延迟或用户按下键盘、鼠标后，程序继续往下运行。,实例 应用“等待”图标“酷车靓照” “等待”图标的使用频率不是很高，但是恰当地加以运用，也会使多媒体课件增色不少。虽然“交互”图标同样可以实现中止程序进行的功能，但其实现起来远比“等待”图标复杂得多。因此，什么时候需要“交互”图标，什么时候需要“等待”图标，需要根据设计意图去灵活运用了。,下面结合实例来看一下“等待”图标是怎么运用的。 (1) 新建一个文件，命名为“酷车靓照”并存盘。执行“修改”/“文件”/“属性”命令，在“大小”栏选择“use fu screen”。 在流程线上放三个“显示”图标，分别命名为“图1”、“图2”和“图3”，再向“图1”和“图2”之间、“图2”和“图3”之间各放入一个“等待”图标。流程线如图5.31所示。,图