This post is a follow up to my previous post about slideshow support in Deep Zoom Composer. In this post I will cover one of the other new navigation features: menu support. Recently we posted an updated release of Deep Zoom Composer on our Expression team blog. You can download the June 2009 Preview here.
Navigation Using Menus
Menu 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. You can open and close the “Menu” tab by clicking on the vertical text.
Adding Images to the Menu
Users now have the option of displaying Silverlight Deep Zoom images in a menu to be viewed in a browser. All images that are added to the project can be viewed in the “Images” tab just like in previous version of Deep Zoom Composer. 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 part of the Window 7 wallpaper themes.
The “Menu” tabs allows users to drag and drop images directly from the “Layers” tab to be included in a menu in Silverlight.
In the “Menu” tab you can click the top left icon labeled “Refresh” to create a default menu ordering based on the images that have been already added to the artboard. Based on proximity and location Deep Zoom Composer creates a hierarchy of the images in the “Menu” tab to simulate the composition on the artboard. For example, based on the composition of the images displayed above the following tree structure is generated:
The labels are initially populated with the image name which can be named by right-clicking and selecting ‘Rename”. You can rearrange the order of the images in the “Menu” section by using the up/down and right/left arrows to create hierarchy and nesting.
Previewing the Menu 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 menu 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”. You will also notice the drop down menu controls on the far left that contains the hierarchy created in Deep Zoom Composer which navigate to the specified image. 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.
A folder is created with the “Name” string and the contents includes an HTML file, a .xap file, and a “GeneratedImages” folder containing the Deep Zoom images. These items can be integrated into an existing website or HTML file. For example, I embedded the above Silverlight control by uploading the .xap file and folder with the image to my web server. Then I copied the code below from the Test.html file exported from Deep Zoom Composer into my blog post and replaced line 5 with the relative location to the .xap I uploaded :)
1: <object data="data:application/x-silverlight-2,"
2: type="application/x-silverlight-2" width="100%" height="100%">
3: <param name="minRuntimeVersion" value="2.0.31005.0" />
4: <param name="autoUpgrade" value="false" />
5: <param name="source" value="Default.xap"/>
6: <param name="onerror" value="onSilverlightError" />
7: <param name="background" value="white" />
8: <param name="initParams" value="adFile=GeneratedImages" />
9: <a href="http://go.microsoft.com/fwlink/?LinkID=124807"
10: style="text-decoration: none;">
11: <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
12: alt="Get Microsoft Silverlight" style="border-style: none"/>
The menu navigation features provides users with the ability to define a hierarchical way of navigating images while still providing the same free form mouse wheel support for zooming.
Happy Deep Zooming!
Trackbacks & Pingbacks
trackbacked Posted July 12, 2009, 5:44 pm
Sunny Pixels | Creating Menus in Deep Zoom Composer (June 2009 Preview)…
Thank you for submitting this cool story – Trackback from DotNetShoutout…
Deep Zoom Composer 正式版发布! « 每日IT新闻，最新IT资讯，聚合多站点消息，保证你与世界同步
pingbacked Posted July 23, 2009, 7:01 am
[...] Support, Creating Menus, Adding [...]
Microsoft Silverlight content
trackbacked Posted March 30, 2010, 8:12 am
Creating Menus in Deep Zoom Composer (June 2009 Preview)…
This post is a follow up to my previous post about slideshow support in Deep Zoom Composer. In this post…