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

(Jonathan Deutsch) #1

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:

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.

Hype banner to sizmek banner
(Mark Hunte) #2

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.


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


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


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.

(Jonathan Deutsch) #4

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.

Demo page for parsing HTML data back to a json file after edits
(Jonathan Deutsch) #5

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.

Demo page for parsing HTML data back to a json file after edits
(Mark Hunte) #6

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