Hype typically exports a single .html file and along side it a .hyperesources folder containing all resource library assets and scripts required to run animations.
Many folks, including a fair number of Adobe Edge Animate “refugees,” have expressed the want or need for Hype to separate assets into distinct folders as is common with the web development.
The Export Script infrastructure allows for this separation, so I created an Export Script called OrganizedAssets that will export in a manner similar to Edge Animate’s default structure using images, media, and js folders.
To use, simply choose the File > Export as HTML5 > OrganizedAssets menu item.
This is also available from the Advanced Export feature if you need to make non-default modifications to the export.
I’m happy to get any feedback if there’s a different folder structure that’s better. Note: this doesn’t preclude a built-in Hype feature for it in the future!
The source code is a good starting point if you want to make customizations as to which files (based on extension) get placed in the various locations.
Related to Mark’s reply, I would like to see a situation where text boxes can be exported as individual (or even a combined) externally editable HTML file. As a widget developer, I like to create things that people can integrate into websites and make certain changes to the content without having a copy of Hype. For example, If I were creating a slider that could contain Images and text slides, it would be nice to be able to export everything in an editable form. At the moment, I can export the images - no problem. This allows users to replace images with others of their own choice just by keeping the same file names. But when it comes to text, it’s often difficult to find which file contains the text elements - making external editing very difficult.
The same situation occurs when creating audio or video players. It would be great to have the playlists as editable text in external files. The actual audio/video files can be more generic such as track1, track2 etc. These could be replaced with similarly named files externally, but the track list info would be much more difficult to edit.
This is a bug and will be fixed in v4/the next beta.
It is pretty likely Hype won't be able to import from an export script, so this is disabled by default for all export scripts. I suspect it won't work with OrganizedAssets since it won't understand the folder structure for re-linking resources. That said, there's two ways to get it:
You can get it by using the Advanced Export.
You can also set the export_options dictionary in the get_options call to have exportShouldSaveRestorableDocument set to True in the Export Script.
Thanks for the feedback! I think being able to have some sort of data-driven approach to filling in content is a pretty good goal for Hype. There's lots of other areas like localization where this also makes sense even if it isn't dynamically changing data too.
For now, my recommended approach would be to give elements IDs or Class names, and then you could have javascript on scene load that would fill in the appropriate values if needed.
which works fine in editor, browser preview and building, using standard folder export. But if I use this script (OrganizedAssets), the mp4’s are correctly moved to /media folder but the hype generated script is looking for it at the root, rather than /media.
From the hype_generated_script.js: hype_video.setAttribute('src', \"./video_01.mp4\");
Is it that the OrganizedAssets doesn’t understand / update references if they’re referenced only in a script, not loaded onto stage?
I can easily get around it (adding /media to the media url for instance) but this breaks it in editor & preview (unless I use ‘Preview Using Export Script:’ option).
I’m thinking that when I train colleagues on how to use Hype, the smoother sailing, the better
The problem is that ${resourcesFolderName} is a simple text replacement and isn’t really smart enough to see that the reset of the code is referencing a video and to adjust like that.
In this case you will want to use add the media/ manually and then use the preview using export script option.
(side note: I’m surprised it works in the editor environment since it is being dynamically added anyways?)
I have downloaded the script, installed it in the right place. I have exported a banner I am working on at the moment, but there is still no js folder generated. I have included a video so you can see for yourself.
It's not so bad, editing the html file will fix it.
