As you may know, on the resource's section, Jeff posted an actionscript 2 preloader where you only have to paste the code on the first frame of your animation. Well now I'll show you how to customize that preloader tou your taste!
Credits to Jeff for the Actionscript. We love you, Jeffie♥
This is the original code. I'll show you wich parts you have to change to customize it.
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;
}
}
Before we start, remember. In flash, colour codes normaly looks like this: #00FF00
But in action script, the equivalent of that code is: 0x00FF00.
Other examples:
#FFCC00 = 0xFFCC00.
In other words, you have to copy the 6 letters/numbers of the code, and put "0x" before it.
Got it?
Okay, now. The first part.
// 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();
}
If you change the code that I put in bold, you can change the colour of the gradient. For example:
From this:
colors =
[0x666666, 0x000000]; (
http://www.filz.us/view/7b638b28-252/)
To this:
colors =
[0xFFCC00, 0xFFCC00]; (
http://www.filz.us/view/a1d0fd99-b56/)
To change the gradient place from the bottom to the top, you have to set the canvas at 550x300 (It only works on that size. If someone knows how to fix it, post here so I can add it), and change this part:
// Create Gradient MC
ploader.createEmptyMovieClip("bgGrad",ploader.getNextHighestDepth());
ploader.bgGrad.cacheAsBitmap = true;
ploader.bgGrad._x = -ploader._x;
ploader.bgGrad._y =
Stage.height-ploader._y; If you change that minus (-) this symbol "%", the gradient will be on the top. it would look like this:
http://www.filz.us/view/86cd6c3f-9af/
But remember to change this:
// Draw Gradient in Lines Mask
with(ploader.linesMask) {
// Top
fillType = "linear";
colors = [0x000000, 0x000000];
alphas = [0, 80]; here switch places between "0" and "80" to invert the alpha.
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);
Now that's for the colour of the gradient. Now, to change the diagonal lines' colour:
You have to do the same thing that last time. Change the codes.
// Create Lines
ploader.lines.lineStyle(1,
0xFFCC00); that code. Change the code to, for example, 0xFF0000 (red).
for (var i=0;i<75;i++) {
ploader.lines.moveTo(i*-5, 0);
ploader.lines.lineTo((i*-5)+50, 50);
}
when you change it, it would look like this:
http://www.filz.us/view/d40f1276-c06/
UPDATE!: The F-A-B-U-L-O-U-S preloader!
// Draw Gradient
with(ploader.bgGrad) {
fillType = "linear";
colors =
[0xff0000, 0xffcc00, 0xffff00, 0x00ff00, 0x0000ff, 0x990099]; I added six colours to this one.
alphas =
[0, 20, 40, 60, 80, 100]; you also have to add more numbers here, depending on the amount of colours. (only from 0 to 100)
ratios =
[0, 50, 80, 130, 200, 255]; the same with these. they have to be from the smallest to the biggest. (only up to 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();
}
This is how it looks!
http://www.filz.us/view/1454b8aa-944/
Now let's change the text!
This is for the number of the preloader (line 93):
// 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; with this you change the size. select a number!
format.letterSpacing = 15;
format.font = "
Arial Narrow";
here you can write the name of any font you want I.E: "Arial black". Remember that it MUST be between quotation marks.
format.color =
0xFFFFFF; with this code, you can change the colour.
format.align = "right";
textObject.setTextFormat(format);
}
This is for the "loading" message (line 131, if you don't find it):
// 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...";
<--- Put there your message, like "Just wait, you f***er."
iT.selectable = false;
function setTextFormat2(textObject) {
var format:TextFormat = new TextFormat();
format.size =
18; this for the size.
format.letterSpacing = 3;
format.font = "
Arial"; this for the font,
format.color =
0xFFFFFF; this is for the colour.
format.align = "right";
textObject.setTextFormat(format);
}
setTextFormat2(iT);
Well, that's all you can edit. Actually, there are more things, but it's mostly colours. If you see this: "0x000000" for example, try and change the code to see what it comes out! Here's an example of one I made:
http://www.filz.us/view/aa908e02-bc7/
I hope you enjoy this, and I hope it helped.
Again, Thanks Jeff for this wonderful preloader♥
