Aunque parezca sorprendente, Flash tuvo sus inicios como un software de dibujo, sus creadores pretendieron desarrollar una herramienta natural e intuitiva para dibujar. Pero las mejoras introducidas y su evolución con el tiempo, nos han dejado lo que hoy conocemos como una herramienta potente de animación.

Este capítulo, aunque en principio no lo parezca, es de vital importancia a la hora de diseñar animaciones sorprendentes ya en muchas ocasiones, lo más conveniente será dibujar las imágenes que luego animaremos en el propio Flash. Esto no quiere decir que todo lo que animemos lo tenemos que crear primero, pues más adelante aprenderemos a importar gráficos y otros elemento para incluirlos en nuestro trabajo.

Durante este capítulo, tendremos la oportunidad de probar y conocer todas las herramientas de Flash, aunque no creemos nada particularmente práctico, terminaremos familiarizándonos de una forma más sólida con el entorno de trabajo para abordar con mayor soltura la creación de animaciones en capítulos posteriores.

• El alumno trabajará con las herramientas y órdenes de dibujo para crear objetos vectoriales básicos, como líneas, rectángulos, círculos, ect…

• El alumno aprenderá a trabajar las propiedades de contorno y relleno de las figuras creadas.

• El alumno utilizará las herramientas complementarias a la creación de objetos como la herramienta de texto, cuentagotas, etc..

• El alumno aprenderá a seleccionar y modificar objetos sencillos mediante las órdenes de transformación como, escalar, girar, y las órdenes de ayuda al dibujo como ajustar a objetos.

Posiblemente estas herramientas no nos resulten del todo desconocidas si alguna vez hemos manejado algún programa de dibujo, por muy sencillo que este fuera, pero quizás, la correcta utilización de las mismas pueda encerrar algún que otro misterio. De todas formas no debemos preocuparnos, pues a lo largo de este tema y en los diferentes capítulos trataremos de aprender a utilizarlas, descubriremos como hacer nuestras propias creaciones y como editarlas

Las herramientas de dibujo se encuentran todas agrupadas en La Barra Herramientas (Fig2.1) y por defecto se sitúan en la parte izquierda de la pantalla. En caso de no estar visibles sólo tenemos que activarlas en el menú
[Ventana > Herramientas].

Es recomendable dejar activado el comando [Ver > Área de trabajo], de este modo podremos dibujar fuera del escenario

Fig.2.1 La barra Herramientas, donde se sitúan todas las herramientas de dibujo.

En esta sección encontraremos dos herramientas que ya fueron presentadas en el tema1, Mano y Lupa (Zoom) y que simplemente nos ayudan a visualizar las creaciones sin modificarlas para nada.

Podemos “jugar” con ellas y observar su funcionamiento abriendo el siguiente ejemplo:
[Ayuda > Muestras > Dado]

Al seleccionar la opción Zoom, aparecen dos botones adicionales en la sección de Opciones que nos permitirán aumentar o reducir. Estas mismas funciones las podemos encontrar en el menú Ver.

Fig.2.2 Las herramientas Mano y Zoom y sus opciones.

Las herramientas disponibles para dibujar líneas son la herramienta Línea y la herramienta Lápiz.

Es recomendable abrir un nuevo archivo y practicar con ellas para comprobar cuales son sus efectos.

Fig.2.3 Líneas dibujadas con los modos Enderezar, Suavizar y Tinta.

Para dibujar líneas y formas, se utiliza la herramienta Lápiz, de manera muy similar a cómo se emplea un lápiz real para realizar un dibujo. Para aplicar un suavizado o un enderezamiento a las líneas y las formas según se va dibujando, basta con seleccionar un modo de dibujo para la herramienta Lápiz.

Herramienta Línea (N)

Nos permite dibujar líneas perfectamente rectas simplemente pinchando en el punto de origen y arrastrando hasta el punto destino. Si además seleccionamos [Ver > Ajustar a Objetos] podremos dibujar líneas rectas en Vertical y Horizontal.

Los atributos de estos dos elementos tales como color, grosor y estilo los encontraremos en el panel Trazo. Pero debemos tener en cuenta si establecemos sus atributos primero, estos afectarán a las líneas que dibujemos con posterioridad. Si queremos cambiar los atributos de una línea, primero deberemos seleccionarla con la herramienta Flecha (V).

Generalmente se utiliza el estilo Sólido con la línea Muy Fina, puesto que el resto de estilos por ser más elaborados pueden aumentar significativamente el tamaño del archivo creado.

Por tanto será una consideración que deberemos tener en cuenta.

Fig.2.4 El panel Trazo permite cambiar los atributos de las herramientas Lápiz y Línea

