Pano2VR - Skin Editor
From GardenGnomeSoftware
Contents |
[edit] Using the Skin Editor
With Pano2VR you can add a skin and a movie controller to your flash movie. You access the skin editor via the flash movie settings by choosing "Edit" in the Skin/Controller panel or by going to Tools > Skin Editor in the menu bar.
Watch a tutorial on using the skin editor:
Find skins created by Pano2VR users here.
[edit] 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 and function wehn nothing is done
- Mouse Over: appearance and function when mouse hovers over the image/object
- Selected: appearance and function when clicked
[edit] Editor Window
This is where all your elements (images, objects) are placed and arranged. Consider it your workspace for designing your skin.
[edit] Editor Panel
ID: You can give each object a 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.
[edit] Tree
This is where your button elements and any other elements you will use in your skin will be 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 togther 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.
[edit] Element Editor
To edit any element, simply double click on it either in the Editor or the Tree. When you do this, a new screen will appear giving you customization tools and action tools. Depending on which element is to be edited, parameters associated with that element will appear.
For example, a rectangle's editor will include a parameter for it's size, height, and border.
When editing a button, you can change the buttons image, it's over and selected states, or remove them entirely.
When editing text, a text field will appear in the editor.
The following appear across all types of elements.
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 same field is also visible (and editable) in the Editor Panel.
Scaling: Scales the element along the x and y axis. 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.
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.
Action: In order for an object to act as a button, it needs to have a function or action applied to it. You can choose up to 3 different actions, or functions, for the selected object.
- 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, when a user clicks on that button and holds down the mouse button, the panorama will pan left.
Depending on which action is chosen, different parameters that are associate 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 in the top right corner.
Modifier: 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)
To add more modifiers, click the Add Modifier button in the top right corner.
[edit] Skin Editor Panel
This panel is found in the Flash parameters screen.
Skin: Here you can choose either one of the pre-installed skins or choose one that you have created. The file extension used for the skins is .ggsk.
External Controller: Use this dropdown menu to choose a controller if you're exporting to Flash 8. (Flash 8 must be selected in the Output section for this option to be enabled.)
[edit] How To
Add more than one state to a button:
- If you want your buttons to visually show that they are "clickable", you can add a slightly different version of your buttons to represent another state.
- To add an "Over" state, choose which state you would like to work in from the State drop-down menu. Then drag and drop the buttons images intended for the specified state onto the already existing button images in the Editor.
- You will notice that the buttons with a second state will be outlined by a green line; this indicates a second state.
- Another indication of a second state is the added button image in the Tree.
