Flash 8 Slideshow Tutorial with XML

So the task at hand, was to create a Flash/XML based slideshow type component that would cycle through as little as 5 images with captions at a rate of about 5 seconds per image, that was fed dynamically from an xml file which controlled the image path, frame delay, and image url.

Similar flash components can be seen on many popular sites such as gamespot.com, hgtv.com, and foodnetwork.com to name a few. I based my initial code off of a tutorial I found from kirupa.com.

I added the following features to existing slideshow:

10/15/06 UPDATE: The flash slideshow will accept jpg's and animated .swf files.

11/4/07 UPDATE: I will be adding dynamic nav based on this tutorial Dynamic Arrays in Flash 8
The flash feature can be viewed at dLife.com and NewBridge International Realty, two companies where I have implemented the code.

To download the full source code, please use this link: Flash 8 XML Slideshow (6488).

Dontations are highly appreciated!


My ActionScipt Code:

PLAIN TEXT
Actionscript:
  1. //-----------------------
  2. function loadXML(loaded) {
  3. if (loaded) {
  4. xmlNode = this.firstChild;
  5. image = [];
  6. description = [];
  7. url = [];
  8. delay = [];
  9. total = xmlNode.childNodes.length;
  10. for (i=0; i<total; i  ) {
  11. image[i] = xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
  12. description[i] = xmlNode.childNodes[i].childNodes[1].firstChild.nodeValue;
  13. url[i] = xmlNode.childNodes[i].childNodes[2].firstChild.nodeValue;
  14. delay[i] = xmlNode.childNodes[i].childNodes[3].firstChild.nodeValue;
  15. }
  16.  
  17. firstImage();
  18. } else {
  19. content = "file not loaded!";
  20. }
  21. }
  22. my_Date = new Date();
  23. xmlData = new XML();
  24. xmlData.ignoreWhite = true;
  25. xmlData.onLoad = loadXML;
  26. xmlData.load("images.xml?" my_Date.getUTCSeconds());
  27.  
  28.  
  29. /////////////////////////////////////
  30. listen = new Object();
  31. listen.onKeyDown = function() {
  32. if (Key.getCode() == Key.LEFT) {
  33. prevImage();
  34. } else if (Key.getCode() == Key.RIGHT) {
  35. nextImage();
  36. }
  37. };
  38. Key.addListener(listen);
  39. previous_btn.onRelease = function() {
  40. clearInterval(myInterval); 
  41. prevImage();
  42. };
  43. next_btn.onRelease = function() {
  44. clearInterval(myInterval);
  45. nextImage();
  46.  
  47. };
  48.  
  49. play_btn._visible = 0;
  50. p = 0;
  51. pause_btn.onRelease = function() {
  52.     clearInterval(myInterval);
  53.     pause_btn._visible = 0;
  54.     play_btn._visible = 100;
  55. };
  56. play_btn.onRelease = function() {
  57.     myInterval = setInterval(pause_slideshow, delay[p]);
  58.     pause_btn._visible = 100;
  59.     play_btn._visible = 0;
  60. };
  61.  
  62. /////////////////////////////////////
  63. p = 0;
  64. this.onEnterFrame = function() {
  65. filesize = picture.getBytesTotal();
  66. loaded = picture.getBytesLoaded();
  67. preloader._visible = true;
  68. if (loaded != filesize) {
  69. preloader.preload_bar._xscale = 100*loaded/filesize;
  70. } else {
  71. preloader._visible = false;
  72. if (picture._alpha<100) {
  73. picture._alpha  = 5;
  74. }
  75. }
  76. };
  77.  
  78. function  nextImage()  {
  79.     pause_btn._visible = 100;
  80.     play_btn._visible = 0;
  81.     previous_btn._visible = 100;
  82.     next_btn._visible = 100;
  83.     if (p<(total-1)) {
  84.         p  ;
  85.         if (loaded == filesize) {
  86.             picture._alpha = 0;
  87.             picture.loadMovie(image[p], 1);
  88.             desc_txt.text = description[p];
  89.             url_btn = url[p];
  90.             go_btn = url[p];
  91.             picture_num();
  92.             slideshow();
  93.         }
  94.     }else{
  95.         p = 0;
  96.         if (loaded == filesize) {
  97.             picture._alpha = 0;
  98.             picture.loadMovie(image[p], 1);
  99.             desc_txt.text = description[p];
  100.             url_btn = url[p];
  101.             go_btn = url[p];
  102.             picture_num();
  103.             slideshow();
  104.         }
  105.     }
  106. }
  107.  
  108. function prevImage() {
  109.     pause_btn._visible = 100;
  110.     play_btn._visible = 0;
  111.     if (p>0) {
  112.         p--;
  113.         picture._alpha = 0;
  114.         picture.loadMovie(image[p], 1);
  115.         desc_txt.text = description[p];
  116.         url_btn = url[p];
  117.         go_btn = url[p];
  118.         picture_num();
  119.     }else{
  120.         p = total - 1;
  121.         picture._alpha = 0;
  122.         picture.loadMovie(image[p], 1);
  123.         desc_txt.text = description[p];
  124.         picture_num();
  125.     }   
  126. }
  127.  
  128.  
  129. function firstImage() {
  130.     previous_btn._visible = 0;
  131.     next_btn._visible = 100;
  132. if (loaded == filesize) {
  133. picture._alpha = 0;
  134. picture.loadMovie(image[0], 1);
  135. desc_txt.text = description[0];
  136. url_btn = url[0];
  137. go_btn = url[0];
  138. picture_num();
  139. slideshow();
  140.  
  141.  
  142. }
  143. }
  144. function picture_num() {
  145. current_pos = p 1;
  146. pos_txt.text = current_pos " / " total;
  147. }
  148.  
  149. function slideshow() {
  150. myInterval = setInterval(pause_slideshow, delay[p]);
  151. }
  152.  
  153. function pause_slideshow() {
  154. clearInterval(myInterval);
  155. if (p == (total-1)) {
  156. p = 0;
  157. firstImage();
  158. } else {
  159. nextImage();
  160. }
  161. }

My XML Code:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8" standalone="yes"?>
  2. <images>
  3.  
  4. <pic>
  5.         <image>nov-06.swf</image>
  6.         <caption>Learn more about traveling safely and maintaining your diabetes management.</caption>
  7.     <url>http://www.dlife.com</url>
  8.     <delay>6000</delay>
  9. </pic>
  10. </images>

Share and Enjoy:
  • BlinkList
  • del.icio.us
  • digg
  • Furl
  • Ma.gnolia
  • Simpy
  • Slashdot
  • Spurl
  • StumbleUpon
  • Technorati