在家,培养孩子解决问题能力:如何用少儿编程Scratch做动画?(附保姆级教程)

2012
2020-2-11 12:04 原创 · 图片33

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

Scratch在线少儿编程

scratch的官方网站:scratch.mit.edu  

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

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

那么,如何做到呢?

鳄鱼先生立体书  

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

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

视频版教程 👇

💻 在哪用Scratch?

登录官网:https://scratch.mit.edu/

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

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

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

下载桌面版。

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

说白了,就是看你家用的是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里,我的解决方案是:动画默认展示“第一页”,被点击,切换展示“第二页”。

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

在功能上说,就是在Scratch里添加配音录音。

第1个任务:从第1页翻到第2页

这个效果,需要解决2个问题:

第1个问题:如何默认展示“第一页”?

也就是说,默认只展示第1个门的背景,第2个背景和鳄鱼先生、被子等都得隐藏。动画开始,也就是当点击“小绿旗”时,显示第1个背景,鳄鱼先生的头等角色“隐藏”。

默认展示第一个背景图 隐藏鳄鱼先生  

第2个问题:如何做到翻页?在Scratch里,可以设计一个触发动作,触发时,让第1页隐藏,第2页和鳄鱼先生展示。这样,完成了立体书里的翻页动作。

哈哈哈哈,又到了“我的地盘我做主”的高光时刻了,我宣布:点击第1页(第1个背景)时,隐藏第1页(第1个背景),展示第2页(第2个背景),鳄鱼先生等角色。

点击进入第2个背景图,并且展示鳄鱼先生  

第2个任务:给故事里的文字配音

这里我设计了2段录音,内容都是书里的原文。

但是,有另外1个问题要解决:这2段录音分别在说明时间点播放呢?

我把第1段内容:Knock! Knock! What's the time, Mr Croc?

放在动画开始时播放,直到录音播放完。

把录音指令拖进来之后,点击"record..."。

在弹出的窗口里,点击"Record"按钮就可以直接录音了。

点击“Record”开始录音  

第2段内容:Eight o'clock. It's time to stretch my arms.

安排在点击被子时,并且录音播放与鳄鱼先生的伸展运动同时开始和结束。

所以,才有上面提到的,让鳄鱼先生的运动重复4次(而不是3次,5次)的设计。4次的运动时间刚好是我录音的时间长度。

指令的字面意思是,当床的背景收到“stretch”消息广播时,播放录音,直到播放完毕。

💌分享优化交互体验

要分享给朋友。

除了要与朋友分享乐趣外,更重要的是收集他们的想法和意见。这些信息对改进作品非常有帮助。

比如,这次我分享后,意外地发现,朋友看到这个作品不知道它是可以点击的!

朋友的反馈提醒了我,应该增加相关提示,告诉观看动画的人,这是可以点击、可以交互的!

最终,我才增加了“Click me”的提示。

至于,如何设计“Click me”的交互?

这个问题,就交给各位解决啦~

先自己操作,再看下图答案哟!

click me  

📢 中文版 or 英文版?

Scratch支持很多国家的语言,可以任意切换中英文。

切换中文后,以上界面的信息显示如下图:sprite 对应的“角色”,backdrop 对应“背景”,等等。

但,我还是强烈建议使用英文界面。

因为这些功能性的英语很容易理解,不会对孩子入门少儿编程造成困难,反而可以让孩子顺便学习英语。

更重要的是,如果孩子以后进阶学习Python等比较高级的编程语言,英语是必不可少的,语言逻辑也是一致的。

🔥 获取源代码和素材

请添加我的微信好友,发送消息“鳄鱼先生”给我。

我会把相关素材图片和编程源文件通过微信文件发送给您。(纯人工发送,可能会不及时,望理解)

微信ID:shinemap


回应5 举报
赞15
收藏103
4年前
不明觉厉
3年前
厉害👍👍👍👍👍👍
3年前
谢谢分享😊👍👍👍👍
2年前
我们正在学习使用scratch.太感谢啦!
发布

推荐阅读

菱姐
菱姐
2012