第六章 动画与交互的实现第六章 动画与交互的实现
6.1 动画设计的基本步骤
6.2 移动图标的属性
6.3 五种动画设计方式
6.4 利用变量控制动画
6.5 交互功能的实现第六章 动画与交互的实现
6.1 动画设计的基本步骤图 6-1 运行画面第六章 动画与交互的实现图 6-2 程序暂停出现 【 属性：移动图标 】 对话框第六章 动画与交互的实现图 6-3 【 版面布局 】 标签第六章 动画与交互的实现
6.2 移动图标的属性图 6-4 五种动画设计方式第六章 动画与交互的实现图 6-5 【 属性：移动图标 】 对话框第六章 动画与交互的实现
6.3 五种动画设计方式
6.3.1 指向固定点图 6-6 【 版面布局 】 标签第六章 动画与交互的实现图 6-7 【 移动 】 标签第六章 动画与交互的实现通过实例来验证一下选择不同的 【 执行方式 】 时程序的运行情况图 6-8 输入的文本第六章 动画与交互的实现
6.3.2 指向固定直线上的某点图 6-9 【 版面布局 】 标签第六章 动画与交互的实现图 6-10 【 移动 】 标签第六章 动画与交互的实现
6.3.3 指向固定区域内的某点图 6-11 【 版面布局 】 标签第六章 动画与交互的实现下面做一个鼠标跟随动画的练习：
1) 建立一个新文件,在流程线上添加一个显示图标,命名为
,圆形,。
2) 双击,圆形,显示图标,在演示窗口中画一个红色的圆 。
3) 向流程线上添加一个移动图标,并命名为,跟随,。
4) 运行程序,当程序遇到空白的移动图标后会自动停止,并弹出 【 属性：移动图标 】 对话框 。
5) 在对话框中选择 【 指向固定区域内的某点 】 方式,然后拾取演示窗口中的红色的圆,通过拖曳鼠标确定移动区域 。
6) 在 【 目的地 】 选项中输入两个系统变量,cursorX和
cursorY。这两个变量的作用是让红色的圆捕捉光标位置，如图
6-12所示。
第六章 动画与交互的实现图 6-12 【 版面布局 】 标签第六章 动画与交互的实现
7) 在 【 移动 】 标签中设置各项参数，如图 6-13所示。
图 6-13 【 移动 】 标签
8) 关闭对话框。运行程序时就会发现红色的圆跟随鼠标移动。
第六章 动画与交互的实现
6.3.4 指向固定路径的终点图 6-14 【 移动 】 标签第六章 动画与交互的实现图 6-15 【 版面布局 】 标签第六章 动画与交互的实现图 6-16 创建的运动路径第六章 动画与交互的实现图 6-17 圆滑路径第六章 动画与交互的实现
6.3.5 指向固定路径上的任意点图 6-18 【 版面布局 】 标签第六章 动画与交互的实现
6.4 利用变量控制动画使用变量来控制对象的循环运动 。
1) 建立一个新文件,在流程线上添加一个显示图标,命名为,圆形,,然后双击,圆形,显示图标,在演示窗口中画一个红色的圆形 。
2) 向流程线上添加一个移动图标,并命名为,循环,。
3) 双击,循环,移动图标,弹出 【 属性：移动图标 】 对话框 。
4) 在对话框中选择 【 指向固定路径的终点 】 方式,拾取演示窗口中的红色圆形,通过拖曳鼠标确定运动路径 。 然后在
【 移动时 】 选项中输入,x=1”,其它设置如图 6-19所示 。
第六章 动画与交互的实现图 6-19 设定运动条件第六章 动画与交互的实现
5) 单击 按钮,如果变量,x”没有在其它地方使用过,则弹出 【 新的变量 】 对话框,直接单击 按钮即可 。
6) 向流程线上添加一个计算图标,双击该图标,在打开的计算窗口中输入,x=1”后关闭窗口 。
7) 运行程序，可以看见圆形在指定的路径上往复不停地旋转。
第六章 动画与交互的实现
6.5 交互功能的实现
6.5.1 认识交互图标图 6-20 【 响应类型 】 对话框第六章 动画与交互的实现图 6-21 分支结构第六章 动画与交互的实现
6.5.2 按钮响应
1,使用按钮响应
1) 新建一个文件 。
2) 向流程线上添加一个计算图标,命名为,窗口,。
3) 向流程线上添加一个交互图标,并命名为,交互,。
4) 再拖曳一个计算图标至交互图标的右侧,在弹出的 【 响应类型 】 对话框中选择 【 按钮 】 选项 。
5) 单击按钮,则在设计窗口中建立了交互分支结构,将计算图标命名为,退出,。
6) 双击,退出,计算图标,在打开的计算窗口中输入,Quit
（ ）,。
7) 关闭计算窗口 。
第六章 动画与交互的实现图 6-22 计算窗口第六章 动画与交互的实现
2,设置按钮响应属性图 6-23 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-25 设置按钮始终有效第六章 动画与交互的实现
3,改变按钮的大小、位置与外观图 6-26 【 按钮 】 对话框第六章 动画与交互的实现图 6-27
第六章 动画与交互的实现图 6-28 【 按钮编辑 】 对话框第六章 动画与交互的实现
4,按钮响应实例下面,使用按钮响应制作一个简单的多媒体课件 。
1) 建立一个新文件 。 在流程线上添加一个计算图标,命名为,窗口,。
2) 双击流程线上的,窗口,计算图标,将演示窗口大小设为 （ 520,280） 。
3) 向,窗口,计算图标的下方添加一个显示图标,命名为,背景,。
4) 用前面学过的方法,向,背景,图标中导入一幅图片作为背景 。
5) 向流程线上添加一个交互图标,并命名为,交互,。
第六章 动画与交互的实现
6) 拖曳一个计算图标至交互图标的右侧，在弹出的 【 响应类型 】 对话框中选择 【 按钮 】 选项，然后单击按钮，将图标命名为“退出程序”。
7) 在交互图标右侧添加四个群组图标，并分别命名为
“复习旧课”、“导入新课”、“讲授内容”和“请你欣赏”。这时不再弹出 【 响应类型 】 对话框，将使用第一次设置的响应类型，该流程线如图 6-29所示。
第六章 动画与交互的实现图 6-29 流程线第六章 动画与交互的实现
8) 运行程序,如果发现按钮分布不符合要求,可以双击交互图标,在演示窗口中调整按钮的位置和大小 。
9) 调整按钮后运行程序，结果运行画面如图 6-30所示。
图
6-
30
运行画面第六章 动画与交互的实现
10) 用前面学过的方法,为每一个按钮选择手形光标 。
运行程序时,当光标指向按钮时将出现手形光标 。
11) 双击,复习旧课,群组图标,打开其二级流程线 。
12) 向该流程线上添加一个显示图标,在显示图标的演示窗口中绘制一个小的,演示窗,作为复习旧课的承载窗口 。
13) 用户可以根据爱好和需要在流程线上添加其它图标，
以丰富课件，如文字、音乐、电影等。在此我们添加一个显示图标，在其演示窗口中输入“温习单词”、,good—
— 好的”、,bad—— 坏的”等内容。
第六章 动画与交互的实现
14) 运行程序时，单击 按钮，将出现如图 6-31所示的画面。
图 6-31 程序运行画面
15) 用同样的方法，可以为其它群组图标设置所需的内容。
第六章 动画与交互的实现
6.5.3 热区响应
1,使用热区响应将前面用按钮控制的课件修改为用热区控制的课件 。 其具体的操作步骤如下：
1) 打开前面保存的课件 。
2) 在,复习旧课,群组图标的响应类型标记上双击鼠标左键,
弹出 【 属性：响应 】 对话框 。
3) 在对话框的 【 类型 】 选项列表中选择 【 热区响应 】 选项 。
4) 单击按钮，可以看到“复习旧课”群组图标的响应类型标记发生了变化，由按钮响应的形状变为热区响应的形状。
第六章 动画与交互的实现
5) 运行程序，可以发现画面中的按钮消失了，但当光标指向按钮所在区域时仍将变为手形光标（如图 6-32所示），
单击鼠标左键将出现“复习旧课”的内容。
图 6-32 运行画面第六章 动画与交互的实现
6) 如果需要修改热区,可以双击交互图标,打开演示窗口 。
7) 单击“复习旧课”热区标志，则热区周围出现八个控制点。将光标指向控制点按住鼠标左键拖曳，可以改变热区的大小；将光标指向热区标志后按住鼠标左键拖曳，
可以改变热区的位置。如果仍要在演示窗口中出现“复习旧课”字样，可以重新输入“复习旧课”字样，然后用热区将其覆盖即可，如图 6-33所示。
第六章 动画与交互的实现图 6-33 修改热区标志第六章 动画与交互的实现
8) 用同样的方法修改其它的按钮。运行程序时的画面如图 6-34所示。
图 6-34 运行画面第六章 动画与交互的实现
2,设置热区响应的属性图 6-35 【 响应 】 标签第六章 动画与交互的实现图 6-36 选择 【 重试 】 时的流程走向第六章 动画与交互的实现图 6-37 选择 【 继续 】 时的流程走向第六章 动画与交互的实现图 6-38 选择 【 退出交互 】 时的流程走向第六章 动画与交互的实现图 6-39 选择 【 返回 】 时的流程走向第六章 动画与交互的实现
6.5.4 热对象响应制作该课件的具体操作步骤如下：
1) 建立一个新文件 。 在流程线上添加一个计算图标,命名为,窗口,,并将演示窗口的大小设为 （ 420,280） 。
2) 在,窗口,图标下面添加三个显示图标,分别命名为
,牛,,,马,和,羊,,并分别导入相应的图片,设置各图片的遮盖模式为 【 透明 】 。
3) 在流程线上选择这三个显示图标,单击菜单栏中的 【 修改 】 /【 群组 】 命令,将三个显示图标组合为一个群组图标,
并将其命名为,对象,。
第六章 动画与交互的实现
4) 在“对象”群组图标的下面添加一个交互图标，命名为“介绍”。
5) 在交互图标的右侧添加一个群组图标，在弹出的
【 响应类型 】 对话框中选择 【 热对象响应 】 类型。将该群组图标命名为“介绍牛”，此时的流程线如图 6-40所示。
6) 双击“介绍牛”群组图标，在其二级流程线上添加一个显示图标和一个声音图标 (如图 6-41所示 )，并分别载入一段文字和解说词。
第六章 动画与交互的实现
7) 运行程序,弹出 【 属性：响应 】 对话框,单击演示窗口中的,牛,图片,将它的 【 类型 】 定义为热对象,则
,牛,图片出现在对话框左上角的预览窗口中,同时其图标名称出现在 【 热对象 】 选项文本框中,说明该对象已被选中,如图 6-42所示 。
8) 在 【 匹配 】 选项中选择 【 指针在对象上 】 选项,再用前面介绍的方法将 【 鼠标指针 】 设置为手形光标 。
9) 单击按钮,关闭对话框 。
10) 运行程序，当光标移到“牛”图片上时就会出现文字和解说词，如图 6-43所示。
第六章 动画与交互的实现图 6-40 程序流程线第六章 动画与交互的实现图 6-41 二级流程线第六章 动画与交互的实现图 6-42 定义热对象第六章 动画与交互的实现图 6-43 程序运行画面第六章 动画与交互的实现
11) 用同样的方法,可以为,马,和,羊,进行上述设置,其最终程序如图 6-44所示 。
图 6-44 程序流程线第六章 动画与交互的实现
6.5.5 目标区响应图 6-45 运行画面第六章 动画与交互的实现使用目标区响应制作该课件的操作步骤如下：
1) 建立一个新文件 。 在流程线上添加一个计算图标,命名为,窗口,,并将演示窗口的大小设为 （ 420,280） 。
2) 在,窗口,图标的下面添加一个显示图标,命名为,目标区域,。
3) 双击,目标区域,图标,在打开的演示窗口中绘制一个简单的上下窗格 。 在上方的窗格中输入,将右侧的单词拖放到左侧相应的图片上,；在下方窗格导入三幅图片,如图 6-
46所示 。
4) 在,目标区域,图标的下方添加一个显示图标,命名为,苹果,。
5) 双击“苹果”图标，在打开的演示窗口中输入单词
,apple”。
第六章 动画与交互的实现图 6-46 演示窗口内容第六章 动画与交互的实现
6) 用同样的方法，在流程线上再添加两个显示图标，并分别命名为“猪”和“鸟”，然后在其演示窗口中分别输入单词,pig”和,bird”，此时程序的流程线如图 6-47所示，运行的画面如图 6-48所示。
7) 在,鸟,图标的下方添加一个交互图标,命名为,判断,。
8) 向交互图标的右侧添加一个群组图标，在弹出的 【 响应类型 】 对话框中选择 【 目标区 】 响应，将该图标命名为
“鸟正确”；在“鸟正确”图标的右侧再添加一个群组图标，
命名为“鸟错误”，如图 6-49所示。
第六章 动画与交互的实现图 6-47 程序流程线第六章 动画与交互的实现图 6-48 运行画面第六章 动画与交互的实现图 6-49 程序流程线第六章 动画与交互的实现
10) 根据对话框的提示，单击演示窗口中的,bird”单词作为目标对象，则虚线框将自动附着到单词上。再根据对话框的提示，将,bird”单词（注意不是虚线框）拖到鸟图片上，
然后调整虚线框使之完全包围鸟图片，如图 6-50所示。
图
6-
50
设定目标区域第六章 动画与交互的实现
11) 在 【 目标区 】 标签下的 【 放下 】 选项中选择 【 在中心定位 】,注意此处不选择 【 允许任何对象 】 选项,以便使本响应只对,鸟,有效 。
12) 在 【 响应 】 标签下的 【 状态 】 选项中选择 【 正确响应 】
选项 。
13) 单击 按钮，又弹出另一个 【 属性：响应 】
对话框，这是“鸟错误”分支响应的属性对话框。此处仍然选择,bird”单词为目标对象，然后拖动,bird”单词到演示窗口的中央位置，调整虚线框使之包围演示窗口的下方窗格，
如图 6-51所示。
第六章 动画与交互的实现图 6-51 设定目标区域第六章 动画与交互的实现
14) 在 【 目标区 】 标签下的 【 放下 】 选项中选择 【 返回 】
选项,在 【 响应 】 标签下的 【 状态 】 选项中选择 【 错误响应 】
选项 。
15) 单击 按钮,关闭对话框 。 此时,主流程线上的
,鸟正确,的前面多了一个,+”号,,鸟错误,的前面多了一个,-”号,如图 6-52所示 。
16) 双击“鸟正确”群组图标，在打开的二级流程线上添加一个显示图标，在其 【 演示窗口 】 中输入“移动正确”
字样。再添加一个计算图标，在打开的计算窗口中输入
,Movable@"鸟 ":=FALSE”，如图 6-53所示。
第六章 动画与交互的实现图 6-52 程序流程线第六章 动画与交互的实现图 6-53 设置二级流程线第六章 动画与交互的实现
17) 打开,鸟错误,群组图标,在二级流程线上添加一个显示图标,在其演示窗口中输入,移动错误,请再试一次,
的提示文字 。
18) 运行程序时可以发现,当单词移动正确时,将显示移动正确的提示,并且单词不能再被移动；当单词移动错误时,
将返回原来的位置,同时出现移动错误的提示 。
19) 用同样的方法,分别建立,apple”和,pig”两个单词的响应分支 。
20) 在交互图标的最右侧再添加一个群组图标 。
21) 双击其响应类型标记，打开 【 属性：响应 】 对话框，
在 【 类型 】 选项中选择 【 条件响应 】 类型。
第六章 动画与交互的实现
22) 在 【 条件 】 标签的 【 条件 】 文本框中输入变量
,AllCorrectMatched”，该变量用于定义当所有正确响应都实现时，变量为“真”，否则为“假”。在 【 自动 】 选项列表中选择“为真”选项，该选项用于定义当条件“为真”时系统自动执行此分支，如图 6-54所示。
23) 在 【 响应 】 标签下 【 分支 】 选项中选择 【 退出交互 】
选项。
24) 单击 按钮，关闭对话框。
25) 打开该群组图标，在其二级流程线上添加一个显示图标，输入“全部正确，祝贺你！”的字样；再添加一个等待图标，设为等待 3秒；最后再用一个计算图标退出程序，整个课件的程序流程线如图 6-55所示。
第六章 动画与交互的实现图 6-54 【 条件 】 标签第六章 动画与交互的实现图 6-55 程序流程线第六章 动画与交互的实现
6.5.6 下拉菜单响应下面我们通过一个实例介绍制作下拉菜单的具体步骤：
图 6-55 程序流程线第六章 动画与交互的实现图 6-56 程序流程线第六章 动画与交互的实现图 6-57 修改后的流程线第六章 动画与交互的实现图 6-58 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-59 程序流程线第六章 动画与交互的实现图 6-60 运行画面第六章 动画与交互的实现图 6-61 程序流程线第六章 动画与交互的实现图 6-62 运行画面第六章 动画与交互的实现
6.5.7 条件响应图 6-63 【 属性：响应 】 对话框第六章 动画与交互的实现
6.5.8 文本输入响应图 6-64 输入名字前后的演示窗口第六章 动画与交互的实现其具体操作步骤如下：
1) 建立一个新文件 。 用计算图标将演示窗口的大小设定为 （ 320，
280） 。
2) 在计算图标的下面添加一个交互图标,命名为,学生档案簿,。
3) 运行程序之后双击交互图标,在演示窗口中绘制一条水平线 。
4) 在水平线的上方输入,请输入,字样 （ 注意选择 【 透明 】 模式 ）,并选择所需的字体和大小,将其调整至合适位置 。
5) 在交互图标的右侧添加一个群组图标,在弹出的 【 响应类型 】
对话框中选择 【 文本输入 】 响应类型,然后将图标命名为,王小二,。
6) 运行程序之后双击交互图标，可以看到演示窗口中有一个虚线框，该虚线框就是用于输入文本内容的区域，如图 6-65所示。
第六章 动画与交互的实现图 6-65 文本响应区域 图 6-66 键入“王小二”档案第六章 动画与交互的实现
6.5.9 按键响应
1) 建立一个新文件 。 用计算图标将演示窗口设定为 （ 320，
280）,并将其命名为,窗口,。
2) 在计算图标下面添加一个显示图标,命名为,天空,,导入一幅天空图像 。
3) 在,天空,图标下面再添加一个显示图标,命名为,圆,,
双击该图标,在打开的演示窗口中绘制一个填充了颜色的圆,并将圆的覆盖模式设置为 【 反转 】 。
4) 在,圆,图标下面添加一个移动图标,命名为,搜索,。
5) 运行程序,弹出 【 属性：移动图标 】 对话框 。
6) 在 【 类型 】 选项列表中选择 【 指定固定区域内的某点 】,
然后根据 【 版面布局 】 标签的提示拖动“圆”来设置一个移动区域，并设置 【 目的地 】 的值分别为 X,Y两个变量，如图 6-67所示。
第六章 动画与交互的实现图 6-67 【 属性：移动图标 】 对话框第六章 动画与交互的实现
7) 在 【 移动 】 标签下的 【 执行方式 】 选项中选择 【 永久 】
方式 。
8) 单击 按钮可关闭对话框 。
9) 在,搜索,图标下面再添加一个交互图标,命名为,控制,。
10) 在交互图标的右侧拖入一个计算图标,在弹出的 【 响应类型 】 对话框中选择 【 按键 】 类型,将计算图标命名为
,LeftArrow”,使其对应于左方向键 。
11) 双击,LeftArrow”计算图标,在打开的计算窗口中输入如图 6-68所示的内容后关闭计算窗口 。
第六章 动画与交互的实现图 6-68 对应于左方向键的计算图标内容第六章 动画与交互的实现
12) 用同样的方法再向交互图标的右侧添加三个计算图标，
将其分别命名,RightArrow”、,UpArrow”和,DownArrow”，
使其对应于右、上和下方向键，并在其计算窗口中分别输入相应的内容，如图 6-69,6-70,6-71所示。
图 6-69 对应于右方向键的计算图标内容第六章 动画与交互的实现图 6-70 对应于上方向键的计算图标内容第六章 动画与交互的实现图 6-71 对应于下方向键的计算图标内容第六章 动画与交互的实现
13) 程序的最终流程线如图 6-72所示。
图 6-72 程序流程线第六章 动画与交互的实现图 6-73 运行画面第六章 动画与交互的实现
6.5.10 重试限制响应图 6-74 设置交互分支第六章 动画与交互的实现图 6-75 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-76 【 属性：交互作用文本字段 】 对话框第六章 动画与交互的实现图 6-77 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-78 【 属性：等待图标 】 对话框第六章 动画与交互的实现图 6-79 程序最终流程线第六章 动画与交互的实现
6.5.11 时间限制响应下面我们把上面重试限制交互的密码修改成为时间限制交互的密码,其操作步骤如下：
1) 打开上一节中制作的实例 。
2) 将,尝试 3次,群组图标名称修改为,限时 10秒,。
3) 双击其响应类型标记，打开 【 属性：响应 】 对话框，
从 【 类型 】 选项中选择 【 时间限制 】 类型，这时对话框如图
6-80所示。
第六章 动画与交互的实现图 6-80 【 属性：响应 】 对话框第六章 动画与交互的实现
4) 在 【 时限 】 选项文本框中输入,10”,即定义限时为 10
秒,其余设置如图 6-81所示 。
图 6-81 【 属性：响应 】 对话框第六章 动画与交互的实现
5) 单击按钮，程序流程线如图 6-82所示。
图 6-82 程序流程线第六章 动画与交互的实现
6) 运行程序，如果在 10秒钟内未输入密码，程序将提示用户是“非法用户”并自动退出。
6.1 动画设计的基本步骤
6.2 移动图标的属性
6.3 五种动画设计方式
6.4 利用变量控制动画
6.5 交互功能的实现第六章 动画与交互的实现
6.1 动画设计的基本步骤图 6-1 运行画面第六章 动画与交互的实现图 6-2 程序暂停出现 【 属性：移动图标 】 对话框第六章 动画与交互的实现图 6-3 【 版面布局 】 标签第六章 动画与交互的实现
6.2 移动图标的属性图 6-4 五种动画设计方式第六章 动画与交互的实现图 6-5 【 属性：移动图标 】 对话框第六章 动画与交互的实现
6.3 五种动画设计方式
6.3.1 指向固定点图 6-6 【 版面布局 】 标签第六章 动画与交互的实现图 6-7 【 移动 】 标签第六章 动画与交互的实现通过实例来验证一下选择不同的 【 执行方式 】 时程序的运行情况图 6-8 输入的文本第六章 动画与交互的实现
6.3.2 指向固定直线上的某点图 6-9 【 版面布局 】 标签第六章 动画与交互的实现图 6-10 【 移动 】 标签第六章 动画与交互的实现
6.3.3 指向固定区域内的某点图 6-11 【 版面布局 】 标签第六章 动画与交互的实现下面做一个鼠标跟随动画的练习：
1) 建立一个新文件,在流程线上添加一个显示图标,命名为
,圆形,。
2) 双击,圆形,显示图标,在演示窗口中画一个红色的圆 。
3) 向流程线上添加一个移动图标,并命名为,跟随,。
4) 运行程序,当程序遇到空白的移动图标后会自动停止,并弹出 【 属性：移动图标 】 对话框 。
5) 在对话框中选择 【 指向固定区域内的某点 】 方式,然后拾取演示窗口中的红色的圆,通过拖曳鼠标确定移动区域 。
6) 在 【 目的地 】 选项中输入两个系统变量,cursorX和
cursorY。这两个变量的作用是让红色的圆捕捉光标位置，如图
6-12所示。
第六章 动画与交互的实现图 6-12 【 版面布局 】 标签第六章 动画与交互的实现
7) 在 【 移动 】 标签中设置各项参数，如图 6-13所示。
图 6-13 【 移动 】 标签
8) 关闭对话框。运行程序时就会发现红色的圆跟随鼠标移动。
第六章 动画与交互的实现
6.3.4 指向固定路径的终点图 6-14 【 移动 】 标签第六章 动画与交互的实现图 6-15 【 版面布局 】 标签第六章 动画与交互的实现图 6-16 创建的运动路径第六章 动画与交互的实现图 6-17 圆滑路径第六章 动画与交互的实现
6.3.5 指向固定路径上的任意点图 6-18 【 版面布局 】 标签第六章 动画与交互的实现
6.4 利用变量控制动画使用变量来控制对象的循环运动 。
1) 建立一个新文件,在流程线上添加一个显示图标,命名为,圆形,,然后双击,圆形,显示图标,在演示窗口中画一个红色的圆形 。
2) 向流程线上添加一个移动图标,并命名为,循环,。
3) 双击,循环,移动图标,弹出 【 属性：移动图标 】 对话框 。
4) 在对话框中选择 【 指向固定路径的终点 】 方式,拾取演示窗口中的红色圆形,通过拖曳鼠标确定运动路径 。 然后在
【 移动时 】 选项中输入,x=1”,其它设置如图 6-19所示 。
第六章 动画与交互的实现图 6-19 设定运动条件第六章 动画与交互的实现
5) 单击 按钮,如果变量,x”没有在其它地方使用过,则弹出 【 新的变量 】 对话框,直接单击 按钮即可 。
6) 向流程线上添加一个计算图标,双击该图标,在打开的计算窗口中输入,x=1”后关闭窗口 。
7) 运行程序，可以看见圆形在指定的路径上往复不停地旋转。
第六章 动画与交互的实现
6.5 交互功能的实现
6.5.1 认识交互图标图 6-20 【 响应类型 】 对话框第六章 动画与交互的实现图 6-21 分支结构第六章 动画与交互的实现
6.5.2 按钮响应
1,使用按钮响应
1) 新建一个文件 。
2) 向流程线上添加一个计算图标,命名为,窗口,。
3) 向流程线上添加一个交互图标,并命名为,交互,。
4) 再拖曳一个计算图标至交互图标的右侧,在弹出的 【 响应类型 】 对话框中选择 【 按钮 】 选项 。
5) 单击按钮,则在设计窗口中建立了交互分支结构,将计算图标命名为,退出,。
6) 双击,退出,计算图标,在打开的计算窗口中输入,Quit
（ ）,。
7) 关闭计算窗口 。
第六章 动画与交互的实现图 6-22 计算窗口第六章 动画与交互的实现
2,设置按钮响应属性图 6-23 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-25 设置按钮始终有效第六章 动画与交互的实现
3,改变按钮的大小、位置与外观图 6-26 【 按钮 】 对话框第六章 动画与交互的实现图 6-27
第六章 动画与交互的实现图 6-28 【 按钮编辑 】 对话框第六章 动画与交互的实现
4,按钮响应实例下面,使用按钮响应制作一个简单的多媒体课件 。
1) 建立一个新文件 。 在流程线上添加一个计算图标,命名为,窗口,。
2) 双击流程线上的,窗口,计算图标,将演示窗口大小设为 （ 520,280） 。
3) 向,窗口,计算图标的下方添加一个显示图标,命名为,背景,。
4) 用前面学过的方法,向,背景,图标中导入一幅图片作为背景 。
5) 向流程线上添加一个交互图标,并命名为,交互,。
第六章 动画与交互的实现
6) 拖曳一个计算图标至交互图标的右侧，在弹出的 【 响应类型 】 对话框中选择 【 按钮 】 选项，然后单击按钮，将图标命名为“退出程序”。
7) 在交互图标右侧添加四个群组图标，并分别命名为
“复习旧课”、“导入新课”、“讲授内容”和“请你欣赏”。这时不再弹出 【 响应类型 】 对话框，将使用第一次设置的响应类型，该流程线如图 6-29所示。
第六章 动画与交互的实现图 6-29 流程线第六章 动画与交互的实现
8) 运行程序,如果发现按钮分布不符合要求,可以双击交互图标,在演示窗口中调整按钮的位置和大小 。
9) 调整按钮后运行程序，结果运行画面如图 6-30所示。
图
6-
30
运行画面第六章 动画与交互的实现
10) 用前面学过的方法,为每一个按钮选择手形光标 。
运行程序时,当光标指向按钮时将出现手形光标 。
11) 双击,复习旧课,群组图标,打开其二级流程线 。
12) 向该流程线上添加一个显示图标,在显示图标的演示窗口中绘制一个小的,演示窗,作为复习旧课的承载窗口 。
13) 用户可以根据爱好和需要在流程线上添加其它图标，
以丰富课件，如文字、音乐、电影等。在此我们添加一个显示图标，在其演示窗口中输入“温习单词”、,good—
— 好的”、,bad—— 坏的”等内容。
第六章 动画与交互的实现
14) 运行程序时，单击 按钮，将出现如图 6-31所示的画面。
图 6-31 程序运行画面
15) 用同样的方法，可以为其它群组图标设置所需的内容。
第六章 动画与交互的实现
6.5.3 热区响应
1,使用热区响应将前面用按钮控制的课件修改为用热区控制的课件 。 其具体的操作步骤如下：
1) 打开前面保存的课件 。
2) 在,复习旧课,群组图标的响应类型标记上双击鼠标左键,
弹出 【 属性：响应 】 对话框 。
3) 在对话框的 【 类型 】 选项列表中选择 【 热区响应 】 选项 。
4) 单击按钮，可以看到“复习旧课”群组图标的响应类型标记发生了变化，由按钮响应的形状变为热区响应的形状。
第六章 动画与交互的实现
5) 运行程序，可以发现画面中的按钮消失了，但当光标指向按钮所在区域时仍将变为手形光标（如图 6-32所示），
单击鼠标左键将出现“复习旧课”的内容。
图 6-32 运行画面第六章 动画与交互的实现
6) 如果需要修改热区,可以双击交互图标,打开演示窗口 。
7) 单击“复习旧课”热区标志，则热区周围出现八个控制点。将光标指向控制点按住鼠标左键拖曳，可以改变热区的大小；将光标指向热区标志后按住鼠标左键拖曳，
可以改变热区的位置。如果仍要在演示窗口中出现“复习旧课”字样，可以重新输入“复习旧课”字样，然后用热区将其覆盖即可，如图 6-33所示。
第六章 动画与交互的实现图 6-33 修改热区标志第六章 动画与交互的实现
8) 用同样的方法修改其它的按钮。运行程序时的画面如图 6-34所示。
图 6-34 运行画面第六章 动画与交互的实现
2,设置热区响应的属性图 6-35 【 响应 】 标签第六章 动画与交互的实现图 6-36 选择 【 重试 】 时的流程走向第六章 动画与交互的实现图 6-37 选择 【 继续 】 时的流程走向第六章 动画与交互的实现图 6-38 选择 【 退出交互 】 时的流程走向第六章 动画与交互的实现图 6-39 选择 【 返回 】 时的流程走向第六章 动画与交互的实现
6.5.4 热对象响应制作该课件的具体操作步骤如下：
1) 建立一个新文件 。 在流程线上添加一个计算图标,命名为,窗口,,并将演示窗口的大小设为 （ 420,280） 。
2) 在,窗口,图标下面添加三个显示图标,分别命名为
,牛,,,马,和,羊,,并分别导入相应的图片,设置各图片的遮盖模式为 【 透明 】 。
3) 在流程线上选择这三个显示图标,单击菜单栏中的 【 修改 】 /【 群组 】 命令,将三个显示图标组合为一个群组图标,
并将其命名为,对象,。
第六章 动画与交互的实现
4) 在“对象”群组图标的下面添加一个交互图标，命名为“介绍”。
5) 在交互图标的右侧添加一个群组图标，在弹出的
【 响应类型 】 对话框中选择 【 热对象响应 】 类型。将该群组图标命名为“介绍牛”，此时的流程线如图 6-40所示。
6) 双击“介绍牛”群组图标，在其二级流程线上添加一个显示图标和一个声音图标 (如图 6-41所示 )，并分别载入一段文字和解说词。
第六章 动画与交互的实现
7) 运行程序,弹出 【 属性：响应 】 对话框,单击演示窗口中的,牛,图片,将它的 【 类型 】 定义为热对象,则
,牛,图片出现在对话框左上角的预览窗口中,同时其图标名称出现在 【 热对象 】 选项文本框中,说明该对象已被选中,如图 6-42所示 。
8) 在 【 匹配 】 选项中选择 【 指针在对象上 】 选项,再用前面介绍的方法将 【 鼠标指针 】 设置为手形光标 。
9) 单击按钮,关闭对话框 。
10) 运行程序，当光标移到“牛”图片上时就会出现文字和解说词，如图 6-43所示。
第六章 动画与交互的实现图 6-40 程序流程线第六章 动画与交互的实现图 6-41 二级流程线第六章 动画与交互的实现图 6-42 定义热对象第六章 动画与交互的实现图 6-43 程序运行画面第六章 动画与交互的实现
11) 用同样的方法,可以为,马,和,羊,进行上述设置,其最终程序如图 6-44所示 。
图 6-44 程序流程线第六章 动画与交互的实现
6.5.5 目标区响应图 6-45 运行画面第六章 动画与交互的实现使用目标区响应制作该课件的操作步骤如下：
1) 建立一个新文件 。 在流程线上添加一个计算图标,命名为,窗口,,并将演示窗口的大小设为 （ 420,280） 。
2) 在,窗口,图标的下面添加一个显示图标,命名为,目标区域,。
3) 双击,目标区域,图标,在打开的演示窗口中绘制一个简单的上下窗格 。 在上方的窗格中输入,将右侧的单词拖放到左侧相应的图片上,；在下方窗格导入三幅图片,如图 6-
46所示 。
4) 在,目标区域,图标的下方添加一个显示图标,命名为,苹果,。
5) 双击“苹果”图标，在打开的演示窗口中输入单词
,apple”。
第六章 动画与交互的实现图 6-46 演示窗口内容第六章 动画与交互的实现
6) 用同样的方法，在流程线上再添加两个显示图标，并分别命名为“猪”和“鸟”，然后在其演示窗口中分别输入单词,pig”和,bird”，此时程序的流程线如图 6-47所示，运行的画面如图 6-48所示。
7) 在,鸟,图标的下方添加一个交互图标,命名为,判断,。
8) 向交互图标的右侧添加一个群组图标，在弹出的 【 响应类型 】 对话框中选择 【 目标区 】 响应，将该图标命名为
“鸟正确”；在“鸟正确”图标的右侧再添加一个群组图标，
命名为“鸟错误”，如图 6-49所示。
第六章 动画与交互的实现图 6-47 程序流程线第六章 动画与交互的实现图 6-48 运行画面第六章 动画与交互的实现图 6-49 程序流程线第六章 动画与交互的实现
10) 根据对话框的提示，单击演示窗口中的,bird”单词作为目标对象，则虚线框将自动附着到单词上。再根据对话框的提示，将,bird”单词（注意不是虚线框）拖到鸟图片上，
然后调整虚线框使之完全包围鸟图片，如图 6-50所示。
图
6-
50
设定目标区域第六章 动画与交互的实现
11) 在 【 目标区 】 标签下的 【 放下 】 选项中选择 【 在中心定位 】,注意此处不选择 【 允许任何对象 】 选项,以便使本响应只对,鸟,有效 。
12) 在 【 响应 】 标签下的 【 状态 】 选项中选择 【 正确响应 】
选项 。
13) 单击 按钮，又弹出另一个 【 属性：响应 】
对话框，这是“鸟错误”分支响应的属性对话框。此处仍然选择,bird”单词为目标对象，然后拖动,bird”单词到演示窗口的中央位置，调整虚线框使之包围演示窗口的下方窗格，
如图 6-51所示。
第六章 动画与交互的实现图 6-51 设定目标区域第六章 动画与交互的实现
14) 在 【 目标区 】 标签下的 【 放下 】 选项中选择 【 返回 】
选项,在 【 响应 】 标签下的 【 状态 】 选项中选择 【 错误响应 】
选项 。
15) 单击 按钮,关闭对话框 。 此时,主流程线上的
,鸟正确,的前面多了一个,+”号,,鸟错误,的前面多了一个,-”号,如图 6-52所示 。
16) 双击“鸟正确”群组图标，在打开的二级流程线上添加一个显示图标，在其 【 演示窗口 】 中输入“移动正确”
字样。再添加一个计算图标，在打开的计算窗口中输入
,Movable@"鸟 ":=FALSE”，如图 6-53所示。
第六章 动画与交互的实现图 6-52 程序流程线第六章 动画与交互的实现图 6-53 设置二级流程线第六章 动画与交互的实现
17) 打开,鸟错误,群组图标,在二级流程线上添加一个显示图标,在其演示窗口中输入,移动错误,请再试一次,
的提示文字 。
18) 运行程序时可以发现,当单词移动正确时,将显示移动正确的提示,并且单词不能再被移动；当单词移动错误时,
将返回原来的位置,同时出现移动错误的提示 。
19) 用同样的方法,分别建立,apple”和,pig”两个单词的响应分支 。
20) 在交互图标的最右侧再添加一个群组图标 。
21) 双击其响应类型标记，打开 【 属性：响应 】 对话框，
在 【 类型 】 选项中选择 【 条件响应 】 类型。
第六章 动画与交互的实现
22) 在 【 条件 】 标签的 【 条件 】 文本框中输入变量
,AllCorrectMatched”，该变量用于定义当所有正确响应都实现时，变量为“真”，否则为“假”。在 【 自动 】 选项列表中选择“为真”选项，该选项用于定义当条件“为真”时系统自动执行此分支，如图 6-54所示。
23) 在 【 响应 】 标签下 【 分支 】 选项中选择 【 退出交互 】
选项。
24) 单击 按钮，关闭对话框。
25) 打开该群组图标，在其二级流程线上添加一个显示图标，输入“全部正确，祝贺你！”的字样；再添加一个等待图标，设为等待 3秒；最后再用一个计算图标退出程序，整个课件的程序流程线如图 6-55所示。
第六章 动画与交互的实现图 6-54 【 条件 】 标签第六章 动画与交互的实现图 6-55 程序流程线第六章 动画与交互的实现
6.5.6 下拉菜单响应下面我们通过一个实例介绍制作下拉菜单的具体步骤：
图 6-55 程序流程线第六章 动画与交互的实现图 6-56 程序流程线第六章 动画与交互的实现图 6-57 修改后的流程线第六章 动画与交互的实现图 6-58 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-59 程序流程线第六章 动画与交互的实现图 6-60 运行画面第六章 动画与交互的实现图 6-61 程序流程线第六章 动画与交互的实现图 6-62 运行画面第六章 动画与交互的实现
6.5.7 条件响应图 6-63 【 属性：响应 】 对话框第六章 动画与交互的实现
6.5.8 文本输入响应图 6-64 输入名字前后的演示窗口第六章 动画与交互的实现其具体操作步骤如下：
1) 建立一个新文件 。 用计算图标将演示窗口的大小设定为 （ 320，
280） 。
2) 在计算图标的下面添加一个交互图标,命名为,学生档案簿,。
3) 运行程序之后双击交互图标,在演示窗口中绘制一条水平线 。
4) 在水平线的上方输入,请输入,字样 （ 注意选择 【 透明 】 模式 ）,并选择所需的字体和大小,将其调整至合适位置 。
5) 在交互图标的右侧添加一个群组图标,在弹出的 【 响应类型 】
对话框中选择 【 文本输入 】 响应类型,然后将图标命名为,王小二,。
6) 运行程序之后双击交互图标，可以看到演示窗口中有一个虚线框，该虚线框就是用于输入文本内容的区域，如图 6-65所示。
第六章 动画与交互的实现图 6-65 文本响应区域 图 6-66 键入“王小二”档案第六章 动画与交互的实现
6.5.9 按键响应
1) 建立一个新文件 。 用计算图标将演示窗口设定为 （ 320，
280）,并将其命名为,窗口,。
2) 在计算图标下面添加一个显示图标,命名为,天空,,导入一幅天空图像 。
3) 在,天空,图标下面再添加一个显示图标,命名为,圆,,
双击该图标,在打开的演示窗口中绘制一个填充了颜色的圆,并将圆的覆盖模式设置为 【 反转 】 。
4) 在,圆,图标下面添加一个移动图标,命名为,搜索,。
5) 运行程序,弹出 【 属性：移动图标 】 对话框 。
6) 在 【 类型 】 选项列表中选择 【 指定固定区域内的某点 】,
然后根据 【 版面布局 】 标签的提示拖动“圆”来设置一个移动区域，并设置 【 目的地 】 的值分别为 X,Y两个变量，如图 6-67所示。
第六章 动画与交互的实现图 6-67 【 属性：移动图标 】 对话框第六章 动画与交互的实现
7) 在 【 移动 】 标签下的 【 执行方式 】 选项中选择 【 永久 】
方式 。
8) 单击 按钮可关闭对话框 。
9) 在,搜索,图标下面再添加一个交互图标,命名为,控制,。
10) 在交互图标的右侧拖入一个计算图标,在弹出的 【 响应类型 】 对话框中选择 【 按键 】 类型,将计算图标命名为
,LeftArrow”,使其对应于左方向键 。
11) 双击,LeftArrow”计算图标,在打开的计算窗口中输入如图 6-68所示的内容后关闭计算窗口 。
第六章 动画与交互的实现图 6-68 对应于左方向键的计算图标内容第六章 动画与交互的实现
12) 用同样的方法再向交互图标的右侧添加三个计算图标，
将其分别命名,RightArrow”、,UpArrow”和,DownArrow”，
使其对应于右、上和下方向键，并在其计算窗口中分别输入相应的内容，如图 6-69,6-70,6-71所示。
图 6-69 对应于右方向键的计算图标内容第六章 动画与交互的实现图 6-70 对应于上方向键的计算图标内容第六章 动画与交互的实现图 6-71 对应于下方向键的计算图标内容第六章 动画与交互的实现
13) 程序的最终流程线如图 6-72所示。
图 6-72 程序流程线第六章 动画与交互的实现图 6-73 运行画面第六章 动画与交互的实现
6.5.10 重试限制响应图 6-74 设置交互分支第六章 动画与交互的实现图 6-75 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-76 【 属性：交互作用文本字段 】 对话框第六章 动画与交互的实现图 6-77 【 属性：响应 】 对话框第六章 动画与交互的实现图 6-78 【 属性：等待图标 】 对话框第六章 动画与交互的实现图 6-79 程序最终流程线第六章 动画与交互的实现
6.5.11 时间限制响应下面我们把上面重试限制交互的密码修改成为时间限制交互的密码,其操作步骤如下：
1) 打开上一节中制作的实例 。
2) 将,尝试 3次,群组图标名称修改为,限时 10秒,。
3) 双击其响应类型标记，打开 【 属性：响应 】 对话框，
从 【 类型 】 选项中选择 【 时间限制 】 类型，这时对话框如图
6-80所示。
第六章 动画与交互的实现图 6-80 【 属性：响应 】 对话框第六章 动画与交互的实现
4) 在 【 时限 】 选项文本框中输入,10”,即定义限时为 10
秒,其余设置如图 6-81所示 。
图 6-81 【 属性：响应 】 对话框第六章 动画与交互的实现
5) 单击按钮，程序流程线如图 6-82所示。
图 6-82 程序流程线第六章 动画与交互的实现
6) 运行程序，如果在 10秒钟内未输入密码，程序将提示用户是“非法用户”并自动退出。
