モーショントゥイーン

(サンプル一覧を表示する)

FlashDevelop を使って、モーショントゥイーンのテストをしてみました。

プロジェクトをそのまま FlashDevelop で開くと、ビルドはできますが、
mx.* 系のパッケージのコード補完が利きません。

グローバルクラスパスに、
C:\[flex_sdk_path]\frameworks\projects\framework\src
([flex_sdk_path] の中は環境に合わせて書き換えてください。)

を追加してから編集してみてください。
Flash の実行画面
モーショントゥイーン

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

モーショントゥイーン

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import mx.effects.Tween;
	import mx.effects.easing.Cubic;
	
	/**
	 * モーショントゥイーンのサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.png')]
		private var image1:Class;
		
		/**
		 * 動かす画像
		 */
		private var bitmap:Bitmap;
		
		/**
		 * ボタン
		 */
		private var button1:SimpleButton;
	
		/**
		 * ボタンの上に書かれたラベル
		 */
		private var buttonText1:TextField;
		
		/**
		 * X 座標変化用モーショントゥイーン
		 */
		private var tweenX:Tween;
		
		/**
		 * Y 座標変化用モーショントゥイーン
		 */
		private var tweenY:Tween;
		
		/**
		 * 拡大率変化用モーショントゥイーン
		 */
		private var tweenScale:Tween;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化イベント
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// ボタンのラベルの作成
			buttonText1 = new TextField();
			buttonText1.text = "リセット";
			buttonText1.selectable = false;
			buttonText1.width = 60;
			buttonText1.height = 20;
			buttonText1.x = 229;
			buttonText1.y = 10;
			addChild(buttonText1);
			
			// ボタンの作成
			button1 = new SimpleButton();
			button1.upState = makeRoundRect(0xDDDDDD, 100, 20, 10);
			button1.overState = makeRoundRect(0xFFFFFF, 100, 20, 10);
			button1.downState = makeRoundRect(0xBBBBBB, 100, 20, 10);
			button1.hitTestState = button1.upState;
			button1.addEventListener(MouseEvent.MOUSE_DOWN, onButtonMouseDown);
			button1.x = 200;
			button1.y = 10;
			addChild(button1);
			
			// 画像の初期位置設定
			bitmap = Bitmap(new image1);
			RegisterBitmap(bitmap, 0, 0, 0.0);
			
			// モーショントゥイーン開始
			startTween();
		}
		
		/**
		 * モーショントゥイーン開始
		 */
		private function startTween():void
		{
			// コンストラクタ終了後にすぐ開始してしまうので一旦止めてから
			// 設定終了後に開始する
			
			// X 座標変化用モーション
			tweenX = new Tween(bitmap, 
								0, 
								220, 
								2000, 
								60,
								updateFunctionX,
								endFunctionX);
			tweenX.pause();
			
			// X 座標だけイージングモードを変えてみる。
			// mx.effects.easing.* に他のイージング関数が入ってるので
			// 試してみてください。
			tweenX.easingFunction = Cubic.easeInOut;
			
			// Y 座標変化用モーション
			tweenY = new Tween(bitmap, 
								0, 
								120, 
								2000, 
								60,
								updateFunctionY,
								endFunctionY);
			tweenY.pause();
			
			// 拡大率変化用モーション
			tweenScale = new Tween(bitmap, 
								0.0, 
								2.0, 
								2000, 
								60,
								updateFunctionScale,
								endFunctionScale);
			tweenScale.pause();
			
			// モーション開始
			tweenX.resume();
			tweenY.resume();
			tweenScale.resume();
		}
		
		/**
		 * モーショントゥイーンの更新メソッド (X 座標)
		 * @param	currentValue
		 */
		private function updateFunctionX(currentValue:Number):void
		{
			bitmap.x = currentValue;
		}
		
		/**
		 * モーショントゥイーンの更新メソッド (Y 座標)
		 * @param	currentValue
		 */
		private function updateFunctionY(currentValue:Number):void
		{
			bitmap.y = currentValue;
		}
		
		/**
		 * モーショントゥイーンの更新メソッド (拡大率)
		 * @param	currentValue
		 */
		private function updateFunctionScale(currentValue:Number):void
		{
			bitmap.scaleX = currentValue;
			bitmap.scaleY = currentValue;
		}
		
		/**
		 * モーショントゥイーンの終了メソッド (X 座標)
		 * @param	currentValue
		 */
		private function endFunctionX(currentValue:Number):void
		{
			bitmap.x = currentValue;
		}
		
		/**
		 * モーショントゥイーンの終了メソッド (Y 座標)
		 * @param	currentValue
		 */
		private function endFunctionY(currentValue:Number):void
		{
			bitmap.y = currentValue;
		}
		
		/**
		 * モーショントゥイーンの終了メソッド (拡大率)
		 * @param	currentValue
		 */
		private function endFunctionScale(currentValue:Number):void
		{
			bitmap.scaleX = currentValue;
			bitmap.scaleY = currentValue;
		}

		/**
		 * ボタンが押された時のイベントハンドラ
		 * @param	event
		 */
		private function onButtonMouseDown(event:MouseEvent):void
		{
			tweenX.stop();
			tweenY.stop();
			tweenScale.stop();
			startTween();
		}
			
		/**
		 * ステージにビットマップを登録して表示する
		 * @param	bitmap	表示するビットマップ
		 * @param	x		X 座標
		 * @param	y		Y 座標
		 * @param	scale	拡大率
		 */
		private function RegisterBitmap(bitmap:Bitmap, x:int, y:int, scale:Number):void
		{
			bitmap.smoothing = true;
			bitmap.cacheAsBitmap = true;
			bitmap.x = x;
			bitmap.y = y;
			bitmap.scaleX = scale;
			bitmap.scaleY = scale;
			addChild(bitmap);
		}
		
		/**
		 * 角丸の図形を描いたスプライトを作って返す
		 * @param	color	色
		 * @param	width	幅
		 * @param	height	高さ
		 * @param	round	角丸の大きさ
		 * @return	スプライト
		 */
		private function makeRoundRect(color:uint, width:int, height:int, round:int):Sprite
		{
			var s:Sprite = new Sprite();
			s.graphics.lineStyle(2);
			s.graphics.beginFill(color);
			s.graphics.drawRoundRect(0, 0, width, height, round);
			s.graphics.endFill();
			s.alpha = 0.3;
			return s;
		}
		
	}
	
}		

mx.effects パッケージの中に、mx.effects.Move 等の
モーショントゥイーン用クラスがありますが、
これらは、Flex の MXML で作成された GUI オブジェクトに対してのみ
使えるようになっており、 ActionScript3 プロジェクトの中からは使うことができません。

これは、 Flex の GUI オブジェクトが、ActionScript プロジェクトの
基盤となっている Sprite クラスから、さらに派生した FlexSprite クラスを
全ての GUI オブジェクトの基礎クラスとしているところに原因があるので、
Bitmap クラスや Sprite クラスを単純にキャストして使用することができないためです。
(基礎クラスから派生クラスへのキャストになってしまうので、エラーが起こる)

このような事情があるので、ActionScript プロジェクトでは、
Flex の MXML で使えるような 便利な機能をそのまま持ってくることはできません。
モーショントゥイーンであれば、上のサンプルのように
mx.effects.Move の代わりに Tween クラスが使えるので、
がんばれば同じ機能を実現することができます。

参照

外部リンク