help adding progress bar to my code

[Navarone]

I have two places I would like to add the progress bar component to my code. When my thumb nail images load and when I load an image into my pictures scroll pane. I read thru the help files and visited the live documents but I don't know where to put the code in my code. I was hoping someone could help?

:)

var pictures:mx.containers.ScrollPane;
pictures.contentPath = 'Holder_mc';
scrollPane.setStyle("themeColor", "haloBlue");
c_mc.onRelease = function() {
//////////////////////////////////
// this repopulates the scrollpane at runtime
thumbs.refreshPane();
pictures.refreshPane();
for (i=0; i<=6; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
t_mc.i = i;
//trace(i)
thumbs.invalidate();
}
/////////////////////////////////////
//if (this.name.text == "Dadphotos") {
if (this.location == this.location) {
trace("test "+this.location);
var elf = this.location;
MyPicVars = new LoadVars();
MyPicVars.load("image_txt_files/"+elf+".txt");
MyPicVars.onLoad = function(success) {
if (success) {
trace("success");
trace(elf);
var t_mc:MovieClip;
Rc = this["Rc"];
for (i=0; i<=Rc-1; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
/////////////////////
_root["mc"+i] = new MovieClipLoader();
_root["mc"+i].addListener(mclListener);
// I think the code would go here?
_root["mc"+i].loadClip(+elf+"/"+this["pic"+i], t_mc.container_mc);
/////////////////////////
t_mc.i = i;
t_mc.location = this["pic"+i];
t_mc.onRelease = function() {
//load image into pictures scroll pane
pictures.content.myLoader.contentPath = +elf+"/"+this.location;
// reset the images to 100%
pictures.content.myLoader.scaleX = 100;
pictures.content.myLoader.scaleY = 100;
// redraw component only when changes occur
pictures.invalidate();
};
//////////////////////////////////////////
////////////////////////////////////////////
thumbs.invalidate();
}
} else {
trace("not loaded");
}
};
} else {
//do nothing
}
};

[madgett]

You're on the right track, ideally you only need 1 moviecliploader to load a bunch of images, one to many relationship. See what's in bold. That should get you started.
var mcl:MovieClipLoader = new MovieClipLoader();
// listener
var mclLis:Object = new Object();
mclLis.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
trace(target_mc);
trace(bytesLoaded+" of "+bytesTotal);
}
// now add listener
mcl.addListener(mclLis);
for (i=0; i<=Rc-1; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
/////////////////////
//_root["mc"+i] = new MovieClipLoader();
//_root["mc"+i].addListener(mclListener);
// I think the code would go here?
// create housing clip
var load_mc:MovieClip = t_mc.container_mc.createEmptyMovieClip("load_mc"+i, i);
mcl.loadClip(+elf+"/"+this["pic"+i], load_mc);
/////////////////////////
t_mc.i = i;
t_mc.location = this["pic"+i];
t_mc.onRelease = function() {
//load image into pictures scroll pane
pictures.content.myLoader.contentPath = +elf+"/"+this.location;
// reset the images to 100%
pictures.content.myLoader.scaleX = 100;
pictures.content.myLoader.scaleY = 100;
// redraw component only when changes occur
pictures.invalidate();
};
//////////////////////////////////////////
////////////////////////////////////////////
thumbs.invalidate();
}You can basically tweak that above to fit your need, I'm not sure how many pictures you're trying to load all at once but that should load them. Be sure to check the output panel for the loading traces.

[Navarone]

I think I trimmed out to much of my code on the first post. I followed what you showed but my image scaling to make the thumbnails doesn't work. Also do I need a copy of the progress bar in my library or on the stage somewhere?

