flashとjavascriptの連携
(Flash / JavaScript Integration Kit の使い方)
FlashとHTMLをjavaScriptを介して連動します。
「JavaScript Integration Kit」
http://weblogs.macromedia.com/flashjavascript/
■ サンプルファイル━━━━━━━━━━━━━━━━━━━
http://www.itm.ne.jp/flash_test/flash_test.zip
http://www.itm.ne.jp/flash_test/index.html
に今回制作した一式(flaファイルなど)をおいています。
■ 参考━━━━━━━━━━━━━━━━━━━━━━━━
http://yoshiweb.net/blog/?itemid=106
■ 環境━━━━━━━━━━━━━━━━━━━━━━━━
今回、flash8 Pro(試供版)でつくってます。
動作は
windows
firefox 1.5.0.8
IE 6.0
Opera 9.0.2
で確認しています。
■ 動作内容━━━━━━━━━━━━━━━━━━━━━━
今回の実装
イメージタグにマウスオーバーされたときに、
flashの関数を呼び出し、指定のフレームから再生する。
■ 下準備━━━━━━━━━━━━━━━━━━━━━━━━
●1.「FlashJavascriptGateway」の取得
「JavaScript Integration Kit」
http://weblogs.macromedia.com/flashjavascript/
から、
「FlashJavascriptGateway.zip」を取得します。
「Download the latest release of the Flash / JavaScript Integration Kit.」
からダウンロード
zipの中身は
—————————————-ここから
docs
license.txt
readme.html
installation
JavaScriptFlashGateway.js
JavaScriptFlashGateway.swf
source
flash
actionscript
com
macromedia
javascript
JavaScriptProxy.as
JavaScriptSerializer.as
gateway
JavaScriptFlashGateway.as
JavaScriptFlashGateway.fla
JavaScriptFlashGateway.swf
javascript
Exception.js
FlashProxy.js
FlashSerializer.js
FlashTag.js
—————————————-ここまで
となっている。
●2. 作業フォルダの作成
—————————————-ここから
flash_test
JavaScriptFlashGateway.js(JavaScript Integration Kit)
JavascriptFlashGateway.swf(JavaScript Integration Kit)
javascript2flash.fla(新規作成)
javascript2flash.swf(javascript2flash.flaから生成)
index.html(新規作成)
images
logo.gif(新規作成)
com
macromedia
javascript
JavaScriptProxy.as(JavaScript Integration Kit)
JavaScriptSerializer.as(JavaScript Integration Kit)
—————————————-ここまで
の構成でおこないます。
JavaScriptFlashGateway.js
JavascriptFlashGateway.swf
は、
「FlashJavascriptGateway/installation」 フォルダ
comフォルダ以下は
「source/flash/actionscript」フォルダ
以下になります。
最終的な公開には、
—————————————-ここから
flash_test
JavaScriptFlashGateway.js
JavascriptFlashGateway.swf
javascript2flash.swf
index.html
images
logo.gif
だけになります。
—————————————-ここまで
●3.文字コードの修正
JavaScriptProxy.as
JavaScriptSerializer.as
がBOM付のUTF8でないと後々エラーがでるので先に変換しておきます。
–おまけ解説
「import com.macromedia.javascript.JavaScriptProxy;」で
「 ‘com.macromedia.javascript.JavaScriptProxy’ がロードされませんでした。」
のエラーが出てしまいます。
これを回避するために、unicode(BOM付)で保存してあげるとの事。
とりあえず、お手持ちのテキストエティターでUTF8に保存してあげてためしてください。
私は、「dana」でUTF8に保存しなおしてあげたら上手くいきました。
–
■ 実作業━━━━━━━━━━━━━━━━━━━━━━━━
●1. JavaScriptProxy.as JavaScriptSerializer.as の取り込みスクリプトを記載
「javascript2flash.fla」に
– ここから
import com.macromedia.javascript.JavaScriptProxy;
var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);
– ここまで
を記載
●2. HTML から実行する functon を作ります。
「javascript2flash.fla」に
– ここから
function viewImage(image) {
switch( image ){
case 1 :
gotoAndStop(40);
break ;
case 2 :
gotoAndStop(50);
break ;
case 3 :
gotoAndStop(60);
break;
}
}
– ここまで
のjavaScrpitからの制御を入れました。
●3.swfファイルの作成
javascript2flash.fla をパブリッシュして javascript2flash.swf
を作成
●4.index.html のJavascriptを編集
サンプルを
http://www.itm.ne.jp/flash_test/index.html
においています。そちらのソースで確認ください。
■ 注意点━━━━━━━━━━━━━━━━━━━━
今回、日本語を引数として通していません。日本語を通すと文字化けするとの
情報があるので、スクリプトの変更が必要みたいです。
■ JavaScript Integration Kitの実装━━━━━━━━━━━━━
JavaScriptFlashGateway.js
HTMLとFlashのつなぎのJavascriptです。
JavaScriptFlashGateway.swf
実装として、#include “JavaScriptFlashGateway.as”だけをしているファイル
データの流れは、
1.HTML->
2.javascript(イベント等) ->
3.JavaScriptFlashGateway.js ->
4.JavaScriptFlashGateway.swf ->
5.作ったflash(swf)
の順番になります。(とおもう。。)
■ 各種マニュアル━━━━━━━━━━━━━━━━━━━━
JavaScriptFlashGateway.js とかのメソットのマニュアルは
おいおい書きます。(気が向いたら)