第34回　HTMLからFlashムービーに変数を渡してみよう

吉岡梅

2006.12.08

　同じFlashムービーを表示するのだけれども，表示するページや閲覧してくれる方によって，ちょっとだけ変化を加えたい。そんな場合にはFlashムービーを表示するHTMLにひと工夫を加えると，Flashムービーへと変数の値を送ることができます。

同じFlashムービーで，HTMLごとに少しずつ違うメッセージを表示する

　図1は，メッセージカード風のFlashムービーです。

図1：メッセージカード風のムービー（クリックするとムービーを表示します）

　このムービーで使用しているswfファイル（「messageCard.swf」）を，こちらのページ（messageCard2.html）と，もう一つ，こちらのページ（messageCard3.html）にも表示してみました。三つのムービーは，同じ「messageCard.swf」を表示しているのに，メッセージの内容が異なります。これは，Flashムービーを表示しているHTMLにちょっと細工を加え，Flashで表示するメッセージを変更しているためです。

Flashムービーを表示するタグを確認してみよう。

　通常Flashムービーを表示する場合には，「objectタグ」，もしくは，「embedタグ」を使用します。実際にタグを確認してみましょう。

　新規Flashドキュメントを作成し，任意のフォルダに名前を付けて保存します。[ファイル]-[パブリッシュ設定]を選択して表示される「パブリッシュ設定」ダイアログボックス内の「形式」タブを選択します。[タイプ]欄の「Flash」と「HTML」にチェックが付いていることを確認して，その右横の[ファイル]ダイアログボックスに，書き出すFlashムービーとHTMLファイルのファイル名を入力します（図2）＊1。

図2：パブリッシュの設定

　この状態でパブリッシュを行うと，Flashドキュメントを保存したのと同じフォルダ内にFlashムービーとHTMLファイルが書き出されます。書き出されたHTMLファイルを「メモ帳」のようなテキスト・エディタや，HTMLファイル編集用のアプリケーションで開いてタグを確認してみましょう（図3）。

図3：書き出されたファイルのタグを確認

　このHTMLタグの中で，Flashムービーの表示に使われている部分は，「<object>タグ」から「</object>」タグの間の部分です。抜き出して見ると，以下のような内容となっています。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="320" height="240" id="card" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="card.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="card.swf"
 quality="high"
 bgcolor="#ffffff"
 width="320"
 height="240"
 name="card"
 align="middle"
 allowScriptAccess="sameDomain"
 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

　いろいろ記述されていますが，今回注目指定していただきたいのは，赤字でチェックしたFlashムービー名，つまり，拡張子「*.swf」のファイルを指定している2カ所です。

　まず1カ所目はここ。

<param name="movie" value="card.swf" />

そしてもう1カ所はここです。

<embed src="card.swf"

　この2カ所をテキストエディタで次のように「ファイル名?変数名=値」という形＊2に変更して保存します。とりあえず，変数名「hoge」に値「100」と，次のように書き換えて保存してみましょう。

<param name="movie" value="card.swf?hoge=100" />
...
<embed src="card.swf?hoge=100"

　HTML側での編集が済んだところで，Flashドキュメントのほうに戻ります。まず，パブリッシュした際にせっかく書き直したHTMLファイルを上書きして書き直してしまわないように，[パブリッシュ設定]ダイアログボックスの[タイプ]欄の「HTML」のチェックを外しておきます（図4）。

図4：パブリッシュの設定を変更しておく

　ステージ上に，一つのダイナミックテキスト・フィールドを配置し，インスタンス名を「messageText」とします（図5）。さらに，1フレーム目に，次のスクリプトを追加してみましょう。

図5：テキスト・フィールドを配置し，コードを記述する

//変数「hoge」が存在する場合には，その内容を表示
if (hoge) {
  messageText.text = hoge;
} else {
  messageText.text = "デフォルトのメッセージです";
}

　このムービーを[ムービープレビュー]で確認すると，「messageText」には，「デフォルトのメッセージです」と表示されます。そりゃそうですよね。変数「hoge」の値なんで設定していません。そもそも，宣言すらしていません。

