交互实例步骤.docx

交互实例步骤.docx

《交互实例步骤.docx》由会员分享，可在线阅读，更多相关《交互实例步骤.docx（25页珍藏版）》请在冰豆网上搜索。

交互实例步骤

交互实例步骤

实训名称：

目标区交互、下拉菜单交互

时间：

2009.11.11

实训目的与要求:

目的：

掌握交互图标及其交互类型的使用

要求：

1.掌握目标区交互、下拉菜单交互的属性设置2.能够应用正确响应和错误响应

实训名称：

按键交互、文本输入交互、条件交互和重试限制、时间限制和事件交互

时间：

209.11.17

实训目的与要求:

目的：

掌握交互图标及其交互类型的使用

要求：

1.掌握各交互类型的特点及其属性设置2.能够综合应用各种交互进行多媒体设计

热区域交互实例

实例1：

章节目录的动态提示

1、新建文件，在流程线上放置一个显示图标，在其中输入章节目录的内容，文字的字体、

字号作适当的设置（如黑体，36号），颜色设置为黑色。

2、再在流程线上放置一个交互图标，在交互图标的右侧放置一个群组图标。

交互响应的类

型设置为热区域。

3、双击显示图标，再双击交互图标，调整表示热区域的矩形（虚线）的大小，并将热区域

与第一个章节目录对齐。

4、在群组图标中加入一个显示图标，在显示图标中输入（或复制）第一个章节目录的名称，

字体、字号等的设置与第一个显示图标中的设置相同，但颜色设置为红色。

5、调整群组图标中的显示图标中的文本位置，使其与第一个显示图标中对应的内容重合。

6、双击交互图标与群组图标的交叉点，打开交互响应的属性设置对话框。

在“热区域”选

项卡中设置“匹配”为：

指针处于指定区域内；“鼠标”设置为“手形”。

在“响应”选

项卡中设置“擦除”为：

在下一次输入之前。

7、根据章节目录的数量，依次在交互图标的右侧再放置若干个群组图标。

并依次调整热区

域的大小和位置，使它们分别与相应的章节目录对齐。

8、在各群组图标中再依次分别加入一个显示图标，显示图标中分别输入各章节目录的名

称，字体、字号、颜色等的设置与第一个分支中的显示图标中的设置相同。

9、分别调各分支中显示图标中文本的位置，使它们分别与“目录”显示图标中对应的内容

具有相同的位置。

10、为增强显示效果，可在各分支显示图标的文本下加下划线，或者在文本之前加提示符号。

11、试运行程序、调整并修改程序。

目标区交互实例

实例1：

认识历史人物

1、新建文件，然后分别拖放一个显示图标，导入四幅历史人物的头像，并按一定的顺序排

列，在每一幅头像下添加一对括号，用于填写人物的名称。

2、再在流程线上放置四个显示图标，分别命名为：

P1、P2、P3、P4。

其中分别写上四个历史人物的名称。

并把它们的属性Moveable列表框设为Anywhere。

3、拖放一个交互图标到流程线上，再拖放一个群组图标到其右下角处放开，在出现的响应

类型对话框中选择目标区域响应。

4、打开目标区域响应的属性对话框，单击第一个历史人物名称，再把目标区域调整到该历

史人物头像的下方括号的位置，从放下列表框中选择：

自动到目标区域中心；分支列表框中选择：

重试；擦除列表框中选择：

下一次输入后；状态列表框中选择：

正确的响应，其他的选项取默认值。

5、双击打开群组图标，在其中添加一个计算图标，加入语句为：

Movable@"P1":

=0（移动

到正确位置后此图标不可再移动）；再添加一个显示图标，在其中写上“正确”两字；添加一个等待图标，设置时限为1秒，取消其它复选框的选择；添加一个擦除图标，并设置擦除对象为：

有“正确”文本内容的显示图标。

6、拖放一个群组图标到交互图标右下角的后面处放开。

打开该目标区域响应分支的属性对

话框，单击第一个历史人物名称作为移动对象，再把目标区域调整到整个演示窗口，从

放下列表框中选择：

返回；分支列表框中选择：

重试；擦除列表框中选择：

