Flash®

入力を受けつけて画面が動く!

ボタンを押すと画面上のキャラクターが動く
前回までの話で、画面上をキャラクターが動くようになりました。これだけでは、アニメーションGIFなどより細かいアニメーションが使えるようになったというだけで、Flash®の醍醐味である「インタラクティブ」(操作可能)なコンテンツを作成するということが体感できません。

Flash®などでは、このインタラクティブな操作をActionScriptで実現しています。以下のサンプルでは、猫の画像が「数字キーの4を押すと左へ移動、6を押すと右へ移動」ということを最小限のActionScriptで実現してみます。こういったキーの入力に反応して画面の動作が切り替わるようなものは、Flash Lite™では「全画面で表示する」場合にのみ利用可能です。

ActionScriptは画面上配置される、ボタン、ムービークリップ、フレームに記述することが出来ます。このうち、ボタンとムービークリップにActionScriptを書くことで、上記のような動作を実現してみたいと思います。サンプルのActionScriptは、難しいものではないので、ほとんどのFlash Lite™の上で動作すると思います。

それでは、作成してみましょう。

まず、ツールを起動して、ライブラリに前回まで使用していた猫の画像を読み込んだ状態にします。メニューから「挿入→新規シンボル」を選んで下さい。


上記のようなダイアログが表示されたと思います。名前に「cat_mc」と入力して、タイプは「ムービークリップ」を選択してOKを押して下さい。

ライブラリから、cat.jpgの画像を画面中央の「+」の記号のある位置にドラッグ&ドロップして下さい。これで猫の画像のムービークリップの完成です。


タイムラインのところに「シーン1」と書いた部分があると思います。この部分をクリックして下さい。元のプレビューの画面に戻ります。

次にボタンの作成をします。

ムービークリップを作成したのと同じ要領で、名前に「button」と入力して、タイプは「ボタン」を選択してOKを押して下さい。その状態で「シーン1」をクリックしてプレビューが表示された状態に戻って下さい。

プレビューの真ん中あたりに、cat_mcをドラッグ&ドロップして下さい。buttonをプレビューの上にドラッグ&ドロップして下さい。


buttonは、どの位置にドラッグ&ドロップしても左上に小さな丸として上記の画像の様に表示されると思います。

〔選択ツール〕を選択し、プレビュー画面左上の「○」をクリックしてみてください。


上記のような画面が表示されたと思います。この右側の部分がActionScriptを記述する部分です。この部分に、以下のようにActionScriptを記入して下さい。

on (keyPress "4") {
  _global.key_press = 4;
}
on (keyPress "6") {
  _global.key_press = 6;
}
「on (keyPress "x")」の部分は、数字キーの"4"や"6"が押された時にどうするかということを指示する命令です。_global.key_pressは、このFlash Lite™のどこからでも参照可能な変数で、グローバル変数と呼ばれるものです。このグローバル変数に入力された数字キーの値を、そのまま代入して「何のキーが押されたか」を、他の場所に記述したActionScriptからも参照できるようにしています。

プレビューの画面に戻り、プレビュー上に配置されているcat_mcのムービークリップを選択し、マウスを右クリックしてアクションを選択して、ActionScriptが記述出来る画面を表示して下さい。

ここに以下のActionScriptを記述します。


onClipEvent (enterFrame) {
  if (_global.key_press == 4) {
    _x -= 10;
  }
  if (_global.key_press == 6) {
    _x += 10;
  }
  _global.key_press = NULL;
}
onClipEvent (enterFrame)とは、ムービークリップが表示されている間は、ずっとそのあとの{ ... }で囲まれている処理を繰り返すことを意味しています。要するに、数字キーの4が押されたか、6が押されたかの判定を繰り返し実行しています。「_x」というのはムービークリップが表示されている画面上のx座標(横軸の位置)になります。4の場合は、_xの値を10減らし(左へ移動)、6の場合には、_の値を10増やす(右へ移動)ということをしています。移動が終ったら_global.key_press = NULLとして、キーが何も入力されていない状態に戻しています。

さて、ここまで出来たら、メニューから「ファイル→パブリッシュプレビュー→Flash®」のように選んで実行してみて下さい。

数字の4を押すと左に、6を押すと右に猫が移動しますよね?ごくわずかのActionScriptを利用するだけで、こんなことが実現可能です。


ボタンを押すと画面上に文字が表示される
先ほどのFlash®に文字を入力する部分を追加して、数字キーの5が入力されると、別の場所に入力された文字を加工して表示するという動作を実行します。

画面左側の「ツール」の中から「A」(テキストツール)のアイコンをクリックして下さい。


猫の上部にテキストを入力できる部分を作成して、「ねこちゃん」と入力して下さい。この「ねこちゃん」という文字は、Flash®を実行する際に書き変えが可能です。


