I’m using Hype to generate many graphics for a website. Some graphics are a) simple animations that will be embedded inline in the body of a page. Other graphics b) act as the main header graphic and need to be responsive in various portal sizes. Still inline in the page, but they have multiple layouts.
I would prefer to have one master Hype document with many scenes. Some scenes are for A above and some for B. I could export the entire Hype document and it would update all the files needed.
I can export everything into a /hype folder, but every scene appears to generate its own folder with the same hype support files. I’d like to merge all the HYPE-664.thin.min.js, blank.gif, etc into the same folder. And I’d like all the myfile_hype_generated_script.js in a directory above that. So it would look like this:
Even if I were to export everything separately and move the files manually, it breaks the Hype files. Looking inside the default_hype_generated_script.js file, I see refs to the parent folder “Default.hyperesources”. Is there any way around this? This is what I tried:
I also tried looking at export scripts, and I’ve added the OrganizedAssets one, but it just puts javascript and images in separate folders. I’d like all assets in various scenes shared.
Possibly I’m missing something obvious, too. Feel free to suggest a better workflow. I’m not even clear what is different between “Export as HTML5” and “Advanced export.”
There's not a built-in method to assign specific paths to specific resources, so I would say you are not missing anything too obvious.
There are two smaller points to consider though:
If the Hype runtime has been loaded by one document on a .html page, it won't get downloaded/reloaded even if it is requested from a different path. So this could save some bytes.
Files like PIE.htc and blank.gif are only used by old versions of IE, so it is likely you don't need to care about duplication of these since they will be rarely loaded.
The only thought would be to worry about the organization a bit less and just use a single "mega" .hyperesources folder. Basically export everything as the same resources folder name, and then merge all resources into a single folder. What you would need to do for this to work correctly is:
rename the *_hype_generated_script.js file before merging into the mega folder. You then would need to change the name in your .html file to access this correctly.
Uncheck 'Automatically optimize when exporting' for images in the Resources Library so they don't get optimized in a way that is ideal for one document but not another. (It then becomes your responsibility to make sure asset sizes/compression is optimal)
You are free to modify the export scripts; the OrganizedAssets one is pretty easy to change where specific files go if you're familiar with a bit of programming.
The file is installed to ~/Library/Application Scripts/com.tumult.Hype4/OrganizedAssets/OrganizedAssets.hype-export.py
Advanced export is an "Export as HTML5" but exposes options and allows selecting specific scenes/resources to be exported. There's more info in the docs:
One last mention is that while reducing network bytes is always a good goal, sometimes the trouble of doing so is not worth the reward. So I always recommend measuring what the savings will be first to put it in perspective vs. the amount of work.
Thank you, @Jonathan. Yes, my main concern was loading a new
HYPE-664.thin.min.js or
HYPE-664.full.min.js
on every page load across the site. You’re saying it won’t download it again even if they live in different directories? If those files above are in “animation1.hyperesources” and “animation2.hyperesources” directories, it will only download the files once per website visit? In dev tools it appears it loads them on every new html page, but I will need to spend more time on it to understand for sure.
I just thought that any linked assets, such as CSS or JS, would always download on each page if they are located in different directories.
My comment was more about if multiple animations are on the same page; it won't get re-downloaded since the runtime is already loaded. If they are on different pages then it would be a new request from the browser (and could not be cached on the first request). So there's definitely advantages in that case to combine to a single file.
Ok, then we’re on the same page. Thanks for confirming that. Yes my concern was loading it on separate pages.
In my original post, I actually had trouble making the “mega” folder you described, but after your previous post I got it to work, and I think it was because I needed to also rename the ID, not just the JS file referenced. I believe I am now able to combine all the Hype docs into a single folder and only call those JS files once. But I’d still love a way to set that structure up in Hype so I can simply export an updated scene directly to the place where it will live, without having to do a bunch of renaming every time.
