How to Embed an Flabell Component in a HTML Page
The folder you’re interested in, mostly, is our deploy folder, because that’s where you’ll find the SWF file and everything it needs to work.
- Copy or upload the deploy folder in the same folder your HTML webpage is.
- Open the index.html file you’ll find in the deploy folder. Every Flabell component has one. Just open it with your favorite HTML editor. If you don’t have one, use a text editor like Notepad.
- Copy everything between the <body> HTML tags. See the body tag highlighted in the following image.
- Paste the copied code in your HTML page, the one you want the component to be displayed in. Where exactly? Well, in the <div> or <table> you want the component to appear. I’m going to give you an example. Let’s say you have a big “wrapper” div that contains other three divs called “header”, “content”, “footer” and you want the component to be displayed in the “content” area.
- Just paste the copied code under these HTML tags: <div id=”content”></div>.
- Adjust the paths to the files in the code you have copied. They have to be correct, relative to your HTML webpage. So if you copied the deploy folder in the same folder your webpage is, these are the lines you’ll need to adjust:
<script src="js/swfobject.js" type="text/javascript"></script><script type="text/javascript" src="js/swfmacmousewheel.js"></script>flashvars.pathToFiles = "banner/"; swfobject.embedSWF("preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params, attributes);
will become
<script src="deploy/js/swfobject.js" type="text/javascript"></script> <script src="deploy/js/swfmacmousewheel.js" type="text/javascript"></script>flashvars.pathToFiles = "deploy/banner/"; swfobject.embedSWF("deploy/preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "deploy/js/expressInstall.swf", flashvars, params, attributes);
Important Note!
You may notice other flashvars that contain paths to files (they may be named xmlPath or contentPath). They usually point to an XML file that contain the content or settings for the component. Those paths should be relative to the pathToFiles flashvar. Also, if any of those XML files contain other paths, they should be relative to the pathToFiles flashvar too.
The <table> HTML element we used is for displaying the component centered in our index.html webpage. If you don’t need it, just delete that element and leave just the <div> that’s inside that <td> element. It’s important to leave that <div> in the place you want the component to be displayed.
0 comments