Level: Beginner
Duration: 8-10 minutes

In this tutorial we will learn how to add sound and animation to our simple menu created in tutorial 1. If you did not complete tutorial 1 - you can just load the tutorial-menu.1cb as a starting point.

Launch the 1 Cool Button Tool application and Open an Existing Project called tutorial-menu.1cb (this project is where we ended in Tutorial 1). If you are continuing on from tutorial 1 just skip this step.

The first thing we will do is add some sounds.

We need to select the button that we want to add sound to - click on the Button Properties tab to give us access to the button attributes and then select Button 4 in the list. (Alternatively you can select the button by clicking on it in the editor window).

You can add sound to any of the button states - Up State, Mouse Over and Down State. We will add it to the Mouse Over state - select that tab now. You will now see all of the buttons in the editor window displayed in their Mouse Over state - a teal colour.

To add a sound, just click on the file browser next to the sound dialog and choose a sound from the audio folder. Lets use hello.au

Note:
You can select WAV, AU and MP3 audio files - AU files are used in applets and MP3s are used in Flash files. If you select a WAV file it will be converted into both an AU and MP3 for your convenience. See also Button Sounds

That's it. Let see your new sound in action. Click the Play button to preview.

OK. Let add another sound to the Down State of Button 4. Select the the Down State tab and add baa0.au. Click the Play button to preview.

Lets now add some animation.

Before we start adding animation it would be good to change the names of our buttons from Button 1,2 3, and 4 to something more meaningful. Button names are used when we want to perform actions or animation - they are the way the program knows which button you are talking about.

Lets make them similar to the button text. First lets change Button 1 to home - to do this simply select Button 1 and edit the name and press Enter. You will see the name update in the button list area.

Change the other buttons as follows:
Button 2 to products
Button 3 to services
Button 4 to contact

It will now be much more obvious which button we are referring to when setting up the animation as you will see next.

We are going to make an animation that moves the contact button down the screen each time the products button is pressed.

First we will need to add some space to our project. Select the General Properties tab - note that while we are in an auto-layout mode (either Vertical Column or Horizontal Row of Buttons) the Project Size cannot be altered. We will need to change modes by selecting Specify Size and Position of Each Button.

Now you can edit the project size. Change the Height: to 350 pixel and press Enter. You can also change the project size by adjusting the window size of the editor window directly using the mouse.

Now lets make some animation.

Go back to the Button Properties tab and click the More Options buttons which gives us access to the Action dialog.

Next we need to select the button that will trigger the action - the products button. Now we select the trigger type - in this case it will be when product is in the down state - this is an On Button Down event. Select On Button Down using the drop-down menu. Next we need to define what will happen when products is pressed.

To do that we will use the Action dialog - click to bring up the Action dialog

Since we want to move the contact button select Move from the Action: drop-down menu.

Next we will define what button Move is to be applied to - in the Apply to: drop-down is a list of button names in your project - select contact.

Last of all we need to define where we will move the contact button to.

This is described using x and y coordinates. We can define an exact position to move to such as 10,100 (which means 10 pixels across and 100 pixels down from the top-left hand corner of the editor window). We can also define an amount to move by such as move an extra 50 pixels down from where you are - this is what we want to do.

Note:
The way we differentiate between absolute and relative movement is that all relative movement has a + (or -) after the amount. See also: Actions - Move

In order to move the contact button down 50 pixels we just add: 0+, 50+ to the dialog. We must also say how many frames we want to use. The more frames we use - the slower the animation will be. Lets use 200.

So the bottom dialog should read 0+, 50+, 200. This means move 0 pixels to the right and 50 pixels down over 200 frames. Click OK.

Your action will be added to the Action edit box. Once you get use to actions and how they work you can add or edit them directly into this edit box without using the dialog.

OK. Lets see that how it looks. Press Play to preview.
Press products a few times to see contact disappear off the window. Pressing Stop will bring all buttons back to their original position.

Now lets add an animation to bring contact back to its original position when services in pressed.

You will notice that the x,y position of any button is displayed when you have More Options selected. Select some of your buttons to see what their current x,y position is. In order to move the contacts button back to its original position we need to take note of what the original x,y coordinates are. The contacts button's original position is: 4, 106. We will use this information in a moment.

Select the services button. Select On Button Down in the Action drop-down menu and bring up the Action dialog.

Select action: Move and Apply to: contact

This time we will move the contact button to an absolute position - the button's original x,y position - 4,106. Enter this in the dialog - 4, 106, 400. Click OK.

OK. Lets see that how looks. Press Play to preview - press products and few times to see contact disappear off the window. Now press services.

That is all there is to it.

To top it off lets add a sound that plays as the button moves.

Select the Down State of the products button and add the sound named fart.au. Sorry, we couldn't resist using it in this demo ;)

Select the Down State of the services button and add the sound named laugh.au

Press Play to preview.

If you like you can add sounds to all your buttons. Remember you can add sounds to any of all of the button states.

To test the project in your browser you will need to change tabs to Build Applet

This is where you can select the folder in which 1CBT puts all the necessary files for you to add the applet to your web page. It also shows you the generated HTML code that you will need to paste into your own HTML page and the size that the applet will be.

For now, simply click the Test Applet in Browser and 1CBT will build your applet, open a browser window and run your applet.

Well done. You have completed this tutorial.

To learn how to add a project to an HTML file and upload it to your web-sever go on to one of the following tutorials.

Tutorial 3: Uploading a Java applet

Tutorial 4: Uploading a Flash file