HostMySite.Com is sponsoring this tutorial, please visit their site today!

SlideShow Revisited by: Marcus J. Dickinson

[Download in PDF Format] [Download in FlashPaper Format]

Slideshow Revisited

If you remember our “Flash Remoting in under Ten Minutes” tutorial, you may have an idea of what this new tutorial is about.

The source files for this tutorial can be found at:
http://www.flashgoddess.com/tutorials/SlideShowRev.zip

In our first Remoting tutorial we created a slideshow, which retrieved the image names from a database, then looked in an “images” folder for those images. 

After giving this some thought, I realized it is not the most efficient way to do this. After all, why enter in data twice when we have the ability to enter it only once? Today, we are going to learn about CFDIRECTORY, which will scan our images directory for us, returning every name it finds in that directory to us in Flash as an array. At that point, we simply use our existing SlideShow script to play the show.

PART 1 A Better Backend

What could be better than none? We have no database, and therefore no backend. No DSN usage. There is nothing at all to do here. I like this already.

PART 2 Minimal Middleware

Because there is no backend database to deal with, we can significantly reduce the amount of code we use to retrieve our information.

We begin this tutorial by creating our CFC, named slideEngine.cfc. We are going to have one function, as before, only this one is maximized for performance:

<cfcomponent>
<cffunction name="slideProvider" access="remote">

This is the magic. We simply tell CFMX what directory we would like it to scan, and it will put every item it finds into an array by name.

<cfdirectory directory="C:\Inetpub\wwwroot\slideShow\images"
name="myDirectory" 

We also throw in a date sort for fun, so that new images will always be added to the end of our slideshow.
sort="datelastmodified ASC">

<cfreturn myDirectory>
</cffunction>
</cfcomponent>
PART 3 Familiar Frontend

For the most part, our front end remains untouched. We still connect to our service as we always have in Remoting, and our slideShow functionality is the same. The only difference we make is how we access the data.

#include "NetServices.as"
#include "NetDebug.as"
//#include "Dataglue.as"
// initialize your Flash Remoting connection
if (inited == null) {
    inited = true;
    NetServices.setDefaultGatewayUrl("http://localhost/flashservices/gateway");
    gateway_conn = NetServices.createGatewayConnection();
    // establish your CFC as a service
    myService = gateway_conn.getService("slideShow.slideEngine", this);
    // call that service once a connection has been made to start the slideshow
    myService.slideProvider();
}

This is the function we are modifying. This time we access the image through its name property from our Result object.

function slideProvider_Result(result) {
    var imgURL = "images/"+result.items[0].name;
    imageHolder.loadMovie(imgURL);
    thisImage = setInterval(showImage, 7000, i=1);
    function showImage() {
    imageHolder.loadMovie("images/"+result.items[i].name);
    if (i<result.items.length-1) {
        i++;
    }
      else {
            i = 0;
            }
    }
}

// create the MC to hold the images
_root.createEmptyMovieClip("imageHolder", 1);

// offcenter it to be special
imageHolder._x = imageHolder._y=20;

And that’s it. It works the same as before, only now, instead of having to put an image in the appropriate directory AND entering the name into a database, we just put our image in the correct directory, and we are ready to go.

HostMySite.Com is sponsoring this tutorial, please visit their site today!

Please rate this tutorial:

Post a new comment on this tutorial
post a new comment on this particular tutorial
Your Name:
Your Email:
Comment Title:
Comments:
Key Phrase: