Ever wished you could have top product features and galleries on Facebook? Well now you can, as the new Facebook ON template is out. Boost your facebook page to an unprecedented level. As its core is a top product viewer with awesome features such as the Multilevel Menu FX, Youtube/Vimeo Player FX, Accordeon News Reader FX, 360 Product Viewer FX, full customisation support and great performance it is the facebook theme to turn your page on and up!

XML Customizable Template

By editing the included configuration xml files you can modify the assets to obtain a brand new and original look for your flash website. Background images and colors, text content, gallery images, navigation buttons are just a few examples of things that you can customize in your template.

Included Flash Components & Galleries:

• 360 Product Viewer FX
• HTML Content Scroller FX
• Contact Form FX
• Multilevel Menu FX
• Photo Wall FX
• Product Viewer FX
• YouTube/Vimeo Player FX

This FAQ will try to explain how our templates are structured, how they work, and ultimately, how the users are supposed to customize them.

The FX templates are an ingenious blend of all FlashXML components, brought together in one website. You can check all the FX components that go into a template by checking the components folder in the template’s folder. 

Now, there are two types of components that we use in our templates. We have site-wide components and page specific components. Below you can see the diagram to how a typical template looks.

Site-wide components

The navigation menu

- requires little explanation, opens the different pages of the site;

- the text in the navigation can usually be changed from the navigation.xml file, or menu.xml file. The CDATA tags tell the menu what text to add to the menu;

- if the menu doesn’t have CDATA tags, the “text” in the menu is created with images;

- it usually has an action attribute (tells the template what page to open), but can contain url and target attribute (use them for external links).

The template’s logo

- this is usually an image or sometimes text. It is usually added with a Spacer component (a basic component to add image/text). the XML that adds this image is usually found in header/Spacer/images.xml;

- some templates (Challenge You, Dance Floor, Evolva, REM, Spark) add the logo through an XML in the template’s folder header_settings.xml;

- other templates (Monochrome) add the logo in the template’s background;

- logos are usually transparent background PNG files, to allow the template’s background to be seen.

The Sharer        

- this controls the social sharing, like Facebook and Twitter. It can usually be found either in the footer, or header;

- it can do 2 things: share your site on your user’s social accounts; or your users can access your social account;

- when you edit the Sharer’s settings.xml you can see that each icon has an attribute called action;

- let’s take the Facebook icon, if you have action=”http://www.facebook.com/flashxml”, when you click the Facebook image, you will be taken to the Facebook account specified; 

- when action=”facebook”, if you click on the FB icon, your users will share your site on their accounts, or whatever site you entered in the shareURL attribute.

Copyright text 

- requires little explanation, provides users with the designer’s or company’s name;

- it’s added with a simple component called Spacer, that we created especially for our templates;

- to change the text, usually find the text.xml in the footer/Spacer/ folder;

- you can add links in the Spacer by adding a <a href=””> </a> tags, in the CDATA tags in the text.xml;

- you can also add linked images, by adding a <img src=””> tag inside the <a></a> tags, in the CDATA tags in the text.xml, but you must make sure that you add the <imageScale value="1"/> line in the Spacer's settings.xml.

MP3 Player   

- the normal MP3 Player has been redesigned to show just the little visualizer, that you can see in the template;

- it can either be found in the footer folder or in the header and you can turn it off, by editing one value in the settings.xml, changing the <autoStart value="true"/> to <autoStart value="false"/>;

- Don’t delete the MP3 Player’s files or you will crash the template.

Fullscreen button

- makes the template fullscreen; 

- the image used can be changed by editing the footer/assets/skin.xml

This concludes the  presentation for the site-wide components in the templates. It’s usually easy to find them. The components which are in the top section of the template are usually in the header folder, and the components which are in the bottom third of the template are usually in the footer folder. 

Since our templates’ design varies so much, it’s difficult to make a comprehensive rule about what each of these folders contain. You will have to explore a bit, in order to figure out which components are in which folder.

Page specific components

Each template has a number of pages, each page usually having one or more components. Usually the slideshow and gallery pages only have one fullscreen component, while other pages may have more.

Usually every template has at least these pages - Home, Contact, About, Video

Some templates might also feature a News page, a Gallery page, a Slideshow page etc.

