Animacin de capas con las lneas de tiempo

Se denomina HTML dinmico (o DHTML) a la combinacin de HTML con un lenguaje de scripts que permite cambiar propiedades de estilo o posicionamiento de elementos HTML. En Dreamweaver, las lneas de tiempo usan HTML dinmico para cambiar las propiedades de las capas e imgenes con el transcurso del tiempo. Use lneas de tiempo para crear animaciones sin controles ActiveX, plug-ins ni applets de Java (aunque s requieren cdigo JavaScript).
Nota: la palabra dinmico puede tener distintos significados en distintos contextos relacionados con la Web. No hay que confundir el HTML dinmico con la idea de una pgina Web dinmica, que es una pgina Web generada dinmicamente por cdigo del lado del servidor antes de servirla a un visitante.

Las lneas de tiempo permiten cambiar la posicin, el tamao, la visibilidad y el orden de apilamiento de una capa. (Las funciones de capa de las lneas de tiempo solamente funcionan en las versiones 4.0 o posteriores de los navegadores.) Las lneas de tiempo tambin sirven para realizar otras acciones cuando termine de cargarse la pgina. Por ejemplo, las lneas de tiempo pueden cambiar el archivo de origen de una etiqueta de imagen para que aparezcan distintas imgenes en la pgina durante un periodo de tiempo. Para ver el cdigo JavaScript generado por una lnea de tiempo, abra la vista Cdigo de la ventana de documento. El cdigo de lnea de tiempo est en la funcin MM_initTimelines dentro de una etiqueta script en la seccin head del documento. Al editar el cdigo HTML de un documento que contenga lneas de tiempo, procure no mover, eliminar o cambiar el nombre de elementos relacionados con la lnea de tiempo.

Utilizacin del panel Lneas de tiempo El panel Lneas de tiempo muestra cmo cambian las propiedades de las capas e imgenes en el transcurso del tiempo. Elija Ventana > Lneas de tiempo para abrir el panel Lneas de tiempo.
Men emergente Lnea de tiempo Cabezal de reproduccin Nmeros de fotograma

Canal Comportamientos

Fotogramas clave Barra de animacin

Canal de animacin

Men emergente Lnea de tiempo Especifica Cabezal de reproduccin Muestra

qu lneas de tiempo del documento se estn mostrando actualmente en el panel Lneas de tiempo. qu fotograma de la lnea de tiempo se est mostrando actualmente en la ventana de documento. entre los botones Atrs y Reproducir corresponde al fotograma actual. La duracin de la animacin se controla estableciendo el nmero total de fotogramas y el nmero de fotogramas por segundo (fps). El valor predeterminado de 15 fotogramas por segundo es una buena velocidad media para la mayora de los navegadores que se ejecutan en sistemas normales Windows o Macintosh.

Nmeros de fotograma Indica la numeracin secuencial de los fotogramas. El nmero que aparece

Nota: las velocidades ms altas no mejoran necesariamente los resultados. Los navegadores siempre reproducen todos los fotogramas de la animacin, incluso aunque en el sistema del usuario no puedan alcanzar la velocidad especificada. La velocidad de fotogramas se omite si es superior a la que puede admitir el navegador.

Men contextual

Contiene varios comandos relacionados con la lnea de tiempo.

Canal Comportamientos Es

el canal de los comportamientos que deben ejecutarse en un fotograma determinado de la lnea de tiempo.

Barras de animacin Muestran la duracin de la animacin de cada objeto. Una sola fila puede incluir mltiples barras en representacin de otros tantos objetos. Barras diferentes no pueden controlar un mismo objeto en el mismo fotograma. Fotogramas clave Son

fotogramas de una barra en los que se han especificado propiedades del objeto (como posicin, por ejemplo). Dreamweaver calcula valores intermedios para fotogramas en fotogramas clave. Los fotogramas clave se sealan mediante pequeos crculos. barras para animar capas e imgenes.

Canales de animacin Muestran

Opciones de reproduccin A continuacin se enumeran las opciones de reproduccin para ver la animacin.

