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.

Select the layer containing the Default state button graphic (kwkbackbtn).
Select the Interactions icon in the Category row.
Select the Add Button tool in the next row to open the dialog box.
Kwik generates a name for the button but we will rename this button "back_pg".
Default State: Layer kwkbackbtn

The graphic on the kwkbackbtn layer will be the Default state for our button.
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.

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.
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.
Wait: We have the option to delay the switch to the next page. Keep the default of 0 seconds.
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.
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.
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.

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

|