Play Sound with Button in Kwik 2

Play Sound with Button in Kwik 2
In the last tutorial, we used the Rotation Widget in Kwik to animate four bats to swing from a branch of a tree. Each bat was on its own layer and was animated independently. This was a nice effect but it doesn't have much interactivity. It would be better if the reader could click on a bat and hear a bat sound.

To add this interactivity, we will need to add an action to each bat layer (bat1_pg10 - bat4_pg10) that will play a bat sound. Of course, we could use a different sound file for each bat but to keep things simple and to save memory usage, we will use the same mp3 sound file for all four bats. Our first step is to import the sound file into the page. Then we can add the actions to the bat layers.

Open your project in to Photoshop.

  1. Select page10 from the list of pages in the Kwik panel. You should see "@ page10" at the top of the Page/Components section.

  2. Select the Project and Pages icon in the Categories bar.

  3. Select the Add Audio tool in the Toolset.

  4. In the Add Audio dialog box, use the Browse button to locate the bat sound file.

  5. As with the page flip sound file, we will set this to be a Short File so that it will be loaded into memory immediately. Check this box.

  6. We don't want the sound to be able to play simultaneously, in case the reader clicks on more than one bat at a time. Uncheck this box.

  7. This is not a Read Me file so uncheck this box.

  8. We don't want the sound to play unless the reader clicks on a bat. So uncheck the box for Play when page loads.

  9. This file will only be played on page 10 for the bat animation. So uncheck the box for Play on all pages.

  10. We want the sound to play only once each time the bat is clicked. So set the Loop to 1 Time with 0 Delay.

  11. As you can see, Kwik has assigned the paper flip sound to the first sound channel. Leave the number 2 in the box so that Kwik will assign this sound file to the second sound channel and click Save.

  12. You should see the new sound file listed in the Components list for page10.

Now we can add the action to each bat layer that will play the sound when clicked.

With the bat1_pg10 layer selected, let's add the action to the first bat.

  1. Select the Interactions icon in the Categories bar.

  2. Click on the Add Button tool in the Toolset.

  3. In the Add Button dialog box, rename the button action to "bat1btn".

  4. Keep the Default and Over states set to the bat1_pg10 layer.

  5. In the Interactions list, expand the Audio section and choose Play Audio.

  6. You will now see the Play Audio dialog box. Use the drop-down list to choose the bat mp3 file and click Create.

    Back to the Add Button dialog box, we can see that the Play Audio action has been added.

  7. Click Create.

Repeat these steps for the other three bat layers. You only need to import the sound file once. When you add a button action to each bat layer, name the buttons bat2btn, bat3btn and bat4btn respectively.

With the Export Current Page Only icon selected, click the Preview button to test your app in the simulator.

Go to your LearnKwik folder and make a backup copy of the Template project folder. Rename the backup folder by adding the current date to the end. (TemplateMM-DD-YY).

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