Layout tweening question

[flashpipe]

I'm starting a project that will have 5 red "boxes" on the right hand side of the screen with text in them. When the user rolls over a box, the text and red layer need to fade out, the box needs to expand to fill the screen (while the other boxes shrink down to be the height of the text) and then the contents of the box need to fade in. This needs to be in as2.

 

So, I've been searching around for tutorials, places to start, etc. using TweenLite or TweenMax and I'm having trouble finding anything because I'm not sure what I should be searching on and am not sure what the "best" way to do this is. Should I use the tween engine to handle everything, or (what I'm thinking), just to handle the re-sizing of the elements and then call the animations within the movie clips with some callback actions after the tween is finished?

 

Just looking to get pointed in the right direction.

 

Thanks!!

[GreenSock]

Just curious - why does this need to be in AS2? That's fine - pretty much all the GreenSock tweening tools are available in AS2 but I'd definitely push you to shift to AS3 if there's any way possible because the language is much more robust and there are big performance differences too. AS2 is dying and has been on its way out for a long time.

 

Anyway, I'd definitely recommend using the tweening engine for whatever you can because it allows for more flexibility especially when you have dynamic stuff like what you're talking about.

 

I'm not aware of any tutorials that would show you how to do exactly the type of thing you're talking about. Not sure any exist to be honest. But it certainly sounds doable. Not simple to explain though.

[flashpipe]

It's for an animation that will eventually be incorporated into an Articulate Presenter file, which doesn't support AS3...yet. I'm a flash programmer and certainly prefer AS3, but, we don't want to import this as a web object (the only way to get AS3 objects into Presenter), so we're hoping to do this in AS2.

 

I think the thing I need direction on is the tweening to have one menu item expand while the others shrink on rollover. I'll keep looking around to see if I can find anything like that.

 

Thanks!

[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