3D Rotate Tool Manual

The tool rotates a sequence of images. If you take e.g. 72 photos of a product in 5deg steps, you get a nice 360deg view of the product.

• support for hot-spots
• support for custom skins
• reduce server load by using a single zip file
• free config-utility for easier setup
• zooming with high res image

Preloader

• show custom splash image
• create custom preloader
• show loaded images option
• option not to load images unless user presses a button

Rotation

• rotate in 360deg, or limit rotation to e.g. 180deg (bounce rotation)
• rotate in multiple horizontal levels (full 3d)
• choose horizontal or vertical axis of rotation
• rotate once option
• auto-restart option
• set speed and direction of the rotation

User Control

• choose which buttons to show
• disable mouse control
• set custom drag speed
• reverse drag/pan
• mousewheel support for zooming

Zooming

• option to specify a high-res image for zoomed view
• rotation works also when a view is zoomed

Theming

• modify color, size and position of any UI item
• plug in descriptions in your language (all languages flash supports are supported)

Hotspots

• use default hotspots (circle, disc, rectangle) or own movieClip
• close-up hotspot - zoom a selected part of image with description
• zoom hotspot - integrated Flash Zoomer for zooming larger images
• URL hotspot - define url to open
• JavaScript hotspot - define JavaScript function to run (example)
• Movieclip hotspot - specify a movieClip which opens when hotspot is clicked

Other Features

• Security feature : swf is limited to a website, others can't steal it from your website
• Zip archive support – load a singe file instead config.xml + dozens of images

Images count

• For the best performance all images used for the rotation are loaded in memory. If hundreds of images at high resolution are used, the memory is quickly filled up and disk caching slows the performance of the computer. For example using more than 200 images at the resolution of 640x480px (or higher) is simply too much.

Maximum Image resolution

• The Flash Zoomer plugin can accept an image of size maximum 2880px in width or height. This is an limitation of the Flash Player v.9, it might change in the future.

Flash player version

• The v.4 of the tool uses AS3 language, therefore flash player 9 or higher is required. The older version of the rotate tool (v.3) runs flash player 7 and higher. Email me if you need the older version.

Flash CS3 required for editing or resizing a theme

• If you want to customize the theme the rotate tool uses, or the change the width or height of the rotate tool theme, you need Adobe Flash CS3 or higher installed to edit the fla file.

Some flash knowledge is required

• To edit the rotate tool theme some flash knowledge is required. You need to know how to edit a movieclip, set width and height of a rectangle, show and hide layers, modify textfields. No expert knowledge of flash is required, if you have ever created a simple banner you will have no problem editing the rotate tool theme movie.

Size of the movieclip can not be set in the html code

• Due to the theme model used it is not possible to set the size using width and height parameter in the html document. To use the rotate tool with a different size, you must edit the fla file and scale the assets accordingly. If you set scale using the width and height parameter in the html also the assets like buttons and custom cursors might get scaled.

You need the images of the object you want to present. For a smooth animation at least 72 images are required (one image for every 5 degrees of a full 360 degree turn). If you are not sure how to do it, check the Getting the Images chapter. Put the images in a single folder named e.g. images.

You can use the Config Utility to create the config.xml. For experienced users it is sometimes faster to edit the config.xml file directly. The one really important thing about config.xml is to specify path to the images:

<images>
    <image src="images/02.jpg" />
    <image src="images/03.jpg" />    	
    <image src="images/04.jpg" />
    ...

So e.g. replace images/02.jpg from the demo example with images/myshot0001.jpg where myshot0001.jpg is your image.

Once you have the config.xml file ready, place it together with the images folder into a common folder named e.g. with the name of your product. The directory structure might look as follows:

backpack [folder]
 - config.xml
 - images [folder]
    - myshot001.jpg
    - myshot002.jpg
    - myshot003.jpg

Remember, the Config Utility can help you to create the config.xml file.

Using Adobe's code:

PHP helper function to generate this Adobe's code:

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>


