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
View in Flash | View in Silverlight Deep Zoom | View Original Image
Sample #2 – Billions
View in Flash | View in Silverlight Deep Zoom | View Original Image
Sample #3 – 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 XAdobe 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 ThreadAs 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.
14.10.2008
8:59
[...] Inside Deep Zoom Part III – Deep Zoom in Flash [...]
16.10.2008
10:57
Really stunning stuff!
We collaborate and this work with Multi-Touch… then it would really piss off Microsoft
See: http://www.youtube.com/watch?v=JOckVTgWBr4
21.10.2008
21:42
Hi’ Daniel,
I like you samples and and it is great to see a good alternative to using a Microsoft product for this.
In my on-line review and research of Deep Zoom I found a limit in the maximum pixel size of the images appears to be around 20516 x 15291 pixels.
See this site: http://www.marklio.com/marklio/CommentView,guid,f5216e74-ce9f-4b7a-b1de-157ea51bf987.aspx
Does you code example similar limitations?
22.10.2008
19:32
Hello Morten,
I’ve left you a comment on your blog:
http://www.marklio.com/marklio/CommentView,guid,f5216e74-ce9f-4b7a-b1de-157ea51bf987.aspx#commentstart
Regards,
Daniel
26.10.2008
18:32
Hi Gasi
Have you tried the Pixel Blender:
http://labs.adobe.com/wiki/index.php/Pixel_Bender_Toolkit
This overview:
http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.html
states:
« With new capabilities in sound, you can write live audio filters or just use the power of Pixel Bender’s number crunching engine to process data asynchronously in a separate thread.»
28.10.2008
23:09
I see this works well with a single image, but is this a JPEG2000? And can you post one with a muuuuuch larger file?
04.11.2008
1:23
This is really nice,
How about collection of images instead of just one. Does your implementation handle that type of use?
04.11.2008
15:50
I’ve also seen that sometimes no all the visible tiles load and you end up with parts of the image blurry.
Do you have plans on releasing the source code for this component? and if yes, how long do you think it will take you?
Thanks
30.11.2008
17:20
Congratulations Daniel!
Do you think it would be feasible to do that with video tiles ? I mean slicing a huge video stream in levels & tiles …
01.12.2008
11:03
@Adam: Indeed, this stuff works with «muuuuuch» larger images. Regarding the image format: No, this is not a JPEG2000. JPEG2000 promised many of the features you’ve seen in my examples but so far it has not gained a lot of adoption on the web due to unclear licensing issues. The examples I’ve showed here so far work with any image type that is natively supported by Flash Player, namely PNG, JPEG and although I am not sure, maybe even plain old Bitmaps.
@Laurent: Yeah, I’ve thought about the video idea, too. Regarding implementation it would be quite tricky because of the synchronization between different video tiles. However, if you think about it, there are definitely more gigapixel images than gigapixel videos out there and you could still embed your video content normally in a ZUI.
Cheers,
Daniel
30.12.2008
11:10
Live Labs released Seadragon AJAX, no plugin required at all:
http://livelabs.com/seadragon-ajax/
and even Seadragon for the iphone:
http://livelabs.com/seadragon-mobile/
Obviously you have a vested interest in Flash but really this technology can be implimented anywhere, really cool that live labs is making this mainstream, not just a proprietary flash product.
The other key benifit in Silverlight is that the control is native, meaning your app that uses the control is really tiny, as all the DeepZoom logic is already on the users computer as part of the cross platform runtime. A Silverlight DeepZoom app will eventually run on PC, Mac, Linux, WinMo, Nokia etc = very cool.
30.12.2008
15:30
John,
Thanks for your feedback. I am aware of and greatly admire the work by the Seadragon Live Labs team. Obviously, I am more acquainted with the Flash Platform and decided to follow a more constructive approach to demonstrate its abilities to deliver the same kind of experiences like Deep Zoom. Why either or if we can have both? In my opinion, discussions like this or that one won’t get us very far.
Regarding your point of native control vs component: Flash and Silverlight each follow a different paradigm. As far as I know, controls in Silverlight are built-in whereas Flash distributes them with a framework like Flex. Both approaches have their pros and cons: The native Silverlight MultiScaleImage control definitely has better performance characteristics, on the other hand, a component built in ActionScript is far more open for customization and extension (see transformers, constraints and controllers).
File size is also a non-issue: The MultiScaleImage component I’ve built on top of OpenZoom is roughly 30KB and I am sure there are great developers out there who could easily beat that.
Looking objectively at reach, at the moment Flash still has an edge over Silverlight. Talking about reach though, Seadragon AJAX is probably the most compelling choice.
Personally, my goal is to make ZUIs and multi-scale imaging available to as many people as possible, no matter what their platform of choice is. We all should feel lucky that we can pick and choose and I am excited that people from everywhere are contributing to these exciting new technologies. In the end, it’s all about creating great experiences for the people.
Cheers,
Daniel
P.S. Great work on DeepEarth!
02.01.2009
9:47
Daniel you are spot on. It is such an exciting time, what is that famous quote?
The tools are there, I think 2009 is going to be awesome – I look forward to your posts.
12.06.2009
13:49
Reply to Morten, Microsoft Silverlight Deep Zoom doesn’t have a limit itself. It’s just Deep Zoom Composer doesn’t support. You can still use your own tool to compose one.
Besides, image collection in Deep Zoom of Silverlight allows the sub-images to be rearanged to different position and z-order. And each sub-image can have its own tag.
12.06.2009
13:52
Silverlight 3 is coming. Although I haven’t heard any news of Deep Zoom in Silverlight 3, I hope it will become 3D in Silverlight 4.
12.06.2009
16:25
The Silverlight Deep Zoom first loads when it is shown on the screen, but your Flash one loads even when it is invisible on screen, may be scrolled away.
14.09.2009
23:37
I really admire your work on Openzoom and thank you for your articles, which are well-written and highly instructive.
But I gotta ask, because this is keeping me awake at night: why does the “glitch” in the sentence “It’s 2008 and the Flash Player [...] please fix this glitch.” links to a page that has nothing to do with the matter at hand in IMDB?
14.09.2009
23:43
Xannax,
Thanks. Haha, well the classic movie «Office Space» has a great scene where they talk about a glitch (I’ve update the original link). If you haven’t seen this movie, you should do so ASAP – it’s hilarious!
Cheers,
Daniel
05.10.2009
11:11
[...] Theorie http://gasi.ch/blog/inside-deep-zoom-1/ http://gasi.ch/blog/inside-deep-zoom-2/ http://gasi.ch/blog/inside-deep-zoom-3/ [...]
20.01.2010
2:36
PLEASE share your code, I tried this sort of UI when I saw a version of Google Earth on Flash (for demonstrating AS3), but my simple approach didn’t work for zooming beyond 0.00001% or 10000% aprox. where the floating point messed up the relative positions. Also never got my head around designing a way to fetch the images from a DB.
From what I’ve seen in your other demos, you are having floating point issues when positioning at huge scales… Or is it something else?
Anyway, just LOVE what you did with OPENZOOM
I’ll be playing a lot these next weeks.
20.01.2010
2:39
OH, I started asking for code before I saw your OpenZoom project and didn’t check for what I’ve written before clicking SUBMIT
:p
thanks a lot
25.01.2010
9:55
[...] Technik wird von Microsoft als besonderes Feature von Silverlight beworben, jedoch kann man auf http://gasi.ch/blog/inside-deep-zoom-3/ nachlesen, dass sie mit Adobe Flash ebenso umgesetzt werden kann. Außerdem ist es mit dem Deep [...]
02.02.2010
2:44
[...] Inside Deep Zoom –Part I: Multiscale Imaging Inside Deep Zoom –Part II: Mathematical Analysis Inside Deep Zoom – Part III: Deep Zoom in [...]