All the information found on all the pages is found in the pages folder. This folder contains more folders, one for each page in the template - the Home page is in the pages/home/ folder; the Contact page is in the pages/contact/ folder.

Template pages in general

- all pages in the template have their own folder and their own settings.xml; you can control each page with this XML;

- typically you can change the size of the “page” in the template; you can do this with the <componentWidth/> and <componentHeight/>. This only works for those pages where the component isn’t fullscreen, lik e most Gallery/Slideshow pages;

- you can also change the background settings for the page; to use an image for a background the typical values would be <fillType value="image"/> <backgroundImagevalue = "pages/contact/image.png"/> <backgroundFitting value = "repeat"/>;

- each component, on each page is positioned on the “page” using the components.xml file. Most components are positioned with 3 attributes, position (a 3x3 grid position of the page), paddingH (horizontal position, relative to the position) and the paddingV (vertical position, relative to the position).

The Home page

- the images/text are found in the pages/home folder;

- to change the images on the Home page you need to open the images.xml of each component in the home page folder.

The About page

- the text/images are found in the pages/about folder;

- this page usually uses our HTML Content Scroller, which reads a HTML file, called text.html, usually found in the pages/about/HTMLContentScroller/assets/ folder;

- some other about pages use other components to display the text, like the Spacer component, which also adds text from the CDATA tag, in the text.xml, usually found in the pages/about/Spacer/assets/ ; 

- some about pages can also have another gallery component, like in the example bellow, where on the same page you have a HTML Content Scroller, a Spacer, and the ArcGallery. To modify the images in the ArcGallery you’d need to edit the images.xml in the pages/about/ArcGallery/ folder. 

The Contact page

- to customize the contact page you’d need to change the files in the pages/contact folder;

- to make the Contact Form work you will need to enter your e-mail address (the e-mail where your visitors’ messages will be sent). You need to add your e-mail address in a PHP file, called send_email.php, in the pages/contact/ContactForm/assets/script/ folder;

- since most webservers allow sending e-mails from script, you only need to add your e-mail address like this: 

define('EMAIL_RECIPIENT', 'bob123@gmail.com');

- you only need to complete the rest of the SMTP information in the PHP if your server doesn’t support sending e-mails from script;

- in the example below you can see that the Contact page has 3 components, the Contact Form FX, and 2 Spacer components:

- to change the text on the right, to add images, etc, you’ll need to edit the text.xml in the pages/contact/Spacer/ folder;

- to change the “Leave a message” text, you will need to edit the text.xml in the pages/contact/Spacer2/ folder;

- the text is added in the CDATA tags in the XML fles.

The Video Page

- the videos list is found in the pages/video/YoutubeVimeoPlayer folder;

- you can use Youtube, Vimeo users and channels, instead of individual videos. Please see the Youtube Vimeo Player’s installation instructions for more details;

- the video player doesn’t have a fullscreen mode available - however you should usually be able to resize the player if you want to make it bigger.

- if there are text fields outside the player, like titles, quotes, they are probably added with a Spacer, and you can change them from the text.xml in the pages/video/Spacer/ folder

This section of the FAQ will present miscelaneus information about what you can do and don’t in our templates.

Template DOs

1. You can add almost any of our components to the templtes, but this requires custom work; please request any modifications using this contact form;

2. You can add hyperlinks in the menu, to take you offsite, like your Blog. You can even configure pop-out scripts using the Menu links, to open webpages over the blog;

3. You can add images to all the Spacer components;

4. You can have a multilanguage site - just add the necessary links to the Copyright Spacer, to take you to a different copy/language of the template;

5. Almost all of the customizations and features of the stand-alone components, like the 3D Banner, Banner Navigator, are also available in the template. See the individual component’s pages for details about this;

6. You can manually add pop-out scripts to open larger images to most of the components in the templates.

7 You can use local FLV and MOV files in the video player too.

Template DON’Ts

1. Never delete files from components you don’t want; this will crash the template;

2. You can’t always duplicate pages, as most of our fullscreen, or stretch width pages are hardcoded. You should contact flashxml support to request to duplicate pages;

3. Deleting the MP3 player’s files will cause the template to crash; set the autostart attribute to false, to stop the music;

4. Adding an image like image.jpg in any images.xml and your file is called images.JPG (capital lettering for the extension) will not be found, and cause the template to crash;

5. Flash template’s don’t have links in the propper sense of the word for the pages within; you stay on the same page;

