Summer's here, and that usually means a bit of a slow-down in the office as folk take off on vacation. It's also a great time for some new skills development and training, and as there's a smorgasbord of WPF and Silverlight-related courses taking place over the next few months, I thought I'd take the opportunity to highlight a round-up of the choices available to you, presented in the form of an events calendar:
Whew - a lot of courses going on - hopefully you can find one near you. If you know of another course on WPF and Silverlight that's taking place between July and September, feel free to add a comment to the blog to let others know.
The Silverlight 1.1 alpha bits don't currently have much in the way of controls. The infrastructure is there (you can derive from System.Windows.Control, for instance), and we include a few early sample controls (button, slider and so on, including source code) with the SDK, but the full set of controls won't come until the next public release.
In the meantime, Tim Heuer pointed me at an interesting set of controls that have been developed by an organization called NETiKA Technologies. If you go to this demo page, you'll see that they've somehow taken a pretty broad set of Windows Forms controls and implemented them for Silverlight (and Flash). Or at least, I think that's what they've done. It's not entirely clear what's going on under the covers here, since the code you write starts off as a Windows Forms application that the toolkit cross-compiles to Silverlight.
The demos are pretty impressive - a little slow (it is alpha code running on alpha code, to be fair), but particularly the designer demo is a great example of the RIA experiences you'll be able to build and run on Silverlight. Another couple of weeks' work, and this demo could be a real web-based Silverlight IDE in its own right!
In other Tim Heuer news (!), he took the ad overlay screencast I recorded on Wednesday as inspiration for a follow-up Silverlight screencast on triggering events through video markers. Worth a look.
Celso Gomes is an amazing interactive designer working at Microsoft who is responsible for the beautiful sample applications that ship with Expression Blend and did some of the earliest design explorations for Silverlight.
Now he's come up with Nibbles: a series of "snack tutorials for hungry designers" that cover the use of Expression Blend to build WPF and Silverlight content. The site itself is a stunning example of Silverlight, with faded animations and transitions and accordion bars: it makes my own work seem feeble by comparison. Make sure you check it out - it's inspiring...
Viral video sites are everywhere: it seems that everyone has an embarrassing moment or unusual performance that they want to share with the world at large in the hope of becoming the next internet celebrity. All those videos eat up a huge amount of bandwidth, of course, and content sites are almost universally looking to advertising as a way to both pay for the hosting costs and make a decent profit. Some sites force you to sit through a bumper ad before you can watch the content you're looking for; other sites show regular text or Flash ads around the edges of the screen. What would be ideal is something that is contextual to the video, not so intrusive that it frustrates the user (like the bumper ad), but also not so far out of the user's focus that they don't even notice it's there.
In that vein, I thought I'd put together a quick screencast that shows how you can use Expression Blend and Silverlight to do static image ad overlays on videos, with animation to toggle the advert on and off. This kind of thing is straightforward to accomplish with Silverlight and it meets the criteria above. Of course, this technique isn't just relevant for advertising - you could have the animations triggered by markers within the video, or used to display live updates in a ticker along the bottom of the screen.
As we were pretty explicit in declaring at the MIX conference last month, one of the key scenarios for Silverlight 1.0 is delivering rich video experiences. But since the word "rich" is something of a cliché in the web world, I wanted to give a small example of what this means in reality.
To include a video file in your Silverlight application, you simply add a line like the following within the XAML content:
<MediaElement x:Name="Video" Width="320" Height="180" Source="sample.wmv" />
This creates a pretty raw player, but you can then add a custom skin for the player, along with event handlers to add playback control, handle download or buffering, adjust volume or balance, retrieve metadata, or trigger an action on a timeline marker being reached. If you happen to use Expression Media Encoder (currently a free beta) to re-encode your video file, you can have it automatically generate a skin based on a variety of templates - and indeed you can then use Expression Blend to further customize those skins.
However, one of the most understated features of Silverlight is the powerful rendering engine that sits underneath all this XAML code. Originally codenamed "Jolt", the runtime is a highly-optimized environment that contains many of the revolutionary improvements from the WPF equivalent. The result is that you can apply transforms and animations even to something like video in a tiny amount of code. For example, taking the video above, you can add an animation storyboard that targets the media element to do something really clever like flipping it around, like so:
<Storyboard x:Name="Flip" AutoReverse="True" RepeatBehavior="Forever"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Video" Storyboard.TargetProperty="(UIElement.RenderTransform). ↙ (TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <SplineDoubleKeyFrame KeyTime="00:00:02" Value="-1"/> </DoubleAnimationUsingKeyFrames>
The above XAML snippet creates an auto-reversing, auto-repeating animation that flips the video on the y-axis over a two second time period (assuming that the media element contains an attached property of type MediaElement.RenderTransform).
Actually, even these few lines makes this look harder than it needs to be. From Expression Blend, you can simply create a keyframe and manipulate the video however you want - moving it, skewing it, rotating it, scaling it, fading it or flipping it. You can do all that without writing a line of code.
To demonstrate this, I wrote a small sample that shows off all these transformations. If you have the Silverlight beta release on your machine, click here or on the image to the right to try it out live (hosted by Silverlight Streaming), or of course you can download the sample source code here. Click the various hyperlinks on the right-hand side to start, pause or resume each animation type. It's not the prettiest demo that has ever been written, but I'm sure any designer worth their salt can see how this can be used to create some really interesting effects. Just for interest, I built this sample entirely with Expression Blend; there's minimal code and its function is purely to trigger the various storyboards.
The underlying point here is that Silverlight is a remarkably powerful platform for rendering effects - I can't think of any other platform available today outside of WPF where you could do something like this at runtime without writing reams of complex code - and of course, all this runs cross-browser on both Windows and Macintosh.