We are saying goodbye to ActiveDen on February 29. Please make sure you download any ActiveDen items before then! Read more.

ZOOM / PAN CONTROLS - Dynamic Image & Settings

ZOOM / PAN CONTROLS - 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:
From the content swf:
_parent._parent._parent._parent._parent.zoomTo(X, Y, SCALE);
(More details on help document for AS2 and AS3)