注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

.

.

 
 
 

日志

 
 

框架和导航图标的使用  

2009-07-24 09:11:52|  分类: 课件的集成与制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

通过交互图标的学习,已经掌握了如何利用交互图标建立分支结构,使用户能够在指定的交互方式支持下,完成对各个分支内容的浏览。这种方式实现的分支结构,需要开发者完成交互设计和各分支的设计。为了方便用户设计制作,Authorware提了框架图标和导航图标用于建立具有前后翻页等功能的导航机制的页面系统。
1、 建立一个简单的页面系统
??? 下面先通过一个简单的例子,来了解一下什么是页面系统,如何利用框架图标来建立一个页面系统。操作步骤如下:
??? 步骤1? 在主流程线上添加一个框架和导航图标的使用 - 白云飘飘 - .框架图标。
步骤2 在框架图标的右侧,放置若干个显示图标,如图5—168所示。

框架和导航图标的使用 - 白云飘飘 - .?
图5—168 框架页面
框架和导航图标的使用 - 白云飘飘 - .
图5—169 导航按钮

步骤3 分别编制各分支中显示图标的内容,形成页面系统的各个页。
步骤4 运行这个Authorware程序,可以在程序窗口中看到如图5—169所示的8个按钮利用这些按钮,可以在刚刚建立的各个页面之间完成前后翻页的浏览。
通过这个例子可以有助于了解页面系统的概念。利用框架图标建立一个页面系统的操作是非常方便的,但要建立一个实用的页面浏览系统,还需要进一步了解框架图标的有关细节和其他的相关的图标。
2、框架图标及其属性设置


框架图标的属性设置

选中流程线上的框架图标,然后依次选择“Modify/Icon/Properties...”菜单选项,打开它的属性对话框,如图5—170所示.框架图标的属性对话框和我们前面遇到过的图标属性对话框相比简单很多。
“Page”选项用于设置页面系统中各页显示时的过渡方式,单击文本框后面的按钮,可以打开“Page Transition”对话框进行页面过度方式设置,设置方法与前面介绍过的类似,这里不再赘述。在“Page”选项下方的“Number of...”项用于显示该框架图标构建的页面系统的页面。

框架和导航图标的使用 - 白云飘飘 - .
图5—170 框架图标属性设置框

(2)框架图标的内部结构
框架图标实际上是一个由多个图标构成的程序模块,由Authorware封装成一个图标提供给用户。双击框架图标可以打开如图5—171所示的内部结构。

框架和导航图标的使用 - 白云飘飘 - .
图5—171 框架内部结构

在图中可以看到,框架图标的内部结构分为两个部分:“Entry:Level1”(进入层1)和“Exit:Level1”(退出层1),分别称为框架图标的入口部分和出口部分。入口部分用于设置页面系统的交互按钮,出口部分初始时为空,可以在其中添加退出页面系统时要执行的图标或程序段。这里重点介绍框架的入口部分。
入口部分最开始是一个名为“Gray Navigation Panel”的显示图标,双击该图标打开演示窗口,里面显示的是在图5—169中见到的交互按钮的背景。
在显示图标下是名为“Navigation Hype...”的交互图标.在该交互结构中.有8个交互方式为按钮的分支,这此按钮分支的功能是山导航图标实现的。导航图标有关内容在下一小节介绍。这8个交互按钮分支的含义和功能如下:
框架和导航图标的使用 - 白云飘飘 - .“Go back”(返回)按钮单击此按钮后,演示窗口中的显示内容将从当前页跳转到上一次显示的页面。
框架和导航图标的使用 - 白云飘飘 - .“Recent pages”(当前页)按钮:单击此按钮后,将弹出一个对话框,列出用户已经浏览过的页面,如果在需要重新浏览的页面名称上双击鼠标左键,就可以打开该页面。
框架和导航图标的使用 - 白云飘飘 - .“Find”(查找):按钮单击此按钮后,将会显示“Find”对话框,在对话框中输入需要查找的字符或字符串,可以查找到所需要的页面。
框架和导航图标的使用 - 白云飘飘 - .“Exit Framework”(退出框架)按钮:单击此按钮后,演示程序将退出当前框架图标,继续执行下面的程序流程。
框架和导航图标的使用 - 白云飘飘 - .“First page”(第一页)按钮:单击此按钮后,演示窗口将从当前页面跳转到页面系统的第一个页面中。
框架和导航图标的使用 - 白云飘飘 - .“Previous page”(上一页):单击此按钮后,演示窗口将从前页面跳转到上一个页面,而,如果当前页面是笫一个页面,则跳转到页面系统的最后一个页面。
框架和导航图标的使用 - 白云飘飘 - .“Next page”(下一页)按钮:单击此按钮后,演示窗口将从当前页面跳转到下一页面,如果当前页面是最后一个页面,则跳转到页面系统的笫一个页面。
框架和导航图标的使用 - 白云飘飘 - .“Last page”(最后一页)按钮:单击此按钮后,演示窗口将从当前页面跳转到页面系统的最后一个页面中。
在页面系统运行时,“Gray Navigation Panel”(灰色导航面板)显示图标和“Navigation Hype...” (导航超连接)的8交互按钮图标将一直显示在演示窗口中。
3、导航困标及其属性设置
从图5—171中可以看到,“Navigation Hype...”(导航超连接)交互结构是由交互图标和导航图标组成的,框架图标的页面导航功能主要是通过Navigate导航图标的功能来完成的。导航图标具有不同的形状,代表着它们所实现的功能不同。
在流程线上放置一个导航图标?? ,单击该图标或选择“Modify/Icon/Properties...”(修改/图标/属性)菜单命令可打开导航图标的属性对话框,如图5—172所示。

