Navigate a TimelineMax Instance with addLabel() and tweenTo()

I'm not a social media person. Just wanted to encourage you to keep doing these tutorials. The timing on this one was perfect. The client requested the ability to navigate through the presentation which had already been set up to self run. I knew about the addLabel but not the .duration! Wow. Not only did it allow me to set up things quickly but allow me to change the timing on things without screwing up the nav.
So a big thanks from me.

Hey Mike,

Thanks for the kind note. Very glad this tutorial helped you. Its great to hear about these techniques getting people out of trouble. I will be posting more tutorials soon. I've had a small hiatus due to some freelance work.

take care

Carl

Just want to start out saying thanks for the tutorial. I’m very new to all of this and the Greensock APIs has made some of my ideas come to life. One problem I’m trying to understand is – what if I want to initially start at home then move up without the append moving all the way to movies first? I tried removing the initial appends and just adding them in the button click functions, but the functionality doesn’t work. Am I on the right track or should I use a different approach?

Hi Neal, I don’t understand what you meen by

what if I want to initially start at home then move up without the append moving all the way to movies first

what does move up mean?

once you have your labels in place you can jump around a TimelineLite/Max just like you would in the Flash IDE with commands like gotoAndPlay and gotoAndStop read more about the public methods:
http://www.greensock.com/as/docs/tween/com/greensock/TimelineMax.html

Yea sorry for not clarifying the question. Still just a student learning flash on my own. What I mean is – at start, if I’m not mistaken, the man will sequence all the way down to movies button instead of staying at home first. Unless there is something wrong with my swf? I first want him to stay at the home position then move only when clicking on the action, but wasn’t sure the approach.

oh, ok, that makes sense. yeah just pause your timeline like so when it gets created.

var tl:TimelineMax = new TimelineMax({paused:true});

you can also do
tl.paused = true;

thumbs up yo!

Hi Carl, instead of txt labels mc i would like to have images mc as guides i.e image for school and image for movies, because I would like to scale them up on btw click and then scale them back to 1:1 now i know how to scale labels but how do i use images and not get this error message – whenever I click the bttnTypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.greensock::TweenLite/init()
at com.greensock::TweenMax/init()
at com.greensock::TweenMax/renderTime()
at com.greensock.core::SimpleTimeline/renderTime()
at com.greensock::TweenLite$/updateAll()

That error means you are trying to tween something thar doesn’t exist.

Make sure you movie clips that contain your images have instance names.

Select your image and look in the properties panel for the instance name and make sure it is spelled exactly like it is in your code.

That should work.

Carl

Thanks Carl, but how did you create your labels_mc? such as work_mc, I start mine with dynamic text and then convert it to a movie clip, then give it an instance name but – my text mc’s still do not rect to : function btnOver(e:MouseEvent):void{
TweenMax.to(e.target.label_txt, .2, {tint:0xffff00});
TweenMax.to(e.target, .2, {glowFilter:{color:0xcc0000, alpha:1, blurX:20, blurY:20, quality:3}});
}

function btnOut(e:MouseEvent):void{
TweenMax.to(e.target.label_txt, .2, {tint:0xffffff});
TweenMax.to(e.target, .2, {glowFilter:{alpha:0}});
} but do act as bottoms, with the pictures i did the same – convert them to a movie clip and give it a name – still nothing. I only got the text labels to work if I drag yours from the library and give it an instance name – naturally. Thank you so much

The textfields themselves (inside your movieclips) need to have the instance name: label_txt. Try that.

will do on movie clips, thank you.
but how do I start animating fred 10 sec later? could I send you my fla or swf files?
here is my movie code so far:
import com.greensock.*;
TweenLite.to(boros_mc, 10, {x:-63.30, y:591.7, scaleX:1.1, scaleY:1.8, rotation:-90, alpha:0.2});
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);
TweenLite.to(newtowncr_mc, 10, {x:25.3, y:423, scaleX:1.1, scaleY:1.8, rotation:-90, tint:0x6699ff});
TweenLite.to(manh_mc, 7, {alpha:0.1});
TweenLite.to(queens_mc, 10, {x:40, y:66.00});
TweenLite.to(title_mc, 10, { tint:0x6699ff});
TweenLite.to(north4, 10, { x:475.0, y:375, scaleX:1.2, scaleY:1.2, rotation:-150, tint:0x6699ff});
TweenLite.to(er_mc, 10, {x:69.3, y:382});
as you see lots going on before Fred should move.

what if my target is a picture how do i change the line e.target.label_txt? should that change in the code?

any item that you want to target with actionscript needs an instance name,
whether it is a picture or text.

my buttons consist of a movieclip with a textfield inside of them.

function btnOver(e:MouseEvent):void{

//this targets the label_txt inside the item you just rolled over
TweenMax.to(e.target.label_txt, .2, {tint:0xffff00});

//this targets the item you just rolled over
TweenMax.to(e.target, .2, {glowFilter:{color:0xcc0000, alpha:1, blurX:20,
blurY:20, quality:3}});
}

I did it this way because i wanted the tint and glow to be independent.

if you aren’t using a text field inside your buttons, then you don’t need
.label_txt

if your buttons are simply movieclips that contain a single image you only
need e.target

if your buttons contain another movieclip called “myImage” then you would
use e.target.myImage

make sense?

yes, thank you

Hi Carl
Another great tutorial. I used this to create the Mandate of Heaven. http://flashnhistory.com/China/Mandate.swf. This one was fun.

That’s great. Love seeing my tutorials and greensock stuff put to use. I can’t imagine another technology that would make something like that so easy. Great Job! thanks for sharing.

Carl

I just posted on activeTuts+ in under your label tut. But this may be a better place since the effect I need is so similar to this project. How would you control the Navigate TImelineMax with a forward and backward button only. Forward I have. It’s the Backward button that I can’t figure out. The tweenTo has to know where it is in the timeline to play back to the previous label.

I’m about ready to just set up a scroll bar like your doing a lot in your tutorials now. You’ve explain that well, it’s easy, and the client can just scroll to where they want to go.

Wow, I just noticed I was the last one to post on this thread. Everyone else had moved on and I’m still stuck working this one out.

Thanks for any input.

Hi Mike,

I didn’t see your question on at+ maybe it hasn’t been approved yet.

every time you get to a section you can use an onComplete or addCallback (see part 6 on at+) to fire a function that will update currentSection and previousSection variables. then when you hit the back button you will know the name of the section or label that you need to tween to.

I don’t have any files made that exactly address your question, but if you watch this video: http://www.snorkl.tv/2011/04/bullet-proof-timelinemax-transitions-part-3-reverse-out-or-forward-out/
it might give you some ideas. http://www.snorkl.tv/2011/04/bullet-proof-timelinemax-transitions-part-3-reverse-out-or-forward-out/

Hi Mike,

if you only want prev and next its not that complicated, but it even made me think for a little bit;)

see how this works for you:

http://snorkl.tv/dev/TimelineLite_prevNext/

Carl

Thank you. I’ll check it all out. The presentation was a success without the back button. However the success was largely due to your tutorials. The target vs currentTarget was an big time saver on the navigation. And while I didn’t use need sticky buttons the mouseChildren=false came in handy. And you tutorial on labels came just in time. So a big thanks.