InDesign to HTML

I made a simple example using assets from an interactive adventure game book based on Pepper and Carrot which I am working on as a personal side project. Animated in InDesign, exported with the free Export FXL HTML script in InDesign, although I did optimize and convert all the images to webp format. Firefox and IE don't support this image format (yet: FF will get support soon, finally!).

The example doesn't include state objects, but all interactive content works fine when output this way. The second page has a simple environmental sound playing in the background.

Btw, I never allow InDesign to optimize assets for this kind of work (which does a terrible job both with resampling as well as file size) and I make sure InDesign uses my prepared intermediate assets instead. Then during the final stage I optimize the heck out of all the assets. The example images add up to a mere 392kb. I could have done even better, though, but I did not spend a lot of time on this example. For fixed layout epubs I use heavily optimized PNG and JPG files - all done with external free tools. (I believe in5 also uses various command line tools to optimize files better?)

Aside from custom image optimization, I added a bit of custom simple css to hide the frame overflow, and use a black background. The example took me 20 minutes to do in InDesign, and ten minutes for the image optimization, code changes and upload (the assets I already had).

The use of webp does mean this example should be viewed in either Chrome or Opera. Other browsers will display a white page :-).

html export from InDesign example link

It's a nice proof of concept, I think. InDesign is quite a good prototyping tool for this type of work too. Fast to test some concepts and preview in the epub viewer. I just wish Adobe would extend the interactive features - they haven't touched them in years now. A simple animation timeline would be nice, for example.

While it is possible and actually quite simple to use this output as a basis for app conversion to desktop and mobile devices using a tool like Cordova (or even Photogap), my actual project is done using Godot Engine. InDesign is fine for simple interactive books, but lacks variables and conditional logic which I need.