Sunday, November 1, 2009

Create a simple DeepZoom sample application

A really great feature added by microsoft to interact with images and create amazing zooming applications is Deep Zoom. In short, Deep Zoom provides the ability to interactively view high-resolution images. You can zoom in and out of images rapidly without affecting the performance of your application. Deep Zoom enables
smooth loading and panning by serving up multi-resolution images and using spring animations. With its help we can create amazing web experience.
Some of the best examples would be hard rock memorablia, Deep Zoom Pix

How to Create the simplest Deep Zoom application
  1. Install Deep Zoom Composer .
  2. After installation create a new project. Go to File -> New project. A new project will be created with a .dzprj extension.
  3. Collect few good quality pictures.
  4. Start importing it in your project by clicking the add image button.
  5. Prepare a storyboard in your mind. By storyboard I mean how you would like your application to react on mouse events.
  6. Start positioning and composing the images by clicking on the compose tab.
  7. Select an image which would serve as your base image. For example, if I want to make an application similar to Google Earth, then I will take the satellite image of the world as my base image.
  8. Drag and drop the base image into the storyboard area and make it  fit to screen.
  9. Add rest of the images on to the base image and reduce their size, till it looks like small yellow lense on your base image.
  10. Add more images and do the same.
  11. Your deep zoom application is ready to be exported!!
  12. Export it and keep zoomin!!!
     

0 comments:

Post a Comment