How To Create a Dynamic XML Flash Banner Rotator

in Tutorials | 1 Comment

In this tutorial we will create a dynamic XML Flash banner rotator using The Banner Rotator Complete. The Banner Rotator Complete is one of the most extensive banner rotators you’ll find. It comes packed with 37 customizable parameters. All parameters are controlled through a XML file.

Introduction

This tutorial uses the Flash Framer Banner Rotator Complete file. The Banner Rotator Complete is an ActionScript 3.0 file for Adobe Flash that makes it easy to create a banner rotator in a few easy steps. Our developers have done the hard work so you don’t have too.

Step 1

Once you have downloaded the Banner Rotator Complete. Unzip the BannerRotatorComplete.zip file.

You’ll notice you have a Flash file named BannerRotatorComplete.fla. This file contains all the source code. You will only need to edit the Flash(.fla) file if you want a different size banner rotator.

You’ll also notices an IMAGES folder that contains all the images used in the banner rotator.

Finally you’ll notice a XML folder that contains the config.xml file. This is the file you will use to define your images and parameters.

Step 2

The easiest way to add your images to the Banner Rotator Complete is to save your images in the IMAGES folder and save over the provided images giving your images the same names as the provides ones.

You can also deleted the provided images and add your images to the IMAGES folder with any name you want. We will later define your images in the XML file.

Step 3

Open the provided config.xml file with Adobe Dreamweaver or a simple text editor of your choice.

At the top of the XML file you’ll notice all the parameters between the <parameters></parameters> tags. You can modify the parameters to your liking. Every thing can be modified in the XML file except the embedded fonts and the stage size.

You can read how to change the default fonts in the provided Banner Rotator Complete user manual. You can download the Banner Rotator Completer user manual here.

To resize the stage open the provided BannerRotatorComplete.fla file with Adobe Flash CS3 or CS4. Change the stage size to the size you want and then publish the file. You’ll then want to set the imageWidth and imageHeight parameters in the XML file to match the stage size.

To add images modify the the provided XML file with your information. To add more images copy everything from the opening <image> tag to the closing </image>. Paste this text before the closing </images> tag. Edit the tags with the appropriate information. Repeat this step for all additional images.

Completed Gallery

Below is the completed Banner Rotator Complete.

Conclusion

For more detail read through the full documentation. The Banner Rotator Complete comes with all source code so if you have ActionScript 3.0 knowledge you can edit and modify the code to your liking.

We would love to see your work and showcase it on our site.
Just email us at support@flashframer.com with a link to your Banner Rotator Complete gallery.

Comments

Add a Comment
  1. Jens Says:

    Hey, is it possible to change the image size for every image? If every image in the gallery has the same height but different width (e.g vertical photos) can i use the in the same banner? is it necessary to copy a black left and right border to the images to fit in the canvas?

    Thank you for your help!

Leave a Reply

© 2010 Altair Innovative, LLC
Entries RSS Comments RSS Log in