<script language="javascript"> 
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			"codebase", "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0",
			"width", "500",
			"height", "375",
			"src", "rotateTool",
			"quality", "high",
			"pluginspage", "http://www.macromedia.com/go/getflashplayer",
			"align", "middle",
			"play", "true",
			"loop", "true",
			"scale", "noScale",
			"wmode", "window",
			"flashVars", "path=backpack",
			"devicefont", "false",
			"id", "multi",
			"bgcolor", "#FFFFFF",
			"name", "rotateTool",
			"menu", "true",
			"allowFullScreen", "false",
			"allowScriptAccess","always",
			"movie", "rotateTool",
			"salign", "lt"
			); //end AC code
	}
</script> 

<noscript> 
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
				id="rotateTool" width="500" height="375"
				codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> 
				<param name="movie" value="rotateTool.swf" /> 
				<param name="quality" value="high" /> 
				<param name="bgcolor" value="#FFFFFF" /> 
				<param name="allowScriptAccess" value="always" /> 
				<param name="flashVars" value="path=backpack" /> 
				<param name="scaleMode" value="noScale" /> 
				<embed src="rotateTool.swf" quality="high" bgcolor="#FFFFFF"
					width="500" height="375" name="rotateTool" align="middle"
					play="true"
					flashVars = "path=backpack"
					loop="false"
					quality="high"
					scaleMode="noScale"
					allowScriptAccess="always"
					type="application/x-shockwave-flash"
					pluginspage="http://www.adobe.com/go/getflashplayer"> 
				</embed> 
		</object> 
</noscript> 



	

Using the swfobject to embed flash movies into a website:

    <script type="text/javascript" src="swfobject21.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            flashvars.path = "backpack";
			
            var params = {};
            params.scale = "noScale";
            params.salign = "lt";
            params.allowScriptAccess = "always";
			
            var attributes = {};
            attributes.id = "myFlash";
            attributes.name = "myFlash";
			
            swfobject.embedSWF("rotateTool.swf", "flashContent", "500", "375", "9.0.0","expressInstall.swf", flashvars, params, attributes);
		
        </script>
	
	<div id="flashwrapper" style="width: 500px; height: 375px;">	
            <div id="flashContent">
                Detecting Flash
            </div>
        </div>

The most important line is the flashvars.path = “backpack”; Here you specify the path to the config.xml file. The tool looks for config.xml in the backpack folder. This way you can use one swf for any number of products.

This is the list of all available flashVars:

• path : specifies the path to folder, where the config.xml is located.
• dataFile : optionally you can zip the config.xml and images into a single zip archive. You specify path to the zip file, e.g. backpack.zip
• configFile : custom filename of the config.xml, e.g. myconfig.xml. If not set, config.xml is used
• configFileUrl : Is the url of custom config file. For example you can use http://www.example.com/product.php? id=124. Images in the .xml need to have than also an absolute path specified.

In 90% of cases you set only the path variable. However you can use any of the other specified ways to tell the tool where to look for the images. To sum it up, you set one of the following:

1. path
2. datafile
3. configFileUrl
4. path + configFile

so setting e.g. both path and dataFile is wrong

This section is for experienced Flash Users who know ActionScript.

The rotate tool is initialized using ActionScript. You create a the rotate tool instance issuing this command:
Note: you can find this commands in actions of the first frame in the downloaded demo .fla files

var rotateTool : RotateToolApp = new RotateToolApp(rotateToolTheme); 

rotateToolTheme is the name of the movieClip instance on the stage, which does contain the theme assets.

You start the tool with this command:

rotateTool.start();

If you want to remove the tool from the stage and memmory, use this command:

rotateTool.release();

Other commands:

rotateTool.showErrors = false;

If set before calling the start() command, the error reporting is turned off.

rotateTool.setImage(7);

Displays the image with provided id. For example id 7 is the eighth image in the config.xml.

rotateTool.setNewPath("/otherproduct/"); 

Removes the loaded images and loads new images specified by the path parameter. See Available FlashVars chapter for more details on the path parameter.

rotateTool.setNewDataFile("otherFile.zip"); 

Removes the loaded images and loads new images specified by the dataFile parameter, when using zip file instead of images + config.xml;

Other commands:

rotateTool.stopRotation(); stops the rotation
rotateTool.startRotation(); starts the rotation
rotateTool.disableControls(); disables button & mouse control 
rotateTool.enableControls();  enables button & mouse control 

rotateTool.zoomOut(); 

Zooms out if the tool is zoomed

rotateTool.getActualImage(); 

Returns id of currently displayed image. The first image in config.xml has the id 0.

It is possible to set the dataFile or path before the start() command is issued, in case you don't want to use the flashVar parameters (e.g. in the case the rotateTool is a part of a larger project.)

use:

rotateTool.path = "/otherproduct/";

or:

rotateTool.dataFile = "product007.zip";

then:

rotateTool.start();

to “hard code” the path to the images in the swf.

EVENTS

You can add eventListeners to the rotateToolApp instance and listen for various events. Currently these events are avaiable, example:

var rotateTool = new RotateToolApp(rotateToolTheme);
rotateTool.path = myPath;
rotateTool.addEventListener(RotateToolApp.INITIALIZED, rotateToolInitialized);
rotateTool.addEventListener(RotateToolApp.LOADING_PROGRESS, progressListener);
rotateTool.addEventListener(RotateToolApp.HOTSPOT_CLICK, hotspotClickListener );
rotateTool.addEventListener(RotateToolApp.HOTSPOT_OVER, hotspotOverListener);
rotateTool.addEventListener(RotateToolApp.HOTSPOT_OUT,  hotspotOutListener);

INITIALIZED
Is dispatched when all images are loaded. Event type is flash.events.Event

LOADING_PROGRESS
Informs on how many images are loaded – useful e.g. for your custom preloader. Event type is com.yofla.rotateTool.events.CustomEvent and it has a property “obj” which holds a number from 0 to 1.

HOTSPOT_CLICK
Is issued when a hotpsot is clicked. Event type is com.yofla.rotateTool.events.HotspotEvent. Event has a property hotspot with some public data, the most important is hotspot.xmlData – it is the xml data of the hotspot as specified in the config.xml. Other public properties of the HotspotEvent are counterparts of attributes specified in the xml, e.g. hotspot.offsetX is the specified (or inherited) offsetX attribute.

HOTSPOT_OVER
Is triggered when the mouse mouse-overs the hotspot

HOTSPOT_OUT
Is triggered when the mouse mouse-outs the hotspot

It is possible to zip the images and config.xml into one .zip “datafile”.

Advantages and disadvantages of using a zip datafile over Xml file + images:

Advantages of using the .zip datafile:

• less requests on server = faster loading time
• easier setup

Disadvantages of using the zip datafile:

• unable to use a preloader image / splash screen
• unable to display loaded images
• only Url and JavaScript and CloseUp hotspots are currently supported

Advantages of using images + xml file

• easier config.xml editing
• easier to swap/modify images

Disadvantages of using images + xml file

• if many files are used e.g.100, then 100 separate Http requests are made on the server. The loader is set up that no more than 8 requests are made as the same time.

For most of my project I prefer using the xml + images approach. This has the advantage that you can edit the xml really fast and you can also update the images fast - without the need of repacking the zip file. My usual work flow is that I create the set of images and config.xml using the config utility and then I just edit the config.xml to adjust speed, user interface look, or add/modify the hot-spots.

You configure the tool via settings specified in the config.xml. You can use the Config Utility to create the xml or you can edit it directly.

• image [“first” | “none” | url ]
  • first - the first image is displayed, as specified in the roation settings
  • none - no image / splash screen is displayed, e.g. images/other/splashscreen.jpg
  • url - url of image to display

• showStartButton [“true” | “false”]
  • Specify if you want to display a start button or not. If displayed the rotation starts only after user clicks the start button

• preLoadImages [“true” | “false”]
  • If the start button is enabled, specify if the images should load while waiting on the user action.

