UIFlow for Flash

這次來練習一下仿 iPhone 的 UIFlow Flash 版

轉載請註明出處

製作羅輯：
把所有的圖片丟到一個 Sprite 裡，並依序排列
接下時，記錄當下的滑鼠座標
再用 EnterFrame 不斷的記錄現在的座標和上一個 FPS 的座標差
丟給主要的 Sprite.x 屬性。
放開後，判斷使用者是否拉動超過一半，移動到下一個或上一個，
當托到第一個或最後一個時，拉動的距離要越來越慢。
IPhoneScrollTween.as

/**
 * @author milkmidi 
 * @version 1.0.1
 * @date created 2011/06/01
 */
package milkmidi.behavior {  

 import com.greensock.TweenMax;
 import com.greensock.easing.Cubic;
 
 import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.display.Stage;
 import flash.display.StageQuality;
 import flash.events.Event;
 import flash.events.EventDispatcher;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 
 /**
  * IPhone scroll behavior
  */
 public class IPhoneScrollTween {  
  
        private static var DECAY    :Number = 0.98;    
        private static var BOUNCING_SPRINGESS :Number = 0.45;
  private static var SNAP_VELOCITY  :Number = 40;  
  
  private var mStage:Stage;
  public function get stage():Stage { return mStage; }  
  
  public var onChange:Function/*int*/;
  
        private var mLastMotionX  :int = 0;   
  private var mContainer   :Sprite;
  private var mCurrentScreen  :int = 0;
  private var mCount    :uint;
  private var mWidth    :int;
  private var mDeltaX    :int = 0;
  private var mTweenMax   :TweenMax;
  //__________________________________________________________________________________ Constructor
  public function IPhoneScrollTween(pContainer:Sprite, pWidth:int)  {         
   this.mWidth = pWidth;
   this.mContainer = pContainer;
   this.mStage = mContainer.stage;  
   this.mCount = mContainer.numChildren;
   this.mContainer.addEventListener(MouseEvent.MOUSE_DOWN , _mouseDownHandler);  
  }
  private function _mouseDownHandler(e:MouseEvent):void {
   stage.quality = StageQuality.LOW;    
   this.mLastMotionX =  stage.mouseX;
            stage.addEventListener(Event.ENTER_FRAME, _stageMouseMoveHandler);  
   stage.addEventListener(MouseEvent.MOUSE_UP , _stageMouseUpHandler);
  }   
  private function calculateScroll():void {
   //trace(mDeltaX , SNAP_VELOCITY,mCurrentScreen)
   if (mDeltaX > SNAP_VELOCITY && mCurrentScreen < ( mCount - 1) ) {
    snapToScreen(mCurrentScreen + 1);
   } else if (mDeltaX < -SNAP_VELOCITY && mCurrentScreen > 0) {
    snapToScreen(mCurrentScreen - 1);
   } else {
    snapToDestination();
   } 
  }
  private function snapToDestination():void {
   var _whichScreen:int = ( mContainer.x * -1 + (mWidth / 2)) / mWidth;   
   snapToScreen(_whichScreen);
  }
  public function snapToScreen(pWhichScreen:int):void {
   mCurrentScreen = pWhichScreen;
   trace("snapToScreen()", pWhichScreen);    
   var _newX :int = mCurrentScreen * mWidth * -1; 
   var _time :Number = Math.abs( _newX - mContainer.x) * 2 / 1000;
   if (mTweenMax!=null) {
    mTweenMax.kill();
   }
   mTweenMax = TweenMax.to(  mContainer, _time, 
   {
    x   :_newX,
    onComplete :function ():void {
     stage.quality = StageQuality.HIGH; 
    }
   } );
   if (onChange != null)
    onChange.apply( this, [mCurrentScreen]); 
   
   
   for (var i:int = 0; i < mCount; i++) {
    var _child:DisplayObject = mContainer.getChildAt(i);
    var _dis:int =Math.abs(mCurrentScreen - i);    
    _child.visible = _dis >= 2 ? false : true;    
   }   
  }
  private function getWidth():int { return mContainer.width;  }
  
 
  
  private function _stageMouseUpHandler(e:MouseEvent):void {   
   stage.quality = StageQuality.BEST;
   stage.removeEventListener(MouseEvent.MOUSE_UP , _stageMouseUpHandler);
   stage.removeEventListener(Event.ENTER_FRAME, _stageMouseMoveHandler);  
   calculateScroll();
  }
  private function _stageMouseMoveHandler(e:Event):void {
      mDeltaX  =  mLastMotionX - stage.mouseX;   
   mLastMotionX = stage.mouseX; 
   if (mContainer.x > 0) {    
    mDeltaX *= BOUNCING_SPRINGESS;
   }else if (mContainer.x < (getWidth() - mWidth) * -1) {    
    mDeltaX *= BOUNCING_SPRINGESS;
   }
   mContainer.x -= mDeltaX;
  }
 

 }//__________________________________________________________________________________ End Class
}//__________________________________________________________________________________ End Package

線上 Demo

實際丟到手機上測，還真的有幾分像。
SourceCodeDownload