How to animate the content going in and out with actionscript 3.0?

**fs_tigre** · June 30th, 2008, 03:20 PM

Hi,
How complicated would be to create a website that when a button is clicked it animates the content going in and out, using tweens (using actionscript 3.0 only)?

What I need to know is the logic that will make the tweens move. I can animate the movieClips coming in, but how can I animate what is going out at the same time depending on what button was clicked.

I know this is probably so simple, but I am learning actionscript 3.0 still.

Thanks,
fs_tigre

**nikefido** · June 30th, 2008, 05:07 PM

There are many ways to do this. What tweening method are you using currently?

**snickelfritz** · June 30th, 2008, 05:41 PM

Animate the "out" portion of the transition in the click handler, then subsequently load the "in" transition onComplete.
You can do this on the timeline manually, or use a tweening class.

**fs_tigre** · July 1st, 2008, 07:18 AM

Originally Posted by nikefido

There are many ways to do this. What tweening method are you using currently?

TweenLite.

Thanks

**fs_tigre** · July 1st, 2008, 07:21 AM

Could someone be so kind and create an example?
Thanks,
fs_tigre

**pensamente** · July 1st, 2008, 07:24 AM

when you select a new content, animate it in, then you store the it's reference so when you click new content you can animate out the previous selected content.

**pensamente** · July 1st, 2008, 07:25 AM

hey...
you ask:
"What I need to know is the logic"

so there you go!
:p

**fs_tigre** · July 1st, 2008, 08:39 AM

You are probably right pensamente, at the beginning I thought that by having an idea it would be enough. I was wrong.
Can someone help me showing me some code?
Thanks,

**Alex Lexcuk** · July 1st, 2008, 10:14 AM

**pensamente** · July 1st, 2008, 10:48 AM

ok ok tigre, let's go custom for you

really simple and all made in timeline, with some code... really never know how to do this things.

import gs.TweenLite;



var last_cont:MovieClip = new MovieClip();



this.contents1.content_txt.text = "contents / 01";

this.contents2.content_txt.text = "contents / 02";

this.contents3.content_txt.text = "contents / 03";



this.c1_btn.addEventListener(MouseEvent.CLICK, menuClick);

this.c2_btn.addEventListener(MouseEvent.CLICK, menuClick);

this.c3_btn.addEventListener(MouseEvent.CLICK, menuClick);



function menuClick (e:Event):void

{

	trace(e.target.name)

	

	switch (e.target.name) {

		

		case "c1_btn":

			TweenLite.to(contents1, 2, {y:100, alpha:1});

			TweenLite.to(last_cont, 2, {y:0, alpha:0});

			last_cont = contents1 as MovieClip;

			break;

		case "c2_btn":

			TweenLite.to(contents2, 2, {y:100, alpha:1});

			TweenLite.to(last_cont, 2, {y:0, alpha:0});

			last_cont = contents2 as MovieClip;

			break;

		case "c3_btn":

			TweenLite.to(contents3, 2, {y:100, alpha:1});

			TweenLite.to(last_cont, 2, {y:0, alpha:0});

			last_cont = contents3 as MovieClip;

			break;

	}

}

this is a very handy-craft piece of code, but tried to keep things in stage to be easier to understand... at least for me it helps, dunno how used you are to code.

**fs_tigre** · July 1st, 2008, 11:02 AM

Thank you very much to all.

Thanks,
fs_tigre

**fs_tigre** · July 1st, 2008, 07:01 PM

Originally Posted by pensamente

ok ok tigre, let's go custom for you

really simple and all made in timeline, with some code... really never know how to do this things.

import gs.TweenLite;



var last_cont:MovieClip = new MovieClip();



this.contents1.content_txt.text = "contents / 01";

this.contents2.content_txt.text = "contents / 02";

this.contents3.content_txt.text = "contents / 03";



this.c1_btn.addEventListener(MouseEvent.CLICK, menuClick);

this.c2_btn.addEventListener(MouseEvent.CLICK, menuClick);

this.c3_btn.addEventListener(MouseEvent.CLICK, menuClick);



function menuClick (e:Event):void

{

	trace(e.target.name)

	

	switch (e.target.name) {

		

		case "c1_btn":

			TweenLite.to(contents1, 2, {y:100, alpha:1});

			TweenLite.to(last_cont, 2, {y:0, alpha:0});

			last_cont = contents1 as MovieClip;

			break;

		case "c2_btn":

			TweenLite.to(contents2, 2, {y:100, alpha:1});

			TweenLite.to(last_cont, 2, {y:0, alpha:0});

			last_cont = contents2 as MovieClip;

			break;

		case "c3_btn":

			TweenLite.to(contents3, 2, {y:100, alpha:1});

			TweenLite.to(last_cont, 2, {y:0, alpha:0});

			last_cont = contents3 as MovieClip;

			break;

	}

}

this is a very handy-craft piece of code, but tried to keep things in stage to be easier to understand... at least for me it helps, dunno how used you are to code.

Great!!! Thanks

**Anogar** · July 1st, 2008, 07:26 PM

Instead of that inflexible switch / case statement, just replace the 2nd and 3rd lines with:

Code:

TweenLite.to(e.target, 2, {y:0, alpha:0});
last_cont = e.target

**fs_tigre** · July 1st, 2008, 09:06 PM

Hi Anogar, why is that line 2 and 3 need to be changed?

The reason I am asking is because if I change it it doesn't work. Am I changing the wrong lines?

case "c1_btn":
TweenLite.to(contents1, 2, {y:100, alpha:1});
TweenLite.to(last_cont, 2, {y:0, alpha:0});
last_cont = contents1 as MovieClip;
break;

The lines on blue are the ones I am changing.
Thanks,
fs_tigre