[AS3] 簡易ScrollBar

1001111_customScrobar_1.swf


fla下載

Main.as......

package  {
 
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 import flash.geom.Rectangle;
 import caurina.transitions.*;
 import flash.events.Event;
 
 public class Main extends MovieClip {
  
  public var container:MovieClip;
  public var displayZone:MovieClip;
  public var track:MovieClip;
  public var slider:MovieClip;
  private var bounds:Rectangle;
  private var minScrollValue:Number;
  private var maxScrollValue:Number;
  private var initPOsY:Number;
  
  public function Main() {
   this.initial();
   this.setListener();
   return;
  }
  
  private function initial():void{
   this.initPOsY = this.container.y;
   this.minScrollValue = 0;
   this.maxScrollValue = this.track.height-this.slider.height;
   this.bounds = new Rectangle(this.track.x, this.track.y, this.minScrollValue, this.maxScrollValue);
   this.container.mask = this.displayZone;
   return;
  }
  
  private function setListener():void{
   this.slider.addEventListener(MouseEvent.MOUSE_DOWN,dragHandler);
   this.stage.addEventListener(MouseEvent.MOUSE_UP,dragHandler);
   this.addEventListener(Event.ENTER_FRAME,scrollcontent);
   return;
  }
  
  private function dragHandler(event:MouseEvent):void{
   /*trace(event.type);*/
   switch(event.type){
    case "mouseDown":
     this.slider.startDrag(false,bounds);
    break;
    case "mouseUp":
     this.slider.stopDrag();
    break;
    default:
    break;
   }
   return;
  }
  
  private function scrollcontent(event:Event):void{
   var _percent:Number = (this.slider.y-this.track.y)/(maxScrollValue);
   /*trace("_percent : " + _percent);*/
   Tweener.addTween(this.container,{y:(this.initPOsY - _percent*(this.container.height-this.displayZone.height)),time:1});
   return;
  }
 }
}

深度交換_DisplayObjectContainer.swapChildrenAt()

swapChildrenAt(index1:int, index2:int)
在子清單的兩個指定索引位置，替換子物件的 z 順序 (深度階層，由前至後順序)。

UIScrollBar
UIScrollBar.scrollPosition = UIScrollBar.maxScrollPosition;
scrollPosition : 會取得或設定目前的捲動位置，並更新縮圖的位置。
maxScrollPosition : 會取得或設定代表最高捲動位置的數字。
UIScrollBar.update();
會強制捲軸立即更新其捲動屬性。

※此例, 點擊舞台,透過 swapChildrenAt()方法, 物件bbb與ccc交換深度,右邊TextField文字欄位info會呈現bbb與ccc深度上下順序. (文字欄位中, 先trace低索引, 再trace高索引)
※UIScrollBar捲軸被附加綁定到info文字欄位上,當字串資料超出欄位底部,捲軸將持續捲至捲動最大值位置並更新畫面,以便閱讀最新字串訊息.

1000608_displayObjectContainer.swapChildrenAt.swf

import fl.controls.UIScrollBar;
import fl.controls.ScrollBarDirection;

var vScrollBar:UIScrollBar = new UIScrollBar();
this.setInfoTF();
this.createUIScrollBar();

trace("this.numChildren : " + this.numChildren);
this.addInfo("this.numChildren : " + this.numChildren);
this.getSpriteIndex();

this.stage.addEventListener(MouseEvent.MOUSE_DOWN,swap);
function swap(event:MouseEvent):void {
 /*深度交換*/
 this.swapChildrenAt(this.getChildIndex(bbb),this.getChildIndex(ccc));
 trace("****************");
 this.getSpriteIndex();
}

/*取得為Sprite類別物件且不為UIScrollBar 的實體*/
/*UIScrollBar 繼承自Sprite → UIScrollBar →ScrollBar →UIComponent →Sprite*/
function getSpriteIndex():void {
 for (var i:uint=0; i < this.numChildren; i++) {
  if (this.getChildAt(i) is Sprite && !(this.getChildAt(i) is UIScrollBar)) {
   trace("索引 " + i + " : " + this.getChildAt(i).name);
   addInfo("索引 " + i + " : " + this.getChildAt(i).name);
  }
 }
 addInfo("**************");
 /*強制捲軸立即更新其捲動屬性。 - 重要,否則捲軸拖曳Bar會不見*/
 this.vScrollBar.scrollPosition = this.vScrollBar.maxScrollPosition;
 trace(this.vScrollBar.scrollPosition);
 this.vScrollBar.update();
 return;
}

/*設置info動態文字欄位屬性*/
function setInfoTF():void {
 var format:TextFormat = new TextFormat();
 format.color = 0x000000;
 this.info.selectable = true;
 this.info.wordWrap = true;
 /*autoSize屬性不能開, 否則捲軸會不正常*/
 /*this.info.autoSize = TextFieldAutoSize.LEFT;*/
 this.info.setTextFormat(format);
 this.info.defaultTextFormat = format;
 return;
}

/*附加字串至TextField 欄位目前字串之後*/
function addInfo(_obj:*):void {
 this.info.appendText(_obj.toString() + "\n");
 return;
}

/*初始定義UIScrollBar屬性*/
function createUIScrollBar():void{
 this.vScrollBar = new UIScrollBar();
 this.vScrollBar.direction = ScrollBarDirection.VERTICAL;
 this.vScrollBar.scrollTarget = info;
 this.vScrollBar.move(info.x + info.width + 10, info.y);
 this.vScrollBar.height = info.height;
 this.addChild(vScrollBar);
 return;
}