Monday, September 26, 2011

DPS: Stop a video at the last frame

A technique being used by many publishers of content-rich tablet apps such as magazines is to have a video play on the cover or the first page of a feature, and then have the video "freeze" at the last frame. This can be done using Adobe Digital Publishing Suite. Johannes Henseler first documented the basics of this clever workaround. I'm going to provide a little more detail to help you make the video transitions seamless.

1. Create the video using your preferred tools for video or animation. Adobe After Effects is a good tool for this. If you want the headline and body copy of the article to appear while the video is playing, include that in each frame of the video. Save the video as an mp4 file with h264 encoding, compressed as small as possible.

2. Open the mp4 video in Adobe Photoshop.

3. Use the Animation (Timeline) panel to scrub to the first frame of the video.

4. (THIS STEP IS NO LONGER NECESSARY WITH iOS 5. iOS 5 FIXED THE EXPOSURE CHANGE PROBLEM WHEN VIDEOS PLAY IN DPS) Choose Image > Adjustments > Brightness/Contrast. Fill in the dialog exactly as shown below, and click OK. On the iPad, whenever a video is played in DPS, there is a noticeable exposure change. This sets this first frame to match the exposure of the playing video exactly.

5. Choose File > Save As, and save the first frame of the video as a JPEG image, with Image Quality: High.

6. Use the Animation (Timeline) panel to scrub to the last frame of the video.

7. Choose Image > Adjustments > Brightness/Contrast. Fill in the dialog as shown in step 4.

8. Choose File > Save As, and save the last frame of the video as a JPEG image, with Image Quality: High.

9. Place the mp4 video in InDesign, and position it on the page as desired.

10. With the video selected, set the video settings in the Overlay Creator panel as shown below.

11. BEHIND the video, place the JPEG files for the first and last images that you saved in steps 5 and 8. Be sure these are perfectly aligned with the video.

12. Select both JPEG files, and convert them to a Multi-State object by clicking on the Convert selection to multi-state object button at the bottom of the Object States panel.

13. In the Multi-State Objects panel, select the JPEG image that represents the first frame, and name it "start" and name the other image "end". Make sure that the "start" state is at the top of the panel, and is selected.

14. With the multi-state object selected, fill in the Slideshow options in the Overlay Creator panel exactly as shown below.

Here's why all this is necessary. If you only include the video, and not the multi-state object, a white screen will flash briefly before the video plays, and when the video is done playing, it will disappear and all that will remain is a white screen. The multi-state object fixes this. The first "state" of the multi-state object will appear briefly before the video plays. Then it will be replaced by the video. While the video is playing, after 2 seconds the multi-state object will advance and display the last state. But since the video is still playing, you won't see the multi-state object advance. When the video is finished, it disappears, revealing the last state of the multi-state object.

Thursday, September 15, 2011

Image resolution for iPad publishing

Don't miss this post I just wrote for InDesignSecrets:

What is the minimum image resolution required when designing for the iPad? The answer might surprise you...

Wednesday, September 14, 2011

Photoshop Extended for DPS

If you are planning creating apps with Adobe InDesign and Adobe Digital Publishing Suite, I strongly recommend that you have Adobe Photoshop CS5 Extended in your tool set. Here's why.

If you're not aware, Adobe Photoshop CS4 and newer comes in two "flavors": Photoshop and Photoshop Extended. Both versions are exactly the same in every way, except that Photoshop CS5 Extended has some extra features specifically for:

1) 3D image creation, editing, and painting
2) Motion graphics editing
3) Scientific image analysis.

If you're creating Apps with Adobe Digital Publishing Suite, you'll probably be including video in some capacity. Yes, Adobe After Effects, Adobe Premiere Pro, and Adobe Media Encoder all are wonderful tools for working with video, if you know how to use them. But Photoshop is a tool that most of us are reasonably adept with. So it's really nice that Photoshop CS5 Extended has some features for working with video and animation.

Specifically, here are some tasks that I've used Photoshop Extended for recently on DPS app projects:

* Extracting the last frame of a video sequence and saving it out as a JPEG. This is a necessary step with DPS if you want to make a video appear to stop on the last frame.

* Saving each frame of a video clip to a separate, sequentially numbered JPEG file to use with the DPS image sequence feature.

* Cropping a completed video to a new aspect ratio to better fit a DPS screen layout.

If you have Creative Suite Design Premium, Web Premium, Production Premium, or Master Collection, you have Photoshop Extended. If you have Creative Suite Design Standard, you only have Photoshop. Information on how to upgrade can be found here.