Motion Interaction Panel (Flash CC)

About this panel

The Motion Interaction panel is like a workaround/substitute for the deprecated Motion Editor in Flash CC. Using this panel, various aspects of a Motion tween (especially property wise custom – easing) can be controlled through a graphical interface. The panel is aimed at improving the existing workflows of controlling animation and getting the desired results quickly and easily.

Motion Interaction Panel

[Installation Guide][Download ZXP Extension]

Advanced animation control with Motion Tween

Capturing and representing Motion Tweens

The Motion Interaction panel gets enabled only when a Motion-tween or a Motion-object is selected on Timeline or on Stage. Whenever the selection changes, the panel updates automatically and displays various aspects of the selected tween graphically. These include the following :

  • List of tweening properties
  • Editable Value-curve for each property
  • Editable Ease-curve for each property
  • Preview of the full Motion-Path.
Tweening-Properties

All the Tweening-Properties (properties having atleast two keyframes in the tween-span) get listed on top of the Panel as buttons.  Clicking on any property-button displays its Value-curve and Ease applied over it.

Property Buttons

Property Buttons

Property Window

Shows the selected property’s key-values and value-curve relative to time. For eg. if Motion_X is selected, then the graph shows how Motion_X values vary over time during the entire tween span.
The way a property changes between keyframes can be modified  by clicking and dragging the curve as desired (by default, they change linearly between keyframes). Modifying or adding Key-values of a property is currently disabled through the panel but can be easily done using Timeline and the Properties panel.

Note: Normal dragging of the curve is restrictive within the bounds of successive key-values. However, Ctrl + Dragging allows unrestrictive dragging along y axis.

Restrictive Dragging

Normal Dragging

Unrestrictive Dragging

Ctrl + Dragging

Ease Window

Ease window shows the Custom Ease applied over the selected property, which is a plot of the property’s progress over time. It also allows editing of the Custom ease curve by dragging it, and applying the desired acceleration or deceleration effect in the tween.

If Ease type is none or one of the standard types available through previous versions of Flash (like Sine Wave, Bounce etc.), the Ease-type and Ease-strength is mentioned above the Ease window. In such cases, only a simple linear curve is plotted (but their effect is preserved internally). In such cases, a custom easing can be applied simply by dragging the curve in ease window and setting a new ease.

Please note that applying standard ease types other than custom is currently not supported through this panel but will be available soon.

Custom Easing

Custom Easing

Ease Library

Ease library stores some commonly used eases in Motion-tweens and also allows storing of any new custom ease permanently, for later use.
Preview ease from library – Click on a name in the ease-library to see it’s preview in Ease window.
Applying ease from library – Double-click on an ease-name from the library to apply the desired ease. You may then drag and adjust it.
Saving a custom ease – any custom ease created in the Ease-window can be saved by clicking on ‘Save Ease to Library’ Button. It then gets added at the bottom of the library.
Deleting ease from Library – Any custom ease that you save in the ease library can be deleted by Ctrl + Double-clicking on its name in the library. (Only ease saved by you can be deleted)

Motion Path Preview

Given the unlimited pasteboard size in  Flash CC, motion paths can be very large for a given motion tween. The entire motion path is displayed as a preview in the Motion Path window to give the complete picture. Currently the motion path is not editable from the panel but it gets updated whenever there’s a change on stage.

Motion Path Preview

Motion Path Preview

Undo – Redo

Every change done through the Motion Interaction panel is directly applied on to the Stage and can be undone or redone, as required, using Ctrl + z / Ctrl + y.

Live Preview / Feedback

The Motion Interaction panel is always in sync with the actual motion tween. Any change done to a property’s value curve or ease curve through this panel is updated immediately on Stage. Also, any modification of the property values, keyframes or motion path on Stage gets reflected in the panel as well.

Re-sizing Panel

The panel can be re-sized or zoomed as desired and will remember its new size with functionality exactly the same.

Download Extension (ZXP)
Installation Help
 
Contact Me for any feedback or to get notified about new updates on this Extension.
Advertisements

14 responses to “Motion Interaction Panel (Flash CC)

  • Custom easing in Flash CC | Nipun Asthana

    […] The Motion Interaction Panel is an action-script based panel for Flash CC that allows graphical editing of motion and ease curves of various individual properties in a motion tween. The detailed working is explained here. […]

  • Ernest Gu

    Just wanted to say thanks. This is phenomenal. Came back to Flash CC after a while, and I was grieving about the deprecated Motion Editor until I saw this.

  • Ben

    This is great Nipun, thank you! Although it’s simpler in functionality, I think this works better than the Motion Editor did 🙂

    Can I ask, what is the extension doing behind the scenes? Is it creating action script and applying it to the tween?

  • nasthana

    Thanks everyone! 🙂

    Ben,
    I’m using a mix of JSFL and Actionscript for manipulating the property and Ease data in the Motion tween which gets applied to the motion object on the stage itself. There is no Actionscript code being generated.

  • Adrian Harris Crowne

    Thanks for building this! I have a CS6 project with complex animations, and when I opened it in Flash CC, the animation data seems to be preserved, but inaccessible. I was wondering if there is a native way to view this animation data in Flash CC, and, if not, if your tool provides access to it all.

    • nasthana

      Hi Adrian,
      You can view the property/ease data applied in CS6 using this plugin but detailed control is possible only with Custom eases.

      We are working on getting back a native editor in Flash CC but for the time being let me know what is blocking you and I can try and get it into this plugin atleast.

      • Adrian Harris Crowne

        Thanks nasthana. So far, I’ve just been using CS6 as my workaround, but I’ll give your plugin a try and let you know if I hit any roadblocks. Thanks again!

  • Worried

    Hi,

    First of all, thank you for this! I have a weird problem however… when I open Flash CC and select this panel, at first it opens fine (I see all the options and colors), but then instantly it goes into grayed-out mode. Whole panel looks disabled and I can’t do anything with it. Am I doing something wrong?

    Fully registered Adobe CC to my company, installed here.

    Thanks for any help in advance!

    • Worried

      wow, I just found out… it doesn’t work with classing tween, only with motion tween.

      • Worried

        Sorry… typo. Should have been “Classic Tween” instead of “Classing”

      • nasthana

        Hi!
        Yes, this works with Motion Tweens only and your Motion span needs to be selected on Timeline to enable this panel.

        You can however create Custom eases in Classic tween and use them with Motion tweens as well.

  • Martin Bonnevier

    Hi, just tried this tool out. Looks good, but I can’t get the ease-curve to a have a custom S (or double-S) shape. If I active e.g. the ease in-out curve by double clicking, it turns into a regular custom curve without my desired inflection point(s)…

    • nasthana

      Hi Martin!
      Currently it supports only C-type curve editing by dragging a curve. Better S-curve editing and bezier handles have been on my to-do list but I couldn’t get a chance to spend more time on this panel.

      Having said that, we are working on a new, redesigned Motion Editor for Flash CC that will be out very soon with the next update!

      For now, as a workaround, you can try this:
      1 Create a Simple Classic tween in a new file (on layer 1, and starting from frame1)
      2 Goto Properties panel -> Tweening -> click on Edit easing button
      3 Set up any desired ease(for later reuse) and click OK.
      4 Goto Commands menu -> ‘Copy Classic Ease to Library’

      Your custom ease is now stored and usable in the Motion Interaction Panel’s Ease library. This can be applied on any motion tween by simply double clicking on it.

      Cheers!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: