The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 15 of 15

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

  1. #1

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

    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
    Last edited by fs_tigre; June 30th, 2008 at 04:31 PM.
    fs_tigre

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

  3. #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.
    I used to be a paranoid-psychotic-schizophrenic, but don't worry, he's dead now.

  4. #4
    Quote Originally Posted by nikefido View Post
    There are many ways to do this. What tweening method are you using currently?
    TweenLite.

    Thanks
    fs_tigre

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

  6. #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. #7
    hey...
    you ask:
    "What I need to know is the logic"

    so there you go!
    :p

  8. #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,
    fs_tigre

  9. #9

  10. #10
    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.
    Attached Files Attached Files

  11. #11
    Thank you very much to all.

    Thanks,
    fs_tigre
    fs_tigre

  12. #12
    Quote Originally Posted by pensamente View Post
    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
    fs_tigre

  13. #13
    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

  14. #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});
    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
    Last edited by fs_tigre; July 3rd, 2008 at 07:00 AM.
    fs_tigre

  15. #15

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012