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 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"/>
13: </a>
14: </object>
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!
Janete
Trackbacks & Pingbacks
-
DotNetShoutout
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…
Thanks for all the tutorials. Could you give an example of the “relative location” of the .xap?
Is it possible to have slideshow points within a single picture? For example allowing the slideshow to zoom in on specific points within a picture such as a large pre-made photomosaic where each image inside the photomosaic is not actually a seperate image but is part of the single large picture?
Hi Dave,
By relative location I mean the following:
Take a look at this HTML page that is exported from DeepZoomComposer and I uploaded to my blog:
http://blog.sunnypixels.com/SL/MenuDZC/menu_sample_export/Test.html
In this case I placed the .xap in the same folder(MenuDZC/menu_sample_export/Default.xap) as the HTML page so I can just reference it like so:
But if my .xap and HTML page are not in the same folder then I need to change the value for the source.
Take a look at this HTML page:
http://blog.sunnypixels.com/SL/Test.html
In this case I want to reference the same .xap as above so I need to update the source to the following relative to the location of the HTML page:
Hope that makes sense :)
-Janete
Dave,
In regards to your question about pointing to parts of images in the slideshow please take a look at my post about adding links in Deep Zoom Composer: http://blog.sunnypixels.com/?p=226
There is a section in that posts that refers to “Areas” which is a feature that allows you to add placeholders to the design surface within images that can be referenced in the navigation panels like any other image. Areas can be used in slideshows, menus, and to add links:
A snippet from the blog post of interest is the following:
“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.”
Let me know if you have any questions :) I can send you a sample project that uses areas if you think that might help :)
-Janete
Hello –
Thank you very much for the DeepZoom tutorials.
I have a question which is causing me so much agony tonite! I am using the DZ Composer and Expression 3. When I export my DZ canvas, it creates the default.wap and supporting files. When I go to Expression, I insert “DeepZoom” media object and reference the XML file created by the Composer (usually this is in GeneratedImages). This somehow “compiles” (not sure if this is the appropriate word here) and creates a directory structure a level below with the proper WAP file. If I use this WAP file in my HTML, then I do not have the ability to use the link or hover text over an image (nor does the navigation appear at the top, but I am not too worried about that). The directory structure which Expression creates does not exist until I insert the media object. Using the default.wap file just creates a “100%” SilverLight type loading page which does nothing … it is only until Expression handles it when I have a working object.
What am I missing here? I am a good seasoned designer; but, I am unsure how the WAP object gets created on its own. (as in your demo above)
Any help would be great. There must be others with similar problem?
Thanks,
Chris
Whoops — sorry, by WAP: I meant XAP file. My mind is still in 1999 mobile phone technology. :)
Janete,
Thanks so much for this tutorial. I was struggling to get Deep Zoom Composer XML output into Expression web – the Deep Zoom image on my work-in-progress site would often not zoom (sporadically) and always be scaled wrongly and lack the navigation bar, even though it was correct in the preview output from DZC.
I used your technique of copying the HTML from Test.html and it worked first time. Thinking outside the box there, deffo.
You’ve saved me hours of frustration!
Regards,
George.
Using this same code that is copied from the Test.html, can this be inserted to an *.aspx page and made to work? I was wondering how. Have tried to insert the code, and still wondering what would trigger the player to show up?
Hi Janete:
Sorry to have posted the above question. The problem seems to be a USER problem. I decided to play around with an aspx page of the multiple solutions that I have in my project space and was wondering why the code would not work on the *.aspx page.
Need to go home :).
Thanks for your page.
Ace
Greate post. Keep writing such kind of info on your site. Im really impressed by it.
Hello there, You’ve done a great job. I’ll certainly digg it and individually suggest to my friends. I’m sure they will be benefited from this site.
I know this if off topic but I’m looking into starting my own blog and was curious what all is required to get setup? I’m assuming having
a blog like yours would cost a pretty penny?
I’m not very web smart so I’m not 100% positive. Any recommendations or advice would be greatly appreciated. Cheers
It’s in reality a nice and helpful piece of information. I am happy that you simply shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.
Здравствуйте дорогие господа
Чудно почему у нас не собираются узаконить древнейшую профессию. Ведь даже от нелегальных публичных домов наблюдается зримая прибыль. На интим услуги желание имелась и будет постоянно. воспрещениями от проституции не отделаться. таким образом пускай уже лучше проститутки Москвы будут околачиваться в публичном доме, где можно довольно наблюдать их на содержание заболеваний, нежели они сейчас таятся по аркам и частенько делают услуги в полной грязи проститутки бальзаковского возраста . И посетителю складно, точно вместе либо такому же номеру телефона станут находиться как натуральные жрицы любви, так и транссексуалы Москвы. А ежели еще и дань с них легально получать, так и державе будет доход.
С уважением ваш друг Ксения
When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three emails with the same comment.
Is there any way you can remove me from that service?
Appreciate it!