Comunidad de diseño web y desarrollo en internet

Efecto de relieve en imagenes con BitMapData de Flash 8

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;

Sobre los códigos: En cuanto a las declaraciones estrictas, las uso en la creación de clases y en trabajos finales, pero no en ejemplos. Que trabaje el compilador, tampoco es para tanto. Lo lamento por los puristas de código, pero voy más al fondo que a la forma.

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?

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate