TimelineMax loading and unloading xml

[SyntaxMind]

What would be the proper way to incorporate LoaderMax with TimelineMax?

 

So far I got this website going the way I want it. It loads when on the portfolio label which is the starting label but when I want to go to other pages, Im not sure how to either unload or hide my current image. I tried xml.load() and xml.unload() in the proper labels but it seems to read the unload as well. Are they not compatible? Should I go with another timeline option? If I need to add more of my code to this post for evaluation I will, but I didn't want to add so much unneeded code here.

 

private function timeline():void
	{
		tl = new TimelineMax( {} );

		contactTxt.alpha = aboutTxt.alpha = 0;
		arrowRight.alpha = arrowLeft.alpha = .0;
		box.alpha = 0;

		aboutBtn.buttonMode = true;
		portfolioBtn.buttonMode = true;
		contactBtn.buttonMode = true;

		// portfolio section
		tl.addLabel("portfolio_in", tl.duration);
		xmlLoader(); // view the loader function below
		xml.load();
		arrowListeners();
		tl.addLabel("portfolio_complete", tl.duration);
		// about section
		tl.addLabel("about_in", tl.duration);
		tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:1}) );
		tl.addLabel("about_complete", tl.duration);
		tl.append( TweenMax.to(aboutTxt, 1, {autoAlpha:0}) );

		// contact section
		tl.addLabel("contact_in", tl.duration);
		tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:1}) );
		tl.addLabel("contact_complete", tl.duration);
		tl.append( TweenMax.to(contactTxt, 1, {autoAlpha:0}) );

		tl.tweenTo("portfolio_complete");
	}

	private function onOverHandler(e:MouseEvent):void
	{
		TweenMax.to(e.target, 1, {y:720, ease:Back.easeOut});
	}

	private function onOutHandler(e:MouseEvent):void
	{
		TweenMax.to(e.target, 1, {y:737, ease:Back.easeOut});
	}

	private function onClickHandler(e:MouseEvent):void
	{
		// button IDs
		aboutBtn.ID = aboutBtn.bar.ID = "about";
		portfolioBtn.ID = portfolioBtn.bar.ID = "portfolio";
		contactBtn.ID = contactBtn.bar.ID = "contact";

		targetSection = e.target.ID;

		if (targetSection != currentSection)
		{
			tl.tweenFromTo(targetSection + "_in", targetSection + "_complete");
			currentSection = targetSection;
		}
	}

	private function navigation():void
	{
		aboutBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
		aboutBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
		aboutBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
		portfolioBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
		portfolioBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
		portfolioBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
		contactBtn.addEventListener(MouseEvent.ROLL_OVER, onOverHandler);
		contactBtn.addEventListener(MouseEvent.ROLL_OUT, onOutHandler);
		contactBtn.addEventListener(MouseEvent.CLICK, onClickHandler);
	}

 

private function xmlLoader():void
	{
		LoaderMax.activate([imageLoader]);
		xml = new XMLLoader("assets/data.xml", new XMLLoaderVars()
												.name("loader")
												.estimatedBytes(600000)
												.onComplete(xmlLoaded)
												.onProgress(loadProgress));
	}

[Carl]

hi syntaxmind,

 

i think you may be misunderstanding how TimelineLite works.

 

simply placing functions between different addLabel() or append() methods does not mean that those functions are going to execute before or after certain animations in the timeline.

 

for instance:

 

tl = new TimelineLite();
tl.append(TweenLite.to(box, 1, {x:200}))
tl.append(TweenLite.to(box, 1, {y:200}))
tl.append(TweenLite.to(box, 1, {rotation:180}))

trace("fade");

tl.append(TweenLite.to(box, 1, {alpha:0}));

 

the word "fade" will not appear after the box rotates. it will happen as soon the tl timeline is created.

 

I am making this point just so you understand that putting xmlLoader() right after you insert a label into your timeline does nothing to associate that xmlLoader() with a particular point in time in your timeline.

 

I really think you mean to be using addCallback(); http://active.tutsplus.com/tutorials/an ... -features/

 

furthermore I would suggest that you don't build a timeline that requires assets to load while the timeline is playing as you would need to stop the timeline as the assets load and then start it again once they have all loaded. Sure, its possible but its not the easiest thing to figure out how to do (while trying to learn LoaderMax and TimelineLite).

 

I would suggest you:

 

1:load all the assets

2:when the assets complete loading then build your timeline

 

put all your loaded assets into a single container and then just use the timeline to hide/show the container.

[SyntaxMind]

Didn't think about it like that. I can actually fade in and out the container and not have to worry about loading and unloading. Thanks that helped.