Build a Smooth Hot Products List with the Caurina Tweener Class

on Sep 2nd 2009 with 21 comments

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.

  1. effTime – time in seconds that is used in tweener animation
  2. effeffTransition – type of tweener transition
  3. iMin – var min value
  4. 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!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Yanko is a developer from Varna,Bulgaria.  

Plus Premium
 
 
  • André

    Hey dude, the final result is great, and the design is really cool…

    But i am sorry to say, your code is really a mess, and it´s too many code for a very simple result, with less than half of this code you can do the same result or even better.

    For next tutorials i suggest you to read a little bit of the Event class and the Event.currentTarget property, this will eliminate the unecessary switches that you used, also the btn1Click, btn2Click… all you need is only ONE function for all buttons that have the same functionality… i am not here to criticize your work, but i am thinking about people who will learn too, also, if you want, trying to teach a better way for your work ;)

    • http://www.nouveller.com/ Benjamin Reid

      Yeah it can be slimmed down a lot, which will make it run more efficiently. This could of been put to a better use to, the functionality is good but shops should never be done in Flash!

      • André

        Yes, i have to agree with you, shops should never be done in flash!!

        But it´s a nice feature for other things, instead of shop could be done many other things in place.

  • André

    Just another thing, for who have MSN messenger or Yahoo messenger can add the contact group225300@groupsim.com , it´s a real time chat that more tham one person can talk at the same time and discuss about flash and AS language, also people can ask flash questions there.

  • http://labs.dariux.com Dario Gutierrez

    Your code is a little complicated my friend, but looks excellent. Congratulations.

  • http://www.woodswoodswoods.com Justin

    Anybody want to post the code with some cleanup? I think we need a user suggested updates/revisions functionality added to these pages. It seems like more times than not there are suggestions about the code in the comments. I think the outcome was pretty nice! I’m glad to see cuarina incorporated this time around as well!

  • http://www.schultzstudio.com Chris

    Hey Yanko. Great tutorial. Here’s how I see there maybe a hundred different ways someone can accomplish what you did. It might be with less code or more code. What matters is someone can learn from this. They can go back and clean it up if they want. They can use certain elements in different ways for different projects.

    Thanks for the tutorial I think it’s clean. Well commented too.

    • Ian

      I disagree with you, by learning from this code you will be learning poor coding technique. As has been said above, you can accomplish this sort of thing with far less code that is actually much easier to understand.

      I get the feeling that this is a tutorial for the sake of a tutorial and actually is a poorly executed, badly planned idea. It pains me to be the negative voice here, and really it’s not the author’s fault, this tutorial should have been vetted at the editorial stage.

  • http://www.dsaportfolio.com.br Diego SA

    Wow. Actionscript is too big! I’ll have to study how it works later.
    The final result is awesome! It’d be better if it somehow had access to a MySQL database to see the most bought products instead of a XML lists where you have to edit everytime.
    But thanks for this tutorial. Very useful!

  • Dudefox

    I want to know where is the pixelbender tutorial the André promissed for us, did he write it?

    • André

      Hey dude, calm down, it´s written but i know my english is not that thing, so i know they need to review everything i wrote there, but soon you will see it here

    • http://snaptin.com Ian Yates
      Staff

      Yup – it’s coming..

  • fatty

    OMFG BANANA 100$ ?

  • http://yuliyan.info Юлиян

    Hello :) I`m from Varna too :) Nice to meet Bulgarian, who writes good tutorials for this network. Good Job!

    • http://www.burnandbass.com burn

      It seems that a lot of people from Varna browse these pages… I’m from varna, too :)

    • http://RGS-bg.com Георги

      me too :)

  • Pingback: Build a Smooth Hot Products List with the Caurina Tweener Class … at Flash Designers

  • http://www.endyoursearch.com Vincent D’Amico

    umm the design / interaction isnt professional imo.

    Sorry,

  • Pingback: Build a Smooth Hot Products List with the Caurina Tweener Class | Lively Flash Tuts

  • Peter

    Woooow a Very Nice Tutorial specially to refresh my Action Script

  • Pingback: Down the Foxhole – Last Week on Flashtuts+

  • michaelhejja

    Not so hot at all, actually. The way this is built, you are stuck with these dimensions and you have to have EXACTLY nine items, three per section. Unless you want exactly nine items, this is useless – any less will break it and any more won’t show up.

  • nain

    Hi, I’m trying to modify this code below to make it autoplay the each image listed in the xml file instead of pressing button.
    Can anyone help me out here? It will be greatly appreciated.

    –below–
    function loadXML(loaded) {
    if (loaded) {
    xmlNode = this.firstChild;
    image = [];
    description = [];
    total = xmlNode.childNodes.length;
    for (i=0; i<total; i++) {
    image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
    description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
    }
    firstImage();
    } else {
    content = "file not loaded!";
    }
    }
    xmlData = new XML();
    xmlData.ignoreWhite = true;
    xmlData.onLoad = loadXML;
    xmlData.load("images.xml");
    // ///////////////////////////////////
    listen = new Object();
    listen.onKeyDown = function() {
    if (Key.getCode() == Key.LEFT) {
    prevImage();
    } else if (Key.getCode() == Key.RIGHT) {
    nextImage();
    }
    };
    Key.addListener(listen);
    previous_btn.onRelease = function() {
    prevImage();
    };
    next_btn.onRelease = function() {
    nextImage();
    };
    // ///////////////////////////////////
    p = 0;
    this.onEnterFrame = function() {
    filesize = picture.getBytesTotal();
    loaded = picture.getBytesLoaded();
    preloader._visible = true;
    if (loaded != filesize) {
    preloader.preload_bar._xscale = 100*loaded/filesize;
    } else {
    preloader._visible = false;
    if (picture._alpha<100) {
    picture._alpha += 10;
    }
    }
    };
    function nextImage() {
    if (p0) {
    p–;
    picture._alpha = 0;
    picture.loadMovie(image[p], 1);
    desc_txt.text = description[p];
    picture_num();
    }
    }
    function firstImage() {
    if (loaded == filesize) {
    picture._alpha = 0;
    picture.loadMovie(image[0], 1);
    desc_txt.text = description[0];
    picture_num();
    }
    }
    function picture_num() {
    current_pos = p+1;
    pos_txt.text = current_pos+” / “+total;
    }

  • Madhu Rakhal Magar

    Thanks for great Tutorial, I was looking for this type of tutorial because i am new to actionscript and flash.
    Hope you provide such helpful tutorial in near future and help us to learn actionscript fast and easily….

  • Pingback: Alpha 20time | Youkraft

  • Pingback: 45+ Advanced Tutorials of Adobe Flash ActionScript « CSS Tips

  • Pingback: 45+ Advanced Tutorials of Adobe Flash ActionScript | JS Tips