# addListener(), getProgress(), loading images!

**URL:** <https://forum.kirupa.com/t/addlistener-getprogress-loading-images/268132>\
**Category:** Uncategorized\
**Created:** [August 10, 2008, 1:22pm UTC](https://forum.kirupa.com/t/addlistener-getprogress-loading-images/268132 "2008-08-10T13:22:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![scag](https://avatars.discourse-cdn.com/v4/letter/s/91b2a8/32.png) [@scag](https://forum.kirupa.com/u/scag)\
**Post date:** [August 10, 2008, 1:22pm UTC](https://forum.kirupa.com/t/addlistener-getprogress-loading-images/268132/1 "2008-08-10T13:22:08Z")

</div>

Hello all, I have been working on this for a very long time, not days but weeks…

Background to my project is a image gallery programme using Flash and PHP. The PHP creates the XML files with data from a SQL table. The Flash project selects the catagory of images to load based on a GUI. Hope this is reasonably clear???

Not to load you all with my code, I shall give a snippet of each function and the order they appear in the .fla file.

// my gallery .fla file

function watchMyImageLoad(mcLoader:MovieClipLoader, image:MovieClip):Void  
{  
// this function is run as per the setInterval setting  
[COLOR=Orange]trace(“watchMyImageLoad”);[/COLOR]  
}

var mclListener:Object = new Object();  
mclListener.onLoadComplete = function(image\_mc:MovieClip)  
{  
// I have this included (at the moment) just to see whats happening  
[COLOR=Orange]trace(“mclListener.onLoadComplete”);[/COLOR]  
}

mclListener.onLoadInit = function(image\_mc:MovieClip)  
{  
// this function i add a mask to the image and place a border around it  
var maskClip:MovieClip = image\_mc.createEmptyMovieClip(“mask\_mc”, image\_mc.getNextHighestDepth());

```
     with (maskClip) 
     {
             // the mask
     }
     image_mc.setMask(maskClip);

     with (image_mc._parent.borderClip) 
     {
             // the border
     }

```

}

[COLOR=black]function loadImages()  
{

```
[/COLOR] [COLOR=black]while (xPosition +(imageWidthList[leftPictureNumber+imagesDisplayed]+(borderThickness*3)) &lt; 700)

```

[/COLOR] [COLOR=black] {  
[/COLOR] [COLOR=black] var img\_mcl:MovieClipLoader = new MovieClipLoader();  
[/COLOR] [COLOR=black] linkLayer = this.createEmptyMovieClip(“link”+(leftPictureNumber+imagesDisplayed), \_root.getNextHighestDepth());  
[/COLOR] [COLOR=black] linkLayer.createEmptyMovieClip(“borderClip”, linkLayer.getNextHighestDepth());  
[/COLOR] [COLOR=black] linkLayer.createEmptyMovieClip(“picture”, linkLayer.getNextHighestDepth());

[/COLOR] [COLOR=black] img\_mcl.addListener(mclListener);  
[/COLOR] [COLOR=black] var intervalImage:Number = 0;  
[/COLOR] [COLOR=black] clearInterval(intervalImage);  
[/COLOR] [COLOR=black] intervalImage = setInterval(watchMyImageLoad, 1000, img\_mcl, linkLayer.picture);  
[/COLOR] [COLOR=black] img\_mcl.loadClip(imageNameList[leftPictureNumber+imagesDisplayed], linkLayer.picture);  
[/COLOR] [COLOR=black] imagesDisplayed++;  
[/COLOR] [COLOR=black][COLOR=Orange] trace(“loadImages”);[/COLOR]  
[/COLOR] [COLOR=black] }  
}

The [COLOR=Orange]trace()[/COLOR] outputs are as follows…  
loadImages  
loadImages  
loadImages  
mclListener.onLoadComplete  
mclListener.onLoadComplete  
mclListener.onLoadComplete  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad  
watchMyImageLoad

There are 3 images, so the [COLOR=Orange]loadImages /COLOR and [/COLOR][COLOR=black][COLOR=Orange]mclListener.onLoadComplete[/COLOR] [/COLOR][COLOR=black]are correct. You notice that the [/COLOR][COLOR=Orange]watchMyImageLoad[COLOR=Black] are in multiples of 3 and continues to run, which is my problem that I am asking for any help.

I am expecting the [/COLOR][/COLOR][COLOR=Orange]watchMyImageLoad[COLOR=Black] only to appear 3 times as there are only 3 images. I believe to stop this continuous repeating of the [/COLOR][/COLOR][COLOR=Orange]watchMyImageLoad[COLOR=Black] function I use the [/COLOR][/COLOR][COLOR=black] clearInterval(intervalImage); statement?

Ok so here is the current [/COLOR][COLOR=black]watchMyImageLoad function…[/COLOR]  
[COLOR=black]  
function watchMyImageLoad(mcLoader:MovieClipLoader, image:MovieClip):Void  
{  
trace("\>\> checking progress now");  
var progress:Object = mcLoader.getProgress(image);  
perc = progress.bytesLoaded / progress.bytesTotal;  
trace("bytesLoaded: " + progress.bytesLoaded + " bytesTotal: " + progress.bytesTotal);

```
if (perc == 1)
{
    // I display a pre-loading graphic
    clearInterval(intervalImage);
    trace("clearInterval(intervalImage);");
    perc = 0;
}

```

}

Now the [/COLOR][COLOR=black][COLOR=Orange]trace()[/COLOR] outputs are as follows…  
loadImages  
loadImages  
loadImages  
mclListener.onLoadComplete  
mclListener.onLoadComplete  
mclListener.onLoadComplete  
\>\> checking progress now  
bytesLoaded: 9543 bytesTotal: 9543  
clearInterval(intervalImage);  
\>\> checking progress now  
bytesLoaded: 5920 bytesTotal: 5920  
clearInterval(intervalImage);  
\>\> checking progress now  
bytesLoaded: 8879 bytesTotal: 8879  
clearInterval(intervalImage);  
\>\> checking progress now  
bytesLoaded: 9543 bytesTotal: 9543  
clearInterval(intervalImage);  
\>\> checking progress now  
bytesLoaded: 5920 bytesTotal: 5920  
clearInterval(intervalImage);  
\>\> checking progress now  
bytesLoaded: 8879 bytesTotal: 8879  
clearInterval(intervalImage);

Que: Do I have the order of the functions in the .fla file wrong?  
Que: Have I total got all this wrong?  
Que: Can any one shed some light on this, Please???

Many thanks  
[/COLOR]