TOP サイトマップ お小遣い タイピングゲームを作る講座 ゲーム DIABLO
チャット BBS リンク集 顔文字 逆アクセスランキング

Flashでタイピングゲームを作ろう講座1−2
〜ダイナミックテキストに5つの文字からランダムにテキストを入れる〜

完成例

1-2-1.インスタンスのスクリプトを修正(ランダム値発生)

前回のFlashファイルを開いてください。

前回のスクリプトではひとつの決まった文章を表示するだけしかできませんでしたが、 今回は文章を5個に増やし、それをランダムに表示するということをしたいと思います。

今回新しく使う技は、『配列』、『関数の作成』、『ランダムの発生』、『インスタンスに命令を送る』です。 前回は

onClipEvent(load){
 this.output="テストだよ";
}

というかなり簡単なスクリプトでしたが、今回は少し行数も長くなるので混乱しないようにしてください。 いや・・そうでもないかな・・。
まず5つの文字を作成して配列にし、ランダム値を発生させて、ランダムに選んだ 文字をテキストボックスに入れる処理を入れます。 前回と同じように表示される前にテキストをランダムで表示 したいので、onClipEvent(load)内に

onClipEvent(load){
 randomtext=new Array("テスト1","テスト2","テスト3","テスト4","テスト5");
 randomchi=Math.floor(Math.random()*5);
 this.output=randomtext[randomchi];
}

と書きます。
最初に配列オブジェクトの作成と初期化を同時に行い、randomtextという名前の配列ができます。 通常の配列オブジェクトの作成は

randomtext=new Array(5);
 //5という数字はその配列が何個の要素を持っているかです。
などとしてから
randomtext[0]="テスト1";
randomtext[1]="テスト2";
       ・
       ・

などと初期化を行いますが、それは大変なので、配列オブジェクトの作成と初期化を同時に行っています。 ランダム値の発生は最初から用意されているオブジェクト関数Math.random()を使います。
これは0〜0.99・・・という値をランダムに発生させる関数です。
これを使い

Math.random()*5

で0〜4.99・・・のランダム値を発生することができるわけです。
配列の要素は5個ですが、配列は0番目から始まるので実際に使う値は0〜4なわけです。
そこで小数点以下の不要な値があるとだめなので、Math.floor()関数を使い小数点以下を 切り捨てます。
そうすると

Math.floor(Math.random*5);

とすることで0〜4の整数の値を得られるわけです。
このままだとどっかに捨てられてしまいますので、変数randomchiに入れて。

randomchi=Math.floor(Math.random()*5);

とすることでランダムに発生させた0〜4の数値をrandomchiという変数名に保持しておくことが できます。
配列の要素にアクセスするには配列名のあとに[]をつけて、括弧の中に要素の番号を入れると、 その要素の値を取り出すことができますので、

this.output=randomtext[randomchi];

とすることでテキストボックスoutputに、作った配列randomtextからランダムに発生させた 数値の要素の値を入れることができます。
もしランダム値が2だったとしたら

this.output=randomtext[2];

としたのと同じことで、outputには『テスト3』という文字が入ります。

1-2-2.インスタンスのスクリプトを修正(関数化)

さて、これで今回の講座終わり!って感じですが、今回はランダムに文字列が選択されていることを 確認する為にボタンを使って、ボタンを押したらランダム値を発生させ新しい値を入れるという 風にしようと思います。
そこで、1-2-1で作ったスクリプトを関数化しておきます。
関数の作り方は簡単で、
function 関数名(仮パラメータ){
 スクリプト;
}

という形式で作成することができます。形としては
onClipEvent(load){
 スクリプト;
}

と同じなのでわかりやすいですよね?実際は同じようなもんなんです。
そこで、1-2-1で作ったスクリプトを関数化したものにすると、
onClipEvent(load){
 function randomchoise(){
  randomtext=new Array("テスト1","テスト2","テスト3","テスト4","テスト5");
  randomchi=Math.floor(Math.random()*5);
  this.output=randomtext[randomchi];
 }
}

となります。 関数はひとつの機能をまとめたもので、よく使う機能は関数化しておくと便利です。
同じ処理を何度も何度も書いていたら大変ですしね・・・。
実はこれだけだと、インスタンスが表示される前にランダム値を発生させてテキストに文字を 表示するということは行ってくれません。
なぜなら関数は呼び出されないと実行されないからです。
実はonClipEvent(load)も呼び出されているから実行されているのです(確かね・・)
なので関数ができたら、その関数を呼び出す命令が必要なわけです。そこで、

onClipEvent(load){
 function randomchoise(){
  randomtext=new Array("テスト1","テスト2","テスト3","テスト4","テスト5");
  randomchi=Math.floor(Math.random()*5);
  this.output=randomtext[randomchi];
 }
 randomchoise(); //ランダム値発生関数呼び出し
}

とすることで関数を呼び出せます。関数を作るのと似てますが、ちょっと違います。
そう!{ }がないんです。
関数を呼び出したいところで、関数名()とすることでその名前の関数を呼び出すことができます。

これで、インスタンスが表示された時には、ランダムに選んだ文字列が表示されていることになります。

1-2-3.ランダム文字列を発生させるボタンの作成

さて、最後にランダムな文字列を選んでテキストボックスに文字列を入れるという作業を ボタンを使ってやってみましょう。
ボタンを押したら、さきほど作った関数randomchoise()に命令を送り、ランダムな文字列を テキストボックスに入れてもらうという作業をしましょう。
ボタンは『ランダムな文字列を入れる作業をしてくれ!』という指令を出すだけで、 実際にランダムな文字列を入れる作業はインスタンスの方で実行することにします。
そこでボタンにその指令を出すスクリプトを記述してみましょう。
ボタンに設定するスクリプトは簡単です。

on(release){
 _root.textclip.randomchoise();
}

これだけです。
解説すると、on(release)はそのボタンをクリックした時(マウスを押して離した時)に発生する アクションです。(関数に命令を送るのと同じですね、ボタンをクリックするという動作で on()という関数を呼び出しているようなものです)

_root.textclip.randomchoise();

は_root(一番上のシーン)からtextclipという名前のインスタンスに設定されている randomchoise()という関数を呼び出しなさいという命令です。

ここで講座1-1で言っていたインスタンス名が必要になってくるわけです。
これでtextclipというインスタンス名に設定されているrandomchoise()という関数を呼び出す ことになります。
呼び出されたrandomchoise()関数は命令を受けたのでそれを実行し、ランダムに文字列を選んで、 テキストボックスに文字列を入れてくれるわけです。

1-2-4.完成

これで、『ダイナミックテキストに5つの文字からランダムにテキストを入れる』は完成です。
結局詳しく解説してますが・・・、スクリプトの量が多くなったら今度こそ省いていきます・・、 次回は

1-3.ダイナミックテキストにキーボードで打った文字を入れる

です。お楽しみに

1-2-5.flaファイルのダウンロード

講座1−1ダウンロード

lzhで圧縮してあります。

前に戻る 講座のTOPへ戻る 次に進む