ANIMATE CC FOR ADOBE INDESIGN

I recently took a little detour to get caught up with Adobe Animate CC 2017. Always looking for better (or more efficient) ways to get applications to do my bidding, I was curious as to how well Animate CC would play with InDesign. Of course, my main concern was to evaluate how well the animation would work for ePub and Publish Online projects. Historically, I have been doing whatever animation I needed for InDesign mainly using code (ExtendScript and AppleScript). With this in mind, I started simple, with a few basic tests.

SO HOW DID ADOBE ANIMATE CC 2017 MEASURE UP?

After working with Flash for a number of years and then Edge Animate, I had my reservations when it came to animations based on Canvas and HTML5. After running the tests outlined below, I can say that I am looking forward to working with Animate CC and perhaps seeing how far its capability will scale up. You might want to work through the tests outlined below and see for yourself how Animate CC fares for InDesign animations.

THE PROCESS

For testing, I used a character animated in Animate CC 2017 using the HTML5/Canvas document type. The character had nested animations set to repeat (eyes blink, and arms wave).

In Animate 2017

  1. Create a new HTML5Canvas document large enough for the animation.
  2. Set the stage background to transparent (In the screen capture below, notice the box with the red slash at the upper right.)
  3. Save the document
  4. Set publish settings 
    • Other Formats: check OAM Package
    • Enter the name for the file in the Output name field
    • Click on Folder next to this field and select the folder for the project 
    • For Poster Image, select Generate from current frame (PNG) and Transparent
  5. Copy your character (symbol) from a previous project.
  6. Animate the character using Classic Tweens.
  7. In Actions layer: added empty keyframe for final frame of animation (F7)
  8. In Actions panel, added the following for the final frame:
    this.stop();
  9. After testing, select Publish (from File menu)
  10. Save the project

In InDesign CC (2017)

  1. Create Document for Web Intent
  2. Place the OAM file created in step 9 above
  3. Add text
  4. Open Animation panel (Window > Interactive > Animation.
  5. Animated the title to take 2 seconds to fade in. 
  6. Using Preview Spread button in Animation panel, previewed the animation

Test 1 – Publish Online

Published the spread using Publish Online
Project published exactly as it previewed.

Test 2 – Publish to ePub

The following settings were used for ePub output. 

The minute I clicked OK, the ePub appeared in my iBooks Store. The cover page transitioned to my animated page.

Test 3 – Animation Settings

The next test was to see if animation settings in InDesign would override the OAM settings.

Here I set the OAM file to appear only when the page was clicked. The file did wait to appear until the page was clicked. However, the primary animation was not as anticipated. Only the animation nested in the symbol was consistent (arms moving and eyes blinking).

ONWARD AND UPWARD

This test project was purposely designed to test basic capability of using an OAM produced in Adobe Animate CC 2017 in Adobe InDesign. The level of success with this test encourages me to look into more complex animation involving code. Look for more blogs in the future on this subject.

If you are curious, you can view the animation test for Publish Online at the following URL:

 

https://indd.adobe.com/view/f87ad262-49f9-4e5c-a727-a3ddd3d62a7a