Tweenerの隠しプロパティ[ transitionParams ]

forked:0
favorite:27
lines:313
license : MIT License
modified : 2009-08-30 18:54:46

Embed: Tweet

package  
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import caurina.transitions.Tweener;
	
	[ SWF( width = "465" , height = "465" , backgroundColor = "0xFFFFFF" , frameRate = "60" ) ]
	
	public class Main extends Sprite
	{
		private var _sq:Shape;
		private var _cr:Shape;
		
		private var _buttons:SimpleRadioButton;
		private var _timeSlider:SimpleSlider;
		private var _periodSlider:SimpleSlider;
		private var _amplitudeSlider:SimpleSlider;
		private var _overshootSlider:SimpleSlider;
		
		private var _time:Number = 2;
		private var _period:Number = 600;
		private var _amplitude:Number = 0;
		private var _overshoot:Number = 1.7;
		private var _transition:String = "easeOutElastic";
		 
		public function Main() 
		{
			graphics.lineStyle( 1.0 , 0x999999 , 1.0 );
			graphics.moveTo( 60 , 160 );
			graphics.lineTo( 60 , 200 );
			graphics.moveTo( 385 , 160 );
			graphics.lineTo( 385 , 200 );
			graphics.drawCircle( 232 , 80 , 40 );
			
			_sq = new Shape();
			_sq.graphics.beginFill( 0x000000 , 0.8 );
			_sq.graphics.drawRect( 0 , 0 , 20 , 20 );
			_sq.blendMode = "invert";
			_sq.y = 170;
			addChild( _sq );
			
			_cr = new Shape();
			_cr.graphics.beginFill( 0x000000 , 0.8 );
			_cr.graphics.drawCircle( 0 , 0 , 40 );
			_cr.blendMode = "invert";
			_cr.x = 232;
			_cr.y = 80;
			addChild( _cr );
			
			_buttons = new SimpleRadioButton();
			_buttons.x = 140;
			_buttons.y = 220;
			_buttons.addButton( "easeOutElastic" , 0 , 0 );
			_buttons.addButton( "easeOutBack" , 110 , 0 );
 			addChild( _buttons );
			
			_timeSlider = new SimpleSlider();
			_timeSlider.init( stage , "time" , 5 , 200 , _time , 1 );
			_timeSlider.x = 180;
			_timeSlider.y = 265;
			addChild( _timeSlider );
			
			_periodSlider = new SimpleSlider();
			_periodSlider.init( stage , "transitionParams : period\n(only Elastic easing)" , 1000 , 200 , _period );
			_periodSlider.x = 180;
			_periodSlider.y = 305;
			addChild( _periodSlider );
			
			_amplitudeSlider = new SimpleSlider();
			_amplitudeSlider.init( stage , "transitionParams : amplitude\n(only Elastic easing)" , 10 , 200 , _amplitude , 1 );
			_amplitudeSlider.x = 180;
			_amplitudeSlider.y = 340;
			addChild( _amplitudeSlider );
			
			_overshootSlider = new SimpleSlider();
			_overshootSlider.init( stage , "transitionParams : overshoot\n(only Back easing)" , 10 , 200 , _overshoot , 1 );
			_overshootSlider.x = 180;
			_overshootSlider.y = 375;
			addChild( _overshootSlider );
			
			var startButton:SimpleButton = new SimpleButton( "Start Tween" );
			startButton.x = 185;
			startButton.y = 410;
			addChild( startButton );
			
			_buttons.addEventListener( SimpleRadioButton.SELECT_CHANGE , setParams );
			_timeSlider.addEventListener( SimpleSlider.HANDLE_MOVE , setParams );
			_periodSlider.addEventListener( SimpleSlider.HANDLE_MOVE , setParams );
			_amplitudeSlider.addEventListener( SimpleSlider.HANDLE_MOVE , setParams );
			_overshootSlider.addEventListener( SimpleSlider.HANDLE_MOVE , setParams );
			startButton.addEventListener( MouseEvent.CLICK , startTween );
			
			doTween();
		}
		
		private function setParams( e:Event ):void 
		{
			switch ( e.target )
			{
				case _buttons            : _transition = e.target.selectedName; break;
				case _timeSlider         : _time        = e.target.getValue( 1 ); break;
				case _periodSlider       : _period      = e.target.getValue(); break;
				case _amplitudeSlider  : _amplitude  = e.target.getValue( 1 ); break;
				case _overshootSlider : _overshoot = e.target.getValue( 1 ); break;
			}
		}
		
		private function doTween():void
		{
			_sq.x = 60;
			_cr.scaleX = _cr.scaleY = 0;
			if ( !_time ) _time = 0.0000001;
			
			Tweener.addTween( _sq , { x : 385 , time : _time , transition : _transition , onComplete : doTween ,
				transitionParams : { period : _period , amplitude : _amplitude , overshoot : _overshoot } } );
				
			Tweener.addTween( _cr , { scaleX : 1 , scaleY : 1 , time : _time , transition : _transition , onComplete : doTween ,
				transitionParams : { period : _period , amplitude : _amplitude , overshoot : _overshoot } } );
		}
		
		private function startTween( e:MouseEvent ):void
		{
			Tweener.removeAllTweens();
			doTween();
		}
	}
}

