Refining Animation in InDesign

Technical hitch #1: Animations the wrong size and position

Animation of school bell imported to InDesign as OAM. All looks good but when you click on the animation on the ipad the poster image gives way to the animation and it reveals that the animation is in a different position. The final result ends with the animation fading out and the bottom segment of the original poster image remaining.  Hmmmm…. Poster size is not the same as animation size (resized original image in preparation for animation). Have fixed poster size so it’s the same size as the animation. I unticked ‘scale content to fit’ option in folio overlay panel which has done the trick.

Technical hitch #2: Images doubling up (poster image and animation)

photo (1)

The issue remaining here is that the poster image stays behind the animation, resulting in a darkening of the bell (because it is a little transparent so the two images add together) and you can see the image behind as the bell shakes. I need to look into whether it’s worth getting rid of a poster image altogether. One user says to open the poster image again in Photoshop and delete all content from the PNG (leaving you with just a blank PNG file). Presumably this will fix the doubling up problem. Will it mean the picture of the bell isn’t on the page to start with though?? Yes. That’s exactly what has just happened. No longer any doubling up but you have to click the blank spot to bring up the image. I’d prefer to have the image there to start with (partly just for the balance of the page).

Technical Hitch #3: Problems with transparency

Screen shot 2013-06-19 at 9.35.38 PM

More issues: transparent backgrounds are still appearing on the .oam files (not on the poster files) as white backgrounds. I read in the forum below that this is a bug and importing the html file of the animation will fix the transparency and make it easier overall. Trial 1 was a fail – no transparency (except in poster file). (File resized incorrectly again also) Create new dedicated layer for each animation. Use folio builder and upload article. Make sure you select png for animations especially with transparent background. Manually took the RGBA channels on the stage in Edge Animate down to zero (the slider took the A down, but to cover myself I set RGB to zero). After following these instructions a grey background appears instead of a white one. I opened the poster image in Photoshop and used the magic wand to delete the grey background. After this I saved it as a PNG 24 with transparency and relinked the poster image to the animation in Edge Animate. I then relinked the animation in InDesign and updated the preview. Things are looking good – no grey square and no white square this time! Animation is not working properly but will address this in a moment. To test the transparency issue I’ll fix the bell too and that will settle it! Confirmed: Success with the transparency issue.

Screen shot 2013-06-19 at 8.42.09 PM


Technical hitch #4: Finding out how to create horizontal page swipe

Using the article panel – create a separate article for each page. Drag and drop the articles to the Folio Builder panel. This gives you the option of selecting “horizontal swipe only” and previewing it on the desktop only. However, it will not swipe horizontally. This may happen later – when uploading the app?? Haven’t got time to finetune this tonight – will have to put this on the ‘further investigation’ list!  


Animation Testing


I’ve trialled the animation for the school bell just using some rough sketches so I can work out the technical side of things. Everything seems to be going well here. A lot of similarities to flash yet with an interface more along the lines of typical Adobe products.

Adobe Edge Animate Technical Notes Cont.

Question for investigation

How to make multiple pages for book? how to transition? Do they all need to be separate files until put into DPS App Builder?

Adobe Edge Animate tutorial from “Adobe Edge Animate Essential Training” (continued from previous notes)

Free transform in Edge Animate

Rotating an object

Transform tool – select axis for rotation. Select auto keyframe and auto transition. Move toggle to next section and select degrees for rotation. Can click and drag entire animation to alter total time length.

aha! Edge Animate vs Flash

Have just read on an InDesign blog that because iOS does not work with Flash and InDesign works only with .swf files, if creating an ebook in InDesign using .swf files, the animation will drop out and not work when trying to bring into the DPS App Builder for Apple.

It would appear that Edge Animate is Adobe’s answer to Apple’s issues with Flash. Interesting! At least this defines my future direction – if I’m designing for ipads, Edge Animate it is! (Glad i found this out now!!!)

Information sourced from:

Adobe Edge Animate Technical Notes

From Notes from “Edge Animate Essential Training” online tutorial

Creates file .an (animate file) with html and other javascript files. Compatible with a large number of browsers, Html and CSS compatible. Excellent for producing e-pubs and Digi mags.

Stage size & responsive design

Stage is 550 by 400 px tall by default. (100% when click – can change sizing when browser changes) – responsive designs. Down-level stage – older browser compatibility.


For stroke must define colour, style and size. Html – <div> tag for each item. Create lines/rules using rectangle tool. Double click to make changes to text. Can’t style individual words and characters – have to style using html. Built in web-safe fonts can be used and web fonts are also addable.

Inserting images

Bringing in content from other sources (graphics etc.)  File>import or Library panel – assets +. Works with .png files. Creates an image directory within project file folder. Can also manually add files by clicking and dragging into this folder.

In colour palette A: alpha (transparency) RGBA colour space. Accessibility feature – tab index enables highlighting of text or objects if user presses tab. Clip tool – cropping. Centre circle much like Indesign can change location of image within the frame.

Preparing content for use in Edge Animate

Photoshop – slices hold control or cmd, brings up dialogue box. Click and drag to create slice. Double click and name. Hide background menu. File>save for web. Select slice with slice tool, choose file format, png 24 (16 bit colour, 8 bit transparency. Save into images directory. “All user slices” drop box – only save the slices drawn (saves as individual png graphics). Also supports animated gifs. Window>timeline. Select first frame, hide background. Save for web – gif, select background colour. Will play the animated gif on the stage while in design view.

Illustrator – slicing tool. View>show slices, Object>slice>slice options and name. File>save for web, select slice, choose png 24, export menu>all user slices, save .Svg (scalable vector graphics) supported. Artboard tool – tool panel shows dimensions .svg results in smaller file size without compromise of quality of graphic. save as>format>svg 1.1, type svg. make sure browser being used can read .svgs. Can check browser compatibility at

Fireworks – Slice under web object. Rename label to name slice. Use Optimize panel to select the file type (png 8 in Fireworks uses semi-transparent pixels)  Smaller file size. Only use if not a lot of tonal range in Graphic. File>export>images only, explort slices, uncheck boxes. Use states and optimize panels. Png, jpeg, svg, gif or animated gif compatible.

Layouts in Edge Animate

Set stage size. (100 view on bottom left of stage). In elements panel change layer order to alter arrangment or modify>arrange. Timeline>lock items in place. Alt shift (option shift) to copy element. Can use timeline to select elements.


Position and size – x co-ord (horizontal displacement). Grab playhead on timeline, drag out, add another keyframe. Hold shift and drag image (turns to hollow diamond) indicating change. Need to add transition between two keyframes. Select last keyframe, right click “create transition” (inbetween). Drag back to first keyframe. Can change opacity, add another keyframe and change opacity on last keyframe

When adding more animation properties, always drag playhead back to first keyframe and then select property you want to change.Blue toggle above animation bar. Drag to show that animation will end up at the composition at the final point. (defining the end point of elements) and animated in relation to starting point.Can change things on the stage without having to manually change different properties. Can move playhead out – animate to that point. Toggle pin for resolution.

Easing – select element, then select transition area. Click easing button (distance vs time graph). Select preset. Animated clip and background position. Auto keyframe, auto transition and toggle pin activated. Can annotate using the clip tool (wipe on/wipe off). Can move object within the frame and annotate to reveal.

Key questions to investigate

What are the workable differences between Edge Animate and Adobe Flash? Which will be the best to work with in conjunction with InDesign? Is using InDesign the long-winded way of what could be completely created in Edge Animate?

InDesign + Flash = interactive ebook?

Edge Animate = interactive ebook? (no interim step?)