|
Efectos Flash. Cristales Rotos con AS3.
por Julio Laguna - redribera
1 Efecto animado de cristales rotos.
1.1 Descripcion del efecto
1.2 Gráficos para los trozos de cristal.
1.3 Clases ActionScript 3 necesarias.
1 Efecto animado de cristales rotos.
1.1 Descripcion del efecto.
En este tutorial, vamos a tratar de componer un efecto que emule la animación de cristales (o vidrio)
rompiendose como si hubiese recibido un impacto (de una piedra, una bala....).
Se trata de un efecto, a mi entender, muy útil a la hora de realizar determinadas animaciones, animaciones de tipo impacto, y un efecto extrapolable a la rotura de otros materiales.
Es decir, en este caso veremos como lograr el efecto de vidrio rompiendose, pero de forma análoga lo podemos adaptar a la rotura de otros objetos como un ladrillo, metal, alimentos... cualquier cosa que se haga 'añicos', o se descomponga en pedazos
de una determinada forma común.
El tutorial se desarrolla para la plataforma de Adobe Flash, utilizando el lenguaje ActionScript 3.0. Este efecto es aplicable a multitud de animaciones interactivas, como por ejemplo juegos Flash Online. Particularmente algunos géneros de juegos, como
los juegos de disparar, incorporan efectos de este estilo, con mayor o menor complejidad.
Bajo estas líneas encontrará un ejemplo del efecto que perseguimos. En este caso el efecto Flash está montado sobre un escenario en el que se pueden observar 3 farolas, y una especie de mira teléscopica, produciendose un efecto de impacto como si dispararamos sobre
las farolas. Pruebe a realizar click sobre los cristales de las farolas y observará el efecto al que nos referimos (puede restaurar los cristales haciendo click sobre el botón restaurar):
Nota: Es necesario Flash Player 9 o superior para la correcta visualización de los ejemplos del tutorial.
Desde esta misma página en la parte izquierda de navegación hay un enlace a la página de descargas de Flash Player de Adobe.
Como observará en el ejemplo expuesto arriba,... se trata de un efecto que emula una tulipa de una farola rompiendose por el impacto de, posiblemente, un proyectil; una bala, una piedra, lo que queramos, no es importante ahora.
Además un detalle importante a tener en cuenta, y si se fija con detenimiento, es que la animación de cristales rompiendose, el foco o epicentro del efecto, se encuentra situado en el centro de la mira telescópica (la posición actual del puntero del ratón).
De modo que se trata de un efecto que además debemos poder iniciar en unas coordenadas `x` e `y` en el espacio de la escena de la película Flash. Por supuesto esto debe ser así, pues piense que será mucho mas realista la producción de trozos de
cristal desde el punto en el que se impacto.
Quisiera también que probara a realizar varias veces el impacto sobre las tulipas de las farolas para notar que los fragmentos producidos, aunque parecidos, no son iguales. Ni en cuanto al número de trozos, ni a la dirección y velocidad que siguen tras el impacto.
Por supuesto y como usted verá siguen un patrón mas o menos realista. Sería ilógico pensar que los cristales de una farola al reventar, puedan ir hacia arriba , flotando, como si la gravedad no les afectara. Así que dentro de un patrón, que a mi me ha parecido idoneo, los fragmentos generados
siguen un movimiento aleatorio. Pero usted será libre de cambiarlo, y verá como es relativamente sencillo, para adaptarlo a sus necesidades.
Por tanto y sintetizando todo esto, veamos como implementar las clases ActionScript 3 necesarias para:
1.- Generar un número aleatorio de trozos de cristal roto a partir de unas coordenadas x, y.
2.- Insertar un sonido de impacto (cristales rotos).
3.- Generar una animación / movimiento `realista` para los trozos generados
Fuera del tutorial quedan otros aspectos como el hacer desaparecer la tulipa sin romper de las farolas, o la forma de poner la mira telescópica, ya que no es ese el objetivo de este tutorial. Todo esto, simplemente lo he puesto como un ejemplo para que al lector no le resulte extraño el desarrollo.
Sin embargo, puede descargar aquí mismo el fichero de ejemplo comprimido con todos los archivos necesarios para seguir este tutorial, sin picar una línea de código:
Efectos Flash. Cristales rotos con AS3 (cristales.zip - 178 KB)
En la siguiente página, seguimos con los detalles técnicos de este efecto. Las clases AS3 necesarias para que funcione. Pero antes un breve vistazo a algunos gráficos necesarios para producir el efecto de cristales rotos.
| 
