Anda di halaman 1dari 72

Curso de Fireworks Web de prcticas

Web de prcticas
Vamos a disear una web formada por una pgina principal y tres dependientes
de ella.


El contenido de la pgina principal ser:


Cabecera
Animacin
Fondo
Dibujo mapa de bit Barra de navegacin

La estructura de las pginas las crearemos en Dreamweavers, pero los contenidos (
banner, barra de navegacin, dibujo en mapa de bit, fondo y animacin) los hacemos en
Fireworks y los exportamos al editor de pginas.




Pgina 1
Curso de Fireworks Web de prcticas
La estructura de la pgina principal estar formada por tablas:


En el panel de herramientas Cmun >tablas: se abre ventana; elegir 1 fila, 1 columna, ancho 800
pxeles, Alto 400, borde 0 >Aceptar.


En el Inspector de Propiedades >Alinear >Centro.

Dentro de la tabla se crean otras dos tablas:
La superior : 1 fila y 1 columna. Ancho 800, Alto 90 . Borde 0. Alinear: Centro.

La inferior : 1 fila y 1 columna. Ancho 800, Alto 300, Borde 0. Alinear: Centro.

Pgina 2
Curso de Fireworks Web de prcticas

Espacio para el banner

Dentro de la tabla inferior creamos otra tabla de 3 columnas y 1 fila. Ancho 800, Alto 300, borde
0, Alinear >Centrado..
La columna de la izquierda le damos un ancho de 140 pxeles. Alineacin: Horz- izquierda; vert-
superior. Columna de la derecha le damos un ancho de 115 pxeles.

Espacio para la animacin
Espacio para la barra de
navegacin
Pgina 3
Curso de Fireworks Entorno de trabajo
1. Entorno de trabajo de Fireworks
Los elementos que componen el entorno de trabajo de Fireworks:


















Panel de
herramientas
Barra de mens
Lienzo
Paneles
flotantes
Inspector de
propiedades
En el centro de la pantalla se encuentra la ventana de documento. En el centro de la
ventana de documento se encuentra el lienzo. Aqu es donde se muestra el documento de
Fireworks y las imgenes creadas.
En la parte superior de la pantalla hay una barra de mens. La mayora de los comandos
de Fireworks son accesibles desde la barra de mens.
En la izquierda de la pantalla se encuentra el panel Herramientas. Si el panel
Herramientas no est visible, elija Ventana > Herramientas. El panel Herramientas
contiene las herramientas para seleccionar, crear y modificar diversos elementos grficos
y objetos web.
En la parte inferior de la pantalla se encuentra el Inspector de propiedades. Si no est
visible, elija Ventana > Propiedades. El Inspector de propiedades presenta las
propiedades del objeto o la herramienta seleccionados. Estas propiedades pueden
cambiarse. Si no se ha seleccionado ningn objeto ni herramienta, indica las propiedades
del documento.
El Inspector de propiedades muestra dos o cuatro filas de propiedades. Si est a
media altura, es decir, si slo muestra dos filas, es posible hacer clic en la flecha
de ampliacin del ngulo inferior derecho para ver todas las propiedades.



Pgina 4
Curso de Fireworks Entorno de trabajo
En la derecha de la pantalla hay varios paneles, como Capas y Optimizar. stos y otros
paneles pueden abrirse desde el men Ventana. Son los paneles flotantes.
Desplace el puntero por los distintos elementos de la interfaz. Si mantiene el puntero el
tiempo suficiente sobre un elemento, aparece la ayuda emergente. Los mensajes de la
ayuda emergente identifican herramientas, mens, botones y otros rasgos de la interfaz en
todo el programa. Desaparecen al retirar el puntero de los elementos en cuestin.
a) Panel Herramientas
El panel Herramientas est organizado en seis categoras: Seleccionar, Mapa de
bits, Vector, Web, Colores y Ver.





























a.1) Cambio de las opciones de herramienta
Cuando se elige una herramienta, el Inspector de propiedades muestra sus
opciones. Algunas opciones permanecen en pantalla mientras se trabaja con esa
herramienta. Con otras herramientas, como las herramientas bsicas de forma y las
herramientas Pluma y Lnea, el Inspector de propiedades muestra las propiedades de
los objetos seleccionados.
Pgina 5
Curso de Fireworks Entorno de trabajo




a.2.) Seleccin de una herramienta en un grupo de herramientas
Cuando en el ngulo inferior derecho de una herramienta del panel Herramientas
aparece un tringulo pequeo, indica que la herramienta forma parte de un grupo. Por
ejemplo, la herramienta Rectngulo forma parte del grupo de herramientas bsicas de
forma, que tambin incluye las herramientas Rectngulo Redondeado, Elipse y
Polgono.








Para elegir otra herramienta de un grupo de herramientas:
1. Haga clic en el icono de la herramienta y mantenga pulsado el botn del ratn.
Aparece un men emergente con los iconos, los nombres y las teclas de mtodo
abreviado de las herramientas. La herramienta actualmente seleccionada lleva
una marca de seleccin a la izquierda del nombre.
2. Arrastre el puntero para resaltar la herramienta que desee y suelte el botn del ratn.
La herramienta aparece en el panel Herramientas y sus opciones se indican en
el Inspector de propiedades.
b) Uso de los paneles
Los paneles son controles flotantes que ayudan a modificar aspectos de elementos
u objetos seleccionados en el documento. Con los paneles se puede trabajar en
fotogramas, capas, smbolos, muestras de color y otros. Los paneles pueden
arrastrarse por separado, por lo que es posible agrupar los paneles en funcin de las
necesidades propias.
El Mezclador de colores y el Panel de muestras administran la paleta de colores del
documento actual.
Pgina 6
Curso de Fireworks Entorno de trabajo
Los paneles Capas y Fotogramas permiten organizar la estructura de un documento
y contienen opciones destinadas a crear, eliminar y manipular capas y
fotogramas. El panel Fotogramas incluye opciones para crear animaciones.
El panel Informacin proporciona datos sobre las
dimensiones de los objetos seleccionados y las
coordenadas del puntero conforme se mueve
por el lienzo.
El panel Comportamientos permite controlar los
comportamientos, que determinan la reaccin
que se produce en las zonas interactivas o las
divisiones ante el movimiento del ratn.
El panel Historial incluye una lista de los ltimos
comandos utilizados, lo que permite deshacerlos
y repetirlos rpidamente. Adems, es posible
seleccionar varias acciones y despus
guardarlas y volver a usarlas como comandos.
El panel Biblioteca contiene smbolos grficos, de
botn y de animacin. Es fcil arrastrar
instancias de estos smbolos desde el panel Biblioteca al documento. Tambin
es posible realizar cambios globales en todas las instancias modificando
solamente el smbolo.
El panel Optimizar permite gestionar los parmetros que controlan el tamao de
objeto y el tipo de archivo y trabajar con la paleta de colores del archivo o la
divisin que vaya a exportarse.
El panel Estilos permite almacenar y volver a utilizar combinaciones de
caractersticas de objetos o elegir un estilo entre los almacenados.
El panel URL permite crear bibliotecas que contengan valores URL utilizados con
frecuencia.
El panel Buscar y reemplazar permite buscar y reemplazar elementos como texto,
valores URL, fuentes y colores en uno o varios documentos.
El panel Historial del proyecto ayuda a llevar un seguimiento y a controlar los
cambios introducidos en varios archivos cuando se utiliza Buscar y reemplazar o
en procesos por lotes.
El panel Respuestas es un recurso nuevo para descargar dinmicamente una
amplia gama de informacin til del sitio web de Macromedia. El panel tiene
Pgina 7
Curso de Fireworks Entorno de trabajo
funciones de bsqueda por claves para hallar en la web informacin de diversas
fuentes.
b.1) Uso del men de opciones de un panel o grupo de paneles
Cada panel y grupo de paneles tiene un men de opciones que indica las opciones propias del panel
o grupo de paneles activo. En el Inspector de propiedades tambin hay un men de opciones.












Para elegir una opcin en el men de opciones de un panel o grupo de paneles:
1. Haga clic en el icono del men de opciones del ngulo superior derecho del panel o grupo de paneles para
abrir el men.
2. Haga clic en la opcin que desee del men.
c) Uso de los mens contextuales
Los mens contextuales permiten acceder con rapidez a determinados comandos asociados a la
seleccin actual.

















Para utilizar un men contextual:
Haga clic con el botn derecho del ratn sobre el elemento seleccionado en la ventana
de documento.
Pgina 8
Curso de Fireworks Dibujo de mapa de bits
2.Banner, fondos... .Dibujo en mapa de bits.
Antes de trabajar con las herramientas de dibujo en mapa de bits es necesario
conocer como crear un nuevo documento, ver las herramientas de seleccin y como
importar imgenes.
Documento nuevo
1. Elija Archivo >Nuevo.
Se abre el cuadro de dilogo Nuevo documento




2. Introduzca los valores de ancho y de alto del lienzo en pxeles, centmetros o pulgadas.
3. Seleccione el color del lienzo , y despus haga clic en Aceptar.
Para crear un documento nuevo con el mismo tamao que un objeto del Portapapeles:
1. Copie un objeto en el Portapapeles de:
o Otro documento de Fireworks
o Un navegador web
o Cualquier otro programa
2. Elija Archivo >Nuevo.
Se abre el cuadro de dilogo Nuevo documento con la altura y anchura del
objeto situado en el Portapapeles.
3. Ajuste la resolucin y el color del lienzo y haga clic en Aceptar.
4. Elija Editar >Pegar para pegar el objeto del Portapapeles en el documento nuevo.

Pgina 9
Curso de Fireworks Dibujo de mapa de bits
Importar una imagen
1. Elija Archivo >Importar y desplcese a la carpeta donde tenga la imagen.
2. Seleccione el archivo de imagen y haga clic en Abrir.
3. Coloque el puntero de insercin en el lienzo y haga clic.

La imagen aparece seleccionada en el lienzo.
4. Haga clic en cualquier punto externo a la imagen seleccionada para anular su seleccin.
Adquirir una imagen del escner
1. Conecte el escner.
2. Elija Archivo >Explorar y seleccione el mdulo TWAIN.
3. Siga las instrucciones para aplicar la configuracin que desee.
La imagen importada se abre en un documento nuevo de Fireworks
Seleccin de objetos
Para manipular los objetos del lienzo, primero es preciso seleccionarlos. Esta
regla es vlida para objetos vectoriales, trazados, puntos, bloques de texto, palabras,
letras, divisiones o zonas interactivas, instancias y objetos de mapa de bits.

La herramienta Puntero se utiliza para seleccionar objetos al hacer clic en ellos o
arrastrar el puntero para crear un rea de seleccin a su alrededor.

La herramienta Subseleccin selecciona un solo objeto de un grupo o los puntos de un
objeto vectorial.

La herramienta Seleccionar detrs selecciona un objeto situado detrs de otro.

La herramienta Exportar rea selecciona un rea para exportarla en un archivo aparte.
MAPA DE BITS
Los mapas de bits son imgenes compuestas de pequeos cuadrados de color
denominados pxeles que crean una imagen. Algunos ejemplos de mapas de bits son
fotografas, imgenes tomadas con un escner y elementos grficos creados con
programas de pintura.
Pgina 10
Curso de Fireworks Dibujo de mapa de bits
Seleccin de pxeles: Es posible editar los pxeles de todo un lienzo o elegir
una de las herramientas de seleccin para limitar la edicin a un rea determinada de
la imagen:

La herramienta Recuadro selecciona un rea rectangular de pxeles de la imagen.

La herramienta Recuadro oval selecciona un rea elptica de pxeles de la imagen.

La herramienta Lazo selecciona un rea de pxeles de estilo libre en la imagen.

La herramienta Lazo polgono selecciona un rea de pxeles de estilo libre y bordes
rectos en la imagen.

La herramienta Varita mgica selecciona un rea de pxeles de color similar en la
imagen.

Una vez dibujado el recuadro de seleccin, es posible desplazarlo, aadirle
elementos o basar otra seleccin en l. Los pxeles del interior de la seleccin pueden
editarse, eliminarse y filtrarse sin afectar a los pxeles externos a la seleccin.

Para seleccionar un rea de pxeles rectangular u ovalada:
1. Elija la herramienta Recuadro o Recuadro oval.
2. Defina las opciones Estilo y Borde en el Inspector de propiedades.
3. Arrastre el puntero para trazar un recuadro que defina la seleccin de pxeles.



Mantenga pulsada la tecla Mays mientras arrastra la herramienta Recuadro o Recuadro oval para trazar un recuadro
cuadrado o circular. Para dibujar un recuadro desde su punto central, anule la seleccin de los dems recuadros activos
y despus mantenga pulsada la tecla Alt.




Pgina 11
Curso de Fireworks Dibujo de mapa de bits
Para seleccionar un rea de pxeles de estilo libre:
1. Elija la herramienta Lazo.
2. Elija una opcin de borde en el Inspector de propiedades.
3. Arrastre el puntero alrededor de los pxeles que desee seleccionar.


Para seleccionar un rea poligonal de pxeles:
1. Elija la herramienta Lazo polgono.
2. Elija una opcin de borde en el Inspector de propiedades.
3. Haga clic para trazar puntos por el permetro del objeto o el rea para crear el contorno de
la seleccin.

