Infinite Tween on a Linear Path

[Fitchett Developments]

Hey guysso this is probably really easy and sorry ahead of time if this is a Repost.

 

So im very new to this ive been reading up on how to use tweenLite and Max but im still really confused.

 

So i have a MovieClip that gets added to stage when the user pushes play Game.

 

I want this MovieClip to move Up and Down in a Linear path i want it to go on a infinite amount of times.

My stage height is 480 if this is needed. I've tried this but it only goes up and doesnt come back down TweenMax.to(this, 5, { y: -480, yoyo:2 } ); 

 

What do i need to do to make it reverse its path and keep repeating this path?

[jamiejefferson]

TweenMax.to(this, 5, { y:-480, yoyo:true, repeat:-1 } );

 

yoyo is just to define whether the direction of every second repeat should reverse, and repeat:-1 = infinite repeats. Without any value for repeat the tween will stop at the end of it's first 'cycle' and won't have a chance to yoyo back to the starting value.

 

Take a look at the TweenMax API if this isn't clear, there's a bit more explanation there.

[Fitchett Developments]

Yeah i understand thanks alot for explaining. I tried your solution but it still does the exact same thing and keeps going up and up.

 

Im not sure if this is a problem but i also add my child to the stage like so

 

MovieClip.x = (stage.stageWidth /2) -280;

MovieClip.y = (stage.stageheight /2);

[GreenSock]

Jamie's suggestion was exactly correct - but you're saying it doesn't go back and forth even though you set repeat:-1 and yoyo:true? Would you mind zipping up a very simple FLA that clearly demonstrates the issue and post it here (or a link to download the file somewhere)? I'm really curious to see it not working. I'm sure we can figure it out once we see your file. Again, the simpler the better (no need to post your production files)

[Fitchett Developments]

Sure that sounds great!

 

Where could i upload it on here at?

[jamiejefferson]

Next to the Post button press More Reply Options for the upload option. If 500kb is not enough, maybe think about simplifying the demo even further, otherwise you might use a free service like ge.tt and post the link here.

[Fitchett Developments]

Here is the File my other Fla were exported for AIR, so i just did the exact same thing in a new FLA. It's doing the exact same thing.

 

 

TweenError.zip

[jamiejefferson]

Ah right I thought this might have been the issue (in fact I thought I had already posted this but I guess not).

 

Your original setup:

private function init():void 
{
    addEventListener(Event.ENTER_FRAME, goalLoop);
}
 
private function goalLoop(e:Event):void 
{
    TweenMax.to(this, 4, { y:4, yoyo:true, repeat:-1 } );
}

You are re-creating the tween on every ENTER_FRAME event which is continually overwriting the initial tween. Every frame you are telling TweenMax to create a tween from the box's current y to 4, and every frame it is getting ever closer to 4. It never gets a chance to repeat as each tween only exists for 1 frame. At the end you are still calling TweenMax every frame, but it will just be creating tweens from y:4 to y:4 forever...

 

Try this:

private function init():void
{
    TweenMax.to(this, 4, { y:4, yoyo:true, repeat:-1 } );
    addEventListener(Event.ENTER_FRAME, goalLoop);
}

private function goalLoop(e:Event):void
{
    // other stuff
}

Also I noticed you are using GSAP v11: I'd definitely recommend moving to v12 if you haven't made a huge commitment to v11 at this point. v12 has a TON of awesome improvements and API tweaks that you'll probably want to take advantage of.

[Fitchett Developments]

You have been an amazing help man. Thanks so much for the explanation as well makes a lot of sense now. Also makes sense for other issues i have in my actual porject. Im trying to create levels but having a difficult issue maybe its due to the fact that each level is repeating every frame like you stated above due to the event loop i initiate.

 

I have one more little problem though when i add this piece of code:

 

TweenMax.to(this, 2, {y:-480, yoyo:true, repeat:-1 } );

 

It works fine, but it goes off the screen in the -y coordinate it comes back down to thee positive y just fine and stays in the screen but not the opposite.

 

Maybe i have the y:-480 wrong? I thought that i need that since my stage height is 480 any suggestions on how to keep it frm leaving the stage?

[Fitchett Developments]

I was thinking maybe i need to remove the stage.stageheight / 2; and do this instead:

 

