CS 5.5 Image Gallery Template help

Report · Mar 02, 2012

I think there is a simple fix to my issue, but as this is my first time using Flash and Actionscript, I cannot seem to figure it out on my own.

I am using the template under Media Playback>Advanced Photo Album. If you look at the template's code you will see it uses a hardcoded XML string for the variable to read in the images. What I need it to do is read the first line of an external XML file to be stored in the same directory as the Flash file. The first and only line of data that will be in the XML file is going to be in identical format to the string used for the pre-written hardcoded XML string. Which is this:

"<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>".

I need this to read this way because I have a bash script on my server which auto generates an xml file with the first line formatted this way based on the file names within the directory, in which I will be placing images to be viewed in the slideshow.

Thanks in advance for any help

Report · Mar 03, 2012

what happens when you load and parse that xml file?

Report · Mar 03, 2012

I don't know exactly how to load and parse the file which is why I am asking for help in doing that. The only programming language I have used is VB and to do this in VB it would be very simple using a streamreader variable, but I do not have any experience in actionscript. I was hoping there would be a simple way of just changing the location the variable receives its data, from the hardcoded string to a string within an external XML file.

Report · Mar 03, 2012

1. what's the file name of the xml file?

2. copy and paste the code used to parse your hardcoded xml string.

Report · Mar 03, 2012

The file is currently named "images.xml".

