mhigley

Greensock has been amazing over the years. I remember the olden days of GSAP with AS2 & AS3!! Once Flash died, I was afraid Greensock would have gone with it. But NAY!!! Greensock has blossomed into THE quintessential piece of DOM animation platform-y goodness! I'm just learning to include it with THREE.js also! ?

Thanks for helping me out Jack. I've seen huge improvements in my coding abilities (greatly attributed to the GS library and your help), but I hit an invisible wall during my projects that I just can't get over yet. Here's the fla you asked to see. The problem lies in that if the user slides over the panels too quickly, the animation doesn't complete and even in a closed state, the open animation is still showing. Looking at the code from a layman's p.o.v it seems like it should work. Each panel has a very specific open state that it should be in when hovered over (which it complies to), while all other panels should be in a closed state. I'm happy to elaborate more if you need... // JR

I've got two different version of some code I'm doing here, and I imagine there are far superior methods of writing these functions through loops and the such. But with my limited knowledge base... I can read and understand it, but actually writing it myself from scratch is still a little bit of a problem for me, so I unfortunately keep it simple. So the issue I have is when I roll over the panels too quickly the code doesn't complete which is KILLING ME!!! What am I missing to complete the panel closing functions?? Here's two versions. The first using TimelineLite and then another stripped version that I thought fixed the problem but is still causing the same issues. Anyone have any ideas on what I'm missing here? //---- PANEL ROLL_OVER FUNCTIONS ----\\ panel1.addEventListener(MouseEvent.ROLL_OVER, p1Open); function p1Open(e:MouseEvent):void { panel1Open(); panel2Closed(); panel3Closed(); panel4Closed(); } panel2.addEventListener(MouseEvent.ROLL_OVER, p2Open); function p2Open(e:MouseEvent):void { panel1Closed(); panel2Open(); panel3Closed(); panel4Closed(); TweenLite.to(panel1, pnlSpd, {x:-1, ease:qeo}); } //---- PANEL 01 ----\\ function panel1Closed():void { var panelAnim:TimelineLite = new TimelineLite(); panelAnim.insertMultiple([ new TweenLite(panel1, pnlSpd, {x:264, ease:qeo}), new TweenLite(panel1.panelMask, pnlSpd, {width:200, ease:qeo}), new TweenMax(panel1.panelImg, pnlSpd, {x:-100, ease:qeo}), new TweenLite(panel1.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo}) ], 0, TweenAlign.START, 0); var panelOverlay:TimelineLite = new TimelineLite(); panelOverlay.insertMultiple([ new TweenLite(panel1.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}}), new TweenLite(panel1.panelOverlay, pnlSpd, {alpha:0, ease:qeo}) ], 0, TweenAlign.START, 0); var overlayAnim:TimelineLite = new TimelineLite(); overlayAnim.insertMultiple([ new TweenLite(panel1.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo}), new TweenLite(panel1.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo}), new TweenLite(panel1.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo}) ], 0, TweenAlign.START, 0); } function panel1Open():void { var panelAnim:TimelineLite = new TimelineLite(); panelAnim.insertMultiple([ new TweenLite(panel1, pnlSpd, {x:-1, ease:qeo}), new TweenLite(panel1.panelMask, pnlSpd, {width:500, ease:qeo}), new TweenMax(panel1.panelImg, pnlSpd, {x:1, ease:qeo}), new TweenLite(panel1.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo}) ], 0, TweenAlign.START, 0); var panelOverlay:TimelineLite = new TimelineLite(); panelOverlay.insertMultiple([ new TweenLite(panel1.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0}}), new TweenLite(panel1.panelOverlay, pnlSpd, {alpha:1, ease:qeo}) ], 0.25, TweenAlign.START, 0); var overlayAnim:TimelineLite = new TimelineLite(); overlayAnim.insertMultiple([ new TweenLite(panel1.panelOverlay.panelOverlayHdr, 0.75, {alpha:1, x:17, ease:qeo}), new TweenLite(panel1.panelOverlay.panelOverlayTxt, 0.5, {alpha:1, ease:qeo}), new TweenLite(panel1.panelOverlay.panelOverlayBtn, 0.5, {alpha:1, ease:qeo}) ], 1, TweenAlign.START, 0.2); } //---- PANEL 02 ----\\ function panel2Closed():void { var panelAnim:TimelineLite = new TimelineLite(); panelAnim.insertMultiple([ new TweenLite(panel2, pnlSpd, {x:443, ease:qeo}), new TweenLite(panel2.panelMask, pnlSpd, {width:200, ease:qeo}), new TweenMax(panel2.panelImg, pnlSpd, {x:-100, ease:qeo}), new TweenLite(panel2.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo}) ], 0, TweenAlign.START, 0); var panelOverlay:TimelineLite = new TimelineLite(); panelOverlay.insertMultiple([ new TweenLite(panel2.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}}), new TweenLite(panel2.panelOverlay, pnlSpd, {alpha:0, ease:qeo}) ], 0, TweenAlign.START, 0); var overlayAnim:TimelineLite = new TimelineLite(); overlayAnim.insertMultiple([ new TweenLite(panel2.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo}), new TweenLite(panel2.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo}), new TweenLite(panel2.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo}) ], 0, TweenAlign.START, 0); } function panel2Open():void { var panelAnim:TimelineLite = new TimelineLite(); panelAnim.insertMultiple([ new TweenLite(panel2, pnlSpd, {x:178, ease:qeo}), new TweenLite(panel2.panelMask, pnlSpd, {width:500, ease:qeo}), new TweenMax(panel2.panelImg, pnlSpd, {x:1, ease:qeo}), new TweenLite(panel2.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo}) ], 0, TweenAlign.START, 0); var panelOverlay:TimelineLite = new TimelineLite(); panelOverlay.insertMultiple([ new TweenLite(panel2.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0}}), new TweenLite(panel2.panelOverlay, pnlSpd, {alpha:1, ease:qeo}) ], 0.5, TweenAlign.START, 0); var overlayAnim:TimelineLite = new TimelineLite(); overlayAnim.insertMultiple([ new TweenLite(panel2.panelOverlay.panelOverlayHdr, 0.75, {alpha:1, x:17, ease:qeo}), new TweenLite(panel2.panelOverlay.panelOverlayTxt, 0.5, {alpha:1, ease:qeo}), new TweenLite(panel2.panelOverlay.panelOverlayBtn, 0.5, {alpha:1, ease:qeo}) ], 1, TweenAlign.START, 0.2); panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OVER, overlayBtnOn); panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OUT, overlayBtnOff); function overlayBtnOn(e:MouseEvent):void { TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0.2, ease:qeo}); } function overlayBtnOff(e:MouseEvent):void { TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0, ease:qeo}); } } ETC... //---- PANEL ROLL_OVER FUNCTIONS ----\\ panel1.addEventListener(MouseEvent.ROLL_OVER, p1Open); function p1Open(e:MouseEvent):void { panel1Open(); panel2Closed(); panel3Closed(); panel4Closed(); } panel2.addEventListener(MouseEvent.ROLL_OVER, p2Open); function p2Open(e:MouseEvent):void { panel1Closed(); panel2Open(); panel3Closed(); panel4Closed(); TweenLite.to(panel1, pnlSpd, {x:-1, ease:qeo}); } function panel1Closed():void { TweenLite.to(panel1, pnlSpd, {x:264, ease:qeo}); TweenLite.to(panel1.panelMask, pnlSpd, {width:200, ease:qeo}); TweenLite.to(panel1.panelImg, pnlSpd, {x:-100, ease:qeo}); TweenLite.to(panel1.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo}); TweenMax.to(panel1.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}}); TweenLite.to(panel1.panelOverlay, pnlSpd, {alpha:0, ease:qeo}); TweenLite.to(panel1.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo}); TweenLite.to(panel1.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo}); TweenLite.to(panel1.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo}); } function panel1Open():void { TweenLite.to(panel1, pnlSpd, {x:-1, ease:qeo}); TweenLite.to(panel1.panelMask, pnlSpd, {width:500, ease:qeo}); TweenLite.to(panel1.panelImg, pnlSpd, {x:1, ease:qeo}); TweenLite.to(panel1.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo}); TweenMax.to(panel1.panelImg, pnlSpd, {delay:pnlSpd/2, colorTransform:{tint:0x000000, tintAmount:0}}); TweenLite.to(panel1.panelOverlay, pnlSpd, {delay:pnlSpd/2, alpha:1, ease:qeo}); TweenLite.to(panel1.panelOverlay.panelOverlayHdr, pnlSpd, {delay:pnlSpd, alpha:1, x:17, ease:qeo}); TweenLite.to(panel1.panelOverlay.panelOverlayTxt, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo}); TweenLite.to(panel1.panelOverlay.panelOverlayBtn, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo}); } //---- PANEL 02 ----\\ function panel2Closed():void { TweenLite.to(panel2, pnlSpd, {x:443, ease:qeo}); TweenLite.to(panel2.panelMask, pnlSpd, {width:200, ease:qeo}); TweenLite.to(panel2.panelImg, pnlSpd, {x:-100, ease:qeo}); TweenLite.to(panel2.panelHdr, pnlSpd, {alpha:1, x:17, ease:qeo}); TweenMax.to(panel2.panelImg, pnlSpd, {colorTransform:{tint:0x000000, tintAmount:0.5}}); TweenLite.to(panel2.panelOverlay, pnlSpd, {alpha:0, ease:qeo}); TweenLite.to(panel2.panelOverlay.panelOverlayHdr, pnlSpd, {alpha:0, x:7, ease:qeo}); TweenLite.to(panel2.panelOverlay.panelOverlayTxt, pnlSpd, {alpha:0, ease:qeo}); TweenLite.to(panel2.panelOverlay.panelOverlayBtn, pnlSpd, {alpha:0, ease:qeo}); } function panel2Open():void { TweenLite.to(panel2, pnlSpd, {x:178, ease:qeo}); TweenLite.to(panel2.panelMask, pnlSpd, {width:500, ease:qeo}); TweenLite.to(panel2.panelImg, pnlSpd, {x:1, ease:qeo}); TweenLite.to(panel2.panelHdr, pnlSpd, {alpha:0, x:-150, ease:qeo}); TweenMax.to(panel2.panelImg, pnlSpd, {delay:pnlSpd/2, colorTransform:{tint:0x000000, tintAmount:0}}); TweenLite.to(panel2.panelOverlay, pnlSpd, {delay:pnlSpd/2, alpha:1, ease:qeo}); TweenLite.to(panel2.panelOverlay.panelOverlayHdr, pnlSpd, {delay:pnlSpd, alpha:1, x:17, ease:qeo}); TweenLite.to(panel2.panelOverlay.panelOverlayTxt, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo}); TweenLite.to(panel2.panelOverlay.panelOverlayBtn, pnlSpd, {delay:pnlSpd, alpha:1, ease:qeo}); panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OVER, overlayBtnOn); panel2.panelOverlay.panelOverlayBtn.addEventListener(MouseEvent.ROLL_OUT, overlayBtnOff); function overlayBtnOn(e:MouseEvent):void { TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0.2, ease:qeo}); } function overlayBtnOff(e:MouseEvent):void { TweenLite.to(panel2.panelOverlay.panelOverlayBtnHilite, 0.25, {alpha:0, ease:qeo}); } } ETC... I can post the actual .fla if anyone needs them, but the code is pretty self explanitory. Thanks everyone. // JR

