Adding Pages to Kwik Book App Template

Now that we have our template completed, we can quickly add the other pages to the book app. Once we have all the pages added, it will be a good time to test our project in the Corona Simulator.

Let's add the second page to our app.

From the Kwik panel, click the Open Project icon to open your project.
Both the cover and page1 psd files will open into Photoshop.

We are going to use the page1.psd file as our template. It contains the navigational buttons, the page flip animation and the page flip sound.
In the Page/Components section of the Kwik panel, select page1. You should see "@ page1" at the top of the section.
In the Kwik panel, click on the Project and Pages icon in the Categories bar.
Then click on the Add New Page icon to start a new page.
In the New Page dialog box, give the new page a name such as "page2".
Check the box for Use page1.psd.
Check the box for Copy content from page1.
Click OK. You will see the page1.psd file renamed to page2.psd. This indicates that you now have a psd file for page2 in the project folder.

You will also see 003 page2 listed in the Pages/Components section ( Switch to Pages View) of the Kwik panel. If you click on the Switch to Components View icon, you will see that our new page has all the components from the template.

back_pg
next_pg
paper.mp3
pg_turn
tog_nav
Open the mockup for page 2 of our app into Photoshop.
From the Menubar, click Select - All.
With the bottom layer in the Layers panel selected, click Edit - Copy to copy the layer contents to the clipboard.
Go back to the new page2.psd file and select the bottom layer.
From the Menubar, click Select - All. Then click Edit - Clear to remove the contents from the bottom layer.
Rename the bottom layer to "bg_pg2".
Click Edit - Paste to paste the new background graphic on to the bottom layer of page2.psd.

Now that we have renamed the bottom layer, Kwik will treat this layer as a new layer separate from the bg_pg1 layer. We need to set the layer property to tell Kwik to export this layer as a jpg.
With the bottom layer still selected, click the Layers and Replacements icon in the Categories bar.
Now, click the Layer Properties icon in the first row of tools.
In the Layer Properties dialog box, check the box for Export image as jpg.
Click File - Save to save the changes to the new page2 psd file.

That's all it takes to add a new page. Repeat these steps to add each page to your app. Always begin with page1.psd selected as the active file in the Kwik panel (should see "@ page1" at the top of the Pages/Components section) so that Kwik will copy the contents of the template to each new page.

Once all your pages are added, click the Publish button in the Kwik panel to test the project in the Corona simulator.

If all goes well, we are ready to add some animation and interactivity to our book app. But first, we should make a back up copy of our project folder, just in case we run in to any problems going foward. There are version tracking systems out there and some have all the bells and whistles. This is my low tech version. It doesn't cost anything.

Inside your LearnKwik folder is your Template project folder.
Right click and choose Copy from the menu.
You will get a new folder named Template Copy. Let's rename the folder to "TemplateAllPgs". This will tell us that this folder contains a working copy of our project saved at the point where all pages where added to the book app.

From this point on, we will make a back up copy of our project folder after each step. If we run into any problems, we won't distroy all of our hard work. We can simply delete the current Template project folder, make a copy of the latest backup folder and rename that folder "Template".

Note: Do not try to work with any back up folders in Kwik. Always make a copy of the latest folder and use that backup folder as your working folder. In this way, if you run into trouble with the next step in building your book app, you also have the original.

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

|