Easy tweening question

[vdubplate 0 Likes (Newbie)]

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?

[Carl 10,819 Likes (Superhero)]

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

[vdubplate 0 Likes (Newbie)]

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?

[vdubplate 0 Likes (Newbie)]

Nobody?

 

I just need to get a seamless rotation on rollover

[Carl 10,819 Likes (Superhero)]

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

[vdubplate 0 Likes (Newbie)]

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

[vdubplate 0 Likes (Newbie)]

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.

[vdubplate 0 Likes (Newbie)]

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;

 

}

[GreenSock 16,949 Likes (Superhero)]

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.

[vdubplate 0 Likes (Newbie)]

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?

[GreenSock 16,949 Likes (Superhero)]

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

[vdubplate 0 Likes (Newbie)]

Sweet, I'll give that a try right now

[vdubplate 0 Likes (Newbie)]

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

[vdubplate 0 Likes (Newbie)]

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

[Carl 10,819 Likes (Superhero)]

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

[vdubplate 0 Likes (Newbie)]

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.