////////////////////////////////////////////////////////////////////
var pictures:mx.containers.ScrollPane;
pictures.contentPath = 'Holder_mc';
scrollPane.setStyle("themeColor", "haloBlue");
////////////////////////////////////////////////////////////////
var mcl:MovieClipLoader = new MovieClipLoader();
// listener
var mclLis:Object = new Object();
mclLis.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
trace(target_mc);
trace(bytesLoaded+" of "+bytesTotal);
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// create thumbnail images
var MAX_WIDTH:Number = 65;
var MAX_HEIGHT:Number = 65;
var mclListener:Object = new Object();
mclListener.onLoadInit = function(mc:MovieClip) {
// set variables to keep the original image dimensions
var xw = mc._width;
var xh = mc._height;
// where image width is greater than image height
if (mc._width>mc._height) {
mc._width = MAX_WIDTH;
mc._height = (mc._height*MAX_WIDTH)/xw;
// center image
mc._y = (75-mc._height)/2;
}
//where image height is greater than image width
if (mc._height>mc._width) {
mc._height = MAX_HEIGHT;
mc._width = (mc._width*MAX_HEIGHT)/xh;
mc._x = (75-mc._width)/2;
}
};
//////////////////////////////////////////////////////////////////
MyLoadVars = new LoadVars();
MyLoadVars.load("image_txt_files/folders.txt");
MyLoadVars.onLoad = function(success) {
if (success) {
var c_mc:MovieClip;
Rc = this["Rc"];
//trace(Rc);
for (i=0; i<=Rc-1; i++) {
c_mc = _root.scrollPane.content.attachMovie("Folder_mc", "clip"+i, i, this.getNextHighestDepth());
c_mc.name.autoSize = true;
c_mc.name.text = this["Folder"+i];
c_mc._x = 5;
c_mc._y = 5+(i*20);
c_mc.i = i;
c_mc.location = this["Folder"+i];
c_mc.onRelease = function() {
//////////////////////////////////
// this repopulates the scrollpane at runtime
thumbs.refreshPane();
pictures.refreshPane();
for (i=0; i<=6; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
t_mc.i = i;
//trace(i)
thumbs.invalidate();
}
/////////////////////////////////////
//if (this.name.text == "Dadphotos") {
if (this.location == this.location) {
trace("test "+this.location);
var elf = this.location;
MyPicVars = new LoadVars();
MyPicVars.load("image_txt_files/"+elf+".txt");
MyPicVars.onLoad = function(success) {
if (success) {
trace("success");
trace(elf);
var t_mc:MovieClip;
Rc = this["Rc"];

/////////////////////////////////////////
mcl.addListener(mclLis);
for (i=0; i<=Rc-1; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
/////////////////////
//_roo/t["mc"+i] = new MovieClipLoader();
//_root["mc"+i].addListener(mclListener);
//_root["mc"+i].loadClip(+elf+"/"+this["pic"+i], t_mc.container_mc);
// create housing clip
var load_mc:MovieClip = t_mc.container_mc.createEmptyMovieClip("load_mc"+i, i);
mcl.loadClip(+elf+"/"+this["pic"+i], load_mc);
/////////////////////////
t_mc.i = i;
t_mc.location = this["pic"+i];
t_mc.onRelease = function() {
//load image into pictures scroll pane
pictures.content.myLoader.contentPath = +elf+"/"+this.location;
// reset the images to 100%
pictures.content.myLoader.scaleX = 100;
pictures.content.myLoader.scaleY = 100;
// redraw component only when changes occur
pictures.invalidate();
};
//////////////////////////////////////////
////////////////////////////////////////////
thumbs.invalidate();
}
} else {
trace("not loaded");
}
};
} else {
//do nothing
}
};
scrollPane.invalidate();
}
} else {
trace("not loaded");
}
};

[Navarone]

ok, I think I made some progress, but I can't get the progress bar to work and the trace(numBytesLoaded+" of "+numBytesTotal);, doesn't show anything.

