Prerequisite knowledge
 
  • Intermediate Adobe Photoshop Skills
  • Experience in creating animations in Adobe Edge Animation
  • Basic knowledge of HTML and JavaScript
  • Knowledge of Adobe Digital Publishing Suite
User level: Intermediate
 
Required Adobe products (retail)
 
Sample files
 
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.
 
 
NoteIf you have questions about this article, use the DPS forum. Please don’t contact technical support with questions about Adobe Developer Connection articles.

 
Introduction

The iPhone’s and iPad’s built-in accelerometer has created a world of opportunities for developers to create applications and experiences that are engaging, innovative, creative and fun. The accelerometer is a device that can measure the force of acceleration, whether caused by gravity or by movement. Because of that, it can also sense the angle at which is it being held. The movement and tilt of the device is noted by the sensors, so it can tell which way the screen is being held. This allows it to automatically adjust the visual output to make it appropriate to the direction of that screen. In this way you can view lists with the screen held vertically and watch videos with the screen held sideways. You can also play hundreds of games that are using accelerometer. So, why not to use that in the DPS publications? This technology gives a great opportunity for publishers to design and build more interesting, more interactive and exciting interfaces, digital ads and experiences. In this article I’ll show you the very basic way of using Adobe Edge Animate to build accelerometer driven effects for the DPS Publications. I hope that my example will inspire you to find new ways of using and building these scripted animations.
 

 
Overview

In this article I will focus on building a 3D Parallax scrolling effect for our DPS publication. Parallax scrolling is basically an animation technique in which background images move more slowly than images in the foreground or they are moving in other directions, creating the illusion of depth and immersion.
 
Accelerometer effect
Figure 1: Accelerometer effect
 
The word “parallax” is taken from astronomy and defined as the apparent displacement or the difference in apparent direction of something when viewed from two different vantage points. In the world of digital graphics, programmers and motion designers can achieve parallax scrolling effect in different ways. One involves creating different layers that will move at uneven speeds or different directions when rendered in a browser or other viewer (very popular technique in Web Design especially on Landing Pages and story telling websites See Examples). Alternately programmers can create “sprites”, or independent parts of an image, often in the form of avatars or characters that move within digital landscape. The cycling of repeating patterns is another technique that has been useful in many video game projects and other animations.
 
In our example, we are going to use the first and most popular technique.  We’re gonna break apart an image into layers, create parallax animation, add interactivity in HTML and JavaScript and import that into the DPS Publication.
 

 
Preparing an image

First thing we need to do is to prepare our image. We can create our own layers (for example in Adobe Illustrator if we are designing a vector based image) or we can break apart an existing image (in this case an oldschool photo of Eiffel Tower) into separate layers. In our example we will use Adobe Photoshop to break apart our image into layers so that each individual layer can be placed over the top of each other to form a composition. So, first we have to extract the people in the foreground from the photo and create a new layer for that. We can use Pen Tool, Quick Selection Tool or Magic Wand Tool to cut that out from our picture. Then we have to fill in the areas that were cut out from the original image so they can be layered properly. I’ve used Clone Stamp Tool and Content Aware Fill to do that.
 
Figure 2: Creating layers in Photoshop
Figure 2: Creating layers in Photoshop
 
Next, we have to repeat this action and extract the bird, and Eiffel Tower. In the end let’s add some typography to our image to make it more interesting. I’ve used Didot typeface, rasterized it and added little noise effect to give it that grainy look. Last thing we need to do is to export our separate layers into transparent PNG’s. We have to remember that we’re going to animate our objects horizontally so it’s good to have bigger images than our stage size in Edge Animate. So my Image Size in Photoshop is 768px x 1024px but my layers are slightly bigger. This is my final image:
 
Figure 3: Final image in Photoshop
Figure 3: Final image in Photoshop

 
Creating an accelerometer driven animation

 
Creating the animation
Now we can jump into the Adobe Edge Animate. First thing we need to do is of course create a new file. I’m creating a portrait orientation DPS Publication for iPad Air so my stage size will be 768 x 1024 pixels. Then we have to import our PNG files (File > Import) and organize them on the stage. The hierarchy is very important here. Our background (sky and buildings) should be at the bottom, then our typography, Eiffel Tower, bird and the foreground at the top.
 
To create a parallax effect we have to build our animation in a certain way. Things that are in our foreground should move in other direction than things in our background. That will give us a 3D type of effect. Let’s start with our foreground. We want this layer to move from left to right. At the beginning of our timeline (playhead set to 00) let’s create a keyframe for the X property (in the Position and Size panel) and set it to -147px. Then we need to grab the playhead, drag this out to 30 second and in the Timeline Panel next to the Left property in selected layer, add second keyframe. This time let’s set the X property to -88px. Once we do that, Edge will automatically create a transition between this keyframes. If we grab the playhead and drag it back and forth, we can see that the animation was created. We can also preview this by coming over to the playback section and clicking Play button (or pressing Space on out keyboards). Now we have to repeat this action and create motion for other layers. Remember that we want things that are in the back to move from right to left (in the opposite direction than the foreground). We can experiment with the speed of these animations by setting up different values for the X properties on the keyframes for each layers. In this case, my foreground and background have wider range of motion than the Eiffel Tower and typography. This will create a nice parallax effect.
 
