A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 24

Thread: Preloader effect

  1. #1
    Member
    Join Date
    May 2006
    Posts
    85

    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

  2. #2
    Can't Re-Member madzigian's Avatar
    Join Date
    Apr 2004
    Location
    Boston MA
    Posts
    2,662
    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.
    Please DO NOT PM me simply for individual help. Post in the public forums...that's what they are for, and they allow others to benefit as well. - Thx
    OS X 10.3.9 || Flash MX04 Pro
    | del.icio.us || furl || Helpful Source Files || Free Pixel Fonts |

  3. #3
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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.

  4. #4
    Can't Re-Member madzigian's Avatar
    Join Date
    Apr 2004
    Location
    Boston MA
    Posts
    2,662
    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?
    Please DO NOT PM me simply for individual help. Post in the public forums...that's what they are for, and they allow others to benefit as well. - Thx
    OS X 10.3.9 || Flash MX04 Pro
    | del.icio.us || furl || Helpful Source Files || Free Pixel Fonts |

  5. #5
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    This doesn't show the progress for me.
    Franki

  6. #6
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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

  7. #7
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    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
    Franki

  8. #8
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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)..

  9. #9
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    hehe
    Franki

  10. #10
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    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
    Franki

  11. #11
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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..

  12. #12
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    now its not unloading itself when the other swf is loaded

    it's also positioned in the lower right corner instead of the middle
    Franki

  13. #13
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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();

  14. #14
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    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?
    Franki

  15. #15
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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..

  16. #16
    Junior Member
    Join Date
    Aug 2002
    Posts
    19
    PERFECT! thank you both
    Franki

  17. #17
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    actually I think just referencing it as _preLoad.removeMovieClip(); will work as well not need for _root (which is better)

  18. #18
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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)

  19. #19
    Member
    Join Date
    May 2006
    Posts
    85
    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

  20. #20
    Senior Member whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,756
    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();
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center