Rebobinar Desplaza Atrs Desplaza

el cabezal de reproduccin hasta el primer fotograma de la lnea de tiempo.

el cabezal de reproduccin un fotograma hacia la izquierda. Haga clic en el botn Atrs y mantngalo presionado para reproducir la lnea de tiempo hacia atrs.

Reproducir Desplaza Reprod. auto. Inicia

el cabezal de reproduccin un fotograma hacia la derecha. Haga clic en el botn Reproducir y mantngalo presionado para reproducir la lnea de tiempo hacia delante.

automticamente la reproduccin de una lnea de tiempo cuando la pgina actual se carga en un navegador. Reprod. auto. adjunta un comportamiento a la seccin body de la pgina que ejecuta la accin Reproducir lnea de tiempo cuando se carga la pgina.
Bucle Hace

que la lnea de tiempo actual se reproduzca en bucle indefinidamente mientras la pgina est abierta en un navegador. Bucle inserta el comportamiento Ir a fotograma en lnea de tiempo en el canal Comportamientos despus del ltimo fotograma de la animacin. Haga doble clic en el marcador del comportamiento en el canal Comportamientos para editar los parmetros de dicho comportamiento y cambiar el nmero de repeticiones en bucle.

Desplazamiento de una capa utilizando una animacin de lnea de tiempo El tipo ms comn de animacin de lnea de tiempo est relacionado con el desplazamiento de una capa a lo largo de un recorrido. Las lneas de tiempo solamente pueden mover capas. Para hacer que se muevan imgenes o texto, cree una capa usando el botn Dibujar capa en la barra Insertar y luego inserte imgenes, texto o cualquier otro tipo de contenido en la capa. Las lneas de tiempo tambin pueden cambiar otros atributos de capas e imgenes. Para obtener ms informacin, consulte Cambio de propiedades de imagen y capa con lneas de tiempo en la pgina 6.
Para animar una capa utilizando una lnea de tiempo:

1 2

Desplace la capa al lugar donde deber estar cuando se inicie la animacin. Elija Ventana > Lneas de tiempo.

Animacin de capas con las lneas de tiempo

Seleccione la capa que desea animar. Asegrese de haber seleccionado el elemento deseado. Haga clic en el marcador de capas o el manejador de seleccin de capas, o utilice el panel Capas para seleccionar una capa. Al seleccionar una capa, a su alrededor aparecen manejadores, como se muestra en la siguiente ilustracin.
Haga clic en el manejador de seleccin de la capa para seleccionarla

Capa seleccionada con una imagen en su interior

Al hacer clic en la capa, aparecer un punto de insercin intermitente en su interior, pero no se seleccionar la capa.
4

Elija Modificar > Lnea de tiempo > Aadir objeto a lnea de tiempo o, simplemente, arrastre la capa seleccionada al panel Lneas de tiempo. Aparecer una barra en el primer canal de la lnea de tiempo. En la barra se mostrar el nombre de la capa.

5 6

Haga clic en el marcador del fotograma clave que se encuentra en el extremo de la barra. Desplace la capa al lugar de la pgina en el que deber estar cuando termine la animacin. Aparecer una lnea que indica la ruta de la animacin en la ventana de documento. Si desea que la capa se desplace describiendo una curva, seleccione su barra de animacin y mantenga presionada la tecla Control (Windows) o la tecla Comando (Macintosh) mientras hace clic en un fotograma en medio de la barra para aadir un fotograma clave en el fotograma en que ha hecho clic, o haga clic en un fotograma en medio de la barra de animacin y elija Aadir fotograma clave en el men contextual. Repita este paso para definir ms fotogramas clave. Mantenga presionado el botn Reproducir para obtener una vista previa de la animacin en la pgina. Repita el procedimiento para aadir otras capas e imgenes a la lnea de tiempo y para crear una animacin ms compleja.

Creacin de una lnea de tiempo arrastrando una ruta Si desea crear una animacin con una ruta compleja, puede ser ms conveniente grabar la ruta al arrastrar la capa en lugar de crear fotogramas clave individuales.
Para crear una lnea de tiempo arrastrando una ruta:

