Chameleon Banner

Note 15 April 2010: The preview has stopped working, I’m chasing this up

It’s pretty common nowadays to treat your home page as the equivalent of your business’ shop window. Like a shop window, it’s always difficult to manage the limited space on a home page of any web site and yet promote as much of your web site as possible.

The Chameleon Banner is a great way to provide glimpses of a lot of your site contents without overwhelming the user. As the preview shows, any layout is possible and you can show a lot of images or just a few, and the tooltip is easily customisable too.

Features

• Add unlimited images to the banner
• Easily design any layout you choose
• Automatic generate a stub XML file (uses php) – get set up quickly
• Lots of control over the duration and speed of tweens

Five examples

The preview shows five examples of the Chameleon Banner:

1. Original sample: This banner has 3 image groups set to start at 1, 2 and 4 seconds. The groups have change durations of 10, 7, and 2 seconds, so the ‘chameleon’ effect of this banner is quite random. The tooltips show a title and the alt text.
2. One Group: This banner has 1 group and is laid out in a ‘brick wall style’. The change duration is 10 seconds, and the tooltip just shows the alt text.
3. Slogan: This banner shows how you can add custom graphics and animations to the banner. This banner has three groups that are designed to ‘grow’ out from the central banner. Note that some of the smaller images on this layout do not have tooltips – as the minimum active image size is set to greater than 50 pixels. This is handy way to make smaller images only present for display purposes rather than navigation.
4. Colour/Black & White: Using different styles of image helps to differentiate the groups as this example shows. This banner has two groups, with the small black and white images set to change very quickly and the bigger colour images set to transition more slowly.
5. Small Images: This banner shows that the Chameleon Banner can display a lot of images. The tooltips for this example include a bigger image to demonstrate a typical product information concept.

How it works

The Chameleon Banner lets you design the layout in flash so you can visually preview your layout

• Add as many ChamelonImage Symbols as you like to the stage.
• Position and size the ChamelonImage Symbols
• Group the symbols according to the images you want them to use
• Place your images in separate group folders (matching the names of the ChamelonImage groups)
• Run the automatic XML file creation script
• Customise the XML file with your image descriptions
• Tweak the animation duration and speed settings
• Upload to your web site, and attract your users into your content