Fireworks MX

65
16 TEMA 6. MACROMEDIA FIREWORKS MX José M. Castillo Castillo

Transcript of Fireworks MX

16

TEMA 6. MACROMEDIA FIREWORKS MX

José M. Castillo Castillo

MACROMEDIA FIREWORKS MX

1

INDICE DE CONTENIDO TEMA 6. MACROMEDIA FIREWORKS MX.

1. BIENVENIDO A MACROMEDIA FIREWORKS

1.1 Qué es Macromedia Fireworks 1.2 Requisitos mínimos del sistema 1.3 Entrar en Macromedia Fireworks 1.4 Entorno de trabajo 1.5 Abrir un documento 1.6 Guardar un documento 1.7 Cerrar un documento 1.8 Salir de Macromedia Fireworks 1.9 Práctica - bienvenido a Macromedia Fireworks 1.10 Práctica - abrir, guardar y cerrar un documento 1.11 Simulación - abrir y cerrar un documento 2. PRIMEROS PASOS. BARRAS DE HERRAMIENTAS

2.1 Gráficos vectoriales y mapas de bits 2.2 Crear un documento 2.3 Barra de herramientas. Seleccionar y modificar 2.4 Recortar 2.5 Herramientas para mapas de bits 2.6 Seleccionar y modificar mapas de bits 2.7 Otras herramientas de selección 2.8 Aplicar color. Pincel 2.9 Sello 2.10 Relleno. Cubo de pintura 2.11 Degradado 2.12 Herramientas para vectores 2.13 Línea 2.14 Objetos geométricos. Rectángulos 2.15 Elipse 2.16 Polígono 2.17 Pluma 2.18 Dibujar vectores 2.19 Insertar texto 2.20 Cuchilla 2.21 Otras herramientas 2.22 Color de trazo y de relleno 2.23 Ver 2.24 Práctica - creación del menú inicial 2.25 Simulación - rellenos y bordes

MACROMEDIA FIREWORKS MX

2

3. TRABAJO EN CAPAS 3.1 Orden de apilamiento y capas 3.2 Orden de apilamiento 3.3 Capas 3.4 Opacidad 3.5 Modo de mezcla de capas 3.6 Máscaras 3.7 Crear máscara con herramienta de pintura 3.8 Crear máscara mediante las herramientas de selección 3.9 Práctica - la máscara del faraón 3.10 Simulación - orden de apilamiento 4. CREACIÓN DE ELEMENTOS ACTIVOS 4.1 Herramienta web 4.2 creación de zonas interactivas 4.3 Herramienta zona interactiva 4.4 Comportamientos de una zona interactiva 4.5 Añadir comportamiento 4.6 Añadir comportamiento barra de estado 4.7 Comportamiento menú emergente 4.8 Práctica - aventura activa.com 4.9 Simulación - comportamiento de zona interactiva 5. CREACIÓN DE ANIMACIONES 5.1 Crear símbolos de animación 5.2 Animar un símbolo 5.3 Creación de una animación 5.4 Bucle 5.5 Interpolación de movimientos 5.6 Distribuir en fotogramas 5.7 Edición de un símbolo de botón 5.8 Bibliotecas 5.9 Importar una animación desde la biblioteca 5.10 Práctica - avión sobre montañas 5.11 Simulación - editar un símbolo de botón 6. OPTIMIZAR IMÁGENES Y EXPORTAR PARA WEB 6.1 Qué son los formatos 6.2 Formatos de exportación más frecuentes 6.3 Vistas previas en la ventana del documento 6.4 Papel optimizar 6.5 Exportar a formato gif 6.6 Exportar a formato jpeg 6.7 Calidad selectiva 6.8 Exportar imágenes optimizadas 6.9 Práctica - optimizar y exportar un gif animado 6.10 Simulación - Optimizar y exportar un GIF animado

MACROMEDIA FIREWORKS MX

3

1. BIENVENIDO A MACROMEDIA FIREWORKS

Bienvenido a Macromedia Fireworks, una aplicación especializada en el diseño de imágenes y gráficos interactivos destinados a la publicación de páginas Web. Usted podrá enriquecer la interactividad y el aspecto de sus trabajos de forma efectiva y rápida gracias a las ilimitadas posibilidades de sus funciones y herramientas.

1.1. Qué es Macromedia Fireworks

Macromedia Fireworks permite tanto al diseñador experto como al novel crear infinidad de gráficos, retocar imágenes y trabajar con vectores, botones y demás elementos interactivos. Es decir, Fireworks MX está ideado para el diseño de imágenes y gráficos destinados a la publicación de páginas Web.

Gracias a la claridad en el planteamiento de las herramientas, no le será difícil conseguir resultados de calidad en poco tiempo. Además, Macromedia Fireworks dispone de funciones que optimizan el resultado final, equilibrando la calidad y el tamaño de los ficheros.

1.2. Requisitos mínimos del sistema

Procesador Intel Pentium II de 300 Mhz.

Windows 98 SE, Windows Me, Windows NT® 4 (Service Pack 6), Windows 2000 o Windows XP.

64 Mb de RAM disponibles en el sistema (se recomiendan 128 Mb).

Capacidad para despliegue de colores 800 x 600, 8 bits (256 colores) o superior.

80 Mb de espacio disponible en el disco.

Unidad de CD-ROM.

MACROMEDIA FIREWORKS MX

4

1.3. Entrar en Macromedia Fireworks

Ya que se han presentado las principales características de la aplicación, procederá a ejecutarla para abrirla y trabajar con ella. Para acceder al programa de Macromedia Fireworks pulse el botón de inicio de Windows y seguidamente vaya a programas. Abra la carpeta de Macromedia y pulse Macromedia Fireworks. También se puede acceder directamente al programa a través del acceso directo a Fireworks en un icono ubicado en el Escritorio del PC.

Enlace vídeo: Entrar en Macromedia Fireworks.

1.4. Entorno de trabajo

Una vez que ha accedido a la aplicación, podrá visualizar el entorno de trabajo, es decir, la pantalla en la que se encuentra la Ventana de la aplicación Macromedia Fireworks. La interfaz de usuario se encuentra dividida por varios entornos: el menú principal donde se encuentran situados en la parte superior los botones de opciones para la gestión del programa Fireworks, la barra de herramientas, para construir y dibujar los proyectos, situada en la parte izquierda del programa, el área de trabajo, situado en la parte central y el inspector de propiedades situado en la parte inferior del programa.

Enlace del video: Entorno de trabajo.

MACROMEDIA FIREWORKS MX

5

1.5. Abrir un documento

Para abrir un documento en Fireworks diríjase al menú principal Archivo y seleccione Abrir, nos aparece una ventana para buscar el archivo en concreto. Una vez seleccionado pulse el botón abrir y se cargará en la interfaz gráfica de Fireworks. También se puede abrir un documento clicando dos veces sobre un archivo Fireworks o utilizando las teclas rápidas Ctrl+O.

Enlace vídeo: Abrir un documento.

1.6. Guardar un documento

Para guardar un documento Fireworks seleccione el menú Archivo y pulsar la opción Guardar, el proyecto se guardará en el lugar que usted especifique o utilizar la tecla rápida Ctrl+S.

Enlace vídeo: Guardar un documento.

MACROMEDIA FIREWORKS MX

6

1.7. Cerrar un documento

Existen varias formas de cerrar un documento, ya sea haciendo uso del menú Archivo o a través del menú de control de la Ventana del documento. El termino Cerrar está relacionado con el documento.

Para cerrar un documento seleccione el menú de Archivo y pulse la opción Cerrar. Si el documento no se ha guardado Fireworks le preguntará si desea guardar los cambios realizados.

Otras de las formas de cerrar un documento es hacer clic en el botón Salir [X], en la parte superior derecha de la ventana de trabajo o utilizando las teclas rápidas Ctrl+W.

Enlace vídeo: Crear un documento en Fireworks.

1.8. Salir de Macromedia Fireworks

Después de guardar el documento, procederemos a cerrar la aplicación. Para salir de la aplicación Fireworks MX, seleccione el menú principal Archivo y pulsar la opción Salir. En el caso de que aún no haya guardado los cambios realizados en el documento, Fireworks le pedirá guárdalo, o cancelar. Otra forma de salir de Fireworks MX es utilizando el botón salir [X] situado en la parte superior derecha de la interfaz gráfica del programa. También se puede utilizar las teclas rápida Control+F4.

Enlace vídeo: Salir de Macromedia Fireworks.

MACROMEDIA FIREWORKS MX

7

1.9. Práctica: Bienvenido a Macromedia Fireworks

Realice las siguientes operaciones:

1. Entre en Fireworks MX desde la opción programas de Windows. 2. Salir de Fireworks MX. 3. Acceder al programa desde un acceso directo. 4. Salir de la aplicación Fireworks MX.

1.10. Práctica: Abrir, guardar y cerrar un documento

Abra el documento “bienvenida.png” y guárdelo con el nombre Mi_archivo.png. Cierre el documento y salga de la aplicación.

1.11. Simulación: Abrir y cerrar un documento

En esta simulación se dispone de la interfaz de Fireworks con las únicas opciones de abrir un documento y cerrarlo. Las demás opciones del programa no es permitible.

Enlace práctica Simulación: Simulación Abrir y cerrar documento.

Recuerda:

Para cerrar un documento pulse sobre la opción Cerrar del menú Archivo.

La Barra de herramientas reúne las herramientas básicas para construir y dibujar los proyectos.

Macromedia Fireworks MX es una aplicación especializada en el diseño de imágenes y gráficos destinados a la publicación de páginas Web.

El icono de Macromedia Fireworks MX se encuentra dentro de una carpeta que se llama Macromedia que se sitúa en el desplegable Programas del menú Inicio.

El significado de Salir cierra la aplicación y Cerrar cierra el documento activo.

El Inspector de propiedades contiene toda la información relativa al elemento seleccionado o a la herramienta en uso.

Para abrir un archivo, deberá pulsar la combinación de teclas CTRL+O.

La Barra de menús le sirve para Seleccionar las capas.

Si desea guardar un archivo creado seleccione la opción Cerrar del menú Archivo

Si quiere salir de Macromedia Fireworks MX seleccione la opción Salir del menú Archivo.

MACROMEDIA FIREWORKS MX

8

2. PRIMEROS PASOS. BARRAS DE HERRAMIENTAS

Es el momento de comenzar a trabajar con Macromedia Fireworks. Comenzaremos la lección estudiando algunos conceptos básicos del diseño, como las diferencias entre gráficos vectoriales y mapas de bits. Además, aprenderemos a crear un documento y a emplear las herramientas que la aplicación nos ofrece.

2.1. Gráficos vectoriales y mapas de bits

Macromedia Fireworks emplea, básicamente, dos tipos de gráficos de características muy diferentes. Se hace necesaria una explicación previa de ambos formatos, ya que su diferenciación se hace imprescindible en éste y en la mayoría de los programas de diseño.

Los gráficos vectoriales se construyen a partir de objetos definidos matemáticamente por una serie de puntos unidos por líneas. Los objetos de la imagen son entidades individuales y, por lo tanto, susceptibles de ser modificados como tales. Podemos moverlos, escalarlos, distorsionarlos, girarlos o establecer un color de relleno y de trazo. Pueden visualizarse con gran nitidez y precisión aun cuando los escalamos o distorsionamos, al igual que pueden ser impresos con esta calidad de detalle en cualquier dispositivo de salida. Por otra parte, los gráficos vectoriales suelen ocupar menos espacio que el mapa de bits.

Macromedia Fireworks utiliza este tipo de imágenes, también Corel, Illustrator o FreeHand. Aunque la mayoría de las aplicaciones de dibujo están incapacitadas para tratar la imagen digital, Macromedia Fireworks integra ambas facetas, permitiendo el trabajo avanzado con las dos vertientes.

MACROMEDIA FIREWORKS MX

9

Los gráficos de mapas de bits, también llamados rasterizados, están formados por una trama de pequeños cuadrados (denominados píxeles). Cada uno de ellos tiene una posición fija y un color asignado. La visualización de esta trama de píxeles conforma una imagen reconocible que depende de la calidad de la imagen; del número de píxeles por unidad de medida. En consecuencia, cada uno de estos píxeles es la entidad individual con la que se trabaja. En vez de manipular objetos, se manipulan estos píxeles en color y/o tamaño, aunque no en posición.

Cada tipo de gráfico, vectorial o raster, presenta sus ventajas e inconvenientes. Los resultados obtenidos al escalar imágenes raster son bien distintos a los obtenidos al escalar gráficos vectoriales.

En el primer caso, la imagen puede aparecer con aspecto dentado o borroso, debido a su estructura en píxeles, por lo que puede que perdamos calidad. Además, este tipo de imágenes suele ocupar más espacio en el disco que los gráficos vectoriales.

Las aplicaciones fundamentadas en imágenes de mapas de bits, como Adobe Photoshop o Corel Photopaint, se utilizan para retocar fotografías, crear montajes fotográficos, efectos especiales, etc.

Resolución

Si cada píxel tiene un color y una posición, no es difícil imaginar que el número de píxeles influye de manera determinante en la calidad de la imagen. Pensemos en un momento en un mosaico compuesto de pequeñas piedras de color, realizado sólo con cincuenta piedras. Como es lógico, si dicho mosaico es de dimensiones más amplias, la apariencia final resultará muy estructurada, dividida y falta de calidad.

Ese mismo mosaico, realizado con miles de piedras y conservando las mismas proporciones, tiene, necesariamente, que aportar una calidad de detalles muy superior al anterior. Esto es lo que podemos llamar resolución de imagen, es decir, la cantidad de píxeles por unidad de medida. La resolución de imagen se mide en píxeles por pulgada.

Es necesario apuntar también que las imágenes con una resolución alta tienen mayor calidad, aunque también un espacio mayor en el disco. Por el contrario, cuando una imagen tiene una resolución muy baja, se produce lo que se conoce como pixelización. Es necesario, por tanto, encontrar un equilibrio entre calidad y tamaño de archivo, sobre todo al tratar imágenes destinadas a ser descargadas por Internet.

MACROMEDIA FIREWORKS MX

10

2.2. Crear un documento

Para crear un documento en Fireworks MX vaya al menú Archivo y pulse Nuevo o las teclas combinadas Ctrl+N. Aparece una ventana de diálogo para introducir los parámetros del tamaño del lienzo y el color. Esto nos permite configurar el nuevo documento, para ello, introducimos el ancho, alto y resolución del documento, así como el color en blanco, transparente o personalizado.

En la opción color personalizado, pulse la paleta de colores, para seleccionar un color determinado. Una vez introducido pulse el botón Aceptar y Fireworks MX crea un Nuevo documento.

Enlace vídeo: Crear un documento.

2.3. Barra de herramientas. Seleccionar y modificar

En la Barra de herramientas encontrará los útiles básicos necesarios para la elaboración de diseños. Como se vio anteriormente, la Barra de herramientas se sitúa, en un principio, en el margen izquierdo de la Ventana de la aplicación. Está dividida en seis partes, separadas según las funciones que desempeñan: Seleccionar, Mapa de bits, Vector, Web, Colores y Ver.

MACROMEDIA FIREWORKS MX

11

Seleccionar y modificar

Abra la imagen bievenido.png, seleccione el puntero de la barra de herramientas. Obsérvese como al pasar con el puntero del ratón sobre la imagen cargada, aparece zonas marcadas en rojo. Si pulsamos sobre alguna de ella el color del marco cambia a azul, obsérvese que el inspector de propiedades ofrece datos sobre la selección realizada. En este momento se podrá realizar cambios o modificaciones al objeto seleccionado.

Además de este puntero existen otros como son Herramientas Escala, Inclinar y Distorsionar. Para mover el objeto pulse con el ratón en el centro del objeto y desplácelo al lugar deseado.

Estas herramientas permiten marcar zonas del diseño para modificarlas o aplicarles algún efecto.

Macromedia Fireworks presenta cuatro grupos para seleccionar y modificar.

Enlace vídeo: Seleccionar y modificar.

MACROMEDIA FIREWORKS MX

12

2.4. Recortar

Es posible deshacernos de las partes de la imagen que no nos interesan. Para ello, usaremos la herramienta Recortar.

Seleccione el icono de Recortar en la barra de herramientas ubicada a la izquierda de Fireworks. En el documento abierto “bienvenido.png” seleccione con el ratón un área a recortar, de forma rectangular, pulse INTRO o dos veces sobre la selección, desaparece todo lo demás y se queda el área recortado.

Enlace vídeo: Recortar en Fireworks.

