1 Reply Latest reply on Nov 22, 2012 6:03 PM by Ned Murphy

    Page Flip Effect

    pa-pavel Level 1

      I found this code on the net and I am try to adjust it to that the page effect happens automatically but no actual pages are turned. Just an alpha'ed effect of infinite page turns.

       

      ------------------------------------------------------------------------------------------ -----------------------------------

      function curlPage(p):Void {

                var topPage:MovieClip = this.attachMovie(pages[p], pages[p], TOP_PAGE_DEPTH, pagePos);

                var bottomPage:MovieClip = this.attachMovie(pages[p+1], pages[p+1], BOTTOM_PAGE_DEPTH, pagePos);

       

                bottomPage.setMask(line.rightMask);

                line.onEnterFrame = function() {

                          line._x += (PAGE_CURL-line._x)/TURN_RATE;

                          movePages();

                          if ((line._x-PAGE_CURL)<1) {

                                    delete this.onEnterFrame;

                          }

                };

      }

      function pageTurn():Void {

                var oldMousePos:Number = _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():Void {

                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():Void {

                delete line.onMouseMove;

                if (line._x<HALF_PAGE_TURN) {

                          turnInterval = setInterval(openPage, 10);

                } else {

                          turnInterval = setInterval(closePage, 10);

                }

      }

      function openPage():Void {

                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():Void {

                line._x += (PAGE_CURL-line._x)/TURN_RATE;

                if ((PAGE_CURL-line._x)<1) {

                          line._x = PAGE_CURL;

                          clearInterval(turnInterval);

                }

                movePages();

                updateAfterEvent();

      }

       

      var PAGE_SPINE:Number = page._x;

      var PAGE_EDGE:Number = page._x+page._width;

      var PAGE_CURL:Number = PAGE_EDGE-20;

      var HALF_PAGE_TURN:Number = PAGE_SPINE+(PAGE_EDGE-PAGE_SPINE)/3;

      var TURN_RATE:Number = 3;

      var TOP_PAGE_DEPTH:Number = this.getNextHighestDepth();

      var BOTTOM_PAGE_DEPTH:Number = TOP_PAGE_DEPTH+1;

      var BACK_PAGE_DEPTH:Number = TOP_PAGE_DEPTH+2;

       

      var lineAngle:Number = 45;

      var pageNum:Number = 0;

      var turnInterval:Number = 0;

      var pages:Array = ["page1", "page2", "page3", "page4", "page5", "cover"];

       

      var pagePos:Object = {_x:page._x, _y:page._y};

      var backPos:Object = {_x:PAGE_EDGE, _y:page._y+page._height, _rotation:90};

      var linePos:Object = {_x:PAGE_EDGE, _y:page._y+page._height, _rotation:lineAngle};

      var hideShadowPos:Object = {_x:PAGE_EDGE, _y:page._y};

       

      var backPage:MovieClip = this.attachMovie("backPage", "backPage", BACK_PAGE_DEPTH, backPos);

      var line:MovieClip = this.attachMovie("line", "line", this.getNextHighestDepth(), linePos);

      var hideShadow:MovieClip = this.attachMovie("hideShadow", "hideShadow", 1000, hideShadowPos);

       

      backPage.onPress = pageTurn;

      backPage.onRelease = pageRelease;

      backPage.onReleaseOutside = pageRelease;

       

      line.pageShadow.setMask(backPage.back.shadowMask);

      backPage.setMask(line.leftMask);

       

      curlPage(pageNum);

      ------------------------------------------------------------------------------------------ -----------------------------------

       

      I also want to be able to make the page side adjustable eg. size and place an the effect to happen accordingly.

      But I am sure Ill get there is someone could posint me in the right directlion.

       

       

      Appriciate and help!

      Thx

        • 1. Re: Page Flip Effect
          Ned Murphy Adobe Community Professional & MVP

          At this point you are the only one who knows what the various objects are that are involved in the design.  What you should do is use the trace function to track thru the processing to see what does not behave in a manner that you expect.  Implement it line by line if neccessary to see where it misses.