11 Replies Latest reply on May 11, 2006 3:37 PM by juanbbdo

    help if anyone can PageTurning effect

    L_ogistics
      I am using some code to creat the page turning effect, which works quite nicely to turn pages. But it only turns pages from right to left and I would like the option of going left to right.

      The code or file i used is from:

      http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html

      You can download the source .fla from here

      I was hoping some one could point in the direction or gimme some pointers on how I could re-code this effect to turn both ways






      http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html
        • 1. Re: Whats up all!
          L_ogistics Level 1
          heres the code by the way. Downloading the file may be a long process

          function curlPage(p) {
          // Create the page pair p and p+1
          var topPage = this.attachMovie(pages[p], pages[p], TOP_PAGE_DEPTH, pagePos);
          var bottomPage = this.attachMovie(pages[p+1], pages[p+1], BOTTOM_PAGE_DEPTH, pagePos);
          // Mask the bottomPage (recall that bottomPage is actually the one that
          // appears on the top).
          bottomPage.setMask(line.rightMask);
          line.onEnterFrame = function() {
          // This function curls the bottom
          // left hand corner of the rightmost page.
          line._x += (PAGE_CURL-line._x)/TURN_RATE;
          movePages();
          if ((line._x-PAGE_CURL)<1) {
          delete this.onEnterFrame;
          }
          };
          }
          function pageTurn() {
          // This function performs the page turning
          // animation that occurs when the user is
          // dragging the page.
          var oldMousePos = _xmouse;
          line.onMouseMove = function() {
          line._x += _xmouse-oldMousePos;
          oldMousePos = _xmouse;
          if (line._x>PAGE_CURL) {
          line._x = PAGE_CURL;
          } else if (line._x<PAGE_SPINE) {
          line._x = PAGE_SPINE;
          }
          movePages();
          updateAfterEvent();
          };
          }
          function movePages() {
          backPage._x = line._x;
          backPage.back._x = -(PAGE_EDGE-line._x);
          backPage._rotation = 90*(line._x-PAGE_SPINE)/page._width;
          line._rotation = 45*(line._x-PAGE_SPINE)/page._width;
          }
          function pageRelease() {
          // This function runs when the user
          // lets go of the page. It decides
          // on whether the page should be opened
          // or closed depending on where in the
          // page turn the page was released, and
          // uses either openPage() or closePage()
          // to open/close the page respectively.
          delete line.onMouseMove;
          if (line._x<HALF_PAGE_TURN) {
          turnInterval = setInterval(openPage, 10);
          } else {
          turnInterval = setInterval(closePage, 10);
          }
          }
          function openPage() {
          // This function opens the page (i.e. turns
          // the current page to the left) if the user
          // lets go of the page when it is almost open.
          line._x += (PAGE_SPINE-line._x)/TURN_RATE;
          if ((line._x-PAGE_SPINE)<1) {
          if (pageNum<pages.length-2) {
          line._x = PAGE_EDGE;
          curlPage(++pageNum);
          }
          clearInterval(turnInterval);
          }
          movePages();
          updateAfterEvent();
          }
          function closePage() {
          // This function closes the page (i.e. turns
          // the current page to the right) if the user
          // lets go of the page when it is almost closed.
          line._x += (PAGE_CURL-line._x)/TURN_RATE;
          if ((PAGE_CURL-line._x)<1) {
          line._x = PAGE_CURL;
          clearInterval(turnInterval);
          }
          movePages();
          updateAfterEvent();
          }
          // Set up constants
          var PAGE_SPINE = page._x;
          var PAGE_EDGE = page._x+page._width;
          var PAGE_CURL = PAGE_EDGE-20;
          var HALF_PAGE_TURN = PAGE_SPINE+(PAGE_EDGE-PAGE_SPINE)/3;
          var TURN_RATE = 3;
          var TOP_PAGE_DEPTH = 0;
          var BOTTOM_PAGE_DEPTH = TOP_PAGE_DEPTH+1;
          var BACK_PAGE_DEPTH = TOP_PAGE_DEPTH+2;
          //
          // Set up variables
          var lineAngle = 45;
          var pageNum = 0;
          var turnInterval = 0;
          var pages = ["page1", "page2", "page3", "page4", "page5","page6", "cover"];
          //
          // Set up position objects for the
          // parts of the book that will be
          // attached to the stage dynamically
          var pagePos = {_x age._x, _y age._y};
          var backPos = {_x AGE_EDGE, _y age._y+page._height, _rotation:90};
          var linePos = {_x AGE_EDGE, _y age._y+page._height, _rotation:lineAngle};
          var hideShadowPos = {_x AGE_EDGE, _y age._y};
          //
          // Attach the book parts
          var backPage = this.attachMovie("backPage","backPage", BACK_PAGE_DEPTH, backPos);
          var line = this.attachMovie("line", "line", TOP_PAGE_DEPTH+3, linePos);
          var hideShadow = this.attachMovie("hideShadow", "hideShadow", 1000, hideShadowPos);
          //
          // Set up the interaction events
          // (NB - the 'turn page' button is
          // the back of the turning page).
          backPage.onPress = pageTurn;
          backPage.onRelease = pageRelease;
          backPage.onReleaseOutside = pageRelease;
          //
          // Define the permanent masks.
          line.pageShadow.setMask(backPage.back.shadowMask);
          backPage.setMask(line.leftMask);
          //
          // Create the initial curled page.
          curlPage(pageNum);

          Again please if anyone knows the way I could re-code this so as to create the page turning effect in both directions.
          I'm thinking of just duplicating all the code for the right side onto the left but this might not be the smart way of doing this.
          • 2. Re: help if anyone can PageTurning effect
            L_ogistics Level 1
            Is there no one who cab help me in my ime of need!!
            • 3. Re: help if anyone can PageTurning effect
              Rick ESSV
              I'm sure this is different than what you're trying to do, but very page turning cool effects! Try these links:

              http://www.iparigrafika.hu:16080/pageflip/
              http://www.oreillynet.com/pub/a/javascript/2004/09/03/flashhacks.html

              The first one is open source, and has a link to the FLA file.
              • 4. Re: help if anyone can PageTurning effect
                Rick ESSV Level 1
                Duh... I guess you already had one of those links. Ignore the post.
                • 5. Re: help if anyone can PageTurning effect
                  Peter Lorent Level 2
                  Look at the function openPage(). Once the user has 'turned' the page the function curlPage() gets called and sets the curl on the next page. There you have to change things. What you want is the check whether the mouse is over the left or over the right side of the 'book' and that should decide which page gets curled. Good exercise!
                  • 6. Re: help if anyone can PageTurning effect
                    L_ogistics Level 1
                    I have been looking at that section for days and I'm not quite sure what I should change. I'm thinking of incorporating the _xmouse code to analyse the the mouse x position but im not sure if this will give the desired effect. PLease help someone my deadline is ever looming!
                    • 7. Re: help if anyone can PageTurning effect
                      Peter Lorent Level 2
                      Just out of curiousity: why not use the pageflip on http://www.iparigrafika.hu:16080/pageflip/

                      When is your deadline? I might be able to help but timing....
                      • 8. Re: help if anyone can PageTurning effect
                        L_ogistics Level 1
                        Hey Luigil the example is great just what im looking for. The only problem is coding. My deadline is monday how do you think u can help
                        • 9. help if anyone can PageTurning effect
                          Peter Lorent Level 2
                          Not sure what you mean now. The pageflip on http://www.iparigrafika.hu:16080/pageflip/ has the 'going left to right' option and you can download the source. Ready to go.

                          If you want the flashhacks example, then you would need to rework the code. How can I help? Well, I can rework the flashhacks example but I don't have a lot of time left this week. Don't know for sure I can make it before the weekend.
                          • 10. Re: help if anyone can PageTurning effect
                            L_ogistics Level 1
                            Ok mate thanks for the help! If you could code the flash hacks exampl that would be great if not then dont worry about it. I'll work on the example you gave me
                            Cheers!
                            • 11. Re: help if anyone can PageTurning effect
                              juanbbdo
                              I tried Ipgrafika 's example and it slowed down my flash player, go ahead and try it on a MAC. I tried in PC and also. Of course it works well on a clean ipgrafika screen but if you add graphics and bmps and your layout it turns to crap. I studied their example and createrd my own


                              http://www.bbdopr.com
                              http://dodgepr.com/caliber/index.cfm