In this Flash actionscript 3.0 tutorial we will be making an image slideshow from an external source.
Meaning we have a couple of images in jpg format, and an external text file containing information about location, filenames and how many image files we are handling.
First off, you dont need to prepare anything on the visual part, but I made just a simple frame so it looks like the images is in the frame.
So now we need to prepare some image files, I just made 3 simples images, with dimensions 200 by 200 pixels, and saved them in jpg format.
Finally I named them a.jpg, b.jpg, c.jpg just to make it simple.
Now we need to prepare the text file to contain information about the images file.
Just open notepad and type in the following. and save it as words.txt.
Remember to keep everything in the same folder, so we can access all without using subdirectories, just for the simplicity.
Now for some coding. Type in the following code in the actionscript.
I have made the code description within the code so you can follow along while reading the code.
// First we create a loader to load the information from the text file
var myLoader:URLLoader = new URLLoader();
// Here we tell our new loader which file to handle (words.txt).
myLoader.load(new URLRequest("words.txt"));
// Adding an eventlistener to listen and execute a function when
// myLoader has loaded the text file.
myLoader.addEventListener(Event.COMPLETE, textLoaded);
// Now we create an array to hold the content of the text file separately
var imgs_:Array = new Array();
// Now here is the function that is executed when the text file has been loaded
function textLoaded(event:Event):void
{
// this function takes the words string "a.jpg,b.jpg,c.jpg"
// and splites it into 3 seperate strings in the array.
var wordString:String = event.target.data;
imgs_ = wordString.split(","); //split method, make a new index when it sees the comma
}
// This is just a simple timer function, which executes the showSlide function
// every 3 seconds (and we also set it to load 3 times once for every image).
var threeSeconds:Timer = new Timer(3000, imgs_.length);
threeSeconds.start();
// an eventlistener to listen and execute the function every 3 seconds.
threeSeconds.addEventListener(TimerEvent.TIMER, showSlide);
// here is the function to do the most work on loading the images
function showSlide(event:TimerEvent):void
{
// we create a loader instance
var imgs_Loader:Loader = new Loader();
// tell it to load a new URLRequest, of the imgs_ and refer to the event.target.currentCount
imgs_Loader.load(new URLRequest(imgs_[event.target.currentCount-1]));
// The last thing we need to to add the images to the stage,
// for that we have a separate function called loadComplete.
imgs_Loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
}
function loadComplete(event:Event):void
{
// For loading in the image information from the event.target.content
// we make an bitmap instance named image
var image:Bitmap = Bitmap(event.target.content);
// adding the bitmap instance to the stage with the addChild
addChild(image);
// This is just setting the x and y location so it fit in the frame I made.
image.x = 80;
image.y = 40;
}
That was a lot of code, but try to copy it in to your own project, or you can download an example here.
Download button