《多媒体软件开发》课件第14章

第14章Authorware7.0项目制作

14.1“活水公园”科普教育课件

14.2“三圣花乡”多媒体展示系统

14.1“活水公园”科普教育课件14.1.1项目介绍本课件是为活水公园制作的一个科普教育课件，其主题是“我们周围有多少水”，主要使用对象为中小学生。制作本课件的目的是让学生在游览活水公园的同时，通过该课件了解周围常见植物和动物的含水量，从而养成节约用水、保护环境的良好习惯。该课件由四个部分构成：蔬菜瓜果含有多少水、地球表面水占有多少、人体内含有多少水和动物体内含有多少水。

14.1.2界面欣赏

由于本课件的主要使用对象是中小学生，因此，界面的制作风格显得比较卡通。下面给出部分界面(本课件的所有界面的大小都是1024×768)。

图14-1是主界面。其中有四个隐含的按钮，分别是“蔬菜瓜果含有多少水”、“地球表面水占有多少”、“人体内含有多少水”和“动物体内含有多少水”。本图是将鼠标移至左上角的“蔬菜瓜果含有多少水”按钮上时的情况。

图14-1图14-2是点击“蔬菜瓜果含有多少水”按钮后出现的二级界面之一，也就是“问题一”界面。在屏幕下方有四个上下跳动的百分比数字，要求用户点击正确的数字。如果选择错误，则屏幕上会给出“你答错了！”的提示，同时，左上方的小孩会大哭起来；如果选择正确，则屏幕上会给出“你答对了！”的提示，同时，屏幕上会有一个小天使飞过。单击“返回”，可使程序回到主界面；单击“下一个问题”，则进入“问题二”界面。

图14-2图14-3就是“蔬菜瓜果含有多少水”中的“问题二”的界面。屏幕上列出了5种常见的水果，要求用户把每一种水果正确的含水量的数字拖到小方框内。如果选择正确，则拖动的数字会稳稳地落在那个小方框内，同时，小方框旁边会出现一个红色的对钩符号；如果选择错误，则选择的数字会自动回到原位，以便继续选择其它的数字。单击“上一个问题”，可回到“问题一”界面；单击“返回”，可回到主界面。图14-3图14-4是点击按钮“地球表面水占有多少”后的二级界面。在该界面中，用户的操作分成三步。第一步是用吸管(也就是当前的光标)点击屏幕中的地球。第二步是用吸管点一下右边的空杯，则地球表面的正确的含水量就会在右边显示出来。其中右边的第一个杯子中会出现一定的水，它和第二个杯子形成一个比例关系。第三步就是用吸管点击下面的四个杯子之一以选择正确的地球表面可被人类利用的水的百分比。屏幕左下方有一个计时的小闹钟，如果在规定的时间内没有答对题目，或者是答对了题目，但没有进行下一步操作，系统会自动返回到该题目的最开始，以便其他人来继续答题。单击右上角的“返回”，可回到主界面。

图14-4图14-5是点击“人体内含有多少水”按钮后进入的二级界面。在此图中，拖动下面的小滑块以选择用户认为正确的含水比例，释放滑块后，人体会被相应比例的水充满。当拖动滑块到正确的含水量百分比区域后，屏幕上会显示“你答对了！”的提示。点击右上角的“返回”，可回到主界面。

图14-5图14-6是点击“动物体内含有多少水”按钮后进入的二级界面。在此界面中，有5种含水量不同的动物。系统会定时出现问题，就是不同的含水量百分比。当出现某个含水量百分比时，用户可点击自己认为正确的动物。如果回答正确，则出现“恭喜你，答对了！！”的提示；如果回答不正确，则出现“你答错了！”的提示。如果在规定的时间内没有回答问题，则系统会自动跳到下一个含水量百分比的问题；如果在规定的时间内答错了，则可继续回答；如果答对了，则直接跳到下一个含水量百分比的问题。单击左下角的“返回”，可回到主界面。

图14-614.1.3制作过程

本项目的程序结构框图如图14-7所示。

图14-7

1．程序流程

(1)主界面的程序流程如图14-8所示。

(2)进入“蔬菜瓜果”后的程序流程如图14-9所示，其中交互响应里还有一个“返回”热区响应没有显示出来。

图14-8图14-9进入“70%”热对象后的程序流程如图14-10所示。进入“75%”热对象、进入“85%”热对象后的程序流程和进入“70%”热对象后的程序流程类似。进入“95%”热对象后的程序流程如图14-11所示。

图14-10图14-11进入“进入问题二”热区后的程序流程如图14-12所示。由于交互响应下的图标较多，因此，本图片进行了适当处理，把所有的交互图标都列出来了。

图14-12进入“87%”和“87%_”后的程序流程如图14-13所示。后面的“70%”、“5%”、“95%”、“97%”内的程序流程跟“87%”里的程序流程相同(由于有程序跳转的原因，部分图标的命名有差异)；后面的“70_%”、“5_%”、“95_%”、“97_%”内的程序流程跟“87_%”里的程序流程相同(由于有程序跳转的原因，部分图标的命名有差异)。

图14-13

(3)进入“地球”后的程序流程如图14-14所示。其下级程序流程如图14-15所示。

(4)进入“动物”后的程序流程如图14-16所示，其中也包含了其下级程序流程。虽然图中只显示了“95%”下面的内容，但实际上，另外几个图标中的程序结果都是一样的。所不同的是，其中的正确答案不一样。

图14-14图14-15图14-16

(5)进入“人体”后的程序流程如图14-17所示，其中也包含了其下级程序流程。

图14-17

2．详细内容

1)主界面

(1)在“主界面”显示图标里导入制作好的主界面图片。

(2)“主程序开始”交互里的4个按钮都是自定义按钮，需要单独制作，如图14-18所示。

图14-18

2)蔬菜瓜果

(1)在“按钮声音”里导入声音文件，并设置“播放次数”为“1”次，“执行方式”为“等待直到完成”。

(2)在“问题一界面”显示图标里导入问题一主界面。

(3)依次导入各个Flash动画，并参照界面图里的效果安排它们的位置。

(4)在“选择百分比”里，有4个热对象，分别指向前面导入的4个百分比Flash动画。进入“70%”后，“按钮声音”里还是导入前面用过的声音文件；在“选择错误的声音”图标里再导入另外一个提示错误的声音文件；在“错误提示”显示图标里输入“你答错了！”；在“擦除”图标里擦掉图标“Flash_哭泣的小孩”、“错误提示”、“拿笔的小孩”；其它几个图标的命名都已经很清楚了，按照提示完成即可。

(5)“75%”、“85%”里的内容和“70%”里的内容完全一样。

(6)进入“95%”后，也就是选择正确答案后，会出现一颗彩色的白菜，即显示图标“彩色的大白菜”里的内容。同时，屏幕上会有一个小天使(Flash动画)从右边飞到左边，这个效果是利用移动图标“移动小天使”来完成的。移动图标的属性可参考图14-19。在“正确提示”显示图标里输入红色的“你答对了！”的提示。在“返回”计算图标中输入以下代码：

GoTo(IconID@"进入问题二")图14-19

(7)在“返回”热区的下挂计算图标中输入以下代码：

GoTo(IconID@"主界面")

(8)进入“进入问题二”后，首先要擦掉前面的“Flash_娃娃”图标，然后在“问题二界面”里导入问题二的主界面。为了防止在制作程序时不小心拖动了主界面，应在“问题二界面”的附属计算图标中输入以下代码：

Movable@"问题二界面":=0

(9)在“参数初始化”计算图标中输入以下代码：

n87:=0

n70:=0

n5:=0

n95:=0

n97:=0

Movable@"Flash__87%":=1

Movable@"Flash__70%":=1

Movable@"Flash__5%":=1

Movable@"Flash__95%":=1

Movable@"Flash__97%":=1

(10)依次导入几个Flash动画文件，并按照效果图排列好它们的位置。

