Unidad 3 Gráficos en Flash CS3 Trabajo con dibujo y color

[email_address] Los elementos gráficos de vectores representan imágenes mediante líneas y curvas, denominadas vectores , y tienen propiedades de color y posición. Por ejemplo, la imagen de una hoja se representa por puntos a través de los que pasan líneas que crean la forma del contorno de la hoja. El color de la hoja lo determina el color del contorno y el del área que encierra dicho contorno. Imágenes de vectores

Los elementos gráficos de vectores representan imágenes mediante líneas y curvas, denominadas vectores , y tienen propiedades de color y posición.

Por ejemplo, la imagen de una hoja se representa por puntos a través de los que pasan líneas que crean la forma del contorno de la hoja.

El color de la hoja lo determina el color del contorno y el del área que encierra dicho contorno.

[email_address] La posición, el tamaño, la forma y el color de los gráficos vectoriales puede cambiarse sin que por ello pierdan calidad. Los gráficos vectoriales no dependen de la resolución, es decir, pueden visualizarse en dispositivos de salida de distintas resoluciones sin que se vea alterada su calidad. Imágenes de vectores

La posición, el tamaño, la forma y el color de los gráficos vectoriales puede cambiarse sin que por ello pierdan calidad.

Los gráficos vectoriales no dependen de la resolución, es decir, pueden

visualizarse en dispositivos de salida de distintas resoluciones sin que se vea alterada su calidad.

[email_address] Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color, denominados píxeles , que están organizados en una cuadrícula. Por ejemplo, la imagen de una hoja se representa mediante el valor específico de posición y color de cada píxel en la cuadrícula, que crea una imagen. Imágenes de mapa de bits

Los elementos gráficos de mapa de bits representan imágenes mediante puntos de color, denominados píxeles , que están organizados en una cuadrícula.

Por ejemplo, la imagen de una hoja se representa mediante el valor específico de posición y color de cada píxel en la cuadrícula, que crea una imagen.

[email_address] Las imágenes de mapa de bits dependen de la resolución ya que los datos que las definen están fijados en una cuadrícula que tiene un tamaño determinado. La modificación de una imagen de mapa de bits puede alterar su calidad. En concreto, el cambio de tamaño de un mapa de bits puede dejar bordes desiguales en la imagen al redistribuirse los píxeles en la cuadrícula. Imágenes de mapa de bits

Las imágenes de mapa de bits dependen de la resolución ya que los datos que las definen están fijados en una cuadrícula que tiene un tamaño determinado.

La modificación de una imagen de mapa de bits puede alterar su calidad.

En concreto, el cambio de tamaño de un mapa de bits puede dejar bordes desiguales en la imagen al redistribuirse los píxeles en la cuadrícula.

Utilice las herramientas de dibujo y pintura para incorporar ilustraciones en las películas Flash. S e explica rán las técnicas básicas de dibujo y pintura, y la práctica de sus herramientas. Las herramientas de dibujo de Adobe Flash CS3 permiten crear y modificar formas para las ilustraciones de las películas. [email_address] Dibujo y pintura

Utilice las herramientas de dibujo y pintura para incorporar ilustraciones en las películas Flash.

S e explica rán las técnicas básicas de dibujo y pintura, y la práctica de sus herramientas.

Las herramientas de dibujo de Adobe Flash CS3 permiten crear y modificar formas para las ilustraciones de las películas.

Para dibujar líneas y formas libres como si lo hiciera con un lápiz, utilice la herramienta Lápiz. Para dibujar trazados precisos como líneas rectas o curvas se utiliza la herramienta Pluma. Para dibujar formas geométricas básicas, se utilizan las herramientas Línea, Óvalo y Rectángulo. Para crear trazos similares a los obtenidos al pintar en un lienzo, se utiliza la herramienta Pincel. [email_address] Herramientas de dibujo y pinturas de Flash

Para dibujar líneas y formas libres como si lo hiciera con un lápiz, utilice la herramienta Lápiz.

Para dibujar trazados precisos como líneas rectas o curvas se utiliza la herramienta Pluma.

Para dibujar formas geométricas básicas, se utilizan las herramientas Línea, Óvalo y Rectángulo.

Para crear trazos similares a los obtenidos al pintar en un lienzo, se utiliza la herramienta Pincel.

Solapamiento de formas en Flash Al utilizar las herramientas Lápiz, Línea, Óvalo, Rectángulo o Pincel para dibujar una línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en segmentos en los puntos de intersección . Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente. [email_address] Nota : las líneas que se solapan creadas con la herramienta Pluma no se dividen en segmentos individuales en los puntos de intersección, sino que permanecen conectadas.

Al utilizar las herramientas Lápiz, Línea, Óvalo, Rectángulo o Pincel para dibujar una línea sobre otra línea o forma pintada, las líneas que se solapan se dividen en segmentos en los puntos de intersección .

Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente.

La herramienta Lápiz sirve para dibujar líneas, formas o figuras a mano alzada. Dibujo con la herramienta Lápiz [email_address] Para dibujar líneas y formas, se utiliza la herramienta Lápiz de manera muy similar a cómo se emplea un lápiz para realizar un dibujo. Para suavizar o enderezar las líneas y las formas según se va dibujando, puede seleccionar un modo de dibujo para la herramienta Lápiz. Herramienta Lápiz Modificador del modo Lápiz

La herramienta Lápiz sirve para dibujar líneas, formas o figuras a mano alzada.

Para dibujar líneas y formas, se utiliza la herramienta Lápiz de manera muy similar a cómo se emplea

un lápiz para realizar un dibujo.

Para suavizar o enderezar las líneas y las formas según se va dibujando, puede seleccionar un modo de dibujo para la herramienta Lápiz.

Dibujo con la herramienta Lápiz [email_address] Demostración Dibujo con la herramienta Lápiz .pdf

Demostración

Dibujo de líneas rectas, óvalos y rectángulos [email_address] Las herramientas Óvalo y Rectángulo crean tanto formas rellenas como formas sólo definidas por el trazo . La herramienta Rectángulo permite crear rectángulos con las esquinas cuadradas o redondeadas. Las herramientas Línea, Óvalo y Rectángulo 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 .

La herramienta Rectángulo permite crear rectángulos con las esquinas cuadradas o redondeadas.

Las herramientas Línea, Óvalo y Rectángulo permiten crear fácilmente las formas geométricas habituales.

Las herramientas Línea y Rectángulo son muy parecidas a la herramienta Óvalo, aunque tienen modificadores distintos. Dibujo de líneas rectas, óvalos y rectángulos [email_address] Panel Trazo. Herramienta Rectángulo Modificador Radio de rectángulo

Las herramientas Línea y Rectángulo son muy parecidas a la herramienta Óvalo, aunque tienen modificadores distintos.

Dibujo de líneas rectas, óvalos y rectángulos [email_address] Demostración Dibujo de líneas rectas, óvalos y rectángulos.pdf

Demostración

Dibujo de polígonos y estrellas Puede dibujar polígonos o estrellas con la herramienta PolyStar . El número de lados del polígono o el número de puntos de la estrella puede oscilar entre 3 y 32. También puede elegir la profundidad de los puntos de la estrella. [email_address]

Puede dibujar polígonos o estrellas con la herramienta PolyStar .

El número de lados del polígono o el número de puntos de la estrella puede oscilar entre 3 y 32.

También puede elegir la profundidad de los puntos de la estrella.

Dibujo de polígonos y estrellas [email_address] Demostración

Demostración

Para dibujar trazados precisos como líneas rectas o bien como suaves curvas, puede utilizar la herramienta Pluma . 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. Uso de la herramienta Pluma [email_address] Herramienta Pluma

Para dibujar trazados precisos como líneas rectas o bien como suaves curvas, puede utilizar la herramienta Pluma .

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.

