Comunidad de diseño web y desarrollo en internet online

Test de velocidad en Flash

Resultó que un cliente me pidió hacer un sistema donde los usuarios de su web pudieran ver su velocidad de conexión. Apenas lo termine me di cuenta que cuando estuve buscando por Internet todo relacionado con los “Speed Test” no encontré ningún tuto y por eso quise compartir con todos mi trabajo.

Vamos a dividir el tutorial en dos partes, la parte gráfica y la programación.

Lo primero que vamos a hacer es crear tres capas en flash y cada capa crearle tres fotogramas claves vacíos, excepto la última capa que va a tener un solo fotograma.


En la última capa (en mi caso la capa Fondo) vamos a crear los gráficos para nuestro proyecto, yo hice algo así.


Una vez que tenemos lista la parte gráfica vamos a crear los objetos que van a actuar en nuestro proyecto, para eso vamos a hacer dos botones: uno que diga Empezar y otro Finalizar.

Al botón Empezar lo colocamos en el primer fotograma de la segunda capa y el botón Finalizar en el último fotograma, también de la segunda capa (en mi caso la capa Objetos).

Luego en el último fotograma de la segunda capa vamos a poner un campo de texto dinámico al que le pondremos como nombre velocidad y nos va a quedar algo como esto.


Y en nuestro primer fotograma nos tiene que quedar así.


Ahora pasamos a crear las barras de porcentajes, para eso vamos al fotograma 2 en la capa Objetos y creamos una barra que tenga una animación desde el fotograma 1 al 100, en el primer y último fotograma le ponemos stop();


En el escenario nos tiene que quedar así.


A una de nuestras barras la llamamos grafico y a otra tester.

Terminamos la primera parte ahora pasemos a la programación. A nuestro botón Empezar le agregamos este código.

on(release){
    gotoAndStop(2);
}

Y al botón Finalizar este.

on(release){
    gotoAndStop(1);
}

En nuestro primer fotograma de la capa Acciones ponemos.

stop();
Stage.showMenu=false;

Pasemos al segundo fotograma (el mas complicado, pero no se asusten).

_global.Tiempo = new Date();
_global.Minutos = Tiempo.getMinutes();
_global.Segundos = Tiempo.getSeconds();
_global.Tiempo_Inicial = (Minutos*60)+Segundos;

var No_Cache:String;
No_Cache = "?nocaching="+random(65000);
Archivo = "archivo.ext";
Carga = new LoadVars();
Carga.load(Archivo+No_Cache);

function Obtencion_Tiempo() {
    _global.Tamaño_Archvio = Carga.getBytesTotal();
    _global.Total_Cargado = Carga.getBytesLoaded();
    _global.Porcentaje = Math.floor((Total_Cargado*100)/Tamaño_Archvio);
    if (I != 100) {
        _global.Tiempo2 = new Date();
        _global.Minutos2 = Tiempo2.getMinutes();
        _global.Segundos2 = Tiempo2.getSeconds();
        var Tiempo_Medio:Number = ((Minutos2*60)+Segundos2)-Tiempo_Inicial;
        var Velocidad_Media:Number = Math.round(((Total_Cargado/Tiempo_Medio)*9)/1024);
        Redondeo = (Velocidad_Media*100)/1500;
    }
    I = +1;
    tester.gotoAndStop(Redondeo);
    grafico.gotoAndStop(Porcentaje);
    if (Total_Cargado == Tamaño_Archvio) {
        clearInterval(Intervalo);
        play();
    }
}

Y en el último fotograma ponemos.

_global.Tiempo = new Date();
_global.Minutos = Tiempo.getMinutes();
_global.Segundos = Tiempo.getSeconds();
Tiempo_Obtencion = ((Minutos*60)+Segundos)-Tiempo_Inicial;
Velocidad_Coneccion = Math.round(((Tamaño_Archvio/Tiempo_Obtencion)*9)/1024);
velocidad.text=Velocidad_Coneccion;
stop();

Con eso está listo. Ahora si pruebas tu proyecto no va a funcionar porque todavía falta tan solo un paso más

Para poder realizar este paso lo que vamos a hacer es abrir el block de notas y crear un archivo que tenga como tamaño 2.5 Mb ¿cómo hacemos esto? Simple, sólo escribimos un caracter (yo elegí la letra "o") y lo repetimos 2.500.000 veces (GUUUUAU) para hacer esto recurrimos a Copy and Paste (Ctrl+C y Ctrl+V), los 2.500.000 caracteres equivalen a 2.500.000 bytes, o sea 2.5 Mb.

Lo guardamos como archivo.ext ¿Por qué .ext? porque se me ocurrió ponerle esa extensión XD (si deseas cambiarle de extensión no olvides de cambiarla también en el FLA).

Ahora sólo tenemos que subir los archivos a nuestro servidor y WALA!! Ya tenemos nuestro Test De Velocidad.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate