This module is made of 2 main components: a banner rotator and a main text area with scroll bar. You can use this module in a number of ways by either having the rotator with multiple images/swf and multiple main text content, or multiple images and single text content, or even a single rotaor image/swf and single text content....or in fact any combination of both, meaning you could have multiple images/swf in the rotator and only have the main text content on some of those images/swf.
1) General rotator settings
2) General colour settings
3) The banner rotator set-up
4) The main text content
Let's take the example of the SERVICES page, open the services.xml file, at the top in the settings area you will find the following parameters for the rotator:
rotatorImageWidth = "780" //Here you set the width of the image you want, it can be any size but keep in mind different internet users have different screen resolutions so don't go too big.
rotatorImageHeight = "260" //Here you set the height of the image you want, it can be any size but keep in mind different internet users have different screen resolutions so don't go too big.
preloaderColor = "CCFF00" //The color for the preloader/rotation delay movieclip
preloaderAlpha = "0.2" //The transparency for the preloader/rotation delay movieclip
At the top of the xml file in the settings, you will find the following general colour settings:
bgColor = "1B1B1B" //The main color for all backgrounds including the video controls background color and rotator controls background color.
bgAlpha = ".5" //The transparency for all backgrounds including the video controls background color and rotator controls background color.
controlsIconColor = "FFFFFF" //The color for all icons including the video controls background color and rotator controls background color.
controlsIconAlpha = "1" //The transparency for all icons including the video controls background color and rotator controls background color.
controlsBgColor = "1B1B1B" //The color for the icons backgrounds including the video controls background color and rotator controls background color.
controlsBgOverColor = "CCFF00" //The color for the icons backgrounds when over, including the video controls background color and rotator controls background color.
controlsBgAlpha = ".5" //The transparency for the icons backgrounds including the video controls background color and rotator controls background color.
a - Individual settings for each image/swf
The banner rotator supports any image format such as jpg, png or gif, as well as SWF files. Each image/swf is defined in the xml file by the <image> node as follows:
<!-- Begin image here -->
<image>
<path slideShowDelay = "6">images/home/1.jpg</path>
<title bgColour="1b1b1b" bgAlpha=".6" Ypos="10" Xpos="375"><![CDATA[<font color="#CCFF00">LIQUID² - AS3 XML TEMPLATE</font>]]></title>
<description bgColour="21211F" bgAlpha="0" txtWidth="260"><![CDATA[<font face="GeosansLight" color="#ffffff" size="16">Welcome to my new template!</font><br><br><font color="#ffffff">Includes a <b>2 level menu</b>, <b>deep linking</b> and <b>9 reusable modules</b>.<br><br>Each module comes with its own <b>liquid transitions</b> and can be duplicated easily from the xml file.</font>]]></description>
</image>
<!-- End image here -->
You can add as many items as you want, simply delete/duplicate the above node.
Each image/swf has a number of options which you can update as follows:
<path slideShowDelay = "6">images/home/1.jpg</path> // the path to the image or swf, and the delay before the next rotation.
<title bgColour="1b1b1b" bgAlpha=".6" Ypos="10" Xpos="375"><![CDATA[<font color="#CCFF00">LIQUID² - AS3 XML TEMPLATE</font>]]></title> // the text content for the title box, this can be HTML formatted
bgColour="1b1b1b" //The color for the title background
bgAlpha=".6" //The transparency for the title background
Ypos="10" //The vertical position of the title in pixels starting from the top of the image, the description will be set 5 pixels below the title.
Xpos="375" //The horizontal position of the title starting from the left of the image, the description will be set at the same X value as the title.
<description bgColour="21211F" bgAlpha="0" txtWidth="260"><![CDATA[<font face="GeosansLight" color="#ffffff" size="16">Welcome to my new template!</font><br><br><font color="#ffffff">Includes a <b>2 level menu</b>, <b>deep linking</b> and <b>9 reusable modules</b>.<br><br>Each module comes with its own <b>liquid transitions</b> and can be duplicated easily from the xml file.</font>]]></description> // the text content for the description box, this can be HTML formatted. You can leave this empty if you don't want any descirption.
bgColour="21211F" //The color for the description background
bgAlpha="0" //The transparency for the description background
txtWidth="260" //The width for the description text field, the height will be calculated depending on the amount of text.
Within each <image> node you have an inner <text> node as follows:
<text transition = "0"><![CDATA[<font size="24" face="GeosansLight">MOTION FLASH DESIGNS</font><br><br>Developer:<br><a href="http://marketplace.envato.com/user/LGLab">LGLab</a><br><br>This text is <b>HTML formated</b> and imported dynamically from XML. <br><br>You can easlily insert <a href="http://marketplace.envato.com/user/LGLab">external links</a>, <a href="mailto:yourEmail@mail.com">email links</a> but also links to pages of this website such as the <a href="#/staff">staff page</a>, all styled using CSS, embed images and swf etc... <br><br>This text area has scroll bar support with mouse wheel enabled including on Macs, and it will adapt to any screen resolutions.<br><br><img vspace="4" hspace="6" src="images/services/small.jpg"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br><br><ul><li>In pretium leo vitae ipsum.</li><li>Donec sollicitudin.</li><li>Ut euismod erat sit amet leo.</li><li>Donec pellentesque dui a elit.</li></ul><br><br>Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum.<br><br>In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero vel tortor. Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus. In pretium leo vitae ipsum. Ut euismod erat sit amet leo. Mauris at libero. Integer scelerisque imperdiet risus.<br><br>Nam nisi dolor, faucibus non, ultricies sit amet, tempor non, nibh. Morbi ullamcorper ante sit amet nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Donec pellentesque dui a elit. Donec sollicitudin. Donec eu nisl sit amet lectus gravida luctus.]]></text>
Each text content can have a specific transitions when being revealed as highlighted in red above, you can choose from a number of transitions, please refer to the xml file for the list of transitions, and use the numbers corresponding for each transition.
You can leave the text content empty (only delete the actual text content as highlighted in blue above), so that the rotator rotates the image/swf but the main text will remain the one used in the previews rotation node. Any <image> node can have text or no text.