In this tutorial you will learn how to create a flash photo album that loads external images, from a path that is specified in an external text file, we can use php language to make it more dynamic by making a script that will go through the folder and count the images, retrive their names and return the value to flash, so we don't need to update the text file if we added some new pictures; before you start you must have the knowledge of Action script language because you will notice that I just highlighted the important script lines.

here's what you are going to make

Ok first create a new folder name it "photo Album" open your flash software and let's start!

  1. Create two buttons name the next and previous; place them where ever you want on the stage of your movie, and name the layer buttons.
  2. Create a new layer name it "images".
  3. Draw a white rectangle with a line border that is hair line that will represent the shadow of the rectangle, although you can use the drop shadow that already exist in flash 8 effects, but this will produce more processor calculation.
  4. Convert you rectangle into a movie clip name it "imagebg", and give it the instance name "imgbg_mc".
  5. Once again convert the movie clip "imgbg_mc" into another movie clip name it "imageContainer" and give it the instance name "imageContainer_mc", center it on your stage or you can dynamically center it by script :

    this.imageContainer_mc._x=Stage.width/2;
    this.imageContainer_mc._y=Stage.height/2;

  6. on a new layer call it script put this code:

    //we use the LoadVars to load the external text file data that contains the images
    //number and urls
    var text_lv = new LoadVars();
    text_lv.load("images.txt");
    //refer the parent of the object in a property so we can access some function that
    //the parent have and inaccessible by the text_lv object.
    text_lv.parent = this;
    //we use the MovieClipLoader so we can determine the width and height of the
    //loaded image so we can perform our animation.
    var img_mcl = new MovieClipLoader();
    var handler = new Object();
    var pos = 1;
    handler.ref = imageContainer_mc.imgbg_mc;
    //functions-----------------------
    handler.onLoadInit = function(target_mc) {
     //center the loaded image.
     target_mc._x = -target_mc._width/2;
     target_mc._y = -target_mc._height/2;
     //initialize the _alpha to 0 so we can animate the fade in effect.
     target_mc._alpha = 0;
     //this function will be explained later.
     tween(this.ref, mx.transitions.easing.Regular.easeOut, "_width", this.ref._width, target_mc._width+10, .5, true);
     tween(this.ref, mx.transitions.easing.Regular.easeOut, "_height", this.ref._height, target_mc._height+10, .5, true, _root, "finish");
    };
    handler.onLoadComplete = function(target_mc) {
     //do nothing.
     trace("image loaded");
    };
    text_lv.onLoad = function(success) {
     if (success) {
      trace("text loaded");
      this.parent.loadImage(text_lv["img1"]);
     } else {
      trace("loadin failed");
     }
    };
    //this function is used to load an image in the imageContainer_mc.holder_mc
    //clip
    function loadImage(path:String) {
     img_mcl.addListener(handler);
     img_mcl.loadClip(path, this.imageContainer_mc.holder_mc);
    }

  7. on a new layer name it btn_script place this code:

    next_btn.onRelease = function() {
     this.enabled = false;
     pos++;
     //this code is to make a circular loading of the image so if the image count
     //is greater than the max number given by text_lv["num"] we reinitialize       //pos to the first image to load
     if (pos>text_lv["num"]) {
      pos = 1;
     }
     loadImage(text_lv["img"+pos]);
    };
    prev_btn.onRelease = function() {
     this.enabled = false;
     pos--;
     if (pos<1) {
      pos = text_lv["num"];
     }
     loadImage(text_lv["img"+pos]);
    };

  8. Again on a new layer name it functions

    //now this function can be used for multiple type of animation for a movie clip //propreties like the alpha,width,height… and it can call a function at the end of //your animation.
    function tween(_mc, easeType, type, begin, end, time, bool, mcf, functionToCall, param) {
     myTween = new mx.transitions.Tween(_mc, type, easeType, begin, end, time, bool);
     myTween.functionToCall = functionToCall;
     myTween.param = param;
     myTween.mcf = mcf;
     myTween.onMotionFinished = function() {
      this.mcf[functionToCall](this.param);
     };
    }
    function finish() {
     //her we call the fading effects for the image, after the background image
     //has perform it’s animation.
     _root.tween(_root.imageContainer_mc.holder_mc, mx.transitions.easing.Regular.easeOut, "_alpha", 0, 100, .5, true, _root, "enable");
    }
    function enable() {
     prev_btn.enabled = next_btn.enabled=true;
    }

9. the content of the images.txt is

num=3&img1=images/image1.jpg&img2=images/image2.jpg&img3=images/image3.jpg


Well I hope this tutorial helped you, and if you have any questions just go to the forums and ask.

Happy flashing.