Search the Community

I noticed several problems: 1) You desaturation the Loader immediately, but your rollOver/rollOut handlers try to saturation/desaturate the content of the loader. So you've desaturated the container which means that even if the contents of that container are fully saturated, you'll never see it because the container itself is desaturated. You should make your tweens affect either the loader or the contents consistently. 2) You've got conflicting tweens: TweenMax.to(mc, 3, {colorMatrixFilter:{saturation:0}, delay:1, overwrite:0}); TweenMax.to(mc, 3, {colorMatrixFilter:{saturation:1}, delay:0, overwrite:0}); After the delay expires (1 second), you've got two tweens that both control the same property of the same object for 2 seconds. Not good. Be careful about setting overwrite:0. Usually the AUTO mode does a very good job. In any case, I'm not sure what you were trying to accomplish with these tweens, but they definitely shouldn't be run together. Hope that helps.

Well, I'm not generally a fan of that style of creating tweens because it's a bit clunky and slow. Iterating through the properties of an object and copying them to a new object is...well...slow. If you want to create some general styles that can be overridden when necessary, you could just set up some functions that accept parameters for stuff that might change, kinda like: function navOver(target:Object, duration:Number, delay:Number=0, overwrite:uint=1):TweenLite { return new TweenLite(target, duration, {alpha:0.6, scaleX:1.1, scaleY:1.1, ease:Sine.easeOut, delay:delay, overwrite:overwrite}); } function navOut(target:Object, duration:Number, delay:Number=0, overwrite:uint=1):TweenLite { return new TweenLite(target, duration, {alpha:1, scaleX:1, scaleY:1, ease:Sine.easeIn, delay:delay, overwrite:overwrite}); } Or if you want more flexibility and are willing to give up some speed, you could set up defaults like: public static const NAV_OVER:Object = {alpha:0.6, scaleX:1.1, scaleY:1.1, ease:Sine.easeOut, delay:0, overwrite:1}; function tween(target:Object, duration:Number, style:Object, vars:Object=null):TweenLite { if (vars == null) { vars = {}; } for (var p:String in style) { if (!(p in vars)) { vars[p] = style[p]; } } return new TweenLite(target, duration, vars); } Then you could simply pass in the style, like: tween(mc, 1, NAV_OVER); //uses all defaults tween(mc2, 1, NAV_OVER, {delay:1, onComplete:myFunction}); //overrides the delay and adds an onComplete Just a few ideas. Hope it helps.

Yep, I see the problem. You set up 2 vars objects and then you reuse them. That's fine, but you keep changing the "delay" property of each one. So you changed it to a non-zero value, and then when you used that same vars object again and didn't alter the delay property, you probably thought it was zero, but it wasn't - you had set it to something else previously. That's why it worked fine when you made sure to specifically set it to zero. Also, you said you're not initing OverwriteManager but you used an overwrite mode of 3 on one of the tweens - that won't work unless OverwriteManager is initted. Make sense now? If something isn't working as expected, feel free ask. There's no voodoo magic going on in there that would cause strange behavior, requiring you to set overwrite values in strange places . It should prove to be rock solid. No known bugs whatsoever. And I know a lot of people that kick the snot out of this little engine and rely on it heavily with zero problems. (not to imply there are never bugs - just saying you can generally trust it to do its job very well even under tons of stress) Happy tweening!

