2012
在家，靠一台电脑就能培养孩子解决问题的能力？
没错！一款超受美国家长欢迎的，由世界顶级学府麻省理工学院打造的免费工具就能做到：
Scratch在线少儿编程
儿子还是小宝宝的时候，囤了很多有趣的立体书。现在小宝宝长大了，上学了，“看不上”这些幼稚的书了。但，立体书都挺贵的，压箱底怪可惜的。
所以，我提出了一个“变废为宝”的计划：用Scratch，把立体书变成动画片。
那么，如何做到呢？
通过本篇的实例，可以了解如何利用编程工具，训练小朋友解决问题的能力，入门少儿编程。
另外，文末附Scratch源码和鳄鱼先生的手绘素材获取方式。
视频版教程 👇
💻 在哪用Scratch？
Scratch有网页版和桌面版，因为这是国外网站，所以访问速度通常较慢。对于经常要使用的同学，建议安装桌面版的，不受网络条件限制，操作更方便。
但是，网页版有发布到Scratch社区的功能，可以让全球的小伙伴看到你的作品了。
结合两者优点，可以在桌面版做好后，再登录Scratch网页版账号，发布作品。
下载桌面版。
回到首页，一直拖到最底部，能看到桌面版的下载入口。进入下载页面后，选择自己使用的操作系统。
说白了，就是看你家用的是Windows个人电脑，还是苹果MacOS电脑，还是安卓手机/平板电脑。（ChromeOS几乎没人用的）
网站上也有对应的安装步骤说明。
并且，也能看到网站的语言切换按钮。如果觉得浏览英文网站不习惯，可以切换成中文的。
另外，非常值得一提的是，麻省理工学院提供的不仅仅是款免费少儿编程工具，它还提供了教程、优秀作品等良好的国际化学习氛围。
💡 立体书的编程思维
既然灵感来自鳄鱼先生立体书，那么第1个问题就是：立体书是如何运动？
拆解运动如下：
进一步拆解动作，得到如下：
第2个问题来了：如何把鳄鱼先生放到Scratch世界？
通过第1个问题的拆解，可以推导出来一个结论：鳄鱼先生的头、左手、右手、箭头、被子、床（背景图）都是独立的个体。
于是，我单独手绘了以上元素，并分别导入到Scratch。为了提（tou）高（lan）效（sheng）率（shi），我把箭头和被子画成一张图。
在Scratch世界里，这些独立的个体叫" Sprite "（角色），背景图还是叫" Backdrops "（背景）。
鳄鱼先生的头、左手、右手、被子导入成" Sprite "。
床的背景图导入成" Backdrops "。
导入成功后，它们的默认大小和位置是乱糟糟的，胳膊会长在脑袋上。
这时候，需要妈妈们拿出来平时精修自拍照时候的耐心，辅助孩子来来一点点调整画面：
强行入戏的吉祥物：删掉即可。
调整后，能得到一张近似原版书的漂亮“图”了。
第3个问题：Scratch里的鳄鱼先生什么时候开始动？
在立体书里，下拉书里的箭头，鳄鱼先生就开始伸胳膊了。
既然我是这个Scratch世界里的主人，难得有一次“我的地盘我做主”的机会。
那！我就把这个触发动作定义为：点击为“点击被子”的时候。
但是，被子和鳄鱼先生的头、左手、右手是独立的个体。所以，当我点击“被子”的时候，也只点击到了“被子”上，其他角色是不知道的。
如果不了解计算机语言，发出“点击”信号后，看到鳄鱼先生还在“一动不动”，可能会产生下面的对话：
机智的我👩隔着屏幕喊话：鳄鱼先生快动起来啊！
鳄鱼先生🐊一脸懵逼的说：没收到通知呀？动啥？
那么，怎样把“点击”这件事告诉鳄（qi）鱼（ta）先（jue）生（se）呢？
这时候，就需要用到计算机世界里的“消息”通信了，听起来很高大上有木有？！是不是被唬到了？！
我们都知道，能传递的消息都有“发件人”和“收件人”。
在Scratch里，“被子”是“发件人”。
所以，先给被子拖进来一条积木指令，意思是：当被点击时，被子广播一条叫做“stretch”消息。
同时，要让指令传播下去，让鳄鱼先生的头、左手、右手产生运动效果。
它们就必须是“收件人”，此处要有一条接受广播的指令。
这条指令的意思是：当收到" stretch "广播的时候，将.....
紧接着，自然而然的产生了第4个问题：鳄鱼先生收到消息后，怎么动呢？
同学们！！！这是送分题啊！！！
在这个实例里，就是书里怎么动就怎么动呗！
以鳄鱼头的运动为例：它是两个固定点之间直线上下移动。
我们在前面调整“画面”的时候，已经确定了鳄鱼头的运动初始位置了。现在，要给他找一个结束点的坐标轴。
我选的是从（130，30）到（130，40）。
" motion "运动指令有很多，不同类型的指令表达了不同的运动方式，有的是“噌！”的一声变过去的，有的是慢慢滑动过去的。
在这个示例里，我们选择后者，对应的" glide "指令：
以上指令连在一起解读就是：当鳄鱼头接收到“stretch”消息广播时，它从（130，30），花了1秒钟的时间，移动到（130，40），也就是垂直向上移动10个单位。
我也可以给鳄鱼头增加循环语句，这样它可以多运动几次，动画效果维持得更久。
先抛一个“超纲题”：为什么是“重复4次”，不是“3次”或者“5次”？
后面的内容会解释。
此外，大家实操的时候，一定会发现一个问题：就是在调整角色位置或运行的时候，这些角色的位置一定会慢慢的远离我们当初设定的最佳位置。
这时候，就要针对每个角色添加1个指令，这个指令的意思是：每次运行的时候，角色会回到我们设定的初始位置。
这样，不管是我们人为不小心挪动了角色的位置，还是运行结束产生了位置偏差。运行程序时，它们都会瞬间“噌”地一声回到我们设定的初始位置，然后再从初始位置开始运动。
比如给“被子”增加一条回到起始位置的指令：
🐊 让故事更完整
通过上面一波操作，立体书的核心内容 -- 鳄鱼先生的伸展运动，差不多完成了。
为了让这部动画更完整，接下来，我增加了2个任务：
1. 立体书里“从第1页翻到第2页”的效果。
在Scratch里，我的解决方案是：动画默认展示“第一页”，被点击，切换展示“第二页”。
2. 给故事里的文字配音。
在功能上说，就是在Scratch里添加配音录音。
第1个任务：从第1页翻到第2页
这个效果，需要解决2个问题：
第1个问题：如何默认展示“第一页”？
也就是说，默认只展示第1个门的背景，第2个背景和鳄鱼先生、被子等都得隐藏。动画开始，也就是当点击“小绿旗”时，显示第1个背景，鳄鱼先生的头等角色“隐藏”。
第2个问题：如何做到翻页？在Scratch里，可以设计一个触发动作，触发时，让第1页隐藏，第2页和鳄鱼先生展示。这样，完成了立体书里的翻页动作。
哈哈哈哈，又到了“我的地盘我做主”的高光时刻了，我宣布：点击第1页（第1个背景）时，隐藏第1页（第1个背景），展示第2页（第2个背景），鳄鱼先生等角色。
第2个任务：给故事里的文字配音
这里我设计了2段录音，内容都是书里的原文。
但是，有另外1个问题要解决：这2段录音分别在说明时间点播放呢？
我把第1段内容：Knock! Knock! What's the time, Mr Croc?
放在动画开始时播放，直到录音播放完。
把录音指令拖进来之后，点击"record..."。
在弹出的窗口里，点击"Record"按钮就可以直接录音了。
第2段内容：Eight o'clock. It's time to stretch my arms.
安排在点击被子时，并且录音播放与鳄鱼先生的伸展运动同时开始和结束。
所以，才有上面提到的，让鳄鱼先生的运动重复4次（而不是3次，5次）的设计。4次的运动时间刚好是我录音的时间长度。
指令的字面意思是，当床的背景收到“stretch”消息广播时，播放录音，直到播放完毕。
💌分享优化交互体验
要分享给朋友。
除了要与朋友分享乐趣外，更重要的是收集他们的想法和意见。这些信息对改进作品非常有帮助。
比如，这次我分享后，意外地发现，朋友看到这个作品不知道它是可以点击的！
朋友的反馈提醒了我，应该增加相关提示，告诉观看动画的人，这是可以点击、可以交互的！
最终，我才增加了“Click me”的提示。
至于，如何设计“Click me”的交互？
这个问题，就交给各位解决啦~
先自己操作，再看下图答案哟！
📢 中文版 or 英文版？
Scratch支持很多国家的语言，可以任意切换中英文。
切换中文后，以上界面的信息显示如下图：sprite 对应的“角色”，backdrop 对应“背景”，等等。
但，我还是强烈建议使用英文界面。
因为这些功能性的英语很容易理解，不会对孩子入门少儿编程造成困难，反而可以让孩子顺便学习英语。
更重要的是，如果孩子以后进阶学习Python等比较高级的编程语言，英语是必不可少的，语言逻辑也是一致的。
🔥 获取源代码和素材
请添加我的微信好友，发送消息“鳄鱼先生”给我。
我会把相关素材图片和编程源文件通过微信文件发送给您。（纯人工发送，可能会不及时，望理解）
微信ID：shinemap
2012
下载小花生APP
关注小花生公众号
