Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MrFriendly

producing a falling coins effect, using one image

Recommended Posts

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

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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}));
 
 
 
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×