loading vars and loading jpgs

Hi there,

Haven't been working with Flash much since Flash5. Now I'm starting all over in MX2004 and I can't get things to work.

Here's the plan:

I've got a php script that reads a directory and returns the total of images; the image names (img0 = bababa.jpg); and the directory in which they are located.

I want to create a photoalbum in which I dynamically load these jpgs one at the time. I was thinking to create a holder for each jpg and then set the visibility of the others to 0 or swap depths. Another solution ofcourse is to load a different jpg in the same holder clip.

Well here is the script I've managed to script/copy/paste together:

Code:

---

var mainTimeline = this;

varSender = new LoadVars();
varSender.cacheKiller = new Date().getTime();

varReceiver = new LoadVars();
varReceiver.onLoad = function (success)
{
  if (success)
          {
            mainTimeline.cc_status.text += (this.total);
        // this.total is a variable reveived thru the php file
        } else {
                //clearInterval(varPreloader);
            mainTimeline.cc_status.text = "load failed!"
        }
}
//varPreloader = setInterval(checkVarStatus,100);

function checkVarStatus () {
  var kbLoaded = Math.floor(varReceiver.getBytesLoaded()/1024);
  var kbTotal = Math.floor(varReceiver.getBytesTotal()/1024);
  if (kbTotal == undefined)
          {
    kbTotal = "???";
          }
  mainTimeline.cc_status.text = kbLoaded + " / " + kbTotal + "Kb";
}

varSender.loaddirectory = "commissions";
varSender.sendAndLoad("http://localhost/pruigrok/load.php", varReceiver, "POST");

/////////// start jpg load //////////

MovieClip.prototype.loadjpg = function(picName, holderName)
{
        var h = holderName==undefined ? "holder" : holderName;
        this.createEmptyMovieClip(h, 1);
        this._visible = false;
        this[h].loadMovie(picName);
        this.onEnterFrame = function()
                {
                        if (this[h]._width > 0)
                                {
                                        this._alpha = 99;
                                        //delete this.onEnterFrame;
                                        this._visible = true;
                                        this.onComplete();
                                }
                        else
                                {
                                        this.onLoading();
                                }
                }
};
x = this.createEmptyMovieClip("xxx",1);

x.onLoading = function()
        {
                if(this.hhh.getBytesLoaded())
                {
                this._parent.cc_status.text = Math.round(this.hhh.getBytesLoaded()/this.hhh.getBytesTotal()*100)+"%";
                }
        }

x.onComplete = function()
        {
                this._parent.cc_status.text = Math.round(this.hhh.getBytesLoaded()/this.hhh.getBytesTotal()*100)+"%";
                this._x = 100;
                this._y = 100;
        };

datum = new Date();
var count = 0;

function CC_loadJPG()
        {
                if(count+1<=varReceiver.total)
                        {
                        x.loadjpg("http://localhost/"+varReceiver.imgfolder+varReceiver["img"+count]+'?'+datum.getTime(), 'jpg'+count);
//varReceiver.imgfolder and varReceiver.img0 thru varReceiver.img10 are received thru the php file
                        count++;
                        }
        }
stop();

---

I placed it in a frame of the main timeline. So the script automatically loads the vars onenterframe. Then on click I call the CC_loadJPG function which loads a jpg.

I think it's the best solution to load the jpgs in different holder clips. But how would I do this? And still have the loading status work? And how would I best hide the other holder mc's when the new jpg is loaded?

Any hints?

Cheers,
Gekke_Hollander

Create a new holder for each jpg image. First, put all your holder clips inside a bigHolder. Then do something like this:

code:

---

function CC_loadJPG()

	{

		if(count+1<=varReceiver.total)

			{

                        var x = bigHolder.createEmptyMovieClip("holder" + count, count + 100);

			x.loadjpg("http://localhost/"+varReceiver.imgfolder+varReceiver["img"+count]+'?'+datum.getTime(), 'jpg'+count);

//varReceiver.imgfolder and varReceiver.img0 thru varReceiver.img10 are received thru the php file

			count++;

			}

	}

---

You could modify the code that get run when the JPG is loaded, to make other clips invisible:

code:

---

x.onComplete = function()

	{

                for (var mc in this._parent) {

                       if (this._parent[mc] != this) {

                             this._parent[mc]._visible = false;

                       }

                }

		this._x = 100;

		this._y = 100;

	};

---

Your loading status update seems misplaced -- in the onComplete() function, it will run only when the JPG is fully loaded.

Hi mkantor,

Thanx for the reply!! I have the loading status in x.onloading as well but also in x.oncomplete because otherwhise it wouldn't say 100%. It keeps updating with x.onloading untill and not including the moment it hits a 100%. Maybe that clears it up.

