Macromedia Flash MXAnimación para la web

Graficos Vectoriales

• Los gráficos vectoriales representan imágenes mediante líneas y curvas, denominadas vectores, que también incluyen 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.

Gráficos Vectoriales

• Al editar un gráfico vectorial, se modifican las propiedades de las líneas y curvas que definen su forma. 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 mapa de bits

• Las imágenes de mapa de bits están compuestas de puntos de color, denominados píxeles, organizados en una cuadrícula. Por ejemplo, la imagen de una hoja se describe mediante los valores de posición y color específicos de cada píxel en la cuadrícula, que crean una imagen de una manera muy parecida a como se crea un mosaico.

Imágenes de mapa de bits

• Al editar una imagen de mapa de bits, se modifican los píxeles y no las líneas o curvas. 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. La visualización de una imagen de mapa de bits en un dispositivo de salida con menor calidad de resolución que la propia imagen también disminuye su calidad.

El Escenario de Flash

La Línea de Tiempo

• Cabeza lectora: al desplazarla hacia los distintos fotogramas se puede ver el contenido de los mismos.

La Línea de Tiempo

• Números de Fotogramas: Sirven como guía para trabajar con la línea de tiempo, permiten ubicar los objetos en el fotograma correcto

La Línea de Tiempo

• Menú de Línea de Tiempo: Proporciona acceso a diversas opciones donde puede seleccionar opciones de visualización de fotogramas

La Línea de Tiempo

• Centrar Fotograma: Desplaza la vista actual de la línea de tiempo centrando el fotograma actual en área visible de la línea de tiempo

La Línea de Tiempo

• Vista Papel Cebolla: Presenta varios fotogramas situados antes y después del fotograma actual usando versiones ligeramente sombreadas de los objetos que se encuentran en el escenario para que pueda obtener una apreciación de la secuencia de la animación

La Línea de Tiempo

• Vista Contornos de Papel Cebolla: También presenta una vista de papel cebolla pero usa contornos de los fotogramas en lugar de objetos rellenos

La Línea de Tiempo

• Editar varios Fotogramas: permite editar la animación de diversos fotogramas

La Línea de Tiempo

• Modificar marcadores de Papel Cebolla: presenta un menú que permite elegir cuantos fotogramas desea mostrar en la vista de papel de cebolla

La Línea de Tiempo

• Fotograma Actual: Presenta el numero de fotogramas del fotograma seleccionado actualmente

La Línea de Tiempo

• Velocidad de fotogramas: Presenta el numero de fotogramas por segundo que aparecen en la película actual

La Línea de Tiempo

• Tiempo Transcurrido: Muestra los segundos transcurridos desde que se inicio la reproducción del fotograma actual

La Línea de Tiempo

• Barras de Desplazamiento: Desplaza la visualización horizontal o vertical de la línea de tiempo

Capas

• Las capas son como hojas transparentes sobre el escenario. Permiten a los objetos actuar independientemente de los objetos de otras y también controlar su visibilidad

Capas

• Nombre de Capa: Se puede modificar haciendo doble clic sobre el nombre de la capa. Es recomendable colocar un nombre indicativo del contenido de dicha capa

Capas

• Insertar Capa: Inserta una capa nueva. Como todos los efectos de una capa deben de tener la misma animación, el uso de múltiples capas permite crear objetos que funcionan independientemente

Capas

• Agregar Guía de Movimiento: Permite crear una capa guía para desplazar objetos sobre un trazado. Cuando se publica la película, la capa guía no aparece

Capas

• Insertar Carpetas de Capas: Esta opción permite agregar carpetas para ayudar a la organización de las capas

Capas

• Eliminar Capa: Elimina la capa seleccionada y cualquier objeto que esta contenga

Capas

• Mostrar u ocultar Capas: Al hacer clic en esta columna alterara la visibilidad de las capas. Si se hace clic sobre el icono del ojo se mostraran u ocultaran todas las capas

Capas

