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="https://cgi.tutsplus.com"/> <item title="Lemon" price="$5" img="img/lemon.jpg" link="https://cgi.tutsplus.com"/> <item title="Banana" price="$100" img="img/banana.jpg" link="https://music.tutsplus.com"/> <item title="Water melon" price="$33" img="img/water_melon.jpg" link="https://design.tutsplus.com"/> <item title="Lime" price="$21" img="img/lime.jpg" link="https://code.tutsplus.com"/> <item title="Pinapple" price="$20" img="img/pinapple.jpg" link="https://design.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!
