Jump to content

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

Spinning reel using TimelineMax, user press STOP, need to to finish animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Dear All,


Let me say that this is post I posted on the AS3/Flash forum but I guess the same principles apply here as well. I will just 'convert' the answer/logic to AS3 code if possible.


First let me thank you for any help you can provide and let me explain what the situation is like:

  • I have a number of elements/symbols/bitmaps that I set up on my flash stage (there can be as many as 30 elements)
  • I place the first 5 on stage one under another and the rest outside the stage, on top, so I create the rolling effect.
  • I have an array that I save all the element names in so I know which element is next etc.
  • Currently I construct the spin using Timelinemax and I spin it
  • User sees the first 5 elements and then it spins until the last 5 elements which I bounce a bit on finish ( I will provide the AS3 code after)


//Initial 5 elements

mytimeline.to(Strip[1],4,{y:ElementHeightOverlap+4*ElementHeight ,ease:Linear.easeNone})

.to(Strip[2],8,{y:ElementHeightOverlap+4*ElementHeight ,ease:Linear.easeNone},"-=4")

.to(Strip[3],12,{y:ElementHeightOverlap+4*ElementHeight ,ease:Linear.easeNone},"-=8")

.to(Strip[4],16,{y:ElementHeightOverlap+4*ElementHeight ,ease:Linear.easeNone},"-=12")

.to(Strip[5],20,{y:ElementHeightOverlap+4*ElementHeight ,ease:Linear.easeNone},"-=16");//.call(SpinDuringStartSound,[],SpinDuringStartFrame);


// Middle of the strip

mytimeline.staggerTo(ElementStrip, 24, {y:ElementHeightOverlap+4*ElementHeight ,ease:Linear.easeNone}, 4,0).call(ColumnStopSound,[],"-=" + ColumnStopSoundFrames)

.call(SpinDuringStopSound,[],"-=" + (ColumnStopSoundFrames-15));


// Last 5 elements

mytimeline.to(Strip[NumberOfElements-4],20,{y:ElementHeightOverlap+3*ElementHeight ,ease:Linear.easeNone},"-=20")

.to(Strip[NumberOfElements-3],16,{y:ElementHeightOverlap+2*ElementHeight ,ease:Linear.easeNone},"-=16")

.to(Strip[NumberOfElements-2],12,{y:ElementHeightOverlap+ElementHeight ,ease:Linear.easeNone},"-=12")

.to(Strip[NumberOfElements-1],8,{y:ElementHeightOverlap ,ease:Linear.easeNone},"-=8")

.to(Strip[NumberOfElements],4,{y:-ElementHeight+ElementHeightOverlap ,ease:Linear.easeNone},"-=4");


//Bounce Down ,"-=" + BounceFrames)

mytimeline.to(Strip[NumberOfElements-4],BounceFramesDown,{y:ElementHeightOverlap+3*ElementHeight+BounceDistance ,ease:Back.easeOut, easeParams:[1]})//,"-=4")

.to(Strip[NumberOfElements-3],BounceFramesDown,{y:ElementHeightOverlap+2*ElementHeight+BounceDistance ,ease:Back.easeOut, easeParams:[1]},"-=" + BounceFramesDown)

.to(Strip[NumberOfElements-2],BounceFramesDown,{y:ElementHeightOverlap+ElementHeight+BounceDistance,ease:Back.easeOut, easeParams:[1]},"-=" + BounceFramesDown)

.to(Strip[NumberOfElements-1],BounceFramesDown,{y:ElementHeightOverlap+BounceDistance,ease:Back.easeOut, easeParams:[1]},"-=" + BounceFramesDown)

.to(Strip[NumberOfElements],BounceFramesDown,{y:-ElementHeight+ElementHeightOverlap+BounceDistance,ease:Back.easeOut, easeParams:[1]},"-=" + BounceFramesDown);


//Bring them back at right spot

mytimeline.to(Strip[NumberOfElements-4],BounceFramesUp,{y:ElementHeightOverlap+3*ElementHeight ,ease:Back.easeOut})

.to(Strip[NumberOfElements-3],BounceFramesUp,{y:ElementHeightOverlap+2*ElementHeight ,ease:Back.easeOut},"-=" + BounceFramesUp)

.to(Strip[NumberOfElements-2],BounceFramesUp,{y:ElementHeightOverlap+ElementHeight,ease:Back.easeOut},"-=" + BounceFramesUp)

.to(Strip[NumberOfElements-1],BounceFramesUp,{y:ElementHeightOverlap,ease:Back.easeOut},"-=" + BounceFramesUp)

.to(Strip[NumberOfElements],BounceFramesUp,{y:-ElementHeight+ElementHeightOverlap,ease:Back.easeOut},"-=" + BounceFramesUp)




Here is when I need YOUR help. The user will be able to press a STOP button. Meaning I would like to shorten the animation in this way:

  • Let's say the number of elements is 30. And the user presses STOP when the animation is showing elements 10-15. I want AS3 to insert at elements 16-20 my ORIGINAL last 5 elements (so basically elements 26-30). So the animation remains smooth and it stops at the same elements as it would stop if the user has not pressed STOP
  • Basically I would like to shorten the animation strip and replace the last 5 elements to match my original 5 elements.
  • I do not want to jump to the end of the 30 element animation because then the elements on stage (10-15) will change to elements #20-25 and the user will see this.


In a more visual way, to understand better:

  • My original strip is 1,2,3,4,5,...,26,27,28,29,30
  • Strip starts animating
  • User presses STOP when on stage you see elements 10,11,12,13,14,15
  • Animation now how to reconstruct the strip like this: 1,2,3,4,...,15,26,27,28,29,30
  • So after element 15, it will be element 26 and animation will get ready to stop

I hope I made the problem clear, it has been bugging me a lot lately to find a solution and I hope someone can help me from this forum. If you need more information please let me know


Thank you again.   :ugeek:   :shock:   8-)


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.