Overview
This “Little Bits” tutorial show you how to use a Variable to set an active state and style for a text button.
Note: this tutorial is designed for Pano2VR V6.1.2 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
In the tutorial folder, Hover_Button_Variables, there is an Asset Folder with an equirectangular image. There is also a Project folder with a Pano2VR project hbv.p2vr', a skin 'hbv.ggsk' and an Output Folder called 'hover_button_variables' with project files created from the .p2vr and .ggsk elements. (Figure #1)
Figure #1: Tutorial Folder
Project Overview
In this tutorial we will modify the hbv.p2vr project file and the hbv.ggsk skin by;
Adding a Variable
Adding Logic Blocks
Note: this tutorial assumes a basic knowledge of Pano2VR V6
Note: click on any image in the tutorial to enlarge it
Getting Started
1. Download the zipped tutorial folder here
2. Open the project file ‘hbv.p2vr’ (Figure #2)
3. Click on the Output / Output: / ‘Open Output’ button to view the current state of the project (see below)
CSS File
The CSS file enables the fonts and buttons used in the project. The first part of the css file defines the @font-face styles for local fonts and defines classes for project use (Figure #2)
Figure #2: @font-face and classes
The rest of the css file defines classes for the buttons.
.button styles the basic button
.button1 styles the button to be white with black type using the font-family Gotham Book.
.button1:hover is the style of the button when the mouse is over the button. In this case blue with white type Gotham Black
.button2 is the style of the button when the Mouse Click action has occurred (Figure #3)
Figure #3: button classes
Note: for more information on using Local Fonts and CSS I have a comprehensive tutorial, Styling Text with CSS and Local Fonts - V6.
Adding the Variable
Note: The first step is to create the Variable that defines the state of the buttons. In order to target a specific button we will use a Type ‘Text’ a value that we can change as required.
1. Open the skin
2. In Properties add a new Variable with the settings: Name = click_status | Type = text | Initial Value = leave blank (Figure #4)
Figure #4: click_status Variable
Setting up the Buttons
Note: in order to change the CSS class from “button button1” to “button button2” we need to define the new class in a Logic Block
1. Select the ‘txt_button_penguin’ element to make it active
2. Open the Text dropdown menu to display the current Text: value
3. Click on the Logic Block button to open the Logic Block Settings window
4. Set the following; Trigger: *clickstatus | Comparison: = | Value: penguin
5. Change the Text: from button1 to button2
6. Select ‘OK’ (Figure #5)
Figure #5: Text Logic Block for the Penquin button
7. Repeat the same process for ‘txt_button_sea_lion’ element using the value sealion
8. Save the Skin
Add Actions to change the Variable
Note: in order to change the Variable value we need to add Actions to each button.
1. Select the ‘txt_button_penguin’ element to make it active
2. Open the Action dropdown menu
3. Double Click in a blank cell of the Action panel to open the Action Setting window
4. Set the following; Source: Mouse Click | Action: Set Variable Value | Variable Name: clickstatus | Operation: Set(=) | Value: penguin
5. Select ‘OK’ (Figure #6)
Figure #6: Mouse Click action applied to Variable
7. Repeat the same process for ‘txt_button_sea_lion’ element using the value: sealion"
8. Select the ‘txt_variable_satus’ element to make it active
9. Open the Text dropdown menu
10. Click on the ‘Insert Placeholder’ button and select ‘Variable clickstatus: $(*clickstatus)’ from the dropdown menu under Variables (Figure #7)
Figure #7: Adding Variable output to text box
11. Save the Skin
12. Re-output the project (see below)
Integrate the Images
Note: the advantage of using a Variable is that other elements, in the skin, can use the Variable to work together .
In this example we want the images, when clicked, to activate the appropriate button to display the selected style. The images will have a default alpha of 0.250, a mouse over alpha of 0.750 and a mouse click alpha of 1.000
1. Select the ‘ext_penguin’ element to make it active
2. Open the Action dropdown menu
3. Double Click in a blank cell of the Action panel to open the Action Setting window
4. Set the following; Source: Mouse Click | Action: Set Variable Value | Variable Name: clickstatus | Operation: Set(=) | Value: penguin
5. Select ‘OK’ (Figure #6)
Figure #6: Mouse Click Action on penguin image
6. Open the Appearance dropdown menu
7. Change the Alpha value to 0.250
8. Click on the Alpha Logic Block button to open the Logic Block Settings window
Note: For the Mouse Over setting we only want it to occur if the Variable clickstatus value isn’t penguin. So we will set our logic to test for that state.
9. Set the following on the first line of the Expression
Trigger: Mouse Over | Comparison: = | Value: true
On the second line set the following:
Trigger: *click_status | Comparison: ≠ | Value: penguin
and Alpha: 0.750
Note: make sure the Operation on line 1 is set to ‘And’
10. Add a new Expression field by clicking on the ‘+ add expression’ button
11. Set the following on the first line of the Expression;
Trigger: *click_status | Comparison: = | Value: penguin
and Alpha: 1.000
12. Select ‘OK’ (Figure #7)
Figure #7: Alpha Logic Block
13. Repeat steps 1 - 12 for the ‘ext_sea_lion’ element
14. Save the skin
15. Re-output the project
Activate the Close Button & Screen Tint
Note: the last task is to add actions to the ‘svg_reset' and ‘rect_screen_tint’ elements that reset the Variable.
1. Select the ‘svg_reset’ element to make it active
2. Open the Action dropdown menu
3. Double Click in a blank cell of the Action panel to open the Action Setting window
4. Set the following; Source: Mouse Click | Action: Set Variable Value | Variable Name: clickstatus | Operation: Set(=) | Value:
5. Select ‘OK’ (Figure #8)
Figure #8: Mouse Click action for svg_reset
6. Repeat steps 1 - 5 for the ‘rect_screen_tint’ element
7. Save the skin
8. Re output the project
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.
