初级篇——飞翔的蝴蝶

【疑惑篇】

点击绿旗按钮,一只蝴蝶在舞台中央不停的挥动翅膀,天上有云飞过,地上有车在跑。

视频演示open in new window

亲自操作open in new window

想一想: 可以有几种方式实现?尝试增加其他移动的物体。

【线索篇】

案例分析

它们发生的场景是什么?

每个场景中有哪些角色?

每个场景中的每个角色在做什么?

蝴蝶

  1. 点击绿旗按钮,蝴蝶在舞台中间不停的扇动翅膀。

白云

  1. 点击绿旗按钮,三朵白云从不同的初始位置向舞台左侧移动(移动速度不同)。
  2. 移出舞台最左侧后,移动至舞台最右侧。
  3. 向舞台左侧移动(移动速度不同)。
  4. 重复2~3步。

巴士车

  1. 点击绿旗按钮,从舞台最右侧向舞台左侧移动。
  2. 移出舞台最左侧后,移动至舞台最右侧,一秒后出现。
  3. 向舞台左侧移动。
  4. 重复2~3步。

积木提示

当绿旗被点击

移动(10)步

移到x:(0) y:(0)

在(1)秒内滑行到x:(0) y:(0)

将旋转方式设为[左右翻转]

面向(90)方向

将x坐标增加(10)

换成([造型1])造型

下一个造型

将大小设为(100)

显示

隐藏

等待(1)秒

重复执行

注意事项

  1. 角色的初始位置
  2. 角色的大小
  3. 巴士车在舞台最右侧出现的时间

【解决篇】

开始制作案例之前,我想先问你一个问题。相信你一定看过动画片,你有没有思考过,动画片中的人物是如何动起来的?

在之前的案例中你已经知道了,运动只是角色在一段时间内坐标或者方向的改变。动画片中的人物之所以可以做出各种动作,原理也是一样。就像你拿着一本手翻书快速的进行翻页,每一页的图片就会因为人类视觉暂留而感觉图像动了起来。

Scratch中角色的每个造型就是手翻书中的一页图片,当你选择角色时,将鼠标停留在任意一个角色的图像上,就可以看见它多个造型快速切换的动画效果。

知道了动画原理,接下来就可以开始完成飞翔的蝴蝶。

第一步,还是添加需要的背景,这里用到了Blue Sky。

第二步,添加角色。

第三步,通过指令制作动画。

首先,来看看蝴蝶做了什么。

角色:蝴蝶

1.点击绿旗按钮,蝴蝶在舞台中间不停的扇动翅膀。

注意观察,蝴蝶在舞台中间扇动着翅膀,像是正在飞翔。但是你注意它的坐标值,并没有发生改变。如何实现呢?

进入蝴蝶的造型列表,你会发现它有两个造型。只要你不停的切换两个造型,蝴蝶就开始扇动翅膀了。

首先,使用当绿旗被点击积木启动指令串。

接着,既然需要切换造型,你就需要使用换成([造型1])造型积木或者下一个造型积木。在这里蝴蝶只有两个造型互相切换,最简单的方式就是不停的让它切换到下一个造型就可以了。

怎么样不停切换?是不是需要使用重复执行积木。

点击绿旗按钮进行测试,你会发现蝴蝶的翅膀翅膀会扇动的非常快。怎么让它慢一点呢?有没有想到只要让它切换一次造型后,使用等待(1)秒积木让它等待一定时间就可以了。

具体需要等待多久,你可以自己修改积木参数进行测试。

蝴蝶完成了,接下来就来做白云。

角色:白云

在完成了之前的一系列案例后,看见白云的移动,你会不会感觉很简单。与之前案例不同的是,白云没有左右来回移动,而是保持一个方向不停的移动,应该如何实现它?

1.点击绿旗按钮,三朵白云从不同的初始位置向舞台左侧移动(移动速度不同)。

同样使用当绿旗被点击积木启动指令串。

因为白云比较大,可以先用将大小设为(100)积木将它变小点。

注意观察,点击绿旗按钮后,每个白云的初始位置都不一样,可以使用移到x:(0) y:(0)积木分别将它们移到初始坐标位置。

