papervision3dのParticleFieldをアニメーションさせる。(ディレイを使って、アニメーションをバラバラに実行)

アニメーションの話はまた次回~
とか書いておきながら、2ヶ月近く放置してしまったのだが・・・。

最終的には↓のような物を作ります。

動作サンプル(重いかもしれないんで別窓で)

サンプルファイル一式(Flash CS4形式)

前回はParticleFieldで生成されるパーティクルにアニメーションを適用させる方法までを解説しました。

今回は、それに味付けして、個々にアニメーションするようにして

こんなやつを作ってみましょう。

因みに、用意したサンプルのソースでは、ParticleFieldクラスのサブクラスとして実装しています。

まず、パーティクルのアニメーションをずらすには、「delay()」を使います。
前回のコードを、

var delay:Number = 0;
for (var i:int = 0 ; i < len ; i++) {
    particleArray[i].y = 0;
    var tweenY:IObjectTween = BetweenAS3.tween(particleArray[i] , { y:2000} , null , tweenTime , Linear.linear);
   
    var delayTween:ITween = BetweenAS3.delay(tweenY);
    delayTween.play();
}

とか書けば、一個一個ばらばらにアニメーションを開始すると思います。
この際のyの目標座標は、ParticleFieldのデフォルトの高さである2000に設定します。

前回は、fld.fieldHeightこうかきましたが、どうやらprivateらしく、実行したら、値にアクセスできませんでした。

んで、このままだとアニメーションが終わったら、終わったまんまになってしまうので、リピート再生させるために「stopOnComplete = false;」を設定してあげなくてはいけませんが、delayTweenのほうでリピート再生させると、ディレイ時間も反映させてしまうため、ものによっては、ディレイ時間が20秒とかになってしまいます。

なので、

var particleTweenArray:Array = new Array();
var delay:Number = 0;
for (var i:int = 0 ; i < len ; i++) {
    particleArray[i].y = 0;
    var tweenY:IObjectTween = BetweenAS3.tween(particleArray[i] , { y:2000} , null , tweenTime , Linear.linear);
    tweenY.stopOnComplete = false;
   
    var delayTween:ITween = BetweenAS3.delay(tweenY);
    delayTween.play();

    particleTweenArray.push(tweenY);
    delayTween.addEventListener(TweenEvent.COMPLETE , tweenCompFunc(i));

}
function tweenCompFunc(index:int):Function {
    return function(e:TweenEvent):void {
        particleTweenArray[index].play();
    }
}

こんな風に書き換えます。

ディレイを与えたムービーが終わったら、リピート再生になっているtweenYのほうを再生開始するように設定します。

次回はゆらゆら動くようなアニメーションをつけてみます。

因みに、タイムラインコードとして書く場合の全てのコードは

import org.papervision3d.view.BasicView;
import org.papervision3d.materials.special.MovieAssetParticleMaterial;
import org.papervision3d.objects.special.ParticleField;
import org.papervision3d.cameras.CameraType;

import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.easing.Linear;
import org.libspark.betweenas3.events.TweenEvent;
import org.libspark.betweenas3.tweens.IObjectTween;
import org.libspark.betweenas3.tweens.ITween;


var world:BasicView = new BasicView(640 , 320 , true , false , CameraType.DEBUG);
var particleTweenArray:Array = new Array();

var mf:MovieAssetParticleMaterial = new MovieAssetParticleMaterial("test");
mf.smooth = true;

var fld:ParticleField = new ParticleField(mf , 200 , 1);

stage.addChild(world);
world.scene.addChild(fld);

world.startRendering();

fld.y = -500
world.camera.zoom = 50;

var tweenTime:int = 10;
var particleArray:Array = fld.particles;
var len:int = particleArray.length;

var delay:Number = 0;
for (var i:int = 0 ; i < len ; i++) {
    particleArray[i].y = 0;
    var tweenY:IObjectTween = BetweenAS3.tween(particleArray[i] , { y:2000} , null , tweenTime , Linear.linear);
    tweenY.stopOnComplete = false;
  
    delay += 0.5;
   
    var delayTween:ITween = BetweenAS3.delay(tweenY , delay);
    delayTween.play();
   
    particleTweenArray.push(tweenY);
    delayTween.addEventListener(TweenEvent.COMPLETE , tweenCompFunc(i));
}
function tweenCompFunc(index:int):Function {
    return function(e:TweenEvent):void {
        particleTweenArray[index].play();
    }
}

コメントする

トラックバック(0)

このブログ記事を参照しているブログ一覧: papervision3dのParticleFieldをアニメーションさせる。(ディレイを使って、アニメーションをバラバラに実行)

このブログ記事に対するトラックバックURL: http://studio-ensyu.sakura.ne.jp/mt/mt-tb.cgi/30