logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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


g features
Sketch with Your Silhouette SSDE

Simple Drawing Tools in Silhouette Studio Designer

Silhouette Studio Designer Edition Software

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor