Decreasing lag in simple horizontal slide

[LanLing]

Hi I was wondering if the amount of lag in TweenLite for a simple horizontal tween would be less than just using default actionscript code?

I'm trying to make a horizontal banner slide slowly across the screen, then when it gets to the last bit reset the position to the starting point and continue sliding:

 

private function slideShow():void {
  menuLeftSide.mainMenuSlideShow.addEventListener(Event.ENTER_FRAME,onEnterFrameSlide);

  function onEnterFrameSlide(e:Event):void {

   if (menuLeftSide.mainMenuSlideShow.x <= -1406) {  //when it slides to last bit of image
 menuLeftSide.mainMenuSlideShow.x = 1000; //bring it all the way to the right and slide again
   }

   menuLeftSide.mainMenuSlideShow.x -= 1; //slide direction is left
  }
 }

 

This works, however it is slightly laggy. Not extremely noticeable but I'd expect no lag for a super-simple animation like this.

Does TweenLite have something like this and is it more system-efficient and less laggy?

[GreenSock]

I don't see anything horribly wrong with your code (although nested functions are generally frowned upon in ActionScript) and it should perform fine, BUT the down side is that your movement is tied to the frame rate. So if the fps drops, your animation will slow down too (take longer to complete). TweenLite and TweenMax are time-based, so they are much more consistent. If the frame rate drops, they just make up the difference on the next render. I doubt TweenLite or TweenMax would be any easier on the CPU than your existing code, but they would be more reliable in terms of the overall speed of the object and completion time.

 

I hope that helps.

 

Just out of curiosity, have you tried it with TweenLite? Did it perform better for you?

[LanLing]

I'm not sure how to add the x position checker with TweenLite, so that its x position resets to 1000 when x is <-1406.

 

private function slideShow():void {
  TweenLite.to(menuLeftSide.mainMenuSlideShow,10,{x:-1400});
 }

[GreenSock]

Couldn't you just start it at 1000 and then loop the tween?

 

Either use TweenMax and set the repeat to -1 (infinite) or use TweenLite and use an onComplete to call a function that restarts the tween (restart()).

[LanLing]

Yeah I get the logic but I'm not exactly sure about the code... like what is the syntax for the onComplete?

This is what I have but I don't think is right:

TweenLite.to(menuLeftSide.mainMenuSlideShow,5,{x:-1400,
onComplete:menuLeftSide.mainMenuSlideshow.x,
onCompleteParams:[1000]});

[GreenSock]

Nope, all you need to do is restart the tween (assuming you start at 1000 and that's where you want it to loop back to)...

 

var tween:TweenLite = TweenLite.to(menuLeftSide.mainMenuSlideShow, 5, {x:-1400, onComplete:loop});
function loop():void {
tween.restart();
}

[LanLing]

Hmm using your function for some reason the tween starts out at really fast speed then gradually slows down to a speed of 0...

[GreenSock]

Yes, the default ease is a Quad.easeOut because that's a more natural motion (for most animations) but you can get a linear movement by adding ease:Linear.easeNone to your vars parameter:

 

var tween:TweenLite = TweenLite.to(menuLeftSide.mainMenuSlideShow, 5, {x:-1400, ease:Linear.easeNone, onComplete:loop});
function loop():void {
tween.restart();
}

 

And of course don't forget to import the com.greensock.easing.Linear class.

[LanLing]

Thanks works great. But still the same amount of lag as using the other function... hmm probably is because I got too much stuff running at same time then.

[GreenSock]

One other performance-improving thing to try is BlitMask. http://www.greensock.com/blitmask/

[LanLing]

But BlitMask can only create a rectangular mask right? My mask is an irregular shape and I use a png for it.

[GreenSock]

Yep, you're correct but one thing you could try (and I don't know if this would improve performance or not, but I think it's worth a shot) is to wrap your scrolling object in a Sprite. Inside that Sprite, you apply a BlitMask that's only as big as the screen (or the area you need visible). Then apply your PNG mask to that container Sprite. That way, Flash doesn't need to keep recalculating and rendering the pixels that fall outside the mask. You're essentially clipping the area that you need masked.

 

Beware that scrolling large objects, ESPECIALLY with a mask is very processor-intensive. That has nothing to do with the tweening engine of course - it's just a graphics rendering issue in Flash.

[LanLing]

Thanks for suggestion, I'll just use the TweenLite method, I think I got too much stuff going on nothing's gonna save it from lag.

Hmm how do I stop this animation when I go to another page? If I use the old AS method, I can use removeeventlistener when I go to another page:

 

menuLeftSide.mainMenuSlideShow.removeEventListener(Event.ENTER_FRAME,onEnterFrameSlide); //stop sliding picture
delegate.beginStory();

[Carl]

tween.pause();

[GreenSock]

Or you can kill all the tweens of a particular object like this:

 

TweenLite.killTweensOf(myObject);

 

Which can be slightly more user-friendly because you don't need to keep a reference of the tween on-hand. Carl's pause() recommendation, however, would allow you to resume() that same tween anytime. That can be handy, but if you're just looking to kill the tween completely and aren't worried about using it later, use kill() or killTweensOf() like above.

[LanLing]

Thank you carl and GreenSock. I'm going to use killTweensOf since I need to reset the position of the slideshow anyways.