• Bloquear/Desbloquear capas: Al hacer clic en esta columna se bloquean las capas evitando así cualquier modificación.

Capas

• Mostrar/Ocultar Capas como Contornos: Haga clic en esta columna para mostrar los objetos como contornos en lugar de cómo objetos rellenos.

Capas

• El uso de una gran cantidad de capas adicionales no afecta el tamaño de la película publicada ya que Flash comprime las películas publicadas en una sola capa.

• Sugerencia: Tenga cuidado al seleccionar la capa donde trabajara, ya que si selecciona por error otra capa puede realizar cambios no deseados

Herramientas de dibujo y pintura 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 Pluma. Para dibujar formas geométricas básicas, se utilizan la Línea, Óvalo y Rectángulo. Para crear trazos similares a los obtenidos al pintar en un lienzo, se utiliza el 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

Solapamiento de formas en Flash

Al pintar sobre formas y líneas, lo que queda en la parte superior sustituye a lo que estaba debajo. La pintura del mismo color se mezcla. La pintura de colores diferentes conserva los distintos colores. Puede utilizar esta característica para crear máscaras, siluetas y otras imágenes en negativo.

Dibujo con la herramienta Lápiz

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

1. Seleccione la herramienta Lápiz.2. Seleccione Ventana > Propiedades y seleccione el color

para el trazo, el grosor de la línea y el estilo en el inspector de propiedades.

3. Seleccione un modo de dibujo de las opciones de la caja de herramientas: – Seleccione Enderezar para dibujar líneas rectas y convertir

figuras similares a triángulos, óvalos, círculos, rectángulos y cuadrados en estas formas geométricas.

– Seleccione Suavizar para dibujar curvas suaves. – Seleccione Tinta para dibujar líneas a mano alzada sin

aplicarles ninguna modificación.

4. Arrastre sobre el escenario para dibujar con la herramienta Lápiz. Arrastre con la tecla Mayús presionada para dibujar sólo líneas verticales u horizontales

Ejercicio

• Realice el siguiente dibujo, utilizando la herramienta lápiz y sus diversas opciones

Dibujo de líneas rectas, óvalos y rectángulos

• 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

Dibujo de rectángulos

Herramienta Rectángulo

La herramienta Rectángulo crea 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

Al arrastrar con la Mayús presionada se crean cuadrados

Ejercicio

• Realice el siguiente dibujo utilizando la herramienta Rectángulo y sus opciones. De ser necesario utilice la herramienta Línea

Dibujo de líneas

Herramienta Línea

• Seleccione las herramientas Línea

• Seleccione Ventana > Propiedades y seleccione los atributos de trazo en el inspector de propiedades. No es posible establecer atributos de relleno para la herramienta Línea.

• Arrastre sobre el escenario

• Con la herramienta Línea, al arrastrar con la tecla Mayús presionada se limitan las líneas a ángulos múltiplos de 45º.

Dibujo de líneas

• De forma predeterminada Flash ajusta el punto inicial de una línea a la línea mas cercana para que no tenga que ser tan preciso cuando dibuja con el ratón.

• Si por alguna razón no desea que las líneas se conecten automáticamente, puede controlar este comportamiento accediendo al cuadro de dialogo Preferencias del Menú Edición y seleccionando la ficha Edición

Dibujo de líneas

Dibujo de óvalos

Herramienta Ovalo

Se ubica al lado de la herramienta Rectángulo.

Con la herramienta Óvalo al arrastrar con Mayús presionada se pueden crear sólo círculos.

Esta herramienta no posee opciones adicionales.

Ejercicio

• Dibuje el elemento que se muestra a continuación, utilizando líneas, óvalos y el bote de pintura

Uso de la 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

Uso de la herramienta Pluma

• Al dibujar con la herramienta Pluma, puede hacer clic para crear puntos en los segmentos de las líneas rectas o bien hacer clic y arrastrar para crear puntos en los segmentos de las líneas curvas. Puede ajustar los segmentos de las líneas curvas y rectas ajustando los puntos de las líneas. Puede convertir líneas curvas en líneas rectas y viceversa. También puede mostrar los puntos de las líneas creadas con otras herramientas de dibujo de Flash, como las herramientas Lápiz, Pincel, Línea para ajustar estas líneas.

