|
El ejemplo del generador visual algorítmico dibuja dinámicamente en el escenario varios "satélites", o círculos que se mueven en una órbita circular. Algunas de las funciones exploradas son:
-
Utilizar la API de dibujo para dibujar una forma básica con apariencias dinámicas
-
Conectar la interacción del usuario con las propiedades que se usan en un dibujo
-
Producir una animación borrando y redibujando el escenario en cada fotograma
El ejemplo de la subsección anterior animaba un "satelite" solitario mediante el evento
Event.ENTER_FRAME
. En este ejemplo se amplía el ejemplo anterior creando un panel de control con varios controles deslizantes que actualizan inmediatamente la presentación visual de varios satélites. En este ejemplo se formaliza el código en clases externas y se rodea con un bucle el código de creación del satélite, almacenando una referencia a cada satélite en un conjunto
satellites
.
Para obtener los archivos de la aplicación de este ejemplo, consulte
www.adobe.com/go/learn_programmingAS3samples_flash_es
. Los archivos de la aplicación se encuentran en la carpeta Samples/AlgorithmicVisualGenerator. Esta carpeta contiene los siguientes archivos:
|
Archivo
|
Descripción
|
|
AlgorithmicVisualGenerator.fla
|
El archivo principal de la aplicación en Flash (FLA).
|
|
com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as
|
La clase que proporciona la funcionalidad principal de la aplicación, incluido el dibujo de satélites en el escenario y la respuesta a los eventos del panel de control para actualizar las variables que afectan al dibujo de satélites.
|
|
com/example/programmingas3/algorithmic/ControlPanel.as
|
Una clase que gestiona la interacción con el usuario mediante varios controles deslizantes y distribuye eventos cuando esto ocurre.
|
|
com/example/programmingas3/algorithmic/Satellite.as
|
Una clase que representa al objeto de visualización que gira en una órbita alrededor de un punto central y contiene propiedades relacionadas con su estado de dibujo actual.
|
Configuración de los detectores
En primer lugar, la aplicación crea tres detectores. El primero de ellos detecta un evento distribuido desde el panel de control que hace que resulte necesario volver a crear los satélites. El segundo detecta los cambios en el tamaño del escenario del archivo SWF. El tercero detecta el paso de los fotogramas en el archivo SWF y redibuja la pantalla utilizando la función
doEveryFrame()
.
Creación de los satélites
Una vez configurados esos detectores, se llama a la función
build()
. Esta función llama en primer lugar a la función
clear()
, que vacía el conjunto
satellites
y borra todo lo que hubiera dibujado anteriormente en el escenario. Esto es necesario, ya que la función
build()
puede volverse a llamar siempre que el panel de control envíe un evento para ello como, por ejemplo, cuando se modifique la configuración del color. En tal caso es necesario eliminar y volver a crear los satélites.
A continuación, la función crea los satélites, configurando las propiedades iniciales necesarias para su creación, como la variable
position
, que se inicia en una posición aleatoria de la órbita, y la variable
color
, que en este ejemplo no cambia una vez creado el satélite.
A medida que se crea cada satélite, se añade una referencia a ellos en el conjunto
satellites
. Cuando se llame a la función
doEveryFrame()
, se actualizarán todos los satélites de este conjunto.
Actualización de la posición de los satélites
La función
doEveryFrame()
es el núcleo del proceso de animación de la aplicación. En cada fotograma se llama a esta función, a una velocidad igual a la velocidad de fotogramas del archivo SWF. Dado que las variables del dibujo varían ligeramente, se produce el efecto de animación.
En primer lugar, la función borra todo lo que hubiese dibujado previamente y redibuja el fondo. A continuación, el bucle itera para cada contenedor de satélite e incrementa la propiedad
position
de cada satélite y actualiza las propiedades
radius
y
orbitRadius
, que pueden haber cambiado a causa de la interacción del usuario con el panel de control. Finalmente, el satélite se actualiza y se coloca en su nueva posición llamando al método
draw()
de la clase Satellite.
Hay que tener presente que el contador,
i
, solo se incrementa hasta la variable
visibleSatellites
. Esto se debe a que, si el usuario ha limitado la cantidad de satélites que se muestran en el panel de control, los satélites restantes del bucle no se muestran, sino que se ocultan. Esto ocurre en un bucle que sigue inmediatamente al bucle encargado del dibujo.
Cuando se completa la función doEveryFrame(), el número de
visibleSatellites
se actualiza en posición a lo largo de la pantalla.
Respuesta a la interacción con el usuario
La interacción con el usuario se produce a través del panel de control, que gestiona la clase ControlPanel. Esta clase define un detector, junto con los valores mínimos, máximos y predeterminados individuales de cada control deslizante. Cuando el usuario mueve alguno de los controles deslizantes, se llama a la función
changeSetting()
. Esta función actualiza las propiedades del panel de control. Si el cambio requiere que se redibuje la pantalla, se envía un evento que se gestiona en el archivo principal de la aplicación. Cuando cambia la configuración del panel de control, la función
doEveryFrame()
dibuja cada uno de los satélites con las variables actualizadas.
Personalización avanzada
Este ejemplo constituye tan solo un esquema básico de la forma en que se pueden generar efectos visuales mediante la API de dibujo. Emplea relativamente pocas líneas de código para crear una experiencia interactiva que, en apariencia, es muy compleja y, aún así, este ejemplo puede ampliarse mediante pequeños cambios. A continuación se exponen algunas ideas:
-
La función
doEveryFrame()
puede incrementar el valor del color de los satélites.
-
La función
doEveryFrame()
puede reducir o aumentar el radio del satélite a lo largo del tiempo.
-
El radio del satélite no tiene por qué ser circular. Se puede usar la clase Math para se muevan siguiendo, por ejemplo, una onda sinusoidal.
-
Los satélites pueden emplear un mecanismo de detección de colisiones con otros satélites.
Se puede utilizar la API de dibujo como alternativa para crear efectos visuales en el entorno de edición de Flash, dibujando formas básicas en tiempo de ejecución. Asimismo, se puede usar para crear efectos visuales de una variedad y extensión imposibles de alcanzar manualmente. Mediante la API de dibujo y un poco de matemáticas, el autor puede dar vida a un sinnúmero de creaciones sorprendentes.
|
|
|
