Acerca del trabajo con capas en rollovers y animaciones

Trabajar con capas es una parte fundamental en la creacin de rollovers y animaciones en ImageReady. Colocar el contenido de una imagen para un rollover en su propia capa permite utilizar los comandos y opciones de la paleta Capas para crear efectos de rollover. De la misma manera, colocar cada elemento de una animacin en su propia capa le permite cambiar la posicin y aspecto del elemento en una serie de cuadros.

Ilustracin de un rollover. El botn est en su propia capa; los efectos se aaden a la capa para crear un nuevo aspecto del botn para el estado Sobre.

Ilustracin de una animacin. La imagen de la bicicleta est en su propia capa; la posicin de la capa cambia en cada cuadro de la animacin. Subtemas relacionados: Editar capas en estados de rollover y cuadros de animacin Unificar y aplicar rollovers y animaciones de capas

Editar capas en estados de rollover y cuadros de animacin

Algunos de los cambios que realiza en las capas afectan slo al estado de rollover o cuadro de animacin activo, mientras que otros afectan a todos los estados y cuadros en los que se incluyen las capas: Cambios especficos de estados y cuadros Afectan slo al cuadro de animacin o estado de rollover activo. Por defecto, los cambios que realice en una capa con los comandos y opciones de la paleta Capas, incluidos la opacidad de una capa, el modo de fusin, la visibilidad, la posicin y el estilo, son especficos de estados y cuadros. Sin embargo, es posible aplicar cambios de capas a todos los estados de un rollover y a todos los cuadros de una animacin mediante los botones para unificar de la paleta Capas. Importante: Los cambios que realice en las capas en el estado Normal o Cuadro 1, incluida la opacidad de una capa, el modo de fusin, la visibilidad, la posicin y el estilo, afectan a todos los estados o cuadros en los que las capas son idnticas. Por ejemplo, tome una seleccin que tenga un estado Normal, un estado Sobre y un estado Abajo. Si las capas de los estados Normal y Sobre son idnticas y aplica un estilo de capa en el estado Normal, el estilo de capa tambin se aplicar en el estado Sobre. Sin embargo, el estado Abajo no quedar afectado. Cambios generales Afectan a cada estado y cuadro en el que estn incluidas las capas. Los cambios que realice a los valores de pxel de la capa mediante herramientas de pintura y edicin, comandos de ajuste de color y tono, filtros, texto y otros comandos de edicin de imgenes, son cambios generales.

Unificar y aplicar rollovers y animaciones de capas

Por defecto, los cambios que realice en una capa con los comandos y opciones de la paleta Capas, incluida la visibilidad de la capa, la posicin y el estilo, slo se aplican al cuadro o estado (a no ser que est trabajando en el estado Normal o el Cuadro 1). Sin embargo, puede utilizar los botones para unificar de la paleta Capas y el comando Coincidir para aplicar los cambios a todos los estados de un rollover y a todos los cuadros de una animacin: en el cuadro o estado activo se aplican a los otros estados de un rollover o cuadros de una animacin. Cuando se selecciona un botn para unificar, los cambios se aplican a todos los estados y cuadros; cuando est deseleccionado, los cambios se aplican slo al estado o cuadro activo. El comando Capa > Coincidir le permite aplicar los atributos de la capa para un cuadro o estado existente a otros estados de un rollover y cuadros de una animacin.
Los botones para unificar determinan cmo los cambios que se realizan en una capa

Para unificar capas en estados de rollover y cuadros de animacin: Seleccione uno o ms botones para unificar en la paleta Capas:
Botn Unificar posicin de la capa , para aplicar los cambios que realiza en la posicin de una capa a todos los estados de un rollover y a todos los cuadros de una animacin. Botn Unificar visibilidad de la capa , para aplicar los cambios que realiza en la visibilidad de una capa a todos los estados de un rollover y a todos los cuadros de una animacin. Botn Unificar estilo de la capa , para aplicar los cambios que realiza en el estilo de una capa a todos los estados de un rollover y a todos los cuadros de una animacin.

