模块三交互型多媒体课件设计与制作 人机交互是指人与计算机之间使用某种对话手段,以一定交互方式,为完成确定任务而进行的人机之间信息交换的过程。人机交互方式是指人机之间交互信息的组织形式或语言方式,又称为对话方式、交互技术等。人机通过不同的人机交互方式实际完成人向计算机输入信息以及计算机向人输出信息的工作,目前常用的人机交互方式有: 问答式对话、菜单技术、命令语言、填表技术、查询语言、自然语言、图形方式及直接操纵等。 交互型多媒体课件是一种能够自由控制转向到某一特定内容的多媒体课件,这种模式的课件在课堂教学中,操控灵活、形式多样,有助于学生对某些知识点加强学习和掌握。交互型多媒体课件的制作原则: 优化教学结构、可操作性强、内容科学合理、版面简约、艺术展示、信息量适度等。 交互型多媒体课件制作工具有很多,其中,Authorware是一种流程图式多媒体制作软件。本模块通过顺序运行方式多媒体课件的设计与制作、动画展示类多媒体课件的设计与制作、交互功能类多媒体课件的设计与制作、结构化交互型多媒体课件设计与制作、交互型多媒体课件的打包与发布五个项目,介绍Authorware 7.0软件关于交互型多媒体课件的设计与制作技术。 知识树 项目3.1顺序运行方式多媒体课件的设计与制作 顺序运行方式多媒体课件是最基本的课件类型,主要通过“显示”“等待”“擦除”和“计算”等图标的设置,实现课件顺序运行。这种类型的课件也属于演示型多媒体课件,但运行效果优于利用PowerPoint软件制作的演示文稿。本项目通过Authorware 7.0软件界面功能介绍、顺序运行方式多媒体课件制作两个任务的学习与实践,帮助读者熟悉Authorware7.0软件界面功能,掌握顺序运行方式多媒体课件的制作技术。  熟悉Authorware 7.0软件的界面功能。  掌握顺序运行方式交互型多媒体课件的制作技术。 任务1Authorware 7.0软件界面功能介绍 打开Authorware 7.0软件,其“新建”文件界面如图31所示。其中,“新建”窗口是利用知识对象创建新文件的,一般不使用它,单击“取消”或“不选”按钮,打开Authorware 7.0的工作界面,如图32所示。 视频讲解 图31“新建”文件界面 (1) “图标”面板。 “图标”面板是Authorware特有的面板,它提供了进行多媒体创作的基本单元—图标,每个图标都具有其独特的功能,如表31所示。 图32Authorware 7.0软件界面 表31“图标”面板功能简介 按钮名称功能 显示图标显示文字、图形、图像等,这些文字或图形、图像可以从外部导入,也可以直接用Authorware提供的绘图工具创建 移动图标使选定图标中的内容(文字、图片、动画等)实现简单的路径动画,有五种运动方式 擦除图标擦除选定图标中的文字、图形图像等 等待图标使程序暂停,直到设计者设定的响应条件得到满足为止 导航图标用于建立超级链接,实现超媒体导航 框架图标交互图标与导航图标的结合,可以制作翻页结构或超文本链接 判断图标按照设定方式确定流程沿着哪个分支运行 交互图标提供用户响应,实现人机交互,共提供了11种交互类型,使人机交互的方式更加多样化 计算图标是存放程序的地方,如在计算图标中可以为变量赋值、运行系统函数等 群组图标设计窗口的大小是有限的,太多的图标放在同一条流程线上不利于程序的优化。通过群组图标可以把流程线上的多个图标组合到一起,形成下一级设计窗口,从而缩短流程线并进行模块设计 续表 按钮名称功能 数字电影图标又称为动画图标,利用它可以播放AVI、FLI、EC、MOV等格式的数字电影和动画 声音图标可以播放声音文件,并且可以对播放方式进行控制 DVD图标控制外接视频播放设备 知识对象图标用于在知识对象向导下指定对象 流程起始标 志旗用于程序的调试。把此标志放在流程线上,当运行程序时,会从标记所在处开始运行 流程停止标 志旗用于程序的调试。把此标志放在流程线上,当运行程序时遇到这个标志会立即停止运行 调色板用来为图标着色,可以让程序开发者方便地区分各类图标,它对程序的运行没有影响 (2) 设计窗口。 设计窗口是进行Authorware程序设计的基本操作窗口,如图33所示。 图33设计窗口 窗口左侧一条贯穿上下的直线叫作流程线,程序的设计必须在流程线上进行。窗口右上角的“层 1”字样,表明当前窗口是第一层。若流程线上添加“群组”图标,双击打开该“群组”图标后,其窗口会有“层 2”字样,表明该窗口是第二层,是由第一层派生出来的,以此类推。 (3) “属性”面板。 “属性”面板位于软件界面的最下方,不同的对象有不同的“属性”面板。“属性”面板用于对文件、图标属性进行设置。选择“修改”→“文件”→“属性”命令,打开文件属性面板,如图34所示。 图34文件属性面板 (4) 图标的使用。 首先将要使用的图标拖放至流程线上,并给图标命名(一个程序中的各个图标名称最好不要相同,否则,在实现图标调用时,存在相同图标名称,会产生错误),接着编辑图标内部信息,最后设置各图标的属性。 任务2顺序运行方式多媒体课件设计与制作 顺序运行方式多媒体课件主要通过“显示”“等待”“擦除”和“计算”等图标的设置,达到顺序运行的目的。 实例1: 顺序浏览素描画。 1. 新建文件 选择“文件”→“新建”→“文件”命令,弹出“新建”对话框,如图35所示。单击“取消”或“不选”按钮,进入设计窗口界面。 2. 设置演示窗口的大小 选择“修改”→“文件”→“属性”命令,打开文件属性面板,如图34所示。单击“大小”后面的下三角按钮,弹出设置大小列表,如图36所示。根据多媒体课件的内容需要,选择合适的演示窗口大小。本实例演示窗口设置为640×480。 图35“新建”对话框 图36设置大小列表 3. 设计顺序浏览程序 操作步骤如下。 (1) 导入图片并输入文字。在设计窗口中拖放4个“显示”图标到流程线上,分别命名为“甘蓝”“梨”“青椒”和“西红柿”。双击“甘蓝”显示图标,打开“演示窗口”,如图37所示。单击常用工具栏中的“导入”按钮,选择“甘蓝”图片,导入该图片。选中图片,拖动句柄调整图片大小,以适合演示窗口为宜(调整时,按住Shift键拖动四角上的句柄,不改变图片的长宽比。首次调整时,会弹出一个警告,如图38所示,单击“确定”按钮即可)。选择工具面板中的“文本”工具,单击“甘蓝”图片,输入“甘蓝”两字,调整文本框大小及位置。单击“色彩”框中的线条文本色工具,设置文字颜色为黑色(默认),再单击“模式”框中的“透明”选项设置为透明背景。选择“文本”菜单下的各命令,设置字体、字号、风格、对齐方式等,如图39所示。 视频讲解 图37演示窗口 图38警告 注意,演示窗口处于编辑状态下,利用工具栏还可以绘制几何图形、设置线条或填充颜色、设置线型和模式、设置自填充样式等。 同理导入“梨”“青椒”和“西红柿”图片。 单击常用工具栏中的“运行”按钮,运行程序,会发现4张图片快速播放,最终只显示第4张图片,如图310所示。 (2) 设置等待。操作步骤(1)设置完成后运行,不能按张浏览素描画,这时可以通过“等待”图标设置按张浏览。 视频讲解 在每个“显示”图标后,各拖放一个“等待”图标,如图311所示。设置所有“等待”图标属性,如图312所示。 单击常用工具栏中的“运行”按钮,运行程序,通过单击鼠标,播放下一张图片。 (3) 设置“显示”图标显示特效。选中“甘蓝”显示图标,在其“属性”面板中单击“特效”后面的按钮,弹出“特效方式”对话框,如图313所示,选中一种“特效”方式。 图39导入图片和输入文字 视频讲解 图310运行程序最终显示 图311拖放“等待”图标 图312设置“等待”图标属性 图313“特效方式”对话框 同理,设置“梨”“青椒”和“西红柿”显示图标的特效。 (4) 设置“擦除”特效。操作步骤(3)对各“显示”图标设置了显示特效,下面进行显示图标的“擦除”特效。在每一个“等待”图标下面各拖放一个“擦除”图标,分别命名为“擦除甘蓝”“擦除梨”“擦除青椒”和“擦除西红柿”,如图314所示。 视频讲解 图314拖放“擦除”图标 单击常用工具栏中的“运行”按钮,运行程序,遇到“擦除甘蓝”擦除图标时,弹出擦除图标属性面板,如图315所示。单击要擦除的对象“甘蓝”图片,并单击“特效”后面的按钮,弹出“特效方式”对话框,如图313所示,选中一种“特效”方式。再次运行程序,同理设置“梨”“青椒”和“西红柿”显示图标的擦除特效。 图315擦除图标属性面板 (5) 设置“退出”操作。通过操作步骤(1)~(4)已经完成了顺序浏览素描画的设置,下面设置“退出”操作。在“擦除西红柿”擦除图标下面拖放一个“显示”图标,命名为“提示”。在“提示”显示图标演示窗口中输入“单击鼠标或等待3s后退出!”。在“提示”显示图标的下面再拖放一个“等待”图标,命名为“单击或3s”,设置“单击或3s”等待图标属性如图316所示。 视频讲解 图316设置“单击或3s”等待图标属性 在“单击或3s”等待图标下面再拖放一个“计算”图标,命名为“退出”。双击“退出”计算图标,打开“退出”编辑窗口,输入“quit()”函数,如图317所示。关闭“退出”编辑窗口,弹出一个“提问”对话框,询问是否保存对计算图标的更改,单击“是”按钮,如图318所示。 图317“退出”计算图标编辑窗口 图318“提问”对话框 至此,顺序浏览程序设计完成,程序流程如图319所示。 图319程序流程 注意,所有在“计算”图标编辑窗口中输入的非直接显示的标点符号,均为英文输入法状态下的标点符号,否则系统将提示出错。 4. 保存程序文件 选择“文件”→“保存”或“另存为”命令,弹出“保存文件为”对话框,如图320所示。输入文件名“顺序浏览素描画”,设置好保存路径,单击“保存”按钮即可保存文件为“顺序浏览素描画.a7p”。 图320“保存文件为”对话框 本项目通过2个任务的学习与实践,帮助读者熟悉了Authorware 7.0软件界面功能,掌握了顺序运行方式多媒体课件的制作技术。 项目3.2动画展示类多媒体课件的设计与制作 动画展示是当前流行的课件最大特点之一,Authorware 7.0软件提供“移动”图标,“移动”图标支持“指向固定点”“指向固定直线上的某点”“指向固定区域上的某点”“指向固定路径上的终点”和“指向固定路径上的任意点”5种动画类型。本项目通过指向固定点的动画设计、指向固定直线上的某点的动画设计、指向固定区域上的某点的动画设计、指向固定路径上的终点的动画设计和指向固定路径上的任意点的动画设计5个任务的学习与实践,帮助读者掌握动画展示类多媒体课件的设计与制作技术。 掌握动画展示类多媒体课件的设计与制作技术。 任务1指向固定点的动画设计 “指向固定点”的动画是指在“移动”图标的控制下,被控制对象从一点沿某直线移动到另外一点,如图321所示。 图321“指向固定点” 的动画 实例1: 三辆赛车沿直线赛道从甲地到乙地的动画设计。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“赛车动画设计.a7p”。 视频讲解 (2) 设置“赛道”背景。拖放“显示”图标到流程线上,命名为“赛道”。使用“直线”工具绘制三条直线作为赛道,并上下均匀排列。赛道两端输入“甲地”和“乙地”,并设置文本格式,如图322所示。“赛道”在程序运行过程中是静止不动的,在“赛道”显示图标上右击,选择弹出的快捷菜单中的“计算”命令,弹出“赛道”计算窗口,输入“Movable:=0”,关闭该计算窗口,会发现“赛道”显示图标左上角多了一个“=”,这就是“附属计算”图标。 注意,Movable是一个系统变量,用于设置显示的对象是否可移动的,“: =”是赋值运算符,赋值为0,表示显示的对象不能移动,赋值为1,表示显示的对象能移动。 (3) 将“赛车1.gif”“赛车2.gif”和“赛车3.gif”图片导入到流程线上,分别命名为“赛车1”“赛车2”和“赛车3”,调整赛车图片大小和摆放位置,并设置“透明”模式,如图323所示。 2. 动画设计 (1) 拖放三个“移动”图标到流程线上,分别命名为“移动赛车1”“移动赛车2”和“移动赛车3”。 视频讲解 图322“赛道”背景设置 图323导入赛车图片 (2) 单击常用工具栏中的“运行”按钮,运行程序,首先弹出“移动赛车1”移动图标属性面板,如图324所示。选择“指向固定点”动画类型,单击“赛车1”图片作为被控制对象,再拖动“赛车1”图片到“乙地”,“定时”设置为“时间(秒),3”,“运行方式”设置为“等待直到完成”。 图324“移动赛车1”移动图标属性面板 (3) 单击常用工具栏中的“运行”按钮,运行程序,可以看到“赛车1”从“甲地”行驶到“乙地”,用时3秒。接着弹出“移动赛车2”移动图标属性面板,同理设置即可。 (4) 同理设置“移动赛车3”移动图标属性。 3. 同时移动设计 单击常用工具栏中的“运行”按钮,运行程序,可以看到三辆赛车依次进行移动,并非同时移动。设置同时移动的方法如下: 将“移动赛车1”和“移动赛车2”移动图标属性面板的“运行方式”设置为“同时”,“移动赛车3”移动图标属性面板的“运行方式”还是保留原有设置。再次单击常用工具栏中的“运行”按钮,运行程序,可以看到三辆赛车同时移动了。 注意,“运行方式”的设置选项决定其后面的图标运行情况。 4. 程序“退出”设置 拖放一个“等待”图标到流程线上,命名为“单击”,该“等待”图标属性面板设置“事件”为“单击鼠标”,再拖放一个“计算”图标,命名为“退出”。双击“退出”图标,输入“quit()”函数。 5. 保存程序文件 所有图标设置完成,整个程序流程图如图325所示。选择“文件”→“保存”或“另存为”命令保存程序文件。 图325整个程序流程图 任务2指向固定直线上的某点的动画设计 图326“指向固定直线 上的某点”的动画 “指向固定直线上的某点”的动画是指在“移动”图标的控制下,被控制对象从一点移动到指定直线上的某点,如图326所示。 实例2: 随机套圈的动画设计。 操作步骤如下。 视频讲解 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“随机套圈.a7p”。 (2) 将“钢圈.gif”“小泰迪.gif”“小熊熊.gif”和“小猪猪.gif”图片导入到流程线上,分别命名为“钢圈”“小泰迪”“小熊熊”和“小猪猪”,调整上述图片的大小和摆放位置,并设置“透明”模式,如图327所示。 图327导入图片 2. 动画设计 视频讲解 (1) 拖放一个“移动”图标到流程线上,命名为“套圈”。单击常用工具栏中的“运行”按钮,运行程序,弹出“套圈”移动图标属性面板,如图328所示。选择“指向固定直线上的某点”动画类型,单击“钢圈”图片作为被控制对象,单击“基点”,设置值为“1”,并拖动“钢圈”到“小猪猪”图片上; 单击“终点”,设置值为“3”,并拖动“钢圈”到“小熊熊”图片上,这时会看到从“小猪猪”到“小熊熊”图片有一条灰色的直线,这条直线即为钢圈要停止的位置,如图329所示。单击“目标”,设置值为“random(1,3,1)”。“定时”设置为“时间(秒),3”,“运行方式”设置为“等待直到完成”,“远端范围”设置为“在终点停止”,如图329所示。 图328“套圈”移动图标属性面板 图329“套圈”要停止的灰色直线 注意,random()为随机函数,“random(1,3,1)”的含义是以1为步长,随机地从1~3中取出一个整数。 (2) 单击常用工具栏中的“运行”按钮,运行程序,可以看到“套圈”随机地套住某一个小动物。 3. 程序“退出”设置 拖放一个“等待”图标到流程线上,命名为“单击”,该“等待”图标属性面板设置“事件”为“单击鼠标”,再拖放一个“计算”图标,命名为“退出”。双击“退出”计算图标,输入“quit()”函数。 4. 保存程序文件 所有图标设置完成,整个程序流程图如图330所示。选择“文件”→“保存”或“另存为”命令保存程序文件。 图330整个程序流程图 任务3指向固定区域内的某点的动画设计 “指向固定区域内的某点”的动画是指在“移动”图标的控制下,被控制对象从一点移动到指定区域内的某点,如图331所示。 图331“指向固定区域内的某点”的动画 实例3: 运动不止的小球动画设计。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“运动不止的小球.a7p”。 视频讲解 (2) 拖放一个“显示”图标到流程线上,命名为“围墙”,双击打开“围墙”显示图标,绘制围墙如图332所示。“围墙”在程序运行过程中是静止不动的,给“围墙”显示图标加“附属计算”图标,输入“Movable:=0”,使“围墙”静止不动。 图332围墙 (3) 导入“小球.gif”图片到流程线上,命名为“小球”,调整小球大小和位置,并设置为“透明”模式,如图333所示。 图333导入小球 2. 动画设计 (1) 拖放一个“移动”图标到流程线上,命名为“小球运动”。 视频讲解 单击常用工具栏中的“运行”按钮,运行程序,弹出“小球运动”移动图标属性面板,如图334所示。选择“指向固定区域内的某点”动画类型,单击“小球”图片作为被控制对象,单击“基点”,设置X、Y的值均为0,并拖动“小球”到“围墙”图片左上角; 单击“终点”,设置X、Y的值均为“100”,并拖动“小球”到“围墙”图片右下角,这时会看到“围墙”内部有一个灰色矩形框,这个矩形框即为“小球”要停止的区域,如图335所示。单击“目标”,设置X、Y的值均为“random(0,100,1)”。“定时”设置为“时间(秒),1”,“运行方式”设置为“等待直到完成”,“远端范围”设置为“在终点停止”。 图334“小球”移动图标属性面板 图335“小球”要停止的矩形区域 (2) 拖放一个“计算”图标到流程线上,命名为“循环”。双击打开“循环”计算图标,输入“GoTo(IconID@"小球运动")”函数。 注意,当程序遇到GoTo函数时,将跳到在IconTitle中指定的图标继续运行。 (3) 单击常用工具栏中的“运行”按钮,运行程序,可以看到“小球”随机地在“围墙”内不停地运动。 3. 保存程序文件 所有图标设置完成,整个程序流程图如图336所示。选择“文件”→“保存”或“另存为”命令保存程序文件。 图336整个程序流程图 任务4指向固定路径的终点的动画设计 “指向固定路径的终点”的动画是指在“移动”图标的控制下,被控制对象从一点沿着绘制的路径移动到该路径终点,如图337所示。 图337“指向固定路径的终点”的动画 实例4: 小黄鸭水中游的动画设计。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“小黄鸭水中游.a7p”。 视频讲解 (2) 将“水心榭.jpg”和“小黄鸭.gif”图片导入到流程线上,分别命名为“水心榭”和“小黄鸭”,调整“小黄鸭”大小和位置,并设置为“透明”模式,如图338所示。给“水心榭”显示图标加“附属计算”图标,输入“Movable:=0”,使“水心榭”静止不动。 图338导入“水心榭”和“小黄鸭” 2. 动画设计 视频讲解 拖放一个“移动”图标到流程线上,命名为“水中游”。单击常用工具栏中的“运行”按钮,运行程序,弹出“水中游”移动图标属性面板,如图339所示。选择“指向固定路径的终点”动画类型,单击“小黄鸭”图片作为被控制对象,会看到“小黄鸭”图片中部有一个“▲”,这是路径的起点,拖动“小黄鸭”图片,创建任意路径如图340所示。双击路径上的小三角,小三角会变为小圆形,折线路径转换为弧线路径,如图341所示。“定时”设置为“速率(sec/in),1”,“运行方式”设置为“等待直到完成”,“移动当”默认为空白。 图339“水中游”移动图标属性面板 图340折线路径 图341弧线路径 3. 保存程序文件 所有图标设置完成,整个程序流程图如图342所示。选择“文件”→“保存”或“另存为”命令保存程序文件。 图342整个程序流程图 实例5: 小球几何运动的动画设计。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“小球几何运动.a7p”。 (2) 将“小球.gif”图片导入到流程线上,命名为“小球”,调整“小球”大小和位置,并设置为“透明”模式,如图343所示。 视频讲解 图343导入“小球” 视频讲解 2. 动画设计 (1) 正圆运动。 拖放一个“移动”图标到流程线上,命名为“正圆运动”。单击常用工具栏中的“运行”按钮,运行程序,弹出“正圆运动”移动图标属性面板,如图344所示。选择“指向固定路径的终点”动画类型,单击“小球”图片作为被控制对象,会看到“小球”图片中部有一个“▲”,这是路径的起点,拖动“小球”图片到另外一点,再拖动“小球”到第三点,如图345所示。 双击路径中间的“小三角”,折线路径和转换为弧线路径,再拖动路径终点的“小三角”与路径起点的“小三角”完全重合,创建正圆路径如图346所示。 (2) 螺旋运动。 拖放一个“等待”图标到流程线上,命名为“单击”,并设置其属性面板“事件”为“单击鼠标”。再拖放一个“移动”图标到流程线上,命名为“螺旋运动”。 图344“正圆运动”移动图标属性面板 图345折线路径 图346正圆路径 单击常用工具栏中的“运行”按钮,运行程序,弹出“螺旋运动”移动图标属性面板,如图347所示。选择“指向固定路径的终点”动画类型,单击“小球”图片作为被控制对象,拖动“小球”图片,创建折线路径如图348所示。双击路径上的小三角,折线路径转换为螺旋路径,如图349所示。 视频讲解 图347“螺旋运动”移动图标属性面板 图348折线路径 视频讲解 (3) 抛物运动。 复制上一个“等待”图标到流程线上,再拖放一个“移动”图标到流程线上,命名为“抛物运动”。单击常用工具栏中的“运行”按钮,运行程序,弹出“水中游”移动图标属性面板,如图350所示。选择“指向固定路径的终点”动画类型,单击“小球”图片作为被控制对象,会看到“小球”图片中部有一个“▲”,拖动该“▲”到演示窗口左侧,再拖动“小球”图片,创建折线路径如图351所示。双击路径靠上边的小三角,折线路径转换为抛物路径,如图352所示。 3. 保存程序文件 所有图标设置完成,整个程序流程图如图353所示。选择“文件”→“保存”或“另存为”命令保存程序文件。 图349螺旋路径 图350“抛物运动”移动图标属性面板 图351折线路径 图352抛物路径 图353整个程序流程图 任务5指向固定路径上的任意点的动画设计 “指向固定路径上的任意点”的动画是指在“移动”图标的控制下,被控制对象从一点沿着绘制的路径移动到该路径上的任意点,如图354所示。 图354“指向固定路径上的任意点”的动画 实例6: 小狗随机停在格子上的动画设计。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“小狗停格子.a7p”。 视频讲解 (2) 将“格子.jpg”和“小狗.gif”图片导入到流程线上,分别命名为“格子”和“小狗”,调整“格子”和“小狗”图片大小和位置,并设置为“透明”模式,如图355所示。 图355导入“格子”和“小狗” 视频讲解 2. 动画设计 拖放一个“移动”图标到流程线上,命名为“小狗移动”。单击常用工具栏中的“运行”按钮,运行程序,弹出“小狗移动”移动图标属性面板,如图356所示。选择“指向固定路径上的任意点”动画类型,单击“小狗”图片作为被控制对象,会看到“小狗”图片中部有一个“▲”,这是路径的起点,拖动“小狗”图片,创建任意路径如图357所示。设置“基点”为“1”,“终点”为“50”,“目标”为“random(1,50,1)”,“定时”设置为“速率(sec/in),1”,“运行方式”设置为“等待直到完成”,“远端范围”设置为“在终点停止”。 图356“水中游”移动图标属性面板 图357创建路径 3. 保存程序文件 所有图标设置完成,整个程序流程图如图358所示。选择“文件”→“保存”或“另存为”命令保存程序文件。 图358整个程序流程图 本项目通过5个任务的学习与实践,帮助读者掌握了动画展示类多媒体课件的设计与制作技术。 项目3.3交互功能类多媒体课件的设计与制作 多媒体课件的交互性是当前流行课件的最大特点之一,Authorware具有双向信息传递方式,即不仅可以向用户演示信息,而且同时允许用户向程序传递一些控制信息,这就是交互性。它改变了用户只能被动接受的局面,用户可以通过键盘、鼠标等来控制程序的运行。Authorware提供了“按钮”“热区域”“热对象”“目标区”“下拉菜单”“条件”“文本输入”“按键”“重试限制”“时间限制”和“事件”11种交互类型。本项目将针对上述11种交互类型,设置12个任务供读者学习与实践,帮助读者掌握交互功能类多媒体课件的设计与制作技术。 掌握交互功能类多媒体课件的设计与制作技术。 任务1交互结构介绍 交互结构是由“交互”图标与附着在其上的一些处理交互结果的图标一起构成的,能够根据用户的响应选择正确的流程分支进行处理,还具有显示交互界面的能力。一个交互结构包括交互方法、响应和结果。 1. 交互结构的构建 拖放一个“交互”图标到流程线上,命名为“交互”,再拖放一个“群组”图标到“交互”图标的右下方,屏幕弹出“交互类型”对话框,其中列出了11种交互类型,如图359所示。 图359“交互类型”对话框 选择其中一种交互类型后,单击“确定”按钮,即创建了具有一个分支的交互结构。继续拖放其他图标至交互图标右下方,可以创建更多的分支。以“按钮”为例的交互结构如图360所示。 图360交互结构 (1) “交互”图标。“交互”图标是交互结构的核心,所有的交互分支都是通过“交互”图标创建的。“交互”图标具有“显示”的功能,可以添加文本、图形、图像及变量、函数和表达式; 还具有布局各交互分支的功能。 (2) 交互类型符号。每个交互类型在流程线上都有唯一的符号,单击这些符号,可以设置对应的交互分支属性。 (3) 响应图标。响应图标就是交互结构中的各响应分支图标,即选择某个交互后,程序对该交互的响应。可以直接作为交互响应图标的有“显示”“擦除”“等待”“群组”“移动”“计算”和“导航图标”等,而“交互”“框架”和“判断”图标需放置在“群组”图标内。另外,“群组”图标支持“空”操作。 (4) 响应分支。响应分支决定各分支响应图标运行完成后按照“重试”“继续”“退出交互”和“返回”等分支向下进行。 2. 交互属性 单击交互结构的交互类型符号,打开该交互分支属性面板,如图361所示。第一个选项卡的名称即为交互响应类型的名称,如图361所示为“按钮”交互。 图361交互分支属性面板 第二个选项卡名称为“响应”,对于任何交互类型都是一致的,如图362所示。 图362交互分支属性面板“响应”选项卡 (1) 范围: 选中“永久”选项后,表示当前交互分支在整个程序或程序段运行期间都是可用的。 (2) 激活条件: 用于设置响应的激活条件,条件可以使用常量、变量或表达式,只有当结果为“真(True)”时,响应才起作用。 (3) 擦除: 确定分支响应图标运行完毕后,是否擦除该响应图标在演示窗口中显示的内容,有以下4种方式。 ① 在下一次输入之后: 响应图标运行完毕后,不是立即擦除显示内容,而是等用户选择其他交互后再擦除,这是默认选项。 ② 在下一次输入之前: 响应图标运行完毕后,立即擦除显示内容。 ③ 在退出时: 响应图标运行的内容将一直保留在屏幕上,直到退出交互时才擦除显示内容。 ④ 不擦除: 响应图标运行的内容将一直保留在屏幕上,直到使用一个“擦除”图标将其擦除。 (4) 分支: 决定分支完成后程序的走向,响应分支决定了各分支响应图标运行完成后的走向,主要有“重试”“继续”“退出交互”和“返回”四种,如图363所示。 图363响应分支 ① 重试: 分支运行完毕后,流程返回交互图标,等待下一次交互输入。 ② 继续: 分支运行完毕后,流程退回原处,继续判断下一个响应。 ③ 退出交互: 分支运行完毕后,流程退出该交互,继续运行该交互之后的内容。 ④ 返回: 只有当响应分支选定“永久”后,才可以设置该选项。分支运行完毕后,流程返回到该响应图标,可以继续运行。 (5) 状态: 用于跟踪用户响应并判断和记录用户正确和错误的次数。 ① 不判断: 该选项为默认设置,不跟踪用户响应。 ② 正确响应: 选择此项,响应图标名称前会出现“+”标志,程序跟踪用户的正确响应并对正确响应次数进行累加。 ③ 错误响应: 选择此项,响应图标名称前会出现“-”标志,程序跟踪用户的错误响应并对错误响应次数进行累加。 (6) 计分: 用于记录用户的响应得分,可以输入数值或表达式。 任务2“按钮”交互设计 “按钮”交互是最常用的交互类型,也是最基本的交互功能之一。 实例1: 升降国旗。 要求: 单击“升旗”按钮,国旗上升; 单击“降旗”按钮,国旗下降。 操作步骤如下。 1. 基本准备 视频讲解 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“升降国旗.a7p”。 (2) 将“操场.jpg”和“国旗.gif”图片导入到流程线上,分别命名为“操场”和“国旗”,调整“操场”和“国旗”图片大小和摆放位置,并设置“透明”模式,如图364所示。 图364导入图片 视频讲解 2. 交互设计 (1) 拖放一个“计算”图标到流程线,命名为“赋初值”,即x:=1,y:=0。 (2) 拖放一个“交互”图标到流程线上,命名为“升降国旗”。 (3) 拖动一个“群组”图标到交互图标右下方,选择“按钮”交互类型,命名为“升旗”,打开该“群组”图标,拖放一个“移动”图标到流程线上,命名为“向上”,设置“向上”移动图标,选择“指向固定点”的动画类型将“国旗”从旗杆底部移动至顶端。再拖放一个“计算”图标到流程线上,命名为“修改变量1”,即: x:=0,y:=1。设置“升旗”交互图标属性中“激活条件”为“x=1”,如图365所示。 图365设置“升旗”交互图标属性面板中的“激活条件” (4) 同理,设置一个“降旗”群组图标,使“国旗”从顶端降下来,修改变量,x:=1,y:=0。设置“降旗”交互图标属性中“激活条件”为“y=1”,如图366所示。 图366设置“降旗”交互图标属性面板中的“激活条件” (5) 设置“退出”按钮。拖放一个“计算”图标到“降旗”群组图标的右侧,命名为“退出”,在该“计算”图标编辑窗口输入“quit()”函数。 (6) 双击“升降国旗”交互图标,打开演示窗口,可以调整“升旗”“降旗”和“退出”按钮的位置。 整个程序流程结构如图367所示。 图367程序流程结构 运行并保存程序。最终运行效果如图368所示。 图368运行效果 视频讲解 3. 自定义按钮 本应用实例中使用的按钮是软件系统本身提供的,但是在多媒体课件的制作过程中,往往使用或设计具有特色的按钮,例如使用自己设计的按钮,并且使按钮按下时有声音,有外观图形化等特点。 (1) 使用软件系统提供的其他按钮。 打开“升降国旗.a7p”文件,单击“升旗”交互类型符号,弹出“属性”面板,单击“属性”面板中名称为“按钮...”的按钮,弹出“按钮”对话框,如图369所示。选择“标准Windows 3.1 按钮”,单击“确定”按钮。 图369“按钮”对话框 同理设置“降旗”和“退出”按钮也为“标准Windows 3.1 按钮”,运行程序效果如图370所示。 图370运行程序效果 (2) 使用自己设计的按钮。 打开“升降国旗.a7p”文件,单击“升旗”交互类型符号,弹出“属性”面板,单击“属性”面板中名称为“按钮...”的按钮,弹出“按钮”对话框,如图369所示。单击“添加”按钮,弹出“按钮编辑”对话框,如图371所示。 视频讲解 图371“按钮编辑”对话框 选择“常规”项中的“未按”,导入“按钮1.gif”图片,“标签”设置为“显示标签”; 在选择“常规”项中的“在上”,导入“按钮2.gif”图片,“标签”设置为“显示标签”,单击“确定”按钮,返回到“按钮”对话框,再单击“确定”按钮即可。 同理,使用“按钮3.gif”和“按钮4.gif”设置“降旗”按钮; 使用“按钮5.gif”和“按钮6.gif”设置“退出”按钮。 双击“升降国旗”交互图标,打开演示窗口,可以调整“升旗”“降旗”和“退出”按钮的位置。 将自定义按钮的“升降国旗”程序另存为“升降国旗(自定义按钮).a7p”。运行效果如图372所示。 图372运行效果 任务3“热区域”交互设计 “热区域”是指在演示窗口中定义的一个矩形区域,当用户单击、双击或鼠标指针处于指定区域内时,程序就会执行相应的交互分支。 实例2: 学习唐宋八大家。 要求: 把鼠标放在图片上,在图片下方显示其姓名; 单击该图片,在图片下方显示其简介。 操作步骤如下。 视频讲解 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“唐宋八大家.a7p”。 (2) 拖放一个“显示”图标到流程线上,命名为“背景”。打开该“显示”图标,输入文本“唐宋八大家”,设置字体为“仿宋”,字号为“25磅”,居中对齐。 (3) 将唐宋八大家图片导入到流程线上,分别命名为“韩愈”“柳宗元”“欧阳修”“苏洵”“苏轼”“苏辙”“王安石”和“曾巩”,调整所有图片大小和摆放位置等,如图373所示。 图373导入图片 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“唐宋八大家”。 (2) 拖动一个“显示”图标到交互图标右下方,选择“热区域”交互类型,命名为“韩愈姓名”,打开该“显示”图标,输入“韩愈”。单击常用工具栏中的“运行”按钮,运行程序,单击“韩愈姓名”显示图标上方的“热区域”符号,调整演示窗口中“韩愈姓名”热区域与“韩愈”图片大小相同,如图374所示。在“韩愈姓名”交互图标属性面板中“匹配”选择“指针处于指定区域内”,“鼠标”选择“”,如图375所示。 再次弹出“运行”按钮,运行程序,将鼠标指针放在韩愈图片上面,会显示文字“韩愈”,将文字“韩愈”拖放到韩愈图片下方。 视频讲解 图374演示窗口 图375“韩愈姓名”交互图标属性面板 (3) 再拖放一个“显示”图标到“韩愈姓名”显示图标的右侧,命名为“韩愈简介”,打开该“显示”图标,输入“韩愈(768 —824年),字退之,是唐代文学家、哲学家、思想家,河阳(今河南省焦作孟州市)人。祖籍河北昌黎,世称韩昌黎,晚年任吏部侍郎,又称韩吏部。谥号“文”,又称韩文公。他与柳宗元同为唐代古文运动的倡导者,主张学习先秦两汉的散文语言,破骈为散,扩大文言文的表达功能。”。单击常用工具栏中的“运行”按钮,运行程序,单击“韩愈简介”显示图标上方的“热区域”符号,调整演示窗口中“韩愈简介”热区域与“韩愈”图片大小相同。在“韩愈简介”交互图标属性面板中“匹配”选择“单击”,如图376所示。 再次单击“运行”按钮,运行程序,单击韩愈图片,会显示韩愈的简介内容,将该内容拖放到韩愈图片下方。 图376“韩愈简介”交互图标属性面板 (4) 同理,设置“柳宗元”“欧阳修”“苏洵”“苏轼”“苏辙”“王安石”和“曾巩”的姓名和简介。双击“唐宋八大家”交互图标,打开其演示窗口,再按住Shift键,依次单击“韩愈”“柳宗元”“欧阳修”“苏洵”“苏轼”“苏辙”“王安石”和“曾巩”等显示图标,显示热区域与图片的对应关系如图377所示。 图377热区域与图片的对应关系 (5) 单击常用工具栏中的“运行”按钮,运行程序,发现将鼠标放在某图片上,则在其下方显示姓名,单击某图片,则显示其简介,同时也发现将鼠标放在某图片上或单击某图片后,再将鼠标移动到空白区域,显示内容不消失。要想将显示内容消失,则拖放一个“群组”图标到流程线上,命名为“取消显示”,并调整该“热区域”大小与整个演示窗口大小相同。在“取消显示”交互图标属性面板中“匹配”选择“指针处于指定区域内”,“鼠标”选择“N/A”,如图378所示。 图378“取消显示”交互图标属性面板 注意,交互结构中响应图标的优先级: 越靠近交互图标,其优先级越高。 双击“唐宋八大家”交互图标,打开其演示窗口,可以看到设置的所有热区域,如图379所示。 图379设置的所有热区域 (6) 设置“退出”按钮。拖放一个“计算”图标到所有响应图标的最右侧,命名为“退出”,在该“计算”图标编辑窗口输入“quit()”函数。在其属性面板中选择“类型”为“按钮”,并调整按钮的大小和位置。 (7) 整个程序流程结构如图380所示。 图380程序流程结构 (8) 运行并保存程序。最终运行效果如图381所示。 图381运行效果 任务4“热对象”交互设计 “热区域”是一个矩形区域,“热区域响应”与图片显示无关,图片只是起到标识位置的作用; 而“热对象”则是指在演示窗口中显示的一个实实在在的内容,可以是任意形状,用户通过单击、双击或指针在对象上激活相应的交互分支。 实例3: 学习社会主义核心价值观。 要求: 通过单击鼠标选择“社会主义核心价值观”的内容,将其进行归类。 操作步骤如下。 1. 基本准备 视频讲解 (1) 新建一文件,设置演示窗口大小为800×600px,背景色设置为黄色,并保存,命名为“社会主义核心价值观.a7p”。 (2) 拖放一个“显示”图标到流程线上,命名为“背景”,打开该“显示”图标,输入“社会主义核心价值观”“国家层面的价值目标”“社会层面的价值取向”和“公民个人层面的价值准则”,按适合演示窗口设置字号,“字体”设置为楷体,颜色设置为红色,“模式”为透明。绘制三个红色矩形框,如图382所示。 图382背景界面 (3) 拖放一个“群组”图标到流程线上,命名为“社会主义核心价值观的内容”。打开该“群组”图标,导入“富强.gif”“民主.gif”“文明.gif”“和谐.gif”“自由.gif”“平等.gif”“公正.gif”“法治.gif”“爱国.gif”“敬业.gif”“诚信.gif”和“友善.gif”图片,并以图片文件名称命名,删掉扩展名,调整各图片大小和位置,“模式”设置为“透明”,如图383所示。 图383导入图片 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“归类”。 视频讲解 (2) 拖动一个“移动”图标到交互图标右下方,选择“热对象”交互类型,命名为“移动富强”。单击常用工具栏中的“运行”按钮,运行程序,单击“移动富强”移动图标上方的“热对象”符号,设置“移动富强”交互图标属性面板,单击“富强”图片,将“富强”图片作为热对象,“匹配”选择“单击”,如图384所示。 图384“移动富强”交互图标属性面板 (3) 单击“移动富强”移动图标,设置“移动富强”移动图标属性面板,“类型”选择“指向固定点”,单击“富强”图片,将“富强”图片作为移动的控制对象,并将“富强”图片拖动至“国家层面的价值目标”上方的矩形框内,如图385所示。 图385设置移动图标属性 (4) 同理,设置“民主”“文明”“和谐”“自由”“平等”“公正”“法治”“爱国”“敬业”“诚信”和“友善”等图片的移动归类。 (5) 整个程序流程结构如图386所示。 图386程序流程结构 (6) 运行并保存程序。最终运行效果如图387所示。 图387运行效果 任务5“目标区”交互设计 “目标区”也是一个矩形区域,目标区交互是一种基于鼠标事件的交互响应方式。在该交互响应中,需要用户先创建一个目标区,然后,当用鼠标将某个显示对象拖动到目标区域后,即可实现目标区域响应。 视频讲解 实例4: 装配“利用KMnO4制取氧气”的实验装置。 要求: 按实验要求顺序,通过鼠标拖动实验仪器到实验桌面上方的相应位置,位置正确,则停留在此; 位置不正确,则返回到原来位置。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“装配利用KMnO4制取氧气的实验装置.a7p”。 (2) 拖放一个“显示”图标到流程线上,命名为“背景”,打开“背景”显示图标,输入“实验仪器准备区”和“装配实验装置区”,并按适合演示窗口设置字号,“字体”设置为楷体,颜色设置为红色,并绘制红色分隔线。然后导入“实验桌面”和“参考图”图片,并调整图片大小和位置,如图388所示。 图388背景界面 (3) 拖放一个“群组”图标至流程线上,命名为“实验仪器”。打开该“群组”图标,导入“铁架台”“酒精灯”“试管”“导管”“水槽”和“集气瓶”图片,将所有图片的“显示模式”设置为“透明”,并在演示窗口的上半部分放置所有图片。导入实验仪器的效果如图389所示。 图389导入实验仪器效果图 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“装配实验装置”。 (2) 拖放一个“群组”图标到“装配实验装置”交互图标右下方,选择“目标区”交互类型,命名为“铁架台正确位置”。单击常用工具栏中的“运行”按钮,运行程序,自动弹出“铁架台正确位置”的目标区属性面板和一个虚线框区域(即目标区)。根据提示,单击“铁架台”图片,将“铁架台”作为目标对象,可以看到“目标区”移至“铁架台”图片上,调整该目标区大小与铁架台图片大小相同。再根据提示,拖动对象到目标位置(即演示窗口下半部分的“参考图”相应位置),如图390所示。设置“铁架台的正确位置”的目标区属性,“放下”选择“在中心定位”,如图391所示。 视频讲解 图390设置“铁架台正确位置”目标区 图391“双桥区正确位置”交互图标属性面板 (3) 拖放一个“群组”图标至“铁架台正确位置” 群组图标的右侧,命名为“铁架台错误位置”,运行程序,自动弹出“铁架台错误位置”的目标区属性面板和一个虚线框区域(即目标区)。根据提示,单击“铁架台”图片,将“铁架台”作为目标对象,可以看到“目标区”移至“铁架台”图片上,调整该目标区大小与演示窗口大小相同,如图392所示。设置“铁架台错误位置”的目标区属性,“放下”选择“返回”,“铁架台错误位置”交互图标属性面板如图393所示。 图392设置“铁架台错误位置”目标区 图393“铁架台错误位置”交互图标属性面板 (4) 同理,设置“酒精灯”“试管”“导管”“水槽”和“集气瓶”的正确位置和错误位置的目标区,并删除“背景”显示图标中的“参考图”图片。 (5) 双击“装配实验装置”交互图标,打开其演示窗口,如图394所示。 图394“装配实验装置”交互图标演示窗口 图中显示“铁架台错误位置”“酒精灯错误位置”“试管错误位置”“导管错误位置”“水槽错误位置”和“集气瓶错误位置”是重合的,可以使用一个错误位置响应图标实现上述6个错误位置的响应。删除前5个实验仪器的错误位置的响应图标,只保留“集气瓶错误位置”的响应图标,并将其改名为“所有错误位置”。设置“所有的错误位置”交互图标属性面板,选中“目标对象”下方的“允许任何对象”复选框,发现“目标对象”后面显示为灰色空白,表示本响应图标对前面的所有目标对象都起作用,如图395所示。双击“装配实验装置”交互图标,打开其演示窗口,如图396所示。 图395“所有错误位置”交互图标属性面板 图396删除错误位置响应图标后“名称入位”交互图标演示窗口 (6) 整个程序流程结构如图397所示。 图397程序流程结构 (7) 运行并保存程序。最终运行效果如图398所示。 图398运行效果 任务6“下拉菜单”交互设计 菜单是计算机软件提供的经常使用的一种交互工具。以Windows为例,在标题栏下方就是菜单栏,选择其中某项后即可弹出下拉式菜单,通过下拉菜单可以实现更多的功能。 实例5: 下拉菜单设计。 要求: 利用“下拉菜单”交互将项目3.1中顺序运行方式多媒体课件和项目3.2中动画展示类多媒体课件的实例进行综合制作。 操作步骤如下。 视频讲解 1. 基本准备 (1) 新建一文件,设置演示窗口大小为800×600px,并保存,命名为“下拉菜单设计.a7p”。 (2) 拖放一个“显示”图标到流程线上,命名为“背景”,打开该“显示”图标,输入“多媒体课件展示”,并按适合演示窗口设置字号,字体设置为楷体、加粗,颜色设置为红色。导入“多媒体课件标识”图片,并调整该图片大小和位置,如图399所示。 图399背景界面 (3) 拖放一个“等待”图标和一个“擦除”图标到流畅线上,分别命名为“单击”和“擦除背景”。设置“单击”等待图标为“单击鼠标”“不显示按钮”; 设置“擦除背景”擦除图标为“擦除背景显示图标”“无特效”。 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“顺序运行方式多媒体课件”。 (2) 拖放一个“群组”图标到交互图标右下方,选择“下拉菜单”交互类型,命名为“顺序浏览素描画”。将项目3.1中顺序运行方式多媒体课件“顺序浏览素描画”的程序复制到该“群组”图标中,并进行删除“退出”程序的处理。单击“顺序浏览素描画”群组图标上方的“下拉菜单”符号,设置“顺序浏览素描画”交互图标属性面板“响应”选项卡,选中“永久”复选框,“分支”选择“返回”,如图3100所示。 图3100“顺序浏览素描画”交互图标属性面板 (3) 再拖放一个“交互”图标到流程线上,命名为“动画类多媒体课件”。拖放5个“群组”图标到交互图标右下方,选择“下拉菜单”交互类型,分别命名为“赛车动画设计”“随机套圈”“小黄鸭水中游”“小球几何运动”和“小狗停格子”。将项目3.2中动画类多媒体课件“赛车动画设计”“随机套圈”“小黄鸭水中游”“小球几何运动”和“小狗停格子”的程序复制到相应“群组”图标中,并进行删除“退出”程序的处理。设置上述5个交互响应图标属性面板“响应”选项卡,均选中“永久”复选框,“分支”选择“返回”。单击常用工具栏中的“运行”按钮,运行程序,运行效果如图3101所示。 视频讲解 图3101运行效果 (4) 制作下拉菜单命令项之间的分隔线。在“动画类多媒体课件”交互结构中的“随机套圈”右侧拖放一个“群组”图标,命名为“”或“(”均可。单击常用工具栏中的“运行”按钮,运行程序,添加分隔线运行效果如图3102所示。 图3102添加分隔线运行效果 (5) 整个程序流程结构如图3103所示。 图3103程序流程结构 (6) 运行并保存程序。 任务7“文本输入”交互设计 “文本输入”用来创建一个用户可以输入字符的区域,用户按回车键结束输入,程序按规定的流程继续执行,常用于设置输入密码和回答问题等。 实例6: 为“ 装配利用KMnO4制取氧气的实验装置 .a7p”程序设置“登录密码”。 要求: 若密码输入正确,向下运行该程序,否则,一直提示重新输入正确的密码,直至输入正确为止。 操作步骤如下。 1. 基本准备 视频讲解 打开“装配利用KMnO4制取氧气的实验装置.a7p”程序,并另存为“登录密码.a7p”。 2. 交互设计 (1) 拖放一个“交互”图标到流程线的最上端,命名为“密码”。 (2) 拖放一个“群组”图标到交互图标右下方,选择“文本输入”交互类型,命名为“123”。用户只有从键盘上输入“123”并按回车键时,才会进入该分支执行,则“123”即为该程序的密码。单击常用工具栏中的“运行”按钮,运行程序,单击“123”群组图标上方的“文本输入”类型符号,设置“123”交互图标属性面板“响应”选项卡,“分支”设置为“退出交互”。双击“密码”交互图标,在其演示窗口中输入“请输入登录密码”提示信息,如图3104所示。 图3104输入“文本输入”提示信息 (3) 打开“123”群组图标,拖放一个“擦除”图标到流程线上,命名为“擦除密码”,设置擦除提示信息“请输入登录密码”和输入的密码“123”。再拖放一个“显示”图标到流程线上,命名为“欢迎”,其中输入“欢迎您使用本多媒体课件!希望本课件能够给您带来愉悦的心情和事半功倍的学习效果!”。最后再拖放一个“等待”图标到流程线上,命名为“等待”,设置为“单击鼠标”“按任意键”、不显示按钮,如图3105所示。 (4) 拖放一个“显示”图标至“123”群组图标右侧,命名为“*”(*为通配符,代表任意多个字符),在其中输入“对不起!您所输入的密码错误,请重新输入正确的密码!”。把该“分支”设置为“重试”。 (5) 整个程序流程结构如图3106所示。 (6) 运行并保存程序。 图3105设置“123”群组图标 图3106程序流程结构 任务8“重试限制”交互设计 “重试限制”限制用户与当前程序交互的尝试次数,当达到规定次数时,就会执行指定的分支,常用它来制作测试题或密码重试次数。 视频讲解 实例7: 为“登录密码.a7p”程序设置“输入密码次数”。 要求: 密码最多输入3次。 操作步骤如下。 1. 基本准备 打开“登录密码.a7p”程序,并另存为“重试限制.a7p”。 2. 交互设计 (1) 拖放一个“群组”图标到“*”响应图标的右侧,命名为“重试3次”,选择“重试限制”交互响应类型,并设置“重试限制”响应属性“最大限制”为“3”,如图3107所示。 图3107“重试限制”响应属性面板 (2) 打开“重试3次”群组图标,拖曳一个“擦除”图标到流程线上,命名为“擦除错误密码提示”,设置擦除“请输入登录密码”和所输入的密码以及错误提示信息“对不起!您所输入的密码错误,请重新输入正确的密码!”等。 (3) 继续拖放一个“显示”图标至流程线上,命名为“重试提示”,在其中输入“您已经尝试三次!3s后退出登录!”。 (4) 拖曳一个“等待”图标到流程线上,命名为“3s”,设置“等待”图标属性,“时限”为3s。最后,再拖曳一个“计算”图标至流程线上,命名为“退出”,其中输入函数“quit()”。 (5) 整个程序流程结构如图3108所示。 图3108程序流程结构 (6) 运行并保存程序。 任务9“时间限制”交互设计 视频讲解 “时间限制”是指当用户在特定时间内未能实现特定的交互,这个响应可使程序按指定的流程继续执行。 实例8: 为“登录密码.a7p”程序设置“输入密码时间”。 要求: 密码输入时间最多10s。 操作步骤如下。 1. 基本准备 打开“登录密码.a7p”程序,并另存为“登录密码1.a7p”。 2. 交互设计 (1) 拖放一个“群组”图标至“*”响应图标的右侧,命名为“10s”,选择“时间限制”交互响应类型,并设置“时间限制”响应属性“时限”为10s,如图3109所示。 图3109“时间限制”响应属性面板 (2) 打开“10s”群组图标,拖放一个“擦除”图标到流程线上,命名为“擦除错误密码提示”,设置擦除“请输入登录密码”和所输入的密码以及错误提示信息“对不起!您所输入的密码错误,请重新输入正确的密码!”等。 (3) 继续拖放一个“显示”图标至流程线上,命名为“时间到提示”,在其中输入“您尝试输入已达10秒!3秒钟后退出登录!”。 (4) 拖曳一个“等待”图标到流程线上,命名为“3s”,设置“等待”图标属性,“时限”为3s。最后,再拖曳一个“计算”图标至流程线上,命名为“退出”,其中输入函数“quit()”。 (5) 整个程序流程结构如图3110所示。 图3110程序流程结构 (6) 运行并保存程序。 任务10“条件”交互设计 “条件”交互是一种根据用户为该交互设置的条件进行自动匹配的交互类型,随时检测设置的条件是否成立,如果条件成立,则执行该条件交互分支下的流程,否则不执行该条件交互分支。条件可以是变量、函数或表达式等。 实例9: 计算100以内两个随机整数的和。 要求: 根据条件判断,如果输入结果正确,给出“√”,如果输入结果错误,给出“×”。 操作步骤如下。 图3111设置变量 1. 基本准备 视频讲解 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“100以内两个随机整数的和.a7p”。 (2) 拖放一个“计算”图标到流程线上,命名为“设定变量”,设置内容如图3111所示。 (3) 拖放一个“显示”图标到流程线上,命名为“题目”,设置内容如图3112所示。 图3112设置“题目”显示图标内容 视频讲解 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“计算答题”。 (2) 拖放一个“群组”图标到交互图标右下方,选择“文本输入”交互类型,命名为“*”。单击“*”群组图标上方的“文本输入”符号,设置“*”交互图标属性面板,并设置该“分支”属性为“继续”,目的是接收用户输入后将结果送交互响应进行判断。在“*”群组图标中放置一个“计算”图标,命名为“接收数据”,其中内容为“sum:=NumEntry”。系统变量“NumEntry”中保存了用户在文本输入框中输入的数值。此表达式的作用是将用户算出的答案保存在自定义变量“sum”中,留待以后与标准答案进行比较。单击常用工具栏中的“运行”按钮,运行程序,再按住Shift键,双击“计算答题”交互图标,将“文本输入框”的位置调整到加法算式的“=”后面,再双击“文本输入框”,打开“交互作用文本字段属性”对话框,在“交互作用”选项卡中设置取消“输入标记”,在“文本”选项卡中设置模式为“透明”,如图3113所示。 图3113“交互作用文本字段属性”对话框 (3) 拖放两个“群组”图标至“*”群组图标的右侧,选择“条件”交互响应类型,分别命名为“sum<>x+y”和“sum=x+y”,响应图标的名称即为“响应条件”,把“分支”均设置为“重试”,设置“sum<>x+y”交互图标属性面板“条件”选项卡中“自动”为“关”,“sum=x+y” 交互图标属性面板“条件”选项卡中“自动”为“为真”,如图3114所示。 图3114“交互图标属性”面板 其中: ① 条件: 定义了分支的响应条件。 ② 自动: 定义了条件自动判断的方式,它有以下3个选项。  关: 不进行条件的自动判断。  为真: 当条件成立时就执行分支。  为假: 当条件由“假”变化为“真”时就执行分支。 (4) 打开“sum<>x+y”群组图标,拖放一个“显示”图标,命名为“叉号”。在“叉号”显示图标中导入红色“叉号”图片。打开“sum=x+y”群组图标,拖放一个“显示”图标,命名为“对号”。在“对号”显示图标中导入红色“对号”图片。再放置一个“等待”图标,命名为“按任意键继续”,并设置该图标“事件”属性为“按任意键”。最后拖放一个“计算”图标,命名为“继续出题”,内容为“GoTo(IconID@"设定变量")”。 (5) 整个程序流程结构如图3115所示。 图3115程序流程结构 (6) 运行并保存程序。最终运行效果如图3116所示。 图3116运行效果 任务11“按键”交互设计 键盘是计算机最主要的输入工具之一,是人机交互的重要途径。“按键”交互是指对用户敲击键盘的事件进行响应,控制程序的执行。 实例10: 移动棋子。 要求: 利用4个方向键←↑→↓控制棋子在棋盘中移动,按一次键移动一个格子。 操作步骤如下。 视频讲解 1. 基本准备 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“移动棋子.a7p”。 (2) 导入“棋盘.jpg”和“棋子.gif”图片到流程线上,分别命名为“棋盘”和“棋子”,调整两图片位置和大小,并将“棋子”设置为“透明”模式,如图3117所示。 图3117导入图片 (3) 拖放一个“计算”图标到流程线上,命名为“赋初值”,打开该“计算”图标分两行输入“x:=1”和“y:=1”。 视频讲解 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“移动棋子”。 (2) 拖放4个“计算”图标到交互图标右下方,均选择“按键”交互类型,分别命名为leftarrow、rightarrow、uparrow和downarrow。再拖放一个“移动”图标到流程线上,选择“条件”交互类型,命名为TRUE。 (3) 设置leftarrow、rightarrow、uparrow和downarrow交互图标属性: leftarrow响应的激活条件为x>1,rightarrow响应的激活条件为x<4,uparrow响应的激活条件为y>1,downarrow响应的激活条件为y<4,“分支”均设置为“继续”。TRUE交互图标属性“分支”也设置为“继续”。程序流程结构如图3118所示。 图3118程序流程结构 (4) 打开leftarrow、rightarrow、uparrow和downarrow计算图标,在其计算窗口中分别输入x:=x-1、x:=x+1、y:=y-1和y:=y+1。 (5) 单击TRUE移动图标设置其属性,如图3119所示。棋子移动区域如图3120所示。 图3119TRUE移动图标属性面板 图3120棋子移动区域 (6) 运行并保存程序。 任务12“事件”交互设计 “事件”交互主要用于对程序流程中使用ActiveX外部控件的Event事件进行响应。这些外部控件可以是通过“插入”→“控件”命令插入的ActiveX控件,也可以是通过“插入”→“媒体”命令插入的GIF动画、Flash动画或QuickTime动画等。不同的外部控件有着不同的Event事件,通过对这些事件的监测,就可以实现不同的响应。 实例11: 播放视频。 要求: 通过ActiveX控件打开Windows Media Player播放器,播放视频。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“播放视频.a7p”。 (2) 准备一个视频文件“视频.mp4”。 注意,视频文件必须和程序文件放在同一目录下,才可以顺利播放。 (3) 选择“插入”→“控件”→ActiveX命令,弹出“选择ActiveX控件”对话框,选择Windows Media Player控件,如图3121所示。单击OK按钮,自动弹出“ActiveX控件属性”对话框,设置URL项为“视频.mp4”,控件名称为“视频播放器”,如图3122所示。 图3121“选择ActiveX控件”对话框 图3122“ActiveX控件属性”对话框 图3123程序流程结构 视频讲解 2. 交互设计 (1) 拖放一个“交互”图标到流程线上,命名为“视频”。 (2) 拖放一个“计算”图标到交互图标右下方,选择“事件”交互类型,命名为“播放”。打开“播放”计算图标,分两行输入“file:="视频.mp4"”和“SetSpriteProperty(@"视频播放器", #source, file)”。 (3) 整个程序流程结构如图3123所示。 (4) 运行并保存程序。最终运行效果如图3124所示。 图3124运行效果 本项目通过12个任务的学习与实践,帮助读者掌握交互功能类多媒体课件的设计与制作技术。 项目3.4结构化交互型多媒体课件的设计与制作 结构化交互型多媒体课件主要通过“判断”图标和“框架”图标根据设置的某种条件自动执行或在程序内容之间灵活导航等,为设计带来更大的灵活性。本项目将通过2个任务供读者学习与实践,帮助读者掌握结构化交互型多媒体课件的设计与制作技术。 掌握结构化交互型多媒体课件的设计与制作技术。 任务1“判断”结构设计 “判断”结构是通过“判断”图标来实现的。“判断”图标又称为决策图标,是Authorware提供给用户制作分支流程、循环功能的图标,可以指定执行分支的次数和方法,程序自动决定执行流程。 实例1: 随机测试系统。 要求: 由系统随机出5道题,答题后将自动显示“及格”或“不及格”两种提示及所得成绩。 操作步骤如下。 视频讲解 1. 基本准备 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“测试系统.a7p”。 (2) 拖放一个“群组”图标到流程线上,命名为“初始化”。打开该“群组”图标,拖放两个“显示”图标,分别命名为“标题”和“开始”, 图3125“初始化”群组图标 内部流程结构 分别输入“请您准备好,开始测试!”和“请您输入正确结果: ”,设置字体为“仿宋”,字号为“24磅”,颜色为“红色”。在“标题”和“开始”显示图标之间拖放一个“等待”图标,命名为“等待”,设置为“按任意键”和“时限”为2秒。再拖放一个“擦除”图标到流程线上,命名为“擦除标题”,设置将“标题”内容擦除。再拖放一个“计算”图标到流程线上,命名为“初始值”,该“计算”图标的内容为“s:=0”。“初始化”群组图标内部流程结构如图3125所示。 视频讲解 2. 结构设计 (1) 拖放一个“判断”图标到流程线上,命名为“出题”。设置“出题”判断图标属性,“重复”选择“固定的循环次数”,输入5; “分支”选择“在未执行过的路径中随机选择”,如图3126所示。 图3126“出题”判断图标属性面板 (2) 拖动5个“群组”图标到“出题”判断图标右下方,分别命名为“题目1”“题目2”“题目3”“题目4”和“题目5”。 图3127“题目1”的 二级流程结构 (3) 打开该“题目1”群组图标,拖放一个“显示”图标到流程线上,命名为“题目1”,在该“显示”图标中输入“4×9=”。拖放一个“交互”图标到流程线上,命名为“4×9”。再拖放一个“群组”图标到“4×9”交互图标的右下方,选择“文本输入”交互类型,命名为“36”,设置其属性“分支”为“退出交互”,“擦除”为“不擦除”,“状态”为“正确响应”,“计分”为“5”。再拖放一个“群组”图标到“36”群组图标的右侧,命名为“*”,其属性设置“状态”为“错误响应”,“计分”为“0”,其他与“36”交互图标属性设置一致。单击常用工具栏中的“运行”按钮,运行程序,再按住Shift键,双击“题目1”交互图标,将文本输入框移至题目表达式的右侧,设置不显示“输入标记”。“题目1”的二级流程结构如图3127所示。 (4) 同理设置其他题目,这里不再赘述。 (5) 拖放一个“擦除”图标到主流程线上,命名为“擦除开始”,设置将“开始”显示图标内容擦除。 (6) 拖放一个“计算”图标到主流程线上,命名为“计算成绩”,在其中输入“s:=TotalScore”。 (7) 拖放一个“判断”图标到主流程线上,命名为“判断”。设置“判断”图标属性,“重复”选择“不重复”; “分支”选择“计算分支结构”,“分支”的计算条件为“Test(s>15,1,2)”,用于判断所得成绩是否大于15,作为及格的界限,如果“及格”则进入第一分支,如果“不及格”则进入第二分支,如图3128所示。 图3128“判断”图标属性面板 (8) 拖放两个“群组”图标到“判断”图标右下方,分别命名为“及格”和“不及格”,在第一分支“及格”群组图标中设置一个“显示”图标,命名为“及格成绩”,输入“成绩{s},祝贺您!”。在第二分支“不及格”群组图标中也设置一个“显示”图标,命名为“不及格成绩”,输入“成绩{s},再努力!”。为了使“显示”图标的内容停显在演示窗口中不立即消失,在两个“群组”图标中各设置一个“等待”图标,分别命名为“等待1”和“等待2”,均设置为“单击鼠标”,不显示按钮。 (9) 最后设置一个“退出”计算图标,内容为“quit()”。 (10) 整个程序流程结构如图3129所示。 图3129程序流程结构 (11) 运行并保存程序。 任务2“框架”结构设计 “框架”图标是Authorware中最特殊的图标,总是与“导航”图标配合使用,在“框架”图标内部含有8个“导航”图标。一个“框架”图标可以包括多个其他的图标,这些图标被称为“页”。每页都是相对独立的部分,页与页之间靠“导航”图标来发生联系。 实例2: 鲜花欣赏。 要求: 通过导航按钮控制欣赏各种鲜花。 操作步骤如下。 1. 基本准备 (1) 新建一文件,设置演示窗口大小为640×480px,并保存,命名为“鲜花欣赏.a7p”。 (2) 拖放一个“显示”图标到流程线上,命名为“背景”,输入“鲜花欣赏”,设置合适的字体、字号和颜色。再拖放一个“等待”图标,命名为“单击”,设置为“单击鼠标”。 视频讲解 2. 结构设计 (1) 拖曳一个“框架”图标至流程线上,命名为“鲜花”,再拖放10个“显示”图标到“鲜花”框架图标的右下方,分别命名为“鲜花1”“鲜花2”……“鲜花9”和“鲜花10”,并导入相应图片。程序流程结构如图3130所示。 图3130程序流程结构 (2) 运行并保存程序。运行效果如图3131所示。 图3131运行效果 本项目通过2个任务的学习与实践,帮助读者掌握结构化交互型多媒体课件的设计与制作技术。 项目3.5交互型多媒体课件的打包与发布 在程序设计、调试完成后,需要将程序发布,使程序的运行脱离Authorware 7.0的开发环境,一来为方便制作副本,二来也可将程序加密,保护知识产权。Authorware支持两种发布方式,一种是发布成可执行文件,即“打包”,支持在Windows下运行(可以以“光盘”为媒介传播); 二是可以发布成为网络支持的形式,可以在网络环境下运行。本项目将通过2个任务供读者学习与实践,帮助读者掌握交互型多媒体课件的打包与发布方法。 掌握交互型多媒体课件的打包与发布方法。 任务1打包 视频讲解 打包即对源程序进行封装,封装后将生成在Windows或Mac下的可执行文件,该文件完全脱离原设计环境。 实例1: 打包“升降国旗.a7p”程序。 要求: 对“升降国旗.a7p”程序进行打包,完成后该程序转换成可执行程序,运行时脱离原设计环境。 操作步骤如下。 (1) 打开“升降国旗.a7p”程序。 图3132“打包文件”对话框 (2) 选择“文件”→“发布”→“打包”命令,弹出“打包文件”对话框,如图3132所示。 其中,打包文件右侧的图标将随下方下拉列表的选项不同而变化,下拉列表中的两个选项如下。 ① 无需Runtime: 选择此项时,必须保证用户的计算机上有Authorware 7.0的Runtime应用程序,该程序是用来运行.a7r程序的。选中该项后,对话框中显示两个图标。打包后的文件扩展名为.a7r。 ② 应用平台Windows XP、NT和98不同: 选中此项后,打包后的多媒体程序就可以单独运行于Windows系统下。对话框中只显示一个图标,打包后的文件扩展名为.exe。 4个复选框分别如下。 ① 运行时重组无效的连接: 在编辑程序时,每拖放一个图标到流程线上,系统都会自动记录相关数据。如果对程序进行了修改,程序中的某些图标链接就会断开,为了避免产生这种问题,可选择该项,只要图标的类型和名称没有改变,Authorware 7.0就可以恢复它们的链接关系。 ② 打包时包含全部内部库: 选中此项,可以将所有与程序链接的库文件打包在一个文件中。 ③ 打包时包含外部之媒体: 选中此项,可以将所有外部媒体打包在一个文件中,但不包括.avi等外部运行文件。 ④ 打包时使用默认文件名: 选中此项,打包后的文件将自动以其源文件的名称命名生成一个同名的可执行文件,并放置在同一个文件夹下。 设置完成后,单击“保存文件并打包”按钮,Authorware开始打包文件。打包结束后会在源程序同路径下生成一个.exe可执行程序。 提示: 如果没有选中“打包时使用默认文件名”复选框,将出现“打包文件为”对话框,要选择打包后文件的保存位置并给打包文件命名。 (3) 双击.exe文件,就可以脱离Authorware环境直接执行了。但有的时候程序并不能正常运行,这时就应该做好打包之后的工作。 如果源程序包含外部媒体或数据库等文件,将源程序打包之后,需要将包含的外部媒体或数据库等文件复制到生成的.exe可执行程序同路径下。另外,还需要将“C:\Program Files (x86)\Macromedia\Authorware 7.0”路径下部分.dll文件和Xtras文件夹复制到生成的.exe可执行程序所在文件夹中。 任务2一键发布 视频讲解 从打包过程可以看到,打包需要进行很多设置,并要注意打包时不要遗漏相关文件,操作较麻烦,为了简化操作,Authorware 7.0提供了“一键发布”的功能。 实例2: 一键发布“升降国旗.a7p”程序。 要求: 对“升降国旗.a7p”程序进行一键发布,完成后不需要再做其他设置。 操作步骤如下。 (1) 打开“升降国旗.a7p”程序。 (2) 选择“文件”→“发布”→“一键发布”命令,直接对文件进行发布,发布后,在源程序所在文件夹下会创建一个Published Files文件夹,用于保存相关文件。 本项目通过2个任务的学习与实践,帮助读者掌握了交互型多媒体课件的打包与发布方法。