mGoal_1.x = (stage.stageWidth / 2) + 300;
 mGoal_1.y = (stage.stageHeight);

 

 

then adding this:

 

TweenMax.fromTo(this, 1, {y:-480}, {y:480, yoyo:true, repeat:-1 } );

 

Instead of this:
          

TweenMax.to(this, 1, { y:-480, yoyo:true, repeat:-1 } );

 

 

*****Fix*****

 

So i think i understand what im doing wrong this seemed to work:

 

TweenMax.to(this, 1, {y:40, yoyo:true, repeat:-1 } );

 

So when we change the y value we are just telling it to move 40 pixels?

 

still though when i change the code to this it does this bouncy effect when it hits the bottom of the stage and goes up then when it comes back down it bounces back up so on and so on. But it doesnt bounce when it hits the top of the stage

[Carl]

Hi,

 

Your last 2 posts are a bit hard to follow.

 

A few things to note

 

 

TweenMax.to(this, 1, {y:40, yoyo:true, repeat:-1 } );

 

So when we change the y value we are just telling it to move 40 pixels?

 

No. You are telling the object to move to a y value of 40. If the objects y value is 30 prior to the tween running, the object will only move 10px.

 

If you want the object to move 40px from its existing position you would create a relative tween by passing in your target value as a String like so

 

 

TweenMax.to(this, 1, {y:"+=40", yoyo:true, repeat:-1 } );
 

If the target object has a y value of 30 prior to that tween running, the tween will move the object to a y value of 70px. in essence you are adding 40px to the current value over the course of the tween.

 

In your other examples where you did:

 

 

TweenMax.to(this, 1, { y:-480, yoyo:true, repeat:-1 } );
 

the object would move 480 pixels above the stage, not 480 pixels from its current position (which I assume was the bottom of the stage). 

 

Also if you are trying to tween an object that moves from the top edge of the stage to the bottom of the stage, you need to keep in mind where the registration point of your symbol is, as it dictates where the y value is taken from. From looking at your box movieclip its artwork is haphazardly positioned so that the reg position is sort of in the center which makes it difficult to assess what the y values should be. You may want to adjust that symbol so that the registration point is exactly in the top-left corner or dead center.

 

Currently, box would need have a y of 22 to have its top edge aligned with the top of the stage and a y of 374 to have its bottom edge sitting on the bottom of the stage. 

 

I don't know exactly what the end result of your file should be, but to see the box move from top to bottom repeatedly, do this once (not in a loop) inside box.as

 

 

 

this.y = 22
TweenLite.to(this, 2, {y:374, repeat:-1, yoyo:true});
 

 

Hopefully this helps a bit.

 

 

 

 

 

[Fitchett Developments]

Yeah it helped but im still confused by why it bounces? I'm not sure if your following me but it does move up the stage nicely but when it comes back to the bottom it bounces then moves back up like a gravity type environment.

[jamiejefferson]

The default ease if you don't specify one in your tween is Power1.easeOut. This starts the tween fast and gradually slows down towards the end. When you repeat with yoyo, the tween uses the exact same values but in reverse, so the ease won't be affected (the yoyo will start out slow and speed up towards the end). This would look like a bouncing effect as one end of the tween will slow to a stop, then speed up again, and the other end will be an abrupt change in direction.
 
If you are after a smooth sine wave style motion, you can add ease:Power1.easeInOut to your tween (or any other power level (0-4) depending on how strong you want it).

TweenMax.to(this, 2, {y:0, repeat:-1, yoyo:true, ease:Power1.easeInOut});

[Fitchett Developments]

Yes!! That is exactly what i was looking for. You have been more than helpful.

 

It wasnt working when i had it on TweenLite but it does the trick on TweenMax.

 

Thanks again man.   So by using GSAP will this boost overall performance? or Optimization?

[jamiejefferson]

Ah sorry that one snuck in there: repeat and yoyo are only available in TweenMax (and TimelineMax) and won't have any effect in *Lite.

 

The other thing I didn't mention is that Power0-4 eases are only available in GSAP v12 - in v11 you would use Linear, Quad, Cubic, Strong etc.

[Fitchett Developments]

Oh okay thanks for the info. Yeah im using v12 and its working pretty good.