import flash.display.Shape;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextField;
import flash.text.TextFormat;

class SimpleSlider extends Sprite
{
	static public var HANDLE_MOVE:String = "handle_move";
	
	private var _stage:Stage;
	private var _tf_value:TextField;
	
	public var handle:Sprite;
	public var bar:Shape;
	public var value:Number;
	public var valueMax:Number;
	public var valueDecimals:Number;
	public var ratio:Number;
	
	public function SimpleSlider()
	{
		
	}
	
	public function init( stage:Stage , valueName:String , valueMax:Number = 1 , barLength:Number = 200 , startValue:Number = 0 , valueDecimals:int = 0 ):void
	{
		// var
		_stage = stage;
		this.valueMax = valueMax;
		this.valueDecimals = valueDecimals;
		ratio = startValue / valueMax;
		
		// handle
		handle = new Sprite();
		handle.buttonMode = true;
		handle.graphics.beginFill( 0x333333 , 1.0 );
		handle.graphics.drawRect( -3 , -7 , 6 , 14 );
		handle.x = barLength * ratio;
		
		// bar 
		bar = new Shape();
		bar.graphics.lineStyle( 1.0 , 0xBBBBBB , 1.0 );
		bar.graphics.beginFill( 0xCCCCCC , 1.0 );
		bar.graphics.drawRect( 0 , -2 , barLength , 4 );
		
		// value name
		var format:TextFormat = new TextFormat();
		format.align = "right";
		format.leading = -2;
		var tf_name:TextField = new TextField();
		tf_name.selectable = false;
		tf_name.autoSize = "right";
		tf_name.textColor = 0x666666;
		tf_name.defaultTextFormat = format;
		tf_name.text = valueName;
		tf_name.x = -tf_name.width - 6;
		tf_name.y = -10;
		
		// now value
		_tf_value = new TextField();
		_tf_value.selectable = false;
		_tf_value.autoSize = "left";
		_tf_value.textColor = 0x666666;
		_tf_value.text = String( startValue );
		_tf_value.x = bar.width + 6;
		_tf_value.y = -10;
		
		// add
		addChild( bar );
		addChild( handle );
		addChild( tf_name );
		addChild( _tf_value );
		
		// event
		handle.addEventListener( MouseEvent.MOUSE_DOWN , handleDownHandler );
	}
	
	
	/*
	 * ------------------------------------------------------------
	 * MouseEvent Handler
	 * ------------------------------------------------------------
	 */
	
	private function handleDownHandler( e:MouseEvent ):void 
	{
		// event
		_stage.addEventListener( MouseEvent.MOUSE_UP , handleUpHandler );
		_stage.addEventListener( MouseEvent.MOUSE_MOVE , handleMoveHandler );
		handle.removeEventListener( MouseEvent.MOUSE_DOWN , handleDownHandler );
		
		// start drag
		handle.startDrag( false , new Rectangle( 0 , 0 , bar.width , 0 ) );
	}
	
	
	private function handleUpHandler( e:MouseEvent ):void 
	{
		// event
		handle.addEventListener( MouseEvent.MOUSE_DOWN , handleDownHandler );
		_stage.removeEventListener( MouseEvent.MOUSE_UP , handleUpHandler );
		_stage.removeEventListener( MouseEvent.MOUSE_MOVE , handleMoveHandler );
		
		// stop drag
		handle.stopDrag();
	}
	
	
	private function handleMoveHandler( e:MouseEvent ):void 
	{
		ratio = handle.x / bar.width;
		value = ratio * valueMax;
		_tf_value.text = String( getRoundNumver( value , valueDecimals ) );
		
		dispatchEvent( new Event( SimpleSlider.HANDLE_MOVE ) );
	}
	
	
	/*
	 * ------------------------------------------------------------
	 * Get Functoin
	 * ------------------------------------------------------------
	 */
	
