Silverlight 2: Simple Animation

I'm not a designer.  Would have trouble even opening a professional design or animation tool.  But even I can make animations in Silverlight using Expression Blend.

Now, I didn't build anything big or fancy, but I think it's kinda cool.  Most of all, I did it all myself with no help from designers or even the web or help files.  I did 99% of it within the Expression Blend 2.5 environment, only had to go to Visual Studio 2008 to wire up an event handler, and that was only a one liner.

So, who is ? Click his name to find out. (If you see the download Silverlight logo or a blue bar instead you need to do that first).  Then click the name.

Did you click it?  Go ahead, do it, I'll wait.

So it's not big and fancy but it does show a neat effect you can use Silverlight for.  It's also a great example of using Silverlight for a very small piece of a page as opposed to the full RIAs that are being showcased.  I uploaded this tiny app to Silverlight Streaming to allow me to use it in this blog where I don't have access to the server or even the header of the page.  As you can see it works :).

How did I do it

I only had to touch two files for this little app, page.xaml and page.xaml.cs.  I did cheat a little bit by using a mono-spaced font to make the letter positions line up at the same location regardless of the letter width.  If your not sure what I mean take a look at these sets of letters in two different fonts:

iiiii
wwwww
iiiii
wwwww

Can you see how in the second font the letters are all the same width where in the first there is a very noticeable difference?  By using the mono-spaced font I was able avoid spacing issues.  Did I need to, no, but it made it easier.

Create the objects

Using Expression Blend 2.5 I created a Silverlight 2 Application that gave me the basic page.xaml and app.xaml files.  I then got right at creating the xaml objects.  First I replaced the default Grid root control with a Canvas instead.  I may not have needed to do this but since I was dynamically placing them and not using columns or rows, it seemed appropriate.  Next I added a rectangle to fill the background.

 

Again, I could have completely skipped this step and had a transparent background, but I know it was going to be on a white page so it made sense.  I then added a separate TextBlock for each letter each of which with the exact same height, width and vertical placement.  They were all exactly the same distance apart as well.

I then added a rectangle over top it all to act as the clickable area.

Build the animation

With all of the xaml objects created, I could start on the animation.  Again using nothing but Expression Blend, I first created the storyboard.  Then I selected the first letter (TextBlock) and added a keyframe at 0 seconds and another at 1 second.  I then selected the letter and drug it to it's new location.  Using split view when editing animations helps so you can fine tune values.  This made getting the letter to the exact spot I wanted quite easy.  To make the letters flow a little nice I added a couple more keyframes immediately after the first and before the last.  On to these I set the opacity of the textblock to be 65% and on the first and last keyframe I set made sure it was at 100%.  Running it a few times I was satisfied with the look so I then followed the same process for each of the other letters.

One thing that happened during this I found odd:  Even though I followed the same process for animating each TextBlock, the first half of them modified the Canvas.Left property while the others applied a RenderTransform along the X axis.  Both approaches bought about the same result but I still would have changed them to all be the same in a production application.

Wire the event

The only thing left was I needed a way to start the animation.  For this I selected the final rectangle and in the properties tab I selected the events pane.  Once there all I needed to do was double-click in the MouseLeftButtonDown text box and Visual Studio 2008 opened with the page.xaml.cs file open and the stub method already created.  Then it is as simple as calling the Begin method on the storyboard.

I did do one other thing in code actually and that was in the constructor for Page, I set a couple of properties on the storyboard to get the reversing behavior and the pause between directions.

 
That's all there is too it.