2.5. Herramientas para mapas de bits

Recuerde las propiedades básicas de los mapas de bits o imágenes raster. Las herramientas que veremos en este apartado están relacionadas con este tipo de gráfico, y son las siguientes:

Este conjunto de herramientas nos permite seleccionar, dibujar, pintar, borrar, copiar y rellenar los píxeles que componen la imagen.

MACROMEDIA FIREWORKS MX

13

2.6. Seleccionar y modificar mapas de bits

Abra la imagen premio.png, seleccione la herramienta de recuadro de la barra de herramientas de Fireworks Mapa de bits. Seleccione con el ratón el área que desea modificar dentro de la imagen. Una vez seleccionada se puede modificar utilizando las diferentes paletas, como por ejemplo, desenfocar.

Enlace vídeo: Seleccionar y modificar mapas de bits.

2.7. Otras herramientas de selección

Existen otras formas de seleccionar zonas de una imagen raster. En la siguiente secuencia, verá el empleo de Lazo, Lazo polígono y Varita mágica.

La herramienta lazo nos permite trabajar a mano alzada. Con el ratón pulsado vamos trazando y seleccionando el área y una vez terminado soltamos el ratón y nos aparece el contorno realizado.

MACROMEDIA FIREWORKS MX

14

En el lazo poligonal nos permite trazar mediante puntos el área a seleccionar.

La varita mágica toma nota del color de un pixel del mismo color. Haga clic en la zona blanca de la imagen y se selecciona todos los pixeles que está en el mismo área y tenga el mismo color.

Enlace vídeo: Otras herramientas de selección.

MACROMEDIA FIREWORKS MX

15

2.8. Aplicar color. Pincel

Usted puede dibujar y aplicar color a cualquier documento abierto en Macromedia Fireworks. Para ello, dispone de las herramientas que veremos a continuación:

Pincel

Permite aplicar color a mano alzada, es decir, como si usted pintara con un pincel en el lienzo de un cuadro. Al seleccionar Pincel observe el inspector de propiedades y seleccione el color en la paleta de colores, vallase al área de trabajo y pinte como de un pincel normal se tratara.

NOTA: La herramienta Lápiz es parecida al Pincel, aunque su trazado es fijo, es decir, usted no podrá variar el grosor de la línea.

Enlace vídeo: Aplicar color con la herramienta Pincel.

MACROMEDIA FIREWORKS MX

16

2.9. Sello

Esta herramienta permite copiar zonas de la imagen con el fin de corregir errores o camuflar zonas no deseadas. Consiste en dos cursores, uno de ellos copia los píxeles, y el otro los pega. Observe la siguiente secuencia:

Para eliminar un texto de una imagen, pulse sello de la barra de herramientas y con la tecla ALT pulsada y con el ratón póngase sobre la zona a eliminar y muévalo para eliminar el texto.

Enlace vídeo: Aplicar la herramienta sello.

2.10. Relleno. Cubo de pintura

Hemos visto algunas herramientas que aplican un trazado de color, es decir, una línea exterior. Hay otras que se encargan del color de relleno o del interior de la selección.

Cubo de pintura

Esta herramienta aplica un color uniforme de relleno. Para este ejemplo, haremos una selección dentro de un mapa de bits y la colorearemos posteriormente.

MACROMEDIA FIREWORKS MX

17

Seleccionamos Recuadro en la barra de herramientas y trazamos un rectángulo en el área de trabajo. Seguidamente en el inspector de propiedades y a través de la paleta de colores seleccionamos un color sólido, posteriormente seleccionamos cubo de pintura y aplicamos sobre el interior del recuadro realizado, todo el interior de la figura se llenara del color seleccionado.

Enlace vídeo: Relleno. Cubo de pintura.

2.11. Degradado

La herramienta de relleno Degradado, es muy similar a la de Cubo de pintura, aunque hay algunas diferencias en su uso.

Primeramente vamos a crear un documento nuevo en Fireworks. En el área de trabajo trace con el ratón una figura rectangular y escoja la herramienta Degradado y vaya al interior de la figura creada y con el ratón trace una vertical, suelte el ratón y seguidamente aparece el color degradado que haya sido seleccionado en la casilla de color del inspector de propiedades.

Enlace vídeo: Degradado.

2.12. Herramienta para vectores

Este apartado se ocupará del estudio de las herramientas dedicadas al tratamiento de gráficos vectoriales. Éstas vienen agrupadas en una sección de la Barra de herramientas llamada Vector.

MACROMEDIA FIREWORKS MX

18

2.13. Línea

Esta herramienta permite dibujar líneas rectas. El modo de empleo es muy sencillo:

Crea un nuevo documento en blanco en Fireworks. Seleccione Línea en el grupo de herramientas de Vector. Sitúese con el ratón en una zona de la ventana del documento y pulse el botón izquierdo, desplácese creando una línea, libere el ratón y aparece la línea creada. En el inspector de propiedades se puede modificar las características de la línea.

Enlace vídeo: Aplicar herramienta Línea.

2.14. Objetos geométricos. Rectángulos

Macromedia Fireworks permite crear trazos geométricos con una serie de herramientas que se encuentran agrupadas bajo un mismo botón.

MACROMEDIA FIREWORKS MX

19

Rectángulos

Esta herramienta le permite crear vectores con forma rectangular y se usa de la siguiente manera.

Seleccione de la barra de herramientas el botón Rectángulos, sitúese dentro de la ventana de trabajo y trace con el ratón una línea perpendicular, aparece seguidamente un rectángulo conforme a la dimensión dada.

Para obtener un rectángulo con todos los lados iguales mantenga pulsada la letra mayúscula. Escoja del inspector de propiedades para dar características de relleno, color, efectos, transparencia, etc. al rectángulo.

Si elegimos la opción Redondeado, nos aparece el rectángulo con las esquinas redondeadas, para cambiar las dimensiones del redondeo nos vamos al inspector de propiedades “Redondez del rectángulo” y le damos el valor deseado.

MACROMEDIA FIREWORKS MX

20

Enlace vídeo: Aplicar la herramienta Rectángulos.

2.15. Elipse

Esta herramienta dibuja trazados con forma de circunferencia. Para ello, repita los siguientes pasos:

Para comenzar elija la opción Elipse correspondiente a la barra de herramientas.

MACROMEDIA FIREWORKS MX

21

Para obtener un círculo perfecto mantenga la letra Mayúscula pulsada.

Enlace vídeo: Aplicar la herramienta Elipse.

MACROMEDIA FIREWORKS MX

22

2.16. Polígono

Gracias a la herramienta Polígono, usted podrá trazar objetos de múltiples lados o estrellas.

Seleccione Polígono en la barra de herramientas y observe en el inspector de propiedades los parámetros Forma, Lados, Angulo. Estos se pueden modificar al gusto del usuario para obtener la figura deseada: Polígono, Estrella, Número de lados, el ángulo de apertura, etc.

Coloque el ratón en la zona de la ventana de trabajo y trace una línea a la dimensión deseada. Suelte el ratón y aparece la figura según los parámetros añadidos en el inspector de propiedades.

Enlace vídeo: Aplicar la herramienta Polígono.

MACROMEDIA FIREWORKS MX

23

2.17. Pluma

Esta herramienta basa su uso en el método Bézier. Podremos trazar líneas rectas o curvas a partir de cuatro puntos (inicial, final y dos de control). En un principio, le puede resultar algo confuso, aunque al dominio de la herramienta se llega en poco tiempo si se practica lo suficiente. Veamos cómo podemos dibujar con ella.

Con las teclas Alt, Ctrl y Mayus. Podemos manejar diferentes tipos de movimiento de la Pluma.

Mayúscula + arrastrar maneja los rastreadores en paso de 45º.

Control + arrastrar mueve el punto. Desplazándolo hacia la derecha o izquierda.

Altiva + arrastrar nos permite cambiar la dirección de la línea, como si de una aguja de reloj se tratarse.

Enlace vídeo: Aplicar la herramienta Pluma.

MACROMEDIA FIREWORKS MX

24

2.18. Dibujar vectores

Con Trazado de vectores, podrá dibujar gráficos vectoriales a mano alzada, como si usara un lápiz y un papel. Macromedia Fireworks insertará los puntos donde estime oportuno.

Pulse la opción Herramienta Trazado de Vectores de la barra de herramientas, vaya a la ventana de trabajo de Fireworks y trace una figura, cuando acabe libere el ratón.

