こんにちは、ラーメンは必ず汁一滴残さず食べきる主義の谷口です。おかげでメタボに悩まされる日々!

引き続きFlashLite1.1でADVゲームを作って行こうと思います。今回はクリック処理の実装です。

クリックしたときの動作は、市販のPCのADVゲームとかをよーく見てもらいたいのですが、

・テキストを表示している途中にクリックしたら、全文を一気に表示

・テキストが全文表示された状態でクリックしたら、次の文章へ

という2通りの動作があります。もちろん、ここでもその動作を両方とも実現できるようにしていきます。

前回までの投稿と同じファイルを使っていきますよー。

 

まずはボタンを設置するためのレイヤーを増やしましょう。

ここで注意するのが、buttonレイヤーの順番です。buttonレイヤーは、必ずasレイヤーのすぐ下に追加しましょう。厳密に書くと、全てのオブジェクトの中で一番上の順番に来るようなレイヤーの配置を心がけてください。これが下の方のレイヤーになっちゃうとクリックが無効になってしまうこともあるので、要注意です。

さて、レイヤーを追加したら、3フレーム目と4フレーム目にボタンシンボルを配置します。

シンボルの新規作成から、種類を「ボタン」にして、OKで編集画面へ。

ボタンシンボルの中身は非常にシンプルです。

オブジェクトを設置するのはアップの部分だけでいいです。そして、設置するオブジェクトも、

こんな感じで単色の矩形を書くだけでオッケーです。今回は240×240の矩形を原点0,0に紫色で書きました。

なぜこんなにアバウトでいいのかと言うと、結局このシンボルはアルファを0にして完全に見えないようにするからです。

 

さて、シンボル編集画面からroot階層に戻って、シンボルを設置していきましょう。

最初の画像のように、3フレーム目と4フレーム目にさっきのシンボルを使いまわして設置するのですが、

こんな感じですな。

このときに設定した大きさの領域がボタンになるので、シンボル自体の大きさを拡大縮小して、アルファ値を0にして透明にして見えないように設置します。

(ここでユーザビリティの問題が絡んできます。

ほとんどのフィーチャーフォン機種は数字キーと方向キーと決定キーがついていて、その中から決定キーを押したときにクリック判定が発生してこのボタンインスタンスが反応するわけですが、世の中のフィーチャーフォンの中には、困ったことに画面にタッチすることでクリック判定をとる機種があります。そういった機種でこのADVゲームのFLASHを再生した場合、ボタンインスタンに直接タッチしないとクリック判定がとれないのです。

なので、ここのシンボル設置は、「シンボルの大きさはどうするか」「シンボルの設置座標はどこにするか」という問題をしっかり考慮しないといけません。

例えば、「画面全体のどこでもいいのでタッチしたらクリックしたことにする」という仕様にした場合は、ここで240×240のインスタンスを0,0に貼りつけるべきだし、「メッセージウィンドウにタッチしたらクリックしたことにする」という仕様にした場合は、上記のような設置となるでしょう。

この問題は一概にどうするのが正解とは言えないので、各自のご判断にお任せします。)

 

ほんでー、設置したあとはボタンをクリックした状態でActionScriptを入力していきます。

3フレーム目のボタンインスタンスには、

[cc lang="ActionScript"]

//全文を一気に表示
on (press, keyPress “<Enter>”) {
//テキスト全文表示
tellTarget (“/mc_msg”) {
gotoAndPlay(“wait”);
}

gotoAndStop(“wait”);
}
on (press, keyPress “5″) {
//テキスト全文表示
tellTarget (“/mc_msg”) {
gotoAndPlay(“wait”);
}

gotoAndStop(“wait”);
}

[/cc]

と、入れる。

前回の投稿で、root階層の変数やラベルを参照するのは「/:」って記号を入れましょう、と書きました。

それとは逆に、root階層のActionScriptから、シンボルの中にある変数やラベルを参照する方法もあります。それがtellTarget関数です。tellTarget()でシンボルを指定すると、{}の中で変数やラベルを参照できるようになります。

(こう見ると、root階層のラベルに「wait」があって、mc_msgシンボルの中にも同じ「wait」って名前のラベルがあるのは気持ち悪いですね。一応エラーは出ませんが、気になる人は各自で変更してください。)

上記のソースは、決定キーか5キーを押すとテキストを全文表示するという動作です。

4フレーム目のボタンインスタンスにはこちらのソースを入れます。

[cc lang="ActionScript"]

//スクリプトを進める
on (press, keyPress “<Enter>”) {
gotoAndStop(“set”);
}
//スクリプトを進める
on (press, keyPress “5″) {
gotoAndStop(“set”);
}

[/cc]

こちらは、決定キーか5キーでsetフレームまで戻している処理です。

 

ここまで完成したら、再生してみましょう。Ctrl+Enterです。

再生して、2点確認しましょう。

・テキストを表示している途中にクリックしたら、全文を一気に表示するか

・テキストが全文表示された状態でクリックしたら、次の文章へいくか

この2つがうまく行っていれば、かなりゲームっぽくなると思います。あとは、script_data変数に他の文章を追加したりして遊んでみてください。

 

それでは次回は、立ち絵の表示と切り替えをしていきましょう。

Tagged with:
 
Set your Twitter account name in your settings to use the TwitterBar Section.