《多媒體軟件開發(fā)》課件第14章

第14章Authorware7.0項目制作

14.1“活水公園”科普教育課件

14.2“三圣花鄉(xiāng)”多媒體展示系統(tǒng)

14.1“活水公園”科普教育課件14.1.1項目介紹本課件是為活水公園制作的一個科普教育課件，其主題是“我們周圍有多少水”，主要使用對象為中小學生。制作本課件的目的是讓學生在游覽活水公園的同時，通過該課件了解周圍常見植物和動物的含水量，從而養(yǎng)成節(jié)約用水、保護環(huán)境的良好習慣。該課件由四個部分構成：蔬菜瓜果含有多少水、地球表面水占有多少、人體內含有多少水和動物體內含有多少水。

14.1.2界面欣賞

由于本課件的主要使用對象是中小學生，因此，界面的制作風格顯得比較卡通。下面給出部分界面(本課件的所有界面的大小都是1024×768)。

圖14-1是主界面。其中有四個隱含的按鈕，分別是“蔬菜瓜果含有多少水”、“地球表面水占有多少”、“人體內含有多少水”和“動物體內含有多少水”。本圖是將鼠標移至左上角的“蔬菜瓜果含有多少水”按鈕上時的情況。

圖14-1圖14-2是點擊“蔬菜瓜果含有多少水”按鈕后出現(xiàn)的二級界面之一，也就是“問題一”界面。在屏幕下方有四個上下跳動的百分比數(shù)字，要求用戶點擊正確的數(shù)字。如果選擇錯誤，則屏幕上會給出“你答錯了！”的提示，同時，左上方的小孩會大哭起來；如果選擇正確，則屏幕上會給出“你答對了！”的提示，同時，屏幕上會有一個小天使飛過。單擊“返回”，可使程序回到主界面；單擊“下一個問題”，則進入“問題二”界面。

圖14-2圖14-3就是“蔬菜瓜果含有多少水”中的“問題二”的界面。屏幕上列出了5種常見的水果，要求用戶把每一種水果正確的含水量的數(shù)字拖到小方框內。如果選擇正確，則拖動的數(shù)字會穩(wěn)穩(wěn)地落在那個小方框內，同時，小方框旁邊會出現(xiàn)一個紅色的對鉤符號；如果選擇錯誤，則選擇的數(shù)字會自動回到原位，以便繼續(xù)選擇其它的數(shù)字。單擊“上一個問題”，可回到“問題一”界面；單擊“返回”，可回到主界面。圖14-3圖14-4是點擊按鈕“地球表面水占有多少”后的二級界面。在該界面中，用戶的操作分成三步。第一步是用吸管(也就是當前的光標)點擊屏幕中的地球。第二步是用吸管點一下右邊的空杯，則地球表面的正確的含水量就會在右邊顯示出來。其中右邊的第一個杯子中會出現(xiàn)一定的水，它和第二個杯子形成一個比例關系。第三步就是用吸管點擊下面的四個杯子之一以選擇正確的地球表面可被人類利用的水的百分比。屏幕左下方有一個計時的小鬧鐘，如果在規(guī)定的時間內沒有答對題目，或者是答對了題目，但沒有進行下一步操作，系統(tǒng)會自動返回到該題目的最開始，以便其他人來繼續(xù)答題。單擊右上角的“返回”，可回到主界面。

圖14-4圖14-5是點擊“人體內含有多少水”按鈕后進入的二級界面。在此圖中，拖動下面的小滑塊以選擇用戶認為正確的含水比例，釋放滑塊后，人體會被相應比例的水充滿。當拖動滑塊到正確的含水量百分比區(qū)域后，屏幕上會顯示“你答對了！”的提示。點擊右上角的“返回”，可回到主界面。

圖14-5圖14-6是點擊“動物體內含有多少水”按鈕后進入的二級界面。在此界面中，有5種含水量不同的動物。系統(tǒng)會定時出現(xiàn)問題，就是不同的含水量百分比。當出現(xiàn)某個含水量百分比時，用戶可點擊自己認為正確的動物。如果回答正確，則出現(xiàn)“恭喜你，答對了??！”的提示；如果回答不正確，則出現(xiàn)“你答錯了！”的提示。如果在規(guī)定的時間內沒有回答問題，則系統(tǒng)會自動跳到下一個含水量百分比的問題；如果在規(guī)定的時間內答錯了，則可繼續(xù)回答；如果答對了，則直接跳到下一個含水量百分比的問題。單擊左下角的“返回”，可回到主界面。

