Get images from a folder and render it random into a banner?
Hi guys,
First, I started out with a simple flash-movie where I putted all the pictures I wanted in my banner and rendered it. However, I have found that it isn't exactly what I'm looking for.
I don't know what to call it, so here goes an example:
I have a folder called: header_images. In that folder I put all the images I want to be rendered in my banner, each time random. The image should change to another one from the folder in like some minutes, just like a slideshow.
If I want to change or add an image to the banner slideshow, then I simple put it or delete it from the folder and the script will no longer render it into my banner.
I've already searched google and various websites, but I don't know what that kind of application is called, so any examples or tutorials would be really appriciated. If it even CAN be done?
You will need to use a server side language to read the directory and generate an xml file with the images in a random order. Then you can use actionscript to read the dynamic xml file to get your photos and any other info you need.
__________________
||||If you are getting paid to do a job, don't ask for help on it!||||
I did some research which turned into a nice tutorial on how to generate an .xml file with php. However, I'm now stuck - With no further knowledge in xml and actionscript I don't know what to do now.
Here's what I got so far, which should generate my .xml file (Added some comments to make it easier to figure out):
PHP Code:
<?php
/*Inform if the script should invert Windows slashes (’\’ to ‘/’). It’s true if you run the script on Windows and then need to move it to Linux or another Unix platform. */
$invertSlash = false;
/*The list of directories the script should read and create an XML file for. Inform the path relative to the location of the xmlgen.php*/
$directoryList = array('images/header_images');
/*The name of the XML file to be generated.*/
$xmlFileName = 'header_images.xml';
/*The name of the root tag. (Applies to the order of the .xml file tags)*/
$rootTagName = 'Images';
/*The name of the root immediate child tags (the directory entries tag). (Applies to the order of the .xml file tags)*/
$childTagName = 'Image';
/*The tag list of each directory entry. You need to provide a pair of ‘tagName’ => ‘tagValue’ for each desired tag. */
$childTagList = array('name' => 'images/header_images');
?>
// import the Delegate class
import mx.utils.Delegate;
// declare a new XML instance
var peoplexml:XML = new XML();
function onXmlLoaded(success:Boolean) {
if (success) {
// do whatever you want to do if the XML file was read successfully
// use peoplexml.firstChild to access the main node
} else {
// do whatever you want to do if an XML read error occurred
}
}
function init() {
// ignore tabs, returns, and other whitespace between nodes
peoplexml.ignoreWhite = true;
// set the scope of the onLoad function to the main timeline, not peoplexml
peoplexml.onLoad = Delegate.create(this, onXmlLoaded);
// start loading the file
peoplexml.load("file.xml");
}
init();
Try pasting the code above into a new blank movie, replacing "// do whatever you want to do if an XML read error occurred" with "trace('error reading file');" (without quotes) and you should see your error message, plus a Flash built-in error message, appear in the Output panel when the movie is tested.
But. As I've understood it, the php file I created (code in the previous post) should generate the xml file for me to load. However, when I load that php page, nothing gets generated = I have no xml file to load.
I don't think I've grasped the whole concept, and if I'm right about that, please enlighten me. All this is new to me.
You need generate the xml file nodes and parent elements however you also need to pass the correct headers so the browser knows its an xml file. Something like this should work
PHP Code:
<?php
/* This is a sample file that reads through a directory, filters the jpg files and builds an xmllist from it. After looking through this file, you'll probably 'get the idea' and'll be able to setup your own directory. */
// search for jpg files $filter = ".jpg"; // path to the directory you want to scan $directory = "images/header_images/";
// read through the directory and filter files to an array $d = dir($directory); if ($d) { while($entry=$d->read()) { $ps = strpos(strtolower($entry), $filter); if (!($ps === false)) { $items[] = $entry; } } $d->close(); shuffle($items); }
// third, the playlist is built in an xspf format // we'll first add an xml header and the opening tags .. header("content-type:text/xml;charset=utf-8");
Something like this should work PHP Code:
Warning: shuffle() expects parameter 1 to be array, null given in C:\Documents and Settings\User\Path\To\File\generator.php on line 37
Warning: Cannot modify header information - headers already sent by (output started at C:\Documents and Settings\User\Path\To\File\generator.php:12) in C:\Documents and Settings\User\Path\To\File\generator.php on line 42
Did you edit the path name? I tested this on my server and it works fine. Thats saying that the array was never populated. You will have to edit the filter as well if the images aren't jpg.
__________________
||||If you are getting paid to do a job, don't ask for help on it!||||
Oh, I thought so as it was within the php tags, but now I really see.
Well, apparently it works then, as it returns no errors but just gives me this: http://behrentzs.com/sites/Hjemmeside/xml.php
Would that be correct? If yes, should I then paste the url into following code:
Code:
// import the Delegate class
import mx.utils.Delegate;
// declare a new XML instance
var peoplexml:XML = new XML();
function onXmlLoaded(success:Boolean) {
if (success) {
// do whatever you want to do if the XML file was read successfully
// use peoplexml.firstChild to access the main node
} else {
// do whatever you want to do if an XML read error occurred
}
}
function init() {
// ignore tabs, returns, and other whitespace between nodes
peoplexml.ignoreWhite = true;
// set the scope of the onLoad function to the main timeline, not peoplexml
peoplexml.onLoad = Delegate.create(this, onXmlLoaded);
// start loading the file
peoplexml.load("xml.php");
}
init();
Yes thats accurate but its not reading the photos from the directory meaning the path to the directory is likely incorrect. It should return something like this: http://prod.freehostia.com/test.php
__________________
||||If you are getting paid to do a job, don't ask for help on it!||||
// import the Delegate class
import mx.utils.Delegate;
// declare a new XML instance
var peoplexml:XML = new XML();
function onXmlLoaded(success:Boolean) {
if (success) {
// do whatever you want to do if the XML file was read successfully
// use peoplexml.firstChild to access the main node
} else {
// do whatever you want to do if an XML read error occurred
}
}
function init() {
// ignore tabs, returns, and other whitespace between nodes
peoplexml.ignoreWhite = true;
// set the scope of the onLoad function to the main timeline, not peoplexml
peoplexml.onLoad = Delegate.create(this, onXmlLoaded);
// start loading the file
peoplexml.load("xml.php");
}
init();
Right?
If correct, would I then insert the above code into a .as file and then somehow link to the file in my document or what should I do?
Thank you a lot for the help so far!! Without you I would not even have got started on this.
Now you just have load the xml file into your flash document then loop through the nodes in the xml file. You just have to do some research on your own now.
__________________
||||If you are getting paid to do a job, don't ask for help on it!||||
Okay, I tried some different things, but all didn't work. When I view the flash document nothing happens.
I don't think I've really got the grasp on this, but I'm trying. This is what I have so far, though it does not work.
As far as I've understood, the bottom part should loop the child notes.
But since I don't really know how to do it, I've gone through pretty many search results now, I still can't do it.
Code:
var xm:XML = new XML();//creating XML object
xm.ignoreWhite = true;//white spaces will be discarded
xm.onLoad = function() {//function will be call when xml file data loaded into xml object
trace(this)
};
xm.load("xml.php");//loading the xml file data into xml object
Song_Array = new Array;
myXML = new XML;
myXML.ignoreWhite = true;
myXML.onLoad = function(success:Boolean) {
trace("success: "+success);
trace("loaded: "+this.loaded);
trace("firstChild: "+this.firstChild.childNodes.length);
TotalNumOfSongs = this.firstChild.childNodes.length;
TotalNumOfInfoPerSong = this.firstChild.firstChild.childNodes.length;
for (var i=0; i<this.firstChild.childNodes.length; i++)
{
var _node = this.firstChild.childNodes[i];
Song_Array[i] = new Array();
trace("_node:"+_node.childNodes.length);
for (var j=0; j<_node.childNodes.length; j++)
{
Song_Array[i].push(_node.childNodes[j].firstChild.nodeValue);
trace("~~~ childNodes: "+_node.childNodes[j].firstChild.nodeValue);
}
}
//trace("songName, songArtist, songPath:"+ [songName, songArtist, songPath]);
trace("Song_Array.length: "+Song_Array[1]);
};
myXML.load("xml.php");
Before you post, read our: 
