website navigation with timelineLite/Max

[berilac]

Hi,

 

Having an interesting problem (well, perhaps frustrating is more apt)...

 

I have a classic issue of finding the best way to transition between my website "pages".

I think my problem may lie in the way I'm using tlPgTrans (my transition timeline) - or perhaps the problem is with autoAlpha being not fully complete.

 

When I click on a nav button, the code shown below removes tlPgTrans (my transition timeline) if it exists, re-iterates it so I have clean canvas, and then, using Case statements, first ammends all appropriate page transition tweens, then plays the timeline.

 

The problem I face is when a nav button is clicked and then another is clicked very soon after.

It seems to work on occasion/mostly but there are times where the tweens from the second (quickly after) click are not run. The page finishes tweening, ending up in the wrong location (page destination from first click).

This then breaks further navigation as what's on screen does not match my currentPage var.

 

Another issue is within "Switch(to) > Case bioMark" in the below code. When the tlPgTrans is first ammended with this it runs as expected. However on consequent transitions to this page, the tweens, particularly (if not only) the tweenmax.fromTo play much faster...

 

I imagine my second problem is tied in with the first.

 

I'm looking for a clean page navigation solution. If what I'm doing is heading down wrong path, I'm definitely open to suggestion.

 

Please don't hesitate to ask if you'd like more info

Cheers!

 

Currently here is a snippet of the relevant code (hopefully with useful comments):

(the tlPgTrans was originally declared outside of function, but not currently)

 

       public function transPage(from:String, to:String):void {
           // clear previous page transition tweens
           /*
             if (tlPgTrans) {
                 trace("clear tweens from tlPgTrans");
                 tlPgTrans.clear();
                 trace("tweens cleared");
             }
           */
           if (tlPgTrans) {
               // experimenting...
               tlPgTrans.complete();
               tlPgTrans.kill();
           }

           // re-iterate transition timeline
           var tlPgTrans:TimelineMax = new TimelineMax( { paused:true, autoRemoveChildren:true } );

           trace(from + " -> " + to);

           // the following function uses a currentPage var to first make nav menu item clickable again
           // then changes currentPage to equal the "to" variable
           // then makes the new currentPage nav menu item un-clickable
           editPgMark(to);


           // append page "out" tweens
           switch (from) {
               case homeMark:
                   //trace("from Home");
                   tlPgTrans.appendMultiple(TweenMax.allTo([mcContent.mcHomePage.mcScene, 
                                                           mcContent.mcHomePage.mcHomeTitle, 
                                                           mcContent.mcHomePage.mcPhonetics, 
                                                           mcContent.mcHomePage.mcHomeArrow, 
                                                           mcContent.mcHomePage.mcHeadphones,
                                                           mcContent.mcHomePage.mcHeadphonesShadow], 
                                                          2, { autoAlpha:0 }, 0, pauseTLs, [homeMark]));
               break;

               case bioMark:
                   //trace("from Bio");
                   tlPgTrans.append( TweenMax.to(mcContent.mcBioPage, 2, { autoAlpha:0 }) );
               break;

               case stageMark:
                   // stage out tweens
               break;

               case classMark:
                   // class out tweens
               break;

               case galleryMark:
                   // gallery out tweens
               break;

               case contactMark:
                   tlPgTrans.append(TweenMax.to(mcContent.mcContactPage, 2, { autoAlpha:0 } ));
               break;

               case otsMark:
                   // on-the-side out tweens
               break;

               default:
                   // error message perhaps?

           }
           switch (to) {
               case homeMark:
                   //trace("going to Home");
                   tlKama.resume();
                   tlSway.resume();
                   tlPgTrans.appendMultiple(TweenMax.allTo([mcContent.mcHomePage.mcScene, 
                                                           mcContent.mcHomePage.mcHomeTitle, 
                                                           mcContent.mcHomePage.mcPhonetics, 
                                                           mcContent.mcHomePage.mcHomeArrow, 
                                                           mcContent.mcHomePage.mcHeadphones,
                                                           mcContent.mcHomePage.mcHeadphonesShadow], 
                                                          2, { autoAlpha:1 }, 0));
               break;

               case bioMark:
                   //trace("going to Bio");

                   // the following is temp test code. I will probably use this case to fade in the mcBioPage and trigger another timeline or function to do the rest
                   // mcBioImg I would like to populate dynamically and animate through range of photos accessed via XML
                   tlPgTrans.append( TweenMax.to(mcContent.mcBioPage, 2, { autoAlpha:1 } ) );
                   tlPgTrans.append( TweenMax.from(mcContent.mcBioPage.mcString, .3, { x: -30, ease: Linear.easeOut } ) );
                   tlPgTrans.append( TweenMax.from(mcContent.mcBioPage.mcBioImg, 4, { y: -200 } ), 1 );
                   tlPgTrans.append( TweenMax.to(mcContent.mcBioPage.mcBioImg, 5, { y: 1200 } ) );
               break;

               case stageMark:
                   //trace("going to Stage");
               break;

               case classMark:
                   //trace("going to Class");
               break;

               case galleryMark:
                   //trace("going to Gallery");
               break;

               case contactMark:
                   //trace("going to Contact");
                   tlPgTrans.append(TweenMax.to(mcContent.mcContactPage, 2, { autoAlpha:1 } ));
               break;

               case otsMark:
                   //trace("going to On-the-Side");
               break;

               default:
                   // error code?

           }

           tlPgTrans.play();
       }

 

