Uso de la nueva herramienta de dibujo Deco en Flash CS5

En este tutorial usaremos las nuevas características de la herramienta Deco de Flash CS5 para crear un fondo animado de dibujos animados.


Adobe Flash en Creative Suite 5 ha sido equipado con algunas grandes actualizaciones y mejoras. Adobe Flash CS5 incluye nuevas características para diseñadores y desarrolladores, como el nuevo panel Fragmento de código, la integración con Flash Builder y la nueva herramienta Spring for Bones.

Una de las nuevas características de Flash CS5 es la herramienta de dibujo Deco (aunque, en realidad, la herramienta Deco no es una característica nueva, ya que se agregó por primera vez a Flash CS4). Le permite crear dibujos y animaciones basadas en formas y colores dinámicos. . Es una de las herramientas inteligentes que puede ahorrar tiempo y esfuerzo al crear objetos de dibujo y animación utilizando símbolos y objetos listos, o cargar símbolos personalizados de la biblioteca..

En Adobe Flash CS5, la herramienta Deco se ha mejorado para incluir nuevas formas y funciones como veremos en este documento. El ejemplo que cubriremos debe proporcionar una comprensión profunda de la herramienta Deco mediante la creación de un fondo animado de dibujos animados con las herramientas Deco. Casi todo el trabajo en este ejemplo se realiza utilizando la herramienta Deco y sus funciones. Sin embargo, el objetivo de este ejemplo es mostrar cómo usar la herramienta Deco y comprender sus funciones mediante la creación de fondos animados con Flash u otros diseños y el uso de objetos que tomará de la lista de objetos Deco.

Esta guía demostrará cuánto tiempo y esfuerzo puede ahorrarse utilizando la herramienta Deco. Si bien el ejemplo de fondo de dibujos animados que se muestra a continuación requiere horas para crearlo utilizando las herramientas de dibujo en Flash junto con algunas habilidades de dibujo, podemos crear este ejemplo en menos de una hora con la herramienta Deco, y no necesitamos ninguna habilidad de dibujo..

Necesitas tener conocimientos básicos de herramientas Flash, ya que voy a profundizar directamente en la herramienta Deco, que muestra cómo personalizarlo para crear el fondo y la animación. Sin embargo, vamos a empezar con el paso 1 ...


Vista previa del resultado final

Echemos un vistazo al resultado final en el que trabajaremos:


Paso 1: construir la base de la escena

Comenzaremos creando el documento de Flash, preparándolo antes de comenzar a agregar los objetos de la herramienta Deco.

Cree un nuevo documento de Flash con las dimensiones 600 px x 450 px. Agregue un rectángulo con las mismas dimensiones que el documento y rellene el rectángulo con un relleno lineal (como en la siguiente figura) para crear el efecto de cielo oscuro.


Paso 2: Carretera y edificios

Ahora crearemos el fondo de la carretera, usando la herramienta Línea, crearemos la forma del contorno de la carretera y la rellenaremos con colores grises para simular un asfalto real. Luego cree nubes usando la herramienta Oval y el resultado final debe verse como sigue:

Ahora, comenzaremos a utilizar la herramienta Deco para crear los edificios para ir por la acera de la carretera que creamos anteriormente. Puede establecer el tipo de rascacielos que le gusta usar o usar edificios aleatorios. Además, puede configurar el tamaño de los edificios..


Paso 3: Edificios aleatorios

Seleccione la herramienta Deco o presione la tecla U en el teclado. En el panel Propiedades, seleccione "Pincel de construcción" en la lista desplegable Efecto de dibujo. Luego, ve a las Opciones avanzadas, elige "Construcción aleatoria" y establece el tamaño en 2.


Paso 4: Construcción

Haga clic en la carretera, luego arrastre hacia la parte superior y suelte el mouse para crear el primer edificio. Repita el paso anterior para crear otros edificios en la carretera como se ve en la siguiente figura

En los siguientes pasos, usaremos el pincel para árboles para crear árboles en la acera y usaremos el pincel para flores para crear ramas con flores sobre algunos edificios. Con este pincel, puede establecer el tamaño del árbol y sus colores de rama, hoja y flor / fruta.


Paso 5: Cepillo de árbol

Crear una nueva capa sobre la capa de edificios. Seleccione la herramienta Deco. En el panel de propiedades, elija Pincel de árbol en el menú desplegable y en la opción Avanzada, seleccione "Árbol de álamo temblón".


