2012.01.18
以前書いた、
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。
JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。
修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。
・デモ
・ダウンロード
取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。
■動作
このスクリプトで取得できるものは次のようになります。
・ブラウザのスクロール位置（ sX, sY ）
・ブラウザの幅（ bW, bH ）
・ページ内のFlashの位置（ pX, pY ）
それぞれ、情報が変更されたタイミングで
Flash側の関数が引数つきで呼び出されるようになっています。
・ブラウザがスクロールされたとき
→ function browserScroll( sX, sY ){}
・ブラウザがリサイズされたとき
→ function browserResize( bW, bH, pX, pY ){}
このへんは正直わかりづらいので、
サンプルデータを参考にしてみてください。
■設置
【JSの読み込み】
<head></head>内でJSを読み込みます
<script language="JavaScript" type="text/javascript" src="js/getScroll.js"></script>
【Flash設置コードに追記】
ページ内のFlashを設置している箇所を、次のように変更します
・Flashを<div id="flashWrapper"></div>で囲む
・FlashのID、nameを「myFlashContent」と付ける
※両方とも、名前が気に入らない場合はJS内の同名の箇所を書き換えれば動きます。
基本的には以上。
Flash部分は以下のようになります。
今回は swfobject.js を使っていますが、IDとnameさえ記述されていれば
<object>タグでも動くと思います。
----------------------------------------------------------------------
<div id="flashWrapper">
<div id="myFlash"></div>
<script type="text/javascript"><!--
var flashvars = {};
var params = {allowscriptaccess: "always"};
var params = {wmode: "transparent"};
var attributes = {id: "myFlashContent",name: "myFlashContent"};
swfobject.embedSWF("main.swf", "myFlash", "840", "1200", "10.0.0", "expressInstall.swf", flashvars, params,attributes);
//--></script>
</div>
----------------------------------------------------------------------
以上です。
ダウンロードにHTMLやFlashの一式が入っていますので、
実際に見て参考にしてみてください。
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。
JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。
修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。
・デモ
・ダウンロード
取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。
■動作
このスクリプトで取得できるものは次のようになります。
・ブラウザのスクロール位置（ sX, sY ）
・ブラウザの幅（ bW, bH ）
・ページ内のFlashの位置（ pX, pY ）
それぞれ、情報が変更されたタイミングで
Flash側の関数が引数つきで呼び出されるようになっています。
・ブラウザがスクロールされたとき
→ function browserScroll( sX, sY ){}
・ブラウザがリサイズされたとき
→ function browserResize( bW, bH, pX, pY ){}
このへんは正直わかりづらいので、
サンプルデータを参考にしてみてください。
■設置
【JSの読み込み】
<head></head>内でJSを読み込みます
<script language="JavaScript" type="text/javascript" src="js/getScroll.js"></script>
【Flash設置コードに追記】
ページ内のFlashを設置している箇所を、次のように変更します
・Flashを<div id="flashWrapper"></div>で囲む
・FlashのID、nameを「myFlashContent」と付ける
※両方とも、名前が気に入らない場合はJS内の同名の箇所を書き換えれば動きます。
基本的には以上。
Flash部分は以下のようになります。
今回は swfobject.js を使っていますが、IDとnameさえ記述されていれば
<object>タグでも動くと思います。
----------------------------------------------------------------------
<div id="flashWrapper">
<div id="myFlash"></div>
<script type="text/javascript"><!--
var flashvars = {};
var params = {allowscriptaccess: "always"};
var params = {wmode: "transparent"};
var attributes = {id: "myFlashContent",name: "myFlashContent"};
swfobject.embedSWF("main.swf", "myFlash", "840", "1200", "10.0.0", "expressInstall.swf", flashvars, params,attributes);
//--></script>
</div>
----------------------------------------------------------------------
以上です。
ダウンロードにHTMLやFlashの一式が入っていますので、
実際に見て参考にしてみてください。
コメントする