Microsoft Word - flashgamekid.doc

Size: px

Start display at page:

Download "Microsoft Word - flashgamekid.doc"

秩腾沈
7 years ago
Views:

1 簡易 Flash 小遊戲製作 Instructor: Mr. Bill Wu 輔助網址 :

2 Flash 工作環境重要概念 1. 時間軸 2. 圖層 3. 移動 (Motion) 動畫 = 物件要群組 (Group) 4. 變形 (Shape) 動畫 = 物件要打散 (Break) 導師 :Microstyle Computer billwu@microstyle.com 2 頁

3 1. 建立檔案建立檔案, 按鈕或執行 File/New 指令若要更改動畫大小及影格速度, 可執行 Modify/Document 指令建立的檔案預設值 : 1. 動畫大小 (Dimensions):550x400 像素 2. 影格速度 (Frame Rate): 每秒 12 格 3. 背景色彩 (Background color): 白色繪圖工具 :Flash 的繪圖工具與一般繪圖軟件如 Photoimpact 差不多, 用法亦相若 Arrow( 箭頭 ) 一般選取 Line( 線 ) 繪畫直線 Pen( 筆 ) 貝茲曲線繪圖筆 Oval( 橢圓形 ) 畫圓及橢圖 Pencil( 鉛筆 ) 自由畫線 Ink( 墨水瓶 ) 線條上色擷取顏色 Subselect( 副選擇 ) 編輯元件的線條 Lasso( 套索 ) 分割元件 Text( 文字 ) 加入文字 Rectangle( 矩形 ) 畫長方形及正方形 Brush( 筆刷 ) 填上顏色 Paint( 油漆桶 ) 範圍填色橡皮擦導師 :Microstyle Computer billwu@microstyle.com 3 頁

背景色彩 (Background color): 白色繪圖工具 :Flash 的繪圖工具與一般繪圖軟件如 Photoimpact 差不多, 用法亦相若 Arrow( 箭頭 ) 一般選取 Line( 線 ) 繪畫直線 Pen( 筆 ) 貝茲曲線

4 2. 製作背景 : 背景通常繪畫動畫中不動的部份 1. 按一下矩形工具鈕, 2. 在屬性工具列選擇線條顏色及風格之類, 在舞台畫一個方格導師 :Microstyle Computer billwu@microstyle.com 4 頁

5 3. 輸入文字 1. 按一下文字工具鈕, 2. 在圖像的適當位置按滑鼠一下, 輸入要加入的文字, 3. 利用屬性工具列設定文字的特效 4. 旋轉及改變文字大小 1. 按一下變形工具鈕, 2. 所選物件會出現在八個控制點, 你可以拖曳他們改變物件的大小與旋轉物件 5. 加入相片我們也可以在網上尋找一適當的圖片, 其中可用的網站是導師 :Microstyle Computer 5 頁

6 不過當然要注意版權了 1. 到網站選取你喜歡的圖片 2. 在圖片上按一按右鍵 3. 選擇複製 4. 返回 Flash 按一按右鍵選貼上導師 :Microstyle Computer 6 頁

7 4. 加入移動動畫背景圖層用來放不動的東西, 那麼動的東西就要放在另一個圖層了 1. 按一下插入圖層鈕, 2. 為免不小心移動了背景層的物件, 我們最好按一下鎖把 Layer 1 鎖上 3. 我們重複加入文字的步驟把文字放在 Layer2 上 (i) 本動畫預算約維持 2 秒, 播放速率為 12 fps( 每秒 12 格 ), 故在 Layer 1 及 Layer2 的第 24 格影格按右鍵選插入關鍵影格導師 :Microstyle Computer billwu@microstyle.com 7 頁

