Jump to content
Search Community

timeline basics not so basic

timaging test
Moderator Tag

Recommended Posts

ok, so I've been at this for 5 hours now and am about to crack. I've literally duplicated the video and I'm getting an undefined property:

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.plugins.*;

import flash.events.MouseEvent;

 

TweenPlugin.activate([blurFilterPlugin]);

 

 

year2008.alpha=0

 

feb25.alpha=0

march31.alpha=0

april28.alpha=0

may12.alpha=0

august04.alpha=0

sept02.alpha=0

sept08.alpha=0

sept15.alpha=0

 

sept15copy.alpha=0

sept02copy.alpha=0

sept08copy.alpha=0

 

 

 

TweenLite.to(year2008, 1.5, {alpha:1});

 

var timeline:TimelineLite = new TimelineLite ();

timeline.append(TweenLite.to(feb25, 1, {y:"-10"}));

timeline.append(TweenLite.to(march31, 1, {y:"-10"}));

timeline.append(TweenLite.to(april28, 1, {y:"-10"}));

 

myTimeline.appendMultiple([new TweenLite(feb25, 1, {alpha:1}),

new TweenLite(march31, 1, {alpha:1}),

new TweenLite(april28, 1, {alpha:1})], 1, TweenAlign.START, 0.2);

 

timeline.addLabel("months", 1);

/* Mouse Over Event

Mousing over the symbol instance executes a function in which you can add your own custom code.

 

Instructions:

1. Add your custom code on a new line after the line that says "// Start your custom code" below.

The code will execute when the symbol instance is moused over.

*/

 

year2008.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler);

 

function fl_MouseOverHandler(event:MouseEvent):void

{

// Start your custom code

// This example code displays the words "Moused over" in the Output panel.

timeline.gotoAndPlay("months")

 

 

 

// End your custom code

}

 

 

year2008.addEventListener(MouseEvent.MOUSE_OUT, fl_MouseOutHandler);

 

function fl_MouseOutHandler(event:MouseEvent):void

{

// Start your custom code

// This example code displays the words "Moused out" in the Output panel.

timeline.reverse();

// End your custom code

}

 

 

 

any ideas on how to get this running would be greatly appreciated.

 

thanks,

Dave

Link to comment
Share on other sites

You named your TimelineLite "timeline" but then you referred to "myTimeline" later with the appendMultiple() call. That should be "timeline".

 

Also, be very careful about using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT - that's a common mistake. The MOUSE_ ones can fire multiple times with a single rollover/out depending on how your build your stuff and if there are any children of the Sprite/MovieClip that's moused over.

Link to comment
Share on other sites

cool. That stopped the errors but now it's animating prior to ROLL_OVER. I've taken out the initial timeline code, hoping that would stop it?:

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.plugins.*;

import flash.events.MouseEvent;

import flash.ui.Mouse;

 

TweenPlugin.activate([blurFilterPlugin]);

 

 

year2008.alpha=0

 

feb25.alpha=0

march31.alpha=0

april28.alpha=0

may12.alpha=0

august04.alpha=0

sept02.alpha=0

sept08.alpha=0

sept15.alpha=0

 

sept15copy.alpha=0

sept02copy.alpha=0

sept08copy.alpha=0

 

 

 

TweenLite.to(year2008, 1.5, {alpha:1});

 

var timelineMenu:TimelineLite = new TimelineLite ();

 

timelineMenu.appendMultiple([new TweenLite(feb25, 2, {alpha:1}),

new TweenLite(march31, 2, {alpha:1}),

new TweenLite(april28, 2, {alpha:1})], 0, TweenAlign.START, 0.5);

 

timelineMenu.addLabel("months", 0);

 

year2008.addEventListener(MouseEvent.ROLL_OVER, fl_MouseOverHandler);

 

function fl_MouseOverHandler(event:MouseEvent):void

{

timelineMenu.gotoAndPlay("months")

}

 

 

year2008.addEventListener(MouseEvent.ROLL_OUT, fl_MouseOutHandler);

 

function fl_MouseOutHandler(event:MouseEvent):void

{

timelineMenu.reverse();

}

Link to comment
Share on other sites

ok, this is starting to work... THANKS!

 

Last question I swear-

 

now when I roll out, the clips to the right of the main clip disappear, because essentially I'm rolling out.

 

