Starting with a different Scene

[PappaSmalls]

Is there a way to start a document at a selected scene. I have a large document that showcases everything, but I want to talk more in-depth about different scenes on different pages. If the document is Cached once it’s loaded, surely it’s better to load the same one and start at a different scene than create a whole new document, right?

---

Another question about Scenes and performance -
At the moment I have scene transitions from A > B with crossfade, but I’ve noticed that if I have the content of B also inside scene A, and I just make A 0% transparency and B 100%, the transition seems to be much more fluid.

What do you think will be the best method to keep performance levels up - Are scenes more costly or the content (with the hidden content being Display: Hidden)

My content itself is pretty simple, being mostly text, rectangles and simple SVG’s.

[JimScott]

@PappaSmalls

Is there a way to start a document at a selected scene. I have a large document that showcases everything, but I want to talk more in-depth about different scenes on different pages. If the document is Cached once it's loaded, surely it's better to load the same one and start at a different scene than create a whole new document, right?

Perhaps the information in this thread will provide useful:

Linking to a hype scene from another hype document

Hi Craig (@craigah13) All you need is to use this line as your link. HYPE.documents['**Document Name**'].showSceneNamed('**Scene Name**'); You can place this in a “On Mouse Click” --> “Run Javascript…” function on any element. Or you can create your own HTML link and place it there as: <a href="#" onclick="HYPE.documents['Document2'].showSceneNamed('Scene 2');">Link</a> This assumes you have named your document “Document2” and the scene within it is named “Scene 2” Live Example Document…

[jonathan (Jonathan Deutsch)]

@PappaSmalls

What do you think will be the best method to keep performance levels up - Are scenes more costly or the content (with the hidden content being Display: Hidden)

Scenes are pretty heavy weight, in that when they are loaded they have to reset a lot of DOM elements, setup timelines, load images (even if the image is cached, it may need to render and send to the graphics card), etc. Crossfading from one group to another on a scene will be more performant. But the tradeoff is definitely in organization and memory usage per scene.

As for loading at a different scene (I assume you mean via URL?) then this is what I was going to reference:

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…

[PappaSmalls]

I was thinking more of a JS that is in my that just launches the document at a specific scene.

---

Is all the content of the scene loaded at the same time, or does it load as soon as it is called into view.

I’ve read here that the recommended upper bound is around 50 scenes. Do you have a similar number for the amount of elements in a scene (Very low and compressed image usage, mostly rectangles, text, and some very simple SVG’s)

---

Another question is what effect does (Visibility: Hidden) have on performance? Does it reduce the processing load if I use timelines to make them visible when they are required?

[jonathan (Jonathan Deutsch)]

@PappaSmalls

I was thinking more of a JS that is in my that just launches the document at a specific scene.

What interaction would trigger this? I was guessing you wanted it to be a URL?

@PappaSmalls

Is all the content of the scene loaded at the same time, or does it load as soon as it is called into view.

The DOM is constructed when the document is created. Properties/Attributes are assigned when the scene is loaded. There's no Hype distinction for items coming into view, though undoubtedly browsers optimize rendering paths when items are hidden or offscreen.

@PappaSmalls

I've read here that the recommended upper bound is around 50 scenes. Do you have a similar number for the amount of elements in a scene (Very low and compressed image usage, mostly rectangles, text, and some very simple SVG's)

The recommendation is more based on the fact that over 50 scenes is difficult to manage in Hype's UI (since there's no scene grouping, filtering, or multiple selection ) and also that at some point there's going to be a lot of overhead even if they are all empty scenes.

As for elements, at least you can group them or use symbols . There's no hard limit, but everything has a cost. I think it is more your call in what you're comfortable with and how frequently you may need/want to reorganize. There's other things to consider; generally re-render performance of SVGs is much poorer than raster formats, so it could be that N elements is terrible with SVGs but completely fine with other elements.

@PappaSmalls

Another question is what effect does (Visibility: Hidden) have on performance? Does it reduce the processing load if I use timelines to make them visible when they are required?

This is a browser implementation detail; the general answer is "yes" but is highly depending on your document and what you're doing.

[PappaSmalls]

@jonathan

What interaction would trigger this? I was guessing you wanted it to be a URL?

Maybe a JS window.onload/document.onload or document.ready?

@jonathan

This is a browser implementation detail; the general answer is "yes" but is highly depending on your document and what you're doing.

It's mainly just a dashboard that shows information. There are pages (Avg around 10-15 rectangles, 15 text elements and max 5 small images).

I only have around 2/3 of these pages within one scene, but I'm thinking about cutting scenes down and increasing the number of these pages within a scene instead.

When they are not in 'view', they are at 0 Opacity and Hidden. Then when they are opened they become 100% and Display: Visible.

---

One more thing I've been wondering. Are linear transitions easier to process than say, ease in/out?

@jonathan Thank you very much for taking the time to answer my questions, I really like using Hype and I extremely appreciate the support you are providing.

[jonathan (Jonathan Deutsch)]

@PappaSmalls

Maybe a JS window.onload/document.onload or document.ready?

As a detail, Hype documents won't be loaded at that point. See the example containing "HypeDocumentLoad" in our documentation to hook onto that event, and it also says how to change the scene at load time:

http://tumult.com/hype/documentation/3.0/#invoking-api-from-outside-oftumult-hype

@PappaSmalls

It's mainly just a dashboard that shows information. There are pages (Avg around 10-15 rectangles, 15 text elements and max 5 small images).

My guess is that if you are having performance problems doing a crossfade transition on scenes that are this simple then it might be due to SVGs... you may want to experiment quickly with replacing them with PNGs and just see if that's the culprit.

@PappaSmalls

One more thing I've been wondering. Are linear transitions easier to process than say, ease in/out?

Technically yes, but the performance hit is likely insignificant compared to the repainting/compositing that the browser has to do. It is just a bit more math (everything other than "instant" and "linear" is solved via quadratic bezier curves).

@PappaSmalls

@jonathan Thank you very much for taking the time to answer my questions, I really like using Hype and I extremely appreciate the support you are providing.

Happy to answer!

[JimScott]

Thank You @jonathan this is interesting material…

Thank You @PappaSmalls for asking the questions.

[PappaSmalls]

@jonathan

As a detail, Hype documents won't be loaded at that point. See the example containing "HypeDocumentLoad" in our documentation to hook onto that event, and it also says how to change the scene at load time:

Tumult Hype Documentation

Please bear with me as my JS knowledge is substandard.

Would it be possible to have the Scene name in the actual HTML page as a variable. Then once the document loads, a call from within the document checks for the external variable, and uses its value as the Scene name it should start at.

This way you can have a the variable on any page, even one that makes the document start at the first scene.

I hope I explained it well.

[russlipton (Russ)]

is it possible to load different scenes randomly at start?

[Daniel]

Here’s a few threads on that:

http://forums.tumult.com/search?q=random%20scene

[jonathan (Jonathan Deutsch)]

@PappaSmalls

Would it be possible to have the Scene name in the actual HTML page as a variable. Then once the document loads, a call from within the document checks for the external variable, and uses its value as the Scene name it should start at.

This way you can have a the variable on any page, even one that makes the document start at the first scene.

Yes, the code would look like this:

<script>

var sceneNameToInitiallyLoad = "[[My First Real Scene Name]]";

function myHypeLoadCallback(hypeDocument, element, event) {
    hypeDocument.showSceneNamed(sceneNameToInitiallyLoad);
    return false;
}

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

</script>

Add this to the head of your HTML and change the string "[[My First Real Scene Name]]" to reflect the scene name you want loaded for that page.

This is adapted from the example in the documentation.