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.
Reader Level:


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

Login to add your contents and source code to this article
post comment
     
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Get Career Advice from Experts