I’ve been playing with the Silverlight bits Microsoft published last week and am having a blast. I just finished adding a Silverlight viewer to MyComix. To check it out, go to http://mycomix.training.atmosera.com and click a comic book cover. (Make sure you’re in thumbnail view, because I only have the Silverlight viewer wired into that view.) You should see a window similar to this one:
Now here’s the cool part. Drag the mouse over the comic book cover with the left button held down and watch what happens. 🙂
The viewer uses the Silverlight 1.0 beta. If you don’t have the beta installed, you’ll see a “Get Silverlight” graphic in place of the cover image. Click the graphic to download and install the Silverlight 1.0 beta. Then you should be able to view comics just fine.
Because the viewer is written to Silverlight 1.0, it uses the Silverlight plug-in’s JavaScript API. My next task is to rewrite the viewer using the Silverlight 1.1 alpha so I can replace the JavaScript with C#. I’ll post a note in this blog when the C# version is available.
One of the more interesting aspects of the code is how it downloads the cover images. I use Silverlight’s downloader object to simultaneously (and asynchronously) download the front cover image and the back cover image. A DownloadProgressChanged event handler displays a progress bar that updates as the downloads progress. I decided to use the downloader object for two reasons. One, it’s more efficient, because I can download an image once and assign it to two XAML objects (the main cover image and the reflected cover image). Two, if the downloads don’t happen quickly, the progress bar prevents the user from having to stare at a blank window and wonder what’s going on.
Another interesting aspect of the code is how I combine a ScaleTransform and a SkewTransform to create a 3D effect when you rotate a comic. It’s just an illusion since Silverlight lacks WPF’s 3D support, but it’s a pretty effective illusion. See the JavaScript Rotate() function to learn how it works.
As an aside, note that the back covers you see aren’t the comics’ real back covers. I currently don’t have scans of all the back covers in the database, so I scanned a handful of them and wrote the viewer to use them in place of actual back cover images. Also, in this refresh of MyComix, I fixed a CSS bug that affected Firefox browsers.
Here are links to some of the comics I’ve added to my collection in recent weeks (displayed in the Silverlight viewer, of course):
Finally, here’s a helpful note to folks who are planning to use Silverlight to publish content on their Web servers. I built and tested the app in Visual Studio 2005 using the built-in ASP.NET Development Server. It worked fine there, but when I posted it on Wintellect’s Web server, Spotlight.aspx showed nothing but a black background. After some head scratching, I realized that I needed to add a new MIME type to the application in IIS: application/xaml+xml. Once I did that, the viewer worked fine in IIS, too.