I appreciate you taking a look. Here's a quick screen cap of what I'm seeing on the two computers I've tested it on. The split running through the headlights seems to happen every time the box expands. What I've noticed is that the split is inline with the top edge of the "Img Splits Here" text box. Am I looking at a hardware problem (not fast enough), or is there something else I'm missing? // JR

Hey fellow GreenSockers!! This problem I'm sure stems from me not fully understanding how flash renders images and the such, but I wanted to bring it up anyways just in case someone else has experienced the same problem and has found a solution. I've got a few movie clips masked and nested into a single movie clip and when the user hovers over the image, it expands displaying more hidden information about the photo. The problem happens when the image expands, there's a break in the rendering causing a visual glitch that, under the simplistic circumstances, doesn't seem like it should be bogging down the software. Anyone have any suggestions? Is there some kind of memory hog in my actionscript that I don't understand? Any and all assistance is greatly appreciated. import com.greensock.*; import com.greensock.easing.*; panel.addEventListener(MouseEvent.ROLL_OUT, panelClose); panel.addEventListener(MouseEvent.ROLL_OVER, panelOpen); function panelClose(e:MouseEvent):void { var timeline:TimelineLite = new TimelineLite(); timeline.insertMultiple([ new TweenLite(panel, 1, {x:443, ease:Quint.easeOut}), new TweenLite(panel.panelMask, 1, {width:178, ease:Quint.easeOut}), new TweenMax(panel.panelImg, 1, {x:-100, colorTransform:{tint:0x000000, tintAmount:0.5}, ease:Quint.easeOut}), new TweenLite(panel.panelBg, 1, {width:178, ease:Quint.easeOut}), new TweenLite(panel.panelHdr, 1, {alpha:1, x:17, ease:Quint.easeOut}), new TweenLite(panel.panelOverlay, 1, {alpha:0, x:179, ease:Quint.easeOut}) ], 0, TweenAlign.START, 0); } function panelOpen(e:MouseEvent):void { var timeline:TimelineLite = new TimelineLite(); timeline.insertMultiple([ new TweenLite(panel, 1, {x:178, ease:Quint.easeOut}), new TweenLite(panel.panelMask, 1, {width:443, ease:Quint.easeOut}), new TweenMax(panel.panelImg, 1, {x:1, colorTransform:{tint:0x000000, tintAmount:0}, ease:Quint.easeOut}), new TweenLite(panel.panelBg, 1, {width:443, ease:Quint.easeOut}), new TweenLite(panel.panelHdr, 1, {alpha:0, x:-153, ease:Quint.easeOut}), new TweenLite(panel.panelOverlay, 1, {alpha:1, x:1, ease:Quint.easeOut}) ], 0, TweenAlign.START, 0); } I've attached a zipped .fla and .swf for those who want to download it. I've also posted it to my site if you want to see it in action there, or download the files from there. Thanks. // JR

