TimelineMax Reversed with Multiple Images

[Amnesicat]

Hi,

I've created a simple image enlarger using TimelineMax by inserting images via a for loop and utilising the reversed method to re-position the images when they're clicked on again (see code).

When using this technique I've noticed a hiccup at the very beginning when you click to enlarge the image. It is almost like a stutter of some sort that hinders the smoothness of the image scaling transition. I can only just notice it on the desktop Flash player but it seems to be really noticeable on the Ipad when using Air. Strange thing though is that it doesn't happen when tweening one image, it's smooth as butter with no stutter at all.

The images are 580 x 670 pixels, but considering it doesn't happen when tweening one image I don't think bitmap size is the issue. So, perhaps it is something to do with the way I've inserted the images with the for loop. Am I not using it in the right manner? I'd appreciate any advice on the best way to utilise TimelineMax with this technique.
 
By the way I'm using GSAP v12 at an FPS of 60.
 

PS - These tools are absolutely amazing. They make life so much easier. Thanks so much for developing them

Thanks a lot.

 

import flash.events.MouseEvent;
import flash.events.Event;
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([TransformMatrixPlugin, ScalePlugin]);

var picArray:Array;
var len:int;
var mcTween:TimelineMax;

picArray = [pic01,pic02,pic03,pic04,pic05,pic06,pic07,pic08];
len = picArray.length;

for (var i:int = 0; i < len; i++)
{
	var stageX = stage.stageWidth / 2;
	var stageY = 350;
	picArray[i].addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
	picArray[i].mcTween = new TimelineMax({paused:true,reversed:true});
	picArray[i].mcTween.add(TweenMax.to(picArray[i],0.5,{transformMatrix:{x:stageX, y:stageY, rotation:0, scale:1}}));
}

function clickHandler(e:MouseEvent):void
{
	e.target.mcTween.reversed(!e.target.mcTween.reversed());
	e.target.mcTween.resume();
}

 

[Carl]

Hi,

 

I created a sample file using your code and my own images. It worked great. I couldn't discern any noticeable lag at all. I do have a very fast machine, but I don't see anything at all wrong with your code and am having trouble imagining what would be the problem. 

 

For troubleshooting AIR, have you tried smaller images? Is it only a problem with using transformMatrix? Have you tried just simple x/y positional tweens? How about a lower frame-rate?

 

Just seeing if we can better isolate the issue. As it stands now, I'm not sure what it is.

[Amnesicat]

Thanks Carl,

I just wanted to make sure I was using TimelineMax properly and eliminate the possibility that my code was the issue. Another thing I noticed is that the stutter only happens on the first tween, if I continually click the same image after that it doesn't do it. And again if I tween just one image it also doesn't do it, only happens with multiple images in an array.

I did a test using a simple x/y tween and they don't seem to have any stutter at all. But I think I've narrowed it down to the scale tween. Now here's the strange thing, if I scale the image up to 100% from anything below 50.1% it stutters. Any percentage scaled above that works just fine.

Perhaps this is an anomaly with ipads and under powered computers? (mine's pretty mediocore).