Hype’s built-in preloader (via the Resources Library) only will operate on images and audio, and will only preload before the first scene. You can show a loading dialog via “Show loading indicator” or via a technique described here.
If you need to preload on a per-scene basis (and don’t want to split up scenes into separate documents or export separately via Advanced Export), then you will be a bit on your own. (Of course I think this is a good feature to add, though there’s a lot of complexity to it!)
The general process would be:
- Create an element to hold the media, like a Rectangle.
- Add the element referencing the
${resourcesFolderName}magic variable so it will show up, like:<img src = "${resourcesFolderName}/myImage.png"> - Make sure to turn off “Automatically Optimize When Exporting” in the resources library so that the image format/name won’t change on you
- Create a “loader” scene that doesn’t contain the image, but runs code on scene load to do the preloading that you would like
- When preloading is complete, move to the next scene that contains the image
There are different ways to do the loading code in step 4 depending on if it is a <img> tag, <audio>/</video> tag, or Web Audio API… you should be able to find some around the internet (or perhaps some on these forums). It does require a bit of code to manage.
(One small note about step 2 is to check the developer console to make sure the image doesn’t get downloaded ahead of time; browsers will download at different times and this can get tricky as the Inner HTML of a future scene in Hype gets set when the whole document is loaded.)