This is a bit of a mess and it is a little old (you could write it
better), but it works to do what you are asking. It also requires that
you know the bytes of each file before you load. The way I handled this
is to run the swf once and trace out the bytes and then put them into
the bytes array. For the final version I just put the byte size in the
xml doc. You could do this with php dynamically.
Good Luck.
stop();
/*
Set the stage variables
*/
Stage.align = "LT";
// prevent the Flash movie from resizing when the browser window changes
size.
Stage.scaleMode = "noScale";
/* ********************************************
Import the classes required to do tweened animation
*********************************************/
import mx.transitions.Tween
import com.robertpenner.easing.*
init();
function init(){
// get the stage width and height and the center
this.stage_w = Stage.width;
this.stage_h = Stage.height;
this.stage_cen_w = this.stage_w/2;
this.stage_cen_h = this.stage_h/2;
// this is the current swf
num = 0;
// this is a variable to hold the total number of swfs
maxSwfs = 0;
// the max number of bytes for the swfs : derived from the array
maxBytes = 0;
// this is an array of the names of the swfs that are going to
populate
// ui that will be resized.
contentArr = new Array ( "box_content/box_1.swf",
"box_content/box_2.swf",
"box_content/box_3.swf",
"box_content/box_4.swf",
"box_content/box_5.swf",
"box_content/box_6.swf",
"box_content/box_7.swf",
"box_content/box_8.swf",
"box_content/box_9.swf"
);
// an array of the size in bytes of each of the swfs.
you can't get the total of and array of
// images easiily
totalBytes = new Array ("84349", "70577", "65088", "69532",
"155475", "67709", "524", "203893", "8736");
// set the xsale to 0 so the preloader can get bigger
pre_bar_mc.bar_mc._xscale = 0;
// set the max swfs var to the lennth of the array
maxSwfs = contentArr.length;
// loop throught the array of total bytes of the swfs
// to move the preloader bar along
for (i=0; i<totalBytes.length; i++){
maxBytes += Math.round(totalBytes[i]);
//trace("max "+ maxBytes);
}
this.createEmptyMovieClip("temp", 1);
this.temp.createEmptyMovieClip("image", 1);
this.temp._visible = false;
//this.info_txt.text = "Loading Images...";
this.temp.image.loadMovie(contentArr[num]);
//this.thumb = true;
this.runningTotal = 0;
}
this.loadSwfs = function () {
this.stage_w = Stage.width;
this.stage_h = Stage.height;
this.stage_cen_w = this.stage_w/2;
this.stage_cen_h = this.stage_h/2;
this.pre_anim_mc._x = this.stage_cen_w-150;
this.pre_anim_mc._y = this.stage_cen_h-100;
this.pre_bar_mc._x = this.pre_anim_mc._x;
this.pre_bar_mc._y = this.pre_anim_mc._y + 220;
var curr = contentArr[num];
var curr_len = curr.length;
var type = curr.substring(curr_len-3, curr_len);
trace("**********************");
trace("curr "+curr);
trace("curr_len "+curr_len);
trace("type "+type);
trace("______________________");
//trace("center w"+ this.stage_cen_w);
//trace("center h"+ this.stage_cen_h);
var total = temp.image.getBytesTotal();
var loaded = temp.image.getBytesLoaded();
pre_xscale = ((this.runningTotal + total) /
this.maxBytes) * 100;
this.pre_tween_xscale = new Tween(pre_bar_mc.bar_mc,
"_xscale", Expo.easeOut, pre_bar_mc.bar_mc._xscale, pre_xscale, 60,
false);
//pre_bar_mc.bar_mc._xscale = ((this.runningTotal +
total) / this.maxBytes) * 100;
//trace("scale " + bar_mc._xscale);
if ((total > 10) && (total == loaded)) {
this.runningTotal = this.runningTotal +
total;
trace("num "+num);
trace("total " + total);
//trace("running total
"+this.runningTotal);
num++;
//trace("num: "+num);
if (num == maxSwfs) {
delete
this.onEnterFrame;
this.drawUi();
} else {
temp.image.unloadMovie();
temp.image.loadMovie(contentArr[num]);
}
}
};
this.onEnterFrame = this.loadSwfs;
this.drawUi = function(){
this.pre_anim_tween_a = new Tween(this.pre_anim_mc, "_alpha",
Expo.easeOut, this.pre_anim_mc._alpha, 0, 60, false);
this.pre_bar_tween_a = new Tween(this.pre_bar_mc, "_alpha",
Expo.easeOut, this.pre_bar_mc._alpha, 0, 60, false);
this.pre_bar_tween_a._par_obj = this;
this.pre_bar_tween_a.onMotionFinished = function(){
//trace("** this : " + this._par_obj);
this._par_obj.nextFrame();
}
}
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Adrian
Park
Sent: Sunday, March 12, 2006 4:58 AM
To: Flashcoders mailing list
Subject: Re: [Flashcoders] Loading several images with one progressbar?
Hey Sascha,
I see what you mean - the main problem is you have no way of knowing the
sum
total of all the bytes to load when the download process starts.
I like the idea of dividing the bar into segments, one per image. I
think
I'd try something like this:
Lets say there are 5 images to load - image_1, image_2 e.t.c
100/5 = 20
So, we need to map 0-100% of the bytesLoaded for image_1 to the 0-20%
segment on our loading bar, then we map 0-100% of the bytesLoaded for
image_2 to the 20-40% segment on our loading bar and so on, and so on...
The code would look something like so (completely untested!)...
var imageCount:Number = i; // total number of mc's to load
var currentImageNo:Number = c; // the curent image number
var currentImage:MovieClip = this["image_"+currentImageNo]; // reference
to
the current MovieClip/Image
var segmentSize:Number = 100/imageCount; // the size of each segment on
the
loader bar
// map progress to a segmented progress bar
var currentImageProgress:Number = (
currentImage.getBytesLoaded()/currentImage.getBytesTotal()
)/100;
var alreadyLoaded:Number = currentImageNo * segmentSize;
/*
Work out current image's progress as proportion of one segment
i.e. if segmentSize=20, currentImageProgress=50
currentImageProgressMapped=20*(50/100)=10
*/
var currentImageProgressMapped:Number = segmentSize *
(currentImageProgress/100);
var totalCurrentProgress:Number = alreadyLoaded +
currentImageProgressMapped;
// finally, something like
myProgressBar._xscale = totalCurrentProgress;
Of course, the code could be abbreviated a bit but I've broken the steps
of
the calculation out for clarity - I hope it makes sense! Let me know if
this
gets you closer to what you are looking for.
Cheers, Adrian P
On 3/12/06, Sascha Balkau <[EMAIL PROTECTED]> wrote:
>
> Hi Adrian,
>
> thanks for the idea but this approach will not work in my case because
the
> images are loaded sequencially. If one image is finished loading, my
class
> starts loading the next and so on, one after one. And the amount of
images
> varies (the image filenames are fetched from a XML file).
> I'm now defining a segmentWidth by dividing the full progressbar width
by
> the amount of images that are going to be loaded. That gives me the
100%
> for
> one image on the whol bar. I just haven't figured out yet how to make
it
> work so that the bar doesn't start from 0 at every image. Any other
idea?
>
> Sascha
>
>
>
>
>
> ----- Original Message -----
> From: "Adrian Park" <[EMAIL PROTECTED]>
> To: "Flashcoders mailing list" <[email protected]>
> Sent: Sunday, March 12, 2006 3:24 AM
> Subject: Re: [Flashcoders] Loading several images with one
progressbar?
>
>
> Say you have 3 images loading, use something like this:
>
> var bytesLoaded:Number = 0;
> var bytesTotal:Number = 0;
>
> bytesLoaded += image1.getBytesLoaded();
> bytesTotal += image1.getBytesTotal();
> bytesLoaded += image2.getBytesLoaded();
> bytesTotal += image2.getBytesTotal();
> bytesLoaded += image3.getBytesLoaded();
> bytesTotal += image3.getBytesTotal();
>
> var percentageLoaded:Number = (bytesLoaded/bytesTotal) * 100;
>
> There may be ways to optimise this code depending on your
circumstances
> (e.g.
> just calculate bytesTotal once and reuse it) but this shows the basic
> idea.
>
> Adrian P.
>
>
> On 3/11/06, Sascha Balkau <[EMAIL PROTECTED]> wrote:
> >
> > Hi,
> > this is probably an old hat but I can't get it right. I want to
display
> > the
> > load progress of several images with one progress bar. How do I
> calculate
> > the percentage of the bar?
> >
> > Thanks alot,
> > Sascha
> >
> > _______________________________________________
> > [email protected]
> > To change your subscription options or search the archive:
> > http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> >
> > Brought to you by Fig Leaf Software
> > Premier Authorized Adobe Consulting and Training
> > http://www.figleaf.com
> > http://training.figleaf.com
> >
> _______________________________________________
> [email protected]
> To change your subscription options or search the archive:
> http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>
> Brought to you by Fig Leaf Software
> Premier Authorized Adobe Consulting and Training
> http://www.figleaf.com
> http://training.figleaf.com
>
> _______________________________________________
> [email protected]
> To change your subscription options or search the archive:
> http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>
> Brought to you by Fig Leaf Software
> Premier Authorized Adobe Consulting and Training
> http://www.figleaf.com
> http://training.figleaf.com
>
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
