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!

  • Pingback: Enabling Gestures in Edge Animate Compositions | ANDREW TRICE()

  • COMALite J

    3D transforms are superior to 2D even if the effect that you want can be done entirely in 2D, even if the desired effect has no perspective nor 3D depth effect whatsoever. Why? Because most modern browsers leverage the 3D acceleration hardware in the GPU to perform 3D transforms, but do not for 2D transforms.

    Since this hardware is designed to give visually smooth results for modern 3D games with scenes and effects orders of magnitude more complex than you’d likely want to do on a web site or DPS project, it has more than enough oomph to provide a much smoother response for even relatively low-powered portable devices that have GPUs, and also take considerable load off of the CPU, thus making other tasks smoother and more responsive as well.

    In short, by using 3D transforms even to perform 100% 2D animations, you offload much of the animation computation load to the GPU where it belongs. Not so with 2D transforms. Those are handled by the graphics hardware blitter accelerator engines, which are in general nowhere near as powerful and well optimized, and require much more CPU intervention.

    The next Edge Animate should default to doing 3D transforms for this reason. It should even convert existing 2D transforms into equivalent 3D in any new loaded project unless told in a Preference not to do so. In fact, they should probably strip out the 2D animation code entirely, except for the purpose of converting to 3D. If you really want to do CSS3 2D transform animation for some unfathomable reason, you could use the older versions.