• showLoadedImages [“true” | “false”]
  • Whether to show the images as they load or not

• defaultCursor [“true” | “false”]
  • Turn on / off the default cursor

• showArrows [“true” | “false”]
  • Show or hide the left and right arrow buttons

• showTogglePlayButton [“true” | “false”]
  • Show or hide the play/pause toggle button

• showPlayPauseButtons [“true” | “false”]
  • Show or hide the buttons Play and Pause

• showTogglePanButton [“true” | “false” | “zoom”]
  • true : shows the button
  • false : hides the button
  • zoom : shows the button when in zoom mode

• showToggleRotateButton [“true” | “false” | “zoom”]
  • true : shows the button
  • false : hides the button
  • zoom : shows the button when in zoom mode

• showResetButton [“true” | “false” | “zoom”]
  • true : shows the button
  • false : hides the button
  • zoom : shows the button when in zoom mode

• showZoomButtons [“true” | “false”]
  • show or hide the zoom in and zoom out buttons

• showZoombar [“true” | “false” | “zoom”]
  • show or hide the zoombar

• zoomBarClickable [“true” | “false”]
  • if set to true, clicking on zoomBar will zoom
  • khhk

• showScrollbar [“true” | “false”]
  • Show or hide the position scrollbar

• showScrollbar [“true” | “false”]
  • Show or hide the position speedbar

• disableMouseControl [“true” | “false”]
  • Disable or enable mouse control of rotation.

• disableClick [“true” | “false”]
  • Disable or enable rotation stop/start on mouse click

• disableDrag [“true” | “false”]
  • Disable or enable rotation stop/start on mouse click and drag

• dragSpeed [ number ]
  • Is a number which specifies the drag speed. If it is set to “1” the drag speed equals the rotation speed. If it is “2” the drag speed is two times slower than the rotation speed. If it is set to “0.5” the drag speed is two times faster than the rotation speed.

• enableSwing [“true” | “false”]
  • Set if rotation should start after the user releases the mouse button while dragging the object. If the mouse button is released when the mouse is not moving, the rotation will stop. If the mouse button is release while the mouse moves, the rotation will start.

• maxZoom [number]
  • Specify the maximal zoom value in percent for the zoom feature. 100 in minimum. If set to 200, a 400px image will zoom to 800px maxiumum.

• zoomSteps [number]
  • Specify number of zoom steps when using the zoom In / Out buttons / or when clickZoomsIn is enabled.

• clickZoomsIn [“true” | “false”]
  • If enabled, a mouseclick will zoom in instead of stopping / starting rotation.

• zoomInStopsRotation [“true” | “false”]
  • If enabled zooming in will stop the rotation

• zoomOutStartsRotation [“true” | “false”]
  • If enabled, zooming out will restart the rotation

• zoomSetsPan [“true” | “false”]
  • If enabled, zooming in turns on the pan mode

• playAfterDrag [“true” | “false”]
  • Enable or disable rotation after user releases the mouse button.

• reverseDrag [“true” | “false”]
  • If enabled, the rotation when dragging the object is reversed

• reversePan [“true” | “false”]
  • If enabled, moving the cursor left will pan the image to right, also applies for top-down motion.

• mouseWheelZooms [“true” | “false”]
  • If enabled, mousewheel is used to zoom in / out

• rotateZoom [“true” | “false”]
  • If enabled, zooming in while at maximal zoom level will zoom out. Works only if smoothZoom is set false.

• smoothZoom [“true” | “false”]
  • If enabled, pressing and holding down the zoom button will continue to zoom

• arrowInterval [number]
  • Specify a time interval in milliseconds it takes until next image is show, while the left or right button is pressed.

• autoRestart [number]
  • Restarts the rotation after defined time. Specify in seconds. If set to “0”, the rotation does not resume automatically

• bounce [“true” | “false”]
  • Use this setting if you have a photos of a product which does have not a view of all 360 degrees. A water tap is a perfect example. The tool reverses the rotation after it reaches the last or the first image.

