動畫初探

2012/08/03 謝碧景(c)編製更新

學習目標：

- 瞭解Scratch 動畫之『場景』製作(包含「舞台」與「角色」)，及『程式』設計。
- 瞭解Scratch 中媒體素材的蒐集、製作與應用。
- 學會『舞台』及『角色』之造型變化、聲音、及『程式碼』的編撰與應用。

學會在『Scratch官方網站』註冊申請帳號，並分享自己創作之作品。

一、設計步驟

Scratch官網 http://scratch.mit.edu

Scratch動畫或遊戲之設計：包含『場景』製作及『程式』編撰。『場景』包含了『舞台』及『角色』的製作，而舞台及角色的造型，皆可自行繪製圖案，或匯入外部點陣圖／向量圖，待『場景』布局完成後，再分別針對『舞台』或『角色』編撰『程式碼』，即可執行並產出動畫或遊戲作品。下圖為其操作技巧圖：

二、程式的基本結構

循序結構 (Sequence Structure)
條件結構 (Condition Structure)→控制指令區
重覆結構 (Repetition Structure)→控制指令區

三、範例應用

範例１：毛毛與炸彈。【重點：學會動畫的基本觀念：角色的造型切換、利用鍵盤方向鍵控制移動、及循序結構之應用】。執行畫面如下圖。(檔名：ex1-3.sb3) 分享

題目說明：

(1) 按下綠旗開始執行。

(2) 毛毛角色：利用鍵盤上、下、左、右鍵移動。

(3) 炸彈角色：當按下【空白鍵】炸彈開始爆炸。

bomb.sprite3

(4) 欲停止執行程式，則按下紅色按鈕。

1.【場景設計】

(1)新增專案：先【檔案→新建專案】，再於『角色區』的『貓咪』角色身上【按下右滑鼠鍵→選取『刪除』】，即刪除貓咪的角色。

Scratch 3.0 版：

Scratch 2.0 版：

(2)新增角色『毛毛』：

Scratch 3.0 版：在『角色區→選個角色』或上傳角色圖檔。

Scratch 2.0 版：()開啟角色檔案)，並命名為「毛毛」。

Scratch 3.0 版：

Scratch 2.0 版：

＊註：角色圖片去背(即背景為透明)：(1)在點矩陣模式下→(2)選取點陣繪圖工具中【以顏色填滿】→(3)再選取【不填色】→(4)點選欲去背之圖案，即可。教學影片

(3)繪畫『炸彈』角色：在『角色區』按下【繪畫】按鈕→進入【繪圖工具】→繪製炸彈，如下圖，分別繪製連續造型，並命名為「bomb」。

＊註：設定造型中心：選取角色→切换到造型頁籤→滑鼠框選該角色，即會顯示造型中心點＋標記，您可以滑鼠移动角色，設定造型中心點的位置。

Scratch 3.0 版：

Scratch 2.0 版：

(4)上傳『炸彈』角色：除自行繪製『角色』圖案外，亦可『匯入』外部圖檔，請在『角色區→上傳】按鈕』，接著選取欲匯入檔案 bomb.sprite3，舞台上即匯入並顯示『bomb』炸彈角色。

＊註：匯出『角色』：在角色身上【按下右滑鼠鍵→選取『匯出』】，即可產生Scratch Sprite (*.sprite3) 檔，以利角色圖檔的再應用。

2.【程式設計】

(1)毛毛角色利用鍵盤上、下、左、右鍵移動：選取「毛毛角色」→再選取「程式」頁籤，即可設計程式積木，如下圖。

Scratch 3.0 版：

Scratch 2.0 版：

(2)當按下【空白鍵】炸彈開始爆炸：選取「bomb角色」→再選取「程式」，編寫程式碼，如下圖。

Scratch 3.0 版：

Scratch 2.0 版：

(3)開始執行程式：按螢幕右上方的綠旗，利用鍵盤上、下、左、右鍵移動「毛毛角色」，當按下【空白鍵】顯示炸彈並開始爆炸。欲停止執行程式則按下紅色按鈕。

3.【存檔】：先為檔案命名，再選取【檔案→儲存】即可存檔。Scratch 3.0 版→附檔名為*.sb3，Scratch 2.0 版→附檔名為*.sb2，Scratch 1.4 版→附檔名為*.sb 教學影片。

Scratch 3.0 版：

Scratch 2.0 版：

簡述其功能：

新(New)：建立新專題(new project)。
儲存(Save now)：儲存目前正在使用的專題。
Save as a copy(另存新檔)：以新的專題名稱儲存，原專題檔案仍會保留。
Go to My Stuff(去我的空間)：線上版在登入後會對登錄者建立專屬的空間存放專題檔案。
上傳(Upload from your computer)：將本機中的專題檔案傳送到Scratch線上版_，附檔名為*.sb2。
下載到你的電腦(Download to your computer)：可將線上版之專題檔案下載至本機，供離線版使用，儲存名稱為『專題名稱.sb2』。
回到上一步(Revert)：按此功能，會回到開啟專題時的狀態。

延伸思考：炸彈隨機出現，當毛毛碰到炸彈，則炸彈開始爆炸。(檔名：ex1-3_bomb.sb3) 分享

【提示：隨機出現：運算→ 在兩個數之間取一個亂數。】

範例２：男孩以4個跳舞造型重複在舞台上跳舞 HipHop。【學到動畫的基本觀念：舞台、角色的造型、聲音、及重覆結構之程式碼編撰】。執行畫面如下圖。(檔名：ex1-4.sb3) 分享

題目說明：

(1) 舞台上以隨機產生顏色特效。

(2) 男孩在舞台上隨著音樂以4個不同造型跳舞 HipHop。

【提示：隨機產生顏色特效：運算→在兩個數之間取一個亂數。】

1.【場景設計】

(1)舞台背景圖：在【舞台區→選個背景】使用系統內建背景→Spotlight.jpg 如下圖。

Scratch 3.0 版：背景圖

舞台→選個背景圖 Spotlight

(2)舞台聲音：點選【音效】使用系統內建音效→Hip Hop.mp3 如下圖。

Scratch 3.0 版：

Scratch 2.0 版：音效→選擇聲音→hip hop

Scratch 1.4 版：

(Ⅰ)操作說明：起始場景佈置：變換舞臺的背景，可以「自行繪圖」或「匯入」新增舞臺的場景。

教學影片(Scratch 1.4 版)

舞台大小是480X360 (像素)，原點座標(0,0)在舞臺正中心，x 座標-240～240，y 座標180～180，右下角會顯示目前滑鼠座標位置。
- 設定舞台區：如下圖，設計中可隨時切換顯示為小舞台、大舞台、全螢幕。

(3)男孩角色：()開啟角色檔案(Scratch 2.0 版)，並匯入(或上傳)4個造型圖 Scratch\Media\Costumes\People\breakdancer-1.gif、breakdancer-2.gif、breakdancer-3.gif、breakdancer-4.gif，角色命名為「boy」，並按下【縮小角色】】。