Using the Skin Editor 1
Legacy document. A new version of the Skin Editor was released in Pano2VR 4.5 and Object2VR 3.0. See the updated documentation.
A skin is added to a Flash movie to make the movie interactive. You can add images, buttons, and sound to the skin editor.
This page will explain the basic workflow and usage of the Skin Editor through a series of tutorials.
For a detailed explanation of the Skin Editor's interface, please visit this page.
◊ NOTE: In Windows, the skin editor will be associated with the last product installed. Clicking on a .ggsk file will open the skin editor in either Object2VR or Pano2VR depending which was last to be installed. To change priority reinstall the desired product.
◊ TIP: If you are building a multi-node tour (a virtual tour with more than one location), and do not have the pro version, then the skin must be in the first, opening panorama only.
- 1 Add a custom skin to your project
- 2 Edit a default skin or custom skin
- 3 Add a clickable logo to a skin
- 4 Building a custom controller
- 5 Build a loading bar with text
- 6 Add more than one state to a button
- 7 Copy skin elements from one skin to another
- 8 Adding sound to the skin
- 9 See also
Add a custom skin to your project
- In the Flash or HTML5 output settings, go to the Skin/Controller section and choose a skin from the menu.
- If you do not want to continue to edit the skin, then you are finished. Output your movie and test the skin. If you would like to edit your skin continue reading.
Edit a default skin or custom skin
- Go to Tools in the Menu Bar and choose, Skin Editor. This will open an empty Skin Editor.
- In the Menu Bar for the Skin Editor, go to File > Open. This will open the Skins directory.
Choose a skin of your choice, and then click Open. This will add the skin to the Skin Editor.
- Next, choose File > Save As from the menu bar and save your skin with new name. Make sure it is saved to the Skins directory.
- Make your changes. (See the following sections for specific instruction on how to make certain changes.)
- When you are finished, save the skin.
You can now choose your edited skin in the Skin/Controller section of the Flash parameters for future use.
Add a clickable logo to a skin
- Open a pre-installed, custom, or empty skin via the Menu Bar or Flash parameters.
- Import the logo or image either by:
- Place your image within the Editor Window by dragging. For example, in the upper right corner.
- Anchor your image to the correct location. In our example we have anchored it to the upper right corner.
- To make it clickable and direct the user to a website, you need to add an action to it. Double click on the image in the Editor Window or Tree. This will bring up the Image Settings window.
- In the Image Settings, go to the Actions/Modifiers Tab.
- In the Actions section, choose Mouse Click as the Source and for the Action, choose Go To URL.
- Enter the full web address (for example, http://www.example.com) in the Url field.
- Click OK to return to the Skin Editor. Click OK again to exit the Skin Editor. Object2VR will ask if you want to save your changes. Choose, Yes. If needed, give your skin a name and save it.
- Output your movie and test the skin. Your image should be clickable.
- ◊ TIP: In the Flash Parameters, choose None for Scaling if you do not want the movie to scale to the window size, and to keep your logo within the movie window rather than floating with the browser window.
Building a custom controller
For information on button states, please read this article.
- To start, drag your button images into the Editor Window. You can select multiple and drag them all at once. If you do this, they will be piled on top of one another. Just click on each button to move it.
You'll be asked if they should be created as buttons or images. Choose Button.
- Adjust the Grid and Zoom level if you like.
- Try increasing the Grid to snap at every 10-20 pixels.
- Try a zoom level of 200%.
- Next, drag your buttons into an arrangement.
- Once they are arranged, you might find it handy to be able to move them all at once. This is the Container's job. Draw a Container (container button image here) around all the buttons.
- Next, add all the buttons that are part of the controller, as children of the Container by selecting them and dragging them on top of the Container. So your tree looks like this:
- Now, when you move the Container in the Editor Window, your buttons should move with it.
- Anchor the Container to the bottom center of the window (or wherever you plan for your buttons to be positioned on the skin).
- Add a second button state (or more).
- Add the appropriate action to each button image.
- Double-click on the the button image either in the editor window or the tree to bring up the element editor.
- In the Actions tab, Choose Mouse Click for the Source, and then choose the appropriate Action. If a button has an arrow pointing left, the action would be Pan Left.
- Repeat this process for each button.
- Finally, click OK and you'll be asked if you want to save the skin. Choose, Yes and give it a name and make sure to save it in the Skins Directory.
- Output your movie and test your skin!
Build a loading bar with text
Part 1: Building the loading bar
- Open an empty Skin Editor or working in an existing project, choose Edit in the Skin/Controller section of the Flash Parameters to open an empty Skin Editor.
- Use the Rectangle Tool to draw a long, thin rectangle (this is your loading bar).
Make any further size adjustments to the rectangle by dragging on the edges of the shape.
◊ TIP: Draw the rectangle to the desired full length of the loading bar.
- Next, double-click on the rectangle in the Editor Window or in the Tree to bring up the element parameters.
- To have your loading bar scale from left to right, change the Scaling's Center position to center-left:
If you leave the Scaling Center setting to the center, the bar will scale out to both the left and right.
- Choose a background and border color if you like.
- If you want the loading bar to be partially transparent, change the Alpha value to something less than 1.000.
- Next, in the Actions/Modifiers section, create an action to hide the loading bar when loading is done.
- For the Source, choose Loaded and Hide Element as the Action.
- In the Target field, leave the default value which is $self.
- To have the loading bar move, or scale, in relation to how much of the movie has been loaded, create a Modifier: Choose Scale X for the Target Value. This will make the rectangle expand (or move) along its X-axis.
- Choose Loading as the Source Value. This will cause the rectangle to animate in relation to loading time.
- To have the bar scale to its current length, keep the Factor at 1.000.
- If you want the rectangle to scale to twice its original size, for example, change the Factor to 2.000.
- If your loading object must be visible from the beginning, increase the Offset. For example, if you want a portion of the loading bar to visible, choose an Offset of 1.
Part 2: Adding text
- Back in the Editor Window, Click the Text tool button, .
- Draw a text box in the Editor Window. Position it and size it accordingly.
- Next, double-click on the text box in the Editor Window or in the Tree to bring up the element parameters.
- Give it an ID if you wish. This is especially helpful if you have multiple text boxes and need to quickly distinguish between them.
- Type your text into the Text field, for example Loading.
- ◊ TIP: You can use basic HTML tags here.
- ◊ TIP: Use
$p, to represent the percentage of how much the movie has loaded.
- Adjust the text color, text alignment, background and border colors if you like.
- Add an action to hide the text after the movie is finished loading. In the Actions/Modifiers tab, choose Loaded as the Source and Hide Element as the Action.
- Next, draw a Container, , around the elements (the loading bar and the loading text box).
- In the tree, make the elements children of the Container.
- Anchor the Container to the area of the window you wish.
- Anchor the elements to the Container. The top left is a good start.
- Click OK and save your skin.
- Add your skin to a Flash movie, output that movie, and finally, test your skin.
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.
Choose which state you would like to work in from the State drop-down menu. Then drag button 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.
Copy skin elements from one skin to another
You can copy all skin elements from one skin to another. When you do this, all the actions, parameters, etc. will copy as well:
- In an open Skin Editor, select the element to be copied and choose, Edit > Copy from the menu bar. (Or use the keyboard shortcuts: Windows: Ctrl + C; Mac: Cmd + C)
- Next, open either a new skin or an existing skin by going to File > New to open a new skin or File > Open to choose an existing skin, in the menu bar. With the new skin open, paste the element in the Editor by using the menu bar: Edit > Paste or use the shortcuts: Windows: Ctrl + V; Mac: Cmd + V.
Adding sound to the skin
You can use the skin editor to add sounds to your panorama in just a few steps:
- Find your MP3 audio file and drag it into the Editor Window.
You will see it appear in the Tree under the Sounds parent.
- Double-click on the sound in the tree to change its overall volume level or looping number.
- Open the settings for the button or image that will trigger sound (double-click on the element) and go to the Actions/Modifiers tab.
- Add the following Action:
Source => Mouse Click; Action => Play Sound; Target: Choose the sound file (its ID) you just added from the drop-down menu.
- Output your project and test your movie!
Basic three state button in Photoshop
Using the Skin Editor
Pano2VR - Knowledge base - Skin Editor Actions, Hide, Show and Alpha not working properly