Flash 1_Objetos y capas

2,562 views

Published on

Introducción a las herramientas de dibujo y manejo de capas en flash. CIS, UCV.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,562
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
68
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flash 1_Objetos y capas

  1. 1. CIS Sandro Miguel Honores Vasquez
  2. 2. Adobe Flash es el entorno de creación de animaciones,interactividad y expresividad mas utilizado del mundo.Empezaremos el taller analizando las herramientas dedibujo, el uso de capas y terminaremos en la animaciónclasica de fotograma a fotograma.
  3. 3. Animación Interactividad FlashWeb o escritorio RIA
  4. 4. Tipos de Archivo Es el archivo editable del programa FLAEs el archivo en forma de película que se SWF subirá a internet Es el archivo no comprimido, en XFL estructura de carpetas
  5. 5. Tipo de Barra de menú Barra de menú espacio de trabajo Línea de tiempoHerramientas de diseño y dibujo Panel de Escenario propiedades (cambia según selección
  6. 6. Herramientas Selección SubselecciónTransformación Rotación 3D Lazo Texto Pluma Rectangulo Linea Pincel Lapiz Cubo pinturaHerramienta Deco Borrador Hueso Zoom Cuentagotas Color trazo Mano Color relleno
  7. 7. Proyecto 1: Cubo• Seleccionar la herramienta rectángulo• Elegir trazo negro con altura 2, tipo solido y relleno rojo• Mantener presionada la tecla Shift• Trazar el cuadrado• Duplique la figura y mover a nueva posición
  8. 8. • Use la herramienta linea y complete los lados del cubo• Elimine la línea pequeña y cambie el color rojo por un tono mas claro• Elimine las línea del cubo y listo
  9. 9. Proyecto 2: Texto 3D• Escriba el texto flash, fuente bauhaus, tamaño 91, azul claro• Duplicar y cambiar de color• Enviar al fondo el texto duplicado negro, realizar el ajuste necesario
  10. 10. Proyecto 3: Botón sombra• Traze el circulo sin trazo• Duplique la figura, cambie el color y agrupe• Agrupe el primer circulo• Enviar al fondo el segundo• Nótese que para evitar la combinación de las figuras es necesario agrupar.
  11. 11. Proyecto 4: Formas propuestas• Diseñe lo siguiente:
  12. 12. Proyecto 5: Paisaje• Definir propiedades del documento: Clic en herramienta selección y definir el tamaño del escenario en 600 x 500, 12 fps, color de escenario celeste
  13. 13. • Clic en la herramienta rectángulo. Definir las propiedades en el panel de propiedades
  14. 14. • Trazar el rectángulo en el escenario.• Hacer clic en la línea de tiempo y observar que aparece un punto negro lo cual significa que la imagen esta ocupando un fotograma y se encuentra en la capa 1
  15. 15. • Realizar la siguiente modificación: Poner el cursor en la esquina superior izquierda y modificar, poner el cursor en el borde y crear curva• Eliminar el trazo: hacer doble clic en el contorno y suprimir
  16. 16. • Utilice la herramienta pincel para dibujar un cesped de un color verde mas oscuro.• Aplique ahora la herramienta cubo de pintura, nótese como se aplica a la nueva área.
  17. 17. • Bloque la capa «Parque»• Inserte una nueva capa llamada «tronco» y dibuje con la herramienta pincel, color marrón.• Aplique relleno
  18. 18. • Aplique pincel para crear una nueva área en el árbol que añada profundidad• Utilice la herramienta borrador para borrar la zona innecesaria
  19. 19. • Añade la capa «copa» y dibuje esta parte del árbol con la herramienta pincel• Con el pincel añada una nueva área con un verde mas claro para aplicar profundidad
  20. 20. • Mueva la capa «copa» al segundo nivel.• Vamos a crear un cielo con degradado• Añadir la capa cielo y dibujar un rectángulo• Ajustar al escenario usando la herramienta «alinear»
  21. 21. Opciones• Ir al panel de color, de color seleccionar degradado radial• Ir al panel de color y aplicar al primer selector blanco y al segundo celeste Selector de color
  22. 22. • Hacer clic en herramienta transformación de degradado• Cambiar el centro del relleno
  23. 23. Cambia el ancho del relleno Indica elcentro del Cambia la relleno altura del relleno Gira el relleno
  24. 24. • Mover la capa cielo al primer nivel
  25. 25. Proyecto 6: Mariposa• Bloquear las capas del trabajo anterior• Insertar nueva capa «mariposa»• Ir a propiedades de herramienta Polystar y aplicar las siguientes propiedades.
  26. 26. • Dibuje el triangulo y aplique las siguientes modificaciones.• Duplique la figura y aplique voltear horizontalmente• Aplique relleno degradado
  27. 27. • Para las alas inferiores dibuje un ovalo y aplique la siguiente modificación.• Repita el procedimiento de duplicar. Aplique color solido.• Acomode la posición de las figuras
  28. 28. • Dibuje el cuerpo de las mariposa, sus antenas.• Con la herramienta zoom y selección realice los ajustes.
  29. 29. • Elimine los contornos y trazos, agrupe la figura y modificar su apariencia y tamaño.
  30. 30. Proyecto 7: Mariposa volando• Vamos a realizar una animación fotograma a fotograma.• Abrir el proyecto 6.fla• En línea de tiempo ir al fotograma de la capa mariposa e insertar e insertar 10 «fotograma clave»• Nótese que las demás capas de la animación solo tienen un fotograma, por ello ir al fotograma 10, botón derecho «insertar fotograma»
  31. 31. • Cambiamos la configuración los fps a 10, lo cual significa que la 10 fotogramas se reproducirán en 1 segundo.• Ir a ver y mostrar reglas• Luego mostrar guías
  32. 32. • En cada fotograma clave cambiar de posición, giro y acercar al árbol• Probar película• Finalmente exportar como película .swf y como .gif animado• Luego ir a «Vista previa de publicación», HTML
  33. 33. Ejercicio Propuesto• Abra el proyecto 6 .fla, bloquear las capas anteriores. Añada la capa «Hoja».• Dibuje la hoja sin trazo de color verde, agrupe y aplique animación fotograma a fotograma de forma que caiga del árbol al suelo• Recuerde que usted puede ocultar las capas para diseñar la hoja.• Exportar como swf

×