Para hacer coincidir una capa existente con todos los estados de rollover y cuadros de animacin: 1.En la paleta Rollovers, seleccione el estado o cuadro que tenga los atributos de capa que desea utilizar. 2.Seleccione la capa que desea hacer coincidir en la paleta Capas. 3.Seleccione Capa > Coincidir, o elija Coincidir en el men de la paleta Capas. 4.Seleccione una de las siguientes opciones: Animacin actual, para aplicar los atributos de capa del cuadro seleccionado a todos los cuadros de la animacin. Estados del sector o mapa de imgenes actual, para aplicar los atributos de capa del estado seleccionado a todos los estados del rollover. Todos los rollovers, para aplicar los atributos de capa del estado seleccionado a todos los estados en todos los rollovers de la imagen que contiene la capa. 5.Seleccione los atributos de capa que desea hacer coincidir y, a continuacin, haga clic en OK. Nota: Elija Propagar cambios de cuadro 1 en el men emergente de la paleta Capas para actualizar de forma dinmica todos los estados de rollover y cuadros de animacin, segn el cambio de la posicin, visibilidad o estilo de capa del primer cuadro.

Usar la paleta Rollovers

La paleta Rollovers le permite crear, ver y definir opciones para los estados de rollover de una imagen. Por defecto, cada imagen tiene un estado, el estado Normal. Este estado corresponde al aspecto de la imagen cuando se carg por primera vez en un navegador Web sin tener lugar ningn efecto de rollover. Puede aadir estados a una imagen que tendrn lugar cuando el usuario ejecute una accin del ratn, como mover o hacer clic, en un rea de la pgina Web. Adems de los estados de rollover, la paleta Rollovers puede mostrar sectores, mapas de imgenes y cuadros de animacin. Mostrar sectores y mapas de imgenes le ayuda a realizar un seguimiento de los elementos de una imagen con efectos de rollover. Mostrar

cuadros de animacin facilita le permite saber qu estados de una imagen contienen animaciones.

La paleta Rollovers con sectores, mapas de imgenes y cuadros de animacin muestra: A. Estado Normal B. Mapa de imgenes con estado Abajo C. Sector con cuadros de animacin en estado Sobre D. Sector basado en capa con estado Sobre y estado Abajo Mostrar la paleta Rollovers Seleccione Ventana > Rollovers. Una marca de comprobacin indica que se est mostrando la paleta. Usar el men de la paleta Rollovers situado en la esquina superior derecha de la paleta para Haga clic en el tringulo acceder a los comandos para trabajar con rollovers. Mostrar sectores y mapas de imgenes en la paleta Rollovers Seleccione Opciones de paleta en el men de la paleta Rollovers. Seleccione o deseleccione Incluir sectores y mapas de imgenes y, a continuacin, haga clic en OK. Mostrar cuadros de animacin en la paleta Rollovers Seleccione Opciones de paleta en el men de la paleta Rollovers. Seleccione o deseleccione Incluir cuadros de animaciones y, a continuacin, haga clic en OK.

Cambiar el tamao de las miniaturas de los rollovers Elija Opciones de paleta en el men de la paleta Rollovers y seleccione un tamao de miniatura. Para tamaos que no sean Ninguno, seleccione Lmites del objeto o Todo el documento para determinar los contenidos de las miniaturas. Expandir y contraer estados, sectores y mapas de imgenes Haga clic en el tringulo a la izquierda de un elemento en la paleta Rollovers.

Crear y editar rollovers

La paleta Rollovers, junto con la paleta Capas, se utiliza para aadir efectos de rollover a una imagen. Cuando guarda la imagen como pgina Web, ImageReady aade cdigo JavaScript al archivo HTML resultante para especificar estados de rollover. Subtemas relacionados: Acerca de los rollovers Crear sectores para rollovers Crear estados de rollover Editar estados de rollover Previsualizar estados de rollover Aadir animacin a los estados de rollover Aplicar y crear estilos de rollover Copiar y pegar estados de rollover Duplicar estados de rollovers Reorganizar y eliminar estados de rollover

Acerca de los rollovers

