Animate Headlines (or other things)

______________________________________

Important Notice: This workflow is not recommended anymore. It uses Adobe Wallaby to convert flash files to HTML. Please use Adobe Edge for a better HTML-Animation experience and better support. —Johannes

______________________________________

This is a detailed post for people working with InDesign on digital publications. I will explain the steps necessary to create simple animations in your digital publication like the one you see above (smooth, of course).

Currently, native InDesigns animations are not yet supported in the Adobe Digital Publishing Suite (drop10). In the last few weeks, some publications used the effect of automatic multi-state-objects or even short movies to create the illusion of real animations.

Following is the process of creating animations without going through Flash or AfterEffects.

In short:

An InDesign document containing an animation is exported to FLA
Adobe’s Wallaby Technology Preview is used to convert this FLA to HTML5
Editing the css stops the animation from looping
The HTML5-file gets imported as WebView into the magazine layout

Update: Important Notice

This blog post is a bit older now. These animations will work on the iPad, but not on the Desktop Preview or the Android Viewer.

Update 29-06-2011

Google just released Swiffy, an SWF to HTML5 converter. I tried it, and swf files exported from InDesign were not supported, because they use ActionScript 3. But that may be supported in the future. For now, using Swiffy does’nt help.

In detail:

1. Prepare Page Layout

In the example above the headline gets animated. In the layout the space for the headline is preserved:

In this example a box of 500 × 220 px is reserved for the headline.

2. InDesign Document for Animation

An new InDesign document with these dimensions will contain the animated title:

Here “Fly in from left” is used on the headline and the black bars, separately. Try out other animations, Wallaby does a great job in converting them.

The duration differs, so they move in different speed. You can use InDesign’s PreviewPanel to get a feeling of the movement. Note: InDesign plays the animations separately, in HTML they will be played simultaneously later.

3. Export to FLA and convert to HTML5

James Fritz vom InDesignSecrets posted a detailed explanation how to export your InDesign Animation to HTML5, but we will not use Flash to stop it from looping.

To get most accurate results with typography, use “Convert to Outlines” on text.

Use Adobe’s Wallaby preview to convert the FLA file to HTML5 with css3 and javascript.

You can test your converted html animation in a modern webbrowser (use Safari, Chrome or Firefox 4).

A sidenote on files and file-structure: It might get confusing with all these files. Try to have a very distinct naming scheme for your files and stick to it!

In this case I hold the animation file (Berlin-Title-Animation.indd) in a subfolder next to my layout (anim-title_h.indd). The exported FLA file will be called exactly like the animation file: Berlin-Title-Animation.fla. When convert to HTML5 in wallaby, I choose the same HTML-filename: Berlin-Title-Animation.html.

4. Stop animation from looping

Because InDesign strips off Actionscript during flash-export, the flash file loops and so does the HTML5-animation. To stop that you need to edit the css-file generated by Wallaby (Petteri Paananen figured this out. Thank you!)

Search and replace every “infinite” with “1”, so the animations will be played only once.

5. Use the animated HTML-file in WebView

The last step is to link to the HTML file as a WebView in the preserved frame from Step 1.

Use “Play on Page Load” with a very short delay. This will prevent the WebView to be loaded before the stack actually is in view. Use “Transparent Background” and disable “Allow User Interaction” if you like.

Conclusion

It takes a bit of an effort and you need to get to know what you can do and what is limited. But animating headlines with simple FadeIns is a new thing you can use today in your DPS!

Download example folio to sideload it on your iPad.

Download all source files used in this example.

If you have a quesion or other ideas, please feel free to leave a comment.