Yahoo! Messenger for Windows Vista
Wednesday, December 05, 2007
This evening, Yahoo! Messenger for Windows Vista went live. You can download the software here. You can read the official release information at the Yahoo! Messenger Blog.
You can skin it.
You can tab it.
You can scale it.
Today, it is one of the largest applications available that is built in WPF. The application is all .NET 3.0 built on top of an unmanagaged legacy layer of code. The bridge is a mixed-mode C++ DLL. These together provide a WPF-friendly data model to the unmanaged code portions.
I think it will set the trend for the next generation of messaging applications. In addition to just looking cool, it's also compatible with MSN Messenger. So you can talk to all of your MSN buddies using this client as well. Now if they would just all play nicely, we'd finally be getting where we need to be.
GTalk, MSN, Yahoo!, AIM, Jabber, etc. Can't we all just get along?
Adobe Illustrator to XAML
Wednesday, October 03, 2007
Some of you, my dear readers, have asked how I got over that magical step in my Silverlight Animation Tutorial. The step where I had an Adobe Illustrator file, and then, POOF!, I had the XAML to start working with it.No, I didn't recreate the logo in Expression Blend. Mike Swanson created an AI->XAML Exporter. You will need:
* Adobe Illustrator CS2
(I don't know how they did it, but every trial version of this software on the web has disappeared. There used to be a 30 day trial...now you can only find Illustrator CS3. This is why I save all of my installation files.)
* Mike Swanson's Export Plug-in
* The rest of his instructions.
One quick thing to remember, however, is that there are a couple of quirks with the XAML you get. The syntax is good. No issues there. But it is creating XAML for WPF, not Silverlight. WPF has a much larger set of tags to work with, and as such, most WPF XAML may not be directly compatible with Silverlight.
Not in a "these are totally different" way, more in a "the opening and closing tags for WPF are different than Silverlight." WPF uses <window> as its top level tag, and Silverlight uses the <canvas> tag. Window is meaningless to Silverlight, because you don't have a window for it. It's only part of a web page. You can see this illustrated below:
Default code generated for a WPF application:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledApplication1.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Grid x:Name="LayoutRoot"/>
</Window>
Default code generated for a Silverlight application:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page"
>
</Canvas>
So, in order to use the XAML that is generated by this tool in Silverlight, you're going to have to chop the "middle" of the XAML out and paste it into your new Silverlight app. Everything else should be the same. Ta-da!
Labels: adobe illustrator, Mike Swanson, Silverlight, WPF, XAML
TUTORIAL: Creating A Simple Silverlight Animation
Monday, October 01, 2007
Silverlight has to be one of the easiest things I have ever worked with.
Last year, I was asked to put together a logo and site design for a new type of technology conference: CodeMash. (As a sidenote, registration just opened for the 2008 Codemash. For the price, it is by far one of the best conferences you'll attend this year.)
I designed the logo in Adobe Illustrator CS2, knowing that it would be used for print materials, the website, t-shirts, etc. It only made sense to create it using vector graphics. Little did I know at the time, it would also be the way that I turned that logo into an animation for CodeMash v2.0.0.8.
This post is meant to be a tutorial on what it really takes to create a simple Silverlight animation.
First, you are going to need to install some software (I am including links the newest stuff, but you should be able to do this with v1 of expression, and no Silverlight):
* Silverlight 1.1. Alpha
* Microsoft Expression Blend 2 September Preview (This version is good through June 1, 2008)
Once you've got those installed, you're also going to need some base XAML (eXtensible Application Markup Language) to work with. Download the CodeMash logo here. All this markup is at this point is the design. Just save this .txt file down, and we'll use it momentarily.
OK, now on to the tutorial:
1) Open Expression Blend 2, and create a new project.
2) Choose Silverlight Application (.NET)
3) By default, Page.xaml will be open. Choose the XAML view.
4) Cut and paste the contents of the logo.xaml file you downloaded earlier IN BETWEEN the <canvas> and </canvas> tags that are currently provided to you.
5) Flip back to the Design view, and you should now see the CodeMash logo on your canvas.
6) You're probably also noticing that the white canvas we started with isn't really big enough for our design. We should probably make that bigger as well. It needs to be 650px x 777px. We've got two options with this one. This first is just to edit the XAML directly. Take a look at that initial <canvas> tag we started with. It's got width and height properties, so we can just change the values. The second option is much better for those of you that don't want to edit your XAML directly. Click on the element named "Page" (that's our primary canvas) in the "Objects and Timeline" panel. Then, click on "Properties" in the top right. This shows you, much like Visual Studio, the Properties that are available to the element you've selected. Finally, you'll see the width and height properties in the list. You can type the values there, or you can use the innovative "slider" interface to get to the value you desire.
7) Take a look at the Objects and Timeline panel. You should see a well organized list of all of the elements that make up the logo. Gears, glasses, etc. Each one of these elements is defined in the XAML we imported. We are primarily going to be working in this panel the rest of the way.
8) Press F7 on your keyboard. This will take us into the "Animation Workspace." It's not any different from the "Design Workspace" (F6) we were in, except that the panels have been moved.
9) Expand the elements in the Objects and Timeline panel, and look for:
Page > Orange_Gear > Orange_Gear_Teeth. Click on that element once, highlighting it.
10) Under the "Objects and Timeline" panel header, there is a drop-down list with "(No Storyboard open)" as the selected value. Click the ">" button just to the right of that list. This will bring up the storyboard search dialog. Click the "+" symbol to create a new storyboard. Name your timeline/storyboard (it's named Timeline1 by default), and click "OK." Since we're gonna be animating the gears, I named my timeline "GearSpin."
11) You will now see that a timeline has appeared next to our list of elements. Each number (1, 2, 3, etc.) represents one second of time. We will use these times to "schedule" our animations. For those of you unfamiliar with animation software, we are going to be creating keyframes that will do most of the animation work for us. Basically, we define the states we want our elements to be in at certain keyframes, and the software figures out how to get it from Point A to Point B without any other instruction. Please also notice that your canvas now has a red line around it, and in the top right corner, now says, "Timeline recording is on." This means that all of our future actions will be recorded and animated. When we want to make a change that we don't want to be part of the animation, we need to make sure to turn recording off.
12) Make sure that the element "Orange_Gear_Teeth" is still selected. Just above where ZERO seconds is on the timeline, there is an icon with a green "+" in it. Click it. By clicking this, we are creating a keyframe at 0:00 of our animation. This means that it will start as soon as the application does. We could move this to 1 second if we wanted a 1 second delay before our animation began, but for this demo, we want it to start at the beginning.
13) Next, we need to create a new place for these gears to be. So let's say we want to have them rotate 90 degrees in 1 second. Drag the yellow timeline indicator to one second. Click the "+" to set another Keyframe at 1 second. In the "Properties" tab in the top right of Expression Blend, find the "Transform" section, and click the "Rotate" tab inside there. You will see that the current Angle is set to 0 degrees. Let's change that to 90 degrees. You can either click and drag the box to the right, until it says 90, or you can just click on the box, which will allow you to type 90.
14) Whoa! You may have noticed that your gear teeth have derailed from their hub. That's because we didn't define the center of those objects appropriately. Press CTRL + z on your keyboard, to undo the change you just made. Also, because we don't want to animate moving the center of these objects, we need to turn off recording. You can do this by clicking on the red circle in the top right corner of the canvas.
15) Because you have highlighted the "Gear_Orange_Teeth" layer, you should see a blue box surrounding those elements, but probably a bit bigger than just those elements need. You should also see a white dot that indicates where the center of that entire box is. We need to move that. Click on it and drag it to the blue center of the orange gear. That's the point we want our teeth to rotate around, right? To be more exact, I recommend zooming in and placing your center point that way.
16) Once you're confident in your center point, turn recording back on, modify that angle again, changing it to 90 degrees. Now you can click the "PLAY" button (it's right above the timeline) to see your orange gear spin.
17) We've got one other thing to take care of to make this look great. We don't want to have the gears stop after 1 second. We want them to continue spinning forever. This is a simple change. We had selected Orange_Gear_Teeth from the timeline earlier, and now we need to expand it. Inside it, you will see a RenderTransform element. This was created when we changed that rotation angle. Expand it all the way, and you will see an "Angle" element. Right-clicking on this will give you the option to "Edit Repeat Count." We can set this to 1, 2, 100, etc. There's also an "infinity" option. Choose that, and our gears will spin forever.
18) Now, we need to animate the other two gears. We are going to follow the same steps for the Blue and Green Gears. So take steps 9-17, rinse, lather, repeat. The only difference for the other two gears is that they rotate in the other direction. So instead of 90 degrees, they will be set to -90 degrees.
19) You should now have a working Silverlight application, that has the gears spinning. Press F5 to run your project!
Last year, I was asked to put together a logo and site design for a new type of technology conference: CodeMash. (As a sidenote, registration just opened for the 2008 Codemash. For the price, it is by far one of the best conferences you'll attend this year.)
I designed the logo in Adobe Illustrator CS2, knowing that it would be used for print materials, the website, t-shirts, etc. It only made sense to create it using vector graphics. Little did I know at the time, it would also be the way that I turned that logo into an animation for CodeMash v2.0.0.8.
This post is meant to be a tutorial on what it really takes to create a simple Silverlight animation.
First, you are going to need to install some software (I am including links the newest stuff, but you should be able to do this with v1 of expression, and no Silverlight):
* Silverlight 1.1. Alpha
* Microsoft Expression Blend 2 September Preview (This version is good through June 1, 2008)
Once you've got those installed, you're also going to need some base XAML (eXtensible Application Markup Language) to work with. Download the CodeMash logo here. All this markup is at this point is the design. Just save this .txt file down, and we'll use it momentarily.
OK, now on to the tutorial:
1) Open Expression Blend 2, and create a new project.
2) Choose Silverlight Application (.NET)
3) By default, Page.xaml will be open. Choose the XAML view.
4) Cut and paste the contents of the logo.xaml file you downloaded earlier IN BETWEEN the <canvas> and </canvas> tags that are currently provided to you.
5) Flip back to the Design view, and you should now see the CodeMash logo on your canvas.
6) You're probably also noticing that the white canvas we started with isn't really big enough for our design. We should probably make that bigger as well. It needs to be 650px x 777px. We've got two options with this one. This first is just to edit the XAML directly. Take a look at that initial <canvas> tag we started with. It's got width and height properties, so we can just change the values. The second option is much better for those of you that don't want to edit your XAML directly. Click on the element named "Page" (that's our primary canvas) in the "Objects and Timeline" panel. Then, click on "Properties" in the top right. This shows you, much like Visual Studio, the Properties that are available to the element you've selected. Finally, you'll see the width and height properties in the list. You can type the values there, or you can use the innovative "slider" interface to get to the value you desire.
7) Take a look at the Objects and Timeline panel. You should see a well organized list of all of the elements that make up the logo. Gears, glasses, etc. Each one of these elements is defined in the XAML we imported. We are primarily going to be working in this panel the rest of the way.
8) Press F7 on your keyboard. This will take us into the "Animation Workspace." It's not any different from the "Design Workspace" (F6) we were in, except that the panels have been moved.
9) Expand the elements in the Objects and Timeline panel, and look for:
Page > Orange_Gear > Orange_Gear_Teeth. Click on that element once, highlighting it.
10) Under the "Objects and Timeline" panel header, there is a drop-down list with "(No Storyboard open)" as the selected value. Click the ">" button just to the right of that list. This will bring up the storyboard search dialog. Click the "+" symbol to create a new storyboard. Name your timeline/storyboard (it's named Timeline1 by default), and click "OK." Since we're gonna be animating the gears, I named my timeline "GearSpin."
11) You will now see that a timeline has appeared next to our list of elements. Each number (1, 2, 3, etc.) represents one second of time. We will use these times to "schedule" our animations. For those of you unfamiliar with animation software, we are going to be creating keyframes that will do most of the animation work for us. Basically, we define the states we want our elements to be in at certain keyframes, and the software figures out how to get it from Point A to Point B without any other instruction. Please also notice that your canvas now has a red line around it, and in the top right corner, now says, "Timeline recording is on." This means that all of our future actions will be recorded and animated. When we want to make a change that we don't want to be part of the animation, we need to make sure to turn recording off.
12) Make sure that the element "Orange_Gear_Teeth" is still selected. Just above where ZERO seconds is on the timeline, there is an icon with a green "+" in it. Click it. By clicking this, we are creating a keyframe at 0:00 of our animation. This means that it will start as soon as the application does. We could move this to 1 second if we wanted a 1 second delay before our animation began, but for this demo, we want it to start at the beginning.
13) Next, we need to create a new place for these gears to be. So let's say we want to have them rotate 90 degrees in 1 second. Drag the yellow timeline indicator to one second. Click the "+" to set another Keyframe at 1 second. In the "Properties" tab in the top right of Expression Blend, find the "Transform" section, and click the "Rotate" tab inside there. You will see that the current Angle is set to 0 degrees. Let's change that to 90 degrees. You can either click and drag the box to the right, until it says 90, or you can just click on the box, which will allow you to type 90.
14) Whoa! You may have noticed that your gear teeth have derailed from their hub. That's because we didn't define the center of those objects appropriately. Press CTRL + z on your keyboard, to undo the change you just made. Also, because we don't want to animate moving the center of these objects, we need to turn off recording. You can do this by clicking on the red circle in the top right corner of the canvas.
15) Because you have highlighted the "Gear_Orange_Teeth" layer, you should see a blue box surrounding those elements, but probably a bit bigger than just those elements need. You should also see a white dot that indicates where the center of that entire box is. We need to move that. Click on it and drag it to the blue center of the orange gear. That's the point we want our teeth to rotate around, right? To be more exact, I recommend zooming in and placing your center point that way.
16) Once you're confident in your center point, turn recording back on, modify that angle again, changing it to 90 degrees. Now you can click the "PLAY" button (it's right above the timeline) to see your orange gear spin.
17) We've got one other thing to take care of to make this look great. We don't want to have the gears stop after 1 second. We want them to continue spinning forever. This is a simple change. We had selected Orange_Gear_Teeth from the timeline earlier, and now we need to expand it. Inside it, you will see a RenderTransform element. This was created when we changed that rotation angle. Expand it all the way, and you will see an "Angle" element. Right-clicking on this will give you the option to "Edit Repeat Count." We can set this to 1, 2, 100, etc. There's also an "infinity" option. Choose that, and our gears will spin forever.
18) Now, we need to animate the other two gears. We are going to follow the same steps for the Blue and Green Gears. So take steps 9-17, rinse, lather, repeat. The only difference for the other two gears is that they rotate in the other direction. So instead of 90 degrees, they will be set to -90 degrees.
19) You should now have a working Silverlight application, that has the gears spinning. Press F5 to run your project!
Labels: Expression, expression blend, microsoft, Silverlight, WPF
Mix 07! I'll be there!
Wednesday, January 24, 2007
So I know I just got back from an amazing conference in CodeMash, but I've got great news! I'm heading to Mix 07 at the end of April, thanks to the good folks at Quick Solutions. Brian Prince and the rest of the management team do nothing but support me and my technical growth. I can't thank them enough for the opportunities they have provided me.
It's taking place in the Venetian Hotel & Casino in Las Vegas, NV from April 30 - May 2, 2007. I'll actually be heading out the morning of the 29th, and flying home to Columbus on May 3rd, so it should make for an exhausting trip. Based on the preliminary schedule of events, here's how I see my schedule going down:
April 29, 2006
7:00 AM - Get to the Columbus Airport, check in, go through security checkpoints, recover from cavity search.
9:00 AM - Take the flight to Sin City.
10:38 AM - Arrive in Las Vegas. We are now operating on Vegas time people, keep up.
10:39 AM - Lose my first $10 in a slot machine.
11:00 AM - Check in to the Venetian Hotel & Casino.
11:30 AM - Lose another $50 at the blackjack table.
12:00 PM - Grab some lunch.
12:45 PM - Wander the hotel, getting my bearings on where registration, session rooms, etc. are.
4:00 PM - Head over the registration, get checked in for the event.
5:00 PM - Sit down for a long night of Texas Hold-em at the Bellagio Poker Room (or maybe the Venetian Poker Room, it looks to be new)
April 30, 2006
1:00 AM - Go to bed.
8:30 AM - Head down to the Continental Breakfast. Mingle. Meet some people.
9:30 AM - Head over the Keynotes session. Ray Ozzie and Scott Guthrie are expected to be speaking. I really enjoyed Scott's talks at CodeMash, so I hope there is new material for Mix.
12:00 PM - Lunch
1:30 PM - Time for some sessions.
Um, I expected this blog post to be longer, but it doesn't appear that they have decided which sessions will be in which time slots. So, of the sessions that are listed on the site currently, here are the ones I expect to attend:
LINQing Your Web Applications - See how Language-Integrated Query (LINQ) allows for the most seamless integration of your Web applications and relational data. Get a sneak peek at the next version of the .NET Framework and Visual Studio (codenamed “Orcas”).
Driving Your Business through User Experience - Hear how tools, technologies and cutting edge design combine to create the user experiences that drive your business. See how a continuum of user experiences can be a powerful lever to differentiate the products and services you offer via the Web.
Gazing into the Future of Web Development - Be one of the first to see the big advances planned for the next version of ASP.NET for building rich Web applications. Get a sneak peek at technology to help simplify rich content, data, services and more. Learn how to efficiently and effectively create data-driven applications that fully leverage the power of “WPF/E” and AJAX on the client coupled with powerful server-side features provided by ASP.NET.
Thinking in CSS: How to Build Great Looking Sites - Delve into CSS with Molly Holzschlag, and look at the power CSS offers to Web developers and designers. Hear Molly's secrets about how to build stunning sites quickly and easily.
Five Real World Applications that Raise the Bar for User Experience - Come learn about five applications that will change what your customers will expect from tomorrow’s software applications.
IE7 Retrospective: Microsoft's Look at the Good, Bad and Ugly - Hear from Microsoft's IE7 team about the journey from mea culpa to broad market acceptance. Hear what went right, what had to be cut, and how development priorities are set. Learn how to minimize your Web browser support headaches, and move to a more standardized Web.
There are plenty more sessions planned, and my preference may change once I see which sessions are in which time slots. Expect to see many more posts about this in the near future. And for those of you that want me to put $1 on Red 32 for you while I'm there, start saving your pennies.
Labels: brian prince, codemash, CSS, drew robbins, HTML, IE7, jeff blankenburg, las vegas, linq, microsoft, mix, mix 07, poker, ray ozzie, scott guthrie, venetian, WPF, WPF/E
Jeff Blankenburg is a Developer Evangelist for the Microsoft Corporation. I have a passion for user interface technologies, including CSS, 