Authorware开发实例:用Authorware绘制交互性相册

2020-09-19 18:26:37

字体：大中小

来源：转载

供稿：网友

光阴如流水，转眼间已经走出校门三年了，翻看昔日同窗好友的“玉照”，心里备感温馨！可令人不快的是发现他们越来越模糊啦(注：不是印象模糊了，而是照片模糊了)，而且想要看某个好友的照片还要翻来覆去的寻找，哎！真是……不过庆幸的是剑锋对authorware比较熟悉，何不用它来制作一个交互性的相册呢？说干就干，let's go!

实现功能

当相册开始演示时，位置在屏幕的中央，如果相册的尺寸小于当前系统分辨率则多余的部分以黑色覆盖；每张照片之间的过渡采用了翻书的形式；相册可以手动上下翻页，也可以设置自动翻页；具有查找功能，即输入姓名就可以快速跳转到照片所在页；能够显示当前照片是第几张和共几张；相册的流程图如图1所示。

图1

准备工作

1、为了让相册播放时能够覆盖屏幕多余部分，到http://211.155.224.153/test/down/download.asp?did=1784下载一个名为“cover.zip”的文件；翻页效果的实现可到http://211.155.224.153/test/down/download.asp?did=2052下载一个名为“dmpcak1&&2.zip”的文件；将cover.zip解压(cover.u32)到authorware的安装目录下，将dmpcak1&&2.zip解压到authorware的安装目录下的xtras文件中，此时是两个文件dmpcak1.x32和dmpcak2.x32。

2、用phtoshop 制作一张尺寸为640×480的背景图片(如图2)，背景分为四个部分，也就是相册的主要部分；再使用photoshop制作按钮5个(如图3)，从左往右分别是：向上、向下、查找、自动、退出，注意按钮排列后的总长度在背景图的控制区域内。

图2

图3

制作相册

1、启动authorware 6.0，新建一个名为“相册”的文件；拖一个计算图标至流程线，双击打开输入：

resizewindow(640,480)
　　showmenubar(off)
　　showtaskbar(off)
　　showtitlebar(off)
　　t:=10000
　　background:=cover()

关闭计算图标时会弹出对话框寻找cover函数，此时选择authorware目录下的cover.u32即可。

2、在流程线上放置一个声音图标，双击出现对话框，单击import…按钮导入所需要的声音文件，这里是华仔的“一起走过的日子.mp3”；选择concurrency下的perpetual；play下的until true，并在下面输入a=1。在流程线上再放置一个显示图标，双击打开按ctrl+r导入刚才制作的背景图片。

3、流程线上放置一个框架图标，双击打开删除里面的部分图标，再修改和添加一些图标；在按钮显示图标中导入制作的按钮图片，注意图片的位置在背景图片的控制区域内；将所有的交互类型由“button”改设为“hot spot”，并且响应位置与显示图标中的按钮相对应；双击每个交互上面的小虚线框打开properties:response属性框，设置如图4所示，这样可以让静态的图片按钮单击后有动感。

图4

4、打开“查找”图标的属性框，在hot spot的keys中输入“f3”，设置查找按钮的快捷键为f3；设置“退出”图标的快捷键为“esc”，在群组图标下的计算图标中输入：

quit()
　　background:=uncover()

在“自动”图标下的计算图标中输入：

presskey("pagedown")
　　if t=10000 then
　　t:=6
　　else
　　t:=10000
　　end if
　　skey("pageup")

5、设置“向上”图标的快捷键为“pageup”，并且在其响应条件active if中输入：currentpagenum>1，这样相册在演示时，到了第1页时此按钮将会失去作用；设置“向下”图标的快捷键为“pagedown”，并且在其响应条件active if中输入：currentpagenumbr>

6、在框架图标中放置群组图标，在群组图标中再依次放置显示图标，等待图标，计算图标；在显示图标中输入：第{currentpagenum}张，共{pagecount}张，注意文字的位置在背景图的显示相关信息处，这样可以显示当前照片是第几张和一共多少张；双击打开等待图标，取消所有选项，在time limit中输入“t”，双击打开计算图标再输入：presskey("pagedown")，这里主要是实现自动播放；复制该群组图标若干份(视照片张数而定)，然后重新命名(参照图1)。

7、双击群组图标“fm”，导入作为首页的图片，并在“个人简介”位置处输入文字，如果文字太多可以使用滚动文本，选择text→scrolling命令即可，完成后观看效果，各个部分之间的位置关系如图5所示；利用同样的方法，加入其他的照片；这里要特别注意的是：用来显示照片的显示图标，一定要输入照片中人的姓名，否则后面的查找功能将不能实现预定目标。