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.
You can watch a video walk-through illustrating every detail of this “Reposition, Rotate or Scale the PageFlip” tutorial.
To avoid any confusion, it’s important that you work with an original version of the Free Page Flip FLA file when following this tutorial.
Once you have opened the file in Flash, do the following:
- Drag the Timeline’s red PlayHead to frame #11.
- Select the small cross in the middle of the stage. This is the Pages movieclip.
- From the menu choose Modify>>ConvertToSymbol.
- 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”.
- While the new Book Clip is still selected, go to the Properties panel and give it a new instance name like “MyBook”.
- Double-click the Book Clip to begin editing it.
- Create a new layer beneath Layer 1 and name it something like “Book Bounds”.
- Draw a rectangle on the new Book Bounds layer.
- 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.
- Align the rectangle on the Book Bounds layer to the center of the stage.
- Double-click an empty space on the stage to go back to editing the main timeline “Scene 1”.
- Reposition, rotate or scale the Book Clip as you wish.
- Publish the SWF and view the results.
- Double-click the Book Clip to edit its content.
- Right-click the Book Bounds layer and turn it into a guide layer.
- 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();”).
- 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.
Comments(23)
RSS Feeds
thanks for sharing d tuts…i wanted to use ur given .fla template for creatin an online invitation of my friends wedding…d details of d card r as follows:
1)imagine a paper divided into 3sections(jus folded not cut in 3parts)
2)so if u hv to open d card,u need to unfold d first part frm right to left direction and d inside flap frm left to right….
3)in short i need 2 pageflips…d first frm right to left and then d consecutive pageflip frm left to right…
pls help asap..i need to make it soon…do rply me on my email addr even if ur not clear wit my doubt..thanks in advance:)
This is really nice page effect, thanks for sharing!
Hi,
Is it possible to make the page flip horizontally?
Thanks
First let me congratulate you on this awesome tool. I’m just learning Flash and needed something like this for a small project. Ideally I would like to have a transparent background for the flip book, but when I delete the background layer it is possible to see the page content loading. Is there a work around for this?
Many thanks
Forgot to mention – I’m using the improved version. Well worth the money!
The easiest way to hide the page content is to move it somewhere far away from the stage.
I have one more question. I just bought the advanced flip and it is awesome. Is there a way to call the .swf (the flip book ) on a specific frame of the timeline so it shows up when your there, but disappears when you move to the next frame. I put the code
createEmptyMovieClip(“FlipHolder”, 10);
FlipHolder.loadMovie(“pageflip.swf”);
on the frame that I want it to appear. I loads..but stays from then on. Any help would be greatly appreciated.
Thanks so much PiXELWiT!
Hello again Martine, Rather than creating an empty clip with code; create a small square, turn it into a movieclip named FlipHolder, place the FlipHolder clip on the frame where you want the book, place the “FlipHolder.loadMovie(“pageflip.swf”);” code on the same frame.
Now when you move to a frame that doesn’t have the small square (FlipHolder) the PageFlip should disappear.
Thank you for all of this wonderful information. The file works beautifully when I publish the .swf. When I import it into another Flash file as the. swf it just blinks a white page and nothing happens. Can the flip page be used within another Flash file?
Any ideas?
Thank you in advance!
Hello Martine, The PageFlip can be loaded into another movie without much trouble.
1) Start off with an unmodified version of the file.
2) Publish the unmodified FLA file to a new SWF and name that SWF “pageflip.swf” if it isn’t already so named.
3) Create a new FLA file and place this code on the first frame:
createEmptyMovieClip(“FlipHolder”, 10);
FlipHolder.loadMovie(“pageflip.swf”);
4) Publish the new FLA file to a SWF and the pageflip.swf file should load into the new FLA just like any other movie.
Hope that helps.
You just saved me so much time!!! Yes works beautifully. I am loading it on a specific frame later in the timeline. One more question? If you don’t mind….
How do I get it to a specific location on the stage? It loads in the upper left top corner…or 0,0. Thanks so very much!
Regards,,
Martine
You’re welcome.
Just set the FlipHolder clip’s _x and _y properties to adjust the PageFlip’s position.
And on a completely unrelated note, if you haven’t purchased it already, the Improved PageFlip is a heck of a bargain at only $12.50. 😉
Thanks so very much! I am going to absolutely buy it!
Pixelwit, you’ve developed a fantastically flexible and very attractive tool. It’s wonderful that you can share it with us! I’d like to use PageFlip to replicate a single-page Flash template I’ve seen, where the page flips all the way around behind the next page, and I was curious if you’d have any tips to implement this solution. Thanks in advance!
Hi, thanks for sharing but I have a problem when I upload the swf to a web site the flash is not on 100% it`s on Show All, so I`ve boosted the pixels to Wi 600px and Hi 800px and it shows me only the left side of the page and it`s very big. how I can make the page to show in 100% not in Show All. I`ve tried everything but obviously not enough
Pixelwit, let me thank you first for sharing this page-flip and taking the trouble to answering our questions. I had no trouble following the many tutorials related to the page-flip but one thing I can’t find a solution to.
How would I set the initial flipping to: left to right instead of right to left when the swf first loads ie when the book loads the turning of the page should start from left to right not vice versa.
Thanks in advance.
@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.
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.
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!!
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!
@Leisa, this PageFlip Background Tutorial should get you headed in the right direction.
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!