Animated Zombie - Portfolio

Zoom Tool

Click to launch this Flash object in a new window

Summary

The Digital Resources department at The Learning Federation asked me to create this tool in 2007. Their brief was to create a zoom tool that could dynamically display a high resolution jpeg image with the abiltiy to zoom in and move the image around. The tool needed to be built as a template so that only XML, HTML and JPEG files needed to be edited to make new versions (the Flash files would not need to be edited). Permutations could then be created by someone with only basic Photoshop and HTML skills. Click here to launch this Flash object in new window.

Details

This tool needed to dynamically load any size (dimension and aspect) jpeg file. Flash has a 3000 x 3000 pixel limitation of the image size it can display from an external asset, so to work around this, the jpeg has to be split into segments smaller than 3000 x 3000 and saved as separate files. These segments are described in an XML file in a table format which is used to composite the whole image while it is loading. The thumbnail section contains a smaller jpeg image with a viewing window rectangle. This viewing window and the main image view on the right update their appearance relative to one another. Either panel can be used to drag the zoomed section of the image around, while updating the other. This tool had to adhere to The Learning Federation's strict conformance guidelines. On of these requirements is keyboard accessability, which can be fairly complicated to do in Flash. The user can access every part of this tool using the keyboard. Use the TAB and ENTER key to navigate and select the active parts of the tool. To access a draggable object such as the zoom slider, thumbnail viewing window or main view, TAB to that object, then hit ENTER, then use the arrow keys to move it around.

File structure

structure

© 2009 Animated Zombie