Reposition, Rotate or Scale the PageFlip

I'm frequently asked how to rotate, scale or otherwise move the PageFlip around on the stage so I decided to write this tutorial explaining how I usually go about transforming the Flash Page Flip effect.

To avoid any confusion, it's important that you work with an original version of the Page Flip FLA file from ActionScript.org when following this tutorial.

Once you have opened the file in Flash, do the following:

  1. Drag the Timeline's red PlayHead to frame #14.
  2. Select the small cross in the middle of the stage. This is the Pages movieclip.
  3. From the menu choose Modify>>ConvertToSymbol.
  4. In the "Name" field type something like "Book Clip", select the "MovieClip" option and set the Registration point to the middle of the clip, and then press "OK".
  5. While the new Book Clip is still selected, go to the Properties panel and give it a new instance name like "MyBook".
  6. Double-click the Book Clip to begin editing it.
  7. Create a new layer beneath Layer 1 and name it something like "Book Bounds".
  8. Draw a rectangle on the new Book Bounds layer.
  9. Resize the rectangle so it is the same height as a single page (300) and twice its width (400). *If you need to change the page width or height you can refer to the tutorial explaining how to change the page size.
  10. Align the rectangle on the Book Bounds layer to the center of the stage.
  11. Double-click an empty space on the stage to go back to editing the main timeline "Scene 1".
  12. Reposition, rotate or scale the Book Clip as you wish.
  13. Publish the SWF and view the results.
  14. Double-click the Book Clip to edit its content.
  15. Right-click the Book Bounds layer and turn it into a guide layer.
  16. If using the Improved PageFlip, change the code on the buttons to reflect the new name of the Pages clip (i.e. change "Pages.turnAhead();" to "MyBook.Pages.turnAhead();").
  17. Publish the SWF to see the new results.

That's it. Now you know how to transform the Book Clip just like any other Flash movieclip.


6 Responses to “Reposition, Rotate or Scale the PageFlip”

  1. Leisa
    April 27th, 2008 | 1:15 pm

    Hello! I’m sure I’m missing something really simple but I can’t figure out how to resize the background itself (is that the stage?) I’m talking about the area that is gray behind the book. I’ve walked through the reposition, rotate and scale tutorial to no avail. Thanks!

  2. April 27th, 2008 | 2:46 pm

    @Leisa, this PageFlip Background Tutorial should get you headed in the right direction.

  3. KC
    August 9th, 2008 | 2:08 pm

    First off thank you for sharing!! Ok I am probably missing something. When I go through the different steps to resize the stage and pages I get through it OK but the tab buttons at the top (turn to pg) and the turn ahead and turn back buttons no longer operate. What happened? How do I fix this? and creat new ones? I am using the improvedpageflip_03. TIA!

  4. KC
    August 9th, 2008 | 5:35 pm

    You rock!! Thank you for your help! Your page flip is great and your tutorials are so easy!! I upgraded to the Improved Version!! Love it!!

  5. IS
    August 13th, 2008 | 12:55 pm

    Hello,

    Thanks for the code. Everything works very nicely. However I am having a lot of problem having a book positioned horizontally. any help would be very useful.

  6. August 13th, 2008 | 4:27 pm

    @KC, Thanks. :) I added step#16 to the tutorial just for you.

    @IS, How did you get rid of the Linkage Identifier error? ;) Go through the directions in the tutorial and then you should be able to rotate the Book Clip (MyBook) 90 degrees. Hope that helps.

Leave a Reply

PixelWit.com's Comment Guidelines

© Sean O'Shell 2007-2008