我們重複加入文字的步驟把文字放在 Layer2 上 (i) 本動畫預算約維持 2 秒, 播放速率為 12 fps( 每秒

8 (ii) 點選第 24 格影格, 把文字移至左上方 (iii) 將滑鼠游標移至 Layer2 的兩個關鍵影格之間按右鍵, 選擇 Create Motion Tween 導師 :Microstyle Computer 8 頁

9 (iv) 按 Enter 可直接預覽效果 (v) 可以按一下第一個關鍵影格選擇更多不同的動畫效果 4. 加入變形動畫同一圖層不可同一時間有兩個動畫, 所以這個變形動畫又要放在另一圖層了 1. 按一下插入圖層鈕, 2. 我們最好按一下鎖把 Layer 2 也鎖上 3. 在 Layer 3 輸入文字並在文字上按右鍵及選打散 (Break Apart) 導師 :Microstyle Computer billwu@microstyle.com 9 頁

10 (vi) 在 Layer 3 的第 24 格影格按右鍵選插入關鍵影格 Insert Keyframe 導師 :Microstyle Computer billwu@microstyle.com 10 頁

11 (vii) 點選第 24 格影格, 把原來文字刪除 (viii) 再輸入新文字, 調整好格式及位置後, 在文字上按右鍵及選打散 (Break Apart) (ix) 按一下 Layer 3 第一格, 在屬性選擇 Create Motion Tween 並在 Tween 屬性選形狀 shape (x) 按 Enter 可直接預覽效果導師 :Microstyle Computer billwu@microstyle.com 11 頁

12 6. 存檔及輸出成網頁 : 1. Flash 存檔與其他軟件沒有分別, 按檔案存檔, 接著選擇位置及輸入檔名即可要留意的是存檔類型是 *.fla, 這是給你日後修改的格式 2. 想要把它放到網頁上, 或寄給朋友欣賞, 可利用 Flash 做 public 的動作 3. 請點選檔案 --> 發佈設定 --> 格式即出現下圖導師 :Microstyle Computer billwu@microstyle.com 12 頁

13 4. 在類型勾選 Flash 及 HTML 兩部份或 exe 5. 設定完上述步驟, 接著請按上圖中的 Public, 即出現下圖的畫面 6. 在發佈完成後, 按下確定, 即完成此一發佈網頁的動作導師 :Microstyle Computer 13 頁

14 我們為今次課程製作一個簡單的按鈕來控制動畫示範網站先按右鍵來下載所需圖片 1. 建立檔案建立檔案, 按檔案開新檔案指令若要更改動畫大小及影格速度, 可執行修改 / 文件指令建立的檔案預設值 : 1. 動畫大小 (Dimensions):500x390 像素 2. 影格速度 (Frame Rate): 每秒 12 格 3. 背景色彩 (Background color): 白色導師 :Microstyle Computer billwu@microstyle.com 14 頁

15 兒童趣味電腦班 2. 製作背景背景通常繪畫動畫中不動的部份 1. 按一下檔案Æ匯入至舞台 2. 把圖片放好置正中 3. 輸入文字 1. 按一下文字工具鈕 2. 在圖像的適當位置按滑鼠一下輸入要加入的文字導師 Microstyle Computer 15 頁

16 3. 利用屬性工具列設定文字的特效 3. 放入主角 1. 按檔案匯入至元件庫 2. 按視窗元件庫來開啟元件庫窗格 3. 把元件庫中的 bear.gif 拖到舞台中導師 :Microstyle Computer 16 頁

17 3. 在熊人公仔上右鍵轉換成元件 4. 在名稱上輸入 bearwalk (i) 雙按熊仔, 留意上方變成 bearwalk, 即進入了 bearwalk 的元件編輯導師 :Microstyle Computer 17 頁

18 (ii) 在第 60 格右按插入關鍵影格. (iii) 把熊仔拖到左方導師 :Microstyle Computer 18 頁

19 (iv) 按一按第一格, 在屬性的補間動畫選移動 (v) 按一下動作, 輸入 stop(); (vi) 按一按場景 1 返回舞台導師 :Microstyle Computer billwu@microstyle.com 19 頁

20 (vii) 按一按熊仔, 在右下方屬性的實體名稱輸入 bear1 (viii) 按視窗內建元件庫按鈕 (ix) 把喜愛的按鈕拖到舞台導師 :Microstyle Computer 20 頁

21 (x) 按一下向上箭咀, 然後按一下動作 (xi) 按一下向上箭咀, 然後按一下動作輸入以下文字 on (press) { p=getproperty("/bear1",_y) p=p-5 setproperty("/bear1",_y, p); 導師 :Microstyle Computer billwu@microstyle.com 21 頁

22 } (xii) 按一下向下箭咀, 然後按一下動作輸入以下文字 on (press) { p=getproperty("/bear1",_y) p=p+5 setproperty("/bear1",_y, p); } (xiii) 按一下向左箭咀, 然後按一下動作輸入以下文字 on (press) { p=getproperty("/bear1",_x) p=p-5 setproperty("/bear1",_x, p); } (xiv) 按一下向右箭咀, 然後按一下動作輸入以下文字 on (press) { p=getproperty("/bear1",_x) p=p+5 setproperty("/bear1",_x, p); } 導師 :Microstyle Computer billwu@microstyle.com 22 頁

23 (xv) 按一按第一個圓型按鈕, 然後按一下動作輸入以下文字 on (press) { _root.bear1.gotoandplay(2) } (xvi) 按一按第二個圓型按鈕, 然後按一下動作輸入以下文字 on (press) { _root.bear1._visible=false; } (xvii) 類似的變數有以下幾種, 你可以試一試第三個按鈕 : _x 水平的數值 _y 垂直的高度 _xscale 水平比例 _yscale 垂直比例 _rotation 旋轉 _alpha 透明值 _visible 能否觀看 (xviii) 你可以按 Ctrl-Enter 來看一看效果導師 :Microstyle Computer billwu@microstyle.com 23 頁

24 抽獎遊戲先從互聯網選三至五張你喜愛的禮物圖片 1. 建立檔案建立檔案, 按檔案開新檔案指令若要更改動畫大小及影格速度, 可執行修改 / 文件指令建立的檔案預設值 : 1. 動畫大小 (Dimensions):550x400 像素 2. 影格速度 (Frame Rate): 每秒 12 格 3. 背景色彩 (Background color): 白色 2. 製作背景 : 背景通常繪畫動畫中不動的部份 1. 按一下檔案匯入至舞台 2. 把圖片放好置正中 3. 按一下文字工具鈕, 4. 在圖像的適當位置按滑鼠一下, 輸入要加入的文字, 4. 我們假試有四項禮物, 加上封面就是五格, 所以在第五格按右鍵, 選插入導師 :Microstyle Computer billwu@microstyle.com 24 頁

25 影格 5. 完全後照舊把圖層鎖定 3. 加入禮物層 1. 加入新圖層, 打上封面文字, 再在第二格右按插入空白關鍵影格 2. 在第二格影格放入文字及頭獎圖片導師 :Microstyle Computer 25 頁

26 3. 再在第三格右按插入關鍵影格, 製作二獎及三獎及安慰獎導師 :Microstyle Computer 26 頁

27 4. 完成後在每個關鍵影格加入動作, 這樣可以令動畫不動 stop(); 5. 完全後照舊把圖層鎖定 4. 加入按鈕 1. 加入新圖層 2. 視窗內建元件庫導師 :Microstyle Computer 27 頁

28 3. 在按鈕元件庫選兩個拖曳至舞台 4 雙按按鈕把文字一個改為 Start, 一個改為 Try Again 5 按回場景 1, 點一下 Start 按鈕, 在動作上加入以上命令 on (press) { a=random(4)+2 gotoandstop(a); } 6 點一下 Try Again 按鈕, 在動作上加入以上命令導師 :Microstyle Computer billwu@microstyle.com 28 頁

29 on (press) { } gotoandstop(1); 解釋 : Random(4) 命令是會由 0,1,2,3 隨意選一個出來, 所以要加回 2, 確保我們不會走到第 1 格想一想這樣太容易中大獎, 花要破產了, 如何是好??? 試試看, 用插入影格 (F5) 把時間軸改成 30 格, 分佈如下 : 把 Start 的動作命令改為 : on (press) { a=random(28)+2 gotoandstop(a); 想一想為何這樣中第一獎的機會就小了很多? } 導師 :Microstyle Computer billwu@microstyle.com 29 頁

30 Random 命令片段名稱 : hand 實體名稱 : hand1 Frame1 的 Action Script: startdrag(_root.hand1,true); 按鈕 frog 的 Action Script: 按鈕名稱 : frog 實體名稱 : frog1 on (press) { a=random(100) _root.frog1._x+=a-50 _root.frog1._y+=a-50 } 導師 :Microstyle Computer billwu@microstyle.com 30 頁

31 配合以上所學, 我們試做一個飛刀遊戲本遊戲可學習 hittest if. Else onclipevent 變數 :text 影片名稱 :target 實體名稱 :circle 影片名稱 :knife 實體名稱 :knife1 Action Script: onclipevent (enterframe) { if (_root.knife1, hittest(_root.circle)) { _root.text = "Great"; _root.knife1.stop(); _root.circle.stop(); } else { _root.text = "Miss"; } } Action Script: on (press) { p=getproperty("/knife1",_y) p=p+10 setproperty("/knife1",_y, p); } Action Script: on (press) { _root.knife1.gotoan dplay(2); } Action Script: on (press) { p=getproperty("/knife1",_y) p=p-10 setproperty("/knife1",_y, p); } 導師 :Microstyle Computer billwu@microstyle.com 31 頁

6-1-1極限的概念

6-1-1極限的概念選修數學 (I-4 多項式函數的極限與導數 - 導數與切線斜率定義. f ( 在的導數 : f ( h 對實函數 f ( 若極限存在 h h 則稱 f ( 在點可微分而此極限值稱為 f ( 在的導數以 f ( 表示 f ( f ( 函數 f ( 在的導數也可以表成 f ( 註 : 為了