FLASHのお勉強　ーアクションスクリプトの実践的事始めー

ExternalInterFaceを使ったFLASHとjavascriptの連携　

2006/10/9
　FlLASHとHTMLをjavascriptを介して交信する（データをやりとりする）には、ExternalInterface というクラス（またはAPI とも呼ばれる)を使う。　あまり使う機会がないせいか、いざ使おうとすると、ちょっととまどう。　そこで、ここに最小限必要な(と思われる)事項をまとめ、参考に供したい。　ちなみに、このクラスはFlash Player 8 以降で機能する。
　なお、「FLASHによるCGI不要フォームメール（2）」でこのインターフェースを使っているが、この場合は、FLASHとjavascript間のやりとりのみで、HTMLのbody部分は関与していない。
　以下は、FLASHでインプットされたE-mail アドレスをjavascript に送り、javascript で書式チェックし、その判定結果をFLASHに返し、FLASH画面にその結果を表示するという例について解説する。
FLASH のスクリプト
関数emailCheckに記載した例：
function emailCheck(emailIn) {
　　import flash.external.*;
　　function checkResult(str:String):Void {
　　　　if (str == "OK") {
　　　　　　nextScene();
　　　　} else {
　　　　　　alertBox.text = str; }
　　}
　　ExternalInterface.addCallback("checkResult", this, checkResult);
　　ExternalInterface.call("emailcheck", emailIn);
}

外部インターフェースの呼び出し
javascriptから送られてきた情報に基づき
行うFLASHの関数




FLASHとｊｓの連携　(注)
ＦＬＡＳＨからｊｓで行う関数名と引数を送る
（引数は、コンマでつなげば、複数可）
　　(注）checkResult：　ｊｓから参照するＦＬＡＳＨ側のメソッド名（データの送り先）
　　　　　checkResult：　ｊｓから送られたデータに基づき行うFLASHの関数（checkResultと同じ名前でなくても良い）
　　　　　this：　インスタンス（対象となるオブジェクト）、thisを使えばいいようだ（nullを使った例もある）
javascript のスクリプト
<SCRIPT language="javascript">
<!--
function thisMovie(movieName) {
　　var isIE = navigator.appName.indexOf("Microsoft") != -1;
　　return (isIE) ? window[movieName] : document[movieName];
}
function emailcheck(str) {
　　if (!str.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)){
　　　　toFlash("E-mailアドレスを確認して下さい");
　　}else{
　　　　toFlash("OK"); }
}
function toFlash(str) {
　　thisMovie("fFormMail").checkResult(str);
}
//-->
</SCRIPT>

ブラウザのタイプに応じてmovieName（swf名）を返す関数
（とにかく、このまま使うこと）

javascriptで行う関数
適否に応じてメッセージを返す
（この部分は、HTMLから送られた変数に基づき処理する関数の場合も同様）


FLASH（id 名がfFormMail）のcheckResult にデータ（この場合はメッセージ）を送る
HTMLの記述（FLASHのパブリッシュ部分）
FLASH表示用タグ：
<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="550" height="400" id="fFormMail" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="swf_img/fFormMail.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<EMBED src="swf_img/fFormMail.swf" quality="high" bgcolor="#cccccc" width="550" height="400" name="fFormMail" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
Flashでパブリッシュすると左のようなタグが生成する。　この、ｉｄ名がjavascriptで引用される。
HOME　　　お勉強総リスト