This post is a complement to Create shadow effect in Blend, where I am going to explain how to achieve a better, smoother looking shadow by modifying the gradients of the Fills and the OpacityMasks.

Starting from where we left the last project:

. In the main menu choose: Tools/Options/Artboard and check the option: Show snap grid if it's not already.

. Select the Object (white rectangle) and set its Horizontal and VerticalAlignments to: Stretch.

. Create 4 ColumnDefinition guides as follows:
 at 10px from the Right side
 at 10px from the Bottom
 at 30px from the Left side
 at 30px from the Top

I have chosen 10 and 30px because my Grid line spacing is set to 10px but if yours is set at 8px you can use 8 and 24px as I want the ColumnDefinition guides to snap to the snap grid. (See image 1)

Image 1:  

 

. Select ShadowBottomRight and then select the Brush Transform Tool. You should see the vertical arrow from the Fill gradient. If not select the Fill gradient Brush.

. Click on the tip of the arrow and while pressing the Shift key down drag it up until the back of the tip is aligned with our bottom ColumnDefinition guide. You may want to zoom a lot on the area to be more precise. I zoomed to 3200% and up. It would be classic if the ends of the gradient arrow snapped to the guides. I didn't manage to find a way to do that so if someone knows something please enlighten me. (See image 2)

Image 2:  

 

. Now drag the back end of the arrow down towards the bottom edge of the Object. (See image 3)

Image 3:  

 

. Select ShadowBottomLeft and repeat the exact steps as for ShadowBottomRight. (See image 4)

Image 4:

 

. Select ShadowTopRight and modify the Fill gradient Brush as follows:
     drag the tip of the arrow (for the rest of this tutorial you should always do this with the Shift key down) and align it with the top guide.
     drag the back end of the arrow until the middle (marked by a tiny circle) reaches the top edge of the Object. (See image 5)

Image 5: 

 

. Repeat the exact same steps with ShadowTopLeft. (See image 6)

Image 6: 

 

Note: for this precise project the center of the Fill gradient is at this point aligned with the top edge of the Object, therefore we could very well drag the tip of the arrow while pressing the shift and the Alt keys down. This way the gradient size is modified in relation to its central axis.

We finished modifying the Fill gradients for the four parts of the shadow. Now let's modify their OpacityMasks.

. Select ShadowBottomRight and in the Brushes panel click on the OpacityMask brush. Drag the ends of the gradient brush (the arrow) to align the tip to the right guide and the back end to the right edge of the Object. Always zoom a lot when doing this to be more precise. (See image 7)

Image 7: 

 

. Repeat the same steps with ShadowTopRight. (See image 8)

Image 8: 

 

. Select ShadowBottomLeft and modify the ends of the gradient to align the transparent end (the tip) with the Left guide. Now by dragging the opaque end (back end of the arrow) as to coincide the middle of the gradient with the Left edge of the Object. (See image 9)

Image 9: 

 

. Select ShadowTopRight and repeat the same steps. (See image 10)

Image 10: 

 

Now the shadow effect looks more like the one obtained from a focused source of light. In this case the source is located somewhere NW.

Let's make the effect look even nicer:

. Select ShadowBottomRight then its Fill brush in the Brushes panel. Select the dark end of the gradient and on the color Editor choose a shade of gray  that is somewhere in the middle from white to black. (See image 11)

Image 11:
 

 

. Perform the same color change to the remaining 3 parts of the shadow. (See image 12)

Image 12: 

 

This type of shadow effect simulation suits only rectangular and square shapes, and with rounded corners only to a certain extent. To prove this select the Object then the Rectangle Tool and round the corners a little bit moving the Upper Left Handle. (See image 13)

Image 13: 

 

If the corners are too round the shadow won't fit the shape of the Object anymore (See image 14) but you can play with the Opacitymasks to make the shadow look rounder (See image 14a)

Image 14: 
Image 14a:

 

Now you can play around modifying gradients and colors to suit your design. One more thing, lighter shades suit shadows best to achieve a smoother look and this shadow can turn into a glow effect by altering the opaque color. Here is the final product after touch ups:

 

 

 