接下来,它们就会从初始位置向左移动,直到离开舞台左边缘。是不是可以使用在(1)秒内滑行到x:(0) y:(0)积木。白云移动的过程中只是左右滑动,所以y坐标和移到x:(0) y:(0)积木保持一致,x坐标为-240。

三朵白云的滑行速度不同,可以通过时间参数进行调整。

2.移出舞台最左侧后,移动至舞台最右侧。

注意观察白云在舞台上移动的过程,每当它移动至舞台最左侧后就会消失,接着从舞台的最右侧出现。

有没有想到使用隐藏积木先让他消失,再使用移到x:(0) y:(0)积木让它回到舞台最右侧,同样y坐标不变,x坐标为240。最后,使用显示积木让它重新显示出来。

还记不记得我之前说过,移到x:(0) y:(0)积木会让角色瞬间移动,并且这个积木执行的速度非常快,所以在这里就算没有使用隐藏显示积木,展示出的效果也是一样的。

3.向舞台左侧移动(移动速度不同)。

这一步是不是很简单了,跟第一步一样,使用在(1)秒内滑行到x:(0) y:(0)积木让它从舞台右侧滑向舞台左侧就可以了。只是因为蝴蝶滑行的距离变长了,你需要注意把它的滑动时间也要变长。

4.重复2~3步。

最后一步,每当蝴蝶滑到舞台左边缘后就会重新回到舞台后侧,接着继续滑行。需要使用重复执行积木让前面两步重复执行。

我相信你一定可以想出上面这种实现方式,除此以外还有没有别的实现方式呢?

你有没有想到向左移动的过程就是x坐标不断减少的过程,类似苹果下落的案例,可以使用将x坐标增加(10)积木和重复执行积木来让它移动。

除此之外,还可以使用移动(10)步积木让它朝着-90度方向移动。需要注意的是调整方向之前需要修改它的旋转模式,避免它发生上下颠倒的情况。

通过这两种方式都可以让白云从右向左移动,但是都会遇到一个问题,当它们移动到舞台左边缘后就会停住,无法返回右侧边缘。如何解决这个问题,留作给你的思考题。

我先给你一些提示,每当角色使用移动积木移动一次后,你就需要判断它是否到了舞台的左侧边缘。

判断的方式有两种,一种是利用控制分类的如果<>那么积木和侦测分类的碰到([鼠标指针])?积木,来判断白云是否碰到了舞台边缘。

另一种是利用如果<>那么积木和运动分类的x坐标积木,以及运算分类的大于小于积木,来判断角色的x坐标值是否超出了舞台边缘。

如果角色碰到或是超出了舞台边缘,就在如果<>那么积木中让它返回舞台最右侧。

你可以自己思考并测试一下这两种判断方式,其中只有一种可以让程序正常运行。想一想,另一种方式的问题是什么?

最后还剩下巴士车,它的运动过程和白云很类似。

角色:巴士车

1.点击绿旗按钮,从舞台最右侧向舞台左侧移动。

点击绿旗后,它就直接出现在舞台最右侧,向舞台左侧移动。

2. 移出舞台最左侧后,移动至舞台最右侧,一秒后出现。

这一步,跟白云一样,不同的是巴士车不会立马出现,而是需要等待1秒钟。因此,你需要先将它隐藏起来,等待一秒后再重新出现。

3.向舞台左侧移动。

这一步与第一步类似,使用在(1)秒内滑行到x:(0) y:(0)积木让它移动到左侧就可以了。

4.重复2~3步。

最后,使用重复执行积木让它重复执行前面两步。

你可以仔细观察前面的步骤,实际上有一部分是重复的。这是由于我在线索篇中,分析巴士车的执行过程时,将它们分成不同的步骤所导致。现在你可以重新整理一下巴士车的执行过程,改变一下积木的顺序,将重复的积木剔除掉,让整个程序变的更简单。

想看更多学习案例,欢迎点击查看《Scratch 3学习手册》open in new window

想要获取所有案例源码和素材,以及获得我对你在学习中所遇问题的一对一解答,欢迎加入石头解忧杂货店

Last Updated:
Contributors: lanheixingkong