How to load a specific scene after exporting the all scenes using the Default custom slice

[animeshjain]

I exported all scenes into a single js file using the Advanced Export functionality (using the Default slice with all scenes selected). Now when I load the HTML file, the first scene starts to play.

I am going to be embedding this within my own page, and that page will have all the respective scenes in different sections on the same page itself. How can I make a specific scene load.

Here is the snippet that loads the hype animation into the document

    <div id="default_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:320px;height:400px;overflow:hidden;">
    		<script type="text/javascript" charset="utf-8" src="Default.hyperesources/default_hype_generated_script.js?34001"></script>
    	</div>

Is there some way to specify which scene this will load?

[Rick4F (Rick)]

My 30 seconds search came up with this:

Linking to a specific scene from inside and outside of a Tumult Hype document

Tumult Hype documents are accessible from a single URL. If you name your document 'Flying' and upload it to your site, then your animation and all its scenes are accessible from http://example.com/flying.html (unless you change the name of your exported .html file). This article describes three ways to navigate between scenes: Load a scene directly from a URL (For example: http://site.com/hypedocument.html#contact) Use a button outside of your Tumult Hype document to load a scene in that docu…

Is that what you where looking for?

[animeshjain]

I did look at this topic. But as far as I could understand from that thread, it seems that on a single page, the same script cannot be used to show multiple layouts (since it is depending on the # fragment in the URL).

The use case I am looking at is something like this -
I have a single page which is a step by step guide. I am making small animations for each step. Now, if there are 6 steps overall, instead of having 6 different script files for each of the animations, I was wondering I could just have a single script file (to save on the number of files being downloaded) and then somehow load all those 6 animations by embedding in a certain way so that the respective scene shows up for each step.

[Daniel]

@animeshjain

I have a single page which is a step by step guide. I am making small animations for each step. Now, if there are 6 steps overall, instead of having 6 different script files for each of the animations, I was wondering I could just have a single script file (to save on the number of files being downloaded) and then somehow load all those 6 animations by embedding in a certain way so that the respective scene shows up for each step.

When you export, select 'Official CDN for Runtime Hosting' in the Advanced Export options. Then when you embed, your Hype generated JS file will load its runtime from the CDN, and the animation + elements from the generated javascript file for the individual element. You can export these individual scenes (as slices) from the same document.

You can then use viewport actions to load these individual Hype documents when they are shown on the page.

[animeshjain]

Thanks Daniel. Yup, I am already using the CDN to make sure the Hype SDK loads only once. I was wondering if I could also use a single big javascript file for all my scenes that belong to the same page.

I am trying to understand if loading a specific scene from this combined scenes JS is not possible, or if I am missing something and it can be done. From what I have understood, it can be done if I link these scenes using some action or such. But the effect I am looking for is similar to just having 6 videos on the page. Except that all these videos are loading from the same JS file.

[jonathan (Jonathan Deutsch)]

Yes, this can be done.

(To confirm, it sounds like since you are just using the Default export slice, the question isn't really about Advanced Export, other than that is just your flow. It would otherwise be the same for a normal document which exports all your scenes.)

The example in Invoking API From Outside of Hype is probably the most straight forward route for you. The way to do this is to add a hook to the HypeDocumentLoad event, and in that function use the hypeDocument.showSceneNamed() API to choose the scene that you want to load for that particular instance. If you return false from that method then it will not load the typical initial scene.

Add this to your head HTML:

<script>

  function myCallback(hypeDocument, element, event) {
    // show the scene named SecondScene
    hypeDocument.showSceneNamed('SecondScene');

    // 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>

You'll need to supply a different scene name, but it sounds like you have some logic to help you decide that.

Does that help?

[animeshjain]

ok interesting. I think I can make something work with that. Let me give it a go and report back.