• firstImage [ number ]
  • Define with which image the rotation starts. First image is 0.

• rotate [“true” | “false” | “once”]
  • true : starts to rotate when all images are loaded.
  • false : does not rotate when all images are loaded.
  • once : rotates once and stops when all images are loaded.

• rotateDirection [”-1” | “1”]
  • The default direction of rotation. Use 1 or -1 to swap rotation direction.

• rotatePeriod [ number ]
  • Specify the duration of rotation in seconds.

• rotationAxis [“vertical” | “horizontal”]
  • Specify the axis of rotation for your pictures.

• disabledIfZoom [“true” | “false”]
  • specify whether rotation is disabled when in zoom mode

If you have shoot the images of rotation for more horizontal levels, you set the data in the <multidirectional> node attributes:

• vSteps [ number ]
  • number of horizontal levels

• hSteps [ number ]
  • number of shots per horizontal level

• verticalSensitivity [number]
  • pixel span in vertical direction after which images at a next level are shown

• traverse [ 0 | 1 | -1]
  • defines if tool should step on next/previous horizontal level if all images in the current level are shown (i.e. after rotating 360degrees)

It is possible to set default settings for the images and hotspots:

Example:

    <defaults>
      <image showDescription="true" showHotspots="true" showTitle="true" shrinkToFit="true" zoomToFit="true" />
      <hotspot height="100" showTitle="true" type="rectangle" width="100">
        <border color="FF0000" type="solid" width="2" />
      </hotspot>
    </defaults>

Image attributes:

• shrinkToFit [“true” | “false”]
  • If image is larger than the defined area in the theme movie, it will shring to fit in this area.

• zoomToFit [“true” | “false”]
  • If image is smaller than the defined area in the theme movie, it will zoom to fit this area.

• showHotspots [“true” | “false”]
  • Enable or disable showing of the hotspots.

• showDescription [“true” | “false”]
  • Applies on the image for the image (close-up) hotspot. If enabled, the description is shown without the need to click on the title.

• showTitle [“true” | “false”]
  • Applies on the image for the image (close-up) hotspot. If disabled, the image title of the close-up image is not shown.

Hotspot attributes and sub-nodes:
- Please see the description of the hotspot and border nodes further in the manual.
- If you define the default settings here, all hotspots will use them unless a hotspot overrides some of the settings.

IntroImages node is a collection of images which display once before the rotation. They are useful for an intro-animation you want to display before the rotation starts. If you do not define this node, no intro images are shown. <introImages> node attributes are:

• duration [number]
  • If set to 0, or if it is not provided, the interval between showing the next image is of the same speed as the rotation. You can override this by setting a number greater than 0, in seconds. If you set e.g. “2”, the whole duration of the intro animation will be 2 seconds.

• replay [“true” | “false”]
  • If the user presses play (or togglePlay) button, the intro animation is re-played. If set to false (default), the intro animation is not re-played.

In the hotspots node you define the hotspots. Each hotspot has an id attribute. Once a hotspot is defined, you can assign it to any of the images.

Hotspot node example:

<hotspots>
    <hotspot id="newCustomExample" 
             type="custom" 
             className="MyCustomHotspot" 
             absolutePosition="true" 
             offsetX="330" offsetY="230" >          
          <image src="images/other/zoom.jpg" 
                 title="Custom hotspot example" 
                 showDescription="true">
              <description>
              <![CDATA[With 3D Rotate Tool 4.4.0 and above, you can define custom
               hotspots as movieClips in the library. See manual for details.<br><br>]]>
              </description>
          </image>
    </hotspot>  
</hotspots>  

In the above example we define an image or close-up hotspot. We did it by providing the <image> subnode. The hotspot has these attributes:

• type [“custom”|”disc”|”circle”|”rectangle”]
  • custom - custom movieClip is used. attribute className specifies the class of the movieClip
  • disc - a filled circle
  • circle - a circular hotspot with transparent inside
  • rectangle - a rectangular hotspot

