g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Flash Open Book Animation

If you have been following the tutorials for our FlashR storybook app, you know that we have the book enlarged to full size and positioned on the stage. It completes this transition on Frame 30. Now we are ready to open the book. Our first task is to place something under the book cover to be revealed when the book opens.

When you open a book you usually see the top page and the edges of a few pages under the top page. You also see the edges of the back cover of the book. This is what we have in our bookPages graphic.

You can see that I also added a small shadow over the top of the pages at the left edge. This semi-transparent gradient is on a second layer in the PhotoshopR file. When we import this file to the Flash stage, we will get two new layers called bookPages and pageGradient. As we did in the previous tutorial, we will import the Photoshop layers as Bitmap images with editable layer styles and give each layer an instance name identical to the layer name.

  1. After importing the graphic file into Flash, the new layers are automatically at the top of the Timeline. We will movie the bookPages and pageGradient layers directly under the cover2 layer.

  2. We don't need these new graphics until Frame 30, when the book begins to open. For each of the bookPages and pageGradient layers, add a Keyframe to Frame 30. Then, go to Frame 1 and click Edit - Clear to remove the graphics until Frame 30.

    Now we are ready to open the book. Go to the cover2 layer.

  3. We already have the cover2 movie clip within a tween span on the cover2 layer. We need to create another instance of the cover movie clip (which will be cover3) to create another tween animation.

  4. On the cover2 layer, select the movie clip. Click Edit - Copy.

  5. Create a new layer just above the cover2 layer and name it "cover3". Add a Keyframe to Frame 30. Click Edit - Paste in Place to place the movie clip in the same position as on the cover2 layer.

  6. In the Properties panel, give this movie clip an instance name of "cover3".

  7. We need to adjust the Transformation point on this cover3 movie clip. Click on the book cover with the Free Transform tool and drag the Transformation point (that white dot) from the center to the left edge of the movie clip. Now the left edge of the graphic will work as the spine of our book.

  8. Right-click on the cover3 movie clip and choose Create Motion Tween. Drag the Tween span to end on Frame 54.

  9. Right-click to add a Keyframe on Frame 40 of the cover3 layer. Click on the cover3 movie clip with the Free Transform tool. From the Menubar, click Modify - Transform - Rotate and Skew. Place your cursor next to the right edge over the center small box and it should change to a small vertical line. Drag upward slightly to skew the cover. Then, place your cursor over the small square on the right edge of the book cover and drag the edge to the left to shorten the width of the book cover. That is the first transformation for our tween.

  10. Go to Frame 45 and add a Keyframe. Repeat the last step to open the book cover a little further. Don't worry if the book cover goes beyond the top of the stage.

  11. Add a Keyframe to Frame 50 and repeat again.

  12. Add a Keyframe to Frame 52 and repeat. Add a Keyframe to Frame 54 and repeat for the last time.

Test your movie.

Join us in the Digital Art and Design forum. | Join us in the Flash forum.

Add Flash+Open+Book+Animation to Twitter Add Flash+Open+Book+Animation to Facebook Add Flash+Open+Book+Animation to MySpace Add Flash+Open+Book+Animation to Del.icio.us Digg Flash+Open+Book+Animation Add Flash+Open+Book+Animation to Yahoo My Web Add Flash+Open+Book+Animation to Google Bookmarks Add Flash+Open+Book+Animation to Stumbleupon Add Flash+Open+Book+Animation to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor