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,

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

##### Share on other sites

Hello,

Very sorry for the delay. I really thought I had answered this last week and gave some tips. I guess it didn't go through.

I don't fully understand what you are trying to do from just reading the code and description. But I'm guessing its like a slot machine.

I modified one of my BlitMask demos to show you some of the concepts involved.

Here is the demo:

A tween always has a set start, end, and duration. If you want to interrupt that tween while it is playing and set a new end value you can using TweenMax.updateTo() but the problem here is that you are waiting for some user interaction so you need to have a starting tween with a very long time.

My approach was to

1. create a tween that repeats 1000 times
2. when the user hits the stop button I then
• calculate a variable for endProgress: a progress() greater than the current progress() that I know will land on a full number.
• tween the progress of my spinTween to the new endProgress

The code for this is as follows:

```import com.greensock.*;
import com.greensock.easing.*;
trace(TweenLite.version); //12.1.5

//displayObject,  x,  y,  width,  height, smoothing, autoUpdate, fillColor,  wrap

//dummy tween
var spinTween = TweenLite.to({}, 0, {});

function spin(event:MouseEvent):void {

spin_btn.visible = false;

//tween to the relative value of newNumber
spinTween = TweenMax.to(stripHolder_mc.strip1, 1, {y:"-=1000", repeat:1000, ease:Linear.easeNone});

}

function stopSpin(event:MouseEvent):void {

//spin 0.5 progress more from current value and ease out
var endProgress = Math.round((spinTween.progress() + 0.5)*10)/10;
trace("endProgress = " + endProgress);

spinTween.pause();
TweenLite.to(spinTween, 1.5, {progress:endProgress, onComplete:showBtn});

}

function showBtn(){
spin_btn.visible = true;
}

//http://www.snorkl.tv/2011/02/use-the-proper-function-for-random-numbers-or-else/

function randomNumber(min:Number, max:Number):Number {
//good
return Math.floor(Math.random() * (1 + max - min) + min);
}```

Even if you don't use a BlitMask, I'm sure you can tween the progress() of your timeline in the same way I handled spinTween.

Again, my apologies for not getting to this sooner. I truly hope that the demo and files I provided help.

This seems like a fairly complex project you are working. Please understand that our ActionScript support is extremely limited these days as we no longer promote or develop the tools. Our focus is entirely on the HTML5 / JavaScript side.

I have attached a zip containing an Animate CC Fla, greensock files and swf

• 2
##### Share on other sites

Thank you very much for the reply Carl.

Yes it is very much like a slot machine spin. I will give a good though on how you worked it out and give it a shot.

Appreciated..