Lately I’ve been spending a lot more time working with Adobe Edge Animate, Adobe 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:
- http://chrisgannon.wordpress.com/2012/07/03/jquery-3-d-with-adobe-edge-and-greensock/
- http://chrisgannon.wordpress.com/2012/09/27/3d-card-flip-using-adobe-edge-animate-and-greensock-timelinemax/
- http://chrisgannon.wordpress.com/2012/10/25/3d-animating-cube-in-adobe-edge-and-greensock/
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.
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.
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!