If Flash is the death of HTML, Zoomify may be the death of JPGs, GIFs, and PNGs. While this sounds like marketing hoopla, zooms on the Web may change how designers and developers display images. Ultimately, this will enable quick, interactive access to high-resolution imagery on the Web, CD-ROM, and handheld devices creating richer, more informative, and more entertaining user experiences just by improving the way images are delivered.
Basically, Zoomify is a set of Flash MX 2004 APIs. Combine those with a "zoomified" image and you've got an SWF that allows users to pan and zoom. Creating an image is as simple as opening the Zoomifyer droplet. This .exe goes to work copying an image many times at different resolution levels, breaking it up into thousands of JPGs. When combined, the JPGs run resolution levels from thumbnail all the way up to the full resolution image, broken up into smaller tiles. This pyramidal tiling concept is popular with Scalado and Viewpoint, other companies with products in the Web zoom niche.
Although any image can be dropped onto the droplet for conversion, results are the most dramatic with images of large dimensions. The only size consideration, perhaps, is the 2GB restriction of Adobe Photoshop. Zoomify has no size restrictions. I have converted an image up to 1.5GB quickly and with no problems. The best part is the resulting folder of images was not even one-tenth that of the original image's size while maintaining high-quality imagery. The images should be the original image, not compressed or lossless. BMPs seem to work the best, but the program will work with TIFs, JPGs, and GIFs. The droplet will not convert PNGs.
The easiest route to creating a Zoomify image is to drag and drop the image to be converted into a folder of JPGs; make an HTML embed statement with parameters, such as initial view, zoom level, show/hide navigator window, show/hide toolbar, and other parameters; drop that folder of JPEGs, the HTML file, and a small SWF onto your Web server; and you're good to go. This set of files is available in the Zoomifyer 3 Extension folder, in Designer Tools/Simple Web Page. One strength of this scheme is that a single URL and single SWF can be used to deliver many images. With a URL that includes a question mark, parameters can be passed as a FlashVars parameter. For example, http://www.mySite.com/myDirectory/zoomifyURLDrivenWebPage.htm?zoomifyIma... http://www.mySite.com/content/myImageFolder/&zoomifyX=0.0&zoomifyY=0.0& zoomifyZoom=-1&zoomifyToolbar=1&zoomifyNavWindow=1.
The image path is specified; initial x, y, and zoom are set; and the toolbar and nav window are set to display. Many more parameters are available allowing basic functionality without the need to create separate zooms.
Zoomifyer for Flash MX extends this simple process into a workflow for creating high-impact Web sites. When installed, Zoomify components are added to the Flash Components panel and become available to be dragged and dropped into any movie.
Using an Image with Zoomify
To use an image with Zoomify, create a development folder and place your folder of images into that folder. Start a new Flash project and save it to the development folder. Drag the ZoomifyViewer component onto the stage. Select the component and give it an instance name. Click the Launch Component Parameters Panel button and then browse for your image folder. Note: You may also choose to convert the image right here, by clicking the "Convert" button in the Component inspector. Click "Continue" once you've found the image folder. The image should appear in the window.
The development folder has been set relative to your Flash movie. You may find it useful to move the images to your Web server and type in the absolute path to the folder. Either way, your image should appear in the component inspector window so you may set other parameters if you wish.
Press Ctrl+Enter to test your movie. Pretty slick, but you can't move around the image.
Close the test window. Next, drag the ToolbarStandard component and drop it onto the stage. Placing it at the bottom-center of the image seems to be an intuitive place to get users to interact with it. One more step: we need to point it to the correct instance. In the Properties panel, select Target ZoomifyViewer and type in the instance name you gave the viewer. Test your movie and you'll be able to zoom, pan, and check out the clarity of the image. You can also set "Show Slider" in the properties panel to "false" so the "slider" arrow is not visible. Add a bit of ActionScript and you can create a button to toggle the Toolbar on and off. Test the movie. We've just gone interactive. Images I - III show different zooms of the U.S. Capitol.
One thing to note about the StandardToolbar component: it's just an object. Open it in the Library and you'll notice you can tear it apart and re-skin the buttons, easily matching the look and feel of the application you're building.
Another incredibly useful component is NavWindow. Drag it onto the stage; upper-left is a pretty good location for this. Again, target the instance of the viewer. The NavWindow provides an overview of the image with a red box indicating the image boundaries in the main viewer. Clicking and dragging the red box provides a quick way to navigate a large image. You may resize the window to match your overview image by changing width and height in the component properties window. Note: the image that is used for the overview is a perfect image for use as a thumbnail. In your Web page, point your image link to your imagesFolder/TileGroup0/0-0-0.jpg.
You may notice other components there. ZoomScale provides a measuring component to your movie. This feature is used widely in conjunction with medical imagery, forensic images, and high-resolution satellite imagery - any image where scale might be important. Drag it onto the stage to get a feel for how it works. Again, target the instance name of the viewer. You should know the units of your image at the highest resolution. You may change pixels per unit, units per image, source magnification, and ruler units from yoctometers to yottameters. Test your movie and you should see this the scale update as you zoom in and out of the movie.
Other components in the toolbox include a hotspot creator and slideshow. Both are easy to use, but do require a bit of configuration. Drag the ZoomifyHotspot component onto your movie. The button that appears can be pressed to toggle the caption on and off by the user. Open Component Inspector for insight into all the configurations this tool has to offer. First target the Zoomify viewer instance you created. The Development folder path should be the folder where your project is located. Click "Get" to automatically retrieve the image path or folder of the viewer component. The image you've been using should appear in the window. Now it's time to set up some hotspots. Click "Add" and a box with text will appear. It may be easier to zoom into the area to which you want to add the hotspot, then click "add." Hotspot 0 should appear with that text, populating both "Edit selected name" and "Caption Text." Go ahead and edit the selected name and change caption text to whatever text you want to appear in the movie. You may use the nudge tools and zoom in/zoom out tools to position and size the hotspot text to your liking.
Test your movie. You can leave it at that or add a URL link that will take the user to that site when they click on the hotspot. You may change the text color and background color. Add as many hotspots as you wish in their appropriate locations. The only drawbacks to the text hotspots are lack of font control and the fact that you cannot create a transparent background. However, you can add GIFs or JPGs to the image as well as SWFs. Just type the path to the link to the image or SWF in the "Graphics/media URL." These can be linked to other URLs too. Images IV - VII show the Pleiades Hotspot created with Zoomify.
Zoomify Slideshow
Open a new project and save it to your working directory. Drag the "ZoomifyViewer" component onto the stage and name the instance "slideshow." This will become the window for our slideshow. Now drag the "ToolbarStandard" into the bottom-center of the image so users can interact with the image. Finally, drag "ZoomifySlideshow" onto the stage. Don't forget to target both the toolbar and the slideshow components to the main ZoomifyViewer instance you first dragged onto the stage. Click "Get" next to the "development folder" input area and the development folder should auto-populate. Now you can add views to your slideshow. You can target a zoom you've already created, or the inspector will allow you to convert an image while you work. Select the area of your initial zoom and the zoom level and the next step is to select the transition effect and the slide interval. Test your movie to view the slideshow.
Feature Combinations
Creating your own combinations of features is possible through a very powerful and well-documented set of APIs. One of the most approachable is zoomToView and is demonstrated in the examples included in the download as "Smooth Transition."
Let's see how this might work with some ActionScript. Create a new project and save it. Drag the ZoomifyViewer component onto the stage and name it zoom1. Drag "ToolbarStandard" component onto the stage and target the viewer instance, zoom1. Now that gives users the simple interactive interface. What if we wanted users to go to a specific spot and give them a nice ride while we're at it? Let's drag a button component onto the stage and attach the ActionScript shown below.
on(release)
{
_root.zoom1.zoomToView(0.042, 0.12, 200, 5000, 10,"");
}
This is telling the movie that when the button is pressed, set the Zoomify movie instance to zoom1. The parameters indicate destination X, destination Y, zoom value, duration, interval rate, and callback. The interval rate is expressed in milliseconds. In this case, an update of position will occur every 10 milliseconds or 100 times per second. With the duration set to 5000, there will be 500 updates during the total transition.
Another easy yet powerful effect can be created by combining getX, getY, and getZoom to create a side-by-side zoom. Drag a ZoomifyViewer component onto the stage, name it zoom1 and select the zoom image you wish to display in that window. Drag the ToolbarStandard onto the stage and target zoom1. Drag another ZoomifyViewer onto the stage, name the instance zoom2 and select the image that should display in that window. Select the zoom2 instance, and attach the ActionScript shown below.
onClipEvent (enterFrame) {
_root.zoom2.setView((_root.zoom1.getX()), (_root.zoom1.getY()), (_root.zoom1.getZoom()));
_root.zoom2.updateView();
}
Test your movie and you'll see that as you interact with the first zoom, the second movie updates instantaneously.
. . .
So is that it? We've barely scratched the surface. Check out these Web sites for some inspiration:
With Zoomify's interaction with panoramas and 3D objects as well as integration with Flash's data grid components and XML, developers and designers can create new dimensions to more robust, dynamic, and versatile applications.
Note: Zoomify is offering a free copy of Zoomifyer for Flash v3.0 to MXDJ readers. Simply e-mail president @zoomify.com and mention MXDJ. No registration required, no strings.
Subscribe to Adobe Flex Journal Email News Alerts
Subscribe via RSS
