在家，培養(yǎng)孩子解決問題能力：如何用少兒編程Scratch做動(dòng)畫？（附保姆級教程）

在家，靠一臺電腦就能培養(yǎng)孩子解決問題的能力？
沒錯(cuò)！一款超受美國家長歡迎的，由世界頂級學(xué)府麻省理工學(xué)院打造的免費(fèi)工具就能做到：

Scratch在線少兒編程

兒子還是小寶寶的時(shí)候，囤了很多有趣的立體書。現(xiàn)在小寶寶長大了，上學(xué)了，“看不上”這些幼稚的書了。但，立體書都挺貴的，壓箱底怪可惜的。

所以，我提出了一個(gè)“變廢為寶”的計(jì)劃：用Scratch，把立體書變成動(dòng)畫片。

那么，如何做到呢？

通過本篇的實(shí)例，可以了解如何利用編程工具，訓(xùn)練小朋友解決問題的能力，入門少兒編程。

另外，文末附Scratch源碼和鱷魚先生的手繪素材獲取方式。

視頻版教程 ??

?? 在哪用Scratch？

登錄官網(wǎng)：https://scratch.mit.edu/

Scratch有網(wǎng)頁版和桌面版，因?yàn)檫@是國外網(wǎng)站，所以訪問速度通常較慢。對于經(jīng)常要使用的同學(xué)，建議安裝桌面版的，不受網(wǎng)絡(luò)條件限制，操作更方便。

但是，網(wǎng)頁版有發(fā)布到Scratch社區(qū)的功能，可以讓全球的小伙伴看到你的作品了。

結(jié)合兩者優(yōu)點(diǎn)，可以在桌面版做好后，再登錄Scratch網(wǎng)頁版賬號，發(fā)布作品。

下載桌面版。

回到首頁，一直拖到最底部，能看到桌面版的下載入口。進(jìn)入下載頁面后，選擇自己使用的操作系統(tǒng)。

說白了，就是看你家用的是Windows個(gè)人電腦，還是蘋果MacOS電腦，還是安卓手機(jī)/平板電腦。（ChromeOS幾乎沒人用的）

網(wǎng)站上也有對應(yīng)的安裝步驟說明。

并且，也能看到網(wǎng)站的語言切換按鈕。如果覺得瀏覽英文網(wǎng)站不習(xí)慣，可以切換成中文的。

另外，非常值得一提的是，麻省理工學(xué)院提供的不僅僅是款免費(fèi)少兒編程工具，它還提供了教程、優(yōu)秀作品等良好的國際化學(xué)習(xí)氛圍。

?? 立體書的編程思維

既然靈感來自鱷魚先生立體書，那么第1個(gè)問題就是：立體書是如何運(yùn)動(dòng)？

拆解運(yùn)動(dòng)如下：

1. 當(dāng)我拉動(dòng)箭頭的時(shí)候，
2. 鱷魚先生做伸展運(yùn)動(dòng)。

進(jìn)一步拆解動(dòng)作，得到如下：

1. ↓鱷魚先生的頭向下移動(dòng)
2. ↑鱷魚先生的左手的向上運(yùn)動(dòng)
3. ↑鱷魚先生的右手的向上運(yùn)動(dòng)

第2個(gè)問題來了：如何把鱷魚先生放到Scratch世界？

通過第1個(gè)問題的拆解，可以推導(dǎo)出來一個(gè)結(jié)論：鱷魚先生的頭、左手、右手、箭頭、被子、床（背景圖）都是獨(dú)立的個(gè)體。

于是，我單獨(dú)手繪了以上元素，并分別導(dǎo)入到Scratch。為了提（tou）高（lan）效（sheng）率（shi），我把箭頭和被子畫成一張圖。

在Scratch世界里，這些獨(dú)立的個(gè)體叫" Sprite "（角色），背景圖還是叫" Backdrops "（背景）。

鱷魚先生的頭、左手、右手、被子導(dǎo)入成" Sprite "。

床的背景圖導(dǎo)入成" Backdrops "。

導(dǎo)入成功后，它們的默認(rèn)大小和位置是亂糟糟的，胳膊會長在腦袋上。

這時(shí)候，需要媽媽們拿出來平時(shí)精修自拍照時(shí)候的耐心，輔助孩子來來一點(diǎn)點(diǎn)調(diào)整畫面：

1. 角色過大：調(diào)整" Size "（大小比例）讓鱷魚先生身體各個(gè)部分協(xié)調(diào)起來；
2. 位置混亂：直接用鼠標(biāo)拖動(dòng)，調(diào)整位置即可；

強(qiáng)行入戲的吉祥物：刪掉即可。