Hey thanks for the quick reply. I don't *believe* the timer is causing the conflict, because it's a long delay and I'm testing the rollovers well within that delay tolerance. Regardless, here are the relevant pieces of code for you to peruse: Setting up some constants: private static const PULSE_TIMER_DELAY:Number = 5 * 1000; private static const PULSE_REPEAT_DELAY:Number = 3 * 1000; private static const PULSE_ITEM_DELAY_SECONDS:Number = .175; // rollover and tween values - I'm putting them up-front here just to make it easier for my guys to tweak the values without digging deeply into the code private static const TWEEN_FRAMES:Number = 8; private var navTweenStates:Object = { over: { alpha: .6, scaleX: 1.1, scaleY: 1.1, ease:Sine.easeOut }, out: { alpha: 1, scaleX: 1, scaleY: 1, ease:Sine.easeIn } } private var pulseTimer:Timer; // this will hold my Timer object to add a nice juicy delay to the timer Then we initialize the view, and get a reference to the appropriate movieClip (navMC). navMC is a MovieClip that contains 3 buttons. We get references to those three buttons and they are passed to the TweenLite constructor (well, your .to static function cause I don't want to feel obliged to hold onto a reference to the TweenLite object! haha) The "pulse" code private function startPulseTimer() { pulseTimer.start(); } private function resetPulseTimer() { pulseTimer.delay = PULSE_TIMER_DELAY; // this sets up the initial delay before the first "pulse" pulseTimer.repeatCount = 1; pulseTimer.reset(); } private function stopPulseTimer() { pulseTimer.stop(); } private function doPulse(event:TimerEvent) { for (var i = 1; i < 3; ++i) { // cause there are 3 buttons that have to pulse var navItem = getNavItem(i); var tweenObj = navTweenStates["over"]; tweenObj.overwrite = 1; // just to be safe. I realize that 1 is the default since I'm not initing overwriteManager, but hey, things got weird back there... TweenLite.to(navItem, tweenTime, tweenObj); tweenObj = navTweenStates["out"]; tweenObj.delay = tweenTime; // this is the delay to get the second pulse to follow the first, since I couldn't find a "back and forth" tween class - though now I'm aware there is one: thanks! tweenObj.overwrite = 0; TweenLite.to(navItem, tweenTime, tweenObj); } pulseTimer.delay = PULSE_REPEAT_DELAY; // this is a shorter delay between subsequent "pulses" pulseTimer.repeatCount = 1; pulseTimer.reset(); // probably redundant here but I'm not taking any chances! pulseTimer.start(); } Now the reason I set up this timer will hopefully be more clear - because there's this long initial delay, then smaller delays between subsequent pulses. But the pulsing is turned off as soon as the user interacts with the buttons. Once the user has stopped interacting, the long delay starts over, and then after the first pulse, goes back to the shorter delay. Here's the mouseover stuff: override protected function navButtonOver(event:MouseEvent) { stopPulseTimer(); var tweenObj = navTweenStates.over; tweenObj.overwrite = 3; tweenObj.delay = 0; TweenLite.to(event.currentTarget, tweenTime, tweenObj); } override protected function navButtonOut(event:MouseEvent) { resetPulseTimer(); startPulseTimer(); var tweenObj = navTweenStates.out; tweenObj.overwrite = 3; tweenObj.delay = 0; // if I don't include this parameter at all, I see a delay when the user rolls the mouse out! Do note that at this point, the timer is stopped and there is no pulsing tweens going on anywhere else. TweenLite.to(event.currentTarget, tweenTime, tweenObj); } What do you think? Without resorting to TweenMax, where do you think this issue is coming from? I'd like to solve it from m y code first, before you show my some funky new-fangled way of doing things, just because I want to understand the error first. Thanks so much, T

