动画与交互的实现.

第六章 动画与交互的实现
7) 在【移动】标签中设置各项参数，如图6-13所示。
图6-13 【移动】标签
8) 关闭对话框。运行程序时就会发现红色的圆跟随鼠标移动。
第六章 动画与交互的实现
6.3.4 指向固定路径的终点
图6-14 【移动】标签
第六章 动画与交互的实现
图6-15 【版面布局】标签
第六章 动画与交互的实现
第六章 动画与交互的实现
图6-3 【版面布局】标签
第六章 动画与交互的实现
6.2 移动图标的属性
图6-4 五种动画设计方式
第六章 动画与交互的实现
图6-5 【属性：移动图标】对话框
第六章 动画与交互的实现
6.3 五种动画设计方式
6.3.1 指向固定点
Байду номын сангаас
图6-6 【版面布局】标签
第六章 动画与交互的实现
个红色的圆形。
2) 向流程线上添加一个移动图标，并命名为“循环”。 3) 双击“循环”移动图标，弹出【属性：移动图标】对话 框。 4) 在对话框中选择【指向固定路径的终点】方式，拾取演 示窗口中的红色圆形，通过拖曳鼠标确定运动路径。然后在
第六章 动画与交互的实现
图6-19 设定运动条件
第六章 动画与交互的实现
图6-20 【响应类型】对话框
第六章 动画与交互的实现
图6-21 分支结构
第六章 动画与交互的实现
6.5.2 按钮响应
1. 使用按钮响应
1) 新建一个文件。
2) 向流程线上添加一个计算图标，命名为“窗口”。 3) 向流程线上添加一个交互图标，并命名为“交互”。
4) 再拖曳一个计算图标至交互图标的右侧，在弹出的【响应 类型】对话框中选择【按钮】选项。
5) 单击
按钮，如果变量“x”没有在其它地方使 按钮
用过，则弹出【新的变量】对话框，直接单击 即可。
6) 向流程线上添加一个计算图标，双击该图标，在打 开的计算窗口中输入“x=1”后关闭窗口。
7) 运行程序，可以看见圆形在指定的路径上往复不
停地旋转。
第六章 动画与交互的实现
6.5 交互功能的实现
6.5.1 认识交互图标
5) 单击按钮，则在设计窗口中建立了交互分支结构，将计算 图标命名为“退出”。 6) 双击“退出”计算图标，在打开的计算窗口中输入“Quit （）”。
7) 关闭计算窗口。
第六章 动画与交互的实现
图6-22 计算窗口
第六章 动画与交互的实现
2. 设置按钮响应属性
图6-23 【属性：响应】对话框
第六章 动画与交互的实现
5) 在对话框中选择【指向固定区域内的某点】方式，然后拾 取演示窗口中的红色的圆，通过拖曳鼠标确定移动区域。 6) 在【目的地】选项中输入两个系统变量：cursorX和 cursorY。这两个变量的作用是让红色的圆捕捉光标位置，如图 6-12所示。
第六章 动画与交互的实现
图6-12 【版面布局】标签
第六章 动画与交互的实现
第六章 动画与交互的实现
6.1 动画设计的基本步骤 6.2 移动图标的属性 6.3 五种动画设计方式
6.4 利用变量控制动画
6.5 交互功能的实现
第六章 动画与交互的实现
6.1 动画设计的基本步骤
图6-1 运行画面
第六章 动画与交互的实现
图6-2 程序暂停出现【属性：移动图标】对话框
图6-25 设置按钮始终有效
第六章 动画与交互的实现
3. 改变按钮的大小、位置与外观
图6-26 【按钮】对话框
第六章 动画与交互的实现
图 6-27
第六章 动画与交互的实现
图6-28 【按钮编辑】对话框
第六章 动画与交互的实现
4. 按钮响应实例 下面，使用按钮响应制作一个简单的多媒体课件。 1) 建立一个新文件。在流程线上添加一个计算图标，命 名为“窗口”。 2) 双击流程线上的“窗口”计算图标，将演示窗口大小 设为（520，280）。 3) 向“窗口”计算图标的下方添加一个显示图标，命名 为“背景”。 4) 用前面学过的方法，向“背景”图标中导入一幅图片 作为背景。
图6-11 【版面布局】标签
第六章 动画与交互的实现
下面做一个鼠标跟随动画的练习： 1) 建立一个新文件，在流程线上添加一个显示图标，命名为 “圆形”。 2) 双击“圆形”显示图标，在演示窗口中画一个红色的圆。 3) 向流程线上添加一个移动图标，并命名为“跟随”。
4) 运行程序，当程序遇到空白的移动图标后会自动停止，并 弹出【属性：移动图标】对话框。
图6-16 创建的运动路径
第六章 动画与交互的实现
图6-17 圆滑路径
第六章 动画与交互的实现
6.3.5 指向固定路径上的任意点
图6-18 【版面布局】标签
第六章 动画与交互的实现
6.4 利用变量控制动画
使用变量来控制对象的循环运动。 1) 建立一个新文件，在流程线上添加一个显示图标，命名 为“圆形”，然后双击“圆形”显示图标，在演示窗口中画一
第六章 动画与交互的实现
图6-29 流程线
第六章 动画与交互的实现
8) 运行程序，如果发现按钮分布不符合要求，可以双击 交互图标，在演示窗口中调整按钮的位置和大小。
9) 调整按钮后运行程序，结果运行画面如图6-30所示。
图 6 30 运 行 画 面
-
第六章 动画与交互的实现
10) 用前面学过的方法，为每一个按钮选择手形光标。
5) 向流程线上添加一个交互图标，并命名为“交互”。
第六章 动画与交互的实现
6) 拖曳一个计算图标至交互图标的右侧，在弹出的【响 应类型】对话框中选择【按钮】选项，然后单击按钮，将图 标命名为“退出程序”。 7) 在交互图标右侧添加四个群组图标，并分别命名为 “复习旧课”、“导入新课”、“讲授内容”和“请你欣 赏”。这时不再弹出【响应类型】对话框，将使用第一次设 置的响应类型，该流程线如图6-29所示。
运行程序时，当光标指向按钮时将出现手形光标。 11) 双击“复习旧课”群组图标，打开其二级流程线。 12) 向该流程线上添加一个显示图标，在显示图标的演 示窗口中绘制一个小的“演示窗”作为复习旧课的承载窗 口。 13) 用户可以根据爱好和需要在流程线上添加其它图标， 以丰富课件，如文字、音乐、电影等。在此我们添加一个 显示图标，在其演示窗口中输入“温习单词”、“good—
图6-7 【移动】标签
第六章 动画与交互的实现
通过实例来验证一下选择不同的【执行方式】时程序的运行情况
图6-8 输入的文本
第六章 动画与交互的实现
6.3.2 指向固定直线上的某点
图6-9 【版面布局】标签
第六章 动画与交互的实现
图6-10 【移动】标签
第六章 动画与交互的实现
6.3.3 指向固定区域内的某点