Home » ActionScript 2.0, Webmasters, Wordpress, XML

Dynamic Slideshow XML + Flash:

12 November 2008 2 Comments
Share on Facebook

This tutorial shows how to create dynamic slideshow by fetching the data from XML and the slideshow. This tutorial covers reading XML using XPathAPI, Conditional operator, MovieClipLoader, setTimeout. Follow this link for Dynamic Slideshow using ActionScript 3.0

Difficulty of Tutorial:

Beginner – Intermediate
XpathAPI:
The native XPathAPI class allows us to search the XML nodes and attributes within XML that is loaded in to flash.
To know more about using XPathAPI click here

Conditional Operator:
Using conditional operator is similar to if else statement.

Example:

 

var test_boolean : Boolean = true
if(test_boolean)
trace("I am True");
else
trace("I am False");
//output:I am True

 

Let us use the same Logic using the conditional operator for checking boolean condition.

 

var test_boolean : Boolean = true
test_boolean == true ? trace("I am True") : trace("I am False");
//output:I am True

 

setTimeout:
setTimeOut() method is an undocumented feature of flash8. This method is very useful when we need to call a function after specified duration of time. But not more than once.
Simple usage of SetTimeOut:

setTimeout(sayHello, 1000);

function sayHello() {
  trace("Hello, welcome here!");
}

 

Passing argument:

And incase we need to pass some argument then

 

setTimeout(sayHello, 1000,"Hello, welcome here!");
function sayHello( arg:String ) {
  trace(arg);
}

 

 

Output SWF File

Slideshow Code:

import mx.transitions.Tween;
import mx.transitions.easing.*;
import mx.xpath.XPathAPI;
var delay:Number;
var animationDuration:Number;
var current_num:Number = 0;
var first_num:Number = 0;
var image_holder:MovieClip = this.createEmptyMovieClip("image_holder", this.getNextHighestDepth());
var mcl_lis:Object = new Object();
var mcl:MovieClipLoader = new MovieClipLoader();
mcl.addListener(mcl_lis);
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function( isLoaded:Boolean )
{
  if( isLoaded )
  {
    data_arr = XPathAPI.selectNodeList(this.firstChild,"Slideshow/images/image");
    delay = parseInt(XPathAPI.selectSingleNode(this.firstChild,"Slideshow/settings/delay").firstChild);
    animationDuration = parseInt(XPathAPI.selectSingleNode(this.firstChild,"Slideshow/settings/animationDuration").firstChild);
    //optional code to check delay and animationDuration values
    (delay == undefined || delay == null) ? delay = 5000: delay<1000? delay =1000:true;
    (animationDuration == undefined || animationDuration == null) ? animationDuration = .8: animationDuration<.3? animationDuration =.8:true;
    load_image();
  }else
  {
    trace("XML Load error");
  }
}
xml.load("XML/data.xml")

function load_image()
{
  mcl.loadClip(data_arr[current_num].attributes.url, image_holder);
  (current_num>=data_arr.length-1) ? current_num = first_num:current_num++;
}

mcl_lis.onLoadInit = function(target_mc:MovieClip) {
  var obj:Tween = new Tween(target_mc, "_alpha", Normal.easeIn, 0, 100, .5, true);
    setTimeout(function(){
                var obj:Tween = new Tween(target_mc, "_alpha", Normal.easeIn, 100, 0, .5, true);
                  obj.onMotionFinished = function() {load_image();};
               },5000);
};

 

In loadImage function we are loading the next image using MovieClip Loader and Checking the present number of image against the last.

mcl.loadClip(data_arr[current_num].attributes.url, image_holder);
  (current_num>=data_arr.length-1) ? current_num = first_num:current_num++;

Here I am not going to explain the full code bcoz after the above description and XPath tutorial; it €™s very easy to understand.

Updated SlideShow

Follow this link for Dynamic Slideshow using ActionScript 3.0

Cheers
-sara

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • nick

    terrible tutorial. feel free to include the images

  • vinod

    Hi,
    i like it, can you share how to make it random pick form the image folder

    thanks
    vinod