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

Kidney Disease
Today in History
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


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.

  1. From the Kwik panel, click the Open Project icon to open your project.

  2. 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.

  3. In the Page/Components section of the Kwik panel, select page1. You should see "@ page1" at the top of the section.

  4. In the Kwik panel, click on the Project and Pages icon in the Categories bar.

  5. Then click on the Add New Page icon to start a new page.

  6. In the New Page dialog box, give the new page a name such as "page2".

  7. Check the box for Use page1.psd.

  8. Check the box for Copy content from page1.

  9. 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.


  10. Open the mockup for page 2 of our app into Photoshop.

  11. From the Menubar, click Select - All.

  12. With the bottom layer in the Layers panel selected, click Edit - Copy to copy the layer contents to the clipboard.

  13. Go back to the new page2.psd file and select the bottom layer.

  14. From the Menubar, click Select - All. Then click Edit - Clear to remove the contents from the bottom layer.

  15. Rename the bottom layer to "bg_pg2".

  16. 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.

  17. With the bottom layer still selected, click the Layers and Replacements icon in the Categories bar.

  18. Now, click the Layer Properties icon in the first row of tools.

  19. In the Layer Properties dialog box, check the box for Export image as jpg.

  20. 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.

  1. Inside your LearnKwik folder is your Template project folder.

  2. Right click and choose Copy from the menu.

  3. 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.


Add Adding+Pages+to+Kwik+Book+App+Template to Twitter Add Adding+Pages+to+Kwik+Book+App+Template to Facebook Add Adding+Pages+to+Kwik+Book+App+Template to MySpace Add Adding+Pages+to+Kwik+Book+App+Template to Del.icio.us Digg Adding+Pages+to+Kwik+Book+App+Template Add Adding+Pages+to+Kwik+Book+App+Template to Yahoo My Web Add Adding+Pages+to+Kwik+Book+App+Template to Google Bookmarks Add Adding+Pages+to+Kwik+Book+App+Template to Stumbleupon Add Adding+Pages+to+Kwik+Book+App+Template 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
Moodboards for Web Designers lynda.com

Fixed Layout eBook Options

Calendar Wizard for InDesign

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor