Authorware中隐藏按钮交互菜单的设计方法
作者:刘文东
来源:《数字化用户》2013年第28期
作者:刘文东
来源:《数字化用户》2013年第28期
【摘 要】本文通过热区域交互和自定义按钮交互设计方法巧妙的实现了自动隐藏菜单的电影控制。
【关键词】Authorware 交互菜单
在Authorware程序设计中,经常要用到菜单来实现良好的人机交互,增加可操作性,本文以“VIP私人影院”为例介绍Authorware中隐藏按钮交互菜单的设计方法。
一、程序设计说明
程序运行后,显示主界面, 1秒钟后进入视频播放界面,自动播放预先设定电影片断,当鼠标置于窗口下面时会自动出现电影控制按钮菜单条,当鼠标离开菜单条区域时则又自动隐藏起来。当菜单条显示时,这时单击其中的暂停按钮,则暂停电影的播放,该按钮自动变为播放按钮,这时单击其左右两侧的前进、后退按钮,则实现前、后一帧的播放;当再次单
击播放按钮,则继续播放电影,这时单击其左右两侧的前进、后退按钮,则实现电影的减、加速播放。单击最右侧的关机按钮可以退出程序。
二、完成过程
(一)新建程序文件。在磁盘上新建“VIP私人影院”文件夹,并将需要的素材文件复制到该文件夹中。新建“VIP私人影院.a7p”文件并保存在刚建立的文件夹中。在属性面板中设置不显示标题栏和菜单栏,窗口大小设置为“根据变量”,选择“屏幕居中”选项,设置搜索路径为“.\素材”。
(二)设计程序流程的思路:1.导入和设置程序背景;2.导入和设置电影文件;3.建立电影控制交互程序。
建立主程序流程如图1所示。
图1
(三)导入和设置程序背景
1.建立“初始化”计算图标,输入函数和给变量赋值,如图2所示。
图2
2.建立“首页面”显示图标,导入“首页面.png”文件。设置“原”特效。
3.建立“等待1秒”等待图标,设置时限为“1秒”。
4.建立“擦除首页面”擦除图标,设置不擦除的图标为空。
(四)导入和设置“特洛伊”电影
建立“电影”图标,导入预先设定的电影文件,设置执行方式为“永久”,播放1次,速率中填入“speed”。
(五)建立电影控制交互程序
1.建立“显示菜单”交互。
建立“显示菜单”交互图标,导入“菜单条.png”文件,调整到窗口的下面位置。建立“擦
除菜单”热区域交互分支,设置范围为“永久”,分支为“返回”,匹配为“鼠标处于指定区域内”,鼠标指针无。建立“显示菜单”热区域交互分支,设置范围为“永久”,分支为“返回”,匹配为“鼠标处于指定区域内”,鼠标指针为手形。设置热区域。双击“显示菜单”交互图标,设置“擦除菜单”热区域为窗口的上面电影播放区域,设置“显示菜单”热区域交互分支为下面的空白区域。
2.建立如图3所示“显示菜单”2层程序流程
图3
影院私人建立“电影控制”交互图标。拖动一个计算图标,建立“减速/向前逐帧播放”按钮交互分支,设置按钮为自定义按钮,导入按钮素材“后退up.png”、“后退down.png”和“后退over.png”文件。设置鼠标为自定义鼠标,导入“BRUSH.CUR”文件。同样,建立“播放/暂停”按钮交互分支,设置按钮为自定义按钮。
这里要特别说明的是该按钮具有播放按钮和暂停按钮的两个功能,所以在自定义按钮的时候,要分别设置按钮的常规和选中两种按钮状态。如图4所示单击常规下面的未按、按
下和在上,分别导入“暂停up.png”、“暂停down.png”、“暂停over.png”文件;如图5所示单击选中下面的未按、按下和在上,分别导入“播放up.png”、“播放down.png”、“播放over.png”文件;单击“自动检测”选项,则当单击该按钮后,checked系统变量的值被自动赋值为true,再单击则被赋值为false,后面要通过判断该变量的值控制电影的播放。
图4
图5
图6
图7
与建立“减速/向前逐帧播放”按钮交互分支一样,建立“加速/向后逐帧播放”按钮交互分支,导入按钮素材“前进up.png”、“前进down.png”和“前进over.png”文件。 同样,建立“退出”按钮交互分支,导入按钮素材“关机up.png”、“关机down.png”和“关机over.png”文件。双击打开“显示菜单”交互图标的演示窗口,执行【修改】|【排列】菜单命令,调出排列工具,将各个按钮在窗口的菜单条上调整为合适的位置。 打开“减速/向前逐帧播放”计算图标,
输入程序如图6所示。
打开“播放/暂停”计算图标,输入程序如图7所示。
打开“加速/向后逐帧播放”计算图标,输入程序如图9所示。
图8
打开“退出”计算图标,输入“Quit()”,程序全部设计完毕。
作者简介:刘文东(1967.9),男,辽宁公安司法管理干部学院,硕士,副教授,系主任。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论