////////////////////////////////////////////////////////////////////
var pictures:mx.containers.ScrollPane;
pictures.contentPath = 'Holder_mc';
scrollPane.setStyle("themeColor", "haloBlue");
////////////////////////////////////////////////////////////////
// load btn_ding
bgSound = new Sound(MyMusic_mc);
bgSound.loadSound("btn_ding.mp3", event);
///////////////////////////////////////////////////////////////////////////////////////////////////
this.zoom_out.onPress = function() {
/*var zoomout = false;
pictures.onRollOver = function() {
zoomout = true;
Mouse.hide();
this.attachMovie("mag_out", "cursor_mc", this.getNextHighestDepth(), {_x:this._xmouse, _y:this._ymouse});
};
pictures.onMouseMove = function() {
this.cursor_mc._x = this._xmouse;
this.cursor_mc._y = this._ymouse;
};
pictures.onRollOut = function() {
zoomout = false;
Mouse.show();
this.cursor_mc.removeMovieClip();
};
pictures.onMouseDown = function() {
if (zoomout == true) {*/
if (pictures.content.myLoader.scaleX<=2) {
this.zoom_out.enabled(false);
bgSound.start();
} else {
pictures.content.myLoader.scaleX /= 1.5;
pictures.content.myLoader.scaleY /= 1.5;
trace(Math.floor(pictures.content.myLoader.scaleX) );
}
pictures.invalidate();
};
//};
//};
this.zoom_in.onPress = function() {
/*var zoomin = false;
pictures.onRollOver = function() {
zoomin = true;
Mouse.hide();
this.attachMovie("mag_in", "cursor_mc", this.getNextHighestDepth(), {_x:this._xmouse, _y:this._ymouse});
};
pictures.onMouseMove = function() {
this.cursor_mc._x = this._xmouse;
this.cursor_mc._y = this._ymouse;
};
pictures.onRollOut = function() {
zoomin = false;
Mouse.show();
this.cursor_mc.removeMovieClip();
};
pictures.onMouseDown = function() {
if (zoomin=true) {*/
if (pictures.content.myLoader.scaleX>=1600) {
this.zoom_in.enabled(false);
bgSound.start();
} else {
pictures.content.myLoader.scaleX *= 1.5;
pictures.content.myLoader.scaleY *= 1.5;
trace(Math.floor(pictures.content.myLoader.scaleX) );
}
pictures.invalidate();
};
//};
//};
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// create thumbnail images
var MAX_WIDTH:Number = 65;
var MAX_HEIGHT:Number = 65;
var mclListener:Object = new Object();
mclListener.onLoadInit = function(mc:MovieClip) {
// set variables to keep the original image dimensions
var xw = mc._width;
var xh = mc._height;
// where image width is greater than image height
if (mc._width>mc._height) {
mc._width = MAX_WIDTH;
mc._height = (mc._height*MAX_WIDTH)/xw;
// center image
mc._y = (75-mc._height)/2;
}
//where image height is greater than image width
if (mc._height>mc._width) {
mc._height = MAX_HEIGHT;
mc._width = (mc._width*MAX_HEIGHT)/xh;
mc._x = (75-mc._width)/2;
}
};
/////////////////////////////////////////////////////////////////////
mclListener.onLoadProgress = function(mc:MovieClip, numBytesLoaded:Number, numBytesTotal:Number) {
trace(mc);
trace(numBytesLoaded+" of "+numBytesTotal);
my_pb.setProgress(numBytesLoaded, numBytesTotal);
};
// now add listener
//mcl.addListener(mclListener);
//////////////////////////////////////////////////////////////////
MyLoadVars = new LoadVars();
MyLoadVars.load("image_txt_files/folders.txt");
MyLoadVars.onLoad = function(success) {
if (success) {
var c_mc:MovieClip;
Rc = this["Rc"];
//trace(Rc);
for (i=0; i<=Rc-1; i++) {
c_mc = _root.scrollPane.content.attachMovie("Folder_mc", "clip"+i, i, this.getNextHighestDepth());
c_mc.name.autoSize = true;
c_mc.name.text = this["Folder"+i];
c_mc._x = 5;
c_mc._y = 5+(i*20);
c_mc.i = i;
c_mc.location = this["Folder"+i];
c_mc.onRelease = function() {
//////////////////////////////////
// this repopulates the scrollpane at runtime
thumbs.refreshPane();
pictures.refreshPane();
for (i=0; i<=6; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
t_mc.i = i;
//trace(i)
thumbs.invalidate();
}
/////////////////////////////////////
//if (this.name.text == "Dadphotos") {
if (this.location == this.location) {
trace("test "+this.location);
var elf = this.location;
MyPicVars = new LoadVars();
MyPicVars.load("image_txt_files/"+elf+".txt");
MyPicVars.onLoad = function(success) {
if (success) {
//trace("success");
//trace(elf);
var t_mc:MovieClip;
Rc = this["Rc"];
/////////////////////////////////////////
for (i=0; i<=Rc-1; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
/////////////////////
_root["mc"+i] = new MovieClipLoader();
_root["mc"+i].addListener(mclListener);
_root["mc"+i].loadClip(+elf+"/"+this["pic"+i], t_mc.container_mc);
// create housing clip
//var load_mc:MovieClip = t_mc.container_mc.createEmptyMovieClip("load_mc"+i, i);
//mcl.loadClip(+elf+"/"+this["pic"+i], load_mc);
/////////////////////////
t_mc.i = i;
t_mc.location = this["pic"+i];
t_mc.onRelease = function() {
//load image into pictures scroll pane
pictures.content.myLoader.contentPath = +elf+"/"+this.location;
// reset the images to 100%
pictures.content.myLoader.scaleX = 100;
pictures.content.myLoader.scaleY = 100;
// redraw component only when changes occur
pictures.invalidate();
};
//////////////////////////////////////////
////////////////////////////////////////////
thumbs.invalidate();
}
} else {
trace("not loaded");
}
};
} else {
//do nothing
}
};
scrollPane.invalidate();
}
} else {
trace("not loaded");
}
};

[Navarone]

ok, if I publish my movie and run the swf the progress bar appears to be working. I tried the following to reset the progress bar but it won't.

my_pb.setProgress(0, mc.getBytesTotal())

[Navarone]

Ok, I still can't refresh the progress bar and I have determined that the precent completed is only reflective of the first image loaded, it does not show the progress of all the images being loaded. This is is what my code looks like. I know it's alot to look at but I am hoping someone can help. :)

