DPS Tips HTML5 Examples

In DPS Tips, I included several HTML examples that are used in Web Content overlays. I’ll attach the source files for these effects.

Scratch Off

Let’s start with the scratch-off effect example.


Download ScratchOff.zip (as used in DPS Tips)

Download ScratchOff_simple.zip (no extra text or borders)

  1. Create two images the same size.
  2. Name them “foreimage.jpg” and “backimage.jpg.”
  3. Unzip the file, and replace the foreimage.jpg and backimage.jpg with your images.
  4. Rename the scratch_off_v.html file, if necessary. Change the suffix to _h for horizontal-only folios or remove the suffix for dual-orientation folios.
  5. Create a Web Content overlay the same size as your images.

Continue reading…

Viewing DPS Tips on a Computer

In the DPS forum, people frequently answer questions by pointing to the such-and-such article in DPS Tips to see an example and steps. In response, several people have mentioned that they don’t always have access to an iPad or other device to view DPS Tips. You don’t need an iPad. If you know where to look, you can view all the DPS Tips articles on a computer.

I used the social sharing feature to make all of the folios available in most computer browsers. If you click the following links from an iPad, you’ll jump to the first article of the issue in the DPS Tips app. Click any of these links on a desktop or laptop computer (or a new Surface tablet), and you’ll see a “Web Viewer” version of the articles in each issue.

DPS Overview

Overlay Basics

Advanced Overlays

DPS Features

HTML Effects


In Web Viewer, click the icon in the lower left corner to switch to a different orientation. Click the icons in the bottom center to view different articles. Click the icons in the lower right corner to view different pages in the article.


Article displayed in Web Viewer. (Click to view larger image.)

Note that not all features are available in Web Viewer. For example, panoramas are not yet supported. You’re better off using DPS Tips on an iPad or another mobile device, but if you’re away from your iPad, use these links.


DPS Health Status Page

The new DPS Status page shows ongoing issues with DPS servers as well as planned maintenance. If you’re a DPS publisher, you’ll want to bookmark this page or opt in to receive email notifications. If you know you’re going to publish your new issue at a specific date and time, you’ll want to check the DPS status page to see if maintenance is planned for that time period.

If you wish to receive email notifications when the Adobe DPS team updates the DPS Status page, go to the DPS Status page and specify your contact information in the “Receive Updates” section.


Again, here’s the DPS Status page.


DPS Sections

The Sections feature is new with the v24 release. This feature is primarily intended for newspaper publishers who want to allow their customers to download only specific sections of a folio, such as Entertainment, Sports, News, and Lifestyle.

How do you create Sections?

Simple. Go into the Folio Producer Organizer and open a folio in the Folio Producer Editor. Specify a section name for each article. Make sure that you specify the same section name for at least two articles. Section names are case sensitive, so take care when adding values. Copy/paste is a good idea.

If you don’t specify a section name for an article, that article gets downloaded when any other section is downloaded. You might want to leave the section name blank for articles such as covers and tables of contents.

Specify section names in the Folio Producer Editor. (Click to view larger image.)

You can also use the sidecar.xml file to specify section names for articles in a folio.

Once you specify sections for the folio, you need a v24.1 or later viewer to see the sections.

Continue reading…

Creating DPS Folios for Android Devices

This article used to contain a bunch of complicated information about various options for targeting the various Android models. However, now that the native Android viewer is available, the following articles are better resources:

Building native DPS apps for Android devices

Differences between iOS and Android viewers

DPS supported features list

Building DPS apps for Windows Store

Structuring Files for DPS

If you’re using the Adobe Digital Publishing Suite to create apps for mobile devices such as the iPad and Kindle Fire, it’s important to structure your source files appropriately. There are two main reasons for structuring files appropriately:

  • To import articles, re-create folios, or create folio renditions for multiple devices.
  • To transfer files from one computer to another.

Continue reading…

Link to DPS App Using Custom URL Scheme

