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.

image

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.

image

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

drag_drop

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.

image

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).

image 

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    

Share and Enjoy:
  • E-mail this story to a friend!
  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • StumbleUpon
  • RSS

Trackbacks & Pingbacks

  1. DotNetShoutout trackbacked Posted July 12, 2009, 5:45 pm

    Sunny Pixels | Slideshow Support in Deep Zoom Composer (June 2009 Preview)…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. kirupaBlog - If it isn’t broken, take it apart and fix it! » Blog Archive » Improved Collection Support in Deep Zoom Composer pingbacked Posted July 14, 2009, 9:18 pm

    [...] on Deep Zoom Composer, Janete Perez, wrote extensively about those features in her series of posts here, here, and also [...]

  3. Deep Zoom Composer 正式版发布! « 每日IT新闻,最新IT资讯,聚合多站点消息,保证你与世界同步 pingbacked Posted July 23, 2009, 7:01 am

    [...] 在我们最新的发行版本里,我们搞定了很多部份,使你能真正容易地导入图片并快速添加刚才描述的功能。你可以阅读Janete的博客了解更多这些特性:Slideshow Support, Creating Menus, Adding Links. [...]

  4. Deep Zoom Composer リリース! | KGRAND ONLINE NEWS pingbacked Posted July 23, 2009, 1:54 pm

    [...] been published yet, but will be soon. In the meantime you can check out Janete’s blog posts on Slideshow Support, Creating Menus, and Adding Links and/or, if you want to find out more about the new exporting [...]

  5. nasa trackbacked Posted July 24, 2009, 2:42 am

    Deep Zoom Composer 正式版发布!…

    DeepZoomComposer正式版发布!

    配合ExpressionStudio3正式发布,微软发布了DeepZoomcomposer的第一个最终版本。
    下载地址:Downlo……

  6. Deep Zoom Composer 1.0 released | Ramoonus.nl pingbacked Posted July 29, 2009, 1:55 am

    [...] You can learn more about some of these features by reading Janete’s blog posts on these features: Slideshow Support, Creating Menus, and Adding [...]

  7. Mike Taulty's Blog trackbacked Posted August 4, 2009, 12:51 pm

    Applications Using WPF…

    A common question around technologies like WPF is; “Who’s using this?” and I picked up a really slick…

Comments

  1. Quote

    Is there any way to navigate a slide show etc… using the arrow keys?
    jh

  2. Quote

    Hi!

    Currently you can’t navigate using the arrow keys but this is great feedback. We will look into possibly adding this for the next preview.

    Thanks!
    Janete

  3. Quote

    Hi janete,

    Am using Image creator and collection creator class to create my image tiles. How will i add the tag information to the images which i generate programatically. How will i genearte the metadata.xml for all my images programatically.

    Anyhelp will be higly appreaciated.

    regards
    sakti

  4. Quote
    ATripathy said December 5, 2010, 5:43 am:

    The play button does not work as is expected. As I try the play button, it stops in the middle of the play and refuses to move the slides. Is this a deep zoom composer issue that is known?

    Even in the given post the play button does not seem to work as is expected.

  5. Quote

    Hi there, what a nice facts in your web-site listed here

  6. Quote

    This blog seems to get a great deal of visitors. How do you promote it? It gives a nice individual twist on things. I guess having something real or substantial to say is the most important factor.

  7. Quote

    @ATripathy @Janete

    “The play button does not work as is expected.”

    I have noticed that with Silverlight 4 installed the slideshow functionality seems very fragile/broken.

    If you uninstall Silverlight 4 and put Silverlight 3 back on things behave as they should.

    Janete – Would you like some error reports on this or is it a known issue? Is an update for DZC in the works?

  8. Quote

    Have your considered adding some social bookmark buttons aimed at your web site? At least add one for Digg so we can digg you up!

  9. Quote

    Hi janete,

    Please why is it that the slideshow is not working? It only gives an error?
    Any solutions

    Any!?

  10. Quote

    Pufy

  11. Quote

    Thanks, I’ve recently been seeking for information about this topic for ages and yours is the best I have discovered so far.

  12. Quote

    Please tell me it worked proper? I dont need to sumit it once more if i should not have to! Either the weblog glitced out or im an idiot, the second option doesnt shock me lol. thanks for an excellent weblog! Anyway, in my language, there are usually not a lot good source like this.

  13. Quote

    Hi, I must give thanks this autor to the blog. All of the is apparent and consequently convenient. The planning is usually beautiful i believe. On earth do you i highly recommend you phon others what’s the subject matter theme is it possible you operate? say thanks a lot after and in addition remain the greater hard work.

  14. Quote

    I found your blog site on google and test just a few of your early posts. Continue to maintain up the superb operate. I simply further up your RSS feed to my MSN Information Reader. Seeking ahead to reading extra from you afterward!

  15. Quote

    nice site you got here ill be sure to bookmark it and tell all my friends.

  16. Quote

    You made some first rate points there. I seemed on the web for the problem and found most people will go together with along with your website.

Leave a Comment

Formatting Your Comment

The following XHTML tags are available for use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

URLs are automatically converted to hyperlinks.