Play Sound with Button in Kwik 2 - Digital Art and Design

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.

Select page10 from the list of pages in the Kwik panel. You should see "@ page10" at the top of the Page/Components section.
Select the Project and Pages icon in the Categories bar.
Select the Add Audio tool in the Toolset.
In the Add Audio dialog box, use the Browse button to locate the bat sound file.
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.
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.
This is not a Read Me file so uncheck this box.
We don't want the sound to play unless the reader clicks on a bat. So uncheck the box for Play when page loads.
This file will only be played on page 10 for the bat animation. So uncheck the box for Play on all pages.
We want the sound to play only once each time the bat is clicked. So set the Loop to 1 Time with 0 Delay.
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.
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.

Select the Interactions icon in the Categories bar.
Click on the Add Button tool in the Toolset.
In the Add Button dialog box, rename the button action to "bat1btn".
Keep the Default and Over states set to the bat1_pg10 layer.
In the Interactions list, expand the Audio section and choose Play Audio.
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.
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).

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

|