loading vars and loading jpgs

[Gekke_Hollander]

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:

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

[mkantor]

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.

[Gekke_Hollander]

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:

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-------

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!

[mkantor]

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.

[mkantor]

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;

---

[Gekke_Hollander]

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: )

&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

/// 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