2012
在家，靠一臺電腦就能培養(yǎng)孩子解決問題的能力？
沒錯！一款超受美國家長歡迎的，由世界頂級學(xué)府麻省理工學(xué)院打造的免費(fèi)工具就能做到：
Scratch在線少兒編程
兒子還是小寶寶的時候，囤了很多有趣的立體書?，F(xiàn)在小寶寶長大了，上學(xué)了，“看不上”這些幼稚的書了。但，立體書都挺貴的，壓箱底怪可惜的。
所以，我提出了一個“變廢為寶”的計(jì)劃：用Scratch，把立體書變成動畫片。
那么，如何做到呢？
通過本篇的實(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個人電腦，還是蘋果MacOS電腦，還是安卓手機(jī)/平板電腦。（ChromeOS幾乎沒人用的）
網(wǎng)站上也有對應(yīng)的安裝步驟說明。
并且，也能看到網(wǎng)站的語言切換按鈕。如果覺得瀏覽英文網(wǎng)站不習(xí)慣，可以切換成中文的。
另外，非常值得一提的是，麻省理工學(xué)院提供的不僅僅是款免費(fèi)少兒編程工具，它還提供了教程、優(yōu)秀作品等良好的國際化學(xué)習(xí)氛圍。
?? 立體書的編程思維
既然靈感來自鱷魚先生立體書，那么第1個問題就是：立體書是如何運(yùn)動？
拆解運(yùn)動如下：
進(jìn)一步拆解動作，得到如下：
第2個問題來了：如何把鱷魚先生放到Scratch世界？
通過第1個問題的拆解，可以推導(dǎo)出來一個結(jié)論：鱷魚先生的頭、左手、右手、箭頭、被子、床（背景圖）都是獨(dú)立的個體。
于是，我單獨(dú)手繪了以上元素，并分別導(dǎo)入到Scratch。為了提（tou）高（lan）效（sheng）率（shi），我把箭頭和被子畫成一張圖。
在Scratch世界里，這些獨(dú)立的個體叫" Sprite "（角色），背景圖還是叫" Backdrops "（背景）。
鱷魚先生的頭、左手、右手、被子導(dǎo)入成" Sprite "。
床的背景圖導(dǎo)入成" Backdrops "。
導(dǎo)入成功后，它們的默認(rèn)大小和位置是亂糟糟的，胳膊會長在腦袋上。
這時候，需要媽媽們拿出來平時精修自拍照時候的耐心，輔助孩子來來一點(diǎn)點(diǎn)調(diào)整畫面：
強(qiáng)行入戲的吉祥物：刪掉即可。
調(diào)整后，能得到一張近似原版書的漂亮“圖”了。
第3個問題：Scratch里的鱷魚先生什么時候開始動？
在立體書里，下拉書里的箭頭，鱷魚先生就開始伸胳膊了。
既然我是這個Scratch世界里的主人，難得有一次“我的地盤我做主”的機(jī)會。
那！我就把這個觸發(fā)動作定義為：點(diǎn)擊為“點(diǎn)擊被子”的時候。
但是，被子和鱷魚先生的頭、左手、右手是獨(dú)立的個體。所以，當(dāng)我點(diǎn)擊“被子”的時候，也只點(diǎn)擊到了“被子”上，其他角色是不知道的。
如果不了解計(jì)算機(jī)語言，發(fā)出“點(diǎn)擊”信號后，看到鱷魚先生還在“一動不動”，可能會產(chǎn)生下面的對話：
機(jī)智的我??隔著屏幕喊話：鱷魚先生快動起來??！
鱷魚先生??一臉懵逼的說：沒收到通知呀？動啥？
那么，怎樣把“點(diǎn)擊”這件事告訴鱷（qi）魚（ta）先（jue）生（se）呢？
這時候，就需要用到計(jì)算機(jī)世界里的“消息”通信了，聽起來很高大上有木有？！是不是被唬到了？！
我們都知道，能傳遞的消息都有“發(fā)件人”和“收件人”。
在Scratch里，“被子”是“發(fā)件人”。
所以，先給被子拖進(jìn)來一條積木指令，意思是：當(dāng)被點(diǎn)擊時，被子廣播一條叫做“stretch”消息。
同時，要讓指令傳播下去，讓鱷魚先生的頭、左手、右手產(chǎn)生運(yùn)動效果。
它們就必須是“收件人”，此處要有一條接受廣播的指令。
這條指令的意思是：當(dāng)收到" stretch "廣播的時候，將.....
緊接著，自然而然的產(chǎn)生了第4個問題：鱷魚先生收到消息后，怎么動呢？
同學(xué)們?。?！這是送分題?。。?！
在這個實(shí)例里，就是書里怎么動就怎么動唄！
以鱷魚頭的運(yùn)動為例：它是兩個固定點(diǎn)之間直線上下移動。
我們在前面調(diào)整“畫面”的時候，已經(jīng)確定了鱷魚頭的運(yùn)動初始位置了。現(xiàn)在，要給他找一個結(jié)束點(diǎn)的坐標(biāo)軸。
我選的是從（130，30）到（130，40）。
" motion "運(yùn)動指令有很多，不同類型的指令表達(dá)了不同的運(yùn)動方式，有的是“噌！”的一聲變過去的，有的是慢慢滑動過去的。
在這個示例里，我們選擇后者，對應(yīng)的" glide "指令：
以上指令連在一起解讀就是：當(dāng)鱷魚頭接收到“stretch”消息廣播時，它從（130，30），花了1秒鐘的時間，移動到（130，40），也就是垂直向上移動10個單位。
我也可以給鱷魚頭增加循環(huán)語句，這樣它可以多運(yùn)動幾次，動畫效果維持得更久。
先拋一個“超綱題”：為什么是“重復(fù)4次”，不是“3次”或者“5次”？
后面的內(nèi)容會解釋。
此外，大家實(shí)操的時候，一定會發(fā)現(xiàn)一個問題：就是在調(diào)整角色位置或運(yùn)行的時候，這些角色的位置一定會慢慢的遠(yuǎn)離我們當(dāng)初設(shè)定的最佳位置。
這時候，就要針對每個角色添加1個指令，這個指令的意思是：每次運(yùn)行的時候，角色會回到我們設(shè)定的初始位置。
這樣，不管是我們?nèi)藶椴恍⌒呐矂恿私巧奈恢?，還是運(yùn)行結(jié)束產(chǎn)生了位置偏差。運(yùn)行程序時，它們都會瞬間“噌”地一聲回到我們設(shè)定的初始位置，然后再從初始位置開始運(yùn)動。
比如給“被子”增加一條回到起始位置的指令：
?? 讓故事更完整
通過上面一波操作，立體書的核心內(nèi)容 -- 鱷魚先生的伸展運(yùn)動，差不多完成了。
為了讓這部動畫更完整，接下來，我增加了2個任務(wù)：
1. 立體書里“從第1頁翻到第2頁”的效果。
在Scratch里，我的解決方案是：動畫默認(rèn)展示“第一頁”，被點(diǎn)擊，切換展示“第二頁”。
2. 給故事里的文字配音。
在功能上說，就是在Scratch里添加配音錄音。
第1個任務(wù)：從第1頁翻到第2頁
這個效果，需要解決2個問題：
第1個問題：如何默認(rèn)展示“第一頁”？
也就是說，默認(rèn)只展示第1個門的背景，第2個背景和鱷魚先生、被子等都得隱藏。動畫開始，也就是當(dāng)點(diǎn)擊“小綠旗”時，顯示第1個背景，鱷魚先生的頭等角色“隱藏”。
第2個問題：如何做到翻頁？在Scratch里，可以設(shè)計(jì)一個觸發(fā)動作，觸發(fā)時，讓第1頁隱藏，第2頁和鱷魚先生展示。這樣，完成了立體書里的翻頁動作。
哈哈哈哈，又到了“我的地盤我做主”的高光時刻了，我宣布：點(diǎn)擊第1頁（第1個背景）時，隱藏第1頁（第1個背景），展示第2頁（第2個背景），鱷魚先生等角色。
第2個任務(wù)：給故事里的文字配音
這里我設(shè)計(jì)了2段錄音，內(nèi)容都是書里的原文。
但是，有另外1個問題要解決：這2段錄音分別在說明時間點(diǎn)播放呢？
我把第1段內(nèi)容：Knock! Knock! What's the time, Mr Croc?
放在動畫開始時播放，直到錄音播放完。
把錄音指令拖進(jìn)來之后，點(diǎn)擊"record..."。
在彈出的窗口里，點(diǎn)擊"Record"按鈕就可以直接錄音了。
第2段內(nèi)容：Eight o'clock. It's time to stretch my arms.
安排在點(diǎn)擊被子時，并且錄音播放與鱷魚先生的伸展運(yùn)動同時開始和結(jié)束。
所以，才有上面提到的，讓鱷魚先生的運(yùn)動重復(fù)4次（而不是3次，5次）的設(shè)計(jì)。4次的運(yùn)動時間剛好是我錄音的時間長度。
指令的字面意思是，當(dāng)床的背景收到“stretch”消息廣播時，播放錄音，直到播放完畢。
??分享優(yōu)化交互體驗(yàn)
要分享給朋友。
除了要與朋友分享樂趣外，更重要的是收集他們的想法和意見。這些信息對改進(jìn)作品非常有幫助。
比如，這次我分享后，意外地發(fā)現(xiàn)，朋友看到這個作品不知道它是可以點(diǎn)擊的！
朋友的反饋提醒了我，應(yīng)該增加相關(guān)提示，告訴觀看動畫的人，這是可以點(diǎn)擊、可以交互的！
最終，我才增加了“Click me”的提示。
至于，如何設(shè)計(jì)“Click me”的交互？
這個問題，就交給各位解決啦~
先自己操作，再看下圖答案喲！
?? 中文版 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ā)送，可能會不及時，望理解）
微信ID：shinemap
2012
下載小花生APP
關(guān)注小花生公眾號
