Page Template for Kwik 2 Book App - Digital Art and Design

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.

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.
Close the cover.psd file.
Open your mockup .psd file into Photoshop.
The mockup file for your first page should be the only file open in the workspace.
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.

|