Reader Level:
ARTICLE

Key Spline Editor in Expression Blend 4

Posted by Nipun Tomar Articles | Expression Studio February 07, 2011
Animation Art has become a universal art form that has entertained, informed, and instructed generations around the world for almost 100 years. Animation speaks to everyone in a universal language.
  • 0
  • 0
  • 5979


Animation Art has become a universal art form that has entertained, informed, and instructed generations around the world for almost 100 years. Animation speaks to everyone in a universal language.

The KeySpline is the thing that determines how the animated property changes between the previous keyframe and the keyframe you selected. You can think of each keyframe as a point on a curve. Each keyframe is connected to the one before it by a segment of this curve. So selecting a keyframe then editing its KeySpline is actually editing the shape of the curve between the selected keyframe and the keyframe before that.

I am Describing here the use of KeySpline in this short Article :

  1. In Microsoft Expression Blend 4, Open a new document and draw a Circle using ellipse tool.

    KSEBlend1.gif
     
  2. Fill the Circle by using Gradient Brush and rename it as "Ball":

    KSEBlend2.gif
     
  3. Start the Animation by creating a new story board in the object and timeline window:

    KSEBlend3.gif

    New Storyline opens like this :

    KSEBlend4.gif
     
  4. Now start the Recording by clicking on "Record KeyFrame":

    Set the recording for 4 Seconds and move the ball with rotation :

    KSEBlend5.gif
     
  5. To edit the KeySpline to get the acceleration and cooling behavior we want, select the keyframe icon on the RenderTransform row by clicking it once (It's color also Changes when you click on it properly):

    KSEBlend6.gif
     
  6. In the property Pane you'll see an Easing category inside which is the KeySpline editor. It's currently on a normal Stage having a straight line but you can drag the two yellow control point handles around to change that, or use the number editors below to edit the coordinate values more precisely.

    KSEBlend7.gif
     
  7. Now edit the KeySpline as under and run the project:

    KSEBlend8.gif

    Note : Likewise you can edit according to your requirements .
     
  8. We can add functions to the ball also, just behind the keyspline there is another tab Easing Function click on it and you will get:

    KSEBlend9.gif

    Click on the drop down arrow and select Input Bounce function :

    KSEBlend10.gif

    Note: You can change the number of Bounces and Bounciness.

    Imp: You can do one thing at one time means if you want to give function to ball you cannot edit the Spline and if you edit Spline there will be no function.

    Finally run the Application and see the Effects so that you can easily understand what's going on :

    KSEBlend11.gif

COMMENT USING

Trending up