框架和导航图标的使用 - 白云飘飘 - .
图5—172 导航图标属性设置

(1)“Anywhere”(任意位置)选项
在“Destination”(目的地)的下拉列表框中有5个选项,不同选项对话框的内容也不同,图5—172是选中“Anywhere”选项后的属性对话框内容,其中:
Jump to Page(跳到页):选中此项后,导航图标的形状为框架和导航图标的使用 - 白云飘飘 - .,该选项的作用是控制程序流程跳转到设定的图标执行。
Call and Return(调用并返回):此项的功能和选中“Jump to Page”项基本相同,不同之处是选中“Call and Return”后.被调用的页面所在的页面系统退后,程序会返回到调用之前的位置执行,而选中“Jump to Page”项,则继续沿着流程线执行。,选中此项后,导航图标的形状为框架和导航图标的使用 - 白云飘飘 - .
Page(页):在此列表中可以选择需要跳转的目的页面所在位置。
Framework(框架):用于确定所选目的页面所在框架。
Find(查找):在右侧的文本框中输入查找关键字。
Word(字词):用于在各页面的文本中查询文字。
Keyword(关键字):于在各页面中查询关键字。
(2)“Recent”(最近)选项
在“Destination”框中选中“Recent”选项后的属性对话框如图5—173所示。

框架和导航图标的使用 - 白云飘飘 - .
图5—173 “最近”方式导航设置

此时“Page”有两个选项:
Co Back(返回):选中此选项用于回到当前刚浏览过页的前一页。此时,导航图标变为框架和导航图标的使用 - 白云飘飘 - .形状。
List Recent Pages(最近页列表):选择此项在运行时会出现一个对话框,在对话框中列出用户已经浏览过的页,按顺序最后浏览的页放置在窗口的最上端,如果用户单击一页的名称,Authorwre会自动进入相应的页。此时,导航图标会变为 框架和导航图标的使用 - 白云飘飘 - .??形状。
(3)“Nearby”(附近)选项
在“Destination”(目的地)的下拉列表框中“Nearby”选项后的对话框如图5—174所示。
“Page有5个选项:

框架和导航图标的使用 - 白云飘飘 - .
图5—174 “附近”方式导航设置

Previous(前一页):选中此选项,则程序会从当前页面跳转到页面系统的后一页。此时,导航图标变为框架和导航图标的使用 - 白云飘飘 - .形状。
Next(下一页):选中此选项,则程序会从当前页跳转到页面系统的后一页。此时,导航图标变为框架和导航图标的使用 - 白云飘飘 - .形状。???
First(第一页):选中此选项,则程序会从当前页而跳转到页面系统的第一页。此时,导航图标变为框架和导航图标的使用 - 白云飘飘 - .形状。
Last(最末页):选中此选项,则程序会从当前页面跳转到页面系统的最后一页。此时,导航图标变为框架和导航图标的使用 - 白云飘飘 - .形状。
Exit Framework/Return(退出框架/返回):选中此选项,则程序结束本页面系统。此时,导航图标变为框架和导航图标的使用 - 白云飘飘 - .形状。
(4)“Calculate”(计算)选项
在“Deslination”的下拉列表框中“Calculate”选项后的属性对活框如图5—175所示。

