ZOOM / PAN CONTROLS - With Dynamic Image & Settings

Prepared to display high resolution product photos, maps and any image or Flash swf. Can be implemented anywhere in a webpage or opened through standalone flash player. Automatically resizable to fit within the dimension specified in HTML file and even to fill the full browser window. Button controls available for zoom, pan and to reset the position of image.

• Can be dragged using Mouse.
• Can be zoomed using Mouse Wheel (for windows only)
• You can enable/disable the functionalities through available settings.
• Can specify your own canvas width and height.
• Supports Flash player version 8.0 and above.
• Both AS2 and AS3 versions included with separate source files (Flash 8,9)
• Fully editable MCs, No compiled Clips.
• Commented Action script and xml file.

Both the following versions of files included with deliverables:

1. Fully Editable Flash Source
   Flash source file included so that a designer / developer with basic knowledge in Adobe Flash can customize the settings and design if needed. Of course, the image can also be added directly in to Flash library if preferred.
2. Flash Source + XML file to adjust settings
   No knowledge on Flash needed. All the settings can be made without editing the flash. The image file link and all the necessary values are received from the XML file. You can even change the button color, transparency and location of buttons through the XML file.

Here is the list of available dynamic settings:

1. Image can be loaded outside from Flash. Either you can specify the file path through XML or through Flash variables method from the html file.
2. Amount (speed) of zoom and speed of movement in response to the buttons can be adjusted.
3. The initial zoom percentage and alignment can be set.
4. Adjustable Easing value (smoothness of movement and zoom)
5. Maximum allowed zoom level is adjustable.
6. Alignment and location of the control buttons
7. Color and transparency of Button and its background
8. The Mouse Drag option and Position buttons can be disabled (if preferred)

Below is the screenshot of the XML file:

UPDATE : [08 AUG 2008 ]
Keyboard shortcuts added: UP, DOWN , LEFT , RIGHT , SPACE , +, – For those who like to publish in player version 8.0, bitmap smoothing added. The new source files added inside the folder “player version 8.0”. Please experiment yourself as the efficiency of display depends on the dimensions of image.

UPDATE : [12 AUG 2008 ]
As requested, I made it to work along with interactive swf. In the place of image, you can now load an swf with buttons and links. Also you can call (load) more swf files from within the content swf. If you think the content swf changes its width and height dynamically, you need to call a function to make the zoom actions to work in response to change. It is explained in the document provided with source files.

UPDATE : [09 SEP 2008 ]
AS3 supportive version included. So there are 2 different source files for player 8 (AS2) and player 9 (AS3) included. Autohide option for control buttons added. It can be enabled or disabled through XML or flash variables. Also the hiding delay time is adjustable.

UPDATE : [20 SEP 2008 ]
An example file (The_example_file_that_loads_zoom_swf.fla) added to demonstrate how to load this file into another swf. You no need to work on the zoom.swf if you follow the example file.

UPDATE : [14 NOV 2008 ]
Added options to zoom into a specific location. This will be useful to navigate through map on clicking a button or somewhere. Example source code also included with deliverables. You just need to call the following function:
From root:
zoomTo(X,Y,SCALE);
From the content swf:
_parent._parent._parent._parent._parent.zoomTo(X, Y, SCALE);
(More details on help document for AS2 and AS3 )

====================================================

FAQ :

1. Some part of image doesn’t displays on all zoom levels:
There is a limitation for image size in Flash player. If the dimension of image exceeds 2880×2880 pixels, flash will just crop within 2880×2880 pixels and will not display the bottom-right part of the excessive image.

2. To avoid 2880×2880 pixels limitation:
If your image strictly needs to be in the size more than 2880 pixels and yet needs to be loaded into zoom, the only possible solution is directly importing that image into a flash file, scale down to a percentage (say 25% or 50%) to keep its size less than 2880 and then load that swf as zoom content. This way the image will not loose its details.

3. Displays well on initial zoom but partially hidden on higher zoom levels:
If the image exceeds certain size and zoomed-in, Flash Player can’t display some bottom-right side parts of the image. To resolve this the value of zoomMax should be reduced. You can change it through XML file or flash source. The pre-set value is 400%.

4. Slower performance / Higher CPU usage while using large SWF files as content:
Usually Flash player will stuck if a massive vector content entirely moved or scalled. To resolve this, you need to set cacheAsBitmap=true; to your content movieclip which will result a significant improvement in speed. This is not necessary for image contents. The recently updated version uses least possible CPU resources.

5. Can this file made to work with pageflip component?:
It can be implemented, but it is a pain for the users to navigate as pageflip may cause usage of high CPU resource and slowsdown when combined with this file. However, this is purely depends on dimension and type (vector or image) of content. No technical support available from the author for this particular usage.

6. Can I use Adobe InDesign exported swf files as content?:
Yes, you can. If you export the swf from InDesign CS4 , you need to use the AS3 version of the zoom file. In such case if your pages have buttons, you need to disable the mouse drag option, which is not necessary for AS2 versions.

7. Is it resizable?:
Yes, it resizes and centers the content along with browser size. An example html file inlcuded with sources.

HELP :
If there are bugs or questions, contact me through my profile page with details and I will mail you the revised version if possible.
[ Please take a glance at the above FAQ section before contacting ]