Gráfico estadístico por variables definidas con Actionscript

En muchas oportunidades a la hora de desarrollar un software nos piden que lleven datos estadísticos o gráficas, en este tutorial lo que pretendo dar a conocer un procedimiento de este tipo por medio de ActionScript, Flash y sin base de datos, el procedimiento que se debe realizar es el siguiente:

Primero que todo, creamos un documento nuevo en Flash de 400 x 200 píxeles.

Después de tener nuestra área de trabajo ya definida, procedemos a crear un rectángulo de 196.9 de ancho por 13 de alto, la posición del mismo es indiferente. Luego lo convertimos en símbolo, en mi caso lo llamaré barra, e insertamos dos instancias más del mismo, ubicándolas una debajo de la otra, quedando de la siguiente manera:



Las líneas que llevan las coloqué adicionales. Ahora, seleccionamos una por una las barras que insertamos, le cambiamos los nombres de instancia por barra1, barra2 y barra3 respectivamente, y luego le cambiamos el color. Para ello primero se selecciona la barra a colorear y luego en la parte inferior, en el cuadro propiedades, en el combo de selección color seleccionamos la opción Tinta y de ahí escogemos los colores que nos parezcan adecuados.



Después de tener todo coloreado, insertamos tres textos dinámicos al frente de cada una de las barras y les escribimos el número cero ( 0 ), los nombres de instancia para ellos son: text_a, text_b y text_c. Además de eso insertamos tres TextInput, en los cuales se van a escribir los valores a graficar y un botón para mostrar el resultado final.

Los TextInput tendrán como nombres de instancia: var_a, var_b y var_c, respectivamente; y el nombre de instancia para el botón le coloqué btn_ok, quedando de la siguiente manera hasta ahora:



Ahora viene lo más interesante que es el código como tal. Vamos a programar en el primer fotograma de nuestra capa actual (Ojo, no es en el botón, es en el primer fotograma), y ahí insertamos el siguiente código:

Código :

text_a.text = 0;
text_b.text = 0;
text_c.text = 0;

barra1._xscale = 1;
barra2._xscale = 1;
barra3._xscale = 1;

btn_ok.onRelease = function(){
   var num1:Number = Number(var_a.text);
   var num2:Number = Number(var_b.text);
   var num3:Number = Number(var_c.text);
   var mayor:Number = num1;
   if(num2 > mayor) mayor = num2;
   if(num3 > mayor) mayor = num3;

   text_a.text = num1;
   text_b.text = num2;
   text_c.text = num3;

   barra1._xscale = (num1*100)/mayor;
   barra2._xscale = (num2*100)/mayor;
   barra3._xscale = (num3*100)/mayor;

   if (var_a.text == "" || var_b.text == "" || var_c.text == ""){
      trace("No pueden haber campos vacíos")
   }

}

¡Y listo!, después de esto lo único que faltaría es oprimir Ctrl + F9 y probar lo que se ha hecho hasta el momento. Una muestra de como funciona es la siguiente imágen:



Espero les halla sido de gran utilidad y cualquier duda no olviden hacerla. Mucha suerte y éxitos a todos.

¿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.