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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

21
Para obtener un círculo perfecto mantenga la letra Mayúscula pulsada.
Enlace vídeo: Aplicar la herramienta Elipse.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

32
Enlace vídeo: Orden de apilamiento.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

Fireworks MX

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Fireworks MX

Similar a Fireworks MX (20)

Más de Jomicast

Más de Jomicast (20)

Último

Último (20)

Fireworks MX