
第2章 踏入编程世界

1.界面初体验
双击打开Scratch 3.0软件,清爽的编程界面映入眼帘,这里就是我们尽情编织梦想的地方。
(本章体系化地讲解软件界面,你也可以选择快速翻阅并进入正式的课程学习,把本章内容作为界面的工具手册。本章的知识在后续的课程中都有融合。)

编程界面划分为功能区、积木区、脚本区、舞台区、角色区和背景区,它们就像人体的器官一样有着自己的特性和作用,为编程的正常运转贡献着自己的一份力量。
现在就跟随我一起来探寻它们。只有当你实实在在地看到了它们,才能有更直观的感受和更深刻的记忆。

接下来,我们将迎来新的任务挑战和学习计划,那就是了解每一个区域的特性和作用。

2.功能区

下面让我们逐个看一看,功能区中的每个按钮都蕴含了什么功能。
1)语言小地球

2)文件操作
对程序文件进行操作,需要单击“文件”。它里面有三大功能:

提示
保存在计算机中的.sb3文件,通常直接双击是打不开的,需要在软件中单击“文件”→“从电脑中打开”,然后选择打开对应文件。
3)编辑操作

案例:体验加速模式

洞查时刻
当加速模式开启后,小猫咪移动速度超快,线条也是瞬间绘制完成。同时你会观察到舞台区顶部有一道闪电,表示加速模式已开启。

4)教程

软件也为我们准备了形式多样的趣味教程,有动画、艺术、音乐、游戏、故事等。

5)作品名字

这里是给创作作品取名字的地方,一个优秀的作品应该配上一个不错的名字。作品的名字可以是对作品的描述,可以是梦幻的构想,可以是记忆的亮点,更可以是你心中所想。你的作品,名字你做主。
3.积木区


有了这些功能,我们可以让程序朗读课文、翻译外语、设计体感游戏,甚至可以控制乐高机器人,既有趣又酷炫。后面的课程我将和你一起探索。
试一试
单击积木区的积木块,观察舞台区中的小猫咪角色,选择正确的角色行为选项。
(1)单击移动10步积木块,小猫咪动了吗?

A.动了
B.没动
(2)单击右转15度积木块,小猫咪会怎么运动?

A.小猫咪没动
B.小猫咪会向左转
C.小猫咪会向右转
(3)单击说“你好!”2秒积木块,角色有什么变化呢?

A.出现文字气泡“你好!”
B.动了一下
C.出现文字气泡“你好!”,一会后气泡消失
通过试一试,你是不是已经明白积木块的作用呢?如果你还困惑上面试一试问题的答案,可以通过下面两步来解决。
每个积木块上面都有文字功能说明,结合前面讲的方法进行探索式学习。
验证答案,单击问题中的积木块,观察小猫咪的变化。
例如:第(3)题。
当积木块上围绕一圈黄色的光芒的时候,说明积木块程序正在运行,通过观察小猫咪的变化选出答案。

积木块被单击后,小猫咪身边出现文字气泡“你好!”

过了2秒,文字气泡“你好!”消失。
因此,答案选择C,因为程序运行后的效果是出现文字气泡“你好!”,过了一会气泡消失了。


4.脚本区
积木区就像存放积木的盒子,脚本区如同搭积木的玩耍区。在脚本区,你可以尽情地构建和拼搭——创作游戏、制作工具、设计动画、模拟现实、跨学科学习……这里是展示无尽想象力和无边创造力的地方。

之前,我们在积木区单击积木块,它们只能一个一个地运行。但是在脚本区,它们可以拼接组合在一起,每一种组合都是一种可能,有了无限的组合,就有了无限的可能。

试一试


1)积木块的拼接
大多数积木块都有凹槽和凸起,但也有一些例外,下面来看看不同情况的积木块吧。

积木块拼接需要凹槽对准凸起才可以,否则不会拼接成功,下面来看看积木块的拼接情况。



就算积木块有凸起和凹槽,它们也不会自动拼接哟!需要你拖动它们将它们组合起来。
将凸起靠近凹槽或者将凹槽靠近凸起,被拖动的积木块会出现灰色背景,这个时候松开鼠标就可以实现拼接了。

2)积木块的删除
积木块拼搭难免会出错,需要删除多余或错误的积木块。这个时候只需要两步即可轻松完成。
将要删除的积木块脱离积木组合。
将要删除的积木块拖动到积木区,松开鼠标左键完成删除。


3)积木块的包裹拼接

案例:被转晕的猫
单击控制模块。

将重复执行积木块拖动出来。

移动到要包裹的积木块上面,“咔哒”一声积木块包裹就拼接完成了。

这样右转15度就会重复执行了。

如果像下面这样拼接,就不算包裹拼接了,而是凸起拼凹槽了。

4)积木块的嵌入
每次只旋转15度太固定了,如果可以随机旋转角度或许会更加有趣。

5)积木块的修改

案例:快慢旋转猫

5.舞台区
舞台区是展示程序效果的地方,如果你创作的是一个游戏,那么它就是游戏界面;如果你制作的是一个工具,那么这就是操作界面;如果你拍摄的是一部动画,那么这就是观影屏幕;如果你录制了一段音频,那么这就是音乐播放器……

下面介绍舞台区中各个图标按钮的功能。


6.角色区
舞台区中的所有角色都会有一个缩略图存放在角色列表区。角色列表中记录着每个角色的相关信息,通过它可以设置角色的坐标,调节角色的大小,调整角色的方向以及控制角色的显示和隐藏等。

1)添加角色

将鼠标指针移动到按钮上方,在弹框中选择添加角色的方式,也可以直接单击该按钮进入系统角色库。

2)删除角色
选中角色,单击右上角的垃圾桶按钮即可删除角色。

7.背景区

思考提问
想要知道怎么添加背景吗?结合添加角色的讲解,自学一下吧。
写下背景添加的讲解说明:
