background preloader

Deep Zoom

Facebook Twitter

Christophe Lauer, Microsoft Life : Deep Zoom avancé rendu facile. Sans doute en tant que développeur amateur de nouvelles expériences utilisateur et de nouveaux outils avez vous déjà fait quelques essais de l’outil Deep Zoom Composer et de l’utilisation de Deep Zoom dans Silverlight 2. Il y a d’ailleurs quelques billets et tutoriels qui présentent cet outil, comme ici, ou là ou encore là. Si vous voulez aller un peu plus loin que ce que propose nativement l’outil Deep Zoom Composer et manipuler les collections par code, pour faire des choses originales comme ce qu’on retrouve sur les sites Memorabilia du Hard Rock Café ou les mini-sites Renault de la Laguna Coupé ou de la Nouvelle Mégane, vous avez compris qu’il vous faudra écrire sans doute pas mal de code… Pour vous faciliter la vie, un partenaire Microsoft du Japon – la société 2nd Factory – a publié sur CodePlex sous licence Open Source MS-PL une bibliothèque de code qui vous facilitera la vie : Jelly Fish.

Scott Barnes en parle sur son blog. Vous pouvez jouer avec une version de démo en ligne ici. Deep Zoom. The following sample shows Deep Zoom in action. To try this example, click the plus (+) button or use the mouse wheel to zoom in. To zoom out, click the minus (–) button or use the mouse wheel. To reset the view, click the first square button. To reposition the image, drag it with the mouse. Run this sample Download this sample For an example of a Web site that uses Deep Zoom, see Deep Zoom example. Deep Zoom can be used in many different areas, but there are three key scenarios where Deep Zoom is particularly useful. Exploration of Very Large or High Resolution Images: A classic example of this would be zooming in on parts of a large map to see different levels of detail and then, using the mouse, moving your view around the map surface.

Deep Zoom uses multi-resolution images to achieve a high frame-rate and fast open experience for even very large images. Deep Zoom uses spring animations, which gives users the impression of a smooth movement (pan or zoom) around image. Run this sample. Silverlight: Laurence Moroney's Blog : DeepZoom in C# - Not just. DeepZoom with the MultiScaleImage control DeepZoom is a new technology which has been added to Silverlight 2 which gives you a new and unique way of managing images within your application. It is implemented by the <MultiScaleImage> element in XAML, which, as its name suggests, gives you the facility to control scale and zoom of your images, with Silverlight providing a huge virtual space on which these images can be drawn.

This is best described by example. Here you can see an image of a kids science project. Now this doesn’t really look too fancy. So what’s all the fuss. If you look closely at the center of the orange above, you’ll see that the first image is embedded within the orange at the center. As you can see the entire second image is little bigger than a pixel in the third image, and the entire first image is little bigger than a few pixels in the second. Using the Deep Zoom Composer But how do you build an application like this? You can see the composer tool here: <? Point p0;