アニメーションに挑戦

それでは、デフォルトで表示されている猫のスプライトを使ってアニメーションに挑戦してみよう。

まずは、この猫を歩かせてみよう。それには、図3に示す2つのブロックをScriptsタブの下にドラッグする。「move 10 steps」は10ステップ動く、「next costume」はスプライトに登録されている次の画像に切り替えるという意味だ。こちらは図2左上の「Looks」をクリックすると見つけられるはずだ。2つのブロックがきちんとくっつくようにドロップできたら、スクリプトの完成だ(図3)。

これをダブルクリックしてみよう。猫が1歩進んだだろうか。何度かダブルクリックすると、どんどん歩いてくれるはずだ。

図3 猫を歩かせるためのスクリプト

何度もダブルクリックするのは面倒なので、猫がずっと歩き続けるようにしよう。それには、図2左上の「Control」をクリックして「forever」と「wait~secs」をScriptsにドラッグし、図4のように組み合わせる。このとき、foreverとそれ以外の3つは別々に配置し、3つをforeverにはめ込むようにすると良い。waitの秒数は入力すれば書き換えられる。

ダブルクリックで、猫が歩いてくれただろうか。

図4 ずっと猫が歩き続けるスクリプト

図4でも問題がある。猫がステージが外れてもずっと歩き続けてしまうのだ。それは困るので、図2右上の赤い丸印をクリックして猫の動きを止めよう。ステージから外れるのを防ぐには、図2左上の「Motion」をクリックして「if on edge, bounce」をforeverの中にはめ込む(図5)。

このとき、左右の矢印をクリックしてスプライトを左右のみに回転させるように指定する(図6)。そうにしないと、往復するときに猫が上下反転してしまう。

図5 ステージを往復して猫が歩き続けるスクリプト

図6 スプライトの回転方法の指定(図3上)

あとは、緑の旗がクリックされた後に初期設定をするようにしたら、ほんとうにスクリプトの完成だ(図7)。

図7 猫がステージの左右を往復するスクリプト(完成型)

説明は省略するが、猫をクリックしたら鳴き声を出して「I'm walking!」という吹き出しをつけるなどすると、インタラクティブなコンテンツになる(図8、図9)。これは猫が歩いている最中でも反応する。さらに複数のスプライトを使うなどすれば、コンテンツをもっと充実させられるはずだ。いろいろと試していると、思わず時間を忘れてしまうだろう。

図8 インタラクティブな動作をさせるスクリプト

図9 マウスでクリックすると鳴き声を出す