Skin Editor Menu Bar

The menu bar is found at the top of the program's window in Windows and Linux or at the top of the screen in Mac OS. This is the menu bar for the Skin Editor only.

File

• New – Opens a new skin document and will close any previously opened skin
  document. If it has not been saved, you’ll be asked to save it before it
  closes.

• Open – Open an existing skin.

• Save – Save the current skin.

• Save as… – Save the current skin with a different name/location.

• Recent Files – Open recent skin projects.

• New Window – Opens a new Skin Editor window and allows for multiple skin
  documents to be opened at a time.

• Close Window – Closes the Skin Editor.

Edit

• Undo – Undo an action.

• Redo – Redo an action.

• Cut – Remove an element.

• Copy – Copy an element.

• Paste – Paste an element.

• Find… – Open the
  Search for the skin.

• Find Element – Open the search to find the selected element.

• Rename Element – Open the search to rename the selected element.

• Find Warnings… – Opens the search and locates any warnings that may occur
  in the skin.

• Lock in Canvas – Lock the selected element(s) in the
  Canvas. Once an element is locked it cannot be
  accidentally moved or altered in the Canvas. It can, however, be cut, copied,
  pasted, rearranged within the Tree and its Properties can be modified.

• Reveal in Tree – The selected element will be revealed in the
  Tree. The Tree will expand all parent elements of the
  current element and – if needed – will scroll to show the current element.

• Expand Element – This will open the expanded view of the element. It is
  available for elements like, Scroll Area
  and Cloner. In the expanded view you can edit
  the encompassed elements.

• Align Elements – Align the selected elements. The elements will be
  aligned to the active element.

• Distribute Elements – Distribute the selected elements (3 or more). This
  will evenly distribute the elements.

• Center Elements in Canvas – Centers the selected elements in the Canvas.
  You can center the elements both horizontally and vertically.

• Create Component from Skin – This will save the current skin’s elements
  as a Component
  in the components toolbox.

• Create Component from Selection – This will save only the currently
  selected elements as a component. When updating a component, prevent preview
  image from being overwritten with Alt-Click or Option-click when choosing this
  option.

• Select All – Select all the elements.

• Deselect – Deselect the elements.

Elements

For all elements, select them from the menu and then click in the
Canvas to add the element.

• Select – This activates the Select tool.

• Container – Adds a container to
  the skin. Draw the container around elements in the Canvas or just click
  within the Canvas to add a default container.

• Rectangle – Adds a rectangle to the skin with a default size of 100
  pixels x 20 pixels. Click in the Canvas to add or drag to draw the Rectangle.

• Text – Adds a text field to the skin with a default size of 100 pixels x
  20 pixels. Click in the Canvas to add or drag to draw the Text box.

• Image – Choose to import an image (or images) to the skin. Click within
  the Canvas to open a dialog. Choose the image and click, Open.

• Button – Choose to import a button (or buttons) to the skin. Click in the
  Canvas to open a dialog. Choose the button and click, Open.

• SVG – Choose to import an SVG file (or
  more) to the skin. Click in the Canvas to open a dialog. Choose the image and
  click, Open.

• Lottie Animation – Adds a
  lottie animation to the skin. Choose one from
  the dialog.

• PDF – Add a PDF file to the skin. After
  selecting this option, click in the canvas and then navigate to the PDF file
  in the dialog.

• External – Adds an externally located image/URL to the skin. Click in the
  Canvas to add a default sized image or drag to draw desired size.

• Node Image – This will add a place holder for a node preview image. Click
  in the Canvas to add.

• Scroll Area – Adds a scroll area with a default size of 100 pixels x 20
  pixels. Click in the Canvas to add or drag to draw the area.

• Cloner – Adds a Cloner to the skin.

• Timer – Adds a Timer to the Canvas. Click
  in the Canvas to add or drag to draw the area.

• Hotspot Template – Adds a
  hotspot template to the skin. Click in the Canvas to add.

• Marker – Adds a node marker to the
  skin. Click within the Canvas to add.

• Map – Adds a map to the skin.

• Video – Adds a video element to the skin.

• Seekbar – Adds a seekbar to the skin.

• Code Element – Adds a code element to the
  skin.

• Add Sound… – This will add a sound file to the skin. A dialog window will
  open. Choose the audio file and click, Open. You can edit its properties in
  the Properties section to the right.

Tools

• Live Preview – Opens Live Preview.

• Color Tool – Opens the
  Color Tool.

• Components Toolbox – Opens the
  Components Toolbox.

• Reload Linked Images – Click to refresh any linked images, buttons, or
  SVGs. Hold Shift and click to remove the external file reference from the
  selected element or if nothing is selected, from the entire skin.

View

• Zoom In – Zoom in to the Canvas.

• Zoom Out – Zoom out of the Canvas.

• Zoom Fit – This will bring the whole Canvas in to view.

• Zoom 100% – Zooms to 100% of the Canvas’ size.

• Show Off-Canvas Elements – If you have any elements that are placed
  beyond the Canvas’ border, you can choose this option to view them.

• Snap to Grid – Select to turn on snapping of the elements to the Canvas’
  grid.

• Snap to Guides – Select to turn on snapping to the guides. The guides for
  the elements will appear as bright green lines. Horizontal and vertical center
  guides are yellow.

• Toggle Toolbar – Shows or Hides the Skin’s
  Toolbar.

• Detach/Reattach Tree View – This will detach the Tree from the main Skin
  Editor window and will be a floating window.

• Detach/Reattach Properties View – This will detach the Properties from
  the main Skin Editor window and will be a floating window.

• Toggle Properties View – Show or hide the Properties.

• Toggle Properties View and Tree View – Show or hide both the Properties
  and Tree, leaving only the Canvas in view.

• Compact Tree View – Select to compact the Tree.

• Properties Solo Mode – Select to
  show only one panel in the Properties section at a time.

• Show Actions – Use this shortcut to quickly open the Actions panel in the
  Properties section.

• Show Modifiers – Use this shortcut to quickly open the Modifiers panel in
  the Properties section.

• Live Update on Save Only – Select this option to only update Live Update
  when the skin is saved. When this is not selected, Live Update will refresh
  after every change. If you’re making a lot of changes and/or have a large
  project, constantly updating can slow development of the project.

• Bring Main Window Forward – Quickly get back to the main project window
  by choosing this or use the keyboard shortcut, Ctrl-Alt-K (win) or Cmd-Opt-K
  (macOS).

• State – Choose the Canvas’ button state. Any button that has been added to
  the Normal state will have a red selection border, the mouse over state will
  be blue and the selected state will be green.

• Live Preview – Opens a preview window showing real-time changes to the
  skin and how the skin will look and function in a browser.

See also…

• Skin Editor

• Skin Editor Canvas

• Skin Editor

• Skin Editor Properties