How to Change Size of Page Flip

“How do you change the dimensions of the pages used in the PageFlip book effect?” is a common question asked in the PageFlip Help section of this site. If you want to know how to resize the book or modify the size of the pages used in the Flash PageFlip effect then this tutorial is for you.

To be sure we’re working with the same file, download the most recent version of the Free Page Flip FLA. The file is a self-contained page flip solution with a SWF Player version-checker, a preloader, each page of the book, and the code that makes it all go.

You can watch a video walk-through illustrating every detail of this “Change Size of PageFlip” tutorial.

Changing the book’s size, requires the modification of two key aspects of the Page flip file. First you need to change the width and height variables found in the code and then you’ll need to change the content in the Print clips so everything fits within your new page size.

Modifying the Code:

  1. Open the PageFlip.fla file.
  2. Open the Library panel.
  3. Open the Book folder.
  4. Double-click the Bound Pages clip to begin editing it.
  5. Select the first frame of the Actions layer.
  6. Open the Actions panel.
  7. Go to line #16 and change the pageWi variable to the reflect the new width of your page in pixels.
  8. Go to line #17 and change the pageHi variable to the reflect the new height of your page in pixels.

Modifying the Print Clips:

  1. Open the Library panel.
  2. Open the Book folder.
  3. Open the Printed Pages folder.
  4. Double-click the Print1 clip to begin editing it.
  5. Create a new layer within the Print1 clip called “Page Bounds”.
  6. On the Page Bounds layer, draw a rectangle the size of your page.
  7. Align the the rectangle to the center of the stage.
  8. Right-click the Page Bounds layer and turn it into a “guide” layer.
  9. Lock the Page Bounds layer and place it at the bottom of the layer stack (if it isn’t there already).
  10. Add your content to the upper layers being sure it is completely contained within the Page Bounds.

Once you’ve modified the Print1 clip you can either repeat the same steps for all of the other print clips or you can duplicate the Print1 clip and rename it accordingly (Print2, Pint3, etc.) while being sure to retain the proper “Linkage Identifier” (print2, print3, etc).

You may need to resize the stage and reposition the “Pages” clip after changing the PageFlip’s dimensions.

If you’d like to rotate or scale the Pages clip you should read the PageFlip Transformation Tutorial.

If you want to change the total number of pages in the book, you can read this article about adding pages to the PageFlip.

Hope it helps.


39 Responses to “How to Change Size of Page Flip”

  1. Chafer says:

    Not sure how to change the size so it stays in side the page, could someone create a book with a background of 1024,768 and a book size of 900,600 please becuase it won’t work for me.

  2. m4ddy says:

    Hi,

    very nice work and a realy great Tutorial. But i still have Problem with the PageFlip-Effect. When i’m flipping the Pages the Symbols shown on the Pages before are still visible. They disapears in an distance of nearly 50 or 75 Pixels, i guess.

    It was working correctly until i resized the PageFlip-Book to 300×450

    greetings
    m4ddy

  3. Can you please inform me as to how to make the images centerfold?

  4. Jasmine says:

    I’d like to make the book flip through on its own when the user arrives to the page. Then return to the first page where the user can then flip through on their own.

    Any idea how I can make this happen?

  5. mariano says:

    hi, I´ve succesfully changed the page and stage size, but the page it stills loads in the same place, and i would like to place it in other place (specially on y axe), how can i change the x-y place where the mc is loaded??

  6. wayne says:

    TO CHANGE BACKGROUND COLOR & SIZE

    1. Make Background layer visible.
    2. Click on key frame 1 of Background layer.
    3. With pointer tool, click in background area on stage.
    4. If you do not see the PROPERTIES panel, enter CTRL+F3.
    5. If you do not see the X: Y: W: H: parameters,
    click on POSITION AND SIZE.
    6. Change W: to your desired stage width.
    7. Change H: to your desired stage height.
    8. Click FILL AND STROKE,
    if you do not see the Pencil and Bucket icons.
    9. Change the fill (Bucket) color,
    to the background color of your web page.
    10. Make Background layer invisible.

    NOTE: Not every version of Flash has a Properties Panel. I am using CS4. Not sure when the Properties Panel first appeared. Earlier versions, like Flash 5, used the Instance Panel to change parameters.

  7. Roel says:

    Dear Guys,

    I have resized the flash book, but still i got a grey background with the old size. How can i change it?

Leave a Reply

PixelWit.com's Comment Guidelines

© Sean O'Shell 2007-2017
css.php