Mantenga pulsada la tecla Mays para restringir los segmentos de la herramienta Lazo poligonal a incrementos de 45
grados.
4. Siga uno de estos procedimientos para cerrar el polgono:
o Haga clic en el punto inicial.
o Haga doble clic en el espacio de trabajo.
Eliminacin de un recuadro de seleccin
Los recuadros de seleccin se pueden eliminar sin que el documento se vea
afectado.
Para eliminar un recuadro, siga uno de estos procedimientos:
Dibuje otro recuadro.
Pgina 12
Curso de Fireworks Dibujo de mapa de bits
Haga clic fuera de la seleccin actual con una herramienta Recuadro o Lazo.
Pulse la tecla Esc.
Elija Seleccionar >Anular seleccin.
Transformacin y distorsin de objetos seleccionados
Es posible transformar un objeto o grupo seleccionado, o una seleccin de pxeles, con las
herramientas Escala, Inclinar y Distorsin:

Escala aumenta o reduce un objeto.

Inclinar inclina un objeto a lo largo del eje especificado.

Distorsin desplaza los lados o los ngulos de un objeto en la direccin en que se
arrastra el tirador de seleccin estando la herramienta activa. Esto resulta til para
crear un aspecto tridimensional.
Cuando se elige una herramienta de transformacin o un comando del men
Transformar, alrededor de los objetos seleccionados aparecen tiradores de objetos



Obj eto girado, con escala, inclinado, distorsionado y volteado vertical y horizontalmente
Supresin de objetos de mapa de bits
La herramienta Borrador sirve para eliminar pxeles, es posible cambiar su tamao y su
aspecto en el cuadro de dilogo Preferencias.

Para eliminar pxeles de un objeto de mapa de bits seleccionado o una seleccin de pxeles:
1. Elija la herramienta Borrador.
2. En el Inspector de propiedades, elija forma cuadrada o redonda para el borrador.
3. Arrastre el deslizador Borde para ajustar la suavidad del borde del borrador.
4. Arrastre el deslizador Tamao para ajustar el tamao del borrador.
5. Arrastre el deslizador Opacidad del borrador para ajustar el grado de opacidad.
6. Arrastre la herramienta Borrador por los pxeles que desee suprimir.
Pgina 13
Curso de Fireworks Dibujo de mapa de bits
Retoque de mapas de bits
Permiten modificar el tamao de la imagen, reducir o perfilar su enfoque o copiar
una parte de ella y estamparla en otra rea.

La herramienta Sello permite copiar o clonar un rea de una imagen en otra.

La herramienta Desenfocar reduce el enfoque de las reas seleccionadas de una
imagen.

La herramienta Manchar empuja en la imagen el color elegido en la direccin de
arrastre.

La herramienta Perfilar mejora la nitidez de determinadas reas de una imagen.

La herramienta Aclarar ilumina partes de una imagen.

La herramienta Oscurecer disminuye la luz de partes de una imagen.

Pgina 14
Curso de Fireworks Dibujo de mapa de bits
Dibujo de objetos de mapa de bits
La herramienta Lpiz puede utilizarse para dibujar lneas rectas de un pxel, de estilo libre o fijo,
del mismo modo que se utilizara un lpiz real para dibujar lneas.
1. Elija la herramienta Lpiz.

2. Ajuste las opciones de la herramienta en el Inspector de propiedades:
Suavizado suaviza los bordes de las lneas que se dibujen.
Borrado automtico aplica el color de relleno cuando se hace clic con la herramienta Lpiz en
el color del trazo.
Preservar transparencia limita el uso de la herramienta Lpiz a dibujar nicamente en los
pxeles existentes y lo impide en las reas transparentes de la imagen.
3. Para dibujar, arrastre el ratn. Para restringir el trazado a una lnea vertical, horizontal o
diagonal, mantenga pulsada la tecla Mays mientras arrastra el ratn.
Pintura de objetos de mapa de bits
Herramienta Pincel:
1. Elija la herramienta Pincel.
2. Defina los atributos del trazo en el Inspector de propiedades.
3. Arrastre el puntero para pintar.
Es posible controlar totalmente cada caracterstica del pincel, como la cantidad de tinta, el tamao y forma de la punta, la
textura, el efecto de los bordes y el aspecto.
Elija en el Inspector de propiedades la categora del trazo.
Haga clic en Opciones del trazo. Aparece la ventana siguiente

Elija Avanzada y podremos fijar todas las propiedades y guardarlo como un trazo propio, o
aplicarlo a un trazo ya dibujado.







Pgina 15
Curso de Fireworks Dibujo de mapa de bits
Herramienta Cubo de pintura: puede utilizarse para cambiar el color de los pxeles seleccionados
por el color del cuadro de color de relleno.
1. Elija la herramienta Cubo de pintura.

2. Elija un color en el cuadro de color de relleno.
3. Haga clic en la imagen.
Herramienta Degradado: se rellenan objetos de mapa de bits o vectoriales con una combinacin de
colores y motivos ajustables
1. Realice la seleccin.
2. Elija la herramienta Degradado.

3. Defina los atributos de relleno en el Inspector de propiedades.
4. Haga clic en la seleccin de pxeles para aplicar el relleno.
Pgina 16
Curso de Fireworks Ejemplos de dibujo en mapa de bits
Aplicacin 1: Edicin de un logotipo.
1. Abrir nuevo documento tamao 300 x 250 pxeles.
2. Con la herramienta Recuadro hacer un rea rectangular de 110 x 105.

3. Con la herramienta cubo de pintura , elegir color FF9900 y aplicar.

4. Seleccionar el rea con Subseleccin y eliminar las reas no necesarias con el
borrador . Proceso:
a) Hacer un rea rectangular y girar para cortar la esquina.
b) Con borrador cuadrado y tecla mayscula pulsada elimina las zonas
rectas.
c) Con borrador circular elimina el resto.




5. Crear un rea con Herramienta Recuadro oval . Escalar, girar y colocar




6. Crear un rea con Herramienta Recuadro oval encima de la anterior. Pulsar botn
derecho > Edicin > Cortar. Repetir proceso para crear rea circular.



Pgina 17
Curso de Fireworks Ejemplos de dibujo en mapa de bits
7. Seleccionar cada elemento creado con herramienta Subseleccin. En Inspector de
propiedades > Efectos > Eye Candy 4000LE > Bevel Boss. Modificar los valores si se
desea.




8. Seleccionar cada elemento creado con herramienta Subseleccin. En Inspector de
propiedades > Efectos > Sombrear e iluminar > Sombra.





Aplicacin 2 : modificar y aplicar efectos a una imagen.

Se va a modificar la imagen de un automvil antiguo. Importar la imagen.
1. Elegir Archivo >Importar
2. Seleccionar el archivo car.jpg y haga clic en Abrir.



La imagen aparece seleccionada en el lienzo.
3. Hacer clic en cualquier punto externo a la imagen seleccionada para anular su seleccin
Ahora selecciona los pxeles que componen el coche de la imagen importada, copia y
pega como un objeto nuevo.
1. Elegir la herramienta Zoom en la seccin Ver del panel Herramientas.

2. Hacer clic una vez sobre la imagen.


Pgina 18
Curso de Fireworks Ejemplos de dibujo en mapa de bits
La imagen se ampla al 150%. La ampliacin permite ver y controlar mejor lo que
se selecciona.
3. Hacer clic y mantener pulsado el botn del ratn sobre la herramienta Lazo de la seccin
Mapa de bits del panel Herramientas. Elegir la herramienta Lazo polgono en el men
emergente.



La herramienta Lazo polgono permite seleccionar pxeles con varias lneas
rectas. Es la herramienta con la que va a seleccionar los pxeles que componen
la imagen del coche.
4. En el Inspector de propiedades, ajusta la opcin Borde en Suavizado.
5. Hacer clic con el puntero Lazo polgono en el borde superior del coche y sigue haciendo
clic a lo largo del borde para continuar con la seleccin.






6. Finalizar la seleccin colocando el puntero en el punto inicial. J unto al puntero Lazo
polgono aparece un pequeo cuadrado gris para indicar que la seleccin est a punto de
finalizar. Haga clic para finalizar la seleccin.




Alrededor de los pxeles seleccionados aparece el borde de un recuadro.
7. Elige Editar >Copiar.
Pgina 19
Curso de Fireworks Ejemplos de dibujo en mapa de bits
La seleccin se copia en el Portapapeles.
8. Elige Editar >Pegar.
La imagen del coche se pega en el documento como un nuevo objeto de mapa
de bits.
9. Elige la herramienta Puntero y haz doble clic en cualquier punto fuera del mapa de bits
para anular su seleccin.
10. Hacer clic en el men emergente Establecer nivel de aumento, situado en la parte inferior
de la ventana de documento, y restablezca la vista en 100%.
Adicin y modificacin de efectos automticos
Ahora se aplican efectos automticos a la imagen original de mapa de bits. Se
cambiar el matiz y la saturacin de la imagen y la desenfocaremos.
1. Hacer clic en cualquier punto de la imagen del desierto (tener cuidado de no hacer clic
sobre el coche).

2. En el Inspector de propiedades, hacer clic en el botn Aadir efectos (el que tiene el
signo ms (+)).


3. Elige Ajustar color >Matiz/Saturacin en el men emergente de efectos.





Se abre el cuadro de dilogo Matiz/Saturacin.
4. Elige la opcin Colorear y haz clic en Aceptar.
La imagen se colorea en el lienzo y el efecto se aade a la lista de efectos automticos del
Inspector de propiedades. Los efectos automticos pueden modificarse; adems, es posible
aadir efectos a la lista, eliminar efectos o modificarlos.


Pgina 20
Curso de Fireworks Ejemplos de dibujo en mapa de bits
5. Hacer doble clic en el efecto Matiz/Saturacin para modificarlo.
Sugerencia: Tambin puede hacer clic en el icono de informacin que figura junto al
efecto.

Vuelve a aparecer el cuadro de dilogo Matiz/Saturacin.
6. Cambia el matiz a 25 y la saturacin a 20, y despus haz clic en Aceptar.
Los niveles de matiz y saturacin han cambiado para mostrar un tono sepia,
como si fuera una fotografa antigua.
7. Hacer clic de nuevo en el botn Aadir efectos para aadir otro efecto automtico.
8. Elige Desenfocar >Desenfocar ms en el men emergente de efectos.
Los pxeles del mapa de bits seleccionado se desenfocan y el nuevo efecto se
aade a la lista de efectos automticos del Inspector de propiedades.
Fusin de mapas de bits
Despus de aplicar efectos automticos a la imagen de fondo, vamos a fusionarla con
la imagen del coche en escala de grises para crear un solo mapa de bits.
1. Si el panel Capas est minimizado o no est visible, haz clic en su flecha de ampliacin o
elija Ventana >Capas.




2. Hacer clic en la miniatura del coche en escala de grises que aparece en el panel Capas.
3. Con la imagen del coche seleccionada, haz clic en el icono del men emergente de
opciones situado en el ngulo superior derecho del panel Capas.






Pgina 21
Curso de Fireworks Ejemplos de dibujo en mapa de bits
4. Elige Fusionar con inferior.
En el panel Capas, los dos objetos de mapa de bits se fusionan en un solo mapa
de bits.
En el Inspector de propiedades ya no hay efectos en la lista de efectos
automticos. Esto se debe a que Fusionar con inferior combina los pxeles de
todos los mapas de bits e impide su modificacin por separado. Los efectos
automticos aplicados a un objeto o mapa de bits ya no pueden modificarse tras
fusionarlo con otro objeto inferior de mapa de bits.
Aplicacin de una mscara
En primer lugar se va a aplicar una mscara de mapa de bits blanca y vaca a la
imagen del coche. Una mscara blanca muestra el objeto o imagen seleccionados,
mientras que una mscara de pxeles negros los oculta.
Tambin se va a pintar la mscara para que la imagen del coche parezca
desvanecerse en el fondo.
1. Con la herramienta Puntero, seleccione la imagen de mapa de bits.
2. Haga clic en el botn Aadir mscara situado en la parte inferior del panel Capas.

A la imagen seleccionada se le aade una mscara transparente vaca. Puede comprobar que
la mscara se ha aadido porque su miniatura se incorpora al panel Capas. El resaltado
amarillo alrededor de la miniatura de la mscara indica que est seleccionada.









Edicin de la mscara
Ahora se va a dar a la imagen de mapa de bits un aspecto transparente al aadir un
relleno degradado a la mscara.
Pgina 22
Curso de Fireworks Ejemplos de dibujo en mapa de bits
1. Con la miniatura de la mscara seleccionada en el panel Capas, hacer clic y mantener
pulsado el botn del ratn sobre la herramienta Cubo de pintura de la seccin Mapa de
bits del panel Herramientas. Elige la herramienta Degradado en el men emergente.


2. Hacer clic en el cuadro de color de relleno en el Inspector de propiedades.
Se abre la ventana emergente Editar degradado.
3. Elige Blanco, negro en el men emergente Preestablecido.
El degradado y las muestras de color cambian para reflejar el nuevo ajuste. Las
muestras de color situadas inmediatamente debajo del degradado permiten
modificar los colores de ste.




4. Arrastra la muestra de color izquierda (blanco) aproximadamente 1/4 de la distancia
hacia la derecha para ajustar el degradado.
5. Haz clic fuera de la ventana emergente Editar degradado para cerrarla.
6. En el lienzo, arrastra el puntero Degradado por la imagen de mapa de bits como se
muestra en la siguiente ilustracin. La pantalla muestra el efecto, lo que permite definir
mejor el ngulo y la distancia en que debe aplicarse el degradado.




7. Suelta el botn del ratn.
La mscara cambia segn el relleno degradado creado. La mscara confiere a la
imagen del coche el aspecto de ir desvanecindose.