圖14-614.1.3制作過程

本項目的程序結構框圖如圖14-7所示。

圖14-7

1．程序流程

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

(2)進入“蔬菜瓜果”后的程序流程如圖14-9所示，其中交互響應里還有一個“返回”熱區(qū)響應沒有顯示出來。

圖14-8圖14-9進入“70%”熱對象后的程序流程如圖14-10所示。進入“75%”熱對象、進入“85%”熱對象后的程序流程和進入“70%”熱對象后的程序流程類似。進入“95%”熱對象后的程序流程如圖14-11所示。

圖14-10圖14-11進入“進入問題二”熱區(qū)后的程序流程如圖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)在“按鈕聲音”里導入聲音文件，并設置“播放次數(shù)”為“1”次，“執(zhí)行方式”為“等待直到完成”。

(2)在“問題一界面”顯示圖標里導入問題一主界面。

(3)依次導入各個Flash動畫，并參照界面圖里的效果安排它們的位置。

(4)在“選擇百分比”里，有4個熱對象，分別指向前面導入的4個百分比Flash動畫。進入“70%”后，“按鈕聲音”里還是導入前面用過的聲音文件；在“選擇錯誤的聲音”圖標里再導入另外一個提示錯誤的聲音文件；在“錯誤提示”顯示圖標里輸入“你答錯了！”；在“擦除”圖標里擦掉圖標“Flash_哭泣的小孩”、“錯誤提示”、“拿筆的小孩”；其它幾個圖標的命名都已經很清楚了，按照提示完成即可。

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

(6)進入“95%”后，也就是選擇正確答案后，會出現(xiàn)一顆彩色的白菜，即顯示圖標“彩色的大白菜”里的內容。同時，屏幕上會有一個小天使(Flash動畫)從右邊飛到左邊，這個效果是利用移動圖標“移動小天使”來完成的。移動圖標的屬性可參考圖14-19。在“正確提示”顯示圖標里輸入紅色的“你答對了！”的提示。在“返回”計算圖標中輸入以下代碼：

GoTo(IconID@"進入問題二")圖14-19

(7)在“返回”熱區(qū)的下掛計算圖標中輸入以下代碼：

GoTo(IconID@"主界面")

(8)進入“進入問題二”后，首先要擦掉前面的“Flash_娃娃”圖標，然后在“問題二界面”里導入問題二的主界面。為了防止在制作程序時不小心拖動了主界面，應在“問題二界面”的附屬計算圖標中輸入以下代碼：

Movable@"問題二界面":=0

(9)在“參數(shù)初始化”計算圖標中輸入以下代碼：

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個目標區(qū)交互響應，用于判斷用戶是否把正確的百分比數(shù)字拖動到了指定的區(qū)域。整個目標區(qū)的區(qū)域設置可參考圖14-20。其中有5個目標區(qū)對應于5個問號所在的區(qū)域，另外5個目標區(qū)對應于整個界面所在的范圍。當然，也可用一個目標區(qū)，勾選其屬性面板中的“允許任何對象”。目標區(qū)響應的屬性設置可參考圖14-21。對于其中的5個正確的響應區(qū)域，在“放下”選項里選擇“在中心定位”；而對于其中的5個錯誤的響應區(qū)域，在“放下”選項里選擇“返回”。進入“87%”后，在“顯示對勾”顯示圖標中導入一個紅色的對鉤符號，位置就在問號區(qū)域的左邊。在“判斷是否全部答對了”計算圖標中輸入以下代碼：

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)在“返回”熱區(qū)響應的下掛計算圖標中輸入以下代碼：

Movable@“Flash__87%”:=1

Movable@“Flash__70%”:=1

Movable@“Flash__5%”:=1

Movable@“Flash__95%”:=1

Movable@“Flash__97%”:=1

GoTo(IconID@“主界面”)

(13)在“上一個”問題熱區(qū)響應的下掛計算圖標中輸入以下代碼：

GoTo(IconID@"蔬菜瓜果")

3)地球

(1)在“地球上的水主界面”顯示圖標里導入制作好的二級界面。

