This post is part of a string of posts found here: Learn Blend in a Month.

There are two ways to animate in Silverlight, through storyboards and through code. Expression Blend offers extensive help in creating Storyboard animations. Silverlight animation is time based not frame based, this means that your animation will benefit from running at the maximum frame rate that the users machine will allow. Multiple storyboards can be created and run at the same time, but for the purpose of this basic tutorial we will create a single storyboard.

In this tutorial we will create the following animation.

If you are using the default UI layout in Blend, you may want to hit the ‘F6‘ key to switch the layout from design mode to animation mode, this will give you a better layout for working with storyboards.

Notice that after adding a storyboard a red circle will be displayed in the top right of the screen, this indicates that you are in record mode. When in record mode, every change you make is treated as an animation and will be tied to a Keyframe. To turn record mode on or off click on the red circle in the top right of the screen, it should toggle from red to grey.

For the purpose of this tutorial I have created a ball graphic and a shadow graphic as shown below. I actually came up with this idea of a beach ball during my flights to Cozumel. I have placed them off the page to the left so that they start out of site.

Storyboard animation is based on Keyframes set to specific times. To add a Keyframe, go back to the ‘Objects and Timeline‘ tab, select the objects that you want to animate and click the Record Keyframe button as highlighted below. You will see that a new Keyframe is added by each object at zero seconds.

To add a Keyframe at a specific point along your timeline, drag the yellow time bar to the required point and then hit the Record Keyframe button. To make our ball graphic animate I have selected a time stamp of 0.5 seconds and moved the ball to the position shown below.

I then animate the ball and shadow graphics again at 1 second.

And once more at 1.5 seconds to finish the animation.

Now that we have completed the animation we may want to loop it multiple times or loop it forever. To make the animation loop, make sure you have the storyboard selected under the ‘Objects and Timeline‘ tab, then go to your ‘Properties‘ tab and scroll down to the ‘Common Properties‘ section. Here you have an option to repeat the animation several times, for this tutorial we want to set it to ‘Forever‘.

Finally we need to tell the storyboard to play. Sometimes you will need a storyboard to be called by the code behind file, but we can use ‘Behaviors’ to start a storyboard instead. ‘Behaviors’ are pre-set actions that can be dropped onto objects in Blend, they are an easy way to achieve functionality without requiring knowledge of C# or alternative languages. My tutorial series will touch on Behaviors in more detail later on this month.

To tell the storyboard to autoplay, go to the ‘Assets‘ button on the main tool bar (the last icon), select ‘Behaviors‘ from the list on the left to bring up the selection of behaviors. Find the behavior titled ‘ControlStoryboardAction‘ and drag it onto your ‘LayoutRoot‘. See how the behavior is indented below the ‘LayoutRoot‘. Select the behavior and go to the ‘Properties‘ tab, scroll down to the ‘Triggers‘ section and set the following settings:

EventName = Loaded

ControlStoryboard… = Play

Storyboard = Storyboard1 (the name of your storyboard)

You can grab the example files for this tutorial here.

This post is part of a string of posts found here: Learn Blend in a Month.

Silverlight 3 introduced the ability to use Pixel Shaders with 2 native effects built in and available in the Expression Blend 3 tool. The two Pixel Shaders that Blend currently offers are ‘Drop Shadow‘ and ‘Blur‘. The Drop Shadow effect is even able to convert Photoshop Drop Shadow effects reasonably well through the new ‘Import Adobe Photoshop File‘ feature.

Both the ‘Blur‘ and ‘DropShadow‘ effect will work on any item inside your project, including vector shapes, text and images (even with transparent areas).

Below is a PNG image of a star created with Adobe Photoshop cut out onto a transparent background.

To apply one of the default Pixel Shaders to our star image we need to go to the ‘Properties‘ panel and scan down to the ‘Appearance‘ section. Click the ‘New‘ button next to the ‘Effect‘ button and select the ‘DropShadowEffect‘.

As you can see below, the Shadow Effect hugs the star and omits the transparent areas.

There are now several fields to play with to change your ‘DropShadow‘ effect:

• BlurRadius - How blurred the Shadow is.
• Color - The color of your shadow.
• Direction - The angle of the light source creating the Shadow Effect.
• Opacity - The strength of the shadow in terms of darkness.
• ShadowDepth - How far away from your object the Shadow will appear.

To add a ‘Blur‘ effect, go to the ‘Properties‘ panel and scan down to the ‘Appearance‘ section. Click the ‘New‘ button next to the ‘Effect‘ button and select the ‘BlurEffect‘.

As you can see this will blur your entire object.

You only get one option to modify the ‘Blur‘ effect.

• Radius - The level of Blur intensity.

Only one Pixel Shader can be added to an object. Two get multiple Pixel Shaders on the same item, group the item into a ‘Canvas‘ or ‘Grid‘ using the right mouse button and apply the second Pixel Shader Effect at that level.

Be warned that Pixel Shaders are graphic intensive, so using too many on screen at once or applying Effects to your entire screen may give the end user a poor experience.

To read about alternative methods of creating scalable shadows read this post, to read about creating dynamic 3D shadow effects read this post.

To find out more about adding additional Pixel Shaders, including the below, read this post…

• Directional Blur Effect
• Pixelate Effect
• Pinch Effect
• Ripple Effect
• Swirl Effect
• Zoom Blur Effect

This post is part of a string of posts found here: Learn Blend in a Month.

Silverlight supports the following image and video formats:

Images

• JPG
• PNG (with alpha)

Video

• WMV

To import images or video in to Blend you need to go to the ‘Project’ tab and right click on your project. Select ‘Import Existing Item…‘ and browse for your media file. Now your media is in your project you have two methods to visually display them, by using the Image / Media Element or through an Image / Video Brush.

Image and Media Elements

You can simply drag either image or video files from the Project tab onto the design surface. This will automatically put the required element on stage with the media displayed inside.

If you select your media you will see you get handles around each corner allowing you to resize, rotate etc. If your media does not perfectly match your Image / Media Element area you can stretch your content in a number of ways.

To stretch your media first select it, then go to the ‘Properties‘ tab and scroll down to the ‘Common Properties’ options. Click on the drop down for ‘Stretch‘ and select one of the following options…

• None - displays the native size
• Fill – distorts to fill both height and width fully
• Uniform - keeps correct proportions and fills keeping all of the media in view
• Uniform to Fill – keeps correct proportions but fills all of the Image / Media Element area

*Left Image is set to Uniform, middle is set to Fill and right is set to Uniform to Fill.

Image brush and Video brush

By using brushes you can display images and video on any path, shape or text.

To use an image brush first select the object you want to display the image on, go to the ‘Properties‘ tab and then to the ‘Brushes‘ options. Select the ‘Fiil‘ option and then click the ‘Tile brush‘ tab (the forth tab of 5 : None/Solid/Gradient/Tile brush/Resource).

Now you can select the ‘ImageSource‘ to the required image in you project and also set the ‘Stretch‘ settings (see earlier in post for more detail on Stretch options).

Applying a video brush is a little more tricky, we are required to add this in the XAML view manually. Change the view mode to ‘Split view‘ so that we can see both the Design area and the XAML area at once. Click on the object that you want to use to display the video on and notice how the XAML view automatically jumps to where that object is too. Now we need to add the Video brush reference in ourselves so that the XAML looks like this…

<Grid x:Name=”LayoutRoot” Background=”White”>

<MediaElement x:Name=”Wildlife_wmv” Source=”/Wildlife.wmv” Stretch=”Fill” Visibility=”Collapsed”/>

<TextBlock x:Name=”textBlock” Text=”VIDEO” TextWrapping=”Wrap” FontSize=”96″ FontFamily=”Verdana” FontWeight=”Bold” HorizontalAlignment=”Center” VerticalAlignment=”Center”>

<TextBlock.Foreground>

<VideoBrush SourceName=”Wildlife_wmv”/>

</TextBlock.Foreground>

</TextBlock>

</Grid>

Note that we have to have the Video as an element on the stage and reference it’s x:Name in the brush. So as not to see both videos we can collapse the original so that it is hidden.

Click here to see the Video Brush working.