Build a Custom Controller

A controller is a collection of buttons within the skin that allow the user to control (rotate, zoom, move left, etc.) the object.

For a custom controller, you can build your own buttons or use some of the ones provided by fellow users.

Build a custom controller

1. In the toolbar, select Button.
   
2. Drag the button images onto the Editor Canvas.
   
   ◊ NOTE: When dropping multiple images at the same time onto the canvas, they will be stacked on top of one another. Click in the canvas to unselect any button, and then click on each image to move it.
3. Prepare the canvas (optional): Change the Grid size:
   1. Deselect any elements in the tree.
   2. In the Properties section, Canvas panel, adjust the Grid size to 10 pixels.
4. Prepare the canvas (optional): Set the Zoom to 200%.
   
5. Next, move the buttons into an arrangement in the canvas.
   ◊ TIP: Use snapping to help align the elements. Go to View > Snap to Guides.
   
6. Once they are arranged, you might find it handy to be able to move them all at once. This is the Container‘s job. Draw a Container around all the buttons:
   1. Select the Container button in the Toolbar.
      
   2. In the canvas, draw around the buttons, until all have a red border.
      
      The tree will have a container with all the buttons a child of it.
      
      Select the container in the tree and then move the buttons in the canvas and it will move the buttons as one.
7. Anchor the Container to the bottom center of the window (or wherever you plan for your buttons to be positioned on the skin):
   1. With the Container selected in the Tree, open on Position panel in the Properties section.
   2. Select the Anchor position.
      
8. Add a second button state (or more).
9. Add the appropriate action to each button image:
   1. Select a button in the Tree or Editor.
   2. In the Properties section, click on Actions.
   3. Double-click or click on the plus to the right of the table, to open the Action Settings.
      
   4. For a Tilt Down button, Choose Mouse Click for the Source and Tilt Down for the Action. Click, OK, when finished.
   5. Repeat this process for each button.
10. Test the skin with the Live Preview.
11. Finally, click Close and save the skin (to the Skins Directory).

Button States

Buttons can have different states that animate a button (or make it obvious that it is clickable). In general, the normal state is how the button looks without any interaction. The Mouse Over state is how the button will look when the mouse hovers over it. The Selected state is what the button looks like when it has been selected.

To have all of these states, you will need 3 versions of the button that vary slightly from each other (or they could be completely different…it’s your design!)

Each state is represented by a different color so you know in which state you are working:

• Normal: Red
• Mouse Over: Blue
• Selected: Green

The default state is Normal; buttons are automatically assigned the Normal state on import.

To add another state to a button:

1. Choose which state you would like to work in from the State menu in the Toolbar.
   ◊ TIP: Be sure the image is a button, to see the states. If the image is not a button, you can convert it in the Image panel.
   
2. Add the additional state by doing one one of the following:
   • Drag the button images intended for the specified state onto the already existing button images in the Editor.
   • In the Image panel in the Properties, select, Change…, and choose the button image.
     

The new state will be added to the Tree:

Learn more

• Edit an Existing Skin
• Add Sounds to Buttons

See also

The Interface (Skin Editor)
Using the Skin Editor

Previous: Add a Clickable Logo

Next: Build a Simple Loading Bar