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

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.

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.

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.

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

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

hehe

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

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

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?

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

PERFECT! thank you both

actually I think just referencing it as _preLoad.removeMovieClip(); will work as well not need for _root (which is better)

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

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();
}

---

hi i used the code above to preload an exteranl movie but am not getting any sound. i am using linkage option and exporting sounds in the first frame of my loaded movie but i thought loading it in an external preloader will resolve the issue .. if not then please help me out how to ?

you will have to use a sound Object and then make a pre-loader for that if you want to have control/check the sound being loaded.

Quote:

---

Originally Posted by whispers

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)

---

It really does work great. Thanks madzigian/whispers for such a great resource!

hi, I have a 'pre-made' preloader component I created. (just drop the .swc file into your Flash directory.. and the component will be there when you start up.)

I find it quite easy to use.. (but I made it..so I may be biased) LOL

check it out and let me know... this may be an easier solution for you.
-----------------------------------------------------------------------------------
original thread:
http://board.flashkit.com/board/show...0&postcount=12

component can be found here:
http://www.dmstudios.net/demos/ezPreloader.zip


here is a link to the component in 'action' (so you can see what it looks like)
http://www.dmstudios.net/demos/custo...Component.html

here is a link to the .fla so you can see the TWO methods on how to code the buttons (very easy):
http://www.dmstudios.net/demos/custo...ponentTest.zip

and the component itself for all to use, (for feedback of course)
(see attachment)

you MUST save the .swc file (name: simplePreloader_v1a_cb.swc......inside the .zip file) to the Flash compoennt directory.
For Flash 8 go here:
C:\Program Files\Macromedia\Flash 8\en\Configuration\Components\



-------component documentation-----------------

Quote:

---

Welcome to the simplePreloader component.

Desc:
This component will give you a visual representation (both through animation & percetange loaded text) on how much of your content is loaded into it's 'target clip'.

Overview:
it is very easy to use. You drag a component to the stage, and you 'assign' it a target clip (movie clip) to watch. Anything that gets loaded into this 'target clip' will trigger the simplepreloader to show and display how much left there is to load. When complete, the movieClip will disappear. Load another piece of content (image, swf or video clip) and the preloader will trigger again.

Once you have your component instance on the stage, make sure to give it an INSTANCE NAME. By selecting the simplePreloader instance, you can then go the PARAMETERS panel in the PROPERTY INSPECTOR and assign the custom values for you component & movie.

PARAMETERS:

1.) loaderColor: choose a #color that you want the rotatingArrows to be.

2.) percentVisible: choose to display the percentage textField or not.

3.) percentColor: choose a #color that you want the percentage text to be.

4.) rotateSpeed: number value that depicts the speed of the rotatation.

5.) targetClip: 'path' (relative or absolute) to the movie clip you want the simplePreoader to 'watch' and give results on. (Note: the path is /home to whatever timeline the simplePreloader is in)

6.) callbackFunction: lets you declare a function name that you want executed after the 'loading' is complete. (NOTE: do NOT include the () after the funciton name)

7.) alwaysOn: lets you decide to have the 'check' (onEnterFrame) running continuously.

(Note: it is recommended to run this default in FALSE (off) mode, and manually move the playHead to frame 2 on the simplePreloader component)

"TRUE" MODE: Lets you ONLY do a simple 'loadMovie()' on your target..and the 'simplePreloader' will do the rest. (but leaves code running all the time and can eat up resources)

Example: (alwaysOn set to TRUE)
Code:

Code:

---

button1_btn.onPress = function(){
    containerClip.imageHolder.loadMovie("image1.jpg");
}

---

"FALSE" MODE: (recommended) Means you have to manually advance the playhead to frame 2 in the 'simplePreloader' component, but does not leave messy or rampant code running.

Example: (alwaysOn set to FALSE)
Code:

Code:

---

button1_btn.onPress =function(){
    containerClip.imageHolder.loadMovie("image1.jpg");
    simplePreloader.gotoAndStop(2);
}

---

---

thanks..if there are any questions.. PLEASE let me know.. of course I enjoy the feedback.