	// get value
	public function getValue( decimals:int = 0 ):Number
	{
		return getRoundNumver( value , decimals );
	}
	
	
	// get ratio
	public function getRatio( decimals:int = 1 ):Number
	{
		return getRoundNumver( ratio , decimals );
	}
	
	
	// get rounded numver
	private function getRoundNumver( num:Number , decimals:int ):Number
	{
		var digit:int = Math.pow( 10 , decimals );
		return Math.round( num * digit ) / digit;
	}
}

import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

class SimpleRadioButton extends Sprite
{
	static public var SELECT_CHANGE:String = "select_change";
	
	private var _selectObj:Shape;
	
	public var numButtons:int = 0;
	public var selectedName:String;
	public var selectedId:int;
	
	public function SimpleRadioButton() 
	{
		_selectObj = new Shape();
		_selectObj.graphics.beginFill( 0x333333 , 1.0 );
		_selectObj.graphics.drawCircle( 5 , 5 , 3 );
	}
	
	public function addButton( buttonName:String , buttonX:Number , buttonY:Number ):void
	{
		numButtons ++;
		
		if ( !numChildren )
		{
			addChild( _selectObj );
			selectedName = buttonName;
			selectedId = 1;
		}
		
		var btn:RadioButton = new RadioButton( numButtons , buttonName );
		btn.x = buttonX;
		btn.y = buttonY;
		btn.addEventListener( MouseEvent.CLICK , buttonClickHandler );
		
		addChild( btn );
	}
	
	private function buttonClickHandler( e:MouseEvent ):void 
	{
		if ( selectedId == e.target.id ) return;
		
		selectedName = e.target.name;
		selectedId = e.target.id;
		_selectObj.x = e.target.x;
		_selectObj.y = e.target.y;
		
		dispatchEvent( new Event( SimpleRadioButton.SELECT_CHANGE ) );
	}
}

import flash.display.Sprite;
import flash.text.TextField;

class RadioButton extends Sprite
{
	public var id:int;
	
	public function RadioButton( id:int , buttonName:String )
	{
		this.id = id;
		name = buttonName;
		
		buttonMode = true;
		graphics.lineStyle( 1.0 , 0x999999 , 1.0 );
		graphics.drawCircle( 5 , 5 , 5 );
		
		var tf_name:TextField = new TextField();
		tf_name.mouseEnabled = false;
		tf_name.selectable = false;
		tf_name.autoSize = "left";
		tf_name.textColor = 0x666666;
		tf_name.text = buttonName;
		tf_name.x = 13;
		tf_name.y = -5;
		
		addChild( tf_name );
		graphics.lineStyle( 1.0 , 0xFF0000 , 0 );
		graphics.beginFill( 0xFF0000 , 0 );
		graphics.drawRect( -5 , -4 , width + 8 , height );
	}
}

import flash.display.Shape;
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.geom.Matrix;

class SimpleButton extends Sprite
{
	private var _overObj:Shape;
	
	public function SimpleButton( buttonName:String ) 
	{
		buttonMode = true;
		
		var tf_name:TextField = new TextField();
		tf_name.mouseEnabled = false;
		tf_name.selectable = false;
		tf_name.autoSize = "left";
		tf_name.textColor = 0xFFFFFF;
		tf_name.text = buttonName;
		tf_name.x = 21;
		tf_name.y = 2;
		addChild( tf_name );
		
		var matrix:Matrix = new Matrix();
		matrix.createGradientBox( 1 , 24 , Math.PI / 2 );
		graphics.beginGradientFill( "linear" , [ 0x333333 , 0x000000 ] , [ 1.0 , 1.0 ] , [ 0 , 255 ] , matrix );
		graphics.drawRoundRect( 0 , 0 , tf_name.width + 40 , 24 , 6 );
		
		_overObj = new Shape();
		_overObj.graphics.beginFill( 0xFFFFFF , 0.15 );
		_overObj.graphics.drawRoundRect( 0 , 0 , tf_name.width + 40 , 24 , 6 );
		
		addEventListener( MouseEvent.ROLL_OVER , overHandler );
	}
	
	private function overHandler( e:MouseEvent ):void 
	{
		addChild( _overObj );
		addEventListener( MouseEvent.ROLL_OUT , outHandler );
	}
	
	private function outHandler( e:MouseEvent ):void 
	{
		removeChild( _overObj );
		removeEventListener( MouseEvent.ROLL_OUT , outHandler );
	}
}

Code Fullscreen

Preview Fullscreen