Un rollover es un efecto Web en el que aparecen diferentes estados de una imagen cuando un visor realiza una accin con el ratn, como arrastrar el ratn o hacer clic, en un rea de la pgina Web. Un estado viene definido por una configuracin especfica de la paleta Capas, incluida la ubicacin de la capa, estilo y otras opciones de formato. Utilice un sector o un rea de mapa de imgenes para definir el rea activa de un rollover. Cuando se aade un nuevo estado a la imagen, se captura una instantnea del sector o rea de mapa de imgenes en el estado anterior. A continuacin, puede utilizar la paleta Capas para realizar cambios a la imagen en su nuevo estado. Cuando se guarda una imagen con estados de rollover como una pgina Web, cada estado de rollover se guarda como un archivo de imagen independiente.

Ilustracin de una imagen con tres estados de rollover: A. Estado Normal B. Estado Sobre C. Estado Abajo Puede utilizar los estilos de capa para crear efectos de rollover instantneos. Cuando trabaje con sectores basados en capas, tambin puede guardar la serie de estados como un estilo de rollover.

Crear sectores para rollovers

Puede crear de forma rpida sectores basados en capas para rollovers mediante la paleta Rollovers. Se recomienda utilizar sectores basados en capas al crear rollovers porque las dimensiones del contenido de una capa pueden cambiar en el transcurso de la creacin de un rollover, y los sectores basados en capas se ajustan automticamente para incluir los nuevos pxeles. Para ms informacin acerca de los distintos tipos de sectores. Para crear un sector basado en capas para un rollover: 1.Seleccione la capa en la paleta Capas. El contenido de la capa definir el rea activa para el rollover. 2.Haga clic en el botn Crear rollover a partir de las capas en la paleta Rollovers. Por defecto, ImageReady aade un estado Sobre al nuevo sector.

Crear estados de rollover

Puede aadir distintos estados a los sectores y mapas de imgenes de una imagen. Para aadir un estado de rollover a un sector o mapa de imgenes: 1.En la paleta Rollovers o en la imagen, seleccione el sector o mapa de imgenes al que desea aadir el estado de rollover. Nota: Si los sectores no estn visibles en la paleta Rollovers, seleccione Incluir sectores y mapas de imgenes en el cuadro de dilogo Opciones de la paleta Rollovers para que se muestren.

2.Realice una de las siguientes acciones en la paleta Rollovers: Haga clic en el botn Crear estado de rollover . Seleccione Nuevo estado de rollover en el men de la paleta. 3.Utilice el estado de rollover por defecto asignado por ImageReady o seleccione un estado de rollover distinto. 4.Modifique las capas utilizadas en el estado de rollover.

Editar estados de rollover

Cuando crea un estado de rollover, ImageReady asigna el tipo de estado por defecto; sin embargo, puede cambiar el estado fcilmente. Tambin puede utilizar la paleta Rollovers para centrarse en el contenido de la imagen de un estado para su edicin. Para editar el contenido de la imagen de un estado: 1.Seleccione un estado en la paleta Rollovers. Si es necesario, expanda el sector o el mapa de imgenes para ver sus estados. 2.Modifique las capas utilizadas en el estado de rollover. Para editar la accin del ratn para un estado de rollover: 1.Realice una de las acciones siguientes: Haga doble clic en un estado de rollover de la paleta Rollovers. Seleccione un estado de rollover en la paleta Rollovers y elija Opciones de estado de rollover en el men de la paleta. 2.Seleccione un estado y haga clic en OK: Sobre Activa la imagen cuando el usuario mueve el puntero del ratn sobre el rea del sector o del mapa de imgenes mientras el botn del ratn no est pulsado. (Sobre se selecciona automticamente para el segundo estado de rollover.) Abajo Activa la imagen cuando el usuario pulsa el botn del ratn en el rea del sector o del mapa de imgenes. El estado aparece mientras en el visor se mantiene pulsado el botn del ratn en el rea. Clic Activa la imagen cuando el usuario hace clic con el ratn en el rea del sector o del mapa de imgenes. El estado aparece hasta que se mueve el ratn fuera del rea del rollover. Nota: Distintos navegadores Web, o distintas versiones de un mismo navegador, pueden procesar hacer clic o hacer doble clic de forma diferente. Por ejemplo, algunos navegadores dejan el sector en el estado Clic despus de hacer clic, y en el estado Arriba despus de hacer doble clic; otros navegadores utilizan el estado Arriba slo

como transicin al estado Clic, independientemente de si se ha hecho clic o doble clic. Para estar seguro de que la pgina Web funcionar correctamente, asegrese de previsualizar los rollovers en varios navegadores Web. Personalizado Activa la imagen del nombre especificado cuando el usuario ejecuta la accin definida en el cdigo JavaScript correspondiente. (Debe crear cdigo JavaScript y aadirlo al archivo HTML para la pgina Web de manera que la opcin de estado de rollover Personalizado pueda funcionar. Para ms informacin, consulte un manual de JavaScript.) Ninguno Conserva el estado actual de la imagen para su uso posterior, pero no muestra una imagen cuando el archivo se guarda como pgina Web. Seleccionado Activa el estado de rollover cuando el usuario hace clic con el ratn en el rea del sector o del mapa de imgenes. El estado aparece hasta que se activa otro estado de rollover seleccionado y pueden darse otros efectos de rollover mientras el estado seleccionado est activo. Por ejemplo, un estado Seleccionado para un botn y un estado Sobre para otro botn pueden tener lugar simultneamente. Sin embargo, si ambos estados utilizan la misma capa, los atributos de capa del estado Seleccionado sobrescriben los del estado Sobre. Seleccione Usar como estado seleccionado por defecto para activar el estado inicialmente cuando el documento se previsualiza en ImageReady o se carga en un navegador Web. Fuera Activa el estado de rollover cuando el usuario mueve el ratn fuera del rea del sector o del mapa de imgenes. (El estado Normal generalmente tiene este propsito.) Arriba Activa el estado de rollover cuando el usuario suelta el botn del ratn en el rea del sector o del mapa de imgenes. (El estado Normal generalmente tiene este propsito.)

Previsualizar estados de rollover

Para previsualizar los efectos de rollover directamente en la ventana de documento de ImageReady, cambie al modo de previsualizacin de documento. Para previsualizar el efecto de rollover en el navegador Web por defecto de su ordenador, haga clic en el botn Previsualizar en el navegador por defecto de el cuadro de herramientas. (Consulte Previsualizar una imagen en un navegador.) Para utilizar el modo de previsualizacin de rollover: 1.Realice una de las acciones siguientes: 2.En la ventana de documento, realice la accin que activa el estado de rollover. Por ejemplo, coloque el ratn sobre el sector o rea de mapa de imgenes del rollover para previsualizar el estado Sobre. A continuacin, haga clic en el sector o rea de mapa de imgenes para previsualizar el estado Clic. Nota: Si un documento contiene un estado Seleccionado, se generan estados sintticos para los otros estados de la paleta Rollovers. El estado sinttico representa el aspecto del documento cuando el estado Seleccionado est activado. Los estados sintticos se generan automticamente y no se pueden editar. Para salir del modo de previsualizacin de rollover: Realice una de las acciones siguientes:
Seleccione cualquier herramienta de el cuadro de herramientas. Haga clic en el botn Cancelar Haga clic en el botn Previsualizar documento Elija Imagen > Previsualizar documento.

del cuadro de herramientas.

de la barra de opciones.

Aadir animacin a los estados de rollover

Puede aadir una animacin de varios cuadros a un estado de una imagen. Aadir una animacin al estado Normal har que la animacin se reproduzca cuando la imagen se cargue en un navegador Web. Aadir una animacin a otro tipo de estado har que la imagen se reproduzca cuando un usuario active el estado. Para aadir cuadros de animacin a un estado de rollover: 1.En la paleta Rollovers, seleccione el estado en el que quiere mostrar la animacin. Si es necesario, expanda el sector o el mapa de imgenes para ver sus estados. 2.Realice una de las acciones siguientes para aadir cuadros a la animacin: Haga clic en el botn Crear cuadro de animacin de la paleta Rollovers o elija Nuevo cuadro de animacin en el men de la paleta.

