返回網站

創作故事 Story!

Create a Story

2017年3月29日

我們一起來說一個故事吧!你喜歡聽故事嗎?你最喜歡的故事又是什麼呢?

這個牛刀小試(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團隊提供了以下的教學素材與建議,可協助老師將這個活動帶入教室、圖書館或其他學習場所:

準備好開始了嗎?我們的建議如下

  1. 請先閱讀以下的活動指引,留意活動需準備的事項,建議導引者自己完整實作一次。
  2. 下載教育者指南中文版,導引者可更了解如何籌備教學活動。
  3. 下載活動卡片中文版,可印發給學員們。
  4. 前往ThinkinViz協力製作的春天的故事:熊熊們與樹木爺爺-教學範例頁面,創作春天的故事。
  5. 如果遇到困難,可參考由ThinkinViz協力製作的Scratch Project: 春天的故事:熊熊們與樹木爺爺 Remix

第1步
活動前準備

  • 確認活動場所是否有「網際網路連線」。這是一個需要電腦設備與網路連線的活動,務必事先確認。
  • 建議教師可準備投影設備(例如:投影機)以便讓學生看見操作畫面。
  • 學習註冊Scratch帳號,詳細步驟請查閱:Scratch註冊指引
  • 試玩春天的故事:熊熊們與樹木爺爺 Remix,來激發靈感。

project: 春天的故事:熊熊們與樹木爺爺 Remix (*僅於電腦上操作),點綠色旗子開始;點紅色圖示停止。

第2步
開始程式設計

1. 註冊並登入Scratch

引導學生前往Scratch網站,註冊Scratch帳號並登入。​

2. 簡單的說一下:春天的故事

第一幕:草原上

  1. 樹木爺爺身上的最後一片葉子,掉落下來...
  2. 熊熊們看見樹木爺爺,光禿禿的,好可憐。要怎麼辦呢?

第二幕:熊熊們的房間

  1. 熊熊們找出了圍巾,要拿給樹木爺爺...

第三幕:草原上;熊熊們與樹木爺爺進行圖畫中的對話...

引導學生前往:春天的故事:熊熊們與樹木爺爺-教學範例,準備開始創作故事。

3. 故事開場

按下綠色旗子,切換到第一個場景,開始製作故事。

現在,所有的角色都一起出現在舞台上,等待導演(也就是你)安排他們要做些什麼事情。

首先,滑鼠點一下「舞台」
藍色外框表示,你現在選擇的是舞台,例如下圖:

點一下「背景」分頁。現在,我們有兩個不同的背景:一個是「草地」、一個是「房間」。

故事的第一幕是發生在草地上,所以故事開場時,要將舞台換成「草地」。

加入以下的程式積木:

程式積木如下:
將兩片積木組合,黏疊在一起。

現在,使用滑鼠點一下綠色旗子:

舞台背景是不是變成「草地」了呢? 很好!
我們要開始製作故事囉

4. 角色的顯示/隱藏

安排每一幕中,哪些角色要出現在舞台上、哪些角色要隱藏。

在第一幕中,出現的角色只有「樹木爺爺」與「葉子」。

讓其他的角色都先隱藏起來,包含:「熊熊們」、「圍巾」、「故事結束」。

首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。

加入以下的程式積木:

程式積木如下:
將兩片積木組合,黏疊在一起。

現在,使用滑鼠點一下綠色旗子:

熊熊們是不是消失了呢? 很好!

<C> 小挑戰:
第一幕中,還要把「圍巾」跟「故事結束」也隱藏起來,
我們要把相同的程式積木,也寫在這個兩個角色裡面,你知道要怎麼做嗎?
先自己試試看,再看看下面的示範:

<T> 小技巧

  • 別忘記,要先用滑鼠點一下,你要寫程式積木的角色哦!

現在,使用滑鼠點一下綠色旗子:

「熊熊們、圍巾、故事結束」是不是都消失了呢? 很好!

5. 將角色定位到舞台上的位置

控制角色在舞台出現的位置

第一幕中,樹木爺爺會出現在舞台上,我們要告訴他應該站在哪個位置。
還有,葉子也會出現在舞台上,而且它要出現在樹梢的頂端。

首先,滑鼠點一下角色區中的「樹木爺爺」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。

加入以下的程式積木:

程式積木如下:

運用同樣的方法,把葉子定位到樹梢的頂端:
滑鼠點一下角色區中的「葉子」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:葉子。

加入以下的程式積木:

程式積木如下:

現在,用滑鼠把葉子拉到舞台上左邊的任何一個位置

再用滑鼠點一下綠色旗子
葉子是不是又自動回到樹梢的頂端了呢?

<T>小技巧:

  • 當你在舞台上拖曳一個角色到你想要的位置時,程式面板上的「滑行到...」積木會自動更新角色目前位置的xy值。

6. 加入角色的想法或說話

運用「說話」、「想著」積木,讓角色表達對白或想法。

第一幕中,樹木爺爺想著:「樹木爺爺身上的最後一片葉子掉下來」

首先,滑鼠點一下角色區中的「樹木爺爺」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。

修改以下的程式積木:

最後的程式積木如下:

點一下綠色旗子,看看發生了什麼效果呢?

7. 讓角色在舞台上滑行

運用「滑行 ... 秒到 .... 」積木,讓角色在舞台移動

第一幕中,葉子要從樹梢掉落下來。

首先,滑鼠點一下角色區中的「葉子」再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:葉子。

先用滑鼠將葉子,拉動到舞台的下方
在拉動的時候,[ 滑行 ... 秒到 .... ]積木會自動更新葉子的位置
這樣就可以設定葉子在舞台移動的樣子。

修改以下的程式積木:

最後的程式積木如下:

點一下綠色旗子,看看發生了什麼效果呢?
樹葉爺爺想著...的時候,葉子同時滑落下來。

8. 讓隱藏的其他角色出現在舞台上

運用「廣播」積木,控制其他角色的顯示或隱藏

首先,滑鼠點一下角色區中「樹木爺爺」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:樹木爺爺。

修改以下的程式碼:

最後的程式積木如下:

接著,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。

<T>小技巧:

  • 讓隱藏的角色暫時出現在舞台上
    在選取的角色上,點一下滑鼠右鍵,再點一下「顯示」

現在,熊熊們出現在草原上了
我們繼續製作故事的第一幕
首先,讓熊熊們出現在草原上的左邊:

加入以下的程式積木:

最後的程式積木如下:

接著,讓熊熊們說一些話

加入以下的程式積木:

最後的程式積木如下:

好了!現在用滑鼠點一下綠色旗子
現在的故事,是不是像下面這樣呢?太酷了!

  • 樹葉從樹木爺爺身上掉下來後
  • 熊熊們出現在舞台左邊
  • 熊熊們說了一些話

9. 變換舞台背景

運用「廣播」積木,切換舞台的背景

首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。

修改以下的程式積木:

最後的程式積木如下:

接著,滑鼠點一下「舞台」,再點一下「程式分頁」。
藍色外框表示,你現在選擇的是舞台,例如下圖:

加入以下的程式積木:

加入的程式積木如下:

現在,點一下綠色旗子
在熊熊們說話之後,背景有沒有換到房間內呢?

哦!等等...

「樹木爺爺」跟「葉子」不應該出現在房間內。我們應該把他們隱藏。

要怎麼做呢?

用滑鼠點一下角色區中的「樹木爺爺」,再點一下「程式分頁」。

請確認,藍色框框出現在樹木爺爺的角色縮圖上,如下圖:

加入以下的程式積木:

程式積木如下圖:

<C> 小挑戰:
現在,請運用同樣的方法:

把葉子也隱藏起來,不要出現在房間內。

你知道要怎麼做嗎?先自己嘗試看看,再看下面的示範。

好!現在,再用滑鼠點一下綠色旗子
再看一次我們製作的故事

注意看看:當背景換到「房間」的時候,樹木爺爺跟葉子是不是都隱藏起來了呢?

太棒了,我們已經完成故事的第一幕囉!

10. 練習時間:製作故事的第二幕

首先,滑鼠點一下角色區中「熊熊們」,再點一下「程式分頁」。
藍色外框表示,你選取的角色,例如:熊熊們。

<C>小挑戰:

運用到目前學過的程式積木,來完成這些事情:

  1. 當背景換成房間...
  2. 把熊熊們變大,定位在舞台的左邊
  3. 把熊熊們的造型,換成:[surprised]
  4. 讓熊熊們說:「拿件圍巾給樹木爺爺好了!」
  5. 讓熊熊們滑行到右邊的櫃子
  6. 把熊熊們的造型,換成:[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電子報
取得最新教學課程與活動訊息