Macでもマウスホイールできるスクロールバーのサンプル

従来、Macではマウスホイールの回転は取得できませんでしたが、Flash8のExternalInterfaceを使ってJavascriptのホイールイベントを取得することで、Flashでのマウスホイールスクロールが可能です。

国内でも、以前から「Back At One.」さんや「F-site」さんでも紹介されていますが、最近、海外のBlog「pixelbreaker」で、SWFObjectにアドオンさせる形で、簡単に導入できる「SWFMacMouseWheel」が公開されていたので、これを使わせてもらって、以下のようなサンプルを作ってみました。

動作確認も兼ねて、下書きですがアップします。コードもちょくちょく修正をかけていきます。いずれは全部まとめたzipファイルを配布いたしますのでよろしくです。

Macの場合、ブラウザのフォーカスをswfに渡したまま戻らなくなるので、以降のブラウザのホイールが効かなくなる現象があります。対応策を勉強中ですが、とりあえず現状はページのリロードなどで対応してください。

以前作ったスクロールバーを見直し、ゼロから作り直しました。ExternalInterfaceを使うため、Flash Player 8が必要です。ですが、ここで朗報です！この「SWFMacMouseWheel」はSWFObjectをアドオン（拡張みたいなもん）したものなので、ExpressInstallにも簡単に対応できます。

「SWFMacMouseWheel」サイトから、関連クラス＆Javascriptをダウンロード後、好きなように拡張していきます。僕は外部カスタムクラス"WheelScrollBar.as"を作りました。

//WheelScrollBarクラス：11/29 update

import com.pixelbreaker.ui.MouseWheel;
class com.trick7.ui.WheelScrollBar {
    //SETTINGS--------------------------------
    public var wSpeed:Number = 3;
    public var cSpeed:Number = 3;
    //PROPERTIES------------------------------
    public var content:MovieClip;
    public var mask:MovieClip;
    public var bar:MovieClip;
    public var slider:MovieClip;
    public var cursorUp:MovieClip;
    public var cursorDown:MovieClip;
    private var mPc:Number;
    private var mPs:Number;
    private var yMin:Number;
    private var yMax:Number;
    //CONSTRUCTOR-----------------------------
    function WheelScrollBar(c:MovieClip, m:MovieClip, b:MovieClip, s:MovieClip, u:MovieClip, d:MovieClip) {
        content = c;
        mask = m;
        bar = b;
        slider = s;
        if (u) {
            cursorUp = u;
        }
        if (d) {
            cursorDown = d;
        }
        focusWheel();
        content.setMask(mask);
        mPc = mask._height/content._height;
        init();
    }
    //PUBLIC----------------------------------
    function init():Void {
        slider._height = bar._height*mPc;
        mPs = mask._height/slider._height;
        yMin = bar._y;
        yMax = bar._y+bar._height-slider._height;
        //if (content._height <= mask._height), scrollBar's parts are invisible.
        if (mPc>=1) {
            bar._visible = false;
            slider._visible = false;
            cursorUp._visible = false;
            cursorDown._visible = false;
        }else{
            bar._visible = true;
            slider._visible = true;
            cursorUp._visible = true;
            cursorDown._visible = true;
        }
        dragScroll();
        //if coursorButtons are used, cursorScroll method is activated.
        if (cursorUp || cursorDown) {
            cursorScroll();
        }
    }
    function onMouseWheel(delta:Number):Void {
        if (slider._y>=yMin && yMax && mPc<1) {
            slider._y -= delta*wSpeed;
            if (slider._y<yMin) {
                slider._y = yMin;
            } else if (slider._y>yMax) {
                slider._y = yMax;
            }
        }
        setPosition(slider._y);
    }
    //CONTROLLER------------------------------
    public function setPosition(sliderPos:Number):Void {
        slider._y=sliderPos;
        content._y = -1*((sliderPos-yMin)*mPs)+mask._y;
    }
    //GETTER/SETTER METHOD--------------------
    public function get top():Number{
        return yMin;
    }
    public function get bottom():Number{
        return yMax;
    }
    public function set bottom(newBottom:Number){
        mPc = mask._height/newBottom;
        init()
    }
    public function set wheelSpeed(newWheelSpeed:Number){
        wSpeed=newWheelSpeed
        init()
    }
    public function set cursorSpeed(newCursorSpeed:Number){
        cSpeed=newCursorSpeed
        cursorScroll()
    }
    public function focusWheel():Void {
        MouseWheel.addListener(this);
    }
    public function unFocusWheel():Void {
        MouseWheel.removeListener(this);
    }
    public function windowResize(h:Number):Void{//for FULLSCREEN scrollbar
        mPc = mask._height/h;
        init();
        var home:Object = this;
        slider._y=-1*(content._y/mPs)+bar._y;//リサイズ時の調整
        trace(content._y)
        if(((slider._y-bar._y)+slider._height)*mPs>=h){
            if(content._y<mask._y){
            slider._y=yMax;
            home.setPosition(slider._y);
            }else{
                content._y=mask._y
            }
        }
    }
    //PLIVATE---------------------------------
    private function dragScroll():Void {
        var home = this;
        var min:Number = yMin;
        var max:Number = yMax;
        slider.onPress = function() {
            this.startDrag(false, this._x, min, this._x, max);
            this.onEnterFrame = function() {
                home.setPosition(this._y);
            };
        };
        slider.onRelease = slider.onReleaseOutside=function () {
            this.stopDrag();
            this.onEnterFrame = null;
        };
    }
    private function cursorScroll():Void {
        var home:Object = this;
        var speed:Number = cSpeed;
        var slider:MovieClip = home.slider;
        var min:Number = yMin;
        var max:Number = yMax;
        cursorUp.onPress = function() {
            this.onEnterFrame = function() {
                if (slider._y>min) {
                    slider._y -= speed;
                    if (slider._y<min) {
                        slider._y = min;
                    }
                    home.setPosition(slider._y);
                }
            };
        };
        cursorUp.onRelease = cursorUp.onReleaseOutside=function ():Void {
            this.onEnterFrame = null;
        };
        cursorDown.onPress = function():Void  {
            this.onEnterFrame = function() {
                if (slider._y<max) {
                    slider._y += speed;
                    if (slider._y>max) {
                        slider._y = max;
                    }
                    home.setPosition(slider._y);
                }
            };
        };
        cursorDown.onRelease = cursorDown.onReleaseOutside=function ():Void {
            this.onEnterFrame = null;
        };
    }
}