Pgina 23
Curso de Fireworks Dibujo vectorial y texto
2.Banner, fondos... .Dibujo vectorial.
Las imgenes vectoriales son independientes de la resolucin, lo que significa
que es posible desplazar, cambiar el tamao, alterar la forma y modificar el color de
una imagen vectorial, as como visualizarla en dispositivos de salida de diferente
resolucin, sin que cambie la calidad de su aspecto.
Dibujo de lneas, rectngulos y elipses
Para dibujar una lnea, un rectngulo o una elipse:
1. Elija la herramienta Lnea, Rectngulo o Elipse.
2. Si lo desea, establezca los atributos de trazo y relleno en el Inspector de propiedades.
3. Arrastre el ratn por el lienzo para dibujar la forma.
En el caso de la herramienta Lnea, arrastre con la tecla Mays pulsada para restringir el dibujo
de lneas a incrementos de 45 grados.
Con la herramienta Rectngulo o Elipse, mantenga pulsada la tecla Mays mientras arrastra el
ratn para que la forma sea un cuadrado o un crculo.
Para dibujar una lnea, un rectngulo o una elipse a partir de un punto central concreto:
Site el cursor en el que ser el punto central y mantenga pulsada la tecla Alt mientras arrastra
la herramienta de dibujo.
Para cambiar el tamao de una lnea, un rectngulo o una elipse seleccionadas, realice una de estas acciones:
Introduzca nuevos valores de anchura (An.) o altura (Al.) en el Inspector de propiedades o en el panel
Informacin.
Elija la herramienta Escala en la seccin Seleccionar del panel Herramientas y arrastre un tirador de
transformacin de una esquina. As el tamao del objeto cambia proporcionalmente.
En un rectngulo, arrastre un punto de una esquina.
Para dibujar un rectngulo con esquinas redondeadas:
1. Elija la herramienta Rectngulo redondeado, situada en el men emergente de la
herramienta Rectngulo.
2. Arrastre el ratn por el lienzo para dibujar el rectngulo.
Para redondear las esquinas de un rectngulo seleccionado:
Introduzca un valor entre 0 y 100 en el cuadro Redondez del rectngulo del Inspector de
propiedades y pulse Intro, o bien arrastre el deslizador emergente.


Pgina 24
Curso de Fireworks Dibujo vectorial y texto
Dibujo de polgonos
Con la herramienta Polgono se puede dibujar cualquier polgono equiltero, desde un
tringulo hasta un polgono de 360 lados.




Para dibujar un polgono:
1. Elija la herramienta Polgono
2. En el Inspector de propiedades, realice una de las acciones siguientes para especificar el
nmero de lados del polgono:
o Utilice el deslizador emergente Lados para elegir entre 3 y 25 lados.
o Introduzca un nmero entre 3 y 360 en el cuadro de texto Lados.
3. Arrastre el ratn para trazar el polgono.
Para restringir la orientacin de un polgono a incrementos de 45 grados, mantenga pulsada la tecla Mays
mientras dibuja. La herramienta Polgono dibuja siempre respecto a un punto central.
Dibujo de estrellas
Con la opcin Estrella de la herramienta Polgono, se pueden dibujar estrellas con entre
3 y 360 puntas y toda la gama de ngulos de punta.
Para dibujar una estrella:
1. Elija la herramienta Polgono.
2. En el Inspector de propiedades, elija De estrella en el men emergente Forma.

3. Introduzca el nmero de puntas de la estrella en el cuadro de texto Lados.
4. Elija Automtico o introduzca un valor en el cuadro de texto ngulo. Los valores ms
cercanos a 0 determinan puntas ms largas y estrechas; por el contrario, cuanto ms
prximos a 100, las puntas son ms cortas y romas.

5. Arrastre el ratn por el lienzo para dibujar la estrella.
Para restringir la orientacin de una estrella a incrementos de 45 grados,
mantenga pulsada la tecla Mays mientras arrastra el ratn.
Dibujo de trazados de estilo libre
Con la herramienta Vector, se puede dibujar casi del mismo modo que se hara con un rotulador o una
cera.






Pgina 25
Curso de Fireworks Dibujo vectorial y texto
Para dibujar un trazado vectorial de estilo libre:
1. Elija la herramienta Trazado de vectores
2. Si lo desea, establezca los atributos de trazo y relleno en el Inspector de propiedades.
3. Arrastre el ratn por el lienzo para dibujar. Para restringir el trazado a una lnea vertical u
horizontal, mantenga pulsada la tecla Mays mientras arrastra el ratn.
4. Suelte el botn del ratn para terminar el trazado. Para cerrar el trazado, suelte el botn
del ratn cuando el cursor haya regresado al punto de inicio del trazado.








Pintura editada mediante el desplazamiento de puntos vectoriales

Para dibujar un trazado con segmentos de lnea recta:
1. Elija la herramienta Pluma.
2. Si lo desea, elija Editar >Preferencias y active cualquiera de las opciones siguientes en la
ficha Edicin del cuadro de dilogo Preferencias; a continuacin, haga clic en Aceptar:
o Mostrar vista previa de la pluma muestra una presentacin preliminar del segmento de lnea que
se obtendra con el clic siguiente.
o Mostrar puntos slidos muestra puntos slidos mientras se dibuja.
3. Haga clic en el lienzo para colocar el primer punto de esquina.
4. Desplace el cursor y haga clic para colocar el siguiente punto. Un segmento de lnea recta
une los dos puntos.
5. Contine trazando puntos. Segmentos rectos unirn el espacio entre ellos.
6. Realice una de las siguientes acciones para terminar el trazado, ya sea abierto o cerrado:
o Haga doble clic en el ltimo punto para terminar el trazado como trazado abierto.
o Elija otra herramienta para terminarlo como trazado abierto.
Nota: Cuando se elige cualquier herramienta de seleccin o de vector que no
sea la de Texto y, a continuacin, se vuelve a la herramienta Pluma, el
siguiente clic contina dibujando el objeto.
o Para cerrar el trazado haga clic en el primer punto que dibuj. Los puntos inicial y final de un
trazado cerrado coinciden.






Pgina 26
Curso de Fireworks Dibujo vectorial y texto
Dibujo de segmentos de trazado curvos
Para dibujar segmentos de trazado curvos, basta con hacer clic y arrastrar el ratn
conforme se trazan los puntos. Al dibujar, el punto actual muestra tiradores de punto.


Para dibujar un objeto con segmentos curvos:
Tiradores
1. Elija la herramienta Pluma.
2. Haga clic para colocar el primer punto de esquina.
3. Sitese en el punto siguiente, haga clic y arrastre para generar un punto de curva. Cada
vez que se hace clic y se arrastra, Fireworks extiende el segmento de lnea hasta el nuevo
punto.



4. Contine trazando puntos. Si hace clic y arrastra un punto nuevo, se produce un punto de
curva; si slo hace clic, se crea un punto de esquina.
Sugerencia: Es posible cambiar temporalmente a la herramienta Subseleccin para modificar la posicin
de los puntos y la forma de las curvas mientras se dibuja. Para ello, pulse la tecla Control mientras
arrastra un punto o un tirador de punto con la herramienta Pluma.
5. Realice una de las siguientes acciones para terminar el trazado, ya sea abierto o cerrado:
o Haga doble clic en el ltimo punto para terminar el trazado como trazado abierto.
o Elija otra herramienta para terminarlo como trazado abierto. Cuando se eligen
determinadas herramientas y, a continuacin, se vuelve a la herramienta Pluma, el
siguiente clic contina dibujando el objeto.
o Para cerrar un trazado, haga clic en el primer punto que traz. Los puntos inicial y
final de un trazado cerrado coinciden.
Ajuste de la forma de un segmento de trazado recto
Moviendo los puntos de un segmento de trazado recto, es posible alargarlo, acortarlo o cambiar su
posicin.
Para modificar un segmento de trazado recto:
1. Seleccione el trazado con la herramienta Puntero o Subseleccin.
2. Haga clic en un punto con la herramienta Subseleccin para seleccionarlo.
Los puntos de esquina seleccionados aparecen como cuadrados azules slidos.
3. Arrastre el punto o utilice las teclas de flecha para moverlo a una nueva posicin.

Pgina 27
Curso de Fireworks Dibujo vectorial y texto
Ajuste de la forma de un segmento de trazado curvo
La forma de un objeto vectorial se puede cambiar arrastrando sus tiradores de punto
con la herramienta Subseleccin. Dichos tiradores determinan el grado de curvatura
entre los puntos fijos. Estas curvas se denominan curvas Bezier.
Para editar la curva Bezier de un segmento de trazado:

1. Seleccione el trazado con la herramienta Puntero o Subseleccin.
2. Haga clic en un punto de curva con la herramienta Subseleccin para seleccionarlo.
Un punto de curva seleccionado aparece como un crculo azul slido. Los tiradores de punto se
proyectan a partir del punto.
3. Arrastre los tiradores a otra posicin. Para restringir el movimiento de los
tiradores a ngulos de 45 grados, pulse la tecla Mays mientras arrastra.
La presentacin preliminar del trazado azul muestra dnde se dibujar el nuevo trazado si se
suelta el botn del ratn.





Por ejemplo, si arrastra el tirador de punto de la izquierda hacia abajo, el de la derecha subir.
Mantenga pulsada la tecla Alt mientras arrastra un tirador para moverlo de forma independiente.


Plegado y remodelado de objetos vectoriales
La herramienta Estilo libre permite doblar y remodelar objetos vectoriales directamente,
sin necesidad de manipular sus puntos. Es posible empujar o estirar cualquier parte de
un trazado con independencia de dnde se encuentren sus puntos.





La herramienta Estilo libre estira un segmento de trazado

Pgina 28
Curso de Fireworks Dibujo vectorial y texto




La herramienta Estilo libre empuja un segmento del trazado; el nuevo trazado refleja la deformacin
A medida que mueve el ratn por un trazado seleccionado, el puntero cambia al de
ampliacin o reduccin, segn su posicin relativa al trazado.
Este
puntero
Indica que

La herramienta Estilo libre est utilizndose.

La herramienta Estilo libre est utilizndose y el puntero de ampliacin est preparado para tirar
del trazado seleccionado.

La herramienta Estilo libre est utilizndose y el puntero est tirando del trazado seleccionado.

La herramienta Estilo libre est utilizndose y el puntero de reduccin est activo.

La herramienta Remodelar rea est en uso y el puntero est activo. El rea comprendida entre el
crculo interno y el crculo externo representa la intensidad reducida.
Cuando el puntero est dentro, el trazado se puede ampliar. Cuando no est dentro, se
puede reducir. El tamao del puntero de reduccin o ampliacin puede cambiarse.
Para ampliar un trazado seleccionado:
1. Elija la herramienta Estilo libre.
2. Site el cursor sobre el trazado seleccionado.
El cursor cambia al puntero de ampliacin.
3. Arrastre el trazado.
Para reducir un trazado seleccionado:
1. Elija la herramienta Estilo libre.
El cursor cambia al puntero de ampliacin o de reduccin.
2. Separe ligeramente el puntero del trazado.
3. Arrastre hacia el trazado para reducirlo. Desplace el cursor para cambiar la forma del
trazado seleccionado.
Para cambiar el tamao del cursor de reduccin, siga una de estas indicaciones:
Mientras mantiene pulsado el botn del ratn, pulse 2 o la tecla de flecha derecha para
aumentar la anchura del cursor.
Mientras mantiene pulsado el botn del ratn, pulse 1 o la tecla de flecha izquierda para
reducir la anchura del cursor.
Para establecer el tamao del cursor y la longitud del segmento afectado, anule la
seleccin de todos los objetos en el documento e introduzca un valor de 1 a 500 en el
Pgina 29
Curso de Fireworks Dibujo vectorial y texto
cuadro de texto Tamao del Inspector de propiedades. Este valor indica el tamao en
pxeles del cursor.
Corte de trazados en varios objetos distintos
La herramienta Cuchilla permite dividir un trazado en dos o ms trazados.





Para cortar un trazado seleccionado:
1. Elija la herramienta Cuchilla.
2. Siga uno de estos procedimientos:
o Arrastre el cursor a travs del trazado.
o Haga clic en el trazado.
3. Anule la seleccin del trazado.
Combinacin de objetos de trazado
Varios objetos de trazado se pueden combinar en un solo objeto.
Para crear un trazado continuo a partir de dos abiertos:
1. Elija la herramienta Subseleccin.
2. Seleccione dos puntos finales en dos trazados abiertos.
3. Elija Modificar >Combinar trazados >Unir.
Para crear un trazado compuesto:
1. Seleccione dos o ms trazados abiertos o cerrados.
2. Elija Modificar >Combinar trazados >Unir.
Para dividir un trazado compuesto:
1. Seleccione el trazado compuesto.
2. Elija Modificar >Combinar trazados >Dividir.
Para combinar trazados cerrados seleccionados como un solo trazado que abarque el rea completa de los originales:
Elija Modificar > Combinar trazados > Unin. El trazado resultante toma los atributos de trazo y relleno
del objeto situado ms atrs.
Pgina 30
Curso de Fireworks Dibujo vectorial y texto
Creacin de un objeto a partir de la interseccin de otros objetos
Con el comando Intersectar, es posible crear un objeto a partir de la interseccin de
dos o ms objetos.








Para crear un trazado cerrado que abarque el rea comn a todos los trazados cerrados seleccionados:
Elija Modificar > Combinar trazados > Intersectar. El trazado resultante toma los
atributos de trazo y relleno del objeto situado ms atrs.
Eliminacin de porciones de un objeto de trazado
Se pueden eliminar las partes de un objeto de trazado seleccionado que queden
solapadas por otro objeto de trazado seleccionado que est situado delante.