(11)有10个目标区交互响应，用于判断用户是否把正确的百分比数字拖动到了指定的区域。整个目标区的区域设置可参考图14-20。其中有5个目标区对应于5个问号所在的区域，另外5个目标区对应于整个界面所在的范围。当然，也可用一个目标区，勾选其属性面板中的“允许任何对象”。目标区响应的属性设置可参考图14-21。对于其中的5个正确的响应区域，在“放下”选项里选择“在中心定位”；而对于其中的5个错误的响应区域，在“放下”选项里选择“返回”。进入“87%”后，在“显示对勾”显示图标中导入一个红色的对钩符号，位置就在问号区域的左边。在“判断是否全部答对了”计算图标中输入以下代码：

Movable@"Flash__87%":=0

n87:=1

ifn87=1&n70=1&n5=1&n95=1&n97=1then

GoTo(IconID@"全部答对了")

else

GoTo(IconID@"null2")

endif图14-20图14-21

(12)在“返回”热区响应的下挂计算图标中输入以下代码：

Movable@“Flash__87%”:=1

Movable@“Flash__70%”:=1

Movable@“Flash__5%”:=1

Movable@“Flash__95%”:=1

Movable@“Flash__97%”:=1

GoTo(IconID@“主界面”)

(13)在“上一个”问题热区响应的下挂计算图标中输入以下代码：

GoTo(IconID@"蔬菜瓜果")

3)地球

(1)在“地球上的水主界面”显示图标里导入制作好的二级界面。

(2)在“地球”显示图标里导入一张地球的图片，并放置到合适的位置。

(3)在“设置光标样式”计算图标中输入以下代码(先把图标文件mouse.ico放置到本程序所在文件夹下面)：

int:=set_anicur(WindowHandle,"mouse.ico")

SetCursor(int)

click:=0

click2:=0

(4)在“返回”热区响应的下挂计算图标中输入以下代码：

set_anicur(WindowHandle,"")

SetCursor(0)

click:=0

click2:=0

GoTo(IconID@"主界面")

(5)进入“点击水杯”。在“判断操作顺序”计算图标中输入以下代码：

ifclick=0then

GoTo(IconID@"提示信息")

else

GoTo(IconID@"显示水杯中的水含量")

endif

在“提示信息”显示图标中输入以下内容：

请按照1-2-3的顺序操作

在“跳转”计算图标中输入以下代码：

GoTo(IconID@"nu")在“显示水杯中的水含量”显示图标中导入制作好的装有水的杯子的图片。为了体现水逐渐上升的感觉，可在该图标的“特效”里设置“WipeUp”方式，如图14-22所示。

在“click2=1”计算图标中输入以下代码：

click2:=1

在“显示提示文字”显示图标中输入以下提示信息：

原来在地球表面水面积占70%

陆地占30%

“nu”计算图标也是一个空计算图标。

图14-22

(6)在“点击地球”热区响应的下挂计算图标中输入以下代码：

click:=1

(7)进入“9.7%”。在“判断点击顺序”计算图标中输入以下代码：

ifclick2=0then

GoTo(IconID@"提示点击顺序")

else

GoTo(IconID@"选择错误提示")

endif在“提示点击顺序”显示图标中输入以下内容：

请按照1-2-3的顺序操作

在“gotonu3”计算图标中输入以下代码：

GoTo(IconID@"nu3")

在“选择错误提示”里输入文字“你答错了！”。

“nu3”是一个空计算图标。

其它三个百分比热区响应里的内容与此内容相似，请大家参照制作。

(8)“限时”设置为“30”秒，“中断”选项设置为“继续计时”，并勾选上“选项”里的“显示剩余时间”。在“限时”响应的下挂计算图标中输入以下代码：

set_anicur(WindowHandle,"")

SetCursor(0)

click:=0

click2:=0

GoTo(IconID@"地球上的水主界面")

4)动物

(1)在“动物含水量主界面”显示图标中导入界面图。

(2)在“参数设置”计算图标中输入以下代码：

s:=1

gotomain:=1

(3)“返回主界面”热区响应是一个永久响应，同时，在它的“激活条件”里输入“gotomain=1”，在它的下挂计算图标中输入以下代码：

gotomain:=0

GoTo(IconID@"主界面")

(4)“顺序”分支结构的设置如图14-23所示。其中，在“重复”条件为“直到判断值为真”里输入的是“1=0”，这是一个不可能实现的条件，也就是说，这个分支结构会一直循环下去。