框架和导航图标的使用 - 白云飘飘 - .
图5—175 “最近”方式导航设置

Jump to Page(跳到页):该选项与“Anywhere”相同。此时,导航图标的形状为 框架和导航图标的使用 - 白云飘飘 - .
Call and Return(调用并返回):该选项与“Anywhere”相同。此时,导航图标的形状为框架和导航图标的使用 - 白云飘飘 - .
Icon(图标):在此文本框中输入返回图标ID名的表达式。
(5)“Search”(查找)选项
在“Destination”(目的地)的下拉列表框中选中“Search”选项后的属性对话框如图5—176所示。
“Type”有两个选项:


Jump to Page(跳到页):该选项与“Anywhere”相同。此时,导航图标的形状为框架和导航图标的使用 - 白云飘飘 - .
Call and Return(调用并返回):该选项与“Anywhere”相同。此时,导航图标的形状为框架和导航图标的使用 - 白云飘飘 - .

“Search”(搜索):用于显示查找范围,有两个选项:


Current Framework(当前框架):本选项用于限制查找范围在当前的框架中。
Entire File(整个文件):本选项允许在整个文件中查找。

“Consider”(根据):用于进一步限制查找范围,有两个选项:


Keywords(关键字):本选项用于在各页面内搜索输入的字符或字符串。
Words(字词):本选项用于在各页面内搜索输入的关键字。

Prest Text(预设文本):用于输入查找的词语或代表某一词语的变量。
“Options”(选项):用于定义查找的属性,包括两个选项:


Search Immediately(立即搜索):本选项用于指定查找过程立即进行。
Show in Context(高亮显示):本选项用于指定在上下文中显示查找的词
框架和导航图标的使用 - 白云飘飘 - .
图5—176 “查找”方式导航设置

4、使用群组图标
(1)群组图标的功能
在建立交互图标和框架图标的各分支系统时,Authorware要求各分支只能是一个图标,这时如果分支需要执行的内容比较多,可以将它们放置在一个群组图表内,然后将群组图标作为一个分支即可。
另外,在Authorware的设计窗口中没有滚动条,当设计一个比较复杂的程序时会用到很多图标,这样将不能在设计窗口看到全部图标,为设计带来很多不便,这时也可以考虑将部分图标成组存放在群组图标中,以简化设计窗口,使流程变得简洁,程序的可读性强。
(2)群组图标的设计窗口
顾名思义,群组图标是图标的集合,在主流程线上放置一个群组图标,双击该图标,可以打开一个设计窗口。如图5—177所示是群组图标的设计窗口,在群组图标中存放的其他图标就在摆放到 群组图标设计窗口的流程线上的。

框架和导航图标的使用 - 白云飘飘 - .
图5—177? 有2层群组的设计窗口

群组图标中可以放置任何图标,同样也允许在群组图标中放置一个群 组图标,这样会产生较多的设计窗口,同样会给设计带来不便。为了区分各设计窗口,Authorware在设计窗口的右上方设置了一个代表窗口级别的标识。主设计窗口为“Level1”,则在主设计窗口中放置的群组图标的的层次为“Level2”,如果在层次为为“Level2”的群组图标设计窗口中再添加一个群组图标,则这个群组图标设计窗口的层次为“Level3”依次类推。另外,在每个设计窗口的标题栏,还有图标名称标识以便于用户区分。
当程序运行到群组图标时,会自动转入到群组图标所对应的设计窗口中,执行其流程线上的图标.执行完最后一个图标后,返回到上一层流程线的下一个图标继续执行。
(3)群组图标的使用
使用群组图标时,一般有两种方法:一种是先创建群组图标,然后双击群组图标,打开其设计窗口,在这个设计窗口内完成群组图标的程序设计。另一种方法是先进行设计,然后把要放置在同一群组图标中的图标同时选中(可以使用鼠标拖曳一个区域,将这图标圈在 这个区域内),然后选择“Modify/Group”(修改/群组)命令,这时会在流程线上出现一个群组图标,并将这被选中的图标放置在这个群组图标中。
请读者自行修改实例3,将各分支图标改为群组图标,将原来的各分支的显示图标分别放置在群组图标中,同时在各分支群组图标中的显示图标后设置等待图标和擦除图标,完善实例的程序。
5、 实例4:页面系统
本例以制作一个相册为例,学习利用框架图标设计一个页面系统,操作步骤如下:
步骤l 在主流程线上放置一个显示图标,命名为“背景”,在其中添加一副作为整个相册背景图案的图片。在其后放置一个显示图标,命名为“欢迎页”,打开其演示窗口,在演示窗口中添加本相册的欢迎信息。
步骤2 在“欢迎页”显示图标标的下方,放置一个等待图标,命名为“等待开始”,打开其属性对话框,设置“Mouse Click”(单击鼠标)和“Key Press(按任意键)”两个选项为选中状态,去掉“Shoe Button”(显示按钮)选项的选中标志。在等待图标下面设置一个擦除图标,选择“欢迎页”显示图标2为擦除对象,并设置擦除的动态效果,增加相册的观赏性。
步骤3 在擦除图标后放置一个框架图标,命名为“相册”。在框架图标的右侧放置若干个显示图标,分别命名为“照片1”、“照片2”......,在各显示图标中放置相册的照片。
步骤4 框架图标后面放置一个显示图标,命名为“结束语”,在其中添加结束语。在“结束语”显示图标后面放置一个等待图标,设置内容同步骤2。放置一个擦除图标,命名为“擦除结束语”,选择“结束语”显示图标为擦除对象。如图5—178所示。

