KIRUPA.CHINNATHAMBI

About a year ago, I wrote about some of the difficulties associated with creating button rollovers that went beyond your standard 3-transition variants. The states everyone creates animations for and most tools easily facilitate are the following:

If you wanted to create more states or create transitions between combinations of the above three states, you had to write extra code. In our latest release of Expression Blend, our June 2008 Preview, we make it easy for you to solve the above problem by providing a new feature known as the Visual State Manager (VSM).

For an example of something created using VSM, play with the following two buttons that I just created:

These two buttons have the default animations that play when you mouse over and press down, but they also have intermediate transitions defined as well. For example, you have transitions defined for going from mouse over back to to normal, or from pressed back to mouse over, or from focused back to unfocused, etc.

All of the states and the transitions between them were edited using the feature I briefly mentioned known as VSM. What makes the VSM feature inside Expression Blend really nice is that you get to create the above transitions without writing any code and using just the UI itself.

On the UI front, we introduced a new panel known as the Interaction panel that allows you to quickly view the various states, state groups, duration, and any transitions defined:

This panel can be easily accessed when you edit the Control Template of a control or user control. For controls such as button that already have state groups and states defined, you don’t have to do anything extra. Your interaction panel will display the state groups, states, and default transitions that the control automatically provides.

Of course, VSM can be used to do more than simple rollover effects, but since creating rollovers is a popular task, I figure I’d just throw that out there as one of the various things you can do with this feature.

To learn more about VSM, the following links should be helpful:

• States, VSM, and Parts: Part 1, Part 2, Part 3, Part 4 by Karen Corby
• Creating Control Skins in the Visual State Manager by Christian Schormann
• States and Button Style by Celso Gomes
• Four Video Tutorials by Steve White

Cheers!
Kirupa