MotionComposer provides the tools to make animations for the web. Distinguishing it from established tools is its ability to author once and output the same motion graphics in two formats: Flash for the many devices that support it, and HTML5 for suitable web browsers.
It swaps the frame-based timeline of Flash for slides, which can be broken down into states. It just needs you to specify how attributes such as positioning and opacity are set in each one. MotionComposer uses changes in the attributes to choreograph the animation, like Magic Move in Keynote. Transitions and masks can be applied, but blur, shadow and glow are exclusively output to Flash, despite the ability to mimic them to varied degrees with HTML5’s canvas element.
Text and rectangular shapes can be added to the stage with built-in tools. The latter allows for rounded corners, but with less flexibility than in Adobe Edge; curvatures can’t be adjusted independently. There are no tools to draw lines or complex shapes, and SVG files can’t be imported. Bitmaps can be dragged in from the Finder and from iPhoto, Aperture and Lightroom via the Media Browser.
The single-track timeline gives a clear overview of structure. But while objects can be grouped, there’s no visual representation of how things are stacked up, like Flash’s layers and folders. That can make it tricky to organise complex compositions.
MotionComposer automatically animates objects based on their arrangement on the stage and properties
What’s most appealing is MotionComposer’s ability to assign actions that take place at the end of a slide or state, or when a particular object is clicked. Actions include pausing playback and jumping to another slide. Combined with slides and states, actions facilitate interactive animated sites, which Adobe Edge’s current preview is incapable of doing.
MotionComposer is off to a running start; its unified workflow for producing Flash and HTML5 output cuts down time spent reproducing work in different formats. However, there’s room to improve its capabilities with inline SVG and graphic effects using HTML5‘s canvas tag.