A few weeks ago, a fellow Adobe colleague showed me a DPS publication that had an amazing design. All of the content looked great by itself, but what really made parts of it “pop” was that in certain areas there was a 3D parallax effect, which made it feel like you were looking into an image that had depth. You could rotate the device and see what’s hiding behind a person, or around the corner of a building.
Here’s what I mean… on the surface the image looked static, but as I rotated it, elements shifted to give the illusion of depth. The background and foreground elements all moved at different rates:
I thought this was an incredible example of added interactivity and immersive experiences, and it’s not really that difficult to implement. In fact, I put together this tutorial to show exactly how you can create these types of effects in your own compositions.
To create this kind of an effect, the first thing you need to do is break apart an image into layers – note: you may need to synthesize edges so that there is an overlap in all transparent areas. Then you need to add interactivity in HTML. Align those images so that their default state looks just like the still image, then move the images based upon the device orientation. I move the foreground one way, keep the middle content more or less stationary, and move the background content the opposite direction (all based upon which way you are rotating the mobile device). Since this is all HTML, you can take this content and use it on the web, or import it into Adobe InDesign to export a DPS digital publication.
Step 1: Create Layered Images
You can either create your own layers, or break apart an existing image into layers so that each individual layer can be placed over top each other to form a seamless composition. In this case, I separated the strawberries, the rows of plants, my daughter, and the sky out to separate layers.
To achieve this, I used the following in Photoshop:
- Quick Selection Tool
- Magic Wand Tool
- Content Aware Fill
- Photoshop Generator (to automatically export image layers)
Yes, I did this quickly, and there are still some artifacts visible from the layering process. 🙂
Step 2: Create Edge Animate Composition
Next, pull all of those images into an Edge Animate composition so you can create the parallax behavior on the timeline. I actually used the exact same technique that fellow Adobe evangelist Paul Trani uses in his parallax scrolling example.
The only difference in mine is that I added some simple HTML and JavaScript to handle device-specific behaviors. I added the following:
An HTML meta tag to the root HTML file to prevent device scaling:
[html]<meta name = "viewport" content = "user-scalable=no, width=device-width"/>[/html]
JavaScript to disable touch interactions (prevents touch scrolling):
[js]document.addEventListener(‘touchstart’, function(event){
event.preventDefault();
return false;
});[/js]
JavaScript to handle device orientation – this jumps to a specific point in time in the timeline animation based on the device orientation:
[js]window.ondeviceorientation = function(event) {
var delta = Math.round(event.beta);
switch (window.orientation) {
case 0:
delta = Math.round(event.gamma);
break;
case 180:
delta = -Math.round(event.gamma);
break;
}
var position = 15000 + (delta * 400);
position = Math.floor(position);
sym.stop(position);
console.log(position);
}[/js]
Update 1/7/2014: I added logic to support both landscape and portrait orientation.
Be sure to add both of those JavaScript snippets inside of the creationComplete event for the Stage. I also over-exaggerated the movement in the timeline. I think it would look better with slightly less (more subtle) movement.
At this point, you could publish the composition and use it on the web – there’s nothing stopping you at all. In fact, you can check it out here, just load it on an iPad and rotate the device to see the effect. However, please keep in mind that 1) I haven’t added a preloader, 2) the assets are non-optimized and are all retina size , 3) I don’t have it auto scaling for the viewport size, so it will only look right on a retina iPad, and 4) I have only tested this on an iPad – no other devices.
Note: You could also do this without using Edge Animate, but you’d have to hand code the HTML/JS for it.
You can download the source for the Edge Animate project here.
Step 3: Include in InDesign/DPS Composition
To include this in a DPS publication, all that you need to do is export an Animate Deployment Package (.oam file) from Adobe Edge Animate. You can then just drag and drop this into InDesign for inclusion in a DPS publication.
Be sure to check out the DPS Getting Started Guide to learn more about DPS, and check out the docs on Web Content Overlays to learn about HTML usage inside of DPS publications.
If you aren’t already a member of Creative Cloud, join today to take advantage of all of our creative tools!
Update: After publishing this I realized that the movement of the plants should actually be reversed. If you view this link, you’ll see the updated motion (which looks more realistic), but I can’t update the video that’s already been published.