I DO want them to disappear if I roll out going up or down, but I want to be able to go to the left and now roll over the buttons to the right.

 

make sense?

 

If you see the swf attached, you'll understand what I mean.

Link to comment
Share on other sites

Well, frankly I'd probably structure things very differently if I were building this from scratch, but I don't have time to rebuild it for you or walk through the whole process so I took your file and made some edits to get it working. Please see the attached. Notice that I put invisible rectangles inside the text MovieClips so that their hit area is consistent (otherwise rollOver will only be triggered when the mouse is exactly over the stroke of a letter and rollout fires very often as you move the mouse over the word). I also use hitTestPoint() to only run the rollout when the mouse isn't over the top of the submenus. And I fade stuff in/out using autoAlpha instead of alpha so that visible is set to false when alpha hits 0 (therefore rollovers/outs aren't triggered at that point).

 

Hope that helps.

Link to comment
Share on other sites

Thanks-I'll check it out.

 

I was hoping that the killTweens thing was going to pause the previous action, but it didn't work quite the way I expected.

 

funny though that something like this could be so difficult. It seems like something that lots of people would want to use.

 

Dave

Link to comment
Share on other sites

ok... just checked these out and it's not even working on roll out, and only the top 3 dates are showing and third level isn't showing so it's nowhere near a solution.

 

I'll see what I can figure out and if I get something going I'll post it.

 

I may have to switch back over to McTween or Tweener at this point though... it seems easier to use. I was just giving this a chance because I paid $50 for it.

 

 

Dave

Link to comment
Share on other sites

I thought that was the effect you were looking for (based on what I could gather from the code you had written). You were only fading those 3 submenus in - did you want others to fade in too? Help me understand what was different than you expected. I was under the impression that you wanted to rollover 2008 and have those 3 options fade in and move up into place and be able to move your mouse over those options without having the menu close. The example I posted does exactly that. And when you rollout of any of the submenus or 2008, it reverses the animation (closing the menus). What did I get wrong?

 

