Over a million developers have joined DZone.

Flex/Parsley Keyframe Editor

DZone 's Guide to

Flex/Parsley Keyframe Editor

· Web Dev Zone ·
Free Resource

This is a project I've been playing with on and off recently - a keyframe editor for animating arbitrary objects. I thought I'd post it in its current embryonic state to show how MotionPaths and KeyFrames can be dynamically edited and applied to interface elements.

Embryonic is the key phrase here - the animation 'engine' is done, but the user interface is far from complete (or even attractive). The current UI allows the user to play and stop the animation, select an object from the left hand list and select a particular animated property and then add or edit keyframes.

The initial animation data is hard coded in the AnimationData class. This includes a Parallel that contains individual AnimationTransforms for each MotionPath for each animated property. The Group class contains the individual items (in this case Rects) that those MotionPaths will affect.

I'm using the presentation model pattern, so most of the good stuff happens in AnimationMonkeyPresentationModel. I'm also using Parsley to inject the model and animation data into the view classes and handle messaging.

A few pointers on playing with the Keyframes of a MotionPath: scaleKeyFrames() needs to be invoked on the MotionPath otherwise getValue() will fail and Keyframes need to be in time order. My presentation model contains a sortKeyframes() method to keep them in check.

The GraphEditor allows users to view the motion graph of any animated property. It uses getValue() to draw the graphs (hence the caveat above) and to check if the mouse is near a point on the graph to offer the user the opportunity to add a new keyframe. Clicking a keyframe node pops up a little editor where the user can change values and change the type of keyframe.

The application is available here and the source code here.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}