Ejemplo de API de dibujo: Generador visual algorítmicoFlash Player 9 y posterior, Adobe AIR 1.0 y posterior 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:
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 para esta muestra, 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:
Configuración de los detectoresEn 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élitesUna 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élitesLa 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, sólo 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 usuarioLa 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 avanzadaEste ejemplo constituye tan sólo 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:
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. 
|
|
