"Jump to section" problem - delay completion of a tween?

[Guest aezzell]

I'm using the sample code from this great tutorial: http://www.snorkl.tv/2011/03/bullet-pro ... o-section/

 

But instead of just playing the "home" screen once, then waiting for the buttons to be clicked, I want to cycle through all the screens.

 

So I changed

tl.tweenTo("about_home");

 

to

tl.tweenTo("about_complete");

 

That almost does what I want to do - but it cycles too quickly.

 

So I added a delay to the 2nd, 3rd, & 4th tweens - but then I've got a delay that I don't want when I use the buttons. Plus when the tweens all load initially, I get blank screen between them.

 

 

I've tried adding a ActionScript timer with sequential tl.tweenTo()s - that didnt' work, either.

 

var myDelay:Timer = new Timer(1000);

tl.tweenTo("about_complete");
myDelay.start();
tl.tweenTo("blog_complete");
myDelay.start();
tl.tweenTo("portfolio_complete");
myDelay.start();
tl.tweenTo("about_complete");

 

The tweens still just run one right after another.

 

 

What I want is a way to hold each tween for some specified time after it runs. So I want to be able to say, "run like you're set up to do, then hold the final screen for 1 second before saying that you're complete".

 

I can make each tween last longer by slowing everything down, but that still runs all the tweens together as if they were one movie.

 

 

Surely there's some really simple thing that I'm missing!

 

Thanks.

[Carl]

Glad you enjoyed the tutorial. That guy is really something else.

 

a few things

 

1: You may want to read more about Timer(). For it to work it is a little more involved than what you showed. They can come in handy when used properly.

 

2: Feel free to post comments about the snorkl tutorials on snorkl.tv

 

3: I actually had to think about your problem for a few moments, but I came up with a solution that I never used before, so I thank you.

 

tweenTo() creates a TweenLite, so what we can do is create another separate timeline that has a series of TweenTo()s appended to it with whatever delay you wish.

 

here is the code:

 

var sectionPause:int = 2;//amount to pause on each section complete

//make a new timeline for the special delayed rate of playback

var playSections:TimelineMax = new TimelineMax({paused:true});
playSections.append(tl.tweenTo("home_complete"));
playSections.append(tl.tweenTo("blog_complete"), sectionPause);
playSections.append(tl.tweenTo("portfolio_complete"), sectionPause);
playSections.append(tl.tweenTo("about_complete"), sectionPause);

playSections.play();

 

i've attached a cs4 fla

[Guest aezzell]

Exactly!

 

I knew I was missing something obvious (can you tell I just discovered GreenSock yesterday?)

 

Thanks so much - and thanks for the great tutorials on Snorkl.TV!

 

Now, if I could just convince my boss that Flash ought to be my primary focus (as opposed to ASP.NET).

[Guest aezzell]

*sigh* I'm back.

 

With Carl's help (THANKS AGAIN!), I got a "jump to section" movie working (based on this: http://www.snorkl.tv/2011/03/bullet-pro ... o-section/)

 

When the movie first loads, it steps through all the sections of the movie, then stops on the last one (which is a placeholder that I added just to prove that I could add a section).

 

You can see the movie here if you promise not to laugh: http://george.genphysics.com/_testFlash/test.html

 

The timing between the sections seems a bit off, but it's working well enough for what I need now.

 

 

I melded in (aka "stole") the code from Snorkl.TV's sticky nav tutorial (http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/), so as you click each button, it changes color and becomes inactive.

 

 

But I want more!!!

 

As the sections play through the first time, I want to highlight (and, ideally, deactivate) each corresponding nav button.

 

And I'm stumped.

 

Can I somehow call a deactivation function as each section of the timeline executes?

 

I've tried adding onStart to the various tweens in the timeline, but apparently I don't understand what onStart does, or how it works, or something.

 

This is how I'm running through the sections of the movie:

var sectionPause:int=2;//amount to pause on each section complete

var playSections:TimelineMax=new TimelineMax({paused:true});
playSections.append(tl.tweenTo("one_complete"));
playSections.append(tl.tweenTo("two_complete"), sectionPause);
playSections.append(tl.tweenTo("three_complete"), sectionPause);
playSections.append(tl.tweenTo("four_complete"), sectionPause);
playSections.append(tl.tweenTo("five_complete"), sectionPause);

playSections.play();

 

When each tween executes, I need to control the appearance of the associated button movie clip.

 

I'm totally lost.

[Guest aezzell]

Getting closer, I think: http://george.genphysics.com/_testFlash/test2.html

 

I put tweens on the nav movie clips in the main TimeLineMax:

 

var tl:TimelineMax=new TimelineMax({});
tl.timeScale=1;

tl.addLabel("one_in", tl.duration);
tl.append(TweenMax.to(one_mc, 0, {autoAlpha:1, immediateRender:false}));