Paso 6: Crecimiento

Haga clic en la acera entre los edificios para crear los árboles. Asegúrate de arrastrar unos pocos píxeles para crear árboles pequeños. Cuanto más arrastre, mayor será el tamaño del árbol. El efecto final después de agregar los árboles, debe ser el siguiente:


Paso 7: Flores

Ahora, seleccione el Pincel de flores, luego de la opción Avanzada elija "Flor de Pascua". Establezca el tamaño de la flor y la hoja en 50% y asegúrese de que la casilla de verificación Rama esté marcada


Paso 8:

Arrastra hacia arriba la pantalla para crear ramas de flores. Deben ser altos para mostrarlos como una rama. Si la rama resultante es demasiado grande, puede seleccionarla y reducir su tamaño. Luego coloque la rama de flor redimensionada en los edificios como se ve en la siguiente figura:

Los siguientes pasos explican cómo crear barriles de fuego animados. También usaremos el pincel Animación de Fuego que le permite crear fuego animado de vectores. Puede establecer el tamaño del incendio, la velocidad y la duración del cuadro. Además, puedes configurar el color de la llama y la chispa..


Paso 9: Grandes Barriles de Fuego

Cree un nuevo símbolo yendo a Insertar> Nuevo símbolo o use el acceso directo Ctrl + F8 (Comando + F8 en Mac) y configúrelo como clip de película.

En la capa activa, cree un círculo para representar la parte superior del barril y otro para hacer la parte inferior del barril. Arrastre dos líneas entre ellas y complete el relleno del barril con líneas intermedias para que se vea como el siguiente ejemplo:


Paso 10: Animación de fuego

Crear una nueva capa para mantener la animación de fuego. Seleccione la herramienta Deco o presione U en el teclado, elija Animación de Fuego de la lista desplegable en el panel de Propiedades y configure la animación de fuego a 50 cuadros.


Paso 11: aplicando fuego

  • Haz clic y mantén presionado en la pantalla para iniciar la animación del fuego..
  • Actualmente, la animación de fuego creada comienza pequeña y se hace más grande hasta el final de la animación. Esto creará un corte no deseado en la animación de bucle. Para resolver esto, eliminaremos los marcos de inicio para el incendio. En la línea de tiempo, seleccione todos los cuadros donde el fuego sigue creciendo. En este ejemplo, seleccionamos los primeros 15 cuadros. Haga clic con el botón derecho en la línea de tiempo y elija Eliminar fotogramas (o presione Mayús + F5).
  • Asegúrate de que el barril tenga la misma cantidad de cuadros que la animación de fuego..

Paso 12: Reposicionar

Ahora cambiaremos el tamaño y la posición del fuego para que parezca que las llamas están saliendo del barril:

  • Para cambiar el tamaño del fuego para que se ajuste al cañón, seleccione todos los cuadros y haga clic en el icono Editar varios cuadros debajo de la línea de tiempo.
  • Haga clic en el icono de Piel de cebolla en la parte inferior y elija Cebolla Todo de la lista.
  • Seleccione la herramienta Transformación libre y asegúrese de que todos los marcos estén seleccionados.
  • Cambiar el tamaño de la bola de fuego para encajar en el barril.

Paso 13:

Vuelva al escenario principal y agregue el clip de película del barril de fuego en el escenario al lado de los edificios, como se ve en la siguiente figura. Puede probar la película presionando Ctrl + Intro (Comando + Intro en Mac)


Paso 14: Creando Nieve

Si bien la herramienta Deco no proporciona todos los pinceles o formas posibles, puede personalizarla según sus necesidades utilizando los símbolos o los colores que desea mostrar. Ahora, usaremos el Sistema de partículas que le permite crear animaciones fluidas, como la caída de nieve, fuegos artificiales y otros efectos que dependen de la explosión de partículas pequeñas de una fuente..

Este pincel se basa en dos partículas que pueden ser símbolos predeterminados o puede usar símbolos de la biblioteca. Además, puede configurar otras opciones, como la duración de la animación, la velocidad por fotograma y otras opciones, como veremos a continuación:

Cree un nuevo símbolo usando Insertar> Nuevo símbolo o use el acceso directo Ctrl + F8 (Comando + F8 en Mac) y configúrelo como un clip de película. Regrese al escenario y arrastre el símbolo vacío recién creado de la biblioteca al escenario, luego haga doble clic en el símbolo para ingresar al modo de edición


