Load different Hype scenes in an iframe

I made an inline HTML menu that links the scenes and it that works well, but I need to accomplish the same thing by using an iFrame. Is it possible to link in an external html file that contains links that points to scenes in the Hype project?

I’ve attached a inline file that works, and an iFrame version that I’m trying to make work.

inline HTML menu.hype.zip (105.1 KB) iFrame menu.hype.zip (49.2 KB)

guess due to your construct you’ve got to work with the iFrames / windows window.parent

yeah, window.parent works …

brzbrz.hype.zip (25.7 KB)

1 Like

Thanks h_classen. Is it possible to have the iFrame load an external html file located in the hype resources folder with links that points to the scenes?

why not¿ guess this’ll be the parents parent :smile:
have a look a the exportet filestructure to see how far up the way is …

Hello! h_classen!

I was wondering if I could use this method to use transitions for scenes before linking them.
Either switch with crossfade or something like that?

I have also a function that runs on click but it doesn’t work from an iFrame / Widget… The point was to “set” a variable name for the scene selector based on the scene name…and then make the timeline to continue playing (the main one) and at some point on the timeline another function checks which scene you should change to. (based on the button clicked BUT This method with iFrame or Widget it doesn’t work! …

I hope this makes sense :slight_smile: … thank you!

It would make even more sense if You provide an example of your project.

Now that I think of it…the example would be the same exact one that h_classen just shared (brzbrz.hype.zip)

but instead of linking directly to another scene, to be able to do it with a transition.

that would be all…

But this is the function that doesn’t work if called within an iFrame or Widget.

this is called when you click (via javascript)

function selectSceneClick(hypeDocument, element, event) {
window.selectedScene = element.id;
hypeDocument.continueTimelineNamed(‘Main Timeline’, hypeDocument.kDirectionForward, false);
}

and this is when the timeline reaches a certain point:

function gotoSelectedScene(hypeDocument, element, event) {
hypeDocument.showSceneNamed(selectedScene, hypeDocument.kSceneTransitionCrossfade,1);
}

These functions don’t work from an iFrame or Widget so I was wondering how can I make them work like this.

Thank you!

hard to say what you’re trying to do, but as you refer to my provided doc just edit the widgeds innerHTML to …

<div onclick="window.parent.myhypedocument.showNextScene(window.parent.myhypedocument.kSceneTransitionPushRightToLeft);">
<div >NextScene</div>
</div>

as a note:

whenever you want to trigger hypefunctions from extern be sure to use the correct reference to the object hypeDocument that should be your target

Thank you very much! I’ll try this out.

The only remaining question would be: How can I setup a specific scene name?

I figured it out by myself!

// div onclick=“window.parent.myhypedocument.showSceneNamed(‘myScene’, window.parent.myhypedocument.kSceneTransitionCrossfade,0.5);”

:smile: thank you!

1 Like