Seguidamente vaya a la barra de herramientas y pulse la opción Volver a dibujar trazado. Observe como el nuevo trazado se enlaza con la anterior figura.

Enlace vídeo: Dibujar vectores.

MACROMEDIA FIREWORKS MX

25

2.19. Insertar texto

Existe una herramienta especializada en el tratamiento del texto. Observe con atención la siguiente secuencia y aprenderá a usarla.

Active el botón correspondiente en la barra de herramientas. Haga clic a donde desea insertar el texto y escriba el texto que desee, observe que aparece en el inspector de propiedades todos los parámetros relacionados con el texto: Tamaño, fuentes, color, alineación, espaciado entre letras, transparencias, efectos, negrita, subrayado, cursiva, etc.

Es posible encontrar que en un mismo texto se tengan diferentes fuentes de texto, color, o tamaño.

Enlace vídeo: Insertar Texto.

MACROMEDIA FIREWORKS MX

26

2.20. Cuchilla

Esta herramienta le es útil si necesita cortar un trazado por alguno de sus puntos. Su modo de empleo es el siguiente.

Supongamos que tenemos una figura vectorial y deseamos cortarla. Seleccione la opción en la barra de herramientas Cuchilla y trace en la figura por donde desea cortar.

Una vez trazado con la opción Cuchilla libere el ratón. Observe como la aplicación Fireworks MX parte y divide la figura en dos partes.

Enlace vídeo: Aplicar la herramienta Cuchilla.

MACROMEDIA FIREWORKS MX

27

2.21. Otras herramientas

En Macromedia Fireworks hay otros útiles que permiten la modificación de los trazados.

Estas herramientas nos sirven para aplicarlo sobre un trazado vectorial y cambiar su forma. Por ejemplo, si dibujamos una línea recta en la ventana de trabajo, podemos modificarla con estas herramientas: Estilo libre, Remodelar área, Depurador de trazados-aditiva y sustractiva.

En la siguiente figura se observa como a una línea recta se le ha aplicado la herramienta libre y su forma ha cambiado por completo.

NOTA: Los depuradores de trazados solo pueden emplearse sobre trazados construidos con una herramienta sensible a presión y velocidad.

Enlace vídeo: Otras herramientas.

MACROMEDIA FIREWORKS MX

28

2.22. Color de trazo y relleno

La Barra de herramientas de Macromedia Fireworks presenta una sección dedicada a gestionar los colores de trazo y de relleno. En Colores, encontrará varios botones que le ayudarán en la elección del color que empleará posteriormente en su trabajo. Veamos cuáles son y cómo funcionan.

Haga clic en el color de la barra de herramientas., donde se encuentra la paleta de colores y elija un color. El color elegido es el mismo para trazos y rellenos.

Enlace vídeo: Aplicar Color de trazo y relleno.

MACROMEDIA FIREWORKS MX

29

2.23. Ver

Usted tiene varias posibilidades de visualización del documento sobre el que trabaja.

En la sección Ver de la Barra de herramientas de Macromedia Fireworks, encontrará varios botones destinados exclusivamente a la apariencia del proyecto en la Ventana del documento.

Enlace vídeo: Aplicar el cuadro de visualización Ver.

2.24. Práctica: Creación del menú inicial del Museo de Arte y Costumbres populares

Cree el siguiente menú de una página Web de un museo. Comience por abrir el mapa de bits del fondo y vaya añadiendo los trazos rectangulares, líneas, estrella, etc., con sus efectos correspondientes. Después, añada los textos y aplique las configuraciones de relleno, borde, sombras, etc.

MACROMEDIA FIREWORKS MX

30

2.25. Práctica de simulación: Rellenos y bordes

En la siguiente simulación, deberá aplicar diferentes rellenos y bordes a las figuras que se muestran. Siga las instrucciones y completará el ejercicio con éxito.

Enlace simulación: Práctica de simulación Rellenos y bordes.

Recuerda:

Macromedia Fireworks MX emplea básicamente dos tipos de gráficos: Vectoriales y mapas de bits.

Si deseamos construir un rectángulo, elipse o polígono proporcionados, deberemos mantener pulsada la tecla MAYÚS mientras se dibuja.

La herramienta Lápiz es parecida a Pincel, aunque su trazado es fijo y ambas herramientas dibujen píxeles y no vectores, es decir, usted no podrá variar el grosor de la línea.

El tamaño y la fuerza en la herramienta Remodelar Área son el diámetro y la intensidad de la modificación del vector.

La resolución es la cantidad de píxeles por unidad de medida.

El número de lados de un polígono o de una estrella es configurable y podremos configurar todos los parámetros en el Inspector de propiedades.

Las diferencias que encontramos entre las herramientas de selección Lazo y Lazo poligonal es que Lazo selecciona a mano alzada y Lazo poligonal utiliza líneas rectas.

La Barra de herramientas se divide en las siguientes secciones: Seleccionar, Vector, Web, Mapa de bits y Ver.

Algunas de las diferencias entre gráficos vectoriales y mapas de bits son que los gráficos vectoriales son escalables sin pérdida de calidad y los mapas de bits no.

Si pulsamos la tecla ALT mientras trazamos un objeto conseguiremos que éste se dibuje desde su centro geométrico.

MACROMEDIA FIREWORKS MX

31

3. TRABAJO EN CAPAS

El trabajo en capas constituye uno de los métodos de trabajo más útiles para el diseñador. No en vano, la mayoría de los programas de diseño ofrecen esta posibilidad de organización, haciendo más ordenado el trabajo, especialmente cuando el documento cuenta con gran número de elementos.

3.1. Orden de apilamiento y capas

Antes de continuar, deberemos diferenciar entre dos conceptos fundamentales: orden de apilamiento y capa.

El orden de apilamiento se define como la posición que los elementos ocupan dentro de una misma capa. Las capas son como acetatos transparentes que se superponen, distribuyéndose según el orden que el usuario establezca.

El orden de apilamiento de una figura depende del momento en que fue construida, es decir, la primera en dibujarse quedará debajo de las demás, y la última quedará encima.

Las capas son un sistema de organización a un nivel superior compuesto por cada uno de los elementos trazados, y que podremos ordenar a nuestro antojo, visualizar algunas capas y ocultar otras, crear fotogramas, efectos, etc.

En este capítulo, nos centraremos en el uso extensivo de las capas y estudiaremos la infinidad de posibilidades que nos ofrecen.

3.2. Orden de apilamiento

Ya se ha dicho que el orden de apilamiento se basa en el momento en el que se dibujan los elementos dentro de una misma capa. La gestión de este orden es muy sencilla y se explica en la siguiente secuencia.

El orden de apilamiento puede ser de varias formas: una de ella es seleccionar la capa y llevarla a una nueva posición superior, panel de capas Capa 1. Otra posibilidad es a través de la barra de menú, seleccione el objeto, vaya al menú Modificar y pulse Organizar en el submenú y elija una de las cuatros opciones:

Traer al frente,

Traer hacia adelante,

Enviar hacia atrás,

Enviar al fondo.

MACROMEDIA FIREWORKS MX

32

Enlace vídeo: Orden de apilamiento.

MACROMEDIA FIREWORKS MX

33

3.3. Capas

El sistema de organización de las capas es similar al del orden de apilamiento, aunque a un nivel superior. Podemos cambiar la posición de cualquier capa, así como duplicarla o eliminarla de forma rápida y sencilla.

Una capa es un conjunto de más capas de inferior nivel que nosotros hemos llamado orden de apilamiento. Si movemos una capa todos los subniveles reaccionarán al cambio al mismo tiempo.

Existen varios botones que nos facilita el manejo de las operaciones: Capa nueva duplicada, permite crear una nueva capa. Añadir máscara, oculta o muestra parte de una imagen. Nueva imagen de mapa de bits. Suprimir elección. Además el botón capa emerge un menú con muchas más opciones.

Enlace vídeo: Aplicar elemento de Capas.

MACROMEDIA FIREWORKS MX

34

3.4. Opacidad y modo de mezcla de capas

El nivel de opacidad permite variar la transparencia de una capa con respecto a la inferior. A mayor opacidad, más oculta aparecerá la capa solapada. Para ello, abra un documento de imagen y seleccione el objeto o la capa a modificar, vaya a la barra deslizante del panel de opacidad y deslice la barra. Escoja el 50% de opacidad. Vea el resultado.

