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

programming flash
1

[FONT=Calibri][SIZE=3]Hi,[/SIZE][/FONT]
[FONT=Calibri][SIZE=3]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)?[/SIZE][/FONT]

[FONT=Calibri][SIZE=3]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.[/SIZE][/FONT]

[FONT=Calibri][SIZE=3]I know this is probably so simple, but I am learning actionscript 3.0 still.[/SIZE][/FONT]

[FONT=Calibri][SIZE=3]Thanks,[/SIZE][/FONT]
[FONT=Calibri][SIZE=3]fs_tigre[/SIZE][/FONT]

2

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

3

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.

4

TweenLite.

Thanks

5

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

6

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.

7

hey…
you ask:
“What I need to know is the logic”

so there you go!
:stuck_out_tongue:

8

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,

9

http://dnadillo.dn.ua/fla/js-swf-html/tween-amplitude-regulator.swf
http://dnadillo.dn.ua/fla/js-swf-html/tween-amplitude-regulator.zip

http://dnadillo.dn.ua/fla/js-swf-html/animator-mouse-on-scale.swf
http://dnadillo.dn.ua/fla/js-swf-html/animator-mouse-on-scale.zip

http://kind-armadillo.pochta.ru/FlaAC3/rain_ac3.swf
http://kind-armadillo.pochta.ru/FlaAC3/rain_ac3.rar

http://kind-armadillo.pochta.ru/FlaAC3/Mod_rain_ac3.swf
http://kind-armadillo.pochta.ru/FlaAC3/mod_rain_ac3.rar

http://kind-armadillo.pochta.ru/fla/deciduous.rar
http://kind-armadillo.pochta.ru/fla/deciduous.swf

http://kind-armadillo.pochta.ru/FlaAC3/tweenDemo.swf
http://kind-armadillo.pochta.ru/FlaAC3/tweenDemo.rar

http://murmadillo.tut.su/fla/tween_event.swf
http://murmadillo.tut.su/fla/tween_event.zip

10

ok ok tigre, let’s go custom for you :slight_smile:

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

[AS]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;
}

}[/AS]

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.

11

Thank you very much to all.

Thanks,
fs_tigre

12

[QUOTE=pensamente;2351880]ok ok tigre, let’s go custom for you :slight_smile:

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

[AS]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;
}

}[/AS]

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.[/QUOTE]

Great!!! Thanks

13

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


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

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});
[COLOR=mediumturquoise]TweenLite.to(last_cont, 2, {y:0, alpha:0});[/COLOR]
[COLOR=mediumturquoise]last_cont = contents1 as MovieClip;[/COLOR]
break;

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

15

http://dnadillo.dn.ua/fla/button-caption.swf
http://dnadillo.dn.ua/fla/button-caption.zip