テンプレFlashの仕組み

Flash Player 5以降では、Webサーバー上に置かれたswfムービーを呼び出す際に適当なパラメータを渡すクエリー文字列を付加して呼び出すと、swf内でそれに対応した_root階層の変数に渡された文字列の内容が代入され、ムービー内でその値を利用出来るようになった。

以下のようにクエリー文字列を付けてswfを呼び出すと・・・

http://・・・/movie.swf?phrase1=ABC&phrase2=123

swf内ムービー冒頭のフレームアクションで以下のように代入したのと同じ効果が得られる

_root.phrase1 = "ABC";
_root.phrase2 = "123";

したがって、これらを表示するためのダイナミックテキストを_root階層に配置しておけば、そこに渡された文字列が表示され、またActionScriptを用いて受け取った文字列を加工すれば、最終的に異なる形で出力することも可能である。

swfムービーの作成

さて、実際にテンプレFlashとなるswfムービーの製作に取り掛かろう。とは言っても、入力文字列をタイムライン上で単純に表示するだけであればこれは非常に簡単で、ダイナミックテキストをルート階層に配置し、適宜「変数名」を割り当てれば良いだけである。この例のようにクールな絵を添えれば完璧だ。

作成のイメージ(Flash MX)

HTMLフォームの作成

swfに文字列を渡すためのHTMLフォームは次のようになる。これは通常の掲示板CGIなどにGETメソッドを用いて入力文字列を渡すHTMLフォームと基本的に同じものである。

<form action="movie.swf" method="get" target="_blank">
<input type="text" name="phrase1" size="28" />
<textarea name="phrase2" cols="40" rows="2"></textarea>
<input type="submit" value="作成" />
</form>

• 1行目：<form>タグのaction属性にswfムービーを指定、method属性はgetとする。
• 2,3行目：文字列を入力するためのテキスト入力フォーム(単一行の場合：<input type="text" ・・・> / 複数行の場合：<textarea ・・・>)を記述し、それらのname属性にはswfのダイナミックテキストに割り当てた変数名と同じものを設定する。
• 4行目：送信ボタン<input type="submit" />

これで送信ボタンを押したときに入力テキストをエンコードしたものがクエリ文字列として付加された形("http://・・・・/movie.swf?phrase1=・・・・&phrase2;=・・・・")でswfが呼び出される。

テンプレFlashの動作チェック

以上でテンプレFlashは完成。あとは実際に動かしてみて正しく表示されるかチェックしてみよう。テンプレFlashの動作チェックはローカル環境では出来ないのでフォームのHTMLとswfファイルを実際にWebサーバー上にアップロードして行う必要がある。

補足(注意)事項

Flashのバージョンと日本語のエンコード

Flash5ではShiftJISが標準内部エンコードであったのに対し、Flash6以降ではより本格的に国際化対応しUTF-8が内部エンコードとなった。したがってswfをVer5形式でパブリッシュした場合はHTMLフォームページのエンコードもswfに合わせてShift_JISに、Ver6以降の形式でパブリッシュした場合は同じくutf-8にする必要がある。フォームとムービーのエンコードが一致していないと日本語などのマルチバイト文字を入力した時に「文字化け」が起こる。どうしてもこれと異なるエンコードの組み合わせを使用したい場合はActionScriptで文字エンコード変換を実装するなどの工夫が必要となる。

変数値代入のタイミング

ムービーの再生開始と変数に値が代入されるタイミングは一致せず、変数に値が代入されるまでには若干のタイムラグがある。そのため、1フレーム目のフレームアクションで文字列を取得しようとしても、その時点では値が入っておらず失敗することがある。ムービーの冒頭で値を取得したい場合は少しの待ち時間を設けるようにする必要がある。