Preferencias de la 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. Los puntos de anclaje y los segmentos de líneas seleccionados aparecen en el color del contorno de la capa en la que aparecen estas líneas y puntos

Preferencias de la Pluma

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. Flash muestra una previsualización del segmento de línea conforme mueve el puntero sobre el escenario, antes de hacer clic para crear el punto final del segmento. Si no se ha seleccionado esta opción, Flash no mostrará un segmento de línea hasta que se haya creado el punto final del segmento.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 (esta es la opción seleccionada de manera predeterminada). No seleccione esta opción para mostrar los puntos de anclaje no seleccionados como puntos huecos y los puntos de anclaje seleccionados como puntos sólidos. 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. Si desea utilizar el icono predeterminado de la herramienta Pluma, no seleccione esta opción. 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.

3. Haga clic en Aceptar.

Dibujo de líneas rectas con la Pluma

• Para dibujar segmentos de líneas rectas con la herramienta Pluma, debe crear puntos de anclaje (puntos de la línea que determinan la longitud de los segmentos individuales de la línea).

Dibujo de líneas rectas con la Pluma

1. Seleccione la herramienta Pluma.

2. Seleccione Ventana > Propiedades y seleccione los atributos de trazo y relleno en el inspector de propiedades. Consulte Utilización de los controles Color de trazo y Color de relleno del inspector de propiedades.

3. Coloque el puntero en el escenario, en el inicio de la línea recta, y haga clic para definir el primer punto de anclaje.

4. Vuelva a hacer clic para indicar dónde desea que termine el primer segmento de la línea recta. Haga clic mientras mantiene presionada la tecla Mayús para limitar las líneas a ángulos múltiplos de 45°.

5. Siga haciendo clic para crear más segmentos rectos.

Dibujo de líneas rectas con la Pluma

• Para terminar el trazado como una forma abierta o cerrada, utilice uno de los siguientes procedimientos:– Para terminar un trazado abierto, haga doble clic en el

último punto y haga clic en la herramienta Pluma de la caja de herramientas, o bien presione la tecla Control y haga clic

– Para cerrar un trazado, coloque la herramienta Pluma sobre el primer punto de anclaje. Cuando está colocada correctamente, aparece un círculo pequeño junto a la punta del lápiz. Haga clic o arrastre para cerrar el trazado

Dibujo de líneas rectas con la Pluma

Para terminar la forma tal cual, seleccione en el menú

Edición > Anular todas las selecciones

o bien elija otra herramienta de la caja de herramientas.

Dibujo de líneas curvas con la Pluma

• Puede crear curvas arrastrando la 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 Pluma para crear un segmento curvo, los puntos de anclaje del segmento de línea muestran los selectores de tangentes. La pendiente y la longitud de cada selector de tangente determinan la pendiente y la altura , o la profundidad, de la curva. Al mover los selectores de tangentes cambian las formas de las curvas del trazado

Dibujar un trazo curvo con la pluma

1. Seleccione la herramienta Pluma. 2. Coloque la herramienta en el punto del escenario donde desee

que empiece la curva y mantenga presionado el botón del ratón.

3. Aparecerá el primer punto de anclaje y la punta de la pluma se convertirá en una punta de flecha.

4. Arrastre en la dirección en la que desea dibujar el segmento curvo. Arrastre con la tecla Mayús presionada para limitar la herramienta a ángulos múltiplos de 45º.

5. Conforme vaya arrastrando, aparecerán los selectores de tangentes de la curva.

6. Suelte el botón del ratón.7. La longitud y la pendiente de los selectores de tangentes

determinan la forma del segmento curvo. 8. Coloque el puntero donde desea que finalice el segmento

curvo, mantenga presionado el botón del ratón y arrastre en la dirección opuesta para finalizar el segmento.

