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 document (on the same page)
  • Linking to a scene by linking the text itself (not using Hype's built in 'Go to URL' actions)

Linking to a Scene using an URL

A single URL for your Tumult Hype document is suitable for many animations, but you may want to be able to link to a scene directly, or you want to ensure that scene visits are entered into browser history. One way is to split your document into multiple pieces, and link directly to the generated .html files.

There's another way that uses JavaScript:

  1. Open the 'Scene Inspector'.

  2. In the 'On Scene Load' area, click on the Action menu and select Run Javascript….

  3. Click on the Function menu which appears and select New Function….

  4. Paste the following in the Javascript area:

     var checkHash = function() { 
     var hash = window.location.hash.substring(1); 
     for(var i = 0; i < hypeDocument.sceneNames().length; i++) {
     if(hypeDocument.sceneNames()[i] == hash) {
     hypeDocument.showSceneNamed(hash);
     break;
     }
     }
     }; 
     
     if (window.loadedHashLocation != true) { 
     window.loadedHashLocation = true; 
     checkHash(); 
     window.onhashchange = checkHash; 
     }
     
     window.location.hash = "#" + hypeDocument.currentSceneName();
    
  5. Add this script to load 'On Scene Load' for all scenes. You can see this script in action by viewing the document attached to this article. This script looks at whether there is a #scenename anchor tag present in the current browser windows URL. To link to a scene, use the name of the scene in the URL.

Download this example: sceneURLs.hype.zip (23.7 KB)

Linking to a Scene From outside of your Tumult Hype Project

If you have a link on a page that contains a Hype document, and you wanted to change that document's scene, you would need to run an 'onclick' handler on an href using the following code:

<a href = "#" onclick = "HYPE.documents['MyDocumentName'].showSceneNamed('MyScene')">Jump To My Scene</a>

You can find the appropriate 'MyDocumentName' by looking at the first line in the *_hype_generated_script.js in the exported Resources folder. If you saved a document named 'index' then your MyDocumentName value would be simply index. It's best to use scene names that do not contain foreign characters or symbols. Keep em simple.

Linking to a Scene from within your Tumult Hype Project

This technique would be for the following case:
Let's say you have a box on your first scene with a single word in the inner HTML of an element, and you want this to link to scene 2. First, add the following JavaScript in the HEAD area:

<script>
function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;
}

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

This code gets the document name of your document. For your link, you would need to add the following code to the Inner HTML of an element (if your scene being jumped to was named scene2):

Jump to <a href="#" onclick="window.myhypedocument.showSceneNamed('scene2');">scene 2</a>

Keep in mind that you would need to create a different myhypedocument variable for each document you use this in (if they are loaded on the same page). Also note that you cannot run this code within an HTML widget or iframe.

Here’s another way, which is suitable if you only have one Hype document (named Index, in the example) on the page:

<a href="#" onclick="HYPE.documents['index'].showSceneNamed('scenenamed1',HYPE.documents['index'].kSceneTransitionInstant);">

Download this example: jumptoscene-inline-onclick.hype.zip (10.7 KB)

For more on the JavaScript APIs available in Tumult Hype, please see the JavaScript Documentation.

18 Likes

I moved 5 posts to a new topic: Load different Hype scenes in an iframe

Thanks Daniel …
One more issue, if possible, to explain how Internal Anchors can be added in Hype 3.0 Pro to the same for internal flicks in the page/scene navigation ?

Can you explain a bit more about what you're trying to do? Does this help?

1 Like

Hi Daniel! How is another way of achieving this result but with no # on the links?

Can you tell me a bit more? Is there a reason why you want to avoid using the # character? You could potentially use ? or & instead.

1 Like

Thanks for the fast reply!

I’m a designer, so little I know about coding and programming. Therefore, I can only think that if my URL was www.mysite.com instead of www.mysite.com/#home, and other pages were like www.mysite.com/privacy instead of www.mysite.com/#privacy - the links would look cleaner.

It’s a stupid detail but I care about this stuff :stuck_out_tongue_winking_eye:

I hope there’s a way of achieving this, otherwise would be nice to see it in future Hype versions.

BTW - Hype is awesome, it allows me to release my creativity and deploy great web pages!

Totally understand -- I agree it's not the best-looking URL. At this time, since a Tumult Hype document exists on a single URL, you would need to create folder to hold each separate page. And each page would need to be exported using the name 'index' so that when you visit /privacy the 'index.html' page would be loaded.

1 Like

Gotcha! I'm using Amazon S3, gonna try to discover how to do that! Thanks! :smiley:

Worked like a charm! Thanks Daniel!

1 Like

Hi,

This works great and have been using this for a while, is it also possible to add another parameter to the URL, basically I am try to set a global variable within this script?

i.e. www.mysite.com/#privacy?en
or www.mysite.com/#privacy&en

where ? would be used for another script, this could be anything in reality.

Regards

Thanks Hans,

I think I understand how this works, hash[0] is the value after the #, subsequently hash[1] is the first value after the ?

so for a global variable I have added this as:
window.lang = hash[1];

Okay, How do I do this for right click?

Can we keep this in one thread @UXDJB?

1 Like

Hi this is my first post, i have a problem linking to timeline from outside of a Tumult Hype document, somebody could help me, how do it. Thanks!

1 Like

it’s well documented here :):
http://tumult.com/hype/documentation/3.0/#invoking-api-from-outside-oftumult-hype

3 Likes

Hi, Hans. Thanks so much!

thanks so much Hans