CURSO COMPLETO DE DREAMWEAVER 8

--BÁSICOS--

 

05 - LÍNEAS DE TIEMPO - ANIMANDO GOTAS DE AGUA

Las líneas de tiempo, sirben para crear animaciónes en un documento, utilizan DHTML, para cambiar las propiedades de una capa o una imagen, en una serie de cuadros a través del tiempo. Pueden por ejemplo, cambiar la posición, tamaño, visibilidad y orden de una capa en el tiempo. Són muy útiles para crear acciones cuando una página se carga, por ej: una línea de tiempo puede cambiar una imagen o pueden ejecutar un
comportamiento aun determinado tiempo.

El código correspondiente a las líneas de tiempo, aparecerám dentro de una etiqueta Script, en el HEAD del documento.

Para visualizar la paletas de líneas de tiempo, vamos a Ventana > Líneas de tiempo




Un timeline, es una Línea de tiempo, podemos tener diferentes timelines en el mismo documento.

Las líneas de tiempo, tan solo pueden animar capas, por lo que si queremos animar una imagen debemos ponerla dentro de una capa.


Vamos a animar una gota de agua.

Para ello primero introducimos la imagen de la gota de agua, dentro de una capa, esto ya sabemos hacerlo, por lo que voy a omitir ese paso.

Una vez hecho esto, nos vamos a la paleta de  líneas de tiempo:

Damos click con el botón derecho y seleccionamos "Agregar Objeto"



Automaticamente se crea una línea de tiempo de 15 fotogramas, donde el primer fotograma y el último estan señalados por unos circulos identificativos, que indican que ambos son fotogramas clave, es decir, los fotogramas en los que se estableceran las distintas posiciones de nuestro elemento, los fotogramas intermedios, dreamweaver los calcula automáticamente. De todas formas, podemos crear de cualquier fotograma intermedio, un fotograma clave, para eso tan solo hay que hacer click derecho en el fotograma que queremos crear como fotograma clave y damos a "Agregar cuadro clave".



Para quitarlo tan solo hay que hacer click derecho sobre el fotograma que queremos eliminar y "Quita cuadro clave"



Vamos a crear un movimiento descendente a la gota, para ello nos situamos sobre el fotograma 15 y arrastramos la capa, hasta unos cms más abajo.



Ahora podemos ver la linea imaginaria que une los dos fotogramas clave.

Podemos "grabar" una ruta, de manera que le indiquemos el recorrido que tiene que hacer nuestro elemento.

Creamos una nueva capa, e insertamos de nuevo la imagen de la gota. Esta vez arrastramos la capa, hasta la línea de tiempo:



Si queremos que se ejecute a la misma vez que la capa anterior, deberemos crear otro timeline.



Si por el contrario queremos que se ejecute al terminar la animación de la primera gota, debemos arrastrar la capa, hasta el fotograma siguiente de la linea de tiempo de la gota:




Nos situamos sobre el primer fotograma clave, hacemos click derecho y seleccionamos "Registrar ruta de capa"



Ahora arrastramos la capa, siguiendo la ruta que queremos que haga nuestra animación. Dreamweaver creará tantos fotogramas clave como sean necesarios para realizar la animación.



A que és divertido? Realmente se pueden hacer efectos muy divertidos con las líneas de tiempo.


Ejercicio: Crea un nuevo documento, con los dos tipos de animación que hemos dado en este tutorial, puede emplear la imagen de la gota si quieres.




2007 ©By Almaweb.es

subir

Ir al menú de tutoriales de DREAMWEAVER

Todos los tutoriales son de mi completa autoría,

cualquier parecido con otros, es pura coincidencia.

Queda totalmente prohibida su reproduccion, total o parcial.

Si quieres enlazar mis tutoriales, no hay problema,

solo mandame un e-mail, para comunicarmelo.

Cualquier duda o sugerencia:

Tutoriales registrados

 

Alma Web

Design Sensation by almaweb.es

Foro Design Sensation