調(diào)整后，能得到一張近似原版書的漂亮“圖”了。

第3個(gè)問題：Scratch里的鱷魚先生什么時(shí)候開始動(dòng)？

在立體書里，下拉書里的箭頭，鱷魚先生就開始伸胳膊了。

既然我是這個(gè)Scratch世界里的主人，難得有一次“我的地盤我做主”的機(jī)會。

那！我就把這個(gè)觸發(fā)動(dòng)作定義為：點(diǎn)擊為“點(diǎn)擊被子”的時(shí)候。

但是，被子和鱷魚先生的頭、左手、右手是獨(dú)立的個(gè)體。所以，當(dāng)我點(diǎn)擊“被子”的時(shí)候，也只點(diǎn)擊到了“被子”上，其他角色是不知道的。

如果不了解計(jì)算機(jī)語言，發(fā)出“點(diǎn)擊”信號后，看到鱷魚先生還在“一動(dòng)不動(dòng)”，可能會產(chǎn)生下面的對話：

機(jī)智的我??隔著屏幕喊話：鱷魚先生快動(dòng)起來??！

鱷魚先生??一臉懵逼的說：沒收到通知呀？動(dòng)啥？

那么，怎樣把“點(diǎn)擊”這件事告訴鱷（qi）魚（ta）先（jue）生（se）呢？

這時(shí)候，就需要用到計(jì)算機(jī)世界里的“消息”通信了，聽起來很高大上有木有？！是不是被唬到了？！

我們都知道，能傳遞的消息都有“發(fā)件人”和“收件人”。

在Scratch里，“被子”是“發(fā)件人”。

所以，先給被子拖進(jìn)來一條積木指令，意思是：當(dāng)被點(diǎn)擊時(shí)，被子廣播一條叫做“stretch”消息。

同時(shí)，要讓指令傳播下去，讓鱷魚先生的頭、左手、右手產(chǎn)生運(yùn)動(dòng)效果。

它們就必須是“收件人”，此處要有一條接受廣播的指令。

這條指令的意思是：當(dāng)收到" stretch "廣播的時(shí)候，將.....

緊接著，自然而然的產(chǎn)生了第4個(gè)問題：鱷魚先生收到消息后，怎么動(dòng)呢？

同學(xué)們?。。∵@是送分題?。。?！

在這個(gè)實(shí)例里，就是書里怎么動(dòng)就怎么動(dòng)唄！ 

以鱷魚頭的運(yùn)動(dòng)為例：它是兩個(gè)固定點(diǎn)之間直線上下移動(dòng)。

我們在前面調(diào)整“畫面”的時(shí)候，已經(jīng)確定了鱷魚頭的運(yùn)動(dòng)初始位置了?，F(xiàn)在，要給他找一個(gè)結(jié)束點(diǎn)的坐標(biāo)軸。

我選的是從（130，30）到（130，40）。

" motion "運(yùn)動(dòng)指令有很多，不同類型的指令表達(dá)了不同的運(yùn)動(dòng)方式，有的是“噌！”的一聲變過去的，有的是慢慢滑動(dòng)過去的。

在這個(gè)示例里，我們選擇后者，對應(yīng)的" glide "指令：

以上指令連在一起解讀就是：當(dāng)鱷魚頭接收到“stretch”消息廣播時(shí)，它從（130，30），花了1秒鐘的時(shí)間，移動(dòng)到（130，40），也就是垂直向上移動(dòng)10個(gè)單位。

我也可以給鱷魚頭增加循環(huán)語句，這樣它可以多運(yùn)動(dòng)幾次，動(dòng)畫效果維持得更久。

先拋一個(gè)“超綱題”：為什么是“重復(fù)4次”，不是“3次”或者“5次”？

后面的內(nèi)容會解釋。

此外，大家實(shí)操的時(shí)候，一定會發(fā)現(xiàn)一個(gè)問題：就是在調(diào)整角色位置或運(yùn)行的時(shí)候，這些角色的位置一定會慢慢的遠(yuǎn)離我們當(dāng)初設(shè)定的最佳位置。

這時(shí)候，就要針對每個(gè)角色添加1個(gè)指令，這個(gè)指令的意思是：每次運(yùn)行的時(shí)候，角色會回到我們設(shè)定的初始位置。
 

這樣，不管是我們?nèi)藶椴恍⌒呐矂?dòng)了角色的位置，還是運(yùn)行結(jié)束產(chǎn)生了位置偏差。運(yùn)行程序時(shí)，它們都會瞬間“噌”地一聲回到我們設(shè)定的初始位置，然后再從初始位置開始運(yùn)動(dòng)。

比如給“被子”增加一條回到起始位置的指令：

