Efecto de relieve en imagenes con BitMapData de Flash 8

Por: Teseo + 14.01.2007

En esta colección voy desarrollando algunas de las muchas posibilidades que esta clase brinda a programadores y diseñadores. Efectos de agua, fuego, nubes, arroyos, cascadas, banderas, rayos, lluvia, lagos, nieve, humo, relieves, deformaciones, movimientos, etc pueden crearse y ser simulados de manera muy realista con unas pocas lineas de código. El primero será:

Efecto Relieve:

Esta sería nuestra imagen de origen:

Y este es el resultado. Pasa el mouse por encima de la imagen para ver el efecto de relieve en acción.


En una nueva película de Flash colocamos el siguiente código:

Código :

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
_quality = "low";
pt = new Point();
Mouse.hide();
img = BitmapData.loadBitmap("imagen");
rc = img.rectangle;
img.width>img.height ? h=img.width : h=img.height;
h = Math.round(h);
img2 = img.clone();
temp = img.clone();
img.colorTransform(rc, new ColorTransform(1, 1, 1, 0, 127, 127, 127, 255));
img2.colorTransform(rc, new ColorTransform(1, 1, 1, 1, 0, 0, 0, 255));
temp.perlinNoise(20, 20, 2, 0, true, true, 15, false, null);
img.merge(temp, rc, pt, 80, 80, 80, 255);
temp.dispose();
img.applyFilter(img, rc, pt, new BlurFilter(4, 4, 1));
mc1 = this.createEmptyMovieClip("mc1", 1);
mc1.attachBitmap(img2, 2);
marco = this.createEmptyMovieClip("marco", 2);
marco.blendMode = 14;
mc2 = marco.createEmptyMovieClip("mc2", 1);
cl = [0xffffff, 0xe7cf07, 0];
al = [40, 60, 100];
rt = [0, 37, 255];
matrix = new Matrix();
matrix.createGradientBox(h, h, 0, h/2, h/2);
mc2.beginGradientFill("radial", cl, al, rt, matrix);
mc2.moveTo(0, 0);
mc2.lineTo(0, 2*h);
mc2.lineTo(2*h, 2*h);
mc2.lineTo(2*h, 0);
mc2.lineTo(0, 0);
mc2.endFill();
sal = temp=img.clone();
mx1 = [0, 0, 0, -1, 0, 1, 0, 0, 0];
mx2 = [0, -1, 0, 0, 0, 0, 0, 1, 0];
temp.applyFilter(img, rc, pt, new ConvolutionFilter(3, 3, mx1, 1, 127));
sal.copyPixels(temp, rc, pt);
temp = img.clone();
temp.applyFilter(img, rc, pt, new ConvolutionFilter(3, 3, mx2, 1, 127));
sal.copyChannel(temp, rc, pt, 1, 2);
temp.dispose();
dMap = new DisplacementMapFilter(sal, pt, 1, 2, -300, -300);
onMouseMove = function () {
   x = h-_xmouse;
   y = h-_ymouse;
   dMap.mapPoint = new Point(x, y);
   mc2.filters = [dMap];
   mc2._x = -x;
   mc2._y = -y;
   updateAfterEvent();
};
onMouseMove();

Simplemente una imagen con nombre "imagen" para vinculación en la biblioteca y listo.
Utiliza varias transformaciones de la imagen para hacerlo y, variando algunos parámetros, cambiamos el foco, el color, la textura del fondo, etc...

Explico un poco la manipulación de parámetros más importantes que se pueden tocar:
temp.perlinNoise(20,20,2,0,true,true,15,false,null);
Cambian la textura de fondo. Valores pequeños, más rugosa. Valores descompensados 10,300 tipo cortinas u olas.

img.applyFilter(img, rc, pt, new BlurFilter(4, 4, 1));
El Blur es el que crea la profundidad, si lo aumentamos mucho el relieve será más inclinado el valor que ahora está a 1(calidad) si se incrementa suaviza los contornos. Para texturas tipo plástico a tipo acero.

cl = [0xffffff,0xe7cf07,0]; al = [40,60,100]; rt = [0,37,255];
Son el color, fuerza y forma de degradado del foco de luz. Son los parámetros que más hacen variar el efecto. Se puede crear más complejo el array y/o añadir radiados, halos, etc.

dMap = new DisplacementMapFilter(sal,pt,1,2,-300,-300);
Afectan a la profundidad del relieve, valores invertidos (positivos) hacen hueco en lugar de resalte.

Otros parámetros evidentemente también afectan la composición, pero estos son los más importantes. Aunque funciona con fondos claros u oscuros en algunos casos "especiales" habrá que retocar las transformaciones de color.

Si se desea usar un MC instanciado (en el ejemplo con nombre "logo") en lugar de una imagen cambiar esta linea:

Código :

img = BitmapData.loadBitmap("imagen"); rc= img.rectangle;

Por estas dos lineas:

Código :

img = new BitmapData(400,400,true,0); rc=img.rectangle; 
img.draw(logo); logo._visible=false;

Tanto este como el resto de efectos los voy desarrollando y atendiendo dentro del foro Flash dentro de este post:
¿Como puedo lograr hacer un efecto de agua?

actionscript

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario