by Adam Kinney via Adam Kinney on 8/31/2009 11:59:00 PM
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.
01 Create a new project in Blend If you don’t already have it, you can download a 60-day trial of Expression Blend.
02 Draw a Rectangle on the Artboard Select the Rectangle Tool (shortcut key M) and draw a rectangle.
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.
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.
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.
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.
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.
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:
Original Post: Simple Color Animation in Blend for a Button State
The content of the postings is owned by the respective author. Silverlight Feeds is not responsible for the contents of the postings. This site is automatically generated and cannot be reviewed for abusive content. If you find abusive content on Silverlight Feeds, please contact us. Designated trademarks and brands are the property of their respective owners. All rights reserved.
