8 Replies Latest reply on Feb 20, 2009 1:58 PM by Ned Murphy

    best way to achieve fade out-in pages

    halodesign
      I was wondering if anyone had an opinion on the best way to build this --

      I want to have some kind of lovely transition between the pages of my website (why not; it's Flash) -- I've thought about the following three options:

      - old page's text flying off the right side while the new text flies in the right
      - old page's text fades out and a background animation (like a turning page or something) plays before new text fades in
      - old page's text simply fades out as new page's text fades in

      In all of them I ran into a problem -- how to tell two or more sequential things to happen on a button press. For instance, if there was some kind of nifty flying-away of the old page's content, how do I tell it to do that and THEN fly-in the new page's content? It would be a pain to simply animate every possibility, like page a to page b, page a to c, a to d, b to a, b to c, etc... there has to be some way to script it prettily.

      I've come across the following ideas:

      quote:

      on (release) {
      myClip.gotoAndPlay("fadeout"+pagename);
      outerClip.gotoAndPlay(1);
      }


      Where you define a 'pagename' variable for each one and have frames labeled accordingly

      or:
      quote:

      button02.onrelease = function() {
      movieclip01.fade(0,10);
      movieclip02.fade(100,10);
      movieclip03.fade(0,10);

      //etc, etc, etc....
      }

      where you clumsily fade out everything else possible when you load each one.


      or I was even thinking about making the old page content 'retreating' animation for each page and trying to code it to play that and then play the requested new page, in one long timeline.

      Does anyone have a more elegant way of thinking about this? I've looked all over for examples, but most tutorials seem to stop short of the scripting I'd love to use. Code examples would be highly, highly appreciated. I'm a total AS3 newbie, but willing to learn if that's the best way.

      Thanks in advance to all the brilliant people out there who might add their 2¢!
        • 1. Re: best way to achieve fade out-in pages
          robdillon Most Valuable Participant
          There are a bunch of ways to accomplish this sort of animation. You will need to create each part that changes as a movieClip and give each one an instance name. Then you can control each item using actionscript. Here's one example:

          Place each page content in it's own set of layers. Be sure to name each clip instance with a unique name. If you are using the timeline and moving to a new frame to represent a new page, then use frame labels at each new page. When the user clicks on one of the buttons to move to a new page, store the new page's frame label in a variable. Then animate the parts of the current page as you like: move them or fade them, etc. When this animation of the current frame ends, tell the playback head to move to the new page's frame label, and then run the animation to show the new page's content.
          • 2. Re: best way to achieve fade out-in pages
            halodesign Level 1
            Thanks Rob! I'm bumping this up because I'm still looking for more ideas of how to do this. It has proved to be a good way to learn a little bit about AS3. I'm currently at the stage where I am really frustrated, and missing the on() business from AS2. ;-)
            • 3. best way to achieve fade out-in pages
              Ned Murphy Adobe Community Professional & MVP
              Avoid the on() business if you're just learning AS2. It makes code harder to find and is generally discouraged here. If you think you might ever move on to AS3, it's not allowed. Instead of putting code on() objects, put it in the timeline on an actions layer where it easy to find and all in one place...

              on(release).... on an object would become...

              instanceName.onRelease = function()... in the timeline

              As far as animating things goes, look into using Tween. It allows you to make things animate with AS rather than having to utilize timeline tweening.



              • 4. Re: best way to achieve fade out-in pages
                canvasc
                Thanks NedWebs! For the project I actually did end up using the dreaded on() version, because I actually (make sure you're sitting down and have swallowed your milk) made a different timeline animation for page a to page b, page a to page c, page a to page d...

                But even the btn.onRelease makes much more sense to my addled brain than the add event listener, return void, etc etc etc.

                I hope AS2 will be around for a while -- I was going to just learn AS3 instead, but I'm beginning to think AS2 will be more intuitive for me.

                Any other ideas on how to think about this particular action (fade out current page, fade in new page) would be most appreciated. The project is done, but redoing it has taught me a lot about better ways to accomplish it! :-)
                • 5. best way to achieve fade out-in pages
                  canvasc Level 1
                  sorry; dupe post
                  • 6. best way to achieve fade out-in pages
                    Ned Murphy Adobe Community Professional & MVP
                    While it ultimately depends on what kind of page transition you want to realize, creating your pages as individual movieclips gives you one more edge on being able to transition from one to the next without having to create several versions (a-b,a-c,etc). You can have your entire site living in one frame (on multiple layers so that individual pages are easily accessed) and just control the visibility of pages and trigger animations within them with AS.
                    • 7. Re: best way to achieve fade out-in pages
                      halodesign Level 1
                      Thanks again NedWebs! For this thought experiment, I'm just talking about a simple fadeout current clip - fadein new clip. But I run into the same general question lots of times, for instance for a current project I wanted to unload the clip, play a 'page flip' looking transition movie, and then load in the new clip...

                      So are you advocating the button action as being fade out all other movie clips (as a catch all that works no matter which is loaded), then load requested movie clip?

                      How do you tell the actionscript to finish fading out 'a' BEFORE starting to fade in 'b'? Or in the pageflip example, how do you tell it to complete the whole fadeout, THEN play the pageflip movie, THEN load the requested clip? If I put the actions within the same handler or whatever, won't the instructions complete all at once?

                      Sorry for my tangly questions; I'm learning!
                      • 8. Re: best way to achieve fade out-in pages
                        Ned Murphy Adobe Community Professional & MVP
                        As I said, it ultimately depends on what kind of transition you are after. But, to get untangly, learn about using event listeners... of course, implementing them sequentially can be a bit of a tangly effort brain-wise, but you can have a sequence of actions managed by listening for the completion of one and using it to trigger the next. I'm less familiar with using them in AS2 though. AS3 is loaded with them.

                        My fingers are currently tangly... took me several backspacings to try to get thru typing that one correctly... I must need a break.