////////////////////////////////////////////////////////////////////
var pictures:mx.containers.ScrollPane;
pictures.contentPath = 'Holder_mc';
scrollPane.setStyle("themeColor", "haloBlue");
////////////////////////////////////////////////////////////////
// load btn_ding
bgSound = new Sound(MyMusic_mc);
bgSound.loadSound("btn_ding.mp3", event);
///////////////////////////////////////////////////////////////////////////////////////////////////
this.zoom_out.onPress = function() {
if (pictures.content.myLoader.scaleX<=2) {
this.zoom_out.enabled(false);
bgSound.start();
} else {
pictures.content.myLoader.scaleX /= 1.5;
pictures.content.myLoader.scaleY /= 1.5;
trace(Math.floor(pictures.content.myLoader.scaleX) );
}
pictures.invalidate();
};
this.zoom_in.onPress = function() {
if (pictures.content.myLoader.scaleX>=1600) {
this.zoom_in.enabled(false);
bgSound.start();
} else {
pictures.content.myLoader.scaleX *= 1.5;
pictures.content.myLoader.scaleY *= 1.5;
trace(Math.floor(pictures.content.myLoader.scaleX) );
}
pictures.invalidate();
};
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// create thumbnail images
var MAX_WIDTH:Number = 65;
var MAX_HEIGHT:Number = 65;
var mclListener:Object = new Object();
mclListener.onLoadInit = function(mc:MovieClip) {
// set variables to keep the original image dimensions
var xw = mc._width;
var xh = mc._height;
// where image width is greater than image height
if (mc._width>mc._height) {
mc._width = MAX_WIDTH;
mc._height = (mc._height*MAX_WIDTH)/xw;
// center image
mc._y = (75-mc._height)/2;
}
//where image height is greater than image width
if (mc._height>mc._width) {
mc._height = MAX_HEIGHT;
mc._width = (mc._width*MAX_HEIGHT)/xh;
mc._x = (75-mc._width)/2;
}
};
/////////////////////////////////////////////////////////////////////
mclListener.onLoadProgress = function(mc:MovieClip, numBytesLoaded:Number, numBytesTotal:Number) {
pbar.setProgress(numBytesLoaded, numBytesTotal);
pbar.label = "%2 loaded (%3%%)";
};
mclListener.onLoadComplete = function(mc:MovieClip) {
//pbar._visible = false
};
//////////////////////////////////////////////////////////////////
MyLoadVars = new LoadVars();
MyLoadVars.load("image_txt_files/folders.txt");
MyLoadVars.onLoad = function(success) {
if (success) {
var c_mc:MovieClip;
Rc = this["Rc"];
//trace(Rc);
for (i=0; i<=Rc-1; i++) {
c_mc = _root.scrollPane.content.attachMovie("Folder_mc", "clip"+i, i, this.getNextHighestDepth());
c_mc.name.autoSize = true;
c_mc.name.text = this["Folder"+i];
c_mc._x = 5;
c_mc._y = 5+(i*20);
c_mc.i = i;
c_mc.location = this["Folder"+i];
c_mc.onRelease = function() {
pbar.invalidate();
//////////////////////////////////
// this repopulates the scrollpane at runtime
thumbs.refreshPane();
pictures.refreshPane();
for (i=0; i<=6; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
t_mc.i = i;
//trace(i)
thumbs.invalidate();
}
/////////////////////////////////////
//if (this.name.text == "Dadphotos") {
if (this.location == this.location) {
//trace("test "+this.location);
var elf = this.location;
MyPicVars = new LoadVars();
MyPicVars.load("image_txt_files/"+elf+".txt");
MyPicVars.onLoad = function(success) {
if (success) {
//trace("success");
//trace(elf);
var t_mc:MovieClip;
Rc = this["Rc"];
/////////////////////////////////////////
for (i=0; i<=Rc-1; i++) {
t_mc = _root.thumbs.content.attachMovie("thumb_mc", "tip"+i, i, this.getNextHighestDepth());
t_mc._x = 5;
t_mc._y = 5+(i*80);
/////////////////////
_root["mc"+i] = new MovieClipLoader();
_root["mc"+i].addListener(mclListener);
_root["mc"+i].loadClip(+elf+"/"+this["pic"+i], t_mc.container_mc);
/////////////////////////
pbar.invalidate();
t_mc.i = i;
t_mc.location = this["pic"+i];
t_mc.onRelease = function() {
//load image into pictures scroll pane
pictures.content.myLoader.contentPath = +elf+"/"+this.location;
// reset the images to 100%
pictures.content.myLoader.scaleX = 100;
pictures.content.myLoader.scaleY = 100;
// redraw component only when changes occur
pictures.invalidate();
};
//////////////////////////////////////////
thumbs.invalidate();
}
} else {
trace("not loaded");
}
};
} else {
//do nothing
}
};
scrollPane.invalidate();
}
} else {
trace("not loaded");
}
};

[Navarone]

Well, I am really stumped. I can get the loader to show the bytes loaded for the first image in the thumbs scroll pane but nothing more. I am not able to get this to work no matter what I do. I hope someone out there can help. :(