I came across a really good post that explains it well:
https://greensock.com/html5-banners
Be patient because the author is more than a little bias towards his own product and his vision for how things should work, but if you can get past that there’s a great discussion about shared resources, CDN’s and the efficiency the two will offer someday.
Does anyone just wish they would stop putting IE out into the world, it just created loads of headaches, why can’t MS conform to general consensus. Bill Gates you are an evil man.
Hi,
I’m wondering if there is anyway to optimize the JS files to exclude code that is not used in the document? I think I’m right in saying that all the necessary code sits in the JS file for any possible action within the document.
However though if I did not need “rotation” for instance could I delete that part of the code from the JS file?
In the future would it be possible to have the JS file custom generated based on what is going on in the document?
Just some thoughts!
James 
Those are excellent suggestions for further squeezing the runtime – thanks! I’ve added your vote to our discussion on this topic.
It would also be great to have an export option to keep the js code that is currently in the exported external js file added into a self contained HTML file in just the way Google Ad designer does.
I’m finding that many sites are now refusing ads that include external js files.
To do that, check ‘Inline Data File + Loader’ in the ‘Advanced Export’ window:
Hi Daniel, I did try that but I still get an external .js file exported into a folder, see file structure below:
Does the ad provider you work with allow external hosting? You could use the CDN option in Advanced Export to host that thin.min.js file elsewhere.
Thanks Daniel, most do but some don’t which is the problem i’m having, what would be good is for a streamlined version of the runtime that could be easily added to the HTML file itself. This way an Ad would not require any other external JS files to work.
Is there a hack I could perform that would let me inline the runtime manually?
To go file-less, you would place the contents of that thin.min.js within
<script type="text/javascript">
</script>
… Above where your generated js code is already in place.
As simple as that, no tampering with the already inlined JS?, I’ll give it a go now. Thanks D
Can you let us know which sites are following this rule?
I’l DM them over to you as and when they come up, but these do include some UK cinema sites that I directly send ads to on a regular basis where no ad server is used.
Hi All,
I’ve just come over from Google Web Designer - in which once exported it was just the images used in the HTML5 animation and the .html file - which contained everything. Will Hype be doing this? or do we always have to manually work it out which files we can delete to get the 150kb limit…
This currently is the reason we are staying with GWD even though Hype’s animation is far ahead the exporting is a time concern for when we are outputting 7-10 banners for a campaign.
The current version of Hype will allow you to automate some of this (you can set it to not include the backup file when you export), but I haven’t found a way to automatically remove all the extra stuff that I don’t want in the export so I’m still doing it manually. Note that I’m removing the lite version of the JS files as well so that means altering html/code. Not a big deal the first couple times, but it starts getting tedious after a while. It would be really nice to be able to setup an export profile with all my edits and recall this process each time, but I haven’t found a way to do this yet.
Out of curiosity… how was your experience with GWD? I tried it a while back and found it to be really fast, but very buggy. We had A LOT of cross browser issues and had to bail on it really early on.
Hi Shaun,
Yes GWD has been a bit buggy but the ease of exporting and adding links is super easy.
As soon as I started using Hype I was so excited until I saw what it exported, and that was a surprise to me that it exports that way… I’m hoping they are doing an update for this, as at the moment - it’s just like you said to tedious and something that we shouldn’t have to do for a quick workflow.
I’m over GWD but for now until Hype has better options will have to stay
If you use this set of options and also host the HYPE.js runtime on a CDN, you should be able to get close to your goal. This will produce a single .html file with all of the generated JS inline, your images within a folder, and the runtime would be loaded remotely.
Hi Daniel,
Thanks. Yes I saw the instructions above but using a CDN may not be an option for all ads we create. Will Hype be doing an update at all to streamline this?
I would like to add. The people at Adform have changed there export options when dealing with Hype-Banners. On export they minimize the files. And therefore add the hype-generated.js into the index.html.
The main thing to watch for is the added Style or Script to the main <div>. I still don’t understand why in the head there is still a link needed for the .js. Any thoughts, Daniel?
Export File:
160x600_banner_tua_06_rgb_adform.zip (77.5 KB)
Code example here:
<html><head></head><body><div id=160x600bannertua06rgbrz_hype_container style=margin:auto;position:relative;width:160px;height:600px;overflow:hidden aria-live=polite><script>!function(){!function k(){function l(e,n,i){var a=!1;return null==window[e]&&(null==window[n]?(window[n]=[],window[n].push(k),e=document.getElementsByTagName("head")[0],n=document.createElement("script"),a=h,n.type="text/javascript",n.src=a+"/"+i,e.appendChild(n)):window[n].push(k),a=!0),a}var h="160x600_banner_tua_06_rgb_rz.hyperesources",c="160x600_banner_tua_06_rgb_rz",e="160x600bannertua06rgbrz_hype_container";try{for(var f=document.getElementsByTagName("script"),a=0;a<f.length;a++){var b=f[a].src;if(null!=b&&-1!=b.indexOf("160x600bannertua06rgbrz_hype_generated_script.js")){h=b.substr(0,b.lastIndexOf("/"));break}}}catch(n){}if(a=navigator.userAgent.match(/MSIE (\d+\.\d+)/),a=parseFloat(a&&a[1])||null,!(a=l("HYPE_526","HYPE_dtl_526",1==(null!=a&&10>a||!1)?"HYPE-526.full.min.js":"HYPE-526.thin.min.js"))){if(f=window.HYPE.documents,null!=f[c]){b=1,a=c;do c=""+a+"-"+b++;while(null!=f[c]);for ... reduced the code here ... (this.body)}}()}();</script></div></body></html>
There’s 3 JS files referenced in that block:
160x600bannertua06rgbrz_hype_generated_script.js - the reason this is referenced is to try to find a full URL for the .hyperesources folder. It isn’t strictly necessary if you place the .hyperesources folder next to the .html document it is run from, but in many cases users don’t do this so it is a way for Hype to be more robust.
HYPE-526.full.min.js and HYPE-526.thin.min.js - The *_hype_generated_script.js has two responsibilities: holding animation data and loading the Hype runtime. It references these files to load, and makes the decision on which one based on environment factors.