読者です 読者をやめる 読者になる 読者になる

Flash制作講座フラッシュ制作講習

FLASH制作からActionScriptによるFlashコンテンツ制作のためのフラッシュ制作講座

AS3.0 Tweenerクラス導入

Papervisionとかでかなりactionscriptのクラスファイル、ライブラリというものが普及しているのでしょうか。


その一つであるTweenerクラスはGoogle Code(http://code.google.com/p/tweener/)に公開されているクラスで、今回Tweeter導入方法についてできる限り噛み砕いて挑戦してみます。



パラメータによってオブジェクトを制御する関数群といったところでしょうか。


クラスファイルとかになるとかなり拒否反応があるのでご了承ください。


名付けて、
『初めてのTweener

1.ダウンロード

Tweenerクラスファイルをダウロードします。
方法が2種類

【方法その1】
Google CodeのDownloadからAS3.0のzipをダウンロード。tweener_1_33_74_as3.zip 2009/9/25の時
解凍して、flaファイルと同じ階層に配置するだけです。


【方法その2】
Revision 389: /trunk SubversionというリポジトリからTweenerのAS3.0ファイルをダウンロード。
caurina以下のディレクトリを階層構造をそのままの階層ですべてダウンロード。
flaファイルと同じ階層に配置するだけです。

Subversion(svn)というバージョン管理システムとそのサイトのことで、オープンソースの最新バージョンをダウンロードできるCVSといったところでしょうか。


2.サンプルflaファイルの作成
courinaを配置したフォルダに Flashファイル(AS3.0)を作成して、sample.flaで保存。


3.Tweenerインポート
作成したsample.flaファイルのアクションフレームにTweenerをインポートする

"import caurina.transitions.Tweener;"

ついでにflash.display.Spriteクラスのインポート
"import flash.display.Sprite;"
※flashがデフォルトでもっているクラスはパブリッシュ時に自動で読み込まれるが、ただし外部ASファイルのpackage内で必要なクラスをコールする必要がある。



4.Tweenerの初期化
Tweener.init(stage);
※これはTweenerだけでなく、関数全般で行う初期化処理(initialize)で、
stageはAS3.0での最上位コンテナ


5.MCインスタンスシェイプ Sprite作成
var circleX:Sprite = new Sprite();
circleX.graphics.beginFill(0xFFCC00);
circleX.graphics.drawCircle(40, 40, 40);
addChild(circleX);


6.Tweener.addTweenクラスを呼び出す

"Tweener.addTween(circleX, {x:300, y:300, alpha:0.30,transition:"easeOutElastic", time:2});"

circleXは5で作成したシェイプで、XとY軸300の座標に向かって、透明度30になりなら楕円が大きくバウンドして進めば成功です。
transitionは値によって進行の仕方が変わります。timeはスピードですね。0が最速で動きが肉眼では見えません。小数点いかも数値指定できます。

詳しくは
Tweener Documentation
Reference  Transition Types
http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html


Tweenerクラスの導入方法でした。


このようにして、すでに配布されているライブラリを使用することによって、大幅に開発の労力を軽減できるようですね。