//change the tint of the nav movie clip for this section
tl.append( TweenMax.to(nav_mc.navOne_mc, 0, {tint:0xFF6600, immediateRender:false}) );

tl.appendMultiple(TweenMax.allFrom([one_mc.welcome_mc,
one_mc.to_mc,
one_mc.snorkltv_mc
],
  .8, {scaleX:0, scaleY:0, autoAlpha:0, ease:Back.easeOut}, .4));
tl.append(TweenMax.from(one_mc.makeAwesome_mc, .5, {x:"-100", autoAlpha:0}));
tl.addLabel("one_complete", tl.duration);
tl.append(TweenMax.to(one_mc, .5, {autoAlpha:0}));

//remove the tint
tl.append( TweenMax.to(nav_mc.navOne_mc, 0, {tint:null, immediateRender:false}) );

 

This doesn't deactivate the buttons, but is it a reasonable approach? It doesn't appear to have broken anything else...

[Carl]

nice to see the progress you've made. it seems that buttons 4 and 5 tend to stay light blue but other buttons stay white when not selected.

 

I don't have time now, but I'll let you know if i come up with a better way to combine the 2 tutorials

[Guest aezzell]

I'm only seeing blue during the rollover state - but that could just be my aging eyes

 

I'm slowly hammering it into shape, I think, but I expect code for the end result might make people who actually know what they're doing cringe.

[Guest aezzell]

Oops - now I see what you mean - seems to be a function of the order in which the buttons are clicked.

 

*sigh*

[Carl]

i wish I could resist these challenges. oh well:)

 

check the attachment.

 

I changed around a bunch of stuff and don't have time to explain it all.

I tried to comment where I made the larger modifications

 

I sort of combined my 3rd bullet-proof method (custom in AND out animation) with stickyNav.

 

when the main timeline starts each section it calls an "activateCurrentSection" function which handles changing the color of the nav to the "active color".

 

so each new section tween looks like this now:

 

tl.append(TweenMax.to(home_mc, 0, {autoAlpha:1, immediateRender:false, onStart:activateCurrentSection, onStartParams:["home"]}))
tl.append(TweenMax.to(blog_mc, 0, {autoAlpha:1, immediateRender:false, onStart:activateCurrentSection, onStartParams:["blog"]}));

etc

 

furthermore every time you click a nav item, the same activateCurrentSection function is called which does this:

 

function activateCurrentSection(section:String):void{

currentSection = section;
for(var nav in nav_mc){
	var mc:MovieClip = nav_mc[nav]
	if(mc.ID != section){
		TweenMax.to(mc, .5, {tint:null})
		}else{
			TweenMax.to(mc, .5, {tint:0xff66cc})
			}

	}

}

 

that function loops through all the items in nav_mc, and if they aren't the "currentSection".. then they get set back to their natural color. the clicked or active item will change color.

 

 

I did it quick and its a bit messy... but it seems to be pretty solid.

 

you may have better luck importing your artwork into my file then trying to edit your code to reflect my changes

[Guest aezzell]

Thanks. I'll take a look at your code. I would really rather modify mine than start over with yours, since I made the code generic ("one" instead of "home", "two" instead of "blog", etc.). Plus I added a screen. I eventually need to have 8 or 9 screens in this movie.

 

I'll be back - either to show you what I've managed to accomplish with your help or to whine for more help

[Guest aezzell]

Question about alpha & autoAlpha: part of your code looks like this:

 

tl.append(TweenMax.to(home_mc, 0, {autoAlpha:1, immediateRender:false, onStart:activateCurrentSection, onStartParams:["home"]}));
tl.appendMultiple(TweenMax.allFrom([home_mc.welcome_mc,
home_mc.to_mc,
home_mc.snorkltv_mc
],
  .8, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, .4));
tl.append(TweenMax.from(home_mc.makeAwesome_mc, .5, {x:"-100", alpha:0}));
tl.addLabel("home_complete", tl.duration);
tl.append(TweenMax.to(home_mc, .5, {autoAlpha:0}));

 

Can you please explain why you have autoAlpha on the TweenMax for home_mc, but alpha on welcome_mc, to_mc, snorkltv_mc, & awesome_mc, and then autoAlpha again on home_mc?

 

Is there a reason not to use autoAlpha all the time?

 

Thanks.

[Guest aezzell]

I think I finally have it, thanks to your help, Carl!

 

http://george.genphysics.com/_testFlash/test3.html

 

In addition to changing the color of the "hot" button, I have set useHandCursor to false on the button for the current section.

 

The code is attached (FLA, SWF, & HTML).

[Carl]

I use autoAlpha on the main container clips so that in the case that their child elements have buttons or mouse interactivity... those features won't be active while that section is not being shown.

 

glad you got it working