In this tutorial I’ll show you how to create a simple toggle button that has an on and off state using the Make in to a control feature in Expression Blend 3, the Visual State Manager, and some Animation Easing. First we need to create the design of the control. You can use Expression Design or...
Tutorials
Make Controls From Scratch - Toggle Button
Monday, July 20 2009 - Tutorials
Import Photoshop files to Blend 3
Wednesday, July 15 2009 - Tutorials
Many graphic designers are comfortable with using Adobe Photoshop or Illustrator. When designing an interface, you might find yourself duplicating efforts if creating your designs first in Adobe Photoshop and then again in Expression Blend. But with the introduction of Expression Blend 3 comes the ability...
Splash screens and Loaders in Silverlight
Monday, June 15 2009 - Tutorials
Adding a loader or splash screen to your animation can add the final touch and bring all the elements together. This tutorial will teach you 3 different techniques to creating great loading screen. 1. Progress Bars 2. Text percent loaded 3. Simple loading animation. First steps The first step is to set...
How to Create Sample Data in Blend 3
Friday, May 22 2009 - Tutorials
One of the cool new features of Blend 3 is the ability to generate random sample data. If you want to style a listbox or other control which normally requires some sort of data, you can set Blend to generate data so you can focus on the styling. Look for the Data tab (by default over on the right side...
4 Useful Vector Tips for Great Designs
Wednesday, May 20 2009 - Tutorials
Whether you are trying to create a shiny new icon, give your app a little designer flair and excitement, create yourself a logo, here are some tips and tricks when working with vectors in Expression Design. 1. Shine Shine is the oldest vector trick going around but it can add an element of realism to...
Create Circular Rotating Text in Expression Blend
Sunday, May 10 2009 - Tutorials
In this tutorial we will see how to create a button with text rotating around it. This might be useful for tooltips, or could be applied towards other effects like fly-outs in a game or something similar. Here is the effect we will create: (hover over the blue circle) Getting Started Fire up Expression...
Create a fire button with Expression Design and Blend
Thursday, May 07 2009 - Tutorials
This tutorial will show you how to create a button that looks as if it has a fire lurking inside. The tutorial will use both Expression Design and Expression Blend. Get the source here. For this tutorial we will start off in Expression Design to create the graphics for the button, then we will move into...
Clever gradients in Blend
Thursday, April 23 2009 - Tutorials
This tutorial is all about gradients and how to make some sweet effects with them. I'm going to create the above button with some shapes and gradients. Ok so lets start, in your project, create a new button. Right click the button and point to Edit Control Parts (templates) and then select Create Empty...
Animation easing and the "bounce" effect.
Monday, April 06 2009 - Tutorials
Animation easing is a tool built into Expression Blend to help give you a more "fluid" feel to your animation, as you can see in the above animation, the bottom cog's animation looks a lot more realistic than the simple point to point animation of the top cog. The bounce effect is great to...
Flicker Effect - Opacity Masks in Blend
Monday, April 06 2009 - Tutorials
This is a cool trick to give your logo "image" a cool subtle flickering effect. For my example I have grabbed the SilverZine logo in PNG format and thrown it into a new project in Expression Blend 2. First step is to apply an opacity mask to your logo/object. This can be found in the properties...
