How to make scene URLs work even when exported as OAM file

Using JavaScript with Hype
, ,
1

The lack of parallax scrolling in Hype, the way that it’s available in Adobe Muse, makes me want to export the Hype document and add it as OAM file in my Muse project.

I am using separate URLs for my scenes, the way it’s described in this quintessential post. I want to export an OAM file, put it in Adobe Muse and this link system still to work according to the OAM.
Any ideas how to make that? :monkey:

Also, any suggestions for code which could work as an equivalent to the Adobe Muse parallax effect is more than welcome! :slight_smile:

2

I just had a revelation - maybe it’s better to export the HTML from Muse and import it in Hype instead of the opposite? :scream:

3

Nope, it doesn’t work. The Muse code doesn’t seem to open when I stick it in the HTML widget.

4

i don´t know muse, but did you try to put the code in the innerHTML of a rectangle instead of a widget?
and if you export an HTML-site from muse, you only have to set the url of the exported HTML-page into the widget, not the code?

5

I can’t see an option in Muse for inner HTML.
But embedding Muse in Hype would partially solve my problem. Should I iframe it? Could you please explain how exactly to embed Muse HTML in Hype?

6

again - i don´t know muse. but if you can export from muse to a html-file, like you do from hype,
you can call the “xxx.html” from a html-widget of hype in the inspector, like you call a website.

7

Tried it - oddly I’d need to copy not the local path “file:///…” but the link that Adobe Muse creates when I preview the page in Adobe Muse. However, it’s useless for me in this case because the Muse page is placed in a scrollable widget. Then again with careful planning and scaling maybe one could avoid that. But too much of an effort for some basic parallax.

8

An OAM widget creates an iframe, so you would need to dynamically adjust the iframe's src code to be http://example.com/hypeDocument.html into something like http://example.com/hypeDocument.html#sceneName if you're using the Scene URL JS code you linked. Since this reloads the JavaScript, there will be a brief flash as content is loaded, so it may not be the best solution for a seamless linking experience.

9

Thanks, Daniel!
Where do I adjust the iframe’s src code?

10

Here’s one way:

So when you drop in a OAM widget in Muse, Muse creates an iframe. It also assigns an ID to that widget. So to change the ‘source’ of that iframe, you need to target it with JavaScript.

Here’s JS code for loading ‘sceneName’ by changing the source of an iframe in Muse:

Screen Shot 2016-08-04 at 9.54.01 AM.png1728×1743 214 KB 

<script>
function urlChange(url) {
    document.getElementById('U121_animation').src = url;
}
</script>

<a href="javascript:void(0);" onClick="urlChange('assets/subway1/index.html#sceneName')">TEST </a>

This code would need to be assigned to a button – this may not be the easiest way to do this, but it is one way :slight_smile:

1 Like