Functions Overlapping

[jpalombo26]

Getting sleepy, working out bugs.

 

I have a beta site in which there are two gallery pages set up so far, "FOR CHAINS" and "FOR OBJECTS":

http://thomasleargrace.com/new/

 

The pages navigate from one another just fine, but if you attempt to re-navigate mid-sequence, then it get's f'd. The sequence goes from a text box appearing, sliding down the page, and then a gallery appearing.

I'v tried a few things that you'll see in my code here, but they don't work because of how the functions call to proceeding functions.

 

Basically, I need the click to include a kill for the function that calls to the other gallery: function playChainGallery and playObjectsGallery (these are the last functions in each sequence.

 

BTW: I bet there are some ways of working this using TimelineMax. Hmmmm....

 

This should be a fun one to work out

 

This is the CLICK sequence:

 

/*Chains*/

hitZone1.addEventListener(MouseEvent.CLICK, navClick2);

/*Objects*/

hitZone2.addEventListener(MouseEvent.CLICK, navClick3);

 

/*Chains*/

 

function chainsGalleryFade(evt:Event):void {

chainsGallery.gotoAndStop(1);

}

 

function navClick3(evt:Event):void {

if (textBox1.alpha>=.01) {

TweenMax.to(chainsGallery, .5, {alpha:0, ease:Linear.easeNone, onCompleteListener: chainsGalleryFade, overwrite:2});

TweenMax.to(textBox1, .5, {alpha:0, ease:Linear.easeNone, overwrite:2});

TweenMax.to(chainContent, .5, {alpha:0, ease:Linear.easeNone, overwrite:2});

}

if (objectsGallery.alpha==1) {

} else {

TweenMax.fromTo(objectsContent, .20, {y:283},{y:233.6, ease:Cubic.easeOut});

TweenMax.fromTo(textBox2, .20, {y:283},{y:238.8, ease:Cubic.easeOut});

TweenMax.to(textBox2, .25, {alpha:.8, startAt:{alpha:0}, ease:Linear.easeNone});

TweenMax.from(textBox2, 1, {scaleY:.01, startAt:{xscaleY:1}, blurFilter:{blurY:40}, ease:Cubic.easeOut});

TweenMax.to(objectsContent, 1, {delay:.4, alpha:1, startAt:{alpha:0}, ease:Linear.easeNone, onCompleteListener: enterObjectsGallery});

}

}

function enterChainGallery(evt:Event):void {

TweenMax.to(textBox1, 2, {delay:3, y:705, startAt:{y:238.8}, ease:Cubic.easeInOut});

TweenMax.to(chainContent, 2, {delay:3, y:700, startAt:{y:233.6}, ease:Cubic.easeInOut, onCompleteListener: playChainGallery});

}

function playChainGallery(evt:Event):void {

chainsGallery.gotoAndPlay(2);

TweenMax.to(chainsGallery, 1, {alpha:1, ease:Linear.easeNone});

}

 

/*Objects*/

 

function chainsGalleryFade(evt:Event):void {

chainsGallery.gotoAndStop(1);

}

 

function navClick3(evt:Event):void {

if (textBox1.alpha>=.01) {

TweenMax.to(chainsGallery, .5, {alpha:0, ease:Linear.easeNone, onCompleteListener: chainsGalleryFade, overwrite:2});

TweenMax.to(textBox1, .5, {alpha:0, ease:Linear.easeNone, overwrite:2});

TweenMax.to(chainContent, .5, {alpha:0, ease:Linear.easeNone, overwrite:2});

}

if (objectsGallery.alpha==1) {

} else {

TweenMax.fromTo(objectsContent, .20, {y:283},{y:233.6, ease:Cubic.easeOut});

TweenMax.fromTo(textBox2, .20, {y:283},{y:238.8, ease:Cubic.easeOut});

TweenMax.to(textBox2, .25, {alpha:.8, startAt:{alpha:0}, ease:Linear.easeNone});

TweenMax.from(textBox2, 1, {scaleY:.01, startAt:{xscaleY:1}, blurFilter:{blurY:40}, ease:Cubic.easeOut});

TweenMax.to(objectsContent, 1, {delay:.4, alpha:1, startAt:{alpha:0}, ease:Linear.easeNone, onCompleteListener: enterObjectsGallery});

}

}

function enterObjectsGallery(evt:Event):void {

TweenMax.to(textBox2, 2, {delay:3, y:705, startAt:{y:238.8}, ease:Cubic.easeInOut});

TweenMax.to(objectsContent, 2, {delay:3, y:700, startAt:{y:233.6}, ease:Cubic.easeInOut, onCompleteListener: playObjectsGallery});

}

function playObjectsGallery(evt:Event):void {

objectsGallery.gotoAndPlay(2);

TweenMax.to(objectsGallery, 1, {alpha:1, ease:Linear.easeNone});

}

 

 

Thanks for any help!

[Carl]

First off, great job on all the animation it looks really good.

 

As you've realized you got yourself into a bit of a tricky situation here. Once you add more galleries it is going to be very difficult to detect which gallery is transitioning by testing all the gallery's alphas and then doing something to hide the current transition when a new gallery gets requested via rapid-fire clicking.

 

Theoretically what you want to do is handle all the transitions dynamically, meaning that you write one function that can handle transitioning all the parts of any gallery/section based on its name.

 

in order for this to work you need to have more consistency in your instance names such as

 

chainsGallery

chainsText instead of textBox1

chainsContent

 

objectsGallery

objectsText

objectsContent

 

somethingNewGallery

somethingNewText

somethingNewContent

 

you would also create a variable that tracks which SECTION (words in bold) has been selected each time a button is clicked.

 

var currentSection:String = "chains";

 

using some of your existing setup each nav button would call an eventListener that looks like this:

 

function navClick1(e:MouseEvent):void{

introSection("chains");

 

}

 

function navClick2(e:MouseEvent):void{

introSection("objects");

}

 

function introSection(requestedSection:String):void{


 //fade out current/active section
 TweenMax.to(this[currentSection + "Gallery"], .5 {alpha:0});
 TweenMax.to(this[currentSection + "Text"], .5 {alpha:0});
 TweenMax.to(this[currentSection + "Content"], .5 {alpha:0});

 //fade in new stuff
 TweenMax.to(this[requestedSection + "Gallery"], .5 {alpha:0});
 TweenMax.to(this[requestedSection + "Text"], .5 {alpha:0});
 TweenMax.to(this[requestedSection + "Content"], .5 {alpha:0, onComplete:playGallery, onCompleteParams:[requestedSection]});
 //now that the old is faded out and the new is on its way in, give currentSection a new value
 currentSection = requestedSection;

}

function playGallery(requestedGallery:String):void{
   this[requestedSection + "Gallery"'].gotoAndPlay(2);
   TweenMax.to(this[requestedSection + "Gallery"], 1, {alpha:1, ease:Linear.easeNone});
}

the above is untested pseudo code. it is only given as an example of a general approach with the emphasis on dynamically targeting the many clips.

eventually you will need to add conditional statements to handle what happens if the user selects the same section twice (currentSection == requestedSection).

You might want to star in a clean fla file and build something very simple that can tween in and out of multiple sections. There are many ways to approach this. The good news is once you have 2 sections transitioning well, its no big deal to handle 30 sections.

 

for a simpler solution to your current situation you could just prevent people from requesting a new section while a section is animating in.

 

whenever a button is clicked set a boolean value to true such as

isSectionAnimating = true

 

before a section is animated test to see that an animation isn't in progress.

 

if(!isSectionAnimating){

//do all your code here for animating a section in

tweenMaxto

tweenMaxto

tweenMaxto

...

//onComplete of the very last tween or event fire a function that will set isSectionAnimating = false

}

 

hope one of these ideas helps you sort your issue, it may take a little re-working and more head banging but in the end you will be happy.

 

Carl

[jpalombo26]

Thanks, Carl! Pretty thorough (I think). I'll have to research your suggestion some more - some new stuff in there for me.

 

I added a stop gap thread to the beginning of each click function:

TweenMax.killAll(false, true, true);

 

Quick and nasty

Well, quick fix accept that if buttons are animating while another is clicked, then the animation stops for the buttons in mid stream. They reset when rolled back over because I have startAt parameters on all of them.

I'v put a lot of hours into this so far. I'll look over your suggestion some more and see if I can quickly get it figured out - on a file copy, yes. I'd rather not have to do over my 250 lines of code, though

[jpalombo26]

By the way, when you said "chainsText instead of textBox1", textBox1 is actually the rectangular background for each gallery description. Better as chainsBox1?

[Carl]

if textBox1 is re-used for each section, then leave it the same.

 

naming things textBox1 and textBox2 though make it difficult for other developers to understand what you are doing.

something like galleryTextBg would be better.

 

Carl