Wednesday, November 12, 2008

Make Dynamic Slideshow XML with Flash

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.XpathAPI:The native XPathAPI class allows us to search the XML nodes and attributes within XML that’s loaded in to flash.

Conditional Operator:Using conditional operator is similar to if else statement.
var test_boolean : Boolean = trueif(test_boolean)trace(”I am True”);elsetrace(”I am False”);//output:I am True
Same code using the conditional operator
var test_boolean : Boolean = truetest_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:
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);}

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.

Download Source Files.

No comments: