Pano2VR - Skin Editor
From Garden Gnome Software
Contents |
About the Skin Editor
In both Pano2VR and Object2VR you can add a skin and a movie controller to your Flash movie. You access the skin editor via the Flash output settings by choosing Edit in the Skin/Controller panel or 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 tutorials:
Also check out the article, 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.
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:
| Select |  | Use this button to select the elements. |
| Container | 
| A container is an invisible element that allows you to group elements together in the tree or in the editor. |
| Rectangle |  | Draws a rectangle shape. |
| Text |  | Draws a text box. |
| Add Image |  | Insert an image to your skin with this button. |
| Add Button |  | Insert a button to your skin. |
| Add Hotspot Template |  | Use this button to add a hotspot template. |
Editor Panel
(This is the panel directly below the Editor Window.)
ID: You can give each object 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:
- Size: Adjust the rectangles size (width and height) in pixels.
- Angle: Use this parameter to adjust the angle of the element.
- Background: Choose, Enable to show the background of the rectangle. Click on the square next to Color to choose a color for the background.
- Border: Define the width of the border in pixels and choose a color for the border.
When editing a button, you can change the button's image, its over and selected states, or remove them entirely:
- Angle: Use this parameter to adjust the angle of the element.
- Image: This is the Normal state image of the button. Click Change to replace the button image.
- Over-State: This is the image for the Over state. Click Change to replace the image or Remove to remove it completely.
- Selected-State: This is the selected state image. If no image appears, it means no image has been selected for this state. Click Change to replace the image or Remove to remove it completely.
- Download: Select Export to first frame. to have the button on the first frame of the movie.
When editing text, a text field will appear in the window.
- Size: Adjust the width and height of the text box.
- Angle: Use this parameter to adjust the angle of the element.
- Text: Add your text for the text box here. HTML tags can be used.
- Color: Change the color of the text
- Align: Align the text within the box to the left, right, or center.
- Word Wrap: When selected, will wrap the text to the next line.
- Auto Size: Select this to automatically size the box around the text.
- Evaluate: Select this if JavaScript is being used in the text box above. This is useful for calling up any information found within your project.
The image properties window will give you the ability to change the current image.
- Image: This shows the current image. Clicking Change will let you pick another image.
- Download: Select Export to first frame. to have the image on the first frame of the movie.
- Format: Choose the format of the image.
A sound file's property window lets you change the audio level of the sound and how many times it should repeat.
- Level: Adjust the level of the sound. 1.000 represents 100 percent amplitude.
- Loop: Enter the number of times the sound file should loop or repeat.
- Download: Select Export to first frame. to have the sound on the first frame of the movie.
The following appear across all types of elements in the Settings Tab:
ID: You can give each object a ID or name. This same field is also visible (and editable) in the Editor Panel.
Position: The x and y coordinates for the selected object. This field is also visible (and editable) in the Editor Panel.
- Anchor: Use this grid to "stick" the element to a section of the movie window. This is also the same anchor grid as in Editor Panel.
Scaling: Scales the element along the x and y axes. Doubling the value on either axis, for instance, will double the size of the element. If a scaling modifier is enabled, this scaling setting is ignored.
- Center: Use this grid to determine how the element scales. The default is set to the center so the element will scale in or out from its center. If you anchor the scaling to the upper left corner, for example, the scaling will center from this point.
Visible: Set the visibility of the element and it's opacity. An Alpha of 1.000 is opaque. Lowering this number will increase the element's transparency.
- Select Hand Cursor to have the hand cursor show when the mouse rolls over the element. This makes it more obvious to the user that the area or element is interactive.
Hotspot Proxy ID: Enter the corresponding hotspot ID. The ID should come from the hotspot's ID field in the hotspot editor. Using hotspot proxies gives you the ability to link skin elements to specific hotspots. (See part six of the hotspot tutorial for more information.)
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.
See Skin Actions for details on all available 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.
To add more actions, click the Add Action button in the top right corner.
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.)
- 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.
To add more modifiers, click the Add Modifier button in the top right corner of the panel.