Flash 1_Objetos y capas
-
Upload
sandroinnova -
Category
Technology
-
view
2.140 -
download
2
description
Transcript of Flash 1_Objetos y capas
![Page 1: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/1.jpg)
CIS
Sandro Miguel Honores Vasquez
![Page 2: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/2.jpg)
Adobe Flash es el entorno de creación de animaciones, interactividad y expresividad mas utilizado del mundo. Empezaremos el taller analizando las herramientas de dibujo, el uso de capas y terminaremos en la animación clasica de fotograma a fotograma.
![Page 3: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/3.jpg)
Animación Interactividad
Web o escritorio RIA
Flash
![Page 4: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/4.jpg)
Tipos de Archivo
FLA
SWF
XFL
Es el archivo editable del programa
Es el archivo en forma de película que se subirá a internet
Es el archivo no comprimido, en
estructura de carpetas
![Page 5: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/5.jpg)
Herramientas de diseño y
dibujo
Escenario Panel de
propiedades (cambia según
selección
Línea de tiempo
Barra de menú Tipo de
espacio de trabajo
Barra de menú
![Page 6: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/6.jpg)
Herramientas Selección Subselección
Transformación Rotación 3D
Lazo
Pluma
Linea
Lapiz
Herramienta Deco
Hueso
Cuentagotas
Texto
Rectangulo
Pincel
Cubo pintura
Borrador
Mano
Zoom
Color trazo
Color relleno
![Page 7: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/7.jpg)
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
![Page 8: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/8.jpg)
• 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
![Page 9: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/9.jpg)
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
![Page 10: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/10.jpg)
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.
![Page 11: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/11.jpg)
Proyecto 4: Formas propuestas
• Diseñe lo siguiente:
![Page 12: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/12.jpg)
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
![Page 13: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/13.jpg)
• Clic en la herramienta rectángulo. Definir las propiedades en el panel de propiedades
![Page 14: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/14.jpg)
• 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
![Page 15: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/15.jpg)
• 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
![Page 16: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/16.jpg)
• 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.
![Page 17: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/17.jpg)
• Bloque la capa «Parque»
• Inserte una nueva capa llamada «tronco» y dibuje con la herramienta pincel, color marrón.
• Aplique relleno
![Page 18: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/18.jpg)
• Aplique pincel para crear una nueva área en el árbol que añada profundidad
• Utilice la herramienta borrador para borrar la zona innecesaria
![Page 19: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/19.jpg)
• 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
![Page 20: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/20.jpg)
• 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»
![Page 21: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/21.jpg)
• Ir al panel de color, seleccionar degradado radial
Opciones de color
• Ir al panel de color y aplicar al primer selector blanco y al segundo celeste
Selector de color
![Page 22: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/22.jpg)
• Hacer clic en herramienta transformación de degradado
• Cambiar el centro del relleno
![Page 23: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/23.jpg)
Gira el relleno
Cambia el ancho del
relleno
Cambia la altura del
relleno
Indica el centro del
relleno
![Page 24: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/24.jpg)
• Mover la capa cielo al primer nivel
![Page 25: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/25.jpg)
Proyecto 6: Mariposa
• Bloquear las capas del trabajo anterior
• Insertar nueva capa «mariposa»
• Ir a propiedades de herramienta Polystar y aplicar las siguientes propiedades.
![Page 26: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/26.jpg)
• Dibuje el triangulo y aplique las siguientes modificaciones.
• Duplique la figura y aplique voltear horizontalmente
• Aplique relleno degradado
![Page 27: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/27.jpg)
• 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
![Page 28: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/28.jpg)
• Dibuje el cuerpo de las mariposa, sus antenas.
• Con la herramienta zoom y selección realice los ajustes.
![Page 29: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/29.jpg)
• Elimine los contornos y trazos, agrupe la figura y modificar su apariencia y tamaño.
![Page 30: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/30.jpg)
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»
![Page 31: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/31.jpg)
• 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
![Page 32: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/32.jpg)
• 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
![Page 33: Flash 1_Objetos y capas](https://reader034.fdocument.pub/reader034/viewer/2022042607/5569c694d8b42a5c5d8b5026/html5/thumbnails/33.jpg)
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