あとは、新規flaファイルを作成し、任意の階層に、"content_mc", "mask_mc", "bar_mc", "slider_mc"を置き、パラメータとして渡せば動くので、結構簡単かなと思います。マスクよりコンテンツの方が短い場合は、スクロールバーは表示されないようにしています。

//flaファイルのフレームスクリプト
import com.trick7.ui.WheelScrollBar;
var wsb:WheelScrollBar=new WheelScrollBar(content_mc,mask_mc,bar_mc,slider_mc);

で、埋め込む側のHTMLファイルは、いつものようにSWFObjectを使い、ホイールイベント用のJavascriptへのリンクとパラメーターの設定をするだけです。ちなみにこのエントリでのソースは、

  :
<head>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/swfmacmousewheel.js"></script>
</head>
  :
<div id="wheelScrollBar" style="width:350px;text-align:center;margin-bottom:5px">wheelScrollBar.swf</div>
<script type="text/javascript">
 var so = new SWFObject("http://www.trick7.com/blog/swf/wheelScrollBar.swf", "wheelScrollBar", "350", "250", "8", "#FFFFFF");
 so.write("wheelScrollBar");
var macmousewheel = new SWFMacMouseWheel( so );
</script>

FlashPlayerのセキュリティ設定のために、ローカルではホイールの確認ができない場合があります。その時は、html, swfファイルをサーバー上にアップロードし、ご確認下さい。

「Back At One.」さんがおっしゃられていましたが、Mac版Firefoxのスクロールスピードが一番遅く、Mac版Safari,Win版Firefox, Win版IE6の順にホイールスクロールが速くなるのですが、Flashに限らず、普通にブラウジングしている時も速度が違うので、どうもブラウザの仕様かなと思い、今のところ対応はしていませんが、ブラウザごとの条件分岐も簡単にできると思います。

11/16追記：
WheelScrollBarクラスを更新。追加機能はこちらをご覧下さい。

11/21追記：
wheelSpeedとcursorSpeedをセッターとして追加、各スクロールバーの移動量を個別に設定できるようになりました。
bottomセッター追加、「WheelScrollBarインスタンス名.bottom = 500」みたいに設定できます。通常は必要ないのですが、スクロールバーを入れ子にした時や、テキストフィールドの不具合（下記参照）などの際、役立つプロパティです。

11/29追記：
swf内に複数個のWheelScrollBarインスタンスを設置した際、ホイールスクロールのフォーカスの切替えができる、focusWheel(), unForcusWheel() メソッドを追加。
また、全画面Flashの画面全体にスクロールバーを付けた際、ブラウザのウィンドウリサイズに対応するための、windowResize(h:Number)メソッドを追加。

備考：「スクロール対象のMCにテキストフィールドを内包させる時の注意点」
スクロール対象となるムービークリップ（content_mc）の中に、テキストフィールドを下端ぎりぎりに配置する場合、テキストフィールドの高さがおかしくなる症状のために、予期しない部分までスクロールしてしまう事があります。
その場合は、flaファイル内でのインスタンス生成文、
var wsb:WheelScrollBar=new WheelScrollBar(.....);
の直後に、
wsb.bottom=（スクロール下端にしたい数値）;
と追加して、数値を直接入力してください。その数値までしかスクロールしないようにできます。