Advertisement
  1. Code
  2. XML

Build a Smooth Hot Products List with the Caurina Tweener Class

Scroll to top
Read Time: 17 min

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:

1
2
<?xml version="1.0" encoding="utf-8"?>
3
<items>
4
<item title="Apple" price="$10" img="img/apple.jpg" link="http://www.google.com/"/>
5
<item title="Orange" price="$30" img="img/orange.jpg" link="https://cgi.tutsplus.com"/>
6
<item title="Lemon" price="$5" img="img/lemon.jpg" link="https://cgi.tutsplus.com"/>
7
<item title="Banana" price="$100" img="img/banana.jpg" link="https://music.tutsplus.com"/>
8
<item title="Water melon" price="$33" img="img/water_melon.jpg" link="https://design.tutsplus.com"/>
9
<item title="Lime" price="$21" img="img/lime.jpg" link="https://code.tutsplus.com"/>
10
<item title="Pinapple" price="$20" img="img/pinapple.jpg" link="https://design.tutsplus.com"/>
11
<item title="Strawberry " price="$6" img="img/strawberry.jpg" link="http://tutsplus.com/"/>
12
<item title="Grapes " price="$15" img="img/grapes.jpg" link="http://flash.tutsplus.com/"/>
13
</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:

1
2
//import Tweener

3
import caurina.transitions.*;
4
//<vars>

5
6
//<xml>

7
var xmlPath:String="data.xml";//holds link to xml file

8
var data_xml:XML;//XML Object

9
var data_Req:URLRequest=new URLRequest(xmlPath);//URL Request

10
var data_Loader:URLLoader = new URLLoader();//Loader

11
var xml_length:Number;//xml length

12
//</xml>

13
14
//<timer>

15
var time:Number=5000;//5000 = 5 seconds

16
var timer:Timer=new Timer(time);//timer

17
//</timer>

18
19
//<items>

20
var imgPath:String;//image path for first item

21
var imgPath2:String;//image path for second item

22
var imgPath3:String;//image path for third item

23
var item1Y:Number=item1.y;//item 1 y value

24
var item2Y:Number=item2.y;//item 2 y value

25
var item3Y:Number=item3.y;//item 3 y value

26
//</items>

27
28
//<other>

29
var currentBtn:Number=1;//wich btn is pressed

30
var min:Number;//min value used in function hideNshow()

31
var max:Number;//max value used in function hideNshow()

32
//</other>

33
34
//</vars>

35
//<functions>----------------------------------------------------

