Incorporate TweenLite to particle generation animation?

[Spiderian]

Hi, I am new to particle generation animation, and I was wondering if I could use TweenLite to make the movement more fluid with eases. If I don't need TweenLite or can't use it any alternative would be appreciated.

 

I did a few tutorials and came up with this code for a snowing animation. I think I could ease with a sin function, but I'm not sure of where to put it in my math and I would rather use the default ease in TweenLite

 

package
{
    

    import com.greensock.TweenLite;
    import com.greensock.easing.*;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    
    public class Snow extends MovieClip
    {
        private var flakesVector:Vector.<MovieClip> = new Vector.<MovieClip>();
        private var timer:Timer = new Timer(2000);
        
        public function Snow(speed:int = 3, flakesNumber = 150):void
        {
            for(var i:int = 0; i < flakesNumber; i++)
            {
                var flake:Snowflake = new Snowflake();
                
                flake.vel = (Math.random() * speed) + 0.5;
                flake.xSpeed = Math.floor(Math.random() * (0.5 - -0.5 + 1)) + -0.5;
                
                flake.scaleX = (Math.random() * 1) + 0.3;
                flake.scaleY = flake.scaleX;
                flake.x = Math.random() * stage.stageWidth;
                flake.y = Math.random() * stage.stageHeight;
                
                addChild(flake);
                
                flakesVector.push(flake);
            }
            
            addEventListener(Event.ENTER_FRAME, fall);
            timer.addEventListener(TimerEvent.TIMER, changeMovement);
            timer.start();
        }
        
        private function fall(e:Event):void
        {
            for(var i:int = 0; i < flakesVector.length; i++)
            {
                flakesVector.x += flakesVector.xSpeed;
                flakesVector.y += flakesVector.vel;
                
                if(flakesVector.y > stage.stageHeight)
                {
                    flakesVector.x = Math.random() * stage.stageWidth;
                    flakesVector.y = -flakesVector.height;
                }
            }
        }
        
        private function changeMovement(e:TimerEvent):void
        {
            for(var i:int = 0; i < flakesVector.length; i++)
            {
                flakesVector.xSpeed *= -1;
            }
        }
    }
}

[Carl]

Hi and welcome to the GreenSock forums.

 

Animating particle effects is a bit different when you use a tween engine. With your code you are constantly and repeatedly looping over a ton of elements and applying slight changes to various properties of those elements.

 

When you use a tweening engine its a different approach. You only loop through the elements once to create a tween which handles the duration and start and end values of all the properties that change. Each tween handles the animation of each element. 

 

With GreenSock you can nest those tweens in timelines for ultimate control of the entire sequence.

 

For an idea of how this works take a look through these tutorials and the demo here:

http://www.snorkl.tv/2010/12/3-part-video-series-on-bubbles-with-timelinemax/

 

The GSAP syntax is a little out-dated but it gives you an idea of what can be done. Also, bubble are really just upside-down snow

 

a particle system can be accomplished as simply as this:

 

import com.greensock.*;
import com.greensock.easing.*;


var particles:TimelineLite = new TimelineLite();


for (var i:int = 0; i < 100; i++){
var box:Box = new Box();
box.x = -20;
box.y = 200;
addChild(box);
particles.to(box, Math.random()*2, {y:Math.random()*400, x:Math.random()*800, alpha:0, scale:0}, i*0.03)
}

cs5 fla attached (compile with GSAP v12)

 

 

particles_CS5.zip

[Spiderian]

The bubble script looks like it would do the trick but when I try and see how it works I get two errors:

 

Scene 1, Layer 'actions', Frame 1, Line 33    1067: Implicit coercion of a value of type Function to an unrelated type Number.
 

Scene 1, Layer 'actions', Frame 1, Line 53    1119: Access of possibly undefined property currentProgress through a reference with static type com.greensock:TimelineMax.
 

But at least I know what kind of tutorials to look for. Thanks

[Carl]

Yeah it seems you are using the new version of GSAP, which is v12 and is very good!

 

Those tutorials were written years ago with an older version of GSAP.

 

The errors are due to the fact that in v12 a few properties were changed to methods

 

so something like

 

tl.timeScale = 4 in v11 would now be tl.timeScale(4).

 

same goes for duration(), time(), progress(), totalProgress(), paused(), reversed() etc.

 