Para eliminar porciones de un objeto de trazado:
1. Seleccione el objeto de trazado que define el rea que desea eliminar.
2. Elija Modificar >Organizar >Traer al frente.
3. Mantenga pulsada la tecla Mays y aada a la seleccin el objeto de trazado del que
desea eliminar partes.
4. Elija Modificar >Combinar trazados >Perforar.
Los atributos de trazo y de relleno no se modifican.
Recorte de un trazado
Es posible recortar un trazado utilizando la forma de otro. El trazado situado ms
adelante define la forma del rea recortada.






Para recortar un trazado seleccionado:
1. Seleccione el objeto de trazado que define el rea que va a recortar.
Pgina 31
Curso de Fireworks Dibujo vectorial y texto
2. Elija Modificar >Organizar >Traer al frente.
3. Mantenga pulsada Mays y aada a la seleccin el objeto de trazado que va a recortar.
4. Elija Modificar >Combinar trazados >Recortar.
El objeto de trazado resultante toma los atributos de trazo y relleno del objeto situado ms atrs.
Aplicacin de efectos automticos
Mediante el Inspector de propiedades es posible aplicar uno o ms efectos automticos
a los objetos seleccionados.









Men emergente Efectos en el Inspector de propiedades
Aplicacin de bordes biselados
La aplicacin de un borde biselado a un objeto le proporciona el aspecto de un botn
en relieve. Es posible crear un bisel interior o exterior.



Rectngulo con bisel interior y con bisel exterior
Para aplicar un borde biselado a un objeto seleccionado:
1. Haga clic en el botn Aadir efectos del Inspector de propiedades y elija una opcin de
bisel en el men emergente:
o Bisel y Relieve >Bisel interior
o Bisel y Relieve >Bisel exterior
2. Edite la configuracin del efecto en la ventana emergente.



3. Haga clic fuera de la ventana o pulse Intro para cerrarla.

Pgina 32
Curso de Fireworks Dibujo vectorial y texto
Aplicacin de relieve
El efecto Relieve permite que una imagen, un objeto o un texto aparezcan elevados o
hundidos respecto al lienzo.





Objeto con Relieve hundido y con Relieve elevado
Para aplicar un efecto de relieve:
1. Haga clic en el botn Aadir efectos del Inspector de propiedades y elija una opcin de
relieve en el men emergente:
o Bisel y Relieve >Relieve hundido
o Bisel y Relieve >Relieve elevado
2. Edite la configuracin del efecto en la ventana emergente.
Si desea que el objeto original aparezca en el rea en relieve, seleccione Mostrar objeto.
3. Al finalizar, haga clic fuera de la ventana o pulse Intro para cerrarla.
Aplicacin de sombras y luces



Efectos Sombra, Sombra interior e Iluminado

Para aplicar una sombra o una sombra interior:
1. Haga clic en el botn Aadir efectos del Inspector de propiedades y elija una opcin de
sombra en el men emergente:
o Sombrear e iluminar >Sombra
o Sombrear e iluminar >Sombra interior
2. Edite la configuracin del efecto en la ventana emergente:
o Arrastre el control deslizante Distancia para definir la distancia de la sombra respecto al objeto.
o Haga clic en el cuadro de color para abrir la ventana emergente y defina el color de la sombra.
o Arrastre el deslizador Opacidad para definir el porcentaje de transparencia de la sombra.
o Arrastre el deslizador Suavidad para establecer la nitidez de la sombra.
o Arrastre el deslizador ngulo para definir la direccin de la sombra.
o Seleccione Slo sombra para ocultar el objeto y mostrar slo la sombra.
3. Al finalizar, haga clic fuera de la ventana o pulse Intro para cerrarla.
Para aplicar una luz:
1. Haga clic en el botn Aadir efectos del Inspector de propiedades y elija Sombrear e
iluminar >Iluminado.
2. Edite la configuracin del efecto en la ventana emergente:
o Haga clic en el cuadro de color para abrir la ventana emergente y defina el color del resplandor.
o Arrastre el deslizador Anchura para definir la anchura del resplandor.
o Arrastre el deslizador Opacidad para definir el porcentaje de transparencia del resplandor.
Pgina 33
Curso de Fireworks Dibujo vectorial y texto
o Arrastre el deslizador Suavidad para establecer la nitidez de la luz.
o Arrastre el deslizador Desplazamiento para indicar la distancia del resplandor con respecto al
objeto.
3. Al finalizar, haga clic fuera de la ventana o pulse Intro para cerrarla.
Introduccin de texto
Con la herramienta Texto y las opciones del Inspector de propiedades, es
posible introducir texto, asignarle formato y modificarlo en los grficos.





Inspector de propiedades cuando est seleccionada la herramienta Texto
Para introducir texto:
1. Elija la herramienta Texto.
2. Seleccione el color, la fuente, el tamao, el espaciado y otras caractersticas de texto.
3. Siga uno de estos procedimientos:
o Haga clic en el lugar del documento donde desea que empiece el bloque de texto.
As se crea un bloque de texto de tamao automtico.
o Arrastre el ratn para dibujar un bloque de texto. As se crea un bloque de texto
de anchura fija.
4. Escriba el texto. Para introducir un cambio de prrafo, pulse Intro.
5. Si lo desea, seleccione texto en el bloque de texto despus de escribirlo y cambie su
formato.
6. Cuando termine de introducir texto, siga una de estas indicaciones:
o Haga clic fuera del bloque de texto.
o Elija otra herramienta en el panel Herramientas.
o Pulse la tecla Esc.
Unin de texto a un trazado
Para liberar al texto de las limitaciones de los bloques rectangulares, es posible dibujar
un trazado y amoldarle texto. El texto fluye a lo largo de la forma del trazado y sigue
siendo editable.




Texto unido a un trazado que pasa a otra lnea y repite la forma del trazado


Para colocar texto en un trazado:
1. Mantenga presionada la tecla Mays mientras selecciona un bloque de texto y un trazado.
2. Elija Texto >Unir al trazado.


Pgina 34
Curso de Fireworks Dibujo vectorial y texto
Para separar texto de un trazado seleccionado:
Elija Texto > Separar del trazado.
Para editar texto amoldado a un trazado, realice una de las siguientes acciones:
Haga doble clic en el objeto de texto unido a un trazado con la herramienta Puntero o Subseleccin.
Elija la herramienta Texto y seleccione el texto que desea editar.
Para cambiar la forma del trazado:
1. Elija Texto >Separar del trazado.
2. Edite el trazado.
3. Vuelva a amoldar el texto al trazado.
Modificacin de la orientacin y direccin del texto en un trazado
El orden en que se dibuja un trazado determina la direccin del texto que se le amolda.
Por ejemplo, si dibuja un trazado de derecha a izquierda, el texto amoldado aparece
hacia atrs y boca abajo.




Pgina 35
Curso de Fireworks Ejemplo de dibujo vectorial y texto
Aplicacin 1: DISEO DE UN BANNER.

Se va crear el banner de la figura:



a) Dibujo del logotipo.

1. Abrir nuevo documento tamao 300x300 pxeles.
2. Crear una cuadrcula (30 x 30). Men Ver cuadrcula Editar cuadrcula

3. Dibujar un cuadrado (212 x 212) y girar 90. Con la Herramienta Rectngulo y pulsando
tecla Mayus, arrastra el ratn. Ajustar el ancho y alto en inspector de propiedades, si es
necesario.
Herramienta Escalar , girar el cuadrado.











4. Dibujar el circulo (50 x 50). Con la herramienta Elipse y manteniendo pulsadas las teclas
Mayus-Alt, y desde el centro del lado arrastra el ratn. Dibujar el cuadrado (42 x 42) en el
otro lado.










5. Con el puntero selecciona el cuadrado y pulsando Mayus selecciona el circulo. En
men Modificar Combinar trazados Perforar. Hacer lo mismo para los dos cuadrados.
Pgina 36
Curso de Fireworks Ejemplo de dibujo vectorial y texto











7. Dibujar elipse (An 184 ,Al 90 ; X 59,Y 151) . Con la herramienta Elipse y las teclas
Mayus-Alt desde el centro arrastra el ratn. Ajustar valores en el Inspector. Seleccionar
trazados y perforar.









8. Separamos los trazados resultantes. Seleccionar trazado Modificar Combinar trazados
Dividir. Borrar trazado no necesario.
9. Dibujar el circulo ( 40 x 40 ) y rectngulo (53x 35) exteriores y colocar.











10. Aplicar rellenos y efectos. En el Inspector de propiedades y seleccionando cada
elemento ajusta sus valores.
Figura base: Color 339966 slido, Textura lnea diagonal 2 27 %. Efecto relieve
elevado.
Circulo: Color ccccoo, Textura cuadrcula 5 50%. Efecto relieve
elevado.
Rectngulo: Color 33cc33, Textura malla 67%. Efecto relieve elevad.
11. Agrupamos todos los trazados. Men Modificar agrupar.
Escalar: Herramienta escalar tamao An 118 Al 72 en Inspector. Minimizar






Pgina 37
Curso de Fireworks Ejemplo de dibujo vectorial y texto
b) Banner.
1 Abrir nuevo documento tamao 760x 80 pxeles.

2. Dibuja el rectngulo en lado izquierdo. Con la herramienta rectngulo arrastra ratn. Ajusta
el tamao en el Inspector: An 276 X 0 ; Al 80 Y 0. Color B9FA92 . Sin lnea exterior.


3. Dibuja el rectngulo derecho ( An 484 Al 80 ; X 276 Y 0). Color : 009966 Lneal
Textura: rayado 2 30%.


4. Maximizar el documento del logotipo, copiar. Cerrar.

5. Pegar en su posicin.


6. Inserta el texto. Letra: Swiss721 Tamao: 21 Color: 006600 negrita. Separacin caracteres
88. Efecto sombra.Importar imagen de la caja de herramientas y colocar.


7. Dibujar los cuadrados pequeos (17x17). Seleccionar el cuadrado, botn derecho del ratn
Edicin Clonar. Desplazar el nuevo cuadrado pulsando las teclas flecha derecha. Repetir
tantas veces como cuadrados tenemos. A cada cuadrado asignar un tonalidad del verde.


8. Importar la imagen de las pginas y colocar.


9. Introduce los textos. Letra grande: Tipo =Swiss721 Tamao =56 Color borde=66FF66,
Suavizado ntido, Efecto =sombra.
Letra mediana: igual pero tamao 21 y sin efecto sombra. Letra pequea: tamao 12.



Pgina 38
Curso de Fireworks Ejemplo de dibujo vectorial y texto
Aplicacin 2: BOTN ( dibujo para crear un botn).



1. Abre un nuevo documento tamao 200 x 100 pxeles.
2. Con la herramienta Rectngulo Redondeado seleccionada dibuja un rectgulo.

3. Selecciona el rectngulo con el puntero y aplicar las caractersticas siguientes al Inspector de
propiedades.
An 130 Color relleno: 00FF66 slido Color borde: 006600 Tamao: 1 pxel
Al 31 Borde suavizado
Redondez: 70
Efecto>Eye Candy 4000 LE >Bevel Boss

4. Dibujar el crculo ( 44x44). Con la Herramienta Elipse y manteniendo pulsada la tecla Alt ,
traza el circulo. Haz clic fuera del trazado. Con herramienta puntero selecciona y mueve a su
sitio.

5. Selecciona el crculo y aplica las propiedades en el Inspector.
An 44 Color relleno: FFCC99 slido Color borde: 99FF00 Tamao: 1 pxel
Al 44 Borde suavizado
Efecto>Eye Candy 4000 LE >Bevel Boss

6.Dibujar el cuadrado dentro del circulo. Con la Herramienta Rectngulo y pulsando tecla
Mays arrastra el ratn. Aplicar las propiedades.
An 12 Color relleno: 006600 slido Color borde: ningno
Al 12 Borde suavizado
Efecto>Eye Candy 4000 LE >Bevel Boss
Efecto>Sombra

7. Con la herramienta Texto aplica el texto con las siguientes caractersticas:
Tipo de letra: Swiss721 Tamao: 20 Color: 003333 Negrita
Pgina 39
Curso de Fireworks Barras de navegacin
3. Botones y Barras de navegacin.
Creacin de smbolos de botn
Los botones constituyen los elementos de navegacin de una pgina web. El editor de
Fireworks tiene las caractersticas siguientes:
Puede convertir prcticamente cualquier grfico u objeto de texto en un botn.
Se puede crear un botn nuevo o convertir un objeto existente en un botn. Tambin puede importar
botones ya creados.
Un botn es un tipo especial de smbolo. Es posible arrastrar instancias suyas desde la biblioteca de
smbolos al documento.
De este modo puede cambiar el aspecto grfico de un botn y actualizar automticamente el aspecto de todas las
instancias del botn en una barra de navegacin.
Es posible editar el texto, el valor URL y el elemento destino de una instancia de botn sin afectar al resto de las
instancias del mismo botn y sin romper la relacin smbolo-instancia.
Las instancias de botn estn encapsuladas. Si arrastra una instancia de botn en el documento, se
desplazan todos los componentes y estados asociados, de modo que ya no es necesaria la complicada
edicin de varios fotogramas.
Un botn puede editarse de forma sencilla. Haga doble clic en la instancia del lienzo y podr modificarlo
en el Editor de botones o el Inspector de propiedades.
Acerca de los estados de botn
Un botn puede tener hasta cuatro estados diferentes. Cada estado representa el
aspecto del botn en respuesta a un evento del ratn:
El estado Arriba es el estado predeterminado o aspecto de reposo del botn.
El estado Sobre es el nuevo aspecto con el que aparecer el botn al mover el puntero
sobre el mismo. Este estado avisa al usuario de que al hacer clic es probable que se
produzca una accin.
El estado Abajo es a menudo una imagen del botn con el aspecto de estar
"presionado", representa el botn despus de hacer clic sobre el mismo. Este estado
de botn representa normalmente la pgina web actual en la barras de navegacin con
varios botones.
El estado Sobre y Abajo es el aspecto del botn al pasar el cursor sobre l cuando est
en el estado Abajo. Este estado de botn representa normalmente que el puntero se
encuentra en el botn correspondiente a la pgina web actual en las barras de
navegacin con varios botones.
Pgina 40
Curso de Fireworks Barras de navegacin
Creacin de un smbolo de botn
Partiendo de la imagen y el texto de un botn ya creado, vamos a convertir esta imagen
en un smbolo de botn.
1. Crear un dibujo, agrupar todos los trazados ( Ctrl-G) o Modificar >Grupo.

