Setting initial scene in HTML embed

Using JavaScript with Hype
1

Hello, is there a way to set the initial scene right from the script embed?

I have one animation per scene, with none of the scenes having transitions to any other.
Currently, I am working on a web application, where I want to dynamically add a tag to the embed block to preset the animation and thus scene I want to display.

Is this possible by adding an initial scene to the script embed or do I have to use the Tumult Hype API to change to it after the document loads?

Best regards,
Benedikt

2

There's no supported* way to do this, so your options are:

  • Add a dummy first scene in the and have that read whatever variable/tag you want to control and then have it call hypeDocument.showSceneNamed(sceneName, hypeDocument.kSceneTransitionInstant);

  • Add this code to your Head HTML:

    <script>

  function myCallback(hypeDocument, element, event) {
    // get the scene name however you need
    var sceneName = "...";

    // show this scene based on sceneName variable assigned above
    hypeDocument.showSceneNamed(sceneName, hypeDocument.kSceneTransitionInstant);

    // return false so it does not load the initial scene
    return false;
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});

 </script>

These are the supported/recommended methods.

* Technically since Hype has the command-option-return to preview a specific scene, a variable to decide which scene to first show does actually get passed through into the *_hype_generated_script.js file which could be modified. However this is all minified and the scene number mapping can be changed significantly due to layout usage, needs to be rewritten with each export, and may also change in future releases. Therefore it is not supported.

2 Likes
3

Thank you very much for the quick response and the detailed solutions!

1 Like
4

I went with option two and it works absolutely perfectly. Thanks!

1 Like
5

Great - glad that worked!