前のページへ戻る

キミもレスキュー隊に入隊

18-1 「スクラッチでCMを作ってみよう」

前準備

スクラッチサイトにアクセスして、サインインしよう。
(まだ自分のアカウントを作っていない人は、「スクラッチのはじめ方」にしたがってアカウントを作ってね)
why_programming_18のスタジオ(※NHKサイトをはなれます)を見てみよう。

why_programming_18のスタジオで、プロジェクト「18_1 CMを作る」を選び、「中を見る」、次に「リミックス」をおして、自分のアカウントにコピーしてね。
(コピーの仕方は「自分の作品を作ろう!リミックス(改造)をする」も読んでね)

ラム

CMを作ってみよう

イメージ画像

CMは、コマーシャルのことよ。
テレビ番組の途中(とちゅう)に流れたりするわね。
ものごとの魅力(みりょく)を短くまとめて伝えることで、見る人の心に残るように作られているの。
今回は一緒に「うさぎとかめ」のCMを作ってみましょう。
覚(おぼ)えておくと便利(べんり)なワザを教えるわ。
それができたら、他の物語や、学校、友人、好きな食べ物…ぜひ、自分の好きなもののCMも作ってみてね。

ラム

背景(はいけい)、キャラクター、文字は別々にとりこもう

イメージ画像

イメージ画像

イメージ画像

スクラッチにとりこんである、絵を見てみて。
背景、キャラクター、文字は、それぞれ別々にとりこまれているわね。
そうすると、それぞれに別の動きをさせられるから、より凝(こ)った作品に仕上げられるわ。
自分で絵や写真をとりこんで作るときはスタジオ10、音をとりこむときはスタジオ11、を参考にしてやってみてね。(※NHKサイトをはなれます)

ラム

文字を動かしてみよう

イメージ画像

CMを作るとき、覚えておくと便利なワザ その1「文字を動かす」。
プログが作ったCMで、文字が色んな動きをしていたわね。
あんな風に、伝えたいことを書いた文字を動かすと、より心に残りやすくなるわ。
それじゃ、プログが作った「文字」を動かすプログラムを見てみましょう。
スプライトの中に「勝つのは!?」「走る才能」「あきらめない才能」「才能VS才能」のどれかが 表示されたものがあるから、そのスクリプトをひらいてね。
その中の、Pキーが押されたときで始まるプログラムを見て。
これが、プログのCMの1コマ目の文字の動きよ。それぞれのブロックの意味は…
1)〇秒待つ→表示する文字を出すタイミング を決める
2)コスチュームを〇〇にする→表示する文字を、何にするか決める
3)X座標を〇、Y座標を〇にする→表示する文字のスタート位置やを決める
4)大きさを〇%にする→表示する文字のサイズを決める。
5)表示する、前に出す→「前に出す」がないと文字がかくれて見えないことがあるから注意してね。
6)〇〇の音を鳴らす→文字がでるときに音を付けると、心に残りやすいわ。
7)大きさを〇ずつ変える など→表示する文字を、どう動かすか決める。
ここでは、「2」ずつ、つまり少しずつ大きくすることでなめらかに 大きくなるように見せているの。
「〇回繰り返す」という命令と合わせて使って、最後にどのくらいの大きさにするのか決めてね。

ラム

イメージ画像

それじゃ、こんどは2コマ目の文字を自分で動かしてみましょう。
番組では左のようなプログラムにしたけれど、これを参考に自分の好きなようにやってもいいわ。
〇秒でX座標を〇に、Y座標を〇に変える という命令の数字を変えて、 動く時間や位置を調整してみてね。
大切なのは、どの文字を、どこから、どのタイミングで、どうやって、どこに向かわせるか…
こうしたことを組み合わせて動かしているってこと。
文字だけじゃなく、キャラクターを動かすときも同じ考え方よ。

ラム

 文字を回転させてみよう

イメージ画像

CMを作るとき、覚えておくと便利なワザ その2「文字を回転させる」。
プログがやってみせた、文字を回転させながら大きくするワザを覚えましょう。
4コマ目のプログラムのところに、
・30回くり返す
・大きさを4ずつ変える
・〇度回す
というのがあるわね。
これで、文字の大きさを少しずつ
(4ずつ)大きくしながら、くるくる回転させているんだけど、 〇度回すの数字がうまってないわね。ここに数を入れれば回るのだけど、ちょっと注意が必要なの。

ラム

イメージ画像

イメージ画像

何を注意するかというと、回転しおわったとき文字が逆さにひっくり返ったり、斜めになったりしないようにすること。
そうなると読みづらくなってしまうことがあるわ。
いい? 最初、文字は上を向いているわね。
だから、それを回転させたとき、1回転、2回転、3回転、4回転…と、 ちょうどキリのいい数で回せれば、文字は最初と同じ上向きになっていることになるわね
(→たとえば2回転だと、文字は下を向いちゃうわ)。
いま、〇に入る角度を決めたいのだから、これを「角度」に置きかえて考えてみて。 1回転は360度だから、
1回転…360度
2回転…720度(360度×2回転)
3回転…1080度(360度×3回転)
4回転…1440度(360度×4回転)
という角度のとき、文字はきちんと上を向くことになるわね。