That was it... thanks Jack!! JR

I'm not sure what I'm missing here, but anytime I try to use a updateTo I get a 1195 error: Attempted access of inaccessible method updateTo through a reference with static type com.greensock:TweenMax. At first I figured I wasn't importing something correctly, so I found the TweenTest_w-TweenMax.zip attachment that Jack had added to this thread, and tried that, and I STILL get the same error!! The description directly refers to line 33 and 35 where the updateTo reside. Jeremy downloaded it and mentioned they both work fine. What am I doing wrong? JR

I'm going to do the best I can to explain myself here. I've noticed that a lot of object tweens have a basic movement then simply ease to a stop before starting a new movement. Eases are a simple in and out that start an object from a zero speed and end on a zero speed. Is there a simple way to: -have and object quickly appear in and move (30px for example) -and then instead of an ease requiring that object to stop before another animation is placed on it, just slowly pickup at the end of that 30px and move another 50px at a slow pace. I guess it's that transition between movements that I want to learn to control, and have be very fluid. If there's someone that has a simple example that they can refer me to I would be very appreciative. Is this Trig that I'm starting to get into? Sine, CoSin and the such? If you need a better explanation just ask and I'll do my best. Thanks in advance for any help. -JR

I'm still having a few issues controlling my tweens with a mouse_leave. Now I'm having the square rotate based on the location of the mouse which all works fine, but I'm trying now to completely kill the tween when the user has rolled off the stage, and only respond again until the mouse rolls over the stage again. The problem is most apparent when testing in Safari... roll off the stage and the tween falls to a set position but if anywhere outside of the stage is clicked the movieclip still responds to the mouse input. And god forbid the user click on another open window, cuz that makes the movieclip completely wig out!! Any recommendations? Here's a live demo to check out. Thanks -JR import com.greensock.TweenLite; import com.greensock.easing.*; var rotateBox:TweenLite; function init():void { stage.addEventListener(Event.MOUSE_LEAVE, boxReset); stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorFollow); } init(); function boxReset(e:Event):void { removeEventListener(Event.ENTER_FRAME, loop); TweenLite.to(box_mc, 2, {rotationY:-25, rotationX:-10, ease:Strong.easeOut }); rotateBox.kill(); } function cursorFollow(e:MouseEvent):void { addEventListener(Event.ENTER_FRAME, loop); } function loop(e:Event):void { var distX:Number = mouseX / stage.stageWidth; var distY:Number = mouseY / stage.stageHeight; rotateBox = new TweenLite(box_mc, 2, {rotationY:(-30 + (70 * distX)), rotationX:(30 - (70 * distY)), ease:Strong.easeOut }); }

