Overview
This tutorial expands on the ‘Background Sound Playing across Specific Nodes’ tutorial and adds a volume control component and a pause button.
Note: In order to follow this tutorial you must complete the original tutorial that is linked above
The following are step-by-step instructions on how to add a Component to your library and then use it in a skin and a pause button that will pause the sound in a node with the ‘sound’ tag and restart it again. At the end of the tutorial the final output will be the same as the example below.
Final Output
Project Overview
In this tutorial we will modify the final ‘bg_sound_nodes.p2vr’ project and skin from the ‘Background Sound Playing across Specific Nodes’ tutorial by;
Creating a volume control component
Creating a Pause/Play component
Add and position the components in the skin
Configuring both components to work within a specified range of tagged nodes
Note: this tutorial assumes a basic knowledge of Pano2VR V6 beta or Pano2VR V5 and uses elements from these versions within the application
FYI: click on any of the tutorial images to enlarge them
Create a Volume Control Component
Note: for the Volume Control component we can download one from the Pano2VR forum and add it to our Component Toolbox.
1. Start by downloading the ‘Volume Component’ from the Component section of the forum. You can download one or both styles, for this tutorial I’m going to download the Simplex style by clicking on the ‘simplex_volume_control.ggsk’ link. (Figure #1)
Figure #1: Download link for the Volume Component
Note: Hopki has produced a video that provides an indepth look at using the component. It’s not a requirement that you watch it to finish this tutorial but I’d recommend it.
Note: When you click on the download link you are prompted to save the .ggskc file. I’m saving mine in the ‘assets folder’ from the original project. (Figure #2)
Figure #2: Saving the .ggskc file into the assets folder
2. The next step is to add it to our ‘Component Toolbox’. Double click on the ‘simplex_volume_control.ggskc’ file that you have just downloaded. (Figure #3)
Figure #3: Double click on the .ggskc file to load it
3. This will open the ‘Copy Component into Category’ window. From the dropdown window select ‘New…’ and click on ‘OK’ (Figure #4)
Figure #4: Select ‘New…’ category
4. Give the Category a title e.g. ‘Sound across Nodes’ and click on ‘OK’ (Figure #5)
Figure #5: Create category title
Note: You will see a notification window stating that the component was successfully copied. Click on ‘OK' (Figure #6).
Create a Pause/Play Component
Note: for the Pause/Play component we need an icon with an arrow symbol and an icon with a pause symbol. In this case we will locate and use the icons contained within the Simplex V6 or V5 skin and add them to our component toolbox
1. If it’s not already open then open the final ‘bg_sound_nodes.p2vr’ project from the ‘Background Sound Playing across Specific Nodes’ tutorial (Figure #7)
Figure #7: Final project file
2. Click on the ‘Output/Skin:’ dropdown menu and select either Simplex_V6.ggsk or Simplex_V5.ggsk (Figure #8)
3. With the new skin loaded click on the ‘Edit Skin’ button to open the skin (Figure #9)
Figure #9: Click on ‘Edit Skin’ button
4. The simplex_V6 (V5) skin is opened in the Skin Editor. Look for the ‘video_popup_controls_file’ container and click on the small arrow to open the container (Figure #10)
Figure #10: The simplex_V6 (V5) skin
5. We only need the ‘Pause’ and ‘Play’ buttons so shift select the ‘ht_video_pause_file’ and ‘ht_video_play_file’ (Figure #11)
Figure #11: Seekbar_file deleted
6. Right click on one of the elements and select ‘Create Component from Selection’ in the dropdown menu (Figure #12)
Figure #12: Select ‘Create Component from Selection’
7. Select the category ‘Sound across Nodes’ that we created in the previous section (Figure #13)
Figure #12: Select category ‘Sound across Nodes’
8. Give it the title ‘Pause Play Simplex’ and click on ‘OK’ (Figure #14)
Note: If you have the ‘Open Components Toolbox after creation’ checked (the default) it will open and you can see both components we have added. At this point you can add some information that makes it easier to find and identify components you create (Figure #15)
Figure #15: Component Toolbox
9. Close the skin but don’t save it.
Note: The components will always be available from the Components Toolbox
Add and position the components in the skin
Note: now that we have our two components we will add and position them in the skin we created in the previous tutorial
1. From the Output/Skin: dropdown menu load the final ‘bg_sound_nodes.ggsk’ skin from the ‘Background Sound Playing across Specific Nodes’ tutorial or click on the ‘Open Skin’ button and locate the file (Figure #16)
Figure #16: Loading the final skin from the ‘Background Sound Playing across Specific Nodes’ tutorial
2. Click on the ‘Edit Skin’ button to open the skin, click on the ‘Component Toolbox’ button to open the Components Toolbox window and open the ‘Sound across Nodes’ category to reveal the two components (Figure #17)
Figure #17: Skin Editor and Component Toolbox window
3. Double click each component to add them to the skin and click the ‘Close’ button to hide the Component Toolbox (Figure #18)
Figure #18: Double click each component to add them to the skin
4. Select the ‘sound_on_off’ container and in the ‘Properties/Position’ panel and set the following properties;
‘Position:’ set the ‘X’ to 454 pixels and the ‘Y’ to 67 pixels
‘Position/Anchor:’ set the location to bottom center (Figure #19)
Note: this will align the ‘sound_off’ button with the ‘Pano Prev’ button
Figure #19: Set the position for the ‘sound_on_off’ container
5. Shift select the ‘ht_video_pause_url’ and ‘ht_video_play_url’ elements (Figure #20)
Figure #20: Shift select both elements
6. With the two elements still selected, click on the ‘Draw Container’ menu icon and click once in the canvas to apply the container (Figure #21)
Figure #21: Container for the two selected elements
7. With the ’Container1’ element still selected, in the ‘Properties/Position’ panel and set the following properties;
‘ID:’ = ‘bgsound_play_pause’
‘Position/Anchor:’ set the location to bottom center
‘Position:’ set the ‘X’ to 20 pixels and the ‘Y’ to 67 pixels
‘Size':’ set the ‘Width:’ to 32 pixels and the ‘Height’ to 32 pixels (Figure #22)
Figure #22 Set properties for Container 1
Note: this will scale and position the ‘bgsound_play_pause’ container horizontally with the ‘sound_on_off’ container
8. Select the ‘ht_video_play_url’ element and in the ‘Properties/Position’ panel and set the following properties;
‘ID:’ = ‘bgsound_play’
‘Size':’ set the ‘Width:’ to 32 pixels and the ‘Height’ to 32 pixels (Figure #23)
Note: this will match the size of the other buttons
9. Repeat step #8 by select the ‘ht_video_pause_url’ element and in the ‘Properties/Position’ panel and set the following properties;
‘ID:’ = ‘bgsound_pause’
‘Size':’ set the ‘Width:’ to 32 pixels and the ‘Height’ to 32 pixels
Configuring the Components
Note: now that both components are part of the skin, we need to modify their actions to work with the Tags we created in the previous tutorial.
1. Select the ‘bgsound_play_pause’ container and in the ‘Properties/Appearance’ panel uncheck the visible: checkbox
2. Create a new logic block by clicking on the ‘logic block icon’ next to ‘Visible:’ Set the following properties;
Add a new Trigger/Tour (Pro) = ‘Tags’ | Comparison = ‘contain’ | Value = ‘sound’ Visible: = ‘True’
Add a new Trigger/Variables = ‘*setaudio’ | Comparison = ‘=’ | Value = ‘true’ Visible: = ‘True’
Set Visible: = ‘True’
Note: make sure the ‘Operation = And’
Select OK to confirm the logic block (Figure #24)
Figure #24 Set Appearance settings for Container background_play_pause
Note: this will hide the container until the node has the ‘sound’ tag assigned to it and the Start Button has been clicked.
Note: in order to pause and restart we need to add a new variable to the skin and actions to the elements. We will start with the variable.
2. Click just outside the canvas area to show the ‘Variables’ panel. Double click anywhere in an empty variable field or click on the ‘+’ Add Variable button at the right hand side of the variable field and the variable field is filled with default properties. Change them to the following properties;
Name = ‘pauseAudio’ | Type = ‘True/False’ | Init Value = ‘false’ (Figure #25)
Figure #25: new ‘pauseAudio’ variable
3. Repeat step #1 by selecting the ‘sound_on_off’ container and in the ‘Properties/Appearance’ panel uncheck the ‘Visible’ checkbox. Then create a new logic block by clicking on the ‘logic block icon’ next to ‘Visible:’ Set the following properties;
Add a new Trigger/Tour (Pro) = ‘Tags’ | Comparison = ‘contain’ | Value = ‘sound’
Add a new Trigger/Variables = ‘*setaudio’ | Comparison = ‘=’ | Value = ‘true’ Visible: = ‘True’
Add a new Trigger/Variables =’*pauseAudio’ | Comparison ‘=’ | Value = ‘false’.
Set Visible: = ‘True’
Note: make sure the Operation is ‘And’
Select OK to confirm the logic block and uncheck the ‘Visible’ checkbox. (Figure #26)
Figure #26: ‘sound_on_off’ logic block
4. Select the ‘bgsound_pause’ element and in the ‘Properties/Actions’ panel do the following;
Note: the element already has 3 Mouse Click actions, we will modify some of them and add one new action.
4.1 Double click on the first action to open the ‘Action Settings’ window and change the properties to;
Source = ‘Mouse Click’ | Action = ‘Media’ | Type = ‘Play/Pause Media’ | Loop = ‘1’ | Target = ‘_background’
Select ‘OK’
4.2 Double click on the third action and change the properties to;
Source = ‘Mouse Click’ | Action = ‘Visibility’ | Type = ‘Show Element’ | Target = ‘bgsound_play’
Select ‘OK’
4.3 Double click anywhere in an empty action field and add the following properties;
Source = ‘Mouse Click’ | Action = ‘Set Variable Value’ | Variable Name: = ‘pauseAudio’ | Operation: = ‘Not(¬)’
Select ‘OK’ (Figure #27)
Figure #27: (above) original Actions (below) updated Actions
5. Select the ‘bgsound_play’ element and in the ‘Properties/Actions’ panel repeat the steps in section #4 above
Note: As there is already a 4th action for this element you can just re-configure the 4th action. (Figure #28)
Figure #28: (above) original Actions (below) updated Actions
6. With the ‘bgsound_play’
Note: the final step is to add Action Filters to the ‘Pano Next’ and ‘Pano Prev’ elements. These filters will detect if the audio has been paused and not execute the pause action on the elements.
6. Click the small white arrow to open the ‘button_next_previous’ container. Select the ‘Pano Next’ element and in the ‘Properties/Actions’ panel and do the following;
Double click on the action field containing the action ‘Mouse Click* | Play Media | 1 | _background’ to open the Action Settings window. Click on the ‘Action Filter’ button to open the Action Filter window.
Double click on the empty field under the existing ‘Tags’ trigger and add a new Trigger = variable *pauseAudio’ | Comparison = ‘=’ | Value = ‘false’
Select ‘OK’ to add the new trigger, select ‘OK’ to update the Action (Figure #29)
Note: make sure the ‘Operation = And’
Figure #29: updated Action filter to include ‘pauseAudio’ variable
7. With the ‘Pano Next’ element still selected and in the ‘Properties/Actions’ panel and do the following;
Double click on the action field containing the action ‘Node Changed | Pause Media | _background’ to open the Action Settings window. Click on the ‘Action Filter’ button to open the Action Filter window.
Double click on the empty field and add a new Trigger = variable *pauseAudio’ | Comparison = ‘=’ | Value = ‘false’ (Figure #30)
Figure #30: update Action Filter to include ‘pauseAudio’ variable
8. Select the ‘Pano Prev’ element and in the ‘Properties/Actions’ panel repeat the previous steps #6 & #7
9. Select the ‘sound_on_off’ container and in the ‘Properties/Actions’ panel and do the following;
Click on the ‘Delete Action’ button, small ‘x’, for the ‘Config Loaded’ Action to remove it. (Figure #31)
Figure #31: delete Action
10. Select the ‘sound_on’ container, right click and select ‘Cut’ to remove it from the tree (Figure #32)
Figure #32: Cut container to remove it
11. Select the ‘sound_off’ element, right click and select ‘Delete All Actions’ to remove any actions from the button (Figure #33)
Figure #33: Delete All Actions
9. Save the skin and output the project
Summary
When you click on the ‘bgsound_pause’ button the background audio pauses, the ‘sound_off’ button and volume functions are hidden and the ‘bgsound_play’ button is revealed. The background audio will now be paused until the button is selected again.
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.
