Animación en diseño web: ¿por qué y cuándo utilizarla? Uso de animaciones extraordinarias en el diseño web
Palabra "animación" proviene de la antigua palabra latina "ánima", lo que significa "alma". Los intentos de dar vida a objetos artificiales estáticos aparecieron hace miles y miles de años, cuando Pigmalión intentó despertar su creación: la estatua de la encantadora Galatea.
Hoy en día, la animación está firmemente arraigada en el diseño web y parece ser una gran adición a muchos elementos del sitio web. ¿Aporta más vida al diseño o a veces puede arruinarlo todo? Averigüemos qué beneficios puede aportar la animación a su sitio web y cuándo es mejor evitarla.
¿CÓMO APARECIÓ LA ANIMACIÓN EN EL DISEÑO WEB?
La animación apareció en Internet hace bastante tiempo. Al principio eran pequeños .GIF-archivos de varias imágenes en movimiento y videoclips. Fue un período oscuro con muchas postales parpadeantes, gatos bailando y otras cosas que preferiríamos no ver.
En aquellos tiempos lejanos, nadie consideraba la animación como un medio para mejorar la usabilidad de un sitio web. Se utilizaba principalmente para decoración o simplemente por diversión. Hoy en día, puede utilizar efectos de animación para mejorar la navegación y la usabilidad del sitio web.
Más recientemente, todos los elementos y efectos animados de los sitios web se crearon utilizando tecnología Flash. En ese momento era una tecnología revolucionaria, aunque era muy pesada y aumentaba significativamente el tiempo de carga del sitio. Hoy en día, las animaciones se crean utilizando una forma más ligera de codificar JavaScript y CSS, lo que ayuda a agregar elementos móviles a un sitio web sin sobrecargarlo. Y lo que es más importante, las animaciones ahora se utilizan para mejorar la UX y no solo por diversión. Es una excelente herramienta para que los diseñadores web ayuden a mejorar un sitio web y hacerlo más fácil de usar.
MEJORANDO LA USABILIDAD CON LA ANIMACIÓN
En muchos casos, los efectos de animación se utilizan para llamar la atención del usuario sobre detalles importantes, así como para ayudarle a tomar la decisión correcta en cuanto a la posibilidad de hacer clic en los elementos, entre otras cosas.
Por lo tanto, muchos sitios web utilizan un efecto de vibración en los formularios de inicio de sesión o registro para indicar a sus usuarios que hay un error. Por ejemplo, ingresar información incorrecta o una contraseña incorrecta. Esta tendencia imita a una persona que niega con la cabeza mientras dice "no".
Hay muchas otras formas de utilizar la animación para mejorar la UX. Se puede utilizar en la navegación para separar categorías de subcategorías, o en selección múltiple donde todos los demás elementos se desvanecen excepto el seleccionado.
E TECHEVENT – SITIO WEB CON ELEMENTOS ANIMADOS
Se pueden utilizar animaciones para guiar al usuario por el sitio e incluso hacer que compre algo. Agregar elementos interactivos y llamar la atención de los usuarios hacia ellos mediante efectos de animación puede ayudar a los sitios web comerciales a aumentar sus conversiones yRetorno de la inversión.
SITIO INTERACTIVO A PPS
Sitio web contar historias También puede beneficiarse de la animación. Puede ayudar a mostrar a los usuarios cuál es el siguiente paso o cómo elegir adónde ir a continuación.
USO DE LA ANIMACIÓN EN EL DISEÑO DE MATERIALES
La animación en el diseño web es una buena jugada que puede resultar extremadamente útil si no se utiliza sólo con fines decorativos. Los diseñadores de UI y UX ahora suelen utilizar la animación para mejorar su flujo de trabajo. Incluso Google comprende la importancia de este movimiento para la usabilidad. Así nació el material design.
El diseño de materiales está cada vez más de moda y se utiliza en diversas aplicaciones y diseños web en la actualidad. El secreto de su popularidad reside en su gran atención a cómo se percibe un objeto o elemento. Cómo el movimiento puede brindarle al usuario más información sobre el elemento y cómo usarlo.
en su Guía de diseño de materiales Google dice que el movimiento puede indicar a los usuarios que un objeto es liviano, pesado, flexible e incluso grande o pequeño. La animación debe usarse para proporcionar a los usuarios una mejor comprensión de cuál es la naturaleza de un objeto y, por lo tanto, cómo puede y debe usarse en un diseño.
Google va más allá con su animación y recomienda utilizar elementos en movimiento que cambian su velocidad y duración dependiendo del propósito o efecto que se quiera conseguir. De esta forma, Google utiliza elementos entrantes y salientes que aparecen en pantalla cuando necesitan llamar la atención, o desaparecen de la pantalla cuando ya no son necesarios.
CONSEJOS PARA ANIMACIONES UTILIZADAS EN SITIOS WEB
Al implementar animación en su sitio web, también debe estudiar detenidamente todos los obstáculos. Los elementos animados aún pueden dañar el rendimiento del sitio y la UX.
En primer lugar, debes comprobar bien si la animación no ralentiza la velocidad de carga y el rendimiento general de tu sitio. Esto se puede revelar simplemente comparando su sitio con las animaciones y el rendimiento de un juego de PC pesado. Si el juego se ejecuta mejor en tu escritorio que en el sitio web, este debería ser un motivo para reconsiderar las animaciones utilizadas.
El sitio web de Happy Forecast
Utilice CSS al crear animaciones para su sitio web. JQuery es ideal y se utiliza en muchos proyectos, pero realmente puede ralentizar el rendimiento de su sitio web. El código CSS te permite crear animaciones simples que se ven bien en cualquier dispositivo sin abrumar tu diseño y hacerlo lucir genial.
Asegúrese de que su animación responda. Un sitio web responsivo es imprescindible si quieres tener éxito. Y si sólo funciona y se ve bien en la pantalla del escritorio, es posible que estés perdiendo la batalla por los usuarios. Existen muchas herramientas que le permiten crear animaciones responsivas (como Adobe After Effects o Invision) y creadores de sitios web (Webflow y MotoCMS) que incorporan efectos animados responsivos en su flujo de trabajo. Ofrecen varios tipos de animaciones que se pueden utilizar dentro de un sitio web para mejorar su usabilidad y diseño.
La animación debe llamar la atención, pero no demasiado. Asegúrate de que el movimiento no tome demasiado tiempo ni dure demasiado en la pantalla. Esto es especialmente importante si hablamos de elementos con los que los usuarios necesitan interactuar con frecuencia. Puede resultar divertido una o dos veces, pero con el uso frecuente la animación se vuelve molesta.
Sitio web de Laerepenger
Comience utilizando pequeños elementos móviles en su sitio. De hecho, la animación es sólo un medio para un fin, no el fin en sí. No es necesario que lo enciendas donde quieras. Recuerde: el uso debe estar justificado.
Es mejor incluir animación en los elementos u objetos de la interfaz de usuario con los que los usuarios interactúan con más frecuencia. Como por ejemplo un menú de navegación o un formulario de suscripción. Y piénselo detenidamente antes de agregar un cuadro que rebota o una imagen deslizante: ¿cómo afectará la experiencia del usuario, mejorará la interacción con el sitio?
La animación es excelente para crear diseños memorables. Todavía se usa ampliamente en diseño web, a pesar de varios problemas menores con la velocidad de carga o la congelación. Pero lo principal que debes recordar al introducir elementos animados es su impacto en la usabilidad. Pero usted decide dónde y en qué cantidad integrar la animación en su sitio web.
Y finalmente, algunos ejemplos en los que se utilizó animación para dar en el blanco con precisión.
Sitio web de Kikk
Agencia Digital Nodeplus 
Crucero creativo 
Paisaje animado Granja vintage 
Agencia Digital Pomada 
- Traducción
Nota del traductor: El material presentado a continuación contiene una cantidad significativa de términos técnicos, cuya traducción puede causar imprecisiones. Si notas algún error tipográfico, error o inexactitud en la traducción, escríbenos y rápidamente lo corregiremos todo.
Además, como continuación del tema de la publicación de hoy, durante una semana estará abierto un curso académico avanzado sobre animaciones CSS, que normalmente está disponible mediante suscripción. Su descripción se encuentra al final del tema.
Los diseñadores y desarrolladores front-end utilizan CSS para crear estilos, posicionar elementos y, en general, hacer que los sitios web se vean bien. CSS se utiliza a menudo para añadir movimiento a las páginas web, aunque normalmente no va más allá de transiciones o animaciones suaves.
De hecho, la animación puede ser una herramienta poderosa que permite a los visitantes y clientes del sitio interactuar más fácilmente con la interfaz de un producto y alcanzar sus objetivos más rápidamente. Esto se puede lograr si sigue algunos principios básicos en su trabajo.
La compañía Disney se dedica a la animación desde hace muchos años y ha desarrollado las siguientes recomendaciones: en 1981, se publicó el libro "La ilusión de la vida: la animación de Disney", que enumera 12 principios de la animación (sobre ellos en Habré). Describen cómo utilizar la animación para crear una sensación del mundo real para los espectadores que miran en la pantalla.
En el artículo de hoy, veremos cada uno de estos doce principios y discutiremos cómo se pueden aplicar a la creación de páginas web. Todas las fuentes CSS y HTML se pueden descargar desde Codepen.
Aplanamiento y estiramiento
En el mundo existe el concepto de "masa corporal", y cuando un objeto se mueve, su masa permanece sin cambios. Cuando la pelota golpea el suelo, se ensanchará un poco y se aplanará porque la masa del objeto se redistribuye durante el contacto físico.
Este efecto es más útil al crear objetos físicos (como personas, relojes o pelotas que rebotan).
Por supuesto, en el caso de las páginas web, esta propiedad se puede ignorar: los elementos DOM no están necesariamente asociados con objetos físicos y pueden aumentar y reducir su tamaño en la pantalla según se desee. Por ejemplo, un botón puede crecer y transformarse en una ventana de información, y los mensajes de error aparecen y desaparecen.
De todos modos, la técnica de aplastar y expandir se puede utilizar para hacer que un elemento de la página parezca que tiene masa física. Incluso los pequeños cambios pueden crear un efecto sutil pero llamativo.
Los movimientos no ocurren de repente. En la vida cotidiana, cualquier acción va precedida de algún tipo de preparación, ya sea una pelota que frena la velocidad antes de caer por las escaleras o una persona que dobla las rodillas antes de saltar.
Este efecto se puede utilizar para hacer que los objetos de una página web se muevan de forma más realista. La espera en sí se puede implementar, por ejemplo, como un ligero movimiento, que permite a los usuarios comprender lo que está sucediendo y les ayuda a seguir más fácilmente el movimiento del objeto en la pantalla.
Este efecto consiste en definir un objeto como el punto focal de la escena, mientras que otros objetos dan lugar a la acción principal. Para crear este efecto, el objeto deseado se coloca adecuadamente en primer plano o se enmascaran los elementos que lo acompañan para centrar la atención del usuario en lo que se supone que debe ver.
En términos web, esto significa utilizar atenuación translúcida para determinados contenidos. Aplicar una capa más oscura a una página existente y luego colocar el contenido en primer plano centra la atención del usuario en ella.
Otro enfoque es utilizar movimientos. Cuando varios objetos se mueven en la página al mismo tiempo, puede resultar bastante difícil saber cuál realmente vale la pena mirar. Si en tal situación detiene todos los objetos excepto uno "necesario", automáticamente toda la atención se centrará en él.
El movimiento se puede utilizar de otras maneras. Por ejemplo, si un usuario está trabajando con un documento, una ligera sacudida y un parpadeo del botón "Guardar" pueden hacer que la persona haga clic en él. Cuando no hay actividad en la pantalla, incluso los pequeños movimientos destacan.
Movimientos de avance y cambio de paso a toda velocidad.
El movimiento directo se caracteriza por la representación completa de todos los cuadros de animación. A su vez, el cambio de paso se caracteriza por la creación de una secuencia de fotogramas clave, cuyos intervalos se completan posteriormente, generalmente con la ayuda de medios auxiliares.
El segundo enfoque se utiliza en la mayoría de las animaciones web: las transiciones entre fotogramas principales las implementa el navegador, que interpola la diferencia entre cada uno de ellos y dibuja tantos fotogramas intermedios como sean necesarios para que la animación final sea fluida.
La excepción es la función "Pasos". Al usarlo, el navegador "avanza" a través de un número determinado de fotogramas discretos. De esta manera puedes crear una secuencia de imágenes y luego reproducirlas una a la vez en el navegador usando el estilo Acción recta.
Siguiendo y arrollando
Las acciones no siempre ocurren simultáneamente. Cuando un automóvil en movimiento frena bruscamente, "se queda dormido" con el humo de los neumáticos y el conductor que está dentro continúa moviéndose hasta que se detiene por última vez.
Este efecto se logra mediante movimientos de seguimiento y barrido; son necesarios para indicar que el objeto se ha detenido. Por ejemplo, un elemento colocado en una lista puede viajar una distancia corta hasta la posición deseada y luego regresar a la posición correcta.
El efecto dominó se crea dando a los objetos diferentes ritmos de movimiento. Este enfoque se utiliza en las transiciones en iOS: algunos botones y elementos se mueven a diferentes velocidades, lo que da como resultado movimientos que son más realistas de lo que serían si se movieran a la misma velocidad. La combinación de movimientos le da tiempo al usuario para tomar conciencia de los cambios que se producen.
En la web, esto normalmente se logra combinando transiciones suaves o animaciones CSS a diferentes velocidades de reproducción.
Aceleración y desaceleración suaves
Los objetos rara vez pasan instantáneamente del reposo a la velocidad máxima. Por lo general, les toma algo de tiempo acelerar, al igual que les toma detenerse. Sin una aceleración y desaceleración gradual, los movimientos parecen antinaturales.
En terminología CSS, acelerar y desacelerar se conoce como aceleración o "función de aceleración", que describe el cambio en la velocidad de una animación.
Usando las funciones de suavidad, puedes crear animaciones que aceleran y desaceleran, e incluso efectos más complejos (usando la función cúbica-bezier).
Reducir la velocidad y acelerar hace que los objetos sean más realistas, pero hay una cosa más: en la vida rara vez se mueven en línea recta, por regla general, el movimiento sigue un arco curvo.
Hay un par de formas diferentes de lograr este tipo de movimiento de arco usando CSS. Una es combinar varias animaciones. Por ejemplo, se puede hacer una animación de una pelota que rebota moviendo el objeto hacia arriba y hacia abajo, y el segundo movimiento combinado con moverlo hacia la derecha. De esta forma resulta que la pelota va rebotando por la pantalla.
La segunda forma es rotar el elemento. Al cambiar el centro de rotación y moverlo fuera del objeto original, también puedes formar un arco.
acción secundaria
La acción principal que tiene lugar en la pantalla se puede enfatizar con una animación "secundaria". Esto podría ser el movimiento de los brazos de una persona al caminar o el movimiento de la cabeza con cada paso. O el polvo que se levanta del suelo con cada golpe de bola.
En el caso de los sitios web, los elementos secundarios pueden "extenderse" para resaltar aquello a lo que el usuario realmente necesita prestar atención (un caso de uso de ejemplo es arrastrar un elemento para insertarlo en el medio de una lista).
Al manipular la duración de la animación, puede hacer que los objetos grandes parezcan pesados y los objetos pequeños parezcan livianos.
En la web, esto se puede lograr simplemente cambiando los valores de duración de la animación y duración de la transición.
Al cambiar la duración de una animación, puedes hacer que se destaque entre el contenido de una página web o durante la interacción del usuario.
Esta técnica se suele utilizar para llamar la atención sobre determinadas acciones y hacerlas más dramáticas en los dibujos animados. Un lobo que intenta morder a alguien abre la boca mucho más de lo habitual: es mucho más aterrador e impresionante.
En una página web, los objetos se pueden acercar y alejar para resaltarlos y atraer la atención del usuario. Por ejemplo, al completar un formulario, tiene sentido agrandar el campo activo y, por el contrario, reducir los campos actualmente inactivos.
Cuando se trabaja con objetos tridimensionales, es necesario tener en cuenta las reglas de la perspectiva: las personas viven en un mundo tridimensional, por lo que si algo no se ve como esperan, les parece incorrecto.
Los navegadores modernos tienen un buen soporte para transformaciones 3D. Esto significa que el desarrollador puede crear una animación que rotará objetos y los moverá por la pantalla, y el propio navegador creará transiciones suaves entre estados.
AtractivoEn el mundo del arte, la atención al detalle puede crear una atmósfera especial, como cuando se mira un cuadro. De manera similar, en el mundo de la web, las animaciones bien elegidas y de alta calidad hacen que el sitio parezca más atractivo y autorizado. Por ejemplo, el equipo de servicio de Stripe ha logrado un gran éxito en este tipo de trabajo.
Conclusión El uso de los principios descritos anteriormente permitirá a los desarrolladores web crear animaciones mejores y más atractivas. Si la animación tiene en cuenta el peso físico del objeto, resalta los cambios, utiliza movimientos secundarios y su tiempo de ejecución se calcula meticulosamente, esto mejorará significativamente la experiencia general del usuario de la página. Y ahora sobre el curso de animación, como dijimos. Al principio del artículo, como continuación de la publicación del tema, abrimos de forma gratuita uno de los cursos avanzados de HTML Academy, dedicado a la animación.¡Nos vemos en la Academia!
Etiquetas:
- animación
- principios de animación
- desarrollo web
La animación ya no son sólo dibujos animados. Desde imágenes en movimiento en pantalla completa hasta efectos de desplazamiento, la animación aparece en todas partes. La animación está de moda, es divertida e interesante.
Los obstáculos que obstaculizan su aplicación están empezando a desaparecer. Con la velocidad de Internet y la facilidad de crear de todo, desde movimientos simples o gifs tontos hasta videos animados de larga duración, la animación se ha convertido en una herramienta de diseño web práctica y útil.
Lo esencialLa animación comienza cuando algo creado en forma estacionaria o bidimensional cobra vida y comienza a moverse de acuerdo con las leyes de la física. Por ejemplo, cuando un personaje de dibujos animados camina de un extremo a otro de la pantalla, o como el ícono de una aplicación que se carga en una Mac rebotando como una pelota.
Disney es casi sinónimo de animación. A principios de la década de 1980, dos animadores de la empresa escribieron un libro en el que se describían 12 principios de la animación. Este libro, Illusion of Life: Disney Animation, escrito por Frank Thomas y Oli Johnston, sigue siendo relevante hoy en día.
Estos son los principios:
Las animaciones web suelen guardarse en formatos GIF, CSS, SVG, WebGL o vídeo. Una animación puede ser cualquier cosa, desde un simple subrayado que aparece al pasar el cursor sobre una palabra hasta un vídeo en pantalla completa o una imagen de fondo. Como ocurre con cualquier técnica de diseño, la animación puede ser a la vez sutil e inevitable.
Tendencias que emergen este añoCada día hay más animación en los diseños web. Una animación pequeña y sencilla puede resultar atractiva e interesante; Es posible que el usuario ni siquiera piense que se trata de una animación. La animación a gran escala puede ser una experiencia visual interesante y atractiva. Pero demasiado movimiento puede llevar al caos total.
Lo que hace que la animación esté de moda es el realismo. En el panorama actual, con tantos estilos minimalistas y planos, los usuarios necesitan más señales visuales que les indiquen qué hacer. Una pequeña cantidad de animación puede llevar al usuario en la dirección deseada sin cambiar la estética general. Pone orden en un diseño que no proporciona suficientes señales visuales a los usuarios. En este caso, la animación se convierte en un mediador entre la sencillez y la usabilidad.
La animación web se divide en dos categorías simples: animación grande y animación pequeña.
Las animaciones grandes suelen aparecer en forma de vídeos largos, ocupan una parte importante de la pantalla y tienen las características de un vídeo pequeño. Este tipo de animación sirve como parte central de todo el diseño. Normalmente, los usuarios no tienen que realizar ninguna acción para ver el movimiento. Si observa detenidamente la animación en el sitio web de Studio Meta (primera captura de pantalla a continuación), notará que las imágenes se amplían a medida que lee el texto.
Las pequeñas animaciones son los pequeños detalles que notas al interactuar con un sitio web. La pequeña animación es un acento que contribuye a la estética general, pero no es una parte central del diseño. En el sitio web de Henry Brown (segunda captura de pantalla), los ojos de la ilustración parpadean.
El problema de todas las tendencias, incluida ésta, es saber cuándo utilizarlas. La animación puede ser de gran ayuda, pero no para todos los proyectos. La animación debe ser suave, no mecánica ni entrecortada. Debe tener un propósito específico y no interferir con el contenido.
La razón principal para utilizar la animación es mejorar la usabilidad. Una animación simple puede explicarle al usuario qué botón presionar o adónde ir a continuación.
La segunda razón es la estética. La animación puede ser un gran "escenario". Este tipo de animación decorativa puede contar una historia o crear una conexión emocional entre la interfaz y el usuario. El propósito de la animación puede ser generar interés visual y mantener la participación durante un período de tiempo más largo.
Traducción del artículo de Carrie Cousins.
Se sabe que los sitios web con contenido Flash se consideran un artículo aparte en la comunidad web, sus ilimitadas posibilidades de animación y sus sorprendentes bocetos convierten su desarrollo en una forma de arte especial; Los sitios web basados en Flash se pueden dividir en dos grupos: diseños Flash 2D y 3D.
Esta selección incluye 50 sitios web de animación Flash 3D que realmente se destacaron entre la multitud, atrajeron una atención sin precedentes y ganaron premios. Esta no es sólo otra lista: estos sitios web te darán muchas ideas, ¡porque cada uno de ellos es una obra maestra!
¡Este sitio es tan incomparable que es difícil describirlo con palabras! Un salvapantallas muy bonito, tras el cual verás magníficos ejemplos de animación 3D en una página web sencillamente excelente.
Sitio web genial con hermosos objetos 3D y fragmentos animados. Cada página está decorada con sus propios “puntos destacados” tridimensionales.
¡Una obra maestra encantadora! Un enorme espacio tridimensional en el que se desarrolla el juego a través de la animación. Excelentes transiciones mixtas en 3D para cada página.
Un sitio web sencillo pero muy bonito con un menú tridimensional y las mismas transiciones.
Lindo sitio web con fantásticos globos 3D y animaciones sorprendentes. También tiene algo más especial: si el usuario no realiza ninguna acción durante un tiempo, el motorista se queda sin combustible y cae del cielo; todo ello en forma de un curioso fragmento animado. Este sitio recibió el premio FWA "Mejor sitio del día".
¿Qué más es esto? ¡Y esta es Coca Cola! El sitio web tiene un diseño muy original y consta de muchos subsitios separados, cada uno de los cuales se diferencia de los demás en su diseño, boceto y animación.
Un sitio web bellamente diseñado. Gran experiencia submarina en 3D. El sitio web ha sido galardonado con el premio Sitio del día de la FWA.
Un sitio web muy elegante con gráficos y animaciones en 3D. Las transiciones 3D también son asombrosas.
Menú tridimensional incomparable. Este portafolios tridimensional es un excelente ejemplo del estilo llamado “minimalismo”.
Sitio web 3D bien construido. No solo consta de elementos tridimensionales, sino que en su conjunto forma un espacio tridimensional; además, casi todos los fragmentos animados también son tridimensionales. Buen trabajo.
Un maravilloso sitio web en 3D con excelentes efectos volumétricos. Sólo un milagro. El sitio web ha sido galardonado con el premio Sitio del día de la FWA.
Un interesante sitio web basado en Flash con una increíble página de presentación en Flash y muchos elementos 3D.
Hermoso espacio tridimensional perfectamente construido y fragmentos animados. Consiste en muchos planos tridimensionales separados, cada uno de los cuales refleja la acción que tiene lugar en su propio período de tiempo.
Precioso sitio web de dibujos animados. Un planeta 3D en el centro de la página que se puede girar con movimientos del mouse.
Hermoso sitio web. Todo lo que nos rodea es tridimensional y responde muy bien a los movimientos del ratón.
Un sitio web hermoso y sencillo con un objeto 3D en el medio de la página.
Un sitio web bellamente diseñado. Con excelente animación 3D y transiciones entre páginas. También es fantástico que cada página esté controlada mediante movimientos del ratón. El sitio web ha sido galardonado con el premio Sitio del día de la FWA.
Un sitio web de redes sociales donde puedes crear tu propio retrato 3D único. Una idea maravillosa, perfectamente implementada mediante procesamiento tridimensional.
Una bonita galería de fotos en 3D con un reflejo bellamente renderizado. Estricto y sencillo.
¡El sitio web es un espectáculo digno de contemplar! Enciende tu cámara web y observa cómo todos los objetos tridimensionales repiten tus movimientos. Y si no tiene uno, el sitio web simplemente responderá a los movimientos del mouse.
Un sitio web en 3D estilo dibujos animados con minijuegos y material para niños. ¡Muy buen trabajo, maravillosa ejecución!
¡Trabajo ejemplar! Hermoso menú tridimensional y fragmentos animados. Incluso 4 opciones para la visualización del menú 3D para su elección.
Definitivamente un sitio web genial con una increíble visualización en 3D. Igualmente magníficos son los reflejos y efectos 3D y, para colmo, un minijuego escondido en lo profundo del sitio web.
Un sitio web fácil de diseñar con un menú de navegación 3D en forma de planeta. Un buen ejemplo del uso de la biblioteca Papervision3D.
Excelente rendimiento. Diseño totalmente tridimensional. Pasas de una página a otra, como de una habitación a otra. Animación 3D de alta calidad.
Una web muy sencilla con un menú tridimensional en forma de biblioteca muy destacable. Cuando seleccionas uno de sus elementos, también se activa una animación genial.
Una web corporativa muy interesante con animación 3D. El boceto también es impresionante. Gran trabajo.
Interesante sitio web con muchos objetos 3D que se pueden rotar.
Un sitio web estricto y sencillo con animación 3D, ¡precioso!
Un excelente sitio web en 3D con un protector de pantalla Flash genial, una de las soluciones 3D más interesantes es la posibilidad de que el visitante navegue de forma independiente dentro del edificio.
Un sitio web compacto con efectos 3D que se ve increíble. El sitio web ha sido galardonado con el premio Sitio del día de la FWA.
Una web basada en Flash cuyo menú tiene un efecto 3D muy interesante. Hermosas transiciones tridimensionales.
Un sitio web tridimensional estricto y sencillo de diseñar. Muy inteligentemente diseñado. El sitio web ha sido galardonado con el premio Sitio del día de la FWA.
Es como una filmoteca tridimensional con hermosas transiciones tridimensionales. Todos los fragmentos animados se reproducen muy bien. Gran trabajo.
Un sitio web tridimensional simple y estrictamente diseñado.
¡Una forma curiosa de aplicar dibujos es colocarlos en el centro del cielo estrellado! Espacio tridimensional elegante. También puede servir como un lindo obsequio para tu novia/novio (quiero decir, tu dibujo). Definitivamente le gustará. El sitio web ha sido galardonado con el premio Sitio del día de la FWA.
Bonito sitio web con un menú de navegación 3D muy impresionante. Simplemente haga clic en el botón "Examinar" en el lado derecho de la página y verá un menú de navegación en 3D.
Animar elementos de una página web
Una de las principales ventajas de los elementos que se pueden colocar libremente es la capacidad de controlar su ubicación, tamaño y visibilidad mediante scripts escritos especialmente. Puede crear animaciones simples en páginas web haciendo que elementos que se pueden posicionar libremente se muevan a lo largo de rutas específicas. Además, no se requiere ninguna modificación del código HTML, excepto agregar los scripts apropiados (por supuesto, si los elementos correspondientes en la página ya se han creado).
Esta animación puede tener dos propósitos. En el caso más sencillo, le permitirá animar las páginas web, hacerlas más atractivas y atraer visitantes al sitio. (El número de visitantes es la única medida de la calidad de un recurso particular de Internet). También permitirá crear material didáctico que podrá publicarse en Internet o distribuirse en CD. (Profesores de escuelas y otras instituciones educativas: ¡esto es para ustedes!) Desafortunadamente, los diseñadores web aprovechan poco esta interesante oportunidad.
Se dijo que, aparte de escribir los scripts que realmente implementan la animación y vincularlos a ciertos eventos, no se requiere ninguna reelaboración especial del código HTML. Sin embargo, escribir guiones es una tarea bastante difícil en sí misma. No sólo necesita conocer el lenguaje de programación JavaScript en sí, sino que también debe tener una buena comprensión de cómo funcionan los mecanismos internos del programa de navegación web y cómo acceder a ellos para utilizarlos más adelante según sus necesidades. Además, necesita saber cómo se implementa la animación, por lo que un elemento de la página parecerá moverse. Y, por supuesto, es necesario tener gusto artístico y, ¡definitivamente! - sentido de la proporción.
¡Bien! No hay problemas con el gusto artístico y el sentido de la proporción. Pero existen problemas con JavaScript y los mecanismos internos del navegador web. Más precisamente, no conocemos ni lo uno ni lo otro. Y, sin embargo, realmente queremos crear alguna animación, al menos simple, en nuestras páginas. ¿Qué hacer?
Utilice Dreamweaver. Proporciona una manera muy conveniente de crear elementos animados sin profundizar en JavaScript y las oscuras profundidades del navegador web. Simplemente indica la trayectoria de movimiento de tal o cual elemento, después de lo cual establece algunos parámetros e inmediatamente obtiene el resultado. El propio Dreamweaver crea los scripts JavaScript necesarios y los coloca en el código HTML de la página. Conveniente, ¿verdad?
Averigüemos cómo se hace todo esto. Pero no ahora. En este momento hay algo más que necesitamos saber. Es decir, sobre programas de guiones, su finalidad y cómo se crea la animación. No se alarme: no escribiremos guiones a mano (dejemos que Dreamweaver lo haga), sino que simplemente hablaremos sobre los principios básicos que de todos modos no es perjudicial conocer.
Introducción a las secuencias de comandos web
¿Por qué necesitamos guiones? Superar las limitaciones del HTML. No todos, por supuesto, sólo una cosa.
Limitaciones de HTML
Entonces, ¿dónde nos limita HTML? ¿Por qué fue necesario inventar otro idioma? ¿Es posible prescindir de él?
En general, es posible. Nos conformamos con HTML simple durante once capítulos completos, ¡y nada! Pero el hecho es que hicimos las páginas no interactivas, es decir, no interactúan con el usuario y no cambian su contenido en respuesta a sus acciones. Para este tipo de páginas, el HTML “puro” será suficiente. Y tan pronto como quieras "enseñar" una página a interactuar con el usuario, es decir, hacerla interactiva, inmediatamente te toparás con un muro insuperable.
Esto se debe a que HTML no le permite especificar el comportamiento de la página en respuesta a, por ejemplo, un clic del mouse en uno de sus elementos. Con su ayuda sólo se especifica su apariencia. Y en esto se diferencia fundamentalmente de los lenguajes de programación "clásicos", que describen el comportamiento.
En realidad, HTML no es un lenguaje de programación, sino un lenguaje para describir páginas web, y nada más. Describe cómo debería verse la información en la ventana de un navegador web, eso es todo. Además, esta apariencia está estrictamente estandarizada; Un diseñador web, como ya comprenderá, tiene capacidades mucho más limitadas que un diseñador de impresión. No se tomará ninguna libertad especial en las páginas web. (Los marcos, las hojas de diseño y las hojas de estilos en cascada CSS eliminan muchas de las limitaciones, pero no todas).
Por supuesto, tales restricciones tienen un buen propósito: garantizar la compatibilidad y uniformidad en la apariencia de las páginas en cualquier plataforma informática. ¡Pero quién necesita compatibilidad a ese precio!
Se puede decir que cualquier página web ya es interactiva porque responde a clics en hipervínculos. Pero esto no es interactividad, sino un comportamiento estándar definido por HTML. La interactividad es cuando, en respuesta al movimiento del cursor del mouse, una imagen "corre" detrás de ella, cuando hace clic en una foto a continuación, aparece su descripción, cuando un reloj digital "hace tictac" directamente en la página. Esta es una interactividad real: en el primer y segundo caso, la página reacciona a las acciones del usuario y, en el tercero, a eventos del entorno externo. (Aquí, el entorno externo se refiere al sistema operativo; el temporizador del sistema que se ejecuta en su interior hace que el reloj funcione). Y el HTML normal no puede proporcionarlo.
Para superar esta deficiencia del HTML "puro", se han inventado dos formas.
La primera forma son etiquetas "propietarias" especiales, generalmente no estándar, que amplían las capacidades del lenguaje. En la gran mayoría de los casos, añaden capacidades interactivas a las páginas web. Por ejemplo, una etiqueta emparejada no estándar. . ., compatible con Internet Explorer, le permite crear texto "desplazable" en una página. Pero debe admitir que estas extensiones limitan al diseñador web a las capacidades que los desarrolladores del navegador web les otorgan. Y no puede forzar que el texto de un elemento no se desplace, sino que cambie los colores secuencialmente; los desarrolladores de Internet Explorer no lo previeron.
Queremos establecer nosotros mismos el comportamiento de los elementos de la página en respuesta a las acciones del usuario. Queremos controlar su comportamiento nosotros mismos, mantener todos los hilos de control en nuestras manos. HTML no puede proporcionárnoslos; Las limitaciones por su propia naturaleza son un muro que no se puede superar. Sin embargo, si no se puede saltar una pared, puedes rodearla. Eso es lo que haremos.
guiones web
La segunda forma es introducir en el código HTML programas especiales escritos en lenguajes de programación "clásicos", es decir, que describen el comportamiento de los elementos. Estos programas se denominan scripts (o scripts del inglés, script - script). (¿Por qué se llaman así? Puede suponer que estos programas describen escenarios para el comportamiento de algún elemento cuando ocurre un evento en particular). Estos programas se colocan en código HTML usando una etiqueta emparejada especial estandarizada por el comité WWWC específicamente para este caso. . .. El navegador web, "descifrando" dicho código HTML, lee los scripts y los ejecuta inmediatamente o los "guarda en el estante" para ejecutarlos después de que ocurra algún evento.
Fue después del “descubrimiento” de la segunda vía hacia la interactividad que la World Wide Web cobró “vida” y muchos diseñadores web también se convirtieron en programadores web.
Se han creado varios lenguajes de programación, llamados lenguajes de scripting (o lenguajes de scripting), específicamente para escribir scripts. Los más populares son solo dos: JavaScript y VBScript.
El lenguaje JavaScript fue desarrollado por Netscape basándose en el conocido lenguaje de programación Java "clásico". Por lo tanto, por primera vez apareció soporte para el lenguaje JavaScript en el navegador web Netscape Navigator 2.0. Microsoft Internet Explorer comenzó a admitir JavaScript en la versión 3.0. Además, Microsoft desarrolló su propio dialecto de JavaScript llamado JScript, que se diferencia de su "progenitor" sólo por la presencia de varios comandos nuevos. Por lo tanto, estos dos lenguajes a menudo no se distinguen, llamándolos de la misma manera: JavaScript.
VBScript fue desarrollado por Microsoft como una "respuesta" a JavaScript. Este idioma sólo es compatible con Internet Explorer versión 4.0 y posteriores. Debido a su "incompatibilidad", VBScript no ha ganado mucha tracción en la Web, pero ha ganado una fuerte presencia en la programación del lado del servidor, es decir, en la escritura de páginas activas del servidor Microsoft ASP (consulte el Capítulo 15). Actualmente, prácticamente no se utiliza para escribir scripts web.
Además de JavaScript y VBScript, ha habido intentos de utilizar Perl, Python y algunos otros para escribir scripts web. Sin embargo, estas lenguas no se generalizaron.
Hoy en día, JavaScript se utiliza en casi todas partes para escribir scripts. Es bastante sencillo de aprender y proporciona al desarrollador capacidades muy amplias. Además, los programas escritos en él tienen un volumen pequeño, lo que es importante en la era del predominio indiviso de los canales de comunicación lentos.
Para soportar un lenguaje de scripting se utiliza el llamado intérprete (o máquina virtual) del lenguaje. El navegador web extrae scripts del código HTML de la página y los pasa al intérprete para su ejecución. Este último analiza el código del script, lo descifra y lo ejecuta, pasando el resultado de la ejecución al navegador web.
Cada lenguaje de secuencias de comandos admitido por un navegador web requiere su propio intérprete independiente. Con este enfoque, se puede "enseñar" a un navegador web a admitir scripts escritos en casi cualquier lenguaje de programación, siempre que haya un intérprete para ese lenguaje escrito de una manera específica.
Los lenguajes de scripting se denominan interpretados porque los programas escritos en ellos se descifran cada vez que se ejecutan. En esto se diferencian fundamentalmente de los lenguajes compilados (C++, Pascal, Java y muchos otros). Los programas escritos en lenguajes compilados se descifran una vez y se convierten en código de máquina, que es ejecutado por el propio procesador de la computadora, sin la ayuda de un intérprete. Para dicha conversión se utilizan programas especiales llamados compiladores. Por supuesto, el código compilado se ejecuta mucho más rápido, pero las características específicas de la programación web son tales que en él solo se pueden utilizar lenguajes interpretados.
Bueno, eso es todo sobre los lenguajes de programación en los que se escriben los scripts web. Ahora hablemos de cómo se ejecutan estos scripts web.
Un evento en un sistema ocurre cuando ocurre una determinada condición, externa o interna. Dependiendo de si esta condición ocurrió dentro o fuera del sistema, se distinguen eventos externos e internos. Los eventos externos incluyen un clic del mouse en una página o su elemento, mover el cursor del mouse, presionar una tecla en el teclado, cambiar el tamaño de una ventana del navegador web, etc. Los eventos internos son la finalización de la carga de una página web, el siguiente "tic" de el temporizador del sistema, etc. p. Esta clasificación de eventos se hace sólo para la comodidad de los programadores novatos, porque desde el punto de vista del lenguaje de scripting, ambos tipos de eventos no difieren entre sí y se procesan en el. de la misma manera.
Si tenemos en cuenta sólo los eventos que ocurren en una página web, entonces debemos tener en cuenta que los eventos pueden ocurrir tanto en la página misma como en sus elementos individuales. De hecho, si el usuario hace clic en una parte de la página que no está ocupada por ningún elemento, se dice que ocurre un evento en la propia página. Si el usuario hace clic en una imagen gráfica o párrafo de texto, el evento ocurre en esta imagen gráfica o párrafo de texto, es decir, en el primer caso, el mensaje sobre la ocurrencia del evento de "clic izquierdo" será recibido por la propia página, y en el segundo, por uno de sus elementos.
¿Qué debemos hacer con estos eventos, preguntas? Proceso.
El procesamiento de eventos consiste en reaccionar ante ellos. Y para reaccionar ante ellos, se utilizan scripts escritos especialmente llamados controladores de eventos. Los controladores están vinculados a ciertos eventos que ocurren en cualquier elemento de la página o en la página misma. Y esto se hace utilizando una extensión HTML especial diseñada específicamente para admitir scripts web.
En particular, si desea que aparezca una breve descripción de la imagen a continuación cuando pasa el mouse sobre una imagen, debe hacer lo siguiente. Debajo de la imagen se coloca un elemento que se puede colocar libremente y que contiene texto descriptivo, y este elemento se vuelve invisible. A continuación, se escriben dos guiones que están vinculados a eventos que ocurren cuando el cursor del mouse pasa sobre una imagen gráfica y cuando se “aleja”. El primero de estos escenarios hace visible el elemento con la descripción, el segundo, invisible. Después de esto, los guiones escritos se vinculan a los eventos correspondientes que ocurren en el elemento gráfico. Eso es todo.
No consideraremos los detalles específicos de la implementación de este efecto. En primer lugar, “no dependen demasiado de la elección del lenguaje de programación, y escribiremos y estudiaremos el primer script JavaScript (y, por cierto, el último en este libro) en el Capítulo 13. En segundo lugar, en este momento necesitamos animar un elemento de la página, es decir, hacer que se mueva.
En la mayoría de las páginas web interactivas, la mayoría de los scripts son controladores de eventos. Implementan la mayor parte de la lógica del comportamiento de la página cuando interactúan con el usuario. (Aunque hay un cierto porcentaje de scripts que se ejecutan inmediatamente después del descifrado; en su mayoría se trata de código que crea todo tipo de ajustes preestablecidos). Este enfoque, en el que casi todo el programa es un controlador de eventos, se denomina programación basada en eventos.
Pero estamos divagando. Volvamos a nuestra animación. Continuaremos nuestra conversación sobre programación en el Capítulo 13, que está dedicado a los scripts web y a trabajar con ellos en el entorno de Dreamweaver.
Principios básicos de animación
Finalmente llega el momento de la animación. Veamos algunos conceptos básicos de los que no podemos prescindir en el futuro.
Se ha dicho más de una vez que sólo se pueden animar elementos que se pueden posicionar libremente. No olvides esto. Sólo los elementos libres se pueden colocar en cualquier lugar de la página y sólo ellos se pueden controlar desde scripts. Recuerda esto.
La animación más sencilla.
Entonces, ¿cómo se consigue el efecto de animación? ¿Por qué parece que un elemento de la página se mueve a través de ella?
El caso es que las coordenadas del elemento cambian periódicamente. Y cambian muy rápidamente, al menos 12 veces por segundo, por lo que observamos un movimiento continuo. Se eligió esta frecuencia porque es a esta frecuencia donde el ojo humano pierde la capacidad de distinguir incrementos individuales, "saltos" de movimiento intermitente. En resumen, más allá de este límite, el movimiento intermitente se vuelve visualmente continuo para una persona. (Por cierto, el cine y la televisión funcionan según el mismo principio). Nuestras computadoras ahora son bastante potentes, por lo que es muy posible garantizar esa frecuencia de cambios de coordenadas.
Pero no basta con cambiar las coordenadas del elemento. Es necesario cambiarlos según una ley especial que describe la trayectoria del elemento. Si el elemento se mueve en línea recta, esta ley es muy simple. En el caso del movimiento curvilíneo, la cosa se vuelve mucho más complicada. Por lo tanto, no debe crear animaciones demasiado complejas en sus páginas: una computadora de baja potencia simplemente no "tirará" de trayectorias demasiado intrincadas.
La ley según la cual cambian las coordenadas de un elemento animado, es decir, su trayectoria, se describe mediante una función especial (llamémosla función trayectoria). Esta función toma algunos parámetros y devuelve las coordenadas del elemento. Parece:
(x, y, z) = f(Q, q, dq)
Con los resultados devueltos por esta función, todo es simple, x, y y z son las coordenadas del elemento animado, respectivamente, el orden horizontal, vertical y de superposición (el índice z ya le resulta familiar). Por supuesto, una función que devuelve tres coordenadas a la vez es un caso general. Por lo general, cambian una o dos coordenadas del elemento: xey.
Pero con los parámetros aceptados por la función todo es algo más complicado. En total, como puede ver, hay tres y su finalidad no es obvia. Veamos todos estos parámetros en orden.
El primer parámetro es Q. Esta es la longitud de la ruta de movimiento del elemento animado. Se puede medir en píxeles, milímetros, grados o algunas unidades relativas, como porcentajes. En general, la unidad de medida depende de la trayectoria en sí: para una trayectoria rectilínea son más adecuados píxeles o milímetros, y para una circular, grados o radianes. Una cosa es importante: el parámetro Q debe indicar de alguna manera la longitud total de la trayectoria a lo largo de la cual se moverá nuestro elemento.
El segundo parámetro (q) denota la posición en la trayectoria ocupada en un momento dado por nuestro elemento. En otras palabras, esta es la distancia en unidades de medida de la trayectoria Q que ya ha “recorrido”. Una vez recibido, nuestra función debe decir: “el elemento está aquí” y, como dicen, “señalar con el dedo” un punto de su trayectoria.
El último tercer parámetro es dq. Especifica el incremento en el cual la distancia q cambiará con cada "salto" del elemento animado. El valor de este parámetro establece la velocidad de movimiento del elemento animado.
Entonces, ¿qué se supone que debe hacer la función trayectoria? Todas sus tareas se enumeran a continuación en orden de finalización.
Este es un algoritmo general que todas las funciones de trayectoria, incluso las más complejas, deben seguir. De hecho, la principal dificultad radica en la implementación del paso 2, es decir, calcular las coordenadas en función del valor q. Los pasos restantes son muy sencillos de implementar y no presentarán ninguna dificultad ni siquiera para un programador novato.
Al hablar de la animación más simple, se daba a entender que había una única función que la implementaba. En realidad, se pueden utilizar varios programas de script para crear animaciones. El autor los combinó en una sola función para que quede más claro.
Se supuso que cuando el elemento animado llega al final del camino (q se vuelve igual o mayor que Q), la animación se detiene. De hecho, la función de trayectoria puede seguir funcionando. Podría, por ejemplo, simplemente volver a realizar la configuración inicial, colocar el elemento animado al principio del camino y comenzar la animación nuevamente. Pero es mejor invertir el valor dq (cambiar un valor positivo a uno negativo y viceversa) y ejecutar la animación al revés. Esta animación, que se reproduce varias o infinitas veces, se llama bucle.
Por supuesto, la animación en bucle parece más impresionante. Pero no debes abusar de él, especialmente sin cesar. Por qué, ahora lo descubrirás.
Animación en tiempo real
Acabamos de ver cómo crear una animación simple en una página web. Pero el hecho es que en la vida real este tipo de animación se utiliza muy raramente. Además, el autor no recomienda categóricamente que intentes hacerlo.
¿Por qué? El hecho es que el método descrito anteriormente para crear animación tiene solo una ventaja más que dudosa y dos grandes desventajas.
La ventaja es la simplicidad y la implementación obvia. Cualquier programador, incluso uno poco cualificado, puede sentarse y en cinco minutos redactar un script que implemente el movimiento de un elemento en línea recta. Sí, lo hará, incluso si nunca antes ha hecho programación web.
¡Pero que intente publicar su creación en Internet!
Imaginemos a dos internautas que decidieron visitar su página con animación. Uno tiene un ordenador de hace diez años, un ordenador viejo y bien merecido, que apenas puede procesar páginas web complejas y modernas, incluso sin accesorios multimedia. El otro tiene una máquina potente y de última generación que acaba de salir de las mesas de montaje de alguna “marca” conocida. Entonces van a la página, la cargan y comienzan a ver la animación.
El ordenador del primer visitante se esforzará por cargarlo y, con el disco duro chirriando, comenzará a ejecutar los scripts que implementan la animación, por muy inestables o lentos que sean. El elemento animado al menos se mueve por la página, el visitante está contento, funciona. Ahora dejémoslo y echemos un vistazo al visitante número dos. Su computadora cargará instantáneamente la página y ejecutará instantáneamente todos los scripts. El elemento animado volará a lo largo de su trayectoria tan rápidamente que el ojo humano ni siquiera notará su movimiento.
La pregunta es, ¿quién necesita esa animación?
Pero eso no es tan malo. El problema vendrá si nuestro desafortunado programador decide hacer que la animación se repita sin fin. Ahora mira lo que pasa. La página carga en el navegador Web, el intérprete comienza a ejecutar los scripts... y ejecuta... ejecuta... ejecuta... Y mientras los ejecuta, el usuario no podrá hacer nada con la página: ni haga clic en el hipervínculo, ni siquiera desplácese por la ventana. La única forma de interrumpir una “película” prolongada es cerrar el navegador web.
¿Pero qué hacer? Después de todo, los programadores web de alguna manera implementan animación en sus páginas, y funciona bien, en el sentido de que no impide que el usuario se desplace por la página y haga clic en los enlaces. ¿Quizás conozcan algún secreto?
Sí, lo hacen. Y el secreto es que utilizan una función de trayectoria ligeramente diferente:
(x, y, z) = f(Q, q, dq, t)
Se diferencia de la función que ya conocemos en que requiere un parámetro más: t. Este parámetro es el tiempo. En otras palabras, al calcular las coordenadas, la función de trayectoria tiene en cuenta la hora actual. Y la animación resulta estar estrictamente ligada al tiempo, que fluye igual en todas partes, a diferencia de la velocidad de los procesadores, que difieren de una computadora a otra.
¿Cómo se implementa esto? El hecho es que la nueva función no se ejecuta todo el tiempo mientras se ejecuta la animación, sino que se llama de vez en cuando, cuando es necesario realizar el siguiente "salto" de la animación, y luego deja de funcionar, esperando la próxima llamada. Esta función se implementa como un script de controlador para un evento interno: un "tic" del temporizador del sistema.
Por tanto, la animación está claramente ligada al tiempo. Tanto en el antiguo ordenador del visitante número uno como en la ultramoderna máquina número dos, el elemento animado se moverá a la misma velocidad. (Por supuesto, en una computadora más potente, la animación probablemente se ejecutará con mayor fluidez, pero a la misma velocidad que en una más potente).
Próximo. Debido a que la función de ruta se llama sólo ocasionalmente, en lugar de ejecutarse todo el tiempo, el usuario puede interactuar con la página web normalmente. Hay mucho tiempo entre los tics del temporizador para que el navegador web procese las solicitudes de los usuarios.
Enumeremos las tareas de la nueva función de trayectoria en orden de ejecución.
Hay dos scripts que se utilizan para implementar esta característica. Uno de ellos se ejecuta cuando se carga la página e implementa la tarea del paso 1. El segundo, el controlador de eventos del temporizador del sistema real, implementa las tareas de los pasos 2-5.
Esta animación, vinculada al temporizador del sistema en lugar del procesador, se denomina animación en tiempo real. Esto es lo que se utiliza para crear elementos móviles en páginas web. La animación más simple que describimos anteriormente prácticamente nunca se usa en ninguna parte. Ya entiendes por qué.
Animación: el enfoque Dreamweaver
El método descrito anteriormente para crear animaciones utilizando scripts que implementan la función de ruta tiene muchas ventajas. Estos scripts son de tamaño muy pequeño y muy rápidos de ejecutar porque el programador tiene la oportunidad de escribir la función de trayectoria de la manera más óptima. Sin embargo, tienen un gran inconveniente: la inflexibilidad. De hecho, para cambiar la trayectoria de un elemento animado, es necesario escribir un nuevo script que implemente una nueva función de trayectoria.
Pero la rigidez no es el único inconveniente de esta forma de crear animación. Si un elemento animado debe realizar un movimiento bastante complejo, el guión que implementa esta trayectoria resulta muy extenso y lento. Y cuanto más compleja es la trayectoria, más grande y más lento resulta el escenario.
La tercera desventaja es la dificultad de implementar trayectorias complejas. Perdón por la tautología, pero es verdad. Los programadores inexpertos, especialmente aquellos sin una formación matemática seria, suelen limitarse a trayectorias simples, normalmente lineales. Lo máximo que se atreven a hacer es una simple elipse. Pero para algunas tareas, que se analizarán más adelante, se necesitan trayectorias de movimiento bastante complejas. Y arreglárselas con trayectorias simples es muy problemático.
Sin embargo, hay una salida a esta situación. Para ayudar a los programadores inexpertos que no dominan las matemáticas superiores, vendrá al rescate un nuevo tipo de función de trayectoria, que toma solo dos parámetros: una serie de puntos clave de la trayectoria y, por supuesto, el tiempo actual:
(x, y, z) = f()
Todo está claro en cuanto al tiempo, pero ¿cuál es el conjunto de puntos clave? Nada complicado: se trata de un conjunto de puntos que marca la trayectoria de nuestro elemento animado. Expliquemos esto con más detalle.
Digamos que necesitamos crear una animación muy compleja donde un elemento de la página se mueve a lo largo de una ruta muy extraña. Al mismo tiempo, no conocemos matemáticas superiores, por lo que no podremos deducir la fórmula para esta trayectoria. Sin embargo, se nos ocurrió esto.
Puedes hacerlo un poco diferente. En primer lugar, marquemos y numeremos los puntos clave directamente en la trayectoria dibujada. A continuación, dibuje una línea recta a lo largo de la regla y colóquele una escala de tiempo de coordenadas, calibrándola, digamos, en segundos. A lo largo de esta escala, marque los puntos inicial y final de la animación a lo largo de esta escala frente a las divisiones correspondientes, dibuje una línea más gruesa entre ellos y llámela pista de animación. Después de esto, sólo queda numerar los puntos clave y ponerlos en la pista frente a las marcas de tiempo correspondientes. Como resultado, obtendremos un conjunto de puntos cuyas coordenadas y tiempo de viaje se pueden calcular fácilmente (en el diagrama dibujado y en la escala de tiempo, respectivamente). De acuerdo, es mucho más claro de esta manera.
Dibujamos la trayectoria de movimiento de nuestro elemento en papel cuadriculado, después de lo cual identificamos en esta trayectoria el número requerido de puntos clave que, de hecho, lo crean (puntos de inflexión, el comienzo y el final de la trayectoria, etc.), y Escribió sus coordenadas en una hoja de papel aparte. Además, conociendo el tiempo durante el cual el elemento animado recorrerá toda su trayectoria, podemos saber en qué momento aparecerá en uno u otro punto clave. Solo queda anotar estos valores de tiempo en una misma hoja de papel, colocándolos frente a las coordenadas de los puntos correspondientes. Entonces tenemos una serie de puntos clave que se pueden pasar a la nueva función de trayectoria.
Este es el enfoque que utiliza Dreamweaver.
Como ejemplo, hemos dado una animación que incluye un único elemento animado. Pero Dreamweaver te permite colocar tantos elementos como quieras en una línea de tiempo a la vez, creando múltiples pistas de animación, que pueden usarse para crear animaciones muy complejas en las que todos los elementos se mueven al mismo tiempo. Además, Dreamweaver le permite crear múltiples animaciones que se ejecutan de forma independiente en la misma página, cada una de las cuales puede incluir cualquier cantidad de elementos animados. Así, incluso el animador más exigente quedará satisfecho.
Una función de ruta que toma una serie de puntos clave como parámetro es muy compleja, pero no es necesario implementarla. Muchos editores web potentes brindan a los usuarios la capacidad de crear animaciones y utilizan precisamente este enfoque para hacerlo. En este caso, un conjunto de scripts web que implementan la función de trayectoria se insertan automáticamente en el código HTML de la página, sin que el usuario se dé cuenta.
Por supuesto, Dreamweaver no es una excepción. También brinda a los usuarios esta oportunidad. Y él mismo también hace todo el trabajo duro.
La desventaja de este método de creación de animación es el gran tamaño y el rendimiento no muy alto del código resultante. Por lo tanto, para las animaciones más simples, probablemente esté justificado el primer enfoque: scripts especialmente escritos que implementen directamente la función de trayectoria.
Bueno, hemos solucionado los problemas técnicos. Queda por saber en qué casos se puede utilizar la animación y en cuáles es mejor abstenerse.
¿Por qué se necesita la animación?
Normalmente, la animación en páginas web tiene tres propósitos:
- dar vida a las páginas;
- llamar la atención sobre algo;
- mostrar algo con fines educativos.
- Por lo tanto, existen tres propósitos al utilizar la animación:
- entretenimiento;
- publicidad;
- educación.
El entretenimiento en Internet es una rama bastante joven de la construcción web. Internet se creó originalmente como una red para científicos que necesitaban intercambiar documentos de texto (incluso sin gráficos al principio) y vincularlos en algún tipo de estructura. Luego, la persona promedio llegó a la Web y los diseñadores Web se apresuraron a satisfacer sus gustos. (No discutiremos cuán altos o bajos son. Opinión personal del autor: la persona promedio es demasiado diversa para reducirla a una sola etiqueta). El audio y el video aparecieron en Internet, los gráficos complejos y la animación llegaron a las páginas web. Ahora todas estas “campanas y silbatos” se utilizan con tanta frecuencia que pocas personas pueden sorprenderse con ellas.
El uso hábil y moderado de la animación animará enormemente sus páginas. Sólo es importante comprender qué efecto desea lograr y hacer todo lo posible para lograrlo. No se exceda: utilice la animación sólo cuando sea realmente necesaria. Y, Dios no lo quiera, su página se ondulará como la pantalla de un televisor con la antena desconectada; eso no tiene nada de bueno. Nunca olvides el principio de “el contenido es lo primero, todo lo demás es decoración”, no dejes que la decoración eclipse el contenido.
Ahora publicidad. Apareció en Internet junto con el entretenimiento y, por lo tanto, junto con la persona promedio. Ya estoy muy cansado, esta publicidad en Internet es casi más que publicidad televisiva. Pero rindamos homenaje a la publicidad (tanto en Internet como en televisión): gracias a ella, han podido existir muchos proyectos populares sin fines de lucro. Si la publicidad desaparece repentinamente, estos proyectos desaparecerán inmediatamente después.
Tradicionalmente, con fines publicitarios en Internet se utilizan los llamados banners, pequeñas imágenes gráficas de formatos estrictamente estandarizados. Casi todos los banners se crean en formato "GIF animado", es decir, ya utilizan las capacidades de la animación para atraer la atención de un cliente potencial. Parece que la animación publicitaria basada en scripts web aún no se ha utilizado, y si se ha utilizado, muy poco. Así pues, tenéis ante vosotros un vasto e inculto campo de actividad que bien puede dar buenos frutos.
La animación, basada en elementos colocados libremente y scripts web, es mucho más compacta que cualquier archivo de vídeo, ya sea un GIF animado, un archivo de vídeo AVI o Apple QuickTime. Sin embargo, los archivos GIF animados son compatibles con absolutamente todos los navegadores web, incluso los más antiguos, razón por la cual se utilizan tan ampliamente. Los scripts web sólo funcionarán en navegadores web bastante nuevos (que, hay que decirlo, ahora son utilizados por la gran mayoría de los usuarios de Internet).
De una forma u otra, vale la pena probar los scripts web en publicidad. Y parece que alguien ya lo está intentando.
Pasemos sin problemas de la publicidad a la educación. Programas: material didáctico que se utiliza a menudo en educación, generalmente están escritos en lenguajes de programación compilados y son aplicaciones normales de MS-DOS o Windows. Los materiales didácticos basados en páginas web "en vivo" son todavía bastante raros, aunque esta dirección es muy prometedora. Estos tutoriales se pueden crear y modificar muy rápidamente; y en comparación con los programas convencionales, son extremadamente compactos (¿cuánto espacio puede ocupar una simple página web y un par de imágenes?). Además, estos manuales están disponibles en Internet, en sitios web, lo que significa que es posible organizar sin problemas la ahora de moda educación a distancia.
Sin embargo, estos tutoriales tienen un gran inconveniente. Cualquier usuario de Internet con suficiente experiencia puede ver fácilmente el código fuente de la página y sus scripts web y, si lo desea, tomar prestados algunos de sus hallazgos de allí. Por lo tanto, si va a utilizar algún conocimiento en los tutoriales, es mejor implementarlo en un programa compilado normal, que es mucho más difícil de piratear.
Aquí hay tres casos en los que la animación será muy útil. Y en algunos casos es necesario. Si su caso no se aplica a ellos, es mejor conformarse con páginas web normales, prestando más atención a su contenido.
Crear animación en Dreamweaver
Ha llegado el momento de nuestro programa favorito: Dreamweaver. Ahora te contamos cómo te ayudará a crear un elemento animado. Y como elemento que “animaremos”, tomaremos el título de la página default2.htm creada en el Capítulo 11.
Pero antes que nada, pongámonos de acuerdo sobre la terminología utilizada en Dreamweaver. Saberlo nos ayudará en nuestro trabajo futuro. Entonces:
- un conjunto de elementos animados cuyo movimiento está sincronizado con respecto a la misma línea de tiempo se llama animación. Necesitamos esto porque una página web puede contener varias animaciones independientes, es decir, conjuntos de elementos animados sincronizados con respecto a líneas de tiempo independientes;
- Dejemos que la franja que va desde el punto inicial de la animación de uno de los elementos hasta el punto final se llame pista de animación. Ya hemos introducido este término y ahora lo consolidaremos. La pista muestra cuándo el elemento animado comenzará a moverse y cuándo se detendrá;
- El espacio libre en la línea de tiempo de la animación que puede ser ocupado por una pista se llamará canal. La cantidad de canales disponibles determina la cantidad máxima de pistas en una animación y, por lo tanto, la cantidad máxima de elementos animados incluidos en ella.
Esos son todos los términos. Ahora abramos la página default2.htm en una ventana de documento y comencemos...
Creando una animación sencilla
Para trabajar, necesitaremos inmediatamente el panel Líneas de tiempo, que muestra todas las animaciones creadas en la página web. Para mostrar este panel, active el elemento de alternancia Líneas de tiempo en el submenú Otros del menú Ventana o presione la combinación de teclas +. El panel Líneas de tiempo en sí se muestra en la Fig. 12.1.
Como puede ver, el panel Líneas de tiempo está en otro muelle que ocupa la parte inferior de la ventana principal de Dreamweaver. Esto significa que podemos ocultar el panel Líneas de tiempo (y cualquier otro panel que coloque en el Dock) si no lo necesitamos haciendo clic en el botón Ocultar Dock y luego traerlo de vuelta a la pantalla.
La mayor parte de este panel está ocupada por una línea de tiempo, pero no está graduada en segundos, sino en cuadros de animación; es más conveniente. Los valores de tiempo (en fotogramas) están escritos en la línea de tiempo gris de arriba. Debajo de esta escala se muestran todos los canales de animación disponibles, tanto ocupados como desocupados. En la parte superior del panel hay varios controles diseñados para configurar algunos parámetros de las pistas y la propia animación.
Arroz. 12.1. Panel de líneas de tiempo
"Pero Dreamweaver te permite trabajar con varias líneas de tiempo simultáneamente", dices: "¿Dónde están las otras líneas de tiempo?". Para verlos, debe seleccionar el elemento correspondiente en la lista combinada de animaciones que se muestra en la Fig. 12.2.
Arroz. 12.2. Lista combinada de animaciones.
Trabajaremos con varias animaciones diferentes más adelante. Ahora creemos uno de ellos, el más simple.
Para animar cualquiera de los elementos disponibles que se pueden colocar libremente, debe colocarlo en la línea de tiempo, creando una pista de animación. Para hacer esto, seleccione el elemento libre requerido, haga clic derecho sobre él y seleccione Agregar a la línea de tiempo en el menú contextual. También puede seleccionar el elemento Agregar objeto en el menú contextual de la línea de tiempo o el elemento Agregar objeto a la línea de tiempo en el submenú Línea de tiempo del menú Modificar. Y finalmente, puedes simplemente presionar la combinación de teclas +++.
Después de agregar un elemento libre a una animación, Dreamweaver muestra la advertencia que se muestra en la Figura 1. 12.3. Con esto quiere decir que puede controlar los siguientes parámetros de un elemento libre durante el proceso de animación:
- coordenadas horizontales y verticales de la esquina superior izquierda (atributos IZQUIERDA y SUPERIOR);
- ancho y alto (atributos ANCHO y ALTO), y esto sólo funcionará en Internet Explorer;
- el orden de superposición, en otras palabras, el índice z (atributo Z-INDEX);
- visibilidad (atributo VISIBILIDAD).
Arroz. 12.3. Mensaje de advertencia de Dreamweaver después de agregar un elemento gratuito a una animación
Esto significa que puede controlar la ubicación, el tamaño y la visibilidad del elemento libre. Como puedes ver, las posibilidades que ofrece Dreamweaver para la animación son incluso mayores de lo que pensábamos.
Ahora cierre esta advertencia haciendo clic en Aceptar. Si no desea verlo más, antes de cerrar, active la casilla No volver a mostrarme este mensaje.
Finalmente, después de todos los problemas, veremos una nueva pista en la lista del panel Líneas de tiempo (Fig. 12.4). Aparece como una barra de color azul claro con el nombre del elemento libre al que pertenece escrito. A ambos lados de esta franja se pueden ver círculos claros. Estos son los puntos clave; Hasta ahora solo hay dos: el principio y el final de la trayectoria. El primer punto clave, el comienzo, se encuentra en el primer fotograma; esto significa que la animación de este elemento comenzará desde el primer fotograma. El segundo punto clave, el final de la trayectoria, se encuentra en el decimoquinto cuadro; allí nuestro elemento animado dejará de moverse.
Arroz. 12.4. Nueva pista de animación
Puedes seleccionar tanto los puntos clave (en este caso están resaltados en azul oscuro) como la pista en sí (en este caso se vuelve completamente azul oscuro) simplemente haciendo clic sobre ellos con el mouse. Además, puedes hacer clic en cualquier lugar de la pista de animación, seleccionando así cualquiera de sus fotogramas. En este caso, aparecerá un marcador del fotograma seleccionado en la línea de tiempo, como se muestra en la Fig. 12.5.
Arroz. 12.5. Marcador del fotograma seleccionado
Si no está satisfecho con la ubicación de la pista de animación, puede cambiarla fácilmente. Para hacer esto, “agarre” la pista (¡no los puntos clave!) con el mouse y arrástrela a lo largo de la escala hasta que tome la posición deseada. Por ejemplo, puede hacer que la animación comience en el cuadro diez y termine en el cuadro veinticinco. También puede cambiar la longitud de la pista y, por lo tanto, la duración de la animación, arrastrando los puntos ahora clave a la posición requerida. Y, por supuesto, puede eliminar una pista innecesaria seleccionándola y presionando la tecla o seleccionando el elemento Eliminar objeto en el menú contextual o el submenú Línea de tiempo del menú Modificar.
Bueno, echemos un vistazo a la animación recién creada. Pulsamos la tecla para cargar la página defaiilt2.htm en el navegador Web, y… observamos una imagen completamente fija. ¿Qué pasa?
Pero el hecho es que el principio y el final de la trayectoria de movimiento de nuestro título animado coinciden, es decir, no hay trayectoria, ¡el título siempre está en el mismo punto! ¡¡¡Se nos olvidó marcar la trayectoria!!!
Bueno, nada. No da miedo. Arreglaremos todo ahora.
Una ruta en Dreamweaver se define de la siguiente manera. Cada punto clave es como una “instantánea” del estado en el que se encontrará el elemento animado. Al seleccionar un punto clave, establece los parámetros necesarios de un elemento que se puede posicionar libremente (coordenadas, dimensiones y visibilidad), y Dreamweaver los recuerda, creando así esta "instantánea". A partir de estas instantáneas, él mismo calcula todos los estados intermedios del elemento animado en los que se encontrará entre los puntos clave. Por lo tanto, para crear una animación de cualquier complejidad, solo necesitará establecer los parámetros necesarios para los elementos necesarios de la página en puntos clave de la animación. Dreamweaver hará el resto.
Digamos que nuestro título "flotará" desde la esquina inferior derecha de la página y se moverá directamente al lugar que le corresponde. Dado que la trayectoria de su movimiento es muy simple (línea recta), sólo necesitamos dos puntos clave para definirla. En el primer punto clave, el título está en la esquina inferior derecha de la página, y en el segundo, está en la parte superior de la página, donde debería estar. En estos puntos debemos configurar los parámetros de nuestro encabezado, más precisamente, solo dos parámetros: coordenadas horizontales y verticales. (Nuestro encabezado no cambia de tamaño ni de visibilidad mientras se mueve).
Selecciona el primer punto clave, situado al inicio de la pista, haciendo clic sobre él con el ratón. A continuación, “agarraremos” el encabezado (el elemento Encabezado libre) con el mouse y lo moveremos a la esquina inferior derecha de la página, al comienzo de su trayectoria. Ahora seleccionemos el segundo punto clave. No necesitamos cambiar nada aquí, ya que el título ya está vigente. Eso es todo, en realidad.
En la figura. La figura 12.6 muestra lo que obtenemos después de todas estas manipulaciones. Puede ver claramente la delgada línea de ruta gris que se muestra en la ventana del documento si el elemento de encabezado animado está seleccionado en la ventana del documento. Además, el elemento animado se ubicará en el lugar de la trayectoria que seleccionemos en la pista de animación. Entonces, si resalta el segundo punto clave, saltará al lugar que le corresponde en la parte superior de la página. Y si seleccionas algún punto intermedio entre el primer y segundo punto clave, ocupará el lugar correspondiente a este punto.
Arroz. 12.6. La ruta terminada del elemento animado (el primer punto clave está resaltado)
Ahora puedes comprobar nuestra creación. Cargue la página resultante en un navegador web y vea qué sucede. Pero resultará... todo sigue igual - de nuevo, un título inmóvil. ¿Qué hemos olvidado esta vez?
Para que la animación comience inmediatamente después de que el navegador web cargue la página, Dreamweaver debe crear un pequeño script que realmente la inicie. Pero, de forma predeterminada, no hace esto. Se supone que desea que la animación se reproduzca en respuesta a una acción del usuario, como hacer clic en una imagen. Pero necesitamos que el encabezado comience su viaje tan pronto como se cargue la página. Para ello, tendremos que realizar los ajustes adecuados.
Es muy fácil hacerlos. Volvamos al panel Líneas de tiempo y activemos la casilla de verificación Reproducción automática ubicada en la parte superior de este panel. Dreamweaver, como de costumbre, emitirá otra advertencia de que ahora se agregará el script correspondiente al código de la página. Deshágase de esta advertencia haciendo clic en Aceptar; Si ya no desea verlo, puede activar la casilla No volver a mostrarme este mensaje antes de hacer esto. Ahora todo está realmente listo. Cargue la página en su navegador web y compruébelo usted mismo.
¡Hurra! ¡Está funcionando!
El título animado seguirá alegremente la trayectoria que establezcamos y se congelará justo encima de su sombra. Por supuesto, es malo que la sombra exista independientemente de él, pero lo solucionaremos pronto. Tampoco es bueno que el encabezado flote debajo del resto de los elementos de posicionamiento libre, pero puedes solucionarlo ahora mismo simplemente cambiando su índice z. Guardemos la página resultante. Y sigamos...
Animación más compleja
Aún así, no es bueno que el encabezado y su sombra (el elemento gratuito Headershadow) existan por separado. Asegurémonos de que la sombra, mientras el título se mueve hacia ella, sea invisible en la pantalla y aparezca solo en el último momento. Para hacer esto, necesitaremos agregar el elemento libre que crea esta sombra a la animación, creando otra pista de animación.
Seleccione un elemento Headershadow gratuito y agréguelo a la animación. Ya sabes cómo hacer esto. El resultado resultante se puede ver en la Fig. 12.7.
Asegúrese de que ambas pistas estén exactamente una debajo de la otra. Si la segunda pista está desplazada de la primera, cambie su ubicación y/o tamaño.
Arroz. 12.7. Dos pistas de animación.
Para la sombra, no crearemos un camino de movimiento, ya que no se mueve, sino que permanece quieta. Simplemente debería aparecer cuando el título "va al grano". Así que no lo muevas a ningún lado. Simplemente cambie el parámetro de visibilidad.
Entonces, al comienzo de la ruta del título (el primer punto clave), la sombra debe ser invisible. Así que seleccione el primer punto clave de la segunda pista y establezca el parámetro Vis en el Editor de propiedades en oculto. Ahora la sombra permanecerá invisible hasta que cambiemos el valor de visibilidad en el segundo punto clave (el final de la ruta del título). Dado que, de forma predeterminada, el parámetro Vis está configurado para heredar ("herencia" de visibilidad del padre) y el padre (la página web en sí) es visible, no necesitamos establecer específicamente este valor en el segundo punto clave. Por si acaso, verifique que la sombra sea visible al final de la línea de tiempo (el parámetro Vis debe ser heredado o visible).
Guarde su trabajo y ábralo en un navegador web. Ahora la sombra se “esconderá” modestamente hasta que “llegue” su “dueño”.
¡Todo! Estamos cansados de las trayectorias rectilíneas, como los raíles del tranvía, de movimiento de nuestros elementos. Queremos algo sinuoso y zigzagueante, como el famoso camino hacia la verdad. Deje que nuestro encabezado recorra toda la página web en su camino hacia la parte superior. Se verá más impresionante y al mismo tiempo comprobaremos si este Dreamweaver es tan bueno como lo elogian.
Bueno, Dreamweaver resiste la prueba de la tortuosidad. Y asegurémonos de esto. Pero primero, alarguemos ligeramente la trayectoria, digamos, a 50 fotogramas. "Tomemos" el segundo punto clave de la pista principal con el mouse y movámoslo a la división correspondiente de la línea de tiempo. ¡Y no olvides hacer lo mismo con la ruta del elemento sombra!
Ahora puedes pasear.
Como recordarás, los puntos clave, de hecho, marcan la trayectoria del elemento animado. Agregamos también que la trayectoria de su movimiento debe estar especificada por un número mínimo de puntos clave. Para una línea recta, como ya hemos visto, son suficientes dos puntos, para una línea discontinua, tres, y para un círculo necesitarás al menos una docena de ellos para que el movimiento del elemento animado parezca más o menos suave. En general, Dreamweaver, después de haber recibido un conjunto de puntos clave de su parte, debería construir la trayectoria del elemento animado que necesita. Y el número de estos puntos, como se indica, debe ser mínimo.
Basándonos en esta regla, construiremos una nueva trayectoria para nuestro título animado. Si desea que se mueva a lo largo de una trayectoria curva, coloque una cantidad bastante grande de puntos clave en la pista de animación. La forma más sencilla es dibujar primero la trayectoria deseada en papel, colocar los puntos clave y solo luego implementarla en Dreamweaver.
Pero supongamos que ya hemos hecho todo esto. Ahora necesitamos implementar la trayectoria, como dicen, en código, colocando varios puntos clave en la pista de animación. ¿Cómo hacer esto?
En primer lugar, establezca el marcador del fotograma seleccionado (ver Fig. 12.5) en la división de la línea de tiempo donde se ubicará el primero de los puntos clave recién creados. Para hacer esto, haga clic en la pista opuesta a la división deseada. A continuación, haga clic derecho en este lugar y seleccione Agregar fotograma clave en el menú contextual que aparece. También puede seleccionar el elemento del mismo nombre en el submenú Línea de tiempo del menú Modificar o simplemente presionar la tecla. Aparecerá un nuevo punto clave en la pista en esta ubicación (Fig. 12.8).
Arroz. 12.8. Punto clave colocado en la pista de animación (actualmente resaltado)
Ahora verifiquemos si nuestro nuevo punto clave está seleccionado y, si no, selecciónelo. Luego de esto activaremos la ventana del documento y moveremos el título al lugar de la trayectoria donde debería estar actualmente. La delgada línea gris que indica la trayectoria del rumbo se curvará inmediatamente para seguir el rumbo (Figura 12.9).
Los puntos clave restantes de la trayectoria se colocan en la pista de animación exactamente de la misma manera. Colócalos y dales una nueva posición de título animado. Inventa una trayectoria más compleja para que Dreamweaver realmente funcione. Si colocó un punto clave en un lugar diferente al que deseaba, selecciónelo y seleccione Eliminar fotograma clave en el menú contextual. (También puede seleccionar el elemento del mismo nombre en el submenú Línea de tiempo del menú Modificar). Después de eso, pruebe la página con la nueva animación en un navegador web. Verás que el título sigue exactamente la ruta que le estableciste.
Arroz. 12.9. Posición del título animado en el nuevo punto clave.
Hay un punto interesante aquí. Es posible que se sorprenda de que, por alguna razón, hayamos creado nuevos puntos clave en la pista de animación en lugar de colocar un marcador en el cuadro deseado y simplemente mover el título animado al lugar requerido. Sin embargo, en este caso, habríamos movido toda la ruta de nuestro título, junto con el inicio, el final y todos los puntos clave intermedios, a una ubicación diferente. Intente hacer esto y comprenderá todo usted mismo.
Crear una ruta manualmente colocando puntos clave en la pista de animación y estableciendo nuevos parámetros para el elemento animado en estos puntos clave solo es adecuado para casos relativamente simples. De hecho, ¡crea algo más complejo que un simple arco de esta manera! Además, ni siquiera un diseñador web experimentado creará exactamente la trayectoria que necesita la primera vez. Sólo para estos casos, Dreamweaver ofrece una maravillosa oportunidad para simplemente dibujar la ruta deseada en la ventana del documento. Al mismo tiempo, él mismo formará una pista de animación y colocará en ella la cantidad requerida de puntos clave.
Probemos esta oportunidad. Primero hagamos algunos pasos preparatorios. En primer lugar, seleccionemos el último punto clave (final) de la trayectoria y recordemos o anotemos las coordenadas finales del rumbo. Esto es necesario para que luego, cuando creemos una nueva animación, podamos posicionarla con precisión. Después de esto, eliminaremos la pista de animación del título, pero dejaremos la pista de animación de su sombra. Para hacer esto, seleccione la pista requerida y seleccione Eliminar objeto en el menú contextual. Ahora solo queda colocar el título al comienzo de la trayectoria prevista y podrá ponerse manos a la obra.
Seleccione el título y haga clic derecho sobre él. En el menú contextual que aparece, seleccione Ruta de registro. También puede seleccionar Grabar ruta de capa en el menú contextual del panel Líneas de tiempo; Este elemento estará disponible si se selecciona algún elemento libre en la ventana del documento. Además, el elemento Grabar ruta de capa también está disponible en el submenú Línea de tiempo del menú Modificar. Como puede ver, Dreamweaver le ofrece varias opciones para realizar sus elecciones.
¿Qué pasa después de esto? Nada. Además del hecho de que cuando mueves un título, lo seguirá una delgada línea gris: Dreamweaver comenzará a rastrear y registrar su trayectoria. Y en cuanto sueltes el botón del ratón, posicionando el título al final de su recorrido, se creará una nueva pista de animación. Después de esto, todo lo que tienes que hacer es establecer las coordenadas del título en su punto final, usando los valores grabados (memorizados) anteriormente, y “estirar” o “estrechar” la pista.
Arroz. 12.10. Trayectoria compleja
animación de la sombra para que sea igual a la trayectoria de su "maestro", de lo contrario la sombra aparecerá antes o después de que el título haya completado su recorrido sinuoso.
Puedes ver el resultado obtenido en la Fig. 12.10. Guarde la página default2.htm, ábrala en un navegador web y observe el resultado de su trabajo.
Bueno, eso es todo. Echamos un vistazo a las características principales que ofrece Dreamweaver para crear animaciones. De manera similar se crean animaciones más complejas, que involucran muchos elementos que se mueven en conjunto a lo largo de diferentes caminos. Sólo entonces tendrás un poco más de trabajo por hacer para establecer trayectorias, establecer parámetros en puntos clave de la animación y coordinar el movimiento de los elementos animados.
Ahora veremos algunas de las capacidades que Dreamweaver ofrece a los animadores web. Le ayudarán a hacer su trabajo más rápido y más fácilmente.
Control de animación
Ya sabes que Dreamweaver te permite crear múltiples animaciones que se ejecutan simultáneamente y son independientes entre sí. Pueden funcionar tanto de forma sincrónica como asincrónica, creando verdaderos bailes circulares de elementos animados en una página web. Por supuesto, si hay pocos elementos animados en la página, puedes arreglártelas con una sola animación. Pero si su número supera la docena, es mucho más conveniente trabajar con varias animaciones independientes, cada una de las cuales cubre un pequeño grupo de elementos, que intentar "comprimirlos" en una sola animación. Pero esto es cuestión de gustos...
Ahora veamos los controles de estas animaciones independientes.
Ya sabes que el panel Líneas de tiempo solo muestra una animación a la vez. Para cambiar a otro, seleccione el elemento correspondiente de la ya familiar lista combinada de animaciones que se muestra en la Fig. 12.2.
Para crear una nueva animación, seleccione Agregar línea de tiempo en el menú contextual del panel Líneas de tiempo. También puede seleccionar el mismo elemento en el submenú Línea de tiempo del menú Modificar. Si ahora abre el cuadro combinado Animaciones, verá que hay un nuevo elemento en él.
De forma predeterminada, Dreamweaver asigna nombres de línea de tiempo a las animaciones recién creadas. Si desea darle a una animación un nombre más significativo, ingréselo directamente en el cuadro combinado de animación. Otra forma es seleccionar el elemento Cambiar nombre de línea de tiempo, ubicado en el menú contextual del panel Líneas de tiempo y en el submenú Línea de tiempo del menú Modificar. Después de esto, aparecerá el cuadro de diálogo Cambiar nombre de línea de tiempo en la pantalla (Fig. 12.11). Ingrese un nuevo nombre de animación en el campo de entrada único de este cuadro de diálogo y haga clic en Aceptar.
Arroz. 12.11. Cuadro de diálogo Cambiar nombre de línea de tiempo
Para eliminar una animación innecesaria, cambie a ella usando la lista de animaciones y seleccione Eliminar línea de tiempo, ubicado en el menú contextual del panel Líneas de tiempo y en el submenú Línea de tiempo del menú Modificar. Sin embargo, tenga en cuenta que la primera animación que Dreamweaver crea cuando abre por primera vez el panel Líneas de tiempo no se puede eliminar; Dreamweaver simplemente la borrará en lugar de eliminarla.
En la parte superior del panel Líneas de tiempo hay varios controles con los que aún no estamos familiarizados. Veamos algunos de ellos.
El campo de entrada Fps se utiliza para establecer la velocidad de fotogramas de la animación, lo que determina la velocidad de su reproducción. Este valor se mide en fotogramas por segundo (en inglés, fotogramas por segundo o fps). El valor predeterminado es 15.
La casilla de verificación Autoplay ya te resulta familiar. Le indica a Dreamweaver que agregue un script al código de la página que inicia la animación tan pronto como la página se carga en la ventana del navegador web. Esta casilla de verificación está deshabilitada de forma predeterminada y los nuevos usuarios de Dreamweaver a menudo olvidan habilitarla. Entonces, si su animación no funciona por algún motivo, primero que nada, verifique si ha habilitado esta casilla de verificación.
La casilla de verificación Bucle repite la animación. Si está habilitado, la animación se reproducirá un número infinito de veces. Si lo activa, Dreamweaver mostrará uno más de sus innumerables mensajes; por ahora solo ciérralo. De forma predeterminada, esta casilla de verificación está desactivada.
Y finalmente, un grupo de tres botones y un campo de entrada, ubicado a la derecha del cuadro combinado de animación, sirve para moverse entre fotogramas individuales. Veámoslo más de cerca (figura 12.12).
Arroz. 12.12. Un conjunto de controles utilizados para moverse entre fotogramas de animación.
Los botones con flechas que apuntan en diferentes direcciones le permitirán moverse por fotogramas individuales de la animación. Supongamos que ha seleccionado el primer punto clave de la animación (el comienzo de la trayectoria), ubicado en el primer cuadro. Si hace clic en el botón de flecha derecha, pasará al segundo cuadro. En este caso, en el segundo cuadro de animación en el panel Líneas de tiempo, se establecerá el marcador del cuadro seleccionado y el título animado en la ventana del documento se moverá un "salto". Si hace clic más en el botón de flecha hacia la derecha, avanzará hacia el final del camino. Si hace clic en el botón de flecha izquierda, pasará al cuadro anterior.
Puede utilizar el botón de flecha hacia la derecha para obtener una vista previa de la animación creada directamente en la ventana del documento, sin abrir la página en un navegador web. Para hacer esto, coloque el cursor del mouse sobre él, presione el botón izquierdo y no lo suelte. En este caso, avanzará de un cuadro a otro a lo largo de la trayectoria; En el panel Líneas de tiempo, un marcador se moverá a lo largo de la pista y, en la ventana del documento, se moverá un elemento animado. Suelta el botón cuando la animación se haya "desplazado" hasta el final. Desafortunadamente, Dreamweaver no ofrece una mejor manera de obtener una vista previa de las animaciones.
El botón con una flecha hacia la izquierda que apunta a un obstáculo se utiliza para pasar rápidamente al primer cuadro.
Si necesita saltar directamente a algún cuadro de animación, conocido por su número, simplemente puede ingresar ese número en el campo de entrada ubicado entre los botones de flecha y presionar la tecla. El marco deseado se encontrará y resaltará inmediatamente.
Hemos ordenado las animaciones. Ahora veamos qué ofrece Dreamweaver para gestionar pistas y fotogramas individuales.
Puede cortar y copiar pistas al portapapeles de Windows, así como pegarlas en otros canales de la animación actual o en otras animaciones de cualquier página web. Para cortar la pista seleccionada, seleccione el elemento Cortar en el menú contextual o en el menú Editar, o presione la combinación de teclas +. Para copiar la pista seleccionada, seleccione Sora en los mismos menús o presione la combinación de teclas +. Bueno, para pegar una pista en el portapapeles en uno de los canales ya ocupados, agregándola a una pista existente, seleccione Pegar o presione la combinación de teclas +. Lamentablemente, no podrás insertar una pista en un canal gratuito.
¡Atención!
Dreamweaver coloca no sólo la pista de animación en el portapapeles, sino también el elemento libremente posicionable para el que fue creado, junto con todos sus parámetros y contenido. Y si inserta esa pista en otra página que ya contiene un elemento que se puede colocar libremente con el mismo nombre, Dreamweaver le asigna esa pista. Si no existiera tal elemento en la página, se creará a imagen y semejanza del copiado.
Una vez que haya pegado la nueva pista desde el portapapeles, es posible que desee asignarla a otro elemento gratuito. Dreamweaver también te ofrece esa opción. Seleccione Cambiar objeto en el menú contextual o el submenú Línea de tiempo del menú Modificar. Después de esto, aparecerá en la pantalla el cuadro de diálogo Cambiar objeto que se muestra en la Fig. 1. 12.13. Seleccione el elemento que desee en la lista desplegable Objeto a animar y haga clic en Aceptar.
Arroz. 12.13. Cuadro de diálogo Cambiar objeto
En ocasiones es necesario estirar algún tramo de la vía en varios marcos o, por el contrario, estrecharlo. Para hacer esto, use los elementos Agregar fotograma y Eliminar fotograma ubicados en el menú contextual y el submenú Línea de tiempo del menú Modificar. El primer elemento inserta un cuadro en el lugar de la pista donde se encuentra el marcador de cuadro seleccionado y el segundo elemento elimina el cuadro de allí.
Se trata de animar elementos que se pueden posicionar libremente.
Animación de imágenes gráficas.
Arriba vimos la animación de elementos colocados libremente. En teoría, son los únicos que se pueden animar, porque sólo ellos se pueden colocar en cualquier lugar y tener cualquier tamaño. Esto significa que sólo ellos pueden moverse por la página, cambiar su tamaño y hacerse invisibles. Esto no se puede hacer con elementos fijos ordinarios.
Es cierto que hay una excepción a esta regla. Puede animar gráficos y Dreamweaver ofrece la posibilidad de hacerlo. Pero sólo el nombre del archivo mostrado puede cambiar durante la animación (el atributo SRC de la etiqueta ).
Sin embargo, incluso esto suele ser suficiente. De hecho, al cambiar el nombre de un archivo gráfico, puede crear animaciones con fotogramas que cambian rápidamente. (De hecho, de esta manera puede reproducir una película real en una página web sin tener que crear un archivo de video, incluso en formato "GIF animado"). Solo necesitará abastecerse de la cantidad requerida de archivos gráficos que contengan diferentes fases de la animación, pero esto ya es un problema para el artista web.
¿Cómo animar una imagen gráfica? Muy sencillo. Creemos una nueva página y llamémosla 12.1.htm. No tendrá relación con el sitio Sitio de muestra 1, pero tomará prestados archivos gráficos de él.
Coloque un gráfico en esta página. Configure el archivo mostrado en Email.gif, ubicado en la carpeta Imágenes, que es una subcarpeta de la carpeta Samplel (que contiene los archivos del sitio de muestra 1). Esto es muy sencillo, por lo que no tiene sentido entrar en largas explicaciones.
Ahora creemos una nueva pista de animación para la imagen recién creada. Selecciónelo y seleccione el elemento Agregar objeto en el menú contextual del panel Líneas de tiempo (no existe tal elemento en el menú contextual de la imagen gráfica). Luego, Dreamweaver mostrará otro mensaje advirtiéndole que solo puede controlar la configuración del nombre del archivo de visualización (Figura 12.14). Ciérrelo haciendo clic en Aceptar.
Arroz. 12.14. Mensaje de advertencia de Dreamweaver después de agregar gráficos a una animación
Externamente, la pista de animación creada para una imagen gráfica no se diferencia de la de un elemento colocado libremente. Por lo tanto, el autor aconseja establecer un nombre único para cada elemento animado de la página. El nombre de la imagen gráfica se puede especificar en el campo de entrada Imagen del editor de propiedades.
Establezcamos la duración de la animación en cinco segundos o 75 fotogramas (5 segundos por 15 fotogramas por segundo). Para hacer esto, arrastre el borde derecho (el segundo punto clave) de la pista hacia la izquierda hasta la marca "75" en la escala de tiempo. Y configuremos un nuevo archivo gráfico que se mostrará cuando se alcance el segundo punto clave. Para hacer esto, verifiquemos si el segundo punto está seleccionado y cambiemos el contenido del campo de entrada Src del editor de propiedades para que apunte al archivo Email2.gif, también ubicado en la carpeta Pics, anidado en la carpeta Samplel. Este archivo se mostrará cuando se llegue al final... no, no la trayectoria, sino el track (al fin y al cabo, la imagen no se mueve).
Todo lo que queda es habilitar la casilla de verificación de reproducción automática y cargar la página 12.1.htm en un navegador web. Cinco segundos después de que la página termine de cargarse, la imagen que se muestra en ella cambiará: nuestra animación está funcionando.
Si necesita cambiar varias imágenes (fases de animación) en secuencia, cree una cantidad adecuada de puntos clave en la pista. En cada uno de estos puntos clave, establezca el campo de entrada Src en el valor deseado.
Desventajas de la animación basada en Web y cómo superarlas
Finalmente, hablemos de las desventajas del método que probamos para crear animaciones en páginas web. Y descubriremos cuándo vale la pena usarlo, cuándo puede limitarse a archivos de vídeo normales y cuándo puede prescindir de cualquier animación.
La principal desventaja de las animaciones basadas en scripts web es... no, en absoluto la incompatibilidad con programas de navegador web más antiguos. (Aunque también hay que tener en cuenta la incompatibilidad). Se trata del "pesado" del software necesario para procesarlos, su intensidad de recursos y su rendimiento no muy alto. Esto puede ser crítico si muchos de los visitantes de su sitio web tienen computadoras viejas y de bajo consumo en las que se ejecutará muy lentamente, lo que provocará que la animación se reproduzca entrecortadamente. En todo caso...
Como recordará, los scripts web no los ejecuta el navegador web en sí, sino un programa intérprete especial, que es un programa externo al navegador web. El intérprete que descifra el código del script y lo ejecuta exige bastante recursos. No solo necesita almacenar el código del script, fuente y descifrado, y sus datos en algún lugar, sino que también necesita procesar y almacenar los datos del propio script. Y cuanto más grandes y complejos sean los scripts, más recursos del sistema necesitará el intérprete.
Como solución a este problema, sólo podemos desaconsejar la creación de animaciones innecesariamente complejas. Sin embargo, si realmente no puede prescindir de ellos, debería pensar en crear una versión especial del sitio sin utilizar animación ni scripts. Entonces los propietarios de programas antiguos y (o) computadoras de bajo consumo podrán visitarlo, y los felices propietarios de tecnología moderna disfrutarán de la versión "completa" del sitio. Este enfoque se utiliza con mucha frecuencia; Casi todos los proyectos grandes y populares de Internet tienen una versión "sin script" solo para este caso.
Hay otra manera. Si su animación es una serie de imágenes secuenciales o un elemento que se mueve en un área pequeña de la página, intente implementarla como un video. Casi todos los programas de navegador web, a excepción de los más antiguos, admiten el formato "archivo GIF animado". Este formato se utiliza desde hace tanto tiempo en los gráficos web que incluso ha superado algunos estándares, como por ejemplo el estándar para los banners publicitarios. Existe una gran cantidad de programas para crear animaciones en formato GIF. Y para colocar una animación de este tipo en una página web, solo necesita una etiqueta familiar. - ¡Y sin guiones!
Del mismo modo, puedes solucionar el problema de la incompatibilidad con programas más antiguos.
Pero hay otro problema cuya solución es muy difícil. Este es un problema de derechos de autor del código de software. Más precisamente, el problema de proteger estos mismos derechos de autor.
Veamos los programas comunes que utiliza. Podría ser el popular editor de texto Microsoft Word, el reproductor multimedia Nullsoft WinAmp, el juego Quake 3 o el propio sistema operativo Windows. Todos estos programas fueron creados utilizando lenguajes de programación compilados, es decir, un programa escrito en algún lenguaje de programación (C++, Pascal o Assembler) se compiló en un conjunto de instrucciones en el procesador central y se guardó en un archivo con extensión exe. Posteriormente, si el usuario ejecuta este archivo, será ejecutado directamente por el procesador central, sin la participación de ningún programa intérprete.
Digamos que escribiste un programa en un lenguaje compilado y quieres venderlo. Y venderlo por mucho dinero, porque el programa utiliza varios de sus propios conocimientos. Si un hacker malintencionado quiere ver ahora cómo funciona su programa, fracasará. El hecho es que leer el código de máquina del procesador no es para personas débiles de corazón. No siempre es posible entender simplemente lo que está haciendo. Y es absolutamente imposible reconstruir el código fuente del programa a partir de él. (Aunque, si realmente lo desea, puede intentarlo. Sin embargo, tampoco se garantiza un resultado positivo de estos intentos).
Los programas de script web están escritos en lenguajes de programación interpretados. Esto significa que dichos programas se encuentran directamente en forma de código fuente en la página web. Cualquier programador de JavaScript puede acceder fácilmente a este código y descubrir cómo funciona el programa. Esto significa que no se pueden ocultar secretos en el código JavaScript.
Sólo hay una salida a esta situación: no implementar algoritmos propietarios complejos como un script. Internet es un entorno abierto por definición, y distribuir información secreta y cerrada a través de él es muy problemático. Por otro lado, por eso son secretos, para protegerlos de miradas indiscretas, de los que abundan en la World Wide Web.
En realidad, hay un inconveniente más, pero no es inherente a la animación en sí basada en scripts web, sino al enfoque que ofrece Dreamweaver. El hecho es que el conjunto de scripts web necesarios para crear animaciones se coloca en la sección del encabezado (etiqueta) de la página HTML. De esto se deduce que si utiliza plantillas para crear páginas, puede crear elementos animados (y en general, cualquier elemento colocado libremente) solo en la plantilla misma, pero no en las páginas creadas en base a ella. Dreamweaver simplemente no te permitirá hacer esto. De hecho, la sección del encabezado es un área inmutable y Dreamweaver no le permitirá colocar ningún código en un área inmutable. Tenga esto en cuenta. Aunque, por supuesto, puedes rechazar la animación o "desanclar" la página de la plantilla y luego hacer lo que quieras con ella.
La película ha terminado. ¡Viva el cine!
Como puede ver, crear animaciones en una página web es una tarea bastante sencilla, a menos, por supuesto, que esté trabajando en el entorno Dreamweaver. Simplemente establece la trayectoria del elemento deseado y Dreamweaver hace el resto del trabajo de “infundirle” “vida”. Si desea ver qué le hace a su página en este caso, mire el código fuente HTML en la vista de código. Se sorprendería de lo mucho que Dreamweaver ha hecho para que el título de su página se mueva y de los enormes scripts web que ha creado para lograr precisamente eso.
Scripts web... ¡Ya hemos hablado mucho de ellos! ¿Pueden hacer algo más que mover elementos de la página hacia adelante y hacia atrás? ¡Ciertamente! Sólo el próximo capítulo estará dedicado únicamente a los scripts web...