下一次输入后；状态列表框中选择：

错误的响应；选中可接受任何对象选项；其他的选项取默认值。

7、双击打开群组图标，在其中添加一个显示图标，在其中写上“错误”两字；添加一个等

待图标，设置时限为1秒，取消其它复选框的选择；添加一个擦除图标，并设置擦除对象为：

有“错误”文本内容的显示图标。

8、在两个分支之间按顺序添加与第二个人物、第三个任务和第四个人物名称相对应的正确

响应的分支。

9、拖放一个计算图标到这五个群组图标的后面，双击目标区域响应类型图标，打开目标区域响应的属性对话框，从类型）列表框中选择按钮；标题文本框中输入“退出”；状态设置为不判断；其他的选项取默认值。

10、双击打开计算图标，输入函数：

Quit（），用于退出程序。

实例2：

识物学单词

操作步骤为：

（1）新建一个文件，命名为“识物学单词.a6p”。

（2）选择菜单[修改]→[文件]→[属性…]命令，打开文件属性对话框，选择“大小”下拉框中的“变量”选项，在“属性”标签页中取消“菜单栏”复选框，选取背景色为紫色，然后单击“确定”按钮确定。

（3）选择菜单[文本]→[定义风格…]命令，打开定义文本风格对话框。

（4）单击定义文本风格对话框中的“添加”按钮，增加一种新的文本风格，将该文本风格更名为“红玫瑰标题”，选择字体为楷体，字号为18，粗体，斜体，字色为紫色，然后单击“修改”按钮确定修改。

（5）同样，再增加一个新的文本风格，更名为“提示信息”，字体为宋体，字号为12，粗体，字色分别为蓝色，其他设置不变，然后单击“修改”按钮确定修改。

（6）单击对话框中的“完成”按钮，完成定义文本风格。

（7）拖动一个【计算】图标到流程线上，在该图标中输入语句“ResizeWindow（400,300）”。

（8）拖动四个【显示】图标到流程线上，分别命名为“背景”、“老鹰”、“小鸟”和“蝴蝶”，并且在四个图标中分别导入背景图片、老鹰图片、小鸟图片和蝴蝶图片，并调整它们的位置。

（9）在“背景”【显示】图标中输入四个文本对象，一个为“识物学单词”，文本风格为“标题”；其他三个分别为“Eagle”、“Bird”和“Butterfly”，文本风格为系统默认，然后在这三个文本对象下面分别绘制一个矩形。

（10）拖动一个【交互】图标到流程线上，将其命名为“选择”。

（11）拖动一个【显示】图标到该【交互】图标右侧，选取目标区域响应，并将其命名为“移动老鹰”。

（12）双击该【显示】图标上的响应类型图标，打开其属性对话框，单击后面展示窗口中的“老鹰”图形，并将其移动到文本对象“Eagle”下面的矩形中，然后调整目标区域，使之正好覆盖整个矩形。

（13）按住键并双击“移动老鹰”【显示】图标，打开展示窗口，输入文本“Right!

”，文本风格为“提示信息”，并将该文本对象移动到三个矩形的正下方。

（14）将“移动老鹰”【显示】图标复制，然后在【交互】图标右侧粘贴出五个该【显示】图标，分别将图标更名为“移动小鸟”、“移动蝴蝶”、“错误移动老鹰”、“错误移动小鸟”和“错误移动蝴蝶”。

（15）双击“移动小鸟”上的响应类型图标，打开其属性对话框，然后单击展示窗口中的“小鸟”图形，并将其移动到文本“Bird”下面的矩形中。

（16）双击“移动蝴蝶”上的响应类型图标，打开其属性对话框，然后单击展示窗口中的“蝴蝶”图形，并将其移动到文本“Butterfly”下面的矩形中。

（17）双击“错误移动老鹰”上的响应类型图标，打开其属性对话框，然后单击展示窗口中的“老鹰”图形，并将目标区域调整到整个屏幕大小。

（18）双击“错误移动老鹰”【显示】图标，将文本“Right!

”改为“Wrong!

”。

（19）双击“错误移动小鸟”上的响应类型图标，打开其属性对话框，然后单击展示窗口中的“小鸟”图形，并将目标区域调整到整个屏幕大小。

（20）双击“错误移动小鸟”【显示】图标，将文本“Right!

”改为“Wrong!

”。

（21）双击“错误移动蝴蝶”上的响应类型图标，打开其属性对话框，然后单击展示窗口中的“蝴蝶”图形，并将目标区域调整到整个屏幕大小。

（22）双击“错误移动蝴蝶”【显示】图标，将文本“Right!

”改为“Wrong!

”。

（23）拖动一个【计算】图标到【交互】图标的最右侧，将其命名为“退出”。

（24）将其响应类型改变为按钮响应，并在该【计算】图标中输入语句“Quit（）”。

（25）将“退出”按钮进行调整，并移动到展示窗口的右下角。

热对象响应实例

实例1：

海洋生物介绍

实例2：

玫瑰情话

说明：

当鼠标移动到一个玫瑰图形上时，就会显示出相应的文本信息。

操作步骤为：

（1）新建一个文件，命名为“玫瑰情话.a6p”。

（2）选择菜单[修改]→[文件]→[属性…]命令，打开文件属性对话框，选择“大小”下拉框中的“变量”选项，在“属性”标签页中取消“菜单栏”复选框，选取背景色为紫色，然后单击“确定”按钮确定。

（3）选择菜单[文本]→[定义风格…]命令，打开定义文本风格对话框。

（4）单击定义文本风格对话框中的“添加”按钮，增加一种新的文本风格，将该文本风格更名为“红玫瑰标题”，选择字体为楷体，字号为18，粗体，字色为红色，然后单击“修改”按钮确定修改。

（5）同样，再增加三个新的文本风格，分别更名为“粉红色玫瑰标题”、“黄色玫瑰标题”和“白色玫瑰标题”，字色分别为粉红色、黄色和白色，其他设置不变，然后单击“修改”按钮确定修改。

（6）再增加一种新的文本风格，将该文本风格更名为“正文”，选择字体为宋体，字号为12，粗体，斜体，字色为蓝色，然后单击“修改”按钮确定修改。

（7）单击对话框中的“完成”按钮，完成定义文本风格。

（8）拖动一个【计算】图标到流程线上，在该图标中输入语句“ResizeWindow（500,350）”。

（9）拖动四个【显示】图标到流程线上，分别命名为“红玫瑰”、“粉红色玫瑰”、“黄色玫瑰”和“白色玫瑰”，并且在四个图标中分别导入红玫瑰图片、粉红色玫瑰图片、黄色玫瑰图片和白色玫瑰图片，并调整它们的位置。

（10）拖动一个【交互】图标到流程线上，将其命名为“选择玫瑰”。

（11）拖动一个【显示】图标到【交互】图标右侧，选择热对象响应类型，并将其命名为“显示红玫瑰信息”。

（12）双击该【显示】图标，打开展示窗口，输入两个文本信息，分别为“红玫瑰”和“象征美好、幸福和忠贞！

”。

其中“红玫瑰”文本对象的文本风格为“红玫瑰标题”，而“象征美好、幸福和忠贞！

”文本对象中的文本风格为“正文”。

（13）调整它们的位置。

（14）双击该【显示】图标上的响应类型图标，打开其属性对话框，单击后面展示窗口中“红玫瑰”图形，将其作为热对象。

（15）选择对话框中“匹配”下拉框的“指针在对象上”选项，并将鼠标指针形状设置成“小手”形状。

单击“确定”按钮确定。

（16）将“显示红玫瑰信息”【显示】图标复制，然后在【交互】图标右侧粘贴出三个图标来，将其名称分别更名为“显示粉红色玫瑰信息”、“显示黄色玫瑰信息”和“显示白色玫瑰信息”。

（17）将【显示】图标中的“红玫瑰”文本对象分别改为“粉红色玫瑰”、“黄色玫瑰”和“白色玫瑰”，并且文本风格相应改变成“粉红色玫瑰标题”、“黄色玫瑰标题”和“白色玫瑰标题”，将“象征美好、幸福和忠贞！

”文本对象改为“适合初恋时赠送，而且要送花蕾，象征美好的恋情含苞待放！

