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:

Part One: Adding a Controller and Image

Part Two: Creating a Controller and Adding Actions

Building a Loading Bar with Text

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.

1 The Skin Editor
2 Element Editor
- 2.1 Settings Tab
- 2.2 Actions/Modifiers Tab
3 See also

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.

Actions/Modifiers Tab

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

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.