Kwik Book App Cover Page Buttons - Digital Art and Design

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.

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

|