GSTAR

scrollbar 算是在flash網站中幾乎一定會出現的元件，不論是針對整個網站或是部分的內容，當內容超過設定的長度時，scrollbar 就有其必要性，當然他的樣示呈現和捲動的方式有千百種，在這裡我只先究其運作的基本概念來製作一個簡單的範例。

我們可以用以下幾個思考轉換來達成我們要做到的 scrollbar 的效果

1.首先，求得捲軸按鈕的位置佔整個捲軸可示範圍的百分比
2.將求得的比例帶給內容，得出其位置

接著馬上就開始進入實做吧！

首先新開一個場景，我這邊是先設定為300x300

為了讓大家都可以比較好看懂，這次實做都先採取在Flash中做出元件的方式，而不使用AS繪製。
所以接著開始製作原件，並做好命名的動作。

我們要準備的有
thumb_mc ( 20x50) 卷軸的控制鈕
track_mc ( 20x300 ) 卷軸
mask_mc ( 300x300 ) 被捲動的內容物遮罩
content_mc (300x(視內容高度)) 裝載顯示內容的容器
然後將素材在場景上放置好( 如圖索示 )

接著打開我們的ActionScript面板
開始編寫程式。

首先我們先建立兩個變數來存取thumb_mc能移動的最大以及最小位置

var min:Number = 0;
var max:Number = track_mc.height - thumb_mc.height;

注意:
看到max的部份我們用track_mc的高度剪掉thumb_mc的高
這是因為世界上沒有哪個scrollbar按鈕拉下來的位置會超過捲軸的長度
所以我們將track_mc的高扣除按鈕的高來做為按鈕可拖動的最大y值

接著建立另一個變數用來儲存滑鼠按下按鈕時，滑鼠的y跟按鈕的y之間的差

var offset:Number = 0;

這是為了能讓滑鼠點選在按鈕的哪邊就以哪邊為點進行拖動，就像一般我們使用的卷軸一樣

設定完這3個變數後接著就要開始執行控制的部份了。
首先建立一個名為 init 的函示，來執行所有需要初始化的設定。

function init():void
{
    content_mc.mask = mask_mc;
    thumb_mc.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);
    stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
}

指定content_mc的遮罩為mask_mc
為thumb_mc加入MouseDown的監聽
另外替stage加入MouseUp的監聽

為甚麼這邊要將MouseUp的監聽設在stage而不是按鈕thumb_mc上呢？
這是為了顧及到有類似以往onReleaseOutside的動作發生，在AS3中並沒有此事件
所以當你在thumb_mc的範圍外放開滑鼠左鍵的話，thumb_mc並不會因為你放開而有所回應
因此，這邊將MouseUp的事件加在stage上，直接讓stage來處理這動作的監聽，來解決onReleaseOutside的問題

然後，我們定義MOUSE_DOWN和MOUSE_UP的兩個函示

function onMouseDownHandler(event:MouseEvent):void
{
    offset = mouseY - MovieClip(event.target).y;
    stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

function onMouseUpHandler(event:MouseEvent):void
{
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
}

可以看到我們在onMouseDownHandler方法中求出滑鼠按下去後的座標y和thumb_mc的座標y之間的差值
另外也在滑鼠按下後將MOUSE_MOVE的監聽函示onMouseMoveHandler給了stage，以監聽滑鼠按下移動時所要執行的動作
稍後我們會再定義MOUSE_MOVE的函示onMouseMoveHandler的內容
而當滑鼠放開時，則將MOUSE_MOVE移除

做完這些候我們還需要一個用來判斷按鈕位置的方法，以防按鈕超出或是小於整個拉霸的範圍

function detecting():void
{
    thumb_mc.y = mouseY - offset;
   
    if(thumb_mc.y <= min)
    {
        thumb_mc.y = min;
       
    }else if(thumb_mc.y >= max)
    {
        thumb_mc.y = max;
    }
}

為了讓按鈕能夠讓滑鼠從點下去的位置開始拖曳，所以我們讓按鈕的y值減去滑鼠y跟按鈕y之間得差值
這邊如果不太了解的話你可以把offset的值拿掉，就可以明白我說的意思了。
接著是一串判斷式，確保按鈕的位置不會超出max和min。

Yes, 最後最後就是我們滑鼠移動時所要執行的動作啦！

function onMouseMoveHandler(event:MouseEvent):void
{
    detecting();
    var percent:Number = thumb_mc.y / max;
    var pos:Number = content_mc.height - mask_mc.height;
    content_mc.y = Math.round(pos * -percent);
    event.updateAfterEvent();
}

可以看到在這個函示中，我們先以detect函示，確保了按鈕的位置，讓他不會超出範圍
接著，定義了一個變數percent來求得按鈕的y座標在拉霸可移動的最大範圍，也就是max的值中所佔有的比例
( 大家不妨可以將percent的值trace出來看，你可以看到他的變化是由0.00一直到1，相當於0到100的範圍 )

接著將content_mc的高扣除顯示範圍的高度。
假如我沒有做這個動作，而是直接用content_mc的高度去做運算的話，當scrollbar拖拉到最底端時，你會發現內容也跟著跑出顯示範圍之外。
所以為了當scrollbar拉到最底時也能剛好讓content_mc移動顯示到最底端，我們要將content_mc的高減去顯示範圍，也就是mask_mc的高，並用其值來做運算。

最後，將求得的高度乘以負的percent值，就可以得到content_mc在每次事件中所應該顯示的y軸位置。
(為什麼要讓percent是負的呢，因為照常理而言，當我們scrollbar向下拉，顯示的內容會網上捲動，而Flash的y座標正負值和我們所學的座標系統恰好相反，往上是負，往下是正，所以在Flash中，物件要往上一定是將其y值減小。同理的在這邊我們希望內容會隨著scrollbar向下拉時向上捲動，因此我們將得出的percent加上個負號，使content_mc正確的移動到我們要的位置。)

以上就是scrollbar運作的基本寫法，之後會再貼出比較進階的應用
有興趣的朋友可以跟著試試看，並加以變化。