Las herramientas Óvalo(O) y Rectángulo(R), junto con la anteriormente mencionada Línea permiten crear fácilmente las formas geométricas habituales. Las herramientas Óvalo y Rectángulo crean tanto formas rellenas como formas sólo definidas por el trazo. Puede utilizar la herramienta Rectángulo para crear rectángulos con esquinas rectas o redondeadas.

Fig.2.5 La sección Colores permite actuar sobre el trazo y relleno de los objetos dibujados. En la sección Opciones vemos el icono que nos permite redondear las esquinas de los rectángulos

Por defecto disponen de un Relleno del color seleccionado para ello y de un Trazo que está determinado en el panel Trazo. Podemos manipular de una forma directa estas propiedades actuando sobre la sección Colores de la Barra Herramientas, tal y como se aprecia en la Fig.2.5.

Podemos dibujar sin relleno o sin contorno simplemente seleccionando la opción Sin Color del panel relleno y trazo respectivamente. También Pulsando Mayus mientras dibujamos, crearemos cuadrados y círculos perfectos.

A continuación veremos dos herramientas que nos permitirán actuar sobre las propiedades de Relleno y Trazo de los elementos dibujados y seleccionados para su edición. Estas herramientas son el Cubo de Pintura y el Bote de Tinta.

Las dos herramientas de que disponemos en Flash para la creación de rellenos son el Cubo de Pintura (K) y el Pincel (B).

En la sección Opciones de la Barra Herramientas encontraremos las únicas opciones que necesitaremos establecer antes de comenzar a dibujar con estas herramientas y en general antes de empezar a utilizar cualquier herramienta de la barra. Aunque, debemos tener presente que es posible realizar las mismas tareas siguiendo diferentes caminos, el uso de esta sección nos facilitará en gran parte el trabajo.

Herramienta Pincel (B)

La herramienta Pincel dibuja trazos similares a los de un pincel y permite crear efectos especiales, incluidos efectos caligráficos. Debemos ser conscientes de que aunque lo que dibujemos con esta herramienta parezcan líneas, realmente son rellenos ya que carecen de contorno.

En la sección Opciones podremos actuar sobre el tamaño del trazo dibujado y sobre la forma de la punta del Pincel a la vez que podemos decidir en que plano queremos que aparezca el relleno dibujado respecto al resto de elementos del escenario.

Fig.2.6 Opciones de la herramienta Pincel

Aunque lo más conveniente sería practicar durante unos minutos con esta herramienta para coger destreza, en la siguiente Figura, ilustraremos en un ejemplo los efectos de las diferentes opciones de esta herramienta.

Fig.2.7 Imagen original, Pintar normal, Pintar detrás, Rellenos de pintura, Pintar selección y Pintar dentro.

Herramienta Cubo de Pintura (K)

La herramienta Cubo de pintura rellena con color áreas cerradas: Puede tanto rellenar áreas vacías como cambiar el color de áreas ya pintadas. Puede utilizar colores sólidos, rellenos de degradados o de mapa de bits. Puede utilizar la herramienta Cubo de pintura para rellenar áreas que no están cerradas por completo, así como especificar que Flash cierre los huecos de los contornos de las formas al utilizar esta herramienta.

Como resumen diremos, que esta herramienta simplemente crea un relleno o lo modifica, aunque también la puede utilizar para ajustar el tamaño, la dirección y el centro de los rellenos de degradados y de mapas de bits.

Fig.2.8 Opciones de la herramienta Cubo de Pintura

Permite dibujar trazados precisos como líneas rectas o bien como suaves curvas Fluidas. Puede crear segmentos de líneas rectas o curvas, y ajustar el ángulo y la longitud de los segmentos rectos, así como la pendiente de los segmentos curvos.

Cada vez que hacemos clic con la pluma se tratará de unir el punto anterior con el correspondiente al siguiente clic, a menos que mantengamos pulsado el botón del ratón cuyo resultado será un segmento.

Siempre que creemos una forma cerrada, esta se rellenará con el color preestablecido en el momento de su creación. Para finalizar figuras, aunque no estén cerradas deberemos hacer “Doble Clic”.

Podemos crear curvas arrastrando la herramienta Pluma en la dirección en la que desea dirigir la curva para crear el primer punto de anclaje y arrastrando a continuación la herramienta Pluma en la dirección opuesta para crear el segundo punto de anclaje

Fig.2.8 Trazos rectos dibujados con la Pluma.

Fig.2.9 Curvas dibujados con la Pluma

La mejor manera para comprender el funcionamiento de esta herramienta es practicar con ella, así que recomendamos abrir un nuevo archivo e invertir unos minutos.

Esta herramienta es análoga al Cubo de Pintura, pero actúa sobre los contornos o trazos en lugar de hacerlo sobre los rellenos.

