Comunidad de diseño web y desarrollo en internet

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:

Cristalab y Mejorando.la te traen el increíble Curso de Estrategia Digital y Marketing. Online, a tu ritmo, con diploma de certificación y clases 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