best way to navigate website timelineLite/Max

[berilac]

Hi guys,

 

I've uploaded a .png [siteStructure.zip] in an attempt to illustrate a basic structure I think could work for my friend's website using TimeliteLite/Max instances.

 

The boxes within the main timeline represent timelineLite instances.

My navbar is represented in grey.

 

My challenge at the moment is figuring out the cleanest way to navigate around my timeline (I'm also trying to pay attention to memory management).

 

I have a Content movie clip on the main stage. Within this, there are several movie clips, one for each of the website "pages". All these clips are on Frame 1.

Within the page mc's are all the relevant nested mc's.

All Actions are currently on Frame 1 of the Content mc.

I have one other "nav" mc on Frame 1 which contains my mc navButtons.

 

I should note, my intro timeline instance ends with two infintely looping timelines (swaying headphones and image fadein/out). I'm currently pausing these when navigating to any subpage.

 

I am using separate timeline instances for each "in" and "out" sequence of each page. My nav bar is the only constant among pages (currently).

 

 

Any info would be much appreciated...

[berilac]

Or rather than laying the site out as a large "pre-determined" timeline, should I just pass my button clicks to a function which could simply run appropriate tweenLite/Max instances on a per-page basis?

 

This would mostly skip using timeline instances. Is that good idea? How clean is this approach in memory?

 

Cheers

[GreenSock]

Or rather than laying the site out as a large "pre-determined" timeline, should I just pass my button clicks to a function which could simply run appropriate tweenLite/Max instances on a per-page basis?

 

This would mostly skip using timeline instances. Is that good idea?

This approach seems the cleanest to me, yes, but I'm not entirely sure what you're doing in terms of animation. If you need very linear, sequenced animation that always stays the same and you're just trying to traverse that single timeline, then you might be best served by a TimelineLite, but I doubt that'd be useful in your scenario. Just have your buttons call functions that create the tweens. Don't worry, TweenLite/Max will clean up after itself and dispose of those tweens after they're done.

[berilac]

Many thanks.

It took the writing of these posts for me to really lay out my options

I agree, calling TweenLites is likely the best way to go.

[berilac]

I have one (for now ) further adendum...

 

My function needs to accept a currentPage and a destinationPage variable.

 

On this basis, it should run the appropriate "out" tweens followed by the appropriate "in" tweens.

I am struggling at picturing the cleanest solution for this.

Currently button clicks fire a function which clears the appropriate mc's; onComplete then fires a separate functions to show the new mc's.

 

I'm considering that my page transitions will likely require some form of timeline (numerous items fading, moving, etc) and not simply a couple of tweens.

 

Could it be better to have one function that accepts two vars (from, to); then using two case statements, append appropriate "out" and "in" tweens to a paused timeline instance; then play the timeline?

Is it then enough to .clear() the timeline on each further function call?

 

Cheers

 

(I'm trying this likely as you read )

[GreenSock]

It sounds like this technique would help you:

http://www.greensock.com/tweening-tips/#3

[berilac]

Excellent stuff, thanks for the link. It certainly should help

 

 

I've been looking all over for how I can start to separate my code into external AS files. i.e. So I can have my nav button functions separate from other button functions, etc (and not all in Frame 01). I am tring to reference mc's directly by using their instance names (as I do on Frame 01) but get errors, as the external file obviously can't "see" the mc's.

 

A more relevant problem (to these forums ) is declaring a timelineLite on Frame 01 and trying to append to it from an external AS file.

I'm sure this as already been written about but I'm having trouble finding it. If you have any more links, I'd be happy to do the reading

[Carl]

Hi,

 

as far as your external classes referencing MovieClips or DisplayObjects on the stage, you could pass a reference to the mc into the external class.

 

Think of how TweenLite works. It is an external class. When you use it you tell it exactly which objects to tween by passing them in via the constructor like so:

 

TweenLite.to(myMovie_mc, 1, ...ete});

 

I will admit I'm pretty limited in my ability to give great tips on best OOP practices. Your question about appending to a TimelineLite defined in the document class could be solved in a similar fashion. Your problem is one that seems to trouble a lot of folks starting with oop. I found this reading helpful:

 

http://tinyurl.com/4d7ssfl

[berilac]

Many thanks, Carl.

 

Only recently I've been getting into oop as you've noticed...The concepts are settling in, and your link is much appreciated. Reading now.

[berilac]

Must say thanks again. Not sure how I'm getting my head around things, but it's all falling in to place, bit by bit .

I now have all of my buttons and their handler functions in appropriate classes. Excellent stuff.

 

However, one of my buttons' hover state utilises greensock's glowFilter.

I am no having trouble getting this to work.

 

Since I moved the code into a class, I moved my glow declarations to my documentClass (as follows, within package):

 

   public class documentClass extends MovieClip {

       public var glowIn:GlowFilter = new GlowFilter(0xFFFFFF,.5,8,8,2,2);
       public var glowOut:GlowFilter = new GlowFilter(0xFFFFFF,0,8,8,2,2);

 

I thought this would be the best "global" location as I don't want to re-iterate these unnecessarilly for every button that uses it.

 

However, I get this error now:

 

1046: Type was not found or was not a compile-time constant: GlowFilter.

 

I'm guessing it's something to do with trying to reference gs code before something has made it to the display list...? But I could well be wrong.

My document class (and all my button classes for that matter - and my stage Frame1 actions too) all separately import greensock.* and greensock.easing.*

 

Any ideas?

Cheers!

[Carl]

it would take me awhile to investigate the proper way of doing all this, but it appears that

 

new GlowFilter() is part of the flash.filters package

 

http://livedocs.adobe.com/flash/9.0/Act ... ilter.html

 

in order to access GlowFilter() you need to import that class as well.

 

-------

 

when you use GreenSocks GlowFilterPlugin it communicates to the built-in filters for you.

 

i would probably take a more generic approach like:

 

var glowIn:Object = new Object();

glowIn = {color:0x00FF00, blurX:10, blurY:10, strength:1, alpha:1}

 

TweenMax.to(mc, 1, {glowFilter:glowIn});

[berilac]

Thanks, Carl. Worked perfectly (with a little reading up on the GlowFilter api).

 

I like the more general approach also. Much cleaner imho, saves on further imports.

 

Many thanks