Sunny Pixels

Slideshow Support in Deep Zoom Composer (June 2009 Preview)

Recently we posted an updated release of Deep Zoom Composer on our Expression team blog. You can download the June 2009 Preview here. In this post I will cover one of the new navigation features: slideshow support. In subsequent posts I will cover more Deep Zoom Composer features :)

Navigation Using Slideshows

Slideshow support is part of the navigation features added to Deep Zoom Composer to provide users a simple way to add interactivity to their Deep Zoom content beyond zooming. The sections of the UI that is of particular interest for the slideshow feature is one of the tabs located to the left of the “Layers” tab. You can open and close the “Slideshow” tab by clicking on the vertical text.

Adding Images to the Slideshow

Users now have the option of displaying Deep Zoom images in a slideshow running inside of a browser.  All images that are added to a Deep Zoom Composer project can be viewed in the “Images” tab just like in previous version of Deep Zoom Composer. Once the user drags/drops the images onto the artboard they are displayed in the “Layers” tab. Below is an example of images a user has arranged on the artboard.

The “Slideshow” tab allows users to drag and drop images directly from the “Layers” tab to be included in a slideshow.

The images are displayed in the slideshow with the top image first. Users can rearrange the order of the images in the “Slideshow” section by using the up/down arrows.

Previewing the Slideshow in a Browser

In the “Export” workspace the user can edit the output settings, click the “Export” button, and then click the “Preview in Browser” option to view the Deep Zoom content in Silverlight.

Below is the slideshow player that is displayed in the browser in Silverlight. When the “Start” button is clicked the slideshow will begin and continue in a loop as the images are zoomed into view in order. The slideshow can also be viewed in full screen mode. The controls in the slideshow player that are include are: “Zoom in”, “Zoom out”, “Go to previous”, “Go to next”, “Home”, “Start/Stop”, and “Toggle full screen mode”. Use the controls or the mouse wheel/buttons to navigate the content below:

The items that are exported from Deep Zoom Composer can be viewed in the user specified folder in the “Export” tab. As displayed below the HTML and .xap file are exported along with the “GeneratedImages” folder containing the Deep Zoom images. These items can be integrated into an existing website or HTML file (see the bottom of this post for details on doing this).

The slideshow navigation features provides users with the ability to define a way to navigate the Deep Zoom content in a specific order while still providing the same free form mouse wheel support for zooming.

Cheers!
Janete