(2)在“地球”顯示圖標里導入一張地球的圖片，并放置到合適的位置。

(3)在“設置光標樣式”計算圖標中輸入以下代碼(先把圖標文件mouse.ico放置到本程序所在文件夾下面)：

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

SetCursor(int)

click:=0

click2:=0

(4)在“返回”熱區(qū)響應的下掛計算圖標中輸入以下代碼：

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")在“顯示水杯中的水含量”顯示圖標中導入制作好的裝有水的杯子的圖片。為了體現(xiàn)水逐漸上升的感覺，可在該圖標的“特效”里設置“WipeUp”方式，如圖14-22所示。

在“click2=1”計算圖標中輸入以下代碼：

click2:=1

在“顯示提示文字”顯示圖標中輸入以下提示信息：

原來在地球表面水面積占70%

陸地占30%

“nu”計算圖標也是一個空計算圖標。

圖14-22

(6)在“點擊地球”熱區(qū)響應的下掛計算圖標中輸入以下代碼：

click:=1

(7)進入“9.7%”。在“判斷點擊順序”計算圖標中輸入以下代碼：

ifclick2=0then

GoTo(IconID@"提示點擊順序")

else

GoTo(IconID@"選擇錯誤提示")

endif在“提示點擊順序”顯示圖標中輸入以下內容：

請按照1-2-3的順序操作

在“gotonu3”計算圖標中輸入以下代碼：

GoTo(IconID@"nu3")

在“選擇錯誤提示”里輸入文字“你答錯了！”。

“nu3”是一個空計算圖標。

其它三個百分比熱區(qū)響應里的內容與此內容相似，請大家參照制作。

(8)“限時”設置為“30”秒，“中斷”選項設置為“繼續(xù)計時”，并勾選上“選項”里的“顯示剩余時間”。在“限時”響應的下掛計算圖標中輸入以下代碼：

set_anicur(WindowHandle,"")

SetCursor(0)

click:=0

click2:=0

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

4)動物

(1)在“動物含水量主界面”顯示圖標中導入界面圖。

(2)在“參數(shù)設置”計算圖標中輸入以下代碼：

s:=1

gotomain:=1

(3)“返回主界面”熱區(qū)響應是一個永久響應，同時，在它的“激活條件”里輸入“gotomain=1”，在它的下掛計算圖標中輸入以下代碼：

gotomain:=0

GoTo(IconID@"主界面")

(4)“順序”分支結構的設置如圖14-23所示。其中，在“重復”條件為“直到判斷值為真”里輸入的是“1=0”，這是一個不可能實現(xiàn)的條件，也就是說，這個分支結構會一直循環(huán)下去。

圖14-23

(5)進入“95%”。在“95%_pic”里導入圖片。交互響應里的“限時”設置成10秒，在其下掛計算圖標中輸入以下代碼：

s:=s+1

GoTo(IconID@"順序")

其中，s+1代表進入下一個分支，或者理解為進入下一題。進入“水母”熱區(qū)響應，在“回答正確提示”里輸入“恭喜你，答對了！！”。在“s:=s+1”計算圖標中輸入以下代碼：

s:=s+1

在“返回順序”計算圖標中輸入以下代碼：

GoTo(IconID@"順序")

其它幾個熱區(qū)響應里都只有一個顯示圖標，在其中輸入“你答錯了！”即可。

“順序”分支結構里的其它幾個百分比數(shù)字里的內容，與剛才所講的內容基本一樣，請大家參照制作。

5)人體

(1)在“人體含水主界面”顯示圖標中導入制作好的界面圖。

(2)在“hua=0”計算圖標中輸入以下代碼：

hua=0

(3)在“滑塊”顯示圖標中繪制或導入一個自制的小滑塊圖。

(4)在“返回主界面”熱區(qū)響應的下掛計算圖標中輸入以下代碼：

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“三圣花鄉(xiāng)”多媒體展示系統(tǒng)

14.2.1項目介紹

“三圣花鄉(xiāng)”多媒體展示系統(tǒng)全面地展示了錦江區(qū)推進城鄉(xiāng)一體化建設的概況，系統(tǒng)分別介紹了三圣鄉(xiāng)的“五朵金花”——花鄉(xiāng)農居、幸福梅林、江家菜地、東籬菊園、荷塘月色的概況。本展示系統(tǒng)配套有一個大型模型系統(tǒng)，通過多媒體系統(tǒng)連接單片機，并控制模型中的燈光，從而實現(xiàn)模型響應和多媒體展示相聯(lián)動，生動、真實地展現(xiàn)了錦江區(qū)推進城鄉(xiāng)一體化的建設成就。

