TimelineMax.insertMultiple 1st tween not animating [SOLVED]

[ngfl]

Hi,

 

Am just trying out the beta11 and the timeline feature (seems really useful so far, good work gs). However, I seem to be having a problem whereby the first tween is not animating. As soon as I call timeline.play() the first object in the sequence just appears instead of animating.

 

the code is below, as you can see I'm looping through the contents of a container, adding each MC to an array and then passing that into the constructor of the insertMultiple method.

 

var numLabels = labels.numChildren;

		for (var i:int = 0; i < numLabels; i++)
		{
			tweens[i] = (TweenMax.to(labels.getChildAt(i), 0.5, {alpha: 1, x: labels.getChildAt(i).x + 650}));
		}

		timeline.insertMultiple(tweens, 0, TweenAlign.SEQUENCE, 4);
		timeline.addEventimelineistener(Event.COMPLETE, addBrainstormCloud);
		timeline.play();

 

This is probably not a bug in TweenMax but rather me doing something silly. Incidentally, the 'labels' are just a bunch of movieclips on the side of the stage, no other code affects them so the issue is in teh code posted above. Also, if there is a more elegant way of doing this (I just want to stagger their arrival on screen and then fire my addBrainstormCloud method when they've all arrived) - I'd like to see it.

[GreenSock]

Not quite sure how you built your FLA, but here are a few things I'd offer:

 

1) You had a typo.

BAD: addEventimelineistener()

GOOD: addEventListener()

 

2) Have you verified that your labels.getChildAt(i) is returning what you expect the first time through? I wonder if there's something else at that level in your DisplayObjectContainer.

 

3) You don't have to play() the timeline - it plays by default. If you want it to start out paused, either stop() it right away or just use the special "paused" property in the vars object, like new TimelineMax({paused:true});

 

I just tried a similar setup on my system and it tweened everything perfectly including the first one, so I suspect the problem lies with the code you've got that sets up your tweens.

[ngfl]

Thanks for the reply, gs, have got this working now but there do seem to be some issues I'm not sure are expected behaviour.

 

Not quite sure how you built your FLA, but here are a few things I'd offer:

 

1) You had a typo.

BAD: addEventimelineistener()

GOOD: addEventListener()

 

Yeah I did a quick find/replace to rename my vars to something more meaningful before posting, forgot to correct that in the post.

 

2) Have you verified that your labels.getChildAt(i) is returning what you expect the first time through? I wonder if there's something else at that level in your DisplayObjectContainer.

 

There's definately nothing else in there.

 

3) You don't have to play() the timeline - it plays by default. If you want it to start out paused, either stop() it right away or just use the special "paused" property in the vars object, like new TimelineMax({paused:true});

 

I just tried a similar setup on my system and it tweened everything perfectly including the first one, so I suspect the problem lies with the code you've got that sets up your tweens.

 

Not sure why I put the stop/play in, but it does affect the outcome. Here are my findings:

 

1) if I just remove the play() method the tweens do not play at all.

2) if I keep the call to play() the first tween doesn't animate the first (approx) 2 secs - I verified this by adding a 3-sec delay to the TweenMax parameters.

3) in the code above, var timeline: TimelineMax is a class property and the constructor is called when I declare the var. HOWEVER, If I call the constructor in the function above, it all works perfectly (without the play() method).

 

I'm not sure I understand what's going on here, is any of this expected behaviour?

[ngfl]

here is the whole class, btw.

 