Paso 15: Sistema de partículas

Seleccione la herramienta Deco o haga clic en la tecla U en el teclado y elija Sistema de partículas en la lista desplegable Efecto de dibujo en el panel Propiedades. Seleccione tanto la Partícula 1 como la Partícula 2, establezca su color a blanco para simular la caída de nieve y use la forma predeterminada. Establecer los otros valores de la siguiente manera:

  • Establezca la Longitud total y la Generación de partículas en 100 cuadros
  • Tasa por cuadro: 1
  • Vida útil: 100 marcos
  • Velocidad inicial: 10px
  • Tamaño inicial: 10%
  • Gravedad: 5px

Paso 16: Generación

Ahora, haga clic en la parte superior del escenario para que el sistema de partículas caiga desde la parte superior del escenario hasta la parte inferior. Notará que se genera la animación de partículas y se crean los cuadros..


Paso 17:

La animación de nieve comienza pequeña y aumenta hasta el final de la animación. Esto (como con el fuego) creará un corte no deseado en la animación en bucle. Para resolver esto, podemos eliminar de nuevo los marcos de inicio para las partículas de nieve de inicio. Seleccione el cuadro hasta el punto donde la nieve cubre todo el escenario. En este ejemplo, seleccionaremos los primeros 40 cuadros. Haga clic con el botón derecho y elija Eliminar fotogramas o presione Mayús + F5.

Si observa que la animación se está moviendo rápido, puede agregar un fotograma adicional después de cada fotograma clave seleccionando el fotograma clave y presionando F5.


Paso 18: Agregando Rayo

Añadamos algunos efectos de rayos usando el Pincel de rayos. Este rayo debe animar y aparecer al azar. Puede establecer un montón de opciones con este pincel, como el color de la iluminación, su escala, ancho de haz y complejidad. Además, puedes elegir si debe o no estar animado..

Cree un nuevo símbolo de clip de película y agréguelo al escenario detrás de la capa de edificios. En el símbolo de clip de película, presione F7 para crear un cuadro vacío al principio del clip de película e ir al cuadro 20.


Paso 19: Cepillo de iluminación

Seleccione la herramienta Deco y en el panel Propiedades elija Brocha de iluminación. Mantenga la configuración igual, solo cambie el color a blanco y marque la casilla de verificación Animación.


Paso 20: Complejidad

Apunte el cursor del mouse hacia la parte superior izquierda del escenario, haga clic y mantenga presionado el mouse hasta que el rayo alcance la complejidad deseada, luego suelte el mouse. Presione F7 después de la animación para agregar un marco en blanco después de ella.


Paso 21: Más Rayo

Vaya al cuadro 70, repita los pasos anteriores para crear más rayos en la mano derecha del escenario con diferente complejidad y presione F7 después de la animación para eliminar los rayos del escenario..


Paso 22: Prueba

Puede probar la película haciendo clic en Ctrl + Intro (Comando + Entrar en Mac) o seleccione Archivo> Publicar para exportar la película como archivos SWF y HTML.


Paso 23: Optimización

En general, los archivos que utilizan la herramienta Deco generan SWF de gran tamaño porque la herramienta Deco genera los pinceles y la animación como formas desagrupadas y animaciones cuadro por cuadro. Estos dos métodos aumentan el tamaño total del archivo. Sin embargo, es una buena práctica optimizar el archivo después de alcanzar los resultados requeridos. Hay algunos consejos para disminuir el tamaño del archivo de la siguiente manera:

  • Convertimos los objetos de uso frecuente, como los árboles similares y los barriles de fuego, en símbolos; Esto hará que Flash los cuente como un solo símbolo sin importar cuántas veces se use el símbolo.
  • Separe los grupos superpuestos para minimizar el procesamiento de hardware necesario para cargarlo, así como el tamaño del SWF.
  • Intente utilizar la interpolación de movimiento cuando sea posible, ya que la animación fotograma a fotograma aumenta el tamaño del SWF.

Conclusión

En el ejemplo anterior, aprendimos cómo usar la herramienta Deco para crear un fondo animado de dibujos animados. Esto ahorra tiempo y no requiere habilidades especiales de dibujo o caricatura. Puede descubrir el resto de pinceles disponibles en las herramientas de dibujo de Deco, ver cómo usarlos y las diferentes opciones asociadas con cada uno..

Espero que te haya gustado este tutorial, gracias por leerlo.!