2. Elija Modificar >Smbolo >Convertir en smbolo.
Se abre el cuadro de dilogo Propiedades de smbolo.
3. Asignar un nombre al botn, elija Botn como tipo de smbolo y haga clic en Aceptar.

Sobre la imagen del botn aparece un crculo en el centro y a la izquierda un icono de flecha. Indica que la seleccin en el espacio
de trabajo es una instancia del smbolo recin creado. Los smbolos son como copias maestras de las imgenes. Cuando se
cambia un smbolo, todas las instancias de ese smbolo en el documento cambian automticamente. Los smbolos residen en la
biblioteca.
Creacin de estados del botn
1. Haga doble clic sobre el icono de la flecha en la instancia de botn creada.
Se abre el editor de botones con la imagen del botn abierta en el rea de trabajo.









Pgina 41
Curso de Fireworks Barras de navegacin
2. Haga clic en las fichas de la parte superior del editor de botones.
Las primeras cuatro fichas representan los estados del botn. La ltima, rea Activa, representa el rea activa del botn,
es decir, donde debe hacer clic o mover el ratn el usuario para activar los estados del botn. El rea activa tambin es
el rea intercambiada del botn, es decir, el rea que cambia con cada estado del botn.
3. Haga clic en la ficha Sobre de la parte superior del editor de botones y despus en el
botn Copiar grfico Arriba.
La imagen del botn se ha copiado desde la ficha Arriba. El estado Sobre de un botn es su aspecto cuando el puntero
pasa sobre l. Para que el usuario reciba informacin visual, se va a cambiar el color del rectngulo sobre el que aparece
el texto.
4. Seleccione el rectngulo. Cercirese de seleccionar el rectngulo y no el texto; si no est
seguro de ello, compruebe en el panel Capas qu ha seleccionado.
5. Haga clic en el cuadro de color de relleno del Inspector de propiedades y elija el color
FFCC00 (naranja)


Estado sobre del botn.
6. Haga clic en la ficha Abajo del editor de botones y despus en el botn Copiar grfico
Sobre.
La imagen del botn se copia de la ficha Sobre. El estado Abajo de un botn es su aspecto cuando el usuario hace clic
sobre l. Vamos a cambiar el color del rectngulo.
Estado abajo del botn
7. Haga clic en la ficha Sobre-Abajo del editor de botones y despus en el botn Copiar
grfico Sobre.
La imagen del botn se copia de la ficha Abajo. El estado Sobre-Abajo de un botn es el aspecto del botn al pasar el cursor sobre l cuando
est en el estado Abajo. En este caso no cambiamos el color del rectngulo
8. Haga clic en Listo en el editor de botones para aplicar los cambios al smbolo de botn.
9. Haga clic en la ficha Vista previa de la ventana de documento y compruebe los estados
del botn.
Edicin de las propiedades de smbolo
Los smbolos de botn se editan en el Editor de botones. Las propiedades que cambian una instancia al
editar su smbolo de botn son las que normalmente seran comunes entre una serie de botones
utilizados en una Bar Nav o en todo un sitio web:
Las modificaciones del aspecto grfico como el color y tipo de trazo, el color y tipo de
relleno, forma del trazado y las imgenes
Efectos automticos, opacidad o el modo de mezcla aplicado a objetos independientes
dentro del smbolo de botn
Tamao y posicin del rea activa
Comportamiento principal de un botn
Pgina 42
Curso de Fireworks Barras de navegacin
Configuracin de optimizacin y de exportacin
Vnculo URL (tambin disponible como una propiedad a nivel de instancia)
Marco destino (tambin disponible como una propiedad a nivel de instancia)
Para editar las propiedades de un botn como smbolo:
1. Siga uno de los procedimientos siguientes para abrir el botn en el Editor de botones:
o Haga doble clic en una instancia del botn en el espacio de trabajo.
o En el panel Biblioteca, haga doble clic en la vista previa del botn o en el icono
de smbolo que se encuentra junto al smbolo de botn.
2. Modifique las caractersticas grficas del botn y haga clic en Listo.
Los cambios se aplican a todas las instancias del smbolo de botn.
Edicin de las propiedades de instancia
Las propiedades de instancia se editan en el Inspector de propiedades cuando se selecciona una nica
instancia. Las propiedades de una instancia que pueden cambiar sin que afecten al smbolo asociado ni
al resto de las instancias de dicho smbolo son las que normalmente son diferentes de un botn a otro en
una serie de botones:
Un nombre de objeto de instancia, que aparece en el panel Capas y que se utiliza para
asignar nombres a las divisiones de la instancia de botn durante la exportacin
Efectos automticos, opacidad o el modo de mezcla aplicado a toda la instancia
Los caracteres de texto y su formato, como fuente, tamao, orientacin y color
Vnculo URL (tambin disponible como una propiedad a nivel de smbolo)
Texto alternativo (alt) con la descripcin de imagen
Marco destino (tambin disponible como una propiedad a nivel de smbolo)
Comportamientos adicionales asignados a una instancia mediante el panel
Comportamientos
La opcin Mostrar imagen Abajo despus de cargar del Inspector de propiedades para las
instancias de una barra de navegacin.
Para editar las propiedades de instancia de una nica instancia de smbolo de botn:
1. Seleccione la instancia de botn en el rea de trabajo.
2. Defina las propiedades en el Inspector de propiedades

Modificacin del rea activa de un smbolo de botn
El rea activa de un smbolo de botn es la zona en la que se activa la interactividad cuando un usuario
desplaza el cursor por encima o hace clic en un navegador web.
Cuando crea un smbolo de botn, Fireworks crea de forma automtica una divisin lo suficientemente
grande como para abarcar todos los estados del botn. Slo puede editar una divisin de botn en la
Pgina 43
Curso de Fireworks Barras de navegacin
ficha rea activa del Editor de botones. Cada botn slo puede tener una divisin. Si dibuja una divisin
mediante una herramienta de divisin en el rea activa, la divisin anterior se sustituye por la nueva
divisin. Puede dibujar objetos de zona interactiva en la ficha rea activa, pero slo puede editar dichas
zonas interactivas en el Editor de botones.

Para editar una divisin o zona interactiva en el rea activa del smbolo de botn:
1. Siga uno de los procedimientos siguientes para abrir un smbolo de botn en el editor de
botones:
o Haga doble clic en una instancia del botn en el espacio de trabajo.
o En el panel Biblioteca, haga doble clic en la vista previa del botn o en el icono
de smbolo que se encuentra junto al smbolo de botn.
2. Haga clic en la ficha rea activa.
3. Siga uno de estos procedimientos:
o Utilice la herramienta Puntero para mover o modificar la forma de divisin y
desplazar una gua de divisin.
o Utilice cualquiera de las herramientas de divisin o de zona interactiva para
dibujar la nueva rea activa.
Definicin del valor URL de un smbolo de botn o instancia
Un valor URL (Uniform Resource Locator) es un vnculo a otra pgina web, sitio web o punto de anclaje
en la misma pgina web. El valor URL puede ser una propiedad de smbolo o de instancia. Puede
incorporar un valor URL a la instancia seleccionada de botn en el Inspector de propiedades o en el
panel URL.
Es posible incorporar un valor URL a un smbolo, de este modo, para cada instancia, aparecer el mismo
valor URL en el cuadro de texto Vnculo del Inspector de propiedades. Esto resulta til cuando introduce
valores URL absolutos dentro de un sitio, slo necesita modificar la ltima parte del valor URL en el
cuadro de texto Vnculo de cada instancia en el Inspector de propiedades para vincular las instancias de
botn.

Para definir el valor URL de un smbolo de botn en el Editor de botones:
1. Siga uno de los procedimientos siguientes para abrir el botn en el Editor de botones:
o Haga doble clic en una instancia del botn en el espacio de trabajo.
o En el panel Biblioteca, haga doble clic en la vista previa del botn o en el icono de smbolo que se
encuentra junto al smbolo de botn.
2. Haga clic en la ficha rea activa del editor de botones.
3. Seleccione la divisin o zona interactiva de rea activa.
4. Siga uno de estos procedimientos:
o Introduzca un valor URL en el cuadro de texto Vnculo del Inspector de propiedades.
o Elija un valor URL en el panel URL.
Nota: Si cambia el valor URL de un smbolo de botn no se cambiar el valor URL de las
instancias existentes de botn de dicho smbolo que ya tengan valores URL nicos asignados.
Esto tambin se produce en las modificaciones realizadas en el destino de un smbolo de botn y
el texto alt.





Pgina 44
Curso de Fireworks Barras de navegacin
Para configurar el valor URL de una instancia de botn seleccionada en el espacio de trabajo, siga uno de los
procedimientos siguientes:
Introduzca un valor URL en el cuadro de texto Vnculo del Inspector de propiedades.
Elija un valor URL en el panel URL.
Configuracin del destino de un botn
El elemento destino es la ventana o marco en que aparecer la pgina web al hacer clic en una instancia
de botn. Si no introduce un elemento destino en el Inspector de propiedades, la pgina web aparecer
en el mismo marco o ventana que el vnculo. El valor de destino puede ser una propiedad de smbolo o
de instancia. Puede definir el destino de un smbolo de forma que todas las instancias de smbolo tengan
la misma opcin de destino.

Para definir el elemento destino de un smbolo o instancia de botn en el Editor de botones:
1. Siga uno de los procedimientos siguientes para abrir el botn en el Editor de botones:
o Haga doble clic en una instancia del botn en el espacio de trabajo.
o En el panel Biblioteca, haga doble clic en la vista previa del botn o en el icono de smbolo que se
encuentra junto al smbolo de botn.
2. Siga uno de los procedimientos siguientes en el Inspector de propiedades:
o Elija un destino preestablecido en el men emergente Destino.
Ninguno o _self carga la pgina web en el mismo marco o ventana que el
vnculo.
_blank carga la pgina web en una ventana de navegador nueva sin
nombre.
_parent carga la pgina web en el conjunto de marcos relacionados o en la
ventana del marco que contiene el vnculo.
_top carga la pgina web en la ventana de navegador completa y se
eliminan todos los marcos.
o Introduzca un valor de destino en el cuadro de texto Destino.
Nota: Si cambia el valor destino de un smbolo de botn no se cambiar dicho valor en las
instancias existentes de botn de dicho smbolo que ya tengan valores destino nicos asignados.
Esto tambin se produce en las modificaciones realizadas en el valor URL de un smbolo de botn
y el texto alt.

Definicin del texto alternativo (alt) para un smbolo de botn o
instancia
El texto Alt (alternativo) aparece sobre el marcador de posicin de la imagen o cerca mientras sta se
descarga de la web, tambin aparece en lugar del grfico cuando la imagen no se descarga
correctamente. Tambin aparece en lugar de los grficos si el usuario a definido en su navegador que no
Pgina 45
Curso de Fireworks Barras de navegacin
se muestren imgenes. El texto Alt puede ser una propiedad de smbolo o de instancia. Es posible definir
el texto alternativo para un smbolo de botn o instancia en el Inspector propiedades.

Para definir el texto Alt de un smbolo o instancia de botn en el Editor de botones:
1. Siga uno de los procedimientos siguientes para abrir el botn en el Editor de botones:
o Haga doble clic en una instancia del botn en el espacio de trabajo.
o En el panel Biblioteca, haga doble clic en la vista previa del botn o en el icono de smbolo que se
encuentra junto al smbolo de botn.
2. En el Inspector de propiedades introduzca el texto que desee que aparezca como texto alt
en un navegador.
Nota: Si cambia el texto alt de un smbolo de botn no se cambiar el texto alt de las instancias
existentes de botn de dicho smbolo que ya tengan texto alt nico asignado. Esto tambin se produce en
las modificaciones realizadas en el destino de un smbolo de botn y el valor URL.

Creacin de varias instancias del botn
Ahora va a crear ms instancias del smbolo de botn.
1. Seleccione el botn en el espacio de trabajo si no est ya seleccionado.
2. Elija Editar >Clonar.
Sobre el botn original aparece una nueva instancia de botn.
3. Mantenga pulsada la tecla Mays mientras pulsa repetidamente la tecla de flecha derecha
para desplazar la nueva instancia hacia la derecha.
De este modo, la instancia se desplaza a incrementos de 10 pxeles. Si es necesario, utilice nicamente las teclas de
flecha para desplazar la seleccin pxel a pxel. Coloque la instancia inmediatamente a la derecha de la instancia original,
sin que se solapen, como se muestra en la siguiente ilustracin.