Puede especificar las preferencias de aspecto del puntero de la herramienta Pluma , la manera de previsualizar los segmentos de líneas conforme va dibujando o bien el aspecto de los puntos de anclaje seleccionados. 1 Seleccione Edición > Preferencias y haga clic en la ficha Edición. 2 En Herramienta Pluma, establezca las siguientes opciones: Seleccione Mostrar previsualización de pluma para ver una previsualización de los segmentos de línea conforme va dibujando. Seleccione Mostrar puntos sólidos para especificar que los puntos de anclaje no seleccionados aparezcan como puntos sólidos y que los puntos de anclaje seleccionados aparezcan como puntos huecos Preferencias de la herramienta Pluma [email_address] Herramienta Pluma

Puede especificar las preferencias de aspecto del puntero de la herramienta Pluma , la manera de previsualizar los segmentos de líneas conforme va dibujando o bien el aspecto de los puntos de anclaje seleccionados.

1 Seleccione Edición > Preferencias y haga clic en la ficha Edición.

2 En Herramienta Pluma, establezca las siguientes opciones:

Seleccione Mostrar previsualización de pluma para ver una previsualización de los segmentos de línea conforme va dibujando.

Seleccione Mostrar puntos sólidos para especificar que los puntos de anclaje no seleccionados aparezcan como puntos sólidos y que los puntos de anclaje seleccionados aparezcan como puntos huecos

2 En Herramienta Pluma, establezca las siguientes opciones: Seleccione Mostrar cursores de precisión para especificar que el puntero de la herramienta Pluma aparezca como una cruz, en lugar del icono predeterminado de la herramienta Pluma, para poder colocar así las líneas con mayor precisión. 3 Haga clic en Aceptar. Preferencias de la herramienta Pluma [email_address] Nota : presione la tecla Bloq Mayús mientras trabaja para alternar entre el puntero en forma de cruz y el icono de la herramienta Lápiz predeterminado. Herramienta Pluma

2 En Herramienta Pluma, establezca las siguientes opciones:

Seleccione Mostrar cursores de precisión para especificar que el puntero de la herramienta Pluma aparezca como una cruz, en lugar del icono predeterminado de la herramienta Pluma, para poder colocar así las líneas con mayor precisión.

3 Haga clic en Aceptar.

Dibujo de líneas rectas con la herramienta Pluma [email_address] Demostración Dibujo de líneas rectas con pluma .pdf

Demostración

Dibujo de líneas curvas con la herramienta Pluma [email_address] Puede 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. Al utilizar la herramienta Pluma para crear un segmento curvo, los puntos de anclaje del segmento de línea muestran los selectores de tangentes . Herramienta Pluma

Puede 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.

Al utilizar la herramienta Pluma para crear un segmento curvo, los puntos de anclaje del segmento

de línea muestran los selectores de tangentes .

Dibujo de líneas curvas con la herramienta Pluma [email_address] Demostración Dibujo de líneas curvas con pluma .pdf

Demostración

Pintura con la herramienta Pincel [email_address] La herramienta Pincel dibuja trazos similares a los de un pincel. Permite crear efectos especiales, incluidos efectos caligráficos. Puede elegir una forma y un tamaño de pincel con los modificadores de la herramienta Pincel. Herramienta Pincel Trazo de pincel de anchura variable dibujado con una pluma

La herramienta Pincel dibuja trazos similares a los de un pincel. Permite crear efectos especiales, incluidos efectos caligráficos.

Puede elegir una forma y un tamaño de pincel con los modificadores de la herramienta Pincel.

Pintura y relleno de forma con la herramienta Pincel [email_address] Utilice la herramienta Pincel para crear trazos como si fueran pinceladas. 1. Haga clic en la herramienta Pincel y practique con las opciones del Modo Pincel en las imágenes del área de trabajo. Observe que Pintar dentro pinta el área donde comienza el trazo del pincel. Si comienza a pintar en una área vacía, no afecta a las ilustraciones anteriores. Imagen original, Pintar normal, Pintar detrás, Rellenos de pintura, Pintar selección y Pintar dentro

Pintura y relleno de forma con Pincel [email_address] Demostración Pintura y relleno de forma con la Herramienta Pincel .fla

Demostración

