我們一起來說一個故事吧!你喜歡聽故事嗎?你最喜歡的故事又是什麼呢?
這個牛刀小試(ThingsToTry)程式設計活動將一步步引導你使用Scratch:製作一個發生在春天的故事,讓熊熊們跟樹木爺爺在草原上相遇、對話...
一起來製作這個故事,並發揮想像力加入新的故事情節吧!
聲明:內容與圖像版權歸屬於 SCRATCH.MIT.EDU 與CARTOON NETWORK。
由Scratch-TW進行中文化編輯、翻譯與衍生創作,製作者:方毓賢(YU HSIEN FANG)。
引用來源:https://scratch.mit.edu/go/create a story
使用Scratch,兒童與青少年可以編寫程式來創作專屬的遊戲、故事、動畫以及更多的可能性。透過這個一個小時的Scratch活動,參與者將藉由創作一個春天的故事來獲得寫程式的經驗。完成的故事也可透過網路分享給其他人。
MIT Scratch Team團隊提供了以下的教學素材與建議,可協助老師將這個活動帶入教室、圖書館或其他學習場所:
準備好開始了嗎?我們的建議如下
- 請先閱讀以下的活動指引,留意活動需準備的事項,建議導引者自己完整實作一次。
- 下載教育者指南中文版,導引者可更了解如何籌備教學活動。
- 下載活動卡片中文版,可印發給學員們。
- 前往ThinkinViz協力製作的春天的故事:熊熊們與樹木爺爺-教學範例頁面,創作春天的故事。
- 如果遇到困難,可參考由ThinkinViz協力製作的Scratch Project: 春天的故事:熊熊們與樹木爺爺 Remix。
第1步
活動前準備
- 確認活動場所是否有「網際網路連線」。這是一個需要電腦設備與網路連線的活動,務必事先確認。
- 建議教師可準備投影設備(例如:投影機)以便讓學生看見操作畫面。
- 學習註冊Scratch帳號,詳細步驟請查閱:Scratch註冊指引。
- 試玩春天的故事:熊熊們與樹木爺爺 Remix,來激發靈感。
project: 春天的故事:熊熊們與樹木爺爺 Remix (*僅於電腦上操作),點綠色旗子開始;點紅色圖示停止。
第2步
開始程式設計
1. 註冊並登入Scratch
引導學生前往Scratch網站,註冊Scratch帳號並登入。
2. 簡單的說一下:春天的故事
第一幕:草原上
- 樹木爺爺身上的最後一片葉子,掉落下來...
- 熊熊們看見樹木爺爺,光禿禿的,好可憐。要怎麼辦呢?
第二幕:熊熊們的房間
- 熊熊們找出了圍巾,要拿給樹木爺爺...
第三幕:草原上;熊熊們與樹木爺爺進行圖畫中的對話...
引導學生前往:春天的故事:熊熊們與樹木爺爺-教學範例,準備開始創作故事。
3. 故事開場
按下綠色旗子,切換到第一個場景,開始製作故事。
現在,所有的角色都一起出現在舞台上,等待導演(也就是你)安排他們要做些什麼事情。
首先,滑鼠點一下「舞台」
藍色外框表示,你現在選擇的是舞台,例如下圖:
點一下「背景」分頁。現在,我們有兩個不同的背景:一個是「草地」、一個是「房間」。
故事的第一幕是發生在草地上,所以故事開場時,要將舞台換成「草地」。
加入以下的程式積木:
程式積木如下:
將兩片積木組合,黏疊在一起。
現在,使用滑鼠點一下綠色旗子:
舞台背景是不是變成「草地」了呢? 很好!
我們要開始製作故事囉
4. 角色的顯示/隱藏
安排每一幕中,哪些角色要出現在舞台上、哪些角色要隱藏。
在第一幕中,出現的角色只有「樹木爺爺」與「葉子」。
讓其他的角色都先隱藏起來,包含:「熊熊們」、「圍巾」、「故事結束」。
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式積木:
程式積木如下:
將兩片積木組合,黏疊在一起。
現在,使用滑鼠點一下綠色旗子:
熊熊們是不是消失了呢? 很好!
<C> 小挑戰:
第一幕中,還要把「圍巾」跟「故事結束」也隱藏起來,
我們要把相同的程式積木,也寫在這個兩個角色裡面,你知道要怎麼做嗎?
先自己試試看,再看看下面的示範:
<T> 小技巧
- 別忘記,要先用滑鼠點一下,你要寫程式積木的角色哦!
現在,使用滑鼠點一下綠色旗子:
「熊熊們、圍巾、故事結束」是不是都消失了呢? 很好!
5. 將角色定位到舞台上的位置
控制角色在舞台出現的位置
第一幕中,樹木爺爺會出現在舞台上,我們要告訴他應該站在哪個位置。
還有,葉子也會出現在舞台上,而且它要出現在樹梢的頂端。
首先,滑鼠點一下角色區中的「樹木爺爺」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。
加入以下的程式積木:
程式積木如下:
運用同樣的方法,把葉子定位到樹梢的頂端:
滑鼠點一下角色區中的「葉子」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:葉子。
加入以下的程式積木:
程式積木如下:
現在,用滑鼠把葉子拉到舞台上左邊的任何一個位置
再用滑鼠點一下綠色旗子
葉子是不是又自動回到樹梢的頂端了呢?
<T>小技巧:
- 當你在舞台上拖曳一個角色到你想要的位置時,程式面板上的「滑行到...」積木會自動更新角色目前位置的x與y值。
6. 加入角色的想法或說話
運用「說話」、「想著」積木,讓角色表達對白或想法。
第一幕中,樹木爺爺想著:「樹木爺爺身上的最後一片葉子掉下來」
首先,滑鼠點一下角色區中的「樹木爺爺」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。
修改以下的程式積木:
最後的程式積木如下:
點一下綠色旗子,看看發生了什麼效果呢?
7. 讓角色在舞台上滑行
運用「滑行 ... 秒到 .... 」積木,讓角色在舞台移動
第一幕中,葉子要從樹梢掉落下來。
首先,滑鼠點一下角色區中的「葉子」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:葉子。
先用滑鼠將葉子,拉動到舞台的下方
在拉動的時候,[ 滑行 ... 秒到 .... ]積木會自動更新葉子的位置
這樣就可以設定葉子在舞台移動的樣子。
修改以下的程式積木:
最後的程式積木如下:
點一下綠色旗子,看看發生了什麼效果呢?
樹葉爺爺想著...的時候,葉子同時滑落下來。
8. 讓隱藏的其他角色出現在舞台上
運用「廣播」積木,控制其他角色的顯示或隱藏
首先,滑鼠點一下角色區中「樹木爺爺」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。
修改以下的程式碼:
最後的程式積木如下:
接著,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
<T>小技巧:
- 讓隱藏的角色暫時出現在舞台上
在選取的角色上,點一下滑鼠右鍵,再點一下「顯示」
現在,熊熊們出現在草原上了
我們繼續製作故事的第一幕
首先,讓熊熊們出現在草原上的左邊:
加入以下的程式積木:
最後的程式積木如下:
接著,讓熊熊們說一些話
加入以下的程式積木:
最後的程式積木如下:
好了!現在用滑鼠點一下綠色旗子
現在的故事,是不是像下面這樣呢?太酷了!
- 樹葉從樹木爺爺身上掉下來後
- 熊熊們出現在舞台左邊
- 熊熊們說了一些話
9. 變換舞台背景
運用「廣播」積木,切換舞台的背景
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
修改以下的程式積木:
最後的程式積木如下:
接著,滑鼠點一下「舞台」,再點一下「程式分頁」。
藍色外框表示,你現在選擇的是舞台,例如下圖:
加入以下的程式積木:
加入的程式積木如下:
現在,點一下綠色旗子
在熊熊們說話之後,背景有沒有換到房間內呢?
哦!等等...
「樹木爺爺」跟「葉子」不應該出現在房間內。我們應該把他們隱藏。
要怎麼做呢?
用滑鼠點一下角色區中的「樹木爺爺」,再點一下「程式分頁」。
請確認,藍色框框出現在樹木爺爺的角色縮圖上,如下圖:
加入以下的程式積木:
程式積木如下圖:
<C> 小挑戰:
現在,請運用同樣的方法:
把葉子也隱藏起來,不要出現在房間內。
你知道要怎麼做嗎?先自己嘗試看看,再看下面的示範。
好!現在,再用滑鼠點一下綠色旗子
再看一次我們製作的故事
注意看看:當背景換到「房間」的時候,樹木爺爺跟葉子是不是都隱藏起來了呢?
太棒了,我們已經完成故事的第一幕囉!
10. 練習時間:製作故事的第二幕
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
<C>小挑戰:
運用到目前學過的程式積木,來完成這些事情:
- 當背景換成房間...
- 把熊熊們變大,定位在舞台的左邊
- 把熊熊們的造型,換成:[surprised]
- 讓熊熊們說:「拿件圍巾給樹木爺爺好了!」
- 讓熊熊們滑行到右邊的櫃子
- 把熊熊們的造型,換成:[standing]
請先自己練習試試看,然後再看下面的示範哦!
<!> 注意:
引導者請注意,如果操作時間不足,可以帶著學習者直接操作一次。
但我們建議,保留時間(例如:5~10分鐘)讓學習者自行嘗試
加入以下的程式積木:
再加入以下的程式積木:
最後完成的程式積木如下:
現在,用滑鼠點一下 「當收到訊息[房間-第二幕]」:
來看看故事的第二幕:
- 熊熊們出現在房間的左邊,變大了
- 熊熊們說了一句話
- 熊熊們滑行到了右邊的櫃子前面
太棒了!
咦?可是熊熊們滑行的時候腳都沒有動,看起來怪怪的
要怎麼辦呢?
11. 讓熊熊們一邊滑行,一邊做出走路的動作
運用廣播積木:同時進行兩種動作
熊熊們滑行的時候,腳步應該要跟著改變,這樣才會像真正的走路一樣。
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式積木:
最後的程式積木如下:
現在,用滑鼠點一下 「當收到訊息[房間-第二幕]」。
看看修改的效果:哦!熊熊們開始走路了!
哦!可是他們到了櫃子前沒有停下來,這怎麼辦呢?
<T>小技巧:
請點一下紅色的停止按鈕,讓熊熊們停下來。
12. 讓熊熊們走到櫃子前面,然後就停下來
運用停止積木:控制程式積木要不要執行
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式碼
最後完成的程式積木:
現在,用滑鼠點一下 「當收到訊息[房間-第二幕]」。
看看修改的效果:哦!熊熊們開始走路...
熊熊走到櫃子前面,然後就停下來了!太棒了!
<T>小技巧:
這組積木的使用可以查看:Scratch小學堂-EP01,來更深入了解。
13. 讓圍巾出現,並且滑行到熊熊們身上
運用「廣播」積木,控制其他角色的顯示或隱藏
在櫃子前面,熊熊們找到了圍巾,並且把圍巾帶在身上。
回想一下:我們要怎麼讓另外的角色出現在舞台上呢?
沒錯,要使用的是「廣播積木」
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式積木
最後的程式積木如下:
接下來,我們要讓「圍巾」出現在櫃子前面的地上
並且要讓它滑行到熊熊的脖子上
用滑鼠點一下角色區中的「圍巾」,出現藍色框框後
再用滑鼠右鍵點一下,選擇[ 顯示 ]。
現在,「圍巾」出現在舞台上了嗎?(如果被熊熊擋住,可以用滑鼠把熊熊移開)
很好!
接著,用滑鼠點一下「程式分頁」。
加入以下的程式積木:
完成的程式積木如下圖:
現在,用滑鼠點一下角色區中的「熊熊們」,再點一下「程式分頁」
最後點一下:「當收到訊息[房間-第二幕]」
看看修改的效果:哦!熊熊們開始走路...
熊熊走到櫃子前面,然後就停下來
接著,圍巾出現、滑行到熊熊身上
<Q>小問題:
咦?圍巾好像怪怪的...
它一開始就出現在房間裡面!
要怎麼辦呢?
沒問題!我們多加入一段程式積木:
- 當背景換成房間的時候,圍巾要隱藏起來。
你知道要怎麼做嗎?請先試試看,再看看下面的示範:
滑鼠點一下,角色區中的「圍巾」,再點一下程式分頁
最後加入下面這段程式積木,然後用滑鼠點一下「當背景換成房間」
讓圍巾隱藏起來!
現在,用滑鼠點一下角色區中的「熊熊們」,再點一下「程式分頁」
最後點一下:「當收到訊息[房間-第二幕]」
太棒了!我們已經完成故事的第二幕囉!
13. 切換舞台背景,回到草原上
運用「廣播」積木,切換舞台的背景
現在,我們要開始製作故事的第三幕:
- 地點在草原上
- 熊熊們帶著圍巾,走路去找樹木爺爺
- 熊熊們跟樹木爺爺有一些對話
所以,我們要先將舞台背景從「房間」變換為「草原上」
首先,滑鼠點一下角色區中「圍巾」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:圍巾。
加入以下的程式積木:
完成的程式積木如下:
接著,滑鼠點一下「舞台」,再點一下「程式分頁」。
藍色外框表示,你現在選擇的是舞台,例如下圖:
加入以下的程式積木:
加入的程式積木如下:
現在,用滑鼠點一下:「當收到訊息[草地-第三幕]」
背景就會變成草原
第三幕的草原上需要出現的角色有:
- 熊熊們
- 圍巾
- 樹木爺爺
- 葉子
首先我們讓「樹木爺爺」、「葉子」都出現在舞台上:
首先,滑鼠點一下角色區中「樹木爺爺」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。
加入以下的程式積木:
同樣的,滑鼠點一下角色區中「葉子」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:葉子。
加入以下的程式積木:
加入的程式積木如下圖:
現在,用滑鼠點一下:「當背景換成 [ 草地 ]」
讓「樹木爺爺」、「葉子」都出現在舞台上。
現在,你的舞台上是不是像是這樣子呢?
熊熊們、圍巾、葉子跟樹木爺爺都出現在草原上了。
哦喔!「熊熊們」跟「樹木爺爺」重疊在一起了
現在,我們調整一下「熊熊們」的位置
讓熊熊們在第三幕時,出現在「樹木爺爺」的左邊。
控制角色在舞台出現的位置
滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式積木:
最後的程式積木如下:
你可以將「熊熊們」定位到適當的地方 (樹木爺爺左邊)。
哦,圍巾也要移動到適當的位置
讓我們將圍巾移動到熊熊們的身上吧!
滑鼠點一下角色區中「圍巾」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:圍巾。
加入以下的程式積木:
最後的程式積木如下:
你可以將「圍巾」定位到適當的地方 (熊熊們的身上)。
好了,每個角色在第三幕的位置都定位好了。
我們開始讓角色之間來對話吧!
14. 讓角色互相對話
運用「廣播[...]並等待」積木,讓角色一來一回地進行對話。
首先,讓熊熊們說話。
滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式積木:
影片只有第一段的部分
請繼續完成剩下的部分
最後的程式積木如下:
接著,讓樹木爺爺說話。
滑鼠點一下角色區中「樹木爺爺」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。
加入以下的程式積木:
影片只有第一段的部分
請繼續完成剩下的部分
最後的程式積木如下:
好的,我們快要完成整個故事了!
現在,點一下綠色旗子,完整的看一次現在的故事
最後,熊熊們跟樹木爺爺有沒有互相對話呢?酷!
15. 故事的結尾
運用「廣播」積木,讓其他的角色出現在舞台上。
熊熊說完最後一句話以後,春天的故事就要結束了。
最後,我們要讓「故事結束」的這個角色(很像一朵雲)
要出現在舞台的上面,作為故事的結尾。
首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。
加入以下的程式積木:
完成的積木如下圖:
接著,滑鼠點一下角色區中「故事結尾」,
再以滑鼠右鍵點一下,選擇「顯示」
讓「故事結束」角色暫時出現在舞台上。
加入以下的程式積木:
你可以隨意調整「故事結束」角色的位置
最後程式積木如下圖:
現在,用滑鼠點一下綠色旗子
看著我們製作的故事
一起說故事吧!
<!> 引導者請注意:
- 如果還有時間,可以讓學習者發揮想像力,將故事延長
例如:加入新場景、新對話、新角色。
或者讓學習者創作一個屬於自己的故事! - 也可以嘗試將這個故事創作,變成團體活動:故事接龍
例如:假設學習者有5人、電腦有5台。
首先,每人分配一台電腦,讓給每個人10分鐘用Scratch創作故事
接著,每個人移動一個位子,換到別人的電腦前(往右移、順時針等方式),讓每個人再用10分鐘,接著創作別人的故事,依此類推...
活動的最後,讓每人回到自己最開始的電腦,看看故事是什麼!
16. 儲存並分享你的作品
恭喜!你已經完成了一個程式專案!
為你的程式專案取個名字(輸入標題)。
點一下,畫面右上方的「改編」或是「分享」
將程式作品分享給世界上的所有人!
這個影片會教你,如何進行分享。
(記得打開中文字幕)
<T> 小技巧:
- 你需要註冊Scratch並登入,才可以在線上儲存與分享你的程式專案。
- 你也可以儲存程式專案到你的電腦中:點選「檔案」選單,再選擇「下載到您的電腦」。
第3步
活動結束後
謝謝你的參與!
恭喜!你已經完成了一個牛刀小試(Things To Try)程式設計活動。
協助學生分享
每位學生完成春天的故事後,請點擊畫面右上方的「分享」,這樣便會將學生創作的程式在Scratch平台上公開。學生只需要複製程式專案的網址,再將網址傳送給想要分享的朋友或家人,便可與大家分享「春天來了」故事專案。
學習更多
- 學生們可前往:Scratch-TW/學習者專區,進行另外其他的Scratch活動。
- 老師們可前往:Scratch-TW/教育者專區,下載完整的教學指引手冊,規劃更完整的Scratch程式設計課程。
- 找尋更多Scratch程式教育資源,可前往:ScratchEd查看來自世界各地教育者分享與討論的事項。
參考資源與連結:
https://scratch.mit.edu/go (Scratch 2016 Things to Try)⬀
春天的故事:熊熊們與樹木爺爺-教學範例 (Scratch Project by ThinkinViz)⬀
春天的故事:熊熊們與樹木爺爺 Remix(Scratch Project by ThinkinViz)⬀
製作故事 - 活動卡片中文版⬇︎ (Credits: YU HSIEN FANG)
製作故事 - 教育者指南中文版⬇︎ (Credits: 黃正華 - Little 1 Kids Lab 小小1)
第4步
分享與討論
留言分享你的Scratch作品網址
歡迎討論、一起學習
訂閱Scratch-TW電子報
取得最新教學課程與活動訊息