Toolbar and Menu Bar | Skin Editor | Object2VR

Object2VR – Help

Toolbar

The toolbar is found at the top of the editor window and holds all the tools needed for adding and moving elements in the editor, zooming into the canvas and turning on Live Preview.

To add an element, do one of the following:

  • Click on a tool in the toolbar and then click in the editor. The new element is added to the top of the tree.
  • Drop an image into the editor (canvas). The element is added to the top of the tree.
  • In the menu, go to Elements and choose the element type, then click in the editor. The new element is added to the top of the tree.
Selecting Cursor
Select4.png
Use this button to select the elements.
Draw Container
Container4.png
A container is an invisible element that allows you to group elements together in the tree or in the editor.
Draw Rectangle
Rectangle4.png
Draws a rectangle shape.
Draw Text Field
Text4.png
Draws a text box.
Add Image
Add image4.png
Insert an image to your skin with this button.
Add Button
Add button4.png
Insert a button to your skin.
Add Scalable Vector Graphic
Skin svg4.png
Add a scalable vector graphic.
Add Flash SWF element
Skin swf4.png
This button lets you add a local SWF file to your skin.
Add external image or SWF
Skin external4.png
This button lets you add an external image or SWF file to your skin.
Add Hotspot Template
Hotspot4.png
Use this button to add a hotspot template. (NOTE: This button is only available for Pano2VR. Object2VR does not support hotspot templates.)
Add Node Marker
Skin marker4.png
Use this button to add a node marker. Pano2VR only.
Undo
Undo4.png
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
Zoom4.png
Zoom in to the canvas up to 400%.
State
State4.png
Click to select the current state of the skin.
Normal: Appearance when nothing is done.
Mouse Over: Appearance when mouse hovers over the image/object.
Selected: Appearance when clicked.
Live Preview
Livepreview4.png
Click to show a real-time preview of the skin of how it will look and function within a browser.

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.

Edit Menu

  • Undo: Undo an action.
  • Redo: Redo an action.
  • Cut: Remove an element.
  • Copy: Copy an element.
  • Paste: Paste an element.
  • Lock in Editor: Lock the selected element in the Editor. Once an element is locked it cannot be accidentally moved, altered in the Editor. It can, however, be cut, copied, pasted, rearranged within the Tree and its Properties can be modified.
  • Align Elements: Align the selected elements. The element will be aligned to the active element.
  • Distribute Elements: Distribute the selected elements (3 or more). This will evenly distribute the elements, starting with the active element.
  • Select All: Select all the elements.
  • Deselect: Deselect the elements.

Elements menu

  • Select: This selects the Select tool.
  • Container: Adds a container to the skin. Draw the container around elements in the Editor or just click within the Editor to add a default container.
  • Rectangle: Adds a rectangle to the skin with a default size of 100×20. Click in the Editor to add or drag to draw the Rectangle.
  • Text: Adds a text field to the skin with a default size of 100×20. Click in the Editor to add or drag to draw the Text box.
  • Image: Choose to import an image (or images) to the skin. Click within the Editor to open a dialog. Choose the image and click, Open.
  • Button: Choose to import a button (or buttons) to the skin. Click within the Editor to open a dialog. Choose the button and click, Open.
  • SVG: Choose to import an SVG file (or more) to the skin. Click within the Editor to open a dialog. Choose the image and click, Open.
  • SWF: Choose to import a SWF file (or more) to the skin. Click within the Editor to open a dialog. Choose the image and click, Open.
  • External: Adds an externally located image/URL to the skin. Click within the Editor to add a default sized image or drag to draw desired size.
  • Hotspot: Adds a hotspot template to the skin. Click within the Editor to add.
  • Marker: Adds a node marker to the skin. Click within the Editor to add.
  • 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.
  • Add Default Loading Bar: Adds the default loading bar to the skin.

View menu

  • Zoom In: Zoom in to the canvas/Editor.
  • Zoom Out: Zoom out of the canvas/Editor.
  • 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.
    ◊ TIP: Temporarily turn on (or off) guide and grid snapping by holding the Control (Win/Lin) or Command (Mac) key.
    ◊ NOTE: When moving a group of elements, the active element will be snapping.
  • 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.
  • State: Select the state to add buttons.
  • 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 – Interface
Using the Skin Editor
Tree (Skin Editor)
Editor (Skin Editor)
Properties (Skin Editor)
All tutorials for the Skin Editor

Previous: PropertiesNext: The Basic Skin Workflow