　では，このムービーをパブリッシュし，先ほどタグの内容を変更したHTMLファイル上をブラウザで表示してみるとどうでしょうか。今度は「100」と表示されます（図6）。

図6：ブラウザから渡された変数の値を表示

　実はFlashムービーをHTMLファイル上に配置する際には，このように「ファイル名?変数名=値」と記述すると，その変数名と値をFlashムービーへと渡すことができるのです。

　HTMLファイルに記述された変数は，Flashムービーのメインのタイムライン上の変数として利用することができます。この仕組みを利用すれば，同じFlashムービーを使っても，それを表示するHTMLファイルごとに表示の内容を切り替えるといったことが簡単にできますね。

　複数の変数と値を渡したい場合には，変数名と値のセットを「&」で区切って指定します。

ファイル名?変数名1=値1&変数名2=値2

日本語文字を指定する場合にはエンコードを

　この仕組みを使って，HTML側に記述したユーザー名を表示してみたらどうなるでしょう？

　とりあえず「吉岡梅」という文字列を次のようにして渡してみました。

<param name="movie" value="card.swf?hoge=吉岡梅" />
...
<embed src="card.swf?hoge=吉岡梅"

すると，ブラウザの種類や環境によっては，図7のように文字化けを起こしてしまいます。このままでは，誰だよこのエキセントリックな名前の人は，と勘違いされてしまうかもしれません。

図7：文字化けしてしまったところ

　このようなケースでは，あらかじめ日本語文字を文字化けしないようにURLエンコードしておきます。URLエンコードは，googleなどのサーチエンジンで検索をした場合のURLで目にしたことがあるかと思います。「吉岡梅」でしたら「%E5%90%89%E5%B2%A1%E6%A2%85」となります。

　ですので，

<param name="movie" value="card.swf?hoge=%E5%90%89%E5%B2%A1%E6%A2%85" />
...
<embed src="card.swf?hoge=%E5%90%89%E5%B2%A1%E6%A2%85"

とすれば「吉岡梅」という文字列を文字化けすることなく渡すことができます。

　でも，このURLエンコードを行った結果はどうやって調べれば良いのでしょうか？まさか毎回googleで検索して，パラメータ「q」の値をコピー＆ペーストして利用するわけにはいきません＊3。

　このようなケースでは，ActionScriptにも用意されている「escape関数」や「unescape関数」を利用して，希望の文字列をURLエンコードする，簡単なツール的なムービーを作成してしまいましょう。

　ActionScriptでは，「escape関数」を利用すると，指定した文字列をURLエンコードした結果を返してくれます。「unescape関数」は，その逆に，URLエンコードされた文字列を元の文字列にデコードした結果を返してくれます。そこで，図8のように，二つの「テキスト入力」フィールドと二つのボタンを用意し，それぞれのテキスト・フィールドに入力した値を，エンコード/デコードするムービーを作成します。

図8：URLエンコード/デコードを行うムービー（クリックするとムービーを表示します）

　コードとしては，以下のようにescape/unescape関数を利用する簡単なものでOKです。

//msg1 エンコードしたい文字列を入力する「テキスト入力」フィールド
//msg2 デコード結果を表示する「テキスト入力」フィールド

//エンコード用ボタン
button1.onRelease = function() {
  msg2.text = escape(msg1.text);
};
//デコード用ボタン
button2.onRelease = function() {
  msg1.text = unescape(msg2.text);
};

このムービーを使えば，簡単に文字列をエンコードすることができますね。エンコード結果はテキスト・フィールド全体をドラッグするか，もしくは，テキスト・フィールド内で[ctrl]+[a]を押してすべて選択した後に，クリップボードにコピーして利用しましょう。

　今回はHTMLファイルのタグから，Flashムービーへと変数の値を送る方法をご紹介しました。同じFlashムービーにちょっとした変化を加えたい場合にいろいろと応用できますね。

　次回は，おなじくFlashムービーとHTMLファイルとの連携方法というテーマで，もう一歩踏み込んで，HTML上のJavaScriptと連携する方法をご紹介します。この方法を知っておけば，Ajaxアプリケーションと連動する楽しいムービー作成も簡単です。お楽しみに。