Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: page transition slide in and out

  1. #1
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default page transition slide in and out

    Hello there,

    I am very beginer for actionscript.

    I would like to make the site below.

    http://www.gotmilk.com/#/gotmilkbrand/

    I do not know specific name of what I want to do.

    First, In the site 1st page( mc?) is slided in,
    and then, when one (it is supposed to go to 2nd page) of the buttons in the navigation bar is clicked, 1st page will be slide out, then 2nd page will be slided in.

    Anyone knows how to do this.

    Please help and give me tip and idea.

    Thank you.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    AS 2.0 or 3.0?

  3. #3
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I am starting as 3.0

    I am leaning basic things.

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    In general, I agree with what Erik Hallander told you over on the GTAL forums -- start with the basic and work your way up.

    But, I consider this a basic concept. It's referred to as masking. I'm not sure how familiar you are with Photoshop or Flash, but masking is basically manually defining the portion of a particular plane to show. So, on the page that you linked, what's happening is that the page moves down and then another comes up in it's place.

    This can be done by creating a separate movieclip for each "page" and animating them in/out as necessary. Or you can have page and swap out content. The latter is definitely the more efficient of the two.

    Before you go further though, you should learn the basics of masking, then move on to tweening (animating). In AS 3, I generally use the Tweener classes for animation. I've started using TweenMax and TweenLite because they're less resource intensive. But, for what you'll be doing, the performance of all of them will be the same.

    So, take a look at this example. When you open the .fla, you'll notice a pink layer. That's the visible area of the .swf. No matter how large/small you make the .swf when you embed it, only that area will be visible. So, if you want to create that sinking down and coming back up effect, you simple animate the object to drop below the visible area, and then reappear. Note that the "ripple" effect from the Got Milk? website is probably a video important in from After Effects of the like.

    I hope that helped. Let me know if you have any questions.

  5. The Following User Says Thank You to Medyman For This Useful Post:

    kony (07-22-2008)

  6. #5
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you for response.

    basically I understood how teen worked.(I looked at the lee's video again and again)
    It was very helpful, but I did not expect masking for the site.

    The link you gave did not have fla anymore, but I try to figure this out by myself.
    what you commented is very helpful, and I really appreciate you caz you gave me key to start.

  7. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by kony View Post
    The link you gave did not have fla anymore, but I try to figure this out by myself.
    Oops. Sorry about that. I'll fix that soon.

  8. #7
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    hello

    if possible , i would like to see fla.

    anyway, again thank you.

  9. #8
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by kony View Post
    hello

    if possible , i would like to see fla.

    anyway, again thank you.
    Yeah, like I said, I'll fix it soon. The .fla is on my home computer and I'm at my office. I'll upload it when I get home.

  10. #9
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    hello
    I wrote the code below:
    import caurina.transitions.*;
    import caurina.transitions.properties.*;


    home_mc.addEventListener(MouseEvent.CLICK, onBtn1Clk);
    addChild(btn1_mc);


    btn1_mc.buttonMode = true;

    //function onBtn1Clk(evnet:MouseEvent):void {

    function onBtn1Clk(event:MouseEvent):void {
    Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic"});
    Tweener.addTween(ref2_mc, {y:100, time:2, transition:"easeinoutQubic"});
    }


    //trace("btn1_mc was clicked.");

    //}




    philosophy_mc.addEventListener(MouseEvent.CLICK, onBtn2Clk);
    addChild(btn2_mc);

    btn2_mc.buttonMode = true;


    function onBtn2Clk(event:MouseEvent):void {
    Tweener.addTween(ref_mc, { y:100, time:2, transition:"easeinoutQubic"});
    Tweener.addTween(ref2_mc, { y:500, time:2, transition:"easeoutSine"});

    }


    What i did is that there are 2 buttons, and when you click on btn1_mc, ref_mc is going to come up from the bottom, and then when you click on btn2_mc, ref_mc is going down , and ref2_mc is coming up.

    But, i do not think it is what I want to do. What I want to do is "when you click on btn2_mc, ref_mc is going down after ref_mc is donw completerly, then ref2_mc is coming up.

    so I just wonder how this transition works?

    Use timerEvent? or something else?

  11. #10
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    You can do that in one of two ways:

    1) Add a delay
    There is a delay parameter. So, if you know that ref_mc will take 2 seconds to move all the way down, you can do this:

    Code:
    Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic"});
    Tweener.addTween(ref2_mc, {y:100, time:2, delay:2, transition:"easeinoutQubic"});
    Now, ref2_mc's tween starts 2 seconds after ref_mc.

    2) onComplete
    Tweener also has a callback function. It'll fire as soon as the initial tween is complete. So, your code might look something like:

    Code:
    Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic", onComplete: function():void { Tweener.addTween(ref2_mc, {y:100, time:2, transition:"easeinoutQubic"});}});
    Or, cleaning it up to use a function call instead of the anonymous function
    Code:
    Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic", onComplete: TweenRef2 });
    function TweenRef2() {
    	Tweener.addTween(ref2_mc, {y:100, time:2, transition:"easeinoutQubic"});
    }

Bookmarks

Posting Permissions

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