I realize that a fly-out menu system sounds like it should be something easy. I wish it were easier too. Trust me - the problems you're running into have absolutely NOTHING to do with the tweening engine. Feel free to switch to MC Tween or Tweener but all you'll get by doing that is worse performance (see http://www.greensock.com/tweening-speed-test/ - the difference is HUGE especially in AS2) and fewer features. Both of those engines have nothing like TimelineLite/Max for building sequences and controlling them as a whole. Development was stopped on those engines a long time ago. The problem you're running into is just the logic that drives the scripting. When rolling over the main menu (2008), the new objects must not only animate in, but you must build the rollover/out logic so that it now accommodates those extra items and when you roll out of the main menu it doesn't trigger a "close" animation unless the mouse isn't over a submenu.

 

Like I said, I'd structure things much differently if I were building it, like I'd have it be more dynamic so that I could set up all the menu items through ActionScript instead of having to build a new MovieClip by hand for each one. I'd probably dynamically draw the hit area too invisibly (the area that triggers the rollover/out) so that it could be adjusted on the fly as new menu items are added or further submenu levels are needed. I know, it sounds complex and I suppose it is but it'd ultimately be easier to work with and update later. If you want a simple solution, I'd recommend either looking for a pre-built component at a place like activeden.net (I bet there are a bunch there) or hire an ActionScript specialist that could knock out a dynamic menu system for you.

 

I hope you understand that I'm not trying to be unhelpful - I just have limited time and cannot provide free consulting on code that's not directly related to GreenSock tools or rework logic for everybody who posts a file here. I actually wish I had more time so that I could help with this sort of thing more often.

 

If you're unhappy with the $50 you spent on your Club GreenSock membership, I would be happy to issue a full refund. I have absolutely no interest in having dissatisfied customers on the membership roster. My goal is to deliver incredible value to the community and to have customers that are thrilled with what they get. If that's not the case here, please shoot me an e-mail request for the refund and I'll make it happen immediately.

Link to comment
Share on other sites

Hi there.

 

I've spent a few hours on this already this morning. When you see the 3 elements, that is only because I was using that for testing. getting closer, and files attached.

 

I'm having moderate success with the killTween function now, but then, when I roll back out over the main date, it somehow needs to be reinstated.

 

And I get that the tweening engine is most definitely running very very well-I should have stated that before. I just speculated that this TimeLine Max was going to be the big answer to all these issues I've had all along. Maybe it still is, but I'm not an actionscript guy so it's tough for me to say... just a whiny designer looking for a "quick fix"!

 

Writing all those arrays is WAY over my head, so yes, I'm doing this in a more pedestrian manner. In addition to this main flyout, I still have 6 more years of flyouts to do, so this complexity will compound. Even though I'm writing the code in "longhand", it's much easier for me to understand.

 

Dave

Link to comment
Share on other sites

getting even closer now, and code is more developed than what I just sent:

 

http://www.taylorimaging.com/clientArea/timeline/

 

it appears that the timeline.pause() for the year doesn't allow the other tween to finish. is there something like timeline.finish then pause?

 

and then all I need to do is figure out a way to get reverse to work on all these when I roll out...

 

-all potentially good ideas for the next TimeLine Max update!

 

so close!

Link to comment
Share on other sites

it appears that the timeline.pause() for the year doesn't allow the other tween to finish. is there something like timeline.finish then pause?

You can force a timeline to completion in many ways:

 

timeline.complete();
//-OR-
timeline.currentTime = timeline.duration;
//-OR-
timeline.gotoAndStop(timeline.duration);

 

-all potentially good ideas for the next TimeLine Max update!

Which ideas? What were you hoping would be added to TimelineLite/Max next update? I'm always looking for ways to improve it - I just wasn't sure what you were recommending specifically.

Link to comment
Share on other sites

timeline.complete jumps to the end. What I'm talking about is making is so that the timeline it's talking to finishes it's own animation.

 

the timeline.duration one doesn't work, and gotoAndStop simply does the same thing as complete

 

hopefully I'll get something figured out. I've almost got it now, but I just need this completion issue addressed and getting it to reverse on ROLL_OUT.

 

thanks for hanging in there-hopefully some of this back and forth is useful for future builds.

Link to comment
Share on other sites

timeline.complete jumps to the end. What I'm talking about is making is so that the timeline it's talking to finishes it's own animation.

Please explain what you mean by "the timeline it's talking to finishes its own animation". What's talking to what? I thought you wanted to have the timeline jump to its end point. If you just want to add animation to the end of a timeline (so that it completes the existing animation before it plays the next one you're adding), that's as simple as using the append() method. Have you watched the video at http://www.greensock.com/timeline-basics/? If not, please do. I think it will really help you understand the tool much better.

 

the timeline.duration one doesn't work, and gotoAndStop simply does the same thing as complete

I'd love to see an example of the timeline.duration one not working. Could you post one? According to all my tests, it works perfectly (just double-checked). Not a single other user has mentioned a problem with that either. I wonder if maybe there was a typo in your code or a misunderstanding?

 

thanks for hanging in there-hopefully some of this back and forth is useful for future builds.

I'm all for making improvements, but I'm still not sure what improvements you're recommending or how any of this can help guide my development efforts. Help me understand?

Link to comment
Share on other sites

Please explain what you mean by "the timeline it's talking to finishes its own animation". What's talking to what? I thought you wanted to have the timeline jump to its end point

 

yep... if you look at the animation:

http://www.taylorimaging.com/clientarea/timeline/

 

roll over 2008. The months start animating in. If I to to February before the months finish, the animation stops. If I add in timeline.duration, then it goes to the end. What I want to happen is that you can go on to the month and the months themselves will continue to animate in. I have a hunch this is not possible.

 

THEN, I need to somehow release the pause, so that on ROLL_OUT, I can use reverse();

 

make sense?

Link to comment
Share on other sites

Pretty much anything is possible. Seriously. It's just a matter of figuring out how the logic should flow and how to use the tools. I think you're struggling with both which is probably pretty frustrating for you. I can help with answering questions about the GreenSock tools. Since my time is limited, I can't help as much with setting up the logic for you (not that you're asking me to do that).

 

You could set up the animation for each level of the submenus in its own TimelineMax instance. Then you could create a master TimelineMax instance whenever the user rolls out to sequence the reversed versions of the timelines you created. Kinda like (pseudo code):

 

var mainMenuTL:TimelineMax = new TimelineMax({paused:true});
mainMenu.TL.append(...);

var subMenuLevel1:TimelineMax = new TimelineMax({paused:true});
subMenuLevel1.appendMultiple( TweenMax.allTo(...) );

