Jump to content
GreenSock

mhigley

AS3 continuous rotation

Recommended Posts

I'm finally having to incorporate conditionals into my flash projects allowing for more interactivity and my inexperience is starting to show. On the stage is a ninja and when the button is rolled over, he spins his staff. What I'm needing to do is if the user rolls off of the button then quickly back on to the button, determine the remaining rotation and pickup where it left off seamlessly. Try out my .swf and notice how if you roll over the button quickly the staff keeps restarting from the zero position.

 

I think I'm off to a good start with a rotation parameter reset on both the ROLL_OVER and ROLL_OUT which resets the image back to 0. But from there things get kinda murky in the "well if it's greater than this... do this..." areas.

 

If there's anyone that can assist me with my conditional logic, I'd really appreciate it.

 

JR

 

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;

test_btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver);
test_btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut);


function onBtnOver(e:MouseEvent):void
{
if(rotationZ == 0)
{
	TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick});
}
else if(rotationZ == 360)
{
	TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick});
}
else if(rotationZ > 0)
{
	TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone});
}
}
function spinStick():void
{
TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone});
}
function onBtnOut(e:MouseEvent):void
{
if(rotationZ == 0)
{
	TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick});
}
else if(rotationZ == 360)
{
	TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick});
}
else if(rotationZ > 0)
{
	TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone});
}
}

Link to comment
Share on other sites

Here's a considerably stripped down version of my previous script that eliminates all the conditional statements, and it causes another problem that I didn't notice the first time around. In this script the user rolls over the button and the staff starts to spin... but as soon as the button is rolled off of, it starts the tween duration time at the current position which in effect slows the spinning staff speed. Can the remaining time be inherited instead of starting over? I hope I'm describing myself clearly enough to be understood. I'm attaching the new code and the new .swf at the bottom. Thanks again.

 

JR

 

import com.greensock.*;
import com.greensock.plugins.*;
import com.greensock.easing.*;

test_btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver);
test_btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut);


function onBtnOver(e:MouseEvent):void
{
TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick});
}
function spinStick():void
{
TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone});
}
function onBtnOut(e:MouseEvent):void
{
TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone});
}

Link to comment
Share on other sites

How about if you just use play() and reverse() on the same tween and simplify your code like this:

 

test_btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver);
test_btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut);

var spinTween:TweenMax = TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone, paused:true});;

function onBtnOver(e:MouseEvent):void {
spinTween.play();
}
function onBtnOut(e:MouseEvent):void {
spinTween.reverse();
}

Link to comment
Share on other sites

How about if you just use play() and reverse() on the same tween and simplify your code like this:

 

I like the simplicity of that (and I haven't thought about putting complete tweens into a variable before)...

but I need the staff to continue to it's starting point event if the user rolls off of the button. Any other ideas?

 

JR

Link to comment
Share on other sites

Oh, sure, then you could just do something like:

 

test_btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver);
test_btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut);

var spinTween:TweenMax = TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone, paused:true, onComplete:resetTween});

function onBtnOver(e:MouseEvent):void {
  spinTween.play();
}
function resetTween():void {
  spinTween.gotoAndStop(0);
}

Link to comment
Share on other sites

...

function resetTween():void {

spinTween.gotoAndStop(0);

}

 

I keep getting an error when I use this code. 1061: Call to a possibly undefined method gotoAndStop through a reference with static type com.greensock:TweenMax.

 

Does using this method imply that I have to use frames?

Link to comment
Share on other sites

No no, sorry, my bad - I was thinking TimelineMax. You can just do this instead:

 

spinTween.currentTime = 0;
spinTween.pause();

 

That does the same thing;

Link to comment
Share on other sites

I think this is going to work for me. Thanks so much for your help. If i could bug you for one more thing...

 

TweenMax is still very new to me and I'm just breaking into all the properties that it can address, and it's duration is something that really interests me. I saw you used currentTime to reset it's duration after a tween completed. How would you recommend I write a variable to determine where it is currently and be able to pick up from where it left off in another tween?

 

example:

Two objects are placed on the stage, a square and a triangle. The square is set for a 360 degree rotation over 5 seconds. The user clicks a button to start the rotation and clicks another button stopping it's spin at 3.5 seconds. The remaining time is then applied to the triangle spinning it a complete 360 degrees in the left over 1.5 seconds from the square.

 

I imagine this is probably done with some Trig... can you provide me a little more assistance, or possibly forward a link that you recommend that could guide me? Thanks again for all your help. :D

 

JR

Link to comment
Share on other sites

No trig necessary. In that example scenario, you'd just do:

var totalDuration:Number = 5;
var squareTween:TweenLite;

function onClickStart(event:MouseEvent):void {
   squareTween = TweenLite.to(square, totalDuration, {rotation:360});
}
function onClickStop(event:MouseEvent):void {
   squareTween.kill();
   var duration:Number;
   if (squareTween != null && squareTween.currentTime         duration = totalDuration - squareTween.currentTime;
   } else {
       duration = totalDuration;
   }
   TweenLite.to(triangle, duration, {rotation:360});
}

Link to comment
Share on other sites

Wow!!

 

Thank you so much!

 

That's the kind of code I haven't been able to adequately wrap my brain around yet. This is going to be hugely beneficial for me to study and learn from. Thank you again for all your help!! :mrgreen:

 

JR

(a very appreciative Green coder)

Link to comment
Share on other sites

I just noticed a couple of typos in my pseudo code example above, so I edited it. Sorry 'bout that.

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