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 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.

The reason why my Make text appear and disappear in Silverlight 2 didn't work anymore after some Silverlight updates is because I used the Mouse Down event on the button. After the update the correct way of making a button work is the Click event. The Mouse Down event works with shapes and other objects such as this rectangle:

I discovered Bill Reiss' Dr. Popper a couple of days ago (Good Job Bill!) only to be surprised by the existence of many Silverlight based Games that I wasn't aware of, go figure. I decided then to compile my finds on search keywords "Silverlight Games" for my own selfish personal enjoyment but realized it could be of great use to other curious spirits. Sadly, many of the games I came across run on prior versions of SL. The list is a compilation of games that were built or were updated to run on Silverlight 2 Beta 2 only. Check it out on Mashooo.com.

My baby is now updated to work on Silverlight 2 Beta 2. One animation and a couple of controls had to be modified with no great hardship and in no time. I did the work on the new Preview June 2008 Expression Blend 2.5, that for what I could see in just a glimpse, has many new features that I didn't even have time to explore due to my hurry to fix Bumble Beegger.

The only animation that didn't work properly on SL2B2 was the falling leaf that shows the level number: The problem was that the text and the leaf image were animated separately and some disphasing took place. Fixing it was as easy as grouping the elements into a canvas and recreating the animation at once.

Click here to give Bumble Beegger a try.

I know, I know, I've been neglecting this blog but I have the perfect excuse: I was very busy creating my very first Silverlight Game. Actually my first game ever. I teamed up with APIjunkie (the guy is a GENIUS) that after this experience I consider my BFFUFN.
I have learned a lot about Silverlight 2 and Expression Blend and I CAN wait to share the knowledge so I'm taking a little vaycayshonne first.
The name is Bumble Beegger and it's published on http://www.mashooo.com. Go check it out and don't be shy to criticize.

 

On my previous post I showed an option to cause a message to appear by clicking on a button. I had played for a while in Blend 2.5 with the obvious functions and animations to achieve this but for some reason it didn't work out. For the opacity of the text the xaml in Blend showed errors. Visual Studio 2008 didn't show any errors but it wouldn't debug either. As for the visibility function it just doesn't work when the timeline recording is on. I get a pop up window describing: "Invalid Property Value: The Property Value is not Valid" (I like how it's refrased in case we didn't get it).

Finally I came up with the last resort, playing with a color animation. Only last night I kicked, digged, dzoned, etc. the article with a very nice result since I received useful comments. Sean made me want to give the opacity another try because it really didn't make any sense that it didn't work. He also mentions that it would be more useful in the case of having a video or an image.  So thanks to Sean here is the result:

This morning I felt like recreating in Silverlight 2, with Microsoft Blend 2.5 March Preview, a little executable I made in WPF. First of all I listened to some lying-in-a-caribbean-beach-sipping-pineapple-and-grenadine-juice music to tame the frustration without having to drink any alcohol.

Back to the subject. I couldn't manage to make a message appear and disappear at the click of an object because the Visibility option "Hidden" is not available. The solution turned out to be very simple. It is actually a color animation. The initial color of the font is the same as the background. Then in the animation I changed the color to Black for 2 seconds. At 02:01:00 I added a keyframe to turn the text back to its original color. Here is the result:

This animation creates the illusion of a message appearing after being triggered by clicking a button and then disappearing. Notice the fading effect achieved by the 0.1" color animation at the end.

Update 2008 Aug 2: The app doesn't work properly because of an Event Handler issue. Will post solution in the future.

Update 2008 Sep 3: The solution is in my post Fix for: Make text appear and disappear.

Update 2008 Oct 15: The text properties are not found in type "button": in this case TextWrapping ="Wrap" and TextAlignment ="Center". I had to make the button longer so the text would fit. I also added the FontSize property because the default size was too big.