Clone dos o ms instancias del botn y coloque cada una a la derecha de la anterior.
Sugerencia: Como mtodo abreviado, pulse Alt mientras arrastra la instancia
seleccionada con el puntero para copiarla. Despus de colocar la nueva instancia
inmediatamente a la derecha de la instancia anterior, elija Editar > Repetir Duplicar
para crear y colocar automticamente otra copia de la instancia.

Cambio del texto de las instancias del botn
Una vez creados todos los botones de la barra de navegacin, es preciso introducir en cada uno de ellos
un texto propio. El texto de un botn puede cambiarse fcilmente con el Inspector de propiedades.
1. Seleccione la instancia de botn.
Pgina 46
Curso de Fireworks Barras de navegacin
Sus propiedades aparecen en el Inspector de propiedades. Si introduce cambios aqu, el smbolo
de botn original guardado en el panel Biblioteca no se ver afectado.



2. En el Inspector de propiedades, sustituya el texto del cuadro Texto por la palabra HOME
en maysculas. A continuacin pulse Intro.
El texto del botn cambia para reflejar la modificacin.
3. Cambie el texto de los tres botones restantes por VEHICLES, RATES y CONTACT
US, respectivamente.
Asignacin de valores URL a los botones
A continuacin va a asignar un vnculo o valor URL nico a cada instancia de botn. Un valor URL
(Uniform Resource Locator) es una direccin o posicin de una pgina en la web. Con el Inspector de
propiedades es fcil asignar valores URL a los botones.
1. Seleccione la instancia de botn con el rtulo Home.
2. Introduzca index.htm en el cuadro de texto Vnculo del Inspector de propiedades.

Al hacer clic sobre el botn Home en un navegador web, se abrir una pgina
llamada index.htm.
3. Seleccione cada una de las instancias de botn e introduzca el vnculo.
Edicin del smbolo de botn
Ahora va a modificar el smbolo de botn original; los cambios se aplicarn automticamente a todas las
instancias del botn de la barra de navegacin.
1. Haga doble clic en cualquiera de las instancias del botn en el espacio de trabajo.
Se abre el editor de botones con el smbolo de botn y el texto originales en el espacio de trabajo. El smbolo de botn
original sigue intacto y muestra el texto original.
Cuando cambi el texto de cada botn en el espacio de trabajo simplemente edit las instancias del botn. Si aqu
modifica el aspecto del rectngulo o el texto, editar el smbolo original, por lo que los cambios se reflejarn en todas las
instancias del espacio de trabajo.
2. Haga clic en la ficha Sobre y cambiar a otro color.
3. Haga clic en Listo en el editor de botones para aplicar el cambio al smbolo de botn.
4. Haga clic en la ficha Vista previa de la ventana de documento y compruebe los botones.
Pgina 47
Curso de Fireworks Barras de navegacin
Ahora el estado Sobre de cada botn es de otro color. Slo ha cambiado el smbolo de botn, pero el cambio se ha
aplicado a todas las instancias del botn en la barra de navegacin.
5. Haga clic en la ficha Original y haga doble clic en cualquier instancia del botn en el
espacio de trabajo. Esta vez va a cambiar el texto del smbolo de botn.
6. Seleccione el texto del botn en el editor de botones y elija otro tipo de letra como fuente
en el Inspector de propiedades. Haga lo mismo con cada estado del botn.


4. Asigne un valor URL a cada una de las instancias del botn restantes.
5. Elija Archivo >Vista previa en el navegador >Vista previa. Para comprobar los vnculos
de los botones, es preciso abrir la vista previa del documento en un navegador.

Creacin y edicin de un men emergente
Un men emergente es el men que aparece al desplazar el puntero sobre una imagen de activacin en
un navegador. Contiene una lista de opciones que conducen a otras pginas web.
Acerca del Editor de mens emergentes
El editor de mens emergentes es un cuadro de dilogo con fichas que le gua durante el proceso de
creacin de un men emergente. Contiene muchas opciones para controlar las caractersticas de un
men emergente y estn organizadas en cuatro fichas:
Contenido tiene opciones que determinan la estructura bsica del men, as como el
texto, vnculo URL y el valor de destino de cada elemento de men.
Aspecto contiene opciones que determinan el aspecto de cada celda de estado Arriba y
de estado Sobre del men, as como la orientacin vertical y horizontal del men.
Avanzado contiene opciones que determinan las dimensiones de celda, relleno y
espaciado; la anchura del borde de la celda y el color; la demora de men y el
sangrado del texto.
Posicin contiene opciones que determinan la ubicacin del men y del submen:
La opcin Men coloca el men emergente en relacin con la divisin. La opcin Preestablecido lo incluye
en la parte inferior, inferior derecha, superior y superior derecha de una divisin.
El ajuste Submen coloca el submen emergente en la parte derecha o inferior derecha del men principal,
o debajo del mismo.
Pgina 48
Curso de Fireworks Barras de navegacin

Creacin de un men emergente bsico
En la ficha Contenido del Editor de mens emergentes crear la estructura bsica y el contenido del
men emergente.
Para crear un men emergente sencillo:
1. Seleccione una zona interactiva o divisin que ser el rea de activacin del
men emergente.
2. Siga uno de estos procedimientos para abrir el Editor de mens emergentes:
o Elija Modificar >Men emergente >Aadir men emergente.
o Haga clic en el tirador de comportamiento de la divisin y elija Aadir men
emergente.
3. Haga clic en una ficha Contenido.
4. Haga clic en el botn Aadir men para aadir un elemento vaco de men.

Puede aadir y eliminar celdas en cualquier momento.
5. Haga doble clic en cada celda e introduzca o elija la informacin adecuada:
Texto especifica el texto para el elemento de men.
Vnculo determina el valor URL del elemento de men.
Destino designa el elemento destino del valor URL. Puede introducir un elemento
destino personal, o elegir un valor preestablecido en el men emergente
Destino.
Al aadir texto en la ltima lnea de la ventana se agrega automticamente una
lnea vaca debajo de la misma.
Sugerencia: Para ir de una celda activa a otra celda y seguir introduciendo
informacin, pulse la tecla de tabulador para desplazarse por las distintas celdas y
las teclas Flecha arriba y abajo para desplazarse verticalmente.
Pgina 49
Curso de Fireworks Barras de navegacin
6. Repita los pasos 4 y 5 hasta aadir todos los elementos de men.
7. De forma opcional, para eliminar un elemento de men, resltelo y haga clic en el botn
Suprimir men.
8. Siga uno de estos procedimientos:
o Haga clic en Siguiente para ir hasta la ficha Aspecto o elija otra ficha para
continuar con la creacin del men emergente.
o Cree entradas de submen para el men emergente.
o Haga clic en Listo para finalizar el men emergente y cerrar el Editor de mens
emergentes.
En el espacio de trabajo, la zona interactiva o divisin utilizada para crear el men
emergente muestra una lnea azul de comportamiento unida a un contorno del nivel
superior del men emergente.
Nota: Para ver el men emergente en un navegador debe pulsar F12. Las
vistas previas del espacio de trabajo de Fireworks MX no muestran los mens
emergentes.
Creacin de submens en un men emergente
Gracias a los botones Sangrar men y Men con sangra inversa de la ficha Contenido del Editor de
mens emergentes puede crear submens que son mens emergentes que aparecen cuando el puntero
se encuentra (o se hace clic) sobre otro elemento de men emergente. Puede crear tantos niveles de
submens como desee.




Para crear un submen emergente:
1. Abra la ficha Contenido del Editor de mens emergentes y cree elementos de men. Cree
los elementos de men que desee utilizar para el submen, colquelos directamente bajo
el elemento de men que activar el submen.
2. Haga clic para resaltar un elemento de men emergente que desee convertir en elemento
de submen.
3. Haga clic en el botn Sangrar men para designar el elemento como una opcin de
submen del elemento inmediatamente encima en la lista.

4. Para aadir el elemento siguiente del submen, resltelo y haga clic en el botn Sangrar
men.
Todos los elementos que estn sangrados de forma contigua en el mismo nivel componen un submen emergente.
5. De forma opcional, resalte un elemento de men o submen y haga clic en Aadir men
para insertar un nuevo elemento justo debajo del elemento resaltado.
6. Siga uno de estos procedimientos:
o Haga clic en Siguiente para ir a la siguiente ficha o elija otra ficha para continuar
con la creacin del men emergente.
o Haga clic en Listo para cerrar el Editor de mens emergentes.
Para crear un submen emergente dentro de un submen emergente:
Pgina 50
Curso de Fireworks Barras de navegacin
1. Resalte un elemento de submen en la ficha Contenido del Editor de mens emergentes.
Para ms informacin, consulte el procedimiento anterior.
2. Haga clic en el botn Sangrar men para sangrarlo de nuevo, de modo que aparezca
sangrado respecto al elemento de submen que se encuentra encima.
Puede sangrar los elementos de submens para lograr los niveles que desee.
Para mover un elemento de men hasta un submen de mayor nivel o hasta el men emergente principal:
1. Resalte el elemento de men en la ficha Contenido del Editor de men emergentes.
2. Haga clic en el botn Men con sangra inversa.
3. Siga uno de los procedimientos siguientes para finalizar el men emergente o seguir con
su creacin:
o Haga clic en Siguiente para ir hasta la ficha Aspecto o elija otra ficha para
continuar con la creacin del men emergente.
o Haga clic en Listo para cerrar el Editor de mens emergentes.
En el espacio de trabajo, la zona interactiva o divisin utilizada para crear el men
emergente muestra una lnea azul de comportamiento unida a un contorno del nivel
superior del men emergente.
Diseo del aspecto de un men emergente
Tras crear un men bsico y los submens opcionales, puede dar formato al texto, aplicar estilos de
grfico para los estados Sobre y Arriba y elegir la orientacin vertical u horizontal en la ficha Aspecto del
Editor de mens emergentes.
























Para establecer la orientacin de un men emergente:
1. Abra el men emergente que desee en el Editor de mens emergentes y haga clic en la
ficha Aspecto.
2. Elija Vertical u Horizontal en el men emergente Orientacin.

Pgina 51
Curso de Fireworks Barras de navegacin
Para establecer si un men emergente se basa en HTML o en imgenes:
1. Abra el men emergente que desee en el Editor de mens emergentes y haga clic en la
ficha Aspecto.
2. Elija una opcin de Celdas:
HTML define el aspecto del men utilizando slo cdigos HTML. Esta configuracin produce pginas con el menor
tamao posible.
Imagen le permite seleccionar un estilo de imagen que se utilizar como fondo de celda. Esta configuracin produce
pginas de mayor tamao.
Nota: Puede aadir opciones a esta seleccin de estilos creando sus propios estilos de mens
emergentes.
Para asignar formatos al texto del men emergente actual:
1. Abra el men emergente que desee en el Editor de mens emergentes y haga clic en la
ficha Aspecto.
2. Elija un tamao preestablecido en el men emergente Tamao o introduzca un valor en el
cuadro de texto Tamao.
Nota: Si en la ficha Avanzado del Editor de mens emergentes se establece la anchura y altura de celda
en Automtico, el tamao del texto determina el tamao de los grficos asociados con el elemento de
men.
3. Elija un grupo de fuentes del sistema en el men emergente Fuentes o introduzca el
nombre de una fuente.
Nota: Tenga cuidado al escoger una fuente. Si los usuarios que vean su pgina web no tienen instalada la
fuente que ha elegido, se utilizar una fuente de sustitucin en su navegador web.
4. De forma opcional, puede hacer clic en un botn de estilo de texto como negrita o
cursiva.
5. Haga clic en un botn de justificacin para alinear el texto por la izquierda, la derecha o
centrarlo.
6. Elija un color de texto en el cuadro Color de texto.
Para establecer el aspecto de las celdas de men:
1. Abra el men emergente que desee en el Editor de mens emergentes y haga clic en la
ficha Aspecto.
2. Elija los colores del texto y de la celda para cada estado.
3. Si ha seleccionado Imagen como tipo de celda, elija un estilo grfico para cada estado.
4. Siga uno de estos procedimientos:
o Haga clic en Siguiente para ir hasta la ficha Avanzado o elija otra ficha para
continuar con la creacin del men emergente.
o Haga clic en Listo para cerrar el Editor de mens emergentes.
Creacin de las opciones del men emergente
En primer lugar va a crear las opciones del men emergente con el editor de men
emergente.
2. Seleccione la divisin que cubre la imagen de Worldwide Airports.
Pgina 52
Curso de Fireworks Barras de navegacin
2. Elija Modificar >Men emergente >Aadir men emergente.
Se abre el editor de men emergente.






2. Haga doble clic en el cuadro de texto del ngulo superior izquierdo (slo Windows).
2. Escriba North America en el cuadro de texto y pulse Intro.
El siguiente cuadro de texto se resalta para que introduzca otra opcin.



2. Escriba Europe y pulse Intro.
2. Cree tres entradas ms con Africa, Middle East y Asia/Pacific.




2. Haga doble clic en el cuadro de texto Vnculo de la entrada North America.
2. Introduzca un valor URL operativo y pulse Intro.
Para los propsitos de este tutorial sirve cualquier valor URL. Cercirese de
introducir un valor URL real para poder comprobar los vnculos ms tarde.




Pgina 53
Curso de Fireworks Barras de navegacin
2. Introduzca los valores URL de las dems entradas.
Nota: En la parte inferior de la lista de entradas del editor de men emergente
siempre queda una lnea en blanco. Sirve para aadir entradas nuevas sin necesidad
de hacer clic en el botn Aadir men.
2. Haga clic en Listo para cerrar el editor de men emergente.
En el espacio de trabajo, junto a la divisin aparece el contorno del men
emergente.



