Matrices en Flash. Efecto de leds on-off sobre un display. por Julio Laguna is licensed under a Creative Commons Reconocimiento-No comercial-Sin obras derivadas 2.5 España License.

Matrices en Flash. Efecto de leds on-off sobre un display.
por Julio - redribera

1 Capítulo 1.
    1.1 Introducción.
    1.2 Crear el fichero Flash.
    1.3 Matrices o Arrays multidimensionales con ActionScript.

1 Capítulo 1.

1.1 Introducción.

Ultimamente estoy volviendo a cogerle el gustillo al Flash, y estoy realizando algunas pruebas para el desarrollo de juegos online y sitios en Flash. Muchas de las pruebas que realizo nunca llegan a ver la luz y se quedan perdidas entre los datos de nuestros discos duros. Hace unos dias comencé a desarrollar algunas pruebas para insertar una especie de pantalla táctil de leds a un juego flash. Todo lo que quería saber ya lo he conseguido, pero daba algo de pena que el trabajo que hice con el fichero de pruebas se quedara perdido en mi computadora. De este modo me he decidido a publicarlo como un tutorial de redribera, porque puede ser interesante ver este efecto y quizás alguno de nuestros lectores pueda considerarlo interesane y de utilidad para sus propios desarrollos.
El trabajo en cuestión es muy sencillo, se trata de una especie de pantalla hecha con FireWorks, sobre la cual al deslizarse el ratón se produce un efecto como de leds encendiendose a su paso. Al mismo tiempo, cuando realizamos un click sobre alguno de los leds que tenemos en el display, estos quedan encendidos (on) o apagados (off), según su estado previo.
Este Script, es ideal para aplicar los conceptos de matrices multidimensionales en ActionScript. Además es un buen ejercicio para conseguir ajustar gráficamente el mismo concepto de grid o rejilla.
Lo mejor es que lo vean ustedes mismos en el swf en ejecución que tenemos bajo estas líneas:

1.2 Crear el fichero Flash.

Crear este fichero no tiene demasiada complejidad en cuanto a elementos se refiere. Tan solo hemos utilizado un elemento externo a Flash, y que es el dibujo de la que vamos a simular como pantalla. Bajo estas líneas está un ejemplo, aunque todos los recursos los teneís en el fichero flash para descargar.

simbolo de pantalla en jpg

En las pruebas que realicé y como nota, os diré que el tamaño del simbolo en Flash, lo he ido variando para que en función del grosor del pixel, estos queden ajustados a la pantalla.

Bueno, en este ejemplo, necesitamos crear, los simbolos que os muestro a continuación, de la captura de pantalla de la biblioteca de simbolos del fichero Flash.

biblioteca de simbolos

Descargando el fichero fla, teneís accesibles todos los clips de película. No son excesivamente complejos:
butClear es el simbolo usado para el botón de limpiar pantalla, no tiene mas comentarios, mas que el evento on (MousePress) que llama a la función cls, que vereís en el script de mas adelante.
logo, es tan solo el clip con los créditos de redribera.es.
TactilScreen(FW), es el simbolo que utilizamos como pantalla, que os mostré en la imagen anterior.
Buttons_bg1, es el mismo gráfico que TactilScreen(FW), redimensionado para ser el fondo del botón de butClear.
tact_led es el simbolo que veís a continuación:

led

y no es mas que un rectangulo, que utilizaremos como led de la pantalla (encendidos y apagados). Este clip, tan solo contiene un fotograma, con el simbolo mostrado.
Por último el clip tact_led_mov, es una animación de fade out, del mismo clip tact_led, se trata del led apagandose, y se utiliza para conseguir el efecto que se produce al desplazar el puntero del ratón por encima de la pantalla, produciendo ese efecto de leds encendiendose y apagandose poco a poco a su paso, cuando no realizamos un click de ratón.

La escena principal.
Vamos a componer la escena principal del fichero flash. Si os fijaís en la imagen de mas abajo, comprobareís que he creado cuatro capas diferentes para nuestra escena principal.

Línea de tiempo de la Escena principal

La capa buttons, contiene los clips del botón de limpiar pantalla y el logotipo de redribera.
La capa bg, contiene el fondo degradado que podeís ver en el archivo, un rectangulo con degradado. Y la capa screen, contiene el simbolo de la pantalla tactil. Podriamos haberlo reunificado tod en una única capa, pero así queda mucho mas claro. Finalmente la capa Acciones contendrá el código ActionScript que dará interactividad a nuestro fichero.

Añadir un comentario  Ver comentarios