Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Flex/Parsley Keyframe Editor

DZone's Guide to

Flex/Parsley Keyframe Editor

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.



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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Published at DZone with permission of Simon Gladman, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}