Changing a scene in Hype document that's embedded inside a div from external HTML


(Ryan Kramer) #1

I’m not sure if the subject is entirely correct… but let’s give this a try.
I have some code set up that allows a banner to expand upon click. The problem is, any hype document animation will play before the user gets to the banner. So I figured, just set it to a blank scene 1 and have the animated content on scene 2. Then program the javascript to point to the second scene on mouseover/click/pageload/whatever.

Test link here.

Only catch is, I can only get the external API scene changes to work if the hype HTML is on the main portion of the page, and not embedded inside of an iFrame/DIV or javascript created container in this case. Here’s a look at the code…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {margin:0px;}
</style>
<head>
<title>Expandable</title>
<script type="text/javascript" src="http://dvm360storage.com/rk-testing/expandable-banners-test/assets/expandablebanners.js"></script> 
<script type="text/javascript">
    // exampleHTMLToPage
	<!-- 600 is the width of LINKED HTML ad-->
	<!-- 600 is the height of LINKED HTML ad-->
	    var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "HypeExample.html", 600, 600);
		exampleHTMLToPage.setCloseImage("http://dvm360storage.com/rk-testing/expandable-banners-test/assets/images/close.png", 'right', 'bottom');
		exampleHTMLToPage.animated = true;
		exampleHTMLToPage.setDirection('down', 'right'); 
		exampleHTMLToPage.expandOnClick = true;
		if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded",function(){documentReady=true;});}
		else if (!window.onload) window.onload = function(){documentReady=true;}
</script>
</head>
<body>
<!-- 150 is the width of CURRENT HTML ad-->
	<!-- 600 is the height of CURRENT HTML ad-->

  <div id="exampleHTMLToPage" style="width:150px; height:600px; background-color:rgb(30,167,221); position:relative; color:white; font-weight:bold">
  <div style="display:inline-block; 
  width:140px; font-size:22px; margin-top:20px; margin-left:5px; margin-right:5px;">This is an HTML banner RK V3. Rollover to test exported HYPE interactive.
  <a href = "#" onclick = "HYPE.documents['HypeExample'].showSceneNamed('Scene2')">Jump To My Scene</a>
  </div>
  </div>
</body>
</html>

This right here is the code that would normally work if you had a javascript button on the HYPE HTML’s main page vs how it’s set up here.

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

I was wondering if this is something that is even feasible or if I should be giving up this fight.


Javascript jump to scene
(Mark Hunte) #2

I am a little confused by what you mean here…

Have you tried putting your animations on a new timeline and not the main timeline and then use a click action to to start the new timeline ?

clickAd.hype.zip (28.8 KB)


(Ryan Kramer) #3

Pretty much. :slight_smile: I want users to click to expand the ad from the main HTML document and that SAME click action is what tells the second HTML hype document that loads to go to another scene or timeline where the animation plays. I don’t want the user to click on the ad, it opens, then you click on something and it plays. That’s a non-starter.

I heard back from the developer of these expandable code files and he stated the following:

 We have this working on this example.
 http://www.expandablebanners.com/expandablebanners_html5_native_video.php
 If you rollover the first banner it will start to play the HTML5 Video.

 In our HTML5 Video banner the only variables we need to access are

 .Play();
 .Pause();
 .Stop();

 Here is the code we are using to Target the Larger Expandable Banner Play Function.
 "ExpandableBanners.openAd('vidautoexp');document.getElementById('vidautoexp_expanded_media').contentWindow.Play();

Notice that the normal variable used here "vidautoexp"

Now looks like this

vidautoexp_expanded_media
document.getElementById('vidautoexp_expanded_media').
We add "_expanded_media" because this the new variable name that targets the 2nd Expandable Banner.
We also add .contentWindow after which again triggers that HTML file.

CLOSE BUTTON ON THE INSIDE OF THE BANNER
Now for the next part the Close button.
This is the code we are using on that close button.
<a href="javascript:parent.ExpandableBanners.closeAd('vidautoexp');javascript:Pause();">
Notice we are adding "parent."
parent.ExpandableBanners.closeAd
This is triggering the Parent window and closes the banner.
I'm sorry that this is not in the Documentation Yet and it is something I'm working on right now.

