Category Archives: Digital Publishing

More Device Motion Experiments with HTML & Adobe DPS

I wanted to follow up my last post on 3D Parallax effects in HTML or Adobe DPS, I’ve decided to release some of the other experiments that I’ve been exploring with device motion in DPS publications. Check out the video below to see two new samples, and a corrected version of the strawberries example from my last post (the plants were going the wrong way in the last post).

All three of these samples leverage the same basic technique for responding to device motion inside of a DPS publication. The motion-interactive components are implemented using HTML and JavaScript, and are included in publications as web content overlays. In JavaScript, it takes advantage of the ondevicemotion event handler to respond to the physical orientation of the device.

In all three of samples, the web content overlay is set to autoplay, with user interaction disabled. This way the HTML & JavaScript automatically loads and the scripting is active, but it doesn’t block interaction or gestures for DPS navigation. I also enabled “Scale Content To Fit” so that HTML content scales appropriately between retina and non-retina devices.

Adobe InDesign - Web Content Overlay Options
Web Content Overlay Options

Strawberries

The strawberries sample is identical to the one from my previous post. This is just a capture of the updated motion. You can access the full source project to this sample at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/strawberries

strawberries

Adobe San Francisco

The Adobe/inline content example is implemented in the same manner as the strawberries example. The large city image It is a two-layer composition created with Adobe Edge Animate. The foreground building and flag move independently from the background image. I used Photoshop to separate the content into layers and made them animate based on device orientation in the exact same fashion as the strawberries sample. All of the text and image content surrounding the cityscape panorama is laid out with InDesign.

adobe

You can check out the Adobe Edge Animate project at:
https://github.com/triceam/DPS-HTML-Samples/tree/master/adobe%20roof

AT&T Park/San Francisco Giants

The AT&T Park/San Francisco Giants example is implemented with basic HTML and JavaScript, no additional tools were used to create this interactive scenario.   The content on the left hand side was all laid out with InDesign. The content on the right side is the interactive HTML.

att_park

The image used in this example is a vertical panorama captured from a remote control helicopter. This image contains various perspectives that have been composited in Photoshop. The motion of the device is aligned to match the perspectives in the image/viewport; When the device is facing down, the image is looking down and when the device is vertical, the image faces forward. You can check out the vertical panorama image below. If you’re interested in creating a vertical panorama, be sure to check out this tutorial from Russell Brown.

Vertical Panorama over AT&T Park

The HTML and JavaScript used in this example is fairly minimal. The image is applied as the background of the root HTML <body> element, and the position of the background is shifted based upon the device motion event. This approach keeps the HTML DOM as flat and simple as possible.

Here’s the HTML that makes up this example:

[html]<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Parallax Vertical Background</title>
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/zepto.js"></script>
</head>
<body></body>
</html>[/html]

… and the CSS styles used to apply the background image.

[css]body {
background-image:url(‘att_park_vert_panorama.jpg’);
background-position: center;
}[/css]

… and the JavaScript used to shift the position based on the device orientation event. Note: this also uses the Zepto JavaScript library.

[js]window.ondeviceorientation = function(event) {
var gamma = event.gamma/90;
var beta = event.beta/180;
var temp = 0;

// shift values/motion based upon device orientation
switch (window.orientation) {
case 90:
temp = gamma;
gamma = beta;
beta = temp;
break;
case -90:
temp = -gamma;
gamma = beta;
beta = temp;
break;

}

// update positions to be used for CSS
var yPosition = 1200 – (beta * 2200);
var xPosition = -200 + (gamma * 300);
xPosition = Math.max( -300, Math.min( 0,xPosition));
yPosition = -Math.max( 100, Math.min( 1400,yPosition));
//console.log(xPosition, yPosition);

// apply css styles
var css = xPosition + "px " + yPosition + "px";
$("body").css( "background-position", css);
}[/js]

Textual content used in this example from: http://en.wikipedia.org/wiki/At%26t_park

Source code for the device motion in this example is available at: https://github.com/triceam/DPS-HTML-Samples/tree/master/ATT%20Park

All of the HTML, CSS and JavaScript code used for these examples is available in the GitHub repository at: https://github.com/triceam/DPS-HTML-Samples

Photorealistic 3D Parallax Effects in HTML or Adobe DPS with Adobe Photoshop and Adobe Edge Animate

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:

animation
3D Parallax Effects on a Device

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.

Break Apart Layers in Photoshop
Break Apart Layers in Photoshop

To achieve this, I used the following in Photoshop:

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.

Edge Animate Composition
Edge Animate Composition

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.

Including the Animation in an InDesign layout for DPS
Including the Animation in an InDesign layout for DPS

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.

