2 Replies Latest reply on Jan 15, 2013 1:27 PM by ajguy711

    Swipe up and down between pages


      I currently working on an HTML5 based iPad magazine layout. My goal at the moment is to have a single article occupy several vertically stacked pages. Each of these pages is measured out to be 768x1024.


      I made each page and converted them to symbols. I then vertically stacked them on top of each other. I animated the timeline for my verticle movements. Each move is 1s and simply slides the current page up, and slides the new page up from the bottom with ease in and ease out applied. Each animation start point is labeled as Part1, Part2, etc.


      Since my experience in javascript is extremely limited, I was hoping someone could point me in the right direction for how to code all of this. Basically I just want the user to open the page to part1, read the page, swipe their finger upwards, have part1 lift upwards and have part2 appear from the bottom. Converesely, if they swipe down, the opposite should occure (which I assume is just the animation played in reverse).


      Thank you in advance for any help! It is greatly appreciated.

        • 2. Re: Swipe up and down between pages
          ajguy711 Level 1

          Man thanks for the response! I spent some time reading over and adapting TimJaramillo's swipe code bases as well and I think I have something working well. I'll certainly take a look at the resouces you've pointed me to and see if I can't add to or streamline the code. Here's the post I referenced.




          And here's my current code:



          // insert code to be run when the composition is fully loaded here
          // insert code for compositionReady event here
          // GLOBAL VARS --------------------------------------------
          this.activePart = 1;
          this.partCount = 2;
          // swipe
          this.swipePadding = 60;// prevent swipe when clicking
          // JUMP TO / PLAY --------------------------------------------
          this.jumpTo = function( arg )
          // ARROW BTNS --------------------------------------------
          this.onSwipeDown = function()
                    if( this.activePart > 1 )
          this.onSwipeUp = function()
                    if( this.activePart < this.partCount )
          // SWIPE --------------------------------------------
          this.onSwipe = function()
                    if( this.swipeStartY < this.swipeEndY - this.swipePadding )
                    }else if( this.swipeEndY < this.swipeStartY - this.swipePadding )


          Thanks again for the assitance! It's greatly appreciated.