Here is the pieces of code, that involve the variable I need changed, from a new template (since I have messed around with my current project trying to load in an external file based on sites I've found by Googling, the code has been changed a bit)

import fl.data.DataProvider;
import fl.events.ListEvent;
import fl.transitions.*;
import fl.controls.*;
// USER CONFIG SETTINGS =====
var secondsDelay:Number = 2;
var autoStart:Boolean = true;
var transitionOn:Boolean = true; // true, false
var transitionType:String = "Fade"; // Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Random
var hardcodedXML:String="<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>";
// END USER CONFIG SETTINGS
// DECLARE VARIABLES AND OBJECTS =====
var imageList:XML = new XML();
var currentImageID:Number = 0;
var imageDP:DataProvider = new DataProvider();
var slideshowTimer:Timer = new Timer((secondsDelay*1000), 0);
// END DECLARATIONS
// CODE FOR HARDCODED XML =====
imageList = XML(hardcodedXML);
fl_parseImageXML(imageList);
// END CODE FOR HARDCODED XML
// FUNCTIONS AND LOGIC =====
function fl_parseImageXML(imageXML:XML):void
{
          var imagesNodes:XMLList = imageXML.children();
          for(var i in imagesNodes)
          {
                    var imgURL:String = imagesNodes;
                    var imgTitle:String = imagesNodes.attribute("title");
                    imageDP.addItem({label:imgTitle, source:imgURL, imgID:i});
          }
          imageTiles.dataProvider = imageDP;
          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;
          title_txt.text = imageDP.getItemAt(currentImageID).label;
}

However, if it will be more helpful I will post the entire template code below here, though I believe the sections above are all that would be needing a change.

import fl.data.DataProvider;
import fl.events.ListEvent;
import fl.transitions.*;
import fl.controls.*;
// USER CONFIG SETTINGS =====
var secondsDelay:Number = 2;
var autoStart:Boolean = true;
var transitionOn:Boolean = true; // true, false
var transitionType:String = "Fade"; // Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Random
var hardcodedXML:String="<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>";
// END USER CONFIG SETTINGS
// DECLARE VARIABLES AND OBJECTS =====
var imageList:XML = new XML();
var currentImageID:Number = 0;
var imageDP:DataProvider = new DataProvider();
var slideshowTimer:Timer = new Timer((secondsDelay*1000), 0);
// END DECLARATIONS
// CODE FOR HARDCODED XML =====
imageList = XML(hardcodedXML);
fl_parseImageXML(imageList);
// END CODE FOR HARDCODED XML
// EVENTS =====
imageTiles.addEventListener(ListEvent.ITEM_CLICK, fl_tileClickHandler);
function fl_tileClickHandler(evt:ListEvent):void
{
          imageHolder.imageLoader.source = evt.item.source;
          currentImageID = evt.item.imgID;
}
playPauseToggle_mc.addEventListener(MouseEvent.CLICK, fl_togglePlayPause);
function fl_togglePlayPause(evt:MouseEvent):void
{
          if(playPauseToggle_mc.currentLabel == "play")
          {
                    fl_startSlideShow();
                    playPauseToggle_mc.gotoAndStop("pause");
          }
          else if(playPauseToggle_mc.currentLabel == "pause")
          {
                    fl_pauseSlideShow();
                    playPauseToggle_mc.gotoAndStop("play");
          }
}
next_btn.addEventListener(MouseEvent.CLICK, fl_nextButtonClick);
prev_btn.addEventListener(MouseEvent.CLICK, fl_prevButtonClick);
function fl_nextButtonClick(evt:MouseEvent):void
{
          fl_nextSlide();
}
function fl_prevButtonClick(evt:MouseEvent):void
{
          fl_prevSlide();
}
slideshowTimer.addEventListener(TimerEvent.TIMER, fl_slideShowNext);
function fl_slideShowNext(evt:TimerEvent):void
{
          fl_nextSlide();
}
// END EVENTS
// FUNCTIONS AND LOGIC =====
function fl_parseImageXML(imageXML:XML):void
{
          var imagesNodes:XMLList = imageXML.children();
          for(var i in imagesNodes)
          {
                    var imgURL:String = imagesNodes;
                    var imgTitle:String = imagesNodes.attribute("title");
                    imageDP.addItem({label:imgTitle, source:imgURL, imgID:i});
          }
          imageTiles.dataProvider = imageDP;
          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;
          title_txt.text = imageDP.getItemAt(currentImageID).label;
}
function fl_startSlideShow():void
{
          slideshowTimer.start();
}
function fl_pauseSlideShow():void
{
          slideshowTimer.stop();
}
function fl_nextSlide():void
{
          currentImageID++;
          if(currentImageID >= imageDP.length)
          {
                    currentImageID = 0;
          }
          if(transitionOn == true)
          {
                    fl_doTransition();
          }
          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;
          title_txt.text = imageDP.getItemAt(currentImageID).label;
}
function fl_prevSlide():void
{
          currentImageID--;
          if(currentImageID < 0)
          {
                    currentImageID = imageDP.length-1;
          }
          if(transitionOn == true)
          {
                    fl_doTransition();
          }
          imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;
          title_txt.text = imageDP.getItemAt(currentImageID).label;
}
function fl_doTransition():void
{
          if(transitionType == "Blinds")
          {
                    TransitionManager.start(imageHolder, {type:Blinds, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Fade")
          {
                    TransitionManager.start(imageHolder, {type:Fade, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Fly")
          {
                    TransitionManager.start(imageHolder, {type:Fly, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Iris")
          {
                    TransitionManager.start(imageHolder, {type:Iris, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Photo")
          {
                    TransitionManager.start(imageHolder, {type:Photo, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "PixelDissolve")
          {
                    TransitionManager.start(imageHolder, {type:PixelDissolve, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Rotate")
          {
                    TransitionManager.start(imageHolder, {type:Rotate, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Squeeze")
          {
                    TransitionManager.start(imageHolder, {type:Squeeze, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Wipe")
          {
                    TransitionManager.start(imageHolder, {type:Wipe, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Zoom")
          {
                    TransitionManager.start(imageHolder, {type:Zoom, direction:Transition.IN, duration:0.25});
          } else if (transitionType == "Random")
          {
                    var randomNumber:Number = Math.round(Math.random()*9) + 1;
                    switch (randomNumber) {
                              case 1:
                                        TransitionManager.start(imageHolder, {type:Blinds, direction:Transition.IN, duration:0.25});
                                        break;
                              case 2:
                                        TransitionManager.start(imageHolder, {type:Fade, direction:Transition.IN, duration:0.25});
                                        break;
                              case 3:
                                        TransitionManager.start(imageHolder, {type:Fly, direction:Transition.IN, duration:0.25});
                                        break;
                              case 4:
                                        TransitionManager.start(imageHolder, {type:Iris, direction:Transition.IN, duration:0.25});
                                        break;
                              case 5:
                                        TransitionManager.start(imageHolder, {type:Photo, direction:Transition.IN, duration:0.25});
                                        break;
                              case 6:
                                        TransitionManager.start(imageHolder, {type:PixelDissolve, direction:Transition.IN, duration:0.25});
                                        break;
                              case 7:
                                        TransitionManager.start(imageHolder, {type:Rotate, direction:Transition.IN, duration:0.25});
                                        break;
                              case 8:
                                        TransitionManager.start(imageHolder, {type:Squeeze, direction:Transition.IN, duration:0.25});
                                        break;
                              case 9:
                                        TransitionManager.start(imageHolder, {type:Wipe, direction:Transition.IN, duration:0.25});
                                        break;
                              case 10:
                                        TransitionManager.start(imageHolder, {type:Zoom, direction:Transition.IN, duration:0.25});
                                        break;
                    }
          } else
          {
                    trace("error - transitionType not recognized");
          }
}
if(autoStart == true)
{
   fl_startSlideShow();
   playPauseToggle_mc.gotoAndStop("pause");
}
// END FUNCTIONS AND LOGIC

Thanks for any help you can give.

Report · Mar 03, 2012

oh, that's good. the loaded and hardcoded xml can use the same parsing:

import fl.data.DataProvider;

import fl.events.ListEvent;

import fl.transitions.*;

import fl.controls.*;

// USER CONFIG SETTINGS =====

var secondsDelay:Number = 2;

var autoStart:Boolean = true;

var transitionOn:Boolean = true; // true, false

var transitionType:String = "Fade"; // Blinds, Fade, Fly, Iris, Photo, PixelDissolve, Rotate, Squeeze, Wipe, Zoom, Random

//var hardcodedXML:String="<photos><image title='Test 1'>image1.jpg</image><image title='Test 2'>image2.jpg</image><image title='Test 3'>image3.jpg</image><image title='Test 4'>image4.jpg</image></photos>";

// END USER CONFIG SETTINGS

// DECLARE VARIABLES AND OBJECTS =====

var imageList:XML = new XML();

var currentImageID:Number = 0;

var imageDP:DataProvider = new DataProvider();

var slideshowTimer:Timer = new Timer((secondsDelay*1000), 0);

// END DECLARATIONS

var urlLoader:URLLoader=new URLLoader();

urlLoader.addEventListener(Event.COMPLETE,xmlLoadedF);

urlLoader.load(new URLRequest("images.xml")); // you may need to deplay executing this until images.xml is created.

function xmlLoadedF(e:Event):void{

imageList = XML(e.target.data);

fl_parseImageXML(imageList);

}

// FUNCTIONS AND LOGIC =====

function fl_parseImageXML(imageXML:XML):void

{

var imagesNodes:XMLList = imageXML.children();

for(var i in imagesNodes)

{

var imgURL:String = imagesNodes;

var imgTitle:String = imagesNodes.attribute("title");

imageDP.addItem({label:imgTitle, source:imgURL, imgID:i});

}

imageTiles.dataProvider = imageDP;

imageHolder.imageLoader.source = imageDP.getItemAt(currentImageID).source;

title_txt.text = imageDP.getItemAt(currentImageID).label;

}

Report · Mar 03, 2012

Thank you very much kind sir. The code makes sense when I read it, I just didn't know how to come up with it in the syntax of actionscript; it does exactly what I was asking for. Now to try to figure out how to customize the look and feel and maybe add some functionality to the template. As always I will attempt to do anything else on my own first before asking for help, but if I need it I will post on the forums for sure. Thanks again! Good Luck!

Report · Mar 03, 2012

you're welcome.

Adobe Community

CS 5.5 Image Gallery Template help

1 Correct answer