Simple Color Animation in Blend for a Button State

This tutorial shows off a few concepts in Silverlight that Blend makes very simple to work with including: Custom Control creation, Color Animation, Resources and State Management. Although you can not animate between Brushes during different States, this tutorial demonstrates how to animate Colors to create a similar effect.

Create a new project in Blend

01 Create a new project in Blend
If you don’t already have it, you can download a 60-day trial of Expression Blend.

 

Draw a Rectangle on the Artboard

02 Draw a Rectangle on the Artboard
Select the Rectangle Tool (shortcut key M) and draw a rectangle.

 

Turn the Rectangle into a Button

03 Turn the Rectangle into a Button
Right-click the Rectangle and choose Make Into Control and select Button as the Control type, change the Name to “ColorTransitionStyle” and Hit OK.

 

Set the Background Color

04 Set the Background Color
Notice now that you have created the new Template “ColorTransitionStyle”, you are in Template Editor mode.  You can tell by the BreadCrumb menu at the top of the ArtBoard showing “[Button] > (palette icon) > Template”. The Style is selected in the Objects Panel and the States Panel is selected above the Objects Panel. Select the Rectangle and change the Fill Brush on the Properties Panel to a bright color.

 

Save the Color for later

05 Save the Color for later
In the Brushes Section of the Properties Panel, find the Editor tab and click the small white square. On the popup menu, click Convert to New Resource and change the name to “OverColor” and Hit OK. You have now saved that Color as a Resource for us to use later.

 

Set the Background Color Again…

06 Set the Background Color Again…
With the Rectangle selected and change the Fill Brush to a dull color. Notice that “Base” state is selected in the State Panel.  This new dull color will act as the default Background for each State.

 

Set the Background Color for MouseOver

07 Set the Background Color for MouseOver
In the States Panel, select the MouseOver State. Notice the Recording Indicator that lights up to let you know any changes made here will be applied on MouseOver. Click the small white square on the Editor tab and this time select Local Resource > OverColor. Hit F5 to Run the Project and when you move your mouse over the button, the rectangle should change from the dull to bright color.

 

Animate the Transition

08 Animate the Transition
The default transition time for State change is 0 seconds, which caused the instant color change.  To add transition time between States, change the Default Transition value from “0” to “1”. You can also change the easing of the animation from Linear to another easing type by selecting the small line graph on the Default Transition line. Now Hit F5 to Run the Project and you’ll see the color Animate over time based on the selected easing function.

 

Further Reading:

This entry was posted in Client Technologies, Tutorials and tagged , . Bookmark the permalink.

5 Responses to Simple Color Animation in Blend for a Button State

  1. ajit says:

    Very good and easy to use article.

  2. Ayesha Khan says:

    The process you show here does not seem to be working for user controls. I’ve been trying to specify color change associated with state change on a user control. Instead when recording is on and I change the color, it gets applied to the base. Is there something special one needs to do to accomplish the same thing for a user control?

  3. Adam Kinney says:

    Since there are no Visual States to start with, you need to ensure you have added Visual States other than Base to use.

    You can do this in Blend by clicking the “Add state group” button found at the top of the States panel. This will add the Base state and a custom VisualStateGroup.

    Next click the “Add state” buttom, found next to the VisualStateGroup. This will add a custom state you can save changes to.

    And remember since this is your own custom control you will need to call the State change explicity. One easy way to do this is to use the GoToStateAction behavior.

  4. Prashanth Kumar says:

    Hi, I’m using Blend 4 and for me this is not working. I tried adding the GoToStateAction behavior too. Still it is not working.

  5. Adam Kinney says:

    I just tried this in Blend 4 to verify and the steps are still the same. You shouldn’t need to call GoToStateAction if you setup the Template properly. Did you turn the Rectangle into a control with the Make Into Control option?

Leave a Reply