Simple Cartoon Animation using Visual States

One of the goals of Silverlight’s Visual State Manager technology is to let you do quite a bit of control customization without needing to use Blend’s Timeline, nor even having to know what a Storyboard is! Feel free to test-drive the Silverlight Button below, and then read on for a run-down of how easily it can be built.

I started out with some vectors (Paths) depicting the face in its normal resting state. Then I used the Tools > Make Into Control command to make the artwork into a template applied to an actual Button. After deleting the ContentPresenter from the template, I selected the MouseOver state in the States pane, so that the changes I was about to make to the existing elements (to produce a face that looks alert and ready) would be recorded only in the MouseOver state. I moved the head and the features upward a little, and the rest of the changes involved using the Direct Selection tool to move Path points around.

Because I wanted the Pressed state to be a variation on the MouseOver state, I used the Tools > Copy State To command to duplicate all my changes into the Pressed State. Then, with the Pressed state selected, I adjusted one eye and the mouth to make the wink.

For the Disabled state I decided I needed new graphics instead of adjusting properties of the existing graphics. So I created a simplified grayscale version of the face and made that version opaque only in the Disabled state.

For transition timing, I created a number of transitions to and from various states and set their durations to taste.

Finally, so that each Button instance can customize some aspect of the template, I used template bindings so that Brush colors used in the template to draw various pieces of the face are bound to properties of the Button instance. So for example I selected shoulders, then selected Fill in the property inspector, and then clicked Advanced property options > Template Binding > Background. So now, by setting a value for Background, Foreground, BorderBrush and OpacityMask, a Button instance with this style set on it can determine the colors of the shoulders, face, hair, eyes and nose.

You can download the sample project files here.

Steve

Comments

• Anonymous
  November 12, 2009
  The comment has been removed

• Anonymous
  November 14, 2009
  This is great Steve! - super useful. I'll tweet about it ;)

• Anonymous
  December 14, 2009
  This is neat, however when trying to recreate it I wasn't able to get the button states in the state panel. It was just blank. I could add states but they wouldn't act as the mouseover trigger and such. Any thoughts?

• Anonymous
  March 10, 2010
  Terry, this may be the key (quoted from the blog post): "Then I used the Tools > Make Into Control command to make the artwork into a template applied to an actual Button". I think you were adding visual states to a UserControl and not to a Button. In that case you'd need to also add behavior to move between the logical states. You don't need to add visual states to the States panel for Silverlight controls such as Button. Further, the Button also knows when to switch logical states.