BANNER ROTATOR

WITH AUTO DELAY TIMER

A

DOWNLOAD HERE Author: VF 

USAGE & IMPLEMENTATION: 

CIRCULAR - ELLIPTICAL GALLERY
Implementation is straightforward, you just need to embed the banner.swf into your
html file, set the desired width, height and update the images and data on XML file.

Steps:
1. First prepare your images in the desired size and put them in a folder.
2. Open the data.xml file and update the image names and hyper links as per your
own data. Below is one node of xml file which contains data for one image. Just
repeat the following data for more images:

The yellow area is where you need to enter your own data.

3. Alter the settings in data.xml if needed. You can change the text size, color,
transition effects, buttons and many more through the xml file.

Here are the list of options with individual description:

Parameters Description

If you are directly implementing the banner into an html file, just
leave this value as blank.

bannerWidth="" If you are loading this banner into another flash file, you need to
specify the width and height of the banner. Otherwise the buttons
may tend to be positioned according to the stage size of the main
movie.

bannerHeight="" See the above parameter’s description.

Background color of the banner in hexadecimal values. Always leave

bannerBackgroundColor="" this value as blank but enter the color if the image size is short
enough to show the background area.
 You can make the banner to stop playing after 1 loop or more.
bannerLoopCount=""
Leave it blank if you need infinite loops.

You can mask the entire banner with rounded rectangle. Set corner
radius value to make it rounded. If you want to use custom shape to
bannerCornerRadius=""
mask, just leave the value as blank and create your shape in the fla
as mentioned below in this help page.

buttonsVerticalMargin="3" The vertical spacing between buttons and banner edge.

buttonsHorizontalMargin="3" The horizontal spacing between buttons and banner edge.

TEXT 

textSize="14" The caption text Size in pixels.

Color of the text in hexadecimal values. Example: "FFFFFF"

The default value is blank "". If you set color for individual
textColor=""
words using font tag, leave this value to blank. Otherwise, it
will override individual colors.

Width of the caption text in pixels. If you reduce this value,

below to the width of banner, the caption text will have
textAreaWidth=""
more number of lines and align to left end. Leaving the
value to blank means full size.

textLineSpacing="0" (Vertical) Space between lines.

textLetterSpacing="­0.5" Space between each character.

textMarginLeft="12" Space between the overall caption and left end of the flash.

Space between the overall caption and bottom end of the

textMarginBottom="5"
flash.

You can add color over the blur area to make sure the text is
textBackgroundColor="000000"
more readable. This value should be in hexadecimal.

You have the option to enable / disable the blur effect

textBackgroundBlur="true"
behind the text.

textBackgroundTransparency="0" Transparency of the color that overlays blur area.

TRANSITION 

Five different Transition effects available. Here are the list of

effects with relevant values:
"1" – Move
transitionType="1" "2" – Fade
"3" – Radial fade
"4" – Brush
"5" - Tile

Make this value to if you need to change the transition effect

transitionRandomEffects="no" for each image. But among the 5 transitions effects, only 4
effects are available for this option. The

The fixed time delay between each image display in

transitionDelayTimeFixed="2" seconds.
[Read the below option also as it is related]

Addition to the above delay time, the banner was prepared

to adjust the delay time according to number of words in
the caption. The value 0.5 means it will count 0.5 seconds
for each word.
transitionDelayTimePerWord=".5"
1. If you don’t need this option and just fine with the fixed
delay, just make this value to "0".
2. If you don’t want to add fixed delay, make the value of
transitionDelayTimeFixed into "0". 

Movement speed of the image. Increasing this value will

transitionSpeed="8"
decrease the speed.

transitionBlur="yes" Motion blur while moving. Type no if not preferred.

BUTTONS 
The time clock will show the progress before transition. You
can hide if preferred.
showTimerClock="yes"
Note that the time clock will not display if the autoPlay
option disabled.

showNextButton="yes" To show / hide the next button.

 The default version has no back button to navigate. You can
showBackButton="no"
make this value to yes, if you need.

To permanently remove the number buttons, ( that shows

showNumberButtons="yes" 1,2,3…. )
make this value into "no" 

To show the number buttons only when you rollover the

showNumberButtonsAlways="no"
NEXT button, enter "no" 

To display the number buttons horizontally, make this value

showNumberButtonsHorizontal="no"
into "yes" 

To choose how the numbers buttons display.

showNumberButtonsAscending="yes"
1,2,3,4…or 4,3,2,1

To enable disable the PLAY/PAUSE option on clicking the

showPlayPauseOnTimer="no"
timer clock.

You can align the buttons to either left or right. By changing

alignButtonsLeft="no"
this value.

You can move the text to top or bottom by changing this

alignTextTop="no"
value.

To enable / disable the ability to change the images

autoPlay="yes" automatically. If you make this value into "no", then the
timer clock also will be removed as it is no longer needed.

If your images are not equally sized or not equal to the

banner width and height, you can make it to resize
automatically to fit within the available canvas. The images
imageResizeToFit="no" are always scaled linearly and positions itself center.

Note that the SWF files will not be resized to fit but center
aligned.

To shuffle the image order every time, instead following the

imageRandomizeOrder="no"
order of xml item list.
EMBEDDING FONT:
In the source file package, you can see 2 folders one for embedded font version and another for non
embedded font version. Choose one of which most suitable for you. The embedded text looks
smooth but has lesser options if you add captions in html format. The font embedded with the
source file is ARIAL BOLD. If you like to change the embedded font, open the source FLA file and you
can see a symbol named “Font” in the library. You can change the font and style on its properties.

Here is the file size difference in SWF for embedded font and non embedded font versions:
Embedded: 37kb
Non Embedded: 19kb

APPLYING ROUNDED CORNERS TO THE BANNER:

If you like to make the corner of banner into rounded ones, just set the radius value for the following
parameter in the xml file: bannerCornerRadius="10"

Other than the above parameter you can also use custom shape to mask the banner. To do so, find
the symbol named BannerMaskGraphic in the library and draw your shape there with the same size
as your banner width and height. In this case you need to leave the xml parameter as blank:
bannerCornerRadius=""

ADDING SWF FILES:

You can add SWF files as content instead of image. But you need to keep the first frame of the
content movie without Animations. Also place a transparent rectangle having same width and height
of the banner on the first frame. This is for better performance at the time of transition and loading.
The banner will play swf file once it completely loaded and transition completes.

LOADING / OR DIRECTLY IMPLEMENTING THE BANNER INTO AN ANOTHER FILE:

If you are placing this banner into another movie or loading it into another SWF, you need to set the
width and height for banner in the xml. See the bannerWidth and bannerHeight parameters
explained in the above list.

When you load this banner on an swf multiple times, you may notice that the timer not working
properly. This will happen only if you are loading the banner multiple times repeatedly. This happens
due to multiplication of interval timer used in banner which should be cleared each time you unload
or load. So add the following code before you load or unload the banner:

clearInterval(yourMc.BannerMc.delay);
(Note that in the above line, yourMc should be replaced with your own target movie clip’s instance
name )

-----------------------------X----------------------------