Ever since I published my proof of concept of Deep Zoom in Flash, many people from around the world got in touch with me and told me that they also wanted to play around with this technology. Therefore, for a couple of months now, I’ve been working on an SDK for ZUIs and multi-scale images for Flash called OpenZoom. The SDK is still work in progress and I won’t focus on it today. However, I promise you it will definitely be topic of many posts in the future.

Today I’d like to share with you a first preview of the MultiScaleImage component that I’ve built on top of the OpenZoom SDK.

Introducing the OpenZoom SDK

This stuff is really old and is only kept around here for archival purposes. Get the latest news and the first public release of the OpenZoom SDK in the official announcement.

Nomen Est Omen

MultiScaleImage? Sounds familiar? Well indeed, it is the same name Microsoft uses for their Deep Zoom Silverlight control. In spirit, the Flex MultiScaleImage component I’ve built and its Silverlight counterpart are very close. How close? Well, let’s look at a fictional code listing:

Code: Silverlight vs Flex

Microsoft Silverlight

<MultiScaleImage x:Name="image" Source="foo/bar.xml"/>

Adobe Flex

<openzoom:MultiScaleImage id="image" source="foo/bar.xml"/>

Under the Hood

As much as the two look alike from the outside, they differ very much under the hood. Microsoft’s MultiScaleImage control is a native control of the Silverlight runtime and therefore has a very efficient implementation. On the contrary, the Flex MultiScaleImage component is built on top of ActionScript 3. Nonetheless, I am very pleased with the performance, considering I haven’t spent much time on tuning it yet.

Even though I can praise Microsoft for their Deep Zoom implementation, I dare to say they didn’t do their homework on API design. Shortly after Deep Zoom was introduced to the public with the fantastic Hard Rock Memorabilia showcase by Vertigo, dozens of bloggers wrote posts about how to program the Silverlight MultiScaleImage control to create something that somewhat comes close to the Hard Rock site. It was hard because the API is cumbersome and confusing. I’d speculate this is one of the reasons we haven’t seen a lot more inspiring Deep Zoom work since.

Flexibility, a powerful API and ease of use were the top priorities for my implementation of the MultiScaleImage component for Flex. Whether I’ve achieved my goals, I am eagerly waiting to hear from you.

Batteries Included

As the title of the article suggests, the Flex MultiScaleImage component has built-in support for Deep Zoom images. But not only that, it also comes with native support for Zoomify and OpenZoom images without you having to write one line of code. The latter is a new multi-scale image description format I’ve designed and will probably discuss another time.

To keep things clear, there is one thing that the Silverlight MultiScaleImage control supports that I do not (yet) support: Collections. Personally, I think this is one of the cases where it’s misleading that a MultiScaleImage (singular!) supports collections of images and suddenly has subimages. Therefore, once this functionality will be part of the OpenZoom SDK, it most certainly will have its own component.

In order to prevent a similiar incident to Silverlight’s introduction of their MultiScaleImage component where bloggers around the world had to write how to add mouse and keyboard navigation to Deep Zoom, I’ve architected the Flex component in a way that has plug & play support for this kind of functionality which is a nice application of the Strategy Pattern.

Getting Started

I could go on and on about how the Flex MultiScaleImage component works but instead I’ve prepared three demos that let you interactively explore the three core concepts of the component, namely transformers, controllers and constraints.

Demo #1: Transformers

The transformer controls the animation of the viewport. Currently, I've implemented one controller, TweenerTransformer, that is based on the fantastic Tweener animation library. Check out the demo to see how flexible the architecture is and how easily you can customize the animation of MultiScaleImage. You want to know what's also great about transformers? If for whatever reason you don't need them, you don't pay a single kilobyte penalty for an animation library that is never used. View Demo | View Source

Demo #2: Controllers

Controllers are the glue between user input and viewport control. The OpenZoom SDK features two implementations of controllers at this point, namely a MouseController and a KeyboardController. Both have already built-in support for quite some customization but if you need more, feel free to implement your own controller based on IViewportController. View Demo | View Source

Demo #3: Constraints

The constraint controls what states the viewport can reach. Don't want people to zoom out too much? Just add a ZoomConstraint and set minimum and maximum zoom. Don't want them to lose the scene out of sight? Add a VisibilityConstraint. Doesn't the component only support a single constraint? Yes, but the architecture is flexible enough to allow you to combine constraints in a CompositeConstraint which is an application of the Composite Design Pattern. View Demo | View Source

Demo #3½: Out of the Box

After having experienced all the advanced features of the component, let's sit back and enjoy the elegance and purity of the MultiScaleImage component as it comes out of the box. In its plain form, a MultiScaleImage has only one purpose: Displaying images tack sharp no matter how big they appear on the screen. Try for yourself, click on the picture to go to the demo and there just keep on resizing your browser window and enjoy the beauty of simplicity how the image slowly appears sharper and sharper. View Demo | View Source

Download

If you’d like to play around with this component, please download the OpenZoom SDK (ZIP). If you want to find out more, I recommend you to read the OpenZoom SDK API documentation and if you feel particularly adventureous, take a look at the source code.

In case you have questions, feedback or you’ve found a bug, feel free to leave a comment down below or file a bug report at the OpenZoom Bug Tracking System.

Today, I’ve barely scratched the surface of what’s possible with the OpenZoom Flex MultiScaleImage component. In case you have suggestions for topics you would like me to talk more about, again, just leave a comment and I’ll see what I can do.

I can’t wait to see what you create with it. If you have a demo with the MultiScaleImage component, post a comment with a link to your demo.

Disclaimer

This is a preview release. Performance has not been optimized yet. All parts of the component, in particular the API are subject to change.

License

The OpenZoom SDK is licensed under the MPL 1.1/GPL 3/LGPL 3 trilicense.