Uso de la herramienta Cubo [email_address] Utilice la herramienta Cubo de pintura para cambiar el color de la pintura existente y para rellenar áreas vacías limitadas por líneas. Elija Cerrar huecos grandes en el modificador Tamaño de hueco, y haga clic en el interior del óvalo vacío del área de trabajo. Flash rellena la zona incluso aunque el óvalo no está completamente cerrado.

Utilice la herramienta Cubo de pintura para cambiar el color de la pintura existente y para rellenar áreas vacías limitadas por líneas.

Elija Cerrar huecos grandes en el modificador Tamaño de hueco, y haga clic en el interior del óvalo vacío del área de trabajo.

Flash rellena la zona incluso aunque el óvalo no está completamente cerrado.

Uso de la herramienta Cubo [email_address] Puede rellenar un área con un color degradado igual que con uno sólido . Con el Cubo de pintura aún seleccionado, elija un degradado en la base del menú emergente Color de relleno, y haga clic en el interior del círculo de la derecha. Flash ofrece varias maneras de modificar los degradados para crear distintos efectos.

Puede rellenar un área con un color degradado igual que con uno sólido .

Con el Cubo de pintura aún seleccionado, elija un degradado en la base del menú emergente Color de relleno, y haga clic en el interior del círculo de la derecha.

Flash ofrece varias maneras de modificar los degradados para crear distintos efectos.

Uso de la herramienta Bote [email_address] Utilice la herramienta Bote de tinta para aplicar un nuevo estilo, grosor o color a líneas ya dibujadas. Flash aplica los nuevos atributos de línea al óvalo. Grosor de línea Estilo de línea Previsualización de línea Color de línea

Utilice la herramienta Bote de tinta para aplicar un nuevo estilo, grosor o color a líneas ya dibujadas.

Flash aplica los nuevos atributos de línea al óvalo.

Uso de la herramienta Cubo y Bote [email_address] Demostración Cubo y bote .fla

Demostración

Operación de borrado [email_address] La herramienta Borrador borra líneas y rellenos. Adáptela a sus necesidades de forma que borre sólo líneas, sólo rellenos, sólo los rellenos seleccionados o sólo el relleno donde comenzó a borrar.

La herramienta Borrador borra líneas y rellenos.

Adáptela a sus necesidades de forma que borre sólo líneas, sólo rellenos, sólo los rellenos seleccionados o sólo el relleno donde comenzó a borrar.

Operación de borrado [email_address] Personalice la herramienta Borrador para borrar sólo trazos, sólo áreas rellenas o sólo una única área Rellena con el modificador Grifo .

Personalice la herramienta Borrador para borrar sólo trazos, sólo áreas rellenas o sólo una única área

Rellena con el modificador Grifo .

Operación de borrado [email_address] Demostración Herra_borrador .pdf

Demostración

Selección de líneas y formas [email_address] Antes de modificar una línea o una forma, debe seleccionarla. Utilice las herramientas de flecha y de lazo para seleccionar líneas y formas. Observe que con el puntero sólo desplaza el relleno.

Antes de modificar una línea o una forma, debe seleccionarla. Utilice las herramientas de flecha y de lazo para seleccionar líneas y formas.

Observe que con el puntero sólo desplaza el relleno.

Selección de líneas y formas [email_address] Haga doble clic en el centro del óvalo del área de trabajo y arrástrelo hacia la derecha. El borde se desplaza con la forma porque al hacer doble clic en un relleno se seleccionan también las líneas adyacentes . De igual forma, al hacer doble clic en una línea se seleccionan todas las líneas adyacentes.

Haga doble clic en el centro del óvalo del área de trabajo y arrástrelo hacia la derecha.

El borde se desplaza con la forma porque al hacer doble clic en un relleno se seleccionan también las líneas adyacentes . De igual forma, al hacer doble clic en una línea se seleccionan todas las líneas adyacentes.

Selección de líneas y formas [email_address] También puede arrastrar un rectángulo de selección alrededor de un área para seleccionar todos los objetos que queden en su interior.

También puede arrastrar un rectángulo de selección alrededor de un área para seleccionar todos los objetos que queden en su interior.

Selección de líneas y formas [email_address] Demostración Selec_lineas_formas .fla

Demostración

