# 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;

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?

##### 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});`

##### 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?

##### Share on other sites

Nobody?

I just need to get a seamless rotation on rollover

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

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();`

##### Share on other sites

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

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

##### Share on other sites

This is the effect that I want to achieve:

// Add Listener to the Rotate Button

function rotateButtonOver(evt:MouseEvent):void {

// Add ENTER_FRAME Event Listener to the stage

}

function startRotate(evt:Event):void {

// Call function rotateSquare

rotateSquare();

}

function rotateSquare():void {

// Rotate the MovieClip

mc2_mc.rotation += 10;

}

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

##### 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?

##### 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( ... );
...

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

##### Share on other sites

Sweet, I'll give that a try right now

##### 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( ... );`

##### 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)
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}));
```

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

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