3a práctica animación en web

INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC) Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación Publicitaria

Lic. Mario Quiroz Martínez

Practica 3a (La Animación) TEMA: La animación

OBJETIVOS: • El valor de la animación • El propósito de fotogramas y fotogramas clave • La utilidad de la interpolación • La función de clips de película

1. Abra el archivo Nombre_y_apellido2.fla (el último archivo que trabajó).

Para crear un simple fotograma a fotograma de la animación: 2. Abrir la carpeta Nombre_y_apellido2.fla 3. Bloquee las capas Curvas y Vector Azul.


Lic. Mario Quiroz Martínez 4. Seleccione el fotograma 2 de la capa Vector Azul e inserte un fotograma del menú principal mediante Insertar>Fotograma.

5. También puede insertar un fotograma pulsando F5 en el teclado o botón derecho sobre el fotograma elegido y seleccionar la

opción: Insertar fotograma. Proceda de esta forma para añadir un fotograma en 2º fotograma de la capa de Curvas.

6. Para ver cómo la adición de estos fotogramas cambia la animación, arrastre el cabezal de reproducción (el rectángulo rojo por encima de la línea de tiempo) de ida y vuelta entre los fotogramas 1 y 2.

Nótese que el 2º fotograma, sólo aparecen los gráficos de las capas Vector azul y Curvas. Esto se debe a que estas son las únicas capas de la línea de tiempo que están activas en la animación. También debe ver que el contenido de estas capas no ha cambiado. 7. Seleccione el 2º fotograma de la capa Navegación bar inserte un fotograma clave al elegir Insertar>Fotograma clave. Un

fotograma clave marca un punto (•) en la línea de tiempo donde el contenido de un cambio de capa.


Lic. Mario Quiroz Martínez Un punto negro (•) debe aparecer en la línea de tiempo en el 2º fotograma de la capa Navegación bar, como se ilustra en la Figura 7. Este punto negro significa un fotograma clave en este punto de la línea de tiempo. 8. Un fotograma clave marca un punto en la línea de tiempo donde el contenido ha cambiado. 9. Deseleccionar todo en el escenario, elija Edición>Anular todas las selecciones. A continuación, seleccione y elimine la

instancia del símbolo fotograma clave en el 2º fotograma de la capa de Navegación bar.

10. Inserte de nuevo un fotograma clave, en el 2º fotograma de capa Navegación bar y utilizar el panel Información (Ventana>

Paneles> Información) para moverlo a X: -25 y Y:-40.

11. Si arrastra la barra de reproducción de ida y vuelta entre los fotogramas 1 y 2, debe ver que el contenido del cambio de

capa Navegación Bar. 12. Inserte un fotograma clave en el 2º fotograma en la capa Logo Neptuno y utilizar el panel de información para mover el

ejemplo del logotipo de Neptuno en ese fotograma clave a X:68 Y:68.

13. No te olvides de mover el cabezal de reproducción y otra después de cada cambio para comprobar el progreso de la

animación. 14. Inserte otro fotograma clave en el 2º fotograma de la capa Título. Utilice el panel Transformar (Ventana>Transformar) o

Control+T para reducir el tamaño de la instancia del símbolo de Neptune Resorts al 80% de su tamaño original.


Lic. Mario Quiroz Martínez 15. Puede activar el ajuste Restringir para asegurarse de que la altura y la anchura de la instancia se escalan al mismo

porcentaje.

16. Mueva la instancia del símbolo de Neptuno Resorts hasta que se sienta a la izquierda del logo.

17. Seleccione el 2º fotograma de la capa Gráficos fondo e inserte un fotograma clave en blanco eligiendo Insertar>

Fotograma clave vacío.

El fotograma clave en blanco aparece. Vamos a añadir más de este fotograma clave en blanco en el paso siguiente.

18. Abra la biblioteca seleccionando Ventana>Biblioteca. También puede utilizar las teclas Control+L (Windows). Asegúrese de

tener el 2º fotograma de la capa Gráfico fondo seleccionado y arrastre una instancia del símbolo Buzo Gráfico de la carpeta Gráficos fondo al escenario. Colóquelo en el área rectangular bajo el esquema Navegación bar, como se muestra en la Figura.