图14-23

(5)进入“95%”。在“95%_pic”里导入图片。交互响应里的“限时”设置成10秒，在其下挂计算图标中输入以下代码：

s:=s+1

GoTo(IconID@"顺序")

其中，s+1代表进入下一个分支，或者理解为进入下一题。进入“水母”热区响应，在“回答正确提示”里输入“恭喜你，答对了！！”。在“s:=s+1”计算图标中输入以下代码：

s:=s+1

在“返回顺序”计算图标中输入以下代码：

GoTo(IconID@"顺序")

其它几个热区响应里都只有一个显示图标，在其中输入“你答错了！”即可。

“顺序”分支结构里的其它几个百分比数字里的内容，与刚才所讲的内容基本一样，请大家参照制作。

5)人体

(1)在“人体含水主界面”显示图标中导入制作好的界面图。

(2)在“hua=0”计算图标中输入以下代码：

hua=0

(3)在“滑块”显示图标中绘制或导入一个自制的小滑块图。

(4)在“返回主界面”热区响应的下挂计算图标中输入以下代码：

GoTo(IconID@"主界面")

(5)将条件响应“Dragging@"滑块"=0”的“自动”选项设置为“当由假为真”。进入该响应后，在“判断滑块位置”计算图标中输入以下代码：

huax:=100-PositionX@"滑块"

ifhuax>0then

hua:=1

endif

ifhuax>7then

hua:=2

endif

ifhuax>25.35then

hua:=3

endif

ifhuax>44then

hua:=4

endif

ifhuax>63then

hua:=5

endif

ifhuax>72then

hua:=5.5

endif

ifhuax>81then

hua:=6

endif

ifhua=1then

GoTo(IconID@"ren30")

endif

ifhua=2then

GoTo(IconID@"ren40")

endif

ifhua=3then

GoTo(IconID@"ren50")

endif

ifhua=4then

GoTo(IconID@"ren60")

endif

ifhua=5then

GoTo(IconID@"ren70")endif

ifhua=5.5then

GoTo(IconID@"ren71")

endif

ifhua=6then

GoTo(IconID@"ren80")

endif14.2“三圣花乡”多媒体展示系统

14.2.1项目介绍

“三圣花乡”多媒体展示系统全面地展示了锦江区推进城乡一体化建设的概况，系统分别介绍了三圣乡的“五朵金花”——花乡农居、幸福梅林、江家菜地、东篱菊园、荷塘月色的概况。本展示系统配套有一个大型模型系统，通过多媒体系统连接单片机，并控制模型中的灯光，从而实现模型响应和多媒体展示相联动，生动、真实地展现了锦江区推进城乡一体化的建设成就。

14.2.2界面欣赏

本项目界面制作的目标就是突出三圣花乡的美，很多素材图片都是实景拍摄的。为了让界面具有动态效果，主界面和二级界面都用FLASH来完成。整个界面中的主要文字都由中文、日文、韩文三种文字构成。

图14-24是主界面。其中有5个一级栏目：电子地图、专题影片、三圣花乡简介、三圣花乡景区、大安桥产业区。由于展示大厅内是使用触摸屏来播放多媒体的，故在主界面里还有一个隐藏的退出热区，并有密码要求，便于管理员的管理。

图14-24图14-25是进入“电子地图”后的界面。其中凡是有“眼睛”图标的代表VR景点，可进入查看景区的360度全景图。右边的“手动模型控制区”用于控制模型中的灯光。点击相应的按钮，可使模型中的对应灯光点亮，每个按钮之间是互锁控制的，即打开下一个点的灯光时，其余灯光全部熄灭。下面的“开始自动播放”按钮可用于无人值守时，系统自动顺序播放所有景点的360度全景漫游。

图14-25图14-26是进入“三圣花乡简介”后的界面。这是一个FLASH动画，主要是介绍锦江区城乡一体化建设的相关情况。

图14-26图14-27是进入“三圣花乡景区”后的界面。其中，5个二级栏目——花乡农居、幸福梅林、江家菜地、荷塘月色、东篱菊园，分别对应三圣乡的“五朵金花”。