In a future post I will explain how to link this to a template and perform data bindings in a Silverlight control to achieve something like the main menu on Mashooo.com's new interface.

I would suggest to reproduce the exact same demo in this tutorial for you to understand better how this works. Later you will be able to play with it.

We will use 5 Rectangle shapes in total: One will be our object and the other four will form the shadow.

 

. Create a Grid, 300px Width by 200px Height. All our elements will be created inside this Grid. Double click it to select it (A yellow border indicates that). This helps to easily select (simple left-click) the objects inside our grid.

. Create a Rectangle, 200px Width by 100px Height. Leave its Fill color to the default White and set the Stroke to: No brush. This will be the object to which we will "apply" the shadow. Let's Name it "Object". Set its Horizontal and VerticalAlignment to: Center in the Layout properties panel. (See image 1)

Image 1:

 

. Create a Rectangle, 150px Width by 100px Height, which is exactly 1/4 of the Grid's area. Leave its Fill color to the default White and set the Stroke to: No Brush. In the Layout properties set the HorizontalAlignment to: Right and VerticalAlignment to: Bottom. This will be the bottom-right corner of the shadow. Let's Name it "ShadowBottomRight".
Set its Fill to: Linear Gradient Brush. Select the Brush Transform Tool (See image 2).

Image 2:

Notice the Black to White default Gradient Fill. Leave it as it is.

 

. Now select the OpacityMask Brush and set it to Gradient brush. It's normal that nothing seems to change. Select the Brush Transform Tool if it's not still selected and Rotate the dark end of the brush (Back end of the arrow) towards the left while pressing the Shift key until the arrow is perfectly horizontal. (See image 3)

Image 3:

 

The Shift key causes the arrow to snap so it is indispensable for this project to achieve a smooth looking gradient.

.  Select the White end of the OpacityMask gradient on the Brushes Property panel and set its Alpha transparency to 0%. (See image 4)

Image 4:  

Cool, ha?

 

. Select our "Object" and modify its Order to: Bring to Front. (See image 5)

Image 5:

 

At this point you could already be altering the gradients position and length but if this is new to you you should leave it as it is and continue with the next steps.

. Select the ShadowBottomRight rectangle, copy and paste it. Name it "ShadowTopRight" and set its verticalAlignment to: Top. (See image 6)

Image 6:

 

. In the Transform properties panel select the Flip tab and click on: Flip y axis. (See image 7)

Image 7:

 

. Now modify its Order to: Send to Back. (See image 8)

Image 8:

 

. Select both ShadowBottomRight and ShadowTopRight (with the Shift or the Ctrl keys), copy and paste and with both shapes still selected set the HorizontalAlignment to: Left. (See image 9)

Image 9:

 

. Set the Flip Transform property to: Flip x axis. (See image 10)

Image 10:

 

. Finally modify the selection's Order to: Send to Back. (See image 11)

Image 11: 

 

. You can now name them (you guessed it): "ShadowBottomLeft" and "ShadowTopLeft".

We have finished creating all the elements necessary to the shadow effect. Here is the outcome for now (See image 12) which doesn't look perfectly smooth because we haven't modified the gradients: Notice the 2 peaks of vertical dark shadow towards the center of the Object.

Image 12:

 

I will explain later a trickier part that consists of adjusting the Fills and OpacityMasks gradients to achieve a better looking shadow drop, like the one I used in the Mashooo.com main menu in the header area.

This is my first attempt ever to putting together a tutorial so questions, criticism, complaints, corrections, kudos (they all start with the sound "k"!), etc are all very welcome. Enjoy!

>>Create shadow effect in Expression Blend part 2

 

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:

Update 2009-01-07: After grahamws' comment I have added to the button and the rectangle animations a text affected by the Visibility property. In its normal state it's Collapsed and it is set at Visible in a 2 second timeline. This to show that now in Silverlight 2 Release the Visibility property works fine unlike at the time when I played with it in a previous Silverlight version.

You can see all the code in my comment from 2009/01/07.

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.