Skip to main content

Skin Editor 1

Legacy document. A new version of the Skin Editor was released in Pano2VR 4.5. See the updated documentation.


In both Pano2VR and Object2VR you can add a skin and a movie controller to your Flash and/or HTML5 outputs.

You access the skin editor via the Flash or HTML5 output settings and clicking Edit in the Skin/Controller panel. You can also access the skin editor by going to Tools > Skin Editor in the menu bar.

This page will introduce you to the interface of the skin editor. To learn how to build a skin, check out Using the Skin Editor, where you will learn the basic skin workflow plus some tips.

There are also many skins that have been created by Pano2VR users on the forums.

◊ NOTE: Pano2VR 4.5 beta1 features a brand new skin editor with a new workflow and interface.

The Skin Editor[edit]

The Skin Editor

View[edit]

Window Width & Height: This will adjust the Editor window's width and height, measured in pixels.

Grid: Adjusts the Editor's grid and aids in placement of the objects by snapping them the grid.

Zoom: Zoom in to the Editor window.

State: This determines which button state you are currently working in. Choose from:

Editor Window[edit]

This is where all your elements (images, objects, buttons) are placed and arranged. Consider it your workspace for designing your skin. The following tools are available to help your skin design:

Selecting Cursor
Select.png
Use this button to select the elements.
Draw Container Container.png A container is an invisible element that allows you to group elements together in the tree or in the editor.
Draw Rectangle
Rectangle.png
Draws a rectangle shape.
Draw Text Field
Text.png
Draws a text box.
Add Image
Add image.png
Insert an image to your skin with this button.
Add Button
Add button.png
Insert a button to your skin.
Add Scalable Vector Graphic
Skin svg.png
Add a scalable vector graphic.
Add Flash SWF element
Skin swf.png
This button lets you add a local SWF file to your skin.
Add External image or SWF
Skin external.png
This button lets you add an external image or SWF file to your skin.
Add Hotspot Template
Hotspot.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 marker.png
Use this button to add a node marker.


Editor Panel[edit]

(This is the panel directly below the Editor Window.)

ID: You can give each element an ID or name.

Position: The x and y coordinates for the selected object.

Anchor: Depending on which part of the Anchor's grid you choose, the Anchor will determine where the skin will "stick" relative to the movie window. For example, if you click (choose) the bottom center section of the grid, your controller or image, etc., will always be on the bottom center of the movie.

Tree[edit]

This is where all your skin elements are organized.

The tree supports a parent-child organization. An element treated as a parent will have a child(ren) that is "connected" to it, making it easier to group the elements and move them together in the Editor window.

To make an object a parent, drag that object to top of the tree until a thick black lines appears. Select the buttons to be children and drag and drop them onto the parent object.

The tree icons:

Sounds: Sounds is the parent container for sound files you add to the skin editor window.


Element Editor[edit]

To edit any element, simply double-click on it either in the Editor or the Tree. When you do this, a new window will appear giving you customization and action tools.

Settings Tab[edit]

Depending on which element is to be edited, parameters associated with that element will appear.

For example, a rectangle's properties window will include a parameter for its size, height, and border.

Actions/Modifiers Tab[edit]

In order for an object to act as a button, it needs to have a function or action applied to it.

The Element Editor: Actions/Modifiers Tab

Actions Panel

Go to, Skin Actions, for details on all actions.

Depending on which action is chosen, different parameters that are associated with that action will appear. For example, for the pan actions, you can define the pan speed.


Modifiers Panel Adding modifiers allows you to make objects move, scale or rotate when the movie is being is panned, tilted, zoomed or loaded. A good example of a use of a modifier is for a loading bar that scales in relation to how much of the movie has been loaded. (See the skin editor tutorial on building a loading bar for an example on using modifiers.)

Go to, Skin Modifiers, for more details on all modifiers.

See also[edit]

Using the Skin Editor
Skin Sources
Skin Actions
Skin Modifiers
Skin Editor beta

Categories