图14-27图14-28图14-29图14-30图14-31图14-32图14-33图14-34是进入VR景点漫游后的界面。该VR是使用QuickTime制作的，可使用鼠标在其中拖动以查看360度全景图。不拖动时，全景图会自动旋转播放。下面有两个按钮，可分别进入下一个景点和返回电子地图。

图14-34图14-3514.2.3制作过程

本项目的程序结构框图如图14-36所示。

图14-36

1．程序流程

(1)本项目的主要程序流程如图14-37所示。

图14-37

(2)进入“电子地图”后，其中的“vr2”流程如图14-38所示，其余vr流程与此类似。

图14-38

(3)进入“三圣花乡景区”后，其中的“农居”流程如图14-39所示，其它几个景区流程与此类似。

图14-39

(4)进入“退出”后，其中的“确定”流程如图14-40所示。

图14-40

(5)进入“自动播放内容”后，其流程如图14-41所示。

图14-41

2．详细内容

1)主界面

(1)在“首页FLASH”里导入主界面FLASH文件。

(2)在“gotomain=1”计算图标中输入以下代码：

gotomain:=1

该变量用于控制“一级栏目”里的5个热区的响应条件。

(3)在“一级栏目”的5个热区响应的“激活条件”中均输入“gotomain:=1”。

2)电子地图

(1)进入“电子地图”后，在擦除图标中擦除“首页FLASH”。

(2)在“gotomain=0”计算图标中输入“gotomain:=0”。

(3)在“电子地图界面”显示图标中导入电子地图二级界面。

(4)在“vr=1”计算图标中输入“vr:=1”，这个变量用于控制电子地图中热区响应的响应条件。

(5)进入“vr2”。在“vr=0”计算图标中输入以下代码：

vr:=0

clickoutx:=ClickX

clickouty:=ClickY

在“stop=0”计算图标中输入“stop:=0”。

在“3级-VR界面-手动”显示图标中导入VR播放界面图。

在“景点提示文字”显示图标中根据当前景点添加景点名称提示文字。

在“vr2=1”计算图标中输入“vr2:=1”。

在“返回电子地图”计算图标中输入以下代码：

vr2:=0

GoTo(IconID@"电子地图界面")

在“进入下一景点”计算图标中输入以下代码：

vr2:=1

GoTo(IconID@"vr3")

在“进入景点详细介绍”计算图标中输入以下代码：

vr2:=0

GoTo(IconID@"梅林")

上述三个热区都是永久响应的。

图14-42

“VR-loop”用于自动旋转VR，分支循环条件为“直到判断值为真”，具体条件是“stop=1”。在“VR-loop”的下挂计算图标中输入以下代码：

currentPanAngle:=GetSpriteProperty(@"vr-2",#VRPan)

SetSpriteProperty(@"vr-2",#VRPan,currentPanAngle+0.1)

ifClickX>196&ClickX<1018&ClickY>90&ClickY<512&ClickX<>clickoutx&ClickY<>clickoutythenstop:=1

其它VR图标中的内容与上面所讲的内容完全类似。

(6)“autostart”计算图标中无实际内容，主要用于标识自动播放开始。

(7)“自动播放内容”中是把所有的VR漫游景点集中到一起，自动播放一遍，完成后返回继续播放。它的具体内容和上面讲的“vr-2”类似。

3)三圣花乡简介

(1)在“擦除不需要的图标”里擦除掉不需要的图标。

(2)在“gotomain=0”计算图标中输入“gotomain:=0”。

(3)在“二级FLASH”里导入三圣花乡简介的FLASH动画。

(4)在“返回首页”计算图标中输入以下代码：

GoTo(IconID@"首页FLASH")

4)三圣花乡景区

(1)“jingstart”计算图标是一个空图标，用于指示景区流程开始。

(2)在“gotomain=0”计算图标中输入“gotomain:=0”。

(3)在“擦除首页FLASH”里擦除掉首页FLASH界面。

(4)做一个"WAIT"图标是为了等FALSH动画运行结束后才让点其中的链接。

(5)在“jing=1”计算图标中输入“jing:=1”，这