The application starts out by setting the X and Y values of a point to the center of the drawing surface. Each time one of the arrow keys is pressed, the “cursor” moves in that direction, leaving a point on the drawing surface. I initially had the project set up to use a polyline object, and add points to the PointCollection as the arrows were pressed, but I found a quirk with that functionality. Instead, I created a “pointEllipse” user control, which is a 1×1 pixel ellipse the color of the “pen” that draws on the drawing surface. Each time you press a key, an instance of the pointEllipse is placed on the drawing surface at the appropriate location.

Here’s how the code breaks down:

I set up a new point object to hold the next coordinates assigned each time the cursor moves. X and Y store the current X and Y location of the cursor. Step defines the distance the cursor will travel each time a key is pressed.

Point nextPoint = new Point();
double x;
double y;
double step = 1;

Next, I get the center of the drawing canvas and place a copy of the pointEllipse element there. Also, a few event listeners are wired up. One to take user input on KeyDown, one when the “Shake It!” button is pressed to clear the drawing, and one when the “OK” button is pressed on the instruction pane.

public Page()
{
InitializeComponent();

x = drawingCanvas.Width / 2;
y = drawingCanvas.Height / 2;
nextPoint.X = x;
nextPoint.Y = y;

pointEllipse pE = new pointEllipse();
pE.SetValue(Canvas.LeftProperty, x);
pE.SetValue(Canvas.TopProperty, y);
drawingCanvas.Children.Add(pE);

this.KeyDown += new KeyEventHandler(Page_KeyDown);
clearButton.Click += new RoutedEventHandler(clearButton_Click);
okButton.Click += new RoutedEventHandler(okButton_Click);
}

When the app loads, the background is drawn and the center point is added. The instruction pane is shown. When the “OK” button is pressed, the instructions are hidden with the following event handler.

void okButton_Click(object sender, RoutedEventArgs e)
{
instructions.Visibility = Visibility.Collapsed;
}

When keys are pressed, the event handler code adjusts the X or Y value depending upon which key was pressed. If the X or Y values go beyond the boundaries of the drawing canvas, they are not permitted to advance. The adjustments you see in the boundary code checks are because I got a little sloppy when I put the drawing canvas in place. Once the keyboard input is handled, a function called doDraw() is called.

void Page_KeyDown(object sender, KeyEventArgs e)
{
switch (e.Key)
{
case Key.Up:
y -= step;
if (y <= 17) y = 17;
break;
case Key.Left:
x -= step;
if (x <= 17) x = 17;
break;
case Key.Right:
x += step;
if (x > drawingCanvas.Width - 10) x = drawingCanvas.Width - 10;
break;
case Key.Down:
y += step;
if (y >= drawingCanvas.Height - 10) y = drawingCanvas.Height - 10;
break;
default:
// do nothing
break;
}
doDraw();
}

The doDraw function creates an instance of the pointEllipse object and drops it on the drawingCanvas object after positioning it based on the current values of X and Y.

void doDraw()
{
pointEllipse pE = new pointEllipse();
pE.SetValue(Canvas.LeftProperty, x);
pE.SetValue(Canvas.TopProperty, y);
drawingCanvas.Children.Add(pE);
}

The last function is the event handler for when the “Shake It!” button is pressed. If you remember on an Etch-A-Sketch, shaking them is how you erase your drawing. To do that, I clear all the children off of the drawing canvas and reset the cursor to the center of the drawing canvas.

void clearButton_Click(object sender, RoutedEventArgs e)
{
drawingCanvas.Children.Clear();
x = drawingCanvas.Width / 2;
y = drawingCanvas.Height / 2;
nextPoint.X = x;
nextPoint.Y = y;
}

If you want to see the game, you can check it out here.

If you would like to play with the project, you can download all the code here.

If someone has the patience/ability to draw something really cool, send me a screen shot. =)

