Sunny Pixels

Adding Links in Deep Zoom Composer (June 2009 Preview)

One of the new navigation features that we are supporting in the updated release of Deep Zoom Composer  is the ability to add links. This post is a follow up to my previous posts about the other navigation features: slideshow and menu support in the June 2009 Preview.

Navigation Using Links

With links support you will be able to add interactivity to your Deep Zoom content beyond zooming. When a user clicks on an image inside the browser that has a link created with Deep Zoom Composer the content will pan to another image or link to an external hyperlink. You can access the links features in the tabs to the left of the “Layers” tab. There are two tabs related to links:

• Internal links: this tab is used for creating links between images & areas within the Deep Zoom content in the browser.
• External links: this tab is used for creating connections between images & areas in the content to link to URLs.

All images that are added to the project can be viewed in the “Images” tab which is now located at the bottom of the artboard. When you drag/drop the images onto the artboard they are displayed in the “Layers” tab. Below is an example of images I have arranged on the artboard:

 The images above are all of my 1.5 year old golden retriever Texas :) 

Adding Links to Images & Areas

Along with the ability to add images to the artboard we have a new feature called “Areas” which can be used to mark or add a placeholder to a section in the Deep Zoom content. These areas can be used later to link with other images so that when the user clicks on an image the content pans to the area in the browser.

“Areas” can be added by clicking on the “Add Area” icon highlighted above in the “Images” tab.
This icon is located next to the “Add image” icon.

Above is an example of four separate areas that I added to mark the text sections in my background image that I would like to link to other images. When the user clicks the specific areas I would like the Deep Zoom content to pan to a specific set of images in my composition.

Internal Links

The internal links tab allows you to drag and drop images & areas directly from the “Layers” tab. For example, when you drag image “A” into the tab the following dialog displays which allows you to associate this image with another image to establish a direct link:

This list box displays all of the images that are being used in the artboard.

The same can be done for areas when you drag an area from the “Layers” tab into the “Internal Links” tab and pick images to establish a direct link. You can see below that I have two areas labeled “Area” and “Area 1” that are directly linked to two images on the artboard. When this is previewed in the browser the user can click the section where the areas is located and the Deep Zoom content will pan to the linked image.

External Links

Similar to the way you create internal links you can also create external links to URLs. You can drag/drop an image or area from the “Layers” tab into the “External Links” tab to associate with a URL. The following “Manage External Links” dialog will appear where you can create and enter URL information.

In this case when a user is viewing the content in a browser and clicks on the image displayed below a separate window will open linking to the URL specified above (a Flickr search of Lake Crescent images).

You can edit/remove external links by either right clicking on the entry in the “External Links” tab or opening the Tools->Manage External Links dialog. You can also add tooltips to images by selecting the image and entering text in the “Tooltip” section of the “Properties” panel:

In the browser, the user will be able to hover over this specific image and see the tooltip letting them know that they can click it and be redirected to another site.

Previewing Links in a Browser

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

Below is the player that is displayed in the browser in Silverlight. The default controls in the player that are include are: “Zoom in”, “Zoom out”, “Go to previous”, “Go to next”, “Home”, and “Toggle full screen mode”. In the Silverlight control below you will also notice that you can click on the areas that are located over the text which will link you to specific images. You can also click on the “Lake Crescent” image with the tooltip which will redirect you to the Flickr search URL. 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 under the “Location” label in the “Export” tab. For more info on how to integrate the exported Deep Zoom content into your website/blog check out my previous post on menu support in Deep Zoom Composer.

Stay tuned for more blog posts on Deep Zoom Composer!

Smiles,
Janete