プロパティの左上の「静止テキスト」の部分を「テキスト入力」に変更して下さい。右下の変数の欄に「cat_name」と入力して下さい。変数の欄の左側にあるアイコンを押すと、テキスト入力のボックスに枠線がついて、見た目にわかりやすくなるので、ここもチェックしておきましょう。

同じ手順で猫の下にもテキストボックスを作成して下さい。文字は何も記入せずに、プロパティを「ダイナミックテキスト」、変数の欄に「cat_comment」と入力して下さい。

これで準備が整いました。それでは、ActionScriptを作成しましょう。

buttonのActionScriptを入力する画面を前項の要領で開いて下さい。そこに以下の内容を追加します。

on (keyPress "5") {
  cat_comment = cat_name add "こんにちは!";
}
前項でも解説しましたが、今度は数字キーの5が押されたら、猫の上側のテキストボックスに入力された名前に「こんにちは!」と追加して画面の下の「ダイナミックテキスト」に設定したテキストボックスに表示します。

上側のテキストボックスに「名前」を入力して数字キーを入力することで、画面の下に文字が出てきたと思います。このように文字の入力を受けつけて画面上に表示することも簡単に実現することが出来ます。

ムービークリップと組み合わせる
先ほど作成したムービークリップcat_mcに、前回までに紹介した「トゥイーン」の機能を利用したアニメーションを追加して、もう少し複雑な動作をするようにしてみましょう。

前回、紹介しているので、詳細は割愛しますが、2フレームから15フレームに猫のキャラクターが画面の下方へ移動するアニメーションを入れ、16フレームから30フレームで猫のキャラクターが元の位置まで上昇してくる、すなわち、猫が下って、元の位置に戻ってくるアニメーションを作成します。

ActionScriptを、ボタン、ムービークリップに記述する例を、前の章で紹介しましたが、フレームにも記述することが出来ます。cat_mcの1フレーム目のところを選択してマウスの右ボタンをクリックしてアクションを選択することで、フレームにActionScriptを記述するこが出来ます。

cat_mcの1フレーム目のActionScriptに以下を記述して下さい。

stop();
通常、モーションクリップは、1フレーム目から指定されている最後のフレームまでを順番に再生します。この命令をフレームに設定しておくことで、指定したフレームまで再生したところでムービーが停止します。この場合で言えば、1フレーム目だけで停止しているので、猫のキャラクターは画面上では静止して見えます。

次に、2フレームから30フレームに設定したアニメーションを数字キーの8を押すことで呼び出すように設定します。

buttonのActionScriptに、以下を追加して下さい。

on (keyPress "8") {
  _global.key_press = 8;
}
次にcat_mcのActioScriptのonClipEventの中に、以下を追加して下さい。

if (_global.key_press == 8) {
  gotoAndPlay('cat_mc', 2);
}
gotoAndPlayは、指定したムービークリップ(上記の場合は、cat_mc)の指定フレーム(上記の場合は2)からstop()が呼ばれるか、もしくは最後まで再生をする命令です。

作成したFlash®は、このようになります。

cat_mcにトゥイーンを設定したので、猫を左右に移動しても、数字キーの8を押すと、その位置から猫が上下に移動するアニメーションを開始するはずです。


統括
画面に文字や絵を表示して、キー操作することが出来るようになりました。このような複雑なことは、従来はJava®を利用した複雑なプログラムを作成しないと実現することは出来ませんでした。ActionScriptは、簡易的なプログラムなので、少々敷居が高いですが、ほんの少しのActionScriptを作成するだけで、キャラクターを動かしたり、文字を表示したりということが可能になります。

今まで、当コラムで触れてきた内容を組み合わせて使用すれば、少し動きのあるグリーティング用のFlash®コンテンツなどが簡単に作成できます。

例えば、画面の上に「数字キーの1~9までのどれかを押して下さい」と書いておいて、ボタンが押されたら数字によって「当たり」や「はずれ」などのムービークリップを画面上に描くようにすれば、ほんの少しですが、ゲームっぽいものにもなると思います。

本稿の中で利用しているActionScriptは、プログラムの知識のほとんどない人でも、なんとなくは理解できそうなものを使用しているので、必ずしもプログラムの上級者の人から見た時に最適なものにはなっていません。それよりも、みなさんにとってのわかりやすさを重視したつもりです。

ここまでで、基本的な作成方法は、ほとんど習得できていると思います。最後のムービークリップと組み合わせたものは、ちょっと難しいかもしれませんが、みなさんもActionScriptを勉強して、もっと楽しいFlash®コンテンツを作成してみて下さい。

記事執筆:庄司 高士(元気モバイル株式会社 常務取締役)

略歴:1970年 神奈川県出身
1998年より某ゲームメーカ-勤務。モバイルコンテンツ事業の立ち上げと、オンラインゲーム事業の立ち上げをしたあと、2006年に現職に就任。現在、コンテンツプロバイダとして、ソフトバンク向けサービスを提供している。