Organized Asset Export Script to put resources in image/ media/ and js/ folders

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.

The defunct Edge Animate publish options:

Hype export with OrganizedAssets:

14 PM

You can download the Export Script from this URL:

https://tumult.com/hype/export-scripts/OrganizedAssets/OrganizedAssets.pkg

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.

6 Likes

This is pretty cool.

I have been using it on a projects.
A couple of things. Adding your own folder type seems easy enough like for css.

But when I try html type.

#html

elif args.replace_url.lower().endswith(('.html')):

                url_info['url'] = "htmlFiles/" + args.replace_url

#everything else

if there are more than one widgets html in the project they all do not show up, possibly overwriting each other to a single file ?.

44


As opposed to an export that does not have the html folder type set.

55

We also do not get a restore file. I know I can do a second export but wonder if it is possible to get one on this type of export.

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:

  1. You can get it by using the Advanced Export.
  2. You can also set the export_options dictionary in the get_options call to have exportShouldSaveRestorableDocument set to True in the Export Script.
1 Like

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.

1 Like

I split to a new topic, as the replies moved out of topic. :- )
3 posts were merged into an existing topic: Demo page for parsing HTML data back to a json file after edits

Hi @jonathan, I’m having some issues with the script and my Python skills are a bit lacking.

I’ve got mp4 files in my project which I do not initiate on the stage, but load only via js using:

myVideo.setAttribute('src', "${resourcesFolderName}/video_02.mp4");

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 :blush:

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?)