Also the property currentProgress was changed to the method progress()

 

tl.currentProgress == 1 should be

 

tl.progress() == 1

[Spiderian]

Awesome! thanks Carl. I only have two small questions; Is there a way to duplicate this effect between layers, for example between the sky and buildings, and between buildings and a window for the frame? The second question: is there a way to start it off with more than just one flake? I was playing with the

for (var count:Number = 1000; count<20000; count++) {
		createFlake();
	}

It made it a little denser, but it always started slow with only 1-3 flakes. I'm trying to make it look like heavy snow just short of a blizzard. I suppose I could delay my other animations and just clip off the front when it's warming up.

[Carl]

As for the layering, yes, i suppose so, but not really sure how. You would have to probably use addChild() to reposition the window, sky, building, and frame.

 

As for re-usiung this code for multiiple effects in multiple displayobjects, it really wasn't intended for that. It would require quite a few modifications.

 

----

 

As for having the bubbles / flakes start faster. Try applying this code to the original bubbles file. 

 

import com.greensock.*;
import com.greensock.easing.*;


var tl:TimelineMax=new TimelineMax({paused:true,onComplete:done});


//ACCEPT offset PARAM (GENERATED BY BUBBLE LOOP IN INIT)


function createBubble(offset) {
//create a bubble (attach symbol in library with Class Bubble) and position on stage
var bubble:Bubble = new Bubble();
bubble.y=380;
bubble.x=randomRange(25,610);
bubble.alpha=0;




addChild(bubble);
//create timeline for each bubble
var nestedTl:TimelineMax = new TimelineMax();


//how much wiggling / zig zagging
var wiggle:Number=randomRange(25,50);
//zig or zag?
wiggle=Math.random() > .5?- wiggle:wiggle;
//how fast and big
var speed:Number=randomRange(.2,3);
//fade and grow
nestedTl.insert(TweenMax.to(bubble, .5, {alpha:randomRange(.5,1), scaleX:speed, scaleY:speed}));
//go up
nestedTl.insert(TweenMax.to(bubble,speed, {y:-40, ease:Quad.easeIn}));
//zig zag
nestedTl.insert(TweenMax.to(bubble, speed*.25, {x:String(wiggle), repeat:Math.floor(randomRange(1,4)), yoyo:true, ease:Linear.easeNone}));


//USE INSERT INSTEAD OF APPEND
tl.insert(nestedTl, offset);
}








function done() {
trace("the party's over");
}


//generate random num between a min and max value
function randomRange(min:Number, max:Number):Number {
return min + (Math.random() * (max - min));
}



function playTl(e:MouseEvent):void {
//if timeline is at end, restart, or else play from current position
if (tl.currentProgress==1) {
tl.restart();
} else {
tl.play();
}


}


function pauseTl(e:MouseEvent):void {
tl.pause();
}


function reverseTl(e:MouseEvent):void {
tl.reverse();
}


function init() {
//hide all done
done_mc.alpha=0;
//add welcome message
tl.insert(TweenMax.to(intro_mc, .5, {alpha:0}));
//create a bunch of bubbles and add them to timeline


//LOOP NOW CREATES OFFSET VARIABLE




for (var count:Number = 0; count<300; count++) {
var offset = count * 0.02;
createBubble(offset);
}
//show all done meesage
tl.append(TweenMax.to(done_mc, .4, {alpha:1, repeat:1, yoyo:true, repeatDelay:1.5}));
//show intro message
tl.append(TweenMax.to(intro_mc, .5, {alpha:1}));
//set up buttons
nav_mc.playB.addEventListener(MouseEvent.CLICK, playTl);
nav_mc.pauseB.addEventListener(MouseEvent.CLICK, pauseTl);
nav_mc.reverseB.addEventListener(MouseEvent.CLICK, reverseTl);
//place nav on top of all the bubbles
addChild(nav_mc);
}


init(); 

Keep in mind, this code isn't upgraded to v12 yet. And I wouldn't recommend using append or insert, but hopefully this gives an idea of how you can have your tweens all start sooner and bunched closer together.

[Spiderian]

That's exactly how I want it too look. Now I just need to find a tutorial for layering.

 

THANKS FOR ALL THE HELP, YOU'RE THE BEST CARL!