在Authorware中制作生动的按钮

1、在Authorware中制作生动的按钮(1)在Authorware的交互图标中有一种交互方式是：热区响应，它是指在演示窗口中的一块长方形的区域，鼠标在其范围内所产生的各种操作都会触发指定的事件。利用它可以为按钮产生相应的提示信息，使用户了解这个按钮的功能；另外还使程序更加人性化，界面更加生动。程序运行效果：当鼠标移到按钮上时，在指定的地方会出现一条提示(或图片)，当鼠标移开时提示消失。提示可以加各种过渡效果，也可以把热区分支下的显示图标换成组图标以实现更多的效果及功能。方法一原理：利用热区响应的“指针处于指定区域内（Cursor in Area）”的匹配方式，可以实现鼠标指针只要在设置的热区范

2、围内便可以激活设定的事件，而且所设置的热区在程序运行时并不会显示这一特性，我们可以在按钮上设置一个和按钮一样大小的热区响应，当鼠标移到按钮上时，自定义的按钮便可以显示不同图案，与此同时Authorware便激活热区所指定的事件(比如显示一幅图)。由于计算机的动作很快，所以在我们看来就像同时发生。我们可以把此热区的擦除方式设置为“在下一次输入之前(Before Next Entry)”，这样在鼠标移出热区（按钮）的范围时，图片自动被擦除。热区激活的图片我们可以把它放在演示窗口的下方或者放在按钮旁边作为按钮的注解。操作过程：1、先按让按钮生动起来文中所介绍的方法制作一个按钮。2、拖一个显示图标(D

3、isplay)到交互图标(Interaction)右侧，在交互类型中选择热区域(Hot Spot)(图1)。 图13、双击交互图标,调整好按钮的位置。调整热区域的大小使其正好覆盖于按钮之上(图2)。 图2-14、双击热区分支下的显示图标，输入提示文字或插入提示图片。可以加入过渡效果使程序界面更加生动，也可以使用组图标实现更多的功能(图3)。 图2-2技巧：其实不要以为使用文字就不如图片漂亮，使用文字有一个最大的好处就是可以设置一个变量，通过改变变量的值显示各种字符。（想想看，中英文提示互译，多酷！） 怎样在authorware 4.0中制作动态按钮怎样在authorware 4.0中制作动态按

4、钮我们在与光盘进行交互操作时，经常要用鼠标对按钮进行操作。这些按钮是怎样制作生成的呢？通常，许多工具软件中都带有标准按钮，如vc、vb，同样在authorware中也带有标准的按钮库。但是，这些按钮一般都很相似，呈现在屏幕上的都是灰色的长方型或圆型按钮，显得生硬而呆板。如何制作出形象生动的按钮呢？我告诉大家一种简单有效的方法，您学完之后，便可以在authorware 4.0中制作出自己喜爱的动态按钮。下面，我们以制作一个“退出”动态按钮为例来讲解。首先，要利用图形处理软件(如photoshop)制作按钮的原始图像。我们知道，一个形象而又漂亮的动态按钮通常有三种状态，即：平常状态、鼠标划过时的状

5、态及鼠标点击时的状态。因此，我们预先做好“退出”按钮的三种状态的图像，即“退出1”、“退出2”及“退出3”，如图1所示。图1 “退出”按钮三种状态的原始图像在制作好“退出”按钮的三种状态图像后，将图像保存起来。假定将这三幅图像存到c:my documents文件夹中。现在，可以将这三幅图像“退出”按钮链接到authorware 4.0中，生成动态按钮。我们通过编写一段小程序来完成动态按钮的制作，具体操作如下。1. 启动authorware 4.0，建立一个新文件，屏幕上出现一空白的程序“设计窗口”，如图2所示。图2 设计窗口界面2. 用鼠标从设计图标面板上拖入一个“交互图标”放到主流程线上，并

6、将此“交互图标”命名为“退出交互”。3. 用鼠标从设计图标面板上拖入一个“组图标”放到“退出交互”图标的右下方，这时屏幕上自动出现“响应类型”(response type)对话框，如图3所示。在确定选中“button”类型后，点击“ok”按钮，退出“响应类型”对话框。然后，将此“组图标”命名为“退出操作”。现在，屏幕上的“设计窗口”的内容应如图4所示。图3 响应类型对话框图4 设计窗口中的程序流程现在，我们该制作动态按钮了。双击“退出操作”组图标上方的“响应类型”图标，屏幕上立即出现“响应类型属性”（properties:response）对话框，如图5所示。我们对“响应类型属性”对话框进行如

7、下设置。图5 响应类型属性对话框（1)将对话框正上方命名栏中的按钮名称更改为“quit”。（2)确定对话框的type栏为“button”类型。（3)确定对话框下方的“button”按钮为激活态。设置location栏中的x,y座标为50,350。点击cursors栏右方的下拉按钮，并在打开的光标库中选择手型光标，点击“ok”键退出光标库。这时，“响应类型属性”对话框的各参数如图6所示。图6 响应类型属性对话框的各参数设置（4)双击对话框左上角的“quit”按钮，或单击对话框左中方的“buttons.”按钮，屏幕上立即出现“按钮库”（buttons）对话框，库中有各种“quit”标准按钮供选择，

8、并可随时添加用户自己编辑的按钮，如图7所示。现在，我们可以将自己预先制作好的“退出”按钮图像链接进来，在按钮库中生成新的按钮“退出”按钮。图7 按钮库对话框1）点击“按钮库”对话框左下方的“add.”按钮，屏幕出现“按钮编辑器”（button edit）对话框，如图8所示。图8 按钮编辑器对话框2）确定选中“按钮编辑器”对话框左上方“normal”状态的“up”（即平常状态）项，点击对话框右下方“graphic”栏右边的“import.”按钮，屏幕出现“输入文件”(import which file?)对话框，如图9所示。图9 输入文件对话框3）在“输入文件”对话框中，选择我们已制作好的“退出

9、1”按钮图像的路径和文件名，即：c:my documents退出1.bmp文件。选择好后，点击“import”按钮，退出“输入文件”对话框，返回到“按钮编辑器”对话框中。这时，在“按钮编辑器”对话框的右上方出现了新输入的“退出1”按钮图像。4）确定选中“按钮编辑器”对话框左上方“normal”状态的“down”(即鼠标点击时状态)项，点击对话框右下方“graphic”栏右边的“import.”按钮，屏幕出现“输入文件”(import which file?)对话框。5）在“输入文件”对话框中，选择我们已制作好的“退出3”按钮图像的路径和文件名，即：c:my documents退出3.bmp文件

10、。选择好后，点击“import”按钮，退出“输入文件”对话框，返回到“按钮编辑器”对话框中。这时，在“按钮编辑器”对话框的右上方，出现了新输入的“退出3”按钮图像。6）确定选中“按钮编辑器”对话框左上方“normal”状态的“over”(即鼠标划过时状态)项，点击对话框右下方“graphic”栏右边的“import.”按钮，屏幕出现“输入文件”(import which file?)对话框。7）在“输入文件”对话框中，选择我们已制作好的“退出2”按钮图像的路径和文件名，即：c:my documents退出2.bmp文件。选择好后，点击“import”按钮，退出“输入文件”对话框，返回到“按钮编

11、辑器”对话框中。这时，在“按钮编辑器”对话框的右上方出现了新输入的“退出2”按钮图像。8）同样，我们也可以对“退出”按钮配上自己喜欢的声音，只需对在“按钮编辑器”对话框右下方的“sound”栏进行输入声音操作，过程同上述输入图像的相似，这里不再赘述。9）点击“ok”按钮，退出“按钮编辑器”对话框。（5)这时，可以看到按钮库中增加了我们刚刚制作的“退出”按钮。点击“ok”按钮，退出“按钮库”对话框。（6)再点击“ok”按钮，退出“响应类型属性”对话框，回到“设计窗口”。4. 现在，“退出”动态按钮已制作完毕。在为了方便观察动态按钮的运行效果，我们还需进行编程。双击“设计窗口”中的“退出操作”组图

