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

[jonathan (Jonathan Deutsch)]

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:

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.

[MarkHunte]

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

---

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.

[frank52]

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 (Jonathan Deutsch)]

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

This is a bug and will be fixed in v4/the next beta.

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.

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.

[jonathan (Jonathan Deutsch)]

@frank52

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.

@frank52

It would be great to have the playlists as editable text in external files.

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.

[pj-avt (PJ)]

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

[jonathan (Jonathan Deutsch)]

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

[mahers (Maher Souhabi)]

Hello Jonathan,

First of all, thank you for the script. I use it to create web banners using Advanced Export and the official CDN

Each time I export, I have to edit the default_hype_generated_script.js file by replacing all occurrences of "js/HYPE-“ with “HYPE-"

If I don't do this, the CDN doesn't work and I get an error (Bad request)

Can I edit the .py file so that I don't have to make this correction to the HYPE-generated .js file?

I don't know Python at all.

Thanks for your help,

Maher,

[jonathan (Jonathan Deutsch)]

Yes, you can fix the export script so it will work with the CDN setting.

1. In Hype's Export Preferences, select OrganizedAssets.hype-export.py and click Show in Finder to reveal the file.

2. Open it in a text editor, and locate these two lines

        	elif (int(args.url_type) == HypeURLType.HypeJS):
        		url_info['url'] = "js/" + args.replace_url
   

3. Comment them out so they are not run by putting the # character in front:

   # 		elif (int(args.url_type) == HypeURLType.HypeJS):
   # 			url_info['url'] = "js/" + args.replace_url
   

4. Save and close the file

5. Go back to Hype and try exporting again

[mahers (Maher Souhabi)]

Thank you very much, Jonathan,

It works, but the script does not create a js folder anymore. That's OK, I work around it by editing the index.html file. It's a lot less work for me.

Thanks again for your time.

[MarkHunte]

Doing the comment out for me does work but also does create a js folder for any other js.

What are you seeing ?.

If you are not seeing any folders then you may have a syntax error in the .py

Here is the standard export script with the change above.

--- UPDATED The script to account for the hype_generated_script.js file.

OrganizedAssetsCDNRtime.hype-export.py 2.zip (2.4 KB)

[mahers (Maher Souhabi)]

Hello Jonathan,

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.

However, I would like to know what is wrong.

Thanks Jonathan,

Maher

(Attachment CDN.mp4 is missing)

[MarkHunte]

Your video is not showing..?

Also did you try the script I put above ?

[mahers (Maher Souhabi)]

Yes, I used the script you sent me.

Here is another link for the video :

https://mahers.d.pr/3hnzut

[MarkHunte]

Oh I see, The hype_generated_script.js is not being included in a js folder.

Let me have a look at that.

[MarkHunte]

Ok fixed that. Probably could write it better but it works.

I changed the original lines.

elif (int(args.url_type) == HypeURLType.HypeJS):
     		url_info['url'] = "js/" + args.replace_url

to

 elif args.replace_url.lower().endswith(('hype_generated_script.js')):
             url_info['url'] = "js/" + args.replace_url

I have replace the script I put above ( incase someone only gets that far in the thread )
So download that again.

[3DCG]

Hi, I use the export asset script regularly and it stopped working for me today!

I am on Mac OS 12.3. Is it possible they removed python or ???

[Daniel]

This has instructions on how to get Export Scripts working again (It has to do with the removal of Python in Mac OS 12.3)

Tumult Hype 4.1.8 update required for Python-based Export Scripts on macOS...

[3DCG]

Thank you so much for the fast response. This fix worked for me!