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?
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.
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; } }
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.
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.
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
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!
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); }
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 !
Don't see what you're looking for? Try a search.
|