這是我自己連載文章的第一篇，每一篇是一個專題。
內容涵蓋範圍

組件類編寫
濾鏡類和位圖緩衝的使用
FLASH CS3文檔類使用
RSL(RuntimeSharedLibrary)包裝類使用心得
代碼繪圖 轉場效果製作FLASH相册程序
簡單的FLASH事件使用辦法
數據傳輸 和文件讀寫
聯衆交互 視頻，流的應用。
桌面FLASH應用
FLEX前天及後臺應用




需要說明的是
1.我并不是研究邏輯和算法的高手，我FLASH的目標偏重于設計和程序的結合，所以算法上面
大家的意見和批評我一定會虛心聽取的。
2.這個系列不是屬于入門教程的範疇，建議進階級別玩家閱讀。
3.這個系列包含大量的圖形元素,建議大家在網速不錯的時候進來。
4.對于網上同樣的東西，在這個系列裏面也會講的比較深入，而且加入許多擴展的應用進來，
希望遇到更多的對于設計代碼結合有深入研究意願的朋友進來一起探討。



滾動板板組件深入探討


1.設計滾動面板參數和視覺架構
2.加入反向拖曳功能
3.加入按鈕延遲設定
4.創建緩衝或者分級緩衝滾動條效果
5.爲滾動條目加入releaseOutSide判定
6.創建滾動條直達功能
7.創建tip滾動位置提示


篇一:原理 & 架構篇
坐標的計算，
總的來說 一個滾動板板，恩這麽叫的確是有點點奇怪。。。
一個滾動裝置，其主要組成部分爲
一個目標滾動對象，此對象一般繼承自一個基本的顯示基類
一個滾動條對象，用來控制目標滾動對象的坐標



以下使用縱向的滾動條進行圖示：



如圖 ，一個帶內容的滾動面板 包含了一個基本的顯示區域，通常稱之爲遮罩。
而內容對象的y ， 也就是縱坐標在最初時候爲0。而混動條的滾動位置百分比
也爲0%。



當滾動條處于最大移動狀態，即滾動位置百分比數字爲100%,這個時候內容對象的移動位置
處于最大狀態，而他的坐標處于最小值，因爲在程序UI世界里，通常情况下使用的并不是
幾何學中的坐標系，而源于笛卡爾坐標系，即縱越向下方值越大，而橫越向右邊值越大。



內容的縱坐標 = v滾動位置百分比 * ( 可見區域的高度 - 內容的高度 );
內容的橫坐標 = h滾動位置百分比 * ( 可見區域的寬度 - 內容的寬度 );



現在開始是重點

滾動條組件架構的參數設置

自定義的滾動條都包含視覺元素，最精簡視覺架構况包含了：
upShape滾動條向上按鈕圖形
downShape滾動條向下按鈕圖形
dragShape滾動條拖曳按鈕圖形
backShape滾動條背景圖形
hidenShape滾動條的占位圖形



與之共存的顯示對象參數
top 在占位圖形範圍內，指定上邊界
bottom 在占位圖形範圍內，指定下邊界
left 在占位圖形範圍內，指定左邊界
right 在占位圖形範圍內，指定右邊界

dragTop拖曳範圍的最高位置
dragBottom拖曳範圍的最低位置

考慮到可能出現APPLE那樣非矩形的拖曳部分，加入拖動範圍偏移值
upOffset向上偏移量
downOffset向下偏移量



滾動面板架構部分：
動條，這裏的考慮和系統組件有所不同
實際應用中，如果內容寬度超過的限制的時候，應該出現
橫向的滾動條，可是這個時候縱向的滾動條也會出現，因爲橫向滾動條組件實際
也占內容寬度的計算。下麵的例子可以說明這個情况。

test.jpg是任意100*100的圖片

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
       <mx:Canvas x="0" y="100" width="100" height="100" backgroundColor="#5D1616">
              <mx:Image x="0" y="0" source="test.jpg"/>
       </mx:Canvas>
       <mx:Canvas x="130" y="100" width="90" height="100" backgroundColor="#5D1616">
              <mx:Image x="0" y="0" source="test.jpg"/>
       </mx:Canvas>
</mx:Application>

而我們設計輕量組件完全可以避免這個問題
我們用_visual麳標識顯示範圍，這個遮罩和滾動面板大小是相同的。
超過範圍使用內容的寬度高度和_visual的寬度高度取差。

2007/12/15
待續。

[ 本帖最后由 enc0717 于 2007-12-17 09:58 编辑 ]

從這個時間開始，開始連載AS3的進階應用教程。希望大家喜歡。
內容全部完全原創，寫的不好的希望不要打我HO。

繼續説説混動條的架構想法

以這個組件爲例，位于net.purplewind.uicomponents包下的ScrollBar超類，其中包含了爲混動條設計的層級容器
組成，爲了實現顯示很功能的分配，以及組件在信息更新時候儘可能不要有BUG，還有在不銷毀和不重新構造的情况
下，可以快速的調整組件的參數并更新到顯示。

ScrollBar類的描述:
簡單的説，這裏包含了混動條中定義需要實現的功能和視覺層級。定義了混動條按鈕各種鼠標事件的分派處理
函數。子類只需要覆蓋掉這些處理函數而不需要重新添加偵聽。最初這個類只是爲了把非邏輯的代碼儘量集中，而
能够讓子類更多的偏向實現邏輯。



verticalScrollBar和HorizontalScrollBar都獨立出來擁有自己的參數和一個fill方法
最初這個方法來源于flash.display.Shape的graphics.beginFill的填充思想。
也就是先定義好需要填充的內容然後畫畫，同樣的。對于組件，也可以定義
好它的元件組成，然後填充這個實例讓他變成可以使用的東東。


