Share
Crear una visualización de datos atractiva siempre ha sido una de las características clave de Flash. Te permite lograr resultados de caramelos con datos dinámicos reales; Ya sea en un precargador, un juego o una presentación de oficina.
Este sencillo tutorial le mostrará cómo construir un medidor de calibre de aguja. Aprenderá cómo aplicar un efecto de "brillo", comunicarse con XML y aplicar un motor de interpolación a las rotaciones.
Cree tres archivos: gauge.fla, gauge.xml y Main.as.
Abra gauge.xml. Este archivo contendrá los datos que llenan los medidores; Edítalos como quieras en base a la siguiente estructura:
64 Masculino 26 Hembra
El valor es un porcentaje y, por lo tanto, debe estar entre 0 y 100. La descripción se mostrará en el indicador correspondiente.
Abra gauge.fla y cambie la configuración como se muestra a continuación.
Crea un nuevo símbolo, nómbralo gauge_mc y establecer la clase en Calibre.
A continuación, crea un círculo como se muestra a continuación:
Esto formará el interior del medidor, así que nombre a esta capa "fondo".
Agregue un trazo utilizando la herramienta de botella de tinta (método abreviado: S) con la siguiente configuración:
(Haga clic en el círculo de fondo para aplicar el trazo).
Cambie a la herramienta Selección, haga clic en el trazo para seleccionarlo y presione Modificar> Forma> Convertir líneas a rellenos. Ahora, copie el relleno y péguelo en una nueva capa, creada sobre la capa existente, llamada "marco". Agrega dos nuevos trazos de degradado, cada uno de un píxel de espesor. Uno va en el interior del marco, el otro va en el exterior.
Cree una nueva capa, llámela "alfiler de aguja" y en el centro haga un pequeño círculo gris con un contorno negro y grueso:
Cree una nueva capa debajo de los pines y llámela "aguja". Dibuja una línea, convierte la línea en un relleno y convierte este relleno en un símbolo (llamado needle_mc).
Debe mover tanto el punto de registro como el punto de rotación de este nuevo símbolo al centro de la parte inferior de la línea. Para mover el punto de registro, haga doble clic en la aguja para editar, luego arrastre el relleno hasta que el punto de registro esté en el lugar correcto. Para mover el punto de rotación, vuelva a editar el símbolo gauge_mc, luego use la herramienta Transformación libre (atajo: Q) para hacer doble clic en el círculo pequeño. Esto lo ajustará al punto de registro de la aguja..
Crea una nueva capa debajo de los "marcadores" de la aguja. Dibuje un círculo, más pequeño que el marco, con un trazo negro grueso y sin relleno.
En otra capa nueva, seleccione la herramienta PolyStar y úsela para crear una estrella de diez lados, centrada en la aguja. Usaremos esto para crear los pequeños marcadores alrededor del anillo.
En la capa de marcadores, dibuje líneas finas desde la aguja hasta cada punto de la estrella. De esta manera, sabes que están espaciados uniformemente..
Cree un círculo incluso más pequeño que el anillo marcador, luego seleccione las líneas dentro de este círculo y presione eliminar para borrarlas todas.
Borre el círculo interior, los marcadores externos y la sección inferior del anillo marcador, como se resalta a continuación:
Etiqueta los marcadores: el primero como 0, el medio como 50 y el último como 100.
Cree una nueva capa encima de todas las demás llamadas "vidrio" y otra encima de la que se llama "brillo".
En la capa de vidrio, dibuje un círculo blanco del tamaño del fondo. Hacer clic Ventana> Color y dale un relleno de degradado radial, donde ambos colores son blancos pero uno tiene un 20% de alfa y el otro tiene un 5% de alfa.
En la capa de brillo, cree dos círculos blancos con alfas degradados que van del 70% al 30%. Use la herramienta Selección para exprimir sus formas a las que se muestran a continuación:
Cree otra capa nueva llamada "etiqueta" y agregue un campo de texto con "label_txt" como su nombre de instancia. No olvides incrustar la fuente.!
Agregue una nueva capa llamada "valor" y agregue un campo de texto con "value_txt" como su nombre de instancia. Una vez más, no se olvide de incrustar las fuentes. Estoy usando una fuente llamada LCDDot, que puedes encontrar en el archivo zip.
En este momento, la aguja apunta a la marca del 50%. Necesitamos que apunte al 0% cuando comience, así que haga doble clic en "needle_mc", seleccione el relleno y gírelo a -143º. Esto nos dará la compensación que necesitamos..
Asegúrese de que no haya nada seleccionado, luego en el panel Propiedades, escriba Principal en el cuadro Clase para establecer Main.as como su clase de documento. Ahora ábrelo.
Usaremos el motor de interpolación de GreenSock, TweenMax. Puede descargarlo aquí: http://blog.greensock.com/tweenmax/
Importar las clases necesarias para Main.as:
paquete import flash.display.MovieClip; import flash.events.Event; importar flash.net.URLLoader; importar flash.net.URLRequest; import com.greensock.TweenMax; import com.greensock.events.TweenEvent;
Este código debe ir después de "import com.greensock.events.TweenEvent;" pero antes del último "". La función Main () será la primera función ejecutada cuando se cargue el SWF.
Accentsconagua
public class Main extiende MovieClip private var xmlLoader: URLLoader; // esto cargará el xml privado var xml: XML; // esto contendrá los datos xml cargados por xmlLoader private var gauges: Array; // esto almacenará la función pública de indicadores creada Main () gauges = new Array (); // inicia el array xmlLoader = new URLLoader (); // inicia el cargador xmlLoader.addEventListener (Event.COMPLETE, updateGauges) // cuando se carga XML, actualiza los indicadores xmlLoader.load (new URLRequest ("gauge.xml")); // inicia la carga del archivo XML Ponga este código antes de los dos últimos "" en su archivo. Esta función se ejecutará cuando el XML se haya cargado.
función privada updateGauges (e: Event): void // llena el xml con los datos recibidos xml = new XML (e.target.data); // itera a través de los indicadores dentro de la estructura xml var ln: int = xml.gauge.length (); //número des dentro del archivo XML var i: int = 0 while (i < ln) gauges[i] = new Gauge(); //creates a new Gauge and puts it in the gauges[] array gauges[i].label_txt.text = xml.gauge[i].description[0].toUpperCase(); //adds the description to the label of the i-th gauge based on the XML's i-th indicadores [i] .value_txt.text = "0%" // inicia el valor del indicador de indicadores // anima la rotación del indicador (286 es la rotación máxima de la aguja que construimos) var tm: TweenMax = nuevo TweenMax (indicadores [i] .needle_mc, 2, rotation: Math.round (xml.gauge [i] .value [0] * 286/100)); // este evento se activa cuando cambia el valor de la interpolación; hacemos esto para actualizar el valor del texto de acuerdo con la posición de la aguja tm.addEventListener (TweenEvent.UPDATE, onTween) // y medidores de posicionamiento [i] .y = 45 // x posicionamiento (220 píxeles de distancia entre ellos y 50 píxeles de desplazamiento) desde los indicadores de margen izquierdo [i] .x = (i * 220) + 50 // se agrega a la etapa addChild (indicadores [i]); // aumenta i para la siguiente iteración i ++
De nuevo, inserte esto antes de los dos últimos "" en su código. Esta función se ejecuta repetidamente a medida que la aguja se interpone (gira).
función privada onTween (e: Evento): void / * esto evitará un error de rotación conocido dentro de flash * donde, al girar, después de alcanzar 180º comienza a contar desde -180 * (es decir, de 0 a 180, -180). a 0). Al agregar 360 a la ecuación cuando la rotación es negativa * podemos asegurarnos de que el valor sea correcto. * * / if (e.target.target.rotation < 0) e.target.target.parent.value_txt.text = (Math.round( (360+e.target.target.rotation) * 100 / 286) + "%"); else e.target.target.parent.value_txt.text = (Math.round( e.target.target.rotation * 100 / 286) + "%");
¿Confundido acerca de dónde debe ir cualquiera de los códigos? Mira aqui.
Ahora todo lo que necesita es regresar a gauge.fla y, en el primer cuadro, agregar un fondo y un título:
Como puedes ver, es más fácil de lo que parece. Tómese su tiempo y expanda el concepto: haga un precargador, un medidor de ancho de banda, lo que quiera. Espero que hayas disfrutado este tutorial, gracias por leerlo.!