How old were you when you first started programming?
I was 12 or 13. This was back in 1982 or 1983. My dad got an Apple ][+ that I started plugging away on, in GW-Basic, I believe. Once I got rolling, I started grabbing all the books and magazine subscriptions I could. Back then, a lot of program listings were provided in Assembly, so I would literally spend HOURS typing in lines of hex code to get programs out of the magazines to run.

How did you get started in programming?
I don’t remember what actually got me into programming on our Apple. I do remember when I was very young, my father would bring me into work with him on the weekends sometimes - he worked at Tandem Computers, which was later acquired by Compaq. I would sit there at a terminal and play Eliza or one of the football games the programmers there had created. If I can point to anything that piqued my interest along the way, that would be it.

What was your first language?
GW-Basic.

What was the first real program you wrote?
When I was 13, I remember all I wanted to do was be a programmer. Somewhere along the way, I grew away from that desire and did other things for a while until getting into web development in my early 20s. So, “real” program, I don’t know. I wrote a pretty kick-ass Star Trek program back in ‘83 or ‘84, using graphic sprites and audio through a Mockingboard on the Apple, which by then had been chipped to upgrade to an Apple //e.

What languages have you used since you started programming?
Once you get going, you just can’t get enough. I’ve done Assembler, C, Cobol (bleh), Pascal, C++, Basic, Fortran, Java, C# and VB. At the time, C was my favorite - we’d write Assembler code inline for video card initialization. Boy have times changed! I like C# now. Go figure…

What was your first professional programming gig?
I worked for a bit doing Java for an online domain name acquisition company, but never got deeply into it. There’s been bits and pieces through my web development here and there, but I suppose I consider my current job the “real deal”, since it’s almost purely coding most of the time.

If you knew then what you know now, would you have started programming?
Yes, and I’d have been rich from Yahoo stock, too! The only thing I would have changed was that I would not have let my desire to be a developer get away from me for so long, but hey, that’s life.

If there is one thing you learned along the way that you would tell new developers, what would it be?
Find a mentor. The amount of information can be overwhelming, and if you’re lucky, you can find someone willing to help bring you along. You don’t want someone to give you the answers, but it’s great to have people to bounce ideas off of when you hit a spot where you could use some input.

What’s the most fun you ever had programming?
What can I say? Silverlight. The variety of programs I get to produce in my current role keeps it interesting and fun. Anyone that is a challenge but gets done on time is the most fun. =)

What’s the most fun you’ve ever had … programming?
I’m sure there’s a road trip or two that would rank highly as “most fun”, but programming is fun - I can look forward to getting up and going to work each day to dig into whatever project we have on the board.

Who are you calling out?
Rob Houweling
Adam Kinney (how did he slip by this?)
Michael Washington (that’s two, Michael!)

This is one of those situations where I don’t have control over the target domain name, but the people who run it were kind enough to place a Flash policy file up there for me. I didn’t want to keep asking them to make changes, so I placed the files on another domain we have control of, and worked from that. I installed the Web Development Helper recommended in this great post by Tim Heuer. This gave total visibility into what was happening when I loaded the page, and there were a couple of problems. Eventually I got the problems fixed, but still no love.

The site loaded the application, the application called out to check for the Silverlight cross-domain policy file, which returned a 406 (Not Acceptable), then called out to check for the Flash cross-domain policy which returned a 200 (OK). Having that, the app called out for the RSS feed, which returned 200, and 19K of data. After that, silence. The callback function was not executing. This leads me to believe there may be a quirk in Silverlight when the Flash cross-domain policy file is in play. Silverlight took the file as OK, but it didn’t recognize the data needed to make the app go had come back. I tried several variations of the file based on different posts I found on the Silverlight.net forums, but nothing worked.

Finally, out of frustration, I created a simple version of the project that was still failing to execute the callback and sent it off to Tim Heuer for a more experienced set of eyes. He didn’t have any insight as to why HttpWebRequest was not executing the callback, but suggested I use WebClient instead. There is an older post on Tim’s site describing how to call web services. The example code was a big help in changing over to WebClient from HttpWebRequest.