框架和导航图标的使用 - 白云飘飘 - .
图5—178? 实例4的设计图标

步骤5 打开“结束语”显示图标的属性对话框,为其设置一种打开过度方式。在“擦除结束语”图标上单击鼠标右键,在弹出的快捷菜单中选择“Calculation...”(计算)选项,打开计算图标设计窗口,在其中添加“Quit()”语句,用于结束应用程序的播放,如图5—179所示。关闭窗口,在弹出的提示对话框中选择“Yes”按钮完成设置。

框架和导航图标的使用 - 白云飘飘 - .
图5—179 计算图标中的程序

步骤6 在框架图标提供8个导航按钮中,这里只保留了其中的3个:“Exit Framework”、“Previous page”和“Next page”,删除其余5个按钮。如图5—180所示。

框架和导航图标的使用 - 白云飘飘 - .
图5—180? “相册”群组中的导航设置

步骤7 双击框架图标内部结构图中的“Gray Navigation Panel”(灰色导航面板)显示图标,利用其他图像处理软件其中的导航按钮背景改为如图5—181所示图形。

框架和导航图标的使用 - 白云飘飘 - .框架和导航图标的使用 - 白云飘飘 - .框架和导航图标的使用 - 白云飘飘 - .?????? 框架和导航图标的使用 - 白云飘飘 - .???????框架和导航图标的使用 - 白云飘飘 - .
图5—181 导航面板修改

步骤8 双击框架图标内部结构中的“Navigation Hyp...”(导航超连接)交互图标,在演示窗口中将导航按钮和其背景摆放好,并放在适当的位置上。如图5—180所示。
步骤9 单击“Pzevious page”导航图标上的框架和导航图标的使用 - 白云飘飘 - .交互方式标志,打开“Properties: Response[Previous page]”属性对话框,在“Response”标签的“Active If:”选项后的文本框内输入“prevpage”,回车后,在弹出的保存新变量对话框中按“ok”完成设置。可以利用 “prevpage”来控制“Previous page”按钮。用同样的方法,设置使用自定义变量“Nextpage”来控制“NextPage”按钮。
步骤10选中“照片1”图标,依次选择“Modify/Icon/Calculate...”菜单选项.在打开的计算图标窗口中输入如图5—182所示内容,将“prevpage”变量的值设置为0(“Preious page”
按钮被设置为不可用),将“Next Page”变量的值设置为1(“Next Page”按钮设置为可用)。
关闭窗口.保存设置。

框架和导航图标的使用 - 白云飘飘 - .
图5—182 “照片1”显示图标上的计算图标内容

步骤1l? 选中框架中最后一个显示图标,依此执行“Modify/Icon/Calculate...”(修改/图标/计算)菜单选项,在打开的计算机标窗口中将“prevpage”变量的值设置为l(“Previous page”按钮被设置为可用),将“Next Page”变量的值设置为0(“Next Page”按钮设置为不可用)。关闭窗口,保存设置。
步骤12用同样的方法完成其余图标的设置.在计算窗口中应设置两个变量的值为1。
步骤13设置完毕后,运行程序。

 
     
  评论这张
 
阅读(1210)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017