KIRUPA.CHINNATHAMBI

A couple of days ago, we released another version of Deep Zoom Composer. One of the major changes we made revolved around dealing with large collections of images, and this was something that Deep Zoom Composer never handled particularly well in the past.

Some Background
As you may know, Deep Zoom Composer allows you to import your images, arrange them in whatever fashion you like, and even add some cool interactions and navigation. My fellow Expression Blend colleague, office mate, and co-conspirator on Deep Zoom Composer, Janete Perez, wrote extensively about those features in her series of posts here, here, and also here.

Manually composing your layout is great for a moderate number of images, but once you cross into hundreds if not thousands of images, the workflow does not scale. Manually arranging that many images will not be fun, and it probably isn’t even what you want to really do.

When you are dealing with large quantities of images, more than likely, what you want to do is have your Silverlight application take care of arranging and positioning your content at runtime instead such as what this example highlights. This on-the-fly positioning and arranging is what most of the popular Deep Zoom examples such as Hard Rock Cafe do as well.

Deep Zoom Composer, with our recent release, now plays two roles. The first role is the one it always played. It still allows you to import your images, arrange them on the artboard, and export them:

The second role is something that is new. You still import your images. That has not changed. What is new is that you no longer have to compose your images. You can just import your images, skip the compose step altogether, and go straight to exporting:

This means that you can safely import hundreds (if not more!) images and seamlessly export them.

Using the New Features
Once you have imported your images, go straight to your Export view:

From the Export view, click on the Custom tab to go to see our more advanced Export options. Make sure you are exporting a Silverlight Deep Zoom output, give your project a name, and ensure the Export as a collection option is selected by default if it hasn’t already been selected for you.

The next step is crucial. You need to pick a project template that supports rearranging on the fly inside your browser. Currently, the only template that does that is the Tag Browser. Click on the drop-down that says Default and select the Tag Browser entry:

Your Custom tab’s various options and selections should look like the following:

Hit the Export tab to generate the Deep Zoom image tiles and associate them with the Tag Browser template that you selected. After a few moments your Export Completed dialog will appear:

Click on the Preview in Browser button to launch your browser and to see how everything looks. You will see that the images you imported automatically appear in a grid:

Notice that the Tag browser actually allows you to filter by tags. Wouldn’t it be cool if Deep Zoom Composer allowed you to do all of this as well…?

Tagging your Images
Programmatically laying your images out is cool, but being able to filter what images you see based on the tag is even cooler. To be able to do this, you will have to venture into your Compose view. In the Compose View, you will see all of your currently imported images laid out horizontally at the bottom of your screen along with a list of the properties on each image you can view or set:

You can select one or multiples images from this list and add the Tag that you want in the Properties panel you see on the bottom-right:

When working with lots of images, though, the tiny panel you are viewing all of your images may not be very helpful. You can maximize this panel by clicking on the up-arrow found on the top-right corner of the panel itself:

Once you click on that button, notice that your entire Compose view is nothing more than your list of imported images and the properties you can view or set on them:

This maximized view optimizes Deep Zoom Composer for doing nothing but pure Collection exporting with the option of tagging your images.

If you export again, using the same selections that you had before, notice that the Tag Browser now displays any tags you may have displayed with the option of clicking on a tag and viewing only the images associated with that tag:

Hopefully you find this feature as much fun to use as it was for us to implement it. You can always use Deep Zoom Composer to manually arrange and position your images, but if want to not deal with that and have your images arranged and positioned on the fly, you can now do that as well.

As you can tell, this post got pretty long, and there are a few more features that I will describe in a future posting. To give you a heads-up, the templates you see when exporting as a Collection, such as Tag Browser, are extensible. You can add your own custom templates and have it be something you can select directly from within Deep Zoom Composer.

Stay tuned to learn more about that.

Cheers!
Kirupa