參數詳細說明:


ScrollBar
橙色參數:視覺架構，其中tempLayer設計用來創建releaseOutSide事件
而accelerateLayer設計用來發生滾動條直接跳轉的事件源對象。
藍色參數:2層結構，設計用來方便快捷加入删除元件使用。相比
使用循環removeChildAt(0)更加直接和快捷，缺點是占用較多的資源。
紫色參數:隱藏數據屬性，不提供直接對外操作。
綠色函數:所有需要的按鈕事件處理函數，因爲放不下的關係，有個別函數不在圖中，請原諒^_^。
紫色函數:功能函數



VerticalScollBar ( HorizontalScrollBar類似，略 )
紅色屬性:控制滾動條在它的長寬範圍內部允許設置上左下右邊距。
綠色屬性:所有可以直接賦值的視覺元素如果不設定無法成功fill()組件。
藍色屬性:用于占位和背景圖形。
紫色屬性:按鈕元素


在我的實現。對于一個組件，是存在兩個包的，呵呵，我不知道各位大俠是怎麽想的，我還是先説説我的觀點。

邏輯部分的實現我分成了兩個部分
在這個uicomponents包裏面，所有的邏輯都是針對于圖形之間互動，比如説一個按鈕有三種狀態，他們需要同步
移動，修改_width等屬性對于顯示參數的影響等等。在這個包裏實現豐富的基于基本應用視覺互動效果。
也就是説由此類派生的實例是擁有了基本的交互行爲，但是不和任何別的內容發生交互的實例，它不能控制滾動。
而實際用的時候開另一個components包，從對于的uicomponents的類中得到需要需要的基本交互行爲，再
根據實際的需要加入必要的邏輯，這樣你可以使得你的滾動條可以不單單用戶滾動條的功能範疇。

[ 本帖最后由 enc0717 于 2007-12-17 09:54 编辑 ]

这版块应该多点这样的帖子

费心了 支持下 ^_^

到目前爲止還沒有SWF例子給大家看，比較鬱悶HO？
呵呵，下一次連載邏輯實現的時候，就有了！
請耐心等待哦。相信慎密的考慮不會白費的。。


下麵是目前爲止類的基本構成.HOHO.有點長。


ScrollBar

复制内容到剪贴板

代码:

package net.purplewind.uicomponents
{////////////////////////////////////////////////////////////////////////
    import flash.display.Sprite;
    import flash.events.Event;
   
    public class ScrollBar extends Sprite
    {
        
        
        //--------------------------------------------
        // 顯示層級架構
        //--------------------------------------------
        /**背景層級*/
        protected var backLayer      :Sprite;
        protected var _back          :Sprite;
        /**按鈕層級*/
        protected var btnsLayer      :Sprite;
        protected var _btns          :Sprite;
        /**加速功能所需層級*/
        protected var accelerateLayer:Sprite;
        protected var _accelerate    :Sprite;
        /**外部釋放鼠標臨時區域層級*/
        protected var tempLayer      :Sprite;
        protected var _temp          :Sprite;
        /**拖曳層級*/
        protected var dragLayer      :Sprite;
        protected var _drag          :Sprite;
        
        //--------------------------------------------
        // 功能參數
        //--------------------------------------------
        protected var _canRectifyPosition:Boolean;
        protected var _canScaleDrag:Boolean;
        
        //--------------------------------------------
        // 按鈕
        //--------------------------------------------
        protected var leftBtn         :Sprite;
        protected var rightBtn        :Sprite;
        protected var upBtn           :Sprite;
        protected var downBtn         :Sprite;
        protected var dragBtn         :Sprite;
        //---
        protected var _span           :Number;
        public function set span ( value:Number ):void {
            _span = value;
        }
        public function get span ():Number {
            return _span;
        }
        
        //--------------------------------------------------
        // 構造方法
        //--------------------------------------------------
        public function ScrollBar () {
            span                     = 1;
            leftBtn                  = new Sprite ();
            rightBtn                 = new Sprite ();
            upBtn                    = new Sprite ();
            downBtn                  = new Sprite ();
            dragBtn                  = new Sprite ();
            backLayer                = new Sprite ();
            btnsLayer                = new Sprite ();
            accelerateLayer          = new Sprite ();
            tempLayer                = new Sprite ();
            dragLayer                = new Sprite ();
            _back                    = new Sprite ();
            _btns                    = new Sprite ();
            _accelerate              = new Sprite ();
            _drag                    = new Sprite ();
            _temp                    = new Sprite ();
            backLayer.addChild       ( _back           );
            btnsLayer.addChild       ( _btns           );
            accelerateLayer.addChild ( _accelerate     );
            tempLayer.addChild       ( _temp           );
            dragLayer.addChild       ( _drag           );
            addChild                 ( backLayer       );
            addChild                 ( btnsLayer       );
            addChild                 ( accelerateLayer );
            addChild                 ( dragLayer       );
            addChild                 ( tempLayer       );
        }
        
        
        //--------------------------------------------------
        // 共有方法
        //--------------------------------------------------
        
        /**設置拖曳條的縮放*/
        public function setDragScale ( percent:Number ):void {
            //override
        }
        /**
         * 設置寬度 此函數對于縱向滾動條并不産生效果
         * @param width:Number 設置橫向滾動條寬度
         */
        public function setWidth ( width:Number ):void {
            //override
        }
        
        /**
         * 設置高度 此函數對于橫向滾動條并不産生效果
         * @param width:Number 設置橫向滾動條高度
         */
        public function setHeight             ( height:Number ):void {
            //override
        }
        
        
        
        //--------------------------------------------------
        // 向上按鈕
        //--------------------------------------------------
        /**上滾按鈕滑過*/
        protected function upRollOver         ( event:Event ):void {
            //trace ( "default rollover action  [ up btn ]");
        }
        /**上滾按鈕滑出*/
        protected function upRollOut          ( event:Event ):void {
            //trace ( "default rollout action  [ up btn ]");
        }
        /**上滾按鈕點擊*/
        protected function upClick            ( event:Event ):void {
            //trace ( "default click action  [ up btn ]");
        }
        /**上滾按鈕按下*/
        protected function upDown             ( event:Event ):void {
            //trace ( "default down action  [ up btn ]");
        }
        /**上滾按鈕松開*/
        protected function upUp               ( event:Event ):void {
            //trace ( "default up action  [ up btn ]");
        }
        /**上滾按鈕移動*/
        protected function upLeave            ( event:Event ):void {
            //trace ( "default leave action  [ up btn ]");
        }
        /**上滾按鈕外部釋放*/
        protected function upReleaseOutSide   ( event:Event ):void {
            //trace ( "default release out side action  [ up btn ]");
        }
        
        //--------------------------------------------------
        // 向下按鈕
        //--------------------------------------------------
        /**下滾按鈕滑過*/
        protected function downRollOver       ( event:Event ):void {
            //trace ( "default rollover action  [ down btn ]");
        }
        /**下滾按鈕滑出*/
        protected function downRollOut        ( event:Event ):void {
            //trace ( "default rollout action  [ down btn ]");
        }
        /**下滾按鈕點擊*/
        protected function downClick          ( event:Event ):void {
            //trace ( "default click action  [ down btn ]");
        }
        /**下滾按鈕按下*/
        protected function downDown           ( event:Event ):void {
            //trace ( "default down action  [ down btn ]");
        }
        /**下滾按鈕松開*/
        protected function downUp             ( event:Event ):void {
            //trace ( "default up action  [ down btn ]");
        }
         /**下滾按鈕移動*/
        protected function downLeave          ( event:Event ):void {
            //trace ( "default leave action  [ down btn ]");
        }
        /**下滾按鈕外部釋放*/
        protected function downReleaseOutSide ( event:Event ):void {
            //trace ( "default release out side action  [ down btn ]");
        }
        
        //--------------------------------------------------
        // 向前按鈕
        //--------------------------------------------------
        /**前滾按鈕滑過*/
        protected function leftRollOver       ( event:Event ):void {
            //trace ( "default rollover action  [ left btn ]");
        }
        /**前滾按鈕滑出*/
        protected function leftRollOut        ( event:Event ):void {
            //trace ( "default rollout action  [ left btn ]");
        }
        /**前滾按鈕點擊*/
        protected function leftClick          ( event:Event ):void {
            //trace ( "default click action  [ left btn ]");
        }
         /**前滾按鈕按下*/
        protected function leftDown           ( event:Event ):void {
            //trace ( "default down action  [ left btn ]");
        }
        /**前滾按鈕松開*/
        protected function leftUp             ( event:Event ):void {
            //trace ( "default up action  [ left btn ]");
        }
         /**前滾按鈕移動*/
        protected function leftLeave          ( event:Event ):void {
            //trace ( "default leave action  [ left btn ]");
        }
        /**前滾按鈕外部釋放*/
        protected function leftReleaseOutSide ( event:Event ):void {
            //trace ( "default release out side action  [ left btn ]");
        }
        
        
        //--------------------------------------------------
        // 向後按鈕
        //--------------------------------------------------
        /**後滾按鈕滑過*/
        protected function rightRollOver      ( event:Event ):void {
            //trace ( "default rollover action  [ right btn ]");
        }
        /**後滾按鈕滑出*/
        protected function rightRollOut       ( event:Event ):void {
            //trace ( "default rollout action  [ right btn ]");
        }
        /**後滾按鈕點擊*/
        protected function rightClick         ( event:Event ):void {
            //trace ( "default click action  [ right btn ]");
        }
         /**前滾按鈕按下*/
        protected function rightDown          ( event:Event ):void {
            //trace ( "default down action  [ right btn ]");
        }
        /**前滾按鈕松開*/
        protected function rightUp            ( event:Event ):void {
            //trace ( "default up action  [ right btn ]");
        }
         /**前滾按鈕移動*/
        protected function rightLeave         ( event:Event ):void {
            //trace ( "default leave action  [ right btn ]");
        }
        /**前滾按鈕外部釋放*/
        protected function rightReleaseOutSide( event:Event ):void {
            //trace ( "default release out side action  [ right btn ]");
        }
        
        //--------------------------------------------------
        // 拖曳按鈕
        //--------------------------------------------------
        /**拖曳條滑過*/
        protected function dragRollOver       ( event:Event ):void {
            //trace ( "default rollover action  [ drag btn ]");
        }
        /**拖曳條滑出*/
        protected function dragRollOut        ( event:Event ):void {
            //trace ( "default rollout action  [ drag btn ]");
        }
        /**拖曳條按下*/
        protected function dragDown           ( event:Event ):void {
           //trace ( "default down action  [ drag btn ]");
        }
        /**拖曳條在自己圖形範圍內鬆開*/
        protected function dragUp             ( event:Event ):void {
            //trace ( "default up action  [ drag btn ]");
        }
        /**拖曳條移動*/
        protected function dragMove           ( event:Event ):void {
            //trace ( "default move action  [ drag btn ]");
        }
        /**拖曳條移出了舞臺*/
        protected function dragLeave          ( event:Event ):void {
            //trace ( "default leave action  [ drag btn ]");
        }
        /**拖曳條在自己圖形範圍外鬆開*/
        protected function dragReleaseOutSide ( event:Event ):void {
            //trace ( "default releaseOutSide action  [ drag btn ]");
        }
        
        
        //--------------------------------------------------
        // 功能設定
        //--------------------------------------------------
        /**直接滾動到指定位置*/
        public function goto                  ( pos:Number   ):void {
            //override
        }
        /**分級緩動單位移動量*/
        public function setEasingUnit         ( unit:Number  ):void {
            //override
        }
        /**設置混動條目按下直到發生移動的延遲 毫秒單位*/
        public function setDelay              ( ms:Number    ):void {
            //override
        }
        /**設置開啓或者關閉拖曳條的坐標糾正功能*/
        public function set canRectifyPosition( able:Boolean ):void {
            _canRectifyPosition = able;
        }
        public function get canRectifyPosition(              ):Boolean {
            return _canRectifyPosition;
        }
        /**是否啓用拖曳條根據目標內容進行縮放*/
        public function set canScaleDrag      ( able:Boolean ):void {
            _canScaleDrag = able;
        }
        public function get canScaleDrag      (              ):Boolean {
            return _canScaleDrag;
        }
        
        //--------------------------------------------------
        // 層級清理設定
        //--------------------------------------------------
        /**清空背景層信息*/
        protected function clearBack          (              ):void {
            backLayer.removeChild ( _back );
            _back = new Sprite ();
            backLayer.addChild ( _back );
        }
        /**清空加速層信息*/
        protected function clearAccelerate    (              ):void {
            accelerateLayer.removeChild ( _accelerate );
            _accelerate = new Sprite ();
            accelerateLayer.addChild ( _accelerate );
        }
        /**清空拖曳臨時層信息*/
        protected function clearTemp      (              ):void {
            tempLayer.removeChild ( _temp );
            _temp = new Sprite ();
            tempLayer.addChild ( _temp );
        }
        /**清空拖曳層信息*/
        protected function clearDrag          (              ):void {
            dragLayer.removeChild ( _drag );
            _drag = new Sprite ();
            dragLayer.addChild ( _drag );
        }
    }//end of class
   
}////////////////////////////////////////////////////////////////////////

[ 本帖最后由 enc0717 于 2007-12-26 10:05 编辑 ]

VerticalScrollBar

复制内容到剪贴板

代码:

package net.purplewind.uicomponents
{/////////////////////////////////////////////////////////////////////////////
   
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import flash.geom.Rectangle;
   
   
    public class VerticalScrollBar extends ScrollBar
    {
        //--------------------------------------------
        // 視覺效應組成
        //--------------------------------------------
        /**向上按鈕形狀*/
        public var ui_up_normal                        :Sprite;
        public var ui_up_select                        :Sprite;
        public var ui_up_press                         :Sprite;
        /**向下按鈕形狀*/
        public var ui_down_normal                      :Sprite;
        public var ui_down_select                      :Sprite;
        public var ui_down_press                       :Sprite;
        /**縱向拖曳按鈕形狀*/
        public var ui_drag_normal                      :Sprite;
        public var ui_drag_select                      :Sprite;
        public var ui_drag_press                       :Sprite;
        /**縱向滾動背景圖形形狀*/
        public var backShape                           :Sprite;
        /**占位圖形*/
        public var hidenShape                          :Sprite;
        
        
        //--------------------------------------------
        // 參量
        //--------------------------------------------
        /**非顯示圖形填充色*/
        protected var fillColor                        :Number;
        /**非顯示圖形填充透明度*/
        protected var fillAlpha                        :Number;
        /**縱向滾動條上邊距*/
        protected var dragTop                          :Number;
        /**縱向滾動條下邊距*/
        protected var dragBottom                       :Number;
        /**上距*/
        protected var _top                             :Number;
        /**左距*/
        protected var _left                            :Number;
        /**下距*/
        protected var _bottom                          :Number;
        /**右距*/
        protected var _right                           :Number;
        /**縱向拖曳條向上可以偏移的單位*/
        protected var _upOffset                        :Number;
        /**縱向拖曳條向下可以偏移的單位*/
        protected var _downOffset                      :Number;
        /**寬度*/
        protected var _w                               :Number;
        /**寬度*/
        protected var _h                               :Number;
        
        public function set w          ( value:Number ):void   {
            _w = value;
        }
        public function get w          (              ):Number {
            return _w;
        }
        public function set h          ( value:Number ):void   {
            _h = value;
        }
        public function get h          (              ):Number {
            return _h;
        }
        public function set top        ( value:Number ):void   {
            _top = value;
            align ();
            update ();
        }
        public function get top        (              ):Number {
            return _top;
        }
        public function set left       ( value:Number ):void   {
            _left = value;
            align ();
            update ();
        }
        public function get left       (              ):Number {
            return _left;
        }
        public function set bottom     ( value:Number ):void   {
            _bottom = value;
            align ();
            update ();
        }
        public function get bottom     (              ):Number {
            return _bottom;
        }
        public function set right      ( value:Number ):void   {
            _right = value;
            align ();
            update ();
        }
        public function get right      (              ):Number {
            return _right;
        }
        public function set upOffset   ( value:Number ):void   {
            _upOffset = value;
        }
        public function get upOffset   (              ):Number {
            return _upOffset;
        }
        public function set downOffset ( value:Number ):void   {
            _downOffset = value;
        }
        public function get downOffset (              ):Number {
            return _downOffset;
        }
        /**覆蓋用戶重設用戶滾動條大小*/
        override public function set height ( value:Number ):void {
            _h = value;
            
            hidenShape.graphics.clear ();
            hidenShape.graphics.beginFill ( fillColor , fillAlpha );
            hidenShape.graphics.drawRect ( 0 , 0 , _w , value );
            hidenShape.graphics.endFill ();
            
            ui_down_normal.y = value - bottom - ui_down_normal.height;
            ui_down_select.y = value - bottom - ui_down_select.height;
            ui_down_press.y = value - bottom - ui_down_press.height;
            downBtn.y = value - bottom - downBtn.height;
            
            dragTop = ui_up_normal.y + ui_up_normal.height + span - upOffset;
            dragBottom = ui_down_normal.y - span + downOffset;
            
        }
        override public function get height ():Number {
            return height;
        }
        override public function set width ( value:Number ):void {
            _w = value;
            align ();
            update ();
        }
        override public function get width():Number {
            return width;
        }
        
        
        //--------------------------------------------
        // 構造方法
        //--------------------------------------------
        
        public function VerticalScrollBar ()
        {
            super ();
            //邊距預設
            _top        = 0;
            _left       = 0;
            _right      = 0;
            _bottom     = 0;
            //拖曳偏移量預設
            _upOffset   = 0;
            _downOffset = 0;
            //拖曳條縱向移動范圍預設
            dragTop     = 0;
            dragBottom  = 0;
            //占位圖形預設
            hidenShape  = new Sprite ();
            _back.addChild(hidenShape);
            //非顯示圖形填充設定
            fillColor   = 0xCCFF00;
            fillAlpha   = 0;
        }
        
        
        
        /**
         * 填充組件實例
         * @return Boolean 是否填充完成
         */
        public function fill ():Boolean {
            if ( ui_up_normal==null || ui_up_select  ==null || ui_up_press  ==null
            || ui_down_normal==null || ui_down_select==null || ui_down_press==null
            || ui_drag_normal==null || ui_drag_select==null || ui_drag_press==null )
            {  
                return false;
            } else {
                dispatchDisplayObjects ();
                return true;
            }
        }
        
        
        //--------------------------------------------
        // 預備區域
        //--------------------------------------------
        /**
         * 屬性刷新
         */
        protected function update ():void {
            dragTop = ui_up_normal.y + ui_up_normal.height + span - upOffset;
            dragBottom = ui_down_normal.y - span + downOffset;
        }
        /**
         * 安排元素位置
         */
        protected function align ():void {
            
            ui_up_normal.width   = _w - _left - _right;
            ui_up_select.width   = _w - _left - _right;
            ui_up_press.width    = _w - _left - _right;
            upBtn.width          = _w - _left - _right;
            ui_down_normal.width = _w - _left - _right;
            ui_down_select.width = _w - _left - _right;
            ui_down_press.width  = _w - _left - _right;
            downBtn.width        = _w - _left - _right;
            ui_drag_normal.width = _w - _left - _right;
            ui_drag_select.width = _w - _left - _right;
            ui_drag_press.width  = _w - _left - _right;
            dragBtn.width        = _w - _left - _right;
            
            
            ui_up_normal  .x = _left;
            ui_up_normal  .y = _top;
            ui_up_select  .x = _left;
            ui_up_select  .y = _top;
            ui_up_press   .x = _left;
            ui_up_press   .y = _top;
            //down
            ui_down_normal.x = _left;
            ui_down_normal.y = hidenShape.height - ui_down_normal.height - bottom;
            ui_down_select.x = _left;
            ui_down_select.y = hidenShape.height - ui_down_normal.height - bottom;
            ui_down_press .x = _left;
            ui_down_press .y = hidenShape.height - ui_down_normal.height - bottom;
            //drag
            ui_drag_normal.x = _left;
            ui_drag_normal.y = _top + ui_up_normal.height +span - _upOffset;
            ui_drag_select.x = _left;
            ui_drag_select.y = _top + ui_up_normal.height +span - _upOffset;
            ui_drag_press .x = _left;
            ui_drag_press .y = _top + ui_up_normal.height +span - _upOffset;
            
            upBtn  .x = _left;
            upBtn  .y = _top;
            //down
            downBtn.x = _left;
            downBtn.y = hidenShape.height - ui_down_normal.height - bottom;
            //drag
            dragBtn.x = _left;
            dragBtn.y = _top + ui_up_normal.height + span - _upOffset;
        }
        /**
         * 分派圖形顯示 元素
         */
        protected function dispatchDisplayObjects ():void {
            _w = _left+ui_up_normal.width+_right;
            _h = _top+ui_up_normal.height-upOffset-downOffset+ui_drag_normal.height+ui_down_normal.height+_bottom+2*span;
            align  ();     
            update ();
            hidenShape.graphics.clear();
            hidenShape.graphics.beginFill ( fillColor , fillAlpha );
            hidenShape.graphics.drawRect ( 0,0,_w,_h);
            //加入到現實列表
            drawButtons ();
            _back.addChild ( ui_up_normal );
            ui_up_select.visible = false;
            ui_up_press.visible  = false;
            _back.addChild ( ui_up_select );
            _back.addChild ( ui_up_press  );
            //
            _back.addChild ( ui_down_normal );
            ui_down_select.visible = false;
            ui_down_press.visible  = false;
            _back.addChild ( ui_down_select );
            _back.addChild ( ui_down_press  );
            //
            _back.addChild ( ui_drag_normal );
            ui_drag_select.visible = false;
            ui_drag_press.visible  = false;
            _back.addChild ( ui_drag_select );
            _back.addChild ( ui_drag_press  );
            
        }
        /**
        * 繪制背景
        */
        protected function drawBackground ():void {
            //clear
            backLayer.removeChild ( _back );
            _back = new Sprite ();
            backLayer.addChild ( _back );
            //draw background
            _back.addChild ( backShape );
        }
        /**
            * 繪制按鈕
         */
        protected function drawButtons ():void {
            //clear
            btnsLayer.removeChild ( _btns );
            _btns   = new Sprite ();
            //draw buttons
            upBtn   = new Sprite ();
            downBtn = new Sprite ();
            dragBtn = new Sprite ();
            upBtn.graphics.beginFill   ( fillColor , fillAlpha );
            downBtn.graphics.beginFill ( fillColor , fillAlpha );
            dragBtn.graphics.beginFill ( fillColor , fillAlpha );
            upBtn.graphics.drawRect   ( 0 , 0 , ui_up_normal.width   , ui_up_normal.height   );
            downBtn.graphics.drawRect ( 0 , 0 , ui_down_normal.width , ui_down_normal.height );
            dragBtn.graphics.drawRect ( 0 , 0 , ui_drag_normal.width , ui_drag_normal.height );
            //
            //up
            _btns.addChild ( upBtn   );
            _btns.addChild ( downBtn );
            _btns.addChild ( dragBtn );
            //draw buttons complete
            btnsLayer.addChild ( _btns );
            
            dispatchListenersForUp   ();
            dispatchListenersForDown ();
            dispatchListenersForDrag ();
        }
        /**
         * 添加向上按鈕事件分派
         */
        protected function dispatchListenersForUp ():void {
            var hasClickEvent:Boolean = upBtn.hasEventListener ( MouseEvent.CLICK      );
            var hasOverEvent:Boolean  = upBtn.hasEventListener ( MouseEvent.ROLL_OVER  );
            var hasOutEvent:Boolean   = upBtn.hasEventListener ( MouseEvent.ROLL_OUT   );
            var hasUpEvent:Boolean = upBtn.hasEventListener    ( MouseEvent.MOUSE_UP   );
            var hasDownEvent:Boolean = upBtn.hasEventListener  ( MouseEvent.MOUSE_DOWN );
            var hasLeaveEvent:Boolean = stage.hasEventListener ( Event.MOUSE_LEAVE     );
            if ( hasClickEvent ) {
                upBtn.removeEventListener ( MouseEvent.CLICK     , upClick    );
            }
            if ( hasOverEvent ) {
                upBtn.removeEventListener ( MouseEvent.ROLL_OVER , upRollOver );
            }
            if ( hasOutEvent ) {
                upBtn.removeEventListener ( MouseEvent.ROLL_OUT  , upRollOut  );
            }
            if ( hasUpEvent ) {
                upBtn.removeEventListener ( MouseEvent.MOUSE_UP   , upUp      );
                
            }
            if ( hasDownEvent ) {
                upBtn.removeEventListener ( MouseEvent.MOUSE_DOWN , upDown );
            }
            upBtn.addEventListener ( MouseEvent.CLICK      , upClick    );
            upBtn.addEventListener ( MouseEvent.ROLL_OVER  , upRollOver );
            upBtn.addEventListener ( MouseEvent.ROLL_OUT   , upRollOut  );
            upBtn.addEventListener ( MouseEvent.MOUSE_UP   , upUp       );
            upBtn.addEventListener ( MouseEvent.MOUSE_DOWN , upDown     );
        }
        /**
         * 添加向下按鈕事件分派
         */
        protected function dispatchListenersForDown ():void {
            var hasClickEvent:Boolean = downBtn.hasEventListener ( MouseEvent.CLICK );
            var hasOverEvent:Boolean  = downBtn.hasEventListener ( MouseEvent.ROLL_OVER  );
            var hasOutEvent:Boolean   = downBtn.hasEventListener ( MouseEvent.ROLL_OUT   );
            var hasUpEvent:Boolean    = downBtn.hasEventListener ( MouseEvent.MOUSE_UP   );
            var hasDownEvent:Boolean  = downBtn.hasEventListener ( MouseEvent.MOUSE_DOWN );
            var hasLeaveEvent:Boolean = stage.hasEventListener ( Event.MOUSE_LEAVE       );
            if ( hasClickEvent ) {
                downBtn.removeEventListener ( MouseEvent.CLICK     , downClick    );
            }
            if ( hasOverEvent ) {
                downBtn.removeEventListener ( MouseEvent.ROLL_OVER , downRollOver );
            }
            if ( hasOutEvent ) {
                downBtn.removeEventListener ( MouseEvent.ROLL_OUT  , downRollOut  );
            }
            if ( hasUpEvent ) {
                downBtn.removeEventListener ( MouseEvent.MOUSE_UP  , downUp       );
                
            }
            if ( hasDownEvent ) {
                downBtn.removeEventListener ( MouseEvent.MOUSE_DOWN , downDown    );
            }
            downBtn.addEventListener ( MouseEvent.CLICK      , downClick    );
            downBtn.addEventListener ( MouseEvent.ROLL_OVER  , downRollOver );
            downBtn.addEventListener ( MouseEvent.ROLL_OUT   , downRollOut  );
            downBtn.addEventListener ( MouseEvent.MOUSE_UP   , downUp       );
            downBtn.addEventListener ( MouseEvent.MOUSE_DOWN , downDown     );
        }
        /**
         * 添加拖曳條事件分派
         */
        protected function dispatchListenersForDrag ():void {
            var hasUpEvent:Boolean    = dragBtn.hasEventListener ( MouseEvent.MOUSE_UP   );
            var hasDownEvent:Boolean  = dragBtn.hasEventListener ( MouseEvent.MOUSE_DOWN );
            var hasMoveEvent:Boolean  = dragBtn.hasEventListener ( MouseEvent.MOUSE_MOVE );
            if ( hasUpEvent ) {
                dragBtn.removeEventListener ( MouseEvent.MOUSE_UP   , dragUp   );
            }
            if ( hasDownEvent ) {
                dragBtn.removeEventListener ( MouseEvent.MOUSE_DOWN , dragDown );
            }
            if ( hasMoveEvent ) {
                dragBtn.removeEventListener ( MouseEvent.MOUSE_MOVE , dragMove );
            }
            dragBtn.addEventListener ( MouseEvent.ROLL_OVER  , dragRollOver );
            dragBtn.addEventListener ( MouseEvent.ROLL_OUT   , dragRollOut  );
            dragBtn.addEventListener ( MouseEvent.MOUSE_UP   , dragUp       );
            dragBtn.addEventListener ( MouseEvent.MOUSE_DOWN , dragDown     );
        }
        
        //--------------------------------------------
        // 鼠標事件處理器
        //--------------------------------------------
        /**上滾按鈕點擊*/
        override protected function upClick            ( event:Event ):void {
            //override
        }
        /**下滾按鈕點擊*/
        override protected function downClick          ( event:Event ):void {
            //override
        }
        /**上滾按鈕滑過*/
        override protected function upRollOver         ( event:Event ):void {
            super.upRollOver ( event );
            ui_up_select.visible  = true;
        }
        /**上滾按鈕滑出*/
        override protected function upRollOut          ( event:Event ):void {
            super.upRollOut ( event );
            ui_up_select.visible  = false;
        }
        /**上滾按鈕按下*/
        override protected function upDown             ( event:Event ):void {
            super.upDown ( event );
            ui_up_press.visible = true;
            clearTemp ();
            var temp:Sprite = new Sprite ();
            temp.x = globalToLocal(new Point(0,0)).x;
            temp.y = globalToLocal(new Point(0,0)).y;
            temp.graphics.beginFill ( fillColor , fillAlpha );
            temp.addEventListener ( MouseEvent.MOUSE_UP , upReleaseOutSide );
            temp.graphics.drawRect ( 0,0,stage.stageWidth , stage.stageHeight );            
            stage.addEventListener(Event.MOUSE_LEAVE,upLeave);
            _temp.addChild ( temp );
        }
        /**上滾按鈕移動*/
        override protected function upLeave            ( event:Event ):void {
            super.upLeave ( event );
            upUp ( event );
            stage.removeEventListener ( Event.MOUSE_LEAVE , upLeave );
        }
        /**上滾按鈕外部釋放*/
        override protected function upReleaseOutSide   ( event:Event ):void {
            super.upReleaseOutSide ( event );
            clearTemp ();
            ui_up_press.visible = false;
            event.target.removeEventListener ( MouseEvent.MOUSE_UP , upReleaseOutSide );    
        }
        /**上滾按鈕松開*/
        override protected function upUp               ( event:Event ):void {
            super.upUp ( event );
            ui_up_press.visible = false;
            try {
                stage.removeEventListener ( Event.MOUSE_LEAVE , dragLeave );
            } catch ( e:Error ) {}
            clearTemp ();
        }
        //////////////////////////////////////////////////
        /**下滾按鈕滑過*/
        override protected function downRollOver       ( event:Event ):void {
            super.downRollOver ( event );
            ui_down_select.visible  = true;
        }
        /**下滾按鈕滑出*/
        override protected function downRollOut        ( event:Event ):void {
            super.downRollOut( event );
            ui_down_select.visible  = false;
        }
        /**下滾按鈕按下*/
        override protected function downDown           ( event:Event ):void {
            super.downDown ( event );
            ui_down_press.visible = true;
            clearTemp ();
            var temp:Sprite = new Sprite ();
            temp.x = globalToLocal(new Point(0,0)).x;
            temp.y = globalToLocal(new Point(0,0)).y;
            temp.graphics.beginFill ( fillColor , fillAlpha );
            temp.graphics.drawRect ( 0,0,stage.stageWidth , stage.stageHeight );
            temp.addEventListener ( MouseEvent.MOUSE_UP , downReleaseOutSide );
            stage.addEventListener(Event.MOUSE_LEAVE,downLeave);
            _temp.addChild ( temp );
        }
        /**下滾按鈕松開*/
        override protected function downUp             ( event:Event ):void {
            super.downUp ( event );
            ui_down_press.visible = false;
            try {
                stage.removeEventListener ( Event.MOUSE_LEAVE , downLeave );
            } catch ( e:Error ) {}
            clearTemp ();
        }
        /**下滾按鈕移動*/
        override protected function downLeave           ( event:Event ):void {
            super.downLeave ( event );
            downUp ( event );
            stage.removeEventListener ( Event.MOUSE_LEAVE , downLeave );
        }
        override protected function downReleaseOutSide ( event:Event ):void {
            super.downReleaseOutSide ( event );
            clearTemp ();
            ui_down_press.visible = false;
            event.target.removeEventListener ( MouseEvent.MOUSE_UP , downReleaseOutSide );
        }
        //////////////////////////////////////////////////
        /**拖曳條滑過*/
        override protected function dragRollOver       ( event:Event ):void {
            super.dragRollOver ( event );
            ui_drag_select.visible = true;
        }
        /**拖曳條滑出*/
        override protected function dragRollOut        ( event:Event ):void {
            super.dragRollOut ( event );
            ui_drag_select.visible = false;
        }
        /**拖曳條按下*/
        override protected function dragDown           ( event:Event ):void {
            super.dragDown ( event );
            ui_drag_press.visible = true;
            //
            var temp:Sprite = new Sprite ();
            temp.x = globalToLocal(new Point(0,0)).x;
            temp.y = globalToLocal(new Point(0,0)).y;
            temp.graphics.beginFill ( fillColor , fillAlpha );
            temp.graphics.drawRect ( 0,0,stage.stageWidth  , stage.stageHeight  );
            temp.addEventListener  ( MouseEvent.MOUSE_UP   , dragReleaseOutSide );
            temp.addEventListener  ( MouseEvent.MOUSE_MOVE , dragMove           );
            stage.addEventListener ( Event.MOUSE_LEAVE     , dragLeave          );
            _temp.addChild ( temp );
            //
            var area:Rectangle = new Rectangle ( _left ,  dragTop , 0 , Math.abs ( dragBottom-dragBtn.height-dragTop ) );
            dragBtn.startDrag ( false ,  area );
        }
        /**拖曳條在自己圖形範圍內鬆開*/
        override protected function dragUp             ( event:Event ):void {
            super.dragUp ( event );
            ui_drag_press.visible = false;
            try {
                stage.removeEventListener ( Event.MOUSE_LEAVE , dragLeave );
            } catch ( e:Error ) {}
            clearTemp ();
            dragBtn.stopDrag ();
            ui_drag_normal.x = dragBtn.x;
            ui_drag_select.x = dragBtn.x;
            ui_drag_press. x = dragBtn.x;
            ui_drag_normal.y = dragBtn.y;
            ui_drag_select.y = dragBtn.y;
            ui_drag_press. y = dragBtn.y;
        }
        /**拖曳條移動*/
        override protected function dragMove           ( event:Event ):void {
            super.dragMove ( event );
            ui_drag_normal.x = dragBtn.x;
            ui_drag_select.x = dragBtn.x;
            ui_drag_press. x = dragBtn.x;
            ui_drag_normal.y = dragBtn.y;
            ui_drag_select.y = dragBtn.y;
            ui_drag_press. y = dragBtn.y;
        }
        /**拖曳條移出了舞臺*/
        override protected function dragLeave          ( event:Event ):void {
            super.dragLeave ( event );
            dragUp ( event );
            stage.removeEventListener ( Event.MOUSE_LEAVE , dragLeave );
            dragBtn.stopDrag ();
        }
        /**拖曳條在自己圖形範圍外鬆開*/
        override protected function dragReleaseOutSide ( event:Event ):void {
            super.dragReleaseOutSide ( event );
            clearTemp ();
            ui_drag_press.visible = false;
            event.target.removeEventListener ( MouseEvent.MOUSE_UP , dragReleaseOutSide );
            dragBtn.stopDrag ();
        }
    }//end class
   
}/////////////////////////////////////////////////////////////////////////////

