Skin Editor
From Garden Gnome Software
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 you can watch the following tutorials:
Also 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.
Contents |
The Skin Editor
View
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:
- Normal: appearance when nothing is done
- Mouse Over: appearance when mouse hovers over the image/object
- Selected: appearance when clicked
- Test: use this option to test the appearance of both the Mouse Over and Selected states.
Editor Window
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 
Use this button to select the elements. 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. 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 Flash SWF element * 
This button lets you add a local SWF file to your skin. Add External image or SWF * 
This button lets you add an external image or SWF file to your skin. Add Hotspot Template 
Use this button to add a hotspot template. (NOTE: This button is only available for Pano2VR. Object2VR does not support hotspot templates.)
- (* Pano2VR version 3 only)
Editor Panel
(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
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:
- Clicking on the disclosure box will open
or close 
the parent view.
- The pen symbol will show
or hide 
your element(s).
Sounds: Sounds is the parent container for sound files you add to the skin editor window.
Element Editor
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
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.
- Rectangle Element Properties
- Text Element Properties
- Image Element Properties
- Button Element Properties
- SWF File Properties
- SVG Image Properties
- External Image Properties
- Hotspot template properties
- Sound Element Properties
Actions/Modifiers Tab
In order for an object to act as a button, it needs to have a function or action applied to it.
Actions Panel
- Source: Choose what event will cause the action to occur.
- Action: Choose what will happen when the event occurs. For instance, if Pressed and Pan Left are chosen for a button's action, and a user clicks on that button and holds down the mouse button, the panorama will pan left.
- Go to, Skin Actions, for details on all actions.
- Add Action: Click to add more 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.)
- Target Value: Choose from the menu how the object will be modified. The element can be modified to Rotate, and Scale and Move along the X and Y axes.
- Source Value: Choose what causes the selected Target Value. For example, if you had a radar image, you would want that image to move in relation to the panning movement of the movie. Therefore, you would set the Target Value as Rotate and the Source Value as Pan.
- Factor: Set the level of the Target Value. For example, if the loading bar should only scale to its original size, the Factor should be set to 1. If the the loading bar should scale to twice its size, the Factor should be set to 2.
- Offset: Set from where the Source Value begins. An offset of 0 means it starts from it's original position. Or, in the case of Scaling, an offset of 1, for example, will start the scaling later so a portion of the loading bar is seen from the beginning of the load time.
- Add Modifier: Click to add more modifiers.
Go to, Skin Modifiers, for more details on all modifiers.