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.

1 comment:

tdavis said...

Wonderful. thanks for the easy to follow steps!