Cristalab

Gráfico estadístico por variables definidas con Actionscript

   Foros de discusión -> Tips, ¡Envía tus trucos aquí!
Mensaje Autor
Mensaje Publicado: Sab Nov 24, 2007 10:11 pm     Citar   msie 
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.

Blackdragon


clabLevel: 1468 Genero:Masculino
In middle of hell, fighting for my soul
1 Tutoriales
10 Tips

MP Email Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Sab Nov 24, 2007 10:21 pm     Citar   firefox 
podrias poner el SWF para verlas funcionando Bien
 _________________

I'm perfect in wickness

penHolder


clabLevel: 1778
| mdz |

19 Tips

MP Web     Google Talk    
Volver arriba
Mensaje Publicado: Sab Nov 24, 2007 10:42 pm     Citar   firefox 
SWAT Blackdragon: Mándame el archivo .swf de ejemplo al email y te editaré el tip. Debería matarte por colocar un pantallazo del código... hazme un copy&paste del código... lo editaré también. SWAT
 _________________

MY : Blog | Facebook | Twitter | Pownce | Jaiku | Plurk | Last.fm | Flickr.

Zguillez
BOFH

Bastard Operators From Hell Héroes Premio_Secretos
clabLevel: 4113
BCN
3 Tutoriales
40 Tips
1 Ejemplos

MP Email Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Dom Nov 25, 2007 8:51 pm     Citar   msie 
Lo haré Zguillez, sorry por lo del código, pero es que este tip lo había mandado hace uff para una especie de tuto... y de tanto esperar decidí colocarlo como tip y entonces ahi se fue la imagen.... Que pena... U_U
 _________________
Darkness Dimension: El Blog de Blackdragon

Blackdragon


clabLevel: 1468 Genero:Masculino
In middle of hell, fighting for my soul
1 Tutoriales
10 Tips

MP Email Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Mie Nov 28, 2007 3:34 am     Citar   firefox 
Menos mal que fue reparado... Asi se ve mucho mejor !!!...
Riendo
 _________________

//- No tengo NPI de que poner aqui... <-- ¿Sugerencias?

M@U

Premio_Secretos
clabLevel: 1618
Toon Clab ™
1 Tutoriales
6 Tips

MP Email     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Mie Nov 28, 2007 4:50 pm     Citar   firefox 
Y esto no quedaria mejor con Flex/charts?

BiliJou_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Nov 28, 2007 5:16 pm     Citar   firefox 
yo tenía un gráficador en flash que hacía barritas en base a un XML Sonrisa , haber si luego lo pongo aca miau
 _________________
So, What's Your Price?

master_of_puppetz


clabLevel: 808 Genero:Masculino
México D.F.

2 Tips

MP     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Jue Nov 29, 2007 3:24 pm     Citar   firefox 

Zguillez escribió:

....Debería matarte por colocar un pantallazo del código...

jjajajajajjajaj aun así, está simpático el Tip miau muy bien Guiño
 _________________
U_U SWAT U_U

eldervaz
SWAT Team

Héroes Premio_Secretos SWAT
clabLevel: 3258 Genero:Masculino
Lima - Perú
11 Tutoriales
7 Tips

MP Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Vie Nov 30, 2007 4:54 pm     Citar   firefox 

Blackdragon escribió:


¡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:

miau Ctrl-F9 me hacen recordar viejos tiempos en C++, muy buen tip, gracias por el aporte, es más quitando las cajas y el botón, asignando los valores directos a las variables quedaría muy bien Guiño
 _________________
::Nothing is Impossible::

flashreloco


clabLevel: 741 Genero:Masculino
En un mundo, donde dormir es para los débiles


MP Email Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Lun Dic 03, 2007 6:38 pm     Citar   firefox 

Código :

btn_ok.onRelease = function(Void):Void{
   if(!var_a.length || !var_b.length || !var_c.length){
      trace ("No pueden haber campos vacíos");
   }else{
      var num1:Number = var_a.text = parseInt(var_a.text);
      var num2:Number = var_b.text = parseInt(var_b.text);
      var num3:Number = var_c.text = parseInt(var_c.text);
      var mayor:Number = Math.max(num1, Math.max(num2, num3));
      barra1._xscale = (num1 * 100)/mayor;
      barra2._xscale = (num2 * 100)/mayor;
      barra3._xscale = (num3 * 100)/mayor;
   }
   
}

Ni se quien soy_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mar Dic 04, 2007 6:53 pm     Citar   msie 
hay un tremendo error con esto, despues de poner 3 numeros aleatorios y darle OK puse 0-0-0 y OK y no bajaron las barras, despues puse 3 numeros aleatorios mas y las barras siguen subiendo, luego puse 1-1-1-OK y las barras se llenaron por completo, supongo q habra q reiniciarlo cada vez q quieres cambiar la grafika ,AAAAFF, y falto el boton reset.

Para q vean q no soy exigente miau

paberu_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Dic 05, 2007 5:46 pm     Citar   firefox 
La idea del botón de reset es buena... para la próxima será.... Guiño
 _________________
Darkness Dimension: El Blog de Blackdragon

Blackdragon


clabLevel: 1468 Genero:Masculino
In middle of hell, fighting for my soul
1 Tutoriales
10 Tips

MP Email Web     Google Talk  MSN Messenger  
Volver arriba
Mensaje Publicado: Jue Ene 24, 2008 8:29 pm     Citar   msie 
NOOOB !! Riendo

HAHA_blog
Invitado






        
Volver arriba
Responder al tema    Foros de discusión -> Tips, ¡Envía tus trucos aquí! Todas las horas son GMT
Página 1 de 1

Respuesta Rapida
Nick: 

  Citar el ultimo mensaje
Adjuntar tu firma

Mostrar mensajes de anteriores:
  

 


Cristalab BloodBerry Style © 2006 Cristalab
Powered by phpBB © 2001, 2002 phpBB Group