• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
3a práctica animación en web
 

3a práctica animación en web

on

  • 752 views

 

Statistics

Views

Total Views
752
Views on SlideShare
685
Embed Views
67

Actions

Likes
0
Downloads
67
Comments
0

4 Embeds 67

http://designgrafico2010pe.blogspot.com 42
http://designgrafico2010pe.blogspot.mx 15
http://designgrafico2010pe.blogspot.com.es 6
http://designgrafico2010pe.blogspot.com.ar 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz MartínezPráctica 3a (La Animación)TEMA:La animaciónOBJETIVOS:• 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ícula1. 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.fla3. Bloquee las capas Curvas y Vector Azul.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez4. 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 laopció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ángulorojo 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 hacambiado.7. Seleccione el 2º fotograma de la capa Navegación bar inserte un fotograma clave al elegir Insertar>Fotograma clave. Unfotograma clave marca un punto (•) en la línea de tiempo donde el contenido de un cambio de capa.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz MartínezUn punto negro (•) debe aparecer en la línea de tiempo en el 2º fotograma de la capa Navegación bar, como se ilustra en laFigura 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 lainstancia 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 decapa 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 elejemplo 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 laanimación.14. Inserte otro fotograma clave en el 2º fotograma de la capa Título. Utilice el panel Transformar (Ventana>Transformar) oControl+T para reducir el tamaño de la instancia del símbolo de Neptune Resorts al 80% de su tamaño original.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez15. Puede activar el ajuste Restringir para asegurarse de que la altura y la anchura de la instancia se escalan al mismoporcentaje.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 detener el 2º fotograma de la capa Gráfico fondo seleccionado y arrastre una instancia del símbolo Buzo Gráfico de lacarpeta Gráficos fondo al escenario. Colóquelo en el área rectangular bajo el esquema Navegación bar, como se muestraen la Figura.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz MartínezPuede 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.MascaraSe 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 sonvisibles. Puede agrupar varias capas juntas bajo una capa de máscara para crear efectos sofisticados. También se puede utilizarcualquier tipo de animación, excepto las rutas de movimiento para hacer la película de máscara. No se puede ocultar en el interiorde 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 estanueva capa: Máscara de cabecera.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez22. 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 decabecera.24. 5. Cambie a la Herramienta Flecha negra y seleccione el rectángulo que dibujaste en el paso anterior. Utilice el panelInformación (Ventana>Información) para establecer lo siguiente:• Ancho (W): 780• Altura (H): 205• X: 10• Y: 10
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez25. 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áfica28. 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 lacarpeta Gráficos de cabecera (de la biblioteca) en el escenario. Utilice el panel de información para dar a esta instanciadel símbolo de los siguientes ajustes:• X: 400• Y: 110
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez30. 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.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz MartínezMá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 altode 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 deque 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 1pulsando F5 en el teclado 13 veces.13 veces
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez38. Seleccione la capa Navegación bar y arrastre la cabeza lectora al fotograma 10. Inserte un fotograma clave (•) en elfotograma 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. Acontinuación, en el fotograma 15, mover el marco con la línea blanca (y borrar la caja de texto) del contenido de la capaNavegación bar y con el panel de Información cambiar la coordenada Y:15040. 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 demovimiento 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 losfotogramas 10 y 15.44. Guarde el archivo como neptune15.fla.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz MartínezPara 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 derechosobre 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, ycambiar el color de relleno a negro (# 000000). En el fotograma 10 de la capa Fader, dibuje un rectángulo que cubra elcontenido de la capa de Gráfico fondo. Si quiere que sea preciso, se puede dibujar un rectángulo y utilizar el panelInformación para establecer lo siguiente:• Altura: 580• Ancho: 880• X: 10• Y: 10
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez49. Asegúrese de que el rectángulo que acaba de dibujar esté seleccionado y elija Insertar>Convertir en símbolo. Asigne unnombre 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).
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez51. Volver al fotograma 10 de la capa Fader, seleccione la instancia del símbolo Fader gráfico en ese marco, y utilizar el panelde 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ónde 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 hayfotogramas seleccionados. Inserte cinco cuadros después fotograma 15 pulsando F5 cinco veces.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez54. 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 paraestablecer 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 fotograma15 de la capa Fader y luego seleccione Insertar>Crear interpolación clásica, o el botón derecho del ratón (Windows) yseleccione Crear interpolación clásica en el menú emergente.
    • INSTITUTO SUPERIOR TECNOLÓGICO PÚBLICO DE DISEÑO Y COMUNICACIÓN (IDC)Modulo: Creatividad Publicitaria, Unidad Didáctica: Animación PublicitariaLic. Mario Quiroz Martínez57. 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.