A Flash Developer Resource Site
|
Internet Commerce
Developer ChannelFlashKit.com
JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com
internet.com
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Animation
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 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!
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Book with Page Turning
 |
 |
|