Hi, is it possible just to show selected scenes?
F.e. you mark the fields you would like to see in the table of contents. Then hit a play button which shows just the selected scenes.
thx for help, best jan
Persistent Symbol Navigator
/*!
* Hype Persistent Symbol Navigator Extension
* Copyright (Year) Your Name, (https://yourwebsite.com). MIT-license
*/
/*
* Version-History
* 1.0.0 Initial release
*/
// Ensure the extension isn't redefined
if ("HypePersistentSymbolNavigator" in window === false) {
window['HypePersistentSymbolNavigator'] = (function () {
/**
* Hype Scene Load handler
* This function is called whenever a new scene is loaded.
* It searches for a persistent symbol that matches the current scene's name and checks its main timeline position.
*
* @param {Object} hypeDocument - The Hype document instance.
* @param {HTMLElement} element - The scene container element.
* @param {Event} event - The event object.
*/
function HypeSceneLoad(hypeDocument, element, event) {
// Construct the ID of the persistent symbol based on the current scene's name
var symbolId = hypeDocument.currentSceneName();
// Attempt to find the symbol element within the entire Hype document
var symbolElement = document.getElementById(symbolId);
// Check if the symbol exists
if (symbolElement) {
// Convert the found symbol element to a symbol instance
var symbolInstance = hypeDocument.getSymbolInstanceById(symbolElement.id);
// Check if the symbol instance exists and its main timeline is not at the start (position 0)
if (symbolInstance && symbolInstance.currentTimeInTimelineNamed('Main Timeline') == 0) {
// The main timeline is not at the start, so navigate to the next scene
hypeDocument.showNextScene();
}
}
}
// Register the Hype Scene Load event listener
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type": "HypeSceneLoad", "callback": HypeSceneLoad});
// Public API for the extension
return {
version: '1.0.0',
};
})();
}
What does this Extension do?:
- Scene Load Event: The extension activates when a new scene is loaded, essentially checking what needs to be done on this new page.
- Looking for a Symbol: It searches the entire project for a special symbol that matches the name of the current scene, like a detective looking for a specific clue.
- Checking the Symbol's Timeline: Upon finding the symbol, the extension checks if the symbol's main timeline (which controls its animation) is at the beginning. If the timeline isn't at the start, it implies the symbol's animation has already been triggered or completed.
- Skipping Scenes: In the example, if the checkbox symbol's "check" animation has started (meaning the timeline position is not at 0), the extension decides to skip the current scene and move to the next one. This mechanism ensures that the viewer doesn't view scenes not selected.
How does it remember state?
The extension leverages the unique characteristic of persistent symbols in Tumult Hype, where they remain accessible across scenes, even when not visibly present on the current scene. This property allows persistent symbols to serve as a form of "state storage" within your Hype project. By examining the timeline position of these symbols, the extension can determine if a particular action or animation has already been initiated or completed, regardless of the symbol's visibility.
This approach is particularly useful for creating interactive projects where the user's progress or choices need to be remembered across different scenes. For instance, in the case of the checkbox symbol you mentioned, once the "check" animation is triggered (indicating a user interaction), the symbol's timeline position changes from its initial state (position 0). The extension detects this change and uses it to decide the flow of the project, such as skipping scenes that no longer need to be revisited, thereby enhancing the user experience by avoiding redundancy.
Updated Download:
Persistent Symbol Navigator.hype.zip (98,7 KB)
Last update February 16th, 2024
2 Likes
thx a lot max! perfect solution!
1 Like
Hi Max! Could it be that it's still a bit buggy? Scene three always plays, even if I haven't selected it, no matter which combination.
2 Likes
Hi, yes you are right - scene 3 will always be played
1 Like
Indeed, the function is designed to transition directly to the subsequent scene, bypassing the current one. This implies that in the absence of a following scene, the function lacks a destination. To address this, I suggest incorporating a final scene that determines the subsequent action, such as looping back to the start or displaying a 'The End' message. I have made the necessary updates to the file accordingly.
3 Likes
fyi
There was this also..
This is dynamic, in that you do not need to hard code in the scene list, the code will do that for you.
(I did intend to include a thumbnail but it got too complex, so I did not complete that part )
2 Likes