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.
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.
Pretty much. 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:
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)
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.
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.
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!
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.