Carl

here is a sort of simplified version. note an important change x:"50" is the same as x:obj.x + 50 import com.greensock.*; import com.greensock.easing.*; function onMouseClick(e:MouseEvent):void { var tl:TimelineLite = new TimelineLite(); tl.append(animateRight(obj)); tl.append(animateDown(obj)); tl.play(); } obj.addEventListener(MouseEvent.CLICK, onMouseClick); function animateRight(mc:MovieClip):TimelineLite { //you could just create a TweenLite instance instead of TimeliteLite if you are only doing 1 tween var rightTl:TimelineLite = new TimelineLite(); //by puttin x:"50" in quotes it means move 50 pixels relative to mc starting position. rightTl.append( new TweenMax(mc, 1, {x:"50", ease:Linear.easeNone, onComplete:onCompleteTween}) ); return rightTl; } function animateDown(mc:MovieClip):TimelineLite { var downTl:TimelineLite = new TimelineLite(); downTl.append( new TweenMax(mc, 1, {y:"50", ease:Linear.easeNone, onComplete:onCompleteTween}) ); return downTl; } function onCompleteTween() { }

yes, the issue is that you are creating 2 timelines at the same time that do different things. both timelines are running at the same time and NOT in succession. since you have var:tl defined inside 2 functions you are creating 2 timelines with the same name but different scopes. what you ultimately want is 1 timeline that contains 2 tweens. hopefully that helps. in the meantime I will code up a basic fix using your structure. Carl

ok... so if I call tl.play() BEFORE appending the new tween it works really well. on the surface this seems counter intuitive but I'm sure there is a good reason.

I can't do anything with the code you provided as I'm using Flash CS4 but I was able to replicate the issue you have described. if the end goal is to be able to add new tweens to a timeline and have it constantly play I tried the following: import com.greensock.*; import com.greensock.easing.*; var count:Number=0; var tl:TimelineLite = new TimelineLite(); btn.addEventListener(MouseEvent.CLICK, addIt); function addIt(e:MouseEvent):void { if (count%2==0) { trace("even"); tl.append(TweenLite.to(box, 2, {x:400, onStart:getStartX, onUpdate:getX})); } else { trace("odd"); tl.append(TweenLite.to(box, 2, {x:0, onStart:getX, onUpdate:getX})); } trace("currentProgress " + tl.currentProgress); count++; tl.play(); } function getStartX() { trace("**** startX *** " + box.x); } function getX() { trace(box.x); } to maintain tweens with equal distance and time I'm just tweening an object back and forth / left to right over a distance of 400 pixels. it does in fact seem that the behavior is unpredictable. more often than not, the first tween does jump about 90% its total distance before animating smoothly. if I press the btn in quick succession a series of tweens will be generated that play nicely in sequence... but every now and then there is a noticeable jump or stutter. I'm thinking that calling a play in the same instant an append() is called is doing something funky. more often than not, my understanding of what should happen is a bit askew. I don't know what exactly is the cause. I'll see if I can get some additional help. Carl

hey torben, could not open the file. perhaps it is CS5, if you save out as CS4 I will take a look. thx Carl

you haven't exposed any code on how newX is being generated so its possible that: 1: the value of newX is sometimes the same as the object's start position so no movement will be rendered. 2: the value of newX may be so drastically different than the object's start position that it causes a big jump. in the last bit of code you provided you stated : without timeline and then provided code that clearly references a timeline. i'm having a tough time understanding what the intended behavior is. are you trying to create a long sequence of tweens that need to play in succession or do you just need the object to tween to a new position every time a button is pressed? if the latter, there is no need for a timeline. perhaps you can provide an fla with a description of what should happen and I can take a look at it.

every time you press your button you are appending / ADDING a NEW tween to the timeline. if you press the button 30 times, you have CREATED 30 new tweens back to back in one timeline. when you tell a timeline to play(). it plays from the "virtual playhead's" current position... not from the beginning of the timeline. This concept can take some getting used to but is quite sound. if you simply want your animation to play everytime the button is pressed do this: //this creates a timeline containing 1 tween var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite( myTestObject, 1, { x:TEST_X, y:TEST_Y } ) ); //this will make the timeline play from the begininng private function onButtonGoToPosition():void { timeline.restart(); } I understand you are just experimenting which is totally fine and it makes sense to start small. timelineLite really shines when you sequence multiple tweens... so once you get the above to work try this: var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite( myTestObject, 1, { x:TEST_X, y:TEST_Y } ) ); timeline.append( new TweenLite( myTestObject, .5, { alpha:.5 } ) ); timeline.append( new TweenLite( myTestObject, .5, { rotation:180 } ) ); timeline.append( new TweenLite( myTestObject, .5, { alpha:1 } ) ); private function onButtonGoToPosition():void { timeline.restart(); }

using TweenMax you could do: TweenMax.to(box, 1, {x:100, repeat:1, repeatDelay:2, yoyo:true}); the box will move to an x of 100 immediately 2 seconds after the box moves it will move back to its original x if you don't use yoyo the tween will play once from origin x to 100 pause 2 seconds play again from origin x to 100

Hi SireJoe, I don't know what the expected behavior of the buttons is so it is hard to accurately verify if they are functioning correctly. I can verify that when you rollover the buttons in Chrome on Mac they tend to blink rapidly when your mouse is over that little rounded corner thing in the upper left. I imagine rolling over that object is triggering a MOUSE_OUT or ROLL_OUT on the main button. I don't have access to IE7 so this is the best I can do with the information provided. Carl

to dynamically get the VALUE of tarPos1 do trace(_root["tarPos"+inc]); to use this value in your tween TweenMax.fromTo(target, 1, {ease:Strong.easeIn}, {_x:_root["tarPos"+inc]}, {_x:_root["tarPos"+inc2]});

a simple yet maybe not the most elegant way would be to tell each button what image it needs to load like: nav_mc.nav1_mc.imageToLoad = "images/pig.jpg"; nav_mc.nav2_mc.imageToLoad = "images/hamster.jpg"; then on your click event do something like this: function navClick(e:MouseEvent):void { var navItem:MovieClip=e.target as MovieClip; if (currentNav!=navItem) { if (currentNav!=null) { currentNav.useHandCursor=true; TweenMax.to(currentNav.box, .5, {height:10, tint:null}); loadImage(currentNav.imageToLoad); } trace("play some animation"); navItem.useHandCursor=false; currentNav=navItem; } } and then create a function that loads a particular image: function imageToLoad(imageURL:String):void{ //place code here to load your image }

without seeing an fla or swf I can only guess that you need to adjust the y value on the final tween. the y property sets an objects distance top > bottom.

what is the transform issue? you list 3 sequences that you want to occur which is very clear. I'm not sure what the problem is. Is it that when the words are scaled down their spacing is too far apart? are they not moving to the left as one unit properly? this is a great situation to use TimelineLite or a few allTo / allFrom tweens. to keep the syntax simple a basic approach would be place all 3 words on the stage where you want them to be positioned initially import greensock.com*; OverwriteManager.init() // important if using TweenLite and NOT Max and you are sequencing tweens. //have all 3 words appear one after each other TweenLite.from(a, 1, {alpha:0}); TweenLite.from(b, 1, {alpha:0, delay:1}); TweenLite.from(c, 1, {alpha:0, delay:2}); //3 seconds has transpired //move them all the same distance left after the previous tweens complete // by putting -400 in quotes "-400" it means move 400 pixels to the left of where ever you are when the tween starts TweenLite.to(a, 1, {x:"-400", delay:3}); TweenLite.to(b, 1, {x:"-400", delay:3}); TweenLite.to(c, 1, {x:"-400", delay:3}); // move them all up and scale them down after 4 seconds has transpired TweenLite.to(a, 1, {y:10, scaleX:.5, scaleY:.5, x:someCustomValueForA, delay:4}); TweenLite.to(b, 1, {y:10, scaleX:.5, scaleY:.5, x:someCustomValueForB, delay:4}); TweenLite.to(c, 1, {y:10, scaleX:.5, scaleY:.5, x:someCustomValueForC, delay:4}) ); for the custom x values above you can just scale down the clips in flash and place them where you want them to end, and then look in the properties panel for their x values. (assuming the registration point is in the upper left. as I said in the beginning you could cut this code easily in half with TimelineLite... but first things first. Carl

lol thread jacker!!!

yeah do this import com.greensock.*; import com.greensock.easing.*; TweenMax.to(someMovieClip, 1, {rotation:360, repeat:-1, ease:Linear.easeNone}); now technically there is doubling of frames as the objects start value of 0 is visually the same as 360. with a fast framerate this won't be noticeable. you could try hacking the end value to something less than 360 TweenMax.to(someMovieClip, 1, {rotation:355, repeat:-1, ease:Linear.easeNone}); There may be someone lurking on these forums who knows of a dead accurate way to do this Carl

in regard to commenting something and having it remain. I know on macs with cs4 and possibly other versions this can APPEAR to happen. if you export your swf then CLICK back on FLASH APP without closing the swf (hides swf behind Flash app) make a code change do a control>test movie (cmd>return) swf comes up... but your code change is not evident. if you do not properly close the swf, it is NOT re-compiled and you will be seeing the old version making you think it is ignoring your latest revision. so just as a tip, make sure you always close your swfs when doing a control > test movie. that oddity aside, as Jack said, the flash player isn't known to choose which comments to ignore. hope things are going better for you today. Carl

Hey Flashpipe, I made this for one of my viewers http://www.snorkl.tv/dev/desaturateOthe ... thers.html in response to this tutorial http://www.snorkl.tv/2010/09/tweenmax-t ... wn-by-now/ (incase you need some background on the code) the first link is an example of rolling over one thing effecting objects that are not being rolled over. you can grab the Flash CS4 source files here: http://www.snorkl.tv/dev/desaturateOthe ... others.zip it unfortunately is AS3 BUT the conversion shouldn't be a big deal if you are comfortable with the logic that is happening every time you roll over something: basically when you onRollOver something you want to iterate through all the various buttons, you can either traverse the children of a parent movieclip or have all the buttons stored in an array. assuming the latter... onRollOver the keyword this inside the onRollOver function body will refer to the currently rolledOver button. so onRollOver you would go through your array and "do something" to every button that isn't this it might look like: someButton.onRollOver = buttonOver; someButton2.onRollOver = buttonOver; buttonsArray = [someButton, someButton2, ...] function buttonOver(){ //the for loop will find every btn in the buttonsArray for(i = 0, i //if the object ISN'T the one you are rolling over then tween it if(buttonsArray[i] != this){ trace("do it"); TweenMax.to(buttonsArray[i], .3, {_alpha:20}); TweenMax.to(buttonsArray[i], .3, {_xscale: 50, _yscale:50}); } } } the above is untested AS2 pseudo code to illustrate the logic. to convert my source files to AS2 you will need to: use the AS2 greensock code change all the tweens by changing properties such as scaleX:.5 to _xscale:50 can't use addEventListener so use someButton.onRollOver = buttonOver; my example used addChild to put the rolled-over item on the highest z index. can't do that in AS2. have fun with swapDepth() . hopefully this gets you started if as2 syntax is the hangup read http://www.bigspaceship.com/blog/labs/m ... s2-to-as3/ http://flashspeaksactionscript.com/as2- ... resources/ Carl

use ROLL_OVER instead of MOUSE_OVER to save yourself a lot of headache. MOUSE_OVER is great when you really understand what it does, but more often than not leads to trouble. instead of figuring out your code, consider a MoveClip with the instance name of nav1 sitting on the stage. nav1 contains a MovieClip which is a solid color shape name bg nav1also contains a TextField called label_txt. to have the label_txt and bg change color on rollOver of the container called nav1 simply do: nav1.addEventListener(MouseEvent.ROLL_OVER, navOver); function navOver(e:MouseEvent):void{ TweenMax.to(e.target.bg, .5, {tint:0xffff00}); TweenMax.to(e.target.label_txt, .5, {tint:0x00ccff}); } if you have multiple buttons nav1, nav2, nav3... you can add the eventListeners in a for loop. it helps to have a strong understanding of difference between ROLL_OVER and MOUSE_OVER and target and currentTarget. read the following: http://www.greensock.com/tweening-tips/ (SEE TIP #7) http://www.wastedpotential.com/?p=10 http://www.snorkl.tv/2010/08/assign-eve ... enttarget/ it definitely took me awhile to understand this. the interactive example on wasted potential really helped me. hopefully one of the 3 links above hits home Carl

doh. the Back ease has always been one of my favorites but I was always bummed when I wanted a little more or less Back. I've fiddled to my fancy with CustomEase but I can't believe I didn't know about easeParams! after reading jack's suggestion I had to explore it. this was a fun eye opener so I had to make a little vid. Adrian, perhaps it will help you in the future Carl ps. THANKS Jack.

hey timaging, i did download your file. i don't have CS5 so I couldn't open it. I regret that if it was a bit much for GreenSock to have the time to decipher I don't think I'll have any better luck:( I have to strongly echo his advice about starting with something small and make it bigger til it breaks... or if you have something big... cut it down until it works. the time it could take to make a small version that works will be much shorter than working with a huge monster. your animation is really smooth and you obviously have the ability to do great stuff. As for the original issue, I could not replicate the button hover oddity but if I click erratically / quickly the slide show will get into a very funky and sporadic series of transitions. are you sure you are killing your autoAdvance function whenever a button is clicked? like Jack said there seems to be a rogue timeline running. Carl ps also to make testing easier... kill those 10 and 30 second timers and make them 2 and 3 seconds... if you can make it bullet-proof at short intervals it will work with longer intervals.

hmmm, I can't really trouble shoot the code. I've looked at it for awhile and nothing is jumping out as being totally wrong. it actually looks pretty good. my gut is telling me that you don't really have to be all that elaborate though. consider the following: there are 3 possible y positions that your clips can be tweening to and from -100, 200, 600. assuming your next/previous logic is sound you could do something like: var top:Number = 100; var mid:Number = 200; var bottom:Number = 600; if(nextNum > currentNum) { trace("slide up"); TweenMax.fromTo(_root.nextMC, .5, {y:bottom}, {y:mid}) TweenMax.fromTo(_root.currentMC, .5, {y:mid}, {y:top}) currentMC = nextMC; currentNum = nextNum; } else if (nextNum { trace("slide down"); TweenMax.fromTo(_root.currentMC, .5 {y:mid}, {y:bottom}); TweenMax.fromTo(_root.nextMC, .5 {y:top}, {y:mid}); currentMC = nextMC; currentNum = nextNum; } ***warning*** the above could blow up horribly if people were to click buttons while the tween was happening. it seems the fborn folks prevent clicks from happening while a tween is in running as I couldn't seem to break their tweens. back to your code if you post a sample fla (cs4) I'll take a look at it. also... what exactly isn't working? the whole thing? or does it blow up somewhere. the only thing i'm not sure about is what is being passed into function shuffleMC(nextMC, nextNum) where you reference nextMC... my mind wants to think movie clip, but I'm pretty sure you mean to target a timeline. its fine if you know what it is but since I can't see the button code... i hope you're not doing: shuffleMC(mcHome, 1) or shuffle(mcOurWork, 2) it should be shuffleMC(Home, 1) or shuffle(OurWork, 2) Carl

hey michael, change TweenMax.to(sq.ball,1,{delay:1, _y:171, ease:Back.easeIn, onComplete:traceMe()}); to TweenMax.to(sq.ball,1,{delay:1, _y:171, ease:Back.easeIn, onComplete:traceMe}); ditch the () should work. Carl

if you are using AS3, the addChild method makes it really easy to do. there is nothing in the tweening platform that does this that I'm aware of, its just ActionScript in your button code right before you tween you can do something like addChild(mc) TweenLite.to(mc, 1, {scaleX:2, scaleY:2}) if you are using AS2 look into swapDepths()... which isn't nearly as practical.

Hello, I looked at your file. before the timing issue can be addressed there are other problems that need to be fixed. FIRST in your swfAddress layer the following function: function btnClick(e:MouseEvent) { SWFAddress.setValue(e.target.deepLink); } is never firing. to test this add a trace: function btnClick(e:MouseEvent) { trace("btnClick"); SWFAddress.setValue(e.target.deepLink); } test your movie and click on mc1... you don't see "btnClick" in the output. you will notice that mc1 is not calling that function ever even though inside mc1 you have: this.addEventListener(MouseEvent.CLICK, MovieClip(root).container.btnClick); so why isn't the btnClick working? because on mouseDown you are doing this function btnDwn(e:MouseEvent):void {; TweenMax.to(MovieClip(root).container.image_a, 2, {x:-530, y:0, ease:Expo.easeOut}); } the mouseDown function is moving the movie clip out of from under the mouse so the click is never registering. if you change that tween to something super slow like 6 seconds you will be able to test the movie and atleast see the trace("btnClick") working. and thus the swfAddress setValue function triggering the handeSWFAddress function. perhaps you an add an callback function with params to the mouseDown tween that then does something to change the swfAddress value like: function btnDwn(e:MouseEvent):void { trace("btnDown"); TweenMax.to(this, 2, {x:-100, y:0, ease:Expo.easeOut, onComplete:SWFAddress.setValue, onCompleteParams:[this.deepLink]}); } so since the above btnDown works... you don't have to call btnClick any more. attached is a cs4 file that contains these changes. if you click on the blue box with the 1, then it moves off screen, when it is done moving box 2 comes on and the swfAddress changer registers the deeplink /test2/ hope this helps. i don't think there is much more I can do to work on this. you may want to consider not having your mc1 and mc2 having so much code on their timelines as it makes troubleshooting very difficult but that is another issue. do what works for you. Carl

very cool. thx for sharing. Carl