3D Rotate Flexi Manual

This is the manual for the 3D Rotate Tool Flexi Flash Software.

THIS MANUAL APPLIES FOR THE 3D ROTATE TOOL FLEXI BEFORE THE “SETUP UTILITY” WAS RELEASED. YOU WILL FIND HERE USEFUL INFORMATION HOW TO IMPLEMENT THE TOOL WITHOUT THE SETUP UTILITY.

The rotateTool.swf flash movie loads the images of your object. The images are specified in config.xml, together with some other settings like speed of rotation.

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 “data” 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

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.

• contexMenuItem
  • - defines the custom right-click contex menu item. The content is encoded by the setup-utility

• logo > url
  • path to custom logo image

• logo > link
  • optional - url to open on logo click

• logo > offsetX
  • x offset from top left corner

• logo > offsetY
  • y offse from top left corner

Example:

<custom>
    <contexMenuItem>4LDIsODIsNiwzLDIsODUsMjMsNzcsNjEsMzEsMTIsNSw4OCw4NCw3NA==</contexMenuItem>
    <logo url="http://www.yofla.com" offsetX="5" offsetY="5" link="http://www.yofla.com/logo.png"/>
</custom>

• 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

• preLoadLargeImages [“true” | “false”]
  • Whether to start loading automatically large images after all low res images are loaded. Default is set to true. (v.1.3.1 and above)

• 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.

• 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

• showRotateOrPanButton [“true” | “false”]
  • If you want have one button to switch between rotate or pan mode, use this button. Note: the theme must have this button included (as of 2010-01-17 the theme files do not have yet this button included)
  • true : shows the button
  • false : hides the button

• 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”]
  • show or hide the zoombar

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

• showToggleFullscreenButton [“true” | “false”]
  • show or hide the fullscreen button

• 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)

• cycle [“true” | “false”]
  • if set to true, pressing top arrow at top most level will jump to bottom most level. Useful if you have just two levels of rotation and you want to simulate a “flip” button (to show top and bottom side of your product).

• stopRotationOnLevelChange [“true” | “false”]
  • if set to true, rotation will stop if you press top or down button

It is possible to set default settings for the images:

• 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.

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 <images> node the images are listed. <images> 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.

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

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 Flexi here: http://www.yofla.com/down/3d-rotate/3drtflexi-setuputility/3drtflexi-setuputility.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