Monday, 9 March 2009

Create a glassy button with Expression Blend

Here is a video that I discovered today whilst organising my files.

HTML5 player

I created this on a whim, Christmas day 2007 whilst my son was animating with World of Warcraft model viewer. I figured "If it's good enough for him...."

I had been practicing several techniques with Expression Blend for creating button controls.

Although the technique show in the video isn't one I would use for creating a reusable control in Blend, it does show off several features in Blend.

The  approach I took was a little extreme.

Rather than the 'Phil does voice over whilst doing the demo' approach, I simply recorded myself performing the tasks. I then loaded that video into Blend and created a story board that animated five copies of the same video.

The central video is moved around so that the eye can follow what I I am doing.

I actually created the effects using Expression Blend September Preview which is pretty outdated. The current offering is Blend 2 sp1. However, everything shown in the video is pretty mush as it is in the current version.

Finally, to jazz it up a little, I added a soundtrack.

I had designers in mind when I created this video because I have found that they focus more on the visual. In fact of those I have shown this video too, the designers do indeed prefer it more than developers who tend to like the typical voice over  approach as the narrator is often able to go into more detail.

I do intend to do some "proper" tutorials (with voice over) that cover the creation of Custom and User controls for Silverlight and WPF in Expression Blend and Visual Studio. But that's for another day.

Flash player

Interested in Expression Blend training?

Developing Windows Presentation Foundation applications with Visual Studio 2010 and Expression Blend 4  

Developing Silverlight Applications with Visual Studio 2010 and Expression Blend 4

Fundamentals of XAML and Microsoft Expression Blend

See you soon

Phil Stirpé
"I don't do average!"

No comments:

Post a Comment