Enlace vídeo: Opacidad y modo de mezcla de capas.

3.5. Modo de mezcla

Modo de mezcla permite determinar de qué forma van a superponerse las capas. Dependiendo de la opción que escojamos, éstas reaccionarán de formas diferentes, aplicando efectos, variando los colores, la saturación, opacidad, etc. Para ello, abra un archivo con imágenes y seleccione algunos de los objetos que aparece, por ejemplo, el triángulo y vaya al panel capas y seleccione cualquiera de los objetos de mezcla que hay en los modos emergentes, como existen varios aconsejamos que revise cada uno de ellos.

Enlace vídeo: Modo de mezcla.

MACROMEDIA FIREWORKS MX

35

3.6. Máscaras

Las máscaras permiten ocultar o mostrar partes de objetos, ya sean vectoriales o mapas de bits. Podremos crear moldes para recortar los objetos que haya debajo.

El uso del enmascaramiento depende del empleo de escalas de grises. Será el nivel de gris lo que determine la visibilidad del objeto inferior. Recordemos que una escala de grises consiste en la gama existente entre el blanco y el negro, con todos los tonos intermedios.

En el caso de las máscaras, cuanto más nos acerquemos al blanco, más visible se hará la capa inferior, y viceversa. En otras palabras, cuanto más oscura sea la máscara, más capacidad tendrá de ocultar la capa u objeto afectados. Una de las principales ventajas es que podemos seleccionar, ocultar, aplicar efectos, mostrar, etc., sin que la imagen original se vea afectada. Basta con rectificar la máscara para arreglar posibles fallos.

3.7. Crear máscaras con herramientas de pintura

Es labor del diseñador el practicar con las infinitas posibilidades que las máscaras le ofrecen.

Abra un documento de imágenes, observe que contienen dos capas con dos imágenes diferentes, seleccione la capa superior y pulse el botón añadir máscara fíjese que aparece un nuevo cuadro a la derecha de la imagen del panel capas.

El color negro es el encargado de ocultar la capa. Con la herramienta Pincel y con pintura negra nos pondremos sobre la máscara y pintaremos las partes que queremos esconder. La imagen no se borra sino que se oculta.

Enlace vídeo: Crear máscara con elemento de pintura.

MACROMEDIA FIREWORKS MX

36

3.8. Crear máscara mediante las herramientas de selección

Es posible usar cualquiera de las herramientas de selección para crear máscaras. El resultado es el similar al obtenido con herramientas de pintura, aunque sí hay diferencias en la técnica.

Abra el documento mascara.png y seleccione Lazo de la barra de herramientas. Empiece a contornear las figuras de la imagen, en este caso seleccione la zona que desea mostrar.

NOTA: Para añadir más zonas de selección a una ya creada, trácela mientras pulsa la tecla MAYUS. Para restarla, mantenga pulsada la tecla ALT.

Una vez haya trazado el recortado de la selección exteriores, pulse el botón añadir máscara, la plantilla se aplicará. Se verá solamente la imagen seleccionada.

Enlace vídeo: Crear máscara mediante las herramientas de selección.

MACROMEDIA FIREWORKS MX

37

3.9. Práctica: La máscara del faraón

En la siguiente práctica, usted practicará con las capas y máscaras para hacer el montaje que se le muestra en la imagen final. Además, deberá emplear un modo de mezcla para aplicar la tonalidad final.

Abra el documento “faraon.png” y aplíquele una máscara para ocultar el fondo y aislar el busto del primer plano. Haga visible la capa de fondo y cree una capa para aplicar el color homogéneo a la imagen final.

3.10. Simulación: Orden de apilamiento

En la siguiente simulación, practicará con la organización del orden de apilamiento de los objetos de una misma capa. Recuerde que todas las operaciones se llevarán a cabo a través del menú Modificar/Organizar.

Enlace práctica de simulación: Práctica de Simulación. Orden de apilamiento.

MACROMEDIA FIREWORKS MX

38

Recuerda:

El nivel de opacidad es un método que nos permite variar la transparencia de una capa con respecto a la inferior. A mayor valor, más opacidad.

Con la opción Allanar selección, podremos convertir los gráficos vectoriales en mapas de bits.

El trabajo en capas consiste en usar diferentes niveles para organizar los elementos.

Una de las ventajas del uso de máscaras es que podremos trabajar sobre una imagen sin que la original se vea afectada.

La diferencia que existe entre el orden de apilamiento y las capas es que las capas son niveles de organización superiores al orden de apilamiento

Para añadir o restar zonas de selección debemos pulsar la tecla MAYÚS, añadiremos selección.

Las formas que podemos construir una máscara es mediante herramientas de pintura y de selección.

Las máscaras se usan para mostrar u ocultar zonas de una imagen vectorial o de mapa de bits.

Para agrupar los paneles utilizados con más frecuencia, deberemos usar el comando Agrupar capas con.

Para cambiar el orden de apilamiento lo tenemos que hacer a través del menú Modificar/Organizar.

MACROMEDIA FIREWORKS MX

39

4. CREACIÓN DE ELEMENTOS ACTIVOS

Ya que hemos aprendido a usar las herramientas de dibujo y de selección, continuaremos este curso de Macromedia Fireworks estudiando los diferentes métodos de creación de elementos activos. Estos componentes nos ayudarán a aplicar a nuestras páginas mayor interactividad, es decir, el visitante podrá reconocer hipervínculos, zonas activas, menús emergentes, etc. Esta lección se dedicará a la explicación de los elementos más utilizados en diseño Web.

4.1. Herramientas Web

En la Barra de herramientas de Macromedia Fireworks, encontraremos una sección dedicada exclusivamente a la inserción de elementos activos en el diseño de la página en construcción.

Las herramientas Web que encontraremos son las siguientes:

Como podremos comprobar en la barra de herramientas el grupo de herramientas Web se compone de 4 operaciones: Zonas interactivas, Divisiones, Ocultar y Mostrar.

Todas estas operaciones están encaminadas a insertar elementos activos en el diseño de la página web.

MACROMEDIA FIREWORKS MX

40

Las zonas interactivas nos permiten dar interactividad a una imagen, para ello, se puede insertar una zona interactiva rectangular, circular o poligonal.

Al seleccionar una zona interactiva, ya creada, en el inspector de propiedades nos aparece los parámetros de esa zona interactiva: Forma, ancho y alto, vinculo, Alt, Destino, etc. Al crear una zona interactiva, el usuario tiene que darle los parámetros adecuados sobre Vínculo y Destino.

La herramienta divisiones realiza recorte en la imagen y las divide en varias más pequeñas, produciendo archivos independientes.

Enlace vídeo: Herramientas Web.

MACROMEDIA FIREWORKS MX

41

4.2. Creación de zonas interactivas

En el siguiente apartado, estudiaremos la creación de zonas interactivas y algunos de sus usos más interesantes. Comenzaremos por el empleo de la herramienta Zona interactiva y seguiremos con las configuraciones que permitirán una mayor interactividad del visitante.

4.3. Herramienta Zona interactiva

La herramienta que necesitamos para llevar a cabo estas operaciones se encuentra en la Barra de herramientas.

Como puede comprobar, existen tres variantes, que podremos utilizar para construir zonas interactivas rectangulares, circulares o poligonales. Para acceder a ellas, mantenga pulsado el botón y emergerá un submenú.

Pulse sobre la herramienta interactiva rectangular del grupo de opciones Web y vaya hacia la posición de la imagen y desplazando el ratón haga una zona de forma rectangular o también de forma poligonal.

Enlace vídeo: Herramienta zona interactiva.

MACROMEDIA FIREWORKS MX

42

4.4. Comportamientos de una zona interactiva

Ya que hemos construido una zona interactiva, veremos cómo configurarla para que resulte realmente útil.

Generalmente, estas áreas sensibles apuntan hacia otras páginas, documentos, acciones, etc. Podríamos decir que funcionan como botones, aunque, dependiendo de la configuración, las operaciones pueden variar considerablemente. Llamaremos Comportamiento a cada una de las funciones que puede desarrollar una zona interactiva. La lista de comportamientos empleados se puede visualizar si la abre desde el menú Ventana/Comportamientos o pulsando la combinación de teclas MAYÚS+F3.

Los comportamientos que podemos configurar para una zona interactiva son:

Intercambiar imagen.

Barra de estado.

Menú emergente.

