This Module can be used in 3 different ways, either the video player on its own (REEL), or the image rotator on its own (PROJECTS), or both at the same time (HOME).
1) How do I set this module so it only plays the video, the rotator or both?
2) General colour settings
3) The video player
4) The banner rotator
Let's take the example of the HOME page, in the xml folder, open the home.xml in your favourite text editor. At the top in the settings, you will find the 2 following parameters:
playIntro = "true" //Set this to "true" if you want the video player to launch first, set it to "false" if you only want the image rotator as in the PROJECTS page example.
playRotator = "true" //Set this to "true" if you want the image rotator to launch , set it to "false" if you only want the video player as in the REEL page example.
If both are set to true, the video player will launch first, and the rotator will launch once the video is finished or if the user clicks on the "SKIP INTRO" button. The "SKIP INTRO" button will not show if the "playRotator" parameter is set to false.
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 - The video controls (Note: Vimeo videos will use their own controls).
You can choose whether or not to show the video controls by updating the following parameter:
showControls="true" //Set it to false to not show the controls.
You can adjust the colors for the video controls as follows:
videoControlsLoadBarColor = "CCFF00" //The color for the bar used to display the current amount of video that is downloaded.
videoControlsLoadBarAlpha = ".2" //The transparency for the bar used to display the current amount of video that is downloaded from 0 to 1
videoControlsProgressBarColor = "CCFF00" //The color for the bar used to display the current amount of video played so far.
videoControlsProgressBarAlpha = ".8" //The transparency for the bar used to display the current amount of video played so far.
volumeSlideBarColor = "CCFF00" //The color of the slide bar for the volume controls
volumeSlideBarAlpha = ".2" //The transparency of the slide bar for the volume controls
volumeTooltipColor = "CCFF00" //The color of the tooltip for the volume controls
volumeTooltipAlpha = ".5" //The transparency of the tooltip for the volume controls
b - Skip intro button
You can change the text used in the skip intro button in the following parameter:
skipIntroText = "SKIP INTRO"
c - Video formats
The video player supports FLV format, as well as all H.264 encoded video formats such as MP4 and MOV. It also supports YouTube videos, simply update the following parameter with the path to your video:
videoPath= "videos/pieces.flv"
For YouTube and Vimeo videos, use the video ID instead as follows:
videoPath= "Rs_wKkXCwDw"
d - Video settings
You can find various settings for the video at the top of the xml file as follows:
videoType = "youtube" //You can choose between "video", "youtube" or "vimeo"
vimeoVideoWidth = "550" //Set the width for vimeo videos only
vimeoAutoPlay = "true" //Vimeo videos autoplay: true or false
videoBufferTime = "5" //Video buffer time in seconds
videoHeight="350" //The default video height you want for the video. For FLV/H.264 videos, the width will be calculated depending on the original video ratio to avoid distortions. For youtube video you can choose the video ratio, see below.
videoVolume=".5"//Default video volume
youTubeVideoAspectRatio = "5:3" //The video ratio for the youtube video
youTubeVideoAspectQuality = "hd720" //The quality level for the youtube video, including: "small", "medium", "large", "hd720", "hd1080", "highres" and "default"
a - The main settings
You will find the main settings for the banner rotator at the top of the xml file as follows:
playRotator="true" //Set this to true if you want the rotator to show.
rotatorImageWidth = "700" //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 = "350" //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
b - Individual settings for each image/swf
The banner rotator supporst 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.