滑鼠事件與跳頁簡報

前言: 我們在這一單元,讓舞台上的Sprite產生按鈕的功能,在不同的時間放入不同的圖片,利用滑鼠與Sprite產生事件,命令電腦跳至特定的Frame影格。

滑鼠事件

如果舞台上有一個Sprite,我們可以利用滑鼠與此Sprite產生下列的事件發生:

  1. on mouseEnter Me → 當游標移進某Sprite時的事件
  2. on mouseLeave Me → 當游標移進某Sprite後,再將游標從Sprite離開時的事件
  3. on mouseDown Me → 當游標移進某Sprite時,再按下左鍵時的事件
  4. on mouseUp Me → 當游標移進某Sprite時,再按下左鍵後再放開的事件
  5. on rightMouseDown Me當游標移進某Sprite時,再按下右鍵時的事件
  6. on rightMouseUp Me當游標移進某Sprite時,再按下右鍵後再放開的事件

※ 上述事件中的"Me",同學可以不用打,Director也會自然加上去。



 

現在我們來做一個作品,作品資料如下:

作品主題為:中華民國海軍新主力
作品背景:我海軍科技研發一日千里,在短短數年內研究出5種不同用途的軍用艦艇。
作品腳本:一開始為"中華民國海軍新主力"之文字與相關畫面,設計 2個按鈕,其功能分別為"跳至下一畫面"及"回前一畫面",整個作品以靜態圖片的簡報形式為主軸。
畫面尺寸: 640像素 X 480像素

製作步驟如下:

1. 請先Import 輸入 6張圖片及按鈕圖片,同學請在這裡下載

2. 我們設定每個Sprite在Stage停留時間為一個Frame,請選擇"選項列"的File →Perferences →Sprite

出現對話框之後,將Span欄位預設為 1 個Frame

 

3. 把片頭圖片及其他 5 張軍艦圖片分別依次放入 Score Window的Channel 1之Frame 1、 Frame 5 、 Frame 10、 Frame 15、 Frame 20、 Frame 25、 Frame 30

4. 在這6個Frame分為建立 6個 Marker(標籤),方法→ 將滑鼠游標移至Marker 建立欄,點一下左鍵則可在不同的Frame產生Marker,請同學用英文小寫在每Marker欄位命名,圖 1


圖 1

 

※ Marker的作用為替特定的Frame建立一個標籤名稱,以方便我們呼叫使用
※ 移動Marker的方法為→ 用滑鼠按住拖曳
※ 刪除Marker的方法為→ 用滑鼠按住拖曳,丟至Marker 建立欄之外

5. 將Frame 1之Behavior Script(行為)設定為停留 go the frame

※以後的課程,如果有提到某一格Frame設go the frame(或go to the frame),就是指上圖的程式內容

並且從Cast Window將此語言的Cast重複拖拉到其他 5的Frame。如圖 2
這樣每個畫面的Frame皆為停止,我們再去設計按鈕,讓按鈕按下去才會播放跳至下一個畫面Marker。

1
圖 2

語法也是一個Cast,所以可以被反複使用!!

6. 將Cast window的"next"之Cast拉至Score Window的Channel 2,產生Sprite 2 ,時間長度設為Frame 1至 Frame 20,並將它的位置移至Stage的右下方,如 圖 3


圖 3

7. 在Stage舞台上點選Sprite 2,游在出現Property Inspector屬性檢視視窗,先按Behavior選項,再按"+"產生一個New Behavior(記得給予有意義的命名,假設我們將此語法名稱命名為gonext),如 圖 4


圖 4

我們就產生一個新的Cast,而這個Cast的屬性是一段程式,且是寫在Sprite 2上面。

 

在出現的Behavior Script視窗中,再按Script Window按鈕來寫程式內容,請鍵入如 圖 5


圖 5

On mouseUp → 游標移至Sprite 2上面,按下左鍵放開時的事件發生時
go next → (命令)跳至下一個Marker畫面
end → 事件結束

8. 將Cast window的"previous"之Cast拉至Score Window的Channel 3,時間長度設為Frame 5 至 Frame 25,並將它的位置移至Stage的左下方

9. 在Score Window點選Sprite 3在Behavior Inspector行為檢視視窗,按"+"產生一個New Behavior(記得給予有意義的命名,假設我們將此語法名稱命名為gopre),再點選Script Window按鈕,即可撰寫Sprite 2的Lingo,內容如 圖 6


圖 6

On mouseUp → 游標移至Sprite 2上面,按下左鍵放開時的事件發生時
go previous → (命令)跳至上(前)一個Marker畫面
end → 事件結束

10. 預覽播放後,用滑鼠游標點選Sprite 2及Sprite 3這兩個按鈕,就會產生跳至下一畫面及上一畫面之效果。

 


本單元重要觀念補充:
1. go next,go previous都是在建立Marker之後,才能執行的Lingo語言
2. 本作品共有六個畫面,長度為 30Frame,所以"下一畫面"的按鈕Sprite長度為 Frame 1至Frame 20,"上一畫面"的按鈕Sprite長度為 Frame 5 至 Frame 25

回課程目錄》《下一課程