【Flash】Flash Liteでレシピを表示！

ActionscriptでFlash Liteに外部ファイルを読み込む

1.　1フレームのActionレイヤーに以下のActionscriptを記述します。

stop();
System.useCodepage = true;
loadVariablesNum("recipe.txt", 0);

1行目でフレームの再生を停止させています。

2行目はFlashで日本語を使うときのお約束の一行でしたね。

3行目で「loadVariablesNum("ファイル名", ターゲット)」で外部のテキスト形式のファイル「recipe.txt」をFlashに読み込みこんでいます。1ページで整形されたテキストファイルは「step1=<b>材料・4人分</b>」といった形でHTMLテキストとして変数に格納されます。



2.　1フレームの「決定ボタンでスタート」ボタンに以下のActionscriptを記述します。

on (press, keyPress "<Enter>") {
	play();
}

このボタンが「press」されたとき、または「決定キー」を押したときフレームを再生します。



3.　2フレームへ進みます。まずActionレイヤーに以下のActionscriptを記述してください。

stop();
nowStep = 0;
stepUp(1);

function stepUp(i){
	nowStep = nowStep + i;

	if(this["step" + nowStep] == undefined){
			_root.play();
	}else{
		_root.recipe.htmlText = this["step" + nowStep];
	}
}

まず1行目でフレームの再生を停止しています。
2行目は以降利用する変数「nowStep」に「0」を代入しています。
3行目は以降の行で定義する関数「stepUp()」に引数「1」を渡して実行しています。

4行目からは関数「stepUp()」を定義しています。まず変数「nowStep」に引数「i」を足しています。この変数を利用して、次に表示すべきレシピのテキストを格納した変数「step1～3」の数字の部分のみ計算すれば良くなりますね。例えば、2フレームに移動されたとき実行される3行目では「nowStep = 0」で、引数で渡した「1」を足すので、表示するテキストは変数「step1」となります。

5行目のif文は「step1～…」の中身が「undefined」つまり中身がなかった場合を判定しています。今回は3手順としていますが、より細かくレシピを分割して表示した場合でもこれで柔軟に対応出来るようになります。このif文の内容が「true」のとき、つまり読み込むべきテキストが終わった場合フレームを進めます。

if文の内容が「false」、読み込むべきテキストがまだある場合、以下のActionscriptを実行しています。

_root.recipe.htmlText = this["step" + nowStep];

ステージに配置されているダイナミックテキストボックス「recipe」に対して「テキストボックス名.htmlText =」でHTML形式として、右辺のテキストを挿入しています。

右辺の書き方にも注目してください。ここは「step1」「step2」といった具合に「step」の部分と変数「nowStep」で計算された数字を合わせて変数名としなければなりません。ここを「"step"+nowStep」と記述してしまうと、変数としてではなく文字列としてテキストボックスに代入し表示されてしまいます。そこでActionscriptでは「this["文字列"+変数]」という形で記述することで、これを変数として扱えるようになります。



4.　ここでテキストボックスにスクロール機能を付けます。右上の三角がついたボタンに以下のActionscriptを記述してください。

on (keyPress "<Up>") {
	_root.recipe.scroll--;
}

このフレームは「決定キー」を押す動作で次のレシピをめくるため、「on(press)」などが使えないことに気をつけましょう。「on (keyPress "<Up>")」で、携帯の「上キー」を押したとき、以下の内容を実行します。

次の行の「_root.recipe.scroll--;」はテキストボックス「recipe」を「scroll --」1行分、下にスクロールするという意味になります。ただし、テキストボックスからテキストが溢れていない場合動作しません。



5.　右下の三角がついたボタンに以下のActionscriptを記述してください。

on (keyPress "<Down>") {
	_root.recipe.scroll++;
}

先程とは逆に「下キー」を押したとき。1行分上にスクロールします。



6.　「決定ボタンで進む」ボタンに以下のActionscriptを記述してください。

on (keyPress "<Enter>") {
	stepUp(1);
}

このボタンを押した場合、次のレシピを表示すれば良いですから、関数「stepUp()」に引数を「1」渡しています。関数「stepUp()」は現在表示しているテキストを管理する変数「nowStep」に引数の「1」を足されるので、「step1」の状態で押されれば「step2」の内容を表示し、「step3」の状態で押されれば「undefined」が表示されることになりますが、先程のif文で次のフレームへ移動します。



7.　2フレームの最後は「2戻る」ボタンですが、これが少し厄介な存在です。以下のActionscriptを記述してください。

on (keyPress "2") {
	if(nowStep != 1){
		stepUp(-1);
	}
}

戻る、つまり一つ前の手順を表示するので、関数へ渡す引数は「-1」です。しかし、このままでは場合によって「step-1」のテキストを表示しようとしてしまいます。この状況が発生するのは前のテキストがない状態「step1」を表示しているとき、つまり「nowStepが1じゃなければOK」となります。そこで1以外の場合という条件「nowStep != 1」を設定しています。



8.　3フレームに移動してください。ここでの「2戻る」ボタンには以下のActionscriptを記述してください。

on (press, keyPress "2") {
	_root.gotoAndStop(1);
}

このフレームには「決定キー」を押すことで動作するボタンはないので、条件に「on(press)」を追記しています。これで1フレームへと移動します。



これで完成です！さぁ肉じゃがを作りましょう！
完成したFlashファイルをダウンロード

今回はFlash Liteにおけるテキストの読み込み、表示方法を紹介しつつも携帯の持ち運びやすさを生かして買い物やキッチンで使いやすい作例となりました。パソコン向けのFlashの利点は圧倒的な表現力にありますが、携帯Flashの利点は持ち運び性の高さが筆頭にあげられるでしょう。デスクでもテーブルでもソファでもない場所でこそ携帯Flashの出番なのかもしれません。通勤の電車の中を見渡せば、携帯ゲームに夢中な人なんていっぱいいますよね。そういう場所を探して、そこで生きるFlash Liteを作ってはいかがでしょうか？

サンプルのFlashには「肉じゃが」と明記されておりますが、肉じゃが以外のレシピにも対応しますので、All Aboutのレシピガイドサイトから新たなレシピを探して携帯で持ち運びしてはどうでしょうか？このFlashさえあれば、おつかいで買い忘れなんてことも減りそうですし。今夜の献立に悩まずにすみますよ！


【関連記事】
携帯Flashが肩揉みします！「startVibrate」
今さら聞けない！Flash Liteの基礎知識
携帯でフラッシュ！「Flash Lite」
今さら聞けない！Flash Liteの基礎知識
Flash待ち受けで電池残量をお知らせ！
携帯Flashで体内時計チェッカー!?を作る