Enabling Gestures in Edge Animate Compositions

As I mentioned in my last post, I’ve been working a lot lately with Adobe Edge Animate, Adobe InDesign, and Adobe DPS.  Here’s another post on that same subject.

Another request that I have gotten from some of our DPS customers is that they’d like to be able to implement gestures inside of the Edge Animate compositions that they are building for DPS publications. This includes double-tap gestures, swipe gestures, etc… Out of the box, these gestures aren’t supported, but you can add them to any Edge Animate composition without too great of an effort.

Below is a quick video showing Edge Animate Compositions that are taking advantage of both double-tap and swipe gestures.  Note: I intended these to be used inside of DPS, but I show them in Safari on iOS.  These gestures override the default mobile browser behaviors.

As I mentioned above, this isn’t something that is supported out of the box, but it is possible to add gesture features manually.

The links below are for the basic examples that I put in the video.  Both should work in desktop and mobile browsers:

For the double tap example, just perform a double tap/click gesture anywhere on the stage (the image area), and the animation will start again from the beginning.  For the swipe gesture, just perform a horizontal swipe in either direction with either your finger, or the mouse.

Gestures With Hammer.js

I leveraged the hammer.js JavaScript library to handle gesture detection since these gestures aren’t supported by default.  Hammer.js also enables other gestures, like long taps, pinch, rotate, etc…  However, I’m only showing double tap and swipe.  You can read more about hammer.js using the following links:

I used this exact setup procedure in both the double-tap and swipe examples.

To include this library, I first downloaded the hammer.js file, and saved it inside of the “edge_includes” folder.

hammer.js