Puede notar que parte del contenido de la capa Vector Azul ocultar parte del nuevo fondo. No te preocupes se arreglará en el próximo ejercicio.

19. Guarde el archivo como neptune13.fla en la carpeta Mis archivos.

Mascara Se puede utilizar una capa de máscara para crear un agujero a través del cual el contenido de una o más capas subyacentes son visibles. Puede agrupar varias capas juntas bajo una capa de máscara para crear efectos sofisticados. También se puede utilizar cualquier tipo de animación, excepto las rutas de movimiento para hacer la película de máscara. No se puede ocultar en el interior de las capas de botones.

Para crear una máscara: 20. Asegúrese de que todas las capas están bloqueadas.

21. Seleccione la capa Vector Azul y añadir una nueva capa por encima de ella, eligiendo Insertar> Capa. El nombre de esta

nueva capa: Máscara de cabecera.


Lic. Mario Quiroz Martínez 22. Seleccione el fotograma 2 de la capa Máscara de cabecera e inserte un fotograma clave.

23. Seleccione la Herramienta Rectángulo , apague el Color de trazo (sin color), ajuste el color de relleno a verde claro (#

00FF00), y asegúrese de que el radio sea 0 (cero). Dibuje un rectángulo en el 2º fotograma de la capa de Máscara de cabecera.

24. 5. Cambie a la Herramienta Flecha negra y seleccione el rectángulo que dibujaste en el paso anterior. Utilice el panel

Información (Ventana>Información) para establecer lo siguiente: • Ancho (W): 780 • Altura (H): 205 • X: 10 • Y: 10



25. Haga clic botón derecho (Windows) en el nombre de la capa Máscara de cabecera y elija Máscara en el menú emergente.

26. Esto convierte a la capa Máscara de cabecera en una capa que oculta las áreas externas de la capa Vector Azul.

27. Añadir una nueva capa entre el Vector Azul y Gráficos fondo. El nombre de esta nueva capa Cabecera gráfica

28. Seleccione el 2º fotograma de la capa Cabecera gráfica e inserte un fotograma clave (Insertar> Fotograma clave o F6).

29. Abra la biblioteca, si no está ya abierto (Ventana> Biblioteca). Arrastre una instancia del símbolo de Tiburón ballena en la

carpeta Gráficos de cabecera (de la biblioteca) en el escenario. Utilice el panel de información para dar a esta instancia del símbolo de los siguientes ajustes: • X: 400 • Y: 110



30. Asegúrese de que tiene la capa Cabecera gráfica seleccionada y elija Modificar>Línea de tiempo>Propiedades de capa.

Aparecerá el cuadro de diálogo Propiedades de capa.

31. Establecer el tipo de capa: Con máscara, y haga clic en Aceptar.

La capa se oculta, pero todavía se ve horrible. Eso es porque necesita para bloquear todas las capas tipo máscara para mostrar el acabado.

32. Bloquee la capa Cabecera gráfica.



Máscara de capa boqueada.

33. Los bordes del gráfico Tiburón Ballena están ahora ocultos, dando a su sitio de desarrollo de una mirada limpia del trabajo (ver Figura).

34. Si queremos rectificar el tamaño de la cabecera vamos a la Máscara de cabecera, y poner en la panel de información el alto de la capa máscara a 120 px y después bloquee la capa.

35. Guarde el archivo como neptune14.fla.

Para crear una interpolación de movimiento simple: 36. Ahora arrastre la cabeza lectora sobre el fotograma 1. Haga clic una vez sobre la barra de reproducción para asegurarse de

que no tiene ningún fotograma seleccionado.

37. Seleccione toda la primera columna de fotogramas con la tecla mayúscula y añadir 13 fotogramas después Fotograma 1

pulsando F5 en el teclado 13 veces.

13 veces



38. Seleccione la capa Navegación bar y arrastre la cabeza lectora al fotograma 10. Inserte un fotograma clave (•) en el fotograma 10 seleccionando Insertar> Fotograma clave o pulsando F6.

39. Es necesario realizar un cambio en el contenido de la capa Navegación bar, por lo que hay que desbloquearlo. A

continuación, en el fotograma 15, mover el marco con la línea blanca (y borrar la caja de texto) del contenido de la capa Navegación bar y con el panel de Información cambiar la coordenada Y:150

