Simple AS3 Slideshow Widget: Part 1

This is a simple example of how to build a dynamic slideshow widget in Flash using ActionScript 3.0 such as the one seen here.

The first thing you’ll need to do is set up an FLA with the properties you’d like to exhibit. Stage resolution is set to 500×300 with a black background. This will vary depending on the size of your generated images. Be sure that your FLA is set to use ActionScript 3.0 and declare your document class, in this case “SlideShow”.

Let’s set up a PHP file to read from the directory of our choosing and return a list of images to us.

$firstrun = true;
$files = "";
$dir = opendir("images");

So, here we declare some variables. “$firstrun” to determine where we are in our loop, and “$files” to hold the comma-delimited list the loop will produce. “$dir” is a directory reference for our image directory.

while (false !== ($file = readdir($dir))) {
	if (strpos($file, ".gif", 1) || strpos($file, ".jpg", 1) || strpos($file, ".png", 1)) {
		if($firstrun){
			$files = $files . "" . $file;
			$firstrun = false;
		}else{
			$files = $files . "," . $file;
		}
	}
}
echo $files;

The next part is pretty simple as well. We create “$files” and populate it with all of the files in our directory. Next, we simply loop over each item and look for certain character sequences to determine whether we should include a particular file in our list of images. You can see that the “$firstrun” Boolean is used here to determine comma placement for each item.

It is assumed at this point that we have also generated a set of images to use in our slide show and have dumped them into our “images” directory on the server.

So now it’s time to create an ActionScript class to use as the FLA document class. We called this class “SlideShow” in our FLA so this is the exact name we will need to give the file “SlideShow.as”.

package {
	import flash.display.Sprite;
	public class SlideShow extends Sprite {
		public function SlideShow():void {}
	}
}

Here is the basic setup for our SlideShow class. It extends flash.display.Sprite so we have to be sure to import that in our package. Planning our class, we are going to need to define a few different methods:

gatherFiles()
This will be used to create a connection to the server and run the PHP code we previously created.

urlComplete()
Will handle the processing of the comma-delimited String which is returned by PHP and the setup of our display objects on the Stage.

switchImage()
Will handle the image management and loading features.

imageLoaded()
This will serve to process our image transitions and is triggered as each image load completes.

In Part 2, we will look at each of these methods in detail.

6 thoughts on “Simple AS3 Slideshow Widget: Part 1”

  1. as PHP´s strpos() function is case sensitive, I suggest to apply strtolower to the $file variable, otherwise files with an uppercase suffix (whatever.JPG) will be ignored.

    Cheers,
    Günter

  2. Pingback: Website Directory - Graphics

  3. Pingback: WidGet Blog » Blog Archive » In Flagrante Delicto! » Simple AS3 Slideshow Widget: Part 1

  4. Pingback: In Flagrante Delicto! » Simple AS3 Slideshow Widget: Part 2

  5. Pingback: In Flagrante Delicto! » Simple AS3 Slideshow Widget: Part 3

Leave a Comment

Your email address will not be published. Required fields are marked *