Yogendra Sharma

Reel spinning using TweenLite not smooth when it slow in AS3

Recommended Posts

When I spinning the reel using tween-Lite plugin reel spinning is not look smooth specially when movement is slow(Slot Game).

when reels slow its show jerky kind of movement in reel spinning.Any help or suggestion please welcome.

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

It is difficult to understand what you are referring to with the information provided.

It is best to provide a limited CodePen or jsFiddle example so we can see the result and tinker with the code as explained here:

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

If that is not possible, a link to whatever it is you are working will help a little.

Share this post


Link to post
Share on other sites

Sorry, I just realized you posted in the Archived Flash forum. 

 

Do you have a reduced fla that you can zip and attach here (use the "more reply options" button).

Share this post


Link to post
Share on other sites

I'd suggest trying the TransformMatrixPlugin because it works around Flash's odd performance with rotation and makes it super smooth. For some reason, Flash seems to snap regular "rotation" values in terms of rendering only. Slap the TransformMatrixPlugin on there and you should notice it being smoother. transformMatrix:{rotation:60} for example. Don't forget to load/activate the plugin. 

 

http://greensock.com/asdocs/com/greensock/plugins/TransformMatrixPlugin.html

  • Like 1

Share this post


Link to post
Share on other sites

I am facing same issue here. Did you get any solution for this unable to attach my FLA because not seeing any attach link but i can give you the steps.

 

1) import around 5 images and put it vertically.

2) make all the 5 image as moviclip name it "reel".

3) put the reel moviclip top of the stage

4) past the below code on the time line

 

below is my code:

 

import com.greensock.TweenLite;
import com.greensock.plugins.*; 
TweenPlugin.activate([TransformMatrixPlugin]); 
TweenLite.to(reel, 22, {transformMatrix:{y:-4.5}}); 
 
 
you will see that image is vibrating and some time one line is appearing for a while. Please see and let me know where I am wrong in it. 

Share this post


Link to post
Share on other sites

You can attach files by clicking the "more reply options" button below. And make sure you zip your fla before posting (for security reasons). 

 

I wonder if maybe you have a filter applied to your object which forces pixel snapping (cacheAsBitmap) in Flash (which has nothing to do with GSAP). To get around that, you could try nesting your object inside another one, thus you're animating an element that doesn't have cacheAsBitmap turned on, but I'm not 100% sure that'll solve things for you (I haven't worked in Flash for years). The TransformMatrixPlugin solution was intended for rotation.

Share this post


Link to post
Share on other sites

thanks for the FLA, there is really nothing you can do in your code or we can do in ours to get around that slight jitter at the end.

 

 

the issue i believe is just related to the fact that towards the end of the very long tween, the ease out ease is generating EXTREMELY small values (very little change in each update). So you may literally only be moving the image .003 pixels at a time and Flash probably doesn't render at that fidelity. Since the tween is so long (duration) there is a lot of time where you are seeing the image move virtually nowhere and probably snapping to half-pixels or something.

 

Try to do the same animation with an ENTER_FRAME or other tween library. Fairly confident you will get the same results.

 

to minimize the impact: shorten the duration of the tween or crank up the frame rate to get more renders in. when I changed the fps to 60 it looked a little better.

  • Like 1

Share this post


Link to post
Share on other sites

I know this is an old thread, but the workaround I found was to use a delayCall to kill the tween when you need it to stop spinning. For example, my prize wheel uses the Expo ease to slow to a halt over 20 seconds.  The last 5 seconds are so minor that Flash isn't rendering the frames, then it just jumps to the last frame. it took some trial and error, but setting a delayCall for 15.5 seconds kills the tween just as it's slow enough to not notice. 

 

TweenLite.delayCall(15.5, killSpin);

function killSpin(){

TweenLite.killTweensOf(_wheel);

}

 

I hope that helps someone!

Share this post


Link to post
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.