Uso de la Herramienta Lazo [email_address] Utilice la herramienta Lazo para realizar selecciones mediante el arrastre de una área de selección con bordes rectos o trazada a mano alzada. Observe cómo se segmentan las formas por el contorno de la selección. Más adelante en esta lección, aprenderá otros detalles acerca de la segmentación.

Utilice la herramienta Lazo para realizar selecciones mediante el arrastre de una área de selección con bordes rectos o trazada a mano alzada.

Observe cómo se segmentan las formas por el contorno de la selección. Más adelante en esta lección, aprenderá otros detalles acerca de la segmentación.

Uso de la Herramienta Lazo [email_address] Utilice el modificador Polígono de la herramienta Lazo para realizar selecciones con bordes rectos. Con la herramienta Lazo aún activa, haga clic en el modificador Polígono y a continuación en los puntos indicados a la derecha, para ver cómo funciona. Una vez seleccionada el área irregular con el lazo, la puede mover, remodelar o modificar con cualquier modificador o comando.

Utilice el modificador Polígono de la herramienta Lazo para realizar selecciones con bordes rectos.

Con la herramienta Lazo aún activa, haga clic en el modificador Polígono y a continuación en los puntos indicados a la derecha, para ver cómo funciona.

Una vez seleccionada el área irregular con el lazo, la puede mover, remodelar o modificar con cualquier modificador o comando.

Uso de la Herramienta Lazo [email_address] Demostración Uso de la Herramienta Lazo .fla

Demostración

Remodelación de líneas y formas con la herramienta flecha [email_address] Utilice la herramienta Flecha para remodelar líneas y formas sin utilizar selectores Bezier. 1. Haga clic en la herramienta Flecha y arrastre las líneas del triángulo superior sin antes seleccionarlas (si se seleccionan primero, al arrastrarlas se desplazan en vez de cambiar de forma). Observe que el puntero cambia para indicar que la línea puede remodelarse. 2. Intente remodelar el triángulo inferior . Nota : Si aparece un ángulo junto al puntero, puede cambiar un extremo. Si aparece una curva, puede ajustar una curva.

Utilice la herramienta Flecha para remodelar líneas y formas sin utilizar selectores Bezier.

1. Haga clic en la herramienta Flecha y arrastre las líneas del triángulo superior sin antes seleccionarlas (si se seleccionan primero, al arrastrarlas se desplazan en vez de cambiar de forma).

Observe que el puntero cambia para indicar que la línea puede remodelarse.

2. Intente remodelar el triángulo inferior .

Cambio de escala y rotación [email_address] Utilice la herramienta Flecha para cambiar el tamaño, rotar, estirar o inclinar líneas y formas. 1. Elija la herramienta Flecha y seleccione el triángulo del área de trabajo. 2. Haga clic en el modificador de tamaño a escala. Aparecen ocho selectores estándar en el recuadro de delimitación. 3. Arrastre uno de los selectores para cambiar la forma. Arrastre un selector de esquina para cambiar el tamaño de forma proporcional.

Cambio de escala y rotación [email_address] 4. Seleccione el triángulo con la herramienta Flecha , haga clic en el modificador Rotar y arrastre un selector circular para girar el triángulo o uno de los centrales para estirarlo o inclinarlo.

Cambio de escala y rotación [email_address] Utilice el inspector de transformaciones para introducir el valor exacto de escala y rotación. 5. Seleccione el cuadrado, elija Ventana > Transformar , y establezca 50% de escala y 45 grados de rotación. El resultado debe ser el mismo que el cuadrado que se muestra aquí.

Utilice el inspector de transformaciones para introducir el valor exacto de escala y rotación.

5. Seleccione el cuadrado, elija Ventana > Transformar , y establezca 50% de escala y 45 grados de rotación.

El resultado debe ser el mismo que el cuadrado que se muestra aquí.

Remodelación de líneas y formas con la herramienta flecha [email_address] Demostración Rem_lin_form_rotacion .fla

Demostración