Hey everyone. I'm just starting to take user leaving the stage into consideration for current and all future projects and I've got the basic idea... so I figured I'd start weaving some GS love into the recipe and I'm having mixed results. The code seems simple enough, but I can't figure out what's not being calculated correctly. Roll over the stage and the box tracks the x, and y position of the mouse... Roll out of the stage and the square re-centers itself. Should the user roll back onto the stage, I'm wanting the square to tween over 0.5 seconds back to the x and y of the mouse. But it's that last part that's causing my headache. I just can't find any reason the code shouldn't work. The code is below and I've also put it on my test site since the IDE doesn't register rolling off the stage. Thanks for all the help. -JR import com.greensock.TweenLite; import com.greensock.easing.*; function init():void { stage.addEventListener(Event.MOUSE_LEAVE, boxHide); stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorFollow); } function boxHide(e:Event):void { TweenLite.to(box_mc, 1, {x: stage.stageWidth/2, y:stage.stageHeight/2}); } function cursorFollow(e:MouseEvent):void { if (box_mc.x == stage.stageWidth/2 && box_mc.y == stage.stageHeight/2) { TweenLite.to(box_mc, 1, {x:mouseX, y:mouseY}); } box_mc.x = mouseX; box_mc.y = mouseY; } init();

Wow!! That worked incredibly well!! If you could humor me for a moment, I'm going to attempt to spell out what I think is going on and if I'm way off base here please let me know. I haven't had the pleasure of utilizing TweenProxy3D yet so I want to make sure I'm understanding what's going on... Setting each layer into a single container Array enabling all four items to be controlled as a unified object. Similar to converting all to a single MovieClip, right? Here's where things get a little fuzzy for me. You're setting a variable for the Vector3D property and id'ing it's x, y, and z points(?). I'm not 100% sure what the for loop is doing, but I think it's finding the last layer and placing the registration point there? And then of course the remaining original code tracks the locations of the mouse. Am I at least close? What other benefits does TweenProxy3D have? I need to thank you again for the time and effort you've put into creating a Tween class that is absolutely second to none. I'll buy you a beer if I'm ever in Chicago. JR

