Exporting Jscript Only?

Greetings Hypesters.
Forgive me if this has been addressed somewhere, a search did not return the answer I seek.

I am curious if there is a way to export a hype project as javascript instead of the html container (if I am understanding that correctly). I wish to give the jscript and resources to another developer to use outside of Hype.

I hope that makes sense, thanks in advance.

The HTML that Hype exports is pretty minimal and should be able to be used in this way. You will probably just need to give the other developer the entire .hyperesources folder that gets exported and make sure it is loaded correctly.

A typical .html export from Hype contains these key lines:

	<!-- copy these lines to your document: -->

	<div id="index_hype_container" class="HYPE_document" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?35427"></script>
	</div>

	<!-- end copy -->

Basically there’s a div and a reference to the javascript. You’ll basically need these somewhere. The div is required as the animation must be loaded somewhere. The javascript must just be loaded after the div is created. The javascript will look for a div with the particular ID, so those must match up and it is a good idea to make sure the div has the other attributes/properties as well.

A couple other notes:

  • The numbers at the end of the “index_hype_generated_script.js?35427” aren’t required, that is just for cache-busting
  • Hype’s export has an option to not write out a .html file, if that helps.

Thanks Jonathan…
When I export the project (which is 6 pages) I get two .js files in the export…

HYPE-648.full.min.js at 93kb (180 lines)
HYPE-648.thin.min.js at 54kb (103 lines)

Filled with more of this…

(function(){v.HYPE_648F=function(O,J,Ka,fe,sj,tj,Sa,I,lc,bq,qd,bf,fa,uj,Bg,cf,cq,dq,eq,ge){function df(a){var b=yb(a);if(!(fa!=h||a==k||0<Eb||b==k||b.nb==h))if(b=b.Pa[P[a.id]],b!=k){var c=1==n(a,al,0),d=n(a,il,0.5),e=n(a,jl,0.1),f=n(a,Nl,0.01);a=n(a,kl,0.001);0>=a&&(a=1E-6);c==h&&(d=0,e=1,a=Infinity);b.restitution=d;b.friction=e;b.frictionAir=f;c!=h&&A.Body.setDensity(b,a)}}function mc(a,b){var c,d,e,f=yb(a);if(!(fa!=h||a==k||0<Eb||f==k||f.nb==h)){var g=f.oa.world,j=P[a.id],l=f.Pa[j],m=n(a,al,0);

Complete JS moron… can I assume this is the raw js of my project, and would be usable code by another?
Thanks in advance.

There is a file under the name of *_hype_generated_script.js that is the one referenced in the .html which contains your document data. It also has loading code to determine what other files are needed to execute the animation. A version of one of these runtime files will always be required:

These files are the basic animation library. They are the same for every Hype document. (That said, they are tied to the version of Hype - you are using the v4.0.0 libraries. I’d recommend upgrading to 4.0.1!)

There’s more information on what gets exported and each of its rules in our exporting documentation.

In short, you will need the document+loader javascript and the runtime javascript files. Depending on your document you may also need other files that the loader will bring in, or assets that the runtime will load. This diagram show the loading flow, but is probably overkill to learn about all the details :slight_smile:.

Does that help?

Yes! Much, thank you.

1 Like