[ 本帖最后由 enc0717 于 2007-12-26 10:06 编辑 ]

這幾天比較忙，可能周末才能更新上來了。
謝謝大家的關注。特此送給大家一套Flex 我原創的skin





[ 本帖最后由 enc0717 于 2007-12-19 22:59 编辑 ]

ok 到目前為止。滾動條還處于脫離應用的范圍
本身屬于滾動條的基本功能已經具備。

附上目前為止效果。
======================================



源文件
======================================



12月26日連載



======================================
待續

[ 本帖最后由 enc0717 于 2007-12-26 10:13 编辑 ]

占位占位


TMD，過年前忙死了，過年后繼續。^^

[ 本帖最后由 enc0717 于 2008-1-23 09:48 编辑 ]

預訂3月3日一次性更新全部寫完。

現在工作的事情很多，竟然很少有完整的私人時間，
寫作這種事情，只要有空，我一定繼續下去的

[ 本帖最后由 enc0717 于 2008-2-12 13:46 编辑 ]

你们啥时候能普及简体中文啊？

占位先 .... 不错的说

看不懂....感觉你是高手

支持小兄弟原创，哈哈

LZ的UML图片是用什么工具做的

Mark一下，不错

UML是用一個叫做gModeler的東西，你一搜就知道了。

问一下楼主，版主，
你这个样式皮肤，放在FLEX1.5中行不行，
如果1.5中想实现类似的效果有办法么？
还我是想在1.5中自定义滚动条样式!

楼主好强大的说!

支持!!!
顶!!!!!!!

引用:

原帖由 falsh61 于 2007-12-27 15:02 发表
问一下楼主，版主，
你这个样式皮肤，放在FLEX1.5中行不行，
如果1.5中想实现类似的效果有办法么？
还我是想在1.5中自定义滚动条样式!

抱歉哦。1.5我真的是不知道。我用過的最低版本是FLEX2

社会太浮躁，要静下心才能研究

好的 就要顶起来 哪怕是200多天

支持一下

...写这篇文章的时候工作上门找我，因此后续的我都没有时间继续写下去，实在惭愧。
不过明年一定会写，因为今年之后我会辞职在家做些学问。我也会不实的送一些东西给大家。

很好,顶起,不过我个人还是喜欢一些game教程,因为本人是做游戏的,目前还在实习中,需要好好补充下营养...

支持一下楼主  很敬业滴说.很敬佩像楼主这样做学问不计较个人得失的人.