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

Flashでタイピングゲームを作ろう講座1−1
〜ダイナミックテキストにスクリプト内に書いたテキストを表示する〜

完成例

1-1-1.テキストボックスのムービークリップを作る

まずFlashの基本であるダイナミックテキストを使ってみましょう。

新規にムービークリップを作成し、そのムービークリップにテキストを作成します (今回はテキスト表示部分という名前で作成)。 大きさは適当に作って大丈夫です。
テキストができたら、テキストウインドウからテキストオプションでダイナミックテキストを 指定します。その他の設定では、

『行数』は一行でも複数行でもかまいません。
『HTML』のチェックを入れるとHTMLタグを含んだテキストを扱えるようになりますが、 特に使わないのでチェックはいれません。
『ボーダー/背景』のチェックを入れるとテキストボックスに白い背景が表示されます。 今回は背景色に透けるテキストボックスにするので、チェックは入れません。
『選択可能』にチェックを入れると、マウスでテキストをコピー&ペーストなど選択することが できるようになりますが、今後タイピングゲームを作るときには困るので?(謎) チェックは入れません。
『変数』のところにはそのテキストボックスの名前を入れてください。(厳密にはちょと違う) そこに入れた変数名によって、あとでスクリプトからテキストボックスを操作することになります。

1-1-2.ダイナミックテキストのムービークリップを配置

さてこれでダイナミックテキストのムービークリップが完成しました。 最初にテキストボックスに入っているテキストを『最初の文字』といれておきます。 文字をいれておかないと、テキストボックスが作成できていなかったりします。
また、スペースをいれてもいいのですが、そのムービークリップを配置した時にどこに あるのかわからなくなるという事もありますので、テキストボックスに適当な文字を入れておきます。

ダイナミックテキストだけのムービークリップが完成したので、これをメインとなるシーンに 設置します。シーン名は適宜変えることができますが、めんどくさいので今回はシーン1の ままです。
ライブラリからムービークリップを選択しそれをシーン1のテキストレイヤーにドラッグ&ドロップ すると設置が完了です。

レイヤーは増やすことができます。わたしの場合、必ず『ラベル』、『スクリプト』、 『ムービークリップなどを配置するレイヤー』を作成することにしてます。
もちろん同じレイヤーにすべてを置くことはできますが、編集する時にわかりづらいので、 用途に応じてレイヤーをわけるとすごく便利です。
レイヤー分けすると階層(手前とか奥とか)を作るときにも便利ですしね。
今回はテキストボックスだけのムービークリップを配置するレイヤーを『テキスト』という 名前のレイヤーを作ってそこに配置してます。

1-1-3.テキストボックスのムービークリップにスクリプトを設定

それでは、シーン1に設置したテキストボックスのムービークリップのインスタンスにスクリプトを 記述してみましょう。 まずスクリプトはインスタンスを選択した状態で右クリックしてアクションを選択すると、 オブジェクトアクションという名前のウインドウが開くと思います。 そこにそのインスタンスが表示される以前(表示後に変更すると初期文字『最初の文字』が 一瞬見えてしまう為)にテキストボックス内の文字を変えたいので、

onClipEvent(load){
}

を使います。これはそのClip(インスタンスだと思う・・)が表示される前に変数などを 初期化したりする時に、使います。
今回はそのインスタンスが表示される以前に『テストだよ』という文章を表示させたいので、

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

と記述します。
thisはこのインスタンスの、outputはテキストボックスにつけた変数名です。 つまり、このインスタンスの中にあるoutputという変数名のついたテキストボックスに 『テストだよ』を入れます。
ということになります。
いくつか同じムービークリップのインスタンスがあったとしたら、どれがどれかわからなく なる可能性もありますので、インスタンスに名前をつけておきましょう。
この名前はスクリプトを記述する上でも必要となることが多くありますので名前をつける 癖をつけるといいですね。
もちろんスクリプトで扱わないインスタンスの場合つけなくてもいいです。 わたしも使うやつしかつけてませんし・・・

今回はムービークリップのインスタンスにtextclipという名前をつけました。
なので、今回のスクリプトはルートを設定して、

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

と、記述することもできます。
_root.textclip.outputの意味は、元(シーン1)に設置しているtextclipという名前の インスタンスのoutputというテキストボックスということになります。
Flashはオブジェクト指向で記述するのがいいと思うので、やっぱりthis.outputの 方がいいでしょうね
オブジェクト指向というのは物単位でスクリプトを記述することだと思ってください。 その物の操作はその物自身で行うということです。
簡単な例でいくと、人間は目や鼻、口などの情報を持っていて、話す、食べるなどの 操作ができます。
これを他の人から操作する場合、その人自身に操作してもらうということです。
簡単な例になってるんだろうか・・・・。

わたしの場合チャンチャカ作るのでオブジェクト指向になってないことが多いです・・ (-"-;A ...アセアセ

1-1-4.完成

これで、ダイナミックテキストにスクリプト内に記述した文章を記述は完成です。
第一回目ということで、かなり詳しく書きましたが、これからは結構はぶくかも・・ それでは1-1-5のflaファイルのダウンロードをして確かめてください。
というか最初にダウンロードしながらこの文章を読むのがいいのか・・、 どちらがいいんでしょうね。
次回は

1-2.ダイナミックテキストに5つの文字からランダムにテキストを入れる

です。お楽しみに

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

講座1−1ダウンロード

lzhで圧縮してあります。

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