Comunidad de diseño web y desarrollo en internet online

Texto animado con efecto de desvanecimiento en Flash

Veía sitios donde los textos al desplazarse se desvanecían, así que intente realizar ese efecto por mi mismo, al final lo logre de una manera muy sencilla. Aquí te explico como lograrlo.

Primero que nada deberás de colocar dos capas en tu flash (recuerda que todo esto lo puedes hacer en un MovieClip). La primera capa la convertiremos en mascara y la segunda será la que nos muestre el texto (ojo será la que muestre, no la que contenga)



A partir de este momento, llamare a la primera capa “Mascara 1”, y a la segunda “Scroll Vertical”, para facilitarme la referencia.

En Scroll Vertical, crearemos un cuadrado que será el área donde se vera nuestro texto.



Colorearemos a este cuadrado un relleno lineal. De un lado colocaremos el mismo color del fondo (si se va a poner sobre imágenes, colocaremos el color que mas se adapte al diseño con alfa de 0), Seguido de el color del que queremos el texto, ponemos otro de color de texto casi al final del relleno, y finalmente otro del color del fondo. Para mi ejemplo yo utilizo el blanco al fondo y el negro de color de letra.



Al rellenar te quedara algo como esto.



Así no nos sirve, pues el texto hará un scroll vertical, por lo tanto el efecto de desvanecimiento no se vera, tomamos nuestra herramienta de transformación de relleno (F
) y rotamos nuestra relleno para que nos quede así.



Recuerden este rectángulo debe estar en la capa Scroll Vertical.

Ahora, en la capa Mascara 1, colocaremos nuestro texto. Es importante el texto lo conviertas en relleno (después de escribir y ajustar el texto presiona dos veces ctrl.+B)



Le damos clic derecho al fotograma de la mascara y le ponemos animación, el archivo te debe quedar algo como esto.



Finalmente, creamos otro fotograma donde el texto este en la posición final (el fotograma donde lo coloques depende de la cantidad de texto, recuerda dar el tiempo suficiente para que un niño lo pueda leer).



Puedes lograr efectos interesantes basados en esto, les dejo el ejemplo con el scroll horizontal. Espero que les haya gustado, y les resulte útil algún día.



Descargar el archivo (flash cs3)

¿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