40. Regrese al fotograma 10 de la capa Navegación bar y seleccione Insertar>Crear interpolación clásica.

41. Una pequeña flecha aparece entre los fotogramas 10 y 15 de la capa Navegación Bar para indicar una interpolación de

movimiento se ha creado. Los cuadros que figuran en la interpolación de movimiento están sombreadas.

Una pequeña flecha aparece entre los fotogramas 10 y 15.

42. Arrastre la cabeza lectora al fotograma 1 y reproducir la película seleccionando Control>Reproducir. 43. Los primeros 10 cuadros será estático, pero el perfil de la barra de navegación se moverá a la nueva posición de los

fotogramas 10 y 15. 44. Guarde el archivo como neptune15.fla.


Lic. Mario Quiroz Martínez Para crear un efecto de aparecer y desaparecer de forma gradual: 45. Bloquee la capa Navegación Bar.

46. Seleccione la capa de Gráfico fondo y añadir una nueva capa por encima de ella, eligiendo Insertar>Capa (o botón derecho

sobre la capa Grafico fondo). El nombre de esta nueva capa Fader.

47. Seleccione el fotograma 10 de la capa Fader e inserte un fotograma clave vacío (Insertar>Fotograma clave en blanco).

48. Seleccione la Herramienta Rectángulo. Asegúrese de que el color del trazo sin color y el radio del ángulo es 0, y

cambiar el color de relleno a negro (# 000000). En el fotograma 10 de la capa Fader, dibuje un rectángulo que cubra el contenido de la capa de Gráfico fondo. Si quiere que sea preciso, se puede dibujar un rectángulo y utilizar el panel Información para establecer lo siguiente: • Altura: 580 • Ancho: 880 • X: 10 • Y: 10



49. Asegúrese de que el rectángulo que acaba de dibujar esté seleccionado y elija Insertar>Convertir en símbolo. Asigne un

nombre al símbolo: Fader gráfico, le dan un comportamiento gráfico y haga clic en Aceptar.

El rectángulo que dibujaste en la capa Fader es ahora una instancia de un símbolo. 50. Seleccione el fotograma 15 de la capa Fader e inserte un fotograma clave (Insertar>Fotograma clave).


Lic. Mario Quiroz Martínez 51. Volver al fotograma 10 de la capa Fader, seleccione la instancia del símbolo Fader gráfico en ese marco, y utilizar el panel

de Propiedades en Efecto de color para la trasparencia Alfa sea 0%.

La instancia del símbolo Fader gráfico en el fotograma 10 parece desaparecer. En realidad es todavía allí, pero cuando el Alfa se establece en 0%, significa que es completamente transparente.

52. Seleccione el fotograma 10 de la capa de deslizador y seleccione Insertar>Crear interpolación clásico. Una interpolación de movimiento aparece entre los fotogramas 10 al 15.

53. Arrastre la cabeza lectora al fotograma 15 y haga clic en la barra de reproducción para asegurarse de que no hay

fotogramas seleccionados. Inserte cinco cuadros después fotograma 15 pulsando F5 cinco veces.


Lic. Mario Quiroz Martínez 54. Seleccione el fotograma 20 de la capa Fader e inserte un fotograma clave (Insertar> Fotograma clave).

55. Seleccione la instancia del símbolo Fader gráfico en el fotograma 20 de la capa Fader y use el panel Propiedades para

establecer la transparencia alfa a 0%.

La instancia del símbolo Fader gráfico en el fotograma 20 se vuelve transparente.

56. Creación de una interpolación de movimiento entre los fotogramas 15 y 20 de la capa Fader. Puede seleccionar el fotograma 15 de la capa Fader y luego seleccione Insertar>Crear interpolación clásica, o el botón derecho del ratón (Windows) y seleccione Crear interpolación clásica en el menú emergente.


Lic. Mario Quiroz Martínez 57. Inserte un fotograma clave en blanco en el fotograma 10 de la capa Título para el contenido de esa capa desaparecerá

hasta el fotograma 15.

58. Guarde el archivo como nombre y apellido3a.fla.

3a práctica animación en web

Design

Transcript of 3a práctica animación en web