tweenerライブラリを使用してみる。

2009/09/09  as3.0

 

今回は、ライブラリの説明をします。

 

外部ライブラリを使ってみる

 

 

外部ライブラリっていうのは、

【他の人がつくってくれたプログラムを簡単にする道具です。】

目的に合わせて使うのがベストです。

 

キリトリ線

 

基本的な動作を簡単にしてくれるのがTweenerクラス

 

 

Tweenerはflashでの物体を動かすクラスです。いろを変えたりとかまで対応できます。

(例:_mcをステージの左から右に動かしたい)

 

tweenクラスはflashにひょうじゅんでもそなわっていますが、実際に使用するに当たって、りべんせいが高く使いやすさをかねそなえているのがTweenerクラスです。

※TweenクラスとTweenerクラスは名前が似ていますが(機能も似ています)、Tweenクラスは元からflashに含まれているちょっと扱いにくいクラスです。Tweenerのせつめいをします。

 

tweenerクラスに関しては既に開発が終了しているものの、現在もおおくの人がつかっておおくのリファレンスがあります。

 

Tweenrクラスを下記からダウンロードします。

http://tweener.googlecode.com/files/tweener_1_33_74_as3.zip

 

キリトリ線

 

早速使ってみる

 

■使い方

1、導入 flaファイルを作成します。

ドキュメントクラスとしてのasファイルを作成します。 asファイルとflaファイルと同じフォルダにcaurinaフォルダを入れてください。

import caurina.transitions.*;

と書くことでライブラリを使用できるようになります。

 

2、tweenerの使用

tweenerは書き方があって、次のように書きます。

Tweener.addTween(box, { y:100, time:1} );

box:対象のインスタンス名 y:変化させたいプロパティ time:変化にかかる時間。

 

3、実行 asファイルに記述

flaファイル上にboxというインスタンス名のオブジェクトを作成してステージ上の好きな位置に配置をしてください。

下記のように記述をすれば動きます。

package  {
	import flash.display.*;
	import caurina.transitions.*;
	public class index extends Sprite {
		public function index() {
			Tweener.addTween(box, {  y:100, time:1 } );
		}
	}

}

(すでに動いた後かと思いますが。。)

This movie requires Flash Player 9.0.0

 

キリトリ線

 

応用編

いくつかプロパティがtweenerには存在します。

そのプロパティを用いる事で更に複雑な動きを実現できます。

 

delay:

きじゅつした秒数だけあとにうごきます。

 

onComplete:

tweenerが終わったら、ファンクションを実行する事ができます。連続したうごきにしようできます。

 

transition:

移動の時に最初は早く最後はゆっくりなどの設定を行えます。

 

transitionについては

http://tweener.googlecode.com/files/TransitionCheatSheets_2.zip

からダウンロードをすると一覧が見れます。

 

 

連続で動かしてみる。

 

onCompleteごとに次のtweenerを実行していく!

 

This movie requires Flash Player 9.0.0

package  {
	import flash.display.*;
	import caurina.transitions.*;
	public class index2 extends Sprite {		
		public function index2() {
			Tweener.addTween(box, {  
				x:0,
				y:0, 
				time:1,
				onComplete:_next 
			} );
		}

		private function _next():void{
			Tweener.addTween(box, {  
				x:100,
				y:200, 
				time:1,
				delay:0.1,
				onComplete:_next2 
			} );
		}

		private function _next2():void{
			Tweener.addTween(box, {  
				x:200,
				y:200, 
				time:1,
				delay:0.1,
				onComplete:_next3 
			} );
		}

		private function _next3():void{
			Tweener.addTween(box, {  
				x:200,
				y:100, 
				time:1,
				delay:0.1,
				onComplete:_next4 
			} );
		}

		private function _next4():void{
			Tweener.addTween(box, {  
				x:100,
				y:100, 
				time:1,
				delay:0.1,
				onComplete:_next 
			} );
		}
	}
}

 

マウスアクションと連携させるには

 

クリックの際にtweener実行と、マウスの位置をとうろく。

クリックをするとその位置までオブジェクトが動きます。

 

This movie requires Flash Player 9.0.0

package  {
	import flash.display.*;
	import caurina.transitions.*;
	import flash.events.MouseEvent;

	public class index3 extends Sprite {		
		public function index3() {
			stage.addEventListener(MouseEvent.CLICK,function(){
				Tweener.addTween(box, {  x:mouseX, y:mouseY, time:1} );
			});
		}
	}
}

 

ここまで、できれば、作りたい動きの ほとんどが実現できるのでは、 ないでしょうか。 あとは創造性です。

 

本日作成したファイルはこちらでございます。

 

ファイル

http://prfry.net/s26/flash/tweener.zip