Login / Sign Up

How to publish a component twice on the same page

 

 

These instructions cover the FX labeled components, not other components or SWFs.

 

The answer is simple if you understand how SWF-XML-Images interact.
An article which explains this interaction would be Path issues with SWF files

So if you want to publish the same SWF twice on the same HTML page, you don’t need two SWF files nor two swfobject.js files, but you’ll need different settings.xml and images.xml files, and also different images (if you don’t want to have the same pictures obviously).

So on the same HTML page, you can have in the head section two references to the same SWF file, but with different settings.xml file:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars1 = {};
flashvars1.settingsXML= "settings1.xml";
var params1 = {};
params1.scale = "noscale";
params1.salign = "tl";
params1.wmode = "transparent";
var attributes1 = {};
swfobject.embedSWF("component-name.swf", "ComponentDiv1", "600", "300", "9.0.0", false, flashvars1, params1, attributes1);

var flashvars2 = {};
flashvars2.settingsXML= "settings2.xml";
var params2 = {};
params2.scale = "noscale";
params2.salign = "tl";
params2.wmode = "transparent";
var attributes2 = {};
swfobject.embedSWF("component-name.swf", "ComponentDiv2", "300", "200", "9.0.0", false, flashvars2, params2, attributes2);
</script>

 

Notice I named the instances of the same SWF file ComponentDiv1 and ComponentDiv2.
Insert these two instances anywhere in your HTML document:

<div id="ComponentDiv1"></div>

<div id="ComponentDiv2"></div>

 

In settings1.xml and settings2.xml, make sure you’re referring to a proper imagesXML file (like images1.xml and images2.xml), in which you’ll edit the paths and other details of the images for the two different components.


    
  • COMMENTS
Loading comments... If comments don't show up in 5 seconds, click to load

Leave a Reply

Only alphanumeric characters allowed
Please type a message!
Format your comments using Textile: *bold*, _italic_, "link text":address,
@code@