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.
- 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
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!