October 13, 2008

Inside Deep Zoom –
Part III: Deep Zoom in Flash

Welcome back to part three of Inside Deep Zoom. Well, I actually didn't plan to post this tonight but I just got home and found out that tomorrow, Microsoft will officially ship Silverlight 2 along with its acclaimed Deep Zoom technology which… …enables unparalleled interactivity and navigation of ultra-high resolution imagery.

History

As the previous articles and the title of this one already hinted it, I did implement Deep Zoom in Adobe Flash. The viewer I’ve built reads standard, unmodified Deep Zoom images directly from Deep Zoom Composer. It turns out, the idea was born when I was doing my internship at Zoomorama and I was tasked to work on multi-scale image rendering. One night at my apartment, I was taking a closer look at Deep Zoom and realized that it works quite similarly and could be easily implemented on top of the work we did at Zoomorama. The very next day, I talked to our people about it and their reaction was very positive. Another twenty-four hours later, I had a working proof-of-concept for rendering Deep Zoom images inside our own viewer. At this point, I'd like to thank my incredible developer teammates David, Olivier & Eric for being part of making this possible.

Deep Zoom in Flash

What you are about to see, is one set of original Deep Zoom images (fresh out of Deep Zoom Composer) that runs both inside Flash as well as Silverlight. Going into all the implementation details and the implications of this will probably warrant another blog post. However, I think it's interesting to note that with the work I did, we now have a working solution for creating the same kind of experiences Deep Zoom enables on Microsoft Silverlight, but instead running on Adobe Flash.

What does this mean? First, the reach you get with Flash is massively bigger than what you get with Silverlight. Think about it, when Silverlight 2 ships tomorrow it's market share starts at basically zero. Considering that Flash player 9 has something close to 98% market penetration, this is a big deal.

On a side note, if I wouldn't be kept busy with all these ETH projects, Deep Zoom would have been out for weeks before the official launch of Silverlight 2 on a platform that is mature and has an order of magnitude higher reach.

Second, unlike Deep Zoom in Silverlight, Deep Zoom in Flash doesn't crash Firefox on my Mac. Enough said, see for yourself.

Navigation

Click to zoom in and shift-click to zoom out on the picture. Drag & drop to pan. The Flash viewer supports fullscreen mode with the keyboard shortcut F or by right-clicking and choosing Fullscreen in the context menu. Other ways to navigate are also found in the context menu.

Sample #1 – Mont Saint Michel

Mont Saint Michel View in Flash | View in Silverlight Deep Zoom | View Original Image

Sample #2 – Billions

Billions & Billions Served. View in Flash | View in Silverlight Deep Zoom | View Original Image

Sample #3 – Deux Femmes

Deux Femmes View in Flash | View in Silverlight Deep Zoom | View Original Image

Addendum

The Flash viewer for viewing Deep Zoom images is still work in progress and therefore you might experience certain jerkiness when navigating around. It is based on a codebase I wrote from the ground up. So far in this blog, I've not only written about things I experimented with but usually also released the source code that goes along with it. This should not be an exception, however, the code is not ready for public consumption and therefore I kindly ask you to keep an eye on this blog for future announcements.

Although I agree mostly with the statement that Silverlight Deep Zoom is Nothing New for Flash (one could go one step further by saying Silverlight Deep Zoom is Nothing New), I must give credits to the Seadragon team for their innovative & engaging implementation that revived the interest in zooming as a very powerful concept.

Even though the Adobe Flash Platform is still my preferred development platform, I am very happy about the competition Microsoft brought with Silverlight or Sun, Apple & Curl with their respective RIA technologies. I realized this more then ever when I compared Silverlight Deep Zoom to my own implementation on top of the Flash Player. Therefore, I'd like to take this opportunity to petition Adobe for the following two matters:

Adobe Petition #1:
Native Mouse Wheel Support on Mac OS X

Adobe touts the Flash Player as leading example for a cross-platform development environment. According to this article by Ted Patrick, an Adobe Evangelist, cross-platform is defined as follows: Across operating systems and web browsers:
  • Identical APIs (classes, methods, properties, types, and return values)
  • Identical API behavior
  • Similar performance
  • Similar installation experience
As long as we don't have multi-touch screens available everywhere, the mouse wheel or scrolling is one of the most powerful input gestures for Zoomable User Interfaces. It's 2008 and the Flash Player still does not allow you to natively listen for mouse wheel events on the Macintosh. Adobe, please fix this glitch.

Adobe Petition #2:
Support for a Background Thread

As you play around with the Deep Zoom samples in Flash you'll sometimes notice jerkiness in the zooming and panning while the movement should be very smooth. Although there is still a lot of room for optimization that can be done on my part, from my observations, the root cause that is responsible for this jerkiness is when the Flash Player is handling network traffic (when fetching tiles) and doing zooming or panning animations at the same time. From my research I've gathered that Microsoft's Silverlight supports Background Workers, a way to run time-consuming tasks on a background thread. I believe a similar mechanism on the Flash Player would allow me to handle network traffic on a background thread while the UI smoothly animates. This is an advanced feature but the Flash Platform is slowly maturing and exposing such mechanisms to developers has to considered.

Photography

The photos Mont Saint Michel, Billions & Deux Femmes were all taken by me. If you'd like to see more, I suggest you to check out my Flickr stream. All three photos are published under a Creative Commons Attribution-Noncommercial-No Derivative Works license.