-
Preloader effect
Hi Members
It feels good to be back here after so long.
Anyway, I have this flash movie in which I am loading external content using transitions.
However, I would also like to include a preloader that will show the progress of the external content that is loading through the transtions.
Does anyone have any ideas on how this could be done?
I would appreciate
Ciao
-
Can't Re-Member
this is just off the top of my head... but it looks like it will work :
Code:
var container = this.createEmptyMovieClip("container", 1);
container.loadMovie("somefile.swf");
var bgColor = 0xA5A5A5;
var barColor = 0x333333;
// create the necessary movieclips
var _preLoad = _root.createEmptyMovieClip("_preLoad", 200);
var bg = _pL.createEmptyMovieClip("bg", 1);
// draw the load bar background
bg.lineStyle(0, barColor, 100);
bg.beginFill(bgColor, 75);
bg.lineTo(200, 0);
bg.lineTo(200, 20);
bg.lineTo(0, 20);
bg.lineTo(0, 0);
bg.endFill();
// position the loader center stage
_preLoad._x = Math.round(Stage.width-_preLoad._width/2);
_preLoad._y = Math.round(Stage.height-_preLoad._height/2);
// create a Text Format object
var tf = new TextFormat();
tf.font = "Verdana";
tf.align = "left";
tf.size = 10;
tf.color = barColor;
_root.container.stop();
_preLoad.onEnterFrame = function() {
var loadBar = this.createEmptyMovieClip("loadBar", 5);
// create the textfield
bg.createTextField("display_txt", 3, 0, 0, 0, 0);
if (_root.container.getBytesLoaded()>0) {
var percent = Math.round((100/_root.container.getBytesTotal())*_root.container.getBytesLoaded());
} else {
var percent = 0;
}
bg.display_txt.autoSize = true;
bg.display_txt.text = "Loading... "+percent+"%";
bg.display_txt.setTextFormat(tf);
// progress bar
bg.loadBar.beginFill(barColor, 100);
bg.loadBar.lineTo(percent*2, 0);
bg.loadBar.lineTo(percent*2, 20);
bg.loadBar.lineTo(0, 20);
bg.loadBar.lineTo(0, 0);
bg.loadBar.endFill();
if (percent >= 100) {
this._.removeMovieClip();
delete this.onEnterFrame;
bg.display_txt.text = "";
}
};
stop();
you'll have to test it online...
if it doesn't, let me know.. and i'll provide you with a tested. working version.
-
Senior Member
hi...I see madzigian has already provided you with some great 100% dynamic code..
this will just be an explaination of what your doing..
basically what you are/need to do is load your external content (.swf, video, image) into a 'container clip' which is nothing more than an empty/blank movieClip.
this is known as loading into a 'target'.. (alternately you can load into a _level but not recommended in most cases)
so what you do in 'check' the containerClip periodically to see how much of the external content has been loaded.
-
Can't Re-Member
oops.. yea.. sorry.. i didn't really comment the code very well or explain anything.. i tend to suck at remembering that step..
What's up whispers??? how ya been?
-
This doesn't show the progress for me.
-
Senior Member
Hey madzigian- Hows it going yourself.. Ive been good..busy but no coimplaints..
Frankie-
can you post the .fla.. froma quick glance at Mad'z code...it DOES create a textField to diaply the percentage..
Thanks
-
well,
all I did was paste his code into a new movie and replaced the name of the swf file for mine.
I uploaded both swfs and the html and during the time it took my 1mb swf to load, nothing happened on the main movie...but after it loaded, it did show.
I feel even more newbish now because I'm thinking maybe this wasn't supposed to be a nice little actionscript preloader that can be used by anyone.... was it?
http://prestowebdesigns.com/test.html
Franki
-
Senior Member
Hi. I believe it was..buyt he also stated it was off the top of his head. So there could be a few bugs.
I'll see if I can re-create something to post. (using his code above)
gimmie a few.. (son is supposed to be in bed but is running around)..
-
-
oo I found something *proud*
quote
var _preLoad = _root.createEmptyMovieClip("_preLoad", 200);
var bg = _pL.createEmptyMovieClip("bg", 1);
unquote
should have been
var _preLoad = _root.createEmptyMovieClip("_preLoad", 200);
var bg = _preLoad.createEmptyMovieClip("bg", 1);
changed pL.createEmptyMovieClip to preLoad.createEmptyMovieClip
-
Senior Member
actually.. after a quick glance..looks like he 'fat finger'd' a line.. just minor/simple typo.
var bg = _pL.createEmptyMovieClip("bg", 1);
should be:
var bg = _preLoad.createEmptyMovieClip("bg", 1);
"I think"
but after that you will also have to play with the placement of the textField and its loader bar..etc.. it seems to be in the lower right hand corner when I test through the flash IDE..
-
now its not unloading itself when the other swf is loaded
it's also positioned in the lower right corner instead of the middle
-
Senior Member
ok..well I havent tested the unloading part yet.. but this is what the code should have been (he just had a few typos and one pathing error)..but overall a GREAT dynamic code you shoudl KEEP for your 'code bank/library'
Code:
var container = this.createEmptyMovieClip("container", 1);
container.loadMovie("external.jpg");
var bgColor = 0xA5A5A5;
var barColor = 0x333333;
// create the necessary movieclips
// create prealoader clip
var _preLoad = _root.createEmptyMovieClip("_preLoad", 200);
// position the loader center stage
_preLoad._x = Math.round((Stage.width/2)-100);
_preLoad._y = Math.round((Stage.height/2-10));
// create loading bar clip
var bg = _preLoad.createEmptyMovieClip("bg", 1);
// draw the load bar background
bg.lineStyle(0, barColor, 100);
bg.beginFill(bgColor, 75);
bg.lineTo(200, 0);
bg.lineTo(200, 20);
bg.lineTo(0, 20);
bg.lineTo(0, 0);
bg.endFill();
// create a Text Format object
var tf = new TextFormat();
tf.font = "Verdana";
tf.align = "left";
tf.size = 10;
tf.color = barColor;
_root.container.stop();
_preLoad.onEnterFrame = function() {
var loadBar = bg.createEmptyMovieClip("loadBar", 5);
// create the textfield
bg.createTextField("display_txt", 3, (this.bg._width/2 - 50), 0, 0, 0);
if (_root.container.getBytesLoaded()>0) {
var percent = Math.round((100/_root.container.getBytesTotal())*_root.container.getBytesLoaded());
} else {
var percent = 0;
}
bg.display_txt.autoSize = true;
bg.display_txt.text = "Loading... "+percent+"%";
bg.display_txt.setTextFormat(tf);
// progress bar
bg.loadBar.beginFill(barColor, 100);
bg.loadBar.lineTo(percent*2, 0);
bg.loadBar.lineTo(percent*2, 20);
bg.loadBar.lineTo(0, 20);
bg.loadBar.lineTo(0, 0);
bg.loadBar.endFill();
if (percent >= 100) {
this._.removeMovieClip();
delete this.onEnterFrame;
bg.display_txt.text = "";
}
};
stop();
-
I agree, it is great!
but why do you think it's still plastered across my loaded movie and not being unloaded? Is it because I'm making a Flash5 movie with Flash8?
-
Senior Member
hi..
for the unload..this works.
Code:
_root._preLoad.removeMovieClip();
however I cant seem to be able to target it relatively. (_parent, this._parent, _parent._parent..)..etc..
-
-
Senior Member
actually I think just referencing it as _preLoad.removeMovieClip(); will work as well not need for _root (which is better)
-
Senior Member
all props goes to madzigian for his code and quickness to help out a memeber. If he were around he would have taken care of ya quick!
(weekends can sometimes be dead around here)
-
Hi
Thanks guys for the code and the revisions and all that. I appreciate it greatly.
I will try out this code, but there was one thing I was wondering. How would this code work when you want to use buttons to load the various content?
Would appreciate some tips in this area..
Ciao
-
Senior Member
wrap an on(press) action around it..
like this:
Code:
on (press) {
var container = this.createEmptyMovieClip("container", 1);
container.loadMovie("external.jpg");
var bgColor = 0xEEEEEE;
var barColor = 0x996666;
var percentColor = 0xCCCC99;
// create the necessary movieclips
// create prealoader clip
var _preLoad = _root.createEmptyMovieClip("_preLoad", 200);
// position the loader center stage
_preLoad._x = Math.round((Stage.width / 2) - 100);
_preLoad._y = Math.round((Stage.height / 2 - 10));
// create loading bar clip
var bg = _preLoad.createEmptyMovieClip("bg", 1);
// draw the load bar background
bg.lineStyle(0, barColor, 100);
bg.beginFill(bgColor, 75);
bg.lineTo(200, 0);
bg.lineTo(200, 13);
bg.lineTo(0, 13);
bg.lineTo(0, 0);
bg.endFill();
// create a Text Format object
var tf = new TextFormat();
tf.font = "Verdana";
tf.align = "left";
tf.size = 10;
tf.color = percentColor;
_root.container.stop();
_preLoad.onEnterFrame = function() {
var loadBar = bg.createEmptyMovieClip("loadBar", 5);
// create the textfield
bg.createTextField("display_txt", 6, (this.bg._width / 2 - 50), -2, 0, 0);
if (_root.container.getBytesLoaded() > 0) {
var percent = Math.round((100 / _root.container.getBytesTotal()) * _root.container.getBytesLoaded());
} else {
var percent = 0;
}
bg.display_txt.autoSize = true;
bg.display_txt.text = "Loading... " + percent + "%";
bg.display_txt.setTextFormat(tf);
// progress bar
bg.loadBar.beginFill(barColor, 100);
bg.loadBar.lineTo(percent * 2, 0);
bg.loadBar.lineTo(percent * 2, 13);
bg.loadBar.lineTo(0, 13);
bg.loadBar.lineTo(0, 0);
bg.loadBar.endFill();
if (percent >= 100) {
_preLoad.removeMovieClip();
delete this.onEnterFrame;
bg.display_txt.text = "";
}
};
stop();
}
Last edited by whispers; 10-24-2006 at 01:47 PM.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|