”、“象征忌妒或不快，适合恋情遭受挫折，也用作爱的表白，道歉和失望！

”和“象征和谐美好，纯洁的友谊，适合一般友人赠送！

”。

（18）拖动一个【计算】图标到【交互】图标的最右侧，将其命名为“退出”。

（19）在该【计算】图标中输入语句“Quit（）”。

（20）单击【计算】图标上面的响应类型图标，将响应类型改变成按钮响应，并将按钮移动到展示窗口的右下角。

条件响应实例

实例1：

动态显示大图片

1、新建文件，设置演示窗口的大小为800*600。

2、在流程线上放置一个交互图标，标题：

动态显示。

在交互图标的右侧放置一个显示图标，

标题：

1。

在弹出的交互响应类型对话框中选择：

条件。

3、打开显示图标的演示窗口，插入一幅大图片（图片的大小超过演示窗口）。

4、打开显示图标的属性窗口，设置相应的属性。

5、选中基点，在演示窗口中移动图片，使图片的左上角与演示窗口的左上角对齐；再选中

重点，在演示窗口中移动图片，使图片的右下角与演示窗口的右下角对齐。

6、双击交互图标与显示图标的交叉点，打开交互属性窗口，在条件选项卡中设置条件：

1；

自动：

为真。

实例2：

完善识物学单词

操作步骤为：

（1）删除“错误移动老鹰”、“错误移动小鸟”和“错误移动蝴蝶”三个图标。

（2）按住键单击“移动老鹰”图标下方，使其分支方式为“继续”。

（3）按住键单击“移动老鹰”图标标题的右侧，使其变为正确响应，即标题前出现一个“+”号。

（4）同样，将“移动小鸟”、“移动蝴蝶”的分支方式改变为为“继续”，都改为正确响应。

（5）拖动一个【群组】图标到【交互】图标的最右侧。

（6）双击其上面的响应类型图标，打开其属性对话框，选择条件响应，然后在“条件”文本框中输入变量AllCorrectMatched，然后单击“确定”确定。

（7）此时该【群组】图标名称变为AllCorrectMatched，双击该【群组】图标，打开其二级窗口。

（8）拖动一个【显示】图标到二级流程线上，将其命名为“全部正确”。

（9）双击该【显示】图标，在展示窗口中输入文本“AllCorrect!

”，文本风格为“标题”，将其移动到屏幕的最下方。

（10）拖动一个【计算】图标到二级流程线上，将其命名为“固定图形”。

（11）在该【计算】图标中输入如下语句：

movable@"老鹰":

=FALSE

movable@"小鸟":

=FALSE

movable@"蝴蝶":

=FALSE

-固定“老鹰”、“小鸟”和“蝴蝶”图形

文本输入响应实例

实例1：

用户登录程序

操作步骤为：

（1）新建一个文件，命名为“用户登录程序.a6p”。

（2）选择菜单[修改][文件]→[属性…]命令，打开文件属性对话框，选择“大小”下拉框中的“变量”选项，在“属性”标签页中取消“菜单栏”复选框，选取背景色为紫色，然后单击“确定”按钮确定。

（3）拖动一个【计算】图标到设计窗口的流程线上，并将其命名为“初始化”。

（4）双击该【计算】图标，打开其计算编辑窗口，然后在窗口中输入语句：

ResizeWindow（400,250）

User_Name:

=“”

Password:

=“”

（5）确定新建这两个变量User_Name和Password，并将其初始值设置为““””。

（6）选择菜单[文本]→[定义风格…]命令，打开定义文本风格对话框。

（7）单击定义文本风格对话框中的“添加”按钮，增加一种新的文本风格，将该文本风格更名为“提示文字”，选择字体为楷体、字号为18，粗体，斜体、字色为紫色，然后单击“修改”按钮确定修改。

（8）单击对话框中的“完成”按钮，完成定义文本风格。

（9）拖动一个【显示】图标到流程线上，将其命名为“背景”。

（10）双击该【显示】图标，打开展示窗口，从外部导入一幅图形。

（11）拖动一个【显示】图标到流程线上，将其命名为“用户名提示信息”。

（12）在该【显示】图标中输入文本“请输入用户名：

