Flash：ブラウザのスクロール状態を取得│Flash│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積

2009.11.26

タイトルの通り、ブラウザのスクロールバーの位置を取得するだけのスクリプトです。
あんまり使い道がなさそうですが、フル画面 Flash にできず、かつ縦長の Flash で、Lightboxっぽい動きをさせたいときとかにあると便利かもしれません。。

JavaScript でブラウザの情報を取得して、その情報を Flash で受け取ります。

【！】FireFoxで上手く動かないようなので、スクリプトを修正しました。
新しい記事にまとめていますので↓こちらをご覧ください。

Flash：ブラウザのスクロール状態を取得（修正版）

■JavaScript
JS のほうは Archiva さんの記事を参考にさせていただきました～。

ページサイズやスクロール位置を取得する

ブラウザ互換も考えられていてとても助かりました。
Safari 未対応っぽく書いてありますが、普通に動きましたし。

こちらのスクリプトを使わせていただいて、


// UA判別 --------------------------------------------
var isWin9X = (navigator.appVersion.toLowerCase().indexOf('windows 98')+1);
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
var isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1?1:0);
if (isOpera) isIE = false;
var isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);
// スクロール量 ---------------------------------
function getScrollPosition() {
    var obj = new Object();
    obj.x = document.documentElement.scrollLeft || document.body.scrollLeft;
    obj.y = document.documentElement.scrollTop  || document.body.scrollTop;
    return obj;
}
// 表示領域サイズ -------------------------------
function getScreenSize() {
    var obj = new Object();
    if (!isSafari && !isOpera) {
        obj.x = document.documentElement.clientWidth  || document.body.clientWidth  || document.body.scrollWidth;
        obj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
    }
    else {
        obj.x = window.innerWidth;
        obj.y = window.innerHeight;
    }
    return obj;
}
// flashにデータを送る準備 ----------------------------
//横スクロール位置
var scrollX ={};
//Flashにデータを送る
function getData_sX(){
    scrollX.data = getScrollPosition().x;
    return scrollX.data;
}
//縦スクロール位置
var scrollY ={};
function getData_sY(){
    scrollY.data = getScrollPosition().y;
    return scrollY.data;
}
//ウインドウ横幅
var windowX ={};
function getData_wX(){
    windowX.data = getScreenSize().x;
    return windowX.data;
}
//ウインドウ縦幅
var windowY ={};
function getData_wY(){
    windowY.data = getScreenSize().y;
    return windowY.data;
}
//ドキュメント横幅
var documentX ={};
function getData_dX(){
    documentX.data = document.documentElement.scrollWidth || document.body.scrollWidth;
    return documentX.data;
}
//ドキュメント縦幅
var documentY ={};
function getData_dY(){
    documentY.data = document.documentElement.scrollHeight || document.body.scrollHeight;
    return documentY.data;
}

このようなJSファイルを作りました。
このスクリプトでブラウザの情報を取得します。Flash から関数を呼び出すと、そのときの状態を変数に入れる感じです。

これを html のヘッダーで読み込んでおきます。

■Flash
Flash からは、関数を実行させる指示を出します。
１行目で、JS と通信するための ExternalInterface クラスを読み込みます。


import flash.external.*;
//JSからデータを受け取る
onEnterFrame = function(){
    //横スクロールの位置 取得
    data_sX = String(ExternalInterface.call("getData_sX"));
    text_sX.text = data_sX; //テキストで表示
    //縦スクロールの位置 取得
    data_sY = String(ExternalInterface.call("getData_sY"));
    text_sY.text = data_sY;
    //ウインドウの横幅 取得
    data_wX = String(ExternalInterface.call("getData_wX"));
    text_wX.text = data_wX;
    //ウインドウの縦幅 取得
    data_wY = String(ExternalInterface.call("getData_wY"));
    text_wY.text = data_wY;
    //ドキュメントの縦幅 取得
    data_dX = String(ExternalInterface.call("getData_dX"));
    text_dX.text = data_dX;
    //ドキュメントの横幅 取得
    data_dY = String(ExternalInterface.call("getData_dY"));
    text_dY.text = data_dY;
}

今回は onEnterFrame を使って絶えず情報を取得していますが、
もっと上手い方法があるような・・？

以上です。
せっかく作ったのでサンプルも置いておきますね。
サンプル

Flash