Forinsur S.L.

Centro de Formacin | Manual de Usuario

Animaciones con Dreamweaver CS3

Lneas de tiempo HTML dinmico se refiere a la capacidad de cambiar el estilo o propiedades de posicionamiento por medio de un lenguaje de script. Las lneas de tiempo utilizan HTML dinmico para cambiar las propiedades de una capa o una imagen en una serie de cuadros a travs del tiempo. Las lneas de tiempo crean animacin cambiando la posicin, tamao, visibilidad y orden de una capa en el tiempo. Las lneas de tiempo tambin son tiles para otras acciones que podemos querer que ocurran luego de que una pgina se carga. Controlando la lnea de tiempo con comportamientos Las funciones de capa de las lneas de tiempo funcionan solo en navegadores de generacin 4 o superiores. El cdigo correspondiente estar en la funcin MM_initTimelines dentro de una etiqueta SCRIPT en el HEAD del documento. El inspector de lnea de tiempo representa las propiedades de capas e imgenes a travs del tiempo. Para abrirlo debemos ir a Ventana/lnea de tiempo (Window/Timelines). La ventana que se abre contiene un cabezal de reproduccin y est dividido en cuadros como una pelcula.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Para animar una capa, una vez creada, abrimos el inspector de lnea de tiempo. Tomamos la capa y la arrastramos hasta el primer canal de la lnea de tiempo (justo debajo del cabezal). Se habr agregado una lnea violeta con un punto redondo al comienzo y otro al final. Estos puntos indican lugares donde pueden pasar cosas. Se llaman keyframes o cuadros clave y nos pueden servir, por ejemplo, para animar un layer. Hacemos clic en el keyframe del final, luego tomamos el layer en la ventana de documento y lo desplazamos a otro lugar. Lo que habremos creado es un desplazamiento de la capa desde la posicin original hasta el lugar donde lo pusimos finalmente.

Por ltimo tildarnos el casillero reproduccin automtica de la ventana de lnea de tiempo. Si queremos que repita dicho recorrido en forma indefinida, tildarnos la casilla Bucle de la ventana lnea de tiempo. Mostrando y escondiendo capas Para ver el funcionamiento de este comportamiento, abrimos una pgina en blanco y dibujamos una capa con fondo azul y cuya propiedad de visibilidad sea hidden

Forinsur S.L. Centro de Formacin | Manual de Usuario

Insertamos en la pgina un objeto (otra capa, imagen o texto) y tenindolo seleccionado abrimos la lista de comportamientos y elegimos mostrarocultar capas Elegimos la capa entre la lista y aadimos mostrar, aceptamos y comprobamos el funcionamiento.

Tcnico Especialista en Diseo, Animacin y Programacin Web

Podemos asociar el comportamiento ocultar capa a la misma capa que debe ocultarse Cambiando la posicin "z" de las capas En el panel de propiedades encontramos la siguiente opcin: ndice Z: Determina el ndice z, u orden de apilamiento, de la capa. Las capas con los nmeros ms altos aparecern por encima de las capas con los nmeros ms bajos. Los valores pueden ser positivos o negativos. Resulta ms sencillo cambiar el orden de apilamiento de las capas mediante el panel Capas que introduciendo valores de ndice z especficos Arrastrando Capas Para mover una o varias capas, lleve a cabo una de estas operaciones: Para mover arrastrando, seleccione las capas y arrastre el manejador de seleccin de la ltima capa seleccionada (resaltada en negro). Para mover un pxel cada vez, seleccione las capas y use las teclas de flecha. Utilice la tecla Mays y una tecla de flecha para mover la capa en el incremento actual de ajuste a la cuadrcula. Para obtener informacin sobre la configuracin del incremento de ajuste a la cuadrcula.