Monday, May 28, 2007

Silverlight Logo

As one of my graphics design buddies knows, I am king of all the cheesy animated banner ads. I used to work on the technical aspects of web sites for a property management company that owned a few malls in Canada. Rarely did I get to dabble in graphics, since we had our own designers. When the mall manager requested an animated banner for the home page, I got to show off my stuff.

Unfortunately the Wayback Machine isn't working for me, or I would show you my skating Santa banner ad, or perhaps the girl jumping rope. Those two didn't win any awards, and my new logo at the top of this page probably won't either...

To get the logo into Blogger, I created a 400px by 40px image in Microsoft Expression Designer. I exported the image as a jpeg and brought it into Microsoft Blend. After playing around trying to get some animation going, I managed to create a new timeline, dragged the timeline bar to the right a bit, and started moving things around, just enough to get me into trouble.

Then I did the usual build, created a zip file, and created a manifest file, pointing to page.xaml.

I added the manifest file to the zip file, and then tried to upload the application to the Silverlight Streaming Server. It complained about the usual .sln, .csproj, .pdb, and .cs files, which I deleted and then got the zip file uploaded.

After that, I went into Blogger, edited the template, and changed some of the code, pooching it in the process. If you're going to try this out on an existing blog, be sure to backup your template, and your whole site if possible. I use HTTrack to backup my blogs.

I put this in the head tag, adding Logo to the end of CreateSilverlight function name (it would be nice if the upload application added the app name to the end of the sample function to make it distinct)

I modified the blogger template's header widget to allow adding items, and set max number of items to 2. Then I added an html control and added the sample code to the control (changing the function name by adding logo to it).

The sample code doesn't seem to pull the actual size from the manifest.xml, which could be another feature to add, eh?

After scratching my head for a bit I figured out I needed to change the width and height to 400px and 40px respectively.

Voila. See logo above.

If Dreamworks is hiring tell them I'm busy...

No comments: