XML Loaded Banner Rotator in Flash CS4

By John Kim | November 13th, 2009

0
Response

I just recently finished a project which involved me developing an XML loaded Banner Rotator and I thought I’d share the process with you folks. The key features of this XML Loaded Banner Rotator is that you can add as many images as you would need, and each image can hold a hyperlink. Bloomingdales has a similar rotating banner, and so I modeled mine after what they had. If you lovely people would like to view a demo of this XML Loaded Banner Rotator, then please click here, or you can take a hike, because hiking is very good exercise.

1. Create a Flash File (ActionScript 2.0) Document.
Save the file and call it “banner”, and create a folder in the same directory called images.
Then save the 2 sample images into that images folder

2. Press Ctrl+J and set your dimensions to 321×65

3. create three layers which are 1 frame each called actions,link, and banner.
banner - holds the image banner animation
link - contains button that will carry your hyperlink
actions - holds the main actionscript 2.0 code

4. create a new symbol

5. name this symbol “banner_animation” and set is as a movie clip

6. in the banner_animation movie clip, set up two layers called action, and image. Set up the
layers as show in the diagram.

7. In your new symbol movie clip press Ctrl+R and import the banner1.gif to the “image” layer.
in the properties for this image set its x and y coordinates to 0.

8. convert banner1.gif to a movie clip symbol called “imageMov”, then create a motion tween on the image layer.

9. Select the Motion Editor Tab and add a Color Effect->Alpha.
In the first frame set the alpha to 0% on the 15th frame set the alpha to 100%

10. Add an Ease “Stop and Start (Fast)”

11. In Basic Motion set the Y-coordinate to -100 on frame 1, and set the y-coordinate to 0 on frame 10 then set the ease on the y-coordinate to 2-stop and start

12. Now on frame 18 on the actions layer place the code.


stop();

13. The timeline of your banner_animation Movie clip should look like the diagram below.

14. click the imageMov symbol on your stage and name the instance “imgLoader”

15. Now go to the library panel, double click on the imageMov symbol, and delete the banner1.gif image from layer 1. The reason the banner1.gif is being deleted is because the imageMov is just a place holder for our dynamically loaded images.

16. Go back to the main stage and place the “banner_animation” into the first frame of the banner layer, and place the coordinates as 0,0. All you should see on the stage is a cross hair and a circle. name the banner_animation movie clip as bannerMov.

17. Open up Notepad to create the xml file and save the xml file as “values.xml” in the same directory as your flash file. Copy the syntax below into your values.xml file.

18. Add a rectangle with the rectangle tool on frame 1 of the link layer that fully covers the stage. Then convert this rectangle into a button symbol named linkBtn

19. double click the linkBtn Symbol and press shift+f9 to bring up the color options. Select the rectangle and set it’s alpha value to 0% to make it transparent.

20. Return back to the stage, select the button you just created by clicking it with the mouse. You will now place an action code on this button.


on(release) {
     getURL(url);
}

21. Now lock both the link and banner layer to make sure you don’t make any unwanted changes.

22. The next section is purely actionscript so copy the code below into the first frame of your actions layer.


bannerMov.gotoAndStop(1);

//declare global variables
var url = '';
var speed = 100;
var imageArr = new Array();
var imageLoaded = new Array();

//parse through the xml to retrieve banner images and their links
var my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
	//if the xml was loaded
	if (success) {
		//parse xml values
		var rootXML = my_xml.firstChild;
		var banners = rootXML.childNodes;
		for (var i = 0; i < banners.length; i++) {
			//store the values in an array
			curBanner = banners[i];
			imageArr[i] = curBanner.firstChild.firstChild+'|'+curBanner.firstChild.nextSibling.firstChild;

			//load each image into a dynamically created movie clip
			var row = bannerMov.imgLoader.createEmptyMovieClip('img'+i,bannerMov.imgLoader.getNextHighestDepth());
			imageLoaded.push(row);
			loadMovie(curBanner.firstChild.firstChild,imageLoaded[i]);
		}

		//set all image visibility to false
		for(var i=0; i < imageLoaded.length; i++)
		{
			imageLoaded[i]._x = 1000;
		}

		var count = 0;
		var index = 0;
		var val;
		var len = imageArr.length;
		_root.onEnterFrame = function()
		{
			//set value
			if(dataLoaded(imageLoaded[index%len]))
			{
				if((count%speed)==0)
				{
					val = imageArr[index%len].split('|');
					//loadMovie(val[0],"bannerMov.imgLoader");
					imageLoaded[(index-1)%len]._x = 1000;
					imageLoaded[index%len]._x = 0;
					url = val[1];
					index++;
					bannerMov.gotoAndPlay(1);
				}
				count++;
			}
		}
	}
};
my_xml.load("values.xml");

/*=========================FUNCTION START=========================*/

function dataLoaded(image)
{
	if (image.getBytesLoaded() == image.getBytesTotal() &&
        image.getBytesTotal()!=0)
		return true;
	else
		return false;
}

/*==========================FUNCTION END==========================*/

23. Now press Ctrl+Enter, and you should see a nice xml loaded banner.

Use this tutorial to develop your own versions of a xml loaded banner rotator. You can download the full project right here. And if you have any more flash tutorials you’d love to share please feel free to fill out a comment, I’m always open to new ideas. Now take a hike, to improve your cardiovascular health. Good Day Folks