Silverlight animation with Expression Blend (and no code)
This tutorial shows how to create powerful object animation using Microsoft Expression Blend. This is a complementary article to 2D games using Silverlight series.
Windows Phone 7.5
Microsoft Expression Blend (included in the Windows Phone SDK) is a powerful visual design tool for making visible elements and effects in Silverlight applications. It can be used simultaneously with Visual Studio on the same opened project - modifications made in either tool become immediately available in other.
Using the tool to create basic (though still excellent!) application user interfaces is straightforward. However some of the more advanced features are less obvious: for example animating controls or adding artwork to a Windows Phone application project.
This article takes you past the basics and shows you how to create and import artwork into Expression Blend, and how to use it in animations. The article assumes you have created an application framework using the standard Windows Phone application template in Visual Studio.
Creating artwork and importing it to Expression Blend
Where possible you should use vector graphics: bitmap graphics are not recommended because the aren't scalable and can result in slower application performance. Expression Blend can import scalable formats output by (costly) tools like Adobe Illustrator and Adobe graphics suite, or the free open source editor Creature House Expression 2003.
- Silverlight does not support SVG graphics (as this is considered a competitor to XAML).
- Inkscape (free tool) cannot at time be used to create artwork for Windows Phone. Images saved as XAML work on Internet Explorer on desktop, but they don't work on Windows Phone because they contain several unrecognised tags.
Here is the workflow:
- Create an art in Creature House Expression and export it into Adobe Illustrator document format
- Open your project in Microsoft Expression Blend
- Select MainPage.xaml in project explorer pane and open it. When a "xaml" document is opened, import menu is enabled and allows you to get an artwork into it. After the importing we can rearrange the graphic and make a UserControl from it. Having UserControl derived class will give us great freedom in its use, for example we can instantiate it dynamically, can have several instances, etc. Converting graphics to UserControl will be explained further in the document.
- Import your artwork
- Check Objects and timeline pane. In MainPage.xaml document object tree you should find imported graphics named after the graphic file. In my example it is “Apple”.
- Make a UserControl from it
- Open Apple.xaml document for further modification. We are going to use it as a subject for our animation demo
Composing a subject for animation
In the animation demo we are going to present the life-cycle of an apple: from a bud to blossom and finally a fruit. To make the animation we need two more graphic objects: bud and blossom. Create and export them in AppleControl.xaml document the same way as we did it for the apple. You do not need to make UserControls from them but group them using canvas.
Arrange the bud, blossom and fruit in the center of canvas and make the blossom and fruit invisible. That is initial state of our animation: user will see only the bud. Note that the grouping canvas is transparent by default. That allows us freely place our AppleControl on any other control. The screenshots below show each of the steps:
Create the subject animation and use it on the application main page
The following images show the steps for creating the animation (click on the images to see a larger version)
- Save your work :) .
- Close all opened documents. Go to project explorer pane and open MainPage.xaml
- Build your application. Go to Assests pane and find AppleControl in the control list. Add AppleControl to MainPage.xaml document.
- Try on device or emulator!