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

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.