Exported PNG image sequence
The delivery method of digital magazines via .folio, Woodwing and other file formats have seen some interesting results when presenting interactive animation.
Tablet devices have breathed new life into simple image animation, purely due to the fact that all interactions involve touch. Simply by touching to navigate, and interact, presents an immersive and tactile user experience, especially when compared to using a mouse. The level of control is intensified as movements are much more spontaneous and human.
The variety of interaction is increasing from month to month. From simple swipes, to reveals, there are some extremely inventive approaches to image animation. Particular favourites of recent times include the gyroscope cover created for Project magazine by publishing group Seven. In reality the cover consists of a number of images that, based on your rotation of the tablet, creates a parallax environment. However, the effect generated is extremely impacting.
During my investigations and development of an interactive animation I have noted a number of guidelines that will assist in developing content for tablet devices. The most important, I believe, concerns the animation space. If you create an animation that covers your entire page real estate you will, most likely, negate the users ability to swipe to turn pages. This is down to the set-up of the animation area in the source file. I have taken the stance of allowing a 40 pixel border to cater for page-to-page navigation.
The animation piece I have put into practice using the .folio file format is a dissection of an old school floppy disk (where did they go?). Each frame of my animation is created as a separate PNG in Photoshop before import into InDesign's Image Sequence Creator. The naming convention for the PNG output should be sequential ie. image01.png, image02.png… and so on, with the collection saved in their own encompassing folder. If the animation is intended to work in landscape and portrait orientation, for best results, create your animation as a square composition. This way, on rotation, it will be much easier to re-apply and re-position your animation field.
Your updated .folio file is then pushed to Acrobat.com and accessed via Adobe Viewer. Locate the page that contains your animation for testing using your stated interaction technique. Refinement is key to a successful animation and you don't really gain a clear insight into its success until it's viewed in the environment it will be distributed in.