Share
Para la mayoría de los novatos, el concepto de símbolos en Flash puede ser bastante confuso. He conocido suficientes diseñadores que, incluso después de trabajar con Flash durante años, no tienen ni idea de cómo utilizar los símbolos en su trabajo. Veamos más de cerca los símbolos y el texto..
Bienvenido a la segunda parte de nuestra serie de consejos y mejores prácticas en Flash para diseñadores. En la primera parte observamos el dibujo, que suele ser lo primero que se abordaría al comenzar con Flash. Sin embargo, una vez que haya dominado las herramientas de creación, no tardará mucho en darse cuenta de que las formas por sí mismas son bastante inútiles. Claro, puedes aplicar colores y trazos y manipularlos de la forma que quieras, pero probablemente estés allí para hacer que las cosas se muevan. Y la mejor manera de comenzar es convertir las formas en símbolos..
Otro aspecto crítico del diseño en Flash que cubriremos hoy, es el texto. A lo largo de los años, la capacidad de Flash para crear y renderizar texto ha dado grandes pasos. Todavía recuerdo los días en que no había un ajuste de "anti-alias para la animación" y la idea de tener bloques de texto era nada menos que una pesadilla. Todo eso se ha ido ahora y con la capacidad de aplicar filtros directamente al texto, ahora es una rutina mucho menos dolorosa. Sin embargo, hay mucho que se puede hacer con la herramienta de texto en Flash hoy. Vamos a ver algunos de estos trucos.
Aunque esta publicación fue escrita para Flash Professional CS5, la mayoría de los consejos deberían funcionar bien en versiones anteriores. Intentaré y haré un punto para resaltar donde algo es muy específico a la última versión de Flash.
Para empezar, hay tres tipos de símbolos que puede crear en Flash: gráfico, botón y clip de película. Aunque los nombres deben ser bastante autoexplicativos, no siempre es evidente cuál es la diferencia entre los tres. Por favor, tenga paciencia conmigo si esto suena demasiado básico, pero conozco a muchos diseñadores de Flash que no están completamente seguros de qué es qué. Así que aquí va:
Nota: Puede establecer el comportamiento de una instancia de cualquier símbolo individualmente. ¿Ha colocado un clip de película en el escenario pero no quiere animarlo? Simplemente seleccione la instancia y cambie el comportamiento en el panel 'Propiedades'.
Los modos de fusión traen una de las características más queridas de las aplicaciones de edición de imágenes al espacio de trabajo vectorial de Flash. Al igual que Photoshop, Fireworks, Illustrator y otros, puede modificar el aspecto de los elementos superponiéndolos y eligiendo diferentes modos de transparencia. Por ejemplo, es posible que desee oscurecer una parte de un objeto en función de lo que está encima de él, o tal vez aclararlo. Una forma común de usar esto es cuando tiene una imagen de logotipo ráster importada con un fondo blanco que le gustaría mostrar. Simplemente cambie el modo de fusión a 'Multiplicar' en la sección 'Pantalla' del panel de Propiedades.
Tenga en cuenta que los modos de fusión solo se pueden aplicar al clip de película y a los símbolos de botón. Para obtener más información sobre los modos de fusión en Flash, consulte este screencast.
Digamos que necesitas un fondo de madera realista para tu diseño. Hay toneladas de texturas libres disponibles, pero un problema común es que todas tienden a verse planas. Ahora, si estás tratando de recrear una mesa, debe haber cierta apariencia de una fuente de luz de uno de los lados, ¿verdad? Intentemos recrear ese efecto en Flash utilizando los modos de fusión..
Una de las primeras cosas que uno aprende acerca de la animación en Flash es cómo atenuar las cosas dentro y fuera. Y la técnica predeterminada para hacerlo es cambiar el valor 'Alfa' de un símbolo. Pero hay mucho más en los otros elementos en esa lista desplegable, juntos conocidos como Efectos de color.
Aunque Alpha suena como la mejor manera de atenuar las cosas dentro y fuera, no siempre es la opción más adecuada. Por ejemplo, si su símbolo es un dibujo con un montón de formas superpuestas, Alpha reduce la transparencia de cada forma individualmente, lo que hace aparecer artefactos en los estados semitransparentes. En tales casos, si su obra de arte está en un fondo blanco, cambiar los valores de Brillo funciona mucho mejor para obtener el efecto de atenuación. Si el fondo es de otro color plano, también puede usar Tintar y rellenar la ilustración con el color de fondo. Desafortunadamente, si el fondo es un degradado, un patrón o cualquier otra cosa, su única opción es ingresar al símbolo, separar todas las formas y grupos y colocarlos en una sola capa para hacer un objeto.
Tenga en cuenta que, a diferencia de los modos de fusión, los efectos de color se pueden aplicar a cualquier símbolo: clips de película, botones y gráficos.
Al diseñar interfaces en Photoshop o Fireworks, una técnica que utilizo muy a menudo es crear un elemento de interfaz base, como un botón, y hacer variaciones de color usando los filtros de saturación de tono. Recientemente descubrí una manera de hacer algo similar en Flash. La idea es crear un único símbolo neutral y luego usar los efectos de color Avanzados para crear variaciones de él..
Para comenzar, cree un símbolo con los gradientes, iluminaciones, sombras y superposiciones que desee. Puedes hacerlo en cualquier color, pero tiendo a preferir usar solo tonos de gris. Entonces, el resultado es un botón que es tan mate, plástico o cualquier estilo que desees, pero en gris. A continuación, coloque un par de instancias del símbolo en el escenario. Luego simplemente seleccione una instancia, aplique el efecto de color 'Avanzado' y comience a jugar con los valores de color RGB. Si estás luchando por hacerlo bien, una forma es seleccionar Tinte, elegir el color que necesitas y luego ir al panel Avanzado para modificarlo a tu gusto. Enjuague y repita para los otros símbolos..
Durante mucho tiempo, los diseñadores de Flash se quedaron con las herramientas de creación estrictamente vectoriales en Flash. Las sombras suaves y los desenfoques de movimiento fueron cosas que piratearon usando gradientes incómodos o imágenes rasterizadas importadas de Photoshop. Luego vinieron los Filtros en Flash 8 y todo cambió. Hoy en día, prácticamente cualquier efecto elegante es posible dentro de Flash con una cantidad decente de control sobre todos los aspectos del filtro. Veamos algunas formas en que puede usar Filtros para agregar algo de jazz a sus diseños..
Claro, hay sombras para cuando quieres que un elemento se destaque del fondo o simplemente lo diferencie de todo lo que lo rodea. Pero para las ocasiones en que una simple sombra no es suficiente, puedes jugar un poco con la caída para agregar ese toque extra de estilo. Una forma de hacerlo es crear una copia de su forma y modificarla para obtener la curvatura que necesita. Luego conviértalo en un símbolo, agregue un efecto de color de tinte negro 100% y un desenfoque gaussiano. Luego, simplemente ajuste el valor alfa para obtener la intensidad que necesita de la sombra. Echa un vistazo a un par de muestras a continuación.
Recuerde establecer la calidad en 'Alta' siempre que use un filtro. El efecto es mucho mejor. Me supera totalmente por qué 'Bajo' se establece como la configuración de calidad predeterminada. He usado filtros en animaciones muy complejas y el impacto en el rendimiento es apenas perceptible.
Cuando se trata de texto grande, el efecto de tipografía es bastante popular. Con la capacidad de agregar múltiples filtros del mismo tipo (algo que incluso Photoshop no tiene todavía), el efecto de tipografía es bastante fácil de lograr en Flash. Todo lo que necesita hacer es simplemente agregar dos filtros de sombra: uno con una sombra blanca de 1px a 90 grados y uno negro a 270 grados. Echa un vistazo a la imagen de abajo para todos los detalles.
Otra característica que se introdujo en Flash 8 es la escala de 9 cortes: la capacidad de escalar un objeto sin afectar ciertas partes del mismo. El mejor ejemplo donde funciona esto es rectángulos redondeados. Si ha intentado crear rectángulos redondeados y luego escalarlos, sabrá cómo las esquinas tienden a perder su forma si la escala no es proporcional. La escala de 9 cortes resuelve ese problema. Veamos como.
Así es como funciona. He etiquetado cada una de las 9 secciones que tenemos ahora, divididas por las líneas de puntos. Cuando regresa al escenario y escala el objeto, de manera proporcional o no, A, C, E y G no escalarán en absoluto. Conservarán su tamaño y forma. B & F solo escalará horizontalmente, mientras que D & H solo escalará verticalmente. De esta manera, no importa lo que hagas, el rectángulo redondeado conserva su personalidad central. Esta técnica puede hacer maravillas cuando necesitas un montón de elementos similares en diferentes tamaños, como botones, ventanas emergentes o bocadillos..
Tenga en cuenta que la escala de 9 divisiones no funcionará en todos los contextos. Si su obra de arte tiene formas complejas o esquinas muy redondas con reflejos curvos, o incluso rellenos de patrones, la escala puede no ser consistente.
Si hubo una queja sobre Flash que dominó todo lo demás en el pasado, fue la forma en que Flash manejó el texto. En versiones anteriores, especialmente antes de la toma de control de Adobe, la representación de texto en Flash fue un éxito, por así decirlo. Tanto es así que había rechazado a toda una industria casera de fuentes de píxeles que fueron diseñadas para solucionar la incapacidad de Flash de procesar texto pequeño sin problemas. Afortunadamente, con la adición de 'anti-alias para legibilidad' las cosas se volvieron mucho más soportables. El único consejo que le doy a cualquier persona que haya tenido algo que ver con Flash es que evite cualquier cosa que no sea 'anti-alias para facilitar la lectura' como la plaga. De hecho, ni siquiera sé por qué tienen esa opción, ya que la representación del texto en el reproductor ahora se ha optimizado lo suficiente como para que el texto "legible" se pueda reproducir sin problemas en cualquier escenario.
Un fenómeno muy nuevo y potencialmente innovador es el Text Layout Framework (o TLF), la API de alto nivel de Adobe para el nuevo Flash Text Engine que se introdujo en Flash Player 10. A partir de la versión CS5, tiene la opción de hacer cualquier El bloque de texto puede ser 'Texto clásico' o 'Texto TLF'. Lo sé, como si ya no hubiera demasiadas opciones que hacer, ¿verdad? Bueno, aunque TLF es claramente el futuro del texto en Flash, no es compatible con versiones anteriores de Flash Player o con AS2 y versiones anteriores. Así que si quieres compatibilidad con versiones anteriores, Classic Text es tu mejor apuesta..
Básicamente, TLF agrega una gran cantidad de características al buen texto antiguo en Flash. ¿Desea mantener un control estricto sobre el liderazgo y el seguimiento en su texto? ¿Necesitas orientación vertical para el texto? ¿Qué hay de múltiples columnas? Diablos, ¿solo necesita que su texto se muestre bien en un idioma indio (para la mayoría de los guiones no latinos)? TLF es la respuesta. Hay demasiadas opciones para modificar cómo se representa un bloque de texto TLF, mucho más de lo que podemos cubrir aquí. Yo diría que sigan adelante y jueguen un poco con eso. Solo recuerde que esto no ha existido por mucho tiempo, ni en la herramienta de creación ni en el reproductor, y es probable que haya algunos problemas con la forma en que funciona en este momento..
Estos son algunos consejos rápidos y las mejores prácticas sugeridas para hacer el mejor uso de las herramientas de texto en Flash:
Y así es como haces símbolos y texto en flash. Por supuesto, hay mucho más de lo que hemos cubierto, pero el intento fue tratar de compilar algunos de los mejores consejos y mejores prácticas al trabajar con símbolos y texto. Por favor, siéntase libre de agregar sus propios consejos y atajos en la sección de comentarios. O desafía cualquier cosa que haya dicho. Seré el primero en reconocer que no sé todo lo que hay que saber sobre Flash, por lo que cualquier cosa nueva o diferente siempre es bienvenida..
La próxima vez entraremos en la funcionalidad principal y el punto de venta único de Flash: la animación. Manténganse al tanto!
Accentsconagua