Thanks again.

[Carl]

being that killing a timeline and then recreating a new one seems to have problems when you switch pages really quick, I would suggest 1 of 2 options:

 

1) for a very modular oop approach read this:

http://www.kirupa.com/forum/showthread.php?t=354459

 

--for the dirty version of that approach, instead of having slide objects with their own animateIn and animateOut methods, you could just have a bunch of functions set up for

 

homeIn()

homeOut()

workIn()

workOut()

 

each function would create and return a timeline that runs the appropriate animation.

you could have a variable like currentPage = home to figure out which section to animate out and have an onComplete set up to call the desired animateIn

 

 

by having unique timelines for each page's in and out, you can be assured that timelines won't conflict with each other or that you aren't overwriting tweens that are aready in place.

once you tell a section to animate out, you know it is going to go all the way out.

 

-------------------------------

 

Here is something that I had laying around that works on the premise that there is ONE timeline that has all section in and out animations as part of one main timeline. when you animate out of a section the timeline plays forward to the next section's _in label. the timeline then stops, and calls a function to play the requested section's in animation.

 

 

 

here is an example:

 

http://www.snorkl.tv/dev/timelineNav_nonLinear/

 

you should be able to bang the blue buttons like crazy and go in and out of any section

 

the code looks like this:

 

import com.greensock.*;
import com.greensock.easing.*;

var targetSection:Number=1;
var currentSection:Number=0;
var autoMode:Boolean=true;


var tl:TimelineMax = new TimelineMax();
tl.timeScale=.5;
tl.addLabel("section1_in", tl.duration);
tl.append(TweenMax.to(section1_mc, 1, {x:500, onStart:setSection, onStartParams:[1]}));
tl.append(TweenMax.to(section1_mc, .5, {tint:0x00ccff, scaleX:1.2, scaleY:1.2, ease:Back.easeOut}));
tl.addLabel("section1", tl.duration);
tl.append(TweenMax.to(section1_mc, .2, {x:115, tint:null, scaleX:1, scaleY:1}));


tl.addLabel("section2_in", tl.duration);
tl.append(TweenMax.to(section2_mc, 1, {x:500, onStart:setSection, onStartParams:[2]}));
tl.append(TweenMax.to(section2_mc, .5, {tint:0xff0000, scaleX:1.2, scaleY:1.2, ease:Back.easeOut}));
tl.addLabel("section2", tl.duration);
tl.append(TweenMax.to(section2_mc, .2, {x:115, tint:null, scaleX:1, scaleY:1}));


tl.addLabel("section3_in", tl.duration);
tl.append(TweenMax.to(section3_mc, 1, {x:500, onStart:setSection, onStartParams:[3]}));
tl.append(TweenMax.to(section3_mc, .5, {tint:0xffff00, scaleX:1.2, scaleY:1.2, ease:Back.easeOut}));
tl.addLabel("section3", tl.duration);
tl.append(TweenMax.to(section3_mc, .2, {x:115, tint:null, scaleX:1, scaleY:1}));


tl.addLabel("section4_in", tl.duration);
tl.append(TweenMax.to(section4_mc, 1, {x:500, onStart:setSection, onStartParams:[4]}));
tl.append(TweenMax.to(section4_mc, .5, {tint:0xff00ff, scaleX:1.2, scaleY:1.2, ease:Back.easeOut}));
tl.addLabel("section4", tl.duration);
tl.append(TweenMax.to(section4_mc, .2, {x:115, tint:null, scaleX:1, scaleY:1}));
tl.addLabel("section5_in", tl.duration);