• absolutePosition : [“true”|”false”]
  • true : the hotspot is positioned relative to the rotateTool movieClip top left corner and does not move when e.g. the users zooms a view
  • false : the hotspot is placed relative to the image's top left corner.

• offsetX, offsetY : [number,number]
  • it makes sense to define the x,y position here only if you use the absolutePosition. Otherwise you specify the x,y position of the hotspot in the imagenode where the hotspot is used, since the x,y position changes with every image.

• width, height : [number,number]
  • the width and height of the hotspot, if hotspot is of rectangle type

• radius : [number]
  • the radius of the hotspot, if hotspot is of type disc or circle

After a close-up hotspot is clicked, an image is loaded and optionally it's title/description is displayed. You can nest the close-up hotspots.

Example:

<hotspot id="newCustomExample" 
         type="custom" 
         className="MyCustomHotspot" 
         absolutePosition="true" offsetX="330" offsetY="230" >          
    <image src="images/other/zoom.jpg" title="Custom hotspot example" showDescription="true">
        <description>
            <![CDATA[With 3D Rotate Tool 4.4.0 and above, you can define custom hotspots as movieClips 
            in the library. See manual for details.<br><br>]]>
        </description>
    </image>
</hotspot>

Image node attributes are:

• src [string]
  • Path to the image. Provide relative path to the value of the the path flashVar, if path flahsVar is used. If configFileUrl flashVar is used, provide absolute path to the image.

• title [string]
  • image title which displays on hotspot rollover and in the title bar when the close-up image is displayed

• showDescription [“true” | “false”]
  • If enabled, the image description is shown right away, without the need on clicking on the image title. The image description is defined in description node: <description><![CDATA[This is description ]]></description>

• showTitle [“true” | “false”]
  • If disabled, the image info title is not shown

• shrinkToFit [“true” | “false”]
  • If image is larger than the defined area in the theme movie, it will shring to fit in this area.

• zoomToFit [“true” | “false”]
  • If image is smaller than the defined area in the theme movie, it will zoom to fit this area.

Image node subnodes are:

<description> <![CDATA[string]]> </description>

Contains description of the image for close up image.

<title>
    <text><![CDATA[This is<br>a test.<br>Multiline]]></text>
</title>

It is possible to specify custom hotspot title text (which displays on hotspot mouse over) for ImageHotspot. If no hotspot title text is specified, the image title text is used as before.

Represents the Flash Zoomer hotspot. If clicked a larger image is loaded which can be zoomed in and out. Due to Flash player limitation the loaded image can be of 2880px in widht or height maximum.

<zoom> node attributes:

• src [ string ]
  • Path to the zoomed image. If the rotateTool is initailized with the path flashVar, the path is prepended. If using the zip archive, use the image's path in the archive.

• title [ string ]
  • Title which displays on hotspot mouse over.

Example:

<hotspot id="zoom" type="rectangle" width="40" height="30">
    <border type="double" color="0000FF" color2="FFFFFF" width="1" />
    <zoom src="images/other/zoom.jpg" title="Zoom detail"/>
</hotspot> 

Represents the URL hotspot. If clicked, an http link is opened.

<url> node attributes:

• src [ string ]
  • Is the http link of your choice.

• title [ string ]
  • Title which displays on hotspot mouse over.

• target [ “_blank” | “_top” | “_slelf” ]
  • Target window for the url link.

Example:

<hotspot type="disc" showTitle="true" radius="20">
    <border type="double" color="FF0000" color2="0000FF" width="2" />
    <url src="http://www.yofla.com" title="YoFLA Homepage" target="_blank" />
</hotspot>

Represents the JavaScript hotspot. If JavaScript hotspot is clicked a defined JavaScript function is called. Example: http://blog.yofla.com/2010/03/3d-rotate-tool-javascript-hotspot-example/

<javascript> node attributes:

• command [string]
  • Name of the JavaScript function.

• attribute [string]
  • Attribute which will be passed to the function specified in command attribute.

• title [string]
  • Title which displays on hotspot mouse over.

Example:

<hotspot id="javascripthotspot" type="custom" className="MyCustomHotspot" showTitle="true">
    <javascript command="myJavascriptFunction" attribute="This is a test!" title="JavaScript Hotspot Example">
    </javascript>   
</hotspot>

After a hotspot is clicked, a movieClip is loaded.

• src [ string ]
  • path to swf

• title [ string ]
  • title which displays on hotspot mouse over

Example:

<hotspot id="newExample"
         type="custom" 
         className="MyCustomHotspot" 
         absolutePosition="true" 
         offsetX="330" 
         offsetY="230" >          
    <movieclip src="images/other/mchotspot.swf" title="Some Title" />
</hotspot>  

If you use the disc, circle or rectangle type of the hotspot you can define the look of the hotspot using the border node. Example:

<hotspot id="zoom" type="rectangle" width="40" height="30">
    <border type="double" color="0000FF" color2="FFFFFF" width="1" />
    <zoom src="images/other/zoom.jpg" title="Zoom detail"/>
</hotspot> 

border node attributes:

• type [ “solid” | “double” | “none”]
  • solid : a single lined outline
  • double : double lined outline
  • none : hotspot has not outline

• width [number]
  • Is the thickness of the border.

• color [RRGGBB]
  • Color of the border in hex format. E.g. for red “FF0000”.

• color2 [RRGGBB]
  • The second border color, if border type double is specified.

Images node is the core of the config.xml file. It contains the images which make the 3D animation of your product. The images node contains an <image> node for every image in the animation. Each image node can have unlimited number of hotspot nodes.

Example:

<image src="images/Img0215.jpg" > 
    <hotspot source="absoluteHotspot" />
    <hotspot source="closeup" offsetX="357" offsetY="92" /> 
    <hotspot source="zoom" offsetX="145" offsetY="350" />
</image>

• src [string]
  • Path to the image. Provide relative path to the value of the the path flashVar, if path flahsVar is used. If configFileUrl flashVar is used, provide absolute path to the image.

• srcLarge [string]
  • Optional parameter - path to a large image. When zoomed, the large image is loaded and displayed.

• shrinkToFit [“true” | “false”]
  • If image is larger than the defined area in the theme movie, it will shring to fit in this area.
    - It makes more sense to set this attribute in the defaults node.

• zoomToFit [“true” | “false”]
  • If image is smaller than the defined area in the theme movie, it will zoom to fit this area.
    - It makes more sense to set this attribute in the defaults node.

• showHotspots [“true” | “false”]
  • Enable or disable showing hotspots for this image
    - It makes more sense to set this attribute in the defaults node.

Is an air application which facilitates creating the config.xml file:

You need to install Adobe Air Runtime first: http://get.adobe.com/air/

Then you can download the Config Utility for 3DRT here: http://www.yofla.com/down/3d-rotate/config-utility/ConfigUtility.air

There are two ways how to get images for your product presentation. One is the good old fashioned photography, the other are Computer Generated Images (CGI).

Depending on your budged, you can use services of an professional or shoot the photos by yourself. When shooting images by yourself you will need good lighting and a turntable. Here are some external links on this topic:

Making a turntable:

• http://wiki.panotools.org/Self-made_object_turntable
• http://www.philohome.com/turntable/turntable.htm

Studio Lighting:

• http://digital-photography-school.com/blog/how-to-make-a-inexpensive-light-tent/

Excellent guide on how to take photos on a turntable: * http://beckerexhibits.wustl.edu/3D/howto/index.html

This are just few links for your inspiration, there are more useful tutorials on the net on studio-lightning.

In some cases a viable alternative to photographs are CGI images. If you have no experiences with CGI software, I recommend outsource this task to a professional.

If want to try to create the CGI images by yourself, there is the best free (and open-source) program Blender3D http://www.blender.org/

From the paid software my favorite is Cinema 4D, but there are many others as 3D Studio MAX, Lightwave, Maya and others…

I cooperate with CGI professionals so if you decide to go with CGI images you can contact me at info@yofla.com

