Consejos de Flash y Mejores Prácticas para Diseñadores Dibujo

La primera vez que usé Flash fue hace unos 13 años. Era la versión 3 y Flash fue aclamada como la nueva y elegante herramienta de animación basada en vectores que pronto tomaría por asalto el mundo del diseño web. A lo largo de los años, Flash se ha convertido en una herramienta de desarrollo de aplicaciones completa y completa, repleta de bondad de ActionScript..

Sin embargo, lo que mucha gente parece estar olvidando es cuánto Flash sigue siendo la herramienta de un diseñador, lo que nos permite crear ilustraciones y animaciones de la forma tradicional de dibujar y mover.

Tutorial republicado

Cada pocas semanas, revisamos algunas de las publicaciones favoritas de nuestros lectores de toda la historia del sitio. Este tutorial fue publicado por primera vez en mayo de 2011..

Comencemos con lo que prácticamente cualquier persona comenzaría con Flash (o cualquier aplicación de diseño): dibujo. Ya sea dibujando formas regulares o trazando líneas, el dibujo es una de las acciones más fundamentales en Flash. Sin embargo, lo que hace que Flash sea único es la forma en que maneja las formas. Se comporta de forma muy diferente a cualquier otra herramienta de dibujo vectorial, y es amada u odiada por muchos por ello. Por supuesto, hay ventajas y desventajas de segregar cada parte de un objeto para su edición independiente. Echemos un vistazo a algunas de las pequeñas cosas extravagantes que hace Flash y cómo usarlas en nuestra mejor ventaja..

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.

Formas regulares vs. formas primitivas

Normalmente, cuando dibuja una forma regular (un rectángulo o una elipse) en Flash, crea un parche con las propiedades de relleno y trazo seleccionadas. A continuación, puede seleccionar el relleno y / o el trazo individualmente y editar sus propiedades. En Flash CS3, Adobe introdujo lo que ellos llaman herramientas de forma 'primitivas'. A diferencia de las herramientas de forma predeterminadas, que separan el trazo del relleno, estas crean una forma que se puede seleccionar y editar como un todo.

Aunque para los diseñadores veteranos de Flash esto puede ser un cambio irritante, trae consigo un nivel de control que no se veía en Flash antes de esta versión. De repente, puede cambiar las propiedades del objeto numéricamente a través del panel de propiedades, agregar esquinas redondeadas y convertir círculos a pies con precisión de punto decimal. Hay muy pocas razones para volver a las herramientas de formas tradicionales una vez que haya utilizado los primitivos, pero muchos diseñadores que conozco siguen trabajando a la antigua usanza. Parte del problema podría ser la decisión desconcertante de Adobe de conservar las formas simples como herramientas predeterminadas, enterrando las primitivas dentro de un menú desplegable en la barra de herramientas..

Estudio de caso: crear un gráfico circular preciso utilizando formas primitivas

Intentemos usar las formas primitivas en un escenario de la vida real, donde el uso de las herramientas de formas tradicionales hubiera demostrado ser un ejercicio para tirar el pelo. Supongamos que desea crear un gráfico circular preciso utilizando números reales, por ejemplo, cuotas de mercado para sistemas operativos móviles en 2010.

Una vez que tengamos los porcentajes (que suman 100), multiplicaremos cada uno con 3.6 para igualarlos con el total de 360 grados en un círculo. Entonces, es una cuestión simple de pegar seis círculos uno encima del otro y asignar los ángulos de inicio y finalización apropiados para cada uno en función de nuestros cálculos. Vea las matemáticas en la tabla a continuación, así como las propiedades de una de las tartas, para una mejor idea..

Transforma libremente las formas con el ratón

Por su propia naturaleza, los objetos en Flash se pueden editar libremente en todo tipo de formas. Puede seleccionar el relleno o el contorno de una forma, arrastrarla y afectará a todas las otras formas en esa área siempre que estén en el mismo plano. Lo que sucede cuando selecciona y / o arrastra un elemento, depende de en qué haga clic y dónde. Veamos las diversas posibilidades:

