Create a AS3 Slideshow with XML


/ Published in: ActionScript 3
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // import tweener
  2. import caurina.transitions.Tweener;
  3.  
  4. // delay between slides
  5. const TIMER_DELAY:int = 5000;
  6. // fade time between slides
  7. const FADE_TIME:int = 1;
  8.  
  9. // reference to the current slider container
  10. var currentContainer:Sprite;
  11. // index of the current slide
  12. var intCurrentSlide:int = -1;
  13. // total slides
  14. var intSlideCount:int;
  15. // timer for switching slides
  16. var slideTimer:Timer;
  17. // slides holder
  18. var sprContainer1:Sprite;
  19. var sprContainer2:Sprite;
  20. // slides loader
  21. var slideLoader:Loader;
  22. // url to slideshow xml
  23. var strXMLPath:String = "slideshow-data.xml";
  24. // slideshow xml loader
  25. var xmlLoader:URLLoader;
  26. // slideshow xml
  27. var xmlSlideshow:XML;
  28.  
  29. function init():void {
  30. // create new urlloader for xml file
  31. xmlLoader = new URLLoader();
  32. // add listener for complete event
  33. xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
  34. // load xml file
  35. xmlLoader.load(new URLRequest(strXMLPath));
  36.  
  37. // create new timer with delay from constant
  38. slideTimer = new Timer(TIMER_DELAY);
  39. // add event listener for timer event
  40. slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);
  41.  
  42. // create 2 container sprite which will hold the slides and
  43. // add them to the masked movieclip
  44. sprContainer1 = new Sprite();
  45. sprContainer2 = new Sprite();
  46. mcSlideHolder.addChild(sprContainer1);
  47. mcSlideHolder.addChild(sprContainer2);
  48.  
  49. // keep a reference of the container which is currently
  50. // in the front
  51. currentContainer = sprContainer2;
  52.  
  53. }
  54.  
  55. function onXMLLoadComplete(e:Event):void {
  56. // create new xml with the received data
  57. xmlSlideshow = new XML(e.target.data);
  58. // get total slide count
  59. intSlideCount = xmlSlideshow..image.length();
  60. // switch the first slide without a delay
  61. switchSlide(null);
  62. }
  63.  
  64. function fadeSlideIn(e:Event):void {
  65. // add loaded slide from slide loader to the
  66. // current container
  67. currentContainer.addChild(slideLoader.content);
  68. // clear preloader text
  69. mcInfo.lbl_loading.text = "";
  70. // fade the current container in and start the slide timer
  71. // when the tween is finished
  72. Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
  73. }
  74.  
  75. function switchSlide(e:Event):void {
  76. // check, if the timer is running (needed for the
  77. // very first switch of the slide)
  78. if(slideTimer.running)
  79. slideTimer.stop();
  80.  
  81. // check if we have any slides left and increment
  82. // current slide index
  83. if(intCurrentSlide + 1 < intSlideCount)
  84. intCurrentSlide++;
  85. // if not, start slideshow from beginning
  86. else
  87. intCurrentSlide = 0;
  88.  
  89. // check which container is currently in the front and
  90. // assign currentContainer to the one that's in the back with
  91. // the old slide
  92. if(currentContainer == sprContainer2)
  93. currentContainer = sprContainer1;
  94. else
  95. currentContainer = sprContainer2;
  96.  
  97. // hide the old slide
  98. currentContainer.alpha = 0;
  99. // bring the old slide to the front
  100. mcSlideHolder.swapChildren(sprContainer2, sprContainer1);
  101.  
  102. // create a new loader for the slide
  103. slideLoader = new Loader();
  104. // add event listener when slide is loaded
  105. slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
  106. // add event listener for the progress
  107. slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
  108. // load the next slide
  109. slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));
  110.  
  111. // show description of the next slide
  112. mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;
  113. // show current slide and total slides
  114. mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;
  115. }
  116.  
  117. function showProgress(e:ProgressEvent):void {
  118. // show percentage of the bytes loaded from the current slide
  119. mcInfo.lbl_loading.text = “Loading…” + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + “%”;
  120. }
  121.  
  122. // init slideshow
  123. init();

URL: http://www.thetechlabs.com/xml/create-a-as3-slideshow-with-xml/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.