CREACIN DE ANIMACIONESIntroduccinTrabajo con smbolos de
AnimacinCreacin de smbolos de AnimacinEdicin de smbolos de
AnimacinEdicin de imgenes de smboloUtilizacin de
FotogramasInterpolacinPresentacinExportacinCreacin de una
AnimacinActividad prctica
INTRODUCCINEn Macromedia Fireworks MX se puede crear animaciones
con anuncios en titulares, logotipos y vietas en movimiento.Un
mtodo para generar animaciones en Fireworks es mediante la creacin
de smbolos y la modificacin de sus propiedades en el tiempo para
crear la ilusin del movimiento.Unsmboloes como un actor del que se
coreografan los movimientos.La accin de cada smbolo se almacena en
unfotograma. Laanimacinse consigue al reproducir todos los
fotogramas en secuencia.Se puede aplicar distintas configuraciones
al smbolo para cambiar de forma gradual el contenido de los
fotogramas sucesivos. Es posible crear un smbolo que se mueva por
el lienzo, que aparezca o desaparezca de forma paulatina, que
aumente o disminuya de tamao, o que gire.Puesto que un archivo
puede contener varios smbolos, se puede crear animaciones complejas
en las que sucedan varias acciones a la vez.Fireworks puede
exportar animaciones en forma de archivos GIF Animado o Flash SWF.
Tambin puede importar directamente las animaciones de Fireworks en
Macromedia Flash para modificarlas.Regresar
TRABAJO CON SMBOLOS DE ANIMACINLossmbolos de animacinllevan 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 se
pueden guardar varios en un nico archivo. Cada smbolo tiene sus
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 se pueden cambiar 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, se puede volver a utilizar para crear
otras animaciones.Regresar
CREACIN DE SMBOLOS DE ANIMACINUna vez creado un smbolo de
animacin se puede 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. ElijaEditar >
Insertar > Nuevo smbolo.2. En el cuadro de dilogo Propiedades de
smbolo, escriba un nombre para el smbolo nuevo.3. ElijaAnimaciny
haga clic enAceptar.4. En el editor de smbolos, utilice las
herramientas de texto o de dibujo para crear un objeto nuevo. Se
puede dibujar objetos vectoriales o de mapas de bits.5. Cierre la
ventana del editor de smbolos. Fireworks guarda el smbolo en la
biblioteca y coloca una copia en el centro del documento.Se puede
aadir fotogramas nuevos al smbolo con el control deslizante
Fotogramas del Inspector de propiedades. ElijaVentana >
Propiedadespara abrir el Inspector de propiedades, si no estuviera
ya abierto.Para convertir un objeto en un smbolo de animacin:1.
Seleccione el objeto.2. ElijaModificar > Animar > Animar
seleccin.3. Introduzca el valor deseado en el cuadro de dilogo.
Para ms informacin sobre los valores vea el tema deEdicin de
smbolos de animacin.
Aparecen controles de animacin en el recuadro delimitador del
objeto y se aade una copia del smbolo a la biblioteca.Regresar
EDICIN DE SMBOLOS DE ANIMACINEs posible manipular las
propiedades de los smbolos de animacin para que su sitio web cobre
vida. Se puede cambiar 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 animacinLas
propiedades de la animacin se pueden cambiar a travs del cuadro de
dilogo Animar o desde el Inspector de propiedades.
Las propiedades de smbolo de animacin en el Inspector de
propiedadesEs posible editar cualquiera de las propiedades
siguientes de un smbolo de animacin:Fotogramases el nmero de
fotogramas que desea incluir en la animacin. Aunque el control
deslizante permite establecer un mximo de250, en el cuadro de texto
Fotogramas puede introducir cualquier nmero. El valor
predeterminado es5.Moveres 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).Direccinestablece los grados en que se debe mover 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. Consulte Edicin de trazados de movimiento de
smbolos.Escalaes 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.Opacidades el grado de aparicin o
desaparicin paulatina (fundido) de principio a fin. 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.Rotares 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.Derecha e Izquierdason 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. ElijaModificar > Animacin >
Configuracinpara abrir el cuadro de dilogo Animar oVentana >
Propiedadespara abrir el Inspector de propiedades, si no estuviera
ya abierto.
3. Cambie las propiedades que desee.Eliminacin de animacionesEs
posible eliminar animaciones al suprimir el smbolo de animacin de
la biblioteca o al eliminar la animacin del smbolo.Para eliminar un
smbolo de la biblioteca:1. En el panel Biblioteca, seleccione el
smbolo de animacin que desea eliminar.2. Arrastre el smbolo hasta
el icono de papelera situado en la esquina inferior derecha.Para
eliminar la animacin de un smbolo de animacin seleccionado:
ElijaModificar> Animacin > Eliminar animacin.El smbolo se
convierte en smbolo grfico y deja de estar animado. Si ms adelante
se vuelve a convertir en animacin, el smbolo recupera la
configuracin anterior.Regresar
EDICIN DE IMGENES DE SMBOLOSe 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:
Haga doble clic en el objeto de smbolo.
ElijaModificar > Smbolo > Editar smbolo.
Haga clic en el botnEdicindel 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.Edicin de trazados de movimiento de smbolosCuando se
selecciona un smbolo de animacin, este 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 nueva
posicin. 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.Regresar
UTILIZACIN DE FOTOGRAMASLas animaciones se construyen a partir
de la creacin de varios fotogramas. El contenido de cada uno de
ellos se puede ver 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.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
fotogramasLa 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:
Para seleccionar un rango contiguo de fotogramas, mantenga
pulsada la tecla Mays y haga clic en los nombres del primer y del
ltimo fotograma.
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:
Elija Propiedades en el men de opciones del panel
Fotogramas.
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.
PulseIntroo haga clic fuera del panel para cerrar la ventana
emergente.Visualizacin y ocultacin de fotogramas durante la
reproduccinEs posible mostrar u ocultar fotogramas durante la
reproduccin. Si se oculta un fotograma, este no aparece durante la
reproduccin y tampoco se exportar.Para mostrar u ocultar un
fotograma:1. Siga uno de estos procedimientos:
ElijaPropiedadesen el men de opciones del panel Fotogramas.
Haga doble clic en la columnaDemora de fotogramas.Aparece la
ventana emergente Propiedades de fotograma.2. DesactiveIncluir al
exportar.Aparece unaXroja en lugar del tiempo de demora de
fotograma.
3. PulseIntroo haga clic fuera de la ventana emergente
Propiedades de fotograma para cerrarlo.Asignacin de nombres a
fotogramas de animacinA 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.2. En el
cuadro de texto que aparece, escriba un nombre nuevo y pulse
Intro.Adicin, desplazamiento, copia y eliminacin de fotogramasEn el
panel Fotogramas se puede aadir, copiar y eliminar fotogramas y
tambin cambiar su orden.Para aadir un fotograma nuevo: Haga clic en
el botnFotograma nuevo/duplicadoen la parte inferior del panel
Fotogramas.Para aadir fotogramas en un punto concreto de la
secuencia:1. ElijaAadir fotogramasen 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,
pulseAceptar.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. ElijaDuplicar fotogramaen el men de
opciones del panel Fotogramas.2. Introduzca el nmero de duplicados
que desea crear del fotograma seleccionado, elija dnde deben
insertarse y pulseAceptar.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 botnSuprimir fotogramadel panel Fotogramas.
Arrastre el fotograma hacia el botn Suprimir fotograma.
ElijaSuprimir fotogramaen el men de opciones del panel
Fotogramas.Desplazamiento de objetos seleccionados en el panel
FotogramasEl panel Fotogramas se puede utilizar para mover objetos
de un fotograma a otro. Los objetos que aparecen en un nico
fotograma dan la sensacin de desvanecerse cuando se reproduce la
animacin. Puede mover objetos para que aparezcan y desaparezcan en
distintos puntos de la pelcula.Para mover un objeto seleccionado a
un fotograma distinto: En el panel Fotogramas, arrastre el
indicador de seleccin (el cuadrado azul), situado a la derecha del
tiempo de demora, hasta el fotograma nuevo.
Uso compartido de capas entre fotogramasLas capas dividen un
documento de Fireworks en planos velados, como si se tratase de
hojas de papel vegetal superpuestas. En las animaciones, las capas
sirven para organizar los objetos que forman parte del decorado o
del fondo de la animacin. Proporcionan la comodidad de poder fijar
objetos en una capa de modo que no interfieran con el resto de la
animacin. Para ms informacin, consulte Utilizacin de capas.Si desea
que determinados objetos aparezcan en toda la animacin, los puede
colocar en una capa y utilizar, despus, el panel Capas para
compartir la capa entre fotogramas. Cuando se comparte una capa
entre fotogramas, todos los objetos de dicha capa son visibles en
cada fotograma.Los objetos presentes en capas compartidas se pueden
editar en cualquier fotograma; las modificaciones se reflejan en el
resto de fotogramas.
En este ejemplo, la capa 1 se comparte entre fotogramas.Para
compartir una capa entre varios fotogramas:1. Haga doble clic en la
capa.2. SeleccioneCompartir en fotogramas.Nota:el contenido de una
capa compartida aparece en cada fotograma.Para anular la
posibilidad de que varios fotogramas compartan una capa:1. Haga
doble clic en la capa compartida.2. DesactiveCompartir en
fotogramas.3. Elija una de las siguientes opciones para copiar
objetos en fotogramas:
Deje el contenido de la capa compartida slo en el fotograma
actual.
Copie el contenido de la capa en todos los
fotogramasVisualizacin de objetos dentro de un fotograma
especficoPuede ver fcilmente objetos dentro de un fotograma
especfico utilizando el men emergente Fotograma del panel
Capas.Para ver objetos dentro de un fotograma especfico: Elija el
fotograma que desee en el men emergente Fotograma que se encuentra
en la parte inferior del panel Capas.
Todos los objetos dentro del fotograma seleccionado se enumeran
en el panel Capas y aparecen en el lienzo.Uso de papel
cebollaUtilice el papel cebolla para visualizar el contenido de los
fotogramas anteriores y posteriores respecto al fotograma
seleccionado actualmente. Puede animar suavemente los objetos sin
tener que avanzar y retroceder por ellos. El trmino papel cebolla
procede de una tcnica de animacin tradicional que consiste en
utilizar papel de calcar fino y translcido para visualizar
secuencias animadas.Cuando el papel cebolla est activado, los
objetos de los fotogramas situados delante o detrs del actual
aparecen atenuados, para poder distinguirlos de los objetos del
fotograma actual.De forma predeterminada, se activaEditar varios
fotogramas, es decir, los objetos atenuados en otros fotogramas se
pueden seleccionar y editar sin salir del fotograma actual. Es
posible utilizar la herramienta Seleccionar detrs para seleccionar
objetos en fotogramas segn su orden secuencial.Para ajustar el
nmero de fotogramas visibles antes y despus del actual:1. En el
panel Fotogramas, haga clic en el botnPapel cebolla.
2. Elija una opcin de visualizacin:
Sin papel cebolladesactiva el papel cebolla; slo se muestra el
contenido del fotograma actual.
Mostrar fotograma siguientemuestra el contenido del fotograma
actual y tambin el siguiente.
Anterior y posteriormuestra el contenido de los fotogramas
situados antes y despus del actual.
Mostrar todos los fotogramasmuestra el contenido de todos los
fotogramas.
Personalizarestablece un nmero personalizado de fotogramas y
controla la opacidad del papel cebolla.
Editar varios fotogramaspermite seleccionar y modificar todos
los objetos visibles. No seleccione esta opcin para seleccionar y
editar slo los objetos del fotograma actual.Regresar
INTERPOLACINInterpolacin es un trmino de la animacin tradicional
que describe el proceso por el que un animador jefe dibuja slo los
fotogramas clave (fotogramas que contienen cambios de cierta
importancia) mientras que los asistentes dibujan los fotogramas
intermedios.En Fireworks, la interpolacin mezcla dos o ms
instancias del mismo smbolo creando instancias intermedias con
atributos interpolados. La interpolacin es un proceso manual que
resulta til para obtener un movimiento ms sofisticado de un objeto
en el lienzo y en el caso de los objetos cuyos efectos automticos
cambian en cada fotograma de la animacin.Por ejemplo, puede
interpolar un objeto de forma que parezca moverse a lo largo de un
trazado lineal.Para interpolar instancias:1. Seleccione dos o ms
instancias del mismo smbolo grfico en el lienzo. No seleccione
instancias de smbolos diferentes.2. ElijaModificar > Smbolo >
Entre instancias.3. En el cuadro de dilogo Entre instancias,
introduzca el nmero de pasos de interpolacin que se insertan entre
el par original.4. Para distribuir los objetos interpolados en
fotogramas independientes, elijaDistribuir en fotogramasy haga clic
enAceptar.Si decide no distribuir los objetos en fotogramas
independientes, podr hacerlo posteriormente seleccionando todas las
instancias y haciendo clic en el botnDistribuir en fotogramasdel
panel Fotogramas.Nota:en la mayora de los casos, es preferible
utilizar smbolos de animacin en lugar de la
interpolacin.Regresar
PRESENTACIN PRELIMINAR DE UNA ANIMACINPuede ver una presentacin
preliminar de una animacin mientras trabaja, para apreciar cmo
avanza. Tambin es posible ver una presentacin preliminar de una
animacin despus de la optimizacin y ver su aspecto en un navegador
web.Para ver una presentacin preliminar de una animacin en el
espacio de trabajo: Utilice los controles de fotogramas que
aparecen en la parte inferior de la ventana del documento.
Controles de fotogramasSe debe tener en cuenta lo siguiente
cuando vea una presentacin preliminar de una animacin: Para
establecer la duracin de cada fotograma en la ventana del
documento, introduzca los valores de demora de fotogramas en el
panel Fotogramas. Los fotogramas excluidos de la exportacin no
aparecen en la presentacin preliminar. En la ventana de vista
Original, la presentacin preliminar de la animacin presenta las
imgenes con resolucin completa, en lugar de utilizar la presentacin
optimizada del archivo exportado.Para ver una presentacin
preliminar de la animacin en la ventana Vista previa:1. Haga clic
en la fichaVista previa, en la parte superior de la ventana de
documento.2. Utilice los controles de fotogramas.
Nota:no se recomienda ver presentaciones preliminares de
animaciones en las vistas 2-arriba ni 4-arriba.Para ver una
presentacin preliminar de una animacin en un navegador Web:
ElijaArchivo > Vista previaen el navegador y elija un navegador
del submen.Nota:es preciso seleccionar GIF animado como formato de
exportacin de archivo, en caso contrario no se ver ningn movimiento
al ver la presentacin preliminar del documento en el navegador.
Esto es necesario incluso si piensa importar la animacin como un
archivo SWF de Flash o PNG de Fireworks.Regresar
EXPORTACIN DE LA ANIMACINUna vez definidos los smbolos y los
fotogramas que conforman la secuencia animada, ya se puede exportar
el archivo como una animacin. Antes de exportar archivos se debe
configurar una serie de valores para simplificar la carga de la
animacin y facilitar su reproduccin. Puede establecer valores de
reproduccin, como bucles y transparencias, y utilizar la
optimizacin para reducir el tamao del archivo exportado y facilitar
su descarga.Nota:si piensa importar su animacin en Macromedia Flash
para seguir modificndola, no es necesario que la exporte. Flash MX
puede importar directamente archivos originales PNG de
Fireworks.Configuracin de animacin repetidaEl valor de bucle, en el
panel Fotogramas, determina el nmero de veces que se repite la
animacin. Con esta funcin, los fotogramas se repiten una y otra
vez, lo que permite minimizar el nmero de ellos necesario para
crear la animacin.Para establecer la repeticin de la animacin
seleccionada.1. ElijaVentana > Fotogramaspara abrir el panel
Fotogramas.2. Haga clic en el botn Bucle de animacin GIF de la
parte inferior del panel.3. Elija el nmero de repeticiones de la
animacin que deben seguir a la primera.Si elige 4, por ejemplo, la
animacin se reproduce cinco veces en total. Con la opcin Siempre la
animacin se repite de forma continua.Configuracin de
transparenciaComo parte del proceso de optimizacin se puede definir
uno o ms colores de un archivo GIF Animado para que se muestren
transparentes en el navegador Web. Resulta til cuando se quiere que
una imagen o el color de fondo de una pgina web se vea en la
animacin.Para mostrar un color como transparente en un navegador
Web:1. ElijaVentana > Optimizarsi el panel Optimizar no est
visible.2. En el men emergente Transparencia del panel Optimizar,
elijaTransparencia de ndice o Transparencia alfa.3. Utilice las
herramientas de transparencia del panel Optimizar para seleccionar
los colores transparentes.Optimizacin de una animacinLa optimizacin
comprime el archivo hasta el tamao ms pequeo posible para permitir
una carga y exportacin rpidas y acelerar el tiempo de visualizacin
en el sitio web.Para optimizar una animacin:1. Si piensa exportar
la animacin como un archivo GIF animado, elijaGIF animadocomo
formato de exportacin en el panel Optimizar.ElijaVentana >
Optimizarsi el panel no est visible.2. Establezca las opciones
dePaleta, Trama o Transparencia.3. En el panel Fotogramas,
establezca la demora de fotogramas.Formatos de exportacin de
animacinTras crear y optimizar una animacin podr exportarla.Los
archivos GIF animados ofrecen los mejores resultados en animaciones
tipo ilustracin o dibujos animados.Puede exportar la animacin como
un archivo Flash SWF, e importarla en Macromedia Flash MX. O bien,
puede omitir este paso e importar el archivo original PNG de
Fireworks directamente en Flash MX. Esta opcin le ofrece un mayor
control sobre la importacin de la animacin.Tambin puede exportar
fotogramas o capas de una animacin como varios archivos. Esto
resulta til cuando existen muchos smbolos en distintas capas para
el mismo objeto. Por ejemplo, puede exportar un titular
publicitario como varios archivos si cada letra de un nombre de
empresa est animada en una imagen. Cada letra es independiente de
las otras.Trabajo con animaciones existentesUn archivo GIF animado
puede formar parte de una animacin de Fireworks. Existen dos
maneras de utilizar el archivo: se puede importar el archivo GIF a
un archivo de Fireworks existente, o se puede abrir como un archivo
nuevo.Cuando se importa un archivo GIF animado, Fireworks lo
convierte en smbolo de animacin y lo coloca en el fotograma
seleccionado. Si el nmero de fotogramas de la animacin es superior
a los existentes en la pelcula actual, se puede aadir ms fotogramas
de forma automtica.Los archivos GIF importados pierden sus valores
originales de demora de fotogramas y adoptan los del documento
actual. Puesto que el archivo importado es un smbolo de animacin,
se le puede aplicar movimiento adicional. Por ejemplo, puede
importar la animacin de una persona que camina sin moverse de su
sitio y aplicarle propiedades de direccin y movimiento para que
camine por la pantalla.Cuando se abre un archivo GIF animado en
Fireworks, se crea un nuevo archivo y cada fotograma del archivo
GIF se coloca en un fotograma independiente. Aunque el archivo GIF
no es un smbolo de animacin, s conserva los valores de demora de
fotogramas del archivo original.Una vez importado el archivo se
debe establecer su formato como GIF Animado para poder exportar el
movimiento desde Fireworks.Para importar un archivo GIF Animado:1.
ElijaArchivo > Importar.2. Localice el archivo y haga clic
enAbrir.3. Haga clic enSpara aadir nuevos fotogramas en la
animacin.Si hace clic enCancelarslo se muestra el primer fotograma
del archivo GIF animado. Aunque se importa todo el documento, se
debe aadir fotogramas adicionales para verlo.Para abrir un archivo
GIF animado: ElijaArchivo > Abriry localice el archivo GIF.Uso
de varios archivos como una nica animacinFireworks puede crear una
animacin a partir de un grupo de archivos de imagen. Por ejemplo,
para crear un anuncio basado en varios grficos existente, abra cada
grfico y sitelo en un fotograma separado del mismo documento.Para
abrir varios archivos como animacin:1. ElijaArchivo > Abrir.2.
Pulse la tecla Mays y haga clic para seleccionar varios archivos.3.
SeleccioneAbrir como animaciny haga clic enAceptar.Fireworks abre
los archivos en un nuevo documento y coloca cada archivo en un
fotograma independiente, segn el orden en que se han
seleccionado.Regresar
CREACIN DE UNA ANIMACINEn Fireworks las animaciones se crean
mediante la asignacin de propiedades a objetos denominadossmbolos
de animacin. La animacin de un smbolo se divide enfotogramas, 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.
Se utiliza el Inspector de propiedades o el cuadro de dilogo Animar
para introducir los valores del smbolo. Es posible definir el grado
y la direccin de movimiento, la escala, la opacidad (aparicin o
desaparicin paulatina) y el ngulo y la direccin de rotacin. Para ms
informacin, consulte Edicin de smbolos de animacin.Nota:las
opciones para el grado y la direccin de movimiento slo se
encuentran en el cuadro de dilogo Animar.3. Utilice los
controlesDemora de fotogramasen el panel Fotogramas para establecer
la velocidad de movimiento de la animacin.4. Optimice el documento
como un archivo GIF animado.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, consulte el da 10 (Formatos de exportacin de
animacin).ZONAS INTERACTIVAS, MAPAS DE IMGENES, ESTILOS Y
SMBOLOSIntroduccinCreacin de Zonas InteractivasEdicin de Zonas
InteractivasCreacin de Mapas de ImgenesRollovers con Zonas
InteractivasUsos de EstilosAplicacin de un EstiloEdicin de un
EstiloEstilos PredeterminadosSmbolosActividad prctica
INTRODUCCINUtilizacin de zonas interactivas y mapas de imagenUna
zona interactiva es un rea de un grfico web que est vinculada a una
direccin URL. Un mapa de imagen no es ms que un grfico sobre el que
se han colocado varias zonas interactivas.
Las zonas interactivas y los mapas de imagen necesitan
normalmente menos recursos que los grficos con divisiones. La
creacin de divisiones necesita ms recursos por parte de los
navegadores web debido a que es preciso descargar el cdigo HTML
adicional y volver a ensamblar los grficos divididos.Las zonas
interactivas resultan convenientes cuando se desea vincular reas de
una imagen con otras pginas web, pero no necesita resaltar estas
reas ni producir efectos de rollover en respuesta a los movimientos
o acciones del ratn. Las zonas interactivas y los mapas de imagen
tambin son convenientes cuando el grfico en el que ha insertado las
zonas interactivas se exporta mejor como un nico archivo de imagen,
es decir, utilizando un mismo formato de archivo y la misma
configuracin de optimizacin.RegresarCREACIN DE ZONAS
INTERACTIVASDespus de identificar las reas del grfico origen que
podran servir como zonas interactivas, puede crear estas zonas y
asignar vnculos URL. Existen dos formas de crear zonas
interactivas: Puede dibujar un rea de destino en el grfico,
utilizando las herramientas Zona interactiva rectangular, circular
o poligonal (forma irregular).
Es posible seleccionar un objeto e insertar en l la zona
interactiva.Las zonas interactivas pueden tener formas que no sean
rectngulos ni crculos. Tambin puede crear zonas interactivas
poligonales que consten de muchos puntos. Esto puede ser necesario
cuando se trabaje con imgenes complejas.Para crear una zona
interactiva rectangular o circular:1. Elija la herramienta Zona
interactiva rectangular o Zona interactiva circular en la seccin
Web del panel Herramientas.
2. Arrastre la herramienta Zona interactiva para dibujar una
zona interactiva sobre un rea del grfico. Mantenga pulsadas las
teclas Alt-Mays (Windows) u Opcin-Mays (Macintosh) para dibujar a
partir de un punto central.
Nota:es posible ajustar la posicin de una zona interactiva al
arrastrarla mientras la dibuja. Mantenga pulsado el botn del ratn,
pulse y mantenga pulsada la barra espaciadora del teclado, despus,
arrastre la zona interactiva hasta otro punto del lienzo. Suelte la
barra espaciadora para continuar el dibujo de la zona
interactiva.Para crear una zona interactiva con forma irregular:1.
Elija la herramienta Zona interactiva poligonal.2. Haga clic en la
herramienta para trazar los puntos de vector, igual que si
estuviese dibujando segmentos rectos con la herramienta Pluma. El
relleno permite definir el rea de la zona interactiva, sin importar
si el trazado est abierto o cerrado.Para crear una zona interactiva
mediante el trazado de uno o varios objetos seleccionados:1.
ElijaEditar > Insertar > Zona interactiva.
Si selecciona varios objetos, aparece un mensaje en el que se
pregunta si desea crear una nica zona interactiva rectangular que
abarque todos los objetos o varias zonas interactivas, una para
cada objeto.
2. Haga clic enUnoo enVarios. En la capa de web aparece una o
varias zonas interactivas nuevas.RegresarEDICIN DE ZONAS
INTERACTIVASLas zonas interactivas son objetos web y, al igual que
otros muchos objetos, se pueden modificar mediante las herramientas
Puntero, Subseleccin y Transformar. Para ms informacin sobre el uso
de las herramientas para editar un objeto web, consulte Uso de
herramientas para editar objetos de divisin.Es posible cambiar la
posicin y el tamao de una zona interactiva introduciendo valores
numricos en el Inspector de propiedades o panel Informacin.El
Inspector de propiedades tambin cambia la forma de una zona
interactiva.Para convertir una zona interactiva seleccionada en
otra rectangular, circular o poligonal: En el Inspector de
propiedades, elijaRectngulo, Crculo o Polgonoen el men emergente
Forma de la zona interactiva.Preparacin de las zonas interactivas
para la exportacinPuede utilizar el Inspector de propiedades para
asignar valores URL, texto alternativo, marcos destino y nombres
personalizados a las zonas interactivas. Si el Inspector de
propiedades est minimizado, haga clic en la flecha de expansin que
se encuentra en la esquina inferior derecha para ver todas las
propiedades.
Las propiedades de una zona interactiva se asignan del mismo
modo que las propiedades de una divisin.Regresar
CREACIN DE MAPAS DE IMAGENUna vez que ha aadido varias zonas
interactivas sobre una imagen, es preciso exportar la imagen para
que funcione como un mapa de imagen en un navegador web. Cuando se
exporta un mapa de imagen, se genera el archivo grfico y el archivo
HTML que contiene la informacin de mapa para las zonas interactivas
y los vnculos URL correspondientes.Nota:Fireworks slo crea mapas de
imagen de cliente durante la exportacin.Como alternativa a la
exportacin, puede copiar el mapa de imagen en el Portapapeles y
pegarlo en Dreamweaver u otro editor HTML.Para exportar un mapa de
imagen o copiarlo en el Portapapeles:1. Para preparar el grfico con
el fin de exportarlo, debe optimizarlo.2. ElijaArchivo >
Exportar.3. Si desea exportar una imagen (en lugar de copiarla en
el Portapapeles), abra la carpeta en la que desea colocar el
archivo HTML y asigne un nombre al archivo. Si ya ha creado una
estructura local de archivos para el sitio web, puede guardar el
grfico en la carpeta correcta del sitio.4. En el men desplegable
Tipo, elijaHTML e imgenes.5. Elija una opcin en el men emergente
HTML: Exportar Archivo HTML genera el archivo HTML necesario y los
archivos de grficos correspondientes que despus podr importar en
Dreamweaver u otro editor HTML. Copiar al Portapapeles simplemente
copia el mapa de imagen en el Portapapeles de forma que despus
pueda pegarlo en Dreamweaver u otro editor HTML.6. En Divisiones,
elijaNinguna.7. Si fuera necesario, seleccione la opcinColocar
imgenes en subcarpetay abra la carpeta adecuada. (Esto no es
necesario si lo copia en el Portapapeles.)8. Haga clic
enGuardarpara cerrar el cuadro de dilogo Exportar.Sugerencia:Cuando
exporta archivos, Fireworks emplea comentarios HTML para marcar con
claridad el comienzo y el final del cdigo de los mapas de imagen y
de otras funciones web creadas en Fireworks. De forma
predeterminada, los comentarios HTML no se incluyen en el cdigo. Si
desea incluirlos, seleccione Incluir comentarios HTML en el cuadro
de dilogo Configuracin de HTML.Regresar
CREACIN DE ROLLOVERS CON ZONAS INTERACTIVASSi utiliza el mtodo
de rollover de arrastrar y colocar para crear interactividad, podr
incluir fcilmente un efecto de rollover desunido en una zona
interactiva si el rea destino est definida como una divisin. Los
efectos rollover se aplican en zonas interactivas como si fueran
divisiones.Nota:una zona interactiva slo puede activar un rollover
desunido. No puede ser el elemento destino de un rollover que
provenga de otra zona interactiva o divisin.
Despus de crear un rollover desunido con una zona interactiva,
la lnea azul de conexin permanece visible al seleccionar la zona
interactiva.Uso de zonas interactivas sobre divisionesPuede colocar
una zona interactiva sobre una divisin para activar una accin o
comportamiento. Esto es conveniente si tiene una gran imagen y slo
desea que una pequea porcin acte como activador de una accin.Por
ejemplo, si tiene un grfico grande con texto sobre el mismo y desea
que slo el texto active una accin o comportamiento, como un efecto
rollover. Puede colocar una divisin sobre el grfico y despus una
zona interactiva sobre el texto. Al situar el cursor sobre el texto
se activar el efecto rollover, aunque todo el grfico que se
encuentra debajo de la divisin desaparecer al producirse el efecto
rollover. Evite la creacin de zonas interactivas que se superpongan
sobre ms de una divisin ya que puede producirse un efecto
impredecible.
Para crear un activador para un efecto rollover utilizando una
zona interactiva sobre una divisin:1. Inserte una divisin sobre la
imagen que desee intercambiar.2. Cree un nuevo fotograma en el
panel Fotogramas e inserte una imagen que se utilizar como imagen
de intercambio. Asegrese de colocarla debajo de la divisin
insertada en el paso 1.3. Arrastre y coloque una lnea de
comportamiento desde la zona interactiva hasta la divisin que
contiene la imagen que desea intercambiar. Se abre el cuadro de
dilogo Intercambiar imagen.4. Elija el fotograma que contiene la
imagen de rollover en la lista Intercambiar imagen de, y haga clic
enAceptar.Regresar
USO DE ESTILOSFireworks incluye muchos estilos predefinidos.
Estos estilos se pueden cambiar y eliminar, y es posible aadirles
nuevas caractersticas. El sitio web de Macromedia incluyen muchos
otros estilos predefinidos que se pueden importar a Fireworks.
Tambin es posible exportar estilos y compartirlos con otros
usuarios de Fireworks, o importarlos de otros documentos de
Fireworks.Nota:no se puede aplicar estilos a objetos de mapa de
bits.
Regresar
APLICACIN DE UN ESTILOEl panel Estilos se puede utilizar para
crear, almacenar y aplicar estilos a objetos o texto.
Una vez aplicado un estilo a un objeto, se puede actualizar ms
adelante sin que el objeto original se vea afectado. Fireworks no
registra los estilos aplicados a un objeto. Si se suprime un estilo
personalizado, ya no se puede recuperar. Pero si se suprime un
estilo suministrado con Fireworks, es posible recuperarlo junto con
los dems estilos suprimidos mediante el comandoRestablecer
estilosdel men de opciones del panel Estilos. Sin embargo, cuando
se restablecen estilos tambin se suprimen los estilos
personalizados.Para aplicar un estilo a un objeto o bloque de texto
seleccionado:1. ElijaVentana > Estilospara abrir el panel
Estilos.2. Haga clic en un estilo del panel Estilos.Creacin y
eliminacin de estilosEs posible crear un estilo con los atributos
de un objeto seleccionado. El estilo aparece en el panel
Estilos.Los estilos del panel Estilos tambin se pueden eliminar.En
un estilo se puede guardar los siguientes atributos: Tipo y color
de relleno, incluidos motivos, texturas y atributos de degradado
vectorial, como ngulo, posicin y opacidad.
Tipo y color de trazo.
Efectos.
Atributos de texto, como fuente, tamao de punto, estilo
(negrilla, cursiva o subrayado), alineacin, suavizado, ajuste
automtico entre caracteres, escala horizontal, ajuste de rangos de
caracteres e interlineado.Para crear un estilo nuevo:1. Cree o
seleccione un objeto vectorial o de texto con los atributos de
trazo, relleno, efecto o texto que desee.2. Haga clic en el
botnNuevo estilode la parte inferior del panel Estilos.3. Elija los
atributos que desee que formen parte del estilo en el cuadro de
dilogo Nuevo estilo.Nota:si desea guardar atributos que no figuran
en la lista, como alineacin, suavizado, ajuste entre caracteres,
escala horizontal, ajuste de rangos de caracteres e interlineado,
elija la opcinTexto otro.4. Si lo desea, asgnele un nombre al
estilo y haga clic enAceptar.En el panel Estilos aparece el icono
correspondiente al estilo.Para suprimir un estilo:1. Seleccione un
estilo en el panel Estilos.
Haga clic mientras pulsa la tecla Mays para seleccionar varios
estilos o la tecla Control (Windows) o Comando (Macintosh) si los
estilos no son consecutivos.
2. Haga clic en el botnSuprimir estilosituado en el panel
Estilos.Regresar
EDICIN DE ESTILOSCuando es necesario cambiar los atributos que
contiene un estilo, este se puede modificar en el panel
Estilos.Para editar un estilo:1. ElijaSeleccionar > Anular
seleccinpara anular la seleccin de todos los objetos del lienzo.2.
Haga doble clic en un estilo del panel Estilos.3. En el cuadro de
dilogo Editar estilo, active o desactive los atributos que
prefiera. El cuadro de dilogo Editar estilo contiene las mismas
opciones que el cuadro de dilogo Nuevo estilo.4. Haga clic
enAceptarpara aplicar los cambios al estilo.Regresar
USO DE ESTILOS PREDETERMINADOSPara eliminar todos los estilos
personalizados del panel Estilos y restablecer los estilos
predefinidos eliminados, basta con recuperar el estado
predeterminado del panel Estilos. Tambin es posible cambiar el
tamao de los iconos que aparecen en el panel Estilos.Para
restablecer los estilos predeterminados en el panel Estilos:
ElijaRestablecer estilosen el men de opciones del panel
Estilos.Nota:al restablecer los estilos predeterminados se eliminan
todos los estilos personalizados que tenga guardados.Para cambiar
el tamao de los iconos de vista previa de estilos: ElijaIconos
grandesen el men de opciones del panel Estilos para alternar entre
tamao grande y pequeo de vista previa.Aplicacin de atributos sin
crear estilosEs posible copiar atributos de un objeto y aplicarlos
a otros sin necesidad de crear un nuevo estilo en el panel Estilos.
Este mtodo es prctico para aplicar rpidamente atributos a un objeto
cuando no se tiene intencin de volver a utilizarlos con otros
objetos. Entre los atributos que se pueden copiar y aplicar a otros
objetos se encuentran los rellenos, trazos, efectos y atributos de
texto.Para copiar atributos de un objeto y aplicarlos a otros
objetos:1. Seleccione el objeto cuyos atributos desee copiar.2.
ElijaEditar > Copiar.3. Anule la seleccin del objeto original y
a continuacin seleccione los objetos a los que desee aplicar los
atributos nuevos.4. ElijaEditar > Pegar atributos.Los objetos
seleccionados adoptan los mismos atributos que el objeto
original.Regresar
USO DE SMBOLOSEn Fireworks hay tres tipos de smbolos: grficos,
de animacin y de botn. Cada uno posee caractersticas propias para
usos especficos. Las instancias son representaciones de un smbolo
de Fireworks. Cuando se modifica el objeto de smbolo (original),
las instancias (copias) cambian automticamente para reflejar las
modificaciones efectuadas en el smbolo.Los smbolos son tiles cuando
se desea volver a utilizar un elemento grfico. Es posible colocar
instancias en varios documentos de Fireworks y conservar su
asociacin con el smbolo. Los smbolos son tiles para crear botones y
objetos de animacin en varios fotogramas.Creacin de smbolosPara
crear smbolos grficos, de animacin y de botn se utiliza el
submenEditar > Insertar. Es posible crear smbolos a partir de
cualquier objeto, bloque de texto o grupo y despus organizarlos en
el panel Biblioteca. Para colocar instancias en un documento, basta
con arrastrarlas del panel Biblioteca al lienzo.Para crear un
smbolo nuevo a partir de un objeto seleccionado:1. Seleccione el
objeto y elijaModificar > Smbolo > Convertir en smbolo.2.
Escriba el nombre del smbolo en el cuadro de texto Nombre del
cuadro de dilogo Propiedades de smbolo.3. Elija un tipo de smbolo:
Grfico, Animacin o Botn.4. Haga clic enAceptar.5. El smbolo aparece
en la biblioteca, el objeto seleccionado se convierte en una
instancia del smbolo y el Inspector de propiedades muestra las
opciones del smbolo.Para crear un smbolo desde cero:1. Siga uno de
estos procedimientos: ElijaEditar > Insertar > Nuevo
smbolo.
ElijaNuevo smboloen el men de opciones del panel Biblioteca.2.
Elija un tipo de smbolo: Grfico, Animacin o Botn. Haga clic en
Aceptar. Segn el tipo de smbolo elegido, se abre el editor de
smbolos o el editor de botones.3. Cree el smbolo con las
herramientas del panel Herramientas y despus cierre el
editor.Ubicacin de instanciasEs posible colocar instancias de un
smbolo en el documento actual.
Para colocar una instancia: Arrastre un smbolo desde el panel
Biblioteca al documento actual.DIVISIONES Y
ROLLOVERIntroduccinCreacin y Edicin de DivisionesCreacin de Objetos
de DivisinCreacin de divisiones HTMLCreacin de divisiones no
rectangularesVisualizacin de divisiones y guasEdicin de
divisionesAdicin de InteractividadAcerca de los RolloverUso de
ComportamientosPreparacin para la ExportacinActividad prctica
INTRODUCCINLos elementos bsicos para la creacin de elementos
interactivos en Macromedia Fireworks MX son las divisiones. Las
divisiones no son imgenes, son objetos web compuestos de cdigo
HTML. Es posible ver, seleccionar y asignar otro nombre mediante la
capa de web del panel Capas.El mtodo rollover de arrastrar y
colocar permite incorporar interactividad en las divisiones.
Gracias a este mtodo puede crear rpidamente efectos de rollover y
de intercambio de imgenes en el espacio de trabajo. Los
comportamientos asignados se pueden ver en el panel Comportamientos
y es posible crear elementos interactivos ms complejos mediante
este panel.Tambin puede incorporar mayor interactividad en pginas
web mediante zonas interactivas. Las zonas interactivas se utilizan
normalmente para crear mapas de imagen que son grficos que
contienen varias zonas seleccionables con vnculos a otras pginas
web. Estas zonas interactivas tambin pueden utilizar los eventos de
ratn, de forma que se puede utilizar comportamientos JavaScript que
actan como en las divisiones.RegresarCREACIN Y EDICIN DE
DIVISIONESLa divisin corta un documento de Fireworks en porciones
ms pequeas que se exportan como archivos independientes. Durante la
exportacin, Fireworks tambin crea un archivo HTML que contiene el
cdigo de la tabla que recompone el grfico en un navegador web.
Existen tres razones por las que resulta til realizar este
paso:Optimizacin:uno de los retos del diseo grfico para la web es
el mantener las imgenes lo suficientemente pequeas para que se
descarguen rpidamente sin sacrificar la calidad. Las divisiones
permiten optimizar cada divisin individual con el formato de
archivo y los ajustes de compresin ms
adecuados.Interactividad:puede crear divisiones para crear reas que
se activen cuando el puntero del usuario pase sobre ellas o haga
clic.Actualizacin de partes de una pgina web:gracias a las
divisiones resulta muy fcil actualizar partes de una pgina web que
se modifique con frecuencia.RegresarCREACIN DE OBJETOS DE
DIVISINPuede crear un objeto de divisin dibujndolo con la
herramienta Divisin o insertando una divisin que se base en un
objeto seleccionado.Las lneas que se extienden desde el objeto de
divisin son las guas de divisin, determinan los lmites de los
distintos archivos de imagen en los que se dividir el documento
durante la exportacin. De forma predeterminada, estas guas son de
color rojo.
Para insertar una divisin rectangular en funcin de un objeto
seleccionado:1. ElijaEditar > Insertar > Divisin. La divisin
es un rectngulo cuya rea incluye los bordes ms externos del objeto
seleccionado.2. Si selecciona ms de un objeto, elija cmo desea
aplicar las guas de divisin:
Unocrear un nico objeto de divisin que abarcar todos los objetos
seleccionados.
Varioscrear un objeto de divisin para cada objeto
seleccionado.
Para dibujar un objeto de divisin rectangular:1. Elija la
herramienta Divisin.2. Arrastre para dibujar el objeto de divisin.
El objeto de divisin y las guas de divisin aparecen en la capa de
web.
Nota:la posicin de una divisin se puede ajustar mientras se
dibuja. Mantenga pulsado el botn del ratn, pulse y mantenga pulsada
la barra espaciadora del teclado, despus, arrastre la divisin hasta
otro punto del lienzo. Suelte la barra espaciadora para continuar
el dibujo de la divisin.RegresarCREACIN DE DIVISIONES HTMLUna
divisin HTML designa el rea de una imagen dividida donde se
presenta texto HTML estndar en el navegador. Una divisin HTML no
exporta datos de imgenes en pxeles; exporta el texto HTML que
aparece en la celda de la tabla definida por la divisin.
Las divisiones HTML son muy tiles para actualizar texto que
aparece en el sitio web sin tener que crear otros elementos
grficos.Para crear una divisin HTML:1. Dibuje un objeto de divisin
y seleccinelo.2. En el Inspector de propiedades, elijaHTMLen el men
emergente Tipo.3. Haga clic enEditar.4. Escriba texto en la ventana
Editar divisin HTML y asigne el formato que desee mediante
etiquetas de formato de texto HTML.
Nota:como alternativa, puede aadir etiquetas de formato al cdigo
HTML despus de exportarlo utilizando un editor de texto o de
HTML.
5. Haga clic enAceptarpara aplicar los cambios y cerrar la
ventana Editar divisin HTML.El texto y las etiquetas HTML que haya
introducido aparecen en el archivo PNG de Fireworks.
Nota:las divisiones de texto HTML creadas de esta forma pueden
variar de aspecto cuando se visualicen en distintos navegadores y
en otros sistemas operativos, ya que en el navegador web es posible
definir el tamao y la fuente.RegresarCREACIN DE DIVISIONES NO
RECTANGULARESA veces las divisiones rectangulares no son
suficientes al tratar de incluir ms interactividad en una imagen no
rectangular. Por ejemplo, si desea incluir un efecto de rollover en
una divisin y sus objetos divisin se solapan o tienen una forma
irregular, una divisin rectangular podra intercambiar los grficos
de fondo junto con la imagen de intercambio. Fireworks soluciona
este problema al permitir el dibujo de divisiones con cualquier
forma gracias a la herramienta Divisin poligonal.
Tambin se puede convertir los trazados vectoriales en divisiones
para crear divisiones con formas irregulares.Para dibujar un objeto
de divisin poligonal:1. Elija la herramientaDivisin poligonal.2.
Haga clic para colocar los puntos de vector del polgono. La
herramienta Divisin poligonal dibuja slo segmentos en lnea recta.3.
Cuando dibuje un objeto de divisin poligonal alrededor de objetos
con bordes suaves, debe incluir todo el objeto para evitar la
creacin involuntaria de bordes duros en el elemento grfico de la
divisin.4. Para dejar de utilizar la herramienta Divisin poligonal,
elija otra herramienta en el panel de herramientas. No es necesario
que haga clic de nuevo en el primer punto para cerrar el
polgono.
Nota:no es conveniente abusar de las divisiones poligonales, ya
que requieren ms cdigo JavaScript que las divisiones rectangulares
semejantes. Un nmero elevado de divisiones poligonales puede
aumentar el tiempo de proceso del navegador web.Para crear una
divisin poligonal a partir de un objeto de vectores o un trazado:1.
Seleccione un trazado vectorial.2. ElijaEditar > Insertar >
Zona interactiva.3. ElijaEditar > Insertar > Divisin.Se
genera una divisin segn la forma del objeto de
vectoresRegresarVISUALIZACIN DE LAS DIVISIONES Y DE LAS GUASPuede
controlar la visibilidad de las divisiones y de otros objetos web
del documento mediante el panel Capas y el panel Herramientas.
Cuando desactiva la visibilidad de las divisiones para todo el
documento, tambin se ocultan las guas de divisin.Gracias al
Inspector de propiedades puede organizar las divisiones asignando
un color diferente a cada objeto de divisin. El color de las guas
de divisin tambin se pueden cambiar mediante el men
Ver.Visualizacin de las divisiones en el panel CapasLa capa de web
muestra todos los objetos web presentes en el documento de forma
que puede seleccionar y ver cada uno de ellos.
Para visualizar y seleccionar una divisin en el panel Capas:1.
ElijaVentana > Capaspara abrir el panel Capas.2. Expanda la capa
de web haciendo clic en el signo ms (+) (Windows) o tringulo
(Macintosh). La lista completa de los objetos web que se encuentran
actualmente en su documento aparece en la capa de web.3. Haga clic
en un nombre de divisin para seleccionarla. La divisin aparece
resaltada en la capa de web y se selecciona en el
lienzo.Visualizacin y ocultacin de divisionesCuando se oculta una
divisin, esta se hace invisible en el archivo PNG de Fireworks. Es
posible desactivar todos o algunos de los objetos web. Las
divisiones son objetos web y aparecen enumerados en la capa de web
y del panel Capas, en dicha capa puede activar y desactivar la
visibilidad de una divisin seleccionada. Tambin es posible
controlar la visibilidad de una divisin mediante el panel
Herramientas. Cuando se oculta un objeto de divisin no se evita que
la divisin se exporte en el cdigo HTML.Para ocultar y mostrar unas
divisiones y zonas interactivas determinadas:1. Haga clic en el
icono deojojunto a cada objeto web individual del panel Capas .2.
Haga clic en la columna Ojo para volver a activar la visibilidad.
El icono de ojo vuelve a aparecer cuando los objetos web son de
nuevo visibles.Para ocultar o mostrar todas las zonas interactivas,
divisiones y guas, siga uno de estos procedimientos: Haga clic en
el botnOcultar/Mostrardivisiones adecuado del panel Herramientas.
Haga clic en el icono de ojo junto a la capa de web del panel
Capas.
Para ocultar o mostrar las guas de divisin en todas las vistas
de documento: ElijaVer > Guas de divisin.Cambio del color de la
divisin y de las guas de divisinSi los colores utilizados en un
documento son similares al color de la divisin, la visualizacin de
las divisiones en estos objetos del documento puede resultar
difcil. Para facilitar la visualizacin de las divisiones puede
asignar un color diferente a las divisiones seleccionadas. Cada
divisin puede tener un color exclusivo para organizarlas mejor. El
color de las guas de divisin tambin se puede cambiar.Nota:en la
Vista previa, las divisiones no seleccionadas aparecen con una
superposicin de color blanco.Para cambiar el color de un objeto de
divisin seleccionado: En el Inspector de propiedades elija un nuevo
color en el cuadro de colores.Para cambiar el color de las guas de
divisin:1. ElijaVer > Guas > Editar guas.2. Seleccione un
nuevo color en la seccin Color divisin del cuadro de dilogo Guas y
haga clic enAceptar.
RegresarEDICIN DE DIVISIONESEn Fireworks un diseo de divisiones
se manipula como una tabla en un procesador de textos. Cuando
arrastra una gua para cambiar el tamao de una divisin, todas las
divisiones rectangulares adyacentes tambin cambian automticamente
de tamao. Adems, puede utilizar el panel Herramientas para cambiar
el tamao y transformar divisiones como lo hara con los objetos de
vectores y de mapa de bits.Desplazamiento de guas para editar
divisionesLas guas de divisin definen el permetro y la posicin de
las divisiones. Las guas de divisin que se extienden ms all de los
objetos de divisin definen como se dividir el resto del documento
durante la exportacin. La forma de un objeto de divisin rectangular
se puede cambiar arrastrando las guas que lo rodean. No es posible
cambiar el tamao de los objetos de divisin no rectangulares al
mover las guas de divisin.
Cambio del tamao de un objeto de divisin arrastrando sus
guasNota:cuando se arrastran las guas de divisin que rodean un botn
de Fireworks en la ventana de documento, se cambiar el tamao de la
divisin que define el rea activa (o divisin) de dicho botn. Sin
embargo, al arrastrar las guas de divisin que rodean a un botn de
Fireworks no es posible eliminar el rea activaSi se ha alineado
varios objetos de divisin a lo largo de una nica gua de divisin,
podr arrastrar dicha gua de divisin para cambiar el tamao de todos
los objetos de forma simultnea.
Cambio del tamao de varios objetos de divisin arrastrando una
guaAdems, si arrastra una gua a lo largo de una coordenada
determinada el resto de las guas en la misma coordenada se mover
con ella.Para cambiar el tamao de una o varias divisiones:1. Site
la herramienta Puntero o Subseleccin sobre una gua de divisin. El
cursor adopta la forma del puntero de movimiento de guas.2.
Arrastre la gua de divisin hasta la ubicacin que desee. Se cambiar
el tamao de las divisiones y todas las divisiones adyacentes tambin
cambiarn de tamao automticamente.Para eliminar una gua de divisin:
Utilice la herramienta Puntero o Subseleccin para arrastrar la gua
de divisin fuera del borde del lienzo.Para desplazar guas de
divisin adyacentes:1. Arrastre, manteniendo pulsada la tecla Mays,
una gua de divisin a lo largo de otras guas de divisiones
adyacentes.2. Libere la gua de divisin en la ubicacin que desee.
Todas las guas de divisin que ha arrastrado se desplazarn hasta
esta ubicacin.
Sugerencia:puede cancelar esta operacin liberando la tecla Mays
antes de soltar el botn del ratn. Todas las guas de divisin que ha
seleccionado se ajustarn en sus posiciones originales.Uso de
herramientas para editar objetos de divisinUtilice las herramientas
Puntero, Subseleccin y Transformar para modificar la forma o el
tamao de una divisin. Puede recortar, escalar, inclinar y
distorsionar divisiones.Nota:al utilizar estas herramientas para
cambiar el tamao y la forma de las divisiones es posible que se
creen divisiones superpuestas, debido a que el tamao de los objetos
de divisin adyacentes no se ajusta automticamente. Si las
divisiones se superponen, la divisin superior en el orden de
apilamiento tendr prioridad al utilizar funciones para
interactividad. Para evitar la superposicin de divisiones utilice
las guas para editar las divisiones.Para editar la forma de una
divisin seleccionada, siga uno de estos procedimientos: Elija la
herramienta Puntero o Subseleccin y arrastre los puntos de esquina
de la divisin para modificar su forma. Utilice una herramienta de
transformacin para realizar la transformacin que desee y
pulseIntro.Nota:al transformar una divisin rectangular puede
cambiar su forma, posicin o tamao, pero la propia divisin sigue
siendo rectangular.RegresarADICIN DE INTERACTIVIDAD EN LAS
DIVISIONESLos elementos bsicos para la creacin de interactividad en
Fireworks son los objetos de divisin. Fireworks ofrece dos mtodos
para aadir interactividad en las divisiones: La forma ms sencilla
es el mtodo rollover de arrastrar y colocar. Con slo arrastrar el
tirador de comportamiento de una divisin y colocarlo en una divisin
destino podr crear rpidamente una interactividad sencilla. El panel
Comportamientos permite crear una interactividad ms compleja.
Adems, el panel Comportamientos contiene diferentes comportamientos
interactivos que puede incluir en las divisiones. Si incluye varios
comportamientos en una nica divisin, podr crear interesantes
efectos. Tambin puede crear sus propias interacciones
personalizadas si edita los comportamientos existentes.Los
comportamientos de Fireworks MX son compatibles con los de
Macromedia Dreamweaver MX. Cuando exporta un rollover de Fireworks
a Dreamweaver, puede editar los comportamientos de Fireworks
mediante el panel Comportamientos de Dreamweaver.Adicin de
interactividad sencilla en las divisionesEl mtodo de rollover de
arrastrar y colocar es una forma rpida y eficaz de crear efectos de
rollover y de intercambio de imagen.De forma especfica, el mtodo de
rollover de arrastrar y colocar permite determinar lo que sucede en
una divisin cuando el puntero del ratn pasa sobre ella. El
resultado final se denomina imagen de rollover. Las imgenes de
rollover son grficos cuyo aspecto cambia en un navegador web al
mover el puntero sobre ellas.Cuando se selecciona una divisin
aparece un crculo con una cruz en el centro. Se trata del
denominado tirador de comportamiento.
Si arrastra el tirador de comportamiento desde una divisin de
activacin y lo coloca en una divisin de destino, crear fcilmente
efectos de rollover y de intercambio de imagen. El elemento
activador y el de destino pueden ser la misma divisin.
Las zonas interactivas tambin incluyen tiradores de
comportamiento para incorporar efectos de rollover.RegresarACERCA
DE LOS ROLLOVERSTodos los rollovers funcionan del mismo modo. Un
grfico activa la visualizacin de otro cuando se sita el puntero
sobre el primero. El elemento activador siempre es un objeto web:
una divisin, zona interactiva o un botn.El rollover ms simple
intercambia una imagen en el fotograma 1 con una imagen que se
encuentra justo debajo en el fotograma 2. Puede crear rollovers ms
complejos. Los rollovers pueden intercambiar una imagen de
cualquier fotograma; los rollovers desunidos muestran una imagen en
un punto alejado del cursor.
Cuando selecciona un objeto web de activacin en Fireworks que se
haya creado mediante un tirador de comportamiento o el panel
Comportamientos, aparecen todas sus relaciones de comportamiento.
De forma predeterminada, una interaccin de rollover se representa
mediante una lnea azul de comportamiento.Creacin de un rollover
simpleUn rollover simple intercambia una imagen con otra en un
fotograma bajo el mismo objeto web. Un rollover simple requiere slo
una divisin o zona interactiva.Puede elegir la imagen de
intercambio de cualquier fotograma.
Para incluir un rollover simple en una imagen u objeto
seleccionado:1. Asegrese de que la imagen u objeto no se encuentra
en una capa compartida.2. ElijaEditar > Insertar >
Divisinpara crear una divisin sobre la imagen u objeto.3. Cree un
nuevo fotograma en el panel Fotogramas haciendo clic en el
botnFotograma nuevo/duplicado.4. Cree, pegue o importe una imagen
para utilizarla como una imagen de intercambio. Site la imagen
debajo de la divisin que cre en el paso 2, debe estar visible
aunque no est en el fotograma 2. Las divisiones son visibles en
todos los fotogramas.5. Seleccione elfotograma 1en el panel
Fotogramas para volver al fotograma que contiene la imagen
original.6. Seleccione la divisin y coloque el puntero sobre el
tirador de comportamiento. El puntero cambia a una mano.
Nota:puede seleccionar la divisin en cualquier fotograma.7.
Arrastre el tirador de comportamiento hasta el borde superior de la
divisin. Una lnea azul de comportamiento se extiende desde el
centro de la divisin hasta la esquina superior izquierda y aparece
el cuadro de dilogo Intercambiar imagen.
8. En el men emergente Intercambiar imagen de, seleccione el
fotograma en el que se encuentra la imagen que desea intercambiar y
haga clic enAceptar.9. Haga clic en la fichaVista previapara ver y
probar el rollover, tambin puede pulsarF12para verlo en un
navegador.Creacin de un rollover desunidoUn rollover desunido
intercambia una imagen bajo un objeto web cuando el puntero se sita
sobre otro objeto web. En respuesta a la accin de colocar el cursor
o puntero sobre el rea o a la accin de hacer clic en la imagen de
activacin, aparece otra imagen en una ubicacin distinta de la pgina
web. La imagen sobre la que se sita el cursor se considera el
elemento activador; la imagen que cambia se considera el elemento
destino.Al igual que en el caso de los rollovers simples de slo una
divisin, primero debe configurar la divisin del elemento activador
y la divisin destino con el fotograma en el que reside la imagen de
intercambio. Despus, debe vincular el rea de activacin y la divisin
destino con una lnea de comportamiento.Nota:no es necesario que el
rea de activacin de un rollover desunido sea una divisin. Las zonas
interactivas y los botones tambin tienen tiradores de
comportamiento que se pueden utilizar para crear rollovers
desunidos.Para incluir un rollover desunido en una imagen
seleccionada:1. ElijaEditar > Insertar > Divisinpara incluir
una divisin en la imagen de activacin.
Nota:este paso no es necesario si el objeto seleccionado es un
botn o si ya existe una divisin o una zona interactiva en la
imagen.
2. Cree un nuevo fotograma haciendo clic en el botnFotograma
nuevo/duplicadodel panel Fotogramas.3. Coloque una segunda imagen
que se utilizar como elemento destino, en el nuevo fotograma y en
la posicin que desee en el lienzo. Puede colocar la imagen en
cualquier punto salvo debajo de la divisin que cre en el paso 1.4.
Seleccione la imagen y elijaEditar > Insertar > Divisinpara
incluir una divisin en la imagen.5. Seleccione elfotograma 1en el
panel Fotogramas para volver al fotograma que contiene la imagen
original.6. Seleccione la divisin, zona interactiva o botn que
cubre el rea de activacin (la imagen original) y coloque el puntero
sobre el tirador de comportamiento. El puntero cambia a una mano.7.
Arrastre el tirador de comportamiento de la divisin de activacin
con la divisin destino que cre en el paso 4.
La lnea de comportamiento se extiende desde el centro del objeto
activador hasta la esquina superior izquierda de la divisin destino
y se abre el cuadro de dilogo Intercambiar imagen.
8. En el men emergente Intercambiar imagen de, seleccione el
fotograma que cre en el paso 2 y haga clic enAceptar.9. Haga clic
en la fichaVista previapara ver y probar el rollover
desunido.Aplicacin de varios rollovers a una divisinEs posible
arrastrar ms de un tirador de comportamiento desde una divisin para
crear varias interacciones de rollover. Por ejemplo, es posible
activar un rollover normal y otro desunido a partir de la misma
divisin.
Una divisin que activa un comportamiento de rollover y un
comportamiento de rollover desunidoNota:tambin puede aadir varios
comportamientos mediante el panel Comportamientos.Para aplicar ms
de un rollover a una divisin seleccionada:1. Arrastre un tirador de
comportamiento desde la divisin seleccionada hasta el borde de la
misma divisin o sobre otra divisin.
Al arrastrar el tirador hasta el borde superior izquierdo de la
misma divisin se crea un rollover simple, si lo arrastra hasta otra
divisin se crea un rollover desunido.
2. Seleccione el fotograma de la imagen de intercambio y haga
clic enAceptar.3. Cree ms rollovers repitiendo los pasos 1 y 2
tantas veces como lo desee.Eliminacin de un rollover de arrastrar y
colocarPuede eliminar fcilmente un rollover de arrastrar y colocar
de una divisin, zona interactiva o botn. Haga clic en la lnea azul
de comportamiento que desee eliminar.
Haga clic enAceptarpara eliminar la interaccin de
rollover.RegresarUSO DEL PANEL COMPORTAMIENTOS PARA AADIR
INTERACTIVIDAD EN LAS DIVISIONESAdems de los rollovers, es posible
incluir otros tipos de interactividad en las divisiones utilizando
el panel Comportamientos. Puede crear sus propias interacciones
personalizadas si edita los comportamientos existentes.En Fireworks
estn disponibles los siguientes comportamientos:Rollover simpleaade
un efecto de rollover a la divisin u objeto web seleccionado
utilizando el Fotograma 1 como estado Arriba y el Fotograma 2 como
estado Sobre. Despus de seleccionar este comportamiento, debe crear
una imagen en un segundo fotograma, utilizando la misma divisin
para crear el estado Sobre. En realidad, la opcin Rollover simple
es un grupo de comportamientos que contiene los comportamientos
Intercambiar imagen y Restaurar imagen de intercambio.Intercambiar
imagenreemplaza el contenido de la divisin especificada por el de
otro fotograma de la misma divisin o el de un archivo
externo.Restaurar imagenintercambiada torna el rollover a su
aspecto predeterminado del fotograma 1.Establecer imagen de barra
de navegacindetermina si una divisin es parte de una barra de
navegacin de Fireworks. Todas las divisiones que forman parte de la
barra de navegacin deben tener este comportamiento. En realidad, la
opcin Establecer imagen de barra de navegacin es un grupo de
comportamientos que contiene los comportamientos Bar Nav Sobre, Bar
Nav Abajo y Restaurar Bar Nav. Este comportamiento se define
automticamente de forma predeterminada cuando utiliza el Editor de
botones para crear un botn que incluya los estados Abajo y Sobre y
Abajo. Para ms informacin sobre los botones, consulte Creacin de
smbolos de botn.Bar Nav Sobreespecifica el estado Sobre para la
divisin seleccionada cuando forma parte de una barra de navegacin y
tambin puede especificar el estado Sobre y Abajo.Bar Nav
Abajoespecifica el estado Abajo para la divisin seleccionada cuando
forma parte de una barra de navegacin.Restaurar Bar Navhace que las
otras divisiones de la barra de navegacin vuelvan a su estado
Arriba.Establecer men emergenteasocia un men emergente a una
divisin o zona interactiva. Este comportamiento se define
automticamente de forma predeterminada cuando utiliza el Editor de
mens emergentes. Para ms informacin, consulte Creacin de mens
emergentes.Establecer el texto de la barra de estadopermite definir
texto que aparecer en la barra de estado de la parte inferior de
las ventanas de la mayora de los navegadores.Asociacin de
comportamientosGracias al panel Comportamientos puede asociar un
comportamiento a una divisin. Tambin es posible asociar ms de un
comportamiento.Para asociar un comportamiento a una divisin
seleccionada mediante el panel Comportamientos:1. Haga clic en el
botnAadir comportamientodel panel Comportamientos.2. Seleccione un
comportamiento en el men emergente Aadir comportamiento. Para
obtener una explicacin de cada comportamiento, consulte Uso del
panel Comportamientos para aadir interactividad en las
divisiones.Edicin de comportamientosEl panel Comportamientos tambin
ofrece la posibilidad de editar comportamientos existentes. Puede
especificar el tipo de evento (como la accin de hacer clic) que
activa los efectos.Nota:no es posible cambiar el evento de Rollover
simple ni de Establecer imagen de barra de navegacin.Para cambiar
el evento de ratn que activa el comportamiento:1. Seleccione la
divisin de activacin que contiene el comportamiento que desee
modificar. Todos los comportamientos asociados con dicha divisin
aparecen en el panel Comportamientos.2. Seleccione el
comportamiento que desee editar.3. Haga clic en la flecha que se
encuentra junto al evento y elija un nuevo evento en el men
desplegable:
onMouseOveractiva el comportamiento cuando el puntero se
encuentra sobre el rea de activacin.onMouseOutactiva el
comportamiento cuando el puntero abandona el rea de
activacin.onClickactiva el comportamiento cuando se hace clic en el
objeto de activacin.onLoadactiva el comportamiento cuando se carga
la pgina web.
Uso de imgenes externas como estados de rolloverPuede utilizar
una imagen externa al documento actual de Fireworks como imagen
original para un estado de rollover. Es posible utilizar archivos
GIF, GIF animados, JPEG y PNG. Si elige un archivo externo como
origen del rollover, dicho archivo se intercambia con la divisin
destino cuando se activa el rollover en un navegador web.El archivo
debe tener la misma altura y anchura que la divisin en que se va a
colocar. En caso contrario, el navegador acomoda el archivo para
encajarlo dentro del objeto de divisin. Este cambio de tamao puede
reducir la calidad, especialmente si se trata de un GIF animadoPara
seleccionar un archivo de imagen externo como origen de un estado
de rollover:1. Elija Archivo de imagen y haga clic en el icono de
carpeta en los cuadros de dilogo Intercambiar imagen, Bar Nav Sobre
o Bar Nav Abajo.
Nota:si no aparece esta opcin en el cuadro de dilogo
Intercambiar imagen, elija Ms opciones y realice el paso 1.
2. Localice el archivo que desee utilizar y haga clic enAbrir.3.
Si fuera necesario, no seleccione la casilla Precargar imgenes (si
el archivo externo es un archivo GIF animado).
El cach previo puede interrumpir la visualizacin de los archivos
GIF animados como estados de rollover. No seleccione la casilla
Precargar imgenes cuando defina el rollover para evitar este
problema.RegresarPREPARACIN DE LAS DIVISIONES PARA LA
EXPORTACINMediante el Inspector de propiedades es posible crear
divisiones interactivas a las que puede asignar valores URL y
marcos de destino. Asimismo puede especificar texto alternativo que
aparecer en un navegador conforme se carga una imagen. Tambin puede
elegir un formato de exportacin de archivo para optimizar una
divisin seleccionada. Si el Inspector de propiedades est
minimizado, haga clic en la flecha de expansin que se encuentra en
la esquina inferior derecha para ver todas las propiedades de la
divisin.
Utilice el Inspector de propiedades o el panel Capas para
asignar diferentes nombres a las divisiones. Fireworks utiliza el
nombre que especifique para asignar nombres a los archivos que se
generarn a partir de la divisin durante la exportacin. Si no
introduce un nombre de divisin en el Inspector de propiedades,
Fireworks asignar de forma automtica nombres para las divisiones
durante la exportacin. Puede cambiar el criterio de denominacin
automtica que utiliza Fireworks en el cuadro de dilogo Configuracin
de HTML.Durante la exportacin de un documento con divisiones de
Fireworks se crea un archivo HTML y varios archivos de imagen. Las
propiedades del archivo HTML exportado se pueden definir en el
cuadro de dilogo Configuracin de HTML.Asignacin de valores
URLCuando se asigna un valor URL a una divisin, el usuario puede ir
directamente a la direccin cuando haga clic en el rea definida
dentro del navegador web.Para asignar un vnculo URL a una divisin
seleccionada: Introduzca un valor URL en el cuadro de texto Vnculo
del Inspector de propiedades.Introduccin de texto alternativoEl
texto alternativo o alt aparece en el marcador de posicin de la
imagen mientras sta se descarga de la web. Tambin aparece en lugar
de una imagen que no se descargue correctamente.Para especificar
texto alt en una divisin seleccionada: En el inspector Propiedades,
escriba el texto en el cuadro de texto Alt.Asignacin de un marco
destinoUn destino es un marco de pgina web alternativo, o una
ventana de navegador web, en donde se abre el documento vinculado.
Puede especificar un destino para una divisin seleccionada en el
Inspector de propiedades. Si el Inspector de propiedades est
minimizado, haga clic en la flecha de expansin para ver todas las
propiedades.Para especificar un destino de una divisin seleccionada
en el Inspector de propiedades: Introduzca un nombre de marco HTML
en el cuadro de texto Destino o elija un destino reservado en el
men emergente Destino.Asignacin de nombres para las divisionesLa
divisin corta una imagen en varios trozos. Cada porcin de cada
fotograma se exporta como un archivo independiente que debe tener
un nombre.Fireworks asigna un nombre a cada archivo de divisin
durante la exportacin. Puede aceptar los criterios de denominacin
predeterminados, cambiar estos criterios, o especificar un nombre
especfico para cada divisin.Para introducir un nombre personalizado
de divisin, siga uno de estos procedimientos:1. Seleccione la
divisin en el lienzo, introduzca un nombre en el cuadro Nombre de
objeto del Inspector de propiedades y pulse Intro.2. Haga doble
clic en el nombre de la divisin de la capa de web, escriba un nuevo
nombre y pulseIntro.Para asignar de forma automtica un nombre a un
archivo de divisin: Cuando exporte la imagen con divisiones,
especifique un nombre en el cuadro de texto Nombre de archivo
(Windows) del cuadro de dilogo Exportar.Nota:no aada ninguna
extensin de archivo al nombre base. Durante la exportacin,
Fireworks aade la extensin de archivo de forma automtica a los
archivos de divisinDefinicin de la exportacin de tablas HTMLSi
exporta un documento con divisiones de Fireworks como HTML, el
documento se vuelve a ensamblar mediante una tabla HTML. Cada
elemento de divisin del documento Fireworks reside en una celda de
tabla. Tras la exportacin, una divisin de Fireworks se convierte en
una celda de tabla en el cdigo HTML.Entre las diversas opciones
disponibles, puede elegir si desea utilizar espaciadores o tablas
anidadas durante la exportacin a HTML:Los espaciadoresson imgenes
que permiten alinear correctamente las celdas de tabla al mostrarse
en un navegador.Una tabla anidadaes una tabla dentro de otra tabla.
Las tablas anidadas no utilizan espaciadores. Pueden tardar ms en
cargarse en un navegador, pero la edicin del cdigo HTML resulta ms
fcil al no haber espaciadores.Creacin de botones y mens
emergentes
Creacion de smbolos de botnCreacin de barras de navegacinCreacin
de mens emergentesActividad prctica
Macromedia Fireworks MX permite crear una gran variedad de
botones y mens emergentes JavaScript incluso si no conoce
JavaScript.
El editor de botones de Fireworks gua al usuario a travs del
proceso de creacin de botones y le permite automatizar muchas de
las tareas. El resultado es un prctico smbolo de botn. Despus de
crear un smbolo de botn, puede fcilmente crear instancias del
smbolo para crear una barra de navegacin o bar nav.
Fireworks tambin incluye el Editor de mens emergentes que
permite crear rpida y fcilmente mens emergentes horizontales y
verticales. La ficha Avanzado del Editor de mens emergentes le
ofrece un control creativo sobre el espaciado, relleno y bordes de
celdas, la sangra del texto y otras propiedades.
Al exportar un botn o men emergente, Fireworks genera de forma
automtica el cdigo JavaScript necesario para mostrarlo en el
navegador Web. Puede insertar fcilmente en Macromedia Dreamweaver
el cdigo HTML y JavaScript de Fireworks de las pginas web, tambin
puede copiar y pegar el cdigo en cualquier archivo HTML.CREACIN DE
SMBOLOS DE BOTNLos botones constituyen los elementos de navegacin
de una pgina web. Los botones creados en el Editor de botones
tienen 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
bar nav.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 se puede editar
de forma sencilla. Haga doble clic en la instancia del lienzo y
podr modificarlo en el Editor de botones o el Inspector de
propiedades.Al igual que otros smbolos, los botones tienen un punto
de registro. El punto de registro es un punto central que facilita
la alineacin del texto y de los distintos estados del botn cuando
est en el Editor de botones.
ACERCA DE LOS ESTADOS DE BOTNUn botn puede tener hasta cuatro
estados diferentes. Cada estado representa el aspecto del botn en
respuesta a un evento del ratn:
El estado Arribaes el estado predeterminado o aspecto de reposo
del botn.
El estado Sobrees el nuevo aspecto con el que aparecer el botn
al mover el puntero sobre l. Este estado avisa al usuario que al
hacer clic es probable que se produzca una accin.
El estado Abajoes a menudo una imagen del botn con el aspecto de
estar "presionado", representa el botn despus de hacer clic sobre
l. Este estado de botn representa normalmente la pgina web actual
en la barras de navegacin con varios botones.
El estado Sobre y Abajoes 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.Con el Editor de botones puede crear todos estos
estados, as como el rea para la activacin de la accin del botn.
USO DEL EDITOR DE BOTONESUtilice el Editor de botones de
Fireworks para crear y editar un smbolo de botn JavaScript. Las
fichas que se encuentran en la parte superior del Editor de botones
se corresponden con los cuatro estados de botn y el rea activa. Las
sugerencias que puede observar en cada opcin del Editor de botones
le ayudan a realizar decisiones de diseo para los cuatro estados de
botn.
CREACIN DE UN SENCILLO BOTN DE DOS ESTADOSGracias al Editor de
botones puede crear botones personales arrastrando formas,
importando imgenes de grficos o arrastrando objetos en la ventana
de documento. Despus el Editor de botones le guiar por los pasos
que permiten controlar el comportamiento del botn.Para crear un
estado Arriba:1. ElijaEditar > Insertar > Nuevo botnpara
abrir el Editor de botones. Se abre el Editor de botones con la
ficha del estado Arriba.2. Importe o cree el grfico del estado
Arriba:
Arrastre y coloque o importe el grfico que aparecer como el
estado Arriba del botn en el rea de trabajo del Editor de
botones.
Utilice las herramientas de dibujo para crear un grfico o
utilice la herramienta Texto para crear un botn a partir de
texto.
Haga clic enImportar un botny seleccione un botn editable ya
creado en la biblioteca Importar un botn. Si elige esta opcin no
debe preocuparse por la creacin del resto de los estados del botn.
En cada uno de los estados del botn aparecer automticamente con los
grficos y el texto adecuados.
3. Si lo desea, elija la herramienta Texto y cree el texto del
botn.Para crear un estado Sobre:1. Haga clic en la fichaSobredel
Editor de botones.2. Siga uno de los siguientes procedimientos para
crear el estado Sobre del botn:
Haga clic enCopiar grfico Arribapara pegar una copia del
elemento grfico del estado Arriba en la ventana del estado Sobre y
modifquelo para cambiar su aspecto.
Importe, dibuje o arrastre y coloque un grfico.
CREACIN DE UN BOTN CON TRES O CUATRO ESTADOSCuando cree un botn,
puede aadir, adems de los estados Arriba y Sobre, los estados Abajo
y Sobre y Abajo. Estos estados aaden indicaciones visuales para los
usuarios de la pgina web.
Es posible crear una bar nav que utilice dos estados o incluso
botones de un estado, pero slo un botn con los cuatro estados se
puede considerar un verdadero botn de bar nav en Fireworks.
Fireworks incluye varios comportamientos de bar nav para que los
botones acten como si estuvieran relacionados unos con otros. Por
ejemplo, puede crear botones de bar nav que actan como pulsadores
de una radio de coche antiguo: al hacer clic en un botn, permanece
pulsado hasta hacer clic en otro botn.
Aunque no es necesario crear botones de cuatro estados para
crear una bar nav, si los utiliza podr sacar partido de los
comportamientos de Bar Nav en Fireworks.
Para crear el estado Abajo:1. Abra un botn de dos estados en el
Editor de botones y haga clic en la fichaAbajo.
2. Siga uno de los siguientes procedimientos para crear el
estado Abajo del botn:
Haga clic enCopiar grfico Sobrepara pegar una copia del elemento
grfico del estado Sobre en la ventana del estado Abajo y modifquelo
para cambiar su aspecto.
Importe, dibuje o arrastre y coloque un grfico.
Nota:al insertar o crear un grfico para el estado Abajo, se
selecciona automticamente la opcin Incluir estado Abajo en Bar Nav.
Este estado de botn es adecuado para los botones que forman parte
de barras de navegacin.
Para crear un estado Sobre y Abajo:1. Abra un botn de tres
estados en el Editor de botones y haga clic en la fichaSobre y
Abajo.2. Siga uno de los siguientes procedimientos para crear el
estado Sobre y Abajo del botn:
Haga clic enCopiar grfico Abajopara pegar una copia del elemento
grfico del estado Abajo en la ventana del estado Sobre y Abajo y
modifquelo para cambiar su aspecto. Importe, dibuje o arrastre y
coloque un grfico.
Nota:al insertar o crear un grfico para el estado Sobre y Abajo,
se selecciona automticamente la opcin Incluir estado Sobre y Abajo
en Bar Nav. Este estado de botn es adecuado para los botones que
forman parte de barras de navegacin.
USO DE EFECTOS DE BISELADO PARA DIBUJAR ESTADOS DE UN BOTNAl
crear grficos para cada estado de botn, puede aplicar Efectos
automticos preestablecidos para crear el aspecto comn de cada
estado. Por ejemplo, si se desea crear un botn de cuatro estados,
puede utilizar el efecto Elevado en el grfico del estado Arriba, el
efecto Resaltado para el estado Abajo, etc.Para aplicar un Efecto
automtico preestablecido a un smbolo de botn:1. Abra el smbolo de
botn que desee en el Editor de botones y seleccione el grfico en el
que desee aadir un Efecto automtico.2. Haga clic en el botnAadir
efectosdel Inspector de propiedades.3. En el men emergente que
aparece, siga uno de los procedimientos siguientes:
ElijaBisel y Relieve > Bisel interior.
ElijaBisel y Relieve > Bisel exterior.
4. En la ventana emergente que aparece, elija un preestablecido
de botn. Los preestablecidos de botn se describen a
continuacin.
5. Repita los pasos 1 al 4 para el resto de los estados de
botones, incluya en cada estado un efecto diferente de
preestablecido de botn.
INSERCIN DE BOTONES EN UN DOCUMENTOEs posible insertar
instancias de smbolos de botn en un documento desde el panel
Biblioteca.Para colocar instancias de un smbolo de botn en un
documento:1. Abra el panel Biblioteca.2. Arrastre un smbolo de botn
hasta el documento actual.
Para colocar instancias adicionales de un smbolo de botn en un
documento, siga uno de los siguientes procedimientos:
Seleccione una instancia y elijaEditar > Clonarpara colocar
otra instancia delante de la instancia seleccionada. La nueva
instancia se convierte en el objeto seleccionado.
Sugerencia:la clonacin de botones resulta til al crear una bar
nav alineada, debido a que puede mover las copias una direccin con
las teclas de flecha y mantener la alineacin con la otra coordenada
de posicin.
Arrastre otra instancia de botn desde el panel Biblioteca hasta
el documento.
Mantenga pulsada la tecla Alt (Windows) u Opcin (Macintosh)
mientras arrastra una instancia en el lienzo para crear otra
instancia de botn.
Copie una instancia y pegue instancias adicionales.
IMPORTACIN DE SMBOLOS DE BOTNLos smbolos de botn del panel
Biblioteca son especficos del documento. Si ha abierto un documento
con smbolos en el panel Biblioteca y crea un nuevo documento, el
panel Biblioteca del nuevo documento estar vaco. Sin embargo,
existen varios mtodos que puede utilizar para importar smbolos de
botn en el panel Biblioteca de un documento, ya sea desde una
biblioteca o desde otro documento de Fireworks.Para importar
smbolos de botn en el panel Biblioteca de un documento, siga uno de
los siguientes procedimientos: Arrastre y coloque una instancia de
botn de otro documento de Fireworks en el documento actual.
Corte y pegue una instancia de botn de otro documento de
Fireworks en el documento actual.
Exporte smbolos de botn de otro documento de Fireworks en un
archivo de biblioteca PNG, despus, importe los smbolos de botn
desde el archivo de biblioteca PNG en el documento actual.
ElijaEditar > Bibliotecase importe los smbolos de botn en el
panel Biblioteca del documento desde las bibliotecas de botones del
submen. Estas bibliotecas contienen una amplia variedad de smbolos
de botn predefinidos preparados por Macromedia.Los mtodos para
importar y exportar smbolos de botn son los mismos que los
utilizados para los smbolos grficos y de animacin.
EDICIN DE SMBOLOS DE BOTNLos smbolos de botn de Fireworks MX
constituyen un tipo especial de smbolo. Tienen dos tipos de
propiedades: algunas propiedades que cambian en todas las
instancias cuando edita una instancia o el smbolo y otras
propiedades que afectan slo a la instancia actual.
Los smbolos de botn de Fireworks permiten sacar partido de la
facilidad de uso de los smbolos permitiendo la edicin de
determinadas propiedades de una instancia de botn como, por
ejemplo, el texto, sin afectar al resto de las instancias.
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.
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:
Haga doble clic en una instancia del botn en el espacio de
trabajo.
En el panel Biblio