Create HTML5-Based Mobile-Friendly Interactive Images and Maps
FLDraw Interactive Floor Plan Software  >  Developer Guide  >  Adding FLDraw to a Web Page

Adding FLDraw to a Web Page

This is the HTML code that adds the editor to a web page: 

<object id="objPlan" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="width" height="height" align="middle">
  <param name="movie" value="editor.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#eeeeee" />
  <param name="play" value="true" />
  <param name="loop" value="false" />
  <param name="wmode" value="window" />
  <param name="scale" value="noscale" />
  <param name="menu" value="true" />
  <param name="devicefont" value="false" />
  <param name="salign" value="" />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="FlashVars" value="config=&path=&file=&extra1=&extra2=&extra3=" />
  <!--[if !IE]>-->
  <object name="objPlan" type="application/x-shockwave-flash" data="editor.swf" width="width" height="height">
    <param name="movie" value="editor.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#eeeeee" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="wmode" value="window" />
    <param name="scale" value="noscale" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="config=&path=&file=&extra1=&extra2=&extra3=" />
  <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
 

And this is the HTML code that adds the viewer to a web page: 

<object id="objPlan" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="width" height="height" align="middle">
  <param name="movie" value="viewer.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#eeeeee" />
  <param name="play" value="true" />
  <param name="loop" value="false" />
  <param name="wmode" value="window" />
  <param name="scale" value="noscale" />
  <param name="menu" value="true" />
  <param name="devicefont" value="false" />
  <param name="salign" value="" />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="FlashVars" value="config=&path=&file=&extra1=&extra2=&extra3=" />
  <!--[if !IE]>-->
  <object name="objPlan" type="application/x-shockwave-flash" data="viewer.swf" width="width" height="height">
    <param name="movie" value="viewer.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#eeeeee" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="wmode" value="window" />
    <param name="scale" value="noscale" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="config=&path=&file=&extra1=&extra2=&extra3=" />
  <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

You need to specify values for id, name, width, height, movie, data, allowFullScreen and FlashVars.

Note
You need to specify values in both object tags.

The following table describes these parameters:

Parameter Type Description
id String A unique identifier for the Flash object, useful in writing client-side scripts.
See also JavaScript Interaction.
name String Same as the id parameter.
width Number/Percentage value Specifies the width of the Flash object.
 
Example
800
100%
height Number/Percentage value Specifies the height of the Flash object.
 
Example
800
100%
movie String The relative path of the Flash file.
 
Example
editor.swf
viewer.swf
folder1/editor.swf
data String Same as the movie parameter.
allowFullScreen Boolean Specifies whether or not to allow full screen.
FlashVars:config URL-encoded string The relative path of the configuration file.
 
Example
config%2Exml (config.xml)
folder1%2Fconfig%2Exml (folder1/config.xml)
(or an empty string)
FlashVars:path URL-encoded string The path of the plan file to load.
 
Example
plans
%2E%2E%2Fplans (../plans)
(or an empty string)
FlashVars:file URL-encoded string The name of the plan file to load.
 
Example
p1%2Efdw(p1.fdw)
p1%2Exml(p1.xml)
(or an empty string)
FlashVars:extra1, FlashVars:extra2, FlashVars:extra3 URL-encoded string Additional parameters that you can specify to be sent when communicating with the server.

 

Example 
<object id="objPlan" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" align="middle">
  <param name="movie" value="editor.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#eeeeee" />
  <param name="play" value="true" />
  <param name="loop" value="false" />
  <param name="wmode" value="window" />
  <param name="scale" value="noscale" />
  <param name="menu" value="true" />
  <param name="devicefont" value="false" />
  <param name="salign" value="" />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="FlashVars" value="config=config%2Exml" />
  <!--[if !IE]>-->
  <object name="objPlan" type="application/x-shockwave-flash" data="editor.swf" width="100%" height="100%">
    <param name="movie" value="editor.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#eeeeee" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="wmode" value="window" />
    <param name="scale" value="noscale" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="config=config%2Exml" />
  <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

This example shows how to create an editor (editor.swf) that:

 

Example 
<object id="objPlan" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="600" align="middle">
  <param name="movie" value="viewer.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#eeeeee" />
  <param name="play" value="true" />
  <param name="loop" value="false" />
  <param name="wmode" value="window" />
  <param name="scale" value="noscale" />
  <param name="menu" value="true" />
  <param name="devicefont" value="false" />
  <param name="salign" value="" />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="FlashVars" value="config=config%2Exml&path=plans&file=p1%2Exml" />
  <!--[if !IE]>-->
  <object name="objPlan" type="application/x-shockwave-flash" data="viewer.swf" width="800" height="600">
    <param name="movie" value="viewer.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#eeeeee" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <param name="wmode" value="window" />
    <param name="scale" value="noscale" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="true" />
    <param name="FlashVars" value="config=config%2Exml&path=plans&file=p1%2Exml" />
  <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
  <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>

This example shows how to create a viewer (viewer.swf) that:

 
Tip
You can use a dynamic page as the container page.
For example, a PHP file that accepts the plan name as a URL parameter, like this: viewer.php?file=p1 .
 
Tip
You can use a Flash Player detection method like SWFObject.
The package includes some examples showing how to use SWFObject. See Package.

 

 
Copyright © 2010-2016  FLDraw.com. All Rights Reserved.