前編は動きのあるFlashを最初から作りましたが,後編ではライブラリを使って簡単に作る方法を紹介します。
ActionScript 3.0にはアニメーション用のライブラリがいくつも公開されています。その中でも有名なのがMITライセンスで公開されてるtweenerです。
tweenerを使ったサンプル
それでは,tweenerを使ったサンプルを見ていただきましょう。前回からの変更点を太字にしています。
package{
import flash.display.Sprite;
import flash.events.MouseEvent;
import caurina.transitions.Tweener;
public class Anime2 extends Sprite{
public function Anime2():void{
// クリックイベントを監視する
stage.addEventListener("click", clickHandler);
}
private function clickHandler(event:MouseEvent):void {
// 円を作成
var s:Sprite = new Sprite();
s.graphics.beginFill(Math.random() * 0x1000000);
s.graphics.drawCircle(0, 0, 10);
s.graphics.endFill();
addChild(s);
// 円をクリックされた位置に移動
s.x = event.stageX;
s.y = event.stageY;
s.scaleX = s.scaleY = 0;
Tweener.addTween(s, {
time: 1, // 1秒間のアニメーション
scaleX: 5, // s の scaleX を 5 まで遷移
scaleY: 5 // s の scaleY を 5 まで遷移
});
}
}
}
このソースコードをコンパイルすると,次のようなFlashができあがります。
クリックすると円が「もわっ」と広がりますね。前回のものよりも動きがなめらかです。
ソースコードのうち,アニメーションを実現しているのは以下の箇所です。
Tweener.addTween(s, {
time: 1, // 1秒間のアニメーション
scaleX: 5, // s の scaleXを 5 まで遷移
scaleY: 5 // s の scaleY を 5 まで遷移
});
見やすくするために複数行に分けていますが,Tweener.addTween()メソッドを1度呼び出しているだけです。前回,苦労して作ったものよりも高機能なアニメーションが1文で書けるのです。
コンパイルしよう
先に完成物をお見せしましたが,まだコンパイルしていませんでした。
先ほどのソースコードをAnime2.asとして保存してください。今までどおり,mxmlcでコンパイルしようとすると,Tweenerクラスが見つかららないため,エラーになってしまいます。
C:\samples>mxmlc Anime2.as
Loading configuration file C:\flex\frameworks\flex-config.xml
C:\samples\Anime2.as(25): col: 13 Error: 未定義のプロパティ Tweener へのアクセスです。
Tweener.addTween(s, {
^
C:\samples\Anime2.as(4): col: 32 Error: 定義 caurina.transitions:Tweener が見つかりません。
import caurina.transitions.Tweener;
^
tweenerをダウンロードする
コンパイルするためにはtweenerをダウンロードする必要があります。tweenerは以下の場所で公開されています。
画面右側のFeatured DownloadsからActionScript 3用のソースコード(tweener_1_26_62_as3.zip)をダウンロードします。
※数字の部分tweener_1_XX_XXは将来的に変わる可能性があります。
次に,ソースコードを置いているフォルダにダウンロードしたzipファイルを解凍します。caurinaフォルダがAnime2.asと同じ場所に展開されていれば成功です。
今度はうまくコンパイルできるはずです。
C:\samples>mxmlc Anime2.as Loading configuration file C:\flex\frameworks\flex-config.xml C:\samples\Anime2.swf (11565 bytes)
mxmlcのオプションでtweenerのパスを指定していないところに注意してください。mxmlcは必要とされているクラスを自動的に解決してくれます。