Ajuste de puntos de anclaje en los trazados

• Al dibujar una curva con la herramienta Pluma, se crean puntos curvos (puntos de anclaje sobre un trazado curvo continuo).

• Al dibujar un segmento de línea recta o una línea recta conectada a un segmento curvo, se crean puntos angulares (puntos de anclaje sobre un trazado recto o en la unión de un trazado recto y uno curvo).

Ajuste de puntos de anclaje en los trazados

• De manera predeterminada, los puntos curvos seleccionados se muestran como círculos huecos, mientras que los puntos angulares seleccionados se muestran como cuadrados huecos.

Ajuste de puntos de anclaje en los trazados

• Para convertir los segmentos de una línea de segmentos rectos a segmentos curvos o viceversa, basta con convertir los puntos angulares en puntos curvos o viceversa.

Ajuste de puntos de anclaje en los trazados

• También puede mover, agregar o eliminar los puntos de anclaje de un trazado.

• Los puntos de anclaje se mueven utilizando la herramienta Subselección para ajustar la longitud o el ángulo de los segmentos rectos o la pendiente de los segmentos curvos. Puede retocar determinados puntos de anclaje para realizar pequeños ajustes.

• Si se eliminan los puntos de anclaje innecesarios de un trazado curvo, se optimizará la curva y se reducirá el tamaño del archivo.

Mover un punto de anclaje

• Arrastre el punto con la herramienta Subselección

Para retocar uno o varios puntos de anclaje

• Seleccione el punto o los puntos con la herramienta Subselección y utilice las teclas de dirección para mover los puntos

Convertir un punto de anclaje

• Para convertir un punto angular en un punto curvo, utilice la herramienta Subselección para seleccionar el punto; a continuación, arrastre el punto mientras mantiene presionada la tecla Alt

Para agregar un punto de anclaje

• Haga clic en un segmento de línea con la herramienta Pluma.

• Para eliminar un punto de anclaje, utilice uno de los siguientes procedimientos:– Para eliminar un punto de anclaje, haga clic

una vez en el punto con la herramienta Pluma.– Para eliminar un punto curvo, haga clic dos

veces en el punto con la herramienta Pluma. (Haga clic una vez para convertir el punto en un punto angular y haga clic otra vez para eliminar el punto.)

– Seleccione el punto con la herramienta Subselección y pulse Supr

Ajuste de segmentos

• Puede ajustar los segmentos rectos para cambiar el ángulo o la longitud del segmento o bien para ajustar los segmentos curvos para cambiar la pendiente o la dirección de la curva.

• Al mover un selector de tangente en un punto curvo, se ajustan las curvas a ambos lados del punto. Al mover un selector de tangente en un punto angular, sólo se ajusta la curva correspondiente al lado de la tangente del punto.

Ajuste de segmentos

Para ajustar un segmento recto:

1. Seleccione la herramienta Subselección y seleccione un segmento recto.

2. Utilice la herramienta Subselección para arrastrar a otra posición un punto de anclaje del segmento

Ajuste de segmentos

Para ajustar un segmento curvo:

• Seleccione la herramienta Subselección y arrastre el segmento.

• Nota: al hacer clic en el trazado, se muestran los puntos de anclaje. Al ajustar un segmento con la herramienta Subselección es posible que se agreguen puntos al trazado.

Ajuste de segmentos

• Para ajustar puntos o selectores de tangentes de una curva:

1. Seleccione la herramienta Subselección y seleccione un punto de anclaje de un segmento curvo. Aparece un selector de tangente para el punto que ha seleccionado.

2. Para ajustar la forma de la curva a uno de los lados del punto angular, arrastre el punto de anclaje o el selector de tangente. Arrastre con la tecla Mayús presionada para limitar la curva a ángulos múltiplos de 45º. Arrastre con la tecla Alt presionada para arrastrar los selectores de tangentes de a uno.

Pintura con la herramienta Pincel

Transitional Page

Your Main Topic Goes Here

• Your subtopics go here