Conclusion
So in conclusion you can use any HTML5 code that you want but just keep a note of what the code is to Play, Pause, or Stop the animation.
Then on your first banner the code will be 

"ExpandableBanners.openAd('yourname');document.getElementById('yourname_expanded_media').contentWindow.yourhtml5playcode();

Then inside of the larger banner's Close button you put this.
<a href="javascript:parent.ExpandableBanners.closeAd('yourname');javascript:yourhtml5pausecode();> CLOSE </a>

So I assume the final click code to skip the hype document to another scene would something like the following:

(ExpandableBanners.openAd('yourname');document.getElementById('yourname_expanded_media').contentWindow.HYPE.documents['HypeExample'].showSceneNamed('Scene2')();

But I’m not quite there yet. I very much appreciate the reply back though. :slight_smile:


(strmiska) #4

you can do this by using a timeline action.
just put a “got to next scene” at the end of the main timeline or after whatever should be animated before.
clickAd.hype.zip (30,3 KB)


(Ryan Kramer) #5

I appreciate the replies everyone, but to reiterate, I want to control the Hype timeline from OUTSIDE the Hype document, not from inside the Hype document itself. I wish it could all be inside the Hype document, that’d be a lot easier. :slight_smile:

If you look at the link from the original post… http://dvm360storage.com/rk-testing/expandable-banners-test/assets/rk-test-v3-right-expand-api.html

That is an HTML file that, when expanded, loads a second HTML file inside the expanded window. The second HTML file is the hype document. The problem is, I want to control that second HTML document from the FIRST HTML document, hence the need to invoke API from outside of Tumult Hype.

Thanks again for your continued interest to help. :slight_smile:


(strmiska) #6

have you tried:
HYPE.documents['documentName'].showSceneNamed('SceneName',HYPE.documents['documentName'].kSceneTransitionPushRightToLeft);


(Hans-Gerd Claßen) #8

why isn’t it possible. scenes can have different sizes …
what exactly are you trying to achieve? <-may be a link to an example-ad would help


(Ryan Kramer) #9

Yes, I’ve tried variations of that. I can get them working when it’s all on the same HTML document. I’ll be posting examples soon of what is working so far, what isn’t, and perhaps a clearer explanation of what I’m after. Thanks!


(Ryan Kramer) #10

OK, here’s a video that hopefully makes this easier to understand. :slight_smile:

And here’s the three attachments with the 3 different examples.

Again, I appreciate the infinite patience of these forums. :slight_smile:

changing scene from outside hype.zip (works) (100.0 KB)
hype-animation-inside-expandable-banner.zip (works) (109.3 KB)
changing scene from outside hype using expandable banner.zip (not working) (136.6 KB)


(strmiska) #11

for the animation of the banner moving out:
you´re using physics - they start immediately the scene is shown.
to prevent this, you can set the ball on a timeline. then trigger the timeline from outside of hype,
If you want to start it.
the other possibility is to add a delay after the banner is clicked.

window.setTimeout(function() {
hypeDocument.showSceneNamed('scene2', hypeDocument.kSceneTransitionCrossfade, 1.1)
}, 2000);`

(Hans-Gerd Claßen) #12

guess the best way would be to use postMessage …

hype first scene onsceneload:
window.addEventListener(‘message’, function(e) {
var eventName = e.data[0];

if(eventName === 'start'){
var destSceneName = e.data[1];
hypeDocument.showSceneNamed(destSceneName, hypeDocument.kSceneTransitionCrossfade, 1.1)
}
}
)

two send the message add a onclick to your invoking element

document.getElementById('yourIFrameId').contentWindow.postMessage(['start', 'destSceneName'], '*')

i didn’t test it, but should work …


(Hans-Gerd Claßen) #13

changing scene from outside hype using expandable banner.zip (136.0 KB)

a working example from your provided files. :slight_smile:

one left for you: you should also add a postMessage to the closebutton that switches the hypedocument back to scene one :wink:


Advance a timeline from external URL in iFrame?
Internal Hyperlinks not Opening in External LMS Player
(Ryan Kramer) #14

My lord! I could hug you through the screen!

Well done good sir! Any way I could at least pay a couple beers for you or is that against forum policy?


(Hans-Gerd Claßen) #15

not that for :wink: