Monday, August 26, 2013

6 things to know about DPS embedded video

Adobe InDesign and Adobe Digital Publishing Suite (DPS) make it easy to embed video content in mobile app projects. Here are a few things you should know:

1. Video must saved in MP4 format with .H264 encoding. Adobe Media Encoder (included with InDesign) and the free Handbrake utility are both good tools for converting and compressing video. Be careful, since some video tools add an ".m4v" extension to the file name when you save an mp4 file. InDesign won't allow you to place a file with an m4v extension. You''ll need to change the extension to mp4 in order to place it in InDesign.

2. Compress video to a maximum of 10mb/minute. To keep file size and download speeds reasonable, you'll want to compress your video as much as possible, while retaining acceptable quality. If your .mp4 file is more than 10mb in size for each minute of video, use Adobe Media Encoder or Handbrake to further compress the video.

3. Video can play full-screen. Select the video, and specify this in the Folio Overlays panel. For the best quality full-screen video results, size your video to 1024 pixels wide. Even though the iPad 3 and 4 feature screens that are 2048 pixels wide, saving video at this resolution results in huge file sizes with only a very marginal increase in quality. In fact, if you need to save file size, consider saving full screen video at 800 pixels wide. You may be satisfied with the quality, and save some significant file size. If your app is portrait orientation, full-screen video will play 768 pixels wide, but the built-in video player on the iPad will allow the users to rotate the iPad when viewing full screen video, so you should test your video in landscape orientation.

ScreenSnapz001

4. Video can't be cropped or resized in InDesign. Well, actually, you can crop and resize video in InDesign, but when the video plays, it will ignore the cropping and resizing. In other words, videos will always play at the exact pixel dimensions they were created at, (except for full-screen video). So, if you want a video to play in a 200 x 300 pixel area on the screen, you will need to crop and scale the video to those exact dimensions. Note: You can crop and scale video in Photoshop CS6 and newer as easy as cropping and scaling a still image .

5. Video is its own button. In other words, simply tapping a video object in a DPS app will cause the video to play. This is really handy. It means that typically, you don't need to create buttons to play and pause video. For example, if you place a 300 pixel wide video that you want to play in a 300 pixel wide frame, just place it in InDesign, and it will play as soon as it is tapped. In the example below, tapping anywhere on the video will cause it to play.

ScreenSnapz002

You can use this to your advantage to easily make a full-screen video play. In the example below, I've placed a video, and then set the "Poster" to None, so that the video is invisible. Be sure that Frame Edges are displayed (View > Extras > Frame Edges) so that you can see the video "content" of the frame.

ScreenSnapz003

Next, double-click on the frame to select the contents, and resize the contents to the size that you want to be the tap region. Since the video is going to play full-screen anyway, you can scale and stretch the video to any size you wish.

ScreenSnapz004

Last, select the frame and resize the frame to fit the content (Object > Fitting > Fit Frame to Content), and position a play symbol (an InDesign polygon) on top of the video. Done. Video is its own button.

ScreenSnapz005

 

6. Video always jumps to the front of other page objects when it plays. This is good and bad. Good, because you can use this to your advantage. In the example below, I've placed an InDesign polygon on top of a video clip that is not set to play full-screen. In this case, when the user taps the video, since the video will jump to the front when playing, the triangle will disappear when the video plays, and reappear when it is finished. This is nice. However, the fact that video jumps to the front when playing means that if you wish to mask a video by placing a shape on top of a video, you will need to use the trick described here.

ScreenSnapz006

Monday, August 12, 2013

How to determine DPS tool versions

Adobe Digital Publishing Suite is currently on a 2-3 month update cycle. Each new version is given a new release or version number such as "r27" (for release 27) or "v27" (version 27); the terms "release" and "version" being used interchangeably. Here's how to determine which version of the various DPS components you have installed.

DPS Desktop Tools

In InDesign, choose Window > Folio Builder to display the Folio Builder panel. In the Folio Builder panel menu, choose About.

ScreenSnapz001

You will see a dialog box displayed similar to the one below. I've highlighted the version number of the Folio Builder panel in dark blue, and the date of the folio builder panel in light blue (YYYYMMDD). I've highlighted the version of InDesign in red, and the version of the Folio Producer Tools in yellow. In InDesign CS6 and later, the Folio Builder panel and Folio Producer tools are installed together with a single installer.

ScreenSnapz002

Desktop Viewer

If you need to check which version of the Desktop Viewer is installed, either preview an article or folio on the Desktop, or run Adobe Content Viewer, located in your Applications > Adobe folder. Choose About Adobe Content Viewer from the Adobe Content Viewer menu (Macintosh) or the Help menu (Windows).

ScreenSnapz004

A dialog box with the Adobe Content Viewer version number will be displayed.

ScreenSnapz005

DPS App Builder

To check the version of DPS App Builder, find the DPS App Builder app in your Applications folder, and choose About DPS App Builder from the DPS App Builder menu (Macintosh) or the Help menu (Windows). Unfortunately, the DPS App Builder version number doesn't follow the same numbering system as the other components.

ScreenSnapz006

Adobe Viewer on your tablet

To determine which version of Adobe Viewer is installed on your tablet, open a folio in Adobe Viewer. Tap once in the middle of the screen to display the top and bottom bars of the DPS app interface. Then, tap twice quickly on the name of the app that is displayed at the top of the screen, and it will be replaced by the version number.

2013 08 12 21 28 42

2013 08 12 21 28 47

Wednesday, August 07, 2013

Beware of DPS slideshows that bleed

File this one as a bug, using Adobe InDesign CS6 and Adobe Digital Publishing Suite tools r27.

A client had a 3-state multi-state object (MSO) that bled off the top of the page, like this:

ScreenSnapz001

As you can see, the object in State 1 of the MSO, (as well as the objects in State 2 and State 3) bleed off the top of the page. The Slideshow is set to "Auto Play" in the Folio Overlays panel. But it refused to autoplay.

It turns out that Auto Play is ignored if any of the objects in the MSO bleed off the top or the bottom of the page. Simply cropping the objects to the edge of the page solves the problem.

ScreenSnapz002

I filed this as a bug using Adobe's Bug Report form.