Segmentación y agrupación [email_address] Cuando se colocan unas formas o líneas encima de otras, Flash las conecta o las segmenta . 1. Mueva el árbol del área de trabajo de forma que se superponga a la casa, y a continuación anule su selección. Cuando dos formas son del mismo color y se anula su selección, Flash las conecta . Observe que ahora no es posible seleccionar el árbol sin la casa. El funcionamiento es diferente cuando los objetos son de distinto color. Segmentación y agrupación.fla

Cuando se colocan unas formas o líneas encima de otras, Flash las conecta o las segmenta .

1. Mueva el árbol del área de trabajo de forma que se superponga a la casa, y a continuación anule su selección.

Cuando dos formas son del mismo color y se anula su selección, Flash las conecta . Observe que ahora no es posible seleccionar el árbol sin la casa.

El funcionamiento es diferente cuando los objetos son de distinto color.

Segmentación y agrupación [email_address] 2. Sitúe el árbol verde sobre la casa roja, y anule su selección. 3. Vuelva a seleccionar el árbol y arrástrelo fuera de la casa. Observe que Flash segmenta la casa justo donde el árbol la solapaba . Si las formas tienen distintos colores , Flash segmenta la forma o línea que está situada debajo . Segmentación y agrupación.fla

2. Sitúe el árbol verde sobre la casa roja, y anule su selección.

3. Vuelva a seleccionar el árbol y arrástrelo fuera de la casa.

Observe que Flash segmenta la casa justo donde el árbol la solapaba .

Si las formas tienen distintos colores , Flash segmenta la forma o línea que está situada debajo .

Segmentación y agrupación [email_address] Para evitar la segmentación o la conexión , puede agrupar las líneas y formas. Cuando están agrupadas, se consideran un solo objeto. 4. Utilice la herramienta Flecha para trazar un rectángulo de selección alrededor del árbol, y elija Modificar > Agrupar. 5. A continuación, desplace el árbol sobre la casa y anule su selección. 6. Vuelva a seleccionar el árbol y arrástrelo fuera de la casa. Observe que no se produce ninguna segmentación ni conexión. Segmentación y agrupación.fla

Para evitar la segmentación o la conexión , puede agrupar las líneas y formas. Cuando están agrupadas, se consideran un solo objeto.

4. Utilice la herramienta Flecha para trazar un rectángulo de selección alrededor del árbol, y elija Modificar > Agrupar.

5. A continuación, desplace el árbol sobre la casa y anule su selección.

6. Vuelva a seleccionar el árbol y arrástrelo fuera de la casa.

Observe que no se produce ninguna segmentación ni conexión.

Segmentación y agrupación - El contenido del grupo puede editarse [email_address] 7. Haga doble clic en el grupo del árbol. Mientras modifica el grupo, el resto del escenario queda atenuado. 8. Haga clic fuera del árbol para anular la selección de los miembros del grupo, y utilice la herramienta Flecha (u otra cualquiera) para cambiar las líneas y formas del interior del grupo. 9. Haga doble clic fuera del grupo cuando haya terminado. La atenuación del escenario desaparece . Segmentación y agrupación.fla

7. Haga doble clic en el grupo del árbol.

Mientras modifica el grupo, el resto del escenario queda atenuado.

8. Haga clic fuera del árbol para anular la selección de los miembros del grupo, y utilice la herramienta Flecha (u otra cualquiera) para cambiar las líneas y formas del interior del grupo.

9. Haga doble clic fuera del grupo cuando haya terminado.

La atenuación del escenario desaparece .

Herramienta Subseleccionar [email_address] Herramienta Subseleccionar.- Permite hacer cambios de los puntos que conforman un objeto vectorial. Observar los punteros del mouse.

Herramienta Subseleccionar.-

Permite hacer cambios de los puntos que conforman un objeto vectorial.

Observar los punteros del mouse.

Herramienta Subseleccionar [email_address] Demostración Subseleccionar .fla

Demostración

[email_address] Ahora que ya conoce las funciones básicas de dibujo de Flash, puede proceder al aprendizaje de l o s Símbolos y capas . Barra de Herramientas

[email_address] Laboratorios Dibujo y Pintura Labs(Dibujo y pintura).fla

Laboratorios