I have a new article available on the Adobe Developer Network that explains how to protect your DPS content on your iPad.Share on Facebook
Follow me on TwitterMy Tweets
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.
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
I get the question all the time: “How can I embed a YouTube video into my DPS project?
My answer: a YouTube video that shows how to embed a YouTube video into your DPS project!
It is possible that InDesign won’t recognize the embed code that you copy and paste from YouTube, so you can always use the Object>Insert HTML option and paste your embed code there. If you want to use the video in a scrollable frame, this method won’t work in CS6. You will need to save the embed code to a file (called something like video.html) and point a Web Content overlay at it, allowing user interaction and turning on auto play.Share on Facebook
Often I get the question: how can my Web Overlay “know” where it is in a folio? Is there a way to determine the current folio, or article, or even what the name of the overlay’s HTML file? The answer can be found in my latest article in Adobe’s Developer Connection.
Be sure to have my DPS Examples app loaded on your iPhone or iPad!Share on Facebook
window.location.protocol will return
file: for app-based readers, and it will return
http: for browser-based readers. Using this, we can make a function to switch a div on or off based on the value of
Consider the following HTML snippet:
This very basic example loads the page and then fires the switching function at the end, so that it can “see” the two divs and therefore hide the appropriate one. If the reader is using an app, then
file: and the div called “webMessage” gets switched off. In order for it to work for you, you will need to provide two images to replace my
monkey.png. Put them in a folder along with an html file containing the snippet, make a Web Content overlay, and point it at the html file. Be sure to set it to auto play, and depending on the content of the divs, you might want to turn off “Allow User Interaction.”
The example also includes fonts to match the InDesign layout. In the App, I use the HTMLResources folder, about which you can learn more about in the help file for Hyperlinks. In the browser, I use fonts from Typekit, which is a web-based font service from Adobe that’s part of Creative Cloud Membership. You could also use Adobe Edge Web Fonts or other hosted web font services.
Now, to test how this works, you need to make a folio, add your InDesign file as an article, publish the folio into an app that has Web Renditions enabled and Social Sharing turned on in the Viewer. Notice the publish the folio instruction. In order to see the folio in a browser, you need to publish to a Viewer App and then socially share the article. Since Single Edition can’t use social sharing, this will only apply to customers who use Pro or Enterprise. In addition, in order to test whether this works, you will need access to a DPS Application account that has Web Renditions enabled and a Viewer App that has Social Sharing turned on. Once you’ve published, open the folio, browse to your app, and then share it by email with yourself to test.
Here is how the folio renders on an iPad:
…and in a browser:
The ease with which we can distinguish between readers in a browser and readers in an app allows publishers to provide content that can target users based on how they engage with that content, as well as to offer differentiated advertising. It also allows you to take advantage of browser features that won’t work on a tablet due to the limitations of the WebKit overlay, simply by making two versions of the HTML and switching on the appropriate div. Sometimes, simple solutions open up complex possibilities, and this is one of those solutions.Share on Facebook