package Forest
{
import com.greensock.TimelineMax;
import com.greensock.TweenAlign;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.geom.Point;
import flash.utils.Timer;
import com.greensock.easing.Back;
import com.greensock.easing.Bounce;
import com.greensock.easing.Elastic;
import com.greensock.TweenMax;
import org.ngfl.utils._Math;
import org.ngfl.template.Page;
import flash.display.MovieClip;
import org.ngfl.tools.StickyBar;

/**
 * ...
 * @author Hamish Taplin @ NGfL Cymru
 */

public class ForestActivity extends Page
{
	private var timer:Timer;
	private var brainStormCloudText:String = "Leave the forest intact";
	private var labels:Sprite;
	private var timeline:TimelineMax;

	public function ForestActivity():void
	{
		initUI();
		forest.sunrise(3);
	}

	private function initUI():void
	{
		var tween:TweenMax = TweenMax.from(option1BTN, 1, {x: 1000, ease: Back.easeOut, delay: 1.5});
		tween = TweenMax.from(option2BTN, 1, {x: 1000, ease: Back.easeOut, delay: 1.6});
		option1BTN.addEventListener(MouseEvent.CLICK, eventHandler, false, 0, true);
		option1BTN.buttonMode = true;
		option2BTN.addEventListener(MouseEvent.CLICK, eventHandler, false, 0, true);
		option2BTN.buttonMode = true;
	}

	private function addLabels(option:int):void
	{
		var tweens:Array = [];

		if (option == 1)
		{
			labels = option1Labels;
		}
		else
		{
			labels = option2Labels;
		}

		var numLabels = labels.numChildren;

		for (var i:int = 0; i < numLabels; i++)
		{
			tweens[i] = (TweenMax.to(labels.getChildAt(i), 0.5, {alpha: 1, x: 620}));
		}

		timeline = new TimelineMax();
		timeline.insertMultiple(tweens, 0, TweenAlign.SEQUENCE, 4);
		timeline.addEventListener(Event.COMPLETE, addBrainstormCloud);

	}

	private function removeLabels():void
	{
		timeline.timeScale = 50;
		timeline.reverse();
	}

	private function option1():void
	{
		//currentPage.dayNightCycle();
		var tween:TweenMax = TweenMax.to(option1BTN, 0.3, {x: -1000, alpha: 0, ease: Back.easeIn});

		tween = TweenMax.to(option2BTN, 0.3, {x: 1000, alpha: 0, ease: Back.easeIn, delay: 0.2});
		tween = TweenMax.to(forest.text1, 0.5, {rotation: 0, alpha: 0.8, ease: Back.easeOut, delay: 0.5});
		tween = TweenMax.to(forest.text1, 0.2, {rotation: 180, alpha: 0, ease: Back.easeIn, delay: 2});
		option1BTN.removeEventListener(MouseEvent.CLICK, eventHandler);
		option2BTN.removeEventListener(MouseEvent.CLICK, eventHandler);

		timer = new Timer(2000, 1);
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, option1Progress);
		timer.start();
	}

	private function option1Progress(e:TimerEvent):void
	{
		addLabels(1);
		timer.removeEventListener(TimerEvent.TIMER, option1Progress);
		timer = null;
		forest.killNonTrees();
		forest.growthPhase = "addremainingtrees";
		forest.addRemainingTrees();
		forest.sortTreesDepth();
	}

	private function option2():void
	{
		//currentPage.dayNightCycle();
		var tween:TweenMax = TweenMax.to(option2BTN, 0.3, {x: 1000, alpha: 0, ease: Back.easeIn});
		tween = TweenMax.to(option1BTN, 0.3, {x: -1000, alpha: 0, ease: Back.easeIn, delay: 0.2});
		tween = TweenMax.to(forest.text2, 0.5, {rotation: 0, alpha: 0.8, ease: Back.easeOut, delay: 0.5});
		tween = TweenMax.to(forest.text2, 0.2, {rotation: 180, alpha: 0, ease: Back.easeIn, delay: 2});

		option1BTN.removeEventListener(MouseEvent.CLICK, eventHandler);
		option2BTN.removeEventListener(MouseEvent.CLICK, eventHandler);

		timer = new Timer(2000, 1);
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, option2Progress, false, 0, false);
		timer.start();
	}

	private function option2Progress(e:TimerEvent):void
	{
		addLabels(2);

		timer.removeEventListener(TimerEvent.TIMER_COMPLETE, option2Progress);
		timer = null;
		forest.growthPhase = "regrowth";
		forest.clearForest();
		brainStormCloudText = "remove selected trees";
	}

	private function addBrainstormCloud(e:Event):void
	{
		timeline.removeEventListener(Event.COMPLETE, addBrainstormCloud);
		forest.removeEventListener(Event.COMPLETE, addBrainstormCloud);
		var brainstormCloud:BrainstormCloud = new BrainstormCloud();
		brainstormCloud.x = 260;
		brainstormCloud.y = -135;
		this.addChild(brainstormCloud);
		brainstormCloud.text2.text.text = brainStormCloudText;
		brainstormCloud.text2.visible = false;
		var tween:TweenMax = TweenMax.from(brainstormCloud, 1.5, {alpha: 0, x: 1000, ease: Back.easeOut});
		brainstormCloud.addEventListener(MouseEvent.CLICK, initBrainstormActivity);
	}

	private function initBrainstormActivity():void
	{
		removeLabels();
		_this.dispatchEvent(new Event("addStickyNotes", true, false));
		brainstormCloud.removeEventListener(MouseEvent.CLICK, initBrainstormActivity);
		tween = TweenMax.to(brainstormCloud, 1, {x: 0, y: 50, width: brainstormCloud.width * 1.5, height: brainstormCloud.height * 1.5});
		brainstormCloud.disable();
		brainstormCloud.text1.visible = false;
		brainstormCloud.text2.visible = true;
	}

	private function eventHandler(e:MouseEvent):void
	{
		switch (e.type)
		{
			case "click":

				if (e.target == option1BTN)
				{
					option1();
				}
				else if (e.target == option2BTN)
				{
					option2();
				}

				break;
		}
	}
}
}

[GreenSock]

Ah, yes, I think I see exactly what's happening. Remember, a timeline will play() by default immediately. So when you created your variable in the class, it placed it on the root TweenLite/Max timeline and started playing. It didn't have any tweens in it, though, so it finished playing immediately (reached its end time). Then at some point later (probably 2 seconds or so), you added tweens to it. That populated the timeline fine, but since its start time was in the past and it had finished already, it wasn't rendered. There are all sorts of optimizations in the code to ensure things run as fast and smoothly as possible and this is one of those edge cases where it probably seems to work in an unintuitive way. But once you see how the logic flows (timelines start immediately, if they have no tweens, they complete on the very next frame, etc.) hopefully it makes more sense. The solution would be to simply create it as a paused timeline, then play() it after you add your tweens because when you unpause it, the start time is adjusted accordingly. Like:

 

var mainTimeline:TimelineMax = new TimelineMax({paused:true});
//then later...
function doAnimation():void {
   mainTimeline.appendMultiple( TweenMax.allFrom([mc1, mc2, mc3], 1, {y:"-100", autoAlpha:0}, 0.2) );
   mainTimeline.play();
}

 

Does that clear things up?

[ngfl]

Makes perfect sense, thanks!