Hey guys!
I made some banners a while back. The banners are looping continuously but now received an email letting me know that the banners have to stop. The problem I have is that I no longer have to work files so I need to fix this in the already exported folders.
How do I do this?
Best,
Rasmus
Try this link... scroll down to the section "Document Recovery" (it's a little ways):
The main text from this section is quoted below:
By default, Tumult Hype exports a recovery file from which the original Hype document can be recreated. This file is never downloaded by users viewing your document online, so it does not impact download times. Also, the file name is randomized per-document, so that it’s not easy for someone else to download and recreate your source Tumult Hype document.
If you have lost your source Hype document, you can recover it by following these steps:
Download the exported documentname.hyperesources folder.
Choose Help > Restore Document from Export and select the documentname.hyperesources folder.
Choose where to save your recovered document.
The recovery process re-creates your source Hype document based on what was exported. If “Automatically optimize when exporting” is checked for images, the scaled down version will be only recoverable image available. The recovery process is no replacement for a true back up system; please use a back up system like Time Machine to protect your valuable data.
If for some reason you don’t want restorable document data included in your exports, disable this behavior by deselecting the “Create restorable document file when exporting” option in Hype’s General preferences or in the Advanced Export pane.
Thanks but I don’t have the possibility to do this right now. I need to know where in the code the start timeline string at the end of the animation is and what I should replace it with to make it stop instead of replaying.
Unfortantly we cannot do this without seeing the code or the project.
Why?
Doing the restore is very simple. Doing it will give you a project we can look at.
If you do not have the folder to hand at this mo do you have a link with the Ad on
But I have the JavaScript files in the exported banners. I must be able to edit this and change the string of code that tells it to start over the timeline.
Sent from Blue
But we are not psychic, well I am not atleast so have no clue what code is being used or where in the js file it is.
This should be a simple task but not without you helping us help you!!!.
You need to post something that we can look at.
The restore is the simpliest thing. Not sure what he problem here is.
Just go to the Help menu in Hype and down to Restore document from export..
If you do not have hype with you post me the folder here or private message and I will try and do it for you.
I understand and sorry for not being clear. The problem is that I don’t have access to a Mac as of right now so I need to do it manually. Can I send you the js file for you to take a look?
Ok. Lets try that… or better zip the whole folder and send that. I may be able to restore it, which will make things easier
320x320.zip (78.0 KB)
Thank you for the help mate. As I said I need to change that string of code in a total of 54 banners 
Hmm,
No restore file.
Did you do the loop by Timeline action
Yes I told it to start from the beginning of the timeline. Action: Start timeline. Timeline: Main timeline
Ok, I may have an idea
So there is not much we can do about a timeline action.
This asumes a lot like all the actions are on the main timeline.
open up the exported html file and place this in the Head tag. Just under any style tag closure </style>
Code to add.
<script>
function theTimeline(hypeDocument, element, event) {
general()
function general(){
setTimeout(function(){
var theTimeDur = hypeDocument.durationForTimelineNamed('Main Timeline')
var theTime = hypeDocument.currentTimeInTimelineNamed('Main Timeline')
if (theTime > theTimeDur - 1){
hypeDocument.pauseTimelineNamed('Main Timeline')
}else {
general()
}
}, 10);
}
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":theTimeline});
</script>
Example files.
Archive.zip (77.3 KB)
Thank you so much!!
One more question if you have the time. In some of the banners I have implemented a streaming youtube video. However Google Adwords rules are that it has to stop after 15 seconds. Is there an easy way I can do this? I have attached an example. Thanks again!
320x320.zip (63.9 KB)
What happens when it stops
Ohh.. that is not easy.
Especially as you have the video in an iframe.
But I think I have some magic... be back in a bit
Wow, that was fun working out.
Just like the other code. Add this to the head.
<script type="text/javascript" src="https://www.youtube.com/iframe_api">
<script>
function theTimeline(hypeDocument, element, event) {
var hscene = document.querySelector('.HYPE_scene')
var iframeFrame = hscene.querySelector('iframe')
var iframeSRC = iframeFrame.src
var youTubeId = iframeSRC.split('/embed/')[1].split('?')[0]
var vidParent = iframeFrame.parentElement
var player;
player = new YT.Player(vidParent, {
height: '100%',
width: '100%',
playerVars: {
autoplay: 1,
loop: 1,
controls: 0,
showinfo: 0,
autohide: 1,
modestbranding: 1,
vq: 'hd1080'},
videoId: youTubeId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
// 3. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
setTimeout(function(){
player.stopVideo();
}, 15000);
}
var done = false;
function onPlayerStateChange(event) {
}
function stopVideo() {
player.stopVideo();
}
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":theTimeline});
</script>
Now this works with the example you gave me.
It looks for the hype scene element. then the iframe. ( assumes there is only one)
gets the iframe src. And works out the playlist id.
It the uses the Youtube API to create a new video stream using the id and the iframe’s parent container as the player.
Using the Api allows us to stop the video with a timeout after 15 seconds.
Hopefully it will work with your others.
Example.
Archive.zip (63.6 KB)
I have slightly updated the code so that if the id is not found you will get this error on testing in the console.
TypeError: Cannot read property 'split' of undefined : Manually enter the ID into the youTubeID var
This means for what ever reason the video id could not be obtained from the src.
The reason most likely will be the youtube src line is different to the example and the split() code fails.
If you get this then manually enter the id in the line
var youTubeId = '' // manual entered id if needed
like so
var youTubeId = 'aFu-NsGHqf' // manual entered id if needed
New Code.
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script>
function theTimeline(hypeDocument, element, event) {
var youTubeId = '' // manual entered id if needed
var hscene = document.querySelector('.HYPE_scene')
var iframeFrame = hscene.querySelector('iframe')
try {
var iframeSRC = iframeFrame.src
var youTubeId = iframeSRC.split('/embed/')[1].split('?')[0]
}
catch(err) {
console.log(err + ' : Manually enter the ID into the youTubeID var ')
}
var vidParent = iframeFrame.parentElement
var player;
player = new YT.Player(vidParent, {
height: '100%',
width: '100%',
playerVars: {
autoplay: 1,
loop: 1,
controls: 0,
showinfo: 0,
autohide: 1,
modestbranding: 1,
vq: 'hd1080'},
videoId: youTubeId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
// 3. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
setTimeout(function(){
player.stopVideo();
}, 15000);
}
var done = false;
function onPlayerStateChange(event) {
}
function stopVideo() {
player.stopVideo();
}
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":theTimeline});
</script>
Example with one that fails to get the id.
Archive.zip (63.7 KB)
I forgot to say thank you for this. You saved me!!!