Efecto de máscaras con Flash

  • 11 de marzo de 2004
  • Valoración:
  • 22 Comentarios
  • Flash
Cómo se pueden usar las máscaras para obtener una animación web.
Las Máscaras es un efecto utilizado frecuentemente en páginas web que contienen películas Flash.

Dicho efecto consiste en ocultar objetos que se encuentren en el escenario de Flash, y mostrarlos poco a poco, por algún objeto que tenga una interpolación de movimiento o cualquier otro efecto que sea producto de tu imaginación. La máscara no es solamente para ocultar objetos completamente, un ejemplo podría ser mostrar los objetos color gris y que un objeto con interpolación de movimiento los muestre de otro color cuando pase sobre ellos.

Para tener todo más claro, hagamos un ejemplo fácil:

1- En Flash, en la escena 1, toma la herramienta de texto (A) y escribe lo que desees, utiliza un tamaño de fuente grande para que el texto abarque gran parte del escenario...

2- Dirígete al fotograma (frame) numero 60 de la "capa 1", haz un click sobre él, y presiona F6, para que el tiempo de duración de la película sea más prolongado.

3- Crea otra capa (capa 2), después toma la "herramienta óvalo" y dibuja un óvalo:-)

4- Haz click derecho sobre el nombre de la "capa 2" y en el menú que se desplegará, selecciona la opción "Máscara" (Mask)

5- Ahora dirígete al fotograma número 1 de la "capa 2" (es donde está el óvalo), haz click derecho, y después haz click en la opción "Crear interpolación de movimiento".

6- Finalmente haz click en el fotograma número 60 de la "capa 2" y presiona la tecla F6 y mueve el óvalo como tú quieras, eres un Flasher, así que debes tener mucha imaginación.


Nuestra línea del tiempo tendría que ser parecida a la siguiente imagen:

Ahora prueba la película

Click para ver un ejemplo

Comentarios

kanino

03/11/2006
cabe destacar que les falto convertir a simbolo el texto, si no no funciona, traten de hacer el mismo ejemplo con una imagene y sale a la perfeccion por lo menos en flash 8

AMELIA

10/6/2007
Muy buena información. Lo único es tener cuidado con que no este bloqueada ni la capa mascara ni la capa de la foto o texto que tengas bajo, porque sino no puedes moverlo. simplemente con ponerte encima de la capa y dandole doble click te aparece el menu para desactivar el bloqueo. Saludos

EMNA

04/10/2008
LO Q´LES FALTO FUE PONER COMO HACER UNA MASCARA EN UN CLIP DE PELICULA

Zcyz Dominguez

08/10/2008
MUY BUENA APORTACION, EL TEXTO NO ES OBLIGATORIO CONVERTIRLO EN SIMBOLO, PUES LO PROBE Y TODO SALIO EXCELENTE

camatorta

29/10/2008
Hola cibernautas, estoy haciendo una web en flash, en la cual inclullo un scroll de imagenes en la q cada imagen es un botón y al pasar por encima con el ratón la imagen es ampliada al lado del scroll o sea "rollOver". Hasta aqui todo bien, pero cuando le aplico la mascara al scroll no me reconoce las acciones de botón o sea en la previa me reconoce q es un botón pero no hace el "rollOver" y por cosiguiente no hace la ampliacion de la imagen.
Necesito ayuda estoy atrancado y no se ya q hacer.
Gracias anticipadas.

danilo

21/11/2008
una pregunta
quiero que un tazado (de un pincel por ejemplo) se vea dibujándose solo?, o líneas sin forma definida se tracen solas en la película
gracias

DAVID

19/2/2009
ME PARECE GRANDIOSO QUE EXISTAN ESTOS PORTALES YO NO SE HACER MUCHO EN FLASH PERO GRACIAS A ESTOS TUTORIALES HE PODIDO SORPRENDER A VARIOS COMPAÑEROS DE TRABAJO EN ESPECIAL ESTE EFECTO ME AYUDO A LUCIRME CON MI SEGUNDO PROYECTO GRACIAS SOLO CREO QUE FALTA ESPECIFICAR COMO MOSTRAR EL CONTENIDO DE LA MASCARA EN OTRO COLOR O RESALTANDO LA IMAGEN POR DONDE PASA LA ANIMACION GRACIAS DE CORAZON

angelica

31/3/2009
ayy y yo intentelo e intentelo como una hora y pensaba: pero que estoy haciendo mal??? ahhh

aNDRES NEUQUE

18/7/2009
VISTA ANIMACION
HE REALIZADO TODOS LOS PASOS COMO ESTA EN EL EJEMPLO AL DARLE CTROL ENTER ME APARECE EN BLANCO, PERO ESTANDO EN EL MENU DONDE ESTAN LAS CAPAS LO REALIZA SIEMPRE Y CUANDO YO LE COLOCO CANDADO A LAS DOS CAPAS 2Y8W

tni motola

24/10/2009
fue de mucha ayuda
ta super fue de mucha ayuda grasias.

boberto pulido

04/11/2009
k mierda
no me gusta la clase, soy un pto chiapaneco!!!!!

oziel ruvalcaba

04/11/2009
soy OZIEL
hola!!!! m,e gusta hanna :)
le dedique una canasta y me cuido en la peda del viernes
HANNA TE AMO<3

GLORIA

19/11/2009
MASCARA
SEGUI TODOS LOS PASOS ,PERO NO ME SALE LA ANIMACION DE MASCARA AL PROBAR LA PELICULA SOLO SE VE EL FONDO.
KE HICE MAL?

MARTIN

16/2/2010
Pregunta
HICE TODO COMO EL EJEMPLO PERO AL TRATAR DE REPRODUCIR (CTRL+ENTER) ESTA TODO EN BLANCO... QUE PASA??? GRACIAS

Jorge

31/7/2010
Gracias!
intente, intente y no comprendía porque no me salía! al final de los pasos, lo que hay que hacer es quitar los candados, mover el circulo al comienzo, volver a colocar los candados y...... Liiiiiiiiiiiiiistoooooooooooooo!!!! ajajajaj
¿como te falto poner eso? que mal que enseñas! (Broma!) ajajajaja Mil gracias por la información!!

LiaWeb

13/11/2010
Mascara
Para completar un paso mas, en caso que c necesite, recomendaria tener en cuenta si queremos que se detenga, agregar una capa mas y colocarle un stop();

para que la mascara se detenga justo cuando termina de mostrarse, espero que les sirva, saludos Lia

Natalia

25/4/2011
y las mascaras con brillos?
buena clase pero como funcionan las máscaras donde solo el brillo se ve?

jairo Rodruguez

01/5/2011
Felicitaciones
Espectacular la animación con mascara que expones en tu pagina muy clara tu explicacion

ana

14/6/2011
que buen aporte
valla !! amigo que ben aporte te lo agradesco me cirvio mucho

esteban

24/6/2011
gracias
hey men female vacano no sabes cuanto ,e sirvio gracias

DANIEL

16/2/2012
WOW
WOW GRACIAS AL FIN APRENDI COMO USAR ESTO ES QUE ME CUESTA TODAVIA UN CACHOOOOOOOO GRACIAS GRACIAS GRACIAS

diana sofia cardenas

04/11/2012
capas de flash
¿porque en el fotograma 1 de una capa no se presiona f6? ayudenme es para hoy mi tarea :)

Compartir