• Register
Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.

Swiffy or CreateJS animations in iframe do not work when published

0 votes

I have some interactive animations produced in Flash and exported with Swiffy or CreateJS to html5.

When placed in an iframe in inDesign and then published (dedicated js scripts added as resources) all animations are working but the interactivity is lost (e.g. buttons). When the html file with animation is accessed directly everything works (both on desctop and mobile devices).

Please could you advice me if there is any solution to make these animation working with in5.
Or (what may be very likely) I do something wrong? I placed js files in the root folder and changed the directory in the index.html but it doesnt help.

asked Apr 29, 2015 in how_to by czarrna (350 points)

1 Answer

+1 vote
Try adding the HTML as a Web Content Overlay using the Folio Overlays panel. in5 will then automatically pull the dependent files in.
answered Apr 30, 2015 by justin (130,190 points)
Hi Justin,

Interactivity of the animations is enabled ONLY when published with continuous scroll.
(I tested all pages formats that in5 offers).

All other page formats make the animations visible but actions are disabled. I DID tick "allow user interaction" in cases when placing animations within inDesign. Animations placed directly in the code of index.html behave exactly the same (doesn't matter if it's iframe or code with animation placed directly in html).

I think this might be caused by code within e.g., jquery.touchSwipe.min.js, i.e. - all thouch events are  limited to control the page in order to swipe it, and js from animations cannot get through (is masked).

It might also cause the problem with custom navigation I indicated in this topic:

I would love to see interactivity of animations working in liquide page format.

Have you any idea how to solve it, or is it a bug in js controlling page format behaviour?

I will send you an e-mail with example animation so you know what I am struggling with.

Many thanks for help!
Hi czarna,
The file works just fine when I test in multiple browsers. We'll continue to follow-up via email.
Thanks for the answer.

This is exactly what I said - it works in browsers and it does not work on mobile devices. This is the problem - it is not working when nested in a web app for mobile devices.
Did you try it on iPad? I tried on couple of them, many versions - same effect.

Thanks for looking into this.
I tested on an iPad and was able to replicated. Emailed you a potential fix.