Add Buttons To Page Template Kwik Book App

Add Buttons To Page Template Kwik Book App
In our example book app page template, we are using non-rollover buttons. When adding buttons to your Kwik project, we placed each button on its own layer, giving you 3 layers for 3 button. Let's set the actions for these buttons that tell the app what page to display when the button is clicked. We will start with the Back button. When we "program" the Back button, Kwik will ask us to choose which layer to use for the two rollover button states, Default and Over. In our example, we will use the kwkbackbtn layer for both states.

Open your project into Photoshop and select page1 from the list of pages in the Kwik panel. In the Page/Components section of the Kwik panel, you should see "@ page1" at the top of the section.

  1. Select the layer containing the Default state button graphic (kwkbackbtn).

  2. Select the Interactions icon in the Category row.

  3. Select the Add Button tool in the next row to open the dialog box.

  4. Kwik generates a name for the button but we will rename this button "back_pg".

  5. Default State: Layer kwkbackbtn

    The graphic on the kwkbackbtn layer will be the Default state for our button.

  6. Over State: Layer kwkbackbtn

    The graphic on the kwkbackbtn layer will be the Over state for our button.

In the Properties section and the Interactions panel of the dialog box, we have several categories. Click the arrow to expand the Common category list.

  1. This button's action will be to go to another page. Therefore our best choice is to use the Go to Page option.

    When selecting this option from the list, we get a small pop-up dialog box. In the Go to Page dialog box we have several options.

  2. Page Transition: We have several choices in the drop-down list. Because we are creating our own page turn animation, lets choose None from this list. If you don't want to use the page turn animation, the Over from Right is a good choice.

  3. Wait: We have the option to delay the switch to the next page. Keep the default of 0 seconds.

  4. Select Page: We do not want to send the reader to a specific page number. We just want to move to whatever is the previous page. We will use the Previous (auto) option.

  5. Click Create to go back to the Add Button dialog box.

    Now, you will see the Go to Page action listed in the Actions panel.

  6. Click Create to finalize the button.

We can confirm that our button was added to the page by selecting the Switch to Components View icon (above the list of pages). There you will see that we have one button, named back_pg, added to our page. You can tell that we have added a button action by the icon to the left of the back_pg name. The icon looks like the Add Button icon in the Toolset bar.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Kwik product, the Kwik logo and Kwiksher are properties of - Copyright 2011. Screen shots used by permission.

These tutorials are for the older version of Kwik 2 and may not be much help when using Kwik 3 and above. If you are having trouble, please use the Kwik forum.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2023 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.