Comunidad de diseño web y desarrollo en internet online

Efecto cristal en imagenes con BitmapData en Flash 8

El cristal es un efecto de Bevel básicamente. Con este efecto lograremos que una imagen parezca hecha de vidrio o cristal. De modo que las imágenes detrás de ella se reflejen tal como lo harían en un vaso con la forma de nuestra imagen base. El truco esta en ajustar el threshold de la imagen que convertimos en "cristal". Se necesitan solamente 2 imágenes, el fondo y y el móvil con vinculación desde la biblioteca como "imagen1" e "imagen2".

Código Cristal



Da click sobre la imagen y mueve el mouse.

Coloca este código en el primer keyframe.

Código :

import flash.geom.*;
import flash.filters.*;
import flash.display.*;
img1 = BitmapData.loadBitmap("imagen1");
img2 = BitmapData.loadBitmap("imagen2");
createEmptyMovieClip("efecto",0);
sal = img2.clone();
efecto.attachBitmap(sal,0);
w = img1.width;
h = img1.height;
c=0x8080;
lim = img1.rectangle;
P0 = new Point();
Nm = new Matrix();
img1.threshold(img1,lim,P0,">",0xfae0e0,0,0xffffff);
BF = new BitmapData(w,h,false,c); xy = img1.clone();
xx = new BitmapData(w,h,true,c);yy = new BitmapData(w,h,true,c);
xy.colorTransform(lim,new ColorTransform(0,0,0,1,0,64,64,0));
xx.applyFilter(xy,lim,P0,new BevelFilter(4,45,0,0,0,1,4,4,1,4));
yy.applyFilter(xy,lim,P0,new BevelFilter(4,225,0,0,0,1,4,4,1,4));
BF.draw(xx);
BF.draw(yy,Nm,null,"add");
xx.dispose();
yy.dispose();
xy.dispose();
Mouse.hide();
dMap = new DisplacementMapFilter(BF,P0,2,2,-50,-50,"clamp");
CT = new ColorTransform(1,1,1,.4,0,0,0,0);
onMouseMove = function(){
   Pt = new Point(_xmouse -w/2,_ymouse - h/2);
   dMap.mapPoint = Pt;
   Nm.tx = Pt.x;
   Nm.ty = Pt.y; 
   sal.copyPixels(img2,img2.rectangle,P0);
   sal.applyFilter(sal,img2.rectangle,P0,dMap);
   sal.draw(img1,Nm,CT,"multiply");
}
onMouseMove();

img1.threshold(img1,lim,P0,">",0xfae0e0,0,0xffffff);
Si es un PNG con transparencia y preparado anteriormente no necesitará esta línea o se puede igualar a transparente. Si es otro tipo de imagen, habrá que tantear la mejor solución en el valor del threshold.

Para más información del uso de estos efectos, puedes ver otros:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

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