
2.3 让名字动起来
2.3.1 介绍
米小红小朋友很喜欢舞台的感觉,可是他不能随时随地到舞台表演,怎么办呢?有一天她想到了一个办法,让自己的名字在舞台上动起来。说做就做,使用Scratch让名字随音乐动起来吧!
2.3.2 制作素材准备
背景使用库里面的Concert。

这次我们会用一段背景音乐,选中已经加入的背景,点击【声音】,在左下角点击【选择一个声音】。

进入声音库后,选择“可循环”。一般可循环的音乐可作为一直播放的背景音乐。当鼠标移动到对应的音乐格子时系统就能自动播放。可以选择自己喜欢的,这里选择Dance Energetic,点击后就可以把音乐放到背景里。

Scratch可以对声音进行调整,包括各种效果,大家可以每一个都尝试一下,这里就不详细介绍了。

这一次的角色就用“米小红”这个名字,图库里面是没有的,所以我们需要自己做。为了让名字由各种方式动起来,我们需要把“米小红”3个字分成3个角色,一个字为一个角色。在“角色控制区”中选择“绘制”,建立一个空的新角色。

选择绘制工具中的“T”,这时可以输入文字,用中文输入法输入“米”字,然后拖到右下角,适当把字放大一些。
在填充中通过滑动3个不同的选项来选择自己想要的颜色,我们这里选择一个黄色!

这样在舞台上就会多了一个“米”字。用同样的方法,我们把另外两个角色“小”和“红”都做出来。可以试着在绘制“小”的时候点击工具栏的“箭头”启用一下颜色旁边的轮廓,为字加上一个不同颜色的外边框。好了,现在三个角色都做好了。为便于下面的讲解,我们把角色的名字改一改。到此,我们的素材都准备好了。


2.3.3 制作详细步骤
在绿旗启动时,我们让“米”“小”“红”先按顺序依次动起来,并且它们动的方式会有所不同,最后让它们一起有节拍地动起来。所以下面我们将分解每一个角色的动作,并教会大家一个消息的广播和接收功能。在“米”的脚本上,我们先放上“事件”里的【当绿旗被点击】,再让米字变换几个颜色,加入“外观”中的【将颜色特效增加】积木。为了让它有一个变化的过程,别忘了在外面加上一个循环控制,使用“控制”中的【重复执行…次】积木,这里就暂定为5次!同时,为了能看清楚变化的过程,在每次变化之前等待0.1秒,所以卡合“控制”中的【等待…秒】,把参数改成0.1。

经过变化后,“米”就不再是原来的颜色了,如果我们想让它又变回原来的颜色,并且在变回的过程中有一个颜色的变化,我们可以利用上面一段循环代码,在【重复执行】上点击右键,选择“复制”,这样鼠标就会自动有一段一模一样的代码,直接把它卡合到上一个【重复执行】积木下面。如果要颜色倒回去,我们只需要让颜色的特效每次减少25,也就相当于是增加-25了。

“米”做完了自己的动作后,怎么让“小”动起来呢?Scratch提供了一个叫“消息的广播和接收”的功能,就相当于是一个角色拿着“话筒”向另一个角色喊话,另一个角色听到后就开始执行一样。下面我们来用一下这个功能。
“米”在结束所有动作后,在最后面卡合“事件”的【广播】,因为之后可能还要做多个广播,所以我们新建一下消息,点击【广播】的“消息1”就会显示一个菜单。我们选择“新消息”后,就会弹出一个“新消息”窗口,将消息的名称设为“呼叫小”!请注意,由于本书教的都是基础,因此我们用最容易懂的中文来命名这个名称(包括往后的一些参数),如果以后学到了文本类的编程,就需要使用有意义的英文来命名。

下面我们该让“小”来接收这个消息了。选择“小”这个角色,在代码区加入“事件”里的【当接收到…】积木,这里默认就已经是“呼叫小”的消息参数了。之后,我们就可以开始让“小”动起来了。

