Search the Community

Remove the () from function name so it doesn't fire right away. Good TweenLite.to(peopleContainer.peopleHdr, .5, {y: (peopleContainer.peopleHdr.y+75), alpha:1, overwrite:3, onComplete: toggleVisibility}); Bad TweenLite.to(peopleContainer.peopleHdr, .5, {y: (peopleContainer.peopleHdr.y+75), alpha:1, overwrite:3, onComplete: toggleVisibility()});

Hello there, First, TweenLite is the fastest tweener ever GREAT JOB! i use your delightful library exclusively. Thank you so much! Second, sometimes when using TweenLite, my onComplete functions fire immediately, ie: TweenLite.to(peopleContainer.peopleHdr, .5, {y: (peopleContainer.peopleHdr.y+75), alpha:1, overwrite:3, onComplete: toggleVisibility()}); this statement is unfortunately toggling the visibility before the tween even starts in reading the forums, it seems there is a scoping issue in Actionscript 2 but explicitly not so for AS3 and as this is AS3, i wanted to reach out and check with you. Thanks again for the great free fast code! ~Owen Corso ored.net

Wow, I wasn't expecting a response from you so soon. I figured I'd hear from you this afternoon maybe. 1. All dots the same name: clumsiness born of repetitive code modifications to solve the current problem; added "+ i". 2. tweens in a TimelineLite: so that I could use remove(); trying to make sure tween was removed in case garbage collection didn't occur. Removed the TimelineLite var. 3. dumpClips(): attempt to solve overloading problem; only way I could think of to dump the clips. Removed it. 4. I need to use allFrom() because allTo() would only allow me to move all the dots to the same location. I define the ending location of each dot on the root by rotating a line mc and getting the width and height. I would prefer to use allTo(), but my trig abilites are well beyond rusty. I didn't mean to imply that TweenMax was the problem. I think my code is the problem, and maybe there's more I can do to optimize. I tried loading the dot mcs on the root and reusing them each time the tween is called but there is no performance difference. The tween that I included in the code block is called from another tween. So here are both of them with updates to my previously posted code. If you have time to review and comment, I'd sure appreciate it. function movedot():Void { for(var i:Number = 0; i < 16; i++){ dot_mc = this.attachMovie("dot", "dot" + i, getNextHighestDepth()); dot_Array[i] = dot_mc; dot_Array[i]._alpha = 0; // _root.xcd_Array and _root.ycd_Array contain ending values for each dot_Array[i] dot_Array[i]._x = _root.xcd_Array[i]; dot_Array[i]._y = _root.ycd_Array[i]; } TweenMax.allFrom(dot_Array, 1, {_x:0, _y:0, _alpha:100, ease:Linear.easeNone, overwrite:false}); } // on _root //( leader_mc is a 2px circle that moves to a random x,y and calls movedot() onComplete ) var leader_Timeline:TimelineLite = new TimelineLite; leader_Timeline.append(new TweenLite(leader_mc, 1, {_x:aimPoint_x, _y:aimPoint_y, ease:Linear.easeNone, overwrite:false})); leader_Timeline.insert(new TweenLite(leader_mc, 1, {bezierThrough:[{_x:midpoint_x, _y:midpoint_y}, {_x:endPoint_x, _y:endPoint_y}], _alpha: 0, ease:Linear.easeOut, overwrite:false, onComplete: movedot}), .4); leader_Timeline.insert(new TweenLite(leader_mc, .5, {ease:Linear.easeNone, overwrite:false, onStart: playSound}), .2);

I've been trying for about a week to get this fairly simple animation to run without overloading my old machine's CPU (1.8 gz, 1.5g RAM). A recent test on a machine with 2.4 gz and 4g RAM gave similar results. I know I'm doing something wrong but I sure need some help to figure out what it is. I launch the same tween with each click so a rapid clicker can launch as many as 5 tweens per second. Each tween has a duration of 1and all run well until about 5 rapid clicks, then everything starts to slow down. If I click about 20 times the animation stops for about 10 seconds, starts again, and then finishes the tweens that I launched. But, if I start clicking again then all the tweens start out dog slow and my machine stalls. So it looks as if my code is maybe using up all my RAM. The tween below uses a 2 px dot (attached 16 times) and moves each one radially so that it looks like an expanding cirlce of dots. Am I simply being too ambitious with the tweens? Also, does "TweenMax.allFrom" actually run a separate tween for each object in it's assigned array? Is it more efficient than running a separate tweenLite for each array object? var dot_Array:Array = new Array(); var dot_mc:MovieClip; var dot_Timeline:TimelineLite = new TimelineLite; function dumpClips():Void { for(var i:Number = 0; i < 16; i++){ removeMovieClip(dot_Array[i]); } remove(dot_Timeline); } function movedot():Void { for(var i:Number = 0; i < 16; i++){ dot_mc = this.attachMovie("dot", "dot", getNextHighestDepth()); dot_Array[i] = dot_mc; dot_Array[i]._alpha = 0; // _root.xcd_Array and _root.ycd_Array contain the ending positions for each dot dot_Array[i]._x = _root.xcd_Array[i]; dot_Array[i]._y = _root.ycd_Array[i]; } dot_Timeline.append(new TweenMax.allFrom(dot_Array, 1, {_x:0, _y:0, _alpha:100, ease:Linear.easeNone, overwrite:false, onComplete: dumpClips}, 0)); }

I'm confused - you want to allow multiple tweens to control the same property of the same object? Maybe you're wanting to use a variable to track the destination y value and always append amounts to that variable on the new tweens. In other words, if every time I click a button, it should tween down 10 pixels, and I click 5 times really fast, you want the last tween to make it move down 50 pixels total (from where it was at the beginning). If that's the case, use a variable. Kinda like this: var destinationY:Number = mc.y; //current position. function clickHandler(e:MouseEvent):void { destinationY += 10; TweenLite.to(mc, 1, {y:destinationY, overwrite:true}); }

Thanks for quick answer. I think I should have said, that I don´t want to overwrite tweens, because they all need to be done. The tween repeats everytime, when a new box appears. TweenLite.to(box, 0.5, { y:box.y + 100} ); Sometimes the next tween starts within the duration of 0.5. So I´d like to set NONE with the OverwriteManager, but having the problem that it seems not possible with overlapping properties. Ciao Martin

Absolutely! You've got tons of options. Check out http://blog.greensock.com/overwritemanager/ (although the names have changed slightly in v11). You probably just want to set overwrite to true or use the AUTO mode in OverwriteManager by calling this once in your swf: OverwriteManager.init(2);

Sure, you just forgot to set overwrite to false on the second one. Please see http://blog.greensock.com/overwritemanager/ for details on overwriting modes. TweenLite.to(mc,1,{ _x:20, ease:Quart.easeOut}); TweenLite.to(mc,1,{_y:80, ease:Quart.easeIn, overwrite:false});

Thank you for your time, and also thank you very much for getting back to me in my previous question. If its any consolation, I am learning quickly - and if it wasn't for the fact that I really like to construct my site using loadMovie then this would not be so critical for me to get right. I anticipate once I get this, then happy days and I will never be stuck at this point again; nor will anyone else in the future if this exchange becomes a swift reference point for such questions re loadMovie. I understand the logic of flash - the syntax often escapes me, but I am learning by doing. So I separated the functions (at least I hoped I had): var pause_one_loading:TweenMax = new TweenMax.to.delayedCall(10.0,load_one); function load_one():Void { _root.loader_mc.loadMovie("pages/one.swf"); } and then I call it from: one_mc.onRelease=function(){ TweenMax.to(_root.band_mc,0.3,{_height:0.25, yoyo:1, overwrite:1}); load_one.play(); } But that may well, strictly speaking, be a nested function of sorts, so next I tried to assign two clearly separate functions to the same event: one_mc.onRelease=function(){ load_one.play(); } one_mc.onRelease=function(){ _root.loader_mc.loadMovie("pages/one.swf"); } Both times I get the same error, "there is no method with the name 'play'" I know you have enough of a drain on your time to refer questions about loadMovie and tween clashes elsewhere, but perhaps this exchange can be quickly referred to in future questions regarding delaying a loadMovie call? I had no idea that delayed.Call existed, and it is a godsend. I have skimmed the documentation but my eye was geared towards tweening rather than anything else. Best regards, LF

Hi, I have a newbie problem, (and the miracle for me with greensock tweening is that I don't have a lot more of them). In order to avoid loadmovie and a tween from causing unwanted things happening, I put my loadMovie in a function that uses delayedCall - this is AS2, btw - one_mc.onRelease=function(){ TweenMax.to(_root.band_mc,0.3,{_height:0.25, yoyo:1, overwrite:1}); TweenMax.to.delayedCall(1.0, loadOne); function loadOne():Void { _root.loader_mc.loadMovie("one.swf"); } }; The tweens (there are a series of these clips on the page) work brilliantly. Unfortunately the loadMovies aren't loading any swf's. They all load via a single empty mc, if that has any bearing. If anyone can help me on this I would be very very grateful. I would make a concerted effort to search deeper rather than ask here, but I promised my girlfriend that I wouldn't work this evening, and I need to make a flying start to tomorrow as a result of not working this evening. * Thank you* all very much for your kindness and your time.

Yep, there's a much more efficient way to do that. Like: var logo:DisplayObject; for (var i:int = 1; i logo = this.getChildByName("logo" + i); TweenLite.from(logo, 2, {alpha:1, width:1, height:1, x:360, y:270, delay:Math.random()}); TweenLite.to(logo, 2, {alpha:0, width:1, height:1, x:360, y:270, delay:7 + Math.random(), overwrite:false}); }

Sorry for my english as i am Canadian french let say i use a class to keep different animation props : var slideWithBlur:WinAnimType=new WinAnimType([{ease:Strong.easeOut,startAt:{x:1000,y:'T'}},{x:-2000,ease:Regular.easeIn}],[.75],[{blurFilter:{blurX:100}}]); so i could do : manager.openWin('win1',slideWithBlur,WinType.BASIC); basically, i have 3 params 1:An array containing two object (in, out) 2:An array containing one or two number (speed) if only one number exists, it is used for in and out animation 3:An array containing one or two object (FX) if only one number exists, it is used for in and out animation Two tweens are used at the same time with overwrite 0 (one for the basic props and the second for the Fx, mainly blur) In this example, the object comes from the right (x:-1000) and aligned to top (y: 'T') (i parse the letter in my code and inject it in the tween props) in addition, the object is blurred from 100, to 0 (i use Tween.from for the blurIn), then from 0 to 100 (i use Tween.to for the blurOut) The problem is that on blurOut , my objetc will do 0 to 100 for the blur instead of 100 to 0 like it should (that is when i reuse the BlurFilter props for the in and out) But if i do [{blurFilter:{blurX:100}},{blurFilter:{blurX:100}}] as third param instead of [{blurFilter:{blurX:100}}] it work as expected Shouldnt the same work for the in (from) and out (to) Here is the get function returning from inside the class WinAnimType: public function get animFxIn():Object { return $fxAnimProps[0]; } //the array contain only one objet, used it for in and out public function get animFxOut():Object { return ($fxAnimProps[1]==null) ? $fxAnimProps[0]:$fxAnimProps[1]; } I hope it is clearer now,and many thanks again !!!

Actually, I thought with overwrite set to 0, the first tween would be allowed to end before the second one started. I just gave the two together like that as an example - they 'can' happen together in a game I'm building - when an object begins flipping, it's possible to click another object... when that happens I want the first object to complete it's flip, then flip again to go back to its original position. I see the flaw now, yes. Thanks for the clarification. Funny, I've been using TweenLite for a couple years and never ran into this.

hi, i'm using as3 tweenmax and tweenlite i want to make blur and move animation. but, i need first and last values of blur effect during animation. I tried timeline and overwrite but timeline is stopping before second animation.dont understand overwrite my code is here. but values is the same all time. TweenMax.to(container.markalar, 1.5,{x:git,blurFilter:{blurX:20}, ease:Elastic.easeOut} ); TweenMax.to(container.markalar, 3,{alpha:1,blurFilter:{blurX:0}} ); I want to my blur effect values begin 0 , high 20 and ending with 0 again. how can i do this?

Sure, but two cautions: 1) You're using transition:"easeOutElastic" but that looks like Tweener syntax. With TweenLite, it's ease:Elastic.easeOut (don't forget to import the easing equation) 2) You're creating two tweens of the same object, but the second one will overwrite the first one unless you set overwrite:false or initialize OverwriteManager once, like OverwriteManager.init(2). See http://blog.greensock.com/overwritemanager/

Nope, it's definitely not a bug. I think you might be misunderstanding how a tween works and when the starting values are populated. When a to() tween actually begins playing (after any delay), it will tween the property from wherever it is at that moment to whatever you defined. So consider the following code: TweenLite.to(myObject, .5, {rotationX:"180"}); TweenLite.to(myObject, .5, {rotationX:"180", overwrite:0}); Both tweens will start at the same time. So let's say the rotation is currently 0. The first tween will start and say "okay, add 180 to whatever the current value is over the course of 0.5 seconds. Go!" And it applies the very first increment (so if you were using a linear ease, and the first render happens at 0.02 seconds, it'll set the value to 3.6). then the second tween starts and say "okay add 180 to the current value which is 3.6....) See what I mean? When the 2nd tween finishes, it'll be at 183.6. Your code was assuming the second tween would look at the first one, immediately fastforward that tween to its end, and add the relative value to that. See the logic flaw? You really shouldn't have two tweens of the same object affecting the same property at the same time anyway. Did you want to sequence them? If so, make sure you add a delay to the second tween. Or use the new TimelineLite or TimelineMax class in v11 to set up a whole sequence. http://blog.greensock.com/v11beta/

I have two tweens on an object in CS4 that do a rotate on X by 180º. When I use strings like I want, so the object rotates from wherever it is, the overwrite:0 is not working. I do: TweenLite.to(myObject, .5, {rotationX:"180"}); and then: TweenLite.to(myObject, .5, {rotationX:"180", overwrite:0}); In the second tween, it just goes from wherever the first one is, regardless of the overwrite setting, causing the object to 'land' at an incorrect angle - ie not 360º rotated. I've had to resort to using hard coded values for the rotations instead of strings like I was hoping for. Seems a bug to me.

Ok, so I almost have this wrapped up, but I still have an issue, I have an object that has four properties dimension radius center[0] center[1] obviously center is an array that has two values im trying to access each value individually like so ShaderUtils.tweenTo([mc],"Twirl",2.4,{ center[0]:100, center[1]:300, dimension:[233], radius:[3] }); of course center[1] and center[0] do not work, i get 'expecting colon before left bracket' syntax error; ////////////////////////////////////////////////////////////////////////////////////////////////////////// i tried this as well var vars:Object = { }; vars.overwrite = 0; vars.ease = $easeType; vars[center] = []; vars[center][0] = 100; vars[center][1] = 300; vars[dimension] = 233; vars[radius] = 3; vars.onUpdate = function() { var filter:ShaderFilter = new ShaderFilter(currentShader.shader); $target.filters = [filter]; } TweenLite.to(currentShader, $time, vars); any ideas

I have three movie clips on the stage. Inside each movie clip are four objects named "hover1" -- "hover4" Inside each movie Clip is this code. for (i=1;i<=numberOfQustions;i++){ //setup hover effects eval("hover"+i).useHandCursor = false; eval("hover"+i).onRollOver = function (){TweenLite.to(this,.5*tT,{_alpha:50});}; eval("hover"+i).onRollOut = eval("hover"+i).onDragOut = function (){TweenLite.to(this,.5*tT,{_alpha:0});}; } When I mouse between the objects in the same movie clip, everything works perfectly. However, when I quickly move from one movie clip to another, onto a hover with the same name in another movie clip, the "fade out" stops. I tried adding "overwrite" to the tweens (0,1,2,3), but not gave the correct effect. Please help! I don't want to make the names in each MC unique - it defeats what I'm going for, the contents of these movie clips needs to be identical. Thanks!

Does anyone know of a slideshow tutorial or source code with greensock transitions? I'm looking for a slide transition with timer and prev and next buttons. I've done it with either buttons or timer but getting both to work is starting to wear on me. Here is the code if you can see ways to help, it would be appreciated. As far as I can tell, the timer part works great by itself, but as soon as I click on a button while in mid-transition, I'll get duplicate copies of timers. Does the onComplete perameter fire even if the tween never reaches it's finish? Is there a way to deal with that? Thanks. var waitTime:Number = 1; //the timer between each transition var clipNum:Number = 0; //dont change var startX:Number = slides_mc.clip_1._x; //for slide positioning var homeX:Number = slides_mc._x; //stores original slide_mc x position var curX:Number = slides_mc._x; //stores the current slide_mc x position var timer:Number; var tween:TweenMax; var clipArray:Array = [slides_mc.clip_1, slides_mc.clip_2, slides_mc.clip_3, slides_mc.clip_4, slides_mc.clip_5, slides_mc.clip_6]; setPosition(); startTimer(); //position all slides side by side function setPosition():Void { for (var i:Number = 0; i < clipArray.length; i++) { var clip:MovieClip = clipArray; clip._x = (clip._width * i) + startX; } } //start and clear timer function startTimer():Void { timer = setInterval(function () { if (clipNum >= clipArray.length - 1) { slide1(); } else { slide2(); } clearInterval(timer); }, waitTime * 1000); } function slide1():Void { TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}}, blurFilter:{blurX:0}, _x: homeX, //delay: waitTime, ease: Quint.easeOut, overwrite:3, onComplete: startTimer}); clipNum = 0; curX = homeX; trace("clipNum = " + clipNum); trace("curX = " + curX); } function slide2():Void { TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}}, blurFilter:{blurX:0}, _x: curX - slides_mc.clip_1._width, //delay: waitTime, ease: Quint.easeOut, overwrite:3, onComplete: startTimer}); clipNum++; curX = curX - slides_mc.clip_1._width; trace("clipNum = " + clipNum); trace("curX = " + curX); } //nav buttons btn_next.onRelease = function() { clearInterval(timer); curX = curX - slides_mc.clip_1._width; clipNum++; trace("clipNum = " + clipNum); trace("curX = " + curX); TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}}, blurFilter:{blurX:0}, _x: curX, ease: Quint.easeOut, ovewrite:3, onComplete: startTimer }); } btn_prev.onRelease = function() { clearInterval(timer); curX = curX + slides_mc.clip_1._width; clipNum--; trace("clipNum = " + clipNum); trace("curX = " + curX); TweenMax.to(slides_mc,.7,{startAt: {blurFilter:{blurX:20}}, blurFilter:{blurX:0}, _x: curX, ease: Quint.easeOut, ovewrite:3, onComplete: startTimer }); }

Hey Jack, I am using TweenMax 10.12 (AS3). I have run into a problem where... if I tween something like so... TweenMax.to(thumb, slideTime, {transformAroundCenter:{rotation:this.layoutData[index].rotation}, x:this.layoutData[index].point.x, y:this.layoutData[index].point.y, ease:Back.easeOut, onComplete:thumbTweenComplete, onCompleteParams:[thumb] }); then later try to do something like... TweenMax.to(clickedThumb, slideTime, {transformAroundCenter:{rotation:this.layoutData[0].rotation}, bezierThrough:[{x:200, y:200}, {x:this.layoutData[0].point.x, y:this.layoutData[0].point.y}], ease:Quad.easeOut, onComplete:thumbTweenComplete, onCompleteParams:[clickedThumb] }); The x, y of the object will not tween. I tried using overwrite:1, that seemed to work, but it doesn't work in a browser?? Have you ran into any problems with do a normal x, y tween then later trying to do a bezier tween? Thanks

Wow, that was weird - definitely looks like a bug in Flash. There was a play() call inside gotoAndPlay() that wouldn't resolve unless I added "this." to it, this.play() even though that should be implied! Anyway, I just posted a fix. Thanks for letting me know about the issue. As for adding a stop() action, you have several options: 1) Use TimelineMax's addCallback() to add a callback which calls stop() at a particular time on the timeline. 2) Manually add a zero-duration TweenLite with immediateRender:false and overwrite:false to the timeline with an onComplete - that's the same as using TimelineMax's addCallback() but less convenient. 3) Use TimelineMax's tweenTo() method if you want to just go from wherever the timeline is to a particular point and stop.

No, I think you misunderstood. The default behavior in TweenLite (when you DON'T call OverwriteManager.init() or use TweenMax/TimelineLite/TimelineMax) is to immediately and completely kill all existing tweens of the same object when a new tween is created. So initializing OverwriteManager wouldn't help you performance-wise. TweenLite was already overwriting previous tweens immediately. And even if OverwriteManager is initialized, you can pass overwrite:true in your tween to force it to overwrite all existing tweens of the same object. Maybe try that and see if it helps things at all. Although if you're just going to play() and reverse() a single tween now, that's even better.

Oups sorry my mistake, you are right I meant reverse. I will edit my post. This is also great news to hear that tweenlite now supports reverse, I always wanted that For the overwrite manager, I thought that if you didn't initialize it it would automatically overwrite any overlapping tween. Anyway good info to hear that it wasn't the case. So it would mean that I could have probably solved my problem by initialising it?. I could send you my project if you want to see the behavior but it was the problem to be sure... since I change that for a timelineLite (a Tweenlite VERY soon ) the animation runs very smoothly and as it should. Thanks

Ok here are my findings so it might help others. I have a button class which have it's own listeners applied to it so as soon as I add a button it is already set up. These events included a RollOver and a RollOut. The reason my little application was running slow is this (simplified code to make it simple): private function fadeIn(e:MouseEvent):void //RollOver listener { TweenLite.to(texte_mc.titre_mc, .2, {colorTransform:{tint:0xffffff}}); } private function fadeOut(e:MouseEvent):void //RollOut listener { TweenLite.to(texte_mc.titre_mc, .2, {colorTransform:{tintAmount:0}}); } It seems that when I was moving the mouse over the buttons very fast, the fact that the tweens were "going one over the other" (which I don't understand since I didn't init the overwrite manager) was completely bugging my app... To solve the problem I just did a timelineLite so even if the tween isn't complete it will just reverse from where it is. Like this: public var timeline:TimelineLite = new TimelineLite({paused:true}); timeline.append(TweenLite.to(texte_mc.titre_mc, .2, {colorTransform:{tint:0xffffff, tintAmount:1}})); private function fadeIn(e:MouseEvent):void //RollOver listener { timeline.play(); } private function fadeOut(e:MouseEvent):void //RollOut listener { timeline.reverse(); } Thanks again