この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。

FLASH講座 ーアクションスクリプトの実践的事始めー
ExternalInterFaceを使ったFLASHとjavascriptの連携
 

 FlLASHとHTMLをjavascriptを介して交信する(データをやりとりする)には、ExternalInterface というクラス(またはAPI とも呼ばれる)を使います。 あまり使う機会がないせいか、いざ使おうとすると、ちょっととまどいます。 そこで、ここに最小限必要な事柄をまとめ、参考にしてください。 ちなみに、このクラスはFlash Player 8 以降で機能します。

 なお、「FLASHによるCGI不要フォームメール(2)」でこのインターフェースを使っていますが、この場合は、FLASHとjavascript間のやりとりのみで、HTMLのbody部分は関与していません。

 以下は、FLASHでインプットされたE-mail アドレスを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とjsの連携 ()
FLASHからjsで行う関数名と引数を送る
(引数は、コンマでつなげば、複数可)
  (checkResult: jsから参照するFLASH側のメソッド名(データの送り先)
     checkResult: jsから送られたデータに基づき行う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でパブリッシュすると左のようなタグが生成する。 この、id名がjavascriptで引用される。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)です。

flash講座(=フラッシュ講座)は、Yoshioka氏により更新し続けられ、flash素材(flashアニメ、スクリプト)を少しずつ制作下さいました。
スクリプトをコピーペーストして動画flash(動画フラッシュ)を保存したり、携帯flash(待受flash)として取り込んで楽しんでいただいております。 師は、WEBデザイナーとして、CGIやhtmlファイルの作成、パソコン塾講師として活躍中に更新され、独立して今もコツコツと継続してこられました。 新しいadobe flash時代に入りましたが、今も愛好家は多く存在します。  これからも沢山の方々に、ご理解いただけることができれば幸せです。 2007年監修後の「flash講座」をよろしくお願いいたします。                                   (by Hiraoka)
HOME   Flash講座総リスト