Kwik Page Turn Animation - Digital Art and Design

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

In the Page/Components section of the Kwik panel, select page1. You should see "@ page1" at the top of the section.
Click on the Switch to Components View icon to see your list of components already added to this page.
Select the kwkpgTurn layer in the Layers panel.
From the Category bar, click on the Animations icon.
Click on the Linear Animation icon (first icon in first row of tools).
In the Linear Animation dialog box, rename the animation "pgTurn".
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.

End position:
x -732
y 0
Randomized end position: We won't be using this feature so leave it set to the defaults.
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.
Check the box for Paused When Completed.
Loop: Set this option to l time.
Starts: Set this to When page starts.
Click Create.
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.

|