在家，培养孩子解决问题能力：如何用少儿编程scratch做动画？（附保姆级教程） -pg电子试玩

在家，靠一台电脑就能培养孩子解决问题的能力？
没错！一款超受美国家长欢迎的，由世界顶级学府麻省理工学院打造的免费工具就能做到：

scratch在线少儿编程

儿子还是小宝宝的时候，囤了很多有趣的立体书。现在小宝宝长大了，上学了，“看不上”这些幼稚的书了。但，立体书都挺贵的，压箱底怪可惜的。

所以，我提出了一个“变废为宝”的计划：用scratch，把立体书变成动画片。

那么，如何做到呢？

通过本篇的实例，可以了解如何利用编程工具，训练小朋友解决问题的能力，入门少儿编程。

另外，文末附scratch源码和鳄鱼先生的手绘素材获取方式。

视频版教程 👇

💻 在哪用scratch？

登录pg电子试玩官网：

scratch有网页版和桌面版，因为这是国外网站，所以访问速度通常较慢。对于经常要使用的同学，建议安装桌面版的，不受网络条件限制，操作更方便。

但是，网页版有发布到scratch社区的功能，可以让全球的小伙伴看到你的作品了。

结合两者优点，可以在桌面版做好后，再登录scratch网页版账号，发布作品。

下载桌面版。

回到pg电子试玩首页，一直拖到最底部，能看到桌面版的下载入口。进入下载页面后，选择自己使用的操作系统。

说白了，就是看你家用的是windows个人电脑，还是苹果macos电脑，还是安卓手机/平板电脑。（chromeos几乎没人用的）

网站上也有对应的安装步骤说明。

并且，也能看到网站的语言切换按钮。如果觉得浏览英文网站不习惯，可以切换成中文的。

另外，非常值得一提的是，麻省理工学院提供的不仅仅是款免费少儿编程工具，它还提供了教程、优秀作品等良好的国际化学习氛围。

💡 立体书的编程思维

既然灵感来自鳄鱼先生立体书，那么第1个问题就是：立体书是如何运动？

拆解运动如下：

1. 当我拉动箭头的时候，
2. 鳄鱼先生做伸展运动。

进一步拆解动作，得到如下：

1. ↓鳄鱼先生的头向下移动
2. ↑鳄鱼先生的左手的向上运动
3. ↑鳄鱼先生的右手的向上运动

第2个问题来了：如何把鳄鱼先生放到scratch世界？

通过第1个问题的拆解，可以推导出来一个结论：鳄鱼先生的头、左手、右手、箭头、被子、床（背景图）都是独立的个体。

于是，我单独手绘了以上元素，并分别导入到scratch。为了提（tou）高（lan）效（sheng）率（shi），我把箭头和被子画成一张图。

在scratch世界里，这些独立的个体叫" sprite "（角色），背景图还是叫" backdrops "（背景）。

鳄鱼先生的头、左手、右手、被子导入成" sprite "。

床的背景图导入成" backdrops "。

导入成功后，它们的默认大小和位置是乱糟糟的，胳膊会长在脑袋上。

这时候，需要妈妈们拿出来平时精修自拍照时候的耐心，辅助孩子来来一点点调整画面：

1. 角色过大：调整" size "（大小比例）让鳄鱼先生身体各个部分协调起来；
2. 位置混乱：直接用鼠标拖动，调整位置即可；

强行入戏的吉祥物：删掉即可。

调整后，能得到一张近似原版书的漂亮“图”了。

第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里，我的pg电子试玩的解决方案是：动画默认展示“第一页”，被点击，切换展示“第二页”。

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