INSIDE shota sawada design

先日の「tweenクラスのメモ」で何やっているんだ、とお叱りを自分でもらったので、最初から丁寧に導入を書いてみたいと思います。

私は未だ外部エディターでasを書いていなく、Flash CS3で書いています。FlashDevelop使ってみたいなぁと思ってもmacユーザーなので、さようなら。まあ、デベロッパーでないしプログラマーでもないので、別にいいかなとも思う昨今です。
あと、Flash IDEって何なのか。Flash CS3とは何が違うの？と。調べてみると、

IDEとは、プログラミングで使用するエディタ、画面ツール、コンパイラ、リンカ、デバッガなどのプログラミングツールが統合された開発ソフトのことである。(IDE（統合開発環境）: 語句ロゴより引用)
らしいです。Flash CS3 < Flash IDEという感じですかね。

本題のTweenerクラスの導入について説明します。Tweenerクラスは、トゥイーンなどを目標点-現在の距離を数で割るとかいう計算をしないで、クラスを使ってやってしまおうという画期的で素晴らしいクラスです。前までは、クラスこわーいという概念があり、計算をしていました。しかし、クラスにも慣れてきたし、クラス便利だなぁと思うで、現在は使用しています。

まずは、クラスのダウンロードをします。方法は二つ。

1. tweener - Google CodeのDownloadから自分にあったものをダウンロードしてください。現在(08.4.6)の最新バージョンは、1.26.62です。as3.0は使用するので、tweener_1_26_62_as3.zipをダウンロードします。

2. Revision 389: /trunk TweenerのSubversionのリポジトリからas3の中のcaurina以下のディレクトリをダウンロードします。これは、Subversion(svn)というバージョン管理システムで、常に最新バージョンを出してくれるものです。格納するところをリポジトリといいます。

Papervision3Dというクラスがありまして、1のGoogleCodeでダウンロードしても最新バージョンではありません。旧バージョンが置かれたままになっています。そのため、SubversionのリポジトリからDLする必要があります。よって、GoogleCodeからDLでなくて、SubversionからDLすることをおすすめします。

Subversionについて詳しく知りたい方は
Subversion メモへどうぞ。

DLの仕方ですが、実際にアクセスしてみるとわかりますが、一つ一つファイルをダウンロードするのは、非常に手間がかかります。そこで、subversionを一度にDLしてくれるアプリケーションがあります。私のおすすめは、
macosxユーザー → svnx
windowsユーザー → TortoiseSVN
です。使い方は、
svnx → MacOSX用SVNクライアントsvnX(Papervision 3D入門ノート)
TortoiseSVN → TortoiseSVNのインストールと設定
を参考にしてください。

続いて、インストールの仕方です。

ダウンロードしたものを見てみると、caurinaというフォルダがあります。これをそのまま(caurina以下のディレクトリ構造を変えないで)ローカルに置きます。ローカルのどこにおけばいいかは、どこでもよいです。自分が分かりやすいようにおけば。私は、Macintosh HD>アプリケーション>Adobe Flash CS3>First RUN>Classes>caurinaとなるように置きました。

"First Run" フォルダ
このフォルダはアプリケーションレベル設定フォルダの兄弟で、同じコンピュータのユーザー同士で設定ファイルを共有できるようにします。"First Run" フォルダおよびフォルダ内のファイルは、ユーザーレベル設定フォルダに自動的にコピーされます。"First Run" フォルダに新しく置かれたファイルは、アプリケーションの起動時にユーザーレベル設定フォルダにコピーされます。
Flash と共にインストールされる設定フォルダより引用。

結局、どこにおいてもFlashの環境設定でパスを設定するので、変な心配はいりません。

Flash CS3を起動させ、新規でFlash File(ActionScript 3.0)を選択。fileからPublish Settingsを選び、Flash → ActionScript versionの右にあるSettings...をクリック。下の方にClassPathがあるので、＋ボタンを押して、+ボタンの右らへんにあるターゲットを押します。そして、自分が設定した場所(私は、Macintosh HD>アプリケーション>Adobe Flash CS3>First RUN>Classes>caurina)の上のフォルダ。私は、Classesになります。そこを選んでください(import はcaurinaから書きたいがために)
できたら、OKを押して設定を終えてください。これで、インストールは終了です。

次に実際に使用してみます。
先ほど作成したFlash Fileはそのままにして新規でActionScript Fileを選択します。

導入の仕方は、import caurina.transition.Tweener;でインポートしてやります。
そして、
Tweener.addTween(mc, {x:200, y:200, transition:"liner", time:2});
とおいてやります。mcはインスタンス、x,yは目標位置、transitionはイージング、timeは何秒かです。
transitionは様々あります。Transition Typesを参考にしてください。
ほかにも、Tweenerは移動のトゥイーンだけでなく、alphaやscaleX、scaleYなども変化させることできます。また、ベジェ曲線の起動もできます！こりゃいいですね。
feb19.jp - AS3でTweener 1.31.67を使うで詳しく書かれているので、参考にしてください(お世話になりました！)

自分が作ったキーボードイベント＋Tweenerのサンプルを下に載せておきます。
hitTest()置いてやれば、懐かしきイライラゲーム作れますね。
サイトの白い部分を一度クリックして、ワンクッションさせてからしようしてください。キーボードイベントではそうしないと作動してくれないっぽいです。赤い丸の移動のさせ方は、キーボードの矢印キーです。

ソースはこちら

package {

	import flash.display.Sprite;

	import flash.events.KeyboardEvent;

	import flash.ui.Keyboard;

	import caurina.transitions.Tweener;


	//Class

	public class KeyCodes extends Sprite {

		//proparity

		private var ball:Sprite;

		private var a,b:Number;

		private var ma:Number = 20;

		//constructor

		public function KeyCodes() {

			init();

		}

		private function init():void {

			ball = new Sprite();

			addChild(ball);

			ball.graphics.beginFill(0xff0000);

			ball.graphics.drawCircle(0,0,10);

			ball.graphics.endFill();

			ball.x = stage.stageWidth/2;

			ball.y = stage.stageHeight/2;

			a = ball.y;

			b = ball.x;

			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyboardEvent);

		}

		public function onKeyboardEvent(event:KeyboardEvent):void {

			switch (event.keyCode) {

				case Keyboard.UP :

					a = ball.y - ma;

					break;

				case Keyboard.DOWN :

					a = ball.y + ma;

					break;

				case Keyboard.LEFT :

					b = ball.x - ma;

					break;

				case Keyboard.RIGHT :

					b = ball.x + ma;

					break;

				default :

					break;

			}

			Tweener.addTween(ball,{x:b,y:a,time:0.5,transition:"easeOutCubic"});

		}

	}

}

Tweenerは本当面白いですね。サンプルを自分で実行しようと思ったら、ドキュメントクラスをKeyCodesにして実行してください。