2. Para comprobar el men emergente, elija Archivo >Vista previa en el navegador >Vista
previa en [el navegador que prefiera] para abrir la vista previa del documento en un
navegador.
Nota: La vista previa de los mens emergentes debe abrirse en un navegador; no
son visibles con la ficha Vista previa de Fireworks.
Cuando el documento se abra en el navegador, desplace el puntero sobre la imagen de
Worldwide Airports. Aparece el men emergente creado.
Personalizacin del men emergente
Ahora va a volver al editor de men emergente para modificar el aspecto del men
emergente.
1. En Fireworks, haga doble clic en el contorno del men emergente.
Aparece el editor de men emergente con las entradas creadas.
2. Haga clic en el botn Siguiente.
Aparece la ficha Aspecto. Aqu es donde puede cambiar las fuentes y los colores
utilizados en mens emergentes.






Pgina 54
Curso de Fireworks Barras de navegacin
3. Elija HTML como tipo de celda y Men vertical como alineacin.
4. Elija Arial, Helvetica, sans-serif como fuente y 12 como tamao de fuente.
5. En la seccin Estado Arriba, defina el color del texto en negro si no est ya seleccionado.
Despus haga clic en el cuadro de color de celda. Si el cuadro de texto de la parte
superior de la ventana emergente de color no indica CCCCCC, introduzca CCCCCC y
pulse Intro.
Estos valores de color son los predeterminados en el editor de men emergente
si nunca se ha creado antes un men emergente. Una vez modificados estos
colores, aparecern cada vez que cree un men emergente hasta que elija
otros.
6. En la seccin Estado Sobre, defina el color del texto en blanco si no est ya seleccionado
y haga clic en el cuadro de color de celda. Haga clic con el puntero de cuentagotas sobre
el rectngulo azul del lienzo que rodea la imagen de Worldwide Airports como se
muestra a continuacin.




7. Haga clic en el botn Siguiente.
Aparece la ficha Avanzado. La ficha Avanzado permite cambiar varias
propiedades de celda y borde. Ahora va a aumentar la anchura de la celda para
ensanchar el men emergente.









8. Elija Pxeles en el men emergente Anchura de celda.
As se activa el cuadro Anchura de celda.
Pgina 55
Curso de Fireworks Barras de navegacin
9. Introduzca 137 como anchura de celda.
10. Elija Automtico en el men emergente Altura de celda y haga clic en el botn Siguiente.







Aparece la ficha Posicin. Aqu es donde puede especificar la posicin de la
pantalla donde debe aparecer el men emergente. Cuando las coordenadas son
0,0, significa que el ngulo superior izquierdo del men emergente se alinear
con el ngulo superior izquierdo de la divisin que lo activa. Tambin hay varias
posiciones preestablecidas entre las que elegir.
11. Introduzca 3 en los cuadros X e Y de Posicin del men y despus haga clic en Listo.
Nota: La posicin de un men emergente tambin puede cambiarse arrastrando su
contorno por el espacio de trabajo.
12. Visualice en un navegador la vista previa de los cambios introducidos en el men
emergente.
Desplace el puntero sobre la imagen de Worldwide Airports. El men emergente
ha cambiado de lugar y es ms ancho. Desplace el puntero sobre cada entrada
del men para ver los cambios de color.
Edicin del men emergente
Ahora va a utilizar de nuevo el editor de men emergente para aadir otra entrada al
men emergente. Tambin cambiar el orden de las entradas y aadir un submen.
1. En Fireworks, haga doble clic en el contorno del men emergente.
2. Haga clic en la entrada Europe para seleccionarla.
3. Haga clic el botn Aadir men situado sobre la lista de entradas.
Se inserta una lnea en blanco.
Pgina 56
Curso de Fireworks Barras de navegacin
4. Haga doble clic en el campo Texto de la nueva entrada y escriba Latin/South America.
Haga clic en cualquier punto fuera del campo Texto para aplicar la entrada.



Amrica del Norte y del Sur no estn juntas en la lista.
5. Arrastre la entrada Latin/South America una lnea hacia arriba y suelte el botn del ratn.
Mientras arrastra, una lnea negra indica dnde se colocar la entrada si suelta el ratn en
ese momento.
La entrada se coloca donde ha especificado.





6. Seleccione la entrada North America y haga clic en el botn Aadir men.
7. Haga doble clic en el campo Texto de la nueva entrada y escriba United States. Despus
haga clic en cualquier punto fuera de los campos de entrada. Tenga cuidado de no
seleccionar otra entrada.
8. Seleccione la entrada United States si no est ya seleccionada y haga clic en el botn
Sangrar men.
La entrada se sangra debajo de North America.





9. Haga clic otra vez en el botn Aadir men y cree una nueva entrada para Canada.
Acaba de crear un submen que aparecer cuando desplace el puntero sobre la entrada North
America en un navegador.





Pgina 57
Curso de Fireworks Barras de navegacin
10. Asigne valores URL a todas las entradas nuevas. Tambin puede eliminar el vnculo de
North America, porque los usuarios elegirn opciones en el submen.
11. Haga clic en Listo para cerrar el editor de men emergente y despus visualice los
cambios del men emergente en un navegador.
Pgina 58
Curso de Fireworks Ejemplo barras de navegacin
Aplicacin 1: DISEO DE UN BOTN.
1. Recuperar el dibujo de botn de la practica anterior.



2. Seleccionar todos los componentes y agrupar. Herramienta puntero traza un recuadro que
abarque todo el dibujo >Men modificar >grupo. (Tambin Ctrl- G).
3. Convertir en smbolo. Men Modificar >Smbolo > Convertir en smbolo ( F8)
4. En la ventana de Propiedades de smbolo asignar un nombre al botn. En tipo >Botn >
Aceptar.

5. En el panel Activos >Biblioteca aparece el smbolo creado.
6. Abrir el editor de smbolos. Haga doble clic sobre el icono de la flecha en la instancia de
botn creada.











7. Haga clic en la ficha Sobre de la parte superior del editor de botones y despus en el botn
Copiar grfico Arriba. Modificar el aspecto.
Dibujar con la Herramienta Pluma el trazo interior del circulo.
Rectngulo
redondeado
Dibujo interior del crculo
Color: FF9A00 Color: 003000 Grosor: 3
Efectos: Eye Candy >Bevel Boss
Sombra
8. Haga clic en la ficha Abajo del editor de botones y despus en el botn Copiar grfico Sobre.
Rectngulo
redondeado
Dibujo interior del crculo (
tringulo)
Color: FFFF99
Color interior: 003000 Color lnea: 003000

Efectos: Eye Candy >Bevel Boss Sombra
Pgina 59
Curso de Fireworks Ejemplo barras de navegacin
9. Haga clic en la ficha Sobre-Abajo del editor de botones y despus en el botn Copiar grfico
Sobre. Mantenemos el aspecto.
10. Haga clic en la ficha rea Activa del editor de botones. Modificar el tamao y hacer
coincidir con el tamao del rectngulo redondeado.
11. Ver el resultado en el navegador (F12) o vista previa.
13. En el Inspector de propiedades asignar los valores apropiados.
botn



Aplicacin 2: BARRA DE NAVEGACIN.

A partir del botn anterior creamos una barra de navegacin
1. Seleccione el botn en el espacio de trabajo si no est ya seleccionado.
2. Elija Editar >Clonar . Sobre el botn original aparece una nueva instancia de botn.
3. Mantenga pulsada la tecla Mays mientras pulsa repetidamente la tecla de flecha derecha
para desplazar la nueva instancia hacia la derecha. Repetir el proceso hasta obtener los
botones deseados.

4. En el Inspector de propiedades, sustituya el texto del cuadro Texto por el nombre de cada
botn. A continuacin pulse Intro.

5. Modificar el resto de parmetros en el Inspector de propiedades ( nombre de la imagen,
vnculo, texto alternativo, destino, etc...)
6. Comprobar el resultado en la vista previa.
7. Para cambiar el aspecto a todos los botones de la barra de navegacin ir al panel Activo >
Biblioteca >Hacer dos veces clic en el botn. Se abre el Editor de botones. Cambiar los
colores de los trazados.
Aplicacin 3: MEN EMERGENTE.
En los botones, libros y vdeos , se van a crear mens emergentes y submens.
1. Seleccionar el botn libros.
Pgina 60
Curso de Fireworks Ejemplo barras de navegacin
2. Elegir Modificar >Men emergente >Aadir men emergente.
Se abre el editor de men emergente.





3. Hacer doble clic en el cuadro de texto del ngulo superior izquierdo .
Escribir Historia en el cuadro de texto y pulse Intro.
El siguiente cuadro de texto se resalta para introducir otra opcin.

Historia



3. Escribir Aventuras y pulse Intro.
4. Crear dos entradas ms con Novela y Poesa

Historia
Aventuras
Poesa
Novela



5. Haga doble clic en el cuadro de texto Vnculo de cada entrada.
6. Introduzca un valor URL y pulse Intro.
7. Para los propsitos de este tutorial sirve cualquier valor URL. Cercirese de
introducir un valor URL real para poder comprobar los vnculos ms tarde.
Nota: En la parte inferior de la lista de entradas del editor de men emergente siempre queda una lnea
en blanco. Sirve para aadir entradas nuevas sin necesidad de hacer clic en el botn Aadir men.
8. Haga clic en Listo para cerrar el editor de men emergente.
9. En el espacio de trabajo, junto a la divisin aparece el contorno del men
emergente.

Pgina 61
Curso de Fireworks Ejemplo barras de navegacin
10. Para comprobar el men emergente, elija Archivo >Vista previa en el navegador >Vista
previa en [el navegador que prefiera] para abrir la vista previa del documento en un
navegador.
Nota: La vista previa de los mens emergentes debe abrirse en un navegador; no son visibles con la ficha
Vista previa de Fireworks.
Ahora vamos amodificar el aspecto del men emergente.
13. Hacer doble clic en el contorno del men emergente.
Aparece el editor de men emergente con las entradas creadas.
14. Haga clic en el botn Siguiente.
Aparece la ficha Aspecto. Aqu es donde puede cambiar las fuentes y los colores
utilizados en mens emergentes.








15. Elegir Imagen como tipo de celda y Men vertical como alineacin.
16. Elija Arial, Helvetica, sans-serif como fuente y 12 como tamao de fuente.
17. En la seccin Estado Arriba, defina el color del texto en 903000. Despus haga clic en el
cuadro de color de celda, color A5E3BD. En Estilo elegir uno cualquiera.
18. En la seccin Estado Sobre, defina el color del texto en negro y haga clic en el cuadro de
color de celda, color FFB2FF. En Estilo elegir el mismo de antes.
19. Haga clic en el botn Siguiente. Aparece la ficha Avanzado.







20. Podemos modificar distintos elementos para ver el efecto sobre el men emergente.
Pgina 62
Curso de Fireworks Ejemplo barras de navegacin

21. Hacer clic en el botn Siguiente. Aparece la ficha Posicin.







22. Introducir 3 en los cuadros X e Y de Posicin del men y despus haga clic en Listo.
Nota: La posicin de un men emergente tambin puede cambiarse arrastrando su contorno por el
espacio de trabajo.
23. Visualizar en un navegador la vista previa de los cambios introducidos en el men
emergente.
Vamos a aadir un submen.
1. Seleccionar la entrada Historia y hacer clic en el botn Aadir men ( + ). Repetir el
proceso dos veces.
2. En las entradas nuevas escribir Espaa, Europa.
Seleccionar cada entrada y hacer clic en el botn Sangrar men.
La entrada se sangra debajo de Historia.
3. Asigne valores URL a todas las entradas nuevas.
4. Hacer clic en Listo para cerrar el editor de men emergente y despus visualizar los
cambios del men emergente en un navegador.
5. Modificar el aspecto y posicin en el Editor de Men Emergente.