The code I have now is this:

Code:

---

MovieClip.prototype.loadjpg = function(picName, holderName)
{
        var h = holderName==undefined ? "holder" : holderName;
        this.createEmptyMovieClip(h, 1);
        this._visible = false;
        this[h].loadMovie(picName);
        this.onEnterFrame = function()
                {
                        if (this[h]._width > 0)
                                {
                                        this._alpha = 99;
                                        //delete this.onEnterFrame;
                                        this._visible = true;
                                        this.onComplete();
                                }
                        else
                                {
                                        this.onLoading();
                                }
                }
};
bigholder = this.createEmptyMovieClip("xxx",1);

x.onLoading = function()
        {
                if(this.hhh.getBytesLoaded())
                {
                this._parent.cc_status.text = Math.round(this.hhh.getBytesLoaded()/this.hhh.getBytesTotal()*100)+"%";
                }
        }

x.onComplete = function()
        {
                for (var mc in this._parent) {
                if (this._parent[mc] != this) {
                        this._parent[mc]._visible = false;
                }
        }
                this._parent.cc_status.text = Math.round(this.hhh.getBytesLoaded()/this.hhh.getBytesTotal()*100)+"%";
                this._x = 100;
                this._y = 100;
        };

datum = new Date();
var count = 0;
function CC_loadJPG()
{
        if(count+1<=varReceiver.total)
        {
                            var x = bigHolder.createEmptyMovieClip("holder" + count, count + 100);
                x.loadjpg("http://localhost/"+varReceiver.imgfolder+varReceiver["img"+count]+'?'+datum.getTime(), 'jpg'+count);
                count++;
        }
}
stop();

---

The problem now is the x.onloading and the x.oncomplete. They get run but they don't do the actions. I guess because their targets are incorrect. I don't understand object orientated that good so I don't really understand what I should tell the functions.

For instance:
this._x = 100;

Should be the _x of the holderclip accoring to the bigholder right??

Another example:
this.hhh.getBytesLoaded())

Should be this.getBytesLoaded()) in order to get the bytes loaded of the jpg holder?

I'm trying to read all I can about this type of scripting but I can't seem to grasp it...

Thanx again,
Gekke_Hollander


EDIT-------

Quote:

---

The problem now is the x.onloading and the x.oncomplete. They get run but they don't do the actions.

---

They seem not to get run!

I'm not sure what x is. It doesn't seem to be defined until after properties are assigned to it. Also, you refer to "hhh", but I don't see where that is defined.

Also, you could call the loadjpg metod of the new clip, "holder", rather than of x.

Try this code. Name your pictures pic01.jpg through pic06.jpg. Notice that I haven't included the Movieclip.prototype.loadjpg function, which needs no modification. This will load the JPG's correctly. I didn't look at your load-progress indicator.

code:

---

this.createEmptyMovieClip("bigHolder",1);



// define global functions for use by individual movie clips

_global.onLoading = function() {

	if(this.hhh.getBytesLoaded()){

		this._parent.cc_status.text = Math.round(this.hhh.getBytesLoaded()/this.hhh.getBytesTotal()*100)+"%";

	}

}



_global.onComplete = function() {

	// make other images dim, but still visible

	for (var mc in this._parent) {

		if (this._parent[mc] != this) { 

			this._parent[mc]._alpha = 20;

		}

	}

	

	this._parent.cc_status.text = Math.round(this.hhh.getBytesLoaded()/this.hhh.getBytesTotal()*100)+"%";

	this._x = Math.random()*400;   // place in different spots

	this._y = Math.random()*300;

	this.onPress = startDrag;  // make pictures draggable

	this.onRelease = stopDrag;

};



	

datum = new Date();

// var count = 0;

var count = 1;

function CC_loadJPG() {

//        if(count+1<=varReceiver.total)

	if (count < 7) {				

		/* the variable x is defined inside a function.  It does not exist outside

                 of this function */

		var x = bigHolder.createEmptyMovieClip("holder" + count, count + 100);

				

		// we attach the global functions to this movie clip 

		x.onLoading = _global.onLoading;

		x.onComplete = _global.onComplete;

                // x.loadjpg("http://localhost/"+varReceiver.imgfolder+varReceiver["img"+count]+'?'+datum.getTime(), 'jpg');

		x.loadjpg("pic0" + count + ".jpg");

		count++;

	}

}



load_btn.onRelease = CC_loadJPG;

---

Hmmz... it's still not how I would like to see it.

But your code showed me how to fix some stuff of which I didn't know the correct syntax. Here's my code. Working exactly how I wanted it: preloading the vars and preloading the images. It might help other folks out there. (btw the php output is like this: )