The Flash cross-domain policy on the target domain currently looks like this:

<cross-domain-policy>
  <allow-access-from domain=”*” />
</cross-domain-policy> 

The code to call out for the file now looks like this:

WebClient rest = new WebClient();
rest.DownloadStringCompleted += new DownloadStringCompletedEventHandler(rest_DownloadStringCompleted);
rest.DownloadStringAsync(new Uri(”RSS FILE NAME“));

This returns the data as e.Result in the DownloadStringCompleted event handler:

XDocument doc = XDocument.Parse(e.Result);

This now means I can use the information in “doc”:

var items = from g in doc.Descendants(”item”)
    select new
    {
         title = g.Element(”title”).Value,
         description = g.Element(”description”).Value,
         pubDate = g.Element(”pubDate”).Value,
         guid = g.Element(”guid”).Value,
         link = g.Element(”link”).Value,
    };

Once the data was organized, I populate arrays based on the data I need. The reason why I did it this way is because the app displays random posts, so it’s easy to reach in and grab an element out of the array.

foreach (var item in items)
{
    i++;
    rssDescriptions[i] = item.description;
    rssLinks[i] = item.link;
    rssPubDates[i] = item.pubDate;
}

I was going to use a multidimensional array, but I’m not tracking that much data, so it’s easier to keep track of this way. So now whenever a new post is detected in the RSS, the app will display the first post, then generate 4 random numbers to grab other posts out of the feed for display.

This was a fun project to work on. It’s the first time I’ve done any cross-domain work. I initially ran into trouble grabbing the RSS feed due to the lack of a cross-domain policy file. I was using Yahoo Pipes and had good luck with that, but through ongoing conversations with the people that run twemes.com, got a cross-domain policy put in place that allows me to consume the feed. Very cool of them to help me out.

The app displays 5 chat bubbles. The one with the orange time stamp is always the top post from the feed, the other 4 are selected at random. The app periodically checks the feed for new posts and if one is found, the bubbles disappear and then reappear with new data. Unfortunately, TechEd attendees are not Twittering heavily (or not using the tag), so you might have to watch it for a while to see it change (or post if you have a Twitter account).

You can see it live at http://www.toysfortweets.com.

Right out of the gate, one of the things the app does is use two downloaders. The first one happens invisibly - meaning I don’t give any user feedback that I’m doing it - and is used to download the graphics to display the main downloader with the progress bar. I’ve done this with the last couple of apps I’ve built, and it works well. The idea is to make the graphics the downloader will need available before the downloader is used. This avoids graphics that “pop” on screen as soon as they’re done downloading and creates a smoother experience for the user. In this case, the downloading graphic was zipped to a file that’s about 80K. Once it’s on the client, I grab the image out of the zip for the background, and show the progress bar over the top.

The progress bar on the app is also interesting. When the application is loading, it looks like a graphical version of the timeline is building from left to right as the app downloads. The actual animated piece there is the blue bar. The progress bar rectangle was scaled -1 along the X-axis to flip it, and then had its width manipulated programmatically, collapsing the bar from left to right. The code looks like this:

percentage = Math.floor(sender.downloadProgress * 100);
var newWidth = Math.floor(572.282 - (percentage * 5.72282));
sender.findName(”progressBar”).Width = newWidth;

The “newWidth” calculation calculates the width by figuring out how wide the bar should be, and subtracting it from how wide the bar will be when it’s complete - basically creating a progress bar that works in reverse of the usual way - rather than increasing the width, it’s decreasing. Since the bar is flipped along the X-axis, the width decreases to the right instead of the usual left.

The main timeline is made up of 3 layers - the background, the logos, and the photos. Amazingly, each of these layers is over 8100 pixels wide. The background layer contains the background image as well as the year headers and gradients across the top of the timeline.  The logos layer contains the large graphical logos. The photos layer contains all of the text blurbs for the app, as well as the buttons for the video player. This was done so that the layers could move independently of one another, to create a little more of an organic look when you drag the slider. As you drag the slider, the current position of the slider is calculated and pushed to storyboards for each layer, and then the storyboard is triggered with the Begin() method. The storyboards were all similar, except that they have different durations and ease to make them slide at slightly varied speeds. The storyboards look like this:

