Add Pages to Flash Page Flip (PageFlip)
“How to add more pages” is the most common topic found at the PageFlip Help page. If you’d like to know how to add a page or why you keep getting an error saying, “A ‘with’ action failed because the specified object did not exist” then this Tutorial is what you’re looking for.
You can watch a video walk-through illustrating every detail of this “Adding Pages” tutorial.
To be sure we’re working with the same file and code, download the Page Flip Source File. Open it up and check it out. This one FLA file is designed to be a self-contained page flip solution. It contains a SWF Player version checker, a preloader, each page of the book and the code to make it all go.
Change “maxPages” variable: The first step in adding pages is to locate the main code block and change the “maxPages” variable.
- Open the PageFlip file.
- Click on frame #11 of the Pages layer.
- The small cross highlighted in the center of the stage is an instance of the “Bound Pages” movieclip named “Pages”. Double-click it to begin editing it.
- Once you are editing the Bound Pages clip, select the first frame of the Actions layer.
- Open the Actions Panel (Menu»Window»Actions).
- Go to line #29 in the Actions panel to locate the “maxPages” variable.
- Change the “maxPages” variable to the number of pages you want your book to have. Be sure to use an even number or else very bad things will happen.
As far as modifying code goes, that’s all you needed to do, now it’s a matter of creating your new pages and adding them to the FLA file.
Creating a page: You need to make sure you create a Print movieclip for every page in your book, even the blank ones.
- Open the “Create New Symbol” window. (Menu»Insert»NewSymbol).
- Name the new symbol “print” (all lower case) followed by a page number. For example page #9 would be named “print9”.
- Make sure the symbol’s “Type” is set to “MovieClip”.
- Check the “Export for ActionScript” box.
- Make sure the Identifier is “print” followed by the proper page number (should be automatic).
- Un-check the “Export in first frame” box.
- Click “OK” to close the “Create New Symbol” window and begin editing the new movieclip.
- Drag an instance of the “Page Guide Outline” graphic from the Library onto the Stage of your new Print clip.
- Center the Page Guide Outline in the exact middle of the stage.
- Add your page content to the movieclip while keeping everything within the Page Guide Outline
Adding a page:
- Go to the root/main timeline.
- Create a new blank keyframe at the end of the “Prints” layer. (Right-click the keyframe in the timeline and choose “insert blank keyframe”.)
- Select the new keyframe.
- Drag the new page movieclip (e.g. Print9 etc.) from the Library onto the stage. Make sure the movieclip lands in the last keyframe of the Prints layer that you created 2 steps ago.
- Repeat steps 2, 3 and 4 for each new page. You must have a “Print” movieclip for every page in your book.
Adjusting the file to accommodate the new pages:
The basic goal is to extend the length of all layers with content by adding one more frame to them.
- Drag the last keyframe of the Actions layer to the right, one frame beyond the last keyframe in the Prints layer.
- Insert a new frame in the “Pages” layer under the last frame in the Actions layer. (Right-click the keyframe in the timeline and choose “insert frame”.)
- Insert a new frame in the “Background” layer under the last frame in the Actions layer.
- Insert a new frame in the “Load Status” layer one frame before the last frame in the Actions layer.
- Repeat for any other layers containing graphic content.
- Test the movie.
If you will be loading the entire “PageFlip.swf” file with an external preloader you can skip step #6 in the “Creating a page” section which will ensure the Print clip is exported in the first frame of your SWF file. You can also skip the “Adding a page” and “Adjusting the file” sections completely.
Leave a comment if you have any questions.
Improved PageFlip Now Available: Improved PageFlip implements the most commonly requested features.
Comments(159)
RSS Feeds
Giancarlo , you can introduce sound editing the button. “Corner Button”. Select the first keyframe, in the property box you can select a sound file.
Regarding flipping pages with buttons, It must be possible but I don´t know how.
HOW TO ADD MORE THAN 8 PAGES TO THE BOOK without pesky errors:
(as tipped off by ‘eamurray‘):
This has only been tested in Flash 8.
FIRST, make sure the maxPages variable is set to the correct number (as explained in the tutorial). e.g. ‘var maxPages = 52;’
SECOND, there are two options–
If you DO care about the included preloader, do this:
For pages 1-8, follow the Pixelwit’s tutorial. For any pages beyond 8, select the respective movieclip in the library, open the properies dialog box and also select the box “Export in first frame” in addition to “Export for Actionscript”. This way, it will still show the preloader as it loads the first 8 pages.
If you DO NOT care about the included preloader, do this:
For all pages, Select the movieclip in the library, open the properies dialog box and also select the box “Export in first frame” in addition to “Export for Actionscript”.
** BONUS: For any movieclip’s you have set to “Export in first frame” you do not even need to place them on the timeline at all. Flash will take them from the library and put them in the movie for you (in the first frame, no less). Assuming you have them numbered correctly (i.e. ‘print8, print9, print10, print11…print45, print46, etc.), everything will still work.
CAUTION: You should care about the preloader. If you don’t have one, visitors to your site will stare at a blank page until the book finally pops into existence. If you have a large book, the pause can be long enough they might just close the window thinking it’s not working.
I had problems changing page s size. when I publish swf it very unaligned.
What size should my image be to fit the default page size?
Hello,
I’d like to know how can i introduce sound when i change page and if i have the possibility to put two buttons Next and Previous to flip the page.
Thank You Very much.
Best Regards
Hi there, do you have the jumpto another page kind of function? Say if you are at page 04, you need to jump immediately to page09, possible?
Im trying to create a flip book that has previous page and next page buttons underneath so the user can click to navigate through the pages, does anybody have any ideas on how this can be done?
Hi PixelWit,
Thank you so kindly for allow us beginners to get an understanding of the “Page flip” effect. I’m having the same issue as Quoc. I want to be able to use this in flash 8. I’ve done the find and replace for the lines of script you referenced. But what happens when I run the file is when I click and drag the corners to flip a “curve” appears across both pages, it appears to flip both the bottom AND top of the page, the back side of the page being flipped becomes flat and you can see it coming from off the stage, once the page flip is complete there is a curved line which cuts off anything above it from the left side page.
I’m stuck and how to make this work for AS2, since this was done in AS1. Anything that can be provided would be beneficial!
Thanks!
Hello again,
I have a problem when I’m modifying the page print movieclips.
When I’m adding a ComboBox component to print2 and ran the flash movie. The pages turns green when I press the cornerbutton to make the flip.
But when I use Label, ListBox or Button component everything is fine. It’s very weird because I don’t remember you used the color green somewhere in the Bound Pages?
My ultimately goal is to make a Flash Form of these pages.
Hope to hear from you soon. Thanks.
GReetz,
Quoc
You are the greatest, PixelWit. Works like a charm.
Keep up the good work.
Greetz,
Q.
I’ve followed all the steps but it won’t seem to add the page. I get to test movie, test it and I get to page 8 and there’s no page nine and even though I created a page 10 I couldn’t turn to it. Can anyone tell me what’s going wrong?
Hello and thank you Quoc. In a perfect world you wouldn’t have to change a thing to get my code to work in Flash 8 but unfortunately I’m not a perfect programmer and I let a few capitalization typos sneak into my code. All Flash players since version 7 have been case sensitive.
Open the main code block and use the ActionScript Editor’s “Find and Replace” feature (the magnifying glass icon) to:
I think that’ll do it.
Many thanks, PixelWit. A very clear tutorial.
I ‘ve got one question though. What if want to change the current flash player(6) to 8. What code do I have to change in the Bound Pages movieclip to make it work?
You’re welcome Arif and Ashley.
Thank you very much for providing this code. I was trying to use the pageflip to be able to read a newsletter online, and your code worked amazingly! Thank you again!
terima kasih, saya begitu gembira, saya akan mencoba dan mengembangkannya. terima kasih