Amen KAMALELDINE

Amen is an industrial informatics engineer. he studied the first four years of his education in Faculty of Engineering in Lebanon. He went to France to Continue his studies by doing the fifth year of engineering and the master TIS (Technologie Information et Système) in the same time at UTC (Université de Technologie de Compiègne). He also work as a freelancer in flash development field. He is always interessted in the new multimedia technologies.

View all articles by Amen KAMALELDINE

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

Happy flashing.