Nota: Si el botn Crear cuadro de animacin y el comando Nuevo cuadro de animacin no estn visibles, seleccione Incluir cuadros de animaciones en en el cuadro de dilogo Opciones de la paleta Rollovers.
Cree cuadros en la paleta Animacin.

Aplicar y crear estilos de rollover

Los estilos de rollover (indicados con un tringulo en la esquina superior izquierda de la miniatura del estilo) simplifican la creacin de rollovers ya que permiten convertir una capa en un efecto de rollover con tan slo hacer clic. Un estilo de rollover incluye todos los atributos de un rollover, incluidos sus estados y efectos de capa. Cuando se aplica un estilo de rollover a una capa, la capa se convierte en un sector basado en la capa. Para aplicar un estilo de rollover a una capa: 1.Seleccione una capa de la paleta Capas. 2.Seleccione Ventana > Estilos o haga clic en la ficha de la paleta Estilos para visualizarla. 3.Haga clic en la miniatura del estilo de rollover que desea aplicar. Las miniaturas de los estilos de rollover tienen un tringulo en la esquina superior izquierda. Para crear un estilo de rollover: 1.En la paleta Rollovers, cree los estados de rollover que desee. Nota: Es necesario utilizar un sector basado en capas para poder crear un estilo de rollover. 2.Aplique los efectos a cada estado utilizando estilos predefinidos de la paleta Estilos o definiendo de forma manual efectos de capa en la paleta Capas. 3.En la paleta Estilos, haga clic en el botn Crear nuevo estilo o seleccione Estilo nuevo en el men de la paleta. 4.Introduzca un nombre para el estilo, defina opciones de estilo y haga clic en OK. Debe seleccionarse la opcin Incluir estados de rollover para poder crear un estilo de rollover. El nuevo estilo de rollover aparece en la paleta Estilos. La previsualizacin en miniatura muestra los efectos en el estado Normal.

Copiar y pegar estados de rollover

Puede copiar un estado de rollover y pegarlo en otro estado del rollover actual o en un estado de otro rollover. Las capas del estado de origen sustituyen a las capas del estado de destino.

Tambin puede copiar cuadros de la paleta Animacin y pegarlos como estados en la paleta Rollovers, o copiar estados de la paleta Rollovers y pegarlos como cuadros en la paleta Animacin. Nota: Los comandos Copiar de la paleta Animacin y la paleta Rollovers utilizan un portapapeles interno disponible slo para estos comandos. Al copiar cuadros o estados de rollover, no se sobrescribe el portapapeles primario de ImageReady. Para copiar y pegar estados de rollover: 1.Seleccione un estado de rollover y, a continuacin, seleccione Copiar estado de rollover en el men de la paleta Rollovers. 2.Seleccione un estado de rollover en el que pegar el estado copiado: Seleccione un estado del rollover actual. Abra o visualice otro rollover, y seleccione un estado. 3.Seleccione Pegar estado de rollover en el men de la paleta Rollovers.

Duplicar estados de rollovers

Duplicar un estado es un modo fcil de aadir cuadros de animacin existentes a un estado nuevo. Para duplicar un estado de rollover: Seleccione un estado de rollover y realice una de las acciones siguientes:
Seleccione Duplicar estado de rollover en el men de la paleta Rollovers. Arrastre el estado al botn Crear estado de rollover .

El estado duplicado y los cuadros aparecen bajo el estado original en la paleta Rollovers.

Reorganizar y eliminar estados de rollover

Puede mover los estados entre los sectores y mapas de imgenes arrastrndolos a una nueva ubicacin en la paleta Rollovers. Tambin puede eliminar estados individuales o todos los estados de un rollover. Para mover los estados entre sectores y mapas de imgenes: Arrastre el estado hacia arriba o abajo de la paleta Rollovers. Cuando la lnea resaltada aparezca en la posicin deseada, suelte el botn del ratn.

Para eliminar estados de rollover: Papelera de la paleta Rollovers o seleccione Eliminar estado de rollover en el men de la paleta Rollovers. Para eliminar todos los estados de un rollover, seleccione Eliminar rollover en el men de la paleta Rollovers.
Para eliminar un estado, seleccione un estado de rollover y haga clic en el botn