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