SWFAddressの設定で一苦労したので、備忘録をかねて投稿。
用意するもの
- SWFAddressのソースファイル（ここでダウンロード）
- SWFObjectなどのswf埋め込み用JavaScript（とりあえずSWFObject v2.1を使用）
下準備
htmlにSWFObjectとSWFAddressを読み込ませ、swfファイルを表示させるためのスクリプトを記述する。
※swfaddress.jsはswfobject.jsの後で読み込ませること！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SWFAddress Test</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
</head>
<body>
<div id="flashArea"></div>
<script type="text/javascript">
// <![CDATA[
swfobject.embedSWF("sample.swf", "flashArea","400", "300", "9");
// ]]>
</script>
</body>
</html>
flaファイル作成
ステージ上にページ（フレーム）遷移用のボタン「btnTop_mc」「btnA_mc」「btnB_mc」と、デバッグメッセージ表示用のテキストフィールド「debug」を配置。フレームラベル「fTop」「fPageA」「fPageB」にそれぞれ異なる画面（といっても、タイトル文字列が変わるだけ）を用意。下記スクリプトを記述し、ボタンを押すと対応するフレームに遷移するように設定。
stop();
//各ボタンに対応するフレームラベルを記録
btnTop_mc.labelStr = "fTop";
btnA_mc.labelStr = "fPageA";
btnB_mc.labelStr = "fPageB";
//各ボタンにメソッドを適用
btnTop_mc.addEventListener(MouseEvent.CLICK, onClick);
btnA_mc.addEventListener(MouseEvent.CLICK, onClick);
btnB_mc.addEventListener(MouseEvent.CLICK, onClick);
//ハンドカーソルを有効化
btnTop_mc.buttonMode =
btnA_mc.buttonMode =
btnB_mc.buttonMode = true;
//デバッグ表示用メソッド
function xDebug(arg:*):void{
debug.text = arg + "\n" + debug.text;
}
//ボタンクリック時のメソッド
function onClick(e:MouseEvent):void{
gotoAndStop(e.target.labelStr);
}
SWFAddressのイベントハンドラを設定
上記スクリプトに続いて下記のスクリプトを追加。
//SWFAddressのイベントハンドラメソッド
function onSWFAddressEvent(e:SWFAddressEvent):void{
xDebug(["onSWFAddressEvent:",getTimer()]);
}
//SWFAddressのイベントハンドラをリスナーに登録
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onSWFAddressEvent);
これを実行してわかったことは、ファイルの開始時に自動的に一度イベントハンドラが実行されるということ。
ディープリンクの値を設定する：SWFAddress.setValue
続いてボタンクリック時のメソッドを以下のように変更。
//ボタンクリック時のメソッド
function onClick(e:MouseEvent):void{
SWFAddress.setValue(e.target.labelStr);
gotoAndStop(e.target.labelStr);
}
すると、各ボタンをクリックした時に、ブラウザのURL欄が
http://www.hogehoge.xxx/sample.html#/fPageA
のように変わるようになった！よっしゃ、一歩前進。
ブラウザのタイトル文字列の変更：SWFAddress.setTitle
なんとブラウザのタイトル文字列も変更できるそうな。早速トライ。
//ボタンクリック時のメソッド
function onClick(e:MouseEvent):void{
//ディープリンクの設定
SWFAddress.setValue(e.target.labelStr);
//ブラウザのタイトルの文字列の変更
SWFAddress.setTitle(e.target.labelStr);
//フレームの移動
gotoAndStop(e.target.labelStr);
}
結果は↓
オッケー。
とりあえずここまで。
コメントはまだありません »
コメントはまだありません。
この投稿へのコメントの RSS フィード。 TrackBack URL
コメントする