First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: Brandon Good

Step 1: The file

Start yourself a new .fla file - I used a 450 pixel x 275 pixel work area. The key here is to make sure you leave enough room at the top for the pages to "turn" - otherwise, you're going to run into cut-off page tops.

Step 2: The Layers

Make 4 layers. From bottom to top, name them: "Book", "Content", "Pageturn", and "Actions". Keeping your layers seperate is a good idea. This is a mere matter of personal preference. All layers only have one keyframe - blank initially. The Actions layer only has a 'Stop' action on it.

Step 3: The book

Make a Movie Clip, and call it "Book". Edit Book and then start with a rectangle using rounded corners or square corners if you like the looks of square corners better - if you have a photograph you're going to use for your book, that is also acceptable.

Step 4: The pages

The flat pages are made by making another rectangle 182 pixels by 195 pixels. It can be a white box with a black border for now when you first make it, or adjust the following settings before you make the box. Select the border if you've already made the box, or make a Black 1 point border, and click on the "Custom" button to adjust your settings as follows:

Type: Ragged
Pattern: Simple
Wave Height: Very Wavy
Wave Length: Very Short

This gives the pages a more realistic "ragged" look.

The colour on the pages is a gradient with three points. First, make a (from left to right) white to black gradient. Leave the white (255,255,255) as is, and change your black colour box to a grey (175,175,175). Now, move your left-hand side 'White' box to about 3/4 of the way to your right. Insert another point between the two a little more than halfway, so it's almost touching the 'black' colour box. Make this value a lighter grey (207,207,207). This should now resemble one half of the books' pages. I used this square to make the other half also, simply by using Copy, Paste, then Modify -> Transform -> Flip Horizontal. The right edge border of the first set of pages you made, and the left edge border of the second set should be overlapping - this makes the crease in the middle of the book. Return to the root scene, and place this near the bottom of your stage on the "Book" layer.

Step 5: The Content

I'm not going to tell you what to put on your books' pages, just make sure whatever you decide to make your book about, it has ample room, and is not squished - it will dimish the overall looks of this book. I used a static red gradient ball on the right-hand side.

Step 6: The Pages Turned

Make another Movie Clip, and call it "PageTurn". Make two layers in this clip, 23 frames long. The first frame on each layer is blank, as this is where the pages are at rest. You do not necessarily have to name these two layers, as one is stationary for the entire duration, and the other is the layer that does all the work. I will refer to them as "Layer 1" and "Layer 2". Layer 1 is the layer with the book's pages laid flat - if you're going to make the content of your book visible on the right-hand side while the pages turn, only put the left-hand side page on this layer; otherwise, put both the left and the right-hand side. Depending on the type of book you are aiming to depict, it may or may not have content on it. The first frame on Layer 2 is also blank. Starting on frame 2, put the full page at rest you copied from the Book clip earlier in this step. Frames 3 through 22 are all variations of this page, using the Free Transform Tool (Hotkey Q) - herein called "FTT"

On frame three, I used the FTT to modify the page, and moved it just about 10 pixels to the left, giving the illusion of the page being lifted. Each frame after this is moved to the left by approximately 10 pixels, and up five pixels. This distance is also up to your discretion, but if you move them too far too fast, your animation is going to look choppy - the more frames you use, the smoother, but requires more patience. On frame 12, the pages are near vertical, but I left them as about four or five pixels in thickness. After frame 12, I use the frames flipped horizontally in reverse order from 11 back to frame one (inclusive).

Step 7: For every page, turn, turn, turn ...

Now we have to make something to actually make the pages turn. I have made a button that resembles the corner of a page turned up, just to keep with the book theme. This object can be an arrow, or whatever you'd like it to be. Just make sure whatever the object is, you have a on(release) telling the PageTurn to play.

T-t-t-t-that's all folks!

» Level Basic

Added: 2003-11-14
Rating: 5.98 Votes: 347
(10 being the highest)
» Author
Not much to tell about me.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.