Skin Editor Tree
The Tree supports a parent-child layering organization. An element treated as a parent will have a child or children that is/are "connected" to it, making it easier to group the elements and move them together in the canvas. The layering of the elements is like Photoshop; the top-most element is the front-most layer.
Each element in the Tree has a context menu. Right-click to open the context menu:
- Copy – Copy the element.
- Cut – Cut the element.
- Hide in Canvas – Keep the element from being visible in the Canvas. Note this does not hide the element on output.
- Lock in Canvas – Lock the element in place in the Canvas.
- Reveal in Canvas – Find the element in the Canvas.
- Find Element Usage… – Finds all aspects in which the element is being used throughout the skin.
- Rename Element… – Opens the skin search to rename the element.
- Assign Color – Assign the element a color for easier navigation in the Tree.
- Delete All Actions – This removes all the actions that have been added to the element.
- Create Component from Selection – This will create a component of the selected elements in the Tree.
Do one of the following to add an element:
Click on a tool in the toolbar and then click in the Canvas. The new element is added to the top of the tree.
Drop an element (sound, image, button) into the Editor (canvas). The element is added to the top of the tree.
In the menubar, go to Elements and choose the element type, then click in the canvas. The new element is added to the top of the tree.
Each new element is automatically added to the top of the tree. Rearrange the elements by dragging them within the tree.
To make an element which is a child of another element a top level element in the Tree, do one of the following:
Drag the element between two top level elements, wait for a thick black line to appear, and drop the element.
Drag the element to the top of the Tree, wait for a thick black line to appear, and drop the element.
Drag the element to the bottom of the Tree, wait for a thick black line to appear, and drop the element.
Make an element a child of another element by doing one of the following:
Drag an element onto another element. The element will be indented under its parent element with a disclosure triangle to show and hide it in the Tree.
Right-click an element, choose cut or copy. Right-click the parent or top level element and choose Paste Element.
Select elements in the Tree by doing one of the following:
Click the first/active element, hold Shift and click the last element (Mac and PC) to select a range.
Control-click [win] – to select individually
Command-click [macos] – to select individually
To hide elements in the Canvas do any of the following:
Click the eye icon to the left of the element to hide it in the canvas.
★ Note: To make an element invisible in the output you must deselect Visible in it’s properties.
Right-click on the element or group of elements and choose, Hide in Canvas.
Press Command-H or Control-H to hide the selected element(s).
Select a group of elements and click the eye icon to show or hide in the Canvas.
To lock an element do any of the following:
Alt-click on the eye icon to the left of the element.
Right-click on the element or group of elements and choose, Lock in Canvas.
Press Command-L or Control-L to lock the selected element(s).
To edit an element:
- Right-click on any element to Cut, Copy, Paste and Lock the element.
To edit an element’s title:
- Double-click it’s title to make it editable.
To condense the Tree, do any of the following:
Collapse the elements that are grouped by clicking the disclosure triangle to the left.
Use Compact Tree Mode, found in the View menu to condense the tree.
Add sound files by doing one of the following:
Drag the sound file to the empty area of the tree.
Right-click in the empty area and choose Add Sound.
In the menu, choose Elements > Add Sound….
When zoomed in to the Canvas, it can be hard to find specific elements in the skin. To more easily navigate to an element, right-click on it in the Tree and choose, Reveal in Canvas
Warning symbols will be visible in the tree next to an element. Hover the mouse over it to see the warning.