36
function xmlLoaded(event:Event):void {//xml Loaded function

37
	data_xml=new XML(data_Loader.data);//get data prom XML file

38
	xml_length=data_xml.item.length();//xml length 

39
	min=xml_length-6;//set min value to second result

40
	max=xml_length-2;//set max velue to second resuld

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

42
43
		var i:Number;//var for for loop

44
		var loopMaxResult=loopMax-2;//var for third result

45
		var loopSecondResult=loopMax-3;//var for second result

46
47
		for (i=loopMin; i<loopMax; i++) {//for loop

48
			if (i==loopMin) {//first result item 1

49
50
				fData(item1,i);//call fData function to fill item 1

51
				//<load the image>

52
				imgPath=data_xml.item[i].@img;//get img url from xml

53
				var imgRequest:URLRequest=new URLRequest(imgPath);//URL request

54
				var imgLoader:Loader=new Loader();//image Loader

55
				imgLoader.load(imgRequest);//load the image

56
				item1.addChild(imgLoader);//add first image to item 1

57
				imgLoader.x=-150;//image x value

58
				imgLoader.y=15;//image y value

59
				//</load image>

60
61
			}//end if

62
			if (i==loopSecondResult) {//second result

63
64
				fData(item2,i);//call fData function to fill item 2

65
				//<load the image>

66
				imgPath2=data_xml.item[i].@img;//get img url from xml

67
				var imgRequest2:URLRequest=new URLRequest(imgPath2);//URL request

68
				var imgLoader2:Loader=new Loader();//image Loader

69
				imgLoader2.load(imgRequest2);//load the image

70
				item2.addChild(imgLoader2);//add first image to item 2

71
				imgLoader2.x=-150;//image x value

72
				imgLoader2.y=15;//image y value

73
				//</load image>

74
75
			}//end if

76
			if (i==loopMaxResult) {//third result

77
78
				fData(item3,i);//call fData function to fill item 3

79
				//<load the image>

80
				imgPath3=data_xml.item[i].@img;//get img url from xml

81
				var imgRequest3:URLRequest=new URLRequest(imgPath3);//URL request

82
				var imgLoader3:Loader=new Loader();//image Loader

83
				imgLoader3.load(imgRequest3);//load the image

84
				item3.addChild(imgLoader3);//add first image to item 3

85
				imgLoader3.x=-150;//image x value

86
				imgLoader3.y=15;//image y value

87
				//</load image>

88
89
90
			}//end if

91
92
		}// end for

93
		function fData(item:MovieClip,iValue:int) {//function that fill data into items

94
			var moreURL:String;//url for button more

95
96
			item.txt.text=data_xml.item[iValue].@title;//fill item title

97
			item.price.text=data_xml.item[iValue].@price;//fill item price

98
			moreURL=data_xml.item[iValue].@link;//item link

99
			item.more.addEventListener(MouseEvent.CLICK, gotoURL);//event listener for more btn

100
			function gotoURL(e:MouseEvent):void {//click event function

101
				var myURL:URLRequest=new URLRequest(moreURL);//URL request

102
				navigateToURL(myURL);//go to item link 

103
104
105
			}//end function gotoURL

106
107
			// function for show N hide items

108
			function hideNshow(effTime:Number,effTransition:String,iMin:Number,iMax:Number) {
109
				//<hide items>

110
				timer.stop();//stop the timer

111
				Tweener.addTween(item3, {y:330,alpha:0, time:effTime, transition:effTransition});//hide item 3

112
				Tweener.addTween(item2, {y:247,alpha:0, time:effTime,delay:0.3, transition:effTransition});//hide item 2

113
				Tweener.addTween(item1, {y:163,alpha:0,time:effTime, delay:0.6,transition:effTransition,onComplete:Show});//hide item 1,

114
				//when done call function Show()

115
				//</hide items>

116
				function Show() {//show items 

117
					//<show items>

118
					currentBtn+=1;//add 1 to current btn value

119
					if (currentBtn==4) {//if currentBtn value is equal to 4 set value to 1 because we have only 3 btns

120
						currentBtn=1;//set it to 1

121
					}//end if

122
123
					item1.removeChild(imgLoader);//remove image from item 1

124
					item2.removeChild(imgLoader2);//remove image from item 2

125
					item3.removeChild(imgLoader3);//remove image from item 3

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

128
129
					min-=3;//decrease the min value to show next 3 results from xml

130
					max-=3;//decrease the max value to show next 3 results from xml

131
					if (max==xml_length-8) {//if max value 

132
						min=xml_length-3;//set min value to show first result

133
						max=xml_length+1;//set max value to show first result

134
					}//end if

135
136
					Tweener.addTween(item3, {y:item3Y,alpha:1, time:2,delay:0.6, transition:"easeOutExpo"});//show item3

137
					Tweener.addTween(item2, {y:item2Y,alpha:1, time:2,delay:0.3, transition:"easeOutExpo"});//show item2

138
					Tweener.addTween(item1, {y:item1Y,alpha:1, time:2, transition:"easeOutExpo"});//show item1

139
					timer.start();
140
					//</show items>

141
				}//end function Show

142
			}//end function hideNshow

143
			function timerEvent() {//function for timer event

144
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow

145
			}
146
			//btn 1 function

147
			function btn1Clicked(e:MouseEvent) {
148
				min=xml_length-3;//set min value

149
				max=xml_length+1;//set max value

150
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow

151
				currentBtn=0;//set surrent Btn

152
				btnControl(1);//call function btnControl

153
			}
154
			//btn 2 function

155
			function btn2Clicked(e:MouseEvent) {
156
				min=xml_length-6;
157
				max=xml_length-2;
158
				hideNshow(2,"easeInOutQuart",min,max);
159
				currentBtn=1;
160
				btnControl(2);
161
			}
162
			//btn 3 function

163
			function btn3Clicked(e:MouseEvent) {
164
				min=xml_length-9;
165
				max=xml_length-5;
166
				hideNshow(2,"easeInOutQuart",min,max);
167
				currentBtn=2;
168
				btnControl(3);
169
170
			}
171
			function btnControl(btnNumber:Number) {
172
				//some case switch......

173
				switch (btnNumber) {
174
					case 1 ://when btn 1 is active

175
						btn1.alpha=0.5;//set alpha

176
						btn1.mouseEnabled=false;//disable button

177
						Tweener.addTween(btn1, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height

178
						btn2.alpha=1;//set alpha

179
						btn2.mouseEnabled=true;//enable btn

180
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

181
						btn3.alpha=1;//set alpha

182
						btn3.mouseEnabled=true;//enable btn

183
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

184
						break;
185
					case 2 ://when btn 2 is active

186
						btn1.alpha=1;//set alpha

187
						btn1.mouseEnabled=true;//enable btn

188
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

189
						btn2.alpha=0.5;//set alpha

190
						btn2.mouseEnabled=false;//disable button

191
						Tweener.addTween(btn2, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height

192
						btn3.alpha=1;//set alpha

193
						btn3.mouseEnabled=true;//enable btn

194
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

195
						break;
196
					case 3 ://when btn 3 is active

197
						btn1.alpha=1;//set alpha

198
						btn1.mouseEnabled=true;//enable btn

199
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

200
						btn2.alpha=1;//set alpha

201
						btn2.mouseEnabled=true;//enable btn

202
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

203
						btn3.alpha=0.5;//set alpha

204
						btn3.mouseEnabled=false;//disable button

205
						Tweener.addTween(btn3, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height

206
						break;
207
208
				}//end Switch

209
			}//end function btnControl

210
			//<event listeners>

211
			//timer

212
			timer.addEventListener(TimerEvent.TIMER, timerEvent);
213
			timer.start();
214
			//buttons

215
			btn1.addEventListener(MouseEvent.CLICK, btn1Clicked);//Listens for btn1 click and call function

216
			btn2.addEventListener(MouseEvent.CLICK, btn2Clicked);//Listens for btn2 click and call function

217
			btn3.addEventListener(MouseEvent.CLICK, btn3Clicked);//Listens for btn3 click and call function

218
			//</event listeners>

219
			//show wich btns is active

220
			if (currentBtn==1) {
221
				btnControl(1);//call btnControl function

222
			} else if (currentBtn==2) {
223
				btnControl(2);//call btnControl function

224
			} else if (currentBtn==3) {
225
				btnControl(3);
226
			}//end if

227
		}//end function fData

228
229
230
231
	}//end function ShowData

232
	showData(xml_length-3,xml_length+1);//show First Result

233
234
235
}
236
//end xml Loaded function

237
//</functions>---------------------------------------------------

238
239
//<call functions>

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

Step 10: Vars

1
2
//import Tweener

3
import caurina.transitions.*;
4
//<vars>

5
6
//<xml>

7
var xmlPath:String="data.xml";//holds link to xml file

8
var data_xml:XML;//XML Object

9
var data_Req:URLRequest=new URLRequest(xmlPath);//URL Request

10
var data_Loader:URLLoader = new URLLoader();//Loader

11
var xml_length:Number;//xml length

12
//</xml>

13
14
//<timer>

15
var time:Number=5000;//5000 = 5 seconds

16
var timer:Timer=new Timer(time);//timer

17
//</timer>

18
19
//<items>

20
var imgPath:String;//image path for first item

21
var imgPath2:String;//image path for second item

22
var imgPath3:String;//image path for third item

23
var item1Y:Number=item1.y;//item 1 y value

24
var item2Y:Number=item2.y;//item 2 y value

25
var item3Y:Number=item3.y;//item 3 y value

26
//</items>

27
28
//<other>

29
var currentBtn:Number=1;//wich btn is pressed

30
var min:Number;//min value used in function hideNshow()

31
var max:Number;//max value used in function hideNshow()

32
//</other>

33
34
//</vars>

Step 11: xmlLoaded

1
2
function xmlLoaded(event:Event):void {//xml Loaded function

3
	data_xml=new XML(data_Loader.data);//get data prom XML file

4
	xml_length=data_xml.item.length();//xml length 

5
	min=xml_length-6;//set min value to second result

6
	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

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

3
4
		var i:Number;//var for for loop

5
		var loopMaxResult=loopMax-2;//var for third result

6
		var loopSecondResult=loopMax-3;//var for second result

7
        for (i=loopMin; i<loopMax; i++) {//for loop

8
			if (i==loopMin) {//first result item 1

9
10
				fData(item1,i);//call fData function to fill item 1

11
				//<load the image>

12
				imgPath=data_xml.item[i].@img;//get img url from xml

13
				var imgRequest:URLRequest=new URLRequest(imgPath);//URL request

14
				var imgLoader:Loader=new Loader();//image Loader

15
				imgLoader.load(imgRequest);//load the image

16
				item1.addChild(imgLoader);//add first image to item 1

17
				imgLoader.x=-150;//image x value

18
				imgLoader.y=15;//image y value

19
				//</load image>

20
21
			}//end if

22
			if (i==loopSecondResult) {//second result

23
24
				fData(item2,i);//call fData function to fill item 2

25
				//<load the image>

26
				imgPath2=data_xml.item[i].@img;//get img url from xml

27
				var imgRequest2:URLRequest=new URLRequest(imgPath2);//URL request

28
				var imgLoader2:Loader=new Loader();//image Loader

29
				imgLoader2.load(imgRequest2);//load the image

30
				item2.addChild(imgLoader2);//add first image to item 2

31
				imgLoader2.x=-150;//image x value

32
				imgLoader2.y=15;//image y value

33
				//</load image>

34
35
			}//end if

36
			if (i==loopMaxResult) {//third result

37
38
				fData(item3,i);//call fData function to fill item 3

39
				//<load the image>

40
				imgPath3=data_xml.item[i].@img;//get img url from xml

41
				var imgRequest3:URLRequest=new URLRequest(imgPath3);//URL request

42
				var imgLoader3:Loader=new Loader();//image Loader

43
				imgLoader3.load(imgRequest3);//load the image

44
				item3.addChild(imgLoader3);//add first image to item 3

45
				imgLoader3.x=-150;//image x value

46
				imgLoader3.y=15;//image y value

47
				//</load image>

48
49
50
			}//end if

51
52
		}// 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

1
2
function fData(item:MovieClip,iValue:int) {//function that fill data into items

3
			var moreURL:String;//url for button more

4
5
			item.txt.text=data_xml.item[iValue].@title;//fill item title

6
			item.price.text=data_xml.item[iValue].@price;//fill item price

7
			moreURL=data_xml.item[iValue].@link;//item link

8
			item.more.addEventListener(MouseEvent.CLICK, gotoURL);//event listener for more btn

9
			function gotoURL(e:MouseEvent):void {//click event function

10
				var myURL:URLRequest=new URLRequest(moreURL);//URL request

11
				navigateToURL(myURL);//go to item link 

12
13
14
			}//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

1
2
// function for show N hide items

3
			function hideNshow(effTime:Number,effTransition:String,iMin:Number,iMax:Number) {
4
				//<hide items>

5
				timer.stop();//stop the timer

6
				Tweener.addTween(item3, {y:330,alpha:0, time:effTime, transition:effTransition});//hide item 3

7
				Tweener.addTween(item2, {y:247,alpha:0, time:effTime,delay:0.3, transition:effTransition});//hide item 2

8
				Tweener.addTween(item1, {y:163,alpha:0,time:effTime, delay:0.6,transition:effTransition,onComplete:Show});//hide item 1,

9
				//when done call function Show()

10
				//</hide items>

11
				function Show() {//show items 

12
					//<show items>

13
					currentBtn+=1;//add 1 to current btn value

14
					if (currentBtn==4) {//if currentBtn value is equal to 4 set value to 1 because we have only 3 btns

15
						currentBtn=1;//set it to 1

16
					}//end if

17
18
					item1.removeChild(imgLoader);//remove image from item 1

19
					item2.removeChild(imgLoader2);//remove image from item 2

20
					item3.removeChild(imgLoader3);//remove image from item 3

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

23
24
					min-=3;//decrease the min value to show next 3 results from xml

25
					max-=3;//decrease the max value to show next 3 results from xml

26
					if (max==xml_length-8) {//if max value 

27
						min=xml_length-3;//set min value to show first result

28
						max=xml_length+1;//set max value to show first result

29
					}//end if

30
31
					Tweener.addTween(item3, {y:item3Y,alpha:1, time:2,delay:0.6, transition:"easeOutExpo"});//show item3

32
					Tweener.addTween(item2, {y:item2Y,alpha:1, time:2,delay:0.3, transition:"easeOutExpo"});//show item2

33
					Tweener.addTween(item1, {y:item1Y,alpha:1, time:2, transition:"easeOutExpo"});//show item1

34
					timer.start();
35
					//</show items>

36
				}//end function Show

37
			}//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

1
2
function timerEvent() {//function for timer event

3
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow

4
			}

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

Step 16: Buttons functions

1
2
//btn 1 function

3
			function btn1Clicked(e:MouseEvent) {
4
				min=xml_length-3;//set min value

5
				max=xml_length+1;//set max value

6
				hideNshow(2,"easeInOutQuart",min,max);//call function hideNshow

7
				currentBtn=0;//set surrent Btn

8
				btnControl(1);//call function btnControl

9
			}
10
			//btn 2 function

11
			function btn2Clicked(e:MouseEvent) {
12
				min=xml_length-6;
13
				max=xml_length-2;
14
				hideNshow(2,"easeInOutQuart",min,max);
15
				currentBtn=1;
16
				btnControl(2);
17
			}
18
			//btn 3 function

19
			function btn3Clicked(e:MouseEvent) {
20
				min=xml_length-9;
21
				max=xml_length-5;
22
				hideNshow(2,"easeInOutQuart",min,max);
23
				currentBtn=2;
24
				btnControl(3);
25
26
			}

These are the functions that event listeners for buttons call.

Step 17: btnControl function

1
2
			function btnControl(btnNumber:Number) {
3
				//some case switch......

4
				switch (btnNumber) {
5
					case 1 ://when btn 1 is active

6
						btn1.alpha=0.5;//set alpha

7
						btn1.mouseEnabled=false;//disable button

8
						Tweener.addTween(btn1, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height

9
						btn2.alpha=1;//set alpha

10
						btn2.mouseEnabled=true;//enable btn

11
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

12
						btn3.alpha=1;//set alpha

13
						btn3.mouseEnabled=true;//enable btn

14
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

15
						break;
16
					case 2 ://when btn 2 is active

17
						btn1.alpha=1;//set alpha

18
						btn1.mouseEnabled=true;//enable btn

19
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

20
						btn2.alpha=0.5;//set alpha

21
						btn2.mouseEnabled=false;//disable button

22
						Tweener.addTween(btn2, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height

23
						btn3.alpha=1;//set alpha

24
						btn3.mouseEnabled=true;//enable btn

25
						Tweener.addTween(btn3, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

26
						break;
27
					case 3 ://when btn 3 is active

28
						btn1.alpha=1;//set alpha

29
						btn1.mouseEnabled=true;//enable btn

30
						Tweener.addTween(btn1, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

31
						btn2.alpha=1;//set alpha

32
						btn2.mouseEnabled=true;//enable btn

33
						Tweener.addTween(btn2, {width:20,height:20,time:2,transition:"easeOutExpo"});//change btn width and height

34
						btn3.alpha=0.5;//set alpha

35
						btn3.mouseEnabled=false;//disable button

36
						Tweener.addTween(btn3, {width:30,height:30,time:2,transition:"easeOutExpo"});//change btn width and height

37
						break;
38
39
				}//end Switch

40
			}//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

1
2
            //<event listeners>

3
			//timer

4
			timer.addEventListener(TimerEvent.TIMER, timerEvent);
5
			timer.start();
6
			//buttons

7
			btn1.addEventListener(MouseEvent.CLICK, btn1Clicked);//Listens for btn1 click and call function

8
			btn2.addEventListener(MouseEvent.CLICK, btn2Clicked);//Listens for btn2 click and call function

9
			btn3.addEventListener(MouseEvent.CLICK, btn3Clicked);//Listens for btn3 click and call function

10
			//</event listeners>

Step 19: Which Button is Active?

1
2
//show which button is active

3
			if (currentBtn==1) {
4
				btnControl(1);//call btnControl function

5
			} else if (currentBtn==2) {
6
				btnControl(2);//call btnControl function

7
			} else if (currentBtn==3) {
8
				btnControl(3);
9
			}//end if

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

Step 20: Call functions

1
2
}//end function fData

3
4
5
6
	}//end function ShowData

7
	showData(xml_length-3,xml_length+1);//show First Result

8
9
10
}
11
//end xml Loaded function

12
//</functions>---------------------------------------------------

13
14
//<call functions>

15
data_Loader.load(data_Req);
16
data_Loader.addEventListener(Event.COMPLETE, xmlLoaded);
17
//</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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.