Comunidad de diseño web y desarrollo en internet online

Mascara 'inversa' con mask, blendmode o lo que sea!

Citar            
MensajeEscrito el 16 Nov 2010 09:25 pm
Hola a todos.

Necesito que alguien me ilumine con la siguiente situación:
Imaginad que vemos el tejado de una casita desde arriba, y el mc de una personita. Quiero que la personita desaparezca al pasar 'debajo' (es decir, sobre) del tejado y quiero saber si puedo hacerlo con una máscara, ya que el tejado es parte del bitmap del background, no es un mc independiente. Si hago un cuadrado de las dimensiones y posicion del tejado y luego personita.mask = cuadrado; entonces la persona no aparece hasta que se mueve sobre el cuadrado, y es justo lo contrario lo que quiero conseguir. También quiero que se vea el tejado, es decir el background, así que la máscara estaría visible = false. Si hago cuadrado.mask = personita; sucede casi lo mismo, salvo que cuando se ve la personita, se su silueta con el color del cuadrado.
También he probado a que la máscara sea lo inverso, es decir, que sea un cuadrado que cubra toda la pantalla con un agujero sobre el tejado, pero tampoco ha funcionado.
He tratado de aplicar el blendmode alpha como he visto por ahí, pero creo que no lo hago bien, no me funciona, y los ejemplos que he encontrado no me han dejado las cosas muy claras.

Supongo que siempre podría separar el tejado como otro movieclip y ponerlo en una capa por encima del hombrecito, pero me gustaría saber, por aprender, si es posible hacerlo con máscaras o blendmodes. ¿Alguien sabe de algún ejemplo por ahí como el que planteo?

Gracias de antemano!

Por Eldelgas

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Nov 2010 09:37 pm
BuenAS:

Para hacer una máscara inversa, si el MovieClip que quieres enmascarar se llama "imagen" y la máscara "mascara", jugando con el BlendMode, como dices, puedes conseguirlo:

Código ActionScript :

mascara.blendMode = BlendMode.ERASE;
imagen.blendMode = BlendMode.LAYER;

imagen.addChild(mascara);


Hay que añadir la máscara al MovieClip que quieres enmascarar, a la máscara le configuras BlendMode.ERASE y al MovieClip BlendMode.LAYER.

Ahora la máscara se comportará de forma inversa a como lo haría una máscara normal; o sea, dejará un hueco donde tenga geometría.

Cuidado que NO hay que establecer la propiedad mask; o sea, NO HAY QUE HACER image.mask = mascara.

Un saludo.

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 16 Nov 2010 09:40 pm

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 17 Nov 2010 04:45 pm
Gracias por contestar, Lukánicos. Al ejemplo que me pasas ya le eché un ojo rebuscando cómo hacerlo.
He hecho una prueba aislada del asunto como explicas, por si es que había 'algo más' que impedía que algo que parece tan fácil funcionase. Pero ni por esas. Así que definitivamente hay algo que se me escapa. Si a alguien le apetece echarle un ojo:
http://www.megaupload.com/?d=5LF96TOS

Saludos

Por Eldelgas

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Nov 2010 08:23 pm
BuenAS:

He subido otro ejemplo, bastante básico esta vez y se trata de un archivo fla con el código en el frame1. La máscara inversa no tiene mucha complicación:

Máscara inversa

Un saludo.

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 20 Nov 2010 06:26 pm
Hola de nuevo.

Con ese nuevo ejemplo ya lo he sacado. ¡Muchas gracias! :D
Lo he aplicado a mi caso y funciona, pero me plantea dos problemas más, supongo que por el hecho de que el mc máscara sea hijo del enmascarado, y no sé si tienen solución:

1) Mi mc enmascarado se mueve, y cuando él se mueve la máscara hija se mueve con él. Pero yo no quiero que se mueva la máscara, ¿hay alguna manera de decirle a ésta que tome una posición relativa al stage y que no se mueva cuando lo haga el padre? He estado buscando pero parece que no acierto con los términos.

2) El mc enmascarado es de diferente tamaño que la máscara. Mientras el enmascarado se mueve por la pantalla, si lo hace por cierta zona entonces lo redimensiono con la siguiente función:

Código ActionScript :

private function resizeImg(img:MovieClip, size:Number) {
            if (img.width<img.height) {
               var w:Number = img.width;
               img.width = size;
               img.height = size*img.height/w;
            } else {
               var h:Number = img.height;
               img.height = size;
               img.width = size*img.width/h;
            }
         }


Pero ahora, desde que le añado el mc máscara como hijo, cuando aplico el resize, parece como si el tamaño máximo
que toma del mc no fuera el del enmascarado, sino el del conjunto de la lista, quiero decir, en este caso padre e hijo, y al ser el hijo más grande, el padre se queda superpequeño. Hm, no sé si me explico. Parece como si el resize, a la hora de considerar el tamaño del mc cogiera el del más grande entre padre e hijos. ¿Sabes si esto es evitable?

Saludos

Por Eldelgas

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Nov 2010 06:54 pm
BuenAS:

Si lo que quieres es que haya un hueco "fijo" por el que se vea a través de un MovieClip otro, casi mejor recurre al método tradicional. Si tienes los movieclips Fondo y PrimerPlano y quieres que haya un hueco en PrimerPlano por el que se vea Fondo, colocalos al revés y enmascara Fondo.

Es decir, pones, de abajo a arriba, las capas PrimerPlano, Fondo y Máscara; y enmascaras la capa fondo con Máscara. (En el enlace que puse tienes un ejemplo de esto). Ahora, según comentas, sólo tendrías que mover la capa Fondo para dar la sensación de que el fondo se mueve y se ve a través del hueco que deja la máscara. No sé si me he conseguido explicar.

Por otro lado veo que estás utilizando las propiedades width y height para obtener el tamaño del movieClip. Cuando tienes movieclips enmascarados estos valores NO SUELEN SER los esperados. En este caso utilizo las funciones:

getVisibleWidth getVisibleHeight

que desarrolló Collin Moock, que dan el tamaño "visible" de un simbolo, y que sí ajusta más a la realidad.

Un saludo.

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 21 Nov 2010 04:21 pm
Importante lo del tamaño. Le echo un ojo.

Gracias!

Por Eldelgas

8 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.