尝试让“小”做一下放大和缩小的变化。使用“外观”中的【将大小增加…】积木,让它循环放大5次。这里有一个需要注意的地方,当测试积木放大时,就算把程序停止重新来,但是放大的字每次都不会像颜色那样进行一次大小的初始值设置,所以在这里我们需要在程序运行时马上对“小”的大小进行一次初始值设置。加入【当绿旗被点击】,然后卡合“外观”的【将大小设为100】的积木,这样在多次测试中都能保持同样的变大效果。注意,后面做一些复杂的程序时,经常需要对角色就大小、方向等各种参数进行初始化。

之后我们再让“小”慢慢变回原来的大小,复制“重复执行”这一段代码,然后将大小增加10改成增加-10,最后加入消息广播,告诉“红”要动起来了!我们把消息名称设定为“呼叫红”。

选择“红”这个角色,在代码区加入“事件”里的【当接收到…】积木,参数选择“呼叫红”。这样“红”就接收到“小”的消息通知了。之后我们就可以开始让“小”动起来了。
这一次我们尝试让“红”转一个圈吧!但在这之前,我们还是养成一下习惯,先为“红”来一个数据初始化。加入【当绿旗被点击】,然后卡合“外观”的【面向90方向】积木。必要时,如果为了之后加入更多的动作,也可以加入【将大小设为100】的积木来初始化大小。之后我们就可以开始做“红”的转圈脚本了。

如果要让“红”转一个360的圈,我们可以使用“运动”里的【左转…度】或【右转…度】。这里我们让它右转!360度一圈,我们如果想让它转回原来的位置并且每次右转15度,那么一共需要转多少次呢?一共需要360/15=24次,所以我们需要在外面包上24次的循环。

先点击积木组测试一下!细心的人一定会发现它出了一个我们大家都意想不到的问题——“红”竟然在转的过程中跑出舞台了!这里先请大家认真思考一下,为什么会发生这样的事情呢?

相信学过圆的朋友都想到了,一个正圆的中心点就是圆心,如果一个物体需要旋转正圆的360度,就需要围绕一个圆心进行旋转。很显然,“红”在旋转的时候,正圆的范围已经超出了舞台,所以“红”才会转到舞台外面。那么,如何让“红”成功转完360度同时又不离开舞台呢?物体绕圆心旋转时,物体中心点与圆心间的距离就相当于是圆的半径,当圆心与物体中心点连接长度越小时,物体旋转的范围就越少,如果当圆心与物体中心重叠时,物体的旋转就成为自转了。我们利用这个原理,修改一下“红”的圆心范围。
点击造型,可以看到圆心,如果看不清,可以点击右下角的放大镜,这样就能清晰地看到圆心了。

然后只需要把“红”拖到这个圆心,大约让红的中心点接近这个圆心就可以了。测试一下“红”是不是已经在原地自转了。
有些比较喜欢自己研究的朋友在思考和测试这个程序的过程中,可能还会在“运动”中发现一块很特别的积木——【将旋转方式设为…】。这块积木用于改变角色的旋转方式,包括“左右翻转”“不可旋转”“任意旋转”,默认是“任意旋转”,如果在刚才使用这块积木对“红”做过“左右翻转”的动作,就会发现“红”被拖到圆心后,“红”没有办法以圆的方式自转。这也跟初始值保留有关。如果想让“红”听话地转起来,最好在循环之前加入【将旋转方式设为任意旋转】这块积木。不设初始值的原因是,旋转方式可能在程序里有多次不同的变化,设置初始值不如在旋转之前改变方式更灵活。

到了这里,我们就按照自己的想法让“米”“小”和“红”依次运动了一次,就当作热身了!下一步,我们让它们配合舞台的背景一起动起来!
“红”在动完以后,需要告诉舞台播放音乐,然后所有角色一起动起来,所以当然还是需要用到“消息广播和接收”的功能了。
在“红”单独动完之后加入消息广播,告诉背景和所有角色开始动了!我们把消息名称定为“呼叫所有”。
然后背景和所有角色都加入【当接收到呼叫所有】积木,就开始对它们的动作做脚本了。

背景的动作:主要是开始播放背景音乐。
点击背景,卡合“声音”里的【播放声音…等待播完】,之前已经在背景中加入了一段音乐,并使用循环让它不断地播放。积木默认也是播放这一段音乐。

“米”的动作:一边缩小一边向左移动,再一边放大一边向右移动回原来的位置,就这样不断循环变化。这里特别提醒一下,之前“米”是没有做初始化动作的,所以这里也需要做一下大小的初始化。由于“米”后面有位移的动作,所以还需要做一个位置的初始化,可以使用“移动”中的【移到x:… y:…】积木。这块积木会记录角色当前的位置,所以只要把角色舞台位置放好,直接使用积木上面的数值就可以了,或者通过角色区域中的坐标系得出。

循环8次,卡入【将大小增加-10】和【移动-10步】;然后循环8次,卡入【将大小增加10】和【移动10步】;最后为了让它不断地变化下去,我们还可以在外面再加入一层循环。我们通常称之为循环的嵌套。
“小”的动作:变着颜色、转着圈地不断上下跳。
注意
给“小”的初始状态加上【面向90方向】,同时也因为有位移的操作,所以也要增加位置的初始状态。

“小”的初始化积木
首先我们解决如何向上下移(向左右移动我们试多了)。上下移动一般可以使用“运动”中的【将y坐标增加…】积木。如果我们想用24次完成一个自转,那么在回归到原来的位置时,我们可以通过两个12次循环完成。第1个12次循环,卡入【将颜色增加25】、【右转15度】、【将y坐标增加10】;第2个12次循环,卡入【将颜色增加-25】、【右转15度】、【将y坐标增加-10】;最后为了让它不断地变化下去,在外面再加入一层循环。


“红”的初始化积木
“红”的动作:可以尝试做复杂一点,依然是把初始化的积木先做好,让“红”边翻跟头边缩小,同时向右移;然后边翻跟头边放大,同时向左移,左移位置超过刚才右移的两倍;最后边翻跟头边缩小,同时再向右移,恢复初始状态。
动作看着好像挺复杂,但先不要急,我们可以把它慢慢分解为一个个大家已经掌握的步骤。程序其实就是先把复杂的问题分解成各个简单的步骤再把这些步骤组合起来的过程。
根据上面的第一次动作,我们可以分为3大步骤,而每个步骤又能分成单独的4个指令来完成:第1个12次循环,卡入【将x坐标增加5】、【右转30度】和【将大小增加-5】;第2个24次循环,卡入【将x坐标增加-5】、【右转15度】和【将大小增加5】;第3个12次循环,卡入【将x坐标增加5】、【右转30度】和【将大小增加-5】;之后要让每一次动作不断重复执行,只需要在外层增加一个无限循环就可以了。
把整个动作分解后,是不是容易了很多?
细心的人可能还会发现,这次我们的左右移动不再简单地使用【移动…步】积木,这是为什么呢?请大家尝试一下把【将x坐标增加…】换成【移动…步】,比较一下“红”的动作效果。程序是需要大家经常动手测试的,所以这里就不做详细论述了,看看下面“红”的积木变化。

到此,米小红同学就成功让名字动起来了。这里有两个比较重要的知识点,第一个是“消息的广播和接收”,通过广播和接收,可以让不同的角色之间互相配合,这在往后的故事类等场景应用中比较多;第二个是“循环嵌套”,在复杂的程序中,往往都会有这样的嵌套,嵌套的层数越多,动作的组合就越丰富,但层数越多,有时越容易引起BUG,特别是文字类编程,所以尽量慎用多层循环嵌套。我们还学会并比较了一些比较常用的角色运动、外观之间的组合,这些都可以让我们的角色动作更灵活多样。
2.3.4 开动大脑拓展一下
本动作中,每个角色单独运动时,舞台都没有配背景音乐,尝试给它们配上几个不同的音效。
可以尝试为各个文字的动作方式增加更多不同的组合。
利用“消息的广播和接收”功能,尝试写两个角色的一段小对话。