Flash ActionScript 3.0 XML Basic Slideshow with Transitions

20

In this tutorial, Im building up what I started in the Text Array Loader. Basically, I have added the ability to pull in images and also setup the whole slideshow on a Timer event. So every 5 seconds (the time limit can be changed), the next image is loaded from the XML, and when it loads it uses an Alpha Tween from the TweenLite library to fade in. In the next version, I will be adding some sort of dynamic navigation.

Here is a screenshot of the XML File:
AS3 Part 1 Tutorial - XML File

This slideshow is based off my prior tutorial: Flash ActionScript 3.0 XML Text Array Loader.

Step 1: Declare Your Variables and Import Classes
This is where I first Import the gs.TweenLite class so that I can use it to tween my images. I also setup my variables here for my timer, my slide number, and my image loader.
[as]
import gs.TweenLite;

// variables
var xmlList:XMLList;
var slideNum:Number = 0;
var imgLoader:Loader = new Loader();
var slideTimer:Timer = new Timer(5000); //runs every 5 seconds
[/as]

Step 2: Load the XML
Now I setup the loader request for XML and once its finished loading using the EventListener, then I tell flash to pull the name attribute out of the first node in my xml file and I use the another instance of the loader class to to load the image out of the xml file. I then place the text in the dynamic text field called imageText and also add the first instance of imgLoader to the stage and tell it to tween in.
[as]
// load xml
var xml:XML = new XML();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest(“images.xml”));
loader.addEventListener(Event.COMPLETE,
function(evt:Event):void {
xml = XML(evt.target.data);
xmlList = xml.children();
imageText.text = xml.image[slideNum].@name.toString();
imgLoader.load(new URLRequest(xml.image[slideNum].@src));
TweenLite.from(imgLoader, 1, {alpha:0});
imgLoader.x = 0 ;
imgLoader.y = 0;
}

);
[/as]

Step 3: Add Event Listeners
Now I setup the imgLoader event listener, that once that event is complete it will run onLoadComplete. I also setup the slideTimer here and start it. The slideTimer is set to call the function onSlideTimer every 5 seconds.

[as]
// stage event listeners
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
slideTimer.addEventListener(TimerEvent.TIMER, onSlideTimer);
slideTimer.start();
[/as]

Step 4: Change Text Function
I carried over the Change Text Function from my XML Text Array Tutorial and added a few lines to pull the next image from the XML file along with the next text description.
[as]
// this function will change the text depending upon which number is fed to the var slideNum in the onClickNextSlide function
function changeText(slideNum:Number):void {
imageText.text = xml.image[slideNum].@name.toString();
imgLoader.load(new URLRequest(xml.image[slideNum].@src));
addChild(imgLoader);
TweenLite.from(imgLoader, 1, {alpha:0});
imgLoader.x = 0;
imgLoader.y = 0;

}
changeText(0);

[/as]

Step 5: Timer Function
This is the most crucial part of the slideshow is what makes the slideshow run on its own. This is the timer function which the timer calls every 5 seconds. It will change the slide, so every five seconds its counts up a number and that is the image that is shown. Once it reaches the 5th image(4), it starts over at 0, which is really 1.
[as]
function onSlideTimer(evt:TimerEvent):void {
if (slideNum == 4) {
slideNum = 0;
}
else {
slideNum ;
}
changeText(slideNum);
trace(slideNum);
}
[/as]

Step 6: onLoadComplete Function
This function adds the imgLoader to the stage, without this you will not see anything in your movie. This is crucial!
[as]
function onLoadComplete(event:Event):void {
addChild(imgLoader);
}
[/as]

Im currently working on making this a tad more dynamic with buttons, and a slideLength variables which automatically changes the amount of slides so that you dont have to change the .fla file when adding more nodes to your slideshow. Im also going to be working on getting slicker transitions working such as images that slide in/slide out off the screen.

Here is an example of the working file:
View Demo

Download all the source files here: [download#2]

ve ringtones motorola for alltelwireless ringtones alltel alltell 41 1 417 free top ringtonefree ringtones 1260ringtone 190 motorola download1st ringtoneringtones 2285mp3 ringtone 6230 Mapfree sex movie slavemovies preteenmovies musclemen samplealien movies ant farmadult movies free samplesex movies freelesbo movieshome wifes movies Mapmovies porn free bigfree lactating moviesmovies free milfhunter downloadedgallery movie shemale freewindows maker free moviethe holes movie soundtrackhorror movie figures actionnude jennifer movie connelly Mapalaska loan supplementalloans alliedstudent american loanprivate student aarp loansloan abn mortgage resolutionloan unsecured $500,000personal ameriquest loansfederal stafford a-subsidized loans Mapbabysitters pornsporn party bachelor nightporn breakin backfacial room back pornporn for access backdoorbackdoor porn sitesbackroom pornporn bangers site backyard Maptottaly spies pornfree view clips pornxxx free rated pornringtone walsh joe wavhop ringtones hip midi 10kb3 ringtonesnokia 3520 ringtone 3560 freenokia 5125 ringtone free download MapAsian TGP speculumMujeres eroticasLatina Mollig TGPpusy – ATK BehaarteBiw interrassischGranny Interrassischpissing LollitaErotik Sapphic Sandy Map

  1. I am tring to use this tutorial. It is exactly what I need to learn but I keep getting a 1093: Syntax error.
    I have checked and checked again that the code is right. Cut directly from your page! Any ideas???

  2. Hey everyone,

    I just posted all the files so that you can download the source and get it working. I forgot to mention the onLoadComplete function, I will add that now. Sorry about that!

  3. This would make it much more dynamic, since you don’t have to know the number of in the XML-file.

    //Add this line to the loader event handler:
    xmlTotal = xml.image.length() – 1;

    ///and change this line
    if (slideNum == 4) {

    //so it looks like this
    if (slideNum == xmlTotal) {

  4. Oh, the tags were removed. It should be:

    This would make it much more dynamic, since you don’t have to know the number of (tag)image(tag) in the XML-file.

  5. Whats up everybody, im really new when it come to get the understanding of using xml through actionscript and my problem seems really simple but im having some difficulty. If anybody can help me i would really appreciate it. Im trying to add images through xml and then put it through actionscript but i have no idea how to do that. If anybody knows how to do that, i would really appreciate it. Thanks!

  6. When I click on ‘view demo’ in this page a popup alert displays the following messages:
    TypeError: Error #1010: A term is undefined and has no properties.
    at as3_fla::MainTimeline/changeText()
    at as3_fla::MainTimeline/frame1()

  7. I receive the same error when testing the Source code you provided.

    TypeError: Error #1010: A term is undefined and has no properties.
    at as3_fla::MainTimeline/changeText()
    at as3_fla::MainTimeline/frame1()

    Thanks for any help in advance… Thanks!

  8. Hey Leandro,

    I was able to fix the error with the following actions:

    1. REMOVE changeText (0);
    2. Remeber that the XML Nodes starts with 0 so if you have 5 XML nodes you slideNum == 4

    EXAMPLE
    ——————————————————-
    changeText(0);

    function onSlideTimer(evt:TimerEvent):void {

    if (slideNum == 4) {

  9. Yeah, I like your work, but I’m having an issue trying to download your source files. When I click on the link, I get a 404 error. Anyway you could fix that? Thanks.

LEAVE A REPLY