• (778) 557-6689

Found Pixel

Custom graphic design, branding, and websites on Vancouver Island

You are here: Home / Easing / Flash CS4: Modifying and applying a custom ease in the Motion Editor

Flash CS4: Modifying and applying a custom ease in the Motion Editor

By

Print

Last Updated on February 26, 2019

You can then edit the custom ease using the standard bezier editing controls found in other property graphs in the Motion Editor.
To apply the custom ease to a property, you select the custom ease’s name from the Ease menu in the property you want to apply it to. The property graph updates with a dashed curve that displays the actual tweened values after the ease is applied, as it does for the preset eases you can apply using this Ease section of the Motion Editor. Keep reading to learn how to create custom eases.

There is an additional, and very useful, feature unique to custom ease graphs, as shown in the following exercise. Using this technique helps you ease between keyframes, which will be covered in the next blog post.

  1. Open this sample file, called custom-ease.fla.
  2. Select the tween span in the Timeline and open the Motion Editor. A tween with a custom ease has been applied already.
  3. Scroll down to the Eases section and find the Custom ease. Click the ease to expand the row size.
  4. Move the playhead to frame 40, which is where the keyframe is located on the X and Y properties.
  5. Click the Add Keyframe button to add a keyframe at that location.
  6. Drag the keyframe up and down at that location to see how it snaps to a percentage on the graph. This is where the keyframe value of the ease matches the keyframe on the X and Y properties.
  7. Choose Custom from the menu in the Ease column for both X and Y properties. Notice how the ease hits the keyframe at both of the spatial properties.
  8. Drag the handles that extend from this keyframe ,or the first and last ones, to modify the ease curve. The ease still hits the keyframes in the X and Y graphs (see the following image – click for fullsize).

alg-fig53.jpg



9. Return to the Custom ease graph in the Eases section. Drag the keyframe at frame 40 up or down, while watching what happens in the X and Y property graphs and on the Stage (see the following image – click for fullsize).

alg-fig54.jpg



After you pull the keyframe to a new location, it no longer hits the keyframes in the X and Y property graphs. Your ease will hit another location on the motion path.

  1. Drag the keyframe until it snaps again. Now the animation hits the spatial properties again. Test the animation to see how it looks.
    Using this feature helps you create a custom curve that you can use to ease between keyframes. For more information on easing between keyframes, read the next blog post.

Reader Interactions

Comments

  1. Hi, i have a question. How do i apply custome ease to mouse events? Lets say i need something to start rotate on mouse ON with speeding up till some point where it has stable rotation speed, and on mouse out its slowing rottation and stops?

  5. Hey Jen!

    Long time no-talk. So…is there any way to copy a preset ease and use it as a starting point for a custom ease? T’would make life easier.

    Also…can we not save our custom eases and give them cute names? That would be nice, perhaps I’m missing something…

  6. Hey James!

    Good to hear from you! Unfortunately there isn’t a way to go from preset > custom or specifically save the custom ease itself. (Have existing enhancement requests logged for those though – I’d love to see that myself).

    The closest you can get for the second in CS4 is to save a basic tween with your custom ease in it as a preset that you then use as the starting point for the tweens you apply it to. (Or use it to copy/paste the custom ease from).

    Wish I had better news!

  7. Your explaination of a custom ease finally broke through my thick skull. I had been struggling much to long on this topic, confusing the interaction between playhead postion, ease values, keyframe positions, and graph representation.

    This may be a difficult subject to easily document, considering the variety of varables, but you did a good job. I look forward to reading your article on easing between tween keyframes.

    Thanks for enlightening me – it should make my future work with Flash more palatable.

  9. @sean: That looks like it’s occurring because the keyframe around frame 50 on the custom ease isn’t matching the value in the Y property. If you drag the keyframe in the custom ease until it snaps, it will match the keyframe in the position (why it snaps), so they hit the same spot. Then your ease should follow the position (you can make the rise occur after frame 50, no flat line). Hope that helps.

  10. I have a few questions about ease and keyframes.

    If I have a span, how can i add time to the start of that span, so i can add a new keyframe without touching the already exsisting keys/curves

    Is there a way to make a motion preset out of just a certain range of a span? or do I need to create all the tweens I can think of in a basic flash template before i dig in and get serious?

    Thanks for any info.

  11. @Frederick: For adding time to start of the span, without affecting the tween (it’ll take two steps):
    1. Hold Shift and then drag the beginning of the span to the left to the new location where you’d like it to start (this adds time without stretching the tween.
    2. Hold Ctrl/Cmd and drag between the first and last keyframe, and then drag those frames back to their original position.

    Now you will have a longer span, and the animation will be at its original position.

    To make a motion preset out of a segment of an existing animation, you will need to split the span around the segment you want to save (a preset can only be made out of a full tween span).

  12. Jen, Thanks SO much for the info! really appreciated! I spent a solid 18 hours learning all the new features in Flash CS4, but it was well worth it. So much faster to add new animations with the presets, etc.

    THANKS again!!!!

  13. Oh forgot to ask….is it possible to make a custom ease on the Basic Motion X/Y layers? It’s one thing that was driving me nuts while working to a deadline. : S

    I’ve found that just right-clicking and smooth left/right is my friend. : )

  14. ok….got the custom ease info while looking at the “EaseCaddy” link. yay its possible! xD (just weird that it was at the bottom away from the Basic Motion layers. :S