?? 讓故事更完整

通過上面一波操作，立體書的核心內(nèi)容 -- 鱷魚先生的伸展運(yùn)動(dòng)，差不多完成了。

為了讓這部動(dòng)畫更完整，接下來，我增加了2個(gè)任務(wù)：

1. 立體書里“從第1頁翻到第2頁”的效果。

在Scratch里，我的解決方案是：動(dòng)畫默認(rèn)展示“第一頁”，被點(diǎn)擊，切換展示“第二頁”。

2. 給故事里的文字配音。

在功能上說，就是在Scratch里添加配音錄音。

第1個(gè)任務(wù)：從第1頁翻到第2頁

這個(gè)效果，需要解決2個(gè)問題：

第1個(gè)問題：如何默認(rèn)展示“第一頁”？

也就是說，默認(rèn)只展示第1個(gè)門的背景，第2個(gè)背景和鱷魚先生、被子等都得隱藏。動(dòng)畫開始，也就是當(dāng)點(diǎn)擊“小綠旗”時(shí)，顯示第1個(gè)背景，鱷魚先生的頭等角色“隱藏”。

第2個(gè)問題：如何做到翻頁？在Scratch里，可以設(shè)計(jì)一個(gè)觸發(fā)動(dòng)作，觸發(fā)時(shí)，讓第1頁隱藏，第2頁和鱷魚先生展示。這樣，完成了立體書里的翻頁動(dòng)作。

哈哈哈哈，又到了“我的地盤我做主”的高光時(shí)刻了，我宣布：點(diǎn)擊第1頁（第1個(gè)背景）時(shí)，隱藏第1頁（第1個(gè)背景），展示第2頁（第2個(gè)背景），鱷魚先生等角色。

第2個(gè)任務(wù)：給故事里的文字配音

這里我設(shè)計(jì)了2段錄音，內(nèi)容都是書里的原文。

但是，有另外1個(gè)問題要解決：這2段錄音分別在說明時(shí)間點(diǎn)播放呢？

我把第1段內(nèi)容：Knock! Knock! What's the time, Mr Croc?

放在動(dòng)畫開始時(shí)播放，直到錄音播放完。

把錄音指令拖進(jìn)來之后，點(diǎn)擊"record..."。

在彈出的窗口里，點(diǎn)擊"Record"按鈕就可以直接錄音了。

第2段內(nèi)容：Eight o'clock. It's time to stretch my arms.

安排在點(diǎn)擊被子時(shí)，并且錄音播放與鱷魚先生的伸展運(yùn)動(dòng)同時(shí)開始和結(jié)束。

所以，才有上面提到的，讓鱷魚先生的運(yùn)動(dòng)重復(fù)4次（而不是3次，5次）的設(shè)計(jì)。4次的運(yùn)動(dòng)時(shí)間剛好是我錄音的時(shí)間長度。

指令的字面意思是，當(dāng)床的背景收到“stretch”消息廣播時(shí)，播放錄音，直到播放完畢。

??分享優(yōu)化交互體驗(yàn)

要分享給朋友。

除了要與朋友分享樂趣外，更重要的是收集他們的想法和意見。這些信息對改進(jìn)作品非常有幫助。

比如，這次我分享后，意外地發(fā)現(xiàn)，朋友看到這個(gè)作品不知道它是可以點(diǎn)擊的！

朋友的反饋提醒了我，應(yīng)該增加相關(guān)提示，告訴觀看動(dòng)畫的人，這是可以點(diǎn)擊、可以交互的！

最終，我才增加了“Click me”的提示。

至于，如何設(shè)計(jì)“Click me”的交互？

這個(gè)問題，就交給各位解決啦~

先自己操作，再看下圖答案喲！

?? 中文版 or 英文版？

Scratch支持很多國家的語言，可以任意切換中英文。

切換中文后，以上界面的信息顯示如下圖：sprite 對應(yīng)的“角色”，backdrop 對應(yīng)“背景”，等等。

但，我還是強(qiáng)烈建議使用英文界面。

因?yàn)檫@些功能性的英語很容易理解，不會對孩子入門少兒編程造成困難，反而可以讓孩子順便學(xué)習(xí)英語。

更重要的是，如果孩子以后進(jìn)階學(xué)習(xí)Python等比較高級的編程語言，英語是必不可少的，語言邏輯也是一致的。

?? 獲取源代碼和素材

請?zhí)砑游业奈⑿藕糜?，發(fā)送消息“鱷魚先生”給我。

我會把相關(guān)素材圖片和編程源文件通過微信文件發(fā)送給您。（純?nèi)斯ぐl(fā)送，可能會不及時(shí)，望理解）

微信ID：shinemap