Groups | Blog | Home
all groups > flash actionscript > november 2004 >

flash actionscript : Looking for Suggestions . . .


Dagh
11/11/2004 10:47:58 PM
I am looking to create a page on a web site that will scroll through and display images from a folder in the web. Any ideas on the best method?

VisionaryStudios
11/11/2004 11:05:13 PM
Use PHP with Flash. Or use ASP/PERL or flash remoting maybe or flash
communication server maybe. Flash alone can not do that.

Check out http://www.urbanbloom.com that is exactly what I did. The
scrolling photos are not embedded in the flash file they reside in a folder the
photographer can change at will.
Dagh
11/11/2004 11:36:59 PM
proxmaster
11/12/2004 3:54:52 AM
It is certainly possible to accomplish this without using PHP or ASP.
I have built this process using Flash and an XML which works very well. It
may be a little confusing at first glance if you are not familiar with XML.


The following would be how you would format your XML file with the various
images you would like to be able to load into your Flash project. You can enter
this into a regular text file and save it with an .xml extention and then place
it in the same location as your .swf file. You can add as many <imageNode> tags
as you wish. The jpegURL must point to the correct path of the image location.



<?xml version="1.0"?>

<IMAGES>
<imageNode jpegURL="images/slide1.jpg">Description 1</imageNode>
<imageNode jpegURL="images/slide2.jpg">Description 2</imageNode>
<imageNode jpegURL="images/slide3.jpg">Description 3</imageNode>
<imageNode jpegURL="images/slide4.jpg">Description 4</imageNode>
</IMAGES>


//This would be the code in your flash project on the _root level to load the
XML file and advance through the various images.

images_xml = new XML();
images_xml.onLoad = startImageViewer;
images_xml.load("images.xml");
images_xml.ignoreWhite = true;

function startImageViewer(success) {
if (success == true) {
rootNode = images_xml.firstChild;
totalImages = rootNode.childNodes.length;
firstImageNode = rootNode.firstChild;
currentImageNode = firstImageNode;
currentIndex = 1;
updateImage(firstImageNode);
}
}

function updateImage(newImageNode) {
imagePath = newImageNode.attributes.jpegURL;
//targetClip is the name of an empty movie clip instance
on the stage
targetClip.loadMovie(imagePath);
}

//This function can be called from a timer or another event to cycle through
the images
function advanceImage() {
nextImageNode = currentImageNode.nextSibling;
if (nextImageNode == null) {
currentImageNode = firstImageNode;
currentIndex = 1;
updateImage(firstImageNode);
} else {
currentIndex++;
updateImage(nextImageNode);
currentImageNode = nextImageNode;
}
}

dotnet2flash
11/12/2004 4:35:39 AM
proxmaster's method is definitely the most flexible and lightweight method of
implementing your image gallery. It is also pretty extensible...For instance,
what if you wanted to load in flash movie files from a web folder instead of
jpeg's? Same method. Only if you expect the content you have in the web folder
to change on a regular basis would you really want to use ASP/JSP/etc., but
here again you'd still be using it to dynamically build and stream xml files to
your flash movie with the same intent as before. There are always several ways
to do things, but there are usually only a few really good ones.
proxmaster
11/12/2004 5:10:38 AM
Yes, there are certainly other ways to accomplish this very thing. Another way
that would also work would be to use an external .as file to store the image
data in. This external .as could be import into the project and the data values
read in and stored in an Array and used as need. I have not attempted this
process for this exact type of application but it should work in theory. The
process would really be very similar to the one I have provided except for
using .as file instead of XML.
dotnet2flash
11/12/2004 6:06:22 AM
proxmaster
11/12/2004 6:24:49 AM
Yes I am an advocate for XML, Flash Remoting, ASP.NET and Webservices as well,
but unfortunately those tools are usually beyond the scope of this forum and
most users do not have access to these wonderful tools. ;)

http://www.proxmx.com
nacho8778
11/12/2004 7:48:35 PM
can you show how to acces the image descriptions in that xml file using your
existing code. I'd like to create a rotator like what you have started, but
also so some text. Is that possible? I'm not very familiar with XML.. how
would I reference the text within the nodes? thanks for a great example!
proxmaster
11/12/2004 8:54:26 PM
This can simple accomplished by modifing the XML file to include an additional
attribute as such 'desc' and setting its desired value as follows:

<?xml version="1.0"?>

<IMAGES>
<imageNode jpegURL="images/slide1.jpg" desc="Description 1">Description
1</imageNode>
<imageNode jpegURL="images/slide2.jpg" desc="Description 2">Description
2</imageNode>
<imageNode jpegURL="images/slide3.jpg" desc="Description 3">Description
3</imageNode>
<imageNode jpegURL="images/slide4.jpg" desc="Description 4">Description
4</imageNode>
</IMAGES>


//Then modify the above function as follows to retreive the value:
function updateImage(newImageNode) {
imagePath = newImageNode.attributes.jpegURL;
//Here is where you reference the description value and assign it to your
desired object
myTextBox.text = newImageNode.attributes.desc;
//targetClip is the name of an empty movie clip instance on the stage
targetClip.loadMovie(imagePath);
}
nacho8778
11/12/2004 9:32:35 PM
thanks ProxMaster! This is really simple now that I see how you did it. One
last thing, how could I put a nice dissolve between the images? I am using a
setInterval: //set the interval for the image rotation for every 10 seconds
setInterval(advanceImage,10000) The transition between images is, of course,
choppy. Is there an easy way to add a nice dissolve between the images? I was
thinking of putting a white box over the entire movie stage and setting the
alpha up and down to create a dissolve Thanks again !
AddThis Social Bookmark Button