初心者のお子様でも大丈夫!スクラッチで簡単なアニメーションの作り方

スポンサーリンク
スクラッチ

どうもやない先生です。今回は世界中の教育機関で使われているプログラミング学習サイト「スクラッチ」を使って遊んでみましょう。

Scratch - Imagine, Program, Share
Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.

具体的にはレンガの壁の前にキツネがテクテク歩いているアニメーションをスクラッチで作っていきましょう。

ちなみにこちらのキツネ、勝手になめらかに歩きますし、クリックすると「Hello!」と挨拶します。

「え?いきなりそんなもん作れんの?」もしかしたらあなたはそう思うかもしれません。でも大丈夫!そんなに難しくはありません。一見複雑そうですが簡単に楽しく作ることが出来ます!

それではやってみましょう。まず最初にスクラッチに登録して作成画面を開く必要があります。

スクラッチの登録方法と作成画面の出し方はコチラの記事に書いてありますので分からない方は参照してみてください。
>>子どものプログラミングにおすすめ!スクラッチの始め方

スポンサーリンク

スクラッチの作成画面

作成画面を出すことが出来たらまず最初にスクラッチ画面の作成画面をご覧ください。以下の画面を使って作成していきます。

作成画面を開いてすぐは白い画面にキツネが一匹ボツリ・・・。さあ、果たしてオシャレなアニメーションは出来るのか!?

最初にイベントブロックを配置する

まず最初にイベントブロックを配置していきます。イベントブロックとは「こうなったら~」といった条件付けをキツネや背景などに行うために存在しています。

これらと他のブロック(条件)を上手く組み合わせることで自由自在に面白いアニメーション創ることが出来るというわけです!

さて、前置きはこれぐらいにして実際にブロックを配置していきましょう。画面左にある「イベント」のボタンをクリックします。

すると、あらビックリ!黄色のブロックが出てきました。

この黄色のブロックのうち、「🏁(旗)がクリックされた時」と書かれたブロックをドラッグして画面の真ん中の何もない場所に配置します。

キツネを動かすため、「動き」のブロックを追加していく

次にキツネを動かすため、「動き」のブロックを追加していきましょう。まず、画面左端の「動き」ボタンを押します。

次に「10歩動かす」ブロックを画面真ん中に持っていき、「🏁(旗)がクリックされた時」と書かれたブロックと連結させます。

これでキツネに「🏁(旗)がクリックされたら10歩動かす」とのプログラムが設定されました。さて、次は試しにキツネを動かしてみましょう。

キツネが動くか確認する

「🏁(旗)がクリックされたら10歩動かす」とのプログラムを設定したわけですがそもそもその「旗」はどこにあるのでしょうか?旗ボタンは作成画面右のキツネのそばにあります。

この緑色の旗をポチっと押します。

・・・一歩歩いたぞ!歩いた!でも何か思ってたのと違う!もっとこう・・パパっと動くのが見たい!

キツネの動きを連続させよう!

そこで次は「制御ブロック」の出番です。作成画面左端にある制御ボタンを押し、

「ずっと」のブロックを以下のように連結させます。

これでキツネに「🏁(旗)がクリックされたときずっと10歩動かす」というプログラムが設定されました。さて、キツネをもう一度動かしてみましょう!

動く!動くぞ!キツネはトトトトと画面端まで動いていきました。しかし・・・

画面端で止まってしまいました。うーん、行ったり来たりさせることは出来ないものか・・そこで今度は「動き」のボタンを再度押し、今度は「もし端に着いたら跳ね返る」のブロックを以下のように連結させます。

これで今度はキツネが端に着いたら跳ね返るように設定されました。再び旗のボタンを押してキツネを動かしてみましょう。(キツネの動きを止めたい時は旗ボタンの隣の赤い丸のボタンを押せば止まります。)

あれれ???今度はキツネさんが逆さまになってしまいました。実はスクラッチの場合、「もし端に着いたら跳ね返る」のブロックを使用するとキツネが逆さまになってしまう仕様になっているのです。

そこで今度は作成画面左にある「動き」ボタンをクリックし、「回転方向を左右のみにする」のブロックを以下のように連結させます。

すると

キツネがすみからすみまで行ったり来たりするようになりました。やった!

キツネをよりなめらかに走らせよう!

キツネは確かに動くようになりましたが正直動きは不自然です。歩いているようには見えません。ただキツネの絵がサーッと動いているだけです。

そこで今度はキツネがより自然に歩いて見えるように設定していきましょう。

まず、作成画面左上にある「コスチューム」をクリックします。

すると以下のような画面が出てきます。

コスチュームとはキツネの見た目を変更してよりアニメーションのように動かすことが出来るようになる機能です。次に↑の画面左にコスチュームが二つあることを確認します。

次に「コード」のタブを押して作成画面に戻ります。そして「次のコスチュームにする」のブロックを以下のように連結させます。

次に左端の「制御」のボタンを押し、「1秒待つ」のブロックを以下のように連結させます。

なお、「1秒待つ」から「0.1秒待つに」ブロック内の数字を変更します。すると・・・

滑らかに歩き出したではありませんか!

(画像では分かりにくいですがなめらかに歩いています。てか走っています!)やったー!こんな感じで次のコスチュームに変更するだけでこんなに滑らかに走るようになるわけです。

背景を変えてみよう!

ここまで来たらもう少し!キツネがいる画面の背景を変えてみましょう。まず作成画面右端にある丸い「背景ボタン」をクリックします。

すると大量の背景がズラリと出てきました。この中から自分のお好きな風景を選びます。

ちなみにボクはレンガの背景にしました。

キツネに「こんにちは!」と言わせてみよう!

さて、最後の仕上げです。キツネに「こんにちは!」と言わせてみましょう。具体的にはキツネをクリックしたら

こんな感じにさせます。地味とか言うな!

まず、作成画面の左端にある「イベント」ボタンをクリックして、「このスプライトがクリックされたとき」というブロックを持ってきます。ちなみにスプライトとはキツネのことを指しています。

次に作成画面左端の「見た目ボタン」を押し、「こんにちは!と2秒言う」のブロックをドラッグし以下のように「このスプライトがクリックされたとき」のブロックと連結させます。

そうすれば・・・

と言いながらテクテク走るキツネの完成です。やっと完成したぜ!

ちなみにコチラ↓が完成した時の作成画面です。

まとめ:あれこれ試行錯誤することが大事

まあだからといってこの通りに出来なくても良いんです。お子様があれこれ自分で試行錯誤して自分の頭で考えれるようになれば御の字!なんです。

とにかく気軽にお子様がスクラッチを楽しむことが出来ればそれでよいんです!

Scratch - Imagine, Program, Share
Scratch is a free programming language and online community where you can create your own interactive stories, games, and animations.
スクラッチ
スポンサーリンク
スポンサーリンク
この記事を書いた人
やない先生

どうもやない先生です。先生は芸名です。2020年から始まる小学校のプログラミング教育の必修化に向けて役に立つ記事を書いていきますのでよろしくお願いします。SNSフォローお願いします↓

やない先生をフォローする
おしえて!やない先生