|
Making active buttons
Having static buttons perform actions when clicking on them is all well and good. What if you want your play button to highlight itself when the mouse is over, or to suck itself into the interface when you click on it?
Xion handles all of the mundane tasks for you, giving you an elegant solution for active buttons.
Continuing on from the previous Tutorial we will add a mouse over image for our 'play' button. Create a new layer above the existing 'play' layer and name it 'play_over' as shown in Figure 1.
TIP: Placement of the layer is crucial. This is so that you can have multiple layers with the same function, yet still have independant mouse over and mouse down images.
|
Figure 1
|
Draw a shape onto the new layer.
This will be used to represent our mouse over state. Ensure that you set the visibility of the new layer is set to invisible.
This is to ensure that when the skin first loads, the mouse over image is not displayed. (It is possible to leave it visible, as Xion will hide it, but you will see it fade out)
|
Figure 2
|
If you load your skin into Xion and move your mouse over the play button, you will see it change from the normal image to the over image.
Notice that Xion handles the transition automatically for you, giving you a professional fade between the two layers.
|
Figure 3
|
Now add another layer, but this time below the 'play' button layer and name it 'play_down'.
Draw something on the layer, and once again set the layer visibility to invisible. |
Figure 4
|
When you preview in Xion this time, you will have a mouse over image, and when you click and hold down on the button, you will see the down image as can be seen in Figure 5.
TIP: Creating mouse over and mouse down layers that are roughly the same size as the normal image is advised so as to not confuse the user by changing the button's appearance too much.
|
Figure 5
|
Tutorial Complete!
All done! You've created your first active button and given your skin a real smooth feel.
If you would like to download the PSD file for this Tutorial then click here
There are many ways to expand your skin from here. If you want to just dive in, then you may want to check out the Layer Keyword reference chart
|
 |
|
