| STEAM LIKE PRELOADER as2 |
|
In this tutorial I will show you how to creat preloader in actionscript 2.0 that looks like the one from steam client
with fully customizable colors and function that delays the movie for 5 seconds (delay time also adjustable) after loading 100% and then continues to the actuall content. The result should look like this (the example here was edited so you can see
the loading itself, source file contains proper preloader):
Open new actionscript 2.0 document. Insert new layer. Call the upper one Actions and the lower one Content. Select Ations layer and insert three , one block long, blank keyframes. Now select Content layer and insert
one two blocks long frame and one one block long frame. First two frames will serve as the preloader itself and on frame three starts your content. This tutorial will asume that stage size is 550 x 400 px. If you want your preloader to be somewhere else on the stage
you have to adjust the coordinates in actionscript adequatly to the new position. Now select layer Content, frame one and insert empty rectangle 431 x 34px to X:60 Y:268. Now abowe it insert dynamic textfield and call it percenta_txt.
Now draw full rectangle 15 x 30px, convert it to movieclip and on convert to symbol window check export for actionscript and type dot to identifier field. Now select layer Actions, frame two and insert following actionscript code:
stop();
Stage.showMenu = false;
delay = 5000; //milliseconds
function playMovie() {
gotoAndPlay(_currentframe + 1);
clearInterval(pauseInt);
}
var n:Number = 47;
loading = Math.round(getBytesLoaded()/getBytesTotal()*100);
if(loading < 4){
i = 1;
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});
}else if(loading < 8){
for(i=1;i<=2;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 12){
for(i=1;i<=3;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 16){
for(i=1;i<=4;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 20){
for(i=1;i<=5;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 24){
for(i=1;i<=6;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 28){
for(i=1;i<=7;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 32){
for(i=1;i<=8;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 36){
for(i=1;i<=9;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 40){
for(i=1;i<=10;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 44){
for(i=1;i<=11;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 48){
for(i=1;i<=12;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 52){
for(i=1;i<=13;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 56){
for(i=1;i<=14;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 60){
for(i=1;i<=15;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 64){
for(i=1;i<=16;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 68){
for(i=1;i<=17;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 72){
for(i=1;i<=18;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 76){
for(i=1;i<=19;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 80){
for(i=1;i<=20;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 84){
for(i=1;i<=21;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 88){
for(i=1;i<=22;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 92){
for(i=1;i<=23;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading < 96){
for(i=1;i<=24;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}else if(loading = 100){
for(i=1;i<=25;i++){
attachMovie("dot", "dot"+i, i, {_x:n+(i*17), _y:270});}
}
if (loading == 100) {
pauseInt = setInterval(playMovie, delay);
}else{
gotoAndPlay(1);
}
Line 2 hdie right click menu.Lines 3-7 is delay function set to 5sec delay. Line 9 stores total % loaded to variable loading. The big if condition attaches movieclip dot
based on total loaded size. Last if checks if loading equals 100 and if it is true then it executes delay function which will go to next frame after 5 seconds. Now select frame three and insert following actionscript code. It will remove all the dot movieclips added to stage while loading.
for (p=1; p<=25; p++) {
_root["dot"+p].removeMovieClip();
}
|