# How to animate the content going in and out with actionscript 3.0? **URL:** \ **Category:** flash\ **Created:** [June 30, 2008, 7:20pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808 "2008-06-30T19:20:51Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [June 30, 2008, 7:20pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/1 "2008-06-30T19:20:51Z")
[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] ---
**Author:** ![nikefido](https://avatars.discourse-cdn.com/v4/letter/n/ed8c4c/32.png) [@nikefido](https://forum.kirupa.com/u/nikefido)\ **Post date:** [June 30, 2008, 9:07pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/2 "2008-06-30T21:07:14Z")
There are many ways to do this. What tweening method are you using currently? ---
**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\ **Post date:** [June 30, 2008, 9:41pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/3 "2008-06-30T21:41:03Z")
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. ---
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [July 1, 2008, 11:18am UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/4 "2008-07-01T11:18:14Z")
> [@nikefido;2351522](#): > > There are many ways to do this. What tweening method are you using currently? TweenLite. Thanks ---
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [July 1, 2008, 11:21am UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/5 "2008-07-01T11:21:56Z")
Could someone be so kind and create an example? Thanks, fs\_tigre ---
**Author:** ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)\ **Post date:** [July 1, 2008, 11:24am UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/6 "2008-07-01T11:24:56Z")
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. ---
**Author:** ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)\ **Post date:** [July 1, 2008, 11:25am UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/7 "2008-07-01T11:25:57Z")
hey… you ask: “What I need to know is the logic” so there you go! 😛 ---
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [July 1, 2008, 12:39pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/8 "2008-07-01T12:39:45Z")
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, ---
**Author:** ![Alex\_Lexcuk](https://avatars.discourse-cdn.com/v4/letter/a/919ad9/32.png) [@Alex\_Lexcuk](https://forum.kirupa.com/u/Alex_Lexcuk)\ **Post date:** [July 1, 2008, 2:14pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/9 "2008-07-01T14:14:33Z")
[http://dnadillo.dn.ua/fla/js-swf-html/tween-amplitude-regulator.swf](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/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.swf) [http://dnadillo.dn.ua/fla/js-swf-html/animator-mouse-on-scale.zip](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.swf) [http://kind-armadillo.pochta.ru/FlaAC3/rain\_ac3.rar](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.swf) [http://kind-armadillo.pochta.ru/FlaAC3/mod\_rain\_ac3.rar](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.rar) [http://kind-armadillo.pochta.ru/fla/deciduous.swf](http://kind-armadillo.pochta.ru/fla/deciduous.swf) [http://kind-armadillo.pochta.ru/FlaAC3/tweenDemo.swf](http://kind-armadillo.pochta.ru/FlaAC3/tweenDemo.swf) [http://kind-armadillo.pochta.ru/FlaAC3/tweenDemo.rar](http://kind-armadillo.pochta.ru/FlaAC3/tweenDemo.rar) [http://murmadillo.tut.su/fla/tween\_event.swf](http://murmadillo.tut.su/fla/tween_event.swf) [http://murmadillo.tut.su/fla/tween\_event.zip](http://murmadillo.tut.su/fla/tween_event.zip) ---
**Author:** ![pensamente](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pensamente/32/1208_2.png) [@pensamente](https://forum.kirupa.com/u/pensamente)\ **Post date:** [July 1, 2008, 2:48pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/10 "2008-07-01T14:48:37Z")
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. [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. ---
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [July 1, 2008, 3:02pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/11 "2008-07-01T15:02:29Z")
Thank you very much to all. Thanks, fs\_tigre ---
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [July 1, 2008, 11:01pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/12 "2008-07-01T23:01:35Z")
[QUOTE=pensamente;2351880]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. [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 ---
**Author:** ![Anogar](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@Anogar](https://forum.kirupa.com/u/Anogar)\ **Post date:** [July 1, 2008, 11:26pm UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/13 "2008-07-01T23:26:31Z")
Instead of that inflexible switch / case statement, just replace the 2nd and 3rd lines with: ```auto TweenLite.to(e.target, 2, {y:0, alpha:0}); last_cont = e.target ``` ---
**Author:** ![fs\_tigre](https://avatars.discourse-cdn.com/v4/letter/f/edb3f5/32.png) [@fs\_tigre](https://forum.kirupa.com/u/fs_tigre)\ **Post date:** [July 2, 2008, 1:06am UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/14 "2008-07-02T01:06:22Z")
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 ---
**Author:** ![Alex\_Lexcuk](https://avatars.discourse-cdn.com/v4/letter/a/919ad9/32.png) [@Alex\_Lexcuk](https://forum.kirupa.com/u/Alex_Lexcuk)\ **Post date:** [July 2, 2008, 7:59am UTC](https://forum.kirupa.com/t/how-to-animate-the-content-going-in-and-out-with-actionscript-3-0/264808/15 "2008-07-02T07:59:54Z")
[http://dnadillo.dn.ua/fla/button-caption.swf](http://dnadillo.dn.ua/fla/button-caption.swf) [http://dnadillo.dn.ua/fla/button-caption.zip](http://dnadillo.dn.ua/fla/button-caption.zip)