Hey all... I hope someone can help me. I've got a project that is largely based on a tutorial put out by Lee Brimelow on GAL. Following the tut produces the expected result as the demo, but I'm trying to add certain elements that take it to a new level. In the tut, Brimelow shows how to pivot a single plane based on the mouses position. I'm trying to do the same with multiple planes and adding depth between the planes to produce a 3D feel. I've got all the planes set with about 200 pixels between them on the Z... but when it publishes, flash is ignoring the values and flattening them all onto a single plane. Does anyone have any suggestions? Am I missing a simple property that can solve my problem? Thanks in advance for any help I can get. JR import com.greensock.*; import com.greensock.easing.*; addEventListener(Event.ENTER_FRAME, loop); function loop(e:Event):void { var distX:Number = mouseX / stage.stageWidth; var distY:Number = mouseY / stage.stageHeight; var timeline:TimelineLite = new TimelineLite(); timeline.insertMultiple(TweenMax.allTo([con1, con2, con3, con4], 2, { rotationY:(-30 + (70 * distX)), rotationX:(30 - (70 * distY)), ease:Expo.easeOut })); }

Wow!! Thank you so much! That's the kind of code I haven't been able to adequately wrap my brain around yet. This is going to be hugely beneficial for me to study and learn from. Thank you again for all your help!! JR (a very appreciative Green coder)

