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.
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:
- Open the PageFlip.fla file.
- Open the Library panel.
- Open the Book folder.
- Double-click the Bound Pages clip to begin editing it.
- Select the first frame of the Actions layer.
- Open the Actions panel.
- Go to line #16 and change the pageWi variable to the reflect the new width of your page in pixels.
- Go to line #17 and change the pageHi variable to the reflect the new height of your page in pixels.
Modifying the Print Clips:
- Open the Library panel.
- Open the Book folder.
- Open the Printed Pages folder.
- Double-click the Print1 clip to begin editing it.
- Create a new layer within the Print1 clip called "Page Bounds".
- On the Page Bounds layer, draw a rectangle the size of your page.
- Align the the rectangle to the center of the stage.
- Right-click the Page Bounds layer and turn it into a "guide" layer.
- Lock the Page Bounds layer and place it at the bottom of the layer stack (if it isn't there already).
- 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 change the total number of pages in the book, you can read this article about adding pages to the PageFlip.
Hope it helps.
RSS Feeds
hi , I have is modified the code and now flipping is possible from all four corners . Don’t need the very reasonably priced version of pixelwit , any way thanks for the initial help .
@Isnain, Getting the top corners to work is a bit too complicated for me to explain in a tutorial but that feature is available in the (very reasonably priced) Improved PageFlip.
Hi, its a great tool and i have done lots of things with it like background change,move to any page through text box entry,forward,backward,to the last, to the first,zoom etc but i cant do one thing that is making the flip to took place from the upper two corners . Can anyone help me with it , Thanks in advance
ok never mind the question i asked before, now i need to know how i move the brown bg of the page, and the botton that acts as the corner of the page(the thing you grab to flip the page) ty gabe
hi, dude i do everithing you say but it still dont work, whe i publish it not in the center of the window and the other pages appear in the back of the book ive been looking around in the other tutorials but it still dont work ohh by the way im using cs3, but it porbably doesnt have nothing to do with it. t.y Gabe
Thanks Pixelwit! Yes, I’m planning on getting the new pageflip now that I’m comfortable with how this works! I’ve got other websites that can benefit from it. Including my Havanese site that needs updating. I love the idea of little flipbooks for each pooch in the kennel!
@Leisa, rather than linking directly to the SWF files, you need to link to HTML pages that contain the SWF files. You can generate these HTML files from Flash using the “Publish” settings.
P.S. I think your designs would look great when displayed with the Improved PageFlip.
I’ve gotten everything in good shape . . . this is an awesome tool. I have a general flash question I hope someone can answer. My pageflip is a clickable link from a sample image. I have it launching in a separate window. How can I force the window size so that the flip stays the right size? Here’s a link to the page the links are located on - just click any image. http://www.vacationmemorys.com/themes.html . Thanks for any help anyone can provide!
hi,
Will you be able to send me the Page flip.fla file?
i need it to do as reference for my project.
A great product with great help. Congratulations on your work
NB:I have amended the bounds page to:
var pageWi = 500;
var PageHi = 600;
& added a rectangle with the same x & y
Hi, 1st of all AWESOME & THANK YOU, seriously this is an excellent feature & you have clearly gone out of your way to help people, U rock!
May I ask? i have edited the 2 features as stated (BTW I am using FLash MX) when I test the movie (resized) all is good but when I export it it is still the incorrect size, any help would be greatly appreciated!!
@Holly, Open a FLA file in Flash. In the top menu select “Window” and then select “Library”.
I don’t know where the library panel is!
Karolis, Instead of running your flip function when the mouse is clicked, run it with SetInterval.