Flex 3. TeraFire Effect
Un ejemplillo de la libreria TeraFire.
Efecto fuego desde Japón - http://www.libspark.org/wiki/trick7/TeraFire
Un ejemplillo de la libreria TeraFire.
Efecto fuego desde Japón - http://www.libspark.org/wiki/trick7/TeraFire
Atendiendo la petición de un oyente... esto... de un lector del blog, aquà va un ejemplo muy verbenero sobre como explotar cohetes.
TODO: Colocar sonido a las explosiones
Descargar código fuente (archivo Fla incluÃdo) >>
P.D.1: Como hemos dicho alguna vez, la probabilidad de atender una petición es directamente proporcional a las ganas que tengamos de hacerla, multiplicada por el coeficiente "encontrar un hueco". Pero por pedir, que no quede
P.D.2: He visto el ejemplo en un ordenador más antiguo que el mÃo habitual y parece que va algo lento. He sido un poco animal y lo he hecho a 800x600 y 50 fps. Si en tu ordenador va lento, cambia a un tamaño menor, o disminuye el número de cohetes que se disparan en cada tanda.
He animado los movimientos con Tweener y le he aplicado un falso motionBlur con el filtro BlurFilter, en función de la posición de cada plano.
Para iniciar el efecto pulsa sobre la imagen cuando estés en el ejemplo.
Se trata de otro ejemplo de utilizacion de BulkLoader. El anterior me salió "poco pesado", una cualidad muy apreciada en las personas, pero menos conveniente en este caso
.
Ver ejemplo y código fuente >>
Descargar proyecto Flex 3 completo >>
Descargar biblioteca BulkLoader >>
Descargar biblioteca Tweener >>
Se trata de un proyecto ActionScript, por lo que puede utilizarse desde Flash CS3. Los filtros que se aplican a las imágenes son filtros de convolución (ConvolutionFilter): desenfoque, detección de bordes, nitidez, etc; y filtros ColorMatrix (ColorMatrixFilter): blanco y negro, negativo, canales de color, etc.
Como viene siendo costumbre, las imágenes no están incluÃdas en el archivo zip, y se trata de las de siempre
. En este caso he utilizado 20 imágenes cuadradas: imagen1.jpg, ...., imagen20.jpg. Puedes coger 20 imágenes propias que te gusten y llamarlas asÃ, o pasarte por la carpeta de la caché de tu navegador web y recuperarlas.
Por cierto, últimamente estamos posteando proyectos exportados con Flex 3. En principio no debe dar mucho problema utilizar el código con Flex 2, ya que se trata de archivos zip.
P.D.: Me he inspirado (ahora se llama asà a copiar descaradamente) para este ejemplo en una aplicación web bastante popular. Doy una pista para el que no la haya reconocido: empieza por Photoshop y acaba por Express.
Un ejemplillo de aplicación de la clase DeformBitmap anterior. La he modificado un poco para adaptarla a este caso, pero básicamente es la misma.
He utilizado Tweener para animar el efecto.
Aviso desde ya que este ejemplo ha salido un poco "Matrix", y es algo cansado de ver.
Descargar código fuente y archivo Fla >>
El filtro DisplacementMapFilter -o filtro de mapa de desplazamiento-, se puede utilizar a partir de un mapa en escala de grises, pero para conseguir un mayor efecto 3D es aconsejable emplear normalsMap's. Estos mapas los generan los programas de 3D como 3D Studio Max o Cinema 4D.
En 3D Studio tienes la posibilidad de generar un normalsMap para un objeto de baja resolución en el cuadro de diálogo del tostado de texturas (tecla 0).
Una vez generado el normalsMap (es una imagen que habrás guardado en formato tga o png) se le pasa como parámetro al filtro DisplacementMapFilter, y este se aplica a la imagen que quieras "inflar". Para reforzar el efecto 3D, se puede colocar encima un sprite con las sombras renderizadas en 3D Studio.
En este ejemplo, imagen1.png contiene el normalsMap e imagen2.png muestra las sombras renderizadas del objeto
(ambos archivos puedes encontrarlos en el zip del código fuente).