6 Replies Latest reply on Apr 20, 2010 12:43 PM by danny.abel

    Animated Page Transitions


      Hi everyone,


      This is a newbie question, but i can't quite find a good explanation for it.


      I am trying to figure out how to code transitions between pages.  specifically, i want an animation to play when you arrive at a page and the same animation to play in reverse when you leave the page.


      my website is built in flash cs3 using as3.  the buttons are coded using simple eventListeners jumping between keyframes on a single timeline using gotoandPlay actions.


      any help or tutorial recommendation will be greatly, greatly appreciated.  thanks!

        • 1. Re: Animated Page Transitions
          Ned Murphy Adobe Community Professional & MVP

          It's not clear to me what you have and what you want, but if you are looking to have transitions of some type, then look into uding the Tween class.  You can use it to animate fade-in/out or movement or other properties.

          • 2. Re: Animated Page Transitions
            danny.abel Level 1

            hi ned -- thanks so much for responding.


            here's a link to the site that i'm working on.  this will give you a clearer idea of what i'm trying to accomplish.  when you click on a given section, such as 'contact,' i want the yellow lined paper to start as a crumpled ball and 'blossom' into the flat paper that you see.  when you click away from the given section i want the same animation to happen in reverse (ie animate from flat to ball).




            if i'm not mistaken, i can create the animation itself fairly easily using keyframe based stop motion tactics.  what i'm having trouble with is integrating this animation into the site.


            any ideas?

            • 3. Re: Animated Page Transitions
              Ned Murphy Adobe Community Professional & MVP

              The link you provided shows nothing but a cracked bit of pavement.  If you want that sort of animation, then you will need to create the content entirely in Flash.  I don't know that you can get the animation done fairly easily, but you may be able to get it done.  Assuming you are able to do it, you would basically want to reverse the animation.  If it is a timeline animation your choices are to either duplicate the animation in reverse order (copy/paste the frames then reverse them) or use an enterFrame event to walk backwards thru the animation's timeline.

              • 4. Re: Animated Page Transitions
                danny.abel Level 1

                yeah, the website takes about six or seven seconds to load, but it definitely works (just tested it on three separate computers).


                you are very correct about animating it entirely in flash.  it's going to be a hassle, but i think it can be done.


                any ideas about how to integrate it onto the site and have the animations work as intros and outros for individual pages (ie. contact, about, news, projects)? 

                • 5. Re: Animated Page Transitions
                  Ned Murphy Adobe Community Professional & MVP

                  I see the problem now.  If I link to the page, the concrete occupies the browser and I have to scroll down to be able to see the content at all.  The background image is not a background image, just an image taking up most of the screen area.


                  As I mentioned, to have the animations be part of the site, the site will have to be built in Flash.  To have the crumpled paper animation will likely involve a fairly complicated bit of timeline animation.  As far as implementing it goes, your imagiunation will be your best guide.

                  • 6. Re: Animated Page Transitions
                    danny.abel Level 1

                    the entire site is built in flash (other than the image of the cracked pavement which is part of the html).  do you maybe have any ideas about answers to my original question?  i am wondering how specifically to code my desired transitions.  if i'm not mistaken i can take care of the animation separately and imbed it into a movie clip.