Along with Expression Blend 2 came a new functionality for embedding fonts in your project. The problem is that this results in a heavier than expected .xap file, especially noticeable in a tiny little project.

I had in mind this very simple Silverlight Loader (to use as a splash screen) that contained one word that would slide back and forth. I created a TextBlock and embedded one of my favorite fonts to try; The result was a 59k .xap. In order to not have to embed any fonts in the project I converted the text to paths... I'm lying. I did it to better achieve the animation I desired.

Before doing this I prefer to modify the text to the right size although every modification is possible later as well.

Select the TextBlock and right-click or Object/Path/Convert to Path. Then you can separate the letters to be able to move each letter independently: select the path, right-click or Object/Path/Release Compound Path but then you need to fix the letters that form loops like A or O because they become two different paths (see image below). To do so select the two paths that form one letter, right click or Object/Combine/Exclude Overlap.

I especially like that now the text can have all the attributes of a regular path so the graphic rendering has the potential to be more sophisticated. The top text is a TextBlock while the middle one is the same converted to path. I left the O's without excluding the overlap to show what loopy letters look like right after being converted to path. The bottom row shows a few variations of what can be achieved with text as paths in Expression Blend 2.

After deleting the Fonts folder from the project I obtained 17k instead of 59k (wink!). You can see the result on Mashooo.com for 2 seconds while the games thumbnails are loading.

I am releasing the code for the Baby-2-Woman Silverlight Loader demo project. You can download the solution from Api Junkie's Silverlight Loader project on CodePlex by clicking on SilverlightLoadersSolution.zip. It is a complete solution that you can open in Visual Studio 2008 and contains everything you need to get started creating your own loaders. You can find all the graphics and animations in ProgressBaby.xaml if you open it with Expression Blend. The code that updates the animation as the download progresses can be found in ProgressBaby.cs.

I contributed to Api Junkie's Silverlight Loader project by creating the graphics that relate to the progress of the loading stages. I wanted to create something very esthetic without complicating myself too much so I did the whole thing from scratch in Expression Blend 2.
It's all vector graphics so the main tasks here were moving points around and adjusting gradient fills.

Good things:
I was very pleased with the results that can be achieved by playing with gradient brushes and color opacity. Notice the silky shiny hair, the diffused cheeks blush, the plump lips and my favorite effect: the body's volume. Also, I was able to make the torso, the arms and the neck appear like one whole shape. So besides animating shapes I also animated the color gradients by changing the positions and the angles with the Brush Transform tool.

Not so good things:
Starting with small shapes that I enlarged to animate them made me go back and reposition them in all previous keyframes because they would not stay in place. After I understood that when the size of an object changes so does its center (considered the reference point for its translation) I fixed this by modifying the object's layout width and height to a much bigger size so I wouldn't have to translate the object but just move point by point inside the bounding box. This was the case for 2 of the shapes that make the hair, the arms and the head.

I tried the opacity mask on the turquoise background to create the darkened bottom but it wouldn't show at all when I tested the project. Finally I just used a gradient fill with a darker version of the turquoise on one end.

The picture frame was very easy: I created the top side with the pen tool, colored it with a gradient fill, then copied, flipped and scaled to create the other 3 sides of the frame. Finally, not being completely pleased with the colors I modified the gradient fill in one of the sides, converted this brush into a resource and applied to the rest.