”，文本风格为“提示文字”，显示模式为“透明”，并在该文本下方绘制一个矩形。

（13）拖动一个【交互】图标到流程线上，将其命名为“登录用户名”。

（14）拖动一个【计算】图标到该【交互】图标的右侧，选择文本输入响应，将其命名为“*”，并将其响应的分支结构设置为“退出交互”。

（15）在该【计算】图标中输入语句“User_Name:

=EntryText”，其中，EntryText是一个系统变量，用来记录用户输入的文本。

（16）按住键双击“登录用户名”【交互】图标，打开展示窗口，将文本域移动到绘制的矩形中。

（17）双击文本域，打开文本域属性对话框，取消“交互作用”标签页中的“输入标记”复选框，在“文本”标签页中设置字体为宋体，字号为12，粗体，字色为蓝色，显示方式为“透明”方式，然后单击“确定”按钮确定。

（18）拖动一个【擦除】图标，将其命名为“擦除用户名提示信息”，设置其擦除“用户名提示信息”【显示】图标中的内容。

（19）拖动一个【显示】图标，命名为“密码提示信息”，输入文本“请输入密码：

”，文本风格为“提示文字”，并在该文本下方绘制一个矩形。

（20）再拖动一个【交互】图标到流程线上，将其命名为“输入密码”。

（21）拖动一个【计算】图标到该【交互】图标的右侧，选择文本输入响应，将其命名为“*”，并将其响应的分支结构设置为“退出交互”。

（22）在该【计算】图标中输入语句“Password:

=EntryText”。

（23）按住键双击“登录用户名”【交互】图标，打开展示窗口，将文本域移动到绘制的矩形中。

（24）双击文本域，打开文本域属性对话框，取消“交互作用”标签页中的“输入标记”复选框，在“文本”标签页中设置字体为宋体，字号为12，粗体，字色为蓝色，显示方式为“透明”方式，然后单击“确定”按钮确定。

（25）拖动一个【擦除】图标，将其命名为“擦除密码提示信息”，设置其擦除“密码提示信息”【显示】图标中的内容。

（26）拖动一个【显示】图标，命名为“欢迎文字”，输入文本“{User_Name}先生，欢迎使用该软件！

”，文本风格为“提示文字”。

（27）拖动一个【等待】图标到流程线上，将其命名为“等待”，在其属性对话框中选中“鼠标单击”复选框，在“时间限制”文本框中收入“3”，取消“显示按钮”复选框，单击“确定”按钮确定。

（28）拖动一个【计算】图标到流程线上，将其命名为“退出”，在该图标中输入语句“Quit（）”。

按键交互响应实例

实例：

完善用户登录程序

操作步骤为：

（1）将“用户登录程序.a6p”另存为“完善用户登录程序.a6p”。

（2）将“输入密码”【交互】图标下的“*”【计算】图标的响应类型改为按键响应，将其更名为“?

”，并且将其分支方式改为“重试”。

（3）将该【计算】图标中的语句改为如下语句：

Password:

=Password^Key

-记录用户密码

ScreenText:

=ScreenText^"*"

-在屏幕上再显示出一个*号

（4）在出现的新建变量对话框中，将变量ScreenText的初始值赋为空字符串，既在“初始值”文本框中输入““””。

（5）拖动一个【群组】图标到“输入密码”【交互】图标右侧，并选择按键响应，将其命名为“Enter”，并且将其分支方式改为“退出交互”。

表示当用户按下回车键时退出该交互。

（6）再拖动一个【计算】图标到该【群组】图标的右侧，并将其命名为“Backspace|Delete”，将其分支方式改为“重试”。

（7）在该【计算】图标中输入如下语句：

-当用户按下了Backspace键或Delete键时

Password:

=SubStr（Password,1,CharCount（Password）-1）

-将用户密码减少一个字符

ScreenText:

=SubStr（ScreenText,1,CharCount（ScreenText）-1）

-在屏幕上少显示出一个*号

（8）定义一种文本风格，命名“密码文字”，将其字体设置为宋体，字号为12，粗体，字色为蓝色。

（9）先双击“密码提示信息”【显示】图标，然后关闭。