Right now our animation looks good but we want to add one more thing to spice it up a little bit. We can for example add a blur effect to our typography. So if our device (iPad) will be at the center (accelerometer on 0) we want our Paris sign to be sharp. But as we rotate the device to right or left we want it to get blurry. There is a very easy way to do that. First thing we need to know is that when we are in the middle of our timeline (15 sec), this is how our animation is going to look like when we will hold the output device in the center. Everything on the left from that point (from 0 to 15 sec) – this is how the animation is going to look like when we will rotate the device to the left; and everything on the right from that point (15 to 30 sec) – when we rotate it to the right. This is very important because it allows us to create different effects based on the rotation of the device.
 
Let’s select our typography layer (lay2 in my example) and find in the Filter Panel a Blur property. Now we can create 3 keyframes for that:
 
     -   1st keyframe at 0 sec with value of 4px
 
     -   2nd keyframe at 15 sec with value of 0px
 
     -   3rd keyframe at 30 sec with value of 4px
 
Once we do that Edge should create an transition for us. If not – select those 3 keyframes in the Timeline Panel, right-click on it and choose Create Transition. We can preview this simply by playing our animation.
 
Right now our animation is ready for some code!
 
Figure 4: Edge Animate
Figure 4: Edge Animate
 
 
HTML and JavaScript
Now it’s the time to connect our animation with the accelerometer in the iPad. To do that we have to add some simple HTML and JavaScript to handle device – specific behaviours.
 
First we need to do is to add an HTML meta tag to our root HTML file to prevent the device from scaling. To do that, we have to save our Edge Animate file, find the HTML file on our disk (“paris-parallax.html”), open it with our favourite editor and add this meta tag in the head section:
 
<meta name=“viewport” content=“user-scalable=no, width=device-width”/>
Then just save the file. When we go back to Edge Animate, it will ask us do we want to reload the composition (because it was changed outside). Of course we want Edge to update it’s files so let’s click “Yes”.
 
Now we have to add some JavaScript to our project. Let’s create an event on the Stage called creationComplete. To do that – find the Stage layer which is at the top of our layers in the Timeline Panel and press the little brackets icon on the left to open the actions panel. In this panel from the dropdown menu choose creationComplete. When you can’t see the dropdown, just hit the Plus button on the top-left corner. CreationComplete event works well for initializing variables and text because it runs before other actions in this composition. We’re going to put all of our JavaScript code inside this event.
 
First, we need to stop the playback of our animation:
 
sym.stop();
Then let’s add a JavaScript to disable touch interaction (it will prevent our animation from touch scrolling)
 
document.addEventListener('touchstart', function(event){ event.preventDefault(); return false; });
In the end we have to add a JavaScript to handle device orientation. This will basically allow to jump to a specific point in the timeline based on the device orientation:
 
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); }
Remember to add both of those JavaScript snippets inside of the creationComplete event for the Stage. It won’t work if we add them into another event or another action in the timeline.
 
Figure 5: JavaScript in Edge Animate
Figure 5: JavaScript in Edge Animate

 
Publishing

At this point we can publish the animation and test it with the web browser on our device. To do that we can just go to the Publish Settings, choose Web as our target and publish it. But we want to do more than that – we want to include this animation into a DPS Publication. All we need to do is export our composition from Edge Animate as a Animate Deployment Package (*.oam). This time in Publish Settings we have to choose the second option for our publish target – Animate Deployment Package. Then choose your target directory, name for this publication and hit Publish.
 
Figure 6: Edge Animate Publish Settings
Figure 6: Edge Animate Publish Settings
 
Next we can jump into the DPS. In InDesign we need to create a New Document with the same Page Size as our composition in Adobe Edge Animate. Then we can drag and drop our output *.oam file (or import it by pressing CMD + D or Control + D) into the new document and place it on the page. We can now create a new Folio or add that document as an article to an existing folio. As we can see InDesign has automatically created Web Content Overlay from our .oam package. In this panel we have to turn on the Auto Play option and turn off Allow User Interaction option. Then we can just update our article and we are ready to go. Now we can test our animation inside the DPS Publication.
 

 
Where to go from here

As you can see this is a very simple example on how to create accelerometer driven animations for the DPS Publications. With those two snippets of JavaScript and one line of HTML you can build many different kinds of animations and they will work perfectly in your publications. Don’t be afraid to experiment with the different approaches, filtering techniques and effects. I hope that this article will inspire you to create your own ways to use accelerometer.
 

Comments are currently closed as we migrate to a new commenting system. In the interim, please provide any feedback using our feedback form. Thank you for your patience.