Zoom Panning Big Image Sliding Viewer with Hotspot
used for displaying high-resolution object (image – JPG , PNG, GIF ) and SWF files.
Viewer displays the given display object inside the user-defined viewport area.
Viewer allows to control the position and zoom of the object displayed inside the viewport.
Viewer controls the sliding and zoom of the displayed object so that the viewport area will be filled completely.
If the viewport size is greater than the size of the displayed object, the object is scaled over 100% to fit the viewport (zoom is disabled).
It allows placing hotspots on the image.
Hotspot can contain additional content (html text formatted via CSS , images, swf, youtube video) and/or URL links.
The package contains:
Ready to use version
- no flash or actionscript knowledge required, the whole configuration is situated in xml file (settings folder)
- for beginners and advanced users
- very easy installation on your html or flash page
- very smooth animations
- fully scalable
viewer functionality and features:
- load an SWF , JPG, progressive JPG , unanimated GIF or PNG file
- set size, margins and position of the viewport (you can enable the auto-size by passing ‘0’ as the size value – the vieport will set it’s width and / or height to fit the scene)
- set start coordinates
- set start scale
- mouse navigation (several types to choose from) support (enabled / disabled)
- keyboard support (enabled / disabled)
- navigation bar (enabled / disabled)
- navigation bar autohide
- set the navigation bar position (acceptable values: TL, T, TR, L, C, R, BL, B, BR)
- set navigation bar layout (acceptable values: horizontal bar ‘horLine’, vertical bar ‘verLine’, square ‘square’)
- set animation duration
- set the navigation bar colors and opacity
- mouse hand cursor (enabled / disabled)
- mouse drag cursor (enabled / disabled; if dragging is enabled)
- enable / disable mouse cursor coordinates (in px, relative to the displayed image, automatically copy coordinates to clipboard)
hotspot functionality and features:
- set unlimited number of hotspots
- set the position of hotspots (in px, relative to the displayed image)
- set size, colors and icons of the hotspots
- set URL links in the hotspots
- attach popup windows to the hotspots
- set content for the popup windows (HTML, images, SWF , youtube video; formatted via CSS )
- set the size of the popup window (possible to set it on auto-size, by passing ‘0’ as the size value – the popup window will then fit the content)
- set the popup window position, relative to the hotspot marker (acceptable values: TL, T, TR, L, C, R, BL, B, BR)
- set margins for the content displayed in a popup window
- set the color and opacity for the popup window background (optional: two colors for a linear gradient)
- attach a drop shadow to the popup window
- blur scrolling content
- very easy display youtube video, example content html code:
Fully editable source code version (to use in larger projects, websites, presentations)
PositionAndSizeChanger actionscript class with documentation,
The PositionAndSizeChanger class displays the given display object (Sprite, MovieClip) inside the user-defined viewport area (Rectangle). The class allows to control the position and size of the object displayed inside the viewport. The class controls the position and size of the displayed object so that the viewport area will be filled completely. If the viewport size is greater than the size of the displayed object, the object is scaled over 100% to fit the viewport (scaling is disabled).
- rapid display of the image at it’s original size
- rapid display of the image at the largest size that fits the viewport
several types of mouse navigation (can be changed at run-time); possible types:
- controllerMouseDrag – like Google Maps (change of position – mouse drag, zoom / unzoom – mouse wheel, change of position + zoom – mouse click)
- controllerMouseMove – typical gallery (change of position – mouse move, zoom / unzoom – mouse wheel)
- controllerMouseMoveVarSpeed – typical gallery with varied speed (change of position and speed – mouse move, zoom / unzoom – mouse wheel)
- controllerQuickZoom – quick zoom (change of position – mouse move, 100% zoom – mouse over, unzoom – mouse out)
- controllerNull – empty (for disabling mouse navigation)
- set size nad position of the area in which the image will be displayed (viewport); can be changed at run-time
- set the initial size and position
- set the scale step
- set the duration of the scale and position animations
- set the image position by specifying coordinates (in px; in the image’s frame of reference)
- set custom mouse cursor images (move, drag)
- memory saving function, OOP
1. Micro video player (display local video files).
1. Micro youtube player – bug when player destroy.
2. Fit to viewport – bug when viewer start (startScale = 0).