今回からは2回に渡って、
Timerクラスでアニメーション
Flashにはアニメーションに便利なTimerクラスが用意されています。Timerクラスを利用すると、
前回のサンプルをベースに、
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
public class Anime1 extends Sprite {
public function Anime1():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;
// タイマー開始
var timer:Timer = new Timer(50, 20);
timer.start();
timer.addEventListener("timer", function(event:Event):void {
var ratio:Number = timer.currentCount / timer.repeatCount;
s.alpha = 1 - ratio;
});
timer.addEventListener("timerComplete", function(event:Event):void {
removeChild(s);
});
}
}
}Anime1.
mxmlc Anime1.as
Flashの完成です。クリックすると円が表示され、
それでは、
タイマーの作成
まずは、
var timer:Timer = new Timer(50, 20);Timerオブジェクトを作成して、
Timer(タイマー実行の間隔:Number, 回数:int = 0)今回は50ミリ秒間隔で20回呼び出されるタイマーを作成しています。50ミリ秒×20回＝1秒ですので、
次に、
timer.start();フェードアウトの処理
タイマーを開始すると、
イベントリスナでは、
timer.addEventListener("timer", function(event:Event):void {
var ratio:Number = timer.currentCount / timer.repeatCount;
s.alpha = 1 - ratio;
});currentCountプロパティは現在の呼び出し回数を表します。repeatCountプロパティは呼び出される合計回数
タイマーをスタートすると、
alphaプロパティは透明度を表す0～1までの数値です
アニメーション終了時の処理
20回のタイマー呼び出しが終了すると、
今回の例ではtimerCompleteイベントのハンドラでアニメーションの終了処理を行っています。
timer.addEventListener("timerComplete", function(event:Event):void {
removeChild(s);
});ここでは、
少し改造して動きをつける
どんどん大きくなる円
フェードアウトだけではつまらないので、
// 初期スケールの設定
s.scaleX = s.scaleY = 0;
// タイマー開始
var timer:Timer = new Timer(50, 20);
timer.start();
timer.addEventListener("timer", function(event:Event):void {
var ratio:Number = timer.currentCount / timer.repeatCount;
s.alpha = 1 - ratio;
s.scaleX = 5 * ratio;
s.scaleY = 5 * ratio;
});scaleXプロパティ、
試しにクリックしてみてください。円がどんどん大きくなっていきますね。
回転しながら迫ってくる円
今度は、
s.graphics.drawCircle(20, 0, 10); // 中心座標をずらす
...
// 初期スケールの設定
s.scaleX = s.scaleY = 0;
// タイマー開始
var timer:Timer = new Timer(50, 20);
timer.start();
timer.addEventListener("timer", function(event:Event):void {
var ratio:Number = timer.currentCount / timer.repeatCount;
s.alpha = 1 - ratio;
s.scaleX = 5 * ratio;
s.scaleY = 5 * ratio;
s.rotation = 360 * ratio;
});rotationプロパティを変化させることで、
まとめ
今回は自力でアニメーションを行う方法を紹介しました。また、
このまま拡張していってもいいのですが、
それを解決してくれるのが、
次回は、