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

[zerocool35]

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)
  

Quote

//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)

.call(TellDirectorFinished);

 

 

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.        

 

[Carl]

please see: http://greensock.com/forums/topic/14260-spinning-reel-using-timelinemax-user-press-stop-need-to-to-finish-animation/?p=60733