lovelog || Loveness × Zeroless

Flashでは更新情報を表示させたりする時にスクロールバーをよく使われると思います。
ただ、内容が多くなればなるほどバーが縮小していきますが、これは元々のバーのデザインも変わってしまいますし、バー自体をドラッグしづらくなっていきます。

バー自体はデザインと同じままで、スクロールの移動距離を変化させるようにすれば、問題は解決です。
「trick7.com」さんの情報を参考にイージングを追加したスクロールバーを作りました。

//なめらかに止まるための抵抗。値が小さいほど減速大。
var friction:Number = 0.2;


//スクロールバーの背景をクリックしたときの抵抗。
var coursorMove = 1;
var backFriction:Number = 0.1;


//スクロール可能かどうかの正否
var flag:Boolean = new Boolean;


//頻繁に使うMCへのパスを変数に格納
var scrollBtn:MovieClip = sBar.sBtn;
var scrollBack:MovieClip = sBar.sBack;


//スクロールさせたいコンテンツにマスクを設定
content_mc.setMask(mask_mc);


var yMax:Number;
var mPc:Number;
var mPd:Number;


/*========================初期動作===========================*/



function init():Void {


    mPc = mask_mc._height/content_mc._height;
    
    //マスクの高さ/スクロールバーの高さ
    mPb = mask_mc._height/scrollBack._height; 

   
    yMax = Math.ceil(scrollBack._height-scrollBtn.btn_bg._height);
  

    /////スクロールハンドルのサイズ固定バージョン用スクリプト
    var dragableBarArea = scrollBack._height-scrollBtn._height;
    var dragableContentsArea = content_mc._height-mask_mc._height;
    dcPdb=dragableContentsArea/dragableBarArea

   
    //テキストエリアよりコンテンツが多き場合スクロールバーを表示。   
    if (mask_mc._height<content_mc._height) {
        sBar._visible = true;
        upBtn._visible = true;
        downBtn._visible = true;
    }
}



/*========================スライダー===========================*/

function activeScroll():Void {
    /*
    content_mcのプロパティgoalYに数値を代入
    scrollBtn._yの値が後のscrollSet.sBar.onPressなどでonEnterFrameを使って使用しているので代入される値は常に可変しています。
    このプロパティ自体はイージングで使用。
    */

    /*
    シンプルにcontent_mc.goalY = scrollBtn._yとしてしまうと、
    スクロールボタンとコンテンツが同じ高さになってしまいますので、
    スクロールバーとコンテンツは逆の方向へ動くように 「-scrollBtn._y」としてあります。
    */
   
    content_mc.goalY = -scrollBtn._y*dcPdb;
   
    /*
    スクロールボタンの現在地 - スクロールバーの背景を押した場所 * stepMove（scrollBack.onPress内で設定）
    が0以下であればスクロールボタンのY位置をstepMove分だけ上に位置。
    */
    if (sliderbackPress) {
        if ((scrollBtn._y-scrollBack._ymouse)*stepMove<0) {
            scrollBtn._y += stepMove;
        }
    }
    if (pressUP) {
        scrollBtn._y -= coursorMove;
    }
    if (pressDown) {
        scrollBtn._y += coursorMove;
    }
    if (scrollBtn._y<0) {
        scrollBtn._y = 0;
    }
    if (scrollBtn._y>yMax) {
        scrollBtn._y = yMax;
    }
}



function contentsEnterFrame():Void {
    content_mc.flag = true;
    content_mc.onEnterFrame = function() {

        /*
        disは
        スクロールボタンの位置とコンテンツの位置との差です。
        if文で1以上の場合はその差を埋め、１未満だと動きを止めます。
        */
        var dis:Number = this.goalY-this._y;

        if (this.flag || Math.abs(dis)>1) {
            this._y += dis*friction;
        } else {
            delete this.onEnterFrame;
        }
    };
}


scrollBtn.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    this.startDrag(false,this._x,0,this._x,yMax);
};

scrollBtn.onRelease = scrollBtn.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    this.stopDrag();
    sliderbackPress = false;
};

scrollBack.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    sliderbackPress = true;
    stepMove = (this._ymouse-this._parent.sBtn._y-this._parent.sBtn._height/2)*backFriction;
};

scrollBack.onRelease = scrollBack.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    sliderbackPress = false;
    scrollBtn._y = Math.floor(scrollBtn._y);
};

upBtn.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    pressUP = true;
};
upBtn.onRelease = upBtn.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    pressUP = false;
};

downBtn.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    pressDown = true;
};
downBtn.onRelease = downBtn.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    pressDown = false;
};

content_mc内にテキストフィールドを作り、関数init()を行う処理をすれば動きます。

 

例
    my_nc = new NetConnection( );
    my_nc.connect(null);

    my_ns = new NetStream(my_nc);
    my_ns.play(" url ");

●サイズの修正が効かない時は   videoオブジェクト.smoothing　でビデオのスムージングを設定。
●再生ヘッドの位置を秒単位で前後に変更   my_ns.seek( 秒数 );

AS3.0はイベント処理の方法が大きく変化。
AS2.0では、インスタンスのクリックはonPressイベントハンドラを使って処理をしていた。

例：ステージ上にあるインスタンスmy_mcをクリック(AS2.0)
my_mc.onPress = function(){
trace("hello!");
}

上記と同じ処理をAS3.0では、イベントリスナーを使って次のように記述。

my_mc.addEventlistener(MouseEvent:CLICK, onClick);
function onClick(event:MouseEvent):void{
trace("hello!");
}