Image Zoomer Manual

The Image Zoomer download contains this manual together with offline examples.


Embedding Image Zoomer into HTML

Note: its possible to use one single swf for any width or height.

Embedding using swf object:

 <div id="flash-content"></div>

 <script type="text/javascript"> 
    // <![CDATA[			
    var so = new SWFObject("image-zoomer.swf", "imagezoomer", "450", "340", "7", "#FFFFFF");
    so.addVariable("path", "nokia/");
    so.addParam("quality", "high");
    so.addParam("scale", "noscale");
    so.addParam("salign", "lt");
    so.write("flash-content");
    // ]]>
 </script>
	

In this example, the dimensions are set to 450x340px. You may change the values at your will.
Note: Don't forget to include the "swfobject.js" file in your html document header.

Variables explained:

  • path - location of the config.xml file (including ending backslash e.g. "nokia/"). Provide absolute path or relative path to where the flash movie is playing.

Embedding using the standard way:

 <object
  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
  codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
  width="450"
  height="340"
  id="image-zoomer"
  align="left">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="image-zoomer.swf?path=nokia/" />
    <param name="quality" value="high" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="bgcolor" value="#ffffff" />

    <embed src="image-zoomer.swf?path=nokia/"
     quality="high" scale="noscale" salign="lt" bgcolor="#ffffff"
       width="450" height="340" name="test" align="left" allowScriptAccess="sameDomain"
       type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
 </object>

You can set the width, height and the path at your will.


Embedding Image Zoomer into another SWF

Make sure your .fla cotains the ImageZoomerApp component. You can copy it from the "embed-example.fla". Then use this actionscript code to load the movie:

 
 import com.yofla.imageZoomer.ImageZoomer;

 var imageZoomer:ImageZoomer = new ImageZoomer(myTestMovie,"slovakia/"); 

ImageZoomer object has two parameters: ImageZoomer(target:MovieClip,path:String).

  • target - specifies a MovieClip into which is the ImageZoomer loaded
  • path - specifies the location of the config.xml file




The CONFIG.XML file

Paths to images, image description, position of the frames and their size pulus other usefull settings are specified in config.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameZoomer>
	<config>
		<defaultFrame width="150" height="80">
			<border type="solid" width="1" color="0xFFFFFF" color2="0x000000"/>
		</defaultFrame>
		<defaultImage showDescription="false">
		</defaultImage>
		<application backgroundColor="0x000000" />
	</config>
	<image src="imgs/nokia.jpg" title="Nokia N70" description="This is a sample image of Nokia N70. You can zoom the selected areas by clicking on them.">
		<frame offsetX="227" offsetY="32" width="53" height="40">
			<border type="" width="1" color="0xFFFF00" color2=""/>
			<image src="imgs/nokia-detail-camera.jpg" title="Camera detail" description="Secondary camera for video calls.">
			</image>
		</frame>
		<frame offsetX="163" offsetY="131" width="50" height="40">
			<border type="" width="1" color="0xFFFF00" color2="0x000000"/>
			<image src="imgs/nokia-detail-photo.jpg" title="Build in camera sample photo" description="The maximum resolution of the 2MPx build in camera si 1600 x 1200px."/>
		</frame>
		<frame offsetX="180" offsetY="288" width="80" height="25">
			<border type="" width="1" color="0xFFFF00" color2="0x000000"/>
			<image src="imgs/nokia-detail-pc.jpg" title="Connect to PC" description=""/>
		</frame>
	</image>
</FrameZoomer>

Image tag attributes:

  • src - path to the image. The path is internally prefixed with the path to the config.xml file
  • title - name of the image, which is displayed in the title bar
  • description - description of the image
  • showDescription - [true|false] set weather to display the description without even clicking on it. If no data is provided, default value is used.
  • backgroundColor - color which fills the surrounding space when the image is smaller than the canvas. If no data is provided, default value is used.

Frame tag attributes:

  • offsetX - _x position of the frame
  • offsetY - _y position of the frame
  • width - width of frame. If no data is provided, default value is used
  • height - height of frame. If no data is provided, default value is used

Border tag attributes:

  • type - [solid|double] sets the type of the frame. If no data is provided, default value is used.
  • width - border width in pixels. If no data is provided, default value is used.
  • color - color of the frame. If no data is provided, default value is used.
  • color2 - 2nd color if double type is active. If no data is provided, default value is used.


License, support, contact, etc.

License:
Free for non-commercial use. Image Zoomer may be redistributed, provided that redistributions contain the copyright notice:

---------------------------------------------------------------------------------------------------
Image Zoomer(c) 2006 Matus Laco, all rights reserved.
This work is subject to the terms in http://www.yofla.com/flash/image-zoomer/
---------------------------------------------------------------------------------------------------


Comercial use:
Visit the Image Zoomer Homepage to purchase version for commercial use. It does not display the YoFLA logo.

Contact:
info@yofla.com

Try 3D-Rotate: http://www.yofla.com/flash/3d-rotate/

Credits: Made with Eclipse, ASDT, MATSC. Nicolas Cannasse - motion twin action script compiler