Sincronizar Textos con Máscara en Flash 8

1

Hola gracias por regresar a este tu sitio www.estiloflash.com , en esta ocasión tengo un tutorial que en lo particular me dejo muy satisfecho, toda la animación será creada en la Escena. Para las personas que empiezan con la animación Flash es de mucha ayuda, ya que el tutorial involucra pasos básicos como el de insertar fotogramas, fotogramas clave, insertar capas, crear máscara y animar fotogramas clave. Disfruta la animación que esta creada especialmente para ti en Flash 8. Good luck ¿comenzamos?.

1-. Crear un documento (ctrl. + J) con las siguientes propiedades.

a)-. Las dimensiones son 450 * 250 píxeles de ancho y de alto.

b)-. Colocar como color de fondo #999999 y velocidad de fotograma 12 fps.

2-. Cambiar el nombre de la capa por el de monitor, el nombre se cambia haciendo doble clic sobre la capa.

a)-.Luego importar una imagen (ctrl. R) de una pantalla de televisión.

b)-. Las dimensiones de la imagen son 270 * 208 píxeles.

c)-. Colocar la imagen en coordenadas X = 90.0 y Y = 20.0.

3-. Insertar una segunda capa y cambiar el nombre por el de texto 1.

a)-. En esta capa insertar un Texto estático tipo de fuente PerformaBookSSK tamaño de fuente 20.

b)-. Colocar el número 5 en Espacio entere letras.

c)-. Colocar el texto en coordenadas X = 450.0 y Y = 82.5.

Nota la palabra a escribir es Tecnología Alta Definición, si modificas las propiedades del texto tendrás que corregir la posición de la coordenadas. Sugerencia puedes añadir un filtro de desenfoque al texto.

4-. Insertar un fotograma clave (F6) en el frame 28.

a)-. Colocar el texto de este fotograma 28 en coordenadas X = 140.0 y Y = 82.5.

b)-. Insertar un fotograma (F5)

5-. Insertar una tercera capa y sustituir el nombre por el de protector.

a)-. En esta capa dibujar un rectángulo sin borde y color de relleno #FFFFFF que cubra el cuadro de la pantalla de TV.

b)-. Las dimensiones son 240 * 134 píxeles.

c)-. Colocar el rectángulo en coordenadas X = 105.0 y Y = 35.0.

6-. Insertar una cuarta capa y cambiar el nombre por el de texto 2.

a)-. Ocultar la capa texto 1.

b)-.Insertar un fotograma clave (F6) en el frame número 11.

c)-. Escribir el texto anterior solamente sustituir el color del texto por #000000.

d)-. Colocar el texto en coordenadas X = 335.0 y Y = 82.5.

7-. Cambiar el fotograma del frame número 28 por un fotograma clave (F6).

a)-. Colocar el texto del fotograma número 28 en coordenadas X = 140.0 y Y = 82.5.

8-. Insertar un fotograma clave (F6) en el frame número 31.

a)-. Colocar el texto en coordenadas X = 120.6 y Y = 82.5.

b)-. Insertar fotogramas (F5) en el frame 31 de las capas protector y monitor, insertar un fotograma clave vacío (F7) en el frame numero 29.

9-. En este paso insertar solamente un fotograma clave (F6) en la capa texto 2 en el frame número 45.

10-. Ahora insertar un fotograma clave (F6) en el frame número 60 de la capa texto 2.

a)-. Colocar el texto el fotograma 60 en coordenadas X = -94.4 y Y = 82.5.

11-. Ocultar la capa texto 2.

a)-. Insertar un fotograma clave (F6) en el frame número 47 de la capa texto 1.

b)-. En este fotograma insertar nuevamente el texto del paso 3 y colocar el texto en coordenadas X = 92.0 y Y = 82.5.

12-. Insertar un fotograma clave (F6) en el frame número 60 de la capa texto 1.

a)-. Colocar este texto en coordenadas X = -94.0 y Y = 82.5.

13-. No desesperéis ya casi concluyes, introducir un fotograma clave (F6) en el frame número 70de la capa texto 1.

a)-. Colocar el texto en coordenadas X = -202.4 y Y = 82.5.

14-. Introducir la última capa y cambiar el nombre por el de máscara. Ocultar la capa texto 2.

a)-. Agregar un fotograma clave (F6) en el frame número 11.

b)-. En este fotograma dibujar un rectángulo sin borde y color de relleno #FFFFFF.

c)-. Las dimensiones del objeto son 240 * 134 píxeles.

d)-. Colocar el objeto en coordenadas X = 105.0 y Y = 35.0

15-. Dar clic con el botón derecho del ratón en la capa máscara.

a)-. En el menú secundario seleccionar la opción máscara.

16-. La imagen muestra como queda cada una de las capas en la línea de tiempo.

a)-. Solamente la capa texto 1 finaliza con un fotograma clave (F6) en el frame 70.

b)-. Las capas máscara, protector y monitor deberán finalizar con un fotograma (F5) en el frame 70.

17-. Colocar animación de movimiento en los fotogramas 10, 28 y 45 de la capa texto 2.

a)-. Animar con movimiento la capa texto 1 en los fotogramas 1, 47 y 60.

Con esto queda concluido el tutorial, espero que esta explicación contribuya en algo en tus futuras animaciones Flash. Well done!!.

P.D. Presionar ctrl. + Enter para visualizar el trabajo final. Se agradecen los comentarios emitido a los tutoriales aquí publicados. Sigue comentando para darme cuenta de tus inquietudes y necesidades. :) Hasta pronto :)

Visualizar archivo swf de este tutorial

Descarga el archivo fla de este tutorial

Búsquedas:

Artículos relacionados:





Un comentario para “Sincronizar Textos con Máscara en Flash 8”

  1. gabriel says:

    hola, me gustaria conocer un poco mas sobre animacion de textos de imagenes y textos en 3D.
    claro si no es mucho pedir. gracias y nuevamente saludos y buen blog

Dejar un comentario

Página 1 de 11