var masterTL:TimelineMax;

function rollOver(event:MouseEvent):void {
   if (masterTL != null) {
       masterTL.kill();
   }
   masterTL = new TimelineMax();
   masterTL.append( mainMenuTL.tweenTo( mainMenuTL.duration ) );
   masterTL.append( subMenuLevel1.tweenTo( subMenuLevel1.duration ) );
}

function rollOut(event:MouseEvent):void {
   if (masterTL != null) {
       masterTL.kill();
   }
   masterTL = new TimelineMax();
   masterTL.append( subMenuLevel1.tweenTo( 0 ) );
   masterTL.append( mainMenuTL.tweenTo( 0 ) );
}

 

Hope that helps.

Link to comment
Share on other sites

yep... very frustrated and that last sample is foreign to me. I sort of hope that these "solutions" make it easier for someone like me to be able to do cool stuff. It's actually creating the opposite effect.

 

I'll see if I can figure this out from what you gave me, but I really don't know what's what.

 

Dave

Link to comment
Share on other sites

it's official. That last batch of code has sent me over the edge. It's totally different from what I have, and has all kinds of new and different stuff that I don't understand, nor do I know how to make it work for me.

 

Is this all really timeline Max code? I'm just not a programmer or an actionsript person and this looks pretty advanced.

Link to comment
Share on other sites

Did you watch the video?

 

Just to clarify, the tweenTo() stuff on the TimelineMax instances simply tells that timeline to tween to a specific time. In the case of the rollover, we want the mainMenu animation to play in its entirety, THEN have the subMenuLevel1 animation play in its entirety. Therefore, we tweenTo() each timeline's duration (the end). I tuck those into another (parent) TimelineMax (tweenTo() just returns a TweenLite instance). That makes sequencing easier because we can just append() and not worry about the insertion times. The reason I set things up in TimelineMax instances like this, is because we have no idea when the user may roll out. Having the animations separated by menu levels in their own TimelineMax instances makes it very easy to manage because then when the user rolls out, we just tweenTo() back to the beginning of each timeline (to time 0, kinda like reversing) and we tuck those tweenTo() tweens into a TimelineMax to make sequencing easier. Note that I did it in the reverse order so that the subMenuLevel1 goes first, then the mainMenu. The nifty thing about this setup is that we don't have to care about the timings or setting up all the tweens again, etc. And the user can rollover/out/over/out as fast as they want and it all works just great.

 

Again, if you haven't watched the video at http://www.greensock.com/timeline-basics/, please do.

Link to comment
Share on other sites

I did watch the timeline basics. In fact, in the beginning of this thread I said that I basically duplicated that code.

 

It's just too far over my head. I was hoping for a simpler solution.

 

Maybe if I stare at that new code long enough something will come of it and I'll figure it out. For now however, I am as you said frustrated.

Link to comment
Share on other sites

Is this all really timeline Max code? I'm just not a programmer or an actionsript person and this looks pretty advanced.

 

TweenLite and TweenMax make tweening very simple even for non-programmers. However, you're not doing simple tweening. You're attempting to build a flyout menu system that dynamically adjusts its animation based on user interaction and fluidly manages playing sequenced animations forwards and backwards. Believe it or not, TimelineLite and TimelineMax make this process MUCH, MUCH easier than it would be otherwise. Ask any developer who knows what they're doing and I'm confident they'll agree. The code I gave you is probably 1/10th as advanced and verbose as it would need to be without the use of those tools. I consistently hear from developers who start working with the GreenSock animation tools (especially TimelineLite/Max) and say things like "oh my GOSH! This is amazing. You just made my life 10x easier. I wish I had these tools on the last 8 projects..."

I'm a designer too. I came from a non-programming background. I used to look at code and my eyes would glaze over. It can be baffling. I'm with you. We designers like visual things that can be intuitively understood. Coding can make us feel like a fish out of water. You'd think that a flyout menu system would be...well...pretty simple. But when you consider the behavior and all the logic necessary to really make it work well, you realize that it ain't that simple. That's why I recommended just getting a component from activeden.net or something. It seems like you're in over your head when it comes to ActionScript (and that's okay!). You'll end up much happier and with a better end product if you just bite the bullet and hire a developer who has a good understanding of ActionScript. Again, I don't mean any of that as an insult. I'm just trying to be honest and save you some hassle.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...