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:
- 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 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.
Comments(39)
RSS Feeds
I am also a Flash novice who had trouble resizing my flip book.
I had no trouble resizing the stage with CTRL+J.
I simply made the stage height equal my book height,
and the stage width TWICE the length of my book.
That was easy.
But, that was not all that Ryan wanted to know.
Ryan wanted to know how to resize the stage AND
make it work with his flip book.
Danz, Tim, Ryan, Chris, David, and I each had flip books
larger in size than the given stage: 610×460.
When I changed the stage size,
my flip book, like theirs, was cropped and off-center.
It wasn’t until I read Katti’s question and the answer
that I realized what Sean meant when he wrote
“REPOSITION THE PAGES CLIP”!
Oh! So, I needed to move the registration point (+ sign)
of the Bound Pages movie clip
to the center of my resized stage.
HERE’S HOW:
1. With the arrow pointer tool, click key FRAME 5 on the Pages layer.
2. You should now see on the stage
a plus sign with a small circle inside a square.
This is the Pages clip registration point. Click on it.
3. If you do not see the PROPERTIES panel,
toggle it on with CTRL+F3.
4. If you do not see the X: Y: W: H: blue parameters,
click POSITION AND SIZE.
5.
Change the X parameter to half your stage width.
Change the Y parameter to half your stage height.
For example:
If Ryan’s flip book was 400w x 600h,
his stage size would be 800w x 600h,
with X: 400 and Y: 300
Thanks, Katti for the question.
And thanks to Sean for the beautiful book.
hey,its good. but i have a problem regarding the page bounds thing. it says “On the Page Bounds layer, draw a rectangle the size of your page” what exactly do you mean by the size of your page? do you mean the dimensions we gave in the code earlier or the size of the page already on the screen? please clear my doubt asap.
@Katti, The Pages clip is the little cross in the center of the stage and can be found on the “Pages” layer.
Hi everyone, my animation is almost perfect, I changed PageFlip’s dimensions to 400x50O. i have problems with this step:
It says: “You may need to resize the stage and reposition the “Pages” clip after changing the PageFlip’s dimensions.”
Where is the “Pages” clip located ???? it’s not on the library, it’s not on any frame on Layer “Pages” at stage.. .please help 🙁
I’ve got a quite rude question.
Can I have e.g the 3rd page of different size(e.g same heigth as the first page but the width twice the first page) and another flip attached to it opening on the other side? lets say like a window.
Great Product. You mentioned in one of your responses to use the SetInterval command to automate the turning of pages. Can you give me a hand in modifying the code to perform that function.
Thanks in advance.
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.