Using the Flash 3D viewer on web pages

7.2. Using the Flash 3D viewer on web pages

The 3DSOM Flash Viewer is embedded in a web page using the standard <object ...> and/ or the <embed ...> tags. The HTML file exported by 3DSOM Pro handles all this for you but you need to know some more details if you wish to include 3D content in your own pages or reset the size of the Flash viewer window. (Note you can also set the viewer window size using the export optimizer tool see The Web Optimizer tool tutorial.) Here's the typical HTML output from 3DSOM Pro.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dino</title>
<script src="dino_files/insert_content.js" language="javascript"></script>
</head>

<body>
<script language="javascript">
insert_dino_content()
</script>
<noscript>
	<object
	  classid="clsid\:d27cdb6e-ae6d-11cf-96b8-444553540000"
	  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
	  width="800" height="600" id="3dsom_viewer" align="middle" >
	<param name="allowScriptAccess" value="sameDomain" >
	<param name="allowFullScreen" value="false" >
	<param name="base" value="dino_files" >
	<param name="movie" value="dino_files/3dsom_viewer.swf" >
	<param name="quality" value="high" >
	<param name="bgcolor" value="#ffffff" > <embed
	  src="dino_files/3dsom_viewer.swf" quality="high"
	  bgcolor="#ffffff" width="800" height="600" name="3dsom_viewer"
	  base="dino_files" align="middle"
	  allowScriptAccess="sameDomain" allowFullScreen="true"
	  type="application/x-shockwave-flash"
	  pluginspage="http://www.macromedia.com/go/getflashplayer">
	</object>
</noscript>
</body>
</html>

For maximum portability both the <embed> and <object> tags are used. This means that to change the Flash parameters such as the width and height of the viewer you need to edit both the "embed" and "object" versions. To change the width simply change the values after the width= text for both tags.

There is a further complication. To ensure the user can interact straight away with the 3D model a JavaScript function is used. (Otherwise in IE the content will be blocked until you click on the Flash window.) If JavaScripting is available the Flash movie is inserted via the call to insert_dino_content which 3DSOM Pro has defined. In this case the JavaScript code is stored in the file dino_files/insert_content.js.

// simply insert the active content
// (avoids user needing to click on viewer to interact)
function insert_dino_content()
{
var str = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
  width="800" height="600" id="3dsom_viewer" align="middle" >';
str += '<param name="allowScriptAccess" value="sameDomain" >';
str += '<param name="allowFullScreen" value="false" >';
str += '<param name="base" value="dino_files">';
str += '<param name="movie" value="dino_files/3dsom_viewer.swf" >';
str += '<param name="quality" value="high" >';
str += '<param name="bgcolor" value="#ffffff" >';
str += '<embed src="dino_files/3dsom_viewer.swf" quality="high" bgcolor="#ffffff" 
  width="800" height="600" name="3dsom_viewer" base="dino_files" align="middle" 
  allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" 
  pluginspage="http://www.macromedia.com/go/getflashplayer" >';
str += '</object>';

document.write(str);
}

You will notice that this JavaScript function simply inserts the relevant <object> and <embed> tags into the document. So to change the width you need to also change the two values in this file.

TIP:	Make sure you change the 4 occurences of the viewer width and height — 2 in the HTML stub and a further 2 in the "insert_content.js" script in the model data folder.

The parameters XML file

You will notice a file called parameters.xml in the model folder. This file can be used to define a number of parameters relating to how the model is displayed.

The format is XML with each line in the form...

<param name="XXX" value="YYY">

where XXX is the parameter name and YYY is the desired value.

The full list of parameters is defined in Flash Viewer Parameter Reference section. The most important parameters you may wish to change are the rotateX and rotateY which define the initial rotation about the image X and image Y axes. The controls parameter defines the relative path to the control bar movie and the background parameter defines the relative path to the backdrop image or movie.

If the "parameters.xml" file is not present, then no model will be displayed. This can be useful if you wish to script the viewer movie from another SWF file. e.g. A Flash movie to browse a set of 3D models. See Scripting the Flash Viewer section for more info.

Sharing the viewer SWF files

The SWF files (3dsom_viewer.swf, 3dsom_controls.swf, 3dsom_backdrop.swf) stored in the model data folder can be moved to the parent directory so that they can be shared across several 3D model instances (avoiding downloading several copies across the web). To do this, use the following steps...

Move the SWF files 3dsom_viewer.swf etc from the model data folder into the same folder as the HTML

Change the movie= parameter in the object tag section and strip the model folder from the path.

Change the src= parameter in the embed tag section and strip the model folder from the path.

Repeat the above for the JavaScript function in the insert_content.js file in the model folder.

Insert the path prefix ../ into the values specified for the controls and background parameters defined in the parameters.xml file found in the model data folder.