Skin Editor Toolbar
The toolbar is found at the top of the skin editor window and holds all the tools needed for adding elements in the editor, zooming in to the canvas and accessing additional tools.
To add an element from the Toolbar, select the tool and then click in the Canvas. Depending on the tool, a dialog may pop up to open a desired file.
Select
Selecting Cursor – Use this button to select and move elements.
Basic
The following buttons are the basic editing tools.
Draw Container – A container is an invisible element that allows you to group elements together in the tree or in the editor.
Draw Rectangle – Draws a rectangle shape.
Draw Text Field – Draws a text box.
Images
The following buttons are for adding images and buttons.
Add Image – Insert an image to your skin with this button.
Add Button – Insert a button to your skin.
Add Scalable Vector Graphic – Add a scalable vector graphic.
Add Lottie Animation – Add a lottie animation.
Add PDF – Add a PDF to the skin.
Add external image – Add an external image to your skin. Click to add and then click in the Canvas to open a window to choose the image.
Add Node Image – Click to add a thumbnail of a tour node.
Advanced
The following buttons are more advanced actions, like adding scroll areas, timers, node markers and maps.
Scroll Area – A scroll area is a container that will add scroll bars around an element or group of elements. It can also be used to clip content.
Add Cloner – Click to add a Cloner to the project.
Add a Timer –- Add a timer to the project. Great for hiding things after a specified time.
Add Hotspot Template – Use this button to add a hotspot template.
Add Node Marker – Use this button to add a node marker.
Add a Map – Select this button and then click in the canvas to add a Map element.
Add a Video – Select this button and then click and drag in the canvas to add a Video element.
Add a Seekbar – Add a seekbar to the skin (to a video, sound, etc.). Click or click and drag in the canvas to add it.
Add a Code Element – Add Javascript to the skin using the Code Element.
Undo – Click to perform an undo or click and hold to see a history. To return to a previous state in the history, click on the undo button again. Click and hold to bring up a history panel. Click on a previous state to return to it.
Zoom – Zoom in to the canvas up to 400%.
Tools
Live Preview – Click to show a real-time preview of the skin of how it will look and function within a browser. Press and hold to get a selection of predefined screen sizes. Note that not all elements or actions will be able to fully function in the preview.
- Preview as mobile – Select this option to have the Live Preview simulate a mobile browser. This is useful for any actions or logic blocks that use Has Touch or Is Mobile.
Color Tool – Use this tool to change colors of the entire skin or a selection of elements.
Components Toolbox – This is a collection of pre-defined and user-defined skin elements.
✭ When the Skin Editor’s window is greatly reduced in size, the Tools will hide but can be accessed from the small menu button in the Toolbar or from the Tools menu.
