Hello Hype friends!
I am looking for assistance with figuring out why I can’t trigger a custom behavior with javascript.
I have project that was working perfectly - until I needed to make the buttons persistent symbols!
The project is an online animated interactive album with audio playback controls and an autoplay system that changes songs/scenes. I’m at the stage where I’m about to add multiple layouts. In preparation for this, in order to maintain button state consistency with layout changes, I’ve converted my play/pause buttons and my autoPlay buttons into persistent symbols.
Now that the buttons are persistent symbols, I have everything hooked back up and the audio playback and autoPlay system is working well - almost. There is one remaining thing that is broken and I can’t understand why it’s not working.
Please let me explain my issue:
When a song that is playing reaches the end of the track, an onend :
function is called that transitions to the next scene (if the autoPlay button is clicked on). There are a number of things that are supposed to happen in this onend :
function.
Here is the function:
onend : function(){
cancelAnimationFrame(animationRequest);
//hypeDocument.startTimelineNamed('play/pause1', hypeDocument.kDirectionReverse);
hypeDocument.triggerCustomBehaviorNamed('PlayPauseButtonBackward1');
if (window.autoPlay) {
window.transitionScene();
}
},
See the code that is commented out above?
That is the code that used to be there before I converted the buttons to persistent symbols.
Once I converted the buttons to persistent symbols, I replaced the commented out code with hypeDocument.triggerCustomBehaviorNamed('PlayPauseButtonBackward1');
The replacement triggerCustomBehaviouNamed()
function works well - so far so good!
In the onend :
function above, if autoPlay is on, then the window.transitionScene();
function is called. This transitionScene() function increments my counter, switches to the next scene, and plays the new audio track. It is also supposed to flip the new scene’s play button and autoPlay buttons to the ‘on’ position on order to reflect the fact that the new song is playing and autoPlay is still ‘on’ even though we are now in a new scene.
And here is where my problem shows up…
I replaced the code with custom behaviors in the same way that I did in the onend :
function, but in this case, for some reason, neither of them are working:
hypeDocument.triggerCustomBehaviorNamed('autoPlayToggleForward' + window.counter);
hypeDocument.triggerCustomBehaviorNamed('PlayPauseButtonForward' + window.counter);
Any ideas on why this isn’t working and what I need to do to hook it back up so that my play/pause and autoPlay buttons are switched to the correct state after an autoPlay-triggered scene change?
I would be so eternally grateful if you could help me figure out where I’m going wrong and what I need to do to get it working again. I feel like I’m missing something simple. Here is a link to download the test file that I’m working with.
Please check the code in the setup()
function and you will see where I’ve added some comments explaining where the issue is happening. I’m stumped!
I also have one other separate question about refactoring (this question also pertains to code that resides in the the setUp()
function): How I can refactor the code where I build the audio objects?
As of now, I build each audio object manually, and the only thing that changes with all the objects is a counter number. I’ve tried to refactor the code with a for loop, and by placing it in a separate function and neither of those options worked. I would think there should be some obvious way to generate all 12 of my audio objects in a much more dry way but I can’t figure out anything that works. Any ideas on how I can pull this off?
Thanks so much!