Entradas etiquetadas con Filtros
Flex 2. Efecto gotas de lluvia.
2 dic
En este ejemplo vamos a utilizar el filtro de Flash “ConvolutionFilter” para simular gotas de lluvia cayendo sobre agua. Si pulsas sobre la imagen se genera un foco de ondas, y si arrastrar el ratón se crea una estela.
Flex 2. Efecto de ondas sobre el agua.
25 nov
En este ejemplo vamos a simular el efecto que produce la caída de un objeto sobre la superficie del agua.
Ver ejemplo y código fuente >>
Hemos utilizado el filtro DisplacementMapFilter para distorsionar la imagen y darle un aspecto de superficie de agua.
El filtro de Flash que aplicamos distorsiona la imagen dándole un relieve que obtiene de un mapa de escala de grises: cuanto más blanco es el pixel que se procesa, más relieve da a la imagen final.
Como mapa de relieve (también conocido como bump map), hemos utilizado un gradiente radial con forma de onda, jugando con el nivel alpha del mismo. Este gradiente lo hemos aplicado a una shape llamada “fondo_shp”.
Para conseguir el efecto deseado aplicamos el filtro DisplacementMapFilter a la imagen, utilizando fondo_shp como mapa de relieve.
Propiedad BlendMode
11 nov
Ahí va un ejemplo sobre la propiedad ‘blendMode’.
Esta propiedad afecta a la apariencia de un movieclip cuando se encuentra en una capa superior que otro objeto en la pantalla. Existen 14 modos “normal”, “layer”, “multiply”, “screen”, “lighten”, “darken”, “difference”, “add”, “subtract”, “invert”, “alpha”, “erase”, “overlay”, “hardlight”.
He modificado el ejemplo de la ayuda de flash y lo he pasado a actionscript 3.
Ver Ejemplo>>
Descargar Código>>
Este es el código de la clase Main.
[ftf w="640" h="230"]/* Main.as */
package {
import flash.display.MovieClip;
import fl.controls.Label;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.geom.Matrix;
public class Main extends MovieClip {
var mc1:MovieClip = new MovieClip();
var mc2:MovieClip = new MovieClip();
var blendLabel:Label = new Label();
var blendModeIndex:int = 0;
var modes:Array = ["normal","layer","multiply","screen","lighten","darken","difference",
"add","subtract","invert","alpha","erase","overlay","hardlight"];
var timer:Timer = new Timer(1000);
public function Main() {
blendLabel.text = “”;
blendLabel.x = 80;
blendLabel.y = 25;
this.addChild(blendLabel);
mc1.x = 32;
mc1.y = 50;
this.addChild(mc1);
mc2.x = 65;
mc2.y = 83;
this.addChild(mc2);
fillClip(mc1, 0x00AA00, 0x22FFFF, 100, 100)
fillClip(mc2, 0xFF0000, 0x2211FF, 100, 50)
timer.addEventListener(TimerEvent.TIMER, changeBlendMode);
timer.start();
}
function changeBlendMode(e:TimerEvent) {
mc2.blendMode = modes[blendModeIndex];
blendLabel.text = modes[blendModeIndex];
blendModeIndex++;
if(blendModeIndex == 14)
blendModeIndex = 0;
}
function fillClip(mc:MovieClip, color1:Number, color2:Number, alpha1:Number, alpha2: Number) {
var spreadMethod:String = “reflect”;
var interpolationMethod:String = “linearRGB”;
var focalPointRatio:int = 0.9;
var matrix:Matrix = new Matrix();
matrix.createGradientBox(100, 100, Math.PI, 0, 0);
mc.graphics.beginGradientFill(“linear”, [color1, color2], [alpha1, alpha2], [0, 0xFF], matrix,spreadMethod, interpolationMethod, focalPointRatio);
mc.graphics.lineStyle(8,0×888888,100)
mc.graphics.moveTo(0, 0);
mc.graphics.lineTo(0, 100);
mc.graphics.lineTo(100, 100);
mc.graphics.lineTo(100, 0);
mc.graphics.lineTo(0, 0);
mc.graphics.endFill();
}
}
}
/* Main.as */[/ftf]
Flex 2. Efecto de profundidad de campo con Papervision 3D y el filtro BlurFilter
15 oct
En este ejemplo vamos a aprovechar las posibilidades que ofrece el filtro “BlurFilter” para simular el desenfoque que se produce en una cámara real debido a la profundidad de campo.
Ver ejemplo y código fuente >>
La clase que implementa el efecto se encuentra en el paquete jel.com.efectos:
EfectoDesenfoque.as
Por su volumen, las clases de Papervision 3D necesarias no van en el código fuente. Puedes descargarlas del siguiente enlace:
Descarga clases Papervision 3D
Descargar biblioteca compilada Papervision3D 1.7 >>
Para simular el efecto de profundidad de campo (a mayor apertura de diafragma, menor profundidad de campo, reduciendose la extensión de espacio en el que los objetos aparecen enfocados) hemos repartido aleatoriamente por un espacio 3D, unas esferas semitransparentes a las que aplicamos un filtro “BlurFilter” más o menos intenso dependiendo de su lejanía o proximidad a la cámara.
Las esferas no son objetos 3D, sino sprites (objetos planos con aspecto de esfera) que miran constantemente a la cámara. Este truco permite llenar el espacio con multitud de esferas sin saturar la capacidad de cálculo de Flash player.
Para girar las esferas en el espacio nos hemos servido de unos “dummys” (DisplayObject3D vinculados a un “nodoRaiz”, que es el que realmente rotamos) que tienen la misma posición en el espacio que las esferas. Así, como todos los “dummys” son hijos de “nodoRaiz”, al girar este último giran con él y actualizan la posición de los sprites esféricos.