También puede acceder a ellos haciendo clic sobre la zona interactiva con el botón secundario del ratón.

MACROMEDIA FIREWORKS MX

43

4.5. Añadir comportamiento Intercambiar imagen

Este comportamiento le permite cambiar el contenido de una división al activar una zona interactiva. En el supuesto de que se haya realizado una división previa.

Al seleccionar una zona interactiva nos aparece un menú para añadir comportamiento intercambiar imagen, añadir mensaje de barra de estado o añadir menú emergente. Seleccionamos añadir comportamiento intercambiar imagen. Nos aparece una ventana de intercambio de imagen. En esta ventana disponemos de la información para configurar una zona interactiva y la imagen de intercambio. Cuando desplacemos el cursor de ratón sobre una división actual, se muestra la imagen de intercambio en el lugar elegido en la página.

Fíjese que cuando seleccionamos una zona interactiva nos aparecen todas las características en el inspector de propiedades.

Enlace vídeo: Añadir comportamiento intercambiar imagen.

MACROMEDIA FIREWORKS MX

44

4.6. Añadir comportamiento Barra de estado

Este comportamiento aplicable a una zona interactiva seleccionada permite mostrar mensajes en la Barra de estado que se encuentra en la franja inferior del navegador.

Para insertar el texto que deseemos en la Barra de estado, procederemos del siguiente modo:

Haga clic sobre la zona interactiva donde va a aplicar el comportamiento y pulse el botón secundario del ratón para desplegar el menú contextual correspondiente y pulse la opción abrir mensaje de Barra de estado.

En la nueva ventana que aparece introducimos el texto/mensaje que nos aparecerá en la barra de estado cuando pasemos con el ratón sobre la zona interactiva. Se puede hacer perfectamente con las demás zonas interactivas, cambiando el texto/mensaje que está relacionado con la zona.

Enlace vídeo: Añadir comportamiento Barra de Estado.

MACROMEDIA FIREWORKS MX

45

4.7. Comportamiento menú emergente

A continuación, estudiaremos la configuración de diversos menús emergentes que resultan visualmente muy atractivos y eficientes. Si usted quiere crear unos de estos menús, repita los pasos siguientes.

Haga clic con el ratón, botón derecho, sobre la zona interactiva que desea aplicar y en el menú contextual que aparece pulse la opción Añadir menú emergente.

Cuando pulsamos la opción añadir menú emergente nos aparece una ventana de Edición de menú emergente con cuatro pestañas: Contenido, Aspecto, Avanzado y Posición.

En la pestaña Contenido pulsamos el signo (+) para añadir nuevas filas para añadir texto/vínculo y Destino.

MACROMEDIA FIREWORKS MX

46

En la pestaña Aspecto podremos ver la apariencia del menú emergente. Aquí existen varios parámetros que configurar como son Fuentes, tamaño, color del texto y celda, menú vertical u horizontal.

En la pestaña Avanzado se determina de una forma más precisa el ancho de la celda en pixeles, altura, relleno, espacio entre celdas, bordes, etc.

MACROMEDIA FIREWORKS MX

47

En la pestaña de Posición nos permite dar valores a la posición del menú emergente para su colocación en el documento.

Enlace vídeo: Comportamiento menú emergente.

4.8. Práctica: Aventura Activa.com

Abra la imagen “aventuraactiva.jpg” y configure las secciones con los siguientes menús emergentes. Deberá trazar las zonas interactivas de cada una de ellas y aplicarle un comportamiento de menú emergente, escribir cada una de las opciones y editar el menú según los estilos y posiciones. Quizá deba retocar manualmente la posición de alguno de ellos.

• ¿Quiénes somos?: Historia / Socios / Contacto. • ¿Qué hacemos?: Organización / Monitores / Alquiler de equipos. • Rutas más solicitadas: Rutas a caballo / Rafting / Barranquismo. • Reservas: Tarifas / Alojamiento / Modo de pago

MACROMEDIA FIREWORKS MX

48

4.9. Simulación: Comportamiento de zona interactiva

En la siguiente simulación, practique con los conceptos aprendidos a lo largo de esta lección. En este ejercicio, aplicará comportamientos a las zonas activas ya existentes.

Enlace práctica de simulación: Comportamiento de zona interactiva.

Recuerda:

La orden onMouseOut permite que la imagen de intercambio desaparezca al retirar el puntero de la zona interactiva.

Las variantes de la herramienta Zona interactiva Son tres: rectangular, circular y poligonal.

Los comportamientos que podemos aplicar a una zona interactiva son Intercambiar imagen, Barra de estado y Menú emergente.

La tecla que deberemos pulsar para ver una vista previa del documento en el que estamos trabajando es F12.

Es posible la creación de una zona interactiva con forma de elipse pero deberemos partir de una en forma de círculo y realizar transformaciones con las herramientas Sesgar, Inclinar o Distorsionar.

Es posible crear subniveles en un menú emergente en el cuadro de diálogo Editor de menú emergente, pulsaremos el botón correspondiente después de seleccionar la entrada a la que afecta.

Los elementos activos son componentes que nos ayudan a aplicar mayor interactividad a las páginas Web.

Las diferencias que existen entre las zonas interactivas y las divisiones son que las primeras son áreas sensibles a las que aplicaremos comportamientos, y las segundas son porciones recortadas de la imagen original.

Un comportamiento es cada una de las operaciones que puede desarrollar una zona interactiva.

Podremos variar la posición de un menú emergente con respecto a la zona interactiva a la que se aplica si lo arrastramos con el puntero del ratón a la posición deseada.

MACROMEDIA FIREWORKS MX

49

5. CREACIÓN DE ANIMACIONES

Como ya se adelantó al iniciar este curso, las posibilidades de Macromedia Fireworks son muy diversas, y abarcan gran variedad de aplicaciones. Una de esas posibilidades es el desarrollo de animaciones, que dotarán de un mayor atractivo a los gráficos para la Web. Gracias a la manipulación de símbolos y fotogramas, veremos que los resultados pueden llegar a ser espectaculares.

5.1. Crear símbolos de animación

Macromedia Fireworks lleva a cabo la animación de lo que llamaremos símbolos. Estos símbolos son imprescindibles, ya que son las unidades a las que daremos el movimiento.

A lo largo de esta lección, crearemos unos de los elementos más dinámicos y llamativos del diseño Web: el reclamo publicitario.

Cree un nuevo documento con las dimensiones de 480x60 pixeles, con fondo negro. Importaremos la imagen de un coche que será el protagonista de la animación. Para ello iremos al menú Archivo y pulsamos la opción Importar, buscamos la imagen del coche y le damos aceptar. En el documento aparece un símbolo en forma de ángulo recto, sitúelo en el lugar que desee y pulsamos clic.

Haga clic con el botón secundario del ratón y aparece un menú contextual y seleccione la opción convertir en símbolo o la tecla rápida F8.

MACROMEDIA FIREWORKS MX

50

En el cuadro de diálogo Propiedades del símbolo introduzca el nombre y tipo: Gráfico, Animación, Botón. Y seleccione Animación que es para lo que emplearemos la imagen.

En el menú Animar seleccione los valores del número de Fotogramas, mover, dirección, etc., y pulse Aceptar. En el documento aparecen los puntos de fotogramas.

La animación consiste en que el vehículo se va desplazando en el fondo de la imagen hacia adelante y hacía de atrás.

Enlace vídeo: Crear símbolos de animación.

MACROMEDIA FIREWORKS MX

51

5.2. Animar un símbolo

Ya que hemos convertido una selección en símbolo de animación, procederemos a editar la secuencia de una forma más exhaustiva. Comenzaremos por reconocer el panel Fotogramas, que acogerá la totalidad de fotogramas de la animación.

Al crear una animación a partir de un símbolo, los fotogramas resultantes se agregarán automática y ordenadamente a la capa Fotogramas. Como se muestra en la imagen anterior, son varios los botones que componen dicho panel. Podremos determinar qué fotogramas aparecerán en la vista de papel cebolla, cuántas veces se repetirá la animación, agregar o eliminar fotogramas, así como varias operaciones adicionales que permiten un control absoluto sobre la película.

5.3. Creación de una animación

Llevaremos a cabo la animación del resto del banner en el que emplearemos dichas funciones.

Emplearemos la animación del coche que realizó y guardó en apartados anteriores.

Enlace vídeo: Creación de una animación.

MACROMEDIA FIREWORKS MX

52

5.4. Bucle

La configuración del bucle determinará cuántas veces debe repetirse la animación acabada. Existe un menú en la parte inferior izquierda del panel Fotogramas donde el usuario puede indicar sus preferencias.

Seleccione Sin bucle para que la animación se reproduzca una sola vez. Si desea que lo haga de 1 a 20 veces, marque la que más le interese y, si desea que la reproducción sea continua, escoja Siempre.

5.5. Interpolación de movimientos

Hemos aprendido a animar objetos basándonos en la transformación de un símbolo gráfico en animado. Ahora aprenderemos a animar los elementos de una forma diferente; presentaremos a Macromedia Fireworks el primer fotograma y el último, y será el programa el encargado de realizar la película de forma automática.

Para llevar a cabo este modo de animación, deberemos aprender el uso de Distribuir en fotogramas.

MACROMEDIA FIREWORKS MX

53

5.6. Distribuir en fotogramas

La distribución en fotogramas simplifica considerablemente la tarea de animar los elementos del diseño. Para llevarla a cabo con éxito, repita los pasos que se proponen a continuación. Crearemos un movimiento sencillo de dos líneas de texto.

Enlace vídeo: Distribuir en fotogramas.

5.7. Edición de un símbolo de botón

El tercer tipo de símbolo que nos queda por ver es el de Botón. El botón consta de varios estados, dependiendo de su diseño y de su interacción con el puntero del ratón. Veamos un ejemplo práctico de su edición y posterior empleo.

Primeramente cree un documento en blanco donde insertar el botón de ejemplo. Importe el archivo “globo.gif”. Selecciónelo y conviértalo en un símbolo de botón pulsando la tecla F8 o desplegando el menú contextual con el botón secundario del ratón y marcando Convertir en símbolo.

En el cuadro de diálogo Propiedades del símbolo, seleccione la opción Botón y otórguele un nombre. Pulse Aceptar. Ya que ha creado un símbolo de botón procederemos a editarlo. Haga doble clic sobre el símbolo para abrir el cuadro de edición.

Enlace vídeo: Edición de un símbolo de botón.

MACROMEDIA FIREWORKS MX

54

5.8. Bibliotecas

Existe la posibilidad de emplear elementos prediseñados por Macromedia Fireworks. Usted podrá encontrar una completa colección en el menú Editar/Bibliotecas.

5.9. Importar una animación desde la biblioteca

Insertaremos una animación en un documento para que sirva como ejemplo.

Cree un documento nuevo de tamaño mediano. Despliegue el menú Editar/Biblioteca/Animación. Se abrirá el cuadro de diálogo Importar símbolos: Animaciones.

Seleccionamos cualquiera de ellos. Si desea ver una muestra de la animación, pulse el botón Reproducir. Si la animación le agrada, pulse importar y ésta será automáticamente incorporada al diseño en el que estamos trabajando.

Usted puede editar la animación en sí, por si necesita alguna adaptación al proyecto en desarrollo. Para ello, haga doble clic sobre el símbolo de animación y realice las modificaciones oportunas en cada uno de los fotogramas que lo componen.

Enlace vídeo: Importar una animación desde la Biblioteca.

MACROMEDIA FIREWORKS MX

55

5.10. Práctica: Avión sobre montañas

En la siguiente práctica, usted deberá ser capaz de animar la siguiente secuencia de forma que el avión sobrevuele las montañas del paisaje. Abra el documento “avion.png”.

Tenga en cuenta que el documento contiene cinco planos: avión, montañas 1.er plano, montañas 2.o plano, nubes y fondo. La velocidad de desplazamiento del avión es superior al resto de los planos, por lo que tendrá que recorrer mayor espacio en menor número de fotogramas. La velocidad va disminuyendo proporcionalmente a la distancia visual de los planos.

Anime cada uno de los símbolos gráficos empleando la distribución en fotogramas.

5.11. Simulación: Editar un símbolo de botón

Practique la edición de un símbolo de botón a partir de una imagen dada. Además, configure los diferentes estados.

Enlace práctica simulación: Editar un símbolo de botón.

MACROMEDIA FIREWORKS MX

56

Recuerda:

Podemos editar cada estado de un botón de forma independiente para ello contamos con el cuadro de diálogo correspondiente.

Podemos modificar los estados de un botón realizando cualquier cambio que necesitemos, incluso sustituir la imagen original.

Existen tres tipos de símbolos: animación, gráfico y botón.

Si importamos un archivo, la marca en forma de ángulo recto nos ayuda a colocar la imagen importada en el lienzo.

El comando Entre instancias sirve para animar un símbolo, indicando la posición inicial y la final.

Existen dos formas diferentes de realizar una animación: convirtiendo un gráfico en símbolo de animación y mediante la interpolación de movimiento o distribución en fotogramas.

Al editar un símbolo de animación podemos cambiar la opacidad. Además podremos indicar la opacidad de inicio y de final.

Un símbolo es un elemento que nos servirá como unidad básica para crear animaciones.

Es posible modificar la duración de algunos fotogramas de una animación, basta con introducir el nuevo valor en Demora de fotogramas.

El usuario podrá modificar los símbolos importados desde la Biblioteca y es libre de modificarlo según sus necesidades

MACROMEDIA FIREWORKS MX

57

6. OPTIMIZAR IMÁGENES Y EXPORTAR PARA WEB

Además del atractivo visual y el buen uso de los recursos que Macromedia Fireworks nos ofrece, es imprescindible la preparación de las imágenes de forma que el tiempo de descarga desde la red se equilibre con la calidad de las mismas. Por ello, dedicaremos esta lección en exclusiva a la optimización de los mapas de bits resultantes, teniendo en cuenta diversos factores, como el destino de las imágenes o la función de botones y animaciones.

6.1. Qué son los formatos

Al comenzar a desarrollarse las imágenes por ordenador, cada programa tenía su propio formato nativo, esto impedía el traspaso de archivos de un programa a otro en muchas ocasiones. Actualmente, la mayoría de los programas gráficos permiten abrir y guardar archivos en una gran cantidad de formatos diferentes, e incluso intercambiarlos entre plataformas distintas (Macintosh y PC). Así, por ejemplo, podrá abrir archivos PSD de Photoshop en Macromedia Fireworks, o podrá guardar una imagen en GIF si piensa utilizarla en Internet.

6.2. Formatos de exportación más frecuentes

Macromedia Fireworks permite exportar los archivos de imagen en diferentes formatos, dependiendo de las necesidades y de la calidad que desee aplicarles. Los formatos disponibles son:

GIF es el formato que más se usa en el diseño Web, ya que pueden tener hasta un máximo 256 colores y, además, permite la creación de gráficos animados. Es posible designar un área transparente para ver objetos o fondos que se encuentren detrás.

JPEG admite una profundidad de millones de colores, aunque la compresión puede producir pérdidas en la calidad de la imagen. Es el formato más empleado para la fotografía digital o de escáner, y hay que tener mucho cuidado al exportar, ya que el peso en kilobites no debe ser excesivo.

PNG es el formato nativo de Macromedia Fireworks. Es muy versátil, aunque no es compatible con algunos navegadores Web. Se permite la transparencia o el uso de un canal alfa. Puede incluir información propia de Macromedia Fireworks, aunque se pierde al exportar.

WBMP es un archivo de 1 bit, es decir, blanco y negro. Se emplea en teléfonos móviles y PDA.

TIFF es el formato más extendido para imágenes impresas. Es interesante saber que la compresión de estos archivos no comporta pérdidas en la calidad.

BMP es el formato creado por Microsoft para mostrar mapas de bits en entorno Windows. Su nivel de compresión es baja, por lo que no es muy recomendado para el diseño Web.

PICT es un tipo de mapa de bits propio de los equipos Macintosh. Utilícelo si ése es su destino.

MACROMEDIA FIREWORKS MX

58

6.3. Vistas previas en la ventana del documento

Como habrá podido observar a lo largo de este curso, la ventana del documento cuenta con una serie de pestañas que muestran diferentes vistas previas de la imagen. Hasta este momento, hemos trabajado sobre la imagen original, es decir, no hemos comprobado las consecuencias de la compresión de los ficheros.

Explicaremos a continuación las funciones de cada una de esas pestañas.

1. Original: Muestra la imagen sin alteraciones relacionadas con la compresión o profundidad de color.

