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. See all software reviews.
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. Take a look at Group test: what's the best web-design software?
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.
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.