Forum Discussion
Audio-Button functions and states within selfbuild WBT menue and options
Ann-Katharin105 Make sure the volBtn object ID across all scripts matches the volBtn object ID in your current project. You may also want to use this script when the timeline starts to reference the object ID only once, and then execute JavaScript to call the toggleVolume() function when the volBtn and Hotspot Audio are clicked.
Execute JavaScript when the timeline starts on this slide:window.syncVolumeUI = function() { const volBtn = object('6K0zFZzoRzO'); // replace with current ID const currentVol = DS.appState.currentVolume(); setVar("volumeOn", currentVol > 0); volBtn.state = (currentVol > 0) ? "Normal" : "_default_Selected"; }; window.toggleVolume = function() { const currentVol = DS.appState.currentVolume(); const newVol = currentVol > 0 ? 0 : (DS.appState.lastVolume || 1); DS.appState.setVolume(newVol); window.syncVolumeUI(); // Update UI after toggling }; syncVolumeUI();Execute JavaScript when the use clicks volBtn and Hotspot Audio:
toggleVolume()This is a simplified approach to avoid the risk of forgetting to add the object ID in multiple scripts.
Thanks a lot, Nedim, for reaching out and helping that fast! The way you solved it was very smart and impressive - starting alone with by the step with separating the grouped elements in the button and creating a shadow element controlled by a trigger to change state.
Your SL file is running as it should; all requirements function as wished. Also tested it with adding a video in slide 3.2. Works really fine :)
The thing is now, that by incorporating your variable volumeOn, the elements of the button as well as your triggers and Javascripts on base layer and first layer of Master view slide in my unscrubbed bigger SL file, it still doesn't work to one point: Everytime, I want to mute the audio volume by using the Hotspot in the expanded menue, the audio mutes (so fas so good) but the icon state doesn't change accordingly.
Somehow the menue/text label Hotspot seems to not communicate with the button state.
I don't know the reason for sure since I really just copy pasted all your work without changing or forgetting something (checked also with two other colleagues). Therefore I want to break down once more what you did to make sure I got everything:
1. Adding this variable
2. Using these 2 elements (ungrouped) for the button:
with the states as the following
3. Setting the triggers on the element volBtn (icon-part of the button) to first control the shadow appearance while hovering and secondly running the JS to control the audio un/mute as well as the state of the button
4. Setting the trigger on the base layer to identify the current Volume and sync with the button state:
5. Go to the next layer and adding only this Javascript to the Audio-Hotspot:
Since posting about my struggle with the audio button I also stopped working on the SL file. So there should not be any other trigger/variable etc. interfering with the setup you built.
I am using the latest version von SL 360 (from 31st March) if that makes it easier to track down the error - even though that shouldn't be the cause since your file is functioning without problems.
Do you have a clue why it's not working, what I did wrong (or what I might have forgotten after all) - or what the cause could be?
Ann-Katharin105 Make sure the volBtn object ID across all scripts matches the volBtn object ID in your current project. You may also want to use this script when the timeline starts to reference the object ID only once, and then execute JavaScript to call the toggleVolume() function when the volBtn and Hotspot Audio are clicked.
Execute JavaScript when the timeline starts on this slide:
window.syncVolumeUI = function() {
const volBtn = object('6K0zFZzoRzO'); // replace with current ID
const currentVol = DS.appState.currentVolume();
setVar("volumeOn", currentVol > 0);
volBtn.state = (currentVol > 0) ? "Normal" : "_default_Selected";
};
window.toggleVolume = function() {
const currentVol = DS.appState.currentVolume();
const newVol = currentVol > 0 ? 0 : (DS.appState.lastVolume || 1);
DS.appState.setVolume(newVol);
window.syncVolumeUI(); // Update UI after toggling
};
syncVolumeUI();Execute JavaScript when the use clicks volBtn and Hotspot Audio:
toggleVolume()This is a simplified approach to avoid the risk of forgetting to add the object ID in multiple scripts.
Thank you again, Nedim! That must seem so obvious! Just discovered that I can find out about the object ID via accessibility features. I inserted the ID given by SL in my file in every script and now it works just fine. Thanks a lot! You were a great help and I learned so much from you.
Ann-Katharin105 You’re welcome! I’m glad it worked for you. I’ve actually used a similar approach and script to help a few others working on German-language courses, so it’s a bit of a coincidence. It seems like many German teams tend to build highly customized interactions in Storyline. Anyway, nice to meet you here!
Hi Nedim,
Just checking in with you again. Also nice to meet you here :)
Thanks again for your help—you really helped me and us out a lot, and so quickly, too.
That’s really a coincidence! And funny that we Germans seem to especially enjoy building our own menus or customized interactions in SL.
I also wanted to ask if you could help me out with this topic again.
My colleagues and I have been tinkering with an additional condition, but we can’t quite get it right:
The new requirement is that, in the expanded menu, when hovering over the section that displays the button’s function, that section should turn white, and the round button should also be displayed in white. And vice versa: When the menu is expanded, if the mouse hovers over the round button, it turns white, and so does the corresponding section.
Do you already have a workaround for this in your other script, the one you used to support the other Germans?
We’ve been working with states, with different elements, triggers, and JavaScript again. Finally, we tried using a hotspot in the expanded menu (covering the round button and section) as well as two round buttons (also on the base and level) and a JavaScript to link both Object IDs (both round buttons on the base and level). So far, without success.
I’d be happy if you could help us out again. :)