If you haven’t had a chance to play with a Microsoft Silverlight Deep Zoom project, you’re really missing out! Deep Zoom allows you to take a very large picture and zoom in instantly to the tiniest spec within it. Ever since we first saw it at 352 Media Group, we’ve been itching to create one of our own. So we took a blank wall in one of our offices and went to town, drawing anything and everything we wanted. There are shout outs to clients, movie and viral video references, and some things we still can’t figure out! In addition to the Deep Zoom below, we also created a time lapse video with hours of footage from nearly two months of doodling condensed to one minute. You can also read about how simple this was to create in the description under the video. Enjoy your zooming!
Creating this Deep Zoom project was remarkably easy. Initially we expected to dedicate a designer and programmer to piece together the elements in Silverlight in order to make this work. But what you see above was created with no special design or programming skills! Here’s how we did it.
First we took the pictures. I setup the camera at a specific distance from the wall and took a series of straight on photos. In all, there were over 40 photos taken with a 10.2 megapixel camera. At first I tried to stitch the pictures together within Microsoft Expression’s Deep Zoom Composer software, a free download. However due to inconsistencies in the angles of the photos, this proved impossible. Bear in mind I’m not a professional photographer, but 352 Media Group’s CMO.
The next choice was to have one of our graphic designers, Michelle, use a standard image editing program to skew and distort the individual images so they would fit together. While this process was working, it was also very slow going.
That’s when our Support Director Drew suggested we try the free trial of AutoStitch. That program analyzes the individual images, recognizes the overlapping areas, and automatically stitches the pictures together in to one image file. While not perfect (in the menu in the upper left of the Deep Zoom, select “Strong Bad” under the “Fun Sites” category to see some of the ghosting that occurs around his mouth), it did get the image to a point where we could do some simple touchup. We simply reshot and overlaid photos in areas where the stitching program couldn’t piece it together. Once this was complete, we had one file over 20MB in size that we could drop in to Expression Deep Zoom Composer.
Next we wanted to link some of the references to specific sites. Within Deep Zoom Composer, you’re able to insert transparent resizable hotspots, name them, and then direct them to an external link. With some help from one of our Marketing Team interns, Jamie, we linked over 100 sections within the image. Each was then categorized and added to the menu which allows the user to jump right to that image and link in the image.
The last step was to simply export the Microsoft Silverlight code. All we had to do was add that code to the Web page we created, and it was done! No special programming, no complex coding. So in the end, the hardest part was actually taking good photos. Creating the Deep Zoom itself was a breeze.
I encourage you to play with the Composer and find your own fun Deep Zoom application. Please contact me at pvr@352media.com with any questions, and I’d be happy to help!
Good Luck!
Peter VanRysdam
352 Media Group’s CMO