Dynamic Resizing Tweens, help?

pastie

Above is the code I’m using for a rollover effect. Trying to do something similar to ths gallery

I have the image increasing in width to fill the padding between images and then using the image height and width ratio to increase the height. The tweens work fine, the problem is mousing over while it tweens it reapplies the tween. I’ve even tried using tweenMax’s isTweening feature though thats not helping. If I set the tween time to 0 There is no problems, but then I have no smooth tween

Anyone know how to tackle this? I am dealing with images that have multiple widths but the padding between them are all the same.

Hello again, Polaradine.

Shouldn’t this: “var h:Number = ((e.target.width+(padding * 2))*myratio)” be changed to use e.target.height instead of e.target.width ?

Also, can you post the source? I usually find the problems much easier by seeing the bug instead of discovering them from the code.

Two problems I see:

1) You’re using Tweener in the rollOver and TweenLite on the rollOut. TweenMax.isTweening() will only work for TweenLite/Max.

2) Your code relies on e.target.width and height to be a certain value, but when it’s in the middle of tweening, those values are changing. I see that you’re trying to use TweenMax.isTweening() to make that work, but I think it’ll be a poor experience for the user because their rollOvers and rollOuts won’t consistently fire since you’re blocking them whenever there’s a tween in progress.

Here are two options (there are many actually):

If you’re a Club GreenSock member, this looks like the perfect use case for the TransformAroundCenter plugin. Your code could be as simple as:

function rollOver(e:MouseEvent):void { var normalWidth:Number = e.target.getBounds(e.target).width; TweenLite.to(e.target, 0.3, {transformAroundCenter:{scale:(normalWidth + 2padding) / normalWidth}, ease:Linear.easeNone}); }

function rollOut(e:MouseEvent):void { TweenLite.to(e.target, 0.3, {transformAroundCenter:{scale:1}, ease:Linear.easeNone}); }

Or if your tweens are just reversing on rollOut, you could create your tweens first, and then simply play() and reverse() them as needed. This code requires v11 of the GreenSock tweening platform (http://blog.greensock.com/v11beta/):

var tweenLookup:Dictionary = new Dictionary(); var images:Array = [image1, image2, image3]; var image:Sprite; for (var i:int = 0; i < images.length; i++) { image = images[i]; tweenLookup[image] = new TweenMax(image, 0.3, {x:image.x – padding, y:image.y – padding, width:image.width + 2padding, height:image.height + 2*padding, ease:Linear.easeNone, paused:true}); //add listeners or whatever you want here… }

function rollOver(e:MouseEvent):void { tweenLookup[e.target].play(); }

function rollOut(e:MouseEvent):void { tweenLookup[e.target].reverse(); }

Either way, the tweens should be nice and smooth, picking up from wherever the tween is at the time the user rolls over/out.

Hope that helps!

(disclaimer: this code was untested and off the top of my head)

Thanks jack I’d deffinately consider becoming a Club GreenSock member, theres alot of neat features when your a member.

EDIT : Now that I’m awake with a fresh mind (I posted this thread at 5-6am here), I took a look again and decided the easiest way to go about it was just to place my bitmaps into a 2nd movieclip. This way I could refer to the true bitmap sizes and the current scale of the clip. The first one handles the position of the image as well as being able to scale the image down while using the 2nd for scaling for roll effects.

Fix

My only issue at the moment is if I raise the cursor up slowly from beneath the image there is some confusion where it triggers both rollover and rollout constantly, must be moving a pixel for some odd reason.

@DoYaSeeMe: var h was getting the images width that it’d be scaled to then multiplying that by the width/height ratio so that I’d have right size for the height.

@greensock: You sure are fast to respond to tweenlite posts on flashden lol. Thanks for the code I only just went over it now, looks useful for using in the future The code I shared was’nt meant to be using a mix of tweener and tweenlite, I had tried tweener to see if it was any different, the rollover is meant to be using tweenlite too.