Scratch‎ > ‎

動畫初探

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

 學習目標:

  • 瞭解Scratch 動畫之『場景』製作(包含「舞台」與「角色」),及『程式』設計。
  • 瞭解Scratch 中媒體素材的蒐集、製作與應用。
  • 學會『舞台』及『角色』之造型變化、聲音、及『程式碼』的編撰與應用。
  • 學會在『Scratch官方網站』註冊申請帳號,並分享自己創作之作品

一、設計步驟 Scratch官網 http://scratch.mit.edu

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


二、程式的基本結構

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

三、範例應用

  • 本單元使用之範例圖檔可由Scratch 1.4 版安裝後 C:\Program Files (x86)\Scratch\Media 取得。
 範例1:毛毛與炸彈。【重點:學會動畫的基本觀念:角色的造型切換、利用鍵盤方向鍵控制移動、及循序結構之應用】。執行畫面如下圖。(檔名:ex1-3.sb2)  分享

  • 題目說明:
(1) 按下綠旗開始執行。  

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

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

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

1.【場景設計】

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

 Scratch 2.0 版:
 Scratch 1.4 版:


(2)新增角色『毛毛』()開啟角色檔案 Scratch\Media\Costumes\Fantasy\fantasy11.png,並命名為「毛毛」。

role

(3)新增『炸彈』角色:『角色區』按下【 繪製新角色】按鈕→進入【繪圖工具】→繪製炸彈,如下圖,分別繪製連續造型,並命名為「bomb

bomb-造型

(4)上項步驟,在『新增角色』時除了自行繪製圖案外,亦可匯入外部圖檔,如下操作:『角色區』按下【()開啟角色檔案】按鈕→進入新增角色視窗匯入 bomb.sprite 圖檔,即自動匯入bomb」角色;接著在bomb」角色身上【按下右滑鼠鍵→選取『顯示』】,舞台上即會顯示炸彈』角色。

()開啟角色檔案】→新增角色視窗匯入  bomb.sprite 圖檔。
 在bomb」角色按下右滑鼠鍵→選取『顯示』。
*註:在現有『角色』身上【按下右滑鼠鍵→選取『匯出此角色』】,即可產生Scratch Sprite (.sprite)檔,以利匯入其他角色應用。


2.【程式設計

(1)毛毛角色利用鍵盤上、下、左、右鍵移動:選取「毛毛角色」→再選取「程式」,編寫程式碼,如下圖。

毛毛-program

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

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

3.【存檔】:檔案→Save as a copy(另存新檔)Scratch 2.0 版→附檔名為*.sb2,Scratch 1.4 版→附檔名為*.sbtv 教學影片

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.sb2 分享
【提示:隨機出現:運算在兩個數之間取一個亂數。】


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

ex2-2_執行畫面
 
  • 題目說明:
(1) 舞台上以隨機產生顏色特效

(2) 男孩在舞台上隨著音樂以4個不同造型跳舞 HipHop
【提示:隨機產生顏色特效:運算→在兩個數之間取一個亂數。】

1.【場景設計】

(1)舞台背景圖:選取【舞台】→點選 使用系統內建背景→匯入 Scratch\Media\Backgrounds\Indoors\spotlight-stage.jpg

舞台→選擇背景spotlight-stage
spotlight-stage.jpg
stage

→舞台聲音:在腳本區【 聲音 】Scratch\Media\Sounds\Music Loops\HipHop.mp3

Scratch 2.0 版:音效→選擇聲音→hip hop
 Scratch 1.4 版:
stage-sound

()操作說明:起始場景佈置:變換舞臺的背景,可以自行繪圖或「匯入」新增舞臺的場景。tv 教學影片(Scratch 1.4 版)

舞臺區
  • 舞台大小是480X360 (像素),原點座標(0,0)在舞臺正中心,x 座標-240~240,y 座標180~180,右下角會顯示目前滑鼠座標位置。 
  • copy 複製角色、delete 刪除角色、enlarge 放大角色、narrow 縮小角色。
  • small_stage 切換為小舞台、large_stage 切換為大舞台、full_screen 切換為全螢。


(2)男孩角色:()開啟角色檔案,並匯入4個造型圖 Scratch\Media\Costumes\People\breakdancer-1.gif、breakdancer-2.gif、breakdancer-3.gif、breakdancer-4.gif

→角色命名為「boy」,並按下【縮小角色】】。

breakdancer-1.gif
breakdancer-1.gif
breakdancer-2.gif
 
breakdancer-2.gif
 
breakdancer-3.gif
breakdancer-3.gif
 
breakdancer-4.gif
breakdancer-4.gif
boy-role

()操作說明:

  • 起始角色佈置:新增男孩角色+匯入3個舞蹈造型圖+刪除角色。tv 教學影片

※ 繪圖編輯器:需注意角色圖之【設定造型中心】點。
繪圖編輯器
  • 安排舞台聲音:先選取【舞台】再至腳本區中選取【聲音】面板設定。tv 教學影片


2.【程式設計

(1)安排舞台的程式:先選取「舞台」→再選取「程式」,編寫程式碼,如下圖;只需從【指令區】拖曳指令積木到腳本區的程式面板。tv 教學影片

stage-program


(2)安排角色的程式:選取「boy角色」→再選取「程式」,編寫程式碼,如下圖;只需從【指令區】拖曳指令積木到腳本區的程式面板。tv 教學影片

Scratch 2.0 版:
 Scratch 1.4 版:
boy-program

(3)角色程式碼中增設角色的起始狀態:即起初值 tv 教學影片

(4)測試程式:按右上方的綠旗 即執行程式,欲停止執行程式則按下紅色按鈕stop


3.【存檔】:檔案→Save as a copy(另存新檔)Scratch 2.0 版→附檔名為*.sb2,Scratch 1.4 版→附檔名為*.sbtv 教學影片



homework  作業1:機器人共舞【重點:學會指令區積木、腳本區、及複製角色之應用】。(檔名:ex1-5_robot.sb2 分享   延伸學習:〈角色分身積木

 
 
  • 題目說明:機器人共舞,左右移動,當碰到邊緣即反彈,請增加顏色特效或造型變化。
    • 機器人角色:4個機器人在x軸隨機出現,開啟角色檔案 Scratch\Media\Costumes\Fantasy\robot3.gif
    • 音效參考: Scratch\Media\Sounds\
    • 舞台參考: Scratch\Media\Backgrounds\Indoors\
*註:角色圖片去背(即背景為透明):(1)在點矩陣模式下→(2)選取點陣繪圖工具中【以顏色填滿】→(3)再選取【不填色】→(4)點選欲去背之圖案,即可。tv 教學影片

homework 作業2:我變、我變、我變變變。【重點:學會指令區積木、腳本區、及角色匯入gif 動畫圖片之創意應用】。(檔名:ex1-6_sprites_gif.sb2)
  • 題目說明:請連線『Google圖片』 GIF動畫圖片,再匯入角色,編撰角色程式,讓造型變變變。(圖片搜尋→百度圖片[例:聖誕節])
ċ
bomb.sprite
(11k)
Jing Tw,
2012年10月14日 下午9:29