12、标，打开二级“设计窗口”。5. 用鼠标从设计图标面板上拖入一个“显示图标”，并将其命名为“谢谢”。双击“谢谢”图标，出现“演示窗口”（presentation）。在“演示窗口”的正中间，输入汉字“谢谢您使用本软件，再见！”。然后关闭“演示窗口”，回到二级“设计窗口”。6. 用鼠标从设计图标面板上拖入一个“等待图标”，并将其命名为“等待”。双击“等待”图标，出现“等待图标属性”（properties: wait icon）。确定已选中“events”选项的“mouse click”及“key press”栏。在“time limit”栏中，输入参数“5”，使最大等待时间为5秒。确定没选中“opt

13、ions”选项中的“show button”栏。设置完各参数的对话框如图10所示。然后再点击“ok”按钮，回到二级“设计窗口”。图10 等待图标各参数的设置7. 用鼠标从设计图标面板上拖入一个“计算图标”，并将其命名为“再见”。双击“再见”图标，出现“运算窗口”。在“运算窗口”中，输入系统函数:quit()，如图11所示。然后关闭“运算窗口”，回到二级“设计窗口”。图11 计算图标中的函数现在，程序编写完毕。运行一下程序，观察有什么效果产生。首先，屏幕上出现了“退出”按钮，这时，所呈现的是“退出1”按钮图像。用鼠标划过“退出”按钮时，光标变成手形，“退出”按钮呈现的是“退出2”按钮图像。最后，

14、用鼠标点击 “退出”按钮，所呈现的是“退出3”按钮图像。这样，一个自己所喜爱的三态动态按钮效果就出现了，也就是说，一个漂亮的“退出”按钮制作完成了。当然，点击“退出”按钮后，程序会作出响应，屏幕上出现“谢谢您使用本软件，再见！”的结束语，单击鼠标或按任意键或等待5秒钟，程序结束运行。制作拼图游戏-authorware 核心提示：首先我们来构思一下拼图游戏的大致样子：顺序零乱的拼块分布于原始矩形方块内，游戏者通过鼠标拖拽拼块到某一目标矩形方块中，如果拖拽目的地正确，则自动对齐居中，否则退回到原始位置。游戏者在游戏过程中可作弊选择查看原图；中途也可选择放弃并退出游戏-首先我们来构思一下拼图游戏的大

15、致样子：顺序零乱的拼块分布于原始矩形方块内，游戏者通过鼠标拖拽拼块到某一目标矩形方块中，如果拖拽目的地正确，则自动对齐居中，否则退回到原始位置。游戏者在游戏过程中可“作弊”选择查看原图；中途也可选择放弃并退出游戏。如图（1）是拼图游戏的最终执行界面。构思完毕，可以开始我们的“设计之旅”了。 图（1）拼图游戏执行界面制作步骤：拼图游戏，图是主题，拼是过程，因此制作前必须准备好拼图游戏的相关图片，包括切割好的原图拼块（可选择PhotoShop或者Fireworks等图形处理工具进行切割）。一切就绪，启动Authorware 6.0开始工作！1）设计背景与导入拼块 图（2）背景与导入拼块设计流程如图

16、（2）所示，“BackGround”显示图标导入拼图游戏背景。为了防止游戏者在游戏过程中意外拖动背景图片，在“BackGround”图标的计算窗口写入： Movable"BackGround":=FALSE群组图标“AllPart”存放的是全部拼块，一个显示图标导入一个拼块。在导入拼块时要注意把位置顺序捣乱。 为了游戏窗口的美观与合理，可更改Modify/File/Propeties的属性，即取消系统默认的Title Bar和Menu Bar选项，并选择Center on Screen选项。存盘，调试执行程序，如图（1）所示的游戏界面显露出来了。“趁热打铁”，接下来我们继续

17、设计拼图游戏的主体交互部分，也就是如何判断控制游戏者的拼图过程行为。2） “退出游戏”以及“查看原图”操作设计。在流程上添加一交互图标“pintu”，再添加一显示图标和计算图标到右侧，响应类型均为“Hot Spot”热区响应，返回类型为“Return”，如图（3）所示。 图（3） 退出游戏交互分支动态按钮一般有三个状态：Mouse Up、Mouse Over和Mouse Down，通过热区响应可以实现动态按钮，我们就用此方法。如图（3）所示，显示图标“quit1”就相当于动态按钮中的“Mouse Over”.，只要鼠标一划过热区，预定的按钮区域就改变为“ 核心提示：quit1 显示图标的图片，