I think this is going to work for me. Thanks so much for your help. If i could bug you for one more thing... TweenMax is still very new to me and I'm just breaking into all the properties that it can address, and it's duration is something that really interests me. I saw you used currentTime to reset it's duration after a tween completed. How would you recommend I write a variable to determine where it is currently and be able to pick up from where it left off in another tween? example: Two objects are placed on the stage, a square and a triangle. The square is set for a 360 degree rotation over 5 seconds. The user clicks a button to start the rotation and clicks another button stopping it's spin at 3.5 seconds. The remaining time is then applied to the triangle spinning it a complete 360 degrees in the left over 1.5 seconds from the square. I imagine this is probably done with some Trig... can you provide me a little more assistance, or possibly forward a link that you recommend that could guide me? Thanks again for all your help. JR

I keep getting an error when I use this code. 1061: Call to a possibly undefined method gotoAndStop through a reference with static type com.greensock:TweenMax. Does using this method imply that I have to use frames?

I like the simplicity of that (and I haven't thought about putting complete tweens into a variable before)... but I need the staff to continue to it's starting point event if the user rolls off of the button. Any other ideas? JR

Here's a considerably stripped down version of my previous script that eliminates all the conditional statements, and it causes another problem that I didn't notice the first time around. In this script the user rolls over the button and the staff starts to spin... but as soon as the button is rolled off of, it starts the tween duration time at the current position which in effect slows the spinning staff speed. Can the remaining time be inherited instead of starting over? I hope I'm describing myself clearly enough to be understood. I'm attaching the new code and the new .swf at the bottom. Thanks again. JR import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; test_btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver); test_btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut); function onBtnOver(e:MouseEvent):void { TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick}); } function spinStick():void { TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone}); } function onBtnOut(e:MouseEvent):void { TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone}); }

I'm finally having to incorporate conditionals into my flash projects allowing for more interactivity and my inexperience is starting to show. On the stage is a ninja and when the button is rolled over, he spins his staff. What I'm needing to do is if the user rolls off of the button then quickly back on to the button, determine the remaining rotation and pickup where it left off seamlessly. Try out my .swf and notice how if you roll over the button quickly the staff keeps restarting from the zero position. I think I'm off to a good start with a rotation parameter reset on both the ROLL_OVER and ROLL_OUT which resets the image back to 0. But from there things get kinda murky in the "well if it's greater than this... do this..." areas. If there's anyone that can assist me with my conditional logic, I'd really appreciate it. JR import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; test_btn.addEventListener(MouseEvent.ROLL_OVER, onBtnOver); test_btn.addEventListener(MouseEvent.ROLL_OUT, onBtnOut); function onBtnOver(e:MouseEvent):void { if(rotationZ == 0) { TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick}); } else if(rotationZ == 360) { TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick}); } else if(rotationZ > 0) { TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone}); } } function spinStick():void { TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone}); } function onBtnOut(e:MouseEvent):void { if(rotationZ == 0) { TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick}); } else if(rotationZ == 360) { TweenMax.to(stick_mc, 0, {rotationZ:0, ease:Linear.easeNone, onComplete:spinStick}); } else if(rotationZ > 0) { TweenMax.to(stick_mc, 2, {rotationZ:360, ease:Linear.easeNone}); } }

On a side note... Would you be willing to make the .fla for the intro flash available for study and dissection purposes?

Congratulations on the official v. 11 release! The new website design is sexy!!!!! -JR