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

The above code is added in the HEAD section of the website and the following code is added in the BODY section of the website:

<div id="Div3DBannerFX"></div>

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

The code from above is added in the BODY section of the website where you want the product to be displayed.

To specify your own width and height replace 600 and 400 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.

If you don't use folderPath and/or settingsXML flashvars then don't add them at all in the embedding code.

To make our products scale on browser's zoom function you have to open the FLA file 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.

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}

For the purpose of this tutorial we will be using an already created design, the one that is on the first demo of the Image Zoomer.

Step 1 – Understanding the grid

The whole idea behind our skinning system is a specially made grid that maps out the surface of the stage. It is composed of 9 equally large areas, each of them with a width and height equal to ? of the stage’s width and height. Each of these areas is called a cell and is divided into 9 even smaller areas. Take a look at the following picture to get a visual representation.

 

The 9 large areas are named in accordance with their position relative to the stage. For example, the first of these is in the top left corner. The position is Top Left, which we have further abbreviated to TL. The 8th one (counting from left to right, up down) is in the Bottom Center of the stage, therefore BC. As you can see, the first letter represents the line in which the cell is placed (which can be Top, Center or Bottom) and the second one stands for the column in which the cell is situated (and can vary between Left, Center and Right).

As you can see, the same principle applies to the smaller areas.

Step 2 – Placing the elements

Now that we have understood how the grid behind the skin works, you might think that you might want to have more control over the positioning of the elements. If you will open your skin.xml file, you will notice that you have some more attributes when declaring a group of elements. A group of elements usually contains similar buttons, or buttons that you want to always keep together.

A group of buttons

After declaring a group, you must then specify a grid position (via the gridPosition attribute). Please take a look at the following example to better understand how this works.

How to use the gridPosition attribute

With that part completed, you then need to position the group of buttons inside the big cell that you selected previously. This should follow the same approach as before, as the grid acts the same for smaller cells as well. You might also find the following image useful during this process.

How to use the cellPosition attribute

After these 2 attributes, you can select an orientation for that specific group. If the buttons you want to position are “left” and “right”, then the orientation should be “horizontal” (as this is how most people would expect to see these kind of buttons aligned). If you would want to position the “up” and “down” buttons(or in the case of the zoomIn and zoomOut buttons, as seen in the pictures bellow), then orientation should be “vertical” (again, because most people would expect this kind of layout).

Orientation & Spacing attributes

The spacing attribute, as seen above, controls the amount of space between elements of the same group. So, for example, if you set spacing=”15” in the group that controls the left and right buttons, the component would leave a 15 pixel gap between the buttons, as you can see in the picture above.

As for the last two parameters available, paddingH and paddingV control the offset (in pixels) of the group they are defined in. This offset is relative to the gridPosition and cellPosition set previously and can be both negative and positive.

Using the paddingH and paddingH attributes

Types of buttons

You will notice that each button has several states inside. These are usually “out”, “over” and “down”. This means that you can put a different image for each state of the button.
out – the button looks like this when there is no interaction with it
over – starts when the user rolls their mouse over the button and ends when the mouse leaves the button.
down – activated when the user clicks on the mouse

You need to keep in mind that not all the buttons are the same. Some are named “button”, others “holdButton” and there are certain structures like “doubleButton”.

We will go into more detail regarding these types of buttons now.

The button is just that, nothing out of the ordinary.

The 3 states available for a button

A holdButton is a button you can click and hold, and its effect gets multiplied (for example, if you click and hold the “left” button, the image will continually scroll to the left, until the end of the stage).

The principles involved in the functioning of a hold button

A doubleButton is a button that, once clicked, changes to another button completely, with a different functionality. Think of a “play/pause” button. When you click on “play”, a song/movie starts playing and the button changes to “pause”. When you click that, the song/movie pauses – different action from the previous one.

The cycle of states that each double button passes through

That about covers what the Image Zoomer uses in terms of skins.

Internet Explorer

Close all Microsoft Internet Explorer browser windows.

On a computer running Microsoft Windows 7 or Windows Vista operating systems, click the Start button, click Control Panel, and then click Network and Internet.

On a computer running Windows XP, click Start, scroll to Settings, and then click Control Panel.

Note that if the Control Panel window is empty, click View all Control Panel Options in the left section of the window to show all icons.

Click Internet Options.

In the Browsing history section of the General tab, click Delete….  As an alternative, you can get here pressing Ctrl+Shift+Del on your keyboard.

In the Delete Browsing History window, click the following check boxes:

• Preserve Favorites website data
• Temporary Internet Files
• Cookies

Click Delete.

In the Browsing history section of the General tab, click Settings.

Under Check for newer versions of stored pages, select the Every time I visit the webpage radio button.

Click OK to apply your changes.

Click OK to close the Internet Options window.

Mozilla Firefox

On the Tools menu, click Clear Recent History (or press Ctrl+Shift+Del on your keyboard).

In the Time range to clear: dropdown menu, select the Everything default option.

Ensure that the following are checked under Details:

• Cookies
• Cache

Click Clear Now.

Google Chrome

Click the Wrench icon in the upper-right corner of the browser, and then click Options.

In the Options window, click the Under the Hood tab.

Click the Clear browsing data... button under Privacy. As an alternative, you can get here pressing Ctrl+Shift+Del on your keyboard.

In the Clear Browsing Data window, click the Empty the cache check box.

Change the Obliterate the following items from: drop-down list to the beginning of time.

Click the Clear browsing data button.

Apple Safari

On the Edit menu, click Empty Cache…(or press Ctrl+Alt+E on your keyboard). If the menu bar in the browser window is not displaying, press Alt on your keyboard.

In the Are you sure you want to empty the cache? dialog box that opens, click Empty.

Opera

Click on Settings in your Opera menu, located at the top of your browser window. When the drop-down menu appears, click on the Delete Private Data... choice.

In the dialog window labeled Delete private data that will be displayed click on the arrow labeled Detailed Options.

Click the Delete entire cache check box.

Click on the Delete button.

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:

• Accordion FX
• Accordion News Reader FX
• Contact Form FX
• Horizontal PopMenu FX
• Image Slider FX
• MP3 Player FX
• Multilevel Menu FX
• YouTube/Vimeo Player FX

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
• Accordion News Reader FX
• Contact Form FX
• MP3 Player FX
• Photo Wall FX
• Product Viewer FX
• Text Menu FX
• YouTube/Vimeo Player FX

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:

• Contact Form FX
• HTML Content Scroller FX
• MP3 Player FX
• MultiRow Gallery FX
• News Reader FX
• Photo Flipper FX
• Photo Wall FX
• Polaroid Galler FX
• Text Menu FX
• YouTube/Vimeo Player FX