Pgina 63
Curso de Fireworks Animaciones
Pgina 64
4. ANIMACIONES.
Creacin de una animacin
En Fireworks las animaciones se crean mediante la asignacin de propiedades
a objetos denominados smbolos de animacin. La animacin de un smbolo se
divide en fotogramas, que contienen las imgenes y objetos que componen
cada etapa de la animacin. Una animacin puede contener ms de un smbolo
y cada uno de ellos puede realizar una accin diferente. Los distintos smbolos
pueden tener un nmero diferente de fotogramas. La animacin termina
cuando acaba la accin de todos los smbolos.
Para crear una animacin mediante smbolos en Fireworks:
1. Cree un smbolo de animacin; puede crearlo desde cero o convertir un objeto
existente en un smbolo.
2. Utilice el Inspector de propiedades o el cuadro de dilogo Animar para
introducir los valores del smbolo. Puede definir el grado y la direccin de
movimiento, la escala, la opacidad (aparicin o desaparicin paulatina) y el
ngulo y la direccin de rotacin.
Nota: Las opciones para el grado y la direccin de movimiento slo se encuentran
en el cuadro de dilogo Animar.
3. Utilice los controles Demora de fotogramas en el panel Fotogramas para
establecer la velocidad de movimiento de la animacin. Para ms informacin,
consulte.
4. Optimice el documento como un archivo GIF animado. Para ms informacin,
consulte.
5. Puede exportar el documento como un archivo GIF animado o SWF, o guardarlo
como PNG de Fireworks e importarlo despus en Macromedia Flash para
modificarlo. Para ms informacin,
Trabajo con smbolos de animacin
Los smbolos de animacin llevan a cabo las acciones en un archivo de
Fireworks como si fueran los actores de una pelcula. Por ejemplo, en una
animacin en la que aparecen tres gansos volando, cada ganso es un
personaje.
Un smbolo de animacin puede ser cualquier objeto creado o importado y
pueden guardarse varios en un nico archivo. Cada smbolo tiene sus
Curso de Fireworks Animaciones
Pgina 65
propiedades particulares y su animacin es independiente de los otros. Se
pueden crear smbolos que se desplacen por la pantalla mientras otros
desaparecen o disminuyen de tamao.
No es necesario utilizar smbolos en cada momento de la animacin. Sin
embargo, al utilizar smbolos e instancias para los grficos que aparecen en
varios fotogramas conseguir un archivo de animacin de reducido tamao,
adems de otras ventajas descritas en este mismo captulo.
Las propiedades del smbolo de animacin pueden cambiarse en cualquier
momento a travs del cuadro de dilogo Animar o desde el Inspector de
propiedades. Tambin se pueden modificar las ilustraciones del smbolo en el
editor de smbolos. El editor de smbolos permite editar el smbolo sin alterar el
resto del documento. Tambin se puede desplazar el trazado de movimiento de
un smbolo para cambiar el movimiento.
Puesto que los smbolos de animacin se guardan de forma automtica en la
biblioteca, pueden volver a utilizarse para crear otras animaciones.
Creacin de smbolos de animacin
Una vez creado un smbolo de animacin se pueden establecer propiedades
que determinen el nmero de fotogramas de la animacin y el tipo de accin,
como cambio de escala o rotacin. De forma predeterminada, el smbolo de
animacin nuevo tiene cinco fotogramas, cada uno con una demora de 0,07
segundos.
Para crear un smbolo de animacin:
1. Elija Editar >Insertar >Nuevo smbolo.
2. En el cuadro de dilogo Propiedades de smbolo, escriba un nombre para el
smbolo nuevo.
3. Elija Animacin y haga clic en Aceptar.
4. En el editor de smbolos, utilice las herramientas de texto o de dibujo para crear
un objeto nuevo.
Se pueden dibujar objetos vectoriales o de mapas de bits.
5. Cierre la ventana del editor de smbolos.
Curso de Fireworks Animaciones
Fireworks guarda el smbolo en la biblioteca y coloca una copia en el
centro del documento.
Pueden aadirse fotogramas nuevos al smbolo con el control deslizante
Fotogramas del Inspector de propiedades. Elija Ventana > Propiedades para
abrir el Inspector de propiedades, si no estuviera ya abierto.
Para convertir un objeto en un smbolo de animacin:
1. Seleccione el objeto.
2. Elija Modificar >Animar >Animar seleccin.
3. Introduzca el valor deseado en el cuadro de dilogo..
Aparecen controles de animacin en el recuadro delimitador del objeto y
se aade una copia del smbolo a la biblioteca.
Edicin de smbolos de animacin
Es posible manipular las propiedades de los smbolos de animacin para que su sitio web
cobre vida. Pueden cambiarse varias de las propiedades de un smbolo, desde la velocidad de
animacin a la opacidad y rotacin. Mediante la manipulacin de estas propiedades se puede
conseguir que un smbolo gire, acelere, aparezca o desaparezca de forma gradual, o cualquier
combinacin de todo lo anterior.
Una propiedad esencial para cualquier smbolo de animacin es el nmero de fotogramas.
Define los pasos que tarda el smbolo en terminar la animacin. Cuando se establece el
nmero de fotogramas de un smbolo, Fireworks aade de forma automtica al documento la
cantidad de fotogramas necesaria para llevar a cabo la accin. Si el smbolo necesita ms
fotogramas de los existentes en la animacin, Fireworks le pregunta si desea aadir
fotogramas adicionales.
Cambio de las propiedades de animacin
Las propiedades de la animacin pueden cambiarse a travs del cuadro de
dilogo Animar o desde el Inspector de propiedades.



Las propiedades de smbolo de animacin en el Inspector de propiedades
Pgina 66
Curso de Fireworks Animaciones
Pgina 67
Es posible editar cualquiera de las propiedades siguientes de un smbolo de
animacin:
Fotogramas es el nmero de fotogramas que desea incluir en la animacin.
Aunque el control deslizante permite establecer un mximo de 250, en el
cuadro de texto Fotogramas puede introducir cualquier nmero. El valor
predeterminado es 5.
Mover es la distancia en pxeles que debe recorrer cada objeto. Esta opcin slo
est disponible en el cuadro de dilogo Animar. Los valores estn
comprendidos entre 0 a 250 pxeles, el valor predeterminado es 72. El
movimiento es lineal y no existen fotogramas clave (a diferencia de
Macromedia Flash y Director).
Direccin es la direccin, en grados, en que debe moverse el objeto. El rango de
valores es de 0 a 360 grados. Esta opcin slo est disponible en el cuadro de
dilogo Animar.
Tambin puede modificar los valores de Mover y Direccin si arrastra los
tiradores de animacin del objeto.
Escala a es el cambio de tamao, expresado como un porcentaje, desde el
principio al final. Los valores estn comprendidos entre 0 a 250, el valor
predeterminado es 100%. Para escalar un objeto de 0 al 100%, el objeto
original debe ser muy pequeo; se recomienda utilizar objetos de vectores.
Opacidad es el grado de aparicin o desaparicin paulatina (fundido) de
principio a final. Los valores estn comprendidos entre 0 a 100, el valor
predeterminado es 100%. Para crear un fundido se requieren dos instancias del
mismo smbolo: una para que aparezca y otra para que desaparezca.
Rotar es el giro del smbolo, en grados, de principio a final. El rango de valores
es de 0 a 360 grados. Puede introducir valores ms altos si desea que el
smbolo realice ms de una rotacin. El valor predeterminado es 0 grados.
Curso de Fireworks Animaciones
Derecha e Izquierda son las direcciones en que rota el objeto. Derecha equivale
al sentido de las agujas del reloj e Izquierda indica el sentido contrario a las
agujas del reloj.
Para cambiar las propiedades de smbolo de animacin:
1. Seleccione un smbolo de animacin.
2. Elija Modificar >Animacin >Configuracin para abrir el cuadro de dilogo
Animar o Ventana >Propiedades para abrir el Inspector de propiedades, si no
estuviera ya abierto.

3. Cambie las propiedades que desee.
Edicin de imgenes de smbolo
Se puede cambiar la imagen grfica en que se basa un smbolo, as como sus
propiedades. Las imgenes de smbolo se modifican en el editor de smbolos.
El editor de smbolos permite utilizar herramientas de dibujo, texto y color para
modificar el grfico. Durante el trabajo en el editor de smbolos slo se altera el
smbolo seleccionado.
Puesto que el smbolo es un elemento de la Biblioteca, si modifica el aspecto
de una de las instancias, el resto de las instancias cambia.
Para cambiar los atributos grficos de un smbolo seleccionado:
1. Siga uno de estos procedimientos para abrir el editor de smbolos:
o Haga doble clic en el objeto de smbolo.
o Elija Modificar >Smbolo >Editar smbolo.
o Haga clic en el botn Edicin del cuadro de dilogo Animar.
2. Modifique el smbolo de animacin y cambie el texto, los trazos, los rellenos y
los efectos deseados.
3. Cierre el editor de smbolos.
Pgina 68
Curso de Fireworks Animaciones
Edicin de trazados de movimiento de smbolos
Cuando se selecciona un smbolo de animacin, ste cuenta con un recuadro
delimitador y un trazado de movimiento que indica la direccin de
desplazamiento del smbolo.
El punto verde del trazado de movimiento indica el punto de partida y el rojo el
del final. Los puntos azules representan los fotogramas. Por ejemplo, un
smbolo con cinco fotogramas debe contar con un punto verde, tres puntos
azules y uno rojo en su trazado. La posicin del objeto en el trazado indica el
fotograma actual. Si el objeto aparece como en el tercer punto, el fotograma
actual es el 3.
Para cambiar la direccin de movimiento se puede modificar el ngulo del
trazado.


Para cambiar el movimiento o la direccin:
Arrastre alguno de los tiradores de inicio o de final de animacin del smbolo a
una posicin nueva. El punto verde indica el punto de partida y el rojo el del
final.
Para restringir la direccin de movimiento a incrementos de 45 grados,
mantenga pulsada la tecla Mays mientras arrastra.
Utilizacin de fotogramas
Las animaciones se construyen a partir de la creacin de varios fotogramas. El
contenido de cada uno de ellos puede verse en el panel Fotogramas. El panel
Fotogramas permite crear y organizar los fotogramas. Se puede asignar un
nombre a cada fotograma, reorganizarlos, establecer de forma manual los
tiempos de animacin y mover objetos de un fotograma a otro.
Pgina 69
Curso de Fireworks Animaciones
Pgina 70
Cada fotograma tiene una serie de propiedades asociadas. Mediante la
configuracin de la demora de fotogramas o la ocultacin de un fotograma
puede alterar el aspecto de la animacin a su gusto durante el proceso de
creacin y edicin.
Configuracin de la demora de fotogramas
La demora de fotogramas determina el tiempo durante el que se va a mostrar el
fotograma actual. Se especifica en centsimas de segundo. Por ejemplo, el
valor 50 hace que el fotograma se muestre durante medio segundo, mientras
que con el valor 300 se muestra durante tres segundos.
Para establecer el valor de demora de fotogramas:
1. Seleccione uno o varios fotogramas:
o Para seleccionar un rango contiguo de fotogramas, mantenga pulsada la
tecla Mays y haga clic en los nombres del primer y del ltimo
fotograma.
o Para seleccionar un rango no contiguo de fotogramas, mantenga pulsada
la tecla Control (Windows) o Comando (Macintosh) y haga clic en cada
nombre de fotograma.
2. Siga uno de estos procedimientos:
o Elija Propiedades en el men de opciones del panel Fotogramas.
o Haga doble clic en la columna Demora de fotogramas.
Aparece la ventana emergente Propiedades de fotograma.
3. Introduzca un valor para la demora de fotogramas.
4. Pulse Intro o haga clic fuera del panel para cerrar la ventana emergente.
Visualizacin y ocultacin de fotogramas durante la
reproduccin
Es posible mostrar u ocultar fotogramas durante la reproduccin. Si se oculta
un fotograma, ste no aparece durante la reproduccin y tampoco se exportar.
Para mostrar u ocultar un fotograma:
1. Siga uno de estos procedimientos:
o Elija Propiedades en el men de opciones del panel Fotogramas.
o Haga doble clic en la columna Demora de fotogramas.
Aparece la ventana emergente Propiedades de fotograma.
Curso de Fireworks Animaciones
2. Desactive Incluir al exportar.
Aparece una X roja en lugar del tiempo de demora de fotograma.

3. Pulse Intro o haga clic fuera de la ventana emergente Propiedades de fotograma para
cerrarlo.
Asignacin de nombres a fotogramas de animacin
A medida que se configura una animacin, Fireworks crea el nmero de
fotogramas adecuado y los muestra en el panel Fotogramas. Cada fotograma
recibe el nombre predeterminado Fotograma 1, Fotograma 2 y as
sucesivamente. Cuando se mueve un fotograma en el panel, Fireworks
modifica el nombre del resto para reflejar el cambio.
Se recomienda asignar un nombre a los fotogramas para facilitar la referencia y
el seguimiento. De este modo se sabe siempre qu parte de la animacin
contiene cada fotograma. Si se cambia el nombre de un fotograma y despus
se mueve, el nombre no cambia.




Para cambiar el nombre de un fotograma:
1. En el panel Fotogramas, haga doble clic en el nombre del fotograma.
Pgina 71
Curso de Fireworks Animaciones
2. En el cuadro de texto que aparece, escriba un nombre nuevo y pulse Intro.
Adicin, desplazamiento, copia y eliminacin de
fotogramas
En el panel Fotogramas se puede aadir, copiar y eliminar fotogramas y
tambin cambiar su orden.
Para aadir un fotograma nuevo:
Haga clic en el botn Fotograma nuevo/duplicado en la parte inferior del panel
Fotogramas.
Para aadir fotogramas en un punto concreto de la secuencia:
1. Elija Aadir fotogramas en el men de opciones del panel Fotogramas.
2. Introduzca el nmero de fotogramas que desee aadir.
3. Elija el punto de insercin: antes del fotograma actual, despus del mismo, o al
principio o final de la secuencia. Despus, pulse Aceptar.
Para copiar un fotograma:
Arrastre un fotograma existente hacia el botn Fotograma nuevo/duplicado de
la parte inferior del panel Fotogramas.

Para copiar un fotograma seleccionado y colocarlo en una secuencia:
1. Elija Duplicar fotograma en el men de opciones del panel Fotogramas.
2. Introduzca el nmero de duplicados que desea crear del fotograma seleccionado,
elija dnde deben insertarse y pulse Aceptar.
La duplicacin de un fotograma resulta til cuando se quiere que los
objetos vuelvan a aparecer en otra parte de la animacin.
Para volver a ordenar los fotogramas:
Arrstrelos uno a uno hasta una posicin distinta de la lista.
Para eliminar el fotograma seleccionado, realice uno de estos procedimientos:
Haga clic en el botn Suprimir fotograma del panel Fotogramas.

Arrastre el fotograma hacia el botn Suprimir fotograma.
Elija Suprimir fotograma en el men de opciones del panel Fotogramas.

Pgina 72

Anda mungkin juga menyukai