---
tags: scratch
---
# 五分鐘學 Scratch EP.06 - 用 Scratch 做動畫

### :memo: 學習重點

- [ ] 了解動畫原理
- [ ] 認識 Scratch 的「造型」介面
- [ ] 如何使用「造型積木」製做動畫
- [ ] 如何分享作品

---

上次我們已經申請好屬於自己的 Scratch 帳號，也學會如何登人/登出 Scratch 帳號。從今天開始，我們每次的教學都要先登人 Scratch，以確保我們的作品都可以被儲存在雲端，如果不小心忘記怎麼登人，趕快到 :point_right: [上一次的教學](https://hackmd.io/@goattl/SJRAnpvc9)複習，登人自己的帳號再回來這次的教學吧！

<br>

- [x] <span style="color: red">我確定我已經登人自己的 Scrach 帳號了</span>

<br>

登入之後，讓我們先找到上一次的專案。點選右上角的資料夾圖案，打開我們的專案列表
<kbd>
<img src="https://i.imgur.com/aj4Pdix.jpg">
</kbd>
<br>

然後找到我們上次的專案，點選連結打開 (可以用專案名稱或者修改日期來判斷)
<kbd>
<img src="https://i.imgur.com/rwXdaxZ.jpg">
</kbd>
<br>

接著點選切換到程式頁面，就會看到我們熟悉的介面。
<kbd>
<img src="https://i.imgur.com/6rZRgu9.jpg">
</kbd>
<br>

準備就緒～接下來我們就要開始動畫的教學了。

<br>

### :cat: 動畫的原理
相信一定有很多同學喜歡看動畫或者卡通，那同學你們知道動畫或卡通是怎麼做出來的嗎？其實，動畫跟卡通，也是由一張一張的圖片組合起來的喔！我們的眼睛之所以可以看到東西，是因為眼睛接收到物體反射出來的光線，把光線的訊號透過神經傳到大腦，然後訊號經過大腦的處理才變成我們的視覺感受。

因為神經傳遞訊號和大腦處理訊號的速度是有極限的，一秒鐘最多只能處理 30~60 次視覺感受 (根據每個人身體條件還有光線的不同而定)，所以只要圖片的變換速度超過一秒鐘 30 次，我們看起來就會像是圖片很流暢地在運動。

下面是兩組同樣的圖片，我們可以發現把播放速度放慢，看起來就是一張一張的圖，但是把播放速度變快，看起來貓咪就在動了！(圖片來源：[Tenor](https://tenor.com/view/yaseen1-gif-25415559))

<img style="max-width: 50%" src="https://i.imgur.com/u4PV6XC.gif">
<img style="max-width: 50%" src="https://i.imgur.com/MvoM1Qd.gif">

<br>
<br>
<br>

這裡還有一個用書本畫動畫的 YouTube 影片，可以看到如果在書本上畫圖，翻頁翻快一點的時候圖片就會變成動畫。
<iframe width="853" height="480" src="https://www.youtube.com/embed/Un-BdBSOGKY"></iframe>

<br>
<br>

### :cat: 角色的「造型」
在 Scratch 中，動畫的原理是一模一樣的！我們只要把角色的圖片一張一張的畫好，然後用程式控制圖片的播放順序，我們的角色就會動起來。而這「一張一張的圖片」，我們就稱為「**造型**」

Scratch 中的每一個角色都由三個部分組成
1. **程式** - 就像表演的腳本，角色會照著程式給的指令在舞台上演出
2. **造型** - 就像表演的戲服，上台的時候穿著不同的衣服讓演出更好看，還可以擺出不同的姿勢增加戲劇效果。
3. **音效** - 就像表演的聲音效果，透過播放音樂或者讓表演者發出聲音，讓表演更生動

我們可以點選左方積木櫃上方的頁籤，在程式、造型與音效之間任意的切換

<br>
<br>

切換的同時我們可以發現，之前寫程式的工作區變成了編輯圖片或是音效的介面，編輯音效的功能我們以後才會分享，今天我們先介紹編輯圖片的介面，讓我們可以幫角色加上動畫，讓我們的專案看起來更生動有趣。

### :cat: 造型編輯介面

點選造型分頁，然後看一下這個介面有什麼有趣的東西。

<br>

| 介面 | 功能說明 |
| -------- | -------- |
| 造型列表 | 這裡會一張一張的顯示屬於這個角色的所有造型，列表會顯示每個造型的編號、名稱、大小以及縮圖。右上角的垃圾桶點下去會刪除目前選到的造型，小心不要按錯囉！ |
| 造型名稱 | 造型的名字，讓程式可以分辨每一個造型。如我我們沒有修改預設會是 custome 加上造型編號 |
| 繪圖工具 | Scratch 內建的畫圖工具，可以用這些工具做簡單的圖片編輯 |
| 上一步/下一步 | 編輯圖片的過程中，如果做錯了可以透過上一步/下一步來回到之前的狀態 |
| 縮放按鈕 | 可以放大、縮小或還原圖片的大小 |
| 視窗滑桿 | 當我們的圖片太大或者電腦螢幕太小的時候就會跑出這個滑桿，拖拉這個滑桿我們才可以看到整張圖畫 |

這些就是我們最常用的功能，我們可以用這些工具來編輯圖片或為角色設定造型。各位一定有發現介面上有些東西老師沒有介紹到，不過先別擔心，其他的是比較進階的功能，我們暫時不需要用到，我們以後會再額外用一堂課來介紹這些進階功能。

#### 繪圖工具

上面的列表中，有一個繪圖工具的區塊，裡面有許多小功能，讓我們來介紹幾個最常用的

| 圖示 | 工具名稱 | 功能說明 |
| -------- | -------- | -------- |
|  | 選取工具 | 用來點選或圈選圖片的工具，可以指定圖片編輯的功能要套用在哪個位置 |
|  | 畫筆 | 把指標變成彩色筆，搭配滑鼠或觸碰板就可以盡情的在圖片區畫畫 |
|  | 線條工具 | 讓 Scratch 幫我們畫出筆直的直線 |
|  | 橡皮擦 | 可以把畫錯或不喜歡的區塊擦掉重做 |
|  | 油漆桶 | 用指定的顏色把區塊圖滿 |
|  | 文字工具 | 可以用打字的方式「畫」出端正的字 |

#### 色彩選擇器

畫圖的時候一定要能選顏色，Scratch 的圖片編輯功能當然也能讓我們選顏色，現在，就讓我們點開繪圖工具上方「填滿」右邊的色塊，然後拉動色彩選擇器的滑桿，選出自己喜歡的顏色吧。


現在，就發揮你的想像力，使用繪圖工具為遙控貓咪的造型添增變化吧！

### :cat: 用程式做動畫
做了那麼多準備，我們終於可以來用 Scratch 做動畫了！就像我們剛剛說過的，動畫其實就是把一張一張的圖片照順序播放出來，那我們怎麼用程式積木做到一張一張播放的效果呢? 很簡單！先回到程式的分頁，然後在紫色的 <span style="color: #9933ff; font-weight: 600">外觀</span> 積木櫃找到「造型換成下一個」，把它組裝到遙控貓咪的「重複無限次」積木裡的最後面


接著點一下綠旗，就可以看到一隻... ... ... .. 腳抽筋的貓咪...

這是因為電腦的速度非常快，如果我們沒有請他暫停一下，它就會一直快速地幫我們更換造型，所以貓咪看起來才像腳抽筋一樣快速地顫抖。

要避免這種狀況的話，我們必須在橘色的 <span style="color: orange; font-weight: 600">控制</span> 積木櫃中找到「等待 ? 秒」積木，把它接在「造型換成下一個」積木後面，然後把 1 秒改成 0.2 秒，這樣看起來就會正常多囉，同學們也可以把 0.2 改成其他的數值，看看會有什麼效果。

<br>

### :cat: 分享專案

OK！現在我們已經做好有動畫的遙控貓咪了，接下來就可以把這個我們自己做的作品分享給朋友炫耀一下了！

點選專案上方的橘色分享按鈕，就可以把我們的作品公開，讓朋友可以查看、體驗我們的作品。為了讓別人可以方便快速的找到我們的專案，最好是把網址複製起來，再把這個網址分享給朋友，朋友只要在瀏覽器中貼上這個網址，就可以找到我們的作品囉！


好的～我們今天的課就到這邊～又學到很多東西吧！我們準備下課囉～
5 分鐘學 Scratch，我們下次見～