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


Page Template for Kwik 2 Book App

In this tutorial, we will add the first page to our Kwik 2 book app and set the page and layer properties. You will set the buttons on this page as shared assets, so that Kwik knows to use the buttons and the actions attached to them on every page of the book. You will also create another shared asset on this page which will be used for your first animation.

How the Template Works

All of the features that we will be adding to page1 of our book app will become a template that we will use when we start to build the other pages in our app. The only layer on this page template that will need to be replaced for each new page is the bottom (background) layer graphic. Making this switch will be as simple as copy/pasting the new page's background graphic onto the bottom layer for the new page.

As with the cover page, we start with a mockup .psd file which we open into Photoshop. Next, we tell Kwik to use this .psd file for page1.

  1. In the Kwik panel, click the Open Project icon and click on the Template.kwk file.

    The project and the cover page will open in to the workspace.

  2. Close the cover.psd file.

  3. Open your mockup .psd file into Photoshop.

  4. The mockup file for your first page should be the only file open in the workspace.

  5. With the Project and Pages category open, click the Add New Page icon to open the Add New Page dialog box. Name the new page "page1" and check the box to use the mockup .psd file for the new page.

The mockup file will be copied to the Template project folder and renamed page1.psd. You will also notice that we have page1 listed in the Kwik panel.

As you can see from the Layers panel, we have a new full sized background graphic for page 1 on the bottom layer and 3 buttons layers. We also have a layer called pgTurn to which we will add a page turn animation effect.

Note: At this time, Corona does not support the page turn native to iOS devices. Therefore, we need to fake a page turn with this simple animation. We will tell Kwik to play this animation, along with a small audio file, when each page loads.

Before we can begin working on the individual features for our template, we need to set the basic page and layer properties for this page, as we did before for the cover page. To make it easier to remember all the settings, I have created an easy-to-use check list. Open the New Page Check List in a separate window and follow the steps.

  • Set Page Properties: For the Page Properties, turn off the swipe gesture.

  • Set Layer Properties:

    • For the bg_pg1 layer (bottom background layer), check the box next to Export Image as JPG.

    • For the pgTurn layer, set the layer as a Shared Asset.

    • For the nextbtn and backbtn layers, set these layers as Shared Assets.

      Notice that Kwik has added the "kwk" prefix to the name of each layer that you set as a Shared Asset. Also notice that we are also using the kwkpagesbtn layer. Because we already set this layer as a shared asset on the cover page, we do not need to do that again. We just need to name the layer containing the Pages button the same name as on the cover page - kwkpagesbtn.

    • For the pgTurn layer, set Render As to Do not render so that the page turn graphic will not show in the page thumbnail image.

  • Don't forget to click File - Save from the Photoshop Menubar to save the changes in your .psd file.

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


Add Page+Template+for+Kwik+2+Book+App to Twitter Add Page+Template+for+Kwik+2+Book+App to Facebook Add Page+Template+for+Kwik+2+Book+App to MySpace Add Page+Template+for+Kwik+2+Book+App to Del.icio.us Digg Page+Template+for+Kwik+2+Book+App Add Page+Template+for+Kwik+2+Book+App to Yahoo My Web Add Page+Template+for+Kwik+2+Book+App to Google Bookmarks Add Page+Template+for+Kwik+2+Book+App to Stumbleupon Add Page+Template+for+Kwik+2+Book+App 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