Since its release (or pre-release…), designers have used Edge Animate to bring HTML5 animations to their DPS projects. While most designers place their projects into InDesign-based articles, some have asked how to use Edge Animate CC assets as HTML articles. Learn more about HTML articles in DPS Help. When they try to import the project after publishing it for Web from Edge Animate, however, they run into an issue with InDesign not being able to convert the HTML into an article. There is a workaround, at least for InDesign CC users. CS6 users won’t be able to use this workaround.
Edge Animate makes a single HTML file that references assets, CSS and Javascript files. This is good, because this is exactly the structure that DPS wants for an HTML article. Your project needs to be called “index” for dual orientation articles, and ”index_h”, or “index_v” for single orientation articles. When you publish from Edge Animate, it makes a folder called “Web” in the “Publish” folder. In that folder will be a file called “index.html” (or “index_h.html” or “index_v.html”). From InDesign, open the Folio Builder panel, open your folio, and click the “Add Article” and choose “Import Article,” or choose “Import Article…” from the flyout menu. Fill in your article metadata, and then browse to the Web folder in the Publish folder of your Animate project. When you have everything set up for your article, click OK.
This is the point when things begin to go wrong. InDesign now attempts to convert the Animate project to a DPS article. You will discover that it will try for a very, very, very long time, although it will not finish the job. If you remove the file called “index_edgePreload.js” (or _h or _v), you will be able to upload the project, but it won’t work. It seems that InDesign must render the HTML in order to create a TOC image for the article, and it fails when it tries. It turns out that there is a way to force InDesign to complete the task, however.
Right after you click OK, quit InDesign. Seriously. Quit InDesign. Or, more correctly, ask InDesign to quit. At that point, you will see an alert box telling you that Folio Builder is busy “Building folio.” DO NOT click either of the buttons in the dialog box until you see the “Please Wait… Building Folio” alert appear and then disappear. Pay attention, because it might go by very quickly. When it’s gone by, click “No.”
Now, your Edge Animate project has been converted to an article and you can preview it in your browser or on your device. Timing is a consideration, of course. If you build an animation that is set to auto play, it is likely to play when you’re not looking at it, especially if it is not the article that opens when the folio opens. DPS will preload HTML articles adjacent to the article you are viewing, so those autoplay animations will animate and stop when you are not looking at them. If you place them onto an InDesign layout, then you have better control over when they play.
Share on Facebook
