Kwik Book App Cover Page Buttons

Kwik Book App Cover Page Buttons
This is a continuation of the last tutorial where we added our first button to the template.

We can now repeat these steps for the Next button.

  • Select the kwknextbtn layer.

  • Select the Add Button tool to open the dialog box.

  • Name this button "next_pg".

  • We will set the Default and Over states to the kwknextbtn layer.

  • Set Transition to None.

  • When setting the Go to Page action, choose Next (auto) for the Select Page option. This will take us to whatever is the next page.

Repeat these steps for the Pages button which toggles the nav menu. Notice that we have named the Pages button layer to "kwkpagesbtn", because we have already set this layer as a shared asset. To tell Kwik that this is another instance of that same shared asset, we only need to name the layer with the same name "kwkpagesbtn".

  • Select the kwkpagesbtn layer.

  • Select the Add Button tool to open the dialog box.

  • Name this button "tog_nav" for toggle the nav open and closed.

  • We will set the Default and Over states to the kwkpagesbtn layer.

  • In the Commons Action list is the Show/Hide Nav action. Notice that we do not have a pop-up dialog box for setting the target page, because this will open and close (toggle) the navigational menu.

  • Click on this to add the action to this button.



Set Buttons On Cover Page

Now that we have a page1, we can set the Enter and Pages button on the cover page to open the book to page 1 or show the navigational menu.

In the Page/Components section of the Kwik panel, click the Switch to Pages View icon to show the list of pages.

Select the cover page for the list. You should see "@ cover" at the top of the section.

Repeat the steps for the Enter button on the cover page.

  • Select the enterbtn layer.

  • Select the Add Button tool to open the dialog box.

  • Name this button "enter_bk".

  • We will set the Default and Over states to the enterbtn layer.

  • Set Transition to None.

  • When setting the Go to Page action, choose the page1 for the Select Page option. This will take us to the first page of our book.

Repeat the process above for the Pages button on the cover. We have already set this layer as a shared asset. Now we will "program" this layer to toggle the nav menu, as we did for the page1 template.

  • Select the kwkpagesbtn layer.

  • Select the Add Button tool to open the dialog box.

  • Name this button "tog_nav" for toggle the nav open and closed.

  • We will set the Default and Over states to the kwkpagesbtn layer.

  • In the Commons Action list is the Show/Hide Nav action.

  • Click on this to add the action to this button.

Upgrade Note: With the upgrage to Kwik 2.1, we can now copy/paste the button interactions and other components from own page to another. In order to keep this tutorial to a reasonable length, we will cover how to use the copy/paste feature in a future tutorial.

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 Kwiksher.com - 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.





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





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