1 2

Seleccione una capa. Desplace la capa al lugar donde deber estar cuando se inicie la animacin. Compruebe que ha seleccionado la capa. Si el punto de insercin se encuentra en la capa, sta no est seleccionada. Para seleccionar una capa, haga clic en el marcador de capas o el manejador de seleccin de capas o utilice el panel Capas.

3 4 5

Elija Modificar > Lnea de tiempo > Registrar ruta de capa. Arrastre la capa por la pgina para crear una ruta. Suelte la capa en el punto donde debe detenerse la animacin. Dreamweaver aade una barra de animacin a la lnea de tiempo con el nmero adecuado de fotogramas clave.

En el panel Lneas de tiempo, haga clic en el botn Rebobinar; luego, mantenga presionado el botn Reproducir para obtener una vista previa de la animacin.

Modificacin de lneas de tiempo Despus de definir los componentes bsicos de una lnea de tiempo, se pueden realizar cambios, como aadir y eliminar fotogramas, cambiar el momento de inicio de la animacin, etc.
Para modificar una lnea de tiempo, lleve a cabo una de estas operaciones:

Para prolongar la duracin de la animacin, arrastre el marcador del fotograma final hacia la derecha. Todos los fotogramas clave de la animacin se desplazarn, por lo que sus posiciones relativas permanecern constantes. Para evitar que otros fotogramas clave se desplacen, mantenga presionada la tecla Control (Windows) o Comando (Macintosh) mientras arrastra el marcador del fotograma final.

Para conseguir que la capa llegue al fotograma clave tarde o temprano, desplace el marcador del
fotograma clave hacia la derecha o la izquierda en la barra.

Para cambiar el momento de inicio de una animacin, seleccione una o varias de las barras
asociadas con la animacin (presione la tecla Mays para seleccionar ms de una barra a la vez) y arrstrelas a derecha o izquierda.

Para desplazar la posicin de una ruta de animacin completa, seleccione toda la barra y luego
arrastre el objeto por la pgina. Dreamweaver ajustar la posicin de todos los fotogramas clave. Si se realiza cualquier tipo de cambio teniendo seleccionada toda la barra, el cambio se aplicar a todos los fotogramas clave.

Para aadir o eliminar fotogramas de la lnea de tiempo, elija Modificar > Lnea de tiempo >
Aadir fotograma o Modificar > Lnea de tiempo > Quitar fotograma.

Animacin de capas con las lneas de tiempo

 Para hacer que la lnea de tiempo se reproduzca automticamente al abrirse la pgina en un

navegador, haga clic en Reprod. auto adjunta un comportamiento a la pgina que ejecuta la accin Reproducir lnea de tiempo cuando se carga la pgina.

Para conseguir que la pgina se reproduzca continuamente en bucle, haga clic en Bucle. Bucle
inserta la accin Ir a fotograma en lnea de tiempo en el canal Comportamientos despus del ltimo fotograma de la animacin. Pueden editarse los parmetros de este comportamiento para definir el nmero deseado de repeticiones en bucle. Cambio de propiedades de imagen y capa con lneas de tiempo Adems de mover capas con lneas de tiempo, se puede cambiar la visibilidad, el tamao y el orden de apilamiento de una capa. Tambin se puede cambiar el archivo de origen de una imagen.
Para cambiar las propiedades de imagen y capa con una lnea de tiempo:

En el panel Lneas de tiempo, lleve a cabo una de estas operaciones: fotogramas inicial y final siempre son fotogramas clave.)

Seleccione un fotograma clave de la barra que controla el objeto que desea cambiar. (Los Cree un fotograma clave haciendo clic en un fotograma situado en medio de la barra de
animacin y eligiendo Modificar > Lnea de tiempo > Aadir fotograma clave. Tambin puede crear un fotograma clave haciendo clic en un fotograma de la barra de animacin mientras presiona la tecla Control (Windows) o Comando (Macintosh).
2

Defina nuevas propiedades para el objeto eligiendo una de las siguientes opciones: junto al fotograma de texto Origen del inspector de propiedades, busque y seleccione una nueva imagen.

Para cambiar el archivo de origen de una imagen, haga clic en el icono de carpeta que aparece Para cambiar la visibilidad de una capa, elija inherit, visible o hidden (heredada, visible u
oculta) en el fotograma de texto Vis del inspector de propiedades.

Para cambiar el tamao de una capa, arrastre la capa por los selectores de cambio de tamao o
introduzca nuevos valores en los fotogramas Ancho y Alto del inspector de propiedades. No todos los navegadores pueden cambiar dinmicamente el tamao de una capa.

Para cambiar el orden de apilamiento de una capa, introduzca un nuevo valor en el fotograma
de texto ndice Z o use el panel Capas para cambiar el orden de apilamiento de la capa actual.
3

Mantenga presionado el botn Reproducir para ver la animacin.

Utilizacin de mltiples lneas de tiempo En lugar de intentar controlar la totalidad de la accin en una pgina con una lnea de tiempo, resulta ms fcil trabajar con lneas de tiempo independientes que controlen partes concretas de la pgina. Por ejemplo, una pgina puede incluir elementos interactivos, cada uno de los cuales puede desencadenar la reproduccin de diferentes lneas de tiempo.
Para administrar mltiples lneas de tiempo, lleve a cabo una de estas operaciones:

Para crear una nueva lnea de tiempo, elija Modificar > Lnea de tiempo > Aadir lnea de
tiempo.

Para eliminar la lnea de tiempo seleccionada, elija Modificar > Lnea de tiempo > Quitar lnea
de tiempo. De esta manera, se eliminan permanentemente todas las animaciones de la lnea de tiempo seleccionada.

Para cambiar el nombre de la lnea de tiempo seleccionada, elija Modificar > Lnea de tiempo >
Cambiar nombre de lnea de tiempo o introduzca un nuevo nombre en el men emergente Lnea de tiempo del panel Lneas de tiempo.

Para ver una lnea de tiempo diferente en el panel Lneas de tiempo, elija una nueva lnea de
tiempo en el men emergente Lnea de tiempo del panel Lneas de tiempo. Cmo copiar y pegar animaciones Cuando ya tenga la secuencia de animacin que desea, podr copiarla y pegarla en otra zona de la lnea de tiempo actual, en otra lnea de tiempo del mismo documento o en una lnea de tiempo de otro documento. Tambin podr copiar y pegar mltiples secuencias de una sola vez.
Para cortar o copiar y pegar secuencias de animacin:

Haga clic en una barra de animacin para seleccionar una secuencia. Para seleccionar mltiples secuencias, haga clic en mltiples barras de animacin mientras mantiene presionada la tecla Mays. Para seleccionar todas las secuencias, presione Control+A (Windows) o Comando+A (Macintosh). Copie o corte la seleccin. Realice una de estas operaciones:

2 3

Desplace el cabezal de reproduccin a otro lugar de la lnea de tiempo actual. Seleccione otra lnea de tiempo en el men emergente Lnea de tiempo. Abra otro documento o cree uno nuevo y despus, haga clic en el panel Lneas de tiempo.
4

Pegue la seleccin en la lnea de tiempo. Las barras de animacin de un mismo objeto no pueden superponerse porque una capa no puede estar en dos lugares a la vez (tampoco una imagen puede tener dos orgenes diferentes al mismo tiempo). Si la barra de animacin en la que est pegando la seleccin llega a solaparse a otra barra de animacin del mismo objeto, Dreamweaver desplazar automticamente la seleccin al primer fotograma que no se solape.

Animacin de capas con las lneas de tiempo

A la hora de pegar secuencias de animacin en otro documento, hay que tener presentes estos dos principios:

Si se copia una secuencia de animacin para una capa y el nuevo documento contiene una capa
con el mismo nombre, Dreamweaver aplicar las propiedades de la animacin a la capa existente en el nuevo documento.

Si se copia una secuencia de animacin para una capa y el nuevo documento no contiene una
capa con el mismo nombre, Dreamweaver pegar la capa y su contenido desde el documento original junto con la secuencia de animacin. Para aplicar la secuencia de animacin pegada a otra capa del nuevo documento, elija Cambiar objeto en el men contextual y seleccione el nombre de la segunda capa en el men emergente. Si lo desea, puede eliminar la capa pegada. Aplicacin de una secuencia de animacin a un objeto diferente Para ahorrar tiempo, se puede crear una secuencia de animacin una sola vez y aplicarla a todas las dems capas del documento.
Para aplicar una secuencia de animacin existente a otros objetos:

1 2 3

En el panel Lneas de tiempo, seleccione la secuencia de animacin y cpiela. Haga clic en cualquier fotograma del panel Lneas de tiempo y pegue la secuencia en ese fotograma. Haga clic con el botn derecho del ratn (Windows) o haga clic manteniendo presionada la tecla Control (Macintosh) en la secuencia de animacin pegada y elija Cambiar objeto en el men contextual. En el cuadro de dilogo que aparece a continuacin, elija otro objeto en el men desplegable y haga clic en Aceptar. Repita los pasos del 2 al 4 para todos los dems objetos a los que desee aplicar la misma secuencia de animacin.

4 5

Tambin puede cambiar de idea con respecto a la capa que desea animar, despus de haber creado la secuencia de animacin; en este caso, basta con que siga los pasos 3 y 4 anteriores (no es necesario copiar y pegar). Cambio de nombres de lneas de tiempo
Para cambiar el nombre de la lnea de tiempo que se est mostrando actualmente en el panel Lneas de tiempo:

1 2

Elija Modificar > Lnea de tiempo > Cambiar nombre de lnea de tiempo. En el cuadro de dilogo Cambiar nombre de lnea de tiempo, introduzca un nombre nuevo.

Si el documento contiene la accin de comportamiento Reproducir lnea de tiempo (por ejemplo, si contiene un botn en el que el usuario debe hacer clic para iniciar la lnea de tiempo), deber editar el comportamiento para reflejar el nuevo nombre de la lnea de tiempo.

Sugerencias para la animacin de lneas de tiempo Las siguientes sugerencias pueden mejorar el resultado de sus animaciones y facilitar considerablemente su creacin:

Muestre y oculte capas en lugar de cambiar el archivo de origen en animaciones con mltiples
imgenes. Si cambia el archivo de origen de una imagen se puede ralentizar la animacin, pues tendr que cargarse la nueva imagen. Si todas las imgenes se cargan de una vez en capas ocultas antes de que se ejecute la animacin, se evitarn las pausas y la ausencia de imgenes.

Ample las barras de animacin para crear un movimiento ms suave. Si la animacin resulta
entrecortada y las imgenes saltan de una posicin a otra, arrastre el fotograma final de la barra de animacin de la capa para extender el movimiento sobre ms fotogramas. Al alargar la barra de animacin se crean ms puntos de datos entre los puntos de inicio y de final del movimiento; esto tambin hace que el movimiento sea ms lento. Intente incrementar el nmero de fotogramas por segundo (fps) para aumentar la velocidad, pero tenga en cuenta que la mayora de los navegadores que se ejecutan en sistemas de tipo medio no admiten animaciones a velocidades superiores a 15 fps. Pruebe la animacin en distintos sistemas con diferentes navegadores para encontrar la mejor configuracin posible.

No anime grandes mapas de bits. La animacin de imgenes grandes da lugar a animaciones

lentas. Como alternativa, cree imgenes compuestas y mueva partes pequeas de estas imgenes. Por ejemplo, muestre un automvil en movimiento animando solamente las ruedas.

Cree animaciones simples. No cree animaciones que requieran recursos distintos a los que
pueden ofrecer los navegadores actuales. Los navegadores siempre reproducen todos los fotogramas en una animacin de lnea de tiempo, incluso cuando las prestaciones del sistema o de Internet se reducen.

Animacin de capas con las lneas de tiempo