button1_mc.addEventListener(MouseEvent.CLICK, goSection);
button2_mc.addEventListener(MouseEvent.CLICK, goSection);
button3_mc.addEventListener(MouseEvent.CLICK, goSection);
button4_mc.addEventListener(MouseEvent.CLICK, goSection);
button1_mc.ID=1;
button2_mc.ID=2;
button3_mc.ID=3;
button4_mc.ID=4;




function goSection(e:MouseEvent):void {

targetSection=e.currentTarget.ID;
trace("currentSection  = " + currentSection + " targetSection = " + targetSection);

//first lets make sure the targetSection is not the same as currentSection
if (currentSection!=targetSection) {

	if (tl.getLabelAfter().indexOf("_in") == -1) {
		//still on the way in to the previously selected section... let's rewind quickly.
		trace("section" + currentSection +  " on the way in: REVERSE ME to my beginning!... quickly");
		TweenMax.to(tl, .2, {currentTime:tl.getLabelTime("section" + currentSection + "_in"), onComplete:goSectionIn});
	} else {
		//let's play the current section's out sequence by going to the next section's _in label".
		trace("play timeline to next label which has to be the next sections _in point");
		tl.tweenTo(tl.getLabelAfter(), {onComplete:goSectionIn});
	}

} else if (autoMode == true && currentSection == targetSection) {
	//timeline is playing on first run automatically and the current section is already in or on its way in
	tl.tweenTo("section" + (currentSection));
}

}
function goSectionIn() {
//let's get where we need to go! introduce target section
trace("goSectionIn " + targetSection);
tl.gotoAndStop("section" + targetSection + "_in");
tl.tweenTo("section" + targetSection);
}




function setSection(section) {
currentSection=Number(section);
trace(section);
}

function setAutoModeFalse() {
autoMode=false;
}

//play through to section4 automatically on first run
tl.tweenTo("section4", {onComplete:setAutoModeFalse})

;

 

here is the Flash CS4 source : http://www.snorkl.tv/dev/timelineNav_no ... Linear.zip

 

this method is not so good in that you can not overlap in and out (cross fade) like option 1 allows.

 

Carl

[berilac]

thank you very much, Carl. Shall be giving this a more thorough read tomorrow in case I go down this path.

 

However, will this mean that when a user clicks link the full page transition will occur before animating to another page (if the user clicked two links, one shortly after the other)?

 

Would have been nice to be able to interrupt the transitions...however, for now I've gone with a really simple solution. On menu click, all menu items are disabled. The transition timeline then fires function to re-enable appropriate items onComplete.

 

-----------------------------------------------------------------------------------------------------------

 

I do have another question though

 

I have an external class which is using syntax as follows to access other items on stage:

trace(this.parent[refStr]);
trace(this.parent["mcName"]);

 

In some instances, the above traces will output "[object MovieClip]".

However, in some instances (my important ones ) they output "undefined".

 

I have triple+ checked instance names, etc and can't figure out any reason why some should work and not others! Any ideas?

Many thanks,

 

Michael

[berilac]

Please still read the post above.

 

I have discovered that this error comes from the order my layers are in, on the Flash IDE timeline.

 

Let me first clarify a little. I am setting up re-usable code for scrollbars.

I created a scrollbar class. Functions within this class then use the name of a scrollbar instance to reference and find its relevant mc constituents (i.e scroller, textbox, textbox_mask). It then will place the scroller, trigger import of appropriate text, etc...

 

So, though I have found a "solution" to my above issue, it forces me to place the scroller mc underneath the scrollbar mc (in my layers), which is obviously not preferable.

 

Do I have to place the layers underneath (as appropriate in IDE), and then control z-order in actionscript? Or is there another way?

I'm not certain...

[Carl]

i haven't ever had layer order be an issue. but if you are forced to have things a certain way in the ide, then I would guess you could swap things around with code.

[berilac]

Thanks, Carl.

 

Seems strange, I know, but I've literally tested:

 

Place one layer above another.

Lower layer has mc linked to external class.

When it refers to its own parent (this.parent[subClip]) it returns error as I mentioned before.

 

However, if all I do is place the layer that's above, below the other layer, the class code works fine...

 

 

I guess I'll have to programatically edit z position.

Any useful links, else I'll do the classic google.

[Carl]

check here:

http://help.adobe.com/en_US/FlashPlatfo ... hodSummary

 

swapChildren should do the trick.

[berilac]

You're a star, Carl; thank you.