Overview
This “Little Bits” tutorial will show you how to use the same SVG file to add a mouse-over effect with a different colour.
Note: this tutorial was built in Pano2VR Tour Builder Version: 7.0.9. You can download the software here. As “Little Bits” tutorials don’t go into detail about Pano2VR operations a working knowledge of Pano2VR is an advantage.
Final Output
Tutorial Files
The tutorial folder, SVG_ALT_COLOUR, has an Asset Folder with an SVG file called ‘info.svg’ and the green-grid.jpg file. Figure #16: Rectangle Element Exposed color names. There is also a Pano2VR project 'starting_point.p2vr', a skin 'starting_point.ggsk’ and an output folder ‘starting_point’ with project files created from the .p2vr .ggsk and .svg files (Figure #1)
Figure #1: SVG_ALT_COLOUR Tutorial Folder
Project Overview
In this tutorial, we will modify the starting_point.ggsk skin by;
Adding the info.svg to the Mouse Over: option.
Adding an alternate colour to the Mouse Over option while maintaining the Normal colour.
Exposing colours for the button bg and icon so alternate versions can be easily generated.
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Download the zipped tutorial folder here
2. Unzip the tutorial folder
3. Open the starting_point.p2vr project (Figure #2)
Figure #2: starting_point.p2vr project window
4. Click on Output > Output > Open Output icon to view the starting point project
Note: it should look and work like the example below. When you mouse-over the orange button the button background changes but the info icon stays the same colour.
As the icon colour and the background mouse over colour are the same the icon appears to disappear.
5. Click on Output > Skin > Edit Skin icon to view the starting point skin (Figure #3)
Figure #3: Starting-Point skin
Note: The skin contains a rectangle element ‘info_button’ and the ‘info_svg’ is a child of the rectangle element.
Adding the Mouse Over SVG
1. With the edit skin window active, click on the info_svg element to make it active
2. In the Properties panel, open the SVG Image dropdown (figure #4)
Figure #4: SVG Image properties
3. Click on the Mouse Over: ‘Change’ button and from the tutorial folder > assets folder select the info.svg and then click open (figure #5)
Figure #5: Add the Mouse Over svg
Note: this will show the icon for the mouse over (figure #6)
Figure #6: Mouse Over svg icon
Assigning Colours
Note; In the next step we want the Normal colour to remain the same hex value, #825500 and the Mouse Over colour to change to #ffaa00
1. With the info_svg element still selected, click on the Color Tool in the main menu to open the Change Colors window (figure #7)
Figure #7: Change Colors window
2, Double Click on the ‘New Color’ swatch and in the HTML field, type or paste in the mouse-over hex color #ffaa00 (figure #8)
Figure #8 Add in the Mouse Over color
3. Select ‘OK’ to change the color (figure #10)
Figure #10: New Color set
4. Select ‘Apply’ to confirm the color change
Note: applying this change, changes both the Mouse Over and the Normal svg to hex color #ffaa00 (figure #11)
Figure #11: Both states showing the same color
Note: to restore the Normal color we will reload the Normal svg
5. Click on the Normal: ‘Change’ button, and from the tutorial folder > assets folder, select the info.svg and then click open
Note: now we have the two states displaying alternate colors and we can see the normal state visible over our button bg (figure #12)
Figure #12: Alternate colors
6. Save and close the skin
7. Republish the project to see the final output
Exposing the Colors
Note: to make it easier to change element colors for new tours we will expose the 4 colors in our project. The colors are:
info_button normal state
info_button mouse over state
info_svg normal state
info_svg mouse over state
1. Open the skin
2. Select the info_button element and click on the Color Tool in the main menu to open the Change Colors window (figure #13)
Figure #13: Change Colors window
Note: I’ve expanded each of the Original Color swatches to show the actual elements that the swatch is assigned to.
3. Right-click on the ‘Rectangle Element Background’ and from the menu, select ‘Expose Color As . New…’ (figure #14)
Figure #14: Expose as a new color
4, In the Expose Color window type in the words Button Background and check the ‘With Aplha’ option (figure #15)
Figure #15: Expose Color name and options
5. Select ‘OK’ to confirm the exposed color name and option
6. Repeat with the ‘Rectangle Element Background Logic Block’ using the text, Button Background Mo (figure #16)
Figure #16: Rectangle Element Exposed color names
7. Click on ‘Apply’ to apply the exposed names
8. Repeat with the icon_svg element using the names Button Icon and Button Icon Mo
Note; in this case the combined Normal and Mouse Over icons have the same name ‘Svg Element Fill’ so you have to use the colors to distinguish between them. (figure #17)
Figure #17: SVG Element Exposed color names
9. Select ‘Apply’
10, Save and Close the skin
11. Click on the ‘Edit Skin Configuration’ button to open the ‘Edit Skin Configuration’ window (figure #18)
Figure #18: Edit Skin Configuration window with exposed colors
12. Change the colors and alpha values to the following and select ‘OK’;
info_button normal state
info_button mouse over state
info_svg normal state
info_svg mouse over state
13. Republish the project to see the update color values
Summary
I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.
