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.

  1. Open the PageFlip file.
  2. Click on frame #11 of the Pages layer.
  3. 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.
  4. Once you are editing the Bound Pages clip, select the first frame of the Actions layer.
  5. Open the Actions Panel (Menu»Window»Actions).
  6. Go to line #29 in the Actions panel to locate the “maxPages” variable.
  7. 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.

  1. Open the “Create New Symbol” window. (Menu»Insert»NewSymbol).
  2. Name the new symbol “print” (all lower case) followed by a page number. For example page #9 would be named “print9”.
  3. Make sure the symbol’s “Type” is set to “MovieClip”.
  4. Check the “Export for ActionScript” box.
  5. Make sure the Identifier is “print” followed by the proper page number (should be automatic).
  6. Un-check the “Export in first frame” box.
  7. Click “OK” to close the “Create New Symbol” window and begin editing the new movieclip.
  8. Drag an instance of the “Page Guide Outline” graphic from the Library onto the Stage of your new Print clip.
  9. Center the Page Guide Outline in the exact middle of the stage.
  10. Add your page content to the movieclip while keeping everything within the Page Guide Outline

Adding a page:

  1. Go to the root/main timeline.
  2. Create a new blank keyframe at the end of the “Prints” layer. (Right-click the keyframe in the timeline and choose “insert blank keyframe”.)
  3. Select the new keyframe.
  4. 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.
  5. 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.

  1. Drag the last keyframe of the Actions layer to the right, one frame beyond the last keyframe in the Prints layer.
  2. 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”.)
  3. Insert a new frame in the “Background” layer under the last frame in the Actions layer.
  4. Insert a new frame in the “Load Status” layer one frame before the last frame in the Actions layer.
  5. Repeat for any other layers containing graphic content.
  6. 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.

NEW! StarImproved PageFlip Now Available: Improved PageFlip implements the most commonly requested features.


159 Responses to “Add Pages to Flash Page Flip (PageFlip)”

  1. Karina says:

    Excelente Tutorial…Me ha servido de mucha ayuda…tenia problemas a tratar de incorporar paginas a mi libro…me aparecía un error “with” pero ya lo solucioné…mil gracias por tu aporte…

  2. Zahra says:

    Hi,
    ive tried skipping step #8 (export in first fame), however i am still getting the same error
    Error: A ‘with’ action failed because the specified object did not exist.

    i am not too sure what to do now as i need to create a brochure asap…..
    Thanks for ny help….:)

  3. Pixelwit says:

    @Arianna, it would be easier to help you if you gave more information than “it doesn’t work”. Also, please be sure to read the complete article and follow all instructions. I only say this because most people who have problems usually contact me later to explain that they missed a step or two. If that turns out to be the case, please let me know so I can edit the tutorial to add emphasis where needed. Thanks.

  4. Arianna says:

    Hi, I’ve tried adding the pages I’ve created to the book and for some reason they don’t add right. I’ve also tried replacing the original pages but that didn’t work either. I’ve actually created my own book but instead of flipping it uses buttons and I really want to be able to transform it so that it would actually flip like a book. Thanks for any help!!

  5. Pixelwit says:

    @Leisa, Thanks, I appreciate the offer, but I think I’ll steer clear of perishable foods. 😉

    @Zahra, Thanks for pointing out my error, I’ve updated the code to reflect the new line number. I’m not sure, but it sounds like you may be having trouble with steps 4-8 in the “Creating a Page” section. You can also try skipping step #8 (export in first frame).

    • Priya says:

      Hi,
      I am still getting the same error
      Error: A ‘with’ action failed because the specified object did not exist.

      i am not too sure what to do now as i need to create a brochure asap…..
      Thanks for ny help….:)

  6. Zahra says:

    Hi PixelWit,
    I have a small problem with the tutorial.
    The maxPage coding is not on line #46 as mentioned, i found it on line #29 which has the following coding –
    // “maxPages” should be an even number
    var maxPages = 8;

    i changed the no from 8 to 12 however when i play the movie i get the following error –
    Error: A ‘with’ action failed because the specified object did not exist.

    I am quite sure I have followed your tutorial correctly however not to sure what is going wrong!

    Any Help from anyone would really be appreciated!

  7. mirka says:

    JK,

    click Ctrl+R and select the image
    or
    file -> import -> import tp stage -> select the image

  8. Leisa says:

    I figured out my problem. Pixelwit, thank you so much for putting this code out there . . . I’d have never been able to do this on my own. It’s going to add such a nice flair to my website!Email me your address and I’ll send you some of my incredible banana or pumpkin bread – your choice.

  9. Leisa says:

    Help! I’ve added 4 additional pages and I’m only seeing 2 of them. I’m a real novice to this . . . any assistance is appreciated. I’ll be happy to send fresh homemade banana bread!

  10. Pixelwit says:

    @Jason, I just wanted to let you know that the features you are looking for (plus a few others) are available in the Improved PageFlip.

  11. Jason says:

    Hey Aideen,

    do you mean you figured out how to jump to another page?

    i am trying to create a table of contents page, but i am a little lost on the coding part, any help would be great

  12. Aideen says:

    Oh i think ive figured it out 😀
    Just wondering if u have an example of the new page flip cos im considering getting it.

  13. I wrote some additional functions that allow you to jump directly to a page. A typical call to the function would be: “pages.gotoPage(4.5);” (without the quotation marks.

    I haven’t tried it, but I’m sure you could create a function like gotoNextPage() by simply calling gotoPage(curPage + 2);

    It may not be perfect but it’s working for me.

    //
    function gotoPage(newPage){
        var dir = newPage < curPage ? -1 : 1;
        var pagesToTurn = dir * ((newPage – curPage) / 2);
        for(i = 0; i < pagesToTurn; ++i){
            startTurn(dir);
        }
    }
    function startTurn (dir) {
        pageInit (curPage+dir, dir);
        startX = dir*pageWi;
        RButton._alpha=0;
        Lbutton._alpha=0;
        //
        pageRatio = 1;
        flip(pageRatio)
        curPage+=2*dir;
        flipDone();
    }
    //
  14. nico says:

    how can we place other swf file onto the page or layout?

    since im doing simple animation in another flash file but when i use movie clip to add the animation, the size is too heavy that flash can’t handle it

    hope to know the reply soon

  15. sachin says:

    hi! nice tutorial.can we add maginification as well as next & back button also….

Leave a Reply

PixelWit.com's Comment Guidelines


Warning: Undefined variable $user_ID in /home2/pixelwit/public_html/blog/wp-content/themes/fvariant2/comments.php on line 57

You must be logged in to post a comment.

© Sean O'Shell 2007-2024