Al hacer clic y arrastrar una forma que ya está seleccionada, simplemente la moverá a donde sea que suelte el mouse.
Al hacer clic y arrastrar dentro del relleno de una forma, incluso si no está seleccionada, se seleccionará y moverá. Tenga en cuenta que esto solo moverá el relleno y no el trazo. Si coloca el relleno en la parte superior del trazo, se eliminará cualquier parte del trazo que se encuentre debajo del relleno..
Al hacer clic y arrastrar en una línea recta se convertirá en una curva. ¿Cuánto tiempo arrastra la línea define qué tan pronunciada es la curva?.
Al hacer clic y arrastrar en una línea curva existente se alterará su curvatura.
Al hacer clic y arrastrar un punto de esquina solo se moverá ese punto. Si chasquido está activado, el punto se ajustará a cualquier otra esquina cercana.

Estudio de caso: hacer olas de manera fácil

Intentemos y apliquemos este conocimiento para hacer líneas onduladas complejas de manera simple, usando líneas en zigzag rectas. Comience simplemente dibujando líneas rectas para definir el tamaño aproximado y la forma de la onda. Asegúrese de que la línea no esté seleccionada. Luego, haga clic y arrastre cada segmento de línea para hacer una curva para la onda. Por último, seleccione los puntos de esquina y muévalos hacia arriba o hacia abajo hasta que se ajusten para hacer que la curva sea perfecta en ambos lados.

Esquinas redondeadas lisas

Por alguna razón mejor conocida por Adobe, nunca han abordado un problema inherente al renderizar esquinas redondeadas en Flash. Si el contorno de un rectángulo redondeado es un número impar (1, 3, 5, etc.), las esquinas tienden a tener estos artefactos feos que hacen que la imagen se vea borrosa. Un truco típico que he usado y que he visto que se usa es asegurarse de que los contornos de los rectángulos redondeados sean siempre 2, 4, 6 o cualquier número par. Todavía no funciona si su forma está en una coordenada de sub-píxel, ya sea que la coordenada x o y esté en decimales (2.6, 4.12, 98.57, etc.) - pero ese es un problema más fácil de resolver.

Pero, ¿y si necesito que el contorno sea un solo píxel? Una solución que encontré recientemente y la he estado usando extensamente desde entonces es esta:

Dibuja tu rectángulo usando la herramienta de rectángulo primitivo y configúralo a cualquier tamaño que necesites. Asegúrese de que las coordenadas X e Y del rectángulo sean números enteros sin puntos decimales en ellos.
Cambia la redondez a tu preferencia..
Rellena este objeto con el color que necesitas para el contorno de tu rectángulo.
Copie y pegue el rectángulo en su lugar, luego muévalo un píxel hacia la derecha y hacia abajo.
Reduzca la altura y el ancho del nuevo rectángulo a 2 píxeles menos que el original, y cambie el relleno al color que necesite para la forma.
No hemos terminado todavía. Reduzca la redondez del nuevo rectángulo a uno menos que el contorno. Debido a que Flash asigna redondez por píxeles y no por porcentaje, tener el mismo valor de redondez para ambos rectángulos provoca inconsistencias menores hacia el centro de cada curvatura.

Aunque esta técnica debería funcionar en la mayoría de los casos, no está exenta de dificultades. No sirve de nada, por ejemplo, en situaciones en las que necesita que un objeto sea translúcido. Reducir el alfa del rectángulo de relleno solo mostrará más del color del contorno del rectángulo que está detrás. Un truco para sortearlo sería romper ambos rectángulos (convertirlos en formas regulares).

También puede considerar utilizar sugerencias de trazo para guiarlo al dibujar trazos en el escenario..

Distribuir gradientes a través de objetos

¿A quién no le gustan los gradientes? Los diseños en estos días son bastante incompletos, sin al menos un sutil toque de gradiente para darle un toque realista y, a menudo, contemporáneo. Sin embargo, el problema con la forma en que Flash maneja las formas es que cada pieza independiente es una forma y tiene sus propias propiedades. No puede aplicar rellenos de degradado a grupos de objetos y no hay manera de "conectar" dos formas distintas. Qué sucede, entonces, cuando necesita un degradado para abarcar varios objetos: diga todas las palabras en un logotipo personalizado?

