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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


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


Content copyright © 2014 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
Getting Started Photoshop Elements by TeachUcomp

Scalloped Circle and Illustrator Shape Builder

Honeycomb Xmas Ornament SVG Cut Design

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 © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor