Build a Smooth Hot Products List with the Caurina Tweener Class

In this, his first tut at Flashtuts+, Yanko takes you through building a dynamic 'Hot Products' list using old favourites ActionScript 3.0 and XML. He also smoothes things out by utilizing the Caurina Tweener class. Enjoy..

Step 1: File Structure

We'll begin by taking a look at the file structure of our project. The folder "caurina" is the Tweener class folder. You can download tweener from here:Tweener. In the folder "img" we'll store our images that will be used in the application.
The images in my case will have dimensions 60px wide and 55px high.

Step 2: XML

Let`s create the XML file. Open your text editor and write:

<?xml version="1.0" encoding="utf-8"?>
<items>
<item title="Apple" price="$10" img="img/apple.jpg" link="http://www.google.com/"/>
<item title="Orange" price="$30" img="img/orange.jpg" link="http://cg.tutsplus.com/"/>
<item title="Lemon" price="$5" img="img/lemon.jpg" link="http://ae.tutsplus.com/"/>
<item title="Banana" price="$100" img="img/banana.jpg" link="http://audio.tutsplus.com/"/>
<item title="Water melon" price="$33" img="img/water_melon.jpg" link="http://vector.tutsplus.com/"/>
<item title="Lime" price="$21" img="img/lime.jpg" link="http://net.tutsplus.com/"/>
<item title="Pinapple" price="$20" img="img/pinapple.jpg" link="http://psd.tutsplus.com/"/>
<item title="Strawberry " price="$6" img="img/strawberry.jpg" link="http://tutsplus.com/"/>
<item title="Grapes " price="$15" img="img/grapes.jpg" link="http://flash.tutsplus.com/"/>
</items>

Save it as "data.xml" in the "project" folder.

Step 3: The Idea

The idea is to pass parameters to the main function "showData". These parameters are "loopMin" and "loopMax" (see the code) values for a for() loop. Then we'll filter the results with an if() statement and show them.

Step 4: Starting

Create a new Flash file (ActionScript 3).

Set the stage size to 350x350px

Step 5: Background

With the Rectangle tool (R) draw a shape with dimensions 350x350px, type linear and colors #d3d3d3,#f1f1f1. Use the Gradient transform tool (F) to adjust the gradient.

Click on the shape then open align window and make sure that the "To stage" button is enabled. Align your shape vertically and horizontally.

Create a new layer, then with the rectangle tool draw a shape 350x40px with color #333333 and align it to the bottom.

Now select both shapes and press F8 or Modify > Convert to symbol, set type to movie clip and name it "main".

Step 6: Adding Buttons

Double-click on the movie clip to open it then rename Layer 1 to "background" and lock it. Create a new layer and name it "btns". Select the Oval tool (O) then hold shift and drag a circle with stroke color:#0098FF and fill color:#FFFFFF dimensions 20X20px. Click on the stroke and change the stroke height to 3.

Select your shape and press F8 to convert it to symbol. Choose type "Button" and name it "btn".

Double-click on the Button then right-click on the "Over" frame. Select Insert Keyframe.

Select fill color and change it to #d3d3d3.

Insert Keyframe on the Down frame and change the fill color to #999999. Return to "main" movie clip and select the button. Change its instance name to "btn1". Then drag the button to the bottom, drag to the right whilst holding "Alt" and release to create a second button. Change the instance name to "btn2".

Repeat the procedure one more time to add a third button to stage and change its instance name to "btn3". Open the Align window and disable "To stage" button. Select the three buttons and align them horizontally and verticaly. Enable "To stage" once again and align them vertically.

Step 7: Items

Create a new layer and name it "items". Draw a rectangle on it of 320x90px color: type:linear #D3D3D3,#BBBBBB. Again, use the gradient transform tool to adjust the gradient. Select the shape and align it vertically to the stage. Press F8, type:Movie Clip and name it "item" - select top middle as the registration point.

Double-click on the movie clip item. Them rename "layer 1" to "background". Create a new layer and name it "txt". Select the text tool(T) and set the text type to Dynamic Text. Then draw a text field, setting the instance name to "txt". Type some text and set these properties:

Create new layer and name it "price". With the text tool draw another text field and set its instance name to "price". Set the text color to :#0099FF.

Now we're gonna make a new button..

Create a new layer and name it "btn_more". Now draw a shape with the rectangle tool of 60x20px with color:#666666. Select it and press F8. Choose type:Button and assign it a name of "more". Also, change its instance name to "more". Open the button and add a new layer, call it text. Select the text tool and use it to draw a text field, type:static text. Enter the text "more" into the field, color:#FFFFFF;size:12;format:align center;.

Insert keyframes in the Over and Down frames, and change color as you like. I use: over:#999999; down:#333333;

Return to the main movie clip, select the item and change its instance name to item1. Hold the Alt key, drag the item down to add a copy to stage. Name the second item instance name to "item2". Add another copy and change the instance name to "item3". Align the items and you should have something like this:

Step 8: Mask

Now we'll make a mask for the items. Make a new layer, name it "mask" and on it draw a rectangle 350x310px.

Right-click on the mask layer, then select mask:

Make new layer, name it "actions" and paste the code that is in the following step.

Step 9: Actionscript

Take a look at the full code:

//import Tweener
import caurina.transitions.*;
//<vars>

//<xml>
var xmlPath:String="data.xml";//holds link to xml file
var data_xml:XML;//XML Object
var data_Req:URLRequest=new URLRequest(xmlPath);//URL Request
var data_Loader:URLLoader = new URLLoader();//Loader
var xml_length:Number;//xml length
//</xml>

//<timer>
var time:Number=5000;//5000 = 5 seconds
var timer:Timer=new Timer(time);//timer
//</timer>

//<items>
var imgPath:String;//image path for first item
var imgPath2:String;//image path for second item
var imgPath3:String;//image path for third item
var item1Y:Number=item1.y;//item 1 y value
var item2Y:Number=item2.y;//item 2 y value
var item3Y:Number=item3.y;//item 3 y value
//</items>

//<other>
var currentBtn:Number=1;//wich btn is pressed
var min:Number;//min value used in function hideNshow()
var max:Number;//max value used in function hideNshow()
//</other>

//</vars>
//<functions>----------------------------------------------------
function xmlLoaded(event:Event):void {//xml Loaded function
	data_xml=new XML(data_Loader.data);//get data prom XML file
	xml_length=data_xml.item.length();//xml length 
	min=xml_length-6;//set min value to second result
	max=xml_length-2;//set max velue to second resuld
	function showData(loopMin:Number,loopMax:Number) {//Main Function

		var i:Number;//var for for loop
		var loopMaxResult=loopMax-2;//var for third result
		var loopSecondResult=loopMax-3;//var for second result

		for (i=loopMin; i<loopMax; i++) {//for loop
			if (i==loopMin) {//first result item 1

				fData(item1,i);//call fData function to fill item 1
				//<load the image>
				imgPath=data_xml.item[i].@img;//get img url from xml
				var imgRequest:URLRequest=new URLRequest(imgPath);//URL request
				var imgLoader:Loader=new Loader();//image Loader
				imgLoader.load(imgRequest);//load the image
				item1.addChild(imgLoader);//add first image to item 1
				imgLoader.x=-150;//image x value
				imgLoader.y=15;//image y value
				//</load image>

			}//end if
			if (i==loopSecondResult) {//second result

				fData(item2,i);//call fData function to fill item 2
				//<load the image>
				imgPath2=data_xml.item[i].@img;//get img url from xml
				var imgRequest2:URLRequest=new URLRequest(imgPath2);//URL request
				var imgLoader2:Loader=new Loader();//image Loader
				imgLoader2.load(imgRequest2);//load the image
				item2.addChild(imgLoader2);//add first image to item 2
				imgLoader2.x=-150;//image x value
				imgLoader2.y=15;//image y value
				//</load image>

			}//end if
			if (i==loopMaxResult) {//third result

				fData(item3,i);//call fData function to fill item 3
				//<load the image>
				imgPath3=data_xml.item[i].@img;//get img url from xml
				var imgRequest3:URLRequest=new URLRequest(imgPath3);//URL request
				var imgLoader3:Loader=new Loader();//image Loader
				imgLoader3.load(imgRequest3);//load the image
				item3.addChild(imgLoader3);//add first image to item 3
				imgLoader3.x=-150;//image x value
				imgLoader3.y=15;//image y value
				//</load image>


			}//end if

		}// end for
		function fData(item:MovieClip,iValue:int) {//function that fill data into items
			var moreURL:String;//url for button more

			item.txt.text=data_xml.item[iValue].@title;//fill item title
			item.price.text=data_xml.item[iValue].@price;//fill item price
			moreURL=data_xml.item[iValue].@link;//item link
			item.more.addEventListener(MouseEvent.CLICK, gotoURL);//event listener for more btn
			function gotoURL(e:MouseEvent):void {//click event function
				var myURL:URLRequest=new URLRequest(moreURL);//URL request
				navigateToURL(myURL);//go to item link 


			}//end function gotoURL

			// function for show N hide items
			function hideNshow(effTime:Number,effTransition:String,iMin:Number,iMax:Number) {
				//<hide items>
				timer.stop();//stop the timer
				Tweener.addTween(item3, {y:330,alpha:0, time:effTime, transition:effTransition});//hide item 3
				Tweener.addTween(item2, {y:247,alpha:0, time:effTime,delay:0.3, transition:effTransition});//hide item 2
				Tweener.addTween(item1, {y:163,alpha:0,time:effTime, delay:0.6,transition:effTransition,onComplete:Show});//hide item 1,
				//when done call function Show()
				//</hide items>
				function Show() {//show items 
					//<show items>
					currentBtn+=1;//add 1 to current btn value
					if (currentBtn==4) {//if currentBtn value is equal to 4 set value to 1 because we have only 3 btns
						currentBtn=1;//set it to 1
					}//end if

					item1.removeChild(imgLoader);//remove image from item 1
					item2.removeChild(imgLoader2);//remove image from item 2
					item3.removeChild(imgLoader3);//remove image from item 3

					showData(iMin,iMax);//call function showData with parameters iMin and iMax (values of  min and max vars)

					min-=3;//decrease the min value to show next 3 results from xml
					max-=3;//decrease the max value to show next 3 results from xml
					if (max==xml_length-8) {//if max value 
						min=xml_length-3;//set min value to show first result
						max=xml_length+1;//set max value to show first result
					}//end if

					Tweener.addTween(item3, {y:item3Y,alpha:1, time:2,delay:0.6, transition:"easeOutExpo"});//show item3
					Tweener.addTween(item2, {y:item2Y,alpha:1, time:2,delay:0.3, transition:"easeOutExpo"});//show item2
					Tweener.addTween(item1, {y:item1Y,alpha:1, time:2, transition:"easeOutExpo"});//show item1
					timer.start();
					//</show items>
				}//end function Show
			}//end function hideNshow
			function timerEvent() {//function for timer event
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
			}
			//btn 1 function
			function btn1Clicked(e:MouseEvent) {
				min=xml_length-3;//set min value
				max=xml_length+1;//set max value
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
				currentBtn=0;//set surrent Btn
				btnControl(1);//call function btnControl
			}
			//btn 2 function
			function btn2Clicked(e:MouseEvent) {
				min=xml_length-6;
				max=xml_length-2;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=1;
				btnControl(2);
			}
			//btn 3 function
			function btn3Clicked(e:MouseEvent) {
				min=xml_length-9;
				max=xml_length-5;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=2;
				btnControl(3);

			}
			function btnControl(btnNumber:Number) {
				//some case switch......
				switch (btnNumber) {
					case 1 ://when btn 1 is active
						btn1.alpha=0.5;//set alpha
						btn1.mouseEnabled=false;//disable button
						Tweener.addTween(btn1, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 2 ://when btn 2 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=0.5;//set alpha
						btn2.mouseEnabled=false;//disable button
						Tweener.addTween(btn2, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 3 ://when btn 3 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=0.5;//set alpha
						btn3.mouseEnabled=false;//disable button
						Tweener.addTween(btn3, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						break;

				}//end Switch
			}//end function btnControl
			//<event listeners>
			//timer
			timer.addEventListener(TimerEvent.TIMER, timerEvent);
			timer.start();
			//buttons
			btn1.addEventListener(MouseEvent.CLICK, btn1Clicked);//Listens for btn1 click and call function
			btn2.addEventListener(MouseEvent.CLICK, btn2Clicked);//Listens for btn2 click and call function
			btn3.addEventListener(MouseEvent.CLICK, btn3Clicked);//Listens for btn3 click and call function
			//</event listeners>
			//show wich btns is active
			if (currentBtn==1) {
				btnControl(1);//call btnControl function
			} else if (currentBtn==2) {
				btnControl(2);//call btnControl function
			} else if (currentBtn==3) {
				btnControl(3);
			}//end if
		}//end function fData



	}//end function ShowData
	showData(xml_length-3,xml_length+1);//show First Result


}
//end xml Loaded function
//</functions>---------------------------------------------------

//<call functions>
data_Loader.load(data_Req);
data_Loader.addEventListener(Event.COMPLETE, xmlLoaded);
//</call functions>

Step 10: Vars

//import Tweener
import caurina.transitions.*;
//<vars>

//<xml>
var xmlPath:String="data.xml";//holds link to xml file
var data_xml:XML;//XML Object
var data_Req:URLRequest=new URLRequest(xmlPath);//URL Request
var data_Loader:URLLoader = new URLLoader();//Loader
var xml_length:Number;//xml length
//</xml>

//<timer>
var time:Number=5000;//5000 = 5 seconds
var timer:Timer=new Timer(time);//timer
//</timer>

//<items>
var imgPath:String;//image path for first item
var imgPath2:String;//image path for second item
var imgPath3:String;//image path for third item
var item1Y:Number=item1.y;//item 1 y value
var item2Y:Number=item2.y;//item 2 y value
var item3Y:Number=item3.y;//item 3 y value
//</items>

//<other>
var currentBtn:Number=1;//wich btn is pressed
var min:Number;//min value used in function hideNshow()
var max:Number;//max value used in function hideNshow()
//</other>

//</vars>

Step 11: xmlLoaded

function xmlLoaded(event:Event):void {//xml Loaded function
	data_xml=new XML(data_Loader.data);//get data prom XML file
	xml_length=data_xml.item.length();//xml length 
	min=xml_length-6;//set min value to second result
	max=xml_length-2;//set max velue to second resuld

When the xml file is loaded, an event listener calls the xmlLoaded function.

Step 12: showData

function showData(loopMin:Number,loopMax:Number) {//Main Function

		var i:Number;//var for for loop
		var loopMaxResult=loopMax-2;//var for third result
		var loopSecondResult=loopMax-3;//var for second result
        for (i=loopMin; i<loopMax; i++) {//for loop
			if (i==loopMin) {//first result item 1

				fData(item1,i);//call fData function to fill item 1
				//<load the image>
				imgPath=data_xml.item[i].@img;//get img url from xml
				var imgRequest:URLRequest=new URLRequest(imgPath);//URL request
				var imgLoader:Loader=new Loader();//image Loader
				imgLoader.load(imgRequest);//load the image
				item1.addChild(imgLoader);//add first image to item 1
				imgLoader.x=-150;//image x value
				imgLoader.y=15;//image y value
				//</load image>

			}//end if
			if (i==loopSecondResult) {//second result

				fData(item2,i);//call fData function to fill item 2
				//<load the image>
				imgPath2=data_xml.item[i].@img;//get img url from xml
				var imgRequest2:URLRequest=new URLRequest(imgPath2);//URL request
				var imgLoader2:Loader=new Loader();//image Loader
				imgLoader2.load(imgRequest2);//load the image
				item2.addChild(imgLoader2);//add first image to item 2
				imgLoader2.x=-150;//image x value
				imgLoader2.y=15;//image y value
				//</load image>

			}//end if
			if (i==loopMaxResult) {//third result

				fData(item3,i);//call fData function to fill item 3
				//<load the image>
				imgPath3=data_xml.item[i].@img;//get img url from xml
				var imgRequest3:URLRequest=new URLRequest(imgPath3);//URL request
				var imgLoader3:Loader=new Loader();//image Loader
				imgLoader3.load(imgRequest3);//load the image
				item3.addChild(imgLoader3);//add first image to item 3
				imgLoader3.x=-150;//image x value
				imgLoader3.y=15;//image y value
				//</load image>


			}//end if

		}// end for

The function "showData" passes two parameters "loopMin" and "loopMax" these are the values for the for() loop. "loopMaxResult" and "loopSecondResult" we use in an if() statement to separate three results. If we have an array with 3 elements, the first element will be with key [0] and the last with key[2](0,1,2). To loop through the array with for() our loopMin value must be=0 and our loopMax=4. To know in which item we need to put data we use if (i==loopMin) this will display the first result in the first item, if (i==loopSecondResult) displays the second result and if (i==loopMaxResult) the third result.

Step 13: Function fData

function fData(item:MovieClip,iValue:int) {//function that fill data into items
			var moreURL:String;//url for button more

			item.txt.text=data_xml.item[iValue].@title;//fill item title
			item.price.text=data_xml.item[iValue].@price;//fill item price
			moreURL=data_xml.item[iValue].@link;//item link
			item.more.addEventListener(MouseEvent.CLICK, gotoURL);//event listener for more btn
			function gotoURL(e:MouseEvent):void {//click event function
				var myURL:URLRequest=new URLRequest(moreURL);//URL request
				navigateToURL(myURL);//go to item link 


			}//end function gotoURL

Function fData passes two parameters. One is the movie clip instance name and the second is i value. Here we add data from the xml document to our movie clips and also make the button "more" open links from the xml.

Step 14: hideNshow

// function for show N hide items
			function hideNshow(effTime:Number,effTransition:String,iMin:Number,iMax:Number) {
				//<hide items>
				timer.stop();//stop the timer
				Tweener.addTween(item3, {y:330,alpha:0, time:effTime, transition:effTransition});//hide item 3
				Tweener.addTween(item2, {y:247,alpha:0, time:effTime,delay:0.3, transition:effTransition});//hide item 2
				Tweener.addTween(item1, {y:163,alpha:0,time:effTime, delay:0.6,transition:effTransition,onComplete:Show});//hide item 1,
				//when done call function Show()
				//</hide items>
				function Show() {//show items 
					//<show items>
					currentBtn+=1;//add 1 to current btn value
					if (currentBtn==4) {//if currentBtn value is equal to 4 set value to 1 because we have only 3 btns
						currentBtn=1;//set it to 1
					}//end if

					item1.removeChild(imgLoader);//remove image from item 1
					item2.removeChild(imgLoader2);//remove image from item 2
					item3.removeChild(imgLoader3);//remove image from item 3

					showData(iMin,iMax);//call function showData with parameters iMin and iMax (values of  min and max vars)

					min-=3;//decrease the min value to show next 3 results from xml
					max-=3;//decrease the max value to show next 3 results from xml
					if (max==xml_length-8) {//if max value 
						min=xml_length-3;//set min value to show first result
						max=xml_length+1;//set max value to show first result
					}//end if

					Tweener.addTween(item3, {y:item3Y,alpha:1, time:2,delay:0.6, transition:"easeOutExpo"});//show item3
					Tweener.addTween(item2, {y:item2Y,alpha:1, time:2,delay:0.3, transition:"easeOutExpo"});//show item2
					Tweener.addTween(item1, {y:item1Y,alpha:1, time:2, transition:"easeOutExpo"});//show item1
					timer.start();
					//</show items>
				}//end function Show
			}//end function hideNshow

Function hideNshow passes 4 parameters.

effTime - time in seconds that is used in tweener animation
effeffTransition - type of tweener transition
iMin - var min value
iMax - var max value

When item1 animation is completed tweener calls the function "Show" (which brings items back but removes images from each one) and runs the "showData" function to fill them with the next results from our xml file. Additionally, the value of currentBtn is increased by one. Lastly, the timer is started.

Step 15: timeEvent

function timerEvent() {//function for timer event
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
			}

This function is called when the timer count down 5 seconds.

Step 16: Buttons functions

//btn 1 function
			function btn1Clicked(e:MouseEvent) {
				min=xml_length-3;//set min value
				max=xml_length+1;//set max value
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow
				currentBtn=0;//set surrent Btn
				btnControl(1);//call function btnControl
			}
			//btn 2 function
			function btn2Clicked(e:MouseEvent) {
				min=xml_length-6;
				max=xml_length-2;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=1;
				btnControl(2);
			}
			//btn 3 function
			function btn3Clicked(e:MouseEvent) {
				min=xml_length-9;
				max=xml_length-5;
				hideNshow(2,"easeInOutQuart",min,max);
				currentBtn=2;
				btnControl(3);

			}

These are the functions that event listeners for buttons call.

Step 17: btnControl function

			function btnControl(btnNumber:Number) {
				//some case switch......
				switch (btnNumber) {
					case 1 ://when btn 1 is active
						btn1.alpha=0.5;//set alpha
						btn1.mouseEnabled=false;//disable button
						Tweener.addTween(btn1, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 2 ://when btn 2 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=0.5;//set alpha
						btn2.mouseEnabled=false;//disable button
						Tweener.addTween(btn2, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=1;//set alpha
						btn3.mouseEnabled=true;//enable btn
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						break;
					case 3 ://when btn 3 is active
						btn1.alpha=1;//set alpha
						btn1.mouseEnabled=true;//enable btn
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn2.alpha=1;//set alpha
						btn2.mouseEnabled=true;//enable btn
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height
						btn3.alpha=0.5;//set alpha
						btn3.mouseEnabled=false;//disable button
						Tweener.addTween(btn3, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height
						break;

				}//end Switch
			}//end function btnControl

btnControl passes one parameter "btnNumber" which is used in a switch statement to change the properties of buttons when they're clicked or active.

Step 18: Event Listeners

            //<event listeners>
			//timer
			timer.addEventListener(TimerEvent.TIMER, timerEvent);
			timer.start();
			//buttons
			btn1.addEventListener(MouseEvent.CLICK, btn1Clicked);//Listens for btn1 click and call function
			btn2.addEventListener(MouseEvent.CLICK, btn2Clicked);//Listens for btn2 click and call function
			btn3.addEventListener(MouseEvent.CLICK, btn3Clicked);//Listens for btn3 click and call function
			//</event listeners>

Step 19: Which Button is Active?

//show which button is active
			if (currentBtn==1) {
				btnControl(1);//call btnControl function
			} else if (currentBtn==2) {
				btnControl(2);//call btnControl function
			} else if (currentBtn==3) {
				btnControl(3);
			}//end if

We use three if() statements to see which button is currently active.

Step 20: Call functions

}//end function fData



	}//end function ShowData
	showData(xml_length-3,xml_length+1);//show First Result


}
//end xml Loaded function
//</functions>---------------------------------------------------

//<call functions>
data_Loader.load(data_Req);
data_Loader.addEventListener(Event.COMPLETE, xmlLoaded);
//</call functions>

After end of function "ShowData" we run it with parameters (xml_length-3,xml_length+1) to see the first results when we run the application. We add event listener to data_loader so when the xml file is loaded and ready to use we call the "xmlLoaded" function.

Conclusion

You can modify the app as you like, change transition types, timer seconds or for example make it to show recent posts, news, tweets etc. I hope you enjoyed following along!