Level: My Grandpa can do this one...
Duration: 8-10 minutes

In this tutorial we will learn how to start a new project, use the auto-layout feature, create a series of buttons, create links and finally how to build your applet or Flash file.

Step 1: Start a new project

First you will need to launch the 1 Cool Button Tool application.

You will then be prompted to either Create a New Project or to Open an Existing Project. We are going to start from scratch, so select Create a New Project and when prompted, enter a name for your project. We will be using "menu".

Your new project is a boring gray rectangle right now - so in the next step we will add some colour.

On the general properties tab you will notice a section on the right labeled "Project Background". This is where we can set the background colour for our project or even use an image as the backdrop. Click on the gray colour swap next to "Colour:" - a new dialog will appear allowing you to set the colour of the background.

Lets choose a light yellow - click on the yellow in the middle of the top row of the dialog . Note that by changing the numbers in the RGB edit boxes you can match any colour. Click close.

Now lets add some buttons.

Step 3: Adding buttons

Click the New Text Button in the toolbar - its located just above the tabs.

This will create a new blue text button named Button 1 in the middle of your project. Move Button 1 to the top-left of your project area - just put your mouse over Button 1 and hold down the left mouse button and move your mouse.

OK. Create another two buttons by click the New Text Button a couple of times. You will notice that they have appeared on top of one another (you can probably only see the last button you made Button 3). Now move Button 3 and Button 2 to different areas of window - it doesn't matter where you put them.

Now lets take a quick look at them in action.

Step 4: Previewing your buttons:

During the course of making a project it is convenient to be able to preview your buttons without having to build the applet or Flash file and test it in a browser. That is why we have created the preview system right into the editing window.

To see your buttons in action click on the green Play Button

You can now see how your buttons behave when you put your mouse over them or click them. Test them out - when you have finished, press the red Stop Button.

Now you have got the basics - let make a menu.

The Auto-layout feature makes creating a series of buttons that are all the same size and in perfect sequence easy. So far, we have been using a manual layout mode (which is the default setting). Let change this now - Select Vertical Row of Buttons in the Button Layout section of the General properties tab.

Your buttons have now all lined up - all evenly spaced and all exactly the same size. Lets make them a little smaller. Using the Auto-Layout feature you can easily change the size of all of the buttons in one step.

In the Button Size and Spacing area, change the Width and Height of the buttons to W 100 and H 30. You will need to press Enter after changing the values.

Now add another button by using the New Text Button. Presto - it has joined your layout.

You can change the layout of your buttons simply by select a different option in Button Layout area. Lets say you decided to have a horizontal menu bar instead of a vertical one - just select Horizontal Row of Buttons and see what happens.

Go back to a Vertical Row of Buttons and lets move on to changing the colour of the buttons themselves.

In order to edit the buttons we must select the Button Properties tab - this will give us access to all of the button attributes.

On the left of the panel you will now see a list of all of the buttons in your project. You can use this list to select which button you would like to edit.

Also on the bottom of the panel you will see some more tabs showing the Up State, Mouse Over and Down State for the currently selected button. By select the different button state tabs the editor window will change and display the selected state for all of your buttons - this is a very quick way to check all of your buttons. Try this now - click on the different button state tabs - notice the red used in the over and down states.

Lets change the colour of your buttons.

First lets change the Up State. Select the Up State of Button 1. Do this by selecting Button 1 in the list and the click on the Up State tab. Now click on the blue colour swap on the far right of the tab to bring up the colour selector. Lets choose green (the one located just above black).

In order to make this change to all buttons we can use a handy little tool that copies the Last Change to All Other Buttons . Click this now to change to button Up States to this new colour.

Now for the Mouse Over state. Select the Mouse Over of Button 1 and lets choose a teal colour (the one just to the left of the green we just chose). Now copy the colour to all other buttons using the Copy Last function.

Now for the Down State. Select the Down State of Button 1 - this time we will choose the dark blue under the teal colour.

Now check the text on your buttons using the Play button or cycling through the various Buttons State.

Now lets change the text of your buttons.

Select Button 1 in the button list and select the Up State. By default the name of the button "Button 1" and the text on the button are the same. Lets change the text to "Home". You will notice the Editor window will update immediately. Now select the Mouse Over State - notice that it still says "Button 1". Just like you can have different colours for different button states you can also have different text. For now we will make the text the same on all of the button states for Button 1.

Rather than edit each state we will use the Copy Last Change to other States feature . Go back to the Up State and now select the Copy Last Change to other States. Button 1 will now have "Home" in all of its button states.

Use this technique to change the other buttons. We want four buttons in total with text labels of "Home", "Products", "Services" and "Contact Us". Don't worry about the order they appear in - we will change this next.

If you have too many buttons from going 'button-crazy' during the add button phase, just delete the extras using the delete button or Edit->Cut option.

Check the text on your buttons using the Play button or cycling through the various Buttons States.

Now Lets adjust the button order.

Step 8: Adjusting the button order

When using the Auto-layout feature - you can change the order that buttons appear in the project simply by changing their order in the list. Just use the Move Up and Move Down buttons to rearrange the order in which you buttons appear.

Order your buttons as follows: Home, Products, Services and Contact Us (If they are already in this order, move them around anyway to see how it is done)

Now lets add the a link to a web-page.

Adding links to your buttons is very simple - just select the button and enter a link in the link field. You can use the file chooser to select HTML file. In this case we will just add one link to our web-site to demonstration how it all works.

For the Home button link to our web-site http://www.buttontool.com
Tip: You can copy and paste the link from this page.

Note:
We are using a full URL, you can use relative paths, e-mail links and a host of other format. For a complete list see URL Formatting.

That's it... now lets test your new menu in your browser.

To test the project in your browser you will need to change tabs to either Build Applet or Build Flash depending on your preference. We will start with Java, so select the Build Applet tab.

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.

Simply click the Test Applet in Browser and 1CBT will build your applet, open a browser window and run your applet. If you are connected to the Internet you will be able to visit our site by clicking on the home button.

Try testing your project as a Flash file as well - notice the difference in the text? All Flash files have automatically smoothed text as a built-in feature.

Well done. You have completed the first tutorial. Why not have a quick break and go on to the next tutorial?

Tutorial 2: Adding Sound and Animation