Page 1 of 4 123 ... LastLast
Results 1 to 10 of 31

Thread: Smooth Transition Between Pages

  1. #1
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Smooth Transition Between Pages

    When I click a button (btnAboutUs for example), the About Us movie clip/page will play. But right now, when I click another button (e.g. btnHome), the Home movie clip will just play and there is no transition happening between the About Us page and the Home page.

    I have seen nice Flash websites which has this smooth transition effect like when one presses a button, that page will animate out (do an exit animation) before the other page/movie clip animates in (do an entrance animation). An example would be this flash site:

    http://www.easytemplates.com/preview/300109808

    As you can see, when you click a button, the screen on the right (which shows the content) fades into a gray color, then fades out before showing the target page. Also if you would also look at the gallery, the transition between the images is very smooth. The next image kind of transparently overlaps the previous image before being shown fully.

    I don't know how to do this. I can't find any tutorial at all about this. Can someone please help me out? Thanks!

  2. #2
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    There are a few ways to do an exit/entrance animation. I usually have a function that is called when any button is pressed. It takes the name of the next page as its parameter. Here's an example:

    Code:
    var nextPage:String;  // Holds the variable name of the next page 
    
    home_button.onRelease = function() {  // The button's function
      goNext("home")
    }
    
    function goNext(page:String) {  // Sets the nextPage variable, and calls the exit animation
      nextPage = page;
      playExitAnimation();  // The exit animation function (not shown)
    }
    At the end of the animation you can use the "nextPage" variable to open the page you want to navigate to. You could have something like:

    Code:
    gotoAndPlay(nextPage);  // This is if the pages are on different frames
    Make sure that your buttons are each passing the right parameter (the data for the page that should open), and that the page reload is triggered at the end of whatever animation you're doing. You can use the nextPage variable to hold whatever string data you need, for whatever method you're using to navigate your pages.


    For the cross-fade image effect, you've got to load the new image into a different MovieClip from the old one, and use the Tween class to fade it in once it's loaded.

    (By the name "flash_noob", I'm thinking there may be some things here you haven't done before. Feel free to ask for more info or clarification. Hope this gets you pointed in the right direction though.)

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

    Default

    Also, if you want to use things like fading (alpha tweens) and motion tweens programatically...

    have a look at the Tween & Easing classes

    also, the MC Tween and (new) Tweener class

    Just google these terms...

    Quick References:
    MC Tween: http://hosted.zeh.com.br/mctween/
    Tween/Easing Class: http://www.kirupa.com/developer/actionscript/tween.htm

  4. #4
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi
    Thank you for this post
    I was looking allover the web 4 weeks now

    The thing is
    Can you do a step by step for me PLEASE
    I tray to folow this but I think i put stuff in the wrong way
    (or can you sent me a fla so i can figer it out))

    YES i'm a absolute newbee of 54 years
    but i realy like to learn

    Sorry for my English
    (DUTCH you see, to make thing worse)

    Help is very very welcomed

    ropost
    Last edited by ropost; 06-22-2007 at 09:52 AM.

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

    Default

    Hi Ropost...

    What exactly are you trying to do? Tweening and easing is a pretty vast topic that can be manipulated in several ways. Depending on what you're trying to do, you'll need to use different methods.

    Maybe posting some code and/or source files might help.

  6. #6
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    hi Medyman

    Thx for the respons

    What i like 2do is like the xmple above
    meaning

    bt_home is active
    when click bt-about or bt_contact etc is clicked a outro will play
    a move or a disove (or both lets say several swf_movies leave the stage) and conten _about gets in

    like


    http://www.easytemplates.com/preview/300109808

    and other nice sites

    I got stuck just loadin swf's

    I hope you understand me

    thank you
    ropost

  7. #7
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can you please xplane how/were to put this code
    Thank you very much
    ~ropost


    Quote Originally Posted by nwalton View Post
    There are a few ways to do an exit/entrance animation. I usually have a function that is called when any button is pressed. It takes the name of the next page as its parameter. Here's an example:

    Code:
    var nextPage:String;  // Holds the variable name of the next page 
    
    home_button.onRelease = function() {  // The button's function
      goNext("home")
    }
    
    function goNext(page:String) {  // Sets the nextPage variable, and calls the exit animation
      nextPage = page;
      playExitAnimation();  // The exit animation function (not shown)
    }
    At the end of the animation you can use the "nextPage" variable to open the page you want to navigate to. You could have something like:

    Code:
    gotoAndPlay(nextPage);  // This is if the pages are on different frames
    Make sure that your buttons are each passing the right parameter (the data for the page that should open), and that the page reload is triggered at the end of whatever animation you're doing. You can use the nextPage variable to hold whatever string data you need, for whatever method you're using to navigate your pages.


    For the cross-fade image effect, you've got to load the new image into a different MovieClip from the old one, and use the Tween class to fade it in once it's loaded.

    (By the name "flash_noob", I'm thinking there may be some things here you haven't done before. Feel free to ask for more info or clarification. Hope this gets you pointed in the right direction though.)

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

    Default

    Have a look at this:
    http://www.oman3d.com/tutorials/flas...letransitions/

    This will explain the basics of setting up page transitions (nothing fancy). Once you have a grasp of that, it'll be easier to walk you throw MCTween.

    You're tackeling too many things at once. Take it one at a time and it'll be easier.

    Post back with any questions.

  9. #9
    Join Date
    Jun 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanx you Medyman 4 your effort and respons

    this part is very clear to me

    But what if we r in eg About and click on eg Home

    and "about" moves away from the stage first b4 "Home" comes in

    thanx
    ropost

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

    Default

    Alright...

    we'll here is something quick I just made up.

    Here is what it looks like.
    Here is the fully commented .fla

    Post back if you have any questions.

    Make sure you have mcTween installed. Google it to find a source to download.

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
  •