In this tutorial we will take a look at how to create your own, custom buttons in Yooba Studio.
- Start by adding a button to the scene. Click on "Add, Objects, Button" in the toolbar:
- The button will appear on the scene, allready selected:
- In the settings panel for the button, click on the "Change Style..." button:
- This will bring up the "Component Styles" dialog. There are many pre-defined styles to choose from, and you can easily change colors, fonts etc.
For custom buttons, scroll down and select the style called "Custom Skin", as shown in this figure:
The button will now look like this on the scene:
- Continue by clicking the "Change Skin..." button in the panel:
- This will bring up the "Button Skin Settings" dialog. In this dialog you specify which images to use for the your button. A custom button have three states: UP (normal), OVER (mouse cursor is over the button) and DOWN (mouse button is pressed), and you can specify a different image for each of these states. If you like, you can use the same image for more than one state. Click each "Select..." button to choose an image from the Library to use.
You can also specify a "Scale Grid" for the button. As shown in the figure above, only the area inside of the green grid will be scaled when the button is resized. This can be very useful when you have a buttons with a border that you don't want to affect by scaling the button. The grid is specified by setting the values for each respective side, left, right, top and bottom.
You can skip this part for now if you like, it's not neccessary for the button to work.
You can test the button directly in this dialog by simply clicking on it. After you have selected images for each state, click the "Close" button.
- The button will now show the image selected for the UP state:
Test-run the project by clicking "Preview" in the Toolbar and try out your new, custom button out!
I hope you enjoyed this tutorial, see you again next time!
Tags: yooba studio, studio, buttons, custom, tutorial, step-by-step