18、属性设置如图（ 4 ）所示。即把 Match 选择域选择为 Curser in Area ，而把响应 Erase 属性选择为 Before Next Entry ， Branch 属性选择为 Try Again 。 图（ 4 ） quit1 的属性设置 只要在-quit1”显示图标的图片，属性设置如图（4）所示。即把Match选择域选择为“Curser in Area”，而把响应Erase属性选择为“Before Next Entry”，Branch属性选择为“Try Again”。 图（4）“quit1”的属性设置 只要在计算图标“quit”里输入代码：Quit（0），并设置其响应属性的Er

19、ase域为“After Next Entry”，热区属性Match选择域选择为“Single-Click”，则完成了用热区实现的“退出游戏”按钮操作功能。必须注意保证前后两个热区范围和大小一致。同理，我们建立“查看原图”操作分支，如图（5）所示。这样游戏者在游戏过程中随时可以“作弊”查看原图，当然就降低了拼图游戏的难度，却体现了程序设计的友好性原则。 图（5）建立查看原图分支图（5）中群组图标“yt”的二级流程图如图（5）右上角所示。其中显示图标“source”就是原图，为了防止游戏者查看原图时意外拖动原图，其计算文本为：Movable"source":=FALSE返回图标

20、“Backup”可使游戏者随时查看原图并切换回游戏的当前步骤，其计算文本为：EraseIcon(IconID"source")，即返回时擦除原图。3） 设计游戏者的拖拽拼块行为判断控制。首先设计游戏者正确拖拽拼块到目的地的流程。如图（6），拖动一群组图标“1”到交互的右侧，选择响应类型为“Target Area”。 图（6）拖动响应交互调试执行程序，程序将自动暂停，等待用户设置响应属性，选择相应的拼图分块“part1”，使热区符号附到该图片上，按要求拖动“part1”拼块到目标区域，调整热区大小使其充满所在小方格，即定义对象“part1”的目标区域为整个小方格区域，同时设置

21、属性窗口的On Drop选项为“Snap to Center 核心提示：，即定义当物体被拖动到该区域后，将自动锁定在该区域中心；设置拖动目标区域为正确响应设置，即 Response 的 Status 属性为 Correct Response ，如图（ 7 ）所示。 图（ 7 ）正确拖放热区属性设置 拼块的拖拽-”，即定义当物体被拖动到该区域后，将自动锁定在该区域中心；设置拖动目标区域为正确响应设置，即Response的Status属性为“Correct Response”，如图（7）所示。 图（7）正确拖放热区属性设置拼块的拖拽过程不可能一步到位，当游戏者拖拽拼块到错误目的地时，.如何处理呢？

22、继续我们的设计之旅吧。添加一空内容的群组图标“wrong”到“+1”的右侧。如图（8）左上属性窗口所示，设置响应类型为“Target Area”，目标对象选择为Accept Any Object，即对任何目标对象都是有效的。On Drop选择“Put Back”，即如果拖动目标对象到错误区域，则会自动返回原处。响应热区范围调整为整个屏幕，同时设置Response的Status 属性为“Wrong Response”，如图（8）右下属性窗口所示。 图（8） 错误拖放热区属性设置存盘并执行，此时就可尝试拖动拼块“part1”到指定区域了，如果拖拽目的地错误，则返回原始位置。同样方法，在群组图标“+

23、1”和“-wrong”之间插入其它拼块的拖拽操作流程，这样拼图游戏的主体流程就设计完毕。4） 游戏者经过“千辛万苦”，终于为所有拼块找到“归宿”，拼图游戏送来了“祝贺信息”，如图（9）右上所示，告诉游戏者大功告成。如何设计游戏者完成所有拼块正确拖放后的流程呢？继续“设计之旅”的最后一站。如图（9）左下所示，.拖动一群组图标到交互的最后面，响应类型为条件响应，条件表达式为：AllCorrectMatched （系统变量），其作用是当交互图标中的所有响应正确执行后条件为真并执行此分支。这样拼图游戏的所有流程就设计完毕。 图（9） 建立完成拼图响应分支7） 存盘并打包发布，游戏的制作就完成了，我们这