Permite cambiar el color de trazo del elemento sobre el que se aplica, es decir su contorno, ya que esta herramienta únicamente afecta a las líneas. Pero no solo eso, ya que la línea tomará todos los atributos que estén establecidos en el panel trazo. Así pues, podemos decir que el Bote de Tinta es capaz de crear un Trazo en donde no lo había.

Creemos con el Pincel una figura rápida y apliquémosle el Bote de tinta. Veremos como se le añadirá un trazo con sus atributos seleccionados.

La herramienta Cuentagotas permite copiar los atributos de trazo y relleno de un objeto y aplicarlos inmediatamente a otro objeto. Esto puede ser realmente interesante, si por ejemplo, queremos conseguir que el relleno de un objeto sea el mismo que el de otro, sin necesidad de acordarnos del color o de los atributos que tenía asignados el objeto a copiar.

Esta herramienta también permite copiar la imagen de un mapa de bits para utilizarla como relleno.

Cursor en forma de Pincel

Toma esta forma al deslizarse sobre un relleno. Al hacer clic selecciona los atributos de relleno y se transforma en Cubo de Pintura, de este modo permite aplicarlos inmediatamente a otro objeto.

Cursor en forma de Lápiz

Toma esta forma al deslizarse sobre un contorno o trazo. Al hacer clic toma una muestra de todos los atributos de trazo (hace una copia) y se transforma en la herramienta Bote de tinta, de este modo podemos aplicar estos atributos a otro objeto deseado. Debemos recordar que esta herramienta copia todos los atributos, no sólo el color.

Practique con esta herramienta. Para ello dibuje varios círculos y cuadrados con diferentes rellenos y establezca la altura de trazo en 8 o superior. Luego intercambie entre los elementos dibujados sus atributos.

El elemento disponible para la creación de texto, es la herramienta Texto (T), por norma general, seleccionamos la herramienta, escribimos en un lugar del escenario lo que deseemos y finalmente modificamos sus atributos con el panel Carácter. Aunque, se puede realizar lo mismo siguiendo el proceso inverso.

Disponemos de dos selectores para el control de margen, tal y como podemos ver en la Fig.2.10. Cuando visualizamos el pequeño círculo, se nos esta indicando que el margen se ajusta automáticamente. Cuando visualizamos el pequeño cuadrado, éste nos está marcando el tope o margen de fin de línea. Es posible establecer este margen antes de empezar a escribir dentro del bloque destinado para el texto.

Con la herramienta Flecha, y con un solo clic podemos seleccionar todo el bloque de texto (aparece un rectángulo a su alrededor) y actuar sobre los atributos del mismo. El conjunto de paneles Carácter, Párrafo y Opciones de texto que aparecen agrupados todos en una misma ventana serán los responsables de establecer los atributos y propiedades del texto.

Haciendo Doble clic sobre el bloque de texto, activamos la herramienta Texto(T) y podemos seleccionar o modificar los caracteres como en cualquier procesador de textos.

Fig.2.10 Indicadores del control de margen.

Fig.2.11 Ventana que agrupa los paneles relacionados con el texto.

Las herramientas Flecha (V) y Lazo (L) son las herramienta básicas para seleccionar, aunque también disponemos de la herramienta Subseleccionar (A) para editar puntos de anclaje individuales. Por el momento, nos centraremos en las dos primeras.

Herramienta Flecha (V)

Esta herramienta se emplea para seleccionar y modificar formas. La figura del cursor cambiará para indicarnos que pasará al hacer clic y arrastrar.

• Signo de “Movimiento”
• Cursor en el interior de un elemento con relleno.
• Haciendo “clic” y arrastrando, movemos el relleno.
• Forma Curvada
• Cursor cercano al borde exterior o trazo (p.ejem. de un rectángulo).
• Haciendo “clic” y arrastrando la línea se curvará en la dirección del movimiento.
• Forma Curvada
• Cursor cerca de una esquina o vértice.
• Haciendo “clic” y arrastrando movemos el vértice de la esquina, cambiando la forma de la figura.

Fig.2.12 Si aparece un ángulo junto al puntero, puede cambiar un extremo. Si aparece una curva, puede ajustar una curva

• Podemos seleccionar una línea de un contorno (trazo que envuelve al elemento) simplemente haciendo clic sobre la misma. Entonces aparecerá el Símbolo de movimiento que nos permitirá arrastrarla y situarla en la parte del escenario que nos interese.

• De igual modo, podemos seleccionar todo el contorno haciendo “doble clic” sobre el mismo, pudiendo moverlo o eliminarlo.

• Haciendo “doble clic” sobre el relleno de un elemento, lo seleccionamos entero (contorno + relleno) pudiendo editarlo o arrastrarlo a otro lugar.

• Creando un rectángulo imaginario que envuelva a la figura, también conseguimos seleccionarla por completo.