I’ve received a couple emails from friends who attended the Paris and Brighton events asking about what we used for the presentation “slides” (in reality they are not slides anymore but one single huge image… like a mind map). The technology is called DeepZoom.  DeepZoom is a feature part of Silverlight 2. You can create DeepZoom experiences by coding OR you can use DeepZoom Composer to get you started. Composer is a small tool currently offered for free. The Expression team creates this tool. Kirupa is very involved with it and keeps the community updated. Many of you might know Kirupa from his Flash blog and posts which have helps many people learn tips and tricks in Flash. Kirupa joined Microsoft last year as a Program Manager for Expression Blend. In his latest post Kirupa announced a new photo stitching feature available inside of DeepZoom Composer… lovely!

The process I followed to create my DeepZoom presentation is:

Design your single one “slide”… a mind map… it can be an illustration, flow chart, abstract or photography based image…  anything you like. I use Expression Design but you can use any other graphic design tool you like.

Export the image at a really big size (I usually do 14,000 pixels wide or height, whatever is bigger… you could do even larger if you like). DeepZoom composer handles gigabyte(s) large images so no worries… it was born to deal with large images. You want to do the image really big because you want to zoom in really close to it and still see the image crisp and neat. Export at 96dpi because that is the resolution that Silverlight uses (compared to the traditional 72dpi we use everywhere else). Export your image as a PNG if using flat colors or JPG if using lot’s of photos.

Open DeepZoom Composer and follow the 3 Step creation process… Import Image(s), Compose and Export. The Compose step is interesting. It turns out that you can “DeepZoomize” not only one image but any number of images… so in reality you could have exported multiple images from Expression Design or Photoshop… and then compose the final layout in DeepZoom Composer. The reason you would want to do that is to make images of different sizes. With some code this can also let you dynamically show/hide images you want to see or not. Check out the HardRock DeepZoom Experience…

When exporting you will get different options. Try View in Browser. You need a mouse with wheel to zoom in/out. What DeepZoom creates for you is a Silverlight project. A Silverlight Project is a collection of a bunch of folders and files of all sorts. It looks a lot like an HTML website project. I mention this because if you are a Flash designer you are used to deal with one single file, SWF. In Silverlight you work with a Project, this collection of files. There is also a package method called XAP. XAP is kind of like the SWF file. A XAP file is nothing more than a ZIP file with a different extension. Anyway, I mention this because the first time or first few times you want to re-open the DeepZoom experience you just created (which like I mentioned above is just a Silverlight project) you might get lost  because there are so many folders… the file you need to look for is:

C:\Users\[Your user name]\Documents\Expression\Deep Zoom Composer Projects\[Name of your Project]\source images\OutputSdi\remix uk\DeepZoomProjectWeb\ClientBin\DeepZoomProjectTestPage.html

So just open this html file and that’s the thing that will launch your DeepZoom experience. I usually make a shortcut in my Desktop or copy the entire Name of your Project folder to another location…

A few tips for creating these presentations is to design the mind map in a way that doesn’t have you zoom in/out too much… Also when designing the map, try to think about “framing” shots of that map that you will be talking about throughout your presentation… this “framing” is pretty fun because it will never be the same… you will always pan throughout your map a little different so try doing a design that works well with this “on purpose imperfection”.

This entry was posted on Saturday, September 20th, 2008 at 3:09 pm and is filed under Articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.