Motion Composer 1.6 review: The easy way to create web animations
If you’re tasked with creating animated advertising banners or interactive web elements for your website, the prospect of having to get to grips with HTML5 and/or Flash can be a daunting one. Fortunately that’s where MotionComposer 1.6 comes in, with a system that supports images, objects, video and sounds and wraps it up with animation and interaction. And all without having to write any code.
The basic interface of MotionComposer places the active area and surrounding pasteboard in the middle, the timeline elements at the bottom and the controls and specifics on the right. Key to the system is getting to grips with slides and states. Rather than have a linear timeline with individual frames, like a video editor or slideshow, MotionComposer uses a system that starts with an individual slide in an initial state. The slide can have graphics, sound – drag and drop iTunes music directly into place, text, basically any of the usual components, and these are represented in initial positions, or the initial state. Further states can then be added to the same slide, so that all those assets are preserved within it. You can then move text or graphics around. On playback, the system will move the object from the original position to the secondary state position, using the time defined for each state. Further states can be added and more elements introduced. To have some animated from off the screen simply introduce it off-screen in one state and reposition it in the next. It’s a simple and effective system. Start a new, blank slide and you would have to reload, resize, reposition any of the elements you want to re-use. Slides can be duplicated, which then saves all that effort, but duplicates all the states associated with it. The alternative is to duplicate just the initial state of a slide, which then duplicates the materials you want, but none of the subsequent states. The problem comes when the parts you want to be duplicated are in the middle or end of state. That means you have think through how you organise the slides, starting a new one at the right time so that you can duplicate the assets that you want. It’s clever, but not as straightforward as a video timeline.
The text box can be turned into a button so that if the user clicks on it, it activates an action. In this case, it links to a specific website.
As well as video and images – which can be dragged directly in from the desktop or loaded with a file browser – you can also create boxes and objects with different types of fills. There’s plenty of control over these and the key point is that they can also be turned into click-able buttons. These can be used to navigate around specific slides and states, open URLs, execute Javascript, play sounds or link with Aquafadas’ digital publishing system. This latter feature has some interesting possibilities because animations can be exported as widgets for iBooks Author or directly into the Aquafadas digital publishing system.
Animations can be tested out at each point and previewed as HTML5. There are some extra graphical effect options if using Flash. There are some idiosyncrasies to the system though. For example, adding a text frame to the second state, specifying that it is hidden from the initial state might lead you to think that the animation would fade it into view. Not so, a ghost frame is created on the preceeding state, minus any text in it, which makes it harder to identify. If you think this is a rogue frame and delete it, it removes the actual frame on the next state. Also, the animation begins from where the ghost frame was placed by the system.
Create your own graphical assets and position them off-screen. In the next state when they appear, they will be automatically animated.
Still, when everything is completed and working, the animation can be exported as HTML5, Flash or both, either locally for inclusion in a web page, or directly online you have a specific page location. Other export options include HTML code to be displayed to outdated browsers that don’t support HTML5 or Flash, as well as a panel for JS code. This can be used to control the animation or handle the JS link action specified earlier.
OUR VERDICT
It’s an interesting system that makes it easy to animate individual elements but the overall system is a little clunky and requires thinking through to best manage how the assets are used and duplicated. There’s not much in the way of transitions, fonts or effects but then it is creating actual code that can be used interactively, rather than a simple non-interactive video. Has lots of potential for use with digital publishing as well. Doesn’t come with much in the way of assets so you’ll be building these yourself. It’s certainly a flexible system that spares you most of the horror of coding.