producing a falling coins effect, using one image

[MrFriendly]

Hi

 

I wondering if anyone could help me. 

 

So my animation starts with:

 

TweenMax.to(text_mc, 1, {y:30, ease:Bounce.easeOut});

 

So some text drops down, I would like for my image of a coin to produce about 30 copies of itself bounce upwards then down. The effect can be seen in the swf attached

 

Cheers

 

[Carl]

Hi and welcome to the GreenSock forums.

 

I don't think your file is attached, please zip your swf prior to attaching. 

[MrFriendly]

Thanks, OK this is effectively the banner I'm trying to recreate.

NSMB2_728x90_rich_v2.swf.zip

[Carl]

There are many ways to do that type of effect and depending on your skill level many ways to make the code flexible, re-usable and efficient. 

 

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


//create a bunch of coins and animate them in a TimelineLite
function createCoinAnimation(numCoins:int):TimelineLite {
var tl = new TimelineLite();
for (var i:int = 0; i < numCoins; i++){
var coin:Coin = new Coin();
coin.x = Math.random()*500;
coin.y = 450;


addChild(coin);
tl.to(coin, 0.4, {y:(Math.random() * 300)}, 0) //up
 .to(coin, 0.4, {y:450, ease:Power1.easeIn}, 0.4) //down
 .to(coin, tl.duration(), {x:Math.random() * 500}, 0) //horizontal
}
return tl;
}




var main:TimelineLite = new TimelineLite();


main.add( createCoinAnimation(10) )
main.add( createCoinAnimation(50), "+=1") 
main.add( createCoinAnimation(5), "+=1" ) 

This example uses a number of basic AS3 concepts and a few advanced GSAP techniques. 

Not really sure what parts you will need help with.

 

The basic idea is that there is a function that can generate and animate any number of coins. That function creates a TimelineLite instance and also returns it. At the bottom of the code I'm using the add() method to place 3 timelines that createCoinAnimation generates into a master timeline. That is why you see 3 groups of coins animating in sequence.

 

It is entirely possible to add this type of coin animation at any point in the animation of your main banner just by calling the createCoinAnimation() function.

 

You don't really need to worry about nesting timelines right now. Just know that you can create the coin animation just by doing

createCoinAnimation(20) //animates 20 coins

I've attached the CS5 fla and swf. Please use the latest v12 GSAP files.

 

coins_CS5.zip

[MrFriendly]

Hi Carl

 

Thanks a lot, this has definitely helped my understanding. I only started using TweenMax/lite for the first time today but I've pretty much finished recreating the banner in it's entirety.

 

I appreciate you time and help.

 

 

One quick question whilst i've got you here, at the end of the animation the buttons have a flash of gradient that shoots across, any idea how i could achieve this? 

[Carl]

One quick question whilst i've got you here, at the end of the animation the buttons have a flash of gradient that shoots across, any idea how i could achieve this? 

 

 

I would just create a vector shape and change its x value with a tween that is triggered on ROLL_OVER. In addition the vector shape will have to be masked.

[MrFriendly]

By the way I couldn't get the coins to work, your file didn't work correctly when I opened it in Flash pro.

[Carl]

I just downloaded, added the recent greensock files and compiled it fine. Strange.

 

Please confirm that you are using Flash CS5 or higher AND that you have the FLA in a directory with access to the GSAP classes.

 

If you still have problems let me know if there are any errors you are getting.

[MrFriendly]

I'm using Flash CS6, and greensock is accessable, I can't send over me FLA as it exceeds file size restrictions. 

 

SO here's my code, without the code you've supplied.

 

 

 

import com.greensock.*;

import com.greensock.TweenMax;

import com.greensock.easing.*;

import com.greensock.TimelineMax;

import com.greensock.plugins.*;

import flash.events.MouseEvent;

 

 

var timeline:TimelineMax = new TimelineMax();

 

timeline.append(TweenMax.to(text_mc, 1, {y:30, ease:Bounce.easeOut}),-2);

timeline.append(TweenMax.to(text_mc, 0.25, {alpha:0}));

 

timeline.append(TweenMax.from(background_mc, 0.25, {alpha:0}));

timeline.append(TweenMax.to(background_mc, 3, {y:-135, ease:Linear.easeNone})); 

timeline.append(TweenMax.to(background_mc, 0.25, {alpha:0}));

 

timeline.append(TweenMax.to(text2_mc, 1, {y:25, ease:Bounce.easeOut}));

timeline.append(TweenMax.to(text2_mc, 0.25, {alpha:0}),2);

 

timeline.append(TweenMax.to(background_mc, 0.25, {alpha:1}));

timeline.append(TweenMax.to(background_mc, 3, {y:4,x:-135, ease:Linear.easeNone})); 

timeline.append(TweenMax.to(background_mc, 0.25, {alpha:0}));

 

 

timeline.append(TweenMax.to(text3_mc, 1, {y:30, ease:Bounce.easeOut}));

timeline.append(TweenMax.to(text3_mc, 0.25, {alpha:0}),2);

 

timeline.append(TweenMax.to(background_mc, 0.25, {alpha:1}));

timeline.append(TweenMax.to(background_mc, 3, {y:-185,x:-225, ease:Linear.easeNone})); 

timeline.append(TweenMax.to(background_mc, 0.25, {alpha:0}));

 

timeline.append(TweenMax.to(text4_mc, 1, {y:25, ease:Bounce.easeOut}));

timeline.append(TweenMax.to(text4_mc, 0.25, {alpha:0}),4);

 

timeline.append(TweenMax.to(footer_mc, 0.2, {y:45}));

timeline.append(TweenMax.to(outnow_mc, 0.4, {y:10, ease:Circ.easeOut})); 

timeline.append(TweenMax.to(logo_mc, 0.4, {y:5, ease:Circ.easeOut}));

timeline.append(TweenMax.to(purchase_mc, 0.4, {y:10, ease:Circ.easeOut})); 

timeline.append(TweenMax.to(cover_mc, 0.7, {x:415})); 

timeline.append(TweenMax.to(console_mc, 0.7, {x:480}));

 

timeline.appendMultiple(TweenMax.allTo([button1_btn, Button2_btn, buyinfo_mc], 0.7, {x:580}));

 

 

 

[Carl]

Strange... and no errors?

 

Here is the fla with latest GSAP v12.0.13

 

 

coins_CS_withGSAP12.zip

[MrFriendly]

No errors in my code.

 

Ok so when I open your new coins_cs... it works properly in flash now. Im struggling to amalgamate both bits of code.  I'm lost.