ラム

イメージ画像

ここでは、30回繰り返す〇度回すの、2つの数字をかけ算した答えが、
360度、720度、1080度、1440度…になっていればいいわね。
30回繰り返す24度回す にしたら、30×24=720度となり、 文字は2回転してキレイに上を向いて止まる。
30回繰り返す36度回す にしたら、30×360=1080度となり、 文字は3回転してキレイに上を向いて止まるわね。
さぁ、プログは、30回繰り返す48度回すとして文字を4回転させたけど、みんなはどうする?
5回転でも10回転でも、好きなように文字をあやつって楽しんでみてね。
自分でやってみると、もっとよくわかるようになるわよ!

ラム

幽霊(ゆうれい)の効果(こうか)を使ってみよう

イメージ画像

CMを作るとき、覚えておくと便利なワザ その3「幽霊」の効果を使おう。
幽霊はスプライトの姿を消したり、すけるようにしたりできる命令よ。
「隠す」とちがって、少しずつ消すこともできるのが特ちょうね。
例えば文字をゆっくり消えるようにしたり、消えていく煙(けむり)を表現したり…
アイデア次第で、すごくおもしろい作品になるわよ。

ラム

番組では、うさぎの姿がフワーっとあらわれる演出(えんしゅつ)に幽霊の効果を使ったわ。
スプライトの中にウサギが向かい合った絵があるから、そのプログラムをひらいてみて。
プログラムの「見た目」カテゴリーの中から、「色▼の効果を0にする」という命令を見つけてね。
さらに、その▼の部分をおすと「モザイク」「明るさ」など、画像にいろんな効果を付ける命令が出てくるから、その中から「幽霊」をえらんで欲しいの。
「幽霊▼の効果を0にする」というのがあるわね。数字のところは自由に数を変えられるの。
例えば数字を100にすると完全に消えて、50だとうっすら半分見える。
0にしたら効果が0、つまりいつもどおり見えている状態(じょうたい)になるわ。

ラム

イメージ画像

「幽霊▼の効果を0にする」は、「幽霊▼の効果を〇ずつ変える」 という命令とあわせて使うことで、少しずつ表れたり、少しずつ消える表現にすることができるの。
たとえば、いま幽霊の効果が100だとすると
・ずっと
 ・幽霊▼の効果を-3ずつ変える
とすれば、最初は消えていたスプライトが、少しずつ(-3ずつ)幽霊の効果がへっていき、 じょじょにあらわれる、という表現になるわね。
逆に、幽霊の効果を0にして
・ずっと
 ・幽霊▼の効果を5ずつ変える
とすれば、最初は見えていたスプライトが、少しずつ(5ずつ)幽霊の効果が増えていき、 じょじょに消え、最後には完全に見えなくなるわね。

ラム

さぁ、みんなも左のプログラムを参考にして、幽霊の効果を使ってみましょう!
数字は自由に変えてみるといいわ。
※こうした「効果」を使うとき、プログラムの最初に「画像効果をなくす」という命令を付けておくと いいわ。実行するたびに効果がリセットされるから、命令を二重、三重にかけて思ったとおりに  動かなくなるのを防げるわ。

ラム

見ている人が「参加」できるCMを作ってみよう

イメージ画像

イメージ画像

ふつう、テレビのCMは作られたものが一方的に放送されていて、私たちはただそれを見ているだけよね。
でも、スクラッチなら見ている人がマウスやキーボードをそうさして、CM作品に参加してもらうこともできるの。
それがパソコンを使ってものをつくる魅力(みりょく)の1つでもあるわね。
例えば、番組でウサギの顔が消えて、代わりにパソコンを見ている人の顔になる、
という演出(えんしゅつ)をしたけど、
それは、
・ビデオを入▼にする という命令を使っているの。
これで、パソコンについているカメラのスイッチを入れて、見てる人の顔をうつし出すことができるのよ。
これも、見ている人に作品に参加してもらうための1つの方法なの。
一緒に参加してもらうと、伝えたいおもいをより深く感じてもらうことにもつながるから、 みんなもやってみるといいわ。
ビデオを入▼にするを使うとき、ビデオの透明度を0%にするを合わせて使わないと 背景がきれいに抜けないから注意してね。

ラム

今回のまとめ

  • スクラッチで、ものごとの魅力(みりょく)を伝えるCMや映像を作ることができる
  • キャラクターや文字に動きをつけると、より本格的な作品になる
  • 見ている人が参加できるようにすると、ますますおもしろい作品になる

今回のリミックス

・紹介した命令を活かして、好きなもののCMを作ってみよう!