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 Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Kwik Page Turn Animation

For the last few tutorials, we have been working on the page template for our Kwik book app. We have one more thing to add to the template, which is the linear animation that emulates a page turn.

We will want this animation to play immediately when the page loads. We already have the graphic for the animation on the kwkpgTurn layer in page1. Also this layer has been set as a Shared Asset so that it will work through out the book app.

Linear Animation

At this point, we will be creating a very simple animation and will be using most of the default settings. But we will be learning a lot about linear animations as we add many of them to the book.

A linear animation moves an object from one point on the screen to another. Therefore the main settings for a linear animation are the start and end points. Kwik will automatically set the starting point for the animation as the current position of the object on the layer. We will need to set the end point for the animation.

We will also set the duration for the animation in seconds, as this will determine how fast the object moves. Finally, we will set the animation to start when the page loads.

Page Turn Animation

  1. In the Page/Components section of the Kwik panel, select page1. You should see "@ page1" at the top of the section.

  2. Click on the Switch to Components View icon to see your list of components already added to this page.

  3. Select the kwkpgTurn layer in the Layers panel.

  4. From the Category bar, click on the Animations icon.

  5. Click on the Linear Animation icon (first icon in first row of tools).

  6. In the Linear Animation dialog box, rename the animation "pgTurn".

  7. Layer kwkpgTurn: This tells Kwik to use the graphic on the kwkpgTurn layer for the animation. Keep this selected

In the Properties section, Kwik shows us the X and Y positions for the object on the kwkpgTurn layer and the width and height of the graphic object. Because we want to move the entire graphic off the screen, we will need to move it at least the same number of pixels as the width of the graphic (732 px). Let's move it 732 pixels to the left. Because the current X position is 0. This will result in a negative number for the end position. We don't want to move the object vertically, so we will keep the Y position set to 0. This will cause the object to move horizontally only.

  1. End position:
    x -732
    y 0

  2. Randomized end position: We won't be using this feature so leave it set to the defaults.

  3. Duration: We want the graphic to move very fast to give the flip effect. So let's set this to 1 second and .25 second delay.

  4. Check the box for Paused When Completed.

  5. Loop: Set this option to l time.

  6. Starts: Set this to When page starts.

  7. Click Create.

  8. You should see that the pgTurn animation has been added to the components list for this page.

Now is a good time to test the project. Click the Publish button in the Kwik panel. Test the navigational buttons and the page turn animation.

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


Add Kwik+Page+Turn+Animation to Twitter Add Kwik+Page+Turn+Animation to Facebook Add Kwik+Page+Turn+Animation to MySpace Add Kwik+Page+Turn+Animation to Del.icio.us Digg Kwik+Page+Turn+Animation Add Kwik+Page+Turn+Animation to Yahoo My Web Add Kwik+Page+Turn+Animation to Google Bookmarks Add Kwik+Page+Turn+Animation to Stumbleupon Add Kwik+Page+Turn+Animation to Reddit


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

For FREE email updates, subscribe to the Digital Art and Design 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
How to Create Patterns in Illustrator

Multiple Artboard Template in Photoshop CC

Design & Bind Your Creative Portfolio - Skillshare

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