2. Vista previa: Permite la observación en tiempo real, antes de exportarla, del estado gráfico, incluyendo las pérdidas en la calidad o el color.

3. 2-arriba: Divide la ventana del documento en dos y muestra en cada una de las partes las versiones Original y Vista previa.

4. 4-arriba: Abre cuatro ventanas con sendas muestras de la imagen. Seleccione qué vista previa desea en cada una de ellas. Haga clic y escoja en el panel optimizar el formato final. Dispone de información adicional, como el peso, tiempo de descarga y profundidad de color.

Enlace vídeo: Vistas previas en la ventana del documento.

MACROMEDIA FIREWORKS MX

59

6.4. Panel Optimizar

Es aquí donde encontraremos todos los datos referentes a la exportación de la imagen final a su aplicación definitiva. Cada uno de los formatos explicados tendrá sus propios parámetros de optimización. En el panel Optimizar, podremos equilibrar la relación calidad-peso en kilobites. Repasaremos algunos parámetros de cada uno de los archivos de exportación.

NOTA: Para observar de forma efectiva, es recomendable la posición 2-arriba en la ventana del documento. En la ventana de la izquierda, mostraremos la imagen original y, en la de la derecha, la exportada.

6.5. Exportar a formato GIF

Como se dijo anteriormente, el formato GIF es muy empleado en el diseño Web por el bajo peso y la posibilidad de transparencia y animación.

1. Configuraciones guardadas: Almacene aquí sus configuraciones personalizadas para ahorrar tiempo en exportaciones posteriores idénticas.

2. Formato: Lista de todos los formatos de exportación. En este caso, hemos seleccionado GIF. 3. Indexación: Seleccione la opción que necesite teniendo en cuenta el uso final de la imagen. 4. Mate: Seleccione el color de fondo de la página de destino con el fin de suavizar las

transparencia de la imagen exportada. 5. Profundidad de color: Establezca el número máximo de colores de la imagen. 6. Tramado: Mejora las transiciones, especialmente degradados, entre la imagen expuesta y el

fondo. 7. Modo de transparencia: El fondo GIF permite transparencia. Seleccione el modo en el que se

va a aplicar la transparencia de índice, será el usuario el encargado de seleccionar en la paleta de colores el que se volverá transparente en la exportación. Transparencia alfa, permite seleccionar zonas en vez de colores para asignar la transparencia. Este modelo es más propio del formato PNG.

MACROMEDIA FIREWORKS MX

60

8. Paleta de colores: Contiene todos los colores que componen la imagen. Observe que, al pasar el cursor por la vista previa, queda resaltados los diferentes tonos de cada uno de los pixeles.

Enlace vídeo: Exportar a formato GIF.

6.6. Exportar a formato JPEG

La exportación de una imagen en formato JPEG es más sencilla que a GIF. Las razones que justifican este razonamiento son la imposibilidad de animación y la ausencia de transparencia. Por todo ello, sólo podremos determinar la calidad de la imagen, teniendo en cuenta el peso de la misma en kilobites.

Los parámetros que nos permiten la configuración de un archivo JPEG se encuentran en el panel Optimizar, después de seleccionar la operación JPEG del menú desplegable.

MACROMEDIA FIREWORKS MX

61

Además de seleccionar el formato y el color de fondo de la Web de destino, es muy importante configurar la calidad de la imagen. Tenga en cuenta que, cuanto menor es el valor que aparece en el campo correspondiente, más baja será la calidad de la exportación y menor espacio físico ocupará.

Todo ello es de vital importancia a la hora de calcular el tiempo de bajada del archivo por la línea telefónica.

En la ventana del documento, disponemos información relativa al tamaño final y tiempo de descarga. Equilibre los valores que ahí aparecen para que la exportación resulte más satisfactoria.

Enlace vídeo: Exportar a formato JPG.

6.7. Calidad selectiva

La calidad selectiva permite cuantificar la calidad de un área de selección realizada en la imagen original. Para realizar la operación con éxito, repita los pasos que se proponen a continuación.

1. Como ejemplo, mantendremos un mayor nivel de calidad en la zona de los ojos de la chica de la imagen. En la imagen original, seleccione la opción la porción correspondiente con la herramienta de selección Recuadro.

2. Despliegue el menú Modificar/JPEG/Selectivo/Guardar selección como máscara JPEG y la zona interactiva seleccionada cambiará de color ligeramente, indicando que la máscara ha sido guardada para su posterior exportación.

3. Haga clic sobre el botón correspondiente en el panel Optimizar y abra el cuadro de diálogo Configuración JPEG selectivo.

MACROMEDIA FIREWORKS MX

62

4. Marque la casilla Activar Calidad selectiva e inserte el valor que desee en el campo pertinente. Además podrá seleccionar un color para el solapamiento en la imagen original. Si la imagen contiene una capa de texto, puede mantener su calidad de forma independiente, al igual que la de los botones si se incluyen alguno. Cuando haya finalizado pulse Aceptar.

Enlace vídeo: Calidad Selectiva.

6.8. Exportar imágenes optimizadas

Después de optimizar las imágenes finales, es necesario exportarlas para almacenarlas convenientemente. Sirvan los pasos sugeridos a continuación como ejemplo.

1. Despliegue el menú Archivo/Exportar para abrir el cuadro de diálogo Exportar. 2. Seleccione la forma en la que exportar el documento optimizado, dependiendo del destino

de la imagen final. En la mayoría de los casos, emplearemos la opción Sólo imágenes. 3. De un nombre al archivo, busque la carpeta en la que quedará almacenada y haga clic en

Guardar.

Enlace vídeo: Exportar imágenes optimizadas.

MACROMEDIA FIREWORKS MX

63

6.9. Práctica: Optimizar y exportar un GIF animado

En la siguiente práctica, abra el archivo “avion_t6.png”. Optimice y exporte la imagen como GIF animado. Estipule un número máximo de 16 colores, sin ningún tipo de transparencia y con una paleta de colores adaptables a Web.

Después compruebe los resultados en un navegador Web.

6.10. Simulación: Optimizar y exportar un GIF animado

Cree una animación a partir de las imágenes que se facilitan con el fin de construir un banner publicitario. Haga uso de la edición de las capas y de interpolaciones de movimiento.

Enlace práctica simulación: Optimizar y exportar un GIF animado.

Recuerda:

Las operaciones que podremos llevar a cabo en el panel Optimizar es equilibrar la relación calidad-peso de la imagen. Las formas que podremos clasificar los colores de una imagen es según su popularidad, luminancia o sin clasificar. El formato que más se usa para imágenes impresas es el TIFF. El formato JPG puede llegar a comprimir notablemente su peso en kilobites, pero: pierde más calidad cuanto mayor sea la compresión. Las características principales del formato GIF es bajo peso, transparencia y animación. Los datos que nos ofrece la vista preliminar de la ventana de documento son el tamaño en píxeles, peso en kilobites y tiempo de descarga. Actualmente, los ficheros producidos por programas diferentes se pueden compartir, gracias a la variedad de formatos, podremos exportar e importar ficheros entre aplicaciones diferentes. La opción Mate sirve para adaptar el color de la imagen con transparencias al color de fondo de la Web de destino. La Calidad selectiva consiste en la posibilidad de realizar compresiones diferentes en la misma imagen. Se pueden ver varias versiones de la misma imagen en la ventana del documento, aunque no es recomendable cuando el fichero es una animación.

MACROMEDIA FIREWORKS MX

64

Resumen general de la unidad

Existen tres tipos de símbolos: animación, gráfico y botón.

El trabajo en capas consiste en: usar diferentes niveles para organizar los elementos.

Con a la orden onMouseOut: la imagen de intercambio desaparecerá al retirar el puntero de la zona interactiva.

Fireworks emplea básicamente dos tipos de gráficos vectoriales y mapas de bits.

Para agrupar los paneles utilizados con más frecuencia, deberemos usar el comando: agrupar capas con.

El comando Entre instancias sirve para animar un símbolo, indicando la posición inicial y la final.

Para cerrar un documento hay que pulsar sobre la opción Cerrar del menú Archivo.

Las operaciones que podremos llevar a cabo en el panel Optimizar es equilibrar la relación calidad-peso de la imagen.

La Barra de menús le sirve para: Seleccionar las capas.

El tamaño y la fuerza en la herramienta Remodelar Área consisten en el diámetro y la intensidad de la modificación del vector.