The 3d rotate tool.v4 came with a new theming approach. You can set any position of the ui elements or of the rotated images. The disadvantage of this approach is that you can't scale the final swf. If you have designed your theme to be 500x400px, you can't change the swf's width and height to other values in the html code.

The best way how to create a new theme is to start modifying a current one. It is important that the instance names of the movies on the stages do not change, otherwise the tool will stop working.

In many cases the the tool scans for the width and height of the instances on the stage. Because of this you need to set their width or height by editing their content and not by scaling them. Their x and y scale must stay 100%.

The rotateToolTheme movie which you edit has many layers. Hide layers you don't need fore easier editing.

A video tutorial is also available: http://www.yofla.com/flash/3d-rotate/tutorials/blackDiamondResize.html

Here follows a simple description of each layer and how to modify it:

Background Layer

• change background to your desired width and height
• change background color / alpha if desired

Images layer / movie

• specifies the target into which images are loaded
• you can adjust its size an position
• do not set it's size of the image movie directly, edit the content of the image movie to change it's size
• it's width and height must stay 100%
• you can adjust the color of the images movie content or set it to transparent

Controls layer

• replace the content of the buttons if you like
• reposition the buttons freely
• just keep in mind not to change the instance names
• don't delete unused instances, they won't show if turned off in config.xml

Preloader layer

• contains the movie preloader, which contains the movie percentage
• if 50% are loaded, the percentage movie advances to frame 50 - this is how the preloader works
• most of the YoFLA's examples just tween a stripe from 0 to 100% width in 100 frames, but you can use any animation you like. When editing the width of the YoFLA's preloader:
  • set stripe's background width
  • set width of the content of the tweened stripe to the same width, I recommend doing this this at frame 100.

Image Plugin Layer

• Background layer
  • scale the content of the background, it is the area which will the plugin cover when opened
  • optionaly adjust it's color

• ImageTarget layer
  • scale the content of the imageTarget movie, it the area in wich the image will be displayed
  • make imageTarget movie samaller if you want the title bar to not overlap the image
  • optionaly adjust it's color

• ImageInfo layer
  • contains the imateTitle and imageDescription Movie
  • the y position does not matter - the tool aligns it automaticaly to the bottom of the background movie

• ImageTitle Movie
  • adjust the color height of the background bar, update font size and color
  • showMore button - you can plug in your content, its a movieClip with to states (labeled frames) show and hide

• ImageDescription Movie
  • adjust the font, size, or the color of the background movie. the height of the background movie is adjusted automatically

• Close button layer
  • you may plug in your own close button

• Preloader layer
  • see preloader description on the above page

FlashZoomer Plugin Layer

• Background layer
  • adjust the size and color of the background layer, it is the area the zoomer will cover
  • you might delete this layer

• Image layer
  • adjust the size and color of the background layer (again, edit the content of the movie, not the movie alone), it is the area the loaded image will cover

• Controls layer
  • plug in your own buttons, or reposition the buttons. As always, do not rename the instance names or delete the instances
  • Navigator Movie:

• Target movie
  • adjust the size of the content of the navigator's target movie to change size of the navigator window. You may also adjust it color or transparency

• Highlite movie
  • border layer is the inner border of the highlite rectangle
  • border2 layer is the outer border of the highlite rectangle
  • adjust colors or width of the borders
  • you may delete one border if you wish

• Selection Movie
• contains the border and the inside content of the selection rectangle, when zooming a region
• adjust colors as you like it

• Preloader
  • see instruction on how to edit preloader on the previous page

Hotspot layer

• hotspotTitle Movie
  • is the title which displays on hotspot mouse over action and contains the hotspot title text. You may adjust the font, font size, font color, background rectangle size and color. Again, edit the content of the background movie, not the movie itself

• customHotspot Movie
• edit the movie to plug in your own custom hotspot. Deprecated - now you can specify a className for any custom movieClip in the library. See hotspot node.

Cursors layer

• cursors movie
• edit the cursors movie to plug in your own custom cursors