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運作的基本寫法,之後會再貼出比較進階的應用
有興趣的朋友可以跟著試試看,並加以變化。




創作者介紹
創作者 gstar175 的頭像
gstar175

GSTAR

gstar175 發表在 痞客邦 留言(6) 人氣()