<Storyboard x:Name=”movePhotos”>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:01″ Storyboard.TargetName=”photos” Storyboard.TargetProperty=”(Canvas.Left)”>
<SplineDoubleKeyFrame x:Name=”photosValue” KeyTime=”00:00:01″ Value=”0″ KeySpline=”0,0.497,0.504,1″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

The code to update the storyboard value property looks like this:

sender.findName(”photosValue”)[”Value”] = -scaledBackgroundLocation;

“scaledBackgroundLocation” figures out where the various layers should be relative to the viewport - the timeline thumb across the bottom allows you to move across a very large timeline that is not entirely visible. For each pixel the thumb slider moves to the right, the main timeline background and images need to move an appropriate number of pixels to the left. To figure that out, we needed a scaling factor, which was the maximum left offset value the background images would need to move to display the end of the timeline, divided by the size of the preview timeline across the bottom. That code looks like this:

var scalingFactor = 7502 / 580;

The app width was 630px, so the 7502 comes from subtracting the width of the app from the width of the background images. 8132-630 = 7502. When one of the background images is set to -7502x, the last 630 pixels of the timeline will be visible in the viewport.

The video player is a reskinned Encoder template. I needed to instance the video player and start the app at the same time, so I created a function called “createSLObjects” that is called from the install experience if Silverlight is found. The function looks like this:

function createSLObjects() {
createSilverlight();
var player = new StartPlayer_0();
}

The video player has two animations associated with it. One to scale it up and fade it in when a video button is clicked, and one to scale it down and fade it out when the close button on the player is clicked. There is only a single instance of the video player in the application, and the media element source is manipulated by code when a button is clicked. The video URLs were assigned to variables at the top of the script file to make them easily editable during the development process. As an example, when the button for the Al Gore video is clicked, the following code is executed:

sender.findName(”VideoWindow”).Source = goreVideo;

After which a function is called to make the player visible, set the starting scale and opacity, play the “show” storyboard, and start the video:

function showVideoPlayerCanvas(sender)
{
 sender.findName(”videoPlayerCanvas”).Visibility = “Visible”;
 sender.findName(”videoPlayerScale”)[”ScaleX”] = 0;
 sender.findName(”videoPlayerScale”)[”ScaleY”] = 0;
 sender.findName(”videoPlayerCanvas”).Opacity = 0;
 sender.findName(”showVideoPlayer”).Begin();
}

Some of the videos were external to the app. For those, I just called window.open, and passed the video’s URL - they will open in the client’s default player.

The last step was the install experience graphic. We work hard to ensure that we’re offering a compelling reason for visitors without Silverlight to click the badge and install. Tim Heuer posted a great tip on how to test out the experience in IE without uninstalling Silverlight.

Overall, the entire project from start to finish took just over two days. I was working very closely with the designer to pull all the pieces together and create a look that was similar to the original Flash piece, but also made sure we had an opportunity to update some of the visual elements.

The majority of my work involves creating Silverlight applications, and I love it. So imagine how happy I was when a timeline project came in. This one was interesting because it was a conversion from a Flash version to an updated Silverlight (1.0) version. The company I work for had created the Flash version, so we still had all the base assets used in the timeline, which was helpful.

The schedule was a little challenging - I didn’t have a lot of time to complete the work in - and the new version lives in a template that was a significantly narrower width than the Flash version, so there were some adjustments to make.

In the end, I was very pleased with the result. Interestingly enough, the overall performance of the Silverlight piece seems smoother than the Flash version. I had expected the Silverlight one to bog down a bit as I added text, due to the antialiasing, but that didn’t happen.

Anyways, for those of you that are interested, here is the original Flash version:
Flash CEO Summit timeline

