# zerocool35

Members

6

## Posts posted by zerocool35

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

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

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

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.

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

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.

### Slot machine, 5 columns with different distances

You are absolutely right Carl. Thank you

### Slot machine, 5 columns with different distances

Thank you Carl for the reply. I tried running your code and keep getting an error.. So I made it simpler and I still get an error..

I have this in AS3:

import com.greensock.*;
import com.greensock.easing.*;
var timeline:TimelineMax = new TimelineMax();
timeline.to(C19, DurationInFrames, {useFrames:true,y:C19.y + newNumber,ease:Linear.easeNone});

The above looks pretty simple and should work. But I get this error in the compiler:
Scene 1, Layer 'Actions', Frame 1, Line 100 1061: Call to a possibly undefined method to through a reference with static type com.greensock:TimelineMax.

Which is pretty strange since "to" is a method of TimelineMax (same error for TimelineLite)

Not sure why it's not working. COM folder exists with all the AS3 files etc.

### Slot machine, 5 columns with different distances

First of all let me say it's a pleasure finding out about GreenSock and I am looking forward integrating your products (Blitmask and TweenMax) to my projects.

THE SITUATION IS AS FOLLOWS:

I am making a video slot machine games. 4 rows x 5 columns. Each column represents a Blipmask object. I have 5 BIG elements strips (about 42 elements on the strip) and I use Blitmask(blitmask has dimensions width of element x (4 x height of element) and TweenMax to scroll them. 1st column stops after it traveled the distance of 12 elements, 2nd column stops after it traveled the distance of 17 elements and each column after that, 5 elements added. The last column stop after it travelled 32 elements

MY PROBLEM:

1) I want as soon as SPIN button is pressed, the 5 blitmasks to start spinning at the same speed

2) At the end of each tween I want a bouce effect that uses only a few frames for it (regardless of the duration of the tween). I am using frames in my tween as duration parameter. So for example the 1st column runs for 100 frames, I want the bounce effect to be the last 10 frames. For the last column that runs let's say X frames I still want the bounce effect to be 10 frames. So easing out to be irrelevant of duration.

3) I want the bouncing/easeOut to be sudden and not smooth. I prefer minimal deacelleration in the end (Imagine a real world slot machine - it stops very sudden)

4) Finally, I want the sliding speed to be the same for all columns. I adjust the duration accordingly to make sure that the stopping of columns will happen at regular intervals.

I tried many easing out techniques but nothing seems to work and satisfy ALL the above requirements. If anyone has some suggestions please feel free to help.

Thank you for reading this and trying to help

×