The “Optional URL Scheme” option in Viewer Builder is a relatively obscure feature that can come in handy. If you’re viewing this blog post on an iPad or iPhone in mobile Safari, tapping the following link opens the DPS Tips app if you have it installed (and updated to the newest version):


NOTE: If you click this link from a computer browser, you get an error message. Similarly, if you tap the link on an iPhone or iPad on which DPS Tips is not installed or updated, you get a “Cannot Open Page” error message. It’s useful only when you tap this link on an iOS device that has the newest version of DPS Tips installed.

Continue reading…

DPS Tips Paywall URL

This is a paywall test for the new social sharing feature in v20. When you reach the limited to the number of articles you can read in the desktop web viewer, a paywall appears. I previously set the threshold to 3 for the DPS Tips app, and I just recently updated it to 12. Obviously, setting up a paywall is more useful with retail content than with a free educational app. Again, I set up my paywall for demonstration purposes.

[Note: I disabled the Web Viewer Paywall entirely in DPS Tips. To see an example of how the paywall can be used, see this Newsweek cover article and swipe to the next article.]

For obtain full access to the DPS Tips app, click this link: DPS Tips. The new version with social sharing enabled is available in the App Store. You can also download the DPS Tips app on your iPhone.

See the Using social media help article for more information on the workflow. Also see this article about setting up social sharing for Facebook.

DPS Tips iPad App Updated

Apple approved the new version of the DPS Tips app.

Instead of simply updating the app, which is usually the easiest approach, I recommend that you remove DPS Tips and then install it from the App Store. Re-installing is especially important if you have an iPad 3. A current limitation prevents the high-resolution rendition folios from being available if the library has ever “noticed” the low-resolution folios, even if you haven’t downloaded them. This issue should be fixed in one of the upcoming releases. If you’re creating renditions for your folios, remember to publish both renditions before you notify users with a push. To be safe, the best approach is to publish the high-resolution rendition first.

The DPS Tips has been approved for the Apple App Store and Android Market, though I haven’t updated the Android content. Amazon still hasn’t approved the app due to a beta in-app purchase issue that should be resolved soon.

Here are some changes I made to the app:

* I added renditions by using one set of 1024×768 source files. If you have an iPad 3, the cover images in the library should include “2048×1536.” If not, remove and re-install the app.

* I divided the old overlays folio into two folios: one basic and one advanced. The advanced folio includes a few new articles and an updated article on pullout tabs. The new pop-up video article includes a rocket launch effect that’s so cheesy not even my 8-year-old son liked it. Colin even asked me not to credit him for the video. I might have to revisit that example.

* I added a new article to the Effects folio that includes an HTML5 scratch-off example. It links to a Cookbooks recipe where you can download and repurpose the HTML code.

Here are some folio size stats. For some reason, the PDF files were relatively much larger than what I had seen in my testing. I need to ask around about a possible bug.

  • Folio Basics: iPad1 – 33 MB (PNG) / iPad3 – 47 MB (PDF)
  • Overlay Basics: iPad1 – 50 MB (PNG) / iPad 3 – 90 MB (PDF)
  • Advanced Overlays: iPad1 – 41 MB (PNG) / iPad 3 – 85 MB (PDF)
  • Effects: iPad1 – 5 MB (PNG) / iPad 3 – 7 MB (PNG)
  • Single Edition: iPad1- 4 MB (PNG) / iPad 3 – 12 MB (PDF)

Differences Between PDF and JPG/PNG Image Format for DPS

When the PDF image format was first made available for DPS articles, the format was limited. Most importantly, interactive overlays were not supported in PDF-based articles, so most designers stuck with the JPG/PNG image format unless they wanted users to be able to pinch & zoom on a page.

With the v18 release of the tools, that changed. Now, all interactive overlays in PDF articles work just as well as they do in JPG/PNG articles.

With the new retina display iPad, using the PDF format has now become the recommended choice for image format. PDF articles are smaller than JPG/PNG articles, and vector content is maintained, resulting in improved scaling. However, there are still some differences between the PDF and JPG/PNG image formats that you should be aware of.

Continue reading…