The updated Silverlight version is here:
Silverlight CEO Summit timeline

The goal was to drive around a maze and shoot the other player’s tank.

I decided to create a similar game in Silverlight. It gave me an opportunity to manage multiple moving objects on screen, and some practice with collision detection methods described by Adam Kinney in his Silverlight and Dynamic Animations hands-on lab.

Adam was also kind enough to provide me with a little more detail on the collision detection which I was able to utilize in the game.

You can play my Silverlight version of the game here.

If you’d like to download it and play it on your system offline, a zip archive can be downloaded here.

I may take the opportunity to detail some of the challenges in future blog entries as time permits. This was a really fun project to watch come together.

The game can be seen/played here (make sure your speakers are on!):
http://designwithsilverlight.com/csharp/birdhunt/default.html

Also, if you’re interested in seeing more of Ryan’s excellent illustration work, you can find him here:
http://ryanloghry.com/

There are now 6 different drum kits you can choose from on the fly. This was done by adding the sound bites for the drums to the project as a resource, and assigning the path of the sound file to a string when a particular kit is selected from the list box. This is done through a case statement, a portion of which is shown here:

case “Yamaha RX-21″:
bassDrumSound = “sounds/YamahaRX21/Bassdrum.wma”;
snareDrumSound = “sounds/YamahaRX21/Snaredrum.wma”;
closedHatDrumSound = “sounds/YamahaRX21/ClosedHat.wma”;
openHatDrumSound = “sounds/YamahaRX21/OpenHat.wma”;
tomHighDrumSound = “sounds/YamahaRX21/TomH.wma”;
tomMedDrumSound = “sounds/YamahaRX21/TomM.wma”;
tomLowDrumSound = “sounds/YamahaRX21/TomL.wma”;
clapDrumSound = “sounds/YamahaRX21/Clap.wma”;
clapPad.msgDrumType.Text = “Clap”;
crashDrumSound = “sounds/YamahaRX21/Crash.wma”;
break;

As described in my previous drumpad post, due to problems with repeating audio clips, I elected to insert a media element each time a key is pressed. Because of this, it was easy to utilize the string variables defined above to make a quick change to the source property of the media element before inserting it into the application:

_mediaElement.Source = new Uri(snareDrumSound, UriKind.Relative);

In the case of the “80’s Drum Kit”, there is a cowbell sound instead of the clapping sound attached to the drumpad triggered with the “D” key. When this kit is selected, the label on the appropriate pad is also updated. You can see the text property being changed in the statement shown above, and when the 80’s kit is selected, the label is updated right after the new sound file is assigned. Here’s what that looks like:

clapDrumSound = “sounds/80s/Cowbell.wma”;
clapPad.msgDrumType.Text = “Cowbell”;

Another big change is the addition of backing tracks to which you can play along. For these, I initially figured I’d use a loop-based program (Sony ACID Studio 7.0) to create some tracks, but given time constraints, I instead elected to use the software to render out MIDI files I found online. The upside is that it’s a big time saver, and it’s very easy to pull out the drum tracks before rendering the file to a .wma for use in the app. The downside is, they don’t always sound so great.

The drum sound effects are all fairly compact - ranging from 15-40K a piece. There’s a couple that are bigger, but the majority are small. The backing tracks are fairly heavily compressed, but the songs still average around 1MB a piece. This made the app a little bigger than I had hoped, but I like having the sounds all there “on demand”.

The other change that happens under the covers is the cleaning mechanism. As I described previously, the sounds are added to a special container canvas on the fly as keys are pressed. I set a cleaning threshold, then run a method to remove the old media elements from the container when it reaches a certain size. This worked, but it would cause some hesitation in the sounds from time to time, because it would clean out the entire containing canvas, meaning the sound that was playing, too. I changed this so that the threshold is much lower (8 nodes), but the cleaner only pulls out the bottom 4, so it will typically not touch the sound that is currently playing. This turns out to be much smoother and cleaner, as well as doing its job a little more quickly.

The final app can be seen here.