Hello and welcome to our community! Is this your first visit?
Register
Results 1 to 5 of 5
  1. #1
    Newbie
    Join Date
    Mar 2012
    Posts
    13

    An all-code preloader for Flash.

    So I'm sure you've seen that preloader on a lot of flash animations that is plain text and says something along the lines of "Click anywhere to play animation." That was made a while ago by my good friend Tosh, and has been quite popular due to it's ease of use. Well I've always thought it was a bit plain, so I made a version based on his that generates a more graphical preloader.

    To use this preloader copy the following code:

    Code:
    import flash.display.BitmapData;
    import flash.filters.BlurFilter;
    import flash.geom.Matrix;
    
    stop();
    blurData = new BitmapData(Stage.width+20, Stage.height+20);
    blurData.draw(_root, new Matrix(1,0,0,1,10,10));
    
    this.createEmptyMovieClip("pre_bgmc",this.getNextHighestDepth());
    pre_bgmc._x = -10;
    pre_bgmc._y = -10;
    pre_bgmc.attachBitmap(blurData,1);
    pre_bgmc.filters = [new BlurFilter(10,10,2)];
    
    this.createEmptyMovieClip("ploader",this.getNextHighestDepth());
    ploader._x = 0;
    ploader._y = Stage.height-150;
    
    // Create Gradient MC
    ploader.createEmptyMovieClip("bgGrad",ploader.getNextHighestDepth());
    ploader.bgGrad.cacheAsBitmap = true;
    ploader.bgGrad._x = -ploader._x;
    ploader.bgGrad._y = Stage.height-ploader._y;
    
    // Draw Gradient
    with(ploader.bgGrad) {
    	fillType = "linear";
    	colors = [0x666666, 0x000000];
    	alphas = [0, 75];
    	ratios = [0, 255];
    	matrix = {matrixType:"box", x:0, y:-200, w:200, h:200, r:90/180*Math.PI};
    	lineStyle(1, 0x000000, 0);
    	beginGradientFill(fillType, colors, alphas, ratios, matrix);
    	moveTo(0, 0);
    	lineTo(Stage.width, 0);
    	lineTo(Stage.width, -200);
    	lineTo(0, -200);
    	lineTo(0, 0);
    	endFill();	
    }
    
    // Create Diagonal Lines MC
    ploader.createEmptyMovieClip("lines",ploader.getNextHighestDepth());
    ploader.lines.cacheAsBitmap = true;
    ploader.lines._x = Stage.width;
    ploader.lines._y = 80;
    
    // Create Lines
    ploader.lines.lineStyle(1, 0xFFFFFF);
    for (var i=0;i<75;i++) {
    	ploader.lines.moveTo(i*-5, 0);
    	ploader.lines.lineTo((i*-5)+50, 50);
    }
    
    // Create Diagonal Lines Mask
    ploader.createEmptyMovieClip("linesMask",ploader.getNextHighestDepth());
    ploader.linesMask.cacheAsBitmap = true;
    
    // Draw Gradient in Lines Mask
    with(ploader.linesMask) {
    	// Top
    	fillType = "linear";
    	colors = [0x000000, 0x000000];
    	alphas = [0, 80];
    	ratios = [0, 255];
    	matrix = {matrixType:"box", x:Stage.width-(65*5), y:0, w:200, h:15, r:0/180*Math.PI};
    	lineStyle(1, 0x000000, 0);
    	beginGradientFill(fillType, colors, alphas, ratios, matrix);
    	moveTo(0, 80);
    	lineTo(Stage.width, 80);
    	lineTo(Stage.width, 90);
    	lineTo(0, 90);
    	lineTo(0, 80);
    	endFill();
    	
    	// Bottom	
    	alphas = [0, 25];
    	lineStyle(1, 0x000000, 0);
    	beginGradientFill(fillType, colors, alphas, ratios, matrix);
    	moveTo(0, 90);
    	lineTo(Stage.width, 90);
    	lineTo(Stage.width, 130);
    	lineTo(0, 130);
    	lineTo(0, 90);
    	endFill();
    }
    
    // Create Text Container
    ploader.createEmptyMovieClip("tcont",ploader.getNextHighestDepth());
    ploader.tcont.cacheAsBitmap = true;
    ploader.tcont._x = Stage.width-400;
    
    // Create Text
    var T = ploader.tcont.createTextField("T",ploader.tcount.getNextHighestDepth(),0,0,400,100);
    T.text = "0";
    T.selectable = false;
    
    function setTextFormat(textObject) {
    	var format:TextFormat = new TextFormat(); 
    	format.size = 100;
    	format.letterSpacing = 15;
    	format.font = "Arial Narrow";
    	format.color = 0xFFFFFF;
    	format.align = "right";
    	textObject.setTextFormat(format);
    }
    setTextFormat(T);
    
    // Create Text Mask
    ploader.createEmptyMovieClip("tmask",ploader.getNextHighestDepth());
    ploader.tmask.cacheAsBitmap = true;
    ploader.tmask._x = Stage.width-200;
    
    // Draw Gradient in Text Mask
    with(ploader.tmask) {
    	fillType = "linear";
    	colors = [0x000000, 0x000000];
    	alphas = [0, 50];
    	ratios = [0, 255];
    	matrix = {matrixType:"box", x:0, y:68, w:200, h:15, r:-90/180*Math.PI};
    	lineStyle(1, 0x000000, 0);
    	beginGradientFill(fillType, colors, alphas, ratios, matrix);
    	moveTo(0, 0);
    	lineTo(200, 0);
    	lineTo(200, 80);
    	lineTo(0, 80);
    	lineTo(0, 0);
    	endFill();
    }
    
    // Create Info Text Container
    ploader.createEmptyMovieClip("infoText",ploader.getNextHighestDepth());
    ploader.infoText.cacheAsBitmap = true;
    ploader.infoText._x = Stage.width-415;
    ploader.infoText._y = 95;
    
    // Create Info Text
    var iT = ploader.infoText.createTextField("iT",ploader.infoText.getNextHighestDepth(),0,0,400,100);
    iT.text = "Now loading...";
    iT.selectable = false;
    
    function setTextFormat2(textObject) {
    	var format:TextFormat = new TextFormat(); 
    	format.size = 18;
    	format.letterSpacing = 3;
    	format.font = "Segoe UI Light";
    	format.color = 0xFFFFFF;
    	format.align = "right";
    	textObject.setTextFormat(format);
    }
    setTextFormat2(iT);
    
    // Create Info Text Mask
    ploader.createEmptyMovieClip("iTM",ploader.getNextHighestDepth());
    ploader.iTM.cacheAsBitmap = true;
    ploader.iTM._x = Stage.width-400;
    ploader.iTM._y = 90;
    
    // Draw Gradient in Info Text Mask
    with(ploader.iTM) {
    	fillType = "linear";
    	colors = [0x000000, 0x000000, 0x000000, 0x000000];
    	alphas = [0, 100, 100, 0];
    	ratios = [0, 75, 185, 255];
    	matrix = {matrixType:"box", x:0, y:0, w:200, h:50, r:-90/180*Math.PI};
    	lineStyle(1, 0x000000, 0);
    	beginGradientFill(fillType, colors, alphas, ratios, matrix);
    	moveTo(0, 0);
    	lineTo(400, 0);
    	lineTo(400, 50);
    	lineTo(0, 50);
    	lineTo(0, 0);
    	endFill();
    }
    
    function assignMasks() {
    
    	// Assign info text Mask
    	ploader.infoText.setMask(ploader.iTM);
    	
    	// Assign text Mask
    	ploader.tcont.setMask(ploader.tmask);
    	
    	// Assign Lines Mask
    	ploader.lines.setMask(ploader.linesMask);
    	
    }
    assignMasks();
    
    function easeInQuad(t, b, c, d) {
    	return c*(t /= d)*t+b;
    }
    
    function preload(){
    	var loaded = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100);
    	ploader.tcont.T.text = loaded;
    	setTextFormat(ploader.tcont.T);
    	if(loaded == 100){ 
    		var startPos = ploader.infoText._y;
    		var timeCount = 0;
    		ploader.infoText.onEnterFrame = function() {
    			//this._y = 65 - ( 65 - this._y ) / 1.1;
    			this._y = easeInQuad(timeCount++, startPos, -55, 10);
    			if (timeCount >= 10)
    			{
    				delete this.onEnterFrame;
    				isLoaded = true;
    				this.iT.text = "Click anywhere to play!";
    				setTextFormat2(this.iT);
    				this._y = 120;
    				this.onEnterFrame = function() {
    					this._y = 93 - ( 93 - this._y ) / 1.1;
    					if (this._y == 93) {
    						delete this.onEnterFrame;						
    					}
    				}
    			}
    		}
    		clearInterval(Int);
       } 
    } 
    var isLoaded:Boolean = false;
    var Int:Number = setInterval(preload,100);
    function onMouseDown(){ 
    	if(isLoaded){ 
    		_root.play();
    		unloadMovie(bgGrad);
    		unloadMovie(lines);
    		unloadMovie(linesMask);
    		unloadMovie(tcont);
    		unloadMovie(tmask);
    		unloadMovie(infoText);
    		unloadMovie(iT);
    		unloadMovie(iTM);
    		unloadMovie(ploader);
    		unloadMovie(pre_bgmc);
    		delete preload;
    		delete easeInQuad;
    		delete setTextFormat;
    		delete setTextFormat2;
    		delete blurData;
    		delete isLoaded;
    		delete Int;
    		delete onMouseDown;
    	} 
    }
    Paste this code on frame 1 of your animation. That's it! The code does the rest. Once you play the animation it creates what you see at this link.

  2. #2
    Veteran Enthusiast Krustalien's Avatar


    Join Date
    Oct 2008
    Location
    www.artangle.net
    Posts
    8,111

    Re: An all-code preloader for Flash.

    I had always wondered if the "click anywhere to play" thing was an automated/default preloader or something, due to its simplicity. If I ever get my arse into gear with flash I'll be sure to use this code. Thanks for taking the time.


  3. #3
    Liberty Phish DaniŽl's Avatar

    Join Date
    Oct 2010
    Location
    Netherlands
    Posts
    5,507

    Re: An all-code preloader for Flash.

    Is this AS 2.0 or AS 3.0, or does it work for both?
    I might actually use this.

  4. #4
    Newbie
    Join Date
    Mar 2012
    Posts
    13

    Re: An all-code preloader for Flash.

    AS2 because the original is AS2. I'll be making an AS3 version shortly

  5. #5
    Bad Ass Statham Statham's Avatar

    Join Date
    Apr 2009
    Location
    Bear, DE,USA
    Posts
    5,118

    Re: An all-code preloader for Flash.

    I'll just drop my attempt at a custom DD preloader and use this for future projects. thanks for the preloader.

    *You must be prepared for harsh critique. What I offer is in sight on what you should of done and you may get a offended, but you must understand if you can't take the heat get out of the kitchen of art.


 

Posting Permissions

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