（10）按下键并双击“输入密码”【交互】图标，打开展示窗口，用文字工具在窗口中输入“{ScreenText}”（显示星号*），文本风格为“密码文字”，并将该文本对象移动到“密码提示信息”【显示】图标的矩形中。

（11）在“初始化”【计算】图标中添加一个语句“ScreenText:

=“””。

重试限制响应实例

实例1：

猜数游戏

说明：

程序自动产生一个从1到80的整数，用户可以有6次机会猜测，如果用户在6次机会中猜中了该数，程序给出信息，然后退出。

在猜数的过程中，程序会给出提示信息，告诉用户输入的数字与目标数字之间的关系，

操作步骤为：

（1）新建一个文件，命名为“猜数游戏.a6p”。

（2）选择菜单[修改]→[文件]→[属性…]命令，打开文件属性对话框，选择“大小”下拉框中的“变量”选项，在“属性”标签页中取消“菜单栏”复选框，选取背景色为紫色，然后单击“确定”按钮确定。

（3）选择菜单[文本]→[定义风格…]命令，打开定义文本风格对话框。

（4）单击定义文本风格对话框中的“添加”按钮，增加一种新的文本风格，将该文本风格更名为“标题文字”，选择字体为楷体，字号为18，粗体，斜体、字色为绿色，然后单击“修改”按钮确定修改。

（5）再增加一种文本风格，命名为“提示文字”，字体为宋体，字号为12，粗体，字色为蓝色。

（6）单击对话框中的“完成”按钮，完成定义文本风格。

（7）拖动一个【计算】图标到设计窗口的流程线上，并将其命名为“初始化”。

（8）双击该【计算】图标，打开其计算编辑窗口，然后在窗口中输入语句：

ResizeWindow（400,200）

（9）拖动一个【显示】图标到流程线上，将其命名为“提示文字”。

（10）在【显示】图标中输入两个文本，一个为“猜数游戏”，文本风格为“标题文字”；另一个为“该游戏将产生一个1-8-0之间的数，您共有6次机会猜数：

”，文本风格为“提示文字”。

（11）调整这两个文本对象。

（12）拖动一个【计算】图标到流程线上，命名为“初始化”，在该图标中输入如下语句：

Num:

=Random（1,8-0,1）-产生随机数，记录在变量Num中

Times:

=0-记录用户匹配时已经尝试的次数

（13）新建这两个变量，并将它们的初始值都设置为0。

（14）拖动一个【交互】图标到流程线上，并命名为“猜数”。

（15）拖动一个【群组】图标到【交互】图标的右侧，选择条件响应类型，将其命名为“Num=NumEntry”，并将其分支方式改变为“退出交互”。

（16）拖动一个【计算】图标到【交互】图标的右侧，选择文本输入响应，并将其命名为“*”，可以接受任何字符的输入，然后将其分支方式改变为“重试”。

（17）在该【计算】图标中输入如下语句：

ifNumEntry=0thenScreen文本:

=""

ifNumEntry

Screen文本:

="您输入的数太小！

还有"^String（6-TimesMatched）^"机会！

"

elseifNumEntry>Numthen

Screen文本:

="您输入的数太大！

还有"^String（6-TimesMatched）^"机会！

"

endif

Times:

=TimesMatched

（18）新建变量ScreenText，并将其初始值设置为空字符串。

（19）双击【交互】图标，打开展示窗口，调整文本域，然后双击文本域，打开其属性对话框，在“文本”标签页中设置文本风格为字体为System，字号为8-，粗体，字色为黑色，显示方式为“透明”，然后单击“确定”按钮确定。

（20）在展示窗口中输入文本“{ScreenText}”，文本风格为“默认”，对齐方式为中间对齐，然后将其移动到展示窗口的最下端，关闭展示窗口。

（21）拖动一个【群组】图标到【交互】图标的最右侧，选择限制次数响应类型，将其命名为“6次输入机会”，然后再将其分支方式改变为“退出交互”。

（22）拖动一个【计算】图标到流程线上，将其命名为“显示结果”。

（23）在该【计算】图标中输入如下语句：

ifTimes=0then

ScreenText:

="Wonderful!

"

-如果第1次就输