PHP Code:

---

&imgfolder=upload/folder1/&total=3&img0=CIMG0763.JPG&img1=CIMG0764.JPG&img2=CIMG0765.JPG 


---

Nice to know: Images outputed by php have a max width or height of 500, hence the offWh and the OffWw. The images are now place centered to the bigholder mc

Code:

---

/// start vars loading
var varsLoaded = false;
var mainTimeline = _root;
varSender = new LoadVars();
varSender.cacheKiller = new Date().getTime();
varReceiver = new LoadVars();
varReceiver.onLoad = function (success)
{
  if (success)
          {
                x.cc_status.text += (this.total);
                varsLoaded = true;
        } else {
                //clearInterval(varPreloader);
            mainTimeline.cc_status.text = "load failed!"
        }
}
//varPreloader = setInterval(checkVarStatus,100);

function checkVarStatus () {
  var kbLoaded = Math.floor(varReceiver.getBytesLoaded()/1024);
  var kbTotal = Math.floor(varReceiver.getBytesTotal()/1024);
  if (kbTotal == undefined)
          {
    kbTotal = "???";
          }
  mainTimeline.cc_status.text = kbLoaded + " / " + kbTotal + "Kb";
}

varSender.loaddirectory = "commissions";
varSender.sendAndLoad("http://localhost/pruigrok/load.php", varReceiver, "POST");

/// start jpg loading

MovieClip.prototype.loadjpg = function(picName, holderName)
        {
                var h = holderName;
                this.createEmptyMovieClip(h, count);
                //this._visible = false; 
                this[h].loadMovie(picName); 
                this[h]._alpha = 100; 
                this.onEnterFrame = function() 
                                                                {
                                                                        if (this[h]._width > 0) 
                                                                                {
                                                                                        this._alpha = 99;
                                                                                        delete this.onEnterFrame;
                                                                                        //this._visible = true;
                                                                                        this.cc_status._visible = false;
                                                                                        this[h].onComplete = _global.onComplete(this[h]);
                                                                                }
                                                                        else
                                                                                {
                                                                                        ff = getTimer()/1000;
                                                                                        if((getTimer()/1000)-ff > 1)  // don't show progress if time to load is less than a sec
                                                                                        {
                                                                                                this.cc_status._visible = true;
                                                                                        }
                                                                                        this[h].onLoading = _global.onLoading(this[h]);
                                                                                }
                                                                }
        };

_global.onLoading = function(what)
                                {
                        if(what.getBytesLoaded())
                                        {
                                                what._parent.cc_status.text = Math.round((what.getBytesLoaded()/1024))+"/"+Math.round((what.getBytesTotal()/1024))+"Kb"
                                //what._parent.cc_status.text += " | "+Math.round(what.getBytesLoaded()/what.getBytesTotal()*100)+"%";
                                }
                                }
_global.onComplete = function(what)
                                {
                                what._parent.cc_status.text = Math.round((what.getBytesLoaded()/1024))+"/"+Math.round((what.getBytesTotal()/1024))+"Kb"
                          //what._parent.cc_status.text += " | "+Math.round(what.getBytesLoaded()/what.getBytesTotal()*100)+"%";
                                for (var mc in what._parent)
                                        {
                                      if (what._parent[mc] != what)
                                                        {
                                                                what._parent[mc]._alpha = 0;
                                        }
                                        }
                                       
                                        what._x = (offWw-what._width)/2;
                                        what._y = (offWh-what._height)/2;
                                };
                               
x = createEmptyMovieClip("bigholder",1);
x.createTextField("cc_status", -1, 0, 0, 300, 20);
x._x = 40;
x._y = 40;
var offWw = 500;
var offWh = 500;

var count = -1;
datum = new Date();

function CC_fwdJPG()
        {       
                if(count+1<varReceiver.total && varsLoaded == true)
                        {
                                count++;
                                x.loadjpg("http://localhost/"+varReceiver.imgfolder+varReceiver["img"+count]+'?'+datum.getTime(), "smallholder"+count);
                        }
        }

function CC_bckJPG()
        {
                if(count-1>=0 && varsLoaded == true)
                        {
                                count--;
                                x.loadjpg("http://localhost/"+varReceiver.imgfolder+varReceiver["img"+count]+'?'+datum.getTime(), "smallholder"+count);
                        }
        }
       
load_btn.onRelease = CC_fwdJPG;
load_btn2.onRelease = CC_bckJPG;

---

Uncomment the varPreloader lines to have progress text on the vars also!! Uncomment the //what._parent.cc_status.text += " | "+Math lines to have a precentage load progress...

Thanx & cheers,
Gekke_Hollander