Do you also know this problem? When taking screenshots of an application for including the images in one of your blog posts, it is very often necessary to rescale the images so that they fit into the layout of the blog. However, after resizing the images, they become blurred and some texts illegible. The following picture, taken from Microsoft Excel 2010 in German, shows the problem.
However I’m not really satisfied with this state. I have visited some websites presenting some image albums, where you can see the pictures in one window and also zoom in and out the pictures. In most cases, this sites are using an Adobe Flash or a Silverlight application. In this article I will focus on Silverlight, as with Silverlight I will be able to use „Deep Zoom“, a technology where graphics and photos can be smoothly browsed, regardless of the amount of data or the bandwidth of the network.
At this point, I must say, I’m not an expert for Microsoft Blend and the development of Silverlight applications. My main goal is to be able to create image collections in a simple and efficient way and to be able to use the collections on my blog. And I don’t know if the presented procedures later will be suitable for me, but they seem very promising.
Ok, the first thing we need to build an Silverlight application using Deep Zoom, is an appropriate tool. Thecan help here again. On the website of the , you will find some samples for Silverlight applications using Deep Zoom. And you can also download some tools there. So, I downloaded the „Deep Zoom Composer“ application, which already promises in advance to be able to quickly and easily create and manage albums.
After launching the setup programm, I kept all default settings in the install wizard and the installation was done in a few minutes.
Please note, I installed the application on my Windows Server 2008 German, Expression Studio 2 and 3 are also installed. I have not verified if the presence of Expression Studio has any impact on „Deep Zoom Composer“ or vice-versa. You may prefer to install „Deep Zoom Composer“ on a virtual machine. After its first launch, „Deep Zoom Composer“ welcomes you with this screen:
The software is in English, I don’t know if a German version is or will be available. And the layout and appearance of the software is similar to the apps contained in Expression Studio. Well, I created a project by clicking on „New Project“. I had to input a project name and optionally select a folder before „Deep Zoom Composer“ creates a project. The app creates a new folder in the previously selected folder and stores all data there. After creating the project, I had to add some images to my project. For this, I selected the screenshots I had taken when writing my german article how to install Microsoft Office 2010 Plus on my computer. (For those, who are speaking german and would like to read the article, you can find it here „
The images have different sizes, so this pool may be suitable for testing Deep Zoom Composer.
After selecting all images, they are imported to the project (in fact they are copied) as shown in the following picture:
You can then see thumbnails of the imported images on the right of the main application window of „Deep Zoom Composer“. The next thing, we should do, is to switch to the composition mode by clicking on „Compose“. You will reach a new view:
The thumbnails of the imported images are now shown on the bottom of the window. In addition, you can see the buttons „Slideshow“, „Menu“, „Internal Links“ and „External Links“ on the right of the main window. I’ll talk about them later. You can drag and drop the thumbnails to the stage very easily.
After dragging the images to and moving them in the stage, you may see some guide lines helping you to better align the images each one to each other. I searched an option for reordering the thumbnails because they have been imported in another order as they appear in my article. Unfortunately I did not find a such function. So, I dragged each image to the stage and ordered them manually, beginning on the upper left corner to the lower right and row per row. Please note, you can use the scrool wheel to zoom in or out the stage view. Here a screenshot after I finished to insert the images.
It is possible to align you images in a grid and also define a padding between the images, this looks a little bit better. For this, just select all your images on the stage (for example by using Strg+A) and then select „Arrange – Arrange into Grid“ in the context menue called by a right click.
As you can see in the following picture, after setting up the options in the dialogue, all images are beautifully arranged. However, they are also vertcally centered in each row. No problem, just select the images and align the to top. Please note, that the last image selected is the one to which the others are aligned.
It often happened that „Deep Zoom Composer“ was continuously selecting the images in the right pane. I don’t know if this behaviour is intentional (for example for internal calculations) or a bug. You can also create slideshows with „Deep Zoom Composer“, just click on „Slideshow“ and add the images to the new pane.
Something I’m missing here, is the possibility to setup the duration for each image in the slideshow. As I was checking out this functions, the slideshow was always too fast. However, it is possible to change the times later in the XML file of the exported project. Perhaps, someone from Microsoft is reading this and passes this suggestion. You can insert an menue to your project in the same manner like slideshows. And creating internal and external links is also possible.
Finally, I selected „Export“ and I created my first Silverlight application. Please also note, that the available functions in the Silverlight application are defined in the template you select. This means, for example, that the slideshow will only be available, if the template knows about it.
Of course, I selected „Export as a collection“ as I’m using more than one image. And I choosed PNG as output format for my images. The „Image width“ defines the width of your app in my selected template, I setted it up to 500 px, the maximum width for images in my blog. When exporting the data, „Deep Zoom Composer“ creates a new folder in the folder „Exported Data“ of your project folder and informs you about the current operations in a status window.
If all is done, you have the possibility to preview the results in your browser by clicking on „Preview in Browser“.
The following image presents the result in my browser. And, as mentionned before, this depends from your template. You can find the templates in the installation folder of „Deep Zoom Composer“. This also means, that it should be possible to use own templates. Just copy them to the folder and restart „Deep Zoom Composer“. The present templates can also be edited and modified with Expression Blend. When previewing the Silverlight application, my computer started the „Microsoft Expression Development Server“. I have not tested, if the server also comes with the installation of „Deep Zoom Composer“ or if it was just recognized by „Deep Zoom Composer“. You may setup your firewall for granting access to the localhost. You can also directly open with your browser the HTML file created the export folder.
As mentionned before, the duration of each slide in the slideshow was not really satisfying. You can modify these settings by opening the file „scene.xml“ in the subfolder „Exported Data\your_project_name\GeneratedImages“ in a text editor. Just search for the section „Storyboard.Children“ and modify the times, you may define the times of each slide when they should appear, starting from 00:00:00. And you may enter the total found in „Duration“.
Cool, isn’t it? Especially the full screen mode allows to view all images in their real size. I think, if the procedures above will be a little systematized, for example by creating some reusable templates with placeholders, it should be very easy to create image collections and use them in my posts. And, I’m sure, if I get some time, I would really like to create my own Silverlight template with its own design. And because, in my opinion, its very easy, I repeated the steps with the images for this post, the result is also available on the server mentionned above.
For this attempt, I used a total of 15 minutes! However, before writing this post, I had to search intensely the net for more info about Deep Zoom Composer, Deep Zoom and Silverlight. Unfortunately, it was difficult for me to find articles in German about Deep Zoom Composer, it’s easier in English. Some articles are centered on programming Silverlight apps. I can really recommend the following links:
- Microsoft Live Labs, English
- Seadragon project, English
- Projekt Seadragon, Developer infos, English
- Microsoft Expression, Deep Zoom Composer, English
- Microsoft Expression Team Blog, English
- Blog from Jaime Rodriguez with a tutorial, English
- Blog from Kirupa Chinnathambi with samples, tips and much more, English
- Jellyfish Deep Zoom is open source toolkit bei Codeplex, English
This article has also been published in German and in English on the following sites:
- Excel Ticker Blog, German
- Professional Excel Solutions by Maninweb.de, English
- Professional Excel Solutions by Maninweb.de, German