Next, you have to disable the web view/browser default double tap behavior, which is to zoom in when double tapped.  You can disable the zoom on double tap by adding a viewport metadata tag inside of the Edge Animate project’s html file.  Open your project’s .html file (in this case “DoubleTap.html”, and add the following line to the <head>

[html]<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />[/html]

Example:

html

Next, we have to add the code inside of the Edge Animate composition to enable the gesture behavior.  The first thing you have to do is include the hammer.js library.  In this case, I wanted to add the gestures to the composition’s stage, instead of a particular element.  So, right-click on the stage in the Edge Animate Editor, then select  the “Open Actions for Stage” menu option.

open_actions

This will open the actions for the Stage instance.  Next, click on the “+” icon and select “creationcomplete”.  This will create a function that gets invoked once the Stage instance has been created at runtime.

creation_complete

In that function, first we need to import the hammer.js library.  Edge Animate compositions include the yepnope.js library, which is originally intended to detect if a browser includes a specific piece of functionality.  If not, then include a JS library so substitute that missing feature.  In this case, I am passing it a blank test to force it to include the hammer.js library.  The following function forces loading of the hammer.js library.  Once the library has been loaded into memory, it triggers the “init” function:

yepnope1

In the init function, we grab a reference to the stage’s element (div), then use hammer.js to add our gesture event handlers:

yepnope2

Now, we need to start looking at the individual examples…

Double Tap Gestures

In the double tap example, we have a simple timeline animation that plays sequentially.  At the end of the sequence the animation is stopped by a simple sym.stop() function call.  Here’s a quick preview of the setup in Edge Animate:

edge_double_tap

To add the double tap gesture, all you have to do is add a hammer.js event for “doubletap”.  In that event handler, we’re just calling sym.play(0), which restarts playback from the beginning of the composition. The full code for the creationcomplete event is shown below.  This is all that is needed to add the double-tap gesture to the composition stage instance:

[js]yepnope({
nope:[‘edge_includes/hammer.js’] ,
complete: init
});

function init (){

var element = sym.element[0];
var hammer = Hammer(element);

hammer.on("doubletap", function(event) {
sym.play(0);
});
}[/js]

Swipe Gestures

In the swipe gestures example, we have a simple timeline animation that plays sequentially.  However, at the end of each slide transition, playback is stopped by a simple sym.stop() function call.  Whenever we perform a swipe action, we’re either just playing forward, or playing in reverse until the next slide animation stops.  Here’s a quick preview of the setup in Edge Animate, note the stop points highlighted by the arrows:

edge_swipe

To add the swipe gestures, all you have to do is add a hammer.js event for “swipeleft” or “swiperight”.  In those event handlers, we’re just calling sym.play() or sym.playReverse(), depending whether it was a left or right swipe.  These play actions progress to the next animation sequence. The full code for the creationcomplete event is shown below.  This is all that is needed to add the swipe gesture to the composition stage instance:

[js]yepnope({
nope:[‘edge_includes/hammer.js’] ,
complete: init
});

function init (){

var element = sym.element[0];
var hammer = Hammer(element);

hammer.on("swipeleft", function(event) {
sym.play();
});

hammer.on("swiperight", function(event) {
sym.playReverse();
});
}
[/js]

With the swipe gestures, you can get some drag event conflicts on mobile devices.  If you run into this and you do not want the page to scroll, the scroll action can be prevented by capturing the touchstart event, and canceling the default behavior.  I didn’t add this, just because I wanted to keep this example very simple.

Source

Full source for each example can be downloaded from the links below:

Artwork used in these examples is from the Adobe MAX web site.  You should attend MAX, it’s going to be awesome.

Publishing

When you publish the composition from Edge Animate, the “hammer.js” file won’t be copied automatically, so make sure that you copy it to your publish directory before distributing the composition.

Adding Dimensionality To An Edge Animate Composition

Lately I’ve been spending a lot more time working with Adobe Edge AnimateAdobe InDesign, and Adobe DPS. If you aren’t familiar with these tools, Adobe Edge Animate is a tool that enables the creation of animated or interactive HTML content, Adobe InDesign is a desktop publishing design tool, and Adobe DPS is Adobe’s Digital Publishing Suite, which is used for creating digital publications from InDesign – everything from digital magazines, catalogs, corporate publications, education, and more.

In DPS publications, you can add interactive content inside of your digital publications by leveraging web content overlays. Web content overlays enable the embedding of HTML content directly inside of DPS pages.

So, you might be wondering, how does Edge Animate fall into this grouping? Well… From Edge Animate you can export compositions into a .oam package, which can be imported directly into InDesign for use with a web content overlay. You can read more about this process on Adobe Developer Connection.

I was recently asked by a customer “does Edge Animate support 3D transforms?”. Unfortunately, at this time 3D transforms are not supported in the timeline editor. However, you can add 3D transformations programmatically with JavaScript. Here are some examples showing how to integrate CSS3 3D transforms with Edge Animate compositions:

These can be great additions to the interactive experience, but I also wanted to share that you don’t always need 3D transforms to add dimensionality to an interactive experience. By leveraging 2D translation, scaling, and opacity you can easily create interactive experiences that have a feeling of depth.

Let’s take a look at a quick example. The image below is from screenshots of an Edge Animate Composition that I put together. On the left-hand side there is an anatomical illustration. On the right-hand side, that illustration has been broken out into separate layers, with emphasis placed on the topmost layer.

Edge Animate Composition With 2D Depth
Edge Animate Composition With 2D Depth

Images borrowed from Ely Greenfield’s awesome FlexBook anatomy demo.

Now, let’s look at that animation in action. Just click the link below to preview this animation in a new window.

Just click or tap on the image to see an animation that transforms the illustration on the left to multi-layered cutaway on the right hand side.

So, while this animation doesn’t leverage any actual three dimensional elements, it leverages those 2D transforms to visually create a sense of depth. Here’s how it works:

  • First, there are 3 images. The bottom-most image shows the skeletal structure and body outline. The middle image shows parts of the digestive system, and the top-most image shows another layer of major organs. The top 2 images have transparency so that they do not completely hide content from the underlying layers.
  • The default state is that all of these images are aligned so that they appear as a single image.
  • Once you click/tap the image, a set of two-dimensional animations take place providing a sense of depth and emphasizing the top layer. The underlying layers have both a scale and opacity change. The bottom layers are smaller, and less opaque. The underlying layers also have a two dimensional (top/left) transform. In this example, I’ve tried to align both the scale and top/left transforms to correspond with a 3D point of origin to the left side.
Edge Animate - Anatomy Composition
Edge Animate – Anatomy Composition

This technique provides the illusion of three-dimensional depth, even though we aren’t actually performing any kind of translation, rotation, or deformation on a three dimensional coordinate system. AND this can be implemented completely with the timeline. So, you don’t have to be a programmer to add a dimensional feeling to you Edge Animate compositions. This effect was achieved simply by using the timeline editor and visual workspace.

You can preview this animation in a new window, or download the full source using the links below:

Enjoy!

Welcome Appliness!

Appliness is a new digital magazine and the first of it’s kind to focus entirely on web application development!   Appliness was created entirely using Adobe Digital Publishing Suite, and the effort was lead by our own Michael Chaize.   Go download a copy today!  It’s also FREE!

 

Be sure to also check out how this magazine was created using Adobes Digital Publishing Suite, and check out the video preview above. Interested in contributing in Appliness or providing us with valuable feedback? If so, you’re in luck–let us know here: http://appliness.com/give-us-feedback/. We’d love to hear from you!