Jump to content
GreenSock

vdubplate

Easy tweening question

Recommended Posts

I have a question that should be easy to answer. I have a round wheel for example that I need to have rotate on repeat when the user mouses over. I checked the documentation and it says if you want something to tween on repeat that you add -1. For my example the code looks like this:

 

[as]

import com.greensock.*;

import com.greensock.easing.*;

import flash.events.Event;

import flash.events.MouseEvent;

 

b2.addEventListener(MouseEvent.ROLL_OVER, Expand);

function Expand(e:MouseEvent):void

{

TweenMax.to(b2, -1, {rotation:360});

}

[/as]

 

 

THE PROBLEM: If you were to try my code nothing happens to the movieclip(b2). If you were to set it to 3 it will rotate. The hight you set the number the slower the rotation.

THE QUESTION: How do i set the code up so that the rotation repeats at a specific speed and doesn't ease?

Link to comment
Share on other sites

where you have the -1 is where the duration of the tween is set.

 

when you set it to 3 that meant that the 360 degree rotation would take 3 seconds.

 

what you want will look like this:

 

TweenMax.to(b2, 1, {rotation:360, repeat:-1, ease:"Linear.easeNone});

Link to comment
Share on other sites

Thansk for the quick response.

That is almost the result im looking for. What the result of that is, is start stop start stop.

How would I get the animation to continue spinning at steady rate?

Link to comment
Share on other sites

Nobody?

 

I just need to get a seamless rotation on rollover

Link to comment
Share on other sites

What the result of that is, is start stop start stop.

 

i guess you are rolling over and off the b2 many times and re-creating your tween each time.

 

 

you could create your tween outside of your function

 

var spin:TweenMax = new TweenMax.to(b2, 1, {rotation:360, repeat:-1, ease:"Linear.easeNone, paused:true});

 

 

then inside your button code just do

 

spin.play();

Link to comment
Share on other sites

You might be right. I might have to make a bigger hit state

Link to comment
Share on other sites

I revisited this this morning and its still a no go. With either piece of this code there seems to be an ease out applied or at least thats what it looks like.

The tween doesn't stay at a continuous velocity.

Link to comment
Share on other sites

This is the effect that I want to achieve:

 

// Add Listener to the Rotate Button

mc2_mc.addEventListener(MouseEvent.MOUSE_OVER, rotateButtonOver);

 

function rotateButtonOver(evt:MouseEvent):void {

// Add ENTER_FRAME Event Listener to the stage

addEventListener(Event.ENTER_FRAME, startRotate);

}

 

 

function startRotate(evt:Event):void {

// Call function rotateSquare

rotateSquare();

}

 

 

function rotateSquare():void {

// Rotate the MovieClip

mc2_mc.rotation += 10;

 

}

Link to comment
Share on other sites

How about just doing a relative tween?

 

TweenMax.to(b2, 35, {rotation:"350", useFrames:true, repeat:-1, ease:Linear.easeNone});

 

Notice the value is in quotes which makes it relative.

 

The above tween makes it go 10 degrees on each frame and I only made it go to 350 so that when it starts over again, it looks like it is continuing. If it went to 360, it would look like it stops for 1 frame because 360 degrees is the same as 0; the beginning and the end would be identical, two frames in a row. Not good. Well, not continuous at least.

Link to comment
Share on other sites

Thanks for the reply. I'll give that a try tomorrow.

If you don't mind me asking another question.

Say I had a set of Tweens that I wanted to run in a specific order. I know I can use timeline lite to do this but what I need to do is play this chain of animations until someone hovers over them. How would I break out of the order and move to a new function?

Link to comment
Share on other sites

Say I had a set of Tweens that I wanted to run in a specific order. I know I can use timeline lite to do this but what I need to do is play this chain of animations until someone hovers over them. How would I break out of the order and move to a new function?

That should be relatively simple - just hang onto a reference of the TimelineMax and then kill() or pause() it.

 

var tl:TimelineMax = new TimelineMax({repeat:-1});
tl.append( ... );
//append your tweens here
...

function rollOverHandler(event:Event):void {
   tl.pause();
}
function rollOutHandler(event:Event):void {
   tl.resume();
}

Link to comment
Share on other sites

Sweet, I'll give that a try right now

Link to comment
Share on other sites

So would it look something like this?

 

var tl:TimelineMax = new TimelineMax({repeat:-1});
tl.append( ... );
timeline.append(TweenLite.to(b2, 2, {scaleX:1, scaleY:1, rotation:360});
timeline.append(TweenLite.to(b3, 2, {scaleX:1, scaleY:1, rotation:360});

 

I'm confused with

tl.append( ... );

Link to comment
Share on other sites

I figured out what I need to do with what you showed me but I'm still stumped on

tl.append( ... );

 

This is how I have my code set up and its workign good. IS there anything else I can do to streamline this:

 

b1.addEventListener(MouseEvent.ROLL_OVER, test)
b2.addEventListener(MouseEvent.ROLL_OVER, test)
b3.addEventListener(MouseEvent.ROLL_OVER, test)
b4.addEventListener(MouseEvent.ROLL_OVER, test)
function test(evt:Event):void{john.pause();}

var john:TimelineMax = new TimelineMax({repeat:-1});

john.append(TweenMax.to(b1, 1, {scaleX:1, scaleY:1, rotation:360}));
john.append(TweenMax.to(b1, 1, {scaleX:.8, scaleY:.8, rotation:-360}));
john.append(TweenMax.to(b2, 1, {scaleX:1, scaleY:1, rotation:360}));
john.append(TweenMax.to(b2, 1, {scaleX:.8, scaleY:.8, rotation:-360}));
john.append(TweenMax.to(b3, 1, {scaleX:1, scaleY:1, rotation:360}));
john.append(TweenMax.to(b3, 1, {scaleX:.8, scaleY:.8, rotation:-360}));
john.append(TweenMax.to(b4, 1, {scaleX:1, scaleY:1, rotation:360}));
john.append(TweenMax.to(b4, 1, {scaleX:.8, scaleY:.8, rotation:-360}));

Link to comment
Share on other sites

when people use "..." it just means "put your own code" here

 

the only thing you could do is possibly build your timeline with a loop:

 

var john:TimelineMax = new TimelineMax({repeat:-1});

for(var i:int = 1; i 
    john.append(TweenMax.to(this["b" + i], 1, {scaleX:1, scaleY:1, rotation:360}));
    john.append(TweenMax.to(this["b" + i], 1, {scaleX:.8, scaleY:.8, rotation:360}));

}

 

but with only 4 items that are being tweened it is by no means necessary

Link to comment
Share on other sites

Thanks guys this really helped me figure out an animation that I needed for a project at work. I'll be using these tips for the next projects as well.

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