Could you post an example of the broken version? I think there must be something else going on - the delay never carries over from one tween to another, and you're right - the overwrite:true will definitely kill all existing tweens of that object. However, you mentioned a timer that you set up that triggers a new pulse every so often - I wonder if that's causing the problems? TweenLite cannot know that your Timer is going to call a function that triggers new TweenLite instances (preemptively overwriting tweens that don't exist yet). Oh, and for the pulse effect, you might want to try using combining the new "repeat", "repeatDelay", and "yoyo" properties of TweenMax v11 because you could get a similar effect with one line of code that'd replace all your timer stuff and the two other tweens. Like: TweenMax.to(mc, 1, {scaleX:1.5, scaleY:1.5, repeat:-1, repeatDelay:0.5, yoyo:true}); http://blog.greensock.com/v11beta/

Hi guys. Thanks GS for the great classes! I'm just trying them out for the first time. Wouldn't you know it, I've already run into a snag. Let me try to summarize what I'm doing: A button is set to "pulse" at regular intervals. The pulse is achieved by tweeing the scaleX and scaleY properties of the object. Pretty straightforward stuff really. The only complication is that the user can also "make" the button pulse by rolling over it and rolling off it. To do the "pulse", I'm using a pair of TweenLite tweens with a delay between them that's exactly the length of time it takes the first tween to complete - one to grow it to its max size, the other to shrink it back to 100% original size. The reason I'm doing this in 2 steps rather than using Bounce is unclear, other than that I suspected that when the user needs to "take over" the pulse manually by rolling over the object, I wanted to be able to override the current Tween and just set up the new tween to match the rollover / rollout action. so we have something like: TweenLite.to(myButton, tweenLength, {scaleX:1.5, scaleY:1.5, overwrite:1}); TweenLite.to(myButton, tweenLength, {scaleX:1, scaleY:1, delay:tweenLength, overwrite:0}); This works like a charm. My button is happily pulsing. I set up a timer after this which waits for a few seconds, then starts the pulse over again, so there's a few second delay between "pulses". If I understand what's happening here, you're basically holding on to TWO tween objects that could theoretically conflict (because of overwrite:0) but because of the delay, the conflict never occurs. Dandy. Am I right so far? Now, later on in the code, we define the rollover and rollout event handlers. This is where the weirdness creeps in. So my rollover looks like this: TweenLite.to(myButton, tweenLength, {scaleX:1.5, scaleY:1.5, overwrite:1}); and my rollout looks like this: TweenLite.to(myButton, tweenLength, {scaleX:1, scaleY:1, overwrite:1}); Now the way I see this is that either of these two tweens should COMPLETELY REPLACE any and all of the vars associated with the previous tweens that were set up in the pulse. Including the delay. At least that's how I read overwrite:1 (ALL) - completely kill the previous tween on that button (delete the TweenLite object) and then create a brand new one with its own brand-new set of instance variables. Well here's the weird part: the rollover tweens have the delay in them now! If the user rolls over the buttons BEFORE the first pulse ever occurs, there's no delay whatsoever, and everything works as God intended. BUT, if the user waits for a pulse, the next time he rolls over or rolls off the button, there's a delay that's exactly the same length as the delay I set up in the second pulse tween. Now why should this be? First of all, I'm surprised that the delay variable even carries over from one TweenLite object to the next; second, I'm shocked that overwrite:1 doesn't, in fact, overwrite delay! I was able to solve the problem by explicitly specifying delay:0 whenever I don't want a delay, but it seems to me that I should not have to do this. At least, according to how I interpret the documentation. Any insights or thoughts on the matter would be helpful. Tom

Of course. Why, are you running into trouble? If you turn on OverwriteManager in AUTO mode, you don't even have to add overwrite:false. OverwriteManager.init(2); TweenLite.to(square, 2, {z:1000, ease:Back.easeIn}); TweenLite.to(square, 2, {x:400, ease:Sine.easeOut});

Is it possible to do this? For example: TweenLite.to(square, 2, {z: 1000, ease: Back.easeIn, overwrite: false}); TweenLite.to(square, 2, {x: 400, ease: Sine.easeOut, overwrite: false}); If it's not possible, do you have any work arounds to suggest?

I think I see the problem. It's not really a bug as much as a misunderstanding about how and when overwriting occurs. In ALL mode, overwriting occurs immediately when the tween is created. In all other modes (AUTO, CONCURRENT, ALL_AFTER), overwriting occurs as soon as the tween is initted (typically when it starts for the first time). In your example, the first time your timeline starts playing each of the tweens, it inits them and overwriting logic runs. Thereafter, however, it doesn't keep re-initting those tweens. It just renders them. So let's say your timeline plays. Its children are initted. Then you roll over one of those bars and it creates another (standalone) tween. While that tween is running, you start playing your timeline again. The tween that's nested in the timeline doesn't keep looking for competing tweens after it has already initted, so it lets that one run. See what I mean? You could invalidate() the timeline or tween to force it to re-init on the next render cycle. That would consequently force it to overwrite other competing tweens at that point (depending on your OverwriteManager mode). Keep in mind that invalidating a tween/timeline will get rid of all the starting values too which can actually be very handy. If, however, you want to retain the starting values, set the currentTime back to 0 before invalidating(). I know this sounds convoluted, but overwriting is actually one of the most complex aspects of a tweening engine. That's also why a lot of engines don't even have any overwriting management capabilities.

It looks like it... I downloaded the latest version ov v11, but the problem remains. I recreated the problem here: http://www.deeait.com/testing/GS/test.html . Source files are attached below. When you remove the MouseOver/Out functions, everything works nicely. But as soon as there are two tweens on the same mc they conflict, and the new tweens do not seem to overwrite the old ones.

Do you have the latest v11? Please make sure you do, because there was a bug for a few days that was recently squashed. http://blog.greensock.com/v11beta/. And are you saying that the new tween does NOT overwrite the old one when it should?

Check different "overwrite" options and test with that option added to your call.

Firstly, hello everybody! I recently switched to the v11 beta and i´m very happy with the new timeline feature. Thanks Jack! Currently i´m working on a project, where i use the following code: b3Timeline = new TimelineMax({paused:true}); b3Timeline.insertMultiple([ TweenMax.to(mainHolder.sImgHolder, 0.4, {x:-540}), TweenMax.to(mainHolder.barsMask, 0.4, {x:0, width:stage.stageWidth}), TweenMax.to(mainHolder.bar1, 0.4, {x:stage.stageWidth + 30, overwrite:3}), TweenMax.to(mainHolder.bar2, 0.4, {x:stage.stageWidth + 30, overwrite:3}), TweenMax.to(mainHolder.bar3, 0.4, {x:stage.stageWidth + 30, overwrite:3}), TweenMax.to(mainHolder.bar4, 0.4, {x:stage.stageWidth + 30, overwrite:3}), ], "TweenAlign.START"); b3Timeline.appendMultiple(TweenMax.allTo([mainHolder.bar1, mainHolder.bar2, mainHolder.bar3, mainHolder.bar4,], 0.3, {alpha:1}, 0.1), "TweenAlign.SEQUENCE" ); The timeline plays when the user clicks one of the bars, and is reverted on click on a close button. This far everything works nicely, but when i add mouse over & -out listeners to the bars, to call a function like TweenMax.to(mainHolder.bar1, 0.7, {x:540, ease:Exponential.easeOut}); (& back) the tweens seem to conflict: As long as the MouseOver/out Tweens are not finished, the tweening bars wil not start the x property tweens from the timeline . As you see, i tried to set the overwrite mode to 3, so this tweens would kill any existing tweens of the object, but it doesn´t seem to work... Any help would be greatly appreciated! thx, d PS: i attached the swf and main .as of the project. The problem occurs when you repeatedly click and close the 3rd bar from the top

You can either use the "delay" special property to sequence the tweens, or use an onComplete to call a function that does that. Just tween it off the stage and then use removeMovieClip(). TweenLite.to(ruta2_mc, 1, {_x:300, _y:450,_xscale:100, _yscale:100 }); TweenLite.to(ruta2_mc, 1, {_x:800, delay:1, overwrite:false, onComplete:myFunction}); function myFunction():Void { ruta2_mc.removeMovieClip(); } If ruta2_mc is at a level lower than 0, you'll probably have to swapDepths() to a higher level before you removeMovieClip().

I'm looping a MC TweenMax.allTo([counterMC6.numbers4], 1, {y:-600, repeat:140, delay:1.5, ease:Linear.easeNone} ); I have another button that pauses it. TweenMax.allTo([counterMC6.numbers4], 0, {paused:true, overwrite:true} ); How would I resume the repeating animation? Do I have to nest it in another Tween and pause/resume that Tween? I don't want to loose the number of times it has already repeated.

Ok I have three movie clips with rollovers and I want to make the movie clips that I am not putting the mouse over darken. The movie clip rolled over would stay its normal exposure while the others would darken. When the mouse is not over any clip they all return to the normal exposure. I feel like this below should work but I cant get it to act right (sometimes they don't darken and sometimes they do) maybe I am not using the Overwrite manager correctly. I also am sure there is a better structure to accomplish this simple task. Any ideas would be awesome. thanks square1.hitter.onRollOver = function() { TweenMax.to(square2.container,1,{colorTransform:{exposure:.5}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:.5}}); }; square2.hitter.onRollOver = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:.5}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:.5}}); }; square3.hitter.onRollOver = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:.5}}); TweenMax.to(square2.container,1,{colorTransform:{exposure:.5}}); }; square1.hitter.onRollOut = function() { TweenMax.to(square2.container,1,{colorTransform:{exposure:1}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:1}}); }; square2.hitter.onRollOut = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:1}}); TweenMax.to(square3.container,1,{colorTransform:{exposure:1}}); }; square3.hitter.onRollOut = function() { TweenMax.to(square1.container,1,{colorTransform:{exposure:1}}); TweenMax.to(square2.container,1,{colorTransform:{exposure:1}}); };

So I take it that "kill" and "overwrite" are different things? In my example the object only has a single property being tweened and overwritten. So why would AUTO behave differently than CONCURRENT? They are both overwriting individual properties of the tween - a single x position tween. In AUTO, why would a tween continue to "live" when it is the tween that was just overwritten? In your opinion, what should I use in this particular case?

CONCURRENT mode (3) will kill ALL tweens of the same object (regardless of whether or not properties overlap) that are running at the time the tween begins. AUTO will only overwrite individual properties of those tweens (and allow the tweens themselves to live).

So what is my option then? Do I use "overwrite = 3" since that works? And please explain WHY this works. I don't see any difference between "overwrite = 3" and using AUTO in my particular example. It would be sweet to have something like: TweenMax.removeTweens(_holder.content_mc,{x}); ...

Hi, thanks for the help. Yes, I read some on overwriting, and tried overwrite:0 and overwrite:2, but the results appear to be the same. I think this is the problem. A user can click the start button several times per second and the tweens aren't able to keep up with that pace on the same object/same property. I think I need to create an array of objects, each of which can be tweened separately (hopefully with the same series of tweens).

TweenMax V11 If I call the "moveContent" function while the object (_holder.content_mc) is still tweening (x property) the onComplete function is called twice. The TweenMax documentation states: 2 (AUTO): (used by default if OverwriteManager.init() has been called) Searches for and overwrites only individual overlapping properties in tweens that are active when the tween begins. Why doesn't this work? I am tweening the x property of _holder.content_mc ... therefore the tweening of the x property is "overlapping" and should be overwritten. If I substitute "overwrite:3" for "overwrite:2" it works perfectly. OverwriteManager.init() private function moveContent(position:Number):void { var currentx:Number = _holder.content_mc.x; var speed:Number = Math.abs(position - currentx)/500; TweenMax.to(_holder.content_mc,speed,{x:position,overwrite:2,ease:Quad.easeInOut,onComplete:moveTagDown}); }

Have you read up on your options for overwriting modes? http://blog.greensock.com/overwritemanager/. Why are you setting overwrite to 0? Doing so allows the tweens to conflict with each other (multiple tweens trying to control the same property of the same object). You might want to try the AUTO mode. I don't have time to read through your code right now to troubleshoot, but let me know if the overwriting mode solves the problem.

Hi all, I'm new to AS3 but I've managed to get a small tween study working anyway. The code below is a simplified version of what I'm trying to do. The start button launches a series of 4 tweens each time it's clicked and there's no limit on the number of clicks. The tweens handle 3 different "circle" movieclips, each with a different size and color. The "flasher" tween in the code below allows the "circleRed_mc" (which has a duration of only .1) to show with each click, however in the more complex code that I'm trying to fix the "circleRed_mc" doesn't show if the button is clicked rapidly, even though the other 3 display. Do I need to add more copies of the circle objects to avoid the interference between the tweens, or do I need additional tweening functions, or both? A hopefully easier question is why does the last tween ("fadeCircle") not fade out to alpha:0? Here's the code: Frame 1: import gs.TweenLite; import gs.easing.*; import flash.display.MovieClip; var xcoord:Number = 200; var ycoord:Number = 400; var circleSmall_mc:circleSmall = new circleSmall(); addChild(circleSmall_mc); circleSmall_mc.y = ycoord; circleSmall_mc.alpha = 0; var circleRed_mc:circleRed = new circleRed(); addChild(circleRed_mc); circleRed_mc.y = ycoord; circleRed_mc.scaleX = 0; circleRed_mc.scaleY = 0; circleRed_mc.alpha = 100; var circleLarge_mc:circleLarge = new circleLarge(); addChild(circleLarge_mc); circleLarge_mc.y = ycoord; circleLarge_mc.scaleX = 0; circleLarge_mc.scaleY = 0; stop(); function startMovie(event:MouseEvent):void { this.play(); } playButton.addEventListener(MouseEvent.CLICK, startMovie); Frame 2: function leader(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd1:Number):void { small_mc.x = 575; small_mc.y = 700; small_mc.alpha = 100; TweenLite.to(small_mc, .5, {x:xcd1, y:ycoord, ease:Strong.easeOut, overwrite:0, onComplete: flasher, onCompleteParams: [large_mc,small_mc,red_mc,xcd1]}); } function flasher(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd2:Number):void { small_mc.alpha = 0; red_mc.x = xcd2; TweenLite.to(red_mc, .1, {scaleX:50, scaleY:50, alpha:0, ease:Strong.easeOut, overwrite:0, onComplete: showCircle, onCompleteParams: [large_mc,small_mc,red_mc,xcd2]}); } function showCircle(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd3:Number):void { red_mc.scaleX = 0; red_mc.scaleY = 0; red_mc.alpha = 100; large_mc.x = xcd3; large_mc.scaleX = 0; large_mc.scaleY = 0; large_mc.alpha = 100; TweenLite.to(large_mc, 1, {scaleX:1, scaleY:1, ease:Strong.easeOut, overwrite:0, onComplete: fadeCircle, onCompleteParams: [large_mc,small_mc,red_mc,xcd3]}); } function fadeCircle(large_mc:MovieClip,small_mc:MovieClip,red_mc:MovieClip,xcd4:Number):void { xcoord = setx(xcd4); TweenLite.to(large_mc, 1, {alpha:0, ease:Cubic.easeInOut, overwrite:0}); } function setx(xcd:Number):Number{ if (xcd < 800){ xcd += 200; } else { xcd = 200; } return xcd; } leader(circleLarge_mc,circleSmall_mc,circleRed_mc,xcoord);

Hi, I'm working with the TimelineMax, and besides tweens, I'd like to add audio (Sounds class) on the timeline. But when I pause or stop the timeline, the sounds continue playing. I was wondering if TimeLineMax has any features that help me putting the sound on the timeline and manages the pause and gotoTime handling for me. Maybe something with a sub-timeline? var _soundChannel : SoundChannel; var _instance:Sound; // A class instance with a dynamically instantiated Sound. var props:Object = { delay: 0, overwrite: OverwriteManager.AUTO, onStart: function() { _soundChannel = _instance.play(); }, onComplete: function() { _soundChannel.stop(); } }; timeLine.insert(new TweenLite(instance, duration, props), startTime); TIA Ronaldo

A few things off the top of my head after glancing at the code: 1) You set the overwrite mode to 0 (NONE) which means conflicting tweens will be allowed to run. I saw some conflicting tweens like bbook's x property was getting tweened by 2 different tweens at the same time meaning they'll fight with each other. I generally recommend against disabling overwrite management for this reason. Why not use the AUTO mode? 2) You're using a nested numerodos() function. Nested functions are usually problematic because they get deleted as soon as the parent function finishes running. I've seen one case in all my years where a nested function was useful, but in every other case I've seen them just cause problems and confusion. I'd avoid them. 3) In thecloser(), you create a local timer variable. I bet that's getting garbage collected because it's a local variable. Why not use TweenLite.delayedCall()? 4) You used 5 lines to activate your plugins. You can combine those all into one line like this: TweenPlugin.activate([setSizePlugin, AutoAlphaPlugin, BlurFilterPlugin, ColorTransformPlugin, TintPlugin, RemoveTintPlugin]); 5) I noticed you're doing a lot of sequencing. You might want to check out the new TimelineLite and TimelineMax classes in v11 (http://blog.greensock.com/v11beta/). They can make sequencing very intuitive and then you can manage the group/sequence as a whole very easily. Hope that helps.