24、样就知道，很简单吧。呵呵，自己动手做一下啊。 Authorware 动 画 核心提示：1.利用Animated GIF插件 播放GIF动画 在Authorware中使用显示图标导入动画Gif文件，在播放时往往只能看到动画的第一帧，这是许-1.利用Animated GIF插件播放GIF动画在Authorware中使用显示图标导入动画Gif文件，在播放时往往只能看到动画的第一帧，这是许多Authorware的初学者曾经遇到过的问题。如何解决呢？现在我们就利用Animated GIF插件来播放GIF动画。1）在主菜单下单击【插入】【媒体】【Animated GIF】命令，Authorware即会打开

25、Animated GIF 属性对话框。2）选择“链接”复选框，则将GIF动画作为外部文件连接到Authorware文件中，而不将其插入到内部；选择“直接写屏”复选框，则将GIF动画的层次设置为最高层；在“速度”下拉列表中可以选择GIF动画播放的速度，单位为帧/秒，默认为“正常”，正常速度为15帧/秒,如果选择列表中的“固定”，则可以将速度固定在某一设定的值。如果选择列表中的“锁定”，则可以将当前设置的速度锁定，不能更改。属性对话框的左下角显示了GIF动画的总帧数及显示画面的大小。3）单击【浏览】按钮，可以打开“浏览文件”对话框，选择一个GIF动画文件，然后单击【打开】按钮。如果文件在网络上，可

26、以单击【网络】按钮，打开“网络路径”对话框，输入GIF动画的URL地址即可。选中文件后，属性对话框中便显示此GIF动画的属性。4）单击【确定】按钮，关闭属性对话框，这时我们可以看见流程上出现了一个Animated GIF图标。保存文件并运行程序。2 如何设置GIF背景透明接上例，双击Animated GIF图标可以打开此Sprite图标的属性对话框。选择“显示”选项卡，将属性中的“模式”设定为“透明”，这设定和图片本身有一定关系，要看图片的实际来处理。有的能设成透明，有的则不能。3 如何调用QuickTime、DirectMedia Xtra插件播放GIF动画与“Animated GIF Xt

27、ra”一样，选择【插入】【媒体】【QuickTime】菜单，在流程线上插入一个QuickTime Xtra图标，并出现“QuickTime Xtra Properties”的属性对话框，选取要播放的GIF动画文件，设置相关的属性。这时我们需要选中属性对话框中的“循环”复选框，以保证GIF动画循环播放，此外“视频”也要确保选中，否则GIF动画图像将不会显示。此外，使用DirectMedia Xtra插件也可以播放GIF动画，跟播放视频文件和音频文件类似。在流程线上选择适当的位置，打开【插入】菜单，选择【Tabuleiro Xtras】【DirectMedia Xtra】命令，这时会显示一个“Di

28、rectMedia Xtra”属性对话框。选择你所需要的GIF动画文件，并设置相应的属性即可。单击预览区的【播放】按钮，可以预览该GIF动画的效果。单击【确定】按钮便插入一个GIF动画。4 如何调用Flash Xtra来播放Flash（*.SWF）动画Flash动画是多媒体世界中非常重要的成员，在Authorware中也有很多方法可以播放Flash动画。首先介绍如何使用Authorware自带的Flash Xtra来播放Flash动画。打开【插入】菜单，选择【媒体】【Flash Movie】命令，这时会自动显示一个“Flash Asset？”属性对话框。单击【浏览】按钮，可以打开选择文件的对话框，选择需要播放的Flash动画。选择好需要播放的Flash动画后，可以在Flash Xtra属性对话框中对Flash动画的播放属性进行设置。如果选择“链接”连接选项，则Flash动画将作为外部文件连接到程序中，这与在显示图标中导入图像文件是一样的，如果选择“链接”连接的同时选择了“预载”，则Authorware在播放Flash动画之前，会将数据预先载入内存，以提高Flash动画的播放速度。如果不选择“链接