14.2.2界面欣賞

本項目界面制作的目標就是突出三圣花鄉(xiāng)的美，很多素材圖片都是實景拍攝的。為了讓界面具有動態(tài)效果，主界面和二級界面都用FLASH來完成。整個界面中的主要文字都由中文、日文、韓文三種文字構成。

圖14-24是主界面。其中有5個一級欄目：電子地圖、專題影片、三圣花鄉(xiāng)簡介、三圣花鄉(xiāng)景區(qū)、大安橋產業(yè)區(qū)。由于展示大廳內是使用觸摸屏來播放多媒體的，故在主界面里還有一個隱藏的退出熱區(qū)，并有密碼要求，便于管理員的管理。

圖14-24圖14-25是進入“電子地圖”后的界面。其中凡是有“眼睛”圖標的代表VR景點，可進入查看景區(qū)的360度全景圖。右邊的“手動模型控制區(qū)”用于控制模型中的燈光。點擊相應的按鈕，可使模型中的對應燈光點亮，每個按鈕之間是互鎖控制的，即打開下一個點的燈光時，其余燈光全部熄滅。下面的“開始自動播放”按鈕可用于無人值守時，系統(tǒng)自動順序播放所有景點的360度全景漫游。

圖14-25圖14-26是進入“三圣花鄉(xiāng)簡介”后的界面。這是一個FLASH動畫，主要是介紹錦江區(qū)城鄉(xiāng)一體化建設的相關情況。

圖14-26圖14-27是進入“三圣花鄉(xiāng)景區(qū)”后的界面。其中，5個二級欄目——花鄉(xiāng)農居、幸福梅林、江家菜地、荷塘月色、東籬菊園，分別對應三圣鄉(xiāng)的“五朵金花”。

圖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)進入“三圣花鄉(xiāng)景區(qū)”后，其中的“農居”流程如圖14-39所示，其它幾個景區(qū)流程與此類似。

圖14-39

(4)進入“退出”后，其中的“確定”流程如圖14-40所示。

圖14-40

(5)進入“自動播放內容”后，其流程如圖14-41所示。

圖14-41

2．詳細內容

1)主界面

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

(2)在“gotomain=1”計算圖標中輸入以下代碼：

gotomain:=1

該變量用于控制“一級欄目”里的5個熱區(qū)的響應條件。

(3)在“一級欄目”的5個熱區(qū)響應的“激活條件”中均輸入“gotomain:=1”。

2)電子地圖

(1)進入“電子地圖”后，在擦除圖標中擦除“首頁FLASH”。

(2)在“gotomain=0”計算圖標中輸入“gotomain:=0”。

(3)在“電子地圖界面”顯示圖標中導入電子地圖二級界面。

(4)在“vr=1”計算圖標中輸入“vr:=1”，這個變量用于控制電子地圖中熱區(qū)響應的響應條件。

(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@"梅林")

上述三個熱區(qū)都是永久響應的。

圖14-42

“VR-loop”用于自動旋轉VR，分支循環(huán)條件為“直到判斷值為真”，具體條件是“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漫游景點集中到一起，自動播放一遍，完成后返回繼續(xù)播放。它的具體內容和上面講的“vr-2”類似。

3)三圣花鄉(xiāng)簡介

(1)在“擦除不需要的圖標”里擦除掉不需要的圖標。

(2)在“gotomain=0”計算圖標中輸入“gotomain:=0”。

(3)在“二級FLASH”里導入三圣花鄉(xiāng)簡介的FLASH動畫。

(4)在“返回首頁”計算圖標中輸入以下代碼：

GoTo(IconID@"首頁FLASH")

4)三圣花鄉(xiāng)景區(qū)

(1)“jingstart”計算圖標是一個空圖標，用于指示景區(qū)流程開始。

(2)在“gotomain=0”計算圖標中輸入“gotomain:=0”。

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

(4)做一個"WAIT"圖標是為了等FALSH動畫運行結束后才讓點其中的鏈接。

(5)在“jing=1”計算圖標中輸入“jing:=1”，這