Bueno, 'Lock Fill' al rescate. Cuando utilice la herramienta 'Cubo de pintura', verá un icono en la parte inferior de la paleta de herramientas con un degradado y un candado en él. Seleccione las formas que necesita rellenar, active el icono 'Bloquear relleno', seleccione un degradado de la paleta de colores de relleno y haga clic dentro de cualquiera de las formas seleccionadas. No te preocupes si no ves el gradiente completo aplicado. La mayoría de las veces, el relleno bloqueado se extiende más allá de las formas seleccionadas y necesita utilizar la 'Herramienta de transformación de degradado' para cambiar el tamaño del degradado de la forma que lo necesita..

Sin embargo, esta técnica no está exenta de problemas. Aquí hay algunas cosas que debe recordar al usar rellenos bloqueados:

Los rellenos bloqueados solo funcionan con formas regulares. Si usaste formas primitivas, necesitarás separarlas para poder aplicar un degradado a varios objetos.
Si selecciona una de un grupo de formas con un relleno bloqueado y luego cambia sus propiedades, esa forma se desvinculará del grupo..
Como mencioné antes, los límites de un degradado en un relleno bloqueado tienden a ser mucho más grandes que el área de las formas. Simplemente use la 'Herramienta de transformación de degradado', seleccione cualquiera de las formas y ajuste los límites del degradado. Es posible que deba alejarse un poco para poder ver los controles de degradado.

Jugar con trazos personalizados

Flash viene con un conjunto de estilos de trazo de forma predeterminada: Sólido, Punteado, Punteado, Desigual, Punteado y rayado, que funcionan bien en su mayor parte. Sin embargo, para situaciones en las que necesita más control sobre el trazo, hay un editor de trazos bastante potente que viene con Flash. Para comenzar realmente a jugar con sus trazos, haga clic en el ícono de edición junto a la lista 'Estilo' en el panel 'Propiedades' de un trazo seleccionado.

Digamos que necesitabas una línea discontinua, pero actualmente los guiones están demasiado cerca en el estilo predeterminado "Guiones". En el panel 'Editar trazo', simplemente incremente el número en el segundo campo de entrada al lado de 'Tablero' hasta que obtenga el efecto que necesita. Y mientras lo está, marque la casilla "esquinas afiladas". Si alguna vez le han molestado las esquinas extrañas que obtiene con la línea discontinua predeterminada en Flash, esto lo soluciona.

Consejos útiles

Estos son algunos consejos útiles para ayudarlo a optimizar su flujo de trabajo cuando trabaje con formas en Flash..

Debido a la forma en que Flash maneja las formas, al hacer clic en un contorno solo se selecciona una sección de la línea, no todo. Haga doble clic en una sección del trazo para seleccionar todas las secciones conectadas a la vez.
Al hacer doble clic en un relleno, se selecciona el relleno y todas las secciones de línea a su alrededor..
Si desea dividir una forma con algo de espacio entre las dos divisiones:
1. Dibuja una línea donde necesites la división..
2. Ajuste el grosor de la línea según la cantidad de espacio que necesite entre las divisiones.
3. Asegúrese de que la línea esté seleccionada; luego vaya a 'Modificar> Formas' en la barra de menú y seleccione 'Convertir líneas a rellenos'.
4. Borrar la linea.
De forma predeterminada, las líneas tienen extremos y esquinas redondeados en Flash, pero si necesita que los bordes sean duros por alguna razón, puede establecerlos cambiando las propiedades 'Cap' y 'Join' en el panel 'Propiedades' para una línea seleccionada.

Conclusión

Y eso es un resumen de la primera parte de esta serie sobre las mejores prácticas de Flash para diseñadores. Espero que estos consejos le ayuden a mejorar y optimizar su flujo de trabajo en Flash a largo plazo. Por favor, siéntase libre de compartir sus propios consejos y mejores prácticas en la sección de comentarios. Volveré con la siguiente parte de esta serie con consejos sobre cómo administrar el texto y los símbolos en Flash..

Código