Trabajo publicado en www.ilustrados.

com
La mayor Comunidad de difusin del conocimiento
Realizado por: Adrian Salazar polisashi@yahoo.es
Estudiante de la UAIM Sistemas Computacionales Tercer Trimestre
Tutorial para Fireworks 4.0
ndice
Clase 1
Configuracin del rea de trabajo.
Caja de erramientas
!ectngulos" l#neas $ elipses
%tras &erramientas de tra'ado
(dicin $ remodelado de tra'ados editando los puntos
(dicin $ remodelado de imgenes
)nsertar imgenes
(fectos
%ptimi'acin $ e*portacin de grficos simples
Clase +
(nmascaramiento de imgenes
,ifts animados
Creacin $ organi'acin de capas
istorial del documento
-.s/ueda $ reempla'o
Clase 0
1#mbolos e instancias
Creacin de 'onas interacti2as $ mapas de imagen
)ntroduccin de 2alores 3!4 absolutos o relati2os
(*portacin como T54
Clase 4
-arras de na2egacin
)mportacin con 'onas de di2isin
!ollo2ers simples
Clase 1
Al entrar a Fireworks nos encontramos, ms o menos (puede variar de acuerdo a la
configuracin que le d el usuario, con la siguiente pantalla!
A"ora nos toca definir el rea de tra#a$o, que en este caso llamamos %lien&o% (canvas, as' que
vamos a 6rc&i2o(File(7ue2o()ew, y nos aperece esta ventana, que sirve para configurarla!
*n ella se nos dan las opciones para determinar el anc&o (widt" y el alto ("eig" del lien&o+ la
resolucin (que en el caso de dise,o we#, se suele determinar en -. pi/els+ y el sistema de
medidas que queremos utili&ar! pi/els, pulgadas (inc"es, o cent'metros0 )osotros utili&aremos
pi/els, por ser el sistema ms utili&ado en medidas para dise,o we#0
*n la misma ventana podemos ver, adems, las opciones para determinar el color que llevar
el %lien&o% o area de tra#a$o0
1ero es de notar que, aunque definamos un color determinado, aun nos da la opcin de
utili&arlo de color #lanco, o transparente0
2na ve& definidas las propiedades del lien&o, ya estamos listos para tra#a$ar0
1or empe&ar, fi$monos que a la i&quierda o en alg3n lugar de la pantalla, encontramos la
siguiente %ca$a de "erramientas%!
4on 5- "erramientas, algunas de las cuales cam#ian seg3n lo que se tra#a$e! di#u$os o pi/eles0
*n la ta#la siguiente, sacada del manual oficial de Fireworks, se descri#en las funciones
#sicas de cada "erramienta en cada modo!
erramienta (n el modo de objeto
(n el modo de edicin de
imgenes
8untero
4elecciona y mueve tra&ados en la
pantalla0
6ueve la imagen o los pi/eles
agrupados mediante un
recuadro0
7aga do#le click en una
imagen para editar los pi/eles
que la componen0
1eleccionar detrs
4eleccciona un o#$eto situado detrs
del o#$eto seleccionado0
6ueve la imagen o los pi/eles
agrupados mediante un
recuadro0
1eleccionar en ni2el 4elecciona y mueve recuadros en la 6ueve la imagen o los pi/eles
inferior
pantalla, selecciona un o#$eto de un
grupo o un s'm#olo0 6uestra los puntos
de un tra&ado y selecciona puntos0
agrupados mediante un
recuadro0
!ecuadro o recuadro
el#ptico
Activa el modo de edicin de imgenes
y selecciona un area de pi/eles
rectangular o el'ptica0
4elecciona un area de pi/eles
rectangular o el'ptica0
4a'o o la'o poligonal Activa el modo de edicin de imgenes
y selecciona un area de pi/eles de
estilo li#re
selecciona o mueve un area de
pi/eles de estilo li#re0
9arita mgica
Activa el modo de edicin de imgenes
y selecciona un area formada por
pi/eles de color similar0
4elecciona un area formada
por pi/eles de color similar0
4#nea $ formas
bsicas
8i#u$a o#$etos como tra&ados que se
pueden editar0
1inta pinceladas de pi/eles en
un o#$eto de imagen0
8luma
8i#u$a o#$etos como tra&ados que se
pueden editar0
Activa el modo o#$etos y di#u$a
o#$etos como tra&ados que se
pueden editar0
Te*to
Crea y edita #loques de te/to y a#re el
editor de te/to0
Activa el modo de o#$etos, crea
#loques de te/to, y a#re el
editor de te/to0
4pi'
8i#u$a tra&os de lpi& de un pi/el como
tra&ados de estilo li#re0
8i#u$a tra&os de lpi& de un
pi/el0
8incel
8i#u$a pinceladas como tra&ados0 1inta pinceladas como pi/eles0
(stilo libre
*stira o contrae un tra&ado
seleccionado para cam#iar la forma del
mismo0
Activa el modo de o#$eto0
!emodelar area
9emodela las partes de un tra&ado
seleccionado que estn inclu'das en el
cursor %remodelar area%
Activa el modo de o#$eto0
:epurador de tra'ados 6odifica las caracter'sticas de presin y
velocidad de un tra&ado sin modificar su
forma0
Activa el modo de o#$eto0
Cuc&illo;borrador
*n el modo de o#$etos esta "erramienta
se convierte en Cuc"illo0 Corta un
tra&ado seleccionado para crear varios
tra&ados0
*n el modo de edicin de
imgenes esta "erramienta se
convierte en :orrador0 :orra
pi/eles de una imagen0
1ello
Activa el modo de edicin de imgenes
y duplica partes de un o#$eto de
imagen0
8uplica partes de un o#$eto de
imagen0
rramienta correspondiente0
.; 9entana (<indow(%bjeto (=#$ect0 = Alt>F.
5; Le aparecer una ventana como esta, la de %=#$eto%!
*n esta ventana 2d0 tiene opciones para darle un determinado ngulo de %redondeado%
(roundness a las puntas del rectngulo, y para poner el tra&o, "acia adentro, centrado, o "acia
afuera con respecto al o#$eto (stroke0
?; 8i#u$e un rectngulo con la "e
4i va a di#u$ar un pol'gono , le aparecern las opciones para elegir duntos lados (sides
quiere que este tenga0 @ f'$ese que la opcin Angulo (angle est des"a#ilitada+ pues #ien, esta
se "a#ilita cuando elegimos la forma de estrella dentro de %s"ape%0
*n la forma de estrella (star, los %slides% pasan a ser la cantidad de puntas que tendr la
estrella, y el %angle% ser el ngulo de apertura que tendrn las puntas de la estrella0
Otras herramientas de trazado:
4pi' ! es para di#u$ar a mano al&ada0 *l tra&o a#ierto se finali&a normalmente en
cualquier lugar0 *l tra&o cerrado, se finali&a en el mismo lugar donde se empe&0 A la figura
resultante se le puede dar relleno0
8incel ! La "erramienta 1incel permite pintar pinceladas de estilo li#re, mientras que la
"erramienta Lpi& di#u$a tra&os de lpi& de un p'/el0
8luma ! 4irve para reali&ar tra&ados segmento por segmento0 Los nodos resultantes en
este tra&ado, poseen su#;nodos que ayudan a la modificacin en la curva de alguno de esos
segmentos
*l tra&ado, color, efecto y otras caracter'sticas, son modifica#les desde la ventana de tra&ado
(stroke0 1ractique con algunas de las posi#ilidades que le #rinda, pero tome en cuenta que
efectos tales como %te/ture%, slo son visi#les cuando el tra&o es #astante grueso0
Aanto las imgenes creadas con las "erramientas de di#u$o, como los tra&os cerrados creados
con las "erramientas de tra&o, pueden ser modificadas desde las ventanas de 9elleno y :orde
(Fill y 4troke a las que se accede desde el men3 ventana (<indow0
Edicin y remodelado de trazados editando los puntos:
Algunos puntos so#re este tema, sacados del manual oficial de Fireworks! %Los puntos son la
estructura de los o#$etos de tra&ado en Fireworks0 Cuando se di#u$a en el modo de o#$etos con
cualquier "erramienta de di#u$o de Fireworks, el tra&ado de resultado se definir por los puntos
especificados al di#u$ar0 *l tipo de punto y el aspecto curvo o recto de las l'neas adyacentes
estn relacionados directamente!
; 2n punto curvo indica que los segmentos adyacentes son curvos y se mantienen transiciones
suaves y regulares entre segmentos0
; 2n punto de esquina indica que al menos uno de los segmentos adyacentes es una l'nea
recta
Las dos "erramientas ms convenientes para reali&ar la modificacin de los tra&ados mediante
la edicin de puntos, son las de 1luma y )ivel inferior 0
Edicin y remodelado de imgenes:
Las imgenes aparecen seleccionadas por defecto con una delgada l'nea a&ul0 7aciendoclic en
cualesquiera de sus nodos con la "erramienta de 4eleccin , podemos distorsionar el
tama,o, aunque no su forma0 1ero si queremos cambiar el tama<o conser2ando las
proporciones, de#emos utili&ar la "erramienta *scalar , pero tome en cuanta que estas
proporciones se conservarn 4BL= si tra#a$a con los nodos de las esquinas de la imagen, no
los de los lados0
Al utili&arla, la imagen aparece seleccionada como muestra la figura0 La imagen a&ul es la
original, mientras que el #orde punteado que so#resale, muestra el aumento de tama,o que se
est e$ecutando, pero, ntese, este aumento es de modo 19=1=9CC=)AL, tanto vertical
como "ori&ontalmente, siempre y cuando los cam#ios se "agan pinc"ando en los nodos de las
esquinas0
=tra de las opciones que da la "erramienta de escalar, es la de girar el o#$eto0 *sto se
consigue cuando se coloca el mouse entre dos nodos de la figura, y el cursor adopta la forma
de una curva de giro0
*n el 3nico caso en que se pueden cam#iar tanto el tama,o como la F=96A original de las
imgenes, es en el de las di#u$adas mediante las "erramientas de di#u$o, y con la "erramienta
)ivel inferior pinc"ando en alguno de los nodos de la imagen0 *n la imagen de la i&quierda
se puede ver un %e/;cuadrado%, modificado de este modo
Importar imgenes:
?; 6en3 6rc&i2o (File( )mportar (Cmport0 = #ien el #otn )mportar (import , en la #arra
superior de "erramientas
.; 4eleccionar la imagen que se va a importar0
5; =D o Aceptar0
Las imgenes se insertan con su tama,o y peso original0 *n caso que el tama,o del lien&o
(canvas difiera con el de la imagen porque la imagen es ms peque,a, podemos arreglar esta
diferencia mediante el comando !ecortar (Trim can2as del men3 5odificar (6odify0 4i en
cam#io la imagen insertada es ms grande que el tama,o del lien&o, podemos usar la opcin
Fit Can2as0 Am#as opciones adaptan el lien&o al tama,o de la imagen0
*n caso que las imgenes de#an ser insertadas desde un 4canner, es aconse$a#le determinar
la resolucin en .EE dpi, y no en -., como es com3n para resolucin we#, ya que de esta
manera se o#tiene C)CCCAL6*)A* una imagen de #uena calidad, la que despus puede ser
optimi&ada para we#0
Efectos:
4on aplica#les tanto a las imgenes reali&adas con las "erramientas de di#u$o, como a
aquellas que insertamos desde fuera de Fireworks0 1ara aplicarlos de#emos tener,
primeramente, seleccionada la imagen a la que queremos aplicarlos, y luego ir al men3
9entana(<indow( (fectos(*ffect0 *ntonces aparecer esta ventana!
*n principio aparece sin ning3n efecto
seleccionado0
1ero al desplegar el men3 aparecern las opciones
para optar por alguno de ellos, o por los efectos que se
utili&an por defecto (use defaults
0
Los efectos %por defecto% son cuatro!
; Cnner :evel
; =uter :evel
; 8rop 4"adow
; Flow
@ cada uno de ellos posee un men3 desplega#le (que
se activa al "acer clic en la %i% a&ul que se ve en la
imagen para configurar en detalle cada uno de los
efectos que se eli$an0
Aunque #revemente, les mostrar algunos de estos efectos en una imagen!
Cnicialmente tenemos esta
imagen!
La misma imagen con %=uter
#evel% (puse el efecto en otro
color para que se note0
La misma imagen con
%Cnner #evel%
La misma imagen con %drop
s"adow% ( la t'pica %som#ra%0
La misma imagen
con %Flow%
(nuevamente el
efecto en otro color
)oten que estos efectos siempre se reali&an del
#orde para afuera o para adentro de la imagen0 1or
e$emplo! %Cnner :evel% y %=uter #evel%, se ven muy
parecidos, pero el primero se reali&a del #orde para
adentro, y el segundo del #orde para afuera0
=tra de las opciones para aplicar efectos es la de utili&ar la
%Li#rer'a de estilos%, que se activa mediante el men3
9entana (<indow, y luego (stilos (4tyles0
Fireworks tam#in le da la posi#ilidad de crear
sus propios estilos e incorporarlos a la lista de los
que ya e/isten0
1ara eso de#e partir de una imagen e/istente a la
que 2d0 le "aya aplicado los distintos efectos y
estilos que quiera incorporar0
1; 4eleccionar la imagen0
+; 7aga clic en el #otn (stilo 7ue2o ()ew 4tyle
de la ventana de estilos!
Aparecer la ventana de *stilo nuevo,
en la que 2d0 podr elegir las
propiedades que el nuevo estilo
tomar de su imagen, y el nom#re que
tendr este nuevo estilo0

Optimizacin y exportacin de grficos simples:
1ara la primera parte de este tra#a$o nos mane$amos #sicamente con dos elementos que nos da
Fireworks! las opciones de previsuali&acin (preview, y las opciones de optimi&acin0
Aenemos "asta cuatro opciones de previsuali&acin0 8e ellas, elegimos la que nos pare&ca ms
apta como producto final0
Las opciones que aparecen en cada uno de los %preview% nos se,alan! el tipo de arc"ivo (en este
caso es un G1F+ el peso de la imagen+ y el tiempo que tardar'a en #a$ar mediante un mdem de
.H0Hk#ps0 4e utli&a a propsito esta referencia de un mdem lento, para darnos una idea de lo que
tardar'a nuestra imagen en una mala cone/in0 @ es un #uen estndar de prue#a, pues nos o#liga a
tratar de #a$ar el tama,o de las imgenes al m/imo posi#le0 4i nos diesen como par metro un a
cone/in de ca#le o fi#ra ptica, estar'amos dise,ando slo para el mercado de usuarios
concone/iones rpidas, y, sa#emos todos, estos no son la mayor'a0
La segunda parte de la optimi&acin se reali&a en la ventana
correspondiente, a la que accedemos mediante 9entana
(<indow ( %ptimi'ar (=ptimi&e0 *l primer men3 con que no
encontramos, nos da opciones para configurar la imagen de
acuerdo a distintos parmetros grficos0 )tese que la mayor'a
no "acen referencia a formatos aptos para we#, sino para
grfica, y "asta para definir la imagen como gif animado antes
de e/portarla0
*l segundo nos da a optar por varias paletas, seg3n se vaya a
e/portar seg3n la configuracin de color del monitor del usuario,
para <e#+ #a$a calidad en <e#, 6acintos", escala de grises,
#lanco y negro, etc0
*l tercero es propiamente %settings%, o sea, el %seteo% o
%configuracin% de la imagen, pero esta ve& con parmetros
ms aptos para <e#0
1or a"ora, estos son los conocimientos #sicos que nos sirven
para e/portar adecuadamente una imagen0 :astar'a agregar las
opciones que aparecen cono 1 y +0
La 1 sirve para guardar un seteo particular como un estilo ms
que podemos volver a aplicar en otra imagen+ y la + para #orrar
alguno que ya tengamos guardado0
2na ve& optimi&ada la imagen, slo falta e/portarla a la carpeta que tengamos designada a tal
efecto0 1ara eso vamos a ir al men3 6rc&i2o (File( (*portar (*/port, o directamente al #otn
*/portar de la #arra de "erramientas superior0 Luego seleccionamos la carpeta donde queremos
guardar el arc"ivo, le ponemos un nom#re, y finalmente aceptar0
Clase +
Enmascaramiento de imgenes:
%Las mscaras se crean agrupando dos objetos en un grupo de mscara *l o#$eto superior (la
mscara se utili&a para crear un efecto de recorte so#re el o#$eto inferior0 1uede utili&ar tanto
una imagen como un o#$eto con tra&ados como o#$eto superior de la mscara% (del manual
oficial de 6acromedia0
*n este caso tenemos los dos o#$etos a utili&ar!
una elipse, que actuar de mscara, y la foto o
imagen que queremos enmascarar0
Aomemos la precaucin de que la mscara (en
este caso, la elipse est por so#re el o#$eto a
enmascarar0
Luego, aplicamos ;5odificar (6odify( ;5scara
(6ask( ;6grupar como mscara (Froup as
6ask0
*n este caso, no importa el color de la imagen
que vaya a actuar de mscara (aqu' es la
elipse negra, porque se encuentra 4=:9* la
imagen a enmascarar, pero ntese qu es lo
que pasa cuando esta misma elipse se "alla
1=9 8*:AG= del o#$eto!
*n este caso, como la
mscara era negra, la
figura tom toda la
escala de grises del color
que ten'a de#a$o
8e a"' podemos concluir que,
cuando la mscara se "alla
por de#a$o del o#$eto, este
adoptar la gama de colores
que le defina la mscara0
*n la foto de la derec"a, la
mscara era color #ord0
Gifts animados:
%2na animacin FCF est formada por una serie de imgenes fi$as que aparecen de forma
consecutiva a gran velocidad, lo que permite perci#irlas como una imagen en movimiento0 Al
crear una animacin en Fireworks, cada imagen se sit3a en un fotograma distinto0 A
continuacin, todas las imgenes de una animacin se e/portan en un arc"ivo FCF animado0
*n Fireworks es posi#le a#rir y editar animaciones FCF e/istentes o crear otras nuevas%0
(6anual oficial de 6acromedia
*sto implica que para crear un FCF animado de#emos tener, en primera instancia, esa %serie de
imgenes fi$as% que lo conformarn, ya sean dise,adas por nosotros o provistas por otros
medios0
1rimeramente vamos a ver un e$emplo con una imagen importada0 *n este caso, importamos
un gif animado0
Al importar el gif, nos aparecer la
siguiente ventana0 *n ella se nos
pregunta si queremos que se agreguen
los Fotogramas (frames necesarios
para conservar la animacin0 *s decir,
cada frame contendr una de las
imgenes de la animacin0
=#viamente, en este caso, le
responderemos =D0
:ien, aqu' tenemos ya el gif en el lien&o, y
al lado se ve la ventana de frames0
Acurdense que cada frame es una
imagen0
4i visemos todos los frames al mismo
tiempo se ver'a algo como lo de la imagen
inferior0
:ien, pero, para qu importamos un gif animado a
Fireworks, si pensamos volver a e/portarlo como gif
animadoI 1ues para optimi&arlo0 Las opciones son pocas,
pero las "ay0 1or a"ora, en este nivel de aprendi&a$e,
conviene que tengamos en claro que, una ve& definido
como Fif Animado (tal como se marca en la imagen, el otro
parmetro de optimi&acin que nos queda es la cantidad de
colores0
Finalmente, para pro#ar el producto final, "acemos clic en el #otn 1lay,
a#a$o a la i&quierda, en la ventana del documento 0 @ all'
veremos la animacin en curso0 @ a"ora 000 slo #asta pedirle tres
deseos 000
*n un segundo e$emplo vamos a ver cmo crear un gif animado desde cero, y lo "aremos
ela#orando algo muy utili&ado en las pginas we#! un #anner pu#licitario, pero uno discreto, de
.JE/KE0 9ecordemos, que los gifs animados son secuencias de imgenes, por tanto, para
empe&ar desde cero, de#emos crear esas imgenes0
Creamos
entonces la
primera imagen!
la idea de la
animacin es
que la l'nea
punteada ? corra
"acia la derec"a,
y la . "acia la
i&quierda,
mientras que el
te/to pasa de
i&quierda a
derec"a0
Fi$monos que
A=8= est en
un slo frame,
as' que, con la "erramienta %8uplicar fotograma%, que est marcada como 5, creamos un
fotograma nuevo0
*n el segundo
fotograma
pegamos
e/actamente los
mismos
elementos, en la
misma posicin
(con Copiar y
1egar, y luego
movemos cada
uno de ellos al
lugar que le
corresponder'a
en el segundo
cuadro de
animacin0 @ as'
sucesivamente
"asta completar toda la animacin0
Finalmente
tenemos todos
los fotogramas
correspondientes
a cada instancia
de la animacin,
y "emos ido
moviendo,
fotograma por
fotograma, cada
uno de los
elementos0
)tese que en
los 3ltimos
fotogramas
duplicamos el
te/to y lo "icimos
aparecer por la
i&quierda para crear la ilusin que aparec'a por ese lado a medida que desaparec'a por la
derec"a0 *l paso siguiente es, en la "erramienta marcada en ro$o, poner cuntas veces se
repetir la animacin, si no se repetir nunca, o como est configurado en este caso! %forever%,
o sea, la repeticin o %loop%, ser continuo0
A continuacin se optimi&a como gif animado del modo
"a#itual,se e/porta, y aqu' tenemos el resultado final!
Con respecto a los efectos que podemos aplicar a los FCFLs animados, slo resta se,alar dos
cosas!
?; Los efectos referidos a som#ras y te/turas, son los mismos aplica#les a cualquier imagen0
.; Los que estn referidos al movimientos de las imgenes "a#r que determinarlos por medio
de una conveniente distri#ucin en los distintos frames0
Con respecto a la optimi'acin $ e*portacin de un FCF animado!
?; 1ara la optimi&acin de las imgenes que componen la animacin, de#en tenerse
seleccionados todos los frames0
.; La e/portacin es e/actamente igual que en un FCF no animado, slo que en el mismo
proceso de optimi&acin "ay que especificar que la e/portacin ser como FCF animado0
Creacin y organizacin de capas:
%Las capas dividen los documentos de Fireworks en planos discretos, como los elementos de
una ilustracin que se di#u$an en distintas "o$as superpuestas transparentes0 Cada o#$eto de
un documento reside en una capa0 1uede crear todas las capas antes de comen&ar a di#u$ar o
ir a,adindolas cuando sea necesario0 Aam#in puede reorgani&ar el orden de apilamiento de
las capas o de los o#$etos de una sola capa%0(6anual =ficial de 6acromedia
La ventana que nos permite tra#a$ar con las capas
(layers, la podemos visuali&ar desde el men3
9entana(<indow(Capas(Layers0
1or defecto, el lien&o nos aparece con dos capas!
la capa we#, en donde posteriormente u#icaremos
los o#$etos de &ona interactiva+ y la capa ?0
Los o#$etos que 2d0 vaya di#u$ando, aparecern
por defecto en la capa ?, pero 2d0 tiene la
posi#ilidad de agregar ms capas mediante el
#otn 6gregar capas0
*l "ec"o de tra#a$ar en capas le dar la posi#ilidad
de tra#a$ar con diversos efectos0
*n un documento recin a#ierto, inserte una foto0 *sta aparecer en una capa
independiente de la capa ?0 1osicinese en la capa ? "aciendo clic so#re ella y di#u$e
una figura geomtrica cualquiera (recuerde que estamos pro#ando, y luego colquela
so#re la figura
0
*n el men3 desplega#le que se muestra en la
imagen, se pueden encontrar los efectos
disponi#les para tra#a$ar en capas, pero no
olvidemos que esto depender del color de la
figura que usemos en la capa que actuar de
mscara0
4i "acemos clic en el o$o correspondiente a cada
imagen, veremos que esta se o culta o se
muestra, seg3n se oculte o apare&ca el o$o0 @ la
presencia del lpi& $unto a alguna imagen, nos
indicar que se est tra#a$ando o que se tiene
seleccionada esa imagen0
Historial del documento:
%*l panel 7istorial permite ver, cam#iar y repetir el "istorial del documento0 *n este panel se
enumeran las acciones ms recientes que se "an reali&ado en Fireworks, conforme al n3mero
especificado en 1asos de des"acer%0 (6anual de 6acromedia
= sea que con el "istorial podemos!
?; 8es"acer y re"acer comandos frecuentes0
.; 4eleccionar un n3mero determinado de comandos reali&ados para repetirlos0
5; 4eleccionar y guardar un grupo de comandos recientemente reali&ados, para guardarlo
como un solo comando0
A#ra la ventana del
"istorial con el men3
9entana(<indow(
istorial(7istory0 A"'
podr ver las acciones que
"a ido reali&ando, desde la
primera a la 3ltima, de
arri#a "acia a#a$o0
4i selecciona una de las
acciones y luego presiona
el #otn 9ol2er a
reproducir (9eplay,
o#viamente repetir esa
accin0
4i selecciona una o ms acciones y
luego presiona el #otn ,uardar
como comando, aparecer una
ventana en donde le pedir el
nom#re para el nuevo comando0
1osteriormente, cuando vuelva a
necesitar esa accin o con$unto de
acciones, las encontrar agrupadas
en un solo comando dentro del men3
Comando0
Bs!ueda y reemplazo:
)os falta "acer referencia a"ora a la ventana de #3squeda y
reempla&o, similar en tareas a las que encontramos en los
procesadores de te/to0 La venta$a consiste en que podemos
"acerlo con otros elementos, adems de te/to!
"Utilice Buscar y reemplazar para buscar y reemplazar
elementos, como texto, valores URL, fuentes y color, en un
documento !on Buscar y reemplazar se puede buscar en
el documento actual o en varios arc"ivos a la vez #urante
el uso de Buscar y reemplazar, $ire%or&s puede efectuar un
seguimiento y guardar un registro de cambios en el panel
'istorial del proyecto Buscar y reemplazar s(lo funciona
con arc"ivos )*+ de $ire%or&s o con arc"ivos ,ue
contienen objetos vectoriales, como arc"ivos $ree'and,
!orel#R-. e /llustrator"0 (6anual de 6acromedia
La ventana de :3squeda y reempla&o aparece desde el
men3 9entana(<indow(-uscar $ reempla'ar(Find and
replace0
Clase 0
"#m$olos e instancias de $otones:
%2tilice s'm#olos e instancias para simplificar las animaciones de Fireworks y facilitar el tra#a$o
de edicin0 Las instancias son representaciones de un o#$eto Fireworks original, que reci#e el
nom#re de s'm#olo0 Cuando se modifica el o#$eto s'm#olo (original, las instancias (copia
cam#ian automticamente para refle$ar las modificaciones efectuadas en el s'm#olo0
1uede utili&ar s'm#olos e instancias para modificar fcilmente ilustraciones comple$as que
contienen varias copias de o#$etos, compartir componentes a travs de estados de rollover y
crear y modificar animaciones rpidamente0 Los s'm#olos se almacenan en el panel :i#lioteca0
4e puede crear un s'm#olo a partir de cualquier o#$eto, te/to o grupo0 Los s'm#olos pueden
incluir otros s'm#olos%0 (6anual de 6acromedia
1ara crear un s'm#olo tenemos dos opciones dentro de
)nsertar(Cnsert! 7ue2o botn ()ew :utton, y 7ue2o
s#mbolo()ew 4ym#ol0 La primera de estas opciones
est diferenciada por su uso fecuente, ya que
Fireworks le da la opcin de armar #otoneras de modo
fcil y prctico (como a"ora veremos0 La segunda es
para crear otros s'm#olos, ya sean grficos, o
animaciones simples por medio de varios frames, del
mismo modo en que vimos se "acen los gifts
animados0
Mamos a empe&ar
entonces por crear un
#otn0 As' que elegimos
7ue2o botn ()ew
:utton, y nos aparece
esta ventana0
F'$ese que tiene cinco
solapas superiores,
correspondientes a cinco
instancias que iremos
viendo de a una0
*n la primera de ellas
(3p, de#emos construir
el #otn tal cual se ver
por defecto en nuestra
pgina0
1asamos a la segunda
solapa (%2er0 *n ella
determinaremos cmo se
2er el botn cuando el
mouse pase sobre =l0
1ara ello, primeramente
presionamos el #otn
Cop$ 3p grap&ic0 Con
esto estaremos copiando
e/actamente lo mismo
que "ay en la solapa 2p,
y en la misma u#icacin0
2na ve& copiado,
modificamos el #otn con
el efecto que queramos se
vea en =ver0 *n este caso
le "emos dado un color
ms claro para dar la
sensacin de que se
ilumina, pero los efectos
pueden ser muc"'simos!
de color, tama,o, forma,
etc0
1asamos a la tercera
solapa (:own0 *n ella
determinaremos cmo se
2er el botn cuando
&agamos click sobre =l
$ /uedemos en la
pgina a la /ue nos
lle2a0 *l procedimiento es
igual al anterior! primero
copiamos lo mismo que
"ay en =ver con el #otn
Cop$ %2er ,rap&ic, y
luego modificamos o no el
#otn, seg3n nuestra
preferencia0
@ aqu' ser'a necesario
recordar lo siguiente! un
elemento o una pgina
%eb, no son mejores o
ms agradables a la vista
por,ue est0n plagadas de
"efectos" o "adornos"0 La
eleccin de determinado
efecto depende siempre
del conte/to de dise,o, la
finalidad de la pgina, sus destinatarios, o el producto que presenta0 1or eso, siempre "a#r que tomar en
centa que una de las opciones puede ser %no innovar%! pocos efectos, o efectos so#rios0
1asamos a la cuarta
solapa (%2er >&ile
:own0 Aqu', el
procedimiento es similar,
pero con el #otn Cop$
:own ,rap&ic0 *n ella
determinaremos cmo se
2er un ?rollo2er? sobre
el botn cuando
estemos en el link al
cual nos condujo0 1or
e$emplo, supongamos que
"acemos clic en el #otn
que dice %formulario% y
nos conduce a una pgina
llamada %formulario%, pero
la #otonera (los #otones
de navegacin sigue
siendo la misma0 *l #otn
puede aparecer a"ora de
alguna manera que le
diga al usuario,
visualmente, que est en
%formulario%0 *se modo
visual puede ser que est
ms claro, ms o#scuro, o cualquier otro efecto que "aga resaltar ese #otn del resto de los #otones0
:ien, esa instancia es precisamente el %2er >&ile :own0
1asamos a la cuarta
solapa (6cti2e 6rea0 *n
ella se nos muestra qu
tan grande es el rea
activa que actuar como
link para este #otn0
Adems, tenemos el
#otn 4ink >i'ard, que
nos guiar paso a paso
para darle las
propiedades propias de
un link a este #otn0
Aqu' es conveniente
aclarar lo siguiente!
)tese que el rea activa
es m,s grande que el
#otn+ pues #ien, "ay que
ac"icarla s' o s', pues
corremos el riesgo que, al
colocar $untos los
#otones, se superpongan
sus respectivas reas
interactivas0 *sto se "ace
clickeando so#re el rea y
ac"icndola desde sus
nodos0 62C7= C2C8A8=NN *n este caso "icimos que una de las instancias del #otn lo agrandara, por
tanto, al ac"icar el rea interactiva no de#eremos "acerlo a los #ordes que se ven (que son lo de su
instancia ms grande, sino a los #ordes del tama,o natural del #otn0
Aerminada la ela#oracin de todas las instancias, y para que el #otn pueda ser visto como tal, slo
de#emos cerrar la ventana del #otn0
As' aparecer el #otn en el lien&o
(Canvas, pero si le molesta que se vean
las reas interactivas, puede utili&ar el
#otn para ocultarlas (marcado con c'rculo
ro$o que aparece en la ca$a de
"erramientas0
1uede surgir entonces la siguiente pregunta! si tengo que
"acer varios #otones0000000000tengo que "acerlos uno por
unoI0 Afortunadamente no, con copiar y pegar el mismo
#otn, #asta para empe&ar0 1ero, tome en cuenta que el
segundo #otn tendr e/actamente las mismas
propiedades que el primero, as' que, para cam#iarlas,
"aga do#le clik so#re el segundo #otn0 Aparecer esta
ventana, que le pregunta acaso quiere cam#iar las
instancias slo del #otn seleccionado (Current, o de
todos los que e/isten (6ll0 =#viamente, en este caso,
seleccionamos Current0
4e nos volver a a#rir la ventana correspondiente al #otn seleccionado, donde pordremos cam#iar las
caracter'sticas de este, sin modificar las del anterior0
*n este caso queremos slo cam#iar el
te/to del segundo #otn y ponerle
%:otn .%0 *sto se "ace por los medios
"a#ituales0 Meremos que al querer
confirmar el te/to en el nuevo #otn,
aparecer la siguiente ventana! esta
nos pregunta si queremos actuali&ar los
cam#ios en A=8A4 las instancias de
este #otn o slo en esta primera0
=#viamente, en este caso
respondemos @*40
Oltimo paso! a$ustar el lien&o a la #otonera (Arim canvas, y e/portarla como un 7A6L de Fireworks con
los siguientes parmetros de#idamente seteados (configurados!
=#viamente, al ser e/portado como 7A6L de Fireworks, de#er ser insertado como tal
dentro de la pgina, y no como una simple imagen0 *sto se reali&a mediante el #otn
correspondiente , por lo menos en 8reamweaver0 La #otonera aqu'
presente no tiene links, pero es un #uen e$emplo de una simple0
8el mismo modo en que insertamos un #otn, podemos
insertar un grfico, mediante )nsertar (Cnsert( 7ue2o
s#mbolo ()ew 4ym#ol( ,rfico (Frap"ic, y en ventana
que aparece le ponemos un nom#re al grfico0 Los grficos
son grficos de cualquier tipo0 ya sean di#u$ados por
nosotros, ya sean importados de otro arc"ivo, ya sean
imgenes fotogrficas0 La venta$a es que estos quedan
almacenados en la li#rer'a, a la que accedemos mediante
9entana (<indow( 4ibrer#a (Li#rary0 2na ve& en ella, si
necesitamos un grfico igual, #astar con arrastrarlo desde
la li#rer'a "asta el lien&o, sin necesidad de crearlo
nuevamente0
9especto a la opcin que nos da Fireworks J para insertar
(como un s'm#olo ms una animacin, #astar decir que
es lo mismo que crear un gift animado cualquiera, con la
diferencia que, si lo creamos como animacin, queda
disponi#le para otras oportunidades dentro de la li#rer'a0

Creacin de zonas interacti%as y mapas de imagen:
%Al acceder a la pgina principal de la mayor'a de sedes <e#, lo ms pro#a#le es que
encuentre un mapa de imgenes0 2n mapa de imagen es un grfico o grupo de grficos que
aparece en una pgina <e# y que dispone de reas especiales
denominadas &onas interactivas0 La u#icacin y el tama,o de la &ona interactiva se definen en
el arc"ivo 7A6L de la pgina <e#0 Al despla&ar el cursor so#re una &ona interactiva, ste
adquiere la forma de una mano peque,a0 )ormalmente, al "acer clic en una &ona interactiva se
a#re una pgina <e# y para esto, se "ace referencia a la direccin 29L que se le "a asignado
en el cdigo 7A6L0
*l proceso de creacin de un mapa de imagen en Fireworks sigue estos tres pasos generales!
Creacin del mapa de imagen en el documento 1)F de Fireworks
*/portacin del grfico y de los arc"ivos 7A6L
2#icacin del 7A6L del mapa de imagen en la posicin adecuada de la sede
<e# o en otro arc"ivo 7A6L%0 (6anual =ficial de 6acromedia
1ara crear un mapa de imagen es necesario, primeramente, elegir un grfico de origen, que
puede ser una serie de #otones, ventanas, una lista de t'tulos o cualquier imagen desde la que
se determinarn las &onas interactivas que compondrn el mapa de imagen0
*l arc"ivo 1)F de Fireworks en el que se crea el mapa de imagen no es el mapa de imagen en
s'0 1ara crear un mapa de imagen en un navegador <e#, es preciso com#inar el grfico
e/portado y los arc"ivos 7A6L0
1ara crear las &onas interactivas tenemos la "erramienta
Pona interactiva en cualquiera de sus tres modalidades
seg3n la &ona que deseemos sea
cuadrangular, circular o poligonal0 1osteriormente, la
asignacin de v'nculos (valores 29L a esas &onas, se "ar
mediante la ventana correspondiente, que aparece al tener
seleccionada la &ona interactiva y de a"' a 9entana
(<indow( %bjeto (=#$ect0
*n esta ventana aparecen las opciones para!
1@ 8eterminar la direccin 29L0
+@ 8eterminar el te/to que aparecer en el Alt con el
mouse0
0@ 8eterminar el modo en que se a#rir la ventana (self,
#lank, etc
4@ *l color a utili&ar en la mscara we#0
A@ La forma que le daremos a la mscara we#0
5apeo de imagen conclu#doB
1or e$emplo, en la siguiente imagen, "emos %mapeado% los o$os y la #oca, es decir, estas son &onas
interactivas que nos remiten a un link determinado0 Las &onas de los o$os "an sido reali&adas con la
"erramienta de &ona interactiva circular, y la de la #oca, con la poligonal0
Introduccin de %alores &'( a$solutos o relati%os:
Los valores 29L que se introducen en el inspector =#$eto o en el panel 29L pueden ser
a#solutos (e/ternos o relativos (internos! 4i desea esta#lecer un 2#nculo con una pgina
>eb /ue no pertene'ca a su sitio >eb, de#e utili&ar una direccin 3!4 absoluta0 1ara
esta#lecer un 2#nculo con una pgina >eb de su sitio <e#, puede utili&ar una direccin 29L
a#soluta o relati2a0
Los valores 29L a#solutos (e/ternos son direcciones 29L completas que incluyen el protocolo
de servidor, que suele ser "ttp!QQ en el caso de pginas <e#0 1or e$emplo,
"ttp!QQwww0macromedia0comQsupportQfireworks es la direccin 29L a#soluta de la pgina <e#
de asistencia tcnica de 6acromedia Fireworks0 Aunque los valores 29L a#solutos son
siempre direcciones e/actas que no dependen de la u#icacin del documento origen, los
v'nculos no se esta#lecen correctamente si se traslada el documento de destino0
Los valores 29L relativos (internos estn relacionados con la carpeta que contiene el
documento origen0 Los valores 29L relativos suelen ser los ms fciles de utili&ar para
esta#lecer un v'nculo con arc"ivos que van a permanecer en la misma carpeta que el
documento actual0
Clase 4
Barras de )a%egacin:
Mamos a crear a"ora una verdadera #arra de navegacin, con lo que com3nmente se conoce
como %men3es pop;up%0 *n la clase 5 ya "a#'amos creado una muy simple, #sica, que
llamamos %#otonera%, pero a"ora crearemos una ms comple$a, un estilo que antes se pod'a
crear slo mediante programacin, y que la nueva versin de Fireworks facilita0
*l dilema que nos o#liga a crear estas #arras es el de la cantidad de ventanas en un sitio0 4i yo
tengo un #otn que me conduce a la seccin %1roductos%, y dentro de la seccin 1roductos,
tengo #otones o te/tos que me linkean a J productos distintos, ya estuve usando una ventana
dems, en este caso, la ventana segunda, que conten'a los links que me lleva#an a la
informacin misma que #usca#a0 1ara esto es me$or que, de un mismo #otn, salga otro
peque,o %su#;men3% que contenga los links a esa informacin0 F'$ese en la siguiente pgina!
"ttp!QQwww0elnegrodeneuro0com , y mire con detenimiento el men3 de la i&quierda0
8esde la clase tres, quedamos en que 2d0 "a#'a armado esta #otonera!
1ues #ien, en #ase a esta misma vamos a definirle nuevos #otones0 As' que, el
primer paso ser, tener armada la #otonera simple, en este caso, de cuatro
#otones0
Cuando ya la tenga definida, y con las 'onas
interacti2as a la 2ista, "aga clic so#re el primer
#otn al que quiera agregar otros, y al aparecer el
men3, seleccione la opcin 6d 8op@up 5enu.
Al "acer clic so#re esa
opcin aparecer la
siguiente ventana, y
"a#r que concretar
los siguientes pasos!
1@ 8efinir el te/to que
aparecer en el #otn0
+@ 8efinir el link
(a#soluto o relativo,
interno o e/terno al
que nos llevar el
#otn0
0@ 8efinir el tipo de
ventana en que se
a#rir el link0
4@ 7acer click en el
#otn > para agregarlo
a 000
A@ La lista que aparece
en el espacio inferior,
donde se listarn los
#otones y sus
respectivos links0
Luego de estos pasos
presionamos el #otn
1iguiente ()e/t0
*n la siguiente ventana
nos encontramos con
las opciones para
definir los aspectos
grficos del botn,
tales como fuente,
tama,o de fuente,
colores de las distintas
instancias del #otn,
etc0 Al terminar de
definirlas, presionamos
Finali'ar (Finis", y
tendremos el primer
#otn de nuestro
su#men30
A medida que vayamos
agregando los #otones, estos
irn listndose, tal cual como
los vemos en esta ventana0
=#viamente, A=8=4 los
#otones del su#men3 pueden
crearse en la primera ventana
de una ve&, y recin a"'
pasar a definir sus cualidades
grficas0 @ as' con cada uno
de los #otones principales!
todos ellos pueden tener
su#men3es, seg3n "aga
falta0
Cuando finali&amos de crear todos los #otones de
los su#men3es, volvemos al lien&o y nos
encontramos con esta visuali&acin0 )tese que
los #otones aparecen separados del men3
principal0 1ues #ien, nosotros de#emos acercarlos
manualmente as' que, simplemente lo pinc"amos
con el mouse, y sin soltar, lo movemos "asta el
lugar que querramos0
1ara e/portar, o#viamente, lo esportamos como
7A6L0
1ro#amos, como siempre, con F?. para ver cmo
se ve en el e/plorador, y notemos lo siguiente!
?; *l su#men3 aparece normalmente al poner el
mouse en el :otn ?0
.; *l men3 entero aparece posicionado arri#a, a la
i&quierda del e/plorador0
*sto sucede porque esa es la posicin 1=9
8*F*CA= que le asigna el e/plorador a este tipo de
men3es "ec"os en Fireworks0 @ esto es un factor
muy importante a tener en cuenta cuando
insertamos estas #otoneras en documentos "tml0
*n este e$emplo la
pusimos a la
i&quierda, pero
f'$ense dnde
aparece el
su#men30 *sto se
de#e a esa especie
de %predestinacin%
que tiene el
e/plorador para
este tipo de
men3es0
Cul es la solucinI
1ues dise,ar en
#loque0
4i su #otonera va a
estar acompa,ada
de t'tulos yQo
grficos por arri#a o
por a#a$o, estos de#en ser dise,ados en Fireworks $unto con la #otonera0
*n este link de prue#a lo "emos "ec"o as'0
4e pueden presentar otros inconvenientes menores, pero ninguno que no tenga solucin0 8e
todos modos, no dude en escri#irme y tratar de resolver sus dudas0
Importacin con zonas de di%isin:
"La divisi(n de imgenes tiene las ventajas siguientes:
1 )uede optimizarse cada parte de la imagen por separado, con lo ,ue se obtienen arc"ivos
ms pe,ue2os y fciles de descargar
1 )ueden exportarse algunas partes de la imagen como arc"ivo +/$ y otras como 3)4+, con lo
,ue se utiliza lo mejor de cada formato de exportaci(n
1 )ueden designarse pginas para utilizar algunos de sus elementos grficos en todas las
pginas y cambiar s(lo las divisiones ,ue tienen contenidos exclusivos, lo ,ue proporciona
velocidad al sitio .eb -dems, se puede editar y reemplazar un elemento grfico de una
divisi(n sin tener ,ue volver a descargar todas las divisiones de una imagen
1 )ueden crearse rollovers con divisiones"0(6anual de 6acromedia
Mamos a tomar como e$emplo una imagen ya optimi&ada que pesa JE,- D#0 Aomemos en
cuenta que la medida de peso ideal para un 7A6L, con imgenes y todo, es de KE D#0 1or
tanto nos encontramos ante una imagen realmente %pesada%0 4i a esto le sumamos que, en
este e$emplo, )= R2*9*6=4 #a$arle la calidad, tenemos en manos un pro#lema, pues el el
7A6L que contenga esta foto va a tardar en #a$ar, y no queremos que el usuario se canse de
esperar y cam#ie de pgina0
La 3nica opcin que nos queda es dividir la imagen, para que #a$e por partes, y el usuario no
tenga que esperar a que #a$e completamente para empe&ar a ver algo0 1ara esta operacin de
divisin utili&amos la "erramienta 8ivisin , y en este caso nos ayudaremos con las gu'as
para dividir la imagen en varias partes0
2na ve& "ec"o, definimos las divisiones de acuerdo a las que ya definieron las gu'as, con la
"erramienta dividir0 Las divisiones nos quedarn con una %mscara% verde0 Cada una de estas
&onas definidas ser una imagen cuando se e/porte todo como un 7A6L0 *n la imagen se
pueden ver las divisiones y una de ellas seleccionada0 4i nos fi$ramos en la vista previa
mientras la mantenemos seleccionada, podr'amos ver que esa imagen pesa K,.H D#0 *se es el
peso apro/imado de cada una de las divisiones0
*l pr/imo paso es la
e/portacin0 8e#emos fi$arnos
que ests seleccionadas
todas las &onas de divisin, y
tam#in que estn
seleccionadas las opciones
correctas!
?; Rue utilice las reas de
divisin0
.; Rue utilice el mismo
programa de dise,o we# que
utili&aremos para construir
nuestra pgina0 *n este caso,
8reamweaver0
7ay que mencionar dos puntos ms a propsito de las divisiones!
?; */iste la "erramienta de 8ivisin poligonal , en caso que las divisiones no sean
e/actamente cuadrangulares0
.; Las &onas poligonales pueden actuar como &onas interactivas, en el sentido que se les
puede asignar tam#in v'nculos 29L0

!ollo2ers simplesB
Los #otones tienen como una de sus caracter'sticas principales la posi#ilidad de vincular
direcciones 29L, ya que incluyen una &ona interactiva especialmente para estos casos0 1ro
esta &ona interactiva, por defecto e invaria#lemente, mantiene una forma rectangular0 8e modo
que, si yo deseo que el #otn realice un rollover de color o imagen, la otra forma o imagen a
utili&ar, de#er tener tam#in esta forma0
Ru pasa en los casos en que necesito un #otn circular con alg3n efectoI 9ecurro a la
creacin de un rollover simple0
1ara esto de#emos tener,
en primer lugar, las dos
imgenes que actuaran
cada una en un F9A6*
distinto0 Luego,
posicionados en el frame
que mostrar la imagen
por defecto del rollover,
voy a
Mentana(Comportamiento
(#e"aviors0 *nseguida el
programa nos preguntar
si queremos aplicar el
rollover ? A toda la
imagen o . A slo una
parte0 Como el rollover que
estamos armando es uno
simple, elegimos la opcin
?
A continuacin
cliqueamos en el signo
%C% de la misma ventana,
y nos pasar a mostrar
la accin que queremos
que realice0
1or defecto, nos
marcar el evento
%6ouse =ver%, que es
cuando el mouse est
so#re la imagen0 *s
entonces cuando se
e$ecutar el rollover0