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

knowledgebase

#1

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://site.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.


Direct linking to scenes
Browsers Back Button
Anchor pointing to a scene using Iframe
Refresh/reload page
Text element: different words linking to different scenes
Linking to Scenes from "external" JS/jQuery menu
Javascript jump to scene
Phonegap: Linking between scenes and optimizing memory usage
Multilanguage possible on textboxes or buttons?
(Resolved) How to call scenes via content inside an HTML widget?
Dynamic variable to function
Linking to a hype scene from another hype document
Jump to scene > object without JS
Jump to a scene in another document
How to send my visitor to a specific page if I have just one html?
Link to scene from inside HTML widget
(Resolved) How to call scenes via content inside an HTML widget?
How can I navigate to an anchor in a parent document (iFrame)?
Looking for help with a simple question
Browser reload/refresh stay on current scene
How to make scene URLs work even when exported as OAM file
Parallax scrolling of various objects
How to make scene URLs work even when exported as OAM file
Any way we can load a particular scene instead of loading the first scene?
Hype Function flickers wallpapers
Jump to a time in another scene
Jump to a scene based on the ID of the button
Hyperlink to specific Hype scene from another website?
Embedded url inconsistency
Open a scene on click in a new browser tab
Control Hype .HTML from Smartphone .HTML
Linking scenes between slices
Interactive magazine fails (only a little)
Linking a specific point of a scene from a different scene
Create a 'Back' button to transition to the last-visited scene
Image button - SEO - alt attribute
hypeDocument is not defined or HYPE is not defined
Language specific starting scene?
Trigger timeline action in Hype from Captivate
Hyperlink to specific Hype scene from another website?
Hyperlink to specific Hype scene from another website?
Muting from outside document issue
Link a Hype document from another Hype document (embedded as an iframe)
Open a scene from within a html widget HELP
Trouble using Material Design Components Inside Hype
Change scene within an IFRAME
Using javascript in an external quiz engine to jump scenes
Run timeline onclick div
Using Hype Javascript in my Customized Javascript Outside of Hype
Draw a simple cartoon face with Hype Elements
Can i use link in the text area?
Menu built in Hype linking to different scenes
Getting the index container name
File extension in web URL to get people to specific place in my site
Browser button javascript
Javascript Password - Switch or if/else?
Bookmark scene?
Scenes vs Layouts (pages)
Making a solid circle blink & Password controlled form
Going back to specific scroll point of the scene
Running Hype code returned from PHP
Scene Urls based on folders on a server
Starting with a different Scene
Starting a Timeline from text link
Keep header remain when navigating to different links of a website
Best way to manage and preload multiple large scenes?
Start animation from external javascript function
Auto Scene Title callBack Function / Use a callBack for all hype scenes onLoad events
#2

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


#3

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 ?


#4

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


(Gabriel) #5

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


#6

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.


(Gabriel) #7

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!


#8

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.


(Gabriel) #9

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


(Gabriel) #10

Worked like a charm! Thanks Daniel!


#11

#12

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


(Hans-Gerd Claßen) #13

#14

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];


(Jonathan Bowman) #15

Okay, How do I do this for right click?


#16

Can we keep this in one thread @UXDJB?


Knowledge base: Guides from the Tumult Team
(kmilo) #17

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!


(Hans-Gerd Claßen) #18

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


(kmilo) #19

Hi, Hans. Thanks so much!