We’ve been asked many times how to use our files with a different folder structure that what we provide on Flabell. I thought this article will help you understand how our components work.

Let’s use this folder structure as an example:

The folder we’re interested in is the deploy folder. Here are all the files you need to deploy to your server for the component to work. The other folders are source files used to create the product.

1. First, there’s a variable defined in the FlashVars (index.html) called pathToFiles. This variable holds the path to the folder containing all the files (it’s in the same folder with the index.html, the swf and the js folder). In this example, the pathToFiles folder is accordion/, and it contains the folders xml and content.

You can set the pathToFiles variable to “” if you want to use absolute paths, or if you want to set the entire path to the folders, as the relative path (the normal way to do it). Note if you set the variable to the empty string, you must make sure the XML file that holds the path to the images, has the correct paths to it’s content, relative to the HTML file that loads the swf, not to the path where the XML is.

2. Secondly, there’s another variable defined in the FlashVars (index.html), called settingsPath, where we define the path to the settings XML file. Note the accordion folder isn’t passed anymore in front of it, since the pathToFiles contains the path to that folder.

Example:
flashvars.pathToFiles = “accordion/”;
flashvars.settingsPath = “xml/accordion.xml”;

Make sure you check the image at the top to understand how things are passed to the preview.swf file.

So when we read the XML path, we read it like this:

pathToFiles + settingsPath = accordion/xml/accordion.xml

And when we read an image from the XML, which in this case is defined like this content/images/image1.png we add the pathToFiles in front of it. So the path will be like this:

pathToFiles + xmlNode = accordion/content/images/image1.png

3. Another thing to keep in mind is that if you want to use absolute paths for your images, you must set the pathToFiles variable to the empty string, so that it doesn’t add up to the absolute paths. Or you can define the website address on it if you want to, and not pass it in the XML file anymore.

So if you want to take the image from http://www.vuzum.com/images/image1.jpg, and the xml from http://www.vuzum.com/accordion.xml the path needs to be like this:

flashvars.pathToFiles = “”;

flashvars.settingsPath = “http://www.vuzum.com/accordion.xml “;

While in the XML, the path to the image would be like this:
http://www.vuzum.com/images/image1.jpg

So when the product reads the paths, it receives the following:

XML PATH: pathToFiles + settingsPath = “” + http://www.vuzum.com/accordion.xml = http://www.vuzum.com/accordion.xml

IMAGE PATH: pathToFiles + xmlNode = “” + http://www.vuzum.com/images/image1.jpg

pathToFiles can be empty if you want to use the component as you use other Flash files. We consider it useful, but it’s your decision.

I hope this makes sense!