6. Flash in fullscreen disables your keyboard, so you can’t type in the Contact Form in fullscreen; 

7. The Youtube Vimeo Player doesn’t work in fullscreen because of ireconciliable conflicts between the template and the player;

8. The integrated Colorbox feature is disabled in the templates.

This is an example of embedding code using SWFObject for our product 3D Banner FX:

<div id="Div3DBannerFX"></div>
<script type="text/javascript" src="FOLDER/swfobject.js"></script>
<script type="text/javascript">
 var flashvars = {};
 flashvars.settingsXML = "SETTINGSNAME.xml";
 var params = {};
 params.base = "FOLDER";
 params.scale = "noscale";
 params.salign = "tl";
 params.wmode = "transparent";
 params.allowFullScreen = "true";
 params.allowScriptAccess = "always";
 swfobject.embedSWF("FOLDER/3DBannerFX.swf", "Div3DBannerFX", "600", "374", "9.0.0", false, flashvars, params);
</script>

The alternative method of embedding doesn't use JavaScript but HTML tags only. This is an example for our product 3D Banner FX:

<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="600" height="374" id="Flash" align="middle">
<param name="movie" value="FOLDER/3DBannerFX.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="base" value="FOLDER" />
<param name="salign" value= "tl" />
<param name="scale" value="noscale" />
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="flashvars" value="settingsXML=SETTINGSNAME.xml">
<embed src="FOLDER/3DBannerFX.swf" width="600" height="374" name="Flash" align="middle" quality="high" bgcolor="#ffffff" base="FOLDER" salign="tl" scale="noscale" wmode="transparent" allowScriptAccess="always" allowFullScreen="true" flashvars="settingsXML=SETTINGSNAME.xml" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>

To specify your own width and height replace 600 and 374 values with your own in both locations: at the beginning and the end of the embedding code.

Don't forget to replace FOLDER with the location of the folder where the SWF and its assets are located. You can read more about this here.

Also, you have to replace SETTINGSNAME with the name of your settings.xml file. You can find out more about this here.

Another method to embed our product using iframe tag looks like this:

<iframe width="600" height="400" src="http://www.yourwebsite.com/folder/index.html" frameborder="0" scrolling="no"></iframe>

This method practically uses an iframe to display the included index.html file that loads the product.

To make our products scale on browser's zoom function you have to open the FLA file (you need Adobe Flash Professional) that is available only in the paid version of our products and set the stage's size the same as the width and height from the settings.xml file.

For those that don't know how to change the size of the stage follow these steps:

1. Open the FLA file

2. Click anywhere on the white area of the scene

3. Go to Properties panel (Ctrl + F3) and click on the Edit... button next to Size field

4. Set the dimensions you want for width and height and press OK

5. Recompile the file using Control -> Test Movie (Ctrl + Enter) from the main menu.

After that, you need to replace the SWF file downloaded from our website with the new one updated after the recompile action and then clear the cache of your browser. You can learn how to do that here.

The final modification is in the product's embedding code. Search for the following line:

params.scale = "noscale";

and change the noscale value to default like this:

params.scale = "default";

After that our products will scale when the browser's zoom function is used. Note that if you change the product's dimension in the settings.xml file you'll have to repeat the part where you set the stage's size the same as the new ones.

For WordPress or Joomla

If you're using our WordPress or Joomla extensions you have to modify the value of params.scale in the PHP file that represents our extension.

Customizable Grid Gallery FX
Dock Gallery FX
Elite Gallery FX
Flexible Media Gallery FX
Image Scrolling Gallery FX
List Gallery FX
Photo Gallery FX

then go to this page.

For any other component or gallery read the following:

First of all, you'll need a new settings file (e.g. settings2.xml).
Secondly, you'll need a new set of images file (e.g. images2.xml) with the new images you want to use.
In the new settings2.xml file you'll have to specify through the assets element to load images2.xml file.

Note that some products have menu.xml or videos.xml instead of images.xml.

For WordPress Websites

Here is an example how to specify the 3D Banner with the new set of settings files:

[3d-banner-fx settings="settings2.xml"